:root {
  --paper: #fcfbf7;
  --surface: #ffffff;
  --ink: #17342f;
  --muted: #4f6762;
  --primary: #006b5a;
  --primary-dark: #004d42;
  --soft: #e7f1ed;
  --accent: #b34b24;
  --link: #005ea8;
  --line: #c9d8d3;
  --shadow: 0 18px 48px rgba(23, 52, 47, .11);
  --radius: 18px;
  --wrap: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 4px solid #ffbf47;
  outline-offset: 4px;
}

h1, h2, h3 {
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6vw, 5rem); margin: .25em 0 .35em; max-width: 12ch; }
h2 { font-size: clamp(2rem, 4vw, 3.35rem); margin: 0 0 .5em; max-width: 19ch; }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); margin: 0 0 .55em; }
p, li { max-width: 72ch; }
.wrap { width: var(--wrap); margin-inline: auto; }

.skip-link {
  position: fixed;
  z-index: 1000;
  left: 16px;
  top: 12px;
  padding: 12px 18px;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  background: rgba(252, 251, 247, .96);
  border-bottom: 1px solid rgba(23, 52, 47, .13);
  backdrop-filter: blur(12px);
}
.header-inner { min-height: 88px; display: flex; align-items: center; gap: 24px; }
.brand { display: block; flex: 0 0 300px; height: 68px; overflow: hidden; }
.brand-crop { position: relative; display: block; width: 300px; height: 68px; overflow: hidden; }
.brand-crop img { position: absolute; width: 315px; max-width: none; left: -7px; top: -23px; }
.site-header nav { margin-left: auto; }
.site-header ul { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-header nav a { display: block; padding: 12px 11px; color: var(--ink); font-size: .93rem; font-weight: 650; text-decoration: none; border-radius: 9px; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { background: var(--soft); }
.menu-toggle { display: none; min-width: 48px; min-height: 48px; padding: 8px 14px; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 9px; font: inherit; font-weight: 700; }

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  color: #fff;
  background: var(--primary);
  border: 2px solid var(--primary);
  border-radius: 10px;
  font-weight: 750;
  text-decoration: none;
  line-height: 1.2;
}
.button:hover { color: #fff; background: var(--primary-dark); border-color: var(--primary-dark); }
.button-secondary { color: var(--primary-dark); background: transparent; border-color: var(--primary); }
.button-secondary:hover { color: #fff; }
.header-cta { white-space: nowrap; }
.action { display: inline-block; margin: .6rem .65rem .25rem 0; }

.hero { position: relative; overflow: hidden; padding: clamp(70px, 10vw, 132px) 0; background: linear-gradient(135deg, #fff 0%, var(--paper) 52%, var(--soft) 100%); }
.hero::after { content: ""; position: absolute; width: 430px; height: 430px; right: -160px; bottom: -230px; border: 54px solid rgba(0,107,90,.11); border-radius: 50%; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: clamp(40px, 8vw, 100px); align-items: center; }
.hero p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.eyebrow { color: var(--primary-dark); font-size: .82rem !important; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.hero-note { position: relative; z-index: 1; align-self: center; display: grid; gap: 14px; padding: 38px; color: #fff; background: var(--ink); border: 0; border-top: 8px solid var(--accent); border-radius: 24px; box-shadow: 0 20px 50px rgba(23, 52, 47, .2); }
.hero-note strong { color: #fff; font-size: 1.65rem; line-height: 1.15; }
.hero-note span { color: #dbe8e4; font-size: 1.05rem; }

.page-hero { padding: clamp(66px, 9vw, 112px) 0 58px; background: linear-gradient(135deg, #fff, var(--soft)); border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 18ch; font-size: clamp(2.5rem, 6vw, 4.6rem); }
.page-hero > .wrap > p:last-child { max-width: 70ch; font-size: 1.16rem; color: var(--muted); }
.breadcrumb { padding-top: 24px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .96rem; }
.breadcrumb li + li::before { content: "›"; margin-right: 8px; color: var(--muted); }
.breadcrumb a { color: var(--link); text-underline-offset: 3px; }
.page-summary { max-width: 70ch; font-size: 1.16rem; color: var(--muted); }
.page-image { margin-top: 42px; margin-bottom: 18px; }
.image-frame { position: relative; overflow: hidden; border-radius: 26px; background: var(--soft); box-shadow: 0 18px 48px rgba(23,52,47,.13); }
.page-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ai-label { position: absolute; right: 14px; bottom: 14px; padding: 7px 11px; border-radius: 999px; color: #fff; background: rgba(23,52,47,.9); font-size: .78rem; font-weight: 750; letter-spacing: .01em; }
.page-image figcaption { margin: 9px 4px 0; color: #49645f; font-size: .84rem; }
.notice { max-width: 72ch; margin: 24px 0; padding: 20px 24px; background: #fff8e8; border-left: 7px solid var(--accent); border-radius: 0 12px 12px 0; }

.section { padding: clamp(68px, 9vw, 116px) 0; border-top: 1px solid rgba(23,52,47,.08); }
.section:nth-of-type(even) { background: #fff; }
.section p:first-of-type { font-size: 1.12rem; }
.section ul { padding-left: 1.3em; }
.section li { margin: .35em 0; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.card, .subsection {
  padding: clamp(24px, 4vw, 36px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(23, 52, 47, .06);
}
.section:nth-of-type(even) .card { background: var(--paper); }
.card h3::before { content: ""; display: block; width: 44px; height: 6px; margin-bottom: 18px; background: var(--accent); border-radius: 10px; }
.card p:last-child { margin-bottom: 0; }
.subsection { margin-top: 30px; border-left: 7px solid var(--primary); }
#der-barriereblick, #wir-sehen-wo-menschen-nicht-weiterkommen { background: var(--ink); color: #fff; }
#der-barriereblick h2, #der-barriereblick h3, #wir-sehen-wo-menschen-nicht-weiterkommen h2, #wir-sehen-wo-menschen-nicht-weiterkommen h3 { color: #fff; }
#der-barriereblick .subsection, #wir-sehen-wo-menschen-nicht-weiterkommen .subsection { background: rgba(255,255,255,.08); border-color: #75c8b8; }

.site-footer { padding: 56px 0 24px; color: #fff; background: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; }
.footer-logo-frame { position: relative; display: block; width: 300px; max-width: 100%; height: 78px; overflow: hidden; background: transparent; }
.footer-logo-frame img { position: absolute; display: block; width: 315px; max-width: none; height: auto; left: -7px; top: -18px; filter: invert(1) grayscale(1) brightness(2.2); mix-blend-mode: screen; }
.footer-brand p { margin: 12px 0 0; }
.footer-brand .footer-slogan { margin-top: 22px; color: #fff; font-size: 1.14rem; }
.site-footer strong { font-size: 1.35rem; }
.site-footer p { color: #dbe8e4; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.site-footer a { color: #fff; }
.copyright { margin-top: 34px; padding-top: 20px; color: #dbe8e4; border-top: 1px solid rgba(255,255,255,.25); font-size: .9rem; }

@media (max-width: 1040px) {
  .header-cta { display: none; }
  .site-header nav a { padding-inline: 8px; font-size: .88rem; }
}

@media (max-width: 860px) {
  :root { --wrap: min(100% - 28px, 720px); }
  .header-inner { min-height: 76px; flex-wrap: wrap; justify-content: space-between; gap: 0; }
  .brand { flex-basis: 245px; height: 62px; }
  .brand-crop { width: 245px; height: 62px; }
  .brand-crop img { width: 257px; left: -6px; top: -19px; }
  .menu-toggle { display: inline-flex; align-items: center; }
  .site-header nav { display: none; flex: 1 0 100%; margin: 0; padding: 8px 0 18px; }
  .site-header nav.is-open { display: block; }
  .site-header ul { display: grid; }
  .site-header nav a { padding: 13px; font-size: 1rem; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-note { max-width: 480px; border-radius: var(--radius); }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  h1 { font-size: clamp(2.35rem, 13vw, 3.65rem); }
  .cards, .footer-grid { grid-template-columns: 1fr; }
  .section { padding-block: 62px; }
  .card, .subsection { padding: 24px; }
  .site-footer nav { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .button, .card, .subsection { border: 2px solid ButtonText; }
}


/* KlarNutzbar: klarer Hinweis vor dem Dienstleistungsstart */
.launch-notice {
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  background: var(--soft);
  border-top: 4px solid var(--accent);
  border-bottom: 1px solid var(--line);
}
.launch-notice .wrap { max-width: 960px; }
.launch-notice .eyebrow { margin: 0 0 .3rem; }
.launch-notice #start-hinweis {
  margin: 0 0 .45rem;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.3;
}
.launch-notice p { margin: .35rem 0; }
.launch-notice .action { margin-top: .85rem; }


/* KlarNutzbar: klarer Hinweis vor dem Dienstleistungsstart */
.launch-notice {
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  background: var(--soft);
  border-top: 4px solid var(--accent);
  border-bottom: 1px solid var(--line);
}
.launch-notice .wrap { max-width: 960px; }
.launch-notice .eyebrow { margin: 0 0 .3rem; }
.launch-notice #start-hinweis {
  margin: 0 0 .45rem;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.3;
}
.launch-notice p { margin: .35rem 0; }
.launch-notice .action { margin-top: .85rem; }

.launch-notice .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}
.launch-notice__text { flex: 1 1 600px; }
.launch-notice__text p { margin: .25rem 0; }
.launch-notice .action { margin: 0; flex: 0 0 auto; }

/* BarriereBlick: öffentliches Prüfzeichen und anonymisierter Praxisfall */
.bb-example{display:grid;grid-template-columns:minmax(300px,430px) 1fr;gap:32px;align-items:start;margin-top:28px}
.bb-mark{margin:0;overflow:hidden;border:5px solid #063f3a;border-radius:22px;background:#fff;box-shadow:0 10px 28px rgba(6,63,58,.12)}
.bb-mark-head{display:flex;align-items:center;gap:14px;padding:18px 20px;background:#063f3a;color:#fff}
.bb-mark-head>span:last-child{display:flex;flex-direction:column}
.bb-mark-head strong{font-size:1.45rem;line-height:1.1}
.bb-mark-head small{color:#d9efea}
.bb-eye{font-size:2.4rem;line-height:1;color:#f36b2b}
.bb-mark-body{display:grid;grid-template-columns:1fr 1.3fr;gap:20px;padding:22px}
.bb-value{display:flex;align-items:baseline;gap:8px;border-right:2px solid #ccd9d5}
.bb-value strong{font-size:4.8rem;line-height:1;color:#063f3a}
.bb-value span{font-weight:700;color:#063f3a}
.bb-result{display:flex;flex-direction:column;gap:7px}
.bb-result>strong{font-size:1.35rem;color:#8f3d1d}
.bb-result>span{font-weight:700}
.bb-result small{color:#52645e}
.bb-example-text dl{display:grid;grid-template-columns:minmax(130px,180px) 1fr;gap:9px 18px}
.bb-example-text dt{font-weight:700}
.bb-example-text dd{margin:0}
.notice{margin-top:28px;padding:18px;border-left:5px solid #f36b2b;background:#fff7f1}
@media(max-width:800px){.bb-example{grid-template-columns:1fr}.bb-mark-body{grid-template-columns:1fr}.bb-value{border-right:0;border-bottom:2px solid #ccd9d5;padding-bottom:16px}.bb-example-text dl{grid-template-columns:1fr}.bb-value strong{font-size:4rem}}