/* =====================================================================================================================
   Ausbau mit dem Fähigkeiten-Katalog (25.09.2026), Unterseiten und 404. Plan: _konzept/EINSATZPLAN_KATALOG_2026-09-25.md,
   Verhalten in js/ausbau.js und js/himmel.js. Grundsatz für jedes Teil: ohne JavaScript lesbar, mit Tastatur bedienbar,
   bei reduzierter Bewegung ein Standbild, Schleifen nur im Bild. Katalog-IDs stehen in Backticks.
   ===================================================================================================================== */

/* ---------- Himmel am Seitenanfang: `held-himmel-blauer-mittag`, `held-himmel-hybrid-lichtzutat`, `held-himmel-gewitterfront`
   Standbild, Clip und Lichtschicht liegen in der Bühne unter einem Schleier in Seitenfarbe, der den Text trägt
   (Desktop von links, Handy von unten). Die Leitung (.leiter, an body, z-index 4) liegt über der ganzen Sektion. */
.himmel-kopf,.himmel-grund{isolation:isolate;overflow:hidden}
.himmel__buehne{position:absolute;inset:0;z-index:-1;background:#0c1030;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
.himmel-grund .himmel__buehne{-webkit-mask-image:none;mask-image:none}
.himmel__buehne picture,.himmel__standbild,.himmel__video,.himmel__licht{position:absolute;inset:0;width:100%;height:100%}
.himmel__standbild,.himmel__video{object-fit:cover;object-position:50% 50%}
.himmel__video{opacity:0;transition:opacity 1.2s ease}
.himmel__video.ist-da{opacity:1}
.himmel__licht{mix-blend-mode:screen;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.himmel__licht.ist-da{opacity:1}
[data-himmel="hybrid-licht"] .himmel__standbild,[data-himmel="hybrid-licht"] .himmel__video{object-position:63% 50%}
[data-himmel="gewitterfront"] .himmel__standbild,[data-himmel="gewitterfront"] .himmel__video{object-position:42% 50%}
.himmel__schleier{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(12,16,48,.95) 0%,rgba(12,16,48,.9) 34%,rgba(12,16,48,.5) 62%,rgba(12,16,48,.12) 100%),
    linear-gradient(180deg,rgba(12,16,48,0) 55%,#0c1030 100%)}
.himmel-kopf{min-height:min(74svh,760px);display:flex;flex-direction:column;justify-content:flex-end}
/* Flacher Kopf (Kontakt, Nachbesserung 26.09.2026): Das Formular soll auf dem ersten Bildschirm beginnen, deshalb weniger
   Luft über dem Text und bis zum Formular */
.abschnitt.himmel-kopf--flach{min-height:0;padding-top:clamp(4.5rem,8vw,7rem);padding-bottom:clamp(2rem,3.5vw,3rem)}
.himmel-kopf--flach + .abschnitt{padding-top:clamp(2rem,4vw,3.5rem)}
/* Im flachen Kopf steht die h1 näher an der Sonne: Schleier links dichter (Wortkontrast gemessen, Ziel 3:1 für große Schrift) */
.himmel-kopf--flach .himmel__schleier{background:linear-gradient(90deg,rgba(12,16,48,.96) 0%,rgba(12,16,48,.94) 40%,rgba(12,16,48,.72) 58%,rgba(12,16,48,.3) 80%,rgba(12,16,48,.12) 100%),linear-gradient(180deg,rgba(12,16,48,0) 55%,#0c1030 100%)}
.himmel-kopf__text{position:relative}
.himmel-kopf .lead{color:var(--nebel-text)}
.himmel__marke{margin-top:1.4rem;font-size:.8rem;letter-spacing:.02em;color:var(--nebel-text)}
@media (max-width:680px){
  /* Handy: Der Himmel steht oben frei (Sonne und Wolken sichtbar), der Text beginnt erst dort, wo der Schleier dicht ist */
  .himmel-kopf,.himmel-kopf--flach{min-height:0;padding-top:clamp(10rem,36svh,19rem)}
  .himmel-kopf .himmel__buehne{bottom:auto;height:56svh;-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
  .himmel-kopf .himmel__schleier{background:linear-gradient(180deg,rgba(12,16,48,.12) 0%,rgba(12,16,48,.3) 38%,rgba(12,16,48,.86) 62%,rgba(12,16,48,.96) 80%)}
  /* Kontakt: nur ein Himmelsstreifen, der Text steht schon auf dem dichten Schleier */
  .abschnitt.himmel-kopf--flach{padding-top:9rem;padding-bottom:2rem}
  .himmel-kopf--flach .himmel__buehne{height:16.5rem}
  .himmel-kopf--flach .himmel__schleier{background:linear-gradient(180deg,rgba(12,16,48,.08) 0%,rgba(12,16,48,.35) 40%,rgba(12,16,48,.9) 62%,#0c1030 88%)}
}

/* ---------- `cc-c5-gleitende-tab-pille-mit-ueberschwung`: Sprungleiste zu den vier Leistungen und den Ergänzungen. Die Pille gleitet mit
   Überschwung zum Punkt unter Zeiger oder Tastaturfokus. Ohne JavaScript: gewöhnliche Sprunglinks. */
.sprungleiste{position:relative;display:flex;flex-wrap:wrap;gap:.3rem;width:fit-content;max-width:100%;margin-top:clamp(1.6rem,3vw,2.4rem);padding:.35rem;border-radius:28px;background:rgba(12,16,48,.78);border:1px solid var(--navy-linie)}
.sprungleiste a{position:relative;z-index:1;padding:.72em 1.1em;border-radius:999px;font:600 .88rem/1 var(--display);letter-spacing:.01em;color:var(--creme);transition:color .25s,background-color .25s}
.sprungleiste:not(.hat-pille) a:hover{background:color-mix(in srgb,var(--creme) 12%,transparent)}
.sprungleiste__pille{position:absolute;left:0;top:0;z-index:0;width:var(--pw,0px);height:var(--ph,0px);transform:translate(var(--px,0px),var(--py,0px));border-radius:999px;background:var(--creme);box-shadow:0 0 0 1px var(--rot),0 6px 22px -6px rgba(208,29,36,.6);pointer-events:none;transition:transform .45s var(--schwung),width .45s var(--schwung),height .45s var(--schwung),opacity .25s ease}
/* Ohne Zeiger und Fokus ruht die Pille unsichtbar, damit kein Reiter gewählt wirkt, der es nicht ist */
.sprungleiste.ruht .sprungleiste__pille{opacity:0}
.sprungleiste.hat-pille a.ist-an{color:var(--navy-dunkel)}
.sprungleiste a:focus-visible{outline-offset:3px}

/* ---------- Leistungen, Stapelkarten (Bestand, Nachbesserung 26.09.2026): Liegt der Tastaturfokus in einer Karte, steht sie
   über der nächsten, die schon hereinschiebt. Sonst verdeckt Karte 04 bei 390 px den Link "Speicher von innen ansehen". */
.stapel__karte-halt:focus-within{z-index:3}

/* ---------- Projektkacheln: dunklerer Grund unter der Beschriftung (Kontrast gemessen, vorher knapp) ---------- */
.umsetzt__kachel figcaption{background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--navy-dunkel) 90%,transparent) 30%,var(--navy-dunkel) 100%)}

/* ---------- `cc-h12-schaerfe-regler-mit-produktwechsel` mit `cc-technik-goo-filter`: Worum geht es? Sechs echte
   Optionsfelder (vier am Regler, seit 28.09.2026 zwei Ergänzungen als Knöpfe darunter), der Tropfen und der Wechsel von Schaltzeichen und Text hängen per :has() an der Wahl, also auch ohne
   JavaScript. Der Tropfen verschmilzt beim Gleiten mit den Punkten der Schiene (SVG-Filter #tropfen-goo). */
.leistungswahl{margin:0;padding:0;border:0;min-width:0}
.leistungswahl legend{padding:0;margin-bottom:.9rem;font:600 1rem/1.3 var(--display);color:var(--creme)}
.leistungswahl__frei{margin-left:.5rem;font:500 .8rem/1 var(--text);color:var(--nebel-text)}
.leistungswahl__regler{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:34px}
.leistungswahl__schiene{position:absolute;left:0;right:0;top:0;height:30px;filter:url(#tropfen-goo)}
.leistungswahl__filter{position:absolute;width:0;height:0}
.leistungswahl__regler::before{content:"";position:absolute;left:12.5%;right:12.5%;top:13px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--creme) 28%,transparent)}
.leistungswahl__schiene i{position:absolute;top:6px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:color-mix(in srgb,var(--creme) 62%,#0c1030)}
.leistungswahl__schiene i:nth-of-type(1){left:12.5%}.leistungswahl__schiene i:nth-of-type(2){left:37.5%}.leistungswahl__schiene i:nth-of-type(3){left:62.5%}
.leistungswahl__schiene i:nth-of-type(4){left:87.5%}
.leistungswahl__tropfen{position:absolute;top:0;left:calc(var(--stelle,0) * 25% + 12.5%);width:30px;height:30px;margin-left:-15px;border-radius:50%;background:var(--rot);opacity:0;transform:scale(.4);transition:left .6s var(--schwung),transform .4s var(--schwung),opacity .2s}
/* Die Optionsfelder liegen unsichtbar über dem ganzen Regler: Beim Tabben holt der Browser den Regler samt Fokusrahmen ins Bild */
.leistungswahl__knopf{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;margin:0;pointer-events:none}
.leistungswahl__regler label{display:block;padding:.55rem .2rem;border-radius:10px;text-align:center;font:600 .86rem/1.25 var(--display);color:var(--nebel-text);cursor:pointer;transition:color .25s}
.leistungswahl__regler label:hover{color:var(--creme)}
.leistungswahl__knopf:checked + label{color:var(--creme)}
.leistungswahl__knopf:focus-visible + label{outline:2px solid var(--focus);outline-offset:2px}
.leistungswahl:has(.leistungswahl__regler .leistungswahl__knopf:checked) .leistungswahl__tropfen{opacity:1;transform:none}
.leistungswahl:has(#l-0:checked){--stelle:0}.leistungswahl:has(#l-1:checked){--stelle:1}.leistungswahl:has(#l-2:checked){--stelle:2}
.leistungswahl:has(#l-3:checked){--stelle:3}
.leistungswahl__wechsel{display:grid;grid-template-columns:64px minmax(0,1fr);gap:1.1rem;align-items:center;margin-top:1rem;padding:1rem 1.1rem;border-radius:16px;background:color-mix(in srgb,var(--navy-dunkel) 72%,transparent);border:1px solid var(--navy-linie);min-height:118px}
.leistungswahl__bild{position:relative;width:64px;height:96px}
.leistungswahl__zeichen{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--leiter-rot);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(208,29,36,.7));opacity:0;transform:scale(.85);transition:opacity .35s,transform .45s var(--schwung)}
.leistungswahl__zeichen .dick{stroke-width:7}
.leistungswahl__zeichen .voll{fill:var(--leiter-rot);stroke:none}
.leistungswahl__text{display:none;margin:0;color:var(--nebel-text);line-height:1.55}
.leistungswahl__text--leer{display:block}
.leistungswahl:has(.leistungswahl__knopf:checked) .leistungswahl__text--leer{display:none}
/* Noch nichts gewählt: kein leeres Bildfeld links, der Hinweis steht bündig */
.leistungswahl:not(:has(.leistungswahl__knopf:checked)) .leistungswahl__wechsel{grid-template-columns:minmax(0,1fr)}
.leistungswahl:not(:has(.leistungswahl__knopf:checked)) .leistungswahl__bild{display:none}
.leistungswahl:has(#l-0:checked) [data-l="0"],.leistungswahl:has(#l-1:checked) [data-l="1"],.leistungswahl:has(#l-2:checked) [data-l="2"],
.leistungswahl:has(#l-3:checked) [data-l="3"],.leistungswahl:has(#l-4:checked) [data-l="4"],.leistungswahl:has(#l-5:checked) [data-l="5"]{display:block;opacity:1;transform:none}
/* Ergänzungen (28.09.2026): zwei Knöpfe unter dem Regler in derselben Optionsgruppe, ohne Tropfen */
.leistungswahl__ergaenzung{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .6rem;margin-top:.7rem}
.leistungswahl__ergaenzung-titel{font:500 .82rem/1 var(--text);color:var(--nebel-text);margin-right:.2rem}
.leistungswahl__ergaenzung label{display:inline-block;padding:.55rem .95rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--creme) 28%,transparent);font:600 .84rem/1.2 var(--display);color:var(--nebel-text);cursor:pointer;transition:color .25s,border-color .25s,background-color .25s}
.leistungswahl__ergaenzung label:hover{color:var(--creme);border-color:var(--creme)}
.leistungswahl__ergaenzung .leistungswahl__knopf:checked + label{color:var(--creme);border-color:var(--rot);background:color-mix(in srgb,var(--rot) 24%,transparent)}
/* Handy: Regler senkrecht, die Namen stehen rechts neben der Schiene */
@media (max-width:560px){
  .leistungswahl__regler{grid-template-columns:1fr;padding:0 0 0 40px}
  .leistungswahl__schiene{left:0;top:0;bottom:0;width:30px;height:auto;right:auto}
  .leistungswahl__regler::before{left:13px;right:auto;top:12.5%;bottom:12.5%;width:4px;height:auto}
  .leistungswahl__schiene i{left:6px!important;margin:-9px 0 0}
  .leistungswahl__schiene i:nth-of-type(1){top:12.5%}.leistungswahl__schiene i:nth-of-type(2){top:37.5%}.leistungswahl__schiene i:nth-of-type(3){top:62.5%}
  .leistungswahl__schiene i:nth-of-type(4){top:87.5%}
  .leistungswahl__tropfen{left:0;margin:-15px 0 0;top:calc(var(--stelle,0) * 25% + 12.5%);transition:top .6s var(--schwung),transform .4s var(--schwung),opacity .2s}
  .leistungswahl__regler label{text-align:left;padding:.6rem .6rem}
}

/* ---------- `cc-h2-kreis-wird-zur-leiste-und-zum-haken` mit `cc-technik-knopf-ist-fortschritt` und
   `cc-technik-clip-path-morph`: Der Absendeknopf wird Kreis, dann Leiste, dann Haken. */
.fortschritt{position:relative;isolation:isolate;overflow:hidden;min-width:14.5rem;justify-content:center;clip-path:inset(0 0 round 999px);transition:clip-path .55s var(--schwung),box-shadow .35s var(--ease),border-color .35s var(--ease),transform .25s var(--ease)}
.fortschritt__balken{position:absolute;inset:0;z-index:-1;background:var(--rot);transform:scaleX(0);transform-origin:left center}
.fortschritt__text{transition:opacity .25s}
.fortschritt__haken{position:absolute;right:.7em;top:50%;width:1.15em;height:1.15em;margin-top:-.575em;fill:none;stroke:var(--creme);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .3s}
.fortschritt.ist-kreis{clip-path:inset(0 calc(50% - 1.75em) round 999px)}
.fortschritt.ist-kreis .fortschritt__text,.fortschritt.ist-balken:not(.ist-fertig) .fortschritt__text{opacity:0}
.fortschritt.ist-balken .fortschritt__balken{transform:scaleX(1);transition:transform .95s linear}
.fortschritt.ist-fertig .fortschritt__balken{transform:scaleX(1)}
.fortschritt.ist-fertig .fortschritt__haken{opacity:1}

/* ---------- `cc-d11-chat-verlauf-in-reinem-css`: Häufige Fragen als Gesprächsverlauf. Vorzustand nur, wenn
   js/ausbau.js die Liste als bereit markiert hat; sonst steht alles da. */
.chat{display:grid;gap:clamp(1.3rem,2.5vw,1.9rem);max-width:820px;margin:0;padding:0;list-style:none}
.chat__paar{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem}
.chat__frage,.chat__antwort{max-width:min(86%,600px);margin:0;padding:.9rem 1.2rem;border-radius:20px;color:var(--creme)}
.chat__frage{grid-row:1;grid-column:1;justify-self:start;border-bottom-left-radius:6px;background:color-mix(in srgb,var(--creme) 9%,#0c1030);border:1px solid var(--navy-linie);font:600 1.02rem/1.4 var(--display)}
.chat__antwort{grid-row:2;grid-column:1;justify-self:end;border-bottom-right-radius:6px;background:var(--navy);border:1px solid color-mix(in srgb,var(--rot) 70%,transparent);box-shadow:0 12px 30px -16px rgba(208,29,36,.6);line-height:1.6}
.chat__antwort a{color:var(--creme);text-decoration:underline;text-underline-offset:.18em}
.chat.ist-bereit .chat__paar:not(.ist-da) > *{opacity:0}
.chat.ist-bereit .chat__paar.ist-da .chat__frage{animation:chat-auf .5s var(--schwung) both}
.chat.ist-bereit .chat__paar.ist-da .chat__antwort{animation:chat-auf .5s var(--schwung) .4s both}
/* Tastatur: Springt der Fokus auf den Link in einer Antwort, steht das Paar sofort da (kein unsichtbarer Fokus) */
.chat.ist-bereit .chat__paar:focus-within > *,.chat.ist-bereit .chat__paar.ist-da:focus-within > *{opacity:1;animation:none}
@keyframes chat-auf{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}

/* ---------- `cc-f3-verbindende-punkte-plexus` mit `cc-technik-canvas-ohne-bibliothek`: Netz hinter dem Weg.
   Oben ausgeblendet, damit Etikett und Überschrift auf ruhigem Grund stehen. */
.weg__haft{position:relative}
.weg__haft > .wrap{position:relative;z-index:1}
.netz{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 14%,#000 28%);mask-image:linear-gradient(180deg,transparent 0,transparent 14%,#000 28%)}
html:not(.js) .netz{display:none}

/* ---------- `cc-h20-herz-aus-textzeilen` als geschlossener Kreis (Nachbesserung 26.09.2026): drei Ringe aus den Namen,
   daneben die Regel. Die Leinwand ist quadratisch, die Namen stehen zusätzlich als Text darunter. ---------- */
.gemeinwohl{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.namenskreis{margin:0;display:grid;justify-items:center;gap:1rem}
.namenskreis__leinwand{display:block;width:min(100%,440px);aspect-ratio:1/1}
html:not(.js) .namenskreis__leinwand{display:none}
.namenskreis__namen{max-width:46ch;margin:0;text-align:center;font-size:.9rem;line-height:1.55;color:var(--nebel-text)}
@media (max-width:899px){.gemeinwohl{grid-template-columns:minmax(0,1fr)}}

/* ---------- 404: `cc-h3-404-seite-mit-pendelnder-null` und `cc-technik-verlaufstext` ---------- */
.nichtda.himmel-grund .himmel__schleier{background:linear-gradient(90deg,rgba(12,16,48,.94) 0%,rgba(12,16,48,.86) 42%,rgba(12,16,48,.5) 70%,rgba(12,16,48,.4) 100%)}
@media (max-width:760px){.nichtda.himmel-grund .himmel__schleier{background:rgba(12,16,48,.84)}}
.nichtda__zahl{display:flex;align-items:flex-end;margin:0 0 .6rem;padding-top:.55em;font:700 clamp(5.2rem,12vw,10rem)/.9 var(--display);letter-spacing:-.04em;user-select:none}
.nichtda__ziffer{display:inline-block;background:linear-gradient(170deg,var(--creme) 12%,#f3c9c9 48%,var(--rot) 96%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.nichtda__halt{position:relative;display:inline-block;margin-inline:.03em}
.nichtda__draht{position:absolute;left:50%;bottom:calc(100% - .14em);width:3px;height:.62em;margin-left:-1.5px;border-radius:2px;background:var(--leiter-rot);box-shadow:0 0 8px rgba(208,29,36,.75)}
.nichtda__null{transform-origin:50% .14em;transform:rotate(-4deg)}
html.js .nichtda__null{animation:pendeln 1.7s ease-in-out infinite alternate;animation-play-state:paused}
html.js .nichtda__zahl.im-bild .nichtda__null{animation-play-state:running}
@keyframes pendeln{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}

/* ---------- 404: `cc-h6-gluehbirne-an-der-schnur` im unterbrochenen Ring ---------- */
.birne__schnur{fill:none;stroke:var(--leiter-rot);stroke-width:3}
.birne__fassung{fill:#2c3462;stroke:var(--creme);stroke-width:1.5}
.birne__fassung-linie{fill:none;stroke:var(--creme);stroke-width:1;opacity:.6}
.birne__glas{fill:rgba(251,250,246,.05);stroke:var(--creme);stroke-width:2.5}
.birne__draht{fill:none;stroke:color-mix(in srgb,var(--creme) 50%,transparent);stroke-width:1.6;stroke-linejoin:round}
.birne__schein{fill:#ffd88a;opacity:0;filter:blur(16px)}
.birne.flackert .birne__schein{animation:birne-schein 1.9s linear both}
.birne.flackert .birne__draht{animation:birne-draht 1.9s linear both}
@keyframes birne-schein{0%,100%{opacity:0}8%{opacity:.5}14%{opacity:.08}24%{opacity:.62}32%{opacity:.12}46%{opacity:.5}54%{opacity:.04}66%{opacity:.3}72%{opacity:0}}
@keyframes birne-draht{0%,100%{stroke:color-mix(in srgb,var(--creme) 50%,transparent)}8%,24%,46%,66%{stroke:#fff3c4}14%,32%,54%,72%{stroke:color-mix(in srgb,var(--creme) 50%,transparent)}}
.nichtda__licht{display:flex;margin:1.2rem auto 0}
html:not(.js) .nichtda__licht{display:none} /* ohne JavaScript kein Knopf, der nichts tut */
.nichtda__licht-status{min-height:3.2em;margin:.8rem auto 0;max-width:30ch;text-align:center;font-size:.9rem;line-height:1.5;color:var(--nebel-text)}

/* ---------- 404: `cc-a9-kontakt-knopf-der-in-3d-ausweicht-und` (nur das Kippen) mit `cc-technik-css-3d-szene` ---------- */
@property --fuell-radius{syntax:'<length>';inherits:false;initial-value:0px}
.ausweichen{position:relative;isolation:isolate;transform-style:preserve-3d;transition:transform .25s ease-out,box-shadow .35s var(--ease),border-color .35s var(--ease)}
.ausweichen::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) 50%,var(--rot) var(--fuell-radius),transparent calc(var(--fuell-radius) + 1px));transition:--fuell-radius .45s var(--ease)}
/* ---------- Leistungen seit 28.09.2026: Ladegrafik in Karte 03, alte Sprungziele, Ergänzungen ---------- */
.stapel__bild-wrap--grafik .ladegrafik{position:absolute;left:4%;top:6%;width:92%;height:88%}
.anker-alt{position:absolute;left:0;top:0;width:1px;height:1px;scroll-margin-top:calc(var(--kopf-h) + 12px)}
.sprungleiste a.sprungleiste__neben{font-weight:500;color:var(--nebel-text)}
.ergaenzungen__raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2rem);margin-top:clamp(2rem,4vw,3rem)}
.ergaenzung{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:var(--navy);border-top:1px solid var(--navy-linie);box-shadow:0 40px 90px -40px color-mix(in srgb,var(--navy-dunkel) 70%,transparent);scroll-margin-top:calc(var(--kopf-h) + 12px)}
.ergaenzung__bild{padding:clamp(1rem,2vw,1.4rem) clamp(1rem,2vw,1.4rem) 0}
.ergaenzung__bild>img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius)}
.ergaenzung__bild--vn .vn-bild{aspect-ratio:16/10}
.ergaenzung__foto{position:relative;border-radius:var(--radius);overflow:hidden}
.ergaenzung__foto>img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.ergaenzung__text{display:flex;flex-direction:column;gap:.9rem;padding:clamp(1.3rem,2.4vw,2rem);color:var(--creme)}
.ergaenzung__titel{font:600 clamp(1.6rem,1vw + 1.15rem,2.3rem)/1.05 var(--display);letter-spacing:-.02em;hyphens:manual}
.ergaenzung__text p{color:var(--navy-mute);line-height:1.65;max-width:52ch;margin:0}
@media (max-width:819px){.ergaenzungen__raster{grid-template-columns:minmax(0,1fr)}}

.ausweichen.weicht-aus::after{--fuell-radius:150px}
.ausweichen:focus-visible::after{--fuell-radius:60px}

@media (prefers-reduced-motion:reduce){
  .sprungleiste__pille,.leistungswahl__tropfen,.leistungswahl__zeichen,.fortschritt,.fortschritt__text,.fortschritt__haken,.ausweichen,.ausweichen::after{transition:none}
  html.js .nichtda__null{animation:none}
  .birne.flackert .birne__schein,.birne.flackert .birne__draht{animation:none}
  .himmel__video,.himmel__licht{display:none}
}