/* CareSpective v4. Farben aus Logo und Roll-Up: Tiefblau der Überschrift, Logo-Türkis, zwei Wellentöne.
   Hintergrund immer weiß wie das Original, auch im Dunkelmodus. Blau nur als Akzent. */

:root {
  --navy: #00545e;          /* Roll-Up, Überschrift "Herzlich willkommen", im Export gemessen */
  --navy-soft: #3f6469;     /* Fließtext zweiter Ordnung, 6,5:1 auf Weiß */
  --teal: #2a9aa7;          /* Logo, Farbcode.txt der Kundin */
  --teal-ink: #1b6c77;      /* Türkis für Text und Links auf Weiß */
  --wave-1: #8ec5cc;        /* Roll-Up, helle Welle, gemessen */
  --wave-2: #62aebc;        /* Roll-Up, mittlere Welle */
  --mist: #edf5f6;
  --green: #46916a;          /* zweite Akzentfarbe, dezent (Transkript 32:19): Haken, Wellenlinie */
  --para: #3a8f9d;          /* große Paragrafenzahlen, mindestens 3:1 */
  --paper: #ffffff;
  --line: #cfe2e6;

  --serif: "Alegreya", "Source Serif 4", Georgia, "Times New Roman", serif;
  --label: "Jost", var(--sans);
  --sans: "Atkinson Hyperlegible Next", "Source Sans 3", "Segoe UI", Arial, sans-serif;

  --wrap: 84rem;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --space: clamp(4rem, 9vw, 7rem);
  --radius: 14px;
  --leaf: clamp(40px, 6vw, 96px);   /* v5: ein Formmotiv, nur die Ecke oben links gerundet, wie beim Hero-Video */
  --ease: cubic-bezier(.22, .7, .2, 1);
  color-scheme: light;
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font: 400 1.125rem/1.65 var(--sans);
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--teal-ink); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 450; line-height: 1.12; margin: 0 0 .6em; color: var(--navy); font-optical-sizing: auto; letter-spacing: -.005em; }
h1 { font-size: clamp(2.35rem, 1.4rem + 4.2vw, 4.4rem); font-weight: 400; letter-spacing: -.02em; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem); font-weight: 420; letter-spacing: -.015em; }
h3, .h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); }
.h4, h4 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
.nums { white-space: nowrap; }
.lead { font-size: 1.2rem; line-height: 1.6; max-width: 38em; }

.skip { position: absolute; right: 1rem; top: -4rem; z-index: 100; background: var(--navy); color: var(--paper); padding: .6rem 1rem; border-radius: 8px; }
.skip:focus { top: 1rem; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--space); }
.band--rule { border-top: 1px solid var(--line); }

.section-head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head p { color: var(--navy-soft); }

/* Knöpfe und Links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .7rem 1.4rem; border-radius: 999px;
  font: 600 1rem/1.2 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, transform .2s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--solid { background: var(--navy); color: var(--paper); }
.btn--solid:hover { background: var(--teal-ink); }
.btn--line { color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.btn--line:hover { background: var(--navy); color: var(--paper); }
.link { font-weight: 600; color: var(--teal-ink); }

/* Kopf */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top__inner { max-width: 94rem; min-height: 6rem; margin-inline: auto; padding: .7rem var(--gutter); display: flex; align-items: center; gap: 1.5rem; }
.top__logo img { width: auto; height: 2.4rem; }
.nav { margin-right: auto; }
.nav ul { display: flex; gap: .1rem; list-style: none; }
.nav a { display: block; padding: .5rem .65rem; border-radius: 8px; color: var(--navy); text-decoration: none; font-weight: 500; font-size: 1rem; white-space: nowrap; }
.nav a:hover { color: var(--teal-ink); }
.nav a[aria-current="page"] { color: var(--teal-ink); box-shadow: inset 0 -2px 0 var(--teal); border-radius: 0; }
.top__tel { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--navy); text-decoration: none; white-space: nowrap; font-size: 1rem; }
.top__tel svg { width: 1.1rem; fill: none; stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; }
/* Sprachumschalter (Deutsch, Englisch, Türkisch, Russisch, Rumänisch, Kurdisch, Farsi) */
.langs { position: relative; }
.langs__btn { list-style: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .4rem .8rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--navy); font: 600 .95rem var(--sans); cursor: pointer; }
.langs__btn::-webkit-details-marker { display: none; }
.langs__btn:hover { color: var(--teal-ink); }
.langs__btn svg { flex: none; width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--teal); stroke-width: 1.6; }
.langs__list { position: absolute; left: 0; top: calc(100% + .4rem); z-index: 30; min-width: 11rem; list-style: none; margin: 0; padding: .4rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgb(0 84 94 / .12); }
.langs__list a { display: block; padding: .55rem .8rem; border-radius: 8px; color: var(--navy); text-decoration: none; font-weight: 500; white-space: nowrap; }
.langs__list a:hover { color: var(--teal-ink); }
.langs__list a[aria-current="true"] { font-weight: 600; color: var(--teal-ink); }
.top__menu { display: none; margin-right: auto; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .4rem 1rem; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--navy); font: 600 1rem var(--sans); cursor: pointer; }
.top__menu-lines { width: 18px; height: 12px; border-block: 2px solid currentColor; position: relative; }
.top__menu-lines::after { content: ""; position: absolute; right: 0; left: 0; top: 3px; border-top: 2px solid currentColor; }
@media (max-width: 72rem) {
  .nav, .top__tel { display: none; }
  .top__menu { display: inline-flex; margin-right: .5rem; }
  .langs { margin-right: auto; }
  /* Ohne JavaScript gibt es kein Menüfenster: dann stehen die Links unter dem Logo */
  html:not(.js) .top__inner { flex-wrap: wrap; }
  html:not(.js) .top__menu { display: none; }
  html:not(.js) .nav { display: block; width: 100%; margin-right: 0; }
  html:not(.js) .nav ul { flex-wrap: wrap; }
}

/* Menü auf kleinen Bildschirmen */
.sheet { width: min(100%, 26rem); max-width: 100%; height: 100%; max-height: 100%; margin: 0 auto 0 0; padding: 1.25rem var(--gutter) 2rem; border: 0; background: var(--paper); color: var(--navy); }
.sheet::backdrop { background: rgb(0 84 94 / .45); }
.sheet[open] { animation: sheet-in .35s var(--ease); }
@keyframes sheet-in { from { transform: translateX(-100%); } }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.sheet__head img { height: 2.2rem; width: auto; }
.sheet__close { min-height: 2.75rem; padding: .4rem 1rem; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--navy); font: 600 1rem var(--sans); cursor: pointer; }
.sheet__links { list-style: none; margin-bottom: 2rem; }
.sheet__links a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--line); font: 420 1.6rem/1.2 var(--serif); color: var(--navy); text-decoration: none; }
.sheet__links a[aria-current="page"] { color: var(--teal-ink); }
.sheet__tel { font: 600 1.5rem var(--sans); color: var(--navy); text-decoration: none; }
.sheet__note { color: var(--navy-soft); margin-top: .25rem; }

/* Wellen wie auf dem Roll-Up */
.wave { display: block; width: 100%; height: clamp(40px, 6vw, 90px); }
/* v5: die Welle ist ein durchgehendes Band (Kontur) über der weißen Fläche, beide fließen gemeinsam */
.wave-a, .foot__wave .wave-a { fill: none; stroke: var(--wave-1); stroke-width: 14px; vector-effect: non-scaling-stroke; }
.wave-b { fill: var(--paper); }

/* Hero (v5, der eine grosse Moment): Text links in der Satzspalte, Video randlos bis an den rechten Rand,
   fast bildschirmhoch. Die Welle vom Roll-Up schneidet unten ins Bild. */
.hero { position: relative; }
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center;
  padding-right: max(var(--gutter), calc((100% + -1 * var(--wrap)) / 2 + var(--gutter)));
}
.hero__text { padding-block: clamp(3rem, 6vw, 6rem) clamp(4rem, 8vw, 7rem); }
.hero__title { max-width: 12em; margin-bottom: .55em; font-size: clamp(2.6rem, .8rem + 4.7vw, 5.15rem); font-weight: 380; line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.hero__title span { display: block; }
.hero__lead { font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); line-height: 1.65; max-width: 34em; color: var(--navy-soft); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 2.25rem; }
.hero__art { position: relative; align-self: stretch; }
.media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper); }
.hero .media { aspect-ratio: auto; height: calc(100svh + -4.2rem); min-height: 36rem; max-height: 60rem; border-radius: 0 clamp(56px, 8vw, 140px) 0 0; }
.media video, .ablauf__video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero .wave { position: absolute; right: 0; left: 0; bottom: -1px; z-index: 2; }
@media (max-width: 48rem) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 0; padding-right: 0; }
  .hero__text { padding: 2.5rem var(--gutter) 2.5rem; }
  .hero .media { height: min(125vw, 82svh); min-height: 0; aspect-ratio: auto; max-height: none; border-radius: 0 clamp(40px, 12vw, 72px) 0 0; }
}

/* Hero: Kind springt, daraus entsteht das Logo */
.media--sprung { background: var(--paper); } .media__veil { position: absolute; inset: 0; background: var(--paper);   /* reines Weiß hinter dem Logo */ opacity: 0; transition: opacity 1.1s var(--ease); } .media__logo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.f-body, .f-arm { fill: none; stroke: var(--teal); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.f-body { stroke-width: 33; }
.f-arm { stroke-width: 31; }
.f-head { fill: var(--teal); opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.media.is-logo .media__veil { opacity: 1; }
/* Video mit ausblenden, sonst bleibt an der gerundeten Kante eine feine Bildlinie hinter dem weißen Schleier stehen */
.media--sprung video { transition: opacity 1.1s var(--ease); }
.media--sprung.is-logo video { opacity: 0; }
.media.is-logo .f-body { animation: draw 1s var(--ease) forwards; }
.media.is-logo .f-arm { animation: draw .7s var(--ease) .45s forwards; }
.media.is-logo .f-head { animation: drop .9s var(--ease) .75s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes drop {
  0% { opacity: 0; transform: translateY(-70px); }
  45% { opacity: 1; transform: translateY(0) scale(1.06, .9); }
  70% { transform: translateY(-16px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .media.is-logo .f-body, .media.is-logo .f-arm { stroke-dashoffset: 0; }
  .media.is-logo .f-head { opacity: 1; }
}

/* Wer wir sind, mit dem Foto vom Roll-Up */
.about { padding-block: var(--space); }
.about__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.about__photo { margin: 0; }
.about__photo img { width: 100%; max-height: 38rem; object-fit: cover; object-position: 50% 20% ; border-radius: 0 var(--leaf) 0 0; }
.about .lead { color: var(--navy); }
.about p:not(.lead) { color: var(--navy-soft); max-width: 36em; }
@media (max-width: 48rem) {
  .about__grid { grid-template-columns: 1fr; }
  .about__photo img { aspect-ratio: 4 / 3; max-height: none; }
}

/* Ablauf: Schritt anklicken, kleines Video erscheint */
.ablauf__body { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.ablauf__tabs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ablauf__tab { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1rem .25rem; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--navy); font: 500 1.1rem/1.25 var(--sans); text-align: right; cursor: pointer; transition: color .2s; }
.ablauf__tab:hover { color: var(--teal-ink); }
.ablauf__num { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--wave-2); color: var(--teal-ink); font: 420 1.15rem/1 var(--serif); transition: background-color .25s, color .25s; }
.ablauf__tab[aria-selected="true"] { font-weight: 600; }
.ablauf__tab[aria-selected="true"] .ablauf__num { background: var(--navy); color: var(--paper); box-shadow: none; }
.ablauf__panel { padding: 0; }
.ablauf__video { overflow: hidden; aspect-ratio: 16 / 9; border-radius: 0 var(--leaf) 0 0; background: var(--line); margin-bottom: 1.25rem; }
.ablauf__title { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.ablauf__panel p { color: var(--navy-soft); max-width: 36em; }
html:not(.js) .ablauf__tabs { display: none; }
html:not(.js) .ablauf__panel[hidden] { display: block; }
html:not(.js) .ablauf__body { grid-template-columns: 1fr; }
@media (max-width: 56rem) {
  .ablauf__body { grid-template-columns: 1fr; }
  .ablauf__tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1rem; }
  .ablauf__tab { font-size: .98rem; padding: .8rem 0; gap: .6rem; }
}
@media (max-width: 22rem) { .ablauf__tabs { grid-template-columns: 1fr; } }

/* Zitate: Band über die ganze Breite, je Zitat ein Bild, blättert nur per Pfeil */
.haltung { position: relative; display: grid; min-height: clamp(30rem, 78vh, 44rem); overflow: hidden; background: var(--paper); color: var(--navy); isolation: isolate; }
.haltung > * { grid-area: 1 / 1; }
.haltung .quotes { display: grid; }
.haltung .quote { grid-area: 1 / 1; position: relative; display: grid; align-items: center; margin: 0; padding: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.haltung .quote.is-active { opacity: 1; z-index: 1; }
.quote__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 35% ; z-index: -2; }
.haltung .quote::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(-90deg, rgb(255 255 255 / .97) 0%, rgb(255 255 255 / .9) 42%, rgb(255 255 255 / .15) 78%, rgb(255 255 255 / 0) 100%); }
.quote__inner { width: 100%; padding-block: 7rem 8rem; }
.haltung .quote blockquote { margin: 0; max-width: 44rem; }
.haltung .quote p { margin: 0 0 1.5rem; font: 400 clamp(1.7rem, 1rem + 2.6vw, 3.1rem)/1.22 var(--serif); color: var(--navy); text-wrap: balance; }
.haltung .quote p::before { content: "„"; display: block; font: 500 5rem/0.6 var(--serif); color: var(--green); margin-bottom: .6rem; }
.haltung .quote figcaption { color: var(--navy-soft); font-size: 1rem; }
.haltung .quote figcaption strong { display: block; color: var(--navy); font-size: 1.1rem; }
.haltung__top { width: 100%; align-self: start; z-index: 2; padding-top: 2.5rem; pointer-events: none; }
.haltung__label { margin: 0; font: 600 .95rem var(--label); text-transform: uppercase; letter-spacing: .14em; color: var(--teal-ink); }
.haltung__bottom { width: 100%; align-self: end; z-index: 2; padding-bottom: 2.25rem; }
.quotes__controls { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.quotes__count { margin: 0; color: var(--navy-soft); font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: center; }
.round { display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--wave-2); background: var(--paper); color: var(--navy); cursor: pointer; transition: background-color .2s, color .2s; }
.round:hover { background: var(--navy); color: var(--paper); }
.round--light { background: rgb(255 255 255 / .85); }
.round svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html:not(.js) .haltung { display: block; min-height: 0; }
html:not(.js) .haltung .quote { opacity: 1; min-height: 24rem; }
html:not(.js) .haltung__top, html:not(.js) .haltung__bottom { display: none; }
@media (max-width: 40rem) {
  .haltung .quote { display: block; }
  .haltung .quote::before { display: none; }
  .quote__bg { position: relative; inset: auto; height: 15rem; z-index: 0; object-position: 60% 30% ; }
  .haltung { display: block; }
  .quote__inner { padding-block: 1.5rem .5rem; }
  .haltung__top { position: absolute; top: 0; right: 0; padding-top: 1rem; }
  .haltung__bottom { padding-block: .5rem 2rem; }
  .haltung__label { display: inline-block; padding: .3rem .8rem; border-radius: 999px; background: rgb(255 255 255 / .92); }
}


/* Häufige Fragen: aufklappen per Klick */
.faq__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.faq__grid > div:first-child p { color: var(--navy-soft); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { position: relative; padding: 1.25rem 0 1.25rem 2.5rem; font: 420 1.3rem/1.35 var(--serif); color: var(--navy); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; left: .4rem; top: 1.45rem; width: .7rem; height: .7rem; border-right: 2px solid var(--teal) ; border-bottom: 2px solid var(--teal); transform: rotate(45deg) ; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translate(0, .3rem) rotate(-135deg) ; }
.faq details p { margin: 0 0 1.2rem; color: var(--navy-soft); max-width: 40em; }
@media (prefers-reduced-motion: no-preference) { .faq details[open] p { animation: text-in .4s var(--ease); } }
@media (max-width: 52rem) { .faq__grid { grid-template-columns: 1fr; } }

/* Für wen */
.audience { padding-block: clamp(2rem, 4vw, 3rem) var(--space); }

/* Leistungen als Bildkacheln (weniger Text) */
.register-section { padding-block: var(--space); }
@keyframes para-in { from { opacity: 0; transform: translateY(.35em); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes text-in { from { opacity: 0; transform: translateY(10px); } }

.more { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.more li { padding-top: 1.25rem; border-top: 2px solid var(--wave-1); }
.more h3 a { color: var(--navy); }
.more p { color: var(--navy-soft); margin: 0; }
@media (max-width: 40rem) { .more { grid-template-columns: 1fr; } }

/* Zwei Spalten */
.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 52rem) { .split { grid-template-columns: 1fr; } }
.ticks { list-style: none; }
.ticks li { position: relative; padding: .55rem 1.9rem .55rem 0; border-bottom: 1px solid var(--line); }
.ticks li::before { content: ""; position: absolute; right: .1rem; top: 1.05rem; width: .85rem; height: .45rem; border-left: 2px solid var(--green) ; border-bottom: 2px solid var(--green); transform: rotate(-45deg) ; }

/* Ablauf: echte Reihenfolge, deshalb Nummern. Die Schritte stehen fest,
   ohne laufende Linie. */
.steps-section { padding-block: var(--space); }
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); position: relative; }
.step { counter-increment: step; position: relative; padding-top: 4.25rem; }
.step::before {
  content: counter(step); position: absolute; top: 0; right: 0; width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--wave-2);
  font: 420 1.35rem/1 var(--serif); z-index: 1;
  transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.step::after {
  content: ""; position: absolute; top: calc(1.5rem + -1px); right: 3rem; left: calc(-1 * clamp(1rem, 3vw, 2rem)); height: 2px;
  background: linear-gradient(var(--green), var(--green)) right / 0% 100% no-repeat, repeating-linear-gradient(-90deg, var(--wave-1) 0 6px, transparent 6px 12px);
  transition: background-size var(--step-time, 3.5s) linear;
}
.step:last-child::after { display: none; }
.step__title { font-size: 1.3rem; transition: color .45s var(--ease); }
.step p { color: var(--navy-soft); margin: 0; }
.step.is-reached::before { box-shadow: inset 0 0 0 2px var(--green); }
.step.is-current::before { background: var(--navy); color: var(--paper); box-shadow: 0 0 0 6px rgb(70 145 106 / .18); transform: scale(1.08); }
.step.is-current .step__title { color: var(--teal-ink); }
.step.is-passed::after { background-size: 100% 100%, auto; }
.steps.is-reset .step::before, .steps.is-reset .step::after, .steps.is-reset .step__title { transition: none; }
@media (max-width: 56rem) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { padding: 0 4.25rem 2rem 0; }
  .step::after { top: 3rem; bottom: 0; right: calc(1.5rem + -1px); left: auto; width: 2px; height: auto;
    background: linear-gradient(var(--green), var(--green)) top / 100% 0% no-repeat, repeating-linear-gradient(-180deg, var(--wave-1) 0 6px, transparent 6px 12px); }
  .step.is-passed::after { background-size: 100% 100%, auto; }
}

.band + .content, .band + .steps-section { padding-top: var(--space); }
.team__photo { margin-bottom: 2rem; }
.team__photo img { max-height: 26rem; }
.member { width: min(100%, 14rem); background: #fff; padding: .6rem .8rem; border-radius: 8px; }
.places--spaced { margin-top: 2rem; }
.cta__grid { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; }
.cta__grid h2 { margin-bottom: .3em; font-size: clamp(2.6rem, 4vw, 4.5rem); letter-spacing: -.035em; }
.cta__grid p { margin: 0; color: var(--navy-soft); }
.cta__contact { display: flex; flex-direction: column; gap: .4rem; }
.cta__tel { font: 380 clamp(2.2rem, 1.2rem + 4vw, 4.4rem)/1.05 var(--serif); letter-spacing: -.02em; color: var(--navy); text-decoration: none; }
.cta__tel:hover { color: var(--teal-ink); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.focus { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); max-width: 56rem; }
.focus li { padding: .8rem 1.6rem .8rem 0; border-bottom: 1px solid var(--line); position: relative; }
.focus li::before { content: ""; position: absolute; right: 0; top: 1.35rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); }
@media (max-width: 40rem) { .focus { grid-template-columns: 1fr; } }

/* Unterseiten */
.page-head { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem); }
.page-head .lead { color: var(--navy-soft); }
.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.5rem; font-size: .95rem; color: var(--navy-soft); }
.crumbs li + li::before { content: "/"; margin-left: .35rem; color: var(--wave-2); }
.crumbs a { color: var(--navy-soft); }
.page-para { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; font: 500 1.15rem/1.4 var(--sans); color: var(--teal-ink); margin-bottom: 1.5rem; }
.page-para::before { content: ""; width: 2rem; height: 2px; background: var(--green); }
.page-para small { font: inherit; color: inherit; margin: 0; }
.content { padding-bottom: var(--space); }
.content__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
@media (max-width: 56rem) { .content__grid { grid-template-columns: 1fr; } }
.prose { max-width: 40rem; }
.prose h2 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); letter-spacing: -.025em; margin-top: 1.8em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { list-style: none; margin-bottom: 1em; }
.prose ul li { position: relative; padding-right: 1.4rem; margin-bottom: .45rem; }
.prose ul li::before { content: ""; position: absolute; right: 0; top: .68em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); }
.law { margin: 2.5rem 0; padding: .25rem 1.5rem .25rem 0; border-right: 2px solid var(--green); }
.law blockquote { margin: 0; }
.law p { margin: 0; font: 400 1.1rem/1.6 var(--serif); }
.law footer { margin-top: .6rem; font-size: .92rem; color: var(--navy-soft); }
.aside { position: sticky; top: 8rem; padding: 1.5rem 0 0; border-top: 2px solid var(--green); }
.aside h2 { font-size: 1.7rem; letter-spacing: -.02em; }
.aside p { font-size: 1rem; }
.aside .nums { font-weight: 600; }
.aside .btn { width: 100%; margin-top: .5rem; }
.aside-list { list-style: none; margin-top: 1rem; font-size: 1rem; }
.aside-list li { padding: .45rem 0; border-top: 1px solid var(--line); }
.aside-list a { color: var(--navy); }
.aside-list a[aria-current="page"] { color: var(--teal-ink); font-weight: 600; text-decoration: none; }

/* Kopf der Unterseiten: Text links, Bild rechts mit Welle wie auf dem Roll-Up */
.page-hero { position: relative; padding-block: clamp(2rem, 5vw, 5rem) clamp(3.5rem, 7vw, 7rem); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.page-hero__text { min-width: 0; }
.page-hero h1 { font-size: clamp(2.5rem, 4.7vw, 4.7rem); line-height: 1.06; letter-spacing: -.04em; font-weight: 400; text-wrap: balance; hyphens: auto; overflow-wrap: anywhere; }
.page-hero .lead { color: var(--navy-soft); font-size: 1.15rem; line-height: 1.65; max-width: 32em; }
.page-hero .hero__actions { margin-top: 1.75rem; }
.page-hero__img { margin: 0; }
.page-hero__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0 var(--leaf) 0 0; }
.page-hero__img--tall img { aspect-ratio: 4 / 5; object-position: 50% 15% ; max-height: 32rem; }
@media (max-width: 52rem) {
  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__img { order: 1; }
  .page-hero__img img { aspect-ratio: 4 / 3; border-radius: 0 var(--leaf) 0 0; }
}

/* Auf einen Blick */
.facts-band { padding-bottom: clamp(2rem, 4vw, 3rem); }
.facts { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-block: 1px solid var(--line); }
.facts li { padding: 1.5rem 0 1.5rem 1.25rem; display: grid; align-content: start; gap: .7rem; }
.facts li + li { padding-right: 1.25rem; border-right: 1px solid var(--line); }
.facts__label { font-size: .92rem; font-weight: 600; color: var(--teal-ink); }
.facts__value { font: 420 1.25rem/1.3 var(--serif); color: var(--navy); }
@media (max-width: 52rem) {
  .facts { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .facts li:nth-child(odd) { padding-right: 0; border-right: 0; }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* "Was wir tun" auf Leistungsseiten als ruhige Liste mit Haken */
.content .prose ul { display: grid; gap: 0; border-top: 1px solid var(--line); }
.content .prose ul li { padding: .9rem 2.2rem .9rem 0; margin: 0; border-bottom: 1px solid var(--line); }
.content .prose ul li::before { right: .15rem; top: 1.3rem; width: .8rem; height: .42rem; border-radius: 0; background: none; border-left: 2px solid var(--green) ; border-bottom: 2px solid var(--green); transform: rotate(-45deg) ; }

/* Weitere Leistungen als Karten */
.related__grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.related__grid a { display: grid; align-content: start; gap: 1rem; height: 100%; padding: 1.5rem 0 2rem 1.5rem; background: var(--paper); color: var(--navy); text-decoration: none; border-top: 1px solid var(--line); transition: border-color .2s; }
.related__grid a:hover { border-color: var(--teal); }
.related__para { font: 420 1.6rem/1 var(--serif); color: var(--para); }
.related__name { font: 450 1.6rem/1.2 var(--serif); letter-spacing: -.015em; }
.related__text { font-size: 1rem; color: var(--navy-soft); }
@media (max-width: 60rem) { .related__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 36rem) { .related__grid { grid-template-columns: 1fr; } }

/* Karriere: drei Listen nebeneinander */
.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.jobs .prose h2 { margin-top: 0; font-size: 1.45rem; }
@media (max-width: 60rem) { .jobs { grid-template-columns: 1fr; } }

/* Leistungsübersicht */
.ledger { list-style: none; border-top: 1px solid var(--line); }
.ledger li { border-bottom: 1px solid var(--line); }
.ledger a { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: baseline; padding: 2.25rem 0; color: var(--navy); text-decoration: none; transition: background-color .2s; }
.ledger a:hover .ledger__name { color: var(--teal-ink); }
.ledger__para { font: 400 2rem/1 var(--serif); color: var(--teal-ink); white-space: nowrap; }
.ledger__name { display: block; font: 420 clamp(1.65rem, 2.5vw, 2.3rem)/1.2 var(--serif); letter-spacing: -.025em; margin: 0 0 .65rem; }
.ledger__text { display: block; margin: 0; color: var(--navy-soft); font-size: 1.05rem; }
.ledger__go { font-weight: 600; color: var(--teal-ink); white-space: nowrap; }
@media (max-width: 44rem) {
  .ledger a { grid-template-columns: 1fr; gap: .4rem; }
  .ledger__go { display: none; }
}
.notice { padding: 1.25rem 1.5rem; border-radius: var(--radius); border: 2px dashed var(--wave-1); }

/* Über uns */
.photos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; margin-top: 2rem; }
.photos img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.photos > :first-child { border-radius: 0 var(--leaf) 0 0; }
@media (max-width: 40rem) { .photos { grid-template-columns: 1fr; } }
.quote { margin: 0; padding: clamp(1.5rem, 4vw, 3rem) 0; }
.quote blockquote { margin: 0; }
.quote p { font: 400 clamp(1.45rem, 1.1rem + 1.5vw, 2.15rem)/1.35 var(--serif); max-width: 30em; text-wrap: pretty; }
.quote figcaption { color: var(--navy-soft); }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); margin: 0; }
.pillars div { padding-top: 1rem; border-top: 2px solid var(--wave-1); }
.pillars dt { font: 450 1.4rem var(--serif); margin-bottom: .4rem; }
.pillars dd { margin: 0; color: var(--navy-soft); }
@media (max-width: 48rem) { .pillars { grid-template-columns: 1fr; } }

/* Kontakt-Seite */
.places { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); }
.place { padding: 1.75rem 0 0; border-top: 1px solid var(--line); }
.place h3 { margin-bottom: .4rem; }
.place address { font-style: normal; margin-bottom: .8rem; }
@media (max-width: 40rem) { .places { grid-template-columns: 1fr; } }
.places__note { margin: 2rem 0 0; max-width: 40em; color: var(--navy-soft); }
.contact-big { display: grid; gap: 1rem; margin-block: 2rem; }
.contact-big .cta__tel { margin-bottom: .2rem; }

/* Rechtstexte */
.legal { max-width: 46rem; }
.legal h2 { font-size: 1.45rem; margin-top: 2em; }
.legal h3 { font-size: 1.15rem; margin-top: 1.4em; }
.legal ul { padding-right: 1.2rem; margin-bottom: 1em; }

/* Fuß */
.foot { background: var(--paper); }
.page--kontakt .cta { display: none; }
.foot__wave { display: block; width: 100%; height: clamp(40px, 6vw, 90px); }
.foot__wave .wave-b { fill: var(--paper); }
.foot__body { background: var(--paper); color: var(--navy); padding: 2rem 0 1.5rem; }
.foot__inner { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1.1fr 1fr 1fr .8fr; gap: 2rem; }
.foot__links { list-style: none; display: grid; gap: .35rem; font-size: 1rem; }
.foot__btn { margin-top: .5rem; min-height: 2.6rem; font-size: .95rem; }
.foot__brand p.foot__title { margin-top: 1.5rem; font: 600 .95rem var(--label); text-transform: uppercase; letter-spacing: .14em; color: var(--teal-ink); }
.foot__brand img { width: 3.2rem; margin-bottom: 1rem; }
.foot__brand p { font: 420 1.3rem/1.35 var(--serif); color: var(--navy); }
.foot__title { font: 600 .95rem var(--label); text-transform: uppercase; letter-spacing: .14em; color: var(--teal-ink); margin-bottom: .6rem; }
.foot p { font-size: 1rem; }
.foot a { color: var(--navy); }
.foot__muted { color: var(--navy-soft); }
.foot__brand .foot__bpa { width: 11rem; }
.foot__base { max-width: var(--wrap); margin: 2rem auto 0; padding: 1.25rem var(--gutter) 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); font-size: .95rem; color: var(--navy-soft); }
.foot__base p { margin: 0; font-size: .95rem; }
.foot__base ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
@media (max-width: 60rem) { .foot__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .foot__inner { grid-template-columns: 1fr; } }


.page-hero__img { overflow: hidden; border-radius: 0 var(--leaf) 0 0; }
.page-hero__img { position: relative; }
.page-hero__note { position: absolute; left: .6rem; bottom: .6rem; padding: .15rem .5rem; border-radius: .3rem; background: rgb(255 255 255 / .85); color: #333; font-size: .75rem; }

/* Wellenlinie unter den Abschnittsüberschriften */
.section-head h2::after, .squiggle::after {
  content: ""; display: block; width: 4.5rem; height: 10px; margin-top: .55rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 10'%3E%3Cpath d='M1 6 Q 10 1 19 6 T 37 6 T 55 6 T 71 5' fill='none' stroke='%2346916a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") right center / contain no-repeat;
}

/* Register: Foto je Leistung, blendet beim Wechsel über */
[role=tabpanel][hidden] { display: none; }
@media (min-width: 56.01rem) {
  .register-section .section-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem; max-width: none; margin-bottom: 3rem; }
  }
@keyframes photo-in { from { opacity: 0; transform: scale(.94) translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Premium direction: a typographic opening and generous photographic chapters.
   Scoped to the home page; applies equally to all six translations. */
body:has(.hero) { --wrap: 84rem; --gutter: clamp(1.25rem, 5vw, 5rem); --space: clamp(4.5rem, 8vw, 8.5rem); }
body:has(.hero) .top { border-bottom-color: transparent; }
body:has(.hero) .top__inner { max-width: 94rem; min-height: 5.5rem; }
@media (min-width: 72.01rem) {
  body:has(.hero) .top__logo img { width: 100%; height: auto; }
  body:has(.hero) .top__inner { gap: 1rem; }
  body:has(.hero) .nav a { padding-inline: .55rem; }
}
body:has(.hero) .top__logo { width: clamp(10rem, 15vw, 14rem); }
.hero { padding-bottom: clamp(2rem, 4vw, 4rem); }
.hero__inner { max-width: 94rem; margin-inline: auto; padding: 2rem var(--gutter) 0; display: flex; flex-direction: column; align-items: center; gap: 0; }
.hero__text { display: contents; }
.hero__title { width: 100%; max-width: none; font-size: clamp(3.6rem, 6.8vw, 6.8rem); line-height: 1.04; letter-spacing: -.015em; font-weight: 470; margin: 0 0 .25em; text-wrap: balance; text-align: center; }
.hero__title span { display: block; }
.hero__title span + span { padding-right: 0; }
.hero__lead { font-size: clamp(1.1rem, 1.25vw, 1.25rem); line-height: 1.55; margin: 1rem 0 0; max-width: 38em; text-align: center; }
.hero__actions { grid-row: 3; grid-column: 1; flex-direction: column; align-items: flex-start; gap: 1.4rem; margin-top: 2rem; padding-bottom: 3rem; align-self: start; }
.hero .hero__actions { display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: center; margin-top: 1.5rem; padding-bottom: 0; gap: 2rem; }
.hero__art { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.5fr) minmax(0,.8fr); gap: clamp(1rem,2.5vw,2.5rem); align-items: end; width: 100%; margin-top: 2.5rem; min-width: 0; padding-bottom: 0; }
.hero .media { height: clamp(22rem, 30vw, 30rem); min-height: 0; max-height: none; border-radius: 8rem 8rem 1rem 1rem; }
.hero__portrait { width: 100%; height: clamp(15rem,23vw,22rem); object-fit: cover; }
.hero__portrait--left { border-radius: 9rem 9rem 1rem 1rem; object-position: 47% 50% ; margin-bottom: 3rem; }
.hero__portrait--right { border-radius: 1rem 1rem 9rem 9rem; object-position: 63% 50% ; margin-bottom: 0; }
.audience__intro { padding-block: 2rem 5rem; }
.audience__intro p { max-width: 29em; margin: 0 auto; text-align: center; font: 420 clamp(1.8rem,3.2vw,3.1rem)/1.3 var(--serif); letter-spacing: -.025em; } .hero .media video { object-position: 50% 44% /*rtl:ignore*/; } .hero .media__logo { width: auto; height: 100%; aspect-ratio: 4 / 5; left: 50%; right: auto; transform: translateX(-50%); }
.hero .wave { position: relative; margin-top: 2.5rem; height: 2.5rem; }
.hero .wave-a { stroke-width: 3px; stroke: var(--green); }
body:has(.hero) .btn { min-height: 3.5rem; padding: .85rem 1.6rem; font-weight: 500; }
body:has(.hero) .btn--solid { background: var(--navy); box-shadow: none; }
body:has(.hero) .btn--solid:hover { background: var(--teal-ink); }
.audience { padding-block: 2rem clamp(4rem, 7vw, 7rem); }
.register-section { padding-bottom: var(--space); }
.register-section .section-head { grid-template-columns: 1.3fr .7fr; gap: 4rem; align-items: center; margin-bottom: 3.5rem; }
.register-section .section-head h2 { font-size: clamp(2.8rem, 5.5vw, 5.2rem); line-height: 1.02; max-width: 10em; letter-spacing: -.04em; }
.register-section .section-head h2::after { display: none; }
.more { margin-top: 3.5rem; gap: 3rem; }
.more li { border-top-width: 1px; padding-top: 1.5rem; }
.more h3 { font-size: 1.6rem; }
body:has(.hero) [aria-labelledby="fach-title"] .split { grid-template-columns: 1.1fr .9fr; gap: 1.75rem clamp(3rem, 8vw, 8rem); }
@media (min-width: 48.01rem) {
  body:has(.hero) [aria-labelledby="fach-title"] .split { grid-template-rows: auto auto 1fr; }
  body:has(.hero) [aria-labelledby="fach-title"] .split > div:first-child { display: contents; }
  body:has(.hero) #fach-title { grid-column: 1 / -1; max-width: 17em; margin-bottom: .5em; }
  body:has(.hero) [aria-labelledby="fach-title"] .lead { grid-column: 1; margin-bottom: 0; }
  body:has(.hero) [aria-labelledby="fach-title"] .link { grid-column: 1; align-self: start; justify-self: start; }
  body:has(.hero) [aria-labelledby="fach-title"] .split > div + div { grid-column: 2; grid-row: 2 / 4; }
}
body:has(.hero) #fach-title { font-size: clamp(2.5rem, 5.5vw, 5.4rem); line-height: 1.08; letter-spacing: -.035em; }
body:has(.hero) [aria-labelledby="fach-title"] .split > div + div { padding-top: 1rem; }
body:has(.hero) .ticks li { padding-block: 1rem; }
body:has(.hero) .ticks li::before { top: 1.55rem; }
.about { padding-block: var(--space); }
.about__grid { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); }
.about__photo img { aspect-ratio: 4 / 5; max-height: 42rem; border-radius: 0 var(--leaf) 0 0; object-position: 50% 30% ; }
.about h2 { font-size: clamp(3.5rem, 6vw, 6rem); line-height: 1; letter-spacing: -.045em; max-width: 7em; }
.about .lead { font: 400 clamp(1.4rem, 2vw, 1.9rem)/1.45 var(--serif); }
body:has(.hero) [aria-labelledby="ablauf-title"] .section-head { max-width: none; }
body:has(.hero) #ablauf-title { font-size: clamp(2.8rem, 5vw, 5rem); letter-spacing: -.04em; }
body:has(.hero) .ablauf__body { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: clamp(2rem, 6vw, 6rem); }
body:has(.hero) .ablauf__tab { padding-block: 1.5rem; font-size: 1.2rem; }
body:has(.hero) .ablauf__video { border-radius: 0 0 5rem 0; }
body:has(.hero) .haltung { margin-inline: var(--gutter); min-height: 40rem; border-block: 1px solid var(--line); }
body:has(.hero) .haltung .quote { grid-template-columns: 1fr 1fr; }
body:has(.hero) .quote__bg { position: absolute; right: 55%; width: 45%; height: 100%; object-position: 50% 50% ; }
body:has(.hero) .haltung .quote::before { display: none; }
body:has(.hero) .quote__inner { grid-column: 1; padding: 7rem 1rem 8rem 3rem; }
body:has(.hero) .haltung .quote p { font-size: clamp(1.65rem, 2.5vw, 2.7rem); text-wrap: pretty; }
body:has(.hero) .haltung__top, body:has(.hero) .haltung__bottom { padding-right: 1rem; }
body:has(.hero) .faq__grid h2 { font-size: clamp(3rem, 5vw, 4.8rem); line-height: 1.03; max-width: 7em; letter-spacing: -.035em; }
body:has(.hero) .faq summary { padding-block: 1.6rem; font-size: clamp(1.2rem, 1.6vw, 1.5rem); }
body:has(.hero) .faq details[open] { border-bottom-color: var(--teal-ink); }
body:has(.hero) .faq details[open] summary { color: var(--teal-ink); }
body:has(.hero) .cta { padding-block: clamp(4rem, 8vw, 8rem); border-top: 1px solid var(--line); }
body:has(.hero) .cta__grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 3rem; align-items: end; }
body:has(.hero) .cta__grid h2 { font-size: clamp(3rem, 6.8vw, 6.5rem); line-height: 1.03; max-width: 8em; letter-spacing: -.04em; text-wrap: balance; }
body:has(.hero) .cta__contact { align-items: flex-start; gap: 1.1rem; padding-bottom: .3rem; }
body:has(.hero) .cta__tel { font-size: clamp(2rem, 3.8vw, 3.9rem); color: var(--teal-ink); }
@media (max-width: 64rem) {
  .hero__title { font-size: clamp(3.4rem, 7.8vw, 6rem); }
  .hero__lead { margin-top: 1.5rem; font-size: 1.05rem; }
  .hero .media { height: 32rem; }
}
@media (max-width: 48rem) {
  body:has(.hero) .top__inner { min-height: 4.5rem; }
  body:has(.hero) .top__logo { width: 9rem; }
  .hero__inner { display: flex; flex-direction: column; padding-top: 2rem; gap: 0; }
  .hero__title { order: 0; font-size: clamp(2.7rem, 8.9vw, 4.8rem); line-height: 1.05; margin-bottom: 1.7rem; }
  .hero__title span + span { padding-right: 0; }
  .hero__art { order: 1; width: 100%; }
  .hero .media { height: 29rem; border-radius: 45% 45% 0 0; }
  .hero__lead { order: 2; margin-top: 2rem; max-width: none; }
  .hero__actions { order: 3; flex-direction: row; align-items: center; margin-top: 1.5rem; padding-bottom: 0; gap: 1rem; }
  .hero .wave { margin-top: 2rem; }
  .register-section .section-head { display: block; margin-bottom: 2rem; }
  .register-section .section-head h2 { font-size: clamp(2.6rem, 8vw, 4rem); }
  body:has(.hero) [aria-labelledby="fach-title"] .split, .about__grid, body:has(.hero) .ablauf__body { grid-template-columns: 1fr; gap: 2.5rem; }
  .about__photo img { max-height: 34rem; aspect-ratio: 4/5; }
  .about h2 { max-width: none; }
  body:has(.hero) .haltung { margin-inline: var(--gutter); min-height: 0; display: grid; }
  body:has(.hero) .haltung .quote { display: flex; flex-direction: column; }
  body:has(.hero) .quote__bg { position: relative; inset: auto; width: 100%; height: 18rem; }
  body:has(.hero) .quote__inner { padding: 2rem 0 6rem; }
  body:has(.hero) .haltung__top { padding: 1rem; }
  body:has(.hero) .haltung__bottom { padding: 0 0 1.5rem; }
  body:has(.hero) .faq__grid { grid-template-columns: 1fr; }
  body:has(.hero) .cta__grid h2 { font-size: 3rem; }
}
@media (max-width: 23rem) {
  .hero .media { height: 25rem; }
  .hero__title { font-size: 2.45rem; }
  .hero__actions { align-items: flex-start; flex-direction: column; }
}
html:not(.js) body:has(.hero) .ablauf__body { grid-template-columns: minmax(0, 1fr); }

/* Mobile composition: readable chapters and reachable actions. */
@media (max-width: 48rem) {
  .page-hero__text, .page-hero__img { min-width: 0; }
  .page-hero h1 { overflow-wrap: anywhere; hyphens: auto; }
  .page-hero { padding-top: 1.5rem; }
  .page-hero h1 { font-size: clamp(2.35rem, 8.7vw, 3.8rem); }
  .page-hero .lead { font-size: 1.05rem; }
  .page-hero .hero__actions { padding-bottom: 0; margin-top: 1.5rem; }
  .page-hero__img img { aspect-ratio: 5 / 4; }
  .crumbs { font-size: .85rem; margin-bottom: 1.75rem; }
  .page-para { margin-bottom: 1rem; font-size: 1rem; }
  .top__inner { min-height: 4.5rem; }
  .facts__value { font-size: 1.15rem; }
  .facts li { padding-block: 1.25rem; }
  .aside { position: static; }
  .content__grid { gap: 3rem; }
  .prose { font-size: 1.05rem; }
  .ledger__text { font-size: 1rem; }
  .ledger__para { font-size: 1.4rem; }
  .ledger a { padding-block: 1.75rem; gap: .85rem; }
  .related__grid a { padding-left: 0; }
  .related__name { font-size: 1.5rem; }
  body:has(.hero) { --space: clamp(3.5rem, 10vw, 5rem); }
  .top__inner { gap: .65rem; }
  .top__logo, body:has(.hero) .top__logo { width: auto; min-width: 0; flex: 1; }
  .top__logo img { width: 100%; max-width: 12rem; height: auto; max-height: 2.4rem; object-fit: contain; object-position: right; }
  .top__menu { margin-right: 0; padding-inline: .8rem; }
  .langs__btn { padding-inline: .65rem; }
  .hero__inner { padding-top: 2rem; }
  .hero__title { font-size: clamp(2.3rem, 9.7vw, 4.6rem); line-height: 1.08; letter-spacing: -.045em; margin-bottom: 0; }
  .hero .hero__art { order: 3; grid-template-columns: minmax(0,1fr); margin-top: 2rem; }
  .hero__portrait { display: none; }
  .hero .media { height: clamp(20rem, 100vw, 36rem); border-radius: 5rem 5rem 1rem 1rem; }
  .hero .hero__actions { display: grid; grid-template-columns: minmax(0,1fr); gap: .5rem; width: 100%; }
  .hero__actions { order: 2; display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: .35rem; margin-top: 1.25rem; }
  .hero__actions .btn { width: 100%; min-width: 0; overflow-wrap: anywhere; }
  .hero__actions .link { display: flex; justify-content: center; align-items: center; min-height: 2.75rem; }
  .hero__lead { order: 1; margin-top: 1.25rem; font-size: 1rem; line-height: 1.65; }
  .audience__intro { padding-block: 1rem 3rem; }
  .audience__intro p { font-size: 1.7rem; line-height: 1.35; text-align: right; }
  .hero .wave { margin-top: 1.75rem; }
  .audience { padding-top: 1rem; padding-bottom: var(--space); }
  .register-section { border-top: 1px solid var(--line); padding-top: var(--space); }
  .register-section .section-head h2 { font-size: clamp(2.5rem, 10vw, 4rem); margin-bottom: 1rem; }
  .more { grid-template-columns: 1fr; gap: 1.75rem; margin-top: 2.5rem; }
  .more h3 { font-size: 1.55rem; }
  .about h2 { font-size: clamp(2.8rem, 11vw, 4rem); }
  .about__photo img { max-height: 28rem; border-radius: 0 5rem 0 0; }
  body:has(.hero) .ablauf__tab { font-size: 1rem; padding-block: 1rem; gap: .6rem; }
  body:has(.hero) .ablauf__video { border-radius: 0 0 2.5rem 0; }
  body:has(.hero) .quote__bg { height: clamp(13rem, 60vw, 20rem); }
  body:has(.hero) .haltung .quote p { font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.3; }
  body:has(.hero) .faq summary { padding-block: 1.25rem; line-height: 1.45; }
  body:has(.hero) .cta__grid { grid-template-columns: minmax(0,1fr); gap: 1.75rem; }
  body:has(.hero) .cta { margin-inline: var(--gutter); padding-block: 3.5rem; border-top: 2px solid var(--green); }
  body:has(.hero) .cta .wrap { padding-inline: 0; }
  body:has(.hero) .cta__grid h2 { font-size: clamp(2.6rem, 10vw, 4rem); }
  body:has(.hero) .cta__tel { font-size: clamp(2rem, 8.5vw, 3rem); }
  .sheet { padding-top: max(1.25rem, env(safe-area-inset-top)); padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
  .sheet__links a { min-height: 3.5rem; padding-block: .9rem; }
  .foot__inner { gap: 2rem; }
  .foot__inner > :not(:first-child) { padding-top: 1.5rem; border-top: 1px solid var(--line); }
  .foot__links a, .foot__base a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .foot__links { gap: 0; }
  .foot__base { gap: .75rem; }
  .foot__base ul { gap: 0 1.25rem; }
}

/* Weniger Text, schneller erfassbar. Leistungen als Bildkacheln,
   Zielgruppen als zwei Links unter dem Kernsatz, Willkommen in allen Sprachen wie auf dem Roll-Up. */
.audience__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2.5rem; margin-top: 2rem; }
.audience__links .link { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.1rem; }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2rem); }
.tile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .35rem 1rem; color: var(--navy); text-decoration: none; }
.tile__img { grid-column: 1 / -1; display: block; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: .9rem; border-radius: 0 var(--leaf) 0 0; background: var(--mist); }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tile__para { grid-column: 1 / -1; font: 400 1.25rem/1 var(--serif); color: var(--teal-ink); }
.tile__name { font: 400 clamp(1.45rem, 1.1rem + .9vw, 1.9rem)/1.15 var(--serif); hyphens: manual; text-wrap: balance;
  background: linear-gradient(var(--teal), var(--teal)) 0 100% / 0 2px no-repeat; padding-bottom: .25rem; transition: background-size .6s var(--ease); justify-self: start; }
.tile__go { width: 2.6rem; height: 2.6rem; padding: .6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); fill: none; stroke: var(--teal-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: background-color .35s, stroke .35s, transform .5s var(--ease), box-shadow .35s; }
.tile:hover .tile__img img, .tile:focus-visible .tile__img img { transform: scale(1.06); }
.tile:hover .tile__name, .tile:focus-visible .tile__name { background-size: 100% 2px; }
.tile:hover .tile__go, .tile:focus-visible .tile__go { background: var(--navy); stroke: var(--paper); box-shadow: none; transform: translateX(-4px); }
.tile:focus-visible { outline-offset: 6px; }
.register-section .more li { padding-top: 0; border-top: 0; }
.register-section .more h3 { margin: 0; }
.register-section .more h3 a { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; text-decoration: none; background: linear-gradient(var(--wave-1), var(--wave-1)) 0 100% / 100% 1px no-repeat; }
.register-section .more h3 a:hover { background-size: 100% 2px; color: var(--teal-ink); }
@media (max-width: 64rem) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .tiles { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; } .tile__img { aspect-ratio: 16 / 10; } }
@media (prefers-reduced-motion: reduce) { .tile__img img, .tile__name, .tile__go { transition: none; } }

/* Willkommen wie auf dem Roll-Up: Herz und Begrüßung, jede führt zur Startseite ihrer Sprache */
.welcome { padding-block: var(--space); border-top: 1px solid var(--line); }
.welcome__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.welcome__title { margin: 0; font-size: clamp(2.8rem, 1.6rem + 4vw, 5.6rem); line-height: 1.02; letter-spacing: -.01em; }
.welcome__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 2rem; }
.welcome__list a { display: flex; align-items: center; gap: .9rem; min-height: 3.25rem; padding-block: .4rem; color: var(--navy); text-decoration: none; font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); }
.welcome__heart { flex: none; width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--teal); stroke-width: 1.6; transition: fill .3s, transform .5s var(--ease); }
.welcome__list a:hover { color: var(--teal-ink); }
.welcome__list a:hover .welcome__heart { fill: var(--teal); transform: scale(1.15); }
@media (max-width: 48rem) { .welcome__inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 26rem) { .welcome__list { grid-template-columns: minmax(0, 1fr); } }

/* Fachlichkeit ohne Absatz: Überschrift, darunter die fünf Punkte nebeneinander, dann der Link */
@media (min-width: 48.01rem) {
  body:has(.hero) [aria-labelledby="fach-title"] .split { grid-template-rows: auto auto auto; }
  body:has(.hero) [aria-labelledby="fach-title"] .split > div + div { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
  body:has(.hero) [aria-labelledby="fach-title"] .link { grid-row: 3; }
  [aria-labelledby="fach-title"] .ticks { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 2rem; }
  body:has(.hero) [aria-labelledby="fach-title"] .ticks li { border-bottom: 0; border-top: 1px solid var(--line); padding-top: 1.1rem; font-size: 1.05rem; }
  body:has(.hero) [aria-labelledby="fach-title"] .ticks li::before { top: 1.6rem; }
}
.audience__links .link { font-size: 1.2rem; }
.audience { padding-bottom: clamp(3rem, 6vw, 5rem); }
.welcome__list a { font-family: var(--serif); }
@media (min-width: 48.01rem) { .audience + .register-section { padding-top: clamp(1rem, 2vw, 2rem); } }
/* Handy: zwei Kacheln nebeneinander, damit die sechs Leistungen auf einen Blick passen */
@media (max-width: 40rem) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  .tile { grid-template-columns: minmax(0, 1fr); }
  .tile__img { aspect-ratio: 1 / 1; margin-bottom: .6rem; border-radius: 0 2.5rem 0 0; }
  .tile__para { font-size: 1.05rem; }
  .tile__name { font-size: 1.15rem; line-height: 1.2; hyphens: manual; }
  .tile__go { display: none; }
}
@media (max-width: 21rem) { .tiles { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 48rem) { .audience__links { justify-content: flex-start; flex-direction: column; gap: .25rem; } }
/* Überschriftschrift läuft breiter als die alte Schrift: lange Leistungsnamen bei 320 px trennen statt überstehen */
.ledger__name, .tile__name { hyphens: auto; }

/* ==========================================================================
   v7: lebendiger, hochwertiger, moderner Stil.
   Richtung aus wibuild.de (von der Kundin gelobt, Transkript 27:41): schwebende Menüleiste,
   Kennzeile über Überschriften, Akzentwort in Türkis, Bildkarten mit Schatten, große Bildkarte,
   Wellen vom Roll-Up. Weiß bleibt der Grund.
   ========================================================================== */
:root {
  --paper-2: #f4f7f7;
  --radius-card: 28px;
  --shadow-card: 0 1px 2px rgb(0 84 94 / .06), 0 24px 48px -24px rgb(0 84 94 / .30);
  --shadow-lift: 0 2px 4px rgb(0 84 94 / .08), 0 34px 60px -26px rgb(0 84 94 / .38);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
.accent { color: var(--teal); }
.eyebrow { margin: 0 0 1rem; font: 600 .82rem/1.2 var(--label); text-transform: uppercase; letter-spacing: .22em; color: var(--teal); }

/* Menüleiste schwebt als Pille über dem Inhalt */
.top { top: .75rem; margin: .75rem auto 0; width: min(94rem, calc(100% + -1.5rem)); border: 0; border-radius: 999px;
  background: rgb(255 255 255 / .82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 2px rgb(0 84 94 / .06), 0 12px 32px -16px rgb(0 84 94 / .30); }
body:has(.hero) .top { border: 0; }
.top__inner { min-height: 4.5rem; padding: .5rem 1.75rem .5rem .75rem; }
.top__tel { padding: .7rem 1.25rem; border-radius: 999px; background: var(--teal); color: var(--paper); }
.top__tel svg { stroke: var(--paper); }
.top__tel:hover { background: var(--navy); }
@media (max-width: 64rem) { .top__inner { padding-right: 1.25rem; } .top__tel { padding: .6rem 1rem; } }

/* Knöpfe als Pillen in Türkis */
body:has(.hero) .btn, .btn { border-radius: 999px; }
body:has(.hero) .btn--solid { background: var(--teal); color: var(--paper); box-shadow: 0 10px 24px -12px rgb(42 154 167 / .8); }
body:has(.hero) .btn--solid:hover { background: var(--navy); }
.link--pill { display: inline-flex; align-items: center; gap: .6rem; min-height: 3.25rem; padding: .75rem 1.5rem; border-radius: 999px; text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--wave-1); color: var(--navy); transition: background-color .3s, color .3s, box-shadow .3s; }
.link--pill::after { content: "→"; font-weight: 400; transition: transform .4s var(--ease-out); }
.link--pill:hover { background: var(--navy); color: var(--paper); box-shadow: none; }
.link--pill:hover::after { transform: translateX(-3px); }

/* Hero: links die Aussage, rechts der Film als hohe Karte, dahinter Wellenlinien */
.hero--v7 { position: relative; overflow: clip; padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(4rem, 8vw, 7rem); }
.hero--v7 .hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center;
  gap: clamp(2rem, 5vw, 5rem); max-width: var(--wrap); padding: 0 var(--gutter); }
.hero--v7 .hero__text { display: block; padding: 0; }
.hero--v7 .hero__title { text-align: right; font-size: clamp(3rem, 1.4rem + 5vw, 6.6rem); line-height: 1.02; letter-spacing: -.02em; font-weight: 400; margin: 0 0 1.5rem; max-width: 11em; }
.hero--v7 .hero__title span + span { color: var(--teal); }
.hero--v7 .hero__lead { text-align: right; margin: 0; max-width: 30em; font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); }
.hero--v7 .hero__actions { justify-content: flex-start; margin-top: 2.25rem; gap: 1rem 1.75rem; flex-direction: row; display: flex; width: auto; }
.hero--v7 .hero__art { display: block; width: 100%; margin: 0; }
.hero--v7 .media { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: min(78svh, 46rem); margin-right: auto; border-radius: var(--radius-card); box-shadow: var(--shadow-lift); }
.hero--v7 .media__logo { height: 100%; }
.hero__badge { position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 3; padding: .65rem 1.1rem; border-radius: 999px; background: rgb(255 255 255 / .78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 600 .78rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--navy);
  box-shadow: 0 8px 24px -12px rgb(0 84 94 / .45); transition: opacity .6s var(--ease); }
.media.is-logo .hero__badge { opacity: 0; }
.hero__lines { position: absolute; right: 0; left: 0; bottom: 0; width: 100%; height: 70%; z-index: 0; pointer-events: none; }
.hero__lines path { fill: none; stroke: var(--wave-1); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .7; }
.hero__lines path:nth-child(2) { stroke: var(--teal); opacity: .35; }
.hero__lines path:nth-child(3) { stroke: var(--green); opacity: .3; }

/* Kernsatz */
.audience__intro p { font-size: clamp(1.7rem, 1rem + 2.4vw, 3rem); line-height: 1.25; max-width: 24em; }
.audience__links { margin-top: 2.5rem; gap: 1rem; }

/* Abschnittsköpfe: Kennzeile, Überschrift mit Akzent */
.register-section .section-head h2, .ablauf .section-head h2, .about h2, .faq h2 { letter-spacing: -.02em; }
.section-head h2::after { display: none; }

/* Leistungen als Karten mit Schatten, Paragraf als Pille auf dem Foto */
.tiles { gap: clamp(1.25rem, 2.5vw, 2rem); }
.tile { height: 100%; align-content: start; grid-template-rows: auto 1fr; padding: .6rem .6rem 1.4rem; border-radius: var(--radius-card); background: var(--paper);
  box-shadow: var(--shadow-card); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.tile:hover, .tile:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.tile__img { position: relative; margin: 0 0 1.25rem; border-radius: calc(var(--radius-card) + -6px); aspect-ratio: 4 / 3; }
.tile__para { position: absolute; top: 1.4rem; right: 1.4rem; z-index: 1; padding: .45rem .85rem; border-radius: 999px; background: rgb(255 255 255 / .85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 600 .95rem/1 var(--serif); color: var(--navy); }
.tile__name { grid-column: 1; padding-inline: .9rem; align-self: end; background: none; font-size: clamp(1.35rem, 1.1rem + .7vw, 1.75rem); }
.tile__go { margin-left: .6rem; align-self: end; background: var(--paper-2); box-shadow: none; }
.tile:hover .tile__name { background: none; color: var(--teal-ink); }
.tile:hover .tile__go { background: var(--teal); }

/* Fachlichkeit als große Bildkarte mit Glas-Pillen */
.feature { padding-block: clamp(1rem, 3vw, 2rem) var(--space); }
.feature__card { position: relative; overflow: hidden; isolation: isolate; border-radius: calc(var(--radius-card) + 8px); padding: clamp(2.5rem, 6vw, 5.5rem); color: var(--paper); box-shadow: var(--shadow-lift); }
.feature__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.feature__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(-105deg, rgb(0 52 59 / .94) 0%, rgb(0 70 79 / .82) 45%, rgb(0 84 94 / .35) 100%); }
.feature .split { display: block; }
body:has(.hero) .feature #fach-title { color: var(--paper); font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem); max-width: 12em; margin-bottom: 2rem; }
.feature h3 { color: var(--wave-1); font: 600 .82rem/1.2 var(--label); text-transform: uppercase; letter-spacing: .22em; margin: 0 0 1rem; }
.feature .ticks { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2.5rem; max-width: 56rem; }
body:has(.hero) .feature .ticks li { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.15rem; border: 1px solid rgb(255 255 255 / .28); border-radius: 999px;
  background: rgb(255 255 255 / .1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--paper); font-size: 1rem; }
body:has(.hero) .feature .ticks li::before { position: static; flex: none; width: .75rem; height: .4rem; margin-top: -.2rem; border-color: var(--wave-1); }
.feature .link { display: inline-flex; align-items: center; gap: .6rem; min-height: 3.25rem; padding: .75rem 1.6rem; border-radius: 999px; background: var(--paper); color: var(--navy); text-decoration: none; }
.feature .link::after { content: "→"; transition: transform .4s var(--ease-out); }
.feature .link:hover::after { transform: translateX(-3px); }

/* Wer wir sind: Foto als Karte */
.about__photo img { border-radius: var(--radius-card); box-shadow: var(--shadow-lift); }

/* Willkommen wie auf dem Roll-Up: Wellen in Türkis, Begrüßungen in Weiß */
.welcome { position: relative; overflow: clip; border: 0; padding-block: clamp(9rem, 16vw, 14rem) clamp(5rem, 8vw, 7rem); color: var(--paper); isolation: isolate; }
.welcome::after { content: ""; position: absolute; right: 0; left: 0; bottom: 0; top: clamp(8rem, 15vw, 13rem); z-index: -2; background: var(--teal); }
.welcome .waves { position: absolute; right: 0; top: 0; width: 100%; height: clamp(9rem, 16vw, 14rem); z-index: -1; }
.waves__a { fill: var(--wave-1); }
.waves__b { fill: var(--teal); }
.welcome__title { color: var(--paper); }
.welcome__list a { color: var(--paper); }
.welcome__list a:hover { color: var(--paper); }
.welcome__heart { stroke: var(--paper); }
.welcome__list a:hover .welcome__heart { fill: var(--paper); }

/* Ablauf auf hellem Band, Schritte als Pillen, Film als Karte */
body:has(.hero) .ablauf { background: var(--paper-2); border: 0; }
.ablauf__video { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.ablauf__tabs { gap: .5rem; border: 0; }
body:has(.hero) .ablauf__tab { border: 0; border-radius: 999px; padding: .55rem .55rem .55rem 1.25rem; background: var(--paper); box-shadow: 0 1px 2px rgb(0 84 94 / .06); }
body:has(.hero) .ablauf__tab[aria-selected="true"] { background: var(--navy); color: var(--paper); }
body:has(.hero) .ablauf__tab[aria-selected="true"] .ablauf__num { background: var(--teal); }

/* Fragen als Karten */
.faq details { margin-bottom: .75rem; border: 0; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow-card); padding-inline: 1.5rem; }
.faq details:first-child { border-top: 0; }
.faq summary::after { left: 0; }

/* Kontaktband als Karte in Petrol */
.cta.band { padding-block: 0 var(--space); border: 0; }
.cta .cta__grid { position: relative; overflow: hidden; isolation: isolate; padding: clamp(2.5rem, 6vw, 5rem); border-radius: calc(var(--radius-card) + 8px); background: var(--navy); color: var(--paper); box-shadow: var(--shadow-lift); }
.cta .cta__grid::before { content: ""; position: absolute; left: -10%; bottom: -60%; width: 70%; aspect-ratio: 1; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(42 154 167 / .55), transparent); }
.cta h2, .cta__tel { color: var(--paper); }
.cta__tel:hover { color: var(--wave-1); }
.cta__grid p { color: rgb(255 255 255 / .78); }
.cta .link { color: var(--wave-1); }
.foot__wave { display: none; }

@media (max-width: 56rem) and (orientation: portrait) {
  .hero--v7 .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero--v7 .media { max-height: none; aspect-ratio: 4 / 4.4; }
  .hero__lines { height: 40%; }
}
@media (max-width: 40rem) {
  .top { width: calc(100% + -1rem); top: .5rem; margin-top: .5rem; }
  .top__inner { min-height: 3.75rem; padding: .35rem 1rem .35rem .4rem; }
  .hero--v7 .hero__title { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .hero--v7 .hero__actions { flex-direction: column; align-items: stretch; }
  .hero--v7 .hero__actions .btn { width: 100%; }
  .audience__links { align-items: stretch; }
  .link--pill { justify-content: space-between; }
  .tile { padding: .4rem .4rem 1rem; }
  .tile__img { margin-bottom: .8rem; }
  .tile__para { top: 1rem; right: 1rem; font-size: .8rem; padding: .35rem .6rem; }
  .tile__name { padding-inline: .5rem; font-size: 1.1rem; }
  .feature__card { padding: 2.25rem 1.5rem; border-radius: var(--radius-card); }
  body:has(.hero) .feature .ticks li { font-size: .92rem; padding: .55rem .95rem; }
  .faq details { padding-inline: 1.1rem; }
  .cta .cta__grid { padding: 2.25rem 1.5rem; }
}
/* v7 Feinschliff */
body:has(.hero) .register-section .section-head { display: block; margin-bottom: clamp(2rem, 4vw, 3rem); }
.register-section .section-head h2 { max-width: none; }
.hero--v7 .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.hero--v7 .hero__title { font-size: clamp(2.8rem, 1rem + 4vw, 5rem); max-width: none; }
.hero__lines { height: 38%; }
.feature .split { display: flex; flex-direction: column; align-items: flex-start; }
.feature .split > div { display: contents; }
body:has(.hero) .feature .link { order: 3; }
.feature .ticks { order: 2; }
.feature h3 { order: 1; }
.cta .cta__grid .cta__tel { color: var(--paper); }
.cta .cta__grid .cta__tel:hover { color: var(--wave-1); }
.cta .cta__grid h2 { color: var(--paper); }
@media (max-width: 56rem) and (orientation: portrait) { .hero--v7 .hero__inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .feature .link { font-size: .95rem; padding: .7rem 1.2rem; } .link--pill { font-size: 1rem; } }
/* Zitate als große Karte im Seitenraster */
.haltung { width: calc(min(var(--wrap), 100%) + -2 * var(--gutter)); margin: 0 auto var(--space); border-radius: calc(var(--radius-card) + 8px); box-shadow: var(--shadow-lift); }
/* Dunkle Karten: Fokusrahmen in Weiß, Grundfarbe falls das Foto fehlt */
.feature__card { background-color: var(--navy); }
.feature :focus-visible, .cta__grid :focus-visible, .welcome :focus-visible { outline-color: var(--paper); }
body:has(.hero) .ablauf .ablauf__video, body:has(.hero) .ablauf .ablauf__video video { border-radius: var(--radius-card); }

/* ==========================================================================
   v9: Stil mit Film statt 3D-Modell.
   Auftakt als Film über die ganze Breite (Pexels, warm und hell abgestimmt), Bildkarte mit Standbild,
   Ablauf als großes Kino-Bild mit Text im Bild. Inhalt und Aufbau bleiben wie v7.
   ========================================================================== */
.hero--v9 { position: relative; isolation: isolate; overflow: clip; display: grid; align-items: end; min-height: 100svh;
  margin-top: -6.25rem; padding: 0; color: var(--paper); } .hero__film { position: absolute; inset: 0; z-index: -2; background: #1d3a3e; } .hero__film video { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) { .hero__film video { animation: film-drift 26s ease-in-out infinite alternate; } } @keyframes film-drift { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1%, -.5%); } } .hero--v9::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(0 38 44 / .78) 0%, rgb(0 46 52 / .5) 38%, rgb(0 46 52 / .08) 70%),
              linear-gradient(0deg, rgb(0 38 44 / .55) 0%, rgb(0 38 44 / 0) 45%),
              linear-gradient(180deg, rgb(0 38 44 / .35) 0%, rgb(0 38 44 / 0) 22%); }
.hero--v9 .hero__inner { width: 100%; max-width: var(--wrap); grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: 2rem 4rem; padding: 10rem var(--gutter) clamp(3rem, 7vw, 5.5rem); }
.hero--v9 .eyebrow { color: var(--wave-1); }
.hero--v9 .hero__title { color: var(--paper); font-size: clamp(3rem, 1rem + 5vw, 6.8rem); line-height: 1; max-width: 10.5em; text-shadow: 0 2px 30px rgb(0 30 34 / .25); }
.hero--v9 .hero__title span + span { color: var(--wave-1); }
.hero--v9 .hero__lead { color: rgb(255 255 255 / .88); max-width: 32em; }
.hero--v9 .hero__actions .link { display: inline-flex; align-items: center; gap: .6rem; min-height: 3.5rem; padding: .85rem 1.6rem; border-radius: 999px;
  color: var(--paper); text-decoration: none; background: rgb(255 255 255 / .14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); transition: background-color .3s, color .3s; }
.hero--v9 .hero__actions .link::after { content: "→"; transition: transform .4s var(--ease-out); }
.hero--v9 .hero__actions .link:hover { background: var(--paper); color: var(--navy); }
.hero--v9 .hero__actions .link:hover::after { transform: translateX(-3px); }
.hero--v9 :focus-visible { outline-color: var(--paper); }
/* Der Sprung mit dem Logo als kleine schwebende Karte im Film */
.hero--v9 .hero__art { width: clamp(12rem, 17vw, 16rem); padding: .45rem; border-radius: calc(var(--radius-card) + 4px);
  background: rgb(255 255 255 / .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3), 0 30px 60px -30px rgb(0 0 0 / .6); }
.hero--v9 .media { aspect-ratio: 4 / 5; max-height: none; border-radius: var(--radius-card); box-shadow: none; }
.hero--v9 .hero__badge { display: none; }
@media (max-width: 56rem) and (orientation: portrait) {
  .hero--v9 .hero__inner { grid-template-columns: minmax(0, 1fr); padding-top: 9rem; }
  .hero--v9 .hero__art { display: none; } .hero--v9::before { background: linear-gradient(0deg, rgb(0 38 44 / .85) 0%, rgb(0 38 44 / .55) 45%, rgb(0 38 44 / .15) 75%),
                                  linear-gradient(180deg, rgb(0 38 44 / .35) 0%, rgb(0 38 44 / 0) 22%); }
}
@media (max-width: 40rem) {
  .hero--v9 { margin-top: -5rem; }
  .hero--v9 .hero__title { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .hero--v9 .hero__actions .link { justify-content: center; width: 100%; }
}

/* Ablauf als großes Kino-Bild, Schritte als Pillen darüber, Text im Bild */
body:has(.hero) .ablauf__body { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
body:has(.hero) .ablauf__tabs { flex-direction: row; flex-wrap: wrap; gap: .5rem; }
body:has(.hero) .ablauf__tab { width: auto; }
.ablauf__panel { position: relative; }
body:has(.hero) .ablauf .ablauf__video { aspect-ratio: 21 / 9; margin: 0; box-shadow: var(--shadow-lift); }
.ablauf__panel::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); pointer-events: none;
  background: linear-gradient(0deg, rgb(0 38 44 / .78) 0%, rgb(0 38 44 / .25) 40%, transparent 65%); }
.ablauf__panel .ablauf__title, .ablauf__panel p { position: absolute; right: clamp(1.5rem, 4vw, 3rem); z-index: 1; color: var(--paper); margin: 0; }
.ablauf__panel .ablauf__title { bottom: clamp(4.5rem, 7vw, 6rem); font-size: clamp(1.8rem, 1.2rem + 1.8vw, 3rem); }
.ablauf__panel p { bottom: clamp(1.5rem, 3vw, 2.5rem); max-width: 34em; padding-left: 1.5rem; color: rgb(255 255 255 / .88); }
body:has(.hero) .ablauf__panel p { color: rgb(255 255 255 / .88); }
@media (max-width: 40rem) {
  body:has(.hero) .ablauf .ablauf__video { aspect-ratio: 4 / 5; }
  .ablauf__panel .ablauf__title { bottom: 7.5rem; }
  .ablauf__panel p { font-size: 1rem; }
}

/* Zitate: das Bild bewegt sich langsam */
.hero--v9 .hero__art { align-self: end; } .hero--v9::before { background: linear-gradient(90deg, rgb(0 38 44 / .66) 0%, rgb(0 46 52 / .36) 40%, rgb(0 46 52 / 0) 72%),
  linear-gradient(0deg, rgb(0 38 44 / .5) 0%, rgb(0 38 44 / 0) 42%), linear-gradient(180deg, rgb(0 38 44 / .3) 0%, rgb(0 38 44 / 0) 20%); }
@media (max-width: 56rem) and (orientation: portrait) { .hero--v9::before { background: linear-gradient(0deg, rgb(0 38 44 / .82) 0%, rgb(0 38 44 / .45) 45%, rgb(0 38 44 / .1) 75%), linear-gradient(180deg, rgb(0 38 44 / .3) 0%, rgb(0 38 44 / 0) 20%); }
}
@media (max-width: 40rem) { .ablauf__panel .ablauf__title { bottom: 9.5rem; } }

/* v9b: kein zweites Video im Hero. Der große Film zeigt Umarmung, Hand in Hand und den Sprung,
   danach wird alles weiß und das Logo zeichnet sich rechts; die Schrift wechselt dafür auf Petrol. */ .hero--v9 .hero__film.media { position: absolute; inset: 0; z-index: -2; width: auto; height: auto; max-height: none; min-height: 0;
  aspect-ratio: auto; margin: 0; border-radius: 0; box-shadow: none; background: var(--paper); } .hero--v9 .hero__film .media__veil { z-index: 1; } .hero--v9 .hero__film .media__logo { z-index: 2; top: 13%; bottom: auto; left: auto; right: 7%; width: auto; height: 74%; aspect-ratio: 4 / 5; transform: none; } .hero--v9::before, .hero--v9 .hero__title, .hero--v9 .hero__title span, .hero--v9 .hero__lead, .hero--v9 .eyebrow, .hero--v9 .hero__actions .link {
  transition: opacity 1s var(--ease), color 1s var(--ease), background-color 1s var(--ease), box-shadow 1s var(--ease), text-shadow 1s var(--ease); }
.hero--v9:has(.is-logo)::before { opacity: 0; }
.hero--v9:has(.is-logo) .hero__title { color: var(--navy); text-shadow: none; }
.hero--v9:has(.is-logo) .hero__title span + span { color: var(--teal); }
.hero--v9:has(.is-logo) .hero__lead { color: var(--navy-soft); }
.hero--v9:has(.is-logo) .eyebrow { color: var(--teal); }
.hero--v9:has(.is-logo) .hero__actions .link { color: var(--navy); background: rgb(0 84 94 / .06); box-shadow: inset 0 0 0 1px rgb(0 84 94 / .25); }
.hero--v9:has(.is-logo) :focus-visible { outline-color: var(--teal-ink); }
@media (max-width: 56rem) and (orientation: portrait) { .hero--v9 .hero__film .media__logo { top: 14%; right: 50%; transform: translateX(50%); height: 38%; }
}
@media (max-width: 56rem) and (orientation: portrait) { .hero--v9 .hero__film .media__logo { top: 12%; height: 27%; } }

/* v9c: das Kind steht dort, wo das Logo entsteht. Film und Logo liegen auf derselben 16:9-Bühne,
   die den Hero wie object-fit: cover ausfüllt; das Logo ist in Film-Koordinaten über die erhobenen Arme gelegt. */
.hero--v9 { height: 100svh; min-height: 36rem; } .hero--v9 .hero__stage { position: absolute; top: 50%; left: 50%; width: max(100%, calc(max(100svh, 36rem) * 1.7778)); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); } .hero--v9 .hero__stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero--v9 .hero__film .media__logo { inset: 0; top: 0; right: auto; left: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; }
@media (max-width: 56rem) and (orientation: portrait) {
  /* Handy: Bühne so verschieben, dass das Kind mittig steht; das Logo kleiner und weiter oben */ .hero--v9 .hero__stage { transform: translate(-73.7%, -50%); } .hero--v9 .hero__film .media__logo { top: 0; height: 100%; transform: translateY(-17%) scale(.6); transform-origin: 73.7% 30%; }
} .hero--v9 .hero__stage video { animation: none; transform: none; }
@media (max-width: 56rem) and (orientation: portrait) { .hero--v9 .hero__film .media__logo { transform: translateY(4%) scale(.3); transform-origin: 26.299999999999997% 0; } }
/* v9d Handy: Logo bleibt deckungsgleich auf dem Kind (keine eigene Verkleinerung); die Bühne ist etwas größer und
   nach oben gerückt, damit Kopf und Arme über dem Titel stehen. Während das Logo steht, liegt der Text auf hellem Glas. */
@media (max-width: 56rem) and (orientation: portrait) { .hero--v9 .hero__stage { width: max(100%, calc(max(100svh, 36rem) * 1.12 * 1.7778)); transform: translate(-73.7%, -55%); } .hero--v9 .hero__film .media__logo { transform: none; }
  .hero--v9 .hero__text { transition: background-color 1s var(--ease), box-shadow 1s var(--ease); border-radius: 24px; }
  .hero--v9:has(.is-logo) .hero__text { background: rgb(255 255 255 / .86); box-shadow: 0 0 0 1rem rgb(255 255 255 / .86); }
}
/* v9e Handy: Film oben (Kind und Logo ganz sichtbar, deckungsgleich), Text darunter auf Weiß */
@media (max-width: 56rem) and (orientation: portrait) {
  .hero--v9 { display: flex; flex-direction: column; height: auto; min-height: 0; margin-top: -5.5rem; color: var(--navy); } .hero--v9::before { display: none; } .hero--v9 .hero__film.media { position: relative; inset: auto; z-index: 0; flex: none; height: 100svh; min-height: 32rem; overflow: hidden; } .hero--v9 .hero__stage { top: 0; left: 50%; height: 100%; width: auto; aspect-ratio: 16 / 9; transform: translateX(-73.7%); } .hero--v9 .hero__film::after { content: ""; position: absolute; inset: 0 0 auto; height: 7rem; z-index: 3; pointer-events: none; background: linear-gradient(rgb(255 255 255 / .55), transparent); }
  .hero--v9 .hero__inner { padding: 1.75rem var(--gutter) 3rem; }
  .hero--v9 .hero__text, .hero--v9:has(.is-logo) .hero__text { background: none; box-shadow: none; }
  .hero--v9 .eyebrow { color: var(--teal); }
  .hero--v9 .hero__title { color: var(--navy); text-shadow: none; }
  .hero--v9 .hero__title span + span { color: var(--teal); }
  .hero--v9 .hero__lead { color: var(--navy-soft); }
  .hero--v9 .hero__actions .link { color: var(--navy); background: rgb(0 84 94 / .05); box-shadow: inset 0 0 0 1px rgb(0 84 94 / .25); }
  .hero--v9 :focus-visible { outline-color: var(--teal-ink); }
}
@media (max-width: 56rem) and (orientation: portrait) { .hero--v9 { align-items: stretch; } .hero--v9 .hero__film.media { width: 100%; } }
@media (max-width: 56rem) and (orientation: portrait) { .hero--v9 .hero__stage { transform: translateX(-50%); } .hero--v9 .hero__film.is-jump .hero__stage, .hero--v9 .hero__film.is-logo .hero__stage { transform: translateX(-73.7%); }
}

/* Hero, das Logo zeichnet sich ÜBER das springende Kind, erst danach blenden Video und Weiß um.
   Die Verzögerung gilt nur beim Hineingehen in den Logo-Zustand, beim Neustart schaltet alles sofort zurück. */ .hero--v9 .hero__film.is-logo .media__veil, .hero--v9 .media--sprung.is-logo video { transition: opacity 1.2s var(--ease) 1.4s; }
.hero--v9:has(.is-logo)::before, .hero--v9:has(.is-logo) .hero__title, .hero--v9:has(.is-logo) .hero__title span,
.hero--v9:has(.is-logo) .hero__lead, .hero--v9:has(.is-logo) .eyebrow, .hero--v9:has(.is-logo) .hero__actions .link,
.hero--v9:has(.is-logo) .hero__text { transition-delay: 1.4s; }

/* Ablauf, die Schritte blenden weich ineinander statt hart umzuschalten */
html.js .ablauf__panels { display: grid; }
html.js .ablauf__panels > .ablauf__panel { grid-area: 1 / 1; }
html.js .ablauf__panels > .ablauf__panel[hidden] { display: block; visibility: hidden; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.js .ablauf__panels > .ablauf__panel { transition: opacity 1.1s ease-in-out, visibility 0s; }
  html.js .ablauf__panels > .ablauf__panel[hidden] { transition: opacity 1.1s ease-in-out, visibility 0s 1.1s; }
}

/* "Was uns leitet" mittig im Seitenraster, Text mit Abstand zum Rand, Wellen der Roll-Up-Farben im Hintergrund */
body:has(.hero) .haltung { margin-inline: auto; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 220' preserveAspectRatio='none'%3E%3Cpath d='M0 120 C 120 70 240 170 360 120 S 540 80 600 110' fill='none' stroke='%238ec5cc' stroke-width='14' stroke-linecap='round' opacity='.28'/%3E%3Cpath d='M0 160 C 140 115 260 205 390 160 S 560 125 600 150' fill='none' stroke='%2362aebc' stroke-width='10' stroke-linecap='round' opacity='.2'/%3E%3Cpath d='M0 198 C 150 160 280 232 420 196 S 570 170 600 188' fill='none' stroke='%238ec5cc' stroke-width='8' stroke-linecap='round' opacity='.22'/%3E%3C/svg%3E") right bottom / 55% 4rem no-repeat; }
body:has(.hero) .haltung__bottom { padding-bottom: 4.5rem; }
body:has(.hero) .quote__inner { padding-right: clamp(1.5rem, 4vw, 4rem); padding-bottom: 10.5rem; }
body:has(.hero) .haltung__top, body:has(.hero) .haltung__bottom { padding-right: clamp(1.5rem, 4vw, 4rem); }
@media (max-width: 56rem) {
  body:has(.hero) .haltung { background-size: 100% 3.5rem; }
  body:has(.hero) .quote__inner { padding: 2rem 1.25rem 9.5rem; }
  body:has(.hero) .haltung__bottom { padding: 0 1.25rem 3.5rem; }
}

/* Wellen aus dem Roll-Up als roter Faden auf der Startseite, sehr hell hinter dem Inhalt.
   Sie stehen fest, ohne Einzeichnen beim Scrollen. */
:root { --waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M-20 92 C 240 30 480 150 740 92 S 1200 40 1460 84' fill='none' stroke='%238ec5cc' stroke-width='16' stroke-linecap='round' opacity='.26'/%3E%3Cpath d='M-20 132 C 260 80 520 182 790 130 S 1240 92 1460 122' fill='none' stroke='%2362aebc' stroke-width='11' stroke-linecap='round' opacity='.18'/%3E%3Cpath d='M-20 168 C 280 128 560 206 840 166 S 1280 140 1460 158' fill='none' stroke='%238ec5cc' stroke-width='8' stroke-linecap='round' opacity='.22'/%3E%3C/svg%3E"); }
body:has(.hero) :is(.audience, .about, .faq) { position: relative; isolation: isolate; overflow-x: clip; }
body:has(.hero) :is(.audience, .about, .faq)::before { content: ""; position: absolute; right: 0; left: 0; bottom: 0; z-index: -1;
  height: clamp(4.5rem, 10vw, 10rem); background: var(--waves) center / 100% 100% no-repeat; pointer-events: none; }
body:has(.hero) .about::before { transform: scaleX(-1); bottom: clamp(1rem, 3vw, 3rem); }

/* Kontaktkarte "Sprechen Sie mit uns" ohne Trennlinie darüber, mit Blatt-Ecke wie das Hero-Video,
   großem hellem Zeichen im Hintergrund und den Roll-Up-Wellen unten. Gilt auf allen Seiten. */
body:has(.hero) .cta { border-top: 0; }
.cta .cta__grid { border-radius: var(--radius-card) var(--leaf) var(--radius-card) var(--radius-card);
  padding-bottom: calc(clamp(2.5rem, 6vw, 5rem) + clamp(3rem, 6vw, 5rem));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 90 C 180 30 540 150 720 90 S 1260 150 1440 90' fill='none' stroke='%238ec5cc' stroke-width='14' stroke-linecap='round' opacity='.38'/%3E%3Cpath d='M0 124 C 180 64 540 184 720 124 S 1260 184 1440 124' fill='none' stroke='%2362aebc' stroke-width='10' stroke-linecap='round' opacity='.32'/%3E%3Cpath d='M0 154 C 180 94 540 214 720 154 S 1260 214 1440 154' fill='none' stroke='%23ffffff' stroke-width='7' stroke-linecap='round' opacity='.14'/%3E%3C/svg%3E") 0 100% / 1440px clamp(5rem, 9vw, 8rem) repeat-x, linear-gradient(-135deg, #00434b 0%, var(--navy) 55%, #0b6873 100%); }
.cta .cta__grid::after { content: ""; position: absolute; z-index: -1; left: clamp(1rem, 6vw, 6rem); top: 50%; height: 120%; aspect-ratio: 1589 / 2006;
  transform: translateY(-50%) rotate(8deg); background: rgb(255 255 255 / .07); pointer-events: none;
  -webkit-mask: url("assets/img/cs-mark.svg") center / contain no-repeat; mask: url("assets/img/cs-mark.svg") center / contain no-repeat; }
.cta .cta__tel { display: inline-flex; align-items: center; gap: .45em; }
.cta .cta__tel::before { content: ""; flex: none; width: .95em; height: .95em; border-radius: 50%;
  background: var(--wave-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300545e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / 52% no-repeat; box-shadow: 0 0 0 .18em rgb(142 197 204 / .22); }
@media (max-width: 40rem) {
  .cta .cta__grid::after { top: auto; bottom: -8%; left: -12%; height: 70%; transform: rotate(8deg); }
}

/* Keine harten Trennlinien zwischen Abschnitten. Auf den Unterseiten trennt statt der Linie
   dieselbe helle Roll-Up-Welle wie auf der Startseite (--waves), abwechselnd von links und von rechts. */
.band--rule:not(.cta) { border-top: 0; }
body:not(:has(.hero)) main > .band--rule:not(.cta) { position: relative; isolation: isolate; overflow-x: clip; }
body:not(:has(.hero)) main > .band--rule:not(.cta)::before { content: ""; position: absolute; right: 0; left: 0; top: 0; z-index: -1;
  height: clamp(3.5rem, 7vw, 7rem); background: var(--waves) center / 100% 100% no-repeat; pointer-events: none; transform: translateY(-45%); }
body:not(:has(.hero)) main > .band--rule:not(.cta):nth-of-type(even)::before { transform: translateY(-45%) scaleX(-1); }

/* Auf dem Tablet ist die Bühne kaum breiter als der Film; beim Sprung nur so weit schieben,
   dass rechts keine weiße Lücke entsteht (Film ist hier 100vw breit) */
@media (max-width: 56rem) and (orientation: portrait) { .hero--v9 .hero__film.is-jump .hero__stage, .hero--v9 .hero__film.is-logo .hero__stage { transform: translateX(max(-73.7%, calc(50vw + -100%))); }
}

/* Leistungsseiten so frisch wie die Startseite, ohne Video. Kopf auf hellem Grund mit Welle,
   Eckdaten als schwebende Karten, Aufgaben als Karten mit Haken, Gesetzestext als dunkle Karte, Anfrage als Karte. */
body:has(.page-hero) .page-hero { background: var(--paper-2) var(--waves) center bottom / 100% clamp(4rem, 8vw, 8rem) no-repeat; padding-bottom: clamp(6rem, 11vw, 10rem); }
body:has(.page-hero) .page-hero h1 { font-size: clamp(2.8rem, 5.4vw, 5.4rem); line-height: 1.02; }
body:has(.page-hero) .page-para { display: inline-flex; padding: .4rem .8rem .4rem 1rem; border-radius: 999px; background: rgb(42 154 167 / .12); font-size: 1rem; }
body:has(.page-hero) .page-para::before { width: .55rem; height: .55rem; border-radius: 50%; }
body:has(.page-hero) .page-hero__img { box-shadow: var(--shadow-lift); }
body:has(.facts-band) .facts-band { position: relative; z-index: 1; margin-top: calc(clamp(3.5rem, 7vw, 6rem) * -1); padding-bottom: clamp(3rem, 6vw, 5rem); }
body:has(.facts-band) .facts { gap: 1rem; border: 0; }
body:has(.facts-band) .facts li, body:has(.facts-band) .facts li + li { padding: 1.4rem 1.5rem 1.6rem; border: 0; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow-lift); }
body:has(.facts-band) .facts__label { font: 600 .78rem var(--label); text-transform: uppercase; letter-spacing: .12em; }
body:has(.page-hero) .prose h2 { font-size: clamp(2rem, 3.2vw, 3rem); letter-spacing: -.03em; }
body:has(.page-hero) .prose h2::after { content: ""; display: block; width: 4.5rem; height: 10px; margin-top: .55rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 10'%3E%3Cpath d='M1 6 Q 10 1 19 6 T 37 6 T 55 6 T 71 5' fill='none' stroke='%2346916a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") right center / contain no-repeat; }
/* Häkchen-Listen als ruhige Liste mit feinen Linien statt als Kästchen-Raster (ungerade Anzahl ließ eine Lücke) */
body:has(.page-hero) .content .prose ul { grid-template-columns: minmax(0, 1fr); gap: 0; border: 0; border-top: 1px solid var(--line); margin-block: 1.5rem 0; }
body:has(.page-hero) .content .prose ul li { padding: 1.05rem 3rem 1.05rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; line-height: 1.5; font-size: 1.05rem; }
body:has(.page-hero) .content .prose ul li::before { right: 0; top: 1.05rem; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; transform: none;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat; }
body:has(.page-hero) .law { position: relative; margin: 2.75rem 0; padding: clamp(2rem, 4vw, 3rem); border: 0; border-radius: var(--radius-card) var(--leaf) var(--radius-card) var(--radius-card);
  background: linear-gradient(-135deg, #00434b 0%, var(--navy) 60%, #0b6873 100%); color: var(--paper); box-shadow: var(--shadow-lift); overflow: hidden; isolation: isolate; }
body:has(.page-hero) .law::before { content: "„"; position: absolute; left: 1.5rem; top: -1.5rem; z-index: -1; font: 500 12rem/1 var(--serif); color: rgb(142 197 204 / .22); }
body:has(.page-hero) .law p { color: var(--paper); font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.6; }
body:has(.page-hero) .law footer { color: var(--wave-1); font-weight: 600; }
body:has(.facts-band) .aside { top: 7rem; padding: 1.75rem; border: 0; border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-lift); }
body:has(.facts-band) .aside h2 { font-size: 1.6rem; }
body:has(.facts-band) .aside .nums { display: inline-block; margin-block: .6rem .3rem; padding: .7rem 1.2rem; border-radius: 999px; background: var(--teal); color: var(--paper); text-decoration: none; }
body:has(.facts-band) .aside .nums:hover { background: var(--teal-ink); }
body:has(.facts-band) .related__grid { gap: 1.25rem; }
body:has(.facts-band) .related__grid a { padding: 1.6rem 1.6rem 1.9rem; border: 0; border-radius: var(--radius-card); background: var(--paper); box-shadow: 0 1px 3px rgb(0 84 94 / .08), 0 18px 40px -28px rgb(0 84 94 / .45);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
body:has(.facts-band) .related__grid a:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
body:has(.facts-band) .related__para { justify-self: start; padding: .3rem .8rem; border-radius: 999px; background: rgb(42 154 167 / .12); font: 600 .95rem var(--sans); color: var(--teal-ink); }
body:has(.facts-band) .related { background: var(--paper-2); }
@media (max-width: 56rem) {
  body:has(.facts-band) .content .prose ul { grid-template-columns: 1fr; }
  body:has(.facts-band) .facts li, body:has(.facts-band) .facts li + li { padding: 1.2rem 1.25rem 1.35rem; border: 0; }
  body:has(.facts-band) .aside { margin-top: 1rem; }
}

/* Alle Unterseiten im selben frischen Stil wie die Leistungsseiten (Kopf, Überschriften mit Welle,
   Listen als Karten, Gesetzestexte als dunkle Karte) plus eigene Karten je Seite. Nur CSS, Texte unverändert. */
body:has(.page-hero):not(:has(.facts-band)) .page-hero { padding-bottom: clamp(4.5rem, 8vw, 7.5rem); }
body:has(.page-hero) .section-head h2, body:has(.page-hero) .band h2, body:has(.page-hero) .content > h2, body:has(.page-hero) .steps-section h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); letter-spacing: -.03em; line-height: 1.05; }
body:has(.page-hero) .content > h2::after, body:has(.page-hero) .band .split h2:not(.h3)::after, body:has(.page-hero) .band > .wrap > h2::after, body:has(.page-hero) .steps-section .split h2::after { content: ""; display: block; width: 4.5rem; height: 10px; margin-top: .55rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 10'%3E%3Cpath d='M1 6 Q 10 1 19 6 T 37 6 T 55 6 T 71 5' fill='none' stroke='%2346916a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") right center / contain no-repeat; }
body:has(.page-hero) .jobs .prose ul { grid-template-columns: 1fr; }

/* Leistungen: Übersicht als Karten */
body:has(.page-hero) .ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; border: 0; }
body:has(.page-hero) .ledger li { border: 0; }
body:has(.page-hero) .ledger a { height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: .9rem; padding: 1.75rem 1.75rem 1.6rem; border-radius: var(--radius-card);
  background: var(--paper); box-shadow: 0 1px 3px rgb(0 84 94 / .08), 0 18px 40px -28px rgb(0 84 94 / .45); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
body:has(.page-hero) .ledger a:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
body:has(.page-hero) .ledger__para { justify-self: start; padding: .35rem .85rem; border-radius: 999px; background: rgb(42 154 167 / .12); font: 600 1rem var(--sans); }
body:has(.page-hero) .ledger__go { display: inline-flex; justify-self: start; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: 999px; background: var(--paper-2); font-size: .95rem; }
body:has(.page-hero) .ledger a:hover .ledger__go { background: var(--teal); color: var(--paper); }
body:has(.page-hero) .more li { padding: 1.5rem 1.6rem; border: 0; border-radius: var(--radius-card); background: var(--paper-2); }

/* Arbeitsweise: "Was uns fachlich trägt" als dunkle Karte, Schwerpunkte als Karten mit Haken */
body:has(.page-hero) .split > div:has(> .ticks) { padding: clamp(1.75rem, 3.5vw, 2.5rem); border-radius: var(--radius-card) var(--leaf) var(--radius-card) var(--radius-card);
  background: linear-gradient(-135deg, #00434b 0%, var(--navy) 60%, #0b6873 100%); color: var(--paper); box-shadow: var(--shadow-lift); }
body:has(.page-hero) .split > div:has(> .ticks) .h4 { color: var(--wave-1); }
body:has(.page-hero) .split > div:has(> .ticks) .ticks li { border-bottom-color: rgb(255 255 255 / .14); color: var(--paper); }
body:has(.page-hero) .split > div:has(> .ticks) .ticks li::before { border-color: var(--wave-1); }
body:has(.page-hero) .focus { gap: 1rem; max-width: none; }
body:has(.page-hero) .focus li { padding: 1.15rem 3.9rem 1.2rem 1.25rem; border: 0; border-radius: 20px; background: var(--paper-2); }
body:has(.page-hero) .focus li::before { right: 1.15rem; top: 50%; width: 1.75rem; height: 1.75rem; margin-top: -.875rem; background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat; }
@media (min-width: 56.01rem) {
  body:has(.page-hero) .steps .step { padding: 5.5rem 1.25rem 1.5rem; border-radius: 22px; background: var(--paper); box-shadow: 0 1px 3px rgb(0 84 94 / .08), 0 18px 40px -28px rgb(0 84 94 / .45); }
  body:has(.page-hero) .steps .step::before { top: 1.25rem; right: 1.25rem; }
  body:has(.page-hero) .steps .step::after { top: calc(2.75rem + -1px); right: 4.25rem; left: calc(-1 * clamp(1rem, 3vw, 2rem) + -1.25rem); z-index: 2; }
}

/* Über uns: Leitbild als Karten, Zitat groß, Fotos und Standorte als Karten */
body:has(.page-hero) .pillars div { padding: 1.6rem 1.6rem 1.75rem; border: 0; border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-lift); }
body:has(.page-hero) .pillars div:first-child { border-top-right-radius: var(--leaf); }
body:has(.page-hero) .pillars dt { font-size: 1.7rem; color: var(--teal-ink); }
body:has(.page-hero) .content > .quote { margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(2rem, 4vw, 3rem); border-radius: var(--radius-card); background: var(--paper-2) var(--waves) center bottom / 100% 4rem no-repeat; }
body:has(.page-hero) .content > .quote p::before { content: "„"; display: block; font: 500 5rem/.6 var(--serif); color: var(--green); margin-bottom: .4rem; }
body:has(.page-hero) .photos img { border-radius: var(--radius-card); box-shadow: var(--shadow-lift); }
body:has(.page-hero) .photos > :first-child { border-radius: var(--radius-card) var(--leaf) var(--radius-card) var(--radius-card); }
body:has(.page-hero) .place { padding: 1.5rem 1.6rem 1.6rem; border: 0; border-radius: var(--radius-card); background: var(--paper); box-shadow: 0 1px 3px rgb(0 84 94 / .08), 0 18px 40px -28px rgb(0 84 94 / .45); }
body:has(.page-hero) .split > div:has(> .member) { padding: 1.75rem; border-radius: var(--radius-card); background: var(--paper-2); }

/* Kontakt: Jugendamt-Kasten als dunkle Karte */
body:has(.page-hero) .content .split > div:has(> .btn--solid) { padding: clamp(1.75rem, 3.5vw, 2.5rem); border-radius: var(--radius-card) var(--leaf) var(--radius-card) var(--radius-card);
  background: linear-gradient(-135deg, #00434b 0%, var(--navy) 60%, #0b6873 100%); color: var(--paper); box-shadow: var(--shadow-lift); }
body:has(.page-hero) .content .split > div:has(> .btn--solid) h2 { color: var(--paper); }
body:has(.page-hero) .content .split > div:has(> .btn--solid) p { color: rgb(255 255 255 / .82); }
body:has(.page-hero) .content .split > div:has(> .btn--solid) .btn--solid { background: var(--wave-1); color: var(--navy); }

/* Karriere: drei Spalten als Karten */
body:has(.page-hero) .jobs .prose { padding: 1.75rem; border-radius: var(--radius-card); background: var(--paper); box-shadow: 0 1px 3px rgb(0 84 94 / .08), 0 18px 40px -28px rgb(0 84 94 / .45); }
body:has(.page-hero) .jobs .prose:first-child { border-top-right-radius: var(--leaf); }
body:has(.page-hero) .jobs .prose h2::after { display: none; }
body:has(.page-hero) .jobs .prose ul li { padding: .85rem 3.2rem .9rem .9rem; background: var(--paper-2); }
body:has(.page-hero) .jobs .prose ul li::before { right: .85rem; top: .85rem; width: 1.5rem; height: 1.5rem; }

@media (max-width: 56rem) {
  body:has(.page-hero) .ledger, body:has(.page-hero) .focus, body:has(.page-hero) .pillars, body:has(.page-hero) .jobs, body:has(.page-hero) .places, body:has(.page-hero) .photos { grid-template-columns: 1fr; }
  body:has(.page-hero) .steps { grid-template-columns: 1fr; }
}

/* Telefonnummer im Kopf der Kontaktseite war weiß auf hellem Grund (Regel der Kontaktkarte griff mit) */
body:has(.page-hero) .page-hero .cta__tel { display: inline-flex; align-items: center; gap: .45em; color: var(--teal-ink); }
body:has(.page-hero) .page-hero .cta__tel:hover { color: var(--navy); }
body:has(.page-hero) .page-hero .cta__tel::before { content: ""; flex: none; width: .9em; height: .9em; border-radius: 50%;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / 52% no-repeat; }
/* keine zweite Welle direkt unter dem Kopf, der schon eine hat; Abstand zum ersten Abschnitt */
body:not(:has(.hero)) main > .page-hero + .band--rule:not(.cta)::before { display: none; }
body:has(.page-hero) .page-hero + .content, body:has(.page-hero) .page-hero + section.wrap.content { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* Fußbereich auf dem Handy kürzer, Standorte und Seiten nebeneinander, ohne harte Linien */
@media (max-width: 30rem) {
  .foot__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 1.25rem; }
  .foot__brand, .foot__inner > .foot__col:nth-child(2) { grid-column: 1 / -1; }
  .foot__inner > :not(:first-child) { padding-top: 0; border-top: 0; }
  .foot__links li + li { margin-top: .15rem; }
}

/* Hero auf Handy und Tablet als Vollbild, der Text liegt wie am Desktop unten auf dem Film
   (weiss auf dunklem Verlauf, im Logo-Moment Petrol auf Weiss). Beim Logo zieht die Bühne zurück, bis das ganze
   Logo über dem Text Platz hat; Lage und Grösse rechnet script.js aus (--lx, --ly, --ls). Ränder ausserhalb der
   Bühne tragen die Wandfarbe des Sprungs, weich maskiert, und werden mit dem Schleier weiss. */
@media (max-width: 56rem) and (orientation: portrait) {
  .hero--v9 { display: grid; align-items: end; height: 100svh; min-height: 34rem; margin-top: -5rem; color: var(--paper); } .hero--v9 .hero__film.media { position: absolute; inset: 0; z-index: -2; width: auto; height: auto; min-height: 0; } .hero--v9 .hero__stage { top: 0; left: 50%; height: 100%; width: auto; transform-origin: 75.8% 51.8%; } .hero--v9::before { display: block; background: linear-gradient(0deg, rgb(0 38 44 / .88) 0%, rgb(0 38 44 / .68) 36%, rgb(0 38 44 / .42) 54%, rgb(0 38 44 / 0) 76%); }
  .hero--v9 .hero__inner { padding: 0 var(--gutter) max(2.5rem, env(safe-area-inset-bottom)); }
  .hero--v9 .eyebrow { color: var(--wave-1); }
  .hero--v9 .hero__title { color: var(--paper); text-shadow: 0 2px 24px rgb(0 30 34 / .35); }
  .hero--v9 .hero__title span + span { color: var(--wave-1); }
  .hero--v9 .hero__lead { color: rgb(255 255 255 / .9); }
  .hero--v9 .hero__actions .link { color: var(--paper); background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .45); }
  .hero--v9 :focus-visible { outline-color: var(--paper); }
  .hero--v9:has(.is-logo) .eyebrow { color: var(--teal); }
  .hero--v9:has(.is-logo) .hero__title { color: var(--navy); text-shadow: none; }
  .hero--v9:has(.is-logo) .hero__title span + span { color: var(--teal); }
  .hero--v9:has(.is-logo) .hero__lead { color: var(--navy-soft); }
  .hero--v9:has(.is-logo) .hero__actions .link { color: var(--navy); background: rgb(0 84 94 / .06); box-shadow: inset 0 0 0 1px rgb(0 84 94 / .25); }
  .hero--v9:has(.is-logo) :focus-visible { outline-color: var(--teal-ink); } .hero--v9 .hero__film.is-jump, .hero--v9 .hero__film.is-logo { background: linear-gradient(#ddd9d2, #e8e4e0); } .hero--v9 .hero__film.is-logo { box-shadow: inset 0 0 0 100vmax var(--paper); transition: box-shadow 1.2s var(--ease) 1.4s; } .hero--v9 .hero__film.is-logo .hero__stage { transform: translate(var(--lx, -73.7%), var(--ly, 0px)) scale(var(--ls, .62)); transition: transform 1.6s var(--ease-out);
    -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent), linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent), linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-composite: intersect; }
}
@media (max-width: 56rem) and (orientation: portrait) and (prefers-reduced-motion: reduce) { .hero--v9 .hero__film.is-logo .hero__stage, .hero--v9 .hero__film.is-logo { transition: none; }
}

/* Chrome malt vom noch ungezeichneten Strich die runde Endkappe als Punkt (sichtbar auf dem Tablet). Bis zum Logo ganz aus. */ .media:not(.is-logo) :is(.f-body, .f-arm) { visibility: hidden; }

/* Bildschirme schmaler als 16:9 (iPad quer, 4:3-Monitore, Handy quer): die Bühne rechtsbündig,
   damit Kind und Logo rechts nicht abgeschnitten werden. Handy quer bekommt so das Desktop-Bild, Text links. */
@media (min-width: 56.01rem), (orientation: landscape) { .hero--v9 .hero__stage { transform: translate(min(-50%, calc(46vw + -90%)), -50%); }
}
/* Handy quer: Film genau bildschirmhoch, Titel etwas kleiner, damit Text und Knöpfe ohne Scrollen sichtbar sind */
@media (orientation: landscape) and (max-height: 36rem) {
  .hero--v9 { min-height: 20rem; } .hero--v9 .hero__stage { width: max(100%, calc(max(100svh, 20rem) * 1.7778)); }
  .hero--v9 .hero__inner { padding-top: 5.5rem; padding-bottom: 1.25rem; }
  .hero--v9 .hero__title { font-size: clamp(1.9rem, 9svh, 3rem); }
  .hero--v9 .eyebrow { margin-bottom: .5rem; }
  .hero--v9 .hero__lead { margin-top: .6rem; margin-bottom: 0; }
  .hero--v9 .hero__actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; width: auto; margin-top: 1rem; gap: .6rem 1rem; }
  .hero--v9 .hero__actions .btn, .hero--v9 .hero__actions .link { width: auto; min-height: 3rem; }
  .hero--v9 .eyebrow { display: block; }
  /* Bühne genau so hoch wie der Bildschirm (Kopf des Kindes nicht unter der Kopfleiste), rechtsbündig;
     links läuft das Bild weich in den dunklen Grund aus, der im Logo-Moment weiss wird */ .hero--v9 .hero__stage { top: 0; height: 100%; width: auto; transform: translateX(calc(50vw + -100%)); transform-origin: 75.8% 51.8%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); } .hero--v9 .hero__film.is-logo { box-shadow: inset 0 0 0 100vmax var(--paper); transition: box-shadow 1.2s var(--ease) 1.4s; } .hero--v9 .hero__film.is-logo .hero__stage { transform: translateX(calc(50vw + -100%)) translateY(7%) scale(.8); transition: transform 1.6s var(--ease-out); }
  .hero--v9 .hero__lead { max-width: 23rem; font-size: .95rem; }
  .hero--v9 .hero__title { font-size: clamp(1.8rem, 8svh, 2.8rem); }
}

/* Handy hoch: Türkisch, Russisch, Rumänisch haben einen deutlich längeren Titel, etwas kleiner, damit das Logo darüber Platz hat */
@media (max-width: 56rem) and (orientation: portrait) {
  html:is([lang="tr"], [lang="ru"], [lang="ro"]) .hero--v9 .hero__title { font-size: clamp(1.85rem, 8.4vw, 3rem); }
}

/* Korrekturen aus der Prüfung vor der Übergabe */
/* Ablauf: Titel und Text stehen untereinander im Bild statt fest positioniert (lange Texte liefen in den Titel) */
body:has(.hero) .ablauf__panel .ablauf__text { position: absolute; z-index: 1; right: clamp(1.25rem, 4vw, 3rem); left: clamp(1.25rem, 4vw, 3rem);
  bottom: clamp(1.4rem, 3vw, 2.5rem); }
body:has(.hero) .ablauf__panel .ablauf__text > * { position: static; margin: 0; }
body:has(.hero) .ablauf__panel .ablauf__text .ablauf__title { margin-bottom: .6rem; }
body:has(.hero) .ablauf__panel .ablauf__text p { max-width: 34em; padding-left: 0; }
/* Häufige Fragen: Antwort mit Abstand zum Kartenrand, Pfeil mittig zur ersten Zeile */
.faq details p { margin-bottom: 0; }
.faq details[open] { padding-bottom: 1.35rem; }
.faq summary::after { top: calc(1.25rem + .675em + -.45rem); }
.faq details[open] summary::after { top: calc(1.25rem + .675em + -.2rem); }
/* Zitat-Karte nicht direkt am grauen Ablauf-Band */
body:has(.hero) .haltung { margin-top: clamp(3rem, 6vw, 5rem); }
/* Willkommen: Begrüssungen einzeilig und als grosse Schrift (ab 24 px reicht 3:1 Kontrast weiss auf Türkis) */
.welcome__list a { font-size: clamp(1.5rem, 1.3rem + .45vw, 1.75rem); white-space: nowrap; }
.welcome__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.5rem), 1fr)); }
/* Kontrast mindestens 4,5:1 für Text: weiss auf dunklerem Türkis, kleine Auszeichnung in Petrol-Türkis */
.top__tel, body:has(.hero) .btn--solid, body:has(.facts-band) .aside .nums { background: var(--teal-ink); }
.top__tel:hover, body:has(.hero) .btn--solid:hover, body:has(.facts-band) .aside .nums:hover { background: var(--navy); }
body:has(.hero) .btn--solid { box-shadow: 0 10px 24px -12px rgb(27 108 119 / .8); }
.hero--v9:has(.is-logo) .eyebrow { color: var(--teal-ink); }
/* Hero Desktop: etwas dunklerer Verlauf links, damit die zweite Titelzeile auch auf hellen Filmbildern lesbar bleibt */
@media (min-width: 56.01rem), (orientation: landscape) { .hero--v9::before { background: linear-gradient(90deg, rgb(0 38 44 / .74) 0%, rgb(0 46 52 / .46) 40%, rgb(0 46 52 / 0) 72%),
    linear-gradient(0deg, rgb(0 38 44 / .5) 0%, rgb(0 38 44 / 0) 42%), linear-gradient(180deg, rgb(0 38 44 / .3) 0%, rgb(0 38 44 / 0) 20%); }
}
/* Sprachwahl: aktuelle Sprache sichtbar markiert */
.langs__list a[aria-current="true"] { background: rgb(42 154 167 / .12); }
.langs__list a[aria-current="true"]::after { content: " ✓"; }
/* Kontaktkarte: Telefon und Mail gross genug zum Antippen */
.cta .cta__contact a { min-height: 2.75rem; display: inline-flex; align-items: center; }

/* Korrekturen aus der zweiten Prüfung */
/* Hero beginnt auf jedem Gerät genau oben (Wert aus script.js, Kopfleiste samt Rand) */
.hero.hero--v9 { margin-top: calc(var(--top-h, 5rem) * -1); }
/* Ablauf-Reiter: lange Namen (ru, en, de auf 360 px) dürfen umbrechen statt über die Pille zu laufen */
body:has(.hero) .ablauf__tab { max-width: 100%; white-space: normal; text-align: right; }
/* Handy: Reiter so breit wie ihr Name (kurze stehen zu zweit, lange bekommen eine eigene Zeile) statt fester zwei Spalten */
body:has(.hero) .ablauf__tabs { display: flex; flex-wrap: wrap; }
/* Handy hoch: Text auf hellen Filmbildern (Sprung vor weisser Wand) besser lesbar */
@media (max-width: 56rem) and (orientation: portrait) { .hero--v9::before { background: linear-gradient(0deg, rgb(0 38 44 / .9) 0%, rgb(0 38 44 / .78) 38%, rgb(0 38 44 / .6) 56%, rgb(0 38 44 / .2) 70%, rgb(0 38 44 / 0) 82%); }
  .hero--v9 .eyebrow, .hero--v9 .hero__lead { text-shadow: 0 1px 12px rgb(0 30 34 / .55); }
  .hero--v9 .hero__title { text-shadow: 0 2px 18px rgb(0 30 34 / .6); }
  .hero--v9:has(.is-logo) :is(.eyebrow, .hero__lead, .hero__title) { text-shadow: none; }
}
/* Handy quer: lange Titel (tr, ru, ro) kleiner, damit nichts unter der Kopfleiste liegt; Ablauf-Bild passt unter die Kopfleiste */
@media (orientation: landscape) and (max-height: 36rem) {
  html:is([lang="tr"], [lang="ru"], [lang="ro"]) .hero--v9 .hero__title { font-size: clamp(1.5rem, 6.6svh, 2.3rem); }
  html:is([lang="tr"], [lang="ru"], [lang="ro"]) .hero--v9 .hero__lead { font-size: .9rem; max-width: 26rem; }
  body:has(.hero) .ablauf .ablauf__video { max-height: calc(100svh + -7.5rem); }
}
/* Handy quer: Ablauf-Bild volle Breite in der begrenzten Höhe (vorher schmaler als Text und Verlauf) */
@media (orientation: landscape) and (max-height: 36rem) {
  body:has(.hero) .ablauf .ablauf__video { width: 100%; aspect-ratio: auto; height: min(calc(100svh + -7.5rem), calc((100vw + -2 * var(--gutter)) * 9 / 21)); max-height: none; }
}

/* "Was uns leitet", die Pfeile lagen auf dem Handy unter dem langen Zitat, man sah Pfeile und Bild
   nicht auf einem Bildschirm. Auf dem Handy liegen Pfeile, Zähler und Fortschritt jetzt unten auf dem Bild. */
@media (max-width: 48rem) {
  body:has(.hero) .haltung__bottom { align-self: start; z-index: 3; padding: 0 1rem;
    margin-top: calc(clamp(13rem, 60vw, 20rem) + -4.6rem); pointer-events: none; }
  body:has(.hero) .haltung__bottom > * { pointer-events: auto; }
  body:has(.hero) .quotes__controls { gap: .5rem; }
  body:has(.hero) .quotes__controls .round { background: rgb(255 255 255 / .94); box-shadow: 0 4px 14px -4px rgb(0 30 34 / .45); }
  body:has(.hero) .quotes__controls .round:hover { background: var(--navy); }
  body:has(.hero) .quotes__count { min-width: 0; padding: .35rem .8rem; border-radius: 999px; background: rgb(255 255 255 / .94); color: var(--navy); font-size: .95rem; }
  body:has(.hero) .quote__inner { padding-bottom: 2.5rem; }
}

/* Korrekturen aus der dritten Prüfung (alle Seiten in sieben Bildschirmgrößen) */
/* Hero am Desktop und Handy quer: dunkler Schein hinter dem Titel, damit "Wir gehen ihn mit." auch vor der hellen Wand lesbar ist */
@media (min-width: 56.01rem), (orientation: landscape) { .hero--v9::before { background: radial-gradient(ellipse 55% 60% at 24% 64%, rgb(0 34 40 / .7) 0%, rgb(0 34 40 / .55) 60%, rgb(0 34 40 / 0) 100%),
    linear-gradient(90deg, rgb(0 38 44 / .74) 0%, rgb(0 46 52 / .46) 40%, rgb(0 46 52 / 0) 72%),
    linear-gradient(0deg, rgb(0 38 44 / .5) 0%, rgb(0 38 44 / 0) 42%), linear-gradient(180deg, rgb(0 38 44 / .3) 0%, rgb(0 38 44 / 0) 20%); }
  .hero--v9 .hero__title { text-shadow: 0 2px 22px rgb(0 30 34 / .6), 0 0 2px rgb(0 30 34 / .3); }
}
/* Handy quer: beim Sprung rückt die Bühne etwas zurück, damit der Kopf des Kindes unter der Kopfleiste bleibt;
   Ränder laufen weich in die Wandfarbe aus (beim Logo auch rechts und unten, vorher sah man die Filmkante) */
@media (orientation: landscape) and (max-height: 36rem) { .hero--v9 .hero__film.is-jump, .hero--v9 .hero__film.is-logo { background: linear-gradient(#ddd9d2, #e8e4e0); } .hero--v9 .hero__film.is-jump .hero__stage { transform: translateX(calc(50vw + -100%)) translate(3%, 6%) scale(.88); transition: transform .9s var(--ease-out);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%), linear-gradient(transparent, #000 10%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 22%), linear-gradient(transparent, #000 10%); mask-composite: intersect; } .hero--v9 .hero__film.is-logo .hero__stage { transform: translateX(calc(50vw + -100%)) translateY(7%) scale(.8); transition: transform 1.6s var(--ease-out);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 93%, transparent), linear-gradient(transparent, #000 8%, #000 91%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 93%, transparent), linear-gradient(transparent, #000 8%, #000 91%, transparent);
    mask-composite: intersect; }
}
@media (orientation: landscape) and (max-height: 36rem) and (prefers-reduced-motion: reduce) { .hero--v9 .hero__film.is-jump .hero__stage, .hero--v9 .hero__film.is-logo .hero__stage { transition: none; }
}
/* Lange Wörter in Karten trennen statt über den Rand laufen */
.related__name, .facts__value, .tile__name { hyphens: auto; overflow-wrap: break-word; }
/* Über uns: Quelle des Zitats steht über den Wellen, nicht darauf */
body:has(.page-hero) .content > .quote { padding-bottom: calc(clamp(2rem, 4vw, 3rem) + 4.5rem); }
/* Brotkrumen: Schrägstrich am Zeilenende statt am Anfang der neuen Zeile */
.crumbs li + li::before { content: none; }
.crumbs li:not(:last-child)::after { content: "/"; margin-right: .35rem; color: var(--wave-2); }
/* Ablauf-Reiter auf dem Handy als Schrittleiste: vier Nummernkreise auf einer Linie. Der Name des Schritts
   steht groß im Bild darunter; im Knopf bleibt er für Screenreader erhalten (Schriftgröße 0 statt ausblenden). */
@media (max-width: 40rem) {
  body:has(.hero) .ablauf__tabs { position: relative; display: flex; justify-content: space-between; gap: 0; margin-bottom: 1.25rem; }
  body:has(.hero) .ablauf__tabs::before { content: ""; position: absolute; right: 1.5rem; left: 1.5rem; top: 50%; height: 2px; background: var(--wave-2); }
  body:has(.hero) .ablauf__tab, body:has(.hero) .ablauf__tab[aria-selected="true"] { width: auto; min-height: 0; padding: .25rem; border-radius: 50%;
    background: none; box-shadow: none; font-size: 0; overflow: visible; }
  body:has(.hero) .ablauf__tab::after { display: none; }
  body:has(.hero) .ablauf__num { position: relative; z-index: 1; width: 3rem; height: 3rem; font-size: 1.2rem; background: var(--paper);
    box-shadow: inset 0 0 0 2px var(--wave-2), 0 0 0 .4rem var(--paper-2, #f4f7f7); }
  body:has(.hero) .ablauf__tab[aria-selected="true"] .ablauf__num { background: var(--navy); color: var(--paper); box-shadow: 0 0 0 .4rem var(--paper-2, #f4f7f7); }
}
/* "Was uns leitet" auf dem Handy, Pfeile und Zähler direkt UNTER dem Bild statt darauf; das Zitat steht
   mittig im restlichen Platz, damit unter kurzen Zitaten keine große Lücke bleibt */
@media (max-width: 48rem) {
  body:has(.hero) .haltung__bottom { margin-top: calc(clamp(13rem, 60vw, 20rem) + 1rem); padding: 0 1.25rem; }
  body:has(.hero) .quotes__controls .round { background: var(--paper); box-shadow: inset 0 0 0 1px rgb(0 84 94 / .28); }
  body:has(.hero) .quotes__count { background: var(--paper-2); }
  body:has(.hero) .haltung .quote__inner { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 6.25rem; padding-bottom: 4.5rem; }
}
@media (max-width: 56rem) {
  body:has(.hero) .haltung__label { display: inline-block; padding: .3rem .8rem; border-radius: 999px; background: rgb(255 255 255 / .92); }
}
/* Leistungen-Übersicht mit den Bildern der Leistungen wie auf der Startseite */
body:has(.page-hero) .ledger a { grid-template-rows: auto auto auto 1fr auto; padding-top: .6rem; }
body:has(.page-hero) .ledger__img { display: block; margin: 0 -1.15rem .35rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--radius-card) + -.6rem); background: var(--paper-2); }
body:has(.page-hero) .ledger__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
body:has(.page-hero) .ledger a:hover .ledger__img img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { body:has(.page-hero) .ledger__img img { transition: none; } }
/* Gesichter-Bild vom Roll-up im Fuß, rund zugeschnitten über den Roll-up-Wellen */
.foot__faces { display: grid; place-items: center; padding: clamp(1rem, 3vw, 2rem) var(--gutter) 0;
  background: var(--waves) center 60% / 100% clamp(5rem, 9vw, 8rem) no-repeat; }
.foot__faces img { width: clamp(12rem, 22vw, 18rem); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 .5rem var(--paper), 0 0 0 .8rem rgb(42 154 167 / .3), 0 30px 60px -30px rgb(0 84 94 / .5); }
/* Sehr flaches Handy quer (z. B. 568x320): Logo etwas kleiner und höher, sonst berührt der Stiel den Knopf "Unsere Leistungen" */
@media (orientation: landscape) and (max-height: 22rem) { .hero--v9 .hero__film.is-logo .hero__stage { transform: translateX(calc(50vw + -100%)) translateY(3%) scale(.72); }
  html:is([lang]) .hero--v9 .hero__lead { max-width: 21rem; }
}
/* "Made by Immersmart" im Fuß, klein und zurückhaltend */
.foot__credit { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; font-size: .8rem; color: var(--navy-soft); text-decoration: none; opacity: .85; transition: opacity .2s; }
.foot__credit:hover, .foot__credit:focus-visible { opacity: 1; }
.foot__credit img { height: .8rem; width: auto; display: block; }
.foot__base { align-items: center; }

/* ==========================================================================
   Farsi: siebte Sprache, laeuft von rechts nach links. build.py erzeugt mit rtlcss das
   gespiegelte styles-rtl.css; Regeln mit dem Kommentar rtl:ignore bleiben wie sie sind (Film, Buehne, Logo, Haken).
   Schrift Vazirmatn (OFL) fuer alles, weil Alegreya, Jost und Atkinson keine persischen Buchstaben haben.
   ========================================================================== */
html[lang="fa"] { --serif: "Vazirmatn Variable", "Alegreya", serif; --label: "Vazirmatn Variable", sans-serif; --sans: "Vazirmatn Variable", "Atkinson Hyperlegible Next", sans-serif; }
/* Arabische Schrift verbindet die Buchstaben; jede Sperrung (auch -.02em) reisst die Woerter auseinander. Deshalb einmal fuer alles. */
html[lang="fa"] * { letter-spacing: 0 !important; }
html[lang="fa"] :is(h1, h2, h3, h4, .hero__title, .haltung .quote p, .audience__intro p, .sheet__links a) { line-height: 1.3; }
html[lang="fa"] .hero--v9 .hero__title { line-height: 1.2; }
/* Zahlen, Adressen, Paragrafen bleiben links nach rechts */ html[dir="rtl"] :is(.nums, [dir="ltr"]) { direction: ltr; unicode-bidi: isolate; }
/* Der Film hat das Kind rechts, der Text bleibt links (Block nur so breit wie der Text); innerhalb laeuft er von rechts */ html[dir="rtl"] .hero--v9 .hero__inner { direction: ltr; } html[dir="rtl"] .hero--v9 .hero__text { direction: rtl; justify-self: start; width: fit-content; max-width: 100%; }
/* Pfeile zeigen in Leserichtung */
html[dir="rtl"] :is(.hero--v9 .hero__actions .link, .link--pill, .feature .link)::after { content: "←"; }
/* Die grossen Zier-Anfuehrungszeichen bleiben in Alegreya, in Vazirmatn sitzt das Zeichen mitten im Text */
html[lang="fa"] :is(.haltung .quote p, body:has(.page-hero) .law)::before { font-family: "Alegreya", serif; }
/* Das persische Wort im Willkommen-Band und im Sprachmenue der anderen Sprachen (Alegreya hat die Buchstaben nicht) */
a[lang="fa"] { font-family: "Vazirmatn Variable", sans-serif; }

/* Oben liegt die Kopfleiste flach ueber die volle Breite, erst beim Scrollen wird sie zur Pille (Klasse aus script.js).
   Kein Rand oben in beiden Zustaenden: die Pille schwebt nur ueber den sticky-Abstand, so springt der Inhalt beim Wechsel nicht. */
.top { margin-top: 0; }
.top:not(.is-pill) { top: 0; width: 100%; border-radius: 0; background: rgb(255 255 255 / .9); box-shadow: 0 1px 0 rgb(0 84 94 / .08); }
@media (prefers-reduced-motion: no-preference) {
  .top { transition: width .45s var(--ease-out), top .45s var(--ease-out), border-radius .45s var(--ease-out), background-color .45s, box-shadow .45s; }
}

/* Handynummer unter der Festnetznummer, sie ist meist nur mobil erreichbar */
.cta__mobil, .sheet__mobil { display: inline-flex; align-items: baseline; gap: .55em; text-decoration: none; }
.cta__mobil > span:first-child, .sheet__mobil > span:first-child { font: 600 .78rem/1 var(--label); text-transform: uppercase; letter-spacing: .18em; color: var(--teal); }
.cta__mobil { font: 380 clamp(1.5rem, 1rem + 2vw, 2.5rem)/1.1 var(--serif); color: var(--teal-ink); }
.cta__mobil:hover { color: var(--navy); }
.cta .cta__mobil { color: var(--paper); }
.cta .cta__mobil > span:first-child { color: var(--wave-1); }
.cta .cta__mobil:hover { color: var(--wave-1); }
.sheet__mobil { display: flex; margin-top: .35rem; font: 600 1.25rem var(--sans); color: var(--navy); }
body:has(.facts-band) .aside .aside__mobil { display: inline-flex; align-items: center; gap: .5em; margin-bottom: .3rem; padding: .7rem 1.2rem; border-radius: 999px; background: var(--teal-ink); color: var(--paper); font-weight: 600; text-decoration: none; }
body:has(.facts-band) .aside .aside__mobil:hover { background: var(--navy); }
body:has(.facts-band) .aside .aside__mobil > span:first-child { font-weight: 400; opacity: .85; }
body:has(.facts-band) .aside .aside__mobil .nums, body:has(.facts-band) .aside .aside__mobil .nums:hover { display: inline; margin: 0; padding: 0; border-radius: 0; background: none; color: inherit; }

/* Beratung (Familien kommen direkt) und Wohngruppen als eigene Zielgruppen, je eine grosse Karte wie die Leistungen */
.offers { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.offer { display: grid; grid-template-rows: auto 1fr; padding: .6rem; border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-card); }
.offer__img { overflow: hidden; aspect-ratio: 16 / 9; border-radius: calc(var(--radius-card) + -6px); background: var(--mist); }
.offer__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.offer__body { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding: clamp(1.25rem, 2.5vw, 2rem) clamp(.9rem, 2vw, 1.6rem) clamp(1rem, 2vw, 1.4rem); }
.offer__body .eyebrow { margin: 0; }
.offer__body h3 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); color: var(--navy); }
.offer__body p { margin: 0; color: var(--navy-soft); }
.offer__body .link--pill { margin-top: auto; }
@media (max-width: 48rem) { .offers { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .top:not(.is-pill) .top__inner { padding-left: 1rem; } }

/* Drei Zielgruppen gleich unter dem Film, damit Familien und Wohngruppen sofort sehen, dass sie direkt kommen koennen.
   Eine schlanke Leiste statt drei Textkarten, damit es zusammen mit den sechs Leistungen nicht zu voll wird. */
.guide { list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding: .8rem; max-width: 86rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
  border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-card); }
.guide__item { display: flex; align-items: center; gap: 1.4rem; height: 100%; padding: .7rem .7rem .7rem 1.8rem; border-radius: 999px; color: var(--navy); text-decoration: none; transition: background-color .3s; }
.guide__item:hover, .guide__item:focus-visible { background: var(--mist); }
.guide__item img { flex: none; width: 6.5rem; height: 6.5rem; border-radius: 50%; object-fit: cover; }
.guide__text { display: flex; flex-direction: column; gap: .4rem; min-width: 0; flex: 1; }
.guide__who { font: 600 .88rem/1.25 var(--label); text-transform: uppercase; letter-spacing: .16em; color: var(--teal); }
.guide__what { font: 450 clamp(1.5rem, 1.05rem + 1vw, 1.95rem)/1.2 var(--serif); }
.guide__item::after { content: "→"; flex: none; font-size: 1.5rem; color: var(--teal); transition: transform .4s var(--ease-out); }
.guide__item:hover::after { transform: translateX(-4px); }
html[dir="rtl"] .guide__item::after { content: "←"; }
@media (max-width: 70rem) {
  .guide { grid-template-columns: minmax(0, 1fr); border-radius: var(--radius-card); }
  .guide__item { border-radius: calc(var(--radius-card) + -8px); }
} .guide li:nth-child(2) .guide__item img { object-position: 50% 60%; }
/* Bild oben auf den Leistungsseiten: Ausschnitt so, dass die Personen ganz zu sehen sind */ .page-hero__img img[src*="empfang-rollup-1"] { object-position: 72% 50%; } .page-hero__img img[src*="leistung-erziehungsbeistandschaft-4"] { object-position: 15% 50%; } .page-hero__img img[src*="leistung-begleiteter-umgang-4"] { object-position: 50% 40%; } .page-hero__img img[src*="leistung-krisenintervention-3"] { object-position: 100% 50%; } .page-hero__img img[src*="leistung-kurzzeitintervention-3"] { object-position: 25% 50%; }
/* Karriere: Logo-Wand und Figur ganz zeigen, deshalb im Seitenverhältnis des Bildes */
.page-hero__img img[src*="karriere-wuerfel-2"] { aspect-ratio: 4 / 3; }

/* Dunkler Schein im Hero etwas leichter, der Film soll mehr durchscheinen */
@media (min-width: 56.01rem), (orientation: landscape) { .hero--v9::before { background: radial-gradient(ellipse 55% 60% at 24% 64%, rgb(0 34 40 / .48) 0%, rgb(0 34 40 / .36) 60%, rgb(0 34 40 / 0) 100%),
    linear-gradient(90deg, rgb(0 38 44 / .52) 0%, rgb(0 46 52 / .3) 40%, rgb(0 46 52 / 0) 72%),
    linear-gradient(0deg, rgb(0 38 44 / .35) 0%, rgb(0 38 44 / 0) 42%), linear-gradient(180deg, rgb(0 38 44 / .22) 0%, rgb(0 38 44 / 0) 20%); }
}
@media (max-width: 56rem) and (orientation: portrait) { .hero--v9::before { background: linear-gradient(0deg, rgb(0 38 44 / .74) 0%, rgb(0 38 44 / .58) 38%, rgb(0 38 44 / .42) 56%, rgb(0 38 44 / .12) 70%, rgb(0 38 44 / 0) 82%); }
}
/* Wegweiser groesser: am Desktop etwas breiter als der Text darueber, am Handy kompakter, damit kein Wort zerbricht */
.guide__what { text-wrap: balance; }
.guide__who, .guide__what { overflow-wrap: normal; hyphens: manual; }
@media (min-width: 70.01rem) { .guide { max-width: none; margin-inline: calc(-1 * var(--gutter) + 1.25rem); } }
@media (max-width: 40rem) {
  .guide { padding: .5rem; }
  .guide__item { gap: .9rem; padding: .5rem .5rem .5rem .9rem; }
  .guide__item img { width: 4.5rem; height: 4.5rem; }
  .guide__who { font-size: .72rem; letter-spacing: .1em; }
  .guide__what { font-size: 1.35rem; }
  .guide__item::after { font-size: 1.15rem; }
}
/* Seitentitel der Unterseiten kleiner, damit kurze Titel in eine Zeile passen und lange in zwei */
body:has(.page-hero) .page-hero h1 { font-size: clamp(2.1rem, .8rem + 3.2vw, 3.6rem); line-height: 1.08; }
/* Fotos stehen still, kein Zoom, kein Gleiten, kein Aufdecken */
.page-hero__img, .page-hero__img img { animation: none; transform: none; }
.haltung .quote .quote__bg, .haltung .quote.is-active .quote__bg { animation: none; }
.tile__img img, .tile:hover .tile__img img, .tile:focus-visible .tile__img img,
.about__photo img, .about__photo:hover img,
body:has(.page-hero) .ledger__img img, body:has(.page-hero) .ledger a:hover .ledger__img img { transform: none; transition: none; }
/* Kacheln: Pfeil als Glasknopf oben rechts auf dem Foto, der Name bekommt die volle Breite und wird nicht getrennt */
.tile__name { grid-column: 1 / -1; }
.tile__go { position: absolute; top: 1.4rem; left: 1.4rem; z-index: 1; margin: 0; background: rgb(255 255 255 / .85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* Wegweiser: in der Dreierreihe stehen Etikett und Satz in allen drei Feldern auf gleicher Höhe */
@media (min-width: 70.01rem) {
  .guide__what { min-height: 2.4em; }
  .guide__who { min-height: 2.5em; display: flex; align-items: flex-end; }
}
/* Größere Klickflächen für kleine Textlinks im Fuß und in der Brotkrumen-Zeile, ohne dass sich die Zeilen verschieben */
.foot__col p a, .foot__links a, .crumbs a { padding-block: .25rem; }

/* Ein Hover-System für alle Knöpfe und Links
   Gefüllt: Petrol-Türkis, beim Überfahren dunkles Petrol und leicht angehoben.
   Kontur: füllt sich dunkel. Auf dunklen Karten: helles Türkis, beim Überfahren weiß.
   Textlinks bekommen eine Unterstreichung, die Navigation zeichnet ihre Linie von links ein. */
.btn, .top__tel { transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.btn.btn--solid.btn--solid, .top__tel.top__tel.top__tel { background: var(--teal-ink); color: var(--paper); }
.btn.btn--solid.btn--solid:is(:hover, :focus-visible), .top__tel.top__tel.top__tel:is(:hover, :focus-visible) {
  background: var(--navy); color: var(--paper); transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgb(0 67 75 / .7); }
.btn.btn--line.btn--line:is(:hover, :focus-visible) { background: var(--navy); color: var(--paper); box-shadow: inset 0 0 0 1px var(--navy); transform: translateY(-2px); }
body:has(.page-hero) .content .split > div:has(> .btn--solid) .btn--solid:is(:hover, :focus-visible) { background: var(--paper); color: var(--navy); }
.cta__tel, .cta__mobil, .cta__contact a, .foot__col p a, .content a:not(.btn) { text-underline-offset: .22em; text-decoration-thickness: 1px; }
.cta__tel:hover, .cta__mobil:hover, .cta__contact a:hover, .foot__col p a:hover { text-decoration: underline; }
.nav a:not([aria-current]) { background: linear-gradient(var(--teal), var(--teal)) 0.65rem calc(100% + -.15rem) / 0 2px no-repeat; transition: background-size .35s var(--ease), color .3s; }
.nav a:not([aria-current]):hover { background-size: calc(100% + -1.3rem) 2px; }
.top__logo img { transition: transform .4s var(--ease), opacity .3s; }
.top__logo:hover img { transform: translateY(-1px); opacity: .85; }
@media (prefers-reduced-motion: reduce) { .btn, .top__tel, .nav a, .top__logo img { transition: none; } .btn:hover, .top__tel:hover { transform: none; } }
/* Standbild unter dem Startfilm: erscheint sofort, verschwindet, sobald der Film läuft oder das Logo steht */ .hero--v9 .hero__stage .hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s; }
.hero__film.is-playing .hero__poster, .hero__film.is-logo .hero__poster { opacity: 0; }
/* Kopfleiste auf allen Seiten wie auf der Startseite: gleiche Höhe, gleich großes Logo */
.top__inner { max-width: 94rem; min-height: 5.5rem; }
@media (min-width: 40.01rem) { .top__logo { width: clamp(10rem, 15vw, 14rem); } }
@media (min-width: 72.01rem) { .top__logo img { width: 100%; height: auto; } .top__inner { gap: 1rem; } .nav a { padding-inline: .55rem; } }
@media (max-width: 48rem) { .top__inner { min-height: 4.5rem; } }
/* Startseite: weniger Leerraum zwischen dunkler Karte, "Wer wir sind" und dem Willkommen-Band */
body:has(.hero) .feature { padding-bottom: clamp(2.5rem, 4.5vw, 4.5rem); }
body:has(.hero) .about { padding-block: clamp(2.5rem, 4.5vw, 4.5rem) clamp(1rem, 2vw, 2rem); }
/* Karriere: am Ende eine Bewerbungs-Karte statt der allgemeinen Telefon-Karte */
body:has(.apply) .cta { display: none; }
.apply { padding-block: 0 var(--space); }
.apply__card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(15rem, auto); gap: 2rem 3rem; align-items: center;
  padding: clamp(2rem, 4.5vw, 3.75rem); border-radius: var(--radius-card) var(--leaf) var(--radius-card) var(--radius-card); background: var(--navy); color: var(--paper); box-shadow: var(--shadow-lift); }
.apply__card::after { content: ""; position: absolute; left: 0; bottom: 0; width: 70%; height: 45%; background: var(--waves) left bottom / 100% 100% no-repeat; opacity: .35; pointer-events: none; }
.apply__card > * { position: relative; z-index: 1; }
.apply__eyebrow { margin-bottom: 1rem; font: 600 .82rem/1.2 var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--wave-1); }
.apply__card h2 { color: var(--paper); font: 500 clamp(1.9rem, 3.4vw, 3rem)/1.08 var(--serif); letter-spacing: -.02em; }
.apply__card p:not(.apply__eyebrow) { margin-top: 1rem; max-width: 34em; color: rgb(255 255 255 / .82); line-height: 1.65; }
.apply__actions { display: flex; flex-direction: column; gap: .75rem; }
.apply__actions .btn { width: 100%; justify-content: center; }
.apply__card .btn.btn--solid.btn--solid { background: var(--wave-1); color: var(--navy); box-shadow: none; }
.apply__card .btn.btn--solid.btn--solid:is(:hover, :focus-visible) { background: var(--paper); color: var(--navy); }
.apply__card .btn.btn--line { color: var(--paper); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55); }
.apply__card .btn.btn--line.btn--line:is(:hover, :focus-visible) { background: var(--paper); color: var(--navy); box-shadow: inset 0 0 0 1px var(--paper); }
.apply__card .link { justify-self: center; align-self: center; color: var(--wave-1); }
.apply__card :focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
@media (max-width: 52rem) { .apply__card { grid-template-columns: minmax(0, 1fr); } }
/* Kontakt: Telefon und Sprechzeiten stehen schon auf der Seite, die allgemeine Telefon-Karte entfällt dort */
.page--kontakt .cta { display: none; }

/* Jede Unterseite bekommt oben ihre eigene Aufteilung, damit nicht alle gleich aussehen.
   Arbeitsweise: Bild links, Text rechts unten. Kontakt: rechts die Standorte statt eines Fotos. */
.page-hero--flip .page-hero__img, .page-hero--flip .page-hero__img img { border-radius: var(--leaf) 0 0 0; }
@media (min-width: 52.01rem) {
  .page-hero--flip .page-hero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; }
  .page-hero--flip .page-hero__img { order: -1; }
  .page-hero--flip .page-hero__text { padding-bottom: 2rem; }
  body:has(.page-hero--flip) .page-hero h1 { font-size: clamp(2.6rem, 1rem + 3.6vw, 4.4rem); }
}
.page-hero__grid > .page-hero__places { display: grid; gap: 1rem; }
.page-hero__places .places { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.page-hero__places .places__note { margin: .25rem 0 0; font-size: .95rem; }
.place h2 { margin-bottom: .4rem; }
@media (max-width: 52rem) {
  .page-hero__places .places { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}

/* Handy: die Pille beim Scrollen flacher, damit mehr vom Inhalt zu sehen ist. Knöpfe behalten 44 px Höhe. */
@media (max-width: 40rem) {
  .top.is-pill .top__inner { min-height: 3.5rem; padding: .3rem .9rem .3rem .35rem; }
  .top.is-pill .top__logo img { max-height: 1.75rem; }
}

/* Weitere Leistungen wie die Kacheln der Startseite: oben das Bild der Hilfe, darauf Paragraf und Pfeil-Knopf als Glas.
   Die ganze Karte ist der Link. Bildausschnitte wie im Kopf der jeweiligen Leistungsseite. */
body:has(.facts-band) .related__grid a { position: relative; padding-top: 0; overflow: hidden; }
.related__img { display: block; margin: 0 -1.6rem .4rem; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.related__img img { display: block; width: 100%; height: 100%; object-fit: cover; } .related__img img[src*="empfang-rollup-1"] { object-position: 72% 50%; } .related__img img[src*="leistung-erziehungsbeistandschaft-4"] { object-position: 15% 50%; } .related__img img[src*="leistung-krisenintervention-3"] { object-position: 100% 50%; } .related__img img[src*="leistung-kurzzeitintervention-3"] { object-position: 25% 50%; } .related__img img[src*="leistung-begleiteter-umgang-4"] { object-position: 50% 40%; } .related__img img[src*="leistung-beratung-2"] { object-position: 50% 60%; }
body:has(.facts-band) .related__grid .related__para { position: absolute; top: 1.2rem; right: 1.2rem; z-index: 1; background: rgb(255 255 255 / .88); }
body:has(.facts-band) .related__grid a::after { content: ""; position: absolute; top: 1.2rem; left: 1.2rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: rgb(255 255 255 / .88) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005a63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 1.1rem no-repeat;
  box-shadow: inset 0 0 0 1px var(--line); }
body:has(.facts-band) .related__grid a:is(:hover, :focus-visible)::after { background-color: var(--wave-1); } html[dir="rtl"] body:has(.facts-band) .related__grid a::after { transform: scaleX(-1); }

/* Ziffern in Telefonnummern und Paragrafen-Etiketten in Jost: die Fließtextschrift hat nur die durchgestrichene Null.
   :where hält die Regel schwach, die großen Nummern in Alegreya (Kontaktkarte, Kontaktseite, Menü) bleiben, wie sie sind. */
:where(.nums), body:has(.facts-band) .related__para, .page-para, body:has(.page-hero) .ledger__para { font-family: var(--label); letter-spacing: .02em; }
:is(.cta__mobil, .sheet__mobil) .nums { font-family: inherit; letter-spacing: inherit; }

/* Rahmen bei Bedienung mit der Tastatur: um die große Telefonnummer rund und mit Luft */
.cta__tel:focus-visible { outline-offset: 8px; border-radius: 999px; }

/* Hilfeablauf blättert von selbst: ein grüner Balken zeigt, wie lange der Schritt noch steht.
   Am Computer unter dem Reiter, auf dem Handy (Reiter sind dort nur Nummernkreise) unten am Film. */
.ablauf__tab { position: relative; overflow: hidden; }
.ablauf__tab::after, .ablauf__video::after { content: ""; position: absolute; right: 0; bottom: 0; height: 3px; width: 100%; background: var(--green); transform: scaleX(0); transform-origin: right; } html[dir="rtl"] :is(.ablauf__tab, .ablauf__video)::after { transform-origin: right; }
.ablauf__video { position: relative; }
.ablauf__video::after { z-index: 1; height: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .is-auto [aria-selected="true"]::after { animation: progress 7s linear both; }
}
@media (max-width: 40rem) {
  body:has(.hero) .ablauf__tab::after { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    .is-auto .ablauf__panel:not([hidden]) .ablauf__video::after { animation: progress 7s linear both; }
  }
}
@keyframes progress { to { transform: scaleX(1); } }