/* ==========================================================================
   HÖHER Themen-Hubs — Seiten-Stylesheet

   Lag bis zum 19.08.2026 als <style> IM SEITENINHALT jeder der sechs Hub-Seiten,
   140 KB pro Seite und sechsmal ausgeliefert. Seit alle zehn Sektionen ACF-Bloecke
   sind, kann es hierher: eine Datei, vom Browser gecacht, und die Bloecke sind damit
   auch ausserhalb der sechs Entwuerfe brauchbar.

   WARUM EINE DATEI UND NICHT ELF: die Regeln in einzelne Block-Stylesheets zu
   zerlegen hiesse, einen 2.000-Zeilen-Block mit verschachtelten @media-Bloecken elfmal
   aufzuschneiden. Am 18.08. hat genau so ein Schnitt die Textspalte von 888px auf 287px
   gedrueckt, weil ein Kommentarende verwaiste. Ein Umzug am Stueck ist pruefbar, elf
   Schnitte sind es nicht.

   QUELLE: der Praxisanleitung-Hub. Die fuenf Nicht-PDL-Hubs sind zeichengleich, der
   PDL-Hub ist eine echte TEILMENGE davon (0 exklusive Zeilen, gemessen am 19.08.).
   Diese Datei ist damit die Obermenge fuer alle sechs.

   Wird nur geladen, wenn eine Seite einen Hub-Block traegt. Siehe hoeher-blocks.php.
   ========================================================================== */

/* ============================================================================
   HUB-SEITE, Entwurfsstand 17.08.2026.
   Dieses CSS ist die Zwischenstufe, bis die elf Eigenbau-Sektionen ACF-Bloecke sind.
   Dann wandert es Block fuer Block in die jeweilige style.css und dieser Block entfaellt.
   Die drei Plugin-Stylesheets am Ende stehen hier, weil sie live an ihren Bloecken haengen
   und solange die Sektionen core/html sind niemand sie laedt.
   ============================================================================ */


body{margin:0}

/* LAUFWEITE, korrigiert 14.08. (Denis: „passt immernoch nicht zu dem der startseite, dein
   entwurf ist immernoch breiter"). Nachgemessen bei 1440px: die Startseite fuehrt ihren
   20px-Fliesstext in einer 574px breiten Spalte, laengste Zeile 62 bis 64 Zeichen. Der Entwurf
   stand auf 645px, also exakt 6 von 12 Rasterspalten, und kam damit auf 65 bis 73 Zeichen.
   Formal war das Raster richtig und die Seite trotzdem breiter als das Vorbild: die Startseite
   deckelt Fliesstext ZUSAETZLICH zum Raster. Ab jetzt eine Zahl an einer Stelle, jede
   Textspalte zieht sie.

   KORREKTUR am selben Tag, nachdem der erste Versuch es schlimmer gemacht hat: Der Deckel
   gehoert an den ABSATZ, niemals an die Grid-Spalte. Nachgemessen an der Startseite: dort ist
   JEDE zweispaltige Sektion 645|645, also 6+6 Spalten randvoll, und der 574er Deckel sitzt
   INNERHALB der 645er Spalte am Text. Der erste Versuch hat stattdessen die Spalte selbst auf
   574 verengt — die Nebenspalte blieb, wo sie war, und dazwischen riss ein Loch von 318px auf.
   Zeilenlaenge stimmte, Layout war kaputt, und die Seite wirkte schmaler als die Startseite,
   obwohl der Container identisch ist.
   Regel ab hier: Spalten immer 6+6 (oder 4+4+4, 3+3+3+3) wie die Startseite. --textbreite
   fasst nur p, li und Textcontainer an, nie ein Grid-Kind. */
/* Kein absoluter Deckel mehr. Das Theme rueckt prozentual ein (11% der Spalte), deshalb
   waechst seine Laufweite mit dem Fenster mit: 574px bei 1440, 587px bei 1680. Ein fester
   max-width von 574px stimmt genau bei einer Fensterbreite und ist ueberall sonst falsch.
   --textbreite bleibt nur noch fuer einspaltige Sonderfaelle stehen. */
:root{--textbreite:574px}
/* Eigener Fokusring. Ohne ihn bleibt der des Browsers, und der ist auf den beigen Flaechen
   dieser Seite kaum zu sehen. --typography-black auf allen vier Flaechen der Seite ueber 9:1.
   :focus-visible statt :focus, damit er bei Mausklick nicht aufblitzt. */
/* Formularfelder waren NICHT dabei: das Theme stylt nur a und button. Gemessen vom
   Technikpruefer, bestaetigt an allen vier Breiten. Ein Formular, das man mit der Tastatur
   nicht sehen kann, ist nicht bedienbar. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--typography-black);outline-offset:3px;border-radius:2px}
/* GEKLÄRT 14.08. Das Theme setzt `overflow-x:hidden` auf html UND body. Damit kippt die
   andere Achse auf auto, der Body wird zur eigenen Scrollbox, und `position:sticky` klebt an
   keinem Nachfahren mehr. Bisher stand hier `overflow:visible` als Vorschau-Krücke mit der
   Notiz, im echten Block brauche es „fixed + JS".
   Braucht es nicht. Gemessen am Entwurf, drei Fassungen, je fünf Scrollproben:
     html,body{overflow-x:hidden}                 klebt 0/5
     html,body{overflow-x:clip}                   klebt 5/5
     html{overflow-x:hidden} body{overflow-x:clip} klebt 5/5
   In allen drei Fällen bleibt die Dokumentbreite bei 390px, `clip` schneidet also genauso
   zuverlässig ab wie `hidden`. Der Unterschied: `clip` erzeugt keinen Scroll-Container.
   FÜR DEN LIVE-EINBAU: eine Zeile im Theme, `overflow-x:clip` statt `hidden`. Ohne sie hat
   die mobile Fassung über zwölf Bildschirme keinen Aktionspunkt. */
html,body{overflow-x:clip}


/* ============================================================
   1 · HERO
   Textspalte links, Motiv rechts unten verankert. Kein Badge im Bild.
   Der einzige Beweis oben ist die Menschen-Zeile, und die steht direkt unter
   dem Button — dort, wo die Entscheidung fällt, nicht in einer Bildecke.
   ============================================================ */
.eh{background:var(--orange-100);overflow:hidden}
.eh__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:3rem;align-items:end}
@media (max-width:920px){.eh__grid{grid-template-columns:1fr;gap:0}}
.eh__text{padding:4.5rem 0 4.5rem}
@media (max-width:920px){.eh__text{padding:3rem 0 2rem}}
.eh__titel{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h1);line-height:1.14;letter-spacing:-.01em;color:var(--typography-black);margin:0}
.eh__sub{font-family:var(--font4);font-size:var(--schrift-20);line-height:1.55;color:var(--typography-dark-grey);margin:18px 0 0;max-width:31em}
.eh__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* Die Menschen-Zeile (.eh__menschen) ist seit 1.75.2 nach assets/shared.css UMGEZOGEN,
   weil /weiterbildungen/ dasselbe Bauteil braucht und hubs.css dort nicht laedt.
   Denis, 21.08.2026: „mach ueberall das selbe bitte". Aendern also DORT. */

.eh__media{align-self:end;display:flex;justify-content:flex-end;position:relative}
.eh__media img{display:block;width:100%;height:auto;margin-bottom:-1px}

/* BAUCHBINDE UEBER DEM MOTIV, ab 19.08.2026.
   Gleiche Bauart wie `.an3__schild` und `.ab__schild`, damit es EINE Bauart bleibt und
   keine zweite: Milchglasplatte unten links, 12px Radius, weicher Schatten.
   `.eh__media` traegt dafuer `position:relative`.

   GEMESSEN bei 642px Bildbreite: mit vier Siegeln ist die Platte 296px breit, also 46 %
   des Bildes; die Zeile darueber bestimmt die Breite, nicht die Siegel.
   Die Siegel laufen auf einheitlicher HOEHE, die Breite folgt dem Seitenverhaeltnis der
   Datei (1,0 bis 1,5). Deshalb `width:auto` und nur `height` gesetzt: eine feste Breite
   wuerde die runden Siegel quetschen. */
.eh__binde{
  position:absolute;left:24px;bottom:24px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:12px;padding:13px 18px;
  box-shadow:0 8px 32px rgba(0,0,0,.10);
  display:flex;flex-direction:column;gap:9px;line-height:1.2;
}
/* Dasselbe Label-Muster wie `.tlink`: DM Sans 600, versal, gesperrt. Kein neues
   Schriftbild erfinden, nur kleiner setzen, weil es in einer Platte steht. */
.eh__binde-label{
  font-family:var(--font4);font-weight:600;font-size:var(--schrift-12);letter-spacing:.06em;
  text-transform:uppercase;color:var(--typography-dark-grey,#444);
}
.eh__binde-reihe{display:flex;align-items:center;gap:16px}
/* MIT ELTERNTEIL GESCHRIEBEN, das ist Absicht: `.eh__media img{width:100%}` weiter
   oben ist mit 0,1,1 spezifischer als eine einzelne Klasse und hat die Siegel am
   19.08.2026 auf 582px aufgezogen. 0,2,0 schlaegt das sauber, ohne !important. */
.eh__binde-reihe .eh__binde-siegel{height:44px;width:auto;display:block;flex:0 0 auto}

/* Auf dem Handy spannt die Platte ueber die volle Bildbreite: bei 390px waere eine
   Insel unten links kleiner als die Siegel darin. */
@media (max-width:767px){
  .eh__binde{left:12px;right:12px;bottom:12px;padding:10px 13px;gap:7px}
  .eh__binde-reihe{gap:12px;justify-content:space-between}
  .eh__binde-reihe .eh__binde-siegel{height:32px}
}


/* ============================================================
   2 · ECKDATEN
   Vier harte Fakten. Der Wert trägt das Gewicht (Displayschrift, wie im
   Kennzahlen-Block, wo das Muster hingehört), das Label steht klein darunter.
   Keine Icons, keine Linien, keine Kästen. Wer echte Zahlen hat, muss sie
   nicht schmücken.
   ============================================================ */
.ed{background:var(--background-white);border-top:1px solid var(--background-borders)}
.ed__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem;padding:2.6rem 0}
@media (max-width:1000px){.ed__grid{grid-template-columns:repeat(2,1fr);gap:2rem;padding:2.2rem 0}}
@media (max-width:560px){.ed__grid{grid-template-columns:1fr;gap:1.4rem}}
/* Alle vier Werte bleiben einzeilig, dann braucht es keine min-height und keinen Gap.
   Ein zweizeiliger Wert hätte alle vier Zellen auf zwei Zeilen aufgeblasen. */
.ed__wert{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h3);line-height:1.1;color:var(--typography-black);display:block;white-space:nowrap}
@media (max-width:1000px){.ed__wert{white-space:normal}}
.ed__label{font-family:var(--font4);font-size:14px;line-height:1.5;color:var(--typography-dark-grey);display:block;margin-top:8px;max-width:22em}

/* ============================================================
   3 · SIEGELREIHE, unter der Falz
   Nur die vier, die etwas aussagen. Einheitliche Höhe, keine Beschriftung
   darunter, keine Kästen. Eine Zeile, dann ist gut.
   ============================================================ */
.sr{background:var(--background-light-beige);align-items:center;gap:2.5rem 3.5rem;flex-wrap:wrap;padding:3rem 0}
.sr__label{font-family:var(--font4);font-weight:600;font-size:var(--schrift-16);color:var(--typography-black);margin:0 0 22px;flex:0 0 auto}
/* Korrektur 13.08. (Denis: „kann die Logos nicht wirklich lesen, alles sehr klein skaliert"):
   vorher stand jedes Siegel in derselben Box aus 56px Höhe UND 132px Breite. Die vier haben
   aber Verhältnisse von 0,73 bis 2,73, und wer beide Achsen deckelt, deckelt jedes Siegel an
   seiner ungünstigen: FOCUS landete bei 41x56, AZAV bei 132x48 — beide mit Text im Bild und
   damit unlesbar. Jetzt nur noch ein Höhendeckel, die Breite läuft frei mit; der max-width
   fängt allein die sehr breiten ab, damit sie die Zeile nicht auffressen. Ergebnis sind
   ähnlich grosse Flächen statt gleicher Kästen. Die Höhen bleiben unter der halben nativen
   Auflösung der Dateien, sonst wird FOCUS (218x299) und DQR (283x119) weich. */
/* Zwei Werte, die der Block anders setzt als diese Seite sie braucht:
   1. Flaeche. Der Block bringt Weiss mit, die Siegelreihe steht hier aber zwischen zwei weissen
      Sektionen und ist nach der Bedeutungspalette „Orientierung", also beige.
   2. Siegelhoehe. Der Block deckelt auf 40px, das war am 13.08. schon einmal die Beanstandung
      („kann die Logos nicht wirklich lesen"). 72px bleibt unter der halben nativen Aufloesung
      aller drei Dateien, also skaliert nichts weich.
   Beides sind Groessen, keine Gestaltung — der Block bleibt der Block. */
.sr.trust-leiste-section{background:var(--background-light-beige)}
/* SIEGELREIHE, Endfassung 14.08. Der Block setzt HARTE 44px auf Media und Bild
   (trust-leiste/style.css) — deshalb blieb der erste Korrekturversuch wirkungslos.
   Der eigentliche Fehler war aber ein anderer: gleiche HOEHE bei drei Seitenverhaeltnissen
   von 1:1 (ZFU), 2,73:1 (TQ-Cert) und 0,73:1 (FOCUS) ergibt voellig ungleiche FLAECHEN.
   Gemessen bei 132px Einheitshoehe: TQ-Cert 47.700px², ZFU 17.400px², FOCUS 12.700px² —
   das breite Siegel war fast viermal so gross wie das hohe. Genau das las sich als unruhig,
   unabhaengig von der absoluten Groesse.
   Jetzt optischer Flaechenausgleich: jedes Siegel bekommt seine eigene Hoehe, sodass alle
   drei ungefaehr dieselbe Flaeche belegen (rund 9.000px²). Das ist das Standardverfahren
   fuer Logoreihen mit gemischten Formaten.
   multiply loest den zweiten Fehler: die TQ-Cert-Datei ist ein JPG mit hartem weissen Grund
   und stand als weisser Kasten mit Rahmen auf der beigen Flaeche. */
.sr .trust-col__media{height:auto;min-height:86px;display:flex;align-items:center;justify-content:center}
.sr .trust-col__media img{height:auto;width:auto;max-width:100%;mix-blend-mode:multiply}
.sr .trust-col:nth-child(1) .trust-col__media img{max-height:78px}   /* ZFU, quadratisch */
.sr .trust-col:nth-child(2) .trust-col__media img{max-height:54px}   /* TQ-Cert, sehr breit */
.sr__gruppe:last-child .trust-col:nth-child(1) .trust-col__media img{max-height:86px} /* FOCUS, hochformat */
.sr__gruppe:last-child .trust-col:nth-child(2) .trust-col__media img{max-height:70px}  /* Fernstudiumcheck */
.sr__gruppe:last-child .trust-col:nth-child(3) .trust-col__media img{max-height:70px}  /* FernstudiumDirekt */
.sr__gruppe:last-child .trust-col:nth-child(4) .trust-col__media img{max-height:78px}  /* Studienpreis, rund */

.sr .trust-col__label{max-width:11em;text-align:center;font-size:var(--schrift-14);line-height:1.45}

/* Zweite Korrektur 14.08. (Denis: „komisch umgebrochen"). Die Flex-Reihe war das Problem:
   drei Siegel mit Seitenverhaeltnissen von 0,73 bis 2,73 standen frei nebeneinander, fuellten
   zusammen nur 40 % der Zeile und liessen rechts ein Loch von ueber 800px. Ohne gemeinsame
   Grundlinie sah das aus wie hingeworfen, nicht wie eine Reihe.
   Vorbild ist der bestehende Plugin-Block acf/hoeher-trust-leiste (live auf /foerderberatung/):
   gleich breite Spalten ueber die volle Breite, jedes Siegel in derselben Hoehenzone.
   `mix-blend-mode:multiply` loest den zweiten sichtbaren Fehler: die TQ-Cert-Datei ist ein JPG
   mit hartem weissen Grund und stand als weisser Kasten auf der beigen Flaeche. Multiply
   rechnet Weiss auf den Untergrund und laesst die Zeichnung stehen — kein Freistellen noetig. */
/* Korrektur 14.08. (Denis: „warum muessen die denn so weit auseinander laufen"): drei gleich
   breite Rasterspalten à 448px mit je einem 92px-Siegel darin lassen zwangslaeufig 350px
   Luft. Eine Logoreihe gehoert nicht ins Spaltenraster. Jetzt Flex mit festem Abstand,
   linksbuendig an der Lesekante der Seite — die Reihe waechst nach rechts, wenn Siegel
   dazukommen, statt sich ueber die Breite zu verteilen. */
/* Denis, 14.08.: die beiden Gruppen nebeneinander, dazwischen eine Trennlinie. Zwei Siegel
   links, vier rechts, also 1fr zu 2fr — dann sind die Kacheln in beiden Gruppen gleich breit
   und die Reihe liest sich als EINE Zeile mit zwei Kapiteln, nicht als zwei Bloecke.
   Die Linie ist eine Haarlinie in der Rahmenfarbe des Hauses und laeuft nur so hoch wie der
   Inhalt (align-items:start), damit sie nicht ins Leere zeigt. */
.sr__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0 3rem;align-items:start}
.sr__gruppe{min-width:0}
.sr__gruppe+.sr__gruppe{border-left:1px solid var(--background-borders);padding-left:3rem}
@media (max-width:900px){
  .sr__inner{grid-template-columns:1fr;gap:2.5rem}
  .sr__gruppe+.sr__gruppe{border-left:0;padding-left:0;border-top:1px solid var(--background-borders);padding-top:2rem}
}
.sr .trust-cols{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-start;gap:1.75rem 2rem}
.sr .trust-col{display:flex;flex-direction:column;align-items:center;gap:14px}
.sr__logos span{display:flex;align-items:center;justify-content:center;height:96px}
.sr__logos img{display:block;width:auto;height:auto;max-height:96px;max-width:100%;mix-blend-mode:multiply}
@media (max-width:700px){
  .sr{padding:2.2rem 0}
  .sr__logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
  .sr__logos span{height:64px}
  .sr__logos img{max-height:64px}
}

/* ---------- Sprungnavigation ---------- */
/* KLEBEHOEHE KORRIGIERT 17.08. (Denis: „die Subnavigation ist nicht sticky oder verschwindet
   hinter der Hauptnav"). Im Entwurf gab es keine Hauptnavigation, deshalb stand hier top:0.
   Live traegt das Theme `.header{position:fixed;top:0;z-index:1001}` und schiebt seine
   eigene Kursnavigation mit `top:var(--hh)` darunter — --hh ist die Kopfhoehe. Genau das
   macht die Leiste jetzt auch, mit 64px als Rueckfall, falls die Variable fehlt.
   z-index bleibt unter 1000: die Leiste gehoert UNTER den Kopf, nicht darueber. */
.sn{position:sticky;top:var(--hh,64px);z-index:900;background:var(--background-white);border-bottom:1px solid var(--background-borders)}
/* Zweite Korrektur 13.08. Die erste Fassung deckelte diese Leiste auf 1140px und zentrierte
   sie, damit der Button nicht allein am Bildschirmrand steht. Das hat einen groesseren Fehler
   erzeugt: die Seite hatte dadurch zwei linke Lesekanten, und der Versatz war nicht einmal
   konstant, sondern wuchs mit dem Fenster (gemessen 0px bei 1280, 79px bei 1440, 102px bei
   1520). Ausserdem ist 1140 ausgerechnet die Zahl, die die Fundament-Tabelle oben in dieser
   Uebergabe als „Proxy-Hubs (falsch)" gegen „Theme (richtig) 1344" fuehrt.
   Jetzt traegt die Leiste dasselbe Raster wie die Textsektion darunter und beginnt an der
   Containerkante: die Links stehen ueber der ersten H2, der Button endet ueber der rechten
   Kante der Beraterkarte, und der Schlupf liegt als Aussenrand rechts statt als Loch in der
   Mitte. Linke Kanten werden gelesen, rechte nicht. */
.sn__inner{display:grid;grid-template-columns:repeat(12,1fr);grid-gap:24px;align-items:center;height:58px}
/* Kollision behoben 14.08.: .sn__links stand auf span 6 (Spalte 1-6) und .sn__cta auf
   6/span 7 (Spalte 6-12). Spalte 6 war doppelt belegt, dadurch ueberlagerten sich beide
   Bereiche je nach Inhaltsbreite und die Leiste zuckte beim Scrollen. Jetzt 1-5 und 6-12,
   ohne Ueberschneidung. */
/* 7/5 statt 8/4 seit 08.09.2026: mit einem laengeren Primaer-CTA (Karriere-Check starten)
   schnitt die 4-Spalten-Zelle den Bewertungstext ab. Die Linkleiste scrollt ohnehin. */
.sn__links{grid-column:1 / span 7}
/* Denis, 14.08.: „bekommst Du es so, dass der CTA dort anfaengt, wo auch die Stickybox
   anfaengt, und da aufhoert, wo sie aufhoert?" Ja — beide auf dieselben Rasterspalten:
   die Beraterbox steht auf 9/span 4, die Leiste jetzt auch. space-between setzt den Button
   auf die linke Boxkante und den Beleg auf die rechte, die Leiste fluchtet also oben und
   unten mit derselben Kante. Der Zusatztext weicht dafuer frueher (unter 1500px), sonst
   passt der Inhalt nicht in die 422px der Box. */
/* Denis, 18.09.2026: seit der 7/5-Teilung (08.09.) stand der CTA am linken Rand seiner
   Zelle, ein halber Bildschirm von den Sternen entfernt. Jetzt rueckt er an die Bewertung. */
.sn__cta{grid-column:8 / span 5;display:flex;align-items:center;justify-content:flex-end;gap:32px}
.sn__links{display:flex;align-items:center;gap:1.75rem;overflow-x:auto;scrollbar-width:none;white-space:nowrap;flex:1;min-width:0}
.sn__links::-webkit-scrollbar{display:none}
/* Das Trefferfeld ist 44px hoch, sichtbar bleibt die schmale Marke mit ihrer Unterlinie.
   Ohne das Pseudoelement waren es gemessen 29px — unter dem Mindestmass fuer Finger. */
.sn__link{position:relative;font-family:var(--font4);font-size:var(--schrift-16);line-height:1;color:var(--typography-dark-grey);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease}
.sn__link::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
.sn__link:hover{color:var(--typography-black)}
.sn__link[aria-current="true"]{color:var(--typography-black);border-bottom-color:var(--primary-300)}
/* justify-self:end liess den Flex-Container auf Inhaltsbreite schrumpfen — dadurch fluchtete
   nur die rechte Kante mit der Beraterbox, die linke sass 116px zu weit innen. stretch
   zwingt ihn auf die volle Spaltenbreite, erst dann greift space-between an beiden Kanten. */
/* Der CTA darf NIE umbrechen. In der 422px-Spalte der Beraterbox reichte der Platz nicht
   fuer Button + Sterne + Text, und der Button hat nachgegeben statt der Beleg — falsche
   Reihenfolge. nowrap schuetzt den Button, der Beleg gibt stufenweise nach: erst der
   Zusatztext, dann die Sterne, uebrig bleibt der Wert. */
.sn__cta{justify-self:stretch}
/* Der CTA der Sprungnavigation trug als `button_small` gemessen 32px Hoehe und lag damit
   unter der 44px-Grenze aus guidelines/ux-standards.md. Stand seit dem PDL-Hub offen,
   behoben am 17.08.2026.
   BEWUSST die echte Hoehe und KEIN Pseudo-Element mit negativen Insets: das vergroessert
   die Flaeche unsichtbar. Wer mit dem Daumen zielt, sieht 32px und trifft daneben — und
   der Messschritt in _messen.mjs misst die Elementhoehe, wuerde die Phantomflaeche also
   zu Recht nicht anerkennen. Schriftgroesse und seitliche Polsterung bleiben kompakt. */
.sn__cta .button{white-space:nowrap;flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.sn__trust{flex:0 1 auto;overflow:hidden}

.sn__trust{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.sn__trust-wert{font-family:var(--font4);font-weight:600;font-size:var(--schrift-16);color:var(--typography-black)}
.sn__stern{width:15px;height:15px;display:block;color:var(--primary-300);align-self:center}
.sn__sterne{display:flex;gap:2px;color:var(--primary-300)}
.sn__sterne svg{width:13px;height:13px;display:block}
.sn__trust-text{font-family:var(--font4);font-size:var(--schrift-14);color:var(--typography-dark-grey)}
/* Mittelpunkt statt „aus ueber": derselbe Beleg in 84px weniger Breite. Der Punkt steht als
   ::before am Text, damit er beim Ausblenden unter 1200px mitverschwindet. */

@media (max-width:1150px){.sn__trust-text{display:none}}
@media (max-width:900px){.sn__cta{display:none}.sn__inner{height:52px}}
/* Am Handy passen 589px Linkleiste nicht in 343px. Sie scrollt, aber die Scrollleiste ist
   ausgeblendet — ohne Hinweis sind vier der sieben Ziele schlicht unauffindbar. Der Verlauf
   am rechten Rand zeigt, dass es weitergeht. Er sitzt auf der Leiste, nicht im Scrollbereich,
   damit er beim Scrollen stehen bleibt. */
@media (max-width:900px){
  .sn .container{position:relative}
  .sn .container::after{content:"";position:absolute;top:0;bottom:1px;right:0;width:44px;pointer-events:none;background:linear-gradient(to right,rgba(255,255,255,0),var(--background-white))}
}

/* ---------- Textsektion mit mitlaufender Spalte ---------- */
.tx{background:var(--background-white);padding:4rem 0 4.5rem}
/* Korrektur 13.08. („sieht bissl komisch designt aus vom Platz"), zweite Fassung.
   Ausgangsproblem: das Raster stand auf den vollen 1344px mit `justify-content:space-between`.
   700px Text plus 380px Karte liessen 219px uebrig, und space-between hat sie als Rinne
   dazwischengeschoben — der deklarierte Gap von 64px war wirkungslos.
   Die erste Loesung (auf 1140px deckeln und zentrieren) hat das Loch geschlossen, dafuer aber
   eine zweite linke Lesekante erzeugt. Richtig ist beides zusammen: `justify-content:start`
   ohne Deckel. Damit beginnt der Text an derselben Kante wie Hero, Eckdaten und Siegelreihe,
   die Rinne ist zum ersten Mal wirklich die deklarierten 64px, und der Schlupf liegt als
   Aussenrand rechts. Schlupf gehoert nach aussen, nicht zwischen zwei Spalten. */
/* Dritte Fassung, 13.08. abends (Denis: „dem Text einfach mehr Breite geben, so dass rechts
   die Sticky-Box am rechten Rand abschliesst"). Vorher standen Text und Karte linksbuendig, und
   rechts blieben 155px ungenutzt — die Karte hing in der Luft.
   Jetzt fuellt die Textspalte den Rest und die Karte sitzt an der rechten Containerkante.
   Damit das lesbar bleibt, waechst die Schrift mit: 815px bei 18px waeren 83 Zeichen pro Zeile
   gewesen, ux-standards.md erlaubt 45 bis 75. Bei 20px sind es gemessen 71. Breiter Satz
   braucht groessere Schrift, sonst verliert das Auge beim Zeilenwechsel die Zeile. */
.tx__grid{display:grid;grid-template-columns:repeat(12,1fr);grid-gap:24px;align-items:start}
/* ENDSTAND 14.08. nach drei Fehlversuchen. Der Ping-Pong kam daher, dass zwei Forderungen
   gegeneinander liefen: „exakt so laufen wie die Website" und „Text breiter nach rechts, damit
   die Kluft zur Beraterbox verschwindet". Die Website macht das Zweite nirgends — ihr
   Fliesstext ist ueberall 574px, ihre Spalten ueberall 6+6.
   Aufloesung: Die Kluft wird NICHT ueber breiteren Text geschlossen, sondern ueber die
   breitere Box. Textspalte 6/12 = 645px mit 574er Absatz (89 % Fuellung, genau wie die
   Startseite), Beraterbox ebenfalls 6/12. Uebrig bleiben 71px Restbreite in der Textspalte
   plus 24px Rinne — dieselbe Luft, die auf der Startseite zwischen ihren Spalten steht. */
/* Die Regel kommt aus dem Theme-Code, nicht aus einer Messung:
   .media-text-section .media-text__content-holder{grid-column:span 6;padding-left:11%}

/* ---------- „Über die HÖHER Akademie": die drei Trust-Punkte ----------
   Denis am 18.08.2026: Bild und Text nebeneinander, die drei Punkte darunter. Vorher
   standen sie in der Textspalte, dadurch war die rechte Spalte fast doppelt so lang wie
   das Motiv links.
   Als Dreispalter, nicht als lange Liste: drei Aussagen nebeneinander liest man als
   Gruppe, untereinander als Aufzaehlung, die man ueberspringt. Unter 900px stapeln sie,
   dort ist eine Zeile je Punkt die einzige lesbare Form. */
.uu__punkte{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,3vw,44px);margin-top:clamp(28px,3.5vw,44px);border-top:1px solid var(--background-borders)}
.uu__punkte li{border-bottom:0;align-items:flex-start}
@media (max-width:900px){
  .uu__punkte{grid-template-columns:1fr;gap:0}
  .uu__punkte li{border-bottom:1px solid var(--background-borders)}
  .uu__punkte li:last-child{border-bottom:0}
}

/* Abgerundete Ecken am Motiv, gleicher Radius wie die Gehaltskarte und die Kurskacheln.
   Nur in dieser Sektion, nicht global am Theme-Block. */
.media-text .media_image img{border-radius:16px}

/* Textdeckel der Beraterbox-Spalte.
   Das Theme deckelt Text NICHT per max-width, es rueckt ihn in der 6er-Spalte um 11% ein.
   645px x 11% = 71px, bleiben 574px Textbreite. Hier steht der Text links und die Beraterbox
   rechts, also spiegelt sich das Padding auf die rechte Seite: die Seitenkante bleibt bei 63,
   die Laufweite ist dieselbe wie auf der Startseite. */
/* SEO-Section, Endfassung 14.08. (Denis): Box schmal wie heute frueh, Text holt die Breite
   nach. Also 8+4 statt 6+6 — eine BEWUSSTE Abweichung vom Website-Standard, weil eine
   durchgaengige 50/50-Seite langweilig laeuft. Die Einrueckung geht dafuer von 11 auf 22
   Prozent hoch: bei 888px Spalte bleiben 693px Text, also rund 74 Zeichen. Das ist die
   Obergrenze der Lesbarkeit (45 bis 75) und immer noch deutlich breiter als die 587px der
   Startseite. Ohne diese Korrektur waeren es 790px und 85 Zeichen gewesen. */
.tx__inhalt{grid-column:span 8;min-width:0;padding-right:14%}
/* Denis, 14.08.: „die Breite ruhig naeher an das Sticky dran, damit da nicht so eine grosse
   Kluft entsteht." Die Beraterbox stand auf 9/span 4, also 422px am rechten Rand, mit zwei
   leeren Rasterspalten davor. Jetzt 7/span 6 — dieselbe 6+6-Teilung wie jede zweispaltige
   Sektion der Startseite. Zwischen Text und Box liegt nur noch die Rasterrinne. */
.tx__grid > aside{grid-column:9 / span 4;min-width:0}
/* Der Deckel bleibt auch einspaltig bei 700px. Vorher stand hier `1fr`, was ihn aufhob: die
   Zeile lief dann auf Containerbreite und trug gemessen 103 Zeichen bei 1100px Fenster.
   ux-standards.md verlangt 45 bis 75. */
/* Unter 1100px faellt die Karte unter den Text. Der Deckel von 660px bleibt und gilt hier
   ueber .tx__grid weiter; die frueher hier stehende Zeile fuer .gs__spalte/.st__spalte ist
   entfernt, weil sie toter Code war: sie stand VOR den Regeln dieser Klassen und wurde bei
   gleicher Spezifitaet von ihnen geschlagen. Ergebnis waren rechte Kanten, die um bis zu
   115px auseinanderliefen. Ein Deckel, an einer Stelle. */
@media (max-width:1100px){
  .tx__grid{grid-template-columns:minmax(0,1fr);grid-gap:2.5rem}
    .tx__inhalt,.tx__grid > aside{grid-column:1 / -1}
    /* Einrueckung raus, sobald einspaltig. Denis, 15.08.: der SEO-Text soll am Telefon genau
       dort enden, wo auch die Kontaktbox endet. Gemessen bei 390px endete der Absatz bei 324,
       die Box bei 374 — 50px Unterschied, weil .tx__inhalt padding-right:14% behaelt. In zwei
       Spalten ist die Einrueckung richtig, sie haelt die Zeilenlaenge. Einspaltig gibt es
       keine Nachbarspalte mehr, gegen die eingerueckt werden muesste. */
    .tx__inhalt{padding-right:0}
  .sn__inner{display:flex;justify-content:space-between;gap:2rem}
    .sn__links,.sn__cta{grid-column:auto}
}
.tx__block+.tx__block{margin-top:3rem}
/* Beide Blockueberschriften der Gehaltssektion teilen sich diese Stufe. Vorher standen sie
   auf 36 gegen 25px — zwei Groessen fuer zwei gleich gebaute Bloecke. Der Rang bleibt
   verschieden (die h2 traegt den Sprungnav-Anker), aber den Rang traegt jetzt die
   Reihenfolge, nicht die Schriftgroesse. */
.tx__h2,.gh__gross{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h2);line-height:1.3;color:var(--typography-black);margin:0 0 14px;scroll-margin-top:calc(var(--hh,64px) + 74px)}
/* 20px statt 18px: die Textspalte ist von 700 auf 815px gewachsen, und Zeilenlaenge ist ein
   Verhaeltnis aus Breite UND Schriftgroesse. Bei 18px waeren es 83 Zeichen gewesen. */
.tx__p{font-family:var(--font4);font-size:20px;line-height:1.6;color:var(--typography-dark-grey);margin:0 0 18px}
/* Der Antwortabsatz. Gleiche Groesse wie der Fliesstext, aber in Schwarz: er ist die
   Antwort auf die Ueberschrift, nicht ein weiterer Absatz. Der Unterschied kommt aus der
   Farbe und dem groesseren Abstand danach, nicht aus einer sechsten Schriftgroesse. */
.tx__antwort{font-family:var(--font4);font-size:20px;line-height:1.6;color:var(--typography-black);margin:0 0 22px}
.tx__liste{margin:0;padding:0 0 0 1.15em;list-style:disc}
.tx__liste li{font-family:var(--font4);font-size:20px;line-height:1.6;color:var(--typography-dark-grey);margin-bottom:8px}
.tx__liste li::marker{color:var(--primary-300)}
/* Links im Fliesstext unterstrichen (BFSG, Design-Extrakt Barrierefreiheit): ohne die Regel standen sie
   nur als schwarzer Text da. Knoepfe im Berater-Einschub tragen .button und bleiben aussen vor. */
.tx__inhalt a:not(.button){color:inherit;text-decoration:underline;text-underline-offset:3px}
.tx__inhalt a:not(.button):hover{text-decoration:none}

/* ---------- Rollenportraet im Fliesstext ----------
   Maria steht beim Ablauf, weil sie den Kursauftakt tatsaechlich macht — das steht woertlich
   in ihrem Zitat. Bewusst KEINE zweite Kontaktkarte: keine Nummer, kein CTA. Ein Gesicht mit
   Namen braucht eine Rolle, ein Gesicht ohne Rolle braucht keinen Namen. Kein Kasten, nur
   Abstand und eine Haarlinie — dieselbe Lehre wie bei der Beraterkarte. */
/* Kreis-Infografik. Deckel bei 560px: die Datei ist 1233px breit, die Textspalte 700px, und
   ein quadratisches Motiv ueber die volle Spaltenbreite wuerde den Abschnitt erschlagen. */
.ig{margin:24px 0 26px;text-align:center}
.ig__bild{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}

/* ---------- Gehaltsgrafiken ----------
   Bewusst reines HTML/CSS statt PNG und statt des JS-Prototyps. Drei Gruende:
   1. SEO/GEO: „Was verdient eine PDL" ist eine Informationsfrage, die AI Overviews und
      ChatGPT selbst beantworten. Zahlen in einem PNG existieren fuer sie nicht — und ein
      per JavaScript gezeichnetes SVG oft genauso wenig, weil viele LLM-Crawler kein JS
      ausfuehren. Hier steht jede Zahl als Text im DOM.
   2. Hausregel: keine Inhalte, die nur mit JavaScript sichtbar werden.
   3. Wartung: die Live-Seiten brauchen je Grafik eine zweite Mobil-Datei, weil ein
      1068x525-PNG auf dem Handy unlesbar ist. Ein Balken aus Prozentbreiten braucht das nicht.
   Die Achse laeuft ueber alle Stufen von 35.000 bis 85.000, deshalb sind Position und Breite
   je Balken direkt aus den Werten gerechnet und nicht geschaetzt. */
/* ---------- Gehalt: eigene Section auf getoenter Flaeche ----------
   So steht es im 1:1-Nachbau: „Was verdient eine Pflegedienstleitung?" beginnt eine eigene
   Section mit Hintergrund, nicht einen weiteren Absatz im weissen Textblock. Der Ton ist
   --background-light-beige und damit exakt der Wert des Nachbaus (#f7f5f1). */
/* Zweispaltig statt untereinander (Denis, 13.08.: „lass doch Graph und Text nebeneinander").
   Der Grund ist nicht Geschmack: ein Diagramm BRAUCHT Breite, ein Fliesstext VERTRAEGT keine.
   Untereinander bekommt jeder das Falsche — der Chart bleibt auf Textbreite gequetscht, und
   rechts daneben stehen 640px leer. Nebeneinander bekommt jeder, was er braucht: Text bei
   617px sind gemessen 68 Zeichen, der Chart hat dieselbe Breite statt 660px.
   Die H2 laeuft ueber beide Spalten, damit die Frage ueber der Antwort steht. */
.zw{display:grid;grid-template-columns:repeat(12,1fr);grid-gap:24px;align-items:start;margin-top:22px}
.zw > *{grid-column:span 6;min-width:0}
@media (max-width:900px){.zw{grid-template-columns:1fr;grid-gap:2rem}.zw > *{grid-column:1 / -1}}

.gs{background:var(--background-light-beige);padding:64px 0}
/* Dieselbe Textbreite wie in der Sektion darueber: Containerbreite minus Karte (420) minus
   Rinne (64). So fluchten alle Textbloecke der Seite und haben dieselbe Zeilenlaenge, obwohl
   hier rechts keine Karte steht. */
.gs .tx__h2{margin-bottom:18px}
@media (max-width:900px){.gs{padding:52px 0}}

/* Steuerabschnitt, wieder weiss. Eigene Section, weil die Gehaltsflaeche davor endet.
   Aufbau wie im 1:1-Nachbau: links die Ersparnis-Box, rechts die drei Punkte mit Icons.
   Der Nachbau setzt fuer das Oberteil #E4EFDB, das ist kein Token — hier --green-100. */
.st{background:var(--background-white);padding:80px 0}
/* Korrektur 14.08. (Denis: „kann mehr Whitespace vertragen, sieht bissl zusammengeklatscht
   aus"). Drei Ursachen, alle behoben:
   1. Die Ersparnis-Box trug ZWEI Flaechen (gruen oben, beige unten) in einem Kasten. Das ist
      genau der Fall, den die Hausregel „eine Karte traegt EINE Flaeche" ausschliesst — die
      Naht zwischen den Flaechen las sich wie ein Fehler. Jetzt eine gruene Flaeche, die
      Gruppierung darin macht Abstand.
   2. Der Kasten sass ohne Luft unter dem Absatz. Jetzt 32px.
   3. Die drei Icon-Zeilen standen auf 12px Abstand bei 18px Innenabstand, also enger
      zueinander als in sich. Jetzt 16px aussen bei 22px innen. */
/* BOLDER 15.08. Der stärkste Satz der Sektion stand in der 13px-Fußnote: dass die
   Kursgebühr, anders als eine Erstausbildung, NICHT auf 6.000 € gedeckelt ist. Die grüne
   Box darüber sagte „Volle Kursgebühr" und ließ die Leserin selbst herausfinden, wogegen
   das „voll" sich abgrenzt. Ohne den Gegenfall ist „ohne Höchstbetrag" eine Behauptung.

   Jetzt trägt die Sektion dasselbe Rechnungsmuster wie die Fördersektion: zwei Zeilen,
   Beschriftung links, Wert rechts, die zweite als hervorgehobene Summenzeile. Das ist kein
   neues Bauteil, es ist `fg__rechnung` an der Stelle, an der sie inhaltlich genauso
   hingehört. Der Gegenfall steht damit im Blick statt im Kleingedruckten.

   Radius 8 auf 16: 8px war der einzige Wert dieser Größe auf der ganzen Seite. */
/* Die Peak-Zeile. Grün, eigene Fläche, Wert in der Displayschrift: derselbe Aufbau wie
   `fg__zeile--summe`, damit die zwei Rechnungen der Seite als dieselbe Geste lesen. */
.ib{display:flex;align-items:center;gap:18px;background:var(--background-light-beige);padding:22px 24px;border-radius:16px}
.ib+.ib{margin-top:16px}
.ib__icon{width:40px;height:40px;flex:0 0 auto;display:block}
.ib__titel{display:block;font-family:var(--font4);font-weight:600;font-size:var(--schrift-16);line-height:1.35;color:var(--typography-black);margin-bottom:3px}
.ib__text{font-family:var(--font4);font-size:var(--schrift-16);line-height:1.5;color:var(--typography-dark-grey);margin:0}
@media (max-width:900px){.st{padding:52px 0}}


/* ---------- Gehaltsabschnitt ----------
   Rahmen und Flaeche fuer die beiden Charts, uebernommen aus dem Aufbau des 1:1-Nachbaus:
   dort sitzt der Vergleichs-Chart in einem Container mit 12px Radius und der Fuenf-Jahres-
   Chart auf einer eigenen abgesetzten Flaeche mit 36px Innenabstand und eigener Ueberschrift. */
/* ---------- Gehaltsabschnitt: EIN Muster fuer beide Bloecke ----------
   Vorher waren die zwei Bloecke verschieden gebaut, und beide Fehler waren derselbe Fehler:
   die weisse Karte hatte je eine andere Aufgabe. Gemessen bei 1440px Fenster hatte Block 1
   DREI Oberkanten (H2, Text, Karte — 104px Spreizung), und Block 2 eine weisse Flaeche ueber
   die volle Breite, deren 36px Innenabstand eine ZWEITE linke Lesekante erzeugte: Text bei
   x=99 statt 63. Dazu rendern die Charts verschieden breit (590 gegen 602px), weil einer
   gepolstert sass und der andere nackt im Raster stand.
   Jetzt traegt die Karte in BEIDEN Bloecken genau eine Aufgabe: sie umschliesst die Grafik
   und sonst nichts. Der Text steht auf der Sektionsflaeche und damit auf derselben linken
   Kante wie jede andere Sektion. Vorbild ist der bestehende Plugin-Block
   acf/hoeher-ersparnis-rechner: dort steht der Kopf auf der Sektionsflaeche, die Karten
   daneben im 12er-Raster, und das kleine Label ist das erste Kind IN der Karte. Genau diese
   Rolle hat .gh__untertitel, ausgezeichnet als figcaption, damit die Grafik ihren Namen
   mitbringt. */
.gh__untertitel{font-family:var(--font4);font-size:var(--schrift-16);line-height:1.5;color:var(--typography-dark-grey);margin:0 0 14px}
.gh__quelle{display:block;font-size:var(--schrift-14);line-height:1.45;margin-top:6px;color:var(--typography-dark-grey)}
/* Eine Flaeche, ein Radius, kein Rand, kein Schatten: Elevation wird einmal erklaert. */
.gh__karte{background:var(--background-white);border-radius:16px;padding:24px;overflow:hidden;margin:0}
/* Der Textdeckel muss auch einspaltig gelten — dieselbe Lehre wie bei .tx__grid. Ohne ihn lief
   die Zeile unter 900px auf volle Containerbreite: gemessen 89 und 91 Zeichen, erlaubt sind
   45 bis 75. Mit 680px sind es 71 bzw. 76. Zweispaltig ist der Deckel wirkungslos. */
/* Deckel am Absatz, nicht am Grid-Kind: .gh__text IST die Rasterspalte. Mit max-width darauf
   schrumpfte die Spalte auf 574 und der Chart daneben stand allein. */
.gh__text{padding-right:11%}
.gh__text>:last-child{margin-bottom:0}
/* Die beiden Bloecke sind Geschwister derselben Sektion, keine zwei Sektionen: 48px ist der
   Blockabstand, den die Seite schon fuehrt (.tx__block+.tx__block). */
.gs .zw{margin-top:0}
.gs .zw+.zw{margin-top:48px}
.gs .tx__h2,.gs .gh__gross{margin-bottom:18px}
.gs .zw .tx__h2,.gs .zw .gh__gross{text-wrap:balance}
.gh__gross b{font-weight:600}
/* Fluchtlinie. align-items:start legt die BOXEN gleich hoch, nicht die Schrift. Gemessen bei
   Rowan 36px/45px liegt die hoechste Zeichenkante 28px unter der Boxoberkante — die Schrift
   begaenne also 7,5px unter der Kartenkante, bei 26px 5,25px. Beides ist 0,205em, deshalb
   steht der Ausgleich in em und skaliert ueber die ganze clamp()-Spanne mit. Nur zweispaltig,
   einspaltig gibt es keine Kante, an der etwas fluchten koennte. */
@media (min-width:901px){.gs .zw .tx__h2,.gs .zw .gh__gross{margin-top:-.205em}}

/* Nicht --typography-light-grey: #7c7c7c auf Weiss ergibt gemessen 4,17:1 und reisst die
   4,5:1 fuer Fliesstext. Die Nebenrolle macht hier die Schriftgroesse, nicht ein zu heller Ton. */
.gg__quelle{font-family:var(--font4);font-size:var(--schrift-12);line-height:1.5;color:var(--typography-dark-grey);margin:16px 0 0}

/* ---------- Beraterboxen ----------
   Uebernommen aus dem 1:1-Nachbau (.universal-advisor-box*, Zeile 90-101). Zwei Farben, damit
   die beiden Boxen unterscheidbar bleiben: Gelb fuer die Beratung, Gruen fuer die Begleitung.
   Zwei Abweichungen vom Nachbau, beide wegen der Hausregeln:
   1. Flaeche gelb ist --orange-100 statt des freihaendigen #fbf2da. Gruen ist --green-100 und
      stimmt exakt mit dem Nachbau ueberein.
   2. Der Button ist der Theme-Sekundaerbutton statt .btn-advisor-dark. #07030C ist kein Token,
      und ein schwarzer Vollflaechen-Button macht die sekundaere Absicht zum lautesten Element
      der Seite — lauter als „Zur Weiterbildung". */
.ab{display:flex;flex-direction:row;border-radius:20px;overflow:hidden;width:100%;margin:26px 0 0;align-items:stretch}
.ab--gelb{background:var(--orange-100)}
.ab--gruen{background:var(--green-100)}
.ab__bildteil{position:relative;flex:0 0 40%;line-height:0;display:block}
.ab__bild{width:100%;height:100%;object-fit:cover;display:block}
.ab__schild{position:absolute;bottom:20px;left:20px;z-index:5;background:rgba(255,255,255,.4);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);padding:10px;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.1);display:flex;flex-direction:column;width:fit-content;white-space:nowrap}
.ab__name{color:var(--typography-black);font-family:var(--font4);font-weight:600;font-size:16px;line-height:1.2}
.ab__rolle{margin-top:6px;color:var(--typography-black);font-family:var(--font4);font-size:var(--schrift-14);font-weight:400;line-height:1.2}
.ab__text{flex:1;padding:30px;display:flex;flex-direction:column;justify-content:center}
.ab__titel{margin:0;font-family:var(--font3);font-size:var(--schrift-h4);margin-bottom:10px;font-weight:400;display:block;line-height:1.25;color:var(--typography-black)}
.ab__inhalt{font-family:var(--font4);font-size:16px;line-height:1.6;color:var(--typography-dark-grey);margin:0 0 20px}
.ab__inhalt:last-child{margin-bottom:0}
@media (max-width:767px){
  .ab{flex-direction:column-reverse}
  .ab__bildteil{flex:0 0 auto;width:100%}
  .ab__schild{bottom:15px;left:15px}
  .ab__text{padding:24px 22px}
  .ab__titel{font-size:var(--schrift-h4)}
}

/* Beraterkarte, klebt unter der Leiste.
   align-self:stretch ist Pflicht: mit dem align-items:start des Rasters wäre die Spalte nur
   so hoch wie die Karte, und eine sticky Karte hat dann keinen Weg zum Mitlaufen. */
.tx__grid > aside{align-self:stretch}
/* Umbau 13.08. (Denis: „optisch gefaellt mir die Box noch nicht so richtig").
   Vorher war die Karte ein Kasten im Kasten im Kasten: beige Karte, darin ein weisser
   Telefonkasten mit eigenem Radius, darunter ein weiss umrandeter Button. Drei Flaechen und
   drei Radien auf 380px Breite — die Karte hat sich selbst zerlegt, statt eine Einheit zu
   sein. Jetzt traegt sie genau EINE Flaeche, und die Gruppen darin trennt Abstand, keine
   Kaesten: eng innerhalb einer Gruppe, grosszuegig dazwischen. Der einzige Strich ist die
   Haarlinie ueber dem Telefonblock, und die trennt den Beweis vom Angebot. */
/* VERSATZ NACHGEZOGEN 17.08. (Denis: „jetzt passt die Sticky-Box nicht mehr, die
   verschwindet hinter der Subnav"). Folgefehler der Leistenkorrektur: 82px waren
   Leistenhoehe 58 plus 24 Abstand und stimmten, solange die Leiste bei top:0 klebte.
   Seit sie unter dem Theme-Kopf sitzt, muss die Karte BEIDE freihalten. */
.bk{position:sticky;top:calc(var(--hh,64px) + 82px);background:var(--background-light-beige);border-radius:16px;padding:28px}
@media (max-width:1100px){.bk{position:static}}
.bk__kopf{display:flex;align-items:center;gap:16px;margin-bottom:20px}
/* Kein runder Ausschnitt und kein Farbfeld mehr dahinter: das Motiv ist freigestellt und
   bringt den orangen Marken-Klecks selbst mit. Die Kreismaske hat den Klecks angeschnitten,
   dadurch sah das Foto nach Sticker aus. Die Datei ist nativ nur 158x158, deshalb ist bei
   76px Schluss, sonst wird sie weich. */
.bk__foto{width:76px;height:76px;object-fit:contain;flex:0 0 auto}
.bk__name{display:block;font-family:var(--font3);font-size:var(--schrift-h4);line-height:1.2;color:var(--typography-black)}
.bk__rolle{display:block;font-family:var(--font4);font-size:14px;color:var(--typography-dark-grey);margin-top:3px}
.bk__satz{font-family:var(--font4);font-size:var(--schrift-16);line-height:1.55;color:var(--typography-dark-grey);margin:0 0 22px}
/* Die Nummer ist das groesste Element der Karte und steht in der Displayschrift — dasselbe
   Muster wie die Werte in den Eckdaten. Wer „ruf einfach an" schreibt, muss die Nummer auch
   wie die Handlung aussehen lassen, nicht wie eine Fussnote in einem Kasten. */
/* Korrektur 13.08. (Denis: „linksbuendig fuers Auge nicht so schoen vom Fluss"): das
   Hoerer-Icon hat die Nummer um 30px eingerueckt, der Link darunter fing wieder bei 0 an. Die
   Karte hatte damit zwei linke Kanten, und genau die gebrochene Kante sieht man. Das Icon ist
   der entbehrliche Teil — der Satz sagt bereits „Ruf einfach an", und eine Nummer erkennt man
   als Nummer. Jetzt fluchten Foto, Satz, Nummer und Link auf einer einzigen Kante. */
.bk__tel{display:block;text-decoration:none;border-top:1px solid var(--background-borders);padding-top:20px}
.bk__nummer{display:block;font-family:var(--font3);font-weight:400;font-size:var(--schrift-h3);line-height:1.15;color:var(--typography-black)}
.bk__tel:hover .bk__nummer{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--primary-300);text-decoration-thickness:2px}
.bk__zeiten{display:block;font-family:var(--font4);font-size:var(--schrift-14);line-height:1.45;color:var(--typography-dark-grey);margin-top:5px}
/* Statt eines dritten Buttons ein Textlink. Der Hero traegt „Persoenliche Beratung" bereits
   als Sekundaerbutton; ein drittes Auftreten als Kasten haette die Karte in zwei gleich laute
   Angebote zerlegt. Hier fuehrt der Anruf, der Link ist der leise zweite Weg. */
/* UMGESTELLT 17.08. auf `.tlink`, die Markenvorgabe fuer Tertiaerlinks. Der ganze alte
   Regelsatz musste weg, nicht nur ergaenzt werden, weil er dem Tertiaerlink an drei Stellen
   in die Quere kam:
     `border-bottom` haette die verbotene Unterlinie behalten,
     `font-size:15px` haette gegen die 14px der Markenvorgabe gestanden,
     und `::after{position:absolute;inset}` haette den orangen Kreis von `.tlink::after`
     ueber die volle Linkbreite gezerrt statt ihn als 28px-Scheibe zu zeichnen.
   Uebrig bleibt genau das, was `.tlink` nicht mitbringt: der Abstand nach oben. Die 44px
   Trefferflaeche liefert `.tlink` selbst ueber `min-height`. */
.bk__link{margin-top:20px}




/* ============================================================
   ANMELDUNG · KURSVARIANTEN (kv)
   Flaeche beige, Karten weiss. Elevation wird damit EINMAL erklaert, ueber die Flaeche:
   kein Rahmen, kein Schatten, kein Kasten im Kasten. Der einzige Strich ist die Haarlinie
   ueber dem Preis, und die trennt die Fakten vom Angebot — dasselbe Muster wie in der
   Beraterkarte. Die „grosse Zahl" jeder Kachel ist der Preis in der Displayschrift, so wie
   die Werte in den Eckdaten; deshalb braucht keine Karte ein Icon oder ein Motiv.
   ============================================================ */
/* FASSUNG 4, 14.08. Fassung 1 bis 3 sind verworfen, die Gruende stehen in
   PLAN-anmeldesektion-v4.md. Der Satz, der die Richtung entschieden hat:
   „vllt hat nur ein filter gefehlt mehr nicht."

   Was die Proxy uebersichtlicher machte und hier zurueckkommt: ein GERAHMTER KASTEN auf
   getoenter Flaeche, eine ZENTRIERTE Ueberschrift, eine NUTZENZEILE als Einstieg und ein
   SCHLANKER Umschalter statt eines Fragebogens. Dazu Kacheln mit farbigem Badge und grossem
   Preis statt einer grauen Faktentabelle.

   Flaeche GRUEN (--green-100), entschieden von Denis. Gruen kommt auf der Seite sonst
   nirgends grossflaechig vor; die Sektion bekommt damit einen eigenen Ort und geht in der
   Beige-Folge nicht mehr unter. Hero und Kontaktformular behalten ihr Beige. */
.kv{background:var(--green-100);padding:64px 0;scroll-margin-top:calc(var(--hh,64px) + 74px)}
@media (max-width:900px){.kv{padding:52px 0}}

/* Der gerahmte Kasten. Radius 20px, weil grosse Flaeche; Karten darin 16px. */
.kv__kasten{background:var(--background-white);border:1px solid var(--background-borders);border-radius:20px;padding:clamp(24px,3.4vw,48px)}

/* Benefit-Headline, zentriert. Sie verkauft den Nutzen, nicht die Sache — laut beiden
   ausgewerteten Analysevideos der teuerste Fehler einer Landingpage. Der sachliche Satz
   („Sieben Wege …") steht kleiner darunter und bleibt damit auffindbar. */
.kv__h2{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h1);line-height:1.15;text-align:center;color:var(--typography-black);margin:0 auto;max-width:25ch;text-wrap:balance}
.kv__unter{font-family:var(--font4);font-size:var(--schrift-20);line-height:1.6;color:var(--typography-dark-grey);text-align:center;margin:14px auto 0;max-width:46ch}

/* TRUST direkt unter der Headline (Denis: „dadrunter vllt nochmal trust").
   Das ist Social Proof Form 1 (Zulassung) und Form 2 (Bewertung) an der Stelle, an der die
   Geldentscheidung faellt — 60 % scrollen nie ueber den ersten Abschnitt hinaus, also
   gehoert der Beweis mit nach oben und nicht nur ans Seitenende. */
.kv__trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 30px;margin:26px 0 0}
/* GROESSER, zweite Korrektur (Denis: „hier kann man die siegel nicht lesen sind wieder zu
   klein geraten"). 46/30px waren zu wenig: beide Zeichen tragen gesetzten Text im Bild, das
   ZFU-Zeichen sogar in einem Kreis. Ein unlesbares Siegel ist kein Beweis, sondern Grafik.
   Jetzt 72px hoch, das TQCert-Querformat 46px — bei gleicher optischer Flaeche, weil es
   dreimal so breit ist wie hoch. */
.kv__trust-zeichen{display:block;height:72px;width:auto;flex:0 0 auto;mix-blend-mode:multiply}
.kv__trust-zeichen--breit{height:46px}
@media (max-width:520px){.kv__trust-zeichen{height:60px}.kv__trust-zeichen--breit{height:38px}}
.kv__trust-satz{flex:1 1 320px;min-width:0;max-width:46ch;text-align:left;font-family:var(--font4);font-size:var(--schrift-16);line-height:1.55;color:var(--typography-dark-grey);margin:0}

/* NUTZENZEILE = FUD-Abbau. Angst, Unsicherheit und Zweifel werden dort aufgefangen, wo
   geklickt wird, nicht in einem Absatz weiter unten. Vier Punkte, kein fuenfter.
   Das Haken-Icon ist dasselbe data:-SVG wie im Block `foerder-highlight`, damit die Form
   des Hakens auf der Seite nur einmal existiert. */
/* Linksbündig, nicht mehr zentriert: die Nutzenzeile gehört jetzt zur Werkzeugzone unter der
   Haarlinie, nicht mehr zur Bühne darüber. Die Ausrichtung ist das, was die zwei Zonen
   voneinander trennt. */
.kv__nutzen{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:0 0 30px;padding:0}
.kv__nutzen li{display:flex;align-items:center;gap:9px;font-family:var(--font4);font-weight:500;font-size:var(--schrift-16);line-height:1.4;color:var(--typography-black)}
.kv__nutzen li::before{content:"";flex:0 0 auto;width:18px;height:19px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" fill="none"><rect y=".158" width="18" height="18.2" rx="9" fill="%23FAE0B0"/><path d="m6.125 9.336 2.989 3.012 2.772-6.168" stroke="%23444" stroke-width="1.125" stroke-linecap="round"/></svg>') no-repeat 50%/18px 19px}
/* Am Telefon bricht die Zeile ohnehin in vier Zeilen um. Zentriert standen die vier Haken
   dann treppenfoermig versetzt, weil jede Zeile anders lang ist. Als Spalte mit linkem
   Anschlag fluchten sie; der Block als Ganzes bleibt ueber margin:auto mittig. */
@media (max-width:700px){.kv__nutzen{flex-direction:column;align-items:flex-start;width:max-content;max-width:100%;margin-left:auto;margin-right:auto}}

/* ---------- Der Filter ----------
   ZWEI Achsen, nicht drei. Die Achse Kurs/Fernlehrgang ist ersatzlos raus (Denis: „nur die
   filter mit ambulant oder stationaer und bayern"). Nebeneffekt, nachgerechnet: ohne diese
   Achse fuehrt KEINE der neun Kombinationen mehr ins Leere — der Leerzustand `.kv__leer`
   konnte deshalb ersatzlos entfallen. Der Hinweis, dass Bayern keinen Fernlehrgang zulaesst,
   steht jetzt in der bayerischen Kachel selbst.

   `.kv__finder` umschliesst Filter UND Kacheln, sonst greift :has() nicht. Er traegt kein
   eigenes Aussehen ausser der Trennlinie; die sichtbare Flaeche ist `.kv__kasten`. */
.kv__finder{margin-top:clamp(26px,3vw,34px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--background-borders)}
/* DER FILTER ALS BEDIENFELD (Denis: „wollen wir die Filtersection irgendwie wie ein
   Navigationselement behandeln, es ist gerade sehr minimalistisch und optisch leicht zu
   übersehen").
   Er hat recht: der Filter sah aus wie Fließtext mit runden Knöpfen. Jetzt liegt er auf einer
   getönten Fläche, die über die volle Kastenbreite läuft — ein Band, kein Kasten im Kasten.
   Die negativen Ränder holen die Innenabstände des Kastens wieder heraus, damit die Fläche
   bündig durchläuft und als eigene Zone gelesen wird. */
.kv__frager-titel{font-family:var(--font4);font-weight:600;font-size:16px;line-height:1.35;color:var(--typography-black);margin:0 0 12px}
/* DER FILTER ALS UMSCHALTER, nicht als Formular (Denis: „die Filternavigation nochmal
   deutlich optimieren, so richtig gefaellt mir die noch nicht", und vorher schon „optisch
   leicht zu uebersehen").
   Der Befund: drei einzeln gerahmte Pillen mit je einem Radio-Punkt sind die Optik eines
   Formulars. Ein Formular fuellt man aus, ein Umschalter bedient man. Hier wird bedient.
   Jetzt liegen die Optionen einer Frage in EINER Leiste mit gemeinsamem Rahmen, ohne
   Radio-Punkte, wie ein Segmented Control. Die aktive Option ist gefuellt, nicht angehakt.
   Das <input type=radio> bleibt unveraendert im DOM und fokussierbar, nur die Optik aendert
   sich. Tastatur, Screenreader und der :has()-Filter arbeiten weiter wie vorher.
   STICKY IST RAUS (Denis: „mach das mit dem Sticker von dem Ding wieder raus"). */
.kv__frager{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px 40px;background:var(--background-light-beige);margin:0 calc(-1 * clamp(24px,3.4vw,48px));padding:26px clamp(24px,3.4vw,48px) 28px}
.kv__frager-titel{flex:1 0 100%;font-family:var(--font3);font-weight:400;font-size:var(--schrift-h4);line-height:1.25;color:var(--typography-black);margin:0 0 4px}
.kv__frage{border:0;margin:0;padding:0;min-width:0}
.kv__frage-label{font-family:var(--font4);font-weight:600;font-size:var(--schrift-16);line-height:1.35;color:var(--typography-black);margin:0 0 10px;padding:0}

/* Pillen: native Radios, Optik auf dem umgebenden <label>. Das <input> bleibt im DOM und
   fokussierbar, nur visuell 1px — Tastatur und Screenreader bedienen ganz normale Radios. */
/* Eine Leiste, ein Rahmen. Die Trennstriche zwischen den Optionen kommen aus den Zellen,
   nicht aus Abstaenden, damit die Leiste als ein Element liest. */
.kv__pillen{display:inline-flex;flex-wrap:wrap;gap:0;background:var(--background-white);border:1px solid var(--background-borders);border-radius:999px;padding:4px}
.kv__pille{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-family:var(--font4);font-size:var(--schrift-16);line-height:1.3;color:var(--typography-dark-grey);border-radius:999px;padding:10px 20px;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.kv__pille input{position:absolute;width:1px;height:1px;opacity:0}

/* GEMESSEN 15.08., mobiler Fehler: `border-radius:999px` beschreibt eine Leiste, und eine
   Leiste ist die Gruppe nur, solange sie EINE Zeile hoch ist. Gemessen bei abgeschaltetem
   JavaScript, Gruppe „Was moechtest Du leiten?" mit drei Optionen:
     360px -> 3 Zeilen, 278x142    430 bis 560px -> 2 Zeilen, 98px hoch    ab 620px -> 1 Zeile
   Bei 142px Hoehe zieht 999px die Ecken zu einer Linse zusammen, und die erste und letzte
   Option stehen sichtbar in der Rundung. Unter 620px deshalb 16px, der Kartenwert der
   Hausregel. Die einzelnen Pillen bleiben rund, sie sind weiter eine Zeile hoch. */
@media (max-width:619px){.kv__pillen{border-radius:16px;width:100%}.kv__pille{justify-content:flex-start}}

.kv__pille:hover{background:var(--orange-100);color:var(--typography-black)}
.kv__pille:has(input:checked){background:var(--primary-300);color:var(--typography-black);font-weight:600}
.kv__pille:has(input:focus-visible){outline:2px solid var(--typography-black);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.kv__pille{transition:none}}

/* Nativer Reset, type=reset: kein Klick-Handler noetig. 44px Mindesthoehe, weil ein
   Textlink als Bedienelement fuer einen Finger zu klein ist. */
.kv__zuruecksetzen{align-self:flex-end;margin-left:auto;background:none;border:none;min-height:44px;display:inline-flex;align-items:center;padding:0;font-family:var(--font4);font-size:var(--schrift-16);color:var(--typography-black);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--background-borders);text-decoration-thickness:2px;cursor:pointer}
.kv__zuruecksetzen:hover{text-decoration-color:var(--primary-300)}

/* ---------- Die Antwort ----------
   Acht Sätze im Markup, genau einer sichtbar. `[data-k="start"]` ist der Grundzustand und
   braucht keine Regel: ohne `:has()`-Unterstützung bleibt genau er stehen.
   Größer und schwärzer als der alte Hinweis, weil er kein Hinweis mehr ist, sondern die
   Antwort der Sektion. */
.kv__antwort{font-family:var(--font4);font-size:var(--schrift-16);line-height:1.5;color:var(--typography-black);margin:22px 0 0}
.kv__antwort > span{display:none}
.kv__antwort > [data-k="start"]{display:block}
.kv__finder:has(input:checked) .kv__antwort > [data-k="start"]{display:none}
.kv__finder:has(#kv-f1-unsicher:checked):not(:has(input[name="kv-f2"]:checked)) .kv__antwort > [data-k="unsicher"],
.kv__finder:not(:has(#kv-f1-ambulant:checked)):not(:has(#kv-f1-stationaer:checked)):has(#kv-f2-bayern:checked) .kv__antwort > [data-k="bayern"],
.kv__finder:not(:has(#kv-f1-ambulant:checked)):not(:has(#kv-f1-stationaer:checked)):has(#kv-f2-rest:checked) .kv__antwort > [data-k="rest"],
.kv__finder:has(#kv-f1-ambulant:checked):not(:has(input[name="kv-f2"]:checked)) .kv__antwort > [data-k="ambulant"],
.kv__finder:has(#kv-f1-ambulant:checked):has(#kv-f2-bayern:checked) .kv__antwort > [data-k="ambulant-bayern"],
.kv__finder:has(#kv-f1-ambulant:checked):has(#kv-f2-rest:checked) .kv__antwort > [data-k="ambulant-rest"],
.kv__finder:has(#kv-f1-stationaer:checked) .kv__antwort > [data-k="stationaer"]{display:block}

/* ---------- Die Kacheln ----------
   Zwei Spalten, kompakt wie in der Proxy: Badge, Titel, ein Satz „fuer wen", eine Metazeile,
   grosser Preis, CTA. NICHT die alte Faktentabelle mit fuenf gleichgewichtigen Zeilen — die
   war vergleichbar, aber sie verkaufte nicht, und sie hat die Sektion auf 6.475px getrieben.
   Grid statt Flex: beim Filtern faellt eine Kachel per display:none ganz aus dem Fluss, das
   Raster schliesst die Luecke selbst. Deshalb bleiben keine leeren Spalten stehen. */
.kv__karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
@media (max-width:760px){.kv__karten{grid-template-columns:1fr}}

/* MOBIL: DER WEISSE KASTEN LAEUFT UEBER DIE VOLLE BREITE.
   Denis, 21.08.2026: „mobil wuerd ich vermutlich das gruen rausnehmen und dann das ueber
   die volle breite machen dann ist alles nicht so gequetscht."
   Er hat recht, und es ist nachrechenbar. Bei 375px stapeln sich DREI Innenraender:
   .container 2x16 -> 343, .kv__kasten 2x24 -> 294, .kv__karte 2x24 -> 246px Textbreite.
   129px von 375, also 34 % der Bildschirmbreite, gehen an Raender. Am Desktop verteilt
   sich das auf 1344px und faellt nicht auf.
   Gemessen an den echten PDL-Kacheln, 246px gegen 310px Textbreite: der Kurztext faellt
   von 3-4 auf 2-3 Zeilen, „Voraussetzung: Examen und 1 Jahr Berufspraxis" von zwei Zeilen
   auf eine (bei 3 von 4 Kacheln), die Kacheln werden rund 50px flacher -- ueber sieben
   Kacheln gut 350px weniger Scrollweg.
   ABGEBAUT WERDEN DIE ZWEI AEUSSEREN RAENDER, NICHT DER DER KACHEL. Die 24px der Kachel
   sind Denis' eigene wiederkehrende Beschwerde („alles so zusammengequetscht") und bleiben.
   Ergebnis: 375 - 0 - 32 - 48 = 295px statt 246.
   DAS GRUEN BLEIBT, anders als vorgeschlagen. Randlos ist es an den Seiten ohnehin weg und
   steht nur noch als Band ueber und unter dem Kasten -- und genau das wird gebraucht:
   mobil stapeln alle Sektionen untereinander, die Farbe ist dann das Einzige, was die
   Kaufsektion begrenzt. Dazu stehen die beigen Kacheln (#f7f5f1) auf Weiss deutlich
   besser als auf Gruen (#eaf8e1); zwei helle Toene dicht beieinander sind genau die Falle,
   die bei den Badge-Farben im August schon einmal zugeschlagen hat. */
@media (max-width:760px){
  .kv > .container{padding-left:0;padding-right:0}
  .kv__kasten{border-radius:0;padding-left:16px;padding-right:16px}
}
/* Innenrand 24px rundum statt 22/24: die Uebersichtskachel hat 24, und damit liegt die
   Trennlinie hier auf denselben 93px ueber der Unterkante (24 + 52 Mindesthoehe Preiszone
   + 16 + 1). Mit 22 waren es 91 -- nachgemessen, nicht geschaetzt. */
.kv__karte{display:flex;flex-direction:column;min-width:0;background:var(--background-light-beige);border-radius:16px;padding:24px}

/* Das Badge ersetzt die drei Zwischenueberschriften, die das Raster vorher in drei Kataloge
   zerlegt haben. Es benennt genau die beiden Filterachsen, sagt also, WARUM diese Kachel
   nach dem Klick stehen geblieben ist.
   Farbstufe 200 statt 100: 100 liegt zu nah an --background-light-beige und war auf der
   Kachel nicht mehr als Flaeche lesbar. Alles drei sind Tokenwerte, keine neuen Farben. */
/* Merkmalzeile: Kategorie-Badge und, wo es zutrifft, der Förder-Chip. Beide oben, weil die
   Kachel dort ihre Merkmale trägt. */
.kv__marken{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.kv__badge{font-family:var(--font4);font-weight:600;font-size:12px;letter-spacing:.02em;line-height:1.3;color:var(--typography-black);background:var(--orange-200);border-radius:999px;padding:6px 13px}
.kv__badge--bayern{background:var(--lila-200)}
/* GEMESSEN 15.08. (Denis: „überlege ob die farben der kacheln cool und ansprechend sind").
   Die Kachelfläche selbst ist richtig: beige Kachel im weißen Kasten auf grüner Sektion,
   drei Stufen, die auseinandergehen. Weiße Kacheln im weißen Kasten würden verschwinden.
   Falsch war eine Badge-Farbe. `--orange-100` (#fdf1d7) auf `--background-light-beige`
   (#f7f5f1) sind zwei fast gleiche warme Hellwerte: die Kachel „Stationäre Einrichtung" trug
   ihr Merkmal auf einer Fläche, die man von der Kachel kaum unterscheiden konnte, während
   die Nachbarkachel „Ambulant oder Wohnbereich" mit `--orange-200` deutlich stand. Beide
   sind Einsatzort-Merkmale und gehören in dieselbe Farbfamilie und dieselbe Stufe.
   Jetzt: Einsatzort orange-200, Bundesland lila-200, Förderung green-200. Drei Bedeutungen,
   drei Farben, alle lesbar. */
.kv__badge--stationaer{background:var(--orange-200)}

/* ---------- Die Kachelanatomie kommt seit 1.75.0 aus assets/shared.css ----------
   Kurztext, Fakten, Preis und Pfeil sind dieselben Bauteile wie auf /weiterbildungen/
   (Denis, 21.08.2026: „die selben kacheln auch auf den hubpages"). Ihre Regeln stehen
   in shared.css und laden auf beiden Seiten; hier bleibt nur, was einen Hub-Selektor
   braucht.

   ENTFALLEN sind .kv__wer, .kv__fakten*, .kv__preis*, .kv__betrag, .kv__rate und
   .kv__foerder — ihre Aufgaben übernehmen .hx-uebersicht-kurztext, -fakten und -preis.
   Die statischen Entwurfsdateien in templates-hubs/ bringen ihr CSS inline mit und sind
   davon nicht betroffen (nachgesehen, nicht vermutet). */

/* Der Titel trägt jetzt die Übersichtsmaße: 19px/600 in DM Sans statt 21px Rowan.
   Nie kürzen — amtliche Namen wie „§ 84 AVPfleWoqG" sind das Erkennungszeichen der
   Zielgruppe. Desktop min-height zwei Zeilen, damit die Faktenzone einer Kachelreihe auf
   gleicher Höhe beginnt; mobil, einspaltig, entfällt das Minimum. */
.kv__titel{font-family:var(--font4);font-weight:600;font-size:var(--schrift-20);line-height:1.35;color:var(--typography-black);margin:0;overflow-wrap:break-word;hyphens:auto}
@media (min-width:768px){.kv__titel{min-height:2.7em}}

/* DIE GANZE KACHEL IST DIE TREFFERFLÄCHE — und es bleibt trotzdem EIN Link.
   Auf der Übersicht ist die Theme-Karte selbst ein <a>, hier ist sie ein <article>. Statt
   einen zweiten Link einzubauen (zwei Links auf dasselbe Ziel sind für Screenreader eine
   Dopplung, und der Titel ist bewusst kein h3), legt der Pfeil-Link seine Fläche per
   ::after über die Kachel. Sein aria-label nennt weiterhin den Kurs.
   Die Beraterkachel ist ausgenommen: sie hat keinen Pfeil und ist kein Angebot — eine
   Kachel, die sich beim Zeigen hebt, ohne irgendwo hinzuführen, ist ein Versprechen ins
   Leere. */
.kv__karte{position:relative}
.hx-uebersicht-pfeil::after{content:"";position:absolute;inset:0;border-radius:16px}

/* Beim Überfahren hebt sich die Kachel und der Pfeil füllt sich im CI-Gelb — dieselbe
   Rückmeldung wie auf der Übersicht. Es gibt nur EIN Gelb: --primary-300. Der Fokusring
   liegt um die ganze Kachel, nicht nur um den 44px-Pfeil. */
.kv__karte:not(.kv__karte--berater){transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s ease}
.kv__karte:not(.kv__karte--berater):hover,.kv__karte:not(.kv__karte--berater):focus-within{transform:translateY(-3px);box-shadow:0 12px 32px rgba(39,37,42,.12)}
.kv__karte:not(.kv__karte--berater):focus-within{outline:2px solid var(--typography-black);outline-offset:3px}
.kv__karte:hover .hx-uebersicht-pfeil,.kv__karte:focus-within .hx-uebersicht-pfeil{background:var(--primary-300)}
.kv__karte:hover .hx-uebersicht-pfeil svg,.kv__karte:focus-within .hx-uebersicht-pfeil svg{stroke:var(--typography-black)}
@media (prefers-reduced-motion:reduce){.kv__karte:not(.kv__karte--berater){transition:none}.kv__karte:not(.kv__karte--berater):hover,.kv__karte:not(.kv__karte--berater):focus-within{transform:none}}
/* ---------- Die achte Kachel: Beratung (Denis' Idee) ----------
   Sie traegt data-f1="" und data-f2="" und steht deshalb IMMER, in jeder Filterkombination.
   Die leeren Attribute sind Pflicht, nicht Kosmetik: die Ausblendregeln unten treffen jede
   Kachel, deren Facette weder passt NOCH leer ist — eine Kachel ganz ohne die Attribute
   waere gefiltert worden.
   Sie faengt genau die auf, die sich in keiner der sieben wiedererkennen. */
/* Aufbau 1:1 nach der bestehenden Beraterkarte der Website (Denis' Vorlage, 14.08.):
   Foto und Name oben, Satz darunter, dann eine Haarlinie, darunter Nummer, Zeiten und ein
   Textlink. Der Name IST die Überschrift, die Kachel braucht keine zusätzliche.
   „Beraterin für Weiterbildungen" ist die Rollenbezeichnung von der Website. Sie vermeidet
   nebenbei, dass „Kundenbetreuung" und „Kursbetreuung" je im selben Sichtfeld stehen. */
/* AUSGEBLENDET, nicht geloescht (Denis, 14.08.: „kannst du die Beraterbox da drin erstmal
   ausblenden, aber mit einprogrammieren in den Block, dass wir es wieder optional einblenden
   koennen"). Im Block wird daraus ein Schalter `beratung_zeigen` (True/False). Die Kachel
   bleibt vollstaendig im Markup, damit sie mit einer Klasse zurueckkommt und niemand sie neu
   bauen muss. Ihre Facetten bleiben leer, sie wuerde also in jeder Filterkombination stehen. */
.kv__karte--berater{background:var(--orange-100)}
.kv__karte--aus{display:none}
.kv__berater-kopf{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.kv__berater-bild{flex:0 0 auto;width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 18%}
.kv__berater-name{display:block;font-family:var(--font3);font-weight:400;font-size:var(--schrift-h4);line-height:1.2;color:var(--typography-black)}
.kv__berater-rolle{display:block;font-family:var(--font4);font-size:14px;line-height:1.4;color:var(--typography-dark-grey);margin-top:3px}
.kv__berater-satz{font-family:var(--font4);font-size:var(--schrift-16);line-height:1.55;color:var(--typography-dark-grey);margin:0}
/* margin-top:auto zieht den Fuss an die Kachelunterkante, damit die Nummer auf derselben
   Linie sitzt wie die Preise der Nachbarkacheln. */
/* Nummer und Link UNTEREINANDER, nicht nebeneinander (Denis, 14.08.: „muss nach unten genau
   so wie oben in der box"). Vorher liefen beide als inline-flex in einer Zeile, weil der
   Fuss ein Block war. Die Vorlage auf der Website stapelt sie, und sie hat recht: die Nummer
   ist die Handlung, der Link die Alternative dazu. Nebeneinander konkurrieren sie. */
.kv__berater-fuss{margin-top:auto;padding-top:18px;border-top:1px solid var(--background-borders);display:flex;flex-direction:column;align-items:flex-start}
.kv__berater-tel{display:inline-flex;flex-direction:column;text-decoration:none}
.kv__berater-nummer{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h3);line-height:1.1;color:var(--typography-black)}
.kv__berater-tel:hover .kv__berater-nummer{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--primary-300);text-decoration-thickness:2px}
.kv__berater-zeit{font-family:var(--font4);font-size:var(--schrift-14);line-height:1.5;color:var(--typography-dark-grey);margin-top:6px}

/* Fussnote ueber die volle Breite (Denis, 14.08.: „sonst wirkt das komisch in die Ecke
   gedraengt"). Die Erklaerung des „ab" ist raus: sie erklaerte etwas, das keine Frage war,
   und der Preis sagt es mit „ab" bereits selbst. */
.kv__fuss{font-family:var(--font4);font-size:var(--schrift-14);line-height:1.6;color:var(--typography-dark-grey);margin:24px 0 0;max-width:80ch}

/* ---------- Die eigentliche Filterung ----------
   Je Antwort eine Regel: sobald sie gewaehlt ist, verschwindet jede Kachel, deren passende
   Facette NICHT auf den Wert passt UND nicht leer ist (leer heisst „passt zu jeder Auswahl").
   „Noch offen" bekommt bewusst KEINE Regel: eine dritte, gleichwertige Antwort ohne
   Filterwirkung.
   Kann ein Browser :has() nicht, matcht keine dieser Regeln — alle acht Kacheln bleiben
   sichtbar. Das ist der gewollte Rueckfall und zugleich der crawlbare Zustand. Verifiziert
   mit javaScriptEnabled:false, die Sektion braucht kein Skript. */
.kv__finder:has(#kv-f1-ambulant:checked) .kv__karte:not([data-f1="ambulant"]):not([data-f1=""]){display:none}
.kv__finder:has(#kv-f1-stationaer:checked) .kv__karte:not([data-f1="stationaer"]):not([data-f1=""]){display:none}
.kv__finder:has(#kv-f2-bayern:checked) .kv__karte:not([data-f2="bayern"]):not([data-f2=""]){display:none}
.kv__finder:has(#kv-f2-rest:checked) .kv__karte:not([data-f2="rest"]):not([data-f2=""]){display:none}

/* ============================================================
   GEHALTS-CHARTS — unveraendert uebernommen aus dem 1:1-Nachbau
   pdl-weiterbildung.html (CSS Zeile 196-214, JS Zeile 976-1235).
   Nicht neu bauen, was schon sauber existiert: die Charts rendern dort bereits als SVG,
   samt einer .pdlchart-sr-only-Tabelle je Chart, in der alle Werte als echter Text stehen.
   ============================================================ */

/* ---- Gehalts-Charts (dynamisch, ersetzt grafik-gehalt-vergleich(-mobil)/grafik-gehalt-5jahre.png) ---- */
.pdlchart{--pc-ink:var(--typography-black);--pc-grey-dark:var(--typography-dark-grey);--pc-grey-light:var(--typography-dark-grey);--pc-bar-default:var(--primary-300);--pc-bar-highlight:var(--lila-300);--pc-band:var(--orange-100);--pc-grid:rgba(39,37,42,.05);--pc-line-with:var(--orange-600);--pc-line-without:var(--typography-dark-grey)}
.pdlchart-svg{width:100%;height:auto;display:block;overflow:hidden;font-family:inherit}
.pdlchart-axis-label{fill:var(--pc-grey-light)}
.pdlchart-gridline{stroke:var(--pc-grid);stroke-width:1.5}
.pdlchart-legend-label{fill:var(--pc-ink)}
@media (prefers-reduced-motion:no-preference){.pdlchart-svg .pdlchart-bar{transform-box:fill-box;transform-origin:50% 100%}.pdlchart-svg .pdlchart-hbar{transform-box:fill-box;transform-origin:0% 50%}}
/* KORREKTUR 13.08. Die Screenreader-Tabellen rissen den horizontalen Scrollbereich der Seite
   auf 3325px auf — sichtbar war nichts, weil `clip` greift, aber die Seite liess sich seitlich
   wegschieben. Zwei Ursachen, beide muessen behandelt werden:
   1. Die Regel liegt per JS auf einem <table>. Bei einer Tabellenbox ist `width` nur eine
      Untergrenze (`max(width, min-content)`), und `white-space:nowrap` treibt min-content hoch.
      `table-layout:fixed` behebt das NICHT, getestet — `display:block` schon.
   2. Im echten Theme gewinnt ausserdem `.post-content table{width:100%}` aus uncode-style.css
      per Spezifitaet gegen eine reine Klassenregel. Deshalb steht der Elementselektor
      `table.pdlchart-sr-only` mit davor. Ohne ihn ist der Fehler zurueck, sobald der Block in
      einem `.post-content`-Container laeuft — also spaetestens im WordPress-Block.
   Preis von display:block: das <table> verliert seine Tabellenrolle fuer Screenreader. Der
   Inhalt bleibt vollstaendig vorlesbar und steht weiter im DOM, und genau darum geht es bei
   diesem Fallback. */
table.pdlchart-sr-only,.pdlchart-sr-only{position:absolute;display:block;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pdlchart-stat-hero{background:var(--pc-band);border-radius:16px;padding:1.1rem 1.25rem;text-align:center;margin-bottom:1.1rem}
.pdlchart-stat-delta{font-size:var(--schrift-h1);font-weight:700;line-height:1.05;color:var(--pc-ink)}
.pdlchart-stat-caption{font-size:var(--schrift-14);color:var(--pc-grey-dark);margin-top:.3rem}
.pdlchart-cmp-row+.pdlchart-cmp-row{margin-top:.9rem}
.pdlchart-cmp-label{display:flex;align-items:center;gap:.4rem;font-size:var(--schrift-16);margin-bottom:.4rem;color:var(--pc-ink)}
.pdlchart-cmp-label strong{margin-left:auto;font-size:1rem}
.pdlchart-cmp-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.pdlchart-cmp-track{background:rgba(39,37,42,.07);border-radius:999px;height:18px;overflow:hidden}
.pdlchart-cmp-fill{height:100%;border-radius:999px}
.pdlchart-stat-note{font-size:var(--schrift-12);color:var(--pc-grey-light);margin:.9rem 0 0}

/* ---------- FAQ, Vertrauenspartner, Seitenabschluss ----------
   Die eigenen Stile fuer .fq, .pt und .ct sind am 14.08. entfallen: alle drei Sektionen
   laufen jetzt ueber Theme-Bloecke (acf/mini-faq-block, acf/partners-carousel,
   acf/contact-form + acf/subscribe) und ziehen ihr Aussehen aus style.min.css.
   Was der Entwurf zusaetzlich braucht, steht gebuendelt unter ENTWURFS-SHIM ganz unten —
   und zwar nur, weil hier weder das Theme-JS noch das SVG-Sprite geladen sind.

   Die zwei Regeln hier drunter sind die einzige Ausnahme: sie muessen im CSS stehen und
   nicht im Shim. Die Theme-CSS kennt `.answer p` nicht, weil das ACF-Feld `answer` ein
   Textarea ist und dort nie ein <p> ankommt. Sobald das Feld auf wysiwyg gehoben wird
   (siehe Hinweis 1 am FAQ-Block), kleben ohne diese Regel alle Absaetze aneinander.
   GEHOERT INS THEME, nicht auf Dauer in die Seite. */
.faq-mini-section .faq-mini .answer p{margin:0 0 14px}
.faq-mini-section .faq-mini .answer p:last-child{margin-bottom:0}

/* Hier stand am 14.08. eine Dreier-Reihe aus Einzelfreistellern fuer den Kontaktblock.
   Entfernt: gemessen 906px Spaltenhoehe gegen 375px Motivhoehe, also 531px Leerraum.
   Drei Koepfe nebeneinander sind breit und flach, die Spalte ist hoch und schmal.
   Es steht jetzt ein einzelnes Motiv mit Markenpfeil drin, das die Hoehe traegt.
   Falls das je wieder aufkommt: es ist kein CSS-Problem, sondern ein Formatkonflikt. */

/* ---------- Warum HOEHER: Gegenueberstellung ----------
   Live ist das eine Wir-gegen-die-anderen-Tabelle, und sie ist das schaerfste Argument der
   Seite: sie beantwortet die Frage vor dem Kauf, ohne einen Wettbewerber zu nennen.
   Aufbau nach dem Plugin-Block acf/hoeher-problem-loesung. Kein Rot und kein Gruen, das Haus
   hat keine Ampelfarben. Die Wertung tragen Position, Flaeche und das Zeichen. */
/* ---------- Förderung (fo) ----------
   Eigene Sektion statt `acf/hoeher-foerder-highlight`, weil der Block die eine Zahl nicht
   groß stellen kann und sein Bildplatz ein 56px-Siegel-Slot ist. Alles andere kommt aus dem
   System: 20px auf der großen Fläche, nur Tokenfarben, Theme-Button, dasselbe Haken-Icon.
   Fläche beige, nicht grün: grün ist auf dieser Seite die Anmeldung und nur die. */
@media (max-width:900px){.fo{padding:52px 0}}
.fo__text{padding-bottom:clamp(26px,3.2vw,46px);min-width:0}
/* Ein Satz in Überschriftengröße, die Zahl steckt darin. Kein Eyebrow darüber, keine
   116px-Displayzahl daneben: beides sind benannte Schablonen, und die erste Fassung hat
   beide getragen. */

/* Zwei Angaben, gleich groß, weil sie gleich wichtig sind. Beschriftung über dem Wert, damit
   die längere Beschriftung nicht die Werte auseinanderzieht. Haarlinien statt Kästen: der
   Kasten ist schon da, das ist die Sektion. */



/* Freigestelltes Motiv, an der Unterkante verankert statt schwebend. Der negative
   Innenabstand zieht es bis an den Kastenrand, damit es angeschnitten sitzt wie in der
   Beraterkarte und nicht als Briefmarke in der Ecke klebt. */
@media (max-width:900px){
  .fo__text{padding-bottom:8px}
}

/* ---------- Förderung als Rechnung (fg) ----------
   Fläche lila, Kasten weiß und gerahmt, also dasselbe Muster wie die Anmeldung eine Sektion
   höher, nur in der anderen Markenfarbe. Zwei Sektionen in Serie, die zusammengehören:
   „was es kostet" und „wer es bezahlt". */
.fg{background:var(--lila-100);padding:64px 0}
@media (max-width:900px){.fg{padding:52px 0}}
/* RUHIGER (Denis: „die Section sieht noch unruhig aus").
   Der Befund war die Zahl der konkurrierenden Bloecke: Ueberschrift, Absatz, dreizeilige
   Rechnung, Plus-Satz, Staffel-Satz, Schritt-Titel, drei Schritte, Knopf, Zusatz, Beleg,
   Fussnote. Elf Textbloecke in zwei Spalten, jeder mit eigener Groesse.
   Zwei Eingriffe: die rechte Spalte bekommt eine eigene Flaeche, damit sie als ein Block liest
   statt als vier lose Absaetze. Und der Staffel-Satz wandert unter die Rechnung, wo er
   hingehoert, statt als vierter Absatz in der Reihe zu stehen. */
/* DER WEISSE KASTEN IST WEG, und das ist eine Entscheidung, kein Versehen.
   Beim Umbau auf die Gleichung ist `.fg__kasten` mit dem alten Zweispalter herausgefallen.
   Beim Nachsehen war das die bessere Fassung, deshalb bleibt es so: die Glieder der
   Gleichung tragen `--background-light-beige` und `--green-100`. Auf Weiß wäre das Beige
   fast unsichtbar gewesen, genau der Fehler, der in der Vergleichstabelle die linke Spalte
   verschwinden ließ. Auf dem Lila der Sektion stehen beide Töne klar.
   Die Sektion ist damit die einzige ohne eigenen Kasten. Das ist vertretbar, weil sie als
   einzige eine Rechnung zeigt und nicht eine Sammlung: eine Gleichung braucht Luft um sich,
   keinen Rahmen. */

/* Die Rechnung. Die Beschriftung darf umbrechen, der Betrag nie: `white-space:nowrap` auf dem
   dd und `min-width:0` auf dem dt, sonst reißt „bis zu −3.050 €" bei 360px in zwei Zeilen und
   die Rechnung hört auf, wie eine Rechnung auszusehen.
   Tabellenziffern, damit die drei Beträge senkrecht fluchten. Genau dafür gibt es
   font-variant-numeric, und genau das ist die Stelle, an der es zählt. */
/* BOLDER 15.08. Die Summenzeile war 42px in einer Sektion, deren Überschrift 38px hat und
   deren Rechnungszeilen 18px haben. Damit war die Antwort der Sektion nur unwesentlich
   größer als die Frage, und die eine Zahl, um die es in der ganzen Sektion geht, hat sich
   nie vom Rest abgesetzt.

   EIN Eingriff, ganz durchgezogen: `ab 0 €` wird der Höhepunkt der Seite, 76px gegen 38px
   Überschrift. Die zwei Zeilen darüber gehen dafür von 18 auf 17px zurück und ihre
   Beschriftungen werden leiser. Das ist der Grundsatz „erst zuspitzen, dann alles andere
   beruhigen": würde nur die Summe wachsen, wäre die Sektion lauter statt klarer.

   Die Zeile stapelt jetzt statt zu spreizen: Beschriftung oben klein, Zahl darunter groß
   und linksbündig zur selben Kante. Bei 76px reißt eine Zeile mit `space-between` am
   Telefon ohnehin um, und links ausgerichtet sitzt die Zahl in der Textflucht der ganzen
   Spalte statt allein am rechten Rand. */

/* ---------- Förderung, Neubau 16.08. ----------
   Ein Kasten über die volle Breite statt zwei Spalten, und darin vier Lagen untereinander:
   Kopf, Gleichung, Zusatz, Ablauf und Abschluss. Die Sektion liest sich damit von oben nach
   unten in einer Spur, statt das Auge zwischen zwei Spalten hin und her zu schicken. */

/* DIE GLEICHUNG. Drei Glieder mit Rechenzeichen dazwischen, waagerecht gelesen.
   `align-items:center` statt `stretch`: die Summe ist höher als die zwei Glieder davor, und
   die Zeichen sollen auf der Mitte sitzen, nicht oben kleben.
   Ab 860px stapelt sie, dort drehen sich die Zeichen um 90 Grad und stehen zwischen den
   Gliedern — dasselbe Bild, nur senkrecht gelesen. */
/* Die Summe ist die Antwort: eigene Fläche, größer, und sie darf breiter werden als die
   zwei Glieder davor. Grün ist auf dieser Seite die Farbe für „das geht". */
/* GEMESSEN 16.08. am Telefon, zwei Fehler in der gestapelten Fassung, beide behoben:
   1. Die Zeichen waren um 90 Grad gedreht, damit sie „zwischen" den Gliedern stehen. Gedreht
      wird aus dem Minus ein senkrechter Strich und aus dem Gleichheitszeichen ein doppelter.
      Auf dem Bild stand damit „| " und „||" statt „−" und „=". Also nicht drehen: senkrecht
      gestapelt liest man Rechenzeichen ohnehin ungedreht, so wie in einer Handrechnung.
   2. „bis zu 3.050 €" ist hinter der Zahl umgebrochen, das Eurozeichen stand allein in der
      zweiten Zeile. `nowrap` auf dem Betrag und eine Stufe kleiner, dann passt die Zeile
      neben ihre Beschriftung. */
@media (max-width:860px){
}


/* Die drei Schritte als Band: waagerecht auf Desktop, gestapelt am Telefon. */

/* 60px, nicht 44: Denis hat zweimal gemeldet, dass die Siegel zu klein sind. Im TQCert-Zeichen
   steht die Zulassungsnummer als gesetzter Text, unter 60px ist sie nicht lesbar. */

/* ---------- Bewertungszeile über der Trägerwand (rt) ----------
   Der Block `acf/hoeher-partner-wand` bringt Kopf, Raster und Fußnote mit. Was er nicht hat,
   ist die Bewertungszeile darüber, und die sind zwei Regeln, kein neuer Block.
   Sie steht ÜBER der Überschrift, nicht darunter: sie ist die Brücke aus der
   Erfahrungssektion („Menschen bewerten uns gut") in diese hier („und Einrichtungen schicken
   ihre Leute her"). Kein Eyebrow, sondern ein vollständiger Satz mit einer Zahl darin. */
/* Die Fußnote des Blocks trägt --font8 in Versalien, das fällt aus dem Rest der Seite heraus
   (Denis: „ist noch ne komische Font"). Auf die Hausschrift zurückgesetzt. */
/* Kachelradius 16 statt der 12px aus dem Block. Die Hausregel kennt zwei Werte, 16 für Karten
   und 20 für große Flächen; 23 Kacheln mit einem dritten Wert fallen auf. Gemessen im
   Polish-Durchgang, zusammen mit den Formularfeldern und den FAQ-Items, die ebenfalls
   abweichen — die gehören aber dem Theme und werden hier nicht überschrieben. */
/* Die Logos tragen jetzt width und height im Markup, sonst rechnet der Browser 23-mal die
   Höhe erst beim Nachladen. Damit die festen Maße nicht das Seitenverhältnis erzwingen,
   deckelt object-fit hier die Darstellung. */

/* ---------- Kontrast in der Erfahrungssektion ----------
   Der Block setzt Beleg und Trennzeichen auf --typography-light-grey (#7c7c7c). Auf Weiß
   ergibt das 4,17:1 und reißt die geforderten 4,5:1 bei Fließtextgröße. Gemessen an sechs
   Stellen. --typography-dark-grey (#444) liegt bei 9,7:1 und ändert an der Wirkung nichts:
   der Beleg soll leise sein, nicht unlesbar.
   Hier nur für diese Seite überschrieben. Im Block `erfahrungen` gehört es ebenfalls
   korrigiert, das ist ein eigener Deploy. */
/* Beleg in eigene Zeile (Denis, 14.08.: „wuerd ich in die naechste Zeile ruecken").
   Er lief vorher hinter Name und Rolle weiter, und bei drei Kacheln mit unterschiedlich langen
   Rollen brach er an drei verschiedenen Stellen um. Als eigene Zeile steht er immer gleich. */
.er .erfahrungen__beleg,.er .erfahrungen__trenner{color:var(--typography-dark-grey)}
.er .erfahrungen__beleg{display:block;margin-top:4px}
/* SILBENTRENNUNG AUS (Denis: „mit den Fonts in den Kacheln passt das noch nicht so schön").
   Der Block setzt hyphens:auto auf die Zitate. Bei 20 bis 26px Displayschrift in einer
   schmalen Spalte trennt der Browser dann „Weiter-bildung", „so-dass" und „ab-rufbar" —
   drei erzwungene Trennstriche in drei Kacheln. Genau das macht die Reihe unruhig, nicht die
   Schriftwahl. Rowan bleibt, die Trennung geht.
   text-wrap:pretty verteilt den Umbruch stattdessen über die letzten Zeilen. */
.er .erfahrungen__zitat p{hyphens:none;-webkit-hyphens:none}

/* ---------- Auftakt der Erfahrungssektion (Denis, 15.08. abends) ----------
   ZWEI BEFUNDE, einer davon ein echter Fehler.

   1. DER WEISSE STREIFEN (Denis: „ist sicher ein Fehler im Code"). Er hatte recht, und es
      war keine Farbfrage. GEMESSEN: der Auftakt endet bei y=7.978, die Stimmensektion
      beginnt bei y=8.157. Dazwischen liegen 179px, in denen KEINE Sektion steht, also
      scheint der weiße Seitenhintergrund durch. Ursache ist ein Aussenabstand, den
      `hb-section` aus dem Plugin-CSS mitbringt. `margin-top:0` nimmt ihn weg.

      NACHGEMESSEN, zweiter Anlauf: der Abstand hängt nicht an der Stimmensektion, sondern
      am Auftakt selbst. `.media-text-section` bringt aus dem Theme `margin:180px 0` mit,
      seine Sektionsabstände für den freistehenden Einsatz. Hier steht der Block aber nicht
      frei, er ist der Kopf der Stimmensektion. Deshalb `margin:0` — und zwar in beide
      Richtungen: oben lag dieselbe weiße Bahn, sie fiel nur nicht auf, weil die Steuersektion
      darüber ebenfalls weiß ist. Die Seite wird dadurch 360px kürzer.
      Die zweite Verwendung des Blocks („Über die HÖHER Akademie") behält ihre 180px, dort
      steht er freistehend und der Abstand ist richtig.

      Nebenbefund: meine erste Regel dazu hat gar nicht gegriffen, weil sie im Stylesheet VOR
      `.er{padding:64px 0}` stand und beide dieselbe Spezifität haben. Bei gleicher
      Spezifität gewinnt die spätere Regel. Deshalb steht dieser ganze Block jetzt hinter
      `.er`.

   2. DIE FLÄCHE (Denis: „die farbe vom hintergrund muss anders sein als die farbe darunter
      in dem review block"). Vorher trugen beide `--background-light-beige`, damit sie als
      ein Abschnitt lesen. Denis will sie getrennt sehen. `--orange-100` ist der richtige
      Griff: es ist die Fläche, die auf dieser Seite ohnehin Hero und Kontaktformular tragen,
      und das Motiv bringt seine orange Form schon mit, die Fläche liegt also tonal darunter
      statt dagegen. Damit läuft die Folge Steuer weiß, Auftakt orange, Stimmen beige, drei
      klar getrennte Bänder. */
/* BAND-KONTRAST 17.08., gemessen statt geschaetzt. Denis zweimal: „ich sehe nix".
   Die Design-Fassung setzte Auftakt orange-100 gegen Stimmen background-beige. Nachgerechnet
   ist das der SCHLECHTESTE Griff im ganzen Tokensatz: Kontrast 1,020, also praktisch kein
   Unterschied. Zum Vergleich, jeweils gegen orange-100: orange-50 1,067, light-beige 1,029,
   beige 1,020, orange-200 1,146.
   Die Loesung ist nicht, die Stimmen blasser zu machen, sondern den Auftakt kraeftiger:
   orange-200 gegen background-beige ergibt 1,123 statt 1,020, und die weissen Stimmen-Karten
   behalten ihre 1,143 gegen ihre Flaeche. Beides sind vorhandene Tokens. */
/* Denis am 18.08.2026: eine Stufe heller. --orange-100 ist derselbe Beigeton, den die
   Gehaltskarte und die Delta-Karte tragen — kein neuer Ton, nur der ruhigere der beiden. */
.er__auftakt{background:var(--orange-100);padding:64px 0;margin:0}
@media (max-width:900px){.er__auftakt{padding:52px 0}}
.er__auftakt .media-text__content p{font-size:20px;line-height:1.6;color:var(--typography-dark-grey)}
.er--geteilt{margin-top:0}
/* Die gelben Striche links an jeder Zelle sind raus (Denis: „sieht nach ai slop aus").
   Er hat den Finger auf ein bekanntes Muster gelegt: ein farbiger border-left über 1px an
   Karten, Listen und Callouts ist genau der Reflex, mit dem generierte Oberflächen Struktur
   behaupten, die das Layout schon hat. Die Zahl trägt sich selbst, sie braucht keinen
   Anstrich daneben. Was bleibt, ist eine neutrale Haarlinie oben, die die drei Zellen als
   Reihe zusammenbindet, statt jede einzeln zu markieren. */
/* Die Auszeichnungen groesser als im Block-Standard: sie sind hier der Punkt der Sektion
   und nicht eine Fussnote unter Kennzahlen. In beiden steht Text im Bild, bei 52px war er
   nicht lesbar — dasselbe Problem wie bei den Siegeln in der Anmeldung. */
/* Sterne groesser: in einer Sektion, die von der Bewertung handelt, sind 18px eine Fussnote.
   Bei 26px ist auch der zu 80 % gefuellte fuenfte Stern als solcher erkennbar, und genau der
   ist der Grund, warum 4,8 hier nicht als 5 gelesen wird. */

/* ---------- Fernlehrgang oder Kurs (lf) ----------
   Zwei große Karten mit echtem Motiv. Bild oben randlos, Text darunter auf eigener Fläche:
   kein Overlay auf dem Foto, das ist Hausregel und hier auch inhaltlich richtig, weil beide
   Motive Menschen zeigen und Text darüber ihnen ins Gesicht liefe. */
.lf{background:var(--background-white);padding:64px 0}
@media (max-width:900px){.lf{padding:52px 0}}
.lf__lead{font-family:var(--font4);font-size:var(--schrift-20);line-height:1.6;color:var(--typography-dark-grey);margin:14px 0 0;max-width:62ch}
.lf__paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:34px}
@media (max-width:900px){.lf__paar{grid-template-columns:1fr}}
.lf__karte{display:flex;flex-direction:column;min-width:0;background:var(--background-light-beige);border-radius:16px;overflow:hidden}
.lf__bild{display:block;width:100%;height:clamp(190px,22vw,260px);object-fit:cover}
.lf__text{padding:clamp(22px,2.6vw,30px)}
/* Die Lernform ist die Beschriftung, die Situation die Überschrift. Andersherum stünde die
   Produktkategorie über der Frage, die die Leserin sich stellt. */
.lf__art{font-family:var(--font4);font-weight:600;font-size:var(--schrift-14);letter-spacing:.02em;line-height:1.3;color:var(--typography-dark-grey);margin:0 0 8px}
.lf__wann{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h3);line-height:1.22;color:var(--typography-black);margin:0;text-wrap:balance}
.lf__satz{font-family:var(--font4);font-size:16px;line-height:1.6;color:var(--typography-dark-grey);margin:12px 0 0}
.lf__punkte{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.lf__punkte li{display:flex;gap:10px;align-items:flex-start;font-family:var(--font4);font-size:var(--schrift-16);line-height:1.5;color:var(--typography-black)}
.lf__punkte li::before{content:"";flex:0 0 auto;margin-top:1px;width:18px;height:19px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" fill="none"><rect y=".158" width="18" height="18.2" rx="9" fill="%23FAE0B0"/><path d="m6.125 9.336 2.989 3.012 2.772-6.168" stroke="%23444" stroke-width="1.125" stroke-linecap="round"/></svg>') no-repeat 50%/18px 19px}

/* ---------- Die Anerkennungsfrage (an) ----------
   Die Sorge steht als Überschrift, in Anführungszeichen und in der Displayschrift: es ist
   ein Zitat der Leserin, kein Werbeversprechen. Deshalb hängt das öffnende Anführungszeichen
   in den Rand, sonst beginnt die Zeile optisch eingerückt und die Flucht zur Fläche bricht. */
.an{background:var(--background-white);padding:64px 0}
@media (max-width:900px){.an{padding:52px 0}}
/* POLISH 15.08., zwei Runden, weil die erste den Fehler nur verschoben hat.
   Ursprünglich: Spalten 1,25/0,75 und `align-items:center`. Die rechte Spalte war 483px
   breit, das Bild darin auf 320px begrenzt und mittig — also 80px totes Weiß links und
   rechts davon.
   Erster Versuch war `align-items:start`. Gemessen war das schlechter: sobald das Bild die
   volle Spaltenbreite füllt, ist die RECHTE Spalte die längere, und die ganze
   Höhendifferenz von rund 330px fiel als ein Block unter die linke Spalte.
   Jetzt beides zusammen: die rechte Spalte auf 0,65fr (rund 419px), damit das
   spaltenfüllende Bild nicht mehr so hoch baut, und `center`, damit der Rest der Differenz
   sich auf beide Seiten verteilt statt sich unten zu sammeln. */
/* NEU GEBAUT 16.08. (Denis: „gefällt mir nicht").
   Der Befund war nicht Geschmack, sondern Gewichtung. Die Sektion stellte oben eine Frage
   nach Anerkennung und beantwortete sie in drei Aufzählungspunkten à 15px am linken Rand,
   während die halbe Fläche ein Porträt trug. Die drei nachprüfbaren Belege, also das
   Einzige, was die Frage wirklich beantwortet, waren das Kleinste in der Sektion.
   Dazu war es das dritte „Text links, Person rechts" der Seite nach der Beraterkachel in
   der Anmeldung und dem Kontaktformular.

   Jetzt in drei Lagen: Frage und Einordnung, dann die drei Regelfälle als gleichrangige
   Karten, dann die Risikoumkehr als eigenes Band mit Nicole daneben. Das Gerüst allein sagt
   schon „es gibt drei Fälle, jeder hat einen Beleg, und danach kommt die Zusage". */

/* Die drei Fälle. `counter-reset:none` nimmt der `ol` die Nummerierung: die Reihenfolge
   trägt hier keine Information, es sind drei gleichwertige Fälle. Die `ol` steht trotzdem,
   weil es eine geschlossene Aufzählung ist und keine beliebige Sammlung. */
/* Der Beleg sitzt unter einer Haarlinie und wird von `margin-top:auto` an die Kartenunterkante
   gezogen. Dadurch fluchten die drei Belege, egal wie lang die Zeile darüber umbricht. */

/* Das Zusage-Band. Orange-100, weil die Sektion selbst weiß ist und die Karten beige sind:
   eine dritte Stufe, die den Satz aus der Fläche hebt, ohne eine Farbe einzuführen. */


/* ============================================================================
   UEBERNOMMEN AUS CLAUDE DESIGN am 17.08.2026, Projekt
   „Design-Optimierung PDL Weiterbildung" (fc1963ea-5c83-4961-8116-826e99da96bd).

   Denis hat dort drei Sektionen neu bauen lassen und sie hier freigegeben:
     Steuer       Kasten-im-Kasten raus, rechts EINE Karte, Freisteller auf der
                  Sektionsunterkante
     Anerkennung  waermere Karten, Portraet-Kachel statt Mini-Kreis
     Foerderung   Karten weiss statt beige auf Lila

   WICHTIG, warum das eine chirurgische Uebernahme ist und kein Dateitausch:
   die Design-Fassung ist ein Fork vom 16.08. nachmittags. Sie kennt die
   SEO/GEO-Arbeit desselben Tages nicht (sieben Antwortabsaetze, zwei Frage-H2,
   sichtbares Standdatum), sie enthaelt noch die verworfene Kartenfassung der
   Vergleichssektion und den verworfenen Formular-Entwurf, und Kontaktformular
   samt Newsletter fehlen dort ganz. Denis hat am 17.08. entschieden: die vier
   Design-Aenderungen kommen, alles andere bleibt lokal.

   Die alten Regelsaetze .sp__*, .an__* und .fg__* sind damit tot und weiter
   unten entfernt. Neue Praefixe, damit beim Vergleich klar bleibt, was woher
   stammt.
   ============================================================================ */

.st2__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,4.5vw,88px);align-items:end}
/* Bild links, Text rechts (Denis, 17.08.): Quelltext bleibt Text-zuerst, nur die Anzeige tauscht. */
.st2__media{order:-1}
@media (max-width:960px){.st2__media{order:0}}
@media (max-width:960px){.st2__grid{grid-template-columns:minmax(0,1fr);gap:0}}
.st2__lead{font-family:var(--font4);font-size:var(--schrift-20);line-height:1.6;color:var(--typography-dark-grey);margin:16px 0 0;max-width:58ch}
.st2__posten{list-style:none;margin:clamp(26px,3vw,36px) 0 0;padding:0;border-top:1px solid var(--background-borders)}
.st2__posten li{display:flex;gap:18px;align-items:flex-start;padding:17px 0;border-bottom:1px solid var(--background-borders)}
.st2__icon{width:40px;height:40px;flex:0 0 auto;margin-top:2px}
.st2__titel{display:block;font-family:var(--font4);font-weight:600;font-size:16px;line-height:1.4;color:var(--typography-black)}
.st2__satz{font-family:var(--font4);font-size:var(--schrift-16);line-height:1.55;color:var(--typography-dark-grey);margin:3px 0 0}
.st2__vergleich{margin:clamp(22px,2.6vw,30px) 0 0}
/* min-width:0 am dt: als Flex-Kind steht es sonst auf min-width:auto und weigert sich zu
   schrumpfen. Die lange Zeile ("Deine Weiterbildung zur Gerontopsychiatrischen Pflege")
   schob den Betrag rechts aus dem Bild — gemessen bis 392px in einem 390px-Viewport, und
   weil das Theme body{overflow-x:clip} setzt, wurde er abgeschnitten statt scrollbar. */
.st2__zeile{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 2px}
.st2__zeile dt{min-width:0}
.st2__zeile dd{flex:0 0 auto}
.st2__zeile dt{font-family:var(--font4);font-size:var(--schrift-16);line-height:1.5;color:var(--typography-dark-grey);margin:0;width:auto;max-width:none;flex:1 1 auto}
.st2__zeile dd{font-family:var(--font4);font-weight:500;font-size:var(--schrift-16);line-height:1.4;color:var(--typography-black);margin:0;white-space:nowrap}
/* Die Antwort der Sektion, die einzige Farbstelle links: gruen wie jede „das geht"-Stelle der Seite. */
.st2__zeile--peak{background:var(--green-100);border-radius:16px;padding:18px 22px;margin-top:6px}
.st2__zeile--peak dt{font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--typography-black)}
.st2__zeile--peak dd{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h3);line-height:1.1}
.st2__fuss{font-family:var(--font4);font-size:var(--schrift-14);line-height:1.6;color:var(--typography-dark-grey);margin:20px 0 0}
/* Freisteller auf der Sektionsunterkante: der negative Rand frisst genau das Sektions-Padding,
   wie beim Hero-Motiv. Die orangen Formen bringt die Datei selbst mit. */
.st2__media{align-self:end;min-width:0}
.st2__motiv{display:block;width:100%;max-width:470px;height:auto;margin:0 auto -80px}
@media (max-width:960px){.st2__motiv{max-width:380px;margin:28px auto -52px}}

.an3__panel{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);gap:clamp(20px,2.6vw,44px);background:var(--orange-100);border-radius:20px;overflow:hidden}
@media (max-width:960px){.an3__panel{grid-template-columns:1fr;gap:0}}
.an3__inhalt{padding:clamp(30px,4vw,56px)}
@media (max-width:960px){.an3__inhalt{padding:clamp(26px,5vw,40px)}}
.an3__frage{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h2);line-height:1.16;color:var(--typography-black);margin:0;text-indent:-.42em;max-width:22ch;text-wrap:balance}
.an3__antwort{font-family:var(--font4);font-size:var(--schrift-16);line-height:1.6;color:var(--typography-dark-grey);margin:16px 0 0;max-width:56ch}
.an3__faelle{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:clamp(24px,3vw,36px) 0 0;padding:0}
@media (max-width:700px){.an3__faelle{grid-template-columns:1fr}}
.an3__faelle li{display:flex;flex-direction:column;min-width:0;background:var(--background-white);border-radius:16px;padding:20px 22px}
.an3__wer{font-family:var(--font4);font-weight:600;font-size:var(--schrift-12);letter-spacing:.02em;line-height:1.4;color:var(--typography-dark-grey)}
.an3__was{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h4);line-height:1.2;color:var(--typography-black);margin-top:7px;text-wrap:balance}
.an3__beleg{font-family:var(--font4);font-size:var(--schrift-14);line-height:1.5;color:var(--typography-dark-grey);margin-top:auto;padding-top:12px}
.an3__schluss{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-top:clamp(24px,3vw,36px);padding-top:clamp(20px,2.4vw,26px);border-top:1px solid rgba(39,37,42,.14)}
.an3__zusage{font-family:var(--font4);font-size:16px;line-height:1.6;color:var(--typography-dark-grey);margin:0;max-width:48ch;flex:1 1 320px}
.an3__zusage strong{color:var(--typography-black);font-weight:600}
/* Nummer und Tertiaerlink als ein Block, damit `space-between` sie nicht auseinanderreisst.
   `align-items:flex-start`, weil der Link sonst auf die Breite der Zeitenzeile gezogen wuerde
   und sein oranger Kreis mittig statt am Textende saesse. */
.an3__wege{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.an3__tel{flex:0 0 auto;text-decoration:none}
.an3__nummer{display:block;font-family:var(--font3);font-weight:400;font-size:28px;line-height:1.1;color:var(--typography-black)}
.an3__tel:hover .an3__nummer{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--orange-400);text-decoration-thickness:2px}
.an3__zeit{display:block;font-family:var(--font4);font-size:var(--schrift-12);line-height:1.5;color:var(--typography-dark-grey);margin-top:4px}
/* Das Motiv steht auf der Panelunterkante, das Schild darauf wie im Berater-Block (.ab__schild). */
.an3__media{position:relative;align-self:end;min-width:0;padding:clamp(24px,3vw,40px) clamp(18px,2.4vw,32px) 0 0}
@media (max-width:960px){.an3__media{padding:8px 0 0}}
.an3__foto{display:block;width:100%;max-width:380px;margin:0 auto;height:auto}
/* KORREKTUR 17.08. an der uebernommenen Design-Fassung, gemessen statt geschaetzt.
   Die Glasflaeche kam mit `rgba(255,255,255,.45)` und blur(14px). Darauf steht Text in
   `rgb(39,37,42)` mit 12,5 und 15px, und darunter liegt Nicoles dunkler Blazer.

   Der uebliche Kontrast-Check greift hier NICHT: er ueberspringt Flaechen unter 85 %
   Deckkraft und rechnet gegen den naechsten deckenden Hintergrund. Deshalb meldete er
   „keine Verletzung", obwohl die Stelle durchfaellt.

   Nachgemessen an den GERENDERTEN PIXELN (Ausschnitt 198x57 aus dem Screenshot, Luminanz
   der Flaeche im 90. Perzentil gegen die des Textes im 5.): **4,27:1 bei geforderten 4,5:1.**
   Durchgefallen, wenn auch knapp.

   Deckkraft deshalb von .45 auf .72. Der Glaseindruck bleibt, das Foto scheint weiter durch,
   die Schrift steht. Nachgemessen nach der Aenderung, Wert steht unten im Kommentar. */
.an3__schild{position:absolute;left:clamp(10px,1.4vw,24px);bottom:24px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:10px;padding:10px 14px;display:flex;flex-direction:column;white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,.08)}
.an3__name{font-family:var(--font4);font-weight:600;font-size:var(--schrift-16);line-height:1.2;color:var(--typography-black)}
.an3__rolle{font-family:var(--font4);font-size:var(--schrift-12);line-height:1.2;color:var(--typography-black);margin-top:4px}

.fg2__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,4.5vw,80px);align-items:start}
@media (max-width:1000px){.fg2__grid{grid-template-columns:1fr;gap:32px}}
.fg2__h2{margin:0;font-family:var(--font3);font-weight:400;font-size:var(--schrift-h2);line-height:1.16;color:var(--typography-black);text-wrap:balance}
.fg2__satz{font-family:var(--font4);font-size:var(--schrift-20);line-height:1.6;color:var(--typography-dark-grey);margin:16px 0 0}
.fg2__plus{font-family:var(--font4);font-size:16px;line-height:1.6;color:var(--typography-dark-grey);margin:14px 0 0}
.fg2__plus strong{color:var(--typography-black);font-weight:600}
.fg2__schritte{list-style:none;margin:clamp(24px,2.8vw,32px) 0 0;padding:clamp(20px,2.4vw,26px) 0 0;border-top:1px solid rgba(39,37,42,.14);display:flex;flex-direction:column;gap:14px}
.fg2__schritte li{display:flex;gap:12px;align-items:flex-start;font-family:var(--font4);font-size:16px;line-height:1.5;color:var(--typography-dark-grey)}
.fg2__nr{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--lila-200);color:var(--typography-black);font-weight:600;font-size:14px;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.fg2__tun{margin-top:clamp(24px,2.8vw,32px)}
.fg2__zusatz{font-family:var(--font4);font-size:14px;line-height:1.5;color:var(--typography-dark-grey);margin:12px 0 0;max-width:52ch}
/* Die Quittungskarte: eine weisse Flaeche, die Summe als gruene Antwortzeile. */
.fg2__rechnung{background:var(--background-white);border-radius:20px;padding:clamp(26px,3vw,36px)}
.fg2__r-titel{font-family:var(--font4);font-weight:600;font-size:var(--schrift-14);letter-spacing:.02em;color:var(--typography-dark-grey);margin:0 0 6px}
.fg2__zeilen{margin:0}
.fg2__zeile{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--background-borders)}
.fg2__zeile dt{font-family:var(--font4);font-size:var(--schrift-16);line-height:1.5;color:var(--typography-dark-grey);margin:0;width:auto;max-width:none;flex:1 1 auto}
.fg2__zeile dd{font-family:var(--font4);font-weight:500;font-size:var(--schrift-16);line-height:1.4;color:var(--typography-black);margin:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.fg2__summe{display:block;margin-top:16px;background:var(--green-100);border-radius:16px;padding:20px 24px}
.fg2__summe dt{font-family:var(--font4);font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--typography-black);margin:0;width:auto;max-width:none}
.fg2__summe dd{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h1);line-height:1;letter-spacing:-.02em;color:var(--typography-black);margin:6px 0 0;font-variant-numeric:tabular-nums}
.fg2__beleg{display:flex;align-items:center;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--background-borders)}
.fg2__beleg img{flex:0 0 auto;height:54px;width:auto;mix-blend-mode:multiply}
.fg2__beleg span{font-family:var(--font4);font-size:var(--schrift-14);line-height:1.5;color:var(--typography-dark-grey);min-width:0}
.fg2__fuss{font-family:var(--font4);font-size:var(--schrift-14);line-height:1.6;color:var(--typography-dark-grey);margin:clamp(26px,3.2vw,38px) 0 0;max-width:88ch}

/* ---------- Andere Wege in die Leitung (al) ---------- */
/* Beige (Denis: „find ich gut, aber braucht ne andere Hintergrundfarbe"). Davor steht die
   Traegerreihe auf Weiss, danach die FAQ auf Beige — so wechselt es sauber. */
.al{background:var(--background-light-beige);padding:64px 0}
@media (max-width:900px){.al{padding:52px 0}}
.al__lead{font-family:var(--font4);font-size:var(--schrift-20);line-height:1.6;color:var(--typography-dark-grey);margin:14px 0 0;max-width:62ch}
.al__reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:30px}
@media (max-width:900px){.al__reihe{grid-template-columns:1fr}}
/* Die Karten tragen die Hover-Farbe dauerhaft. Denis, 15.08.: kein Hover-Effekt, sondern die
   Farben der Box so wie mit aktiviertem Hover. Das ist auch richtig: die Sektion steht auf
   Beige, und beige Karten auf beigem Grund verschwinden. Orange-100 hebt sie ab.
   Beim Ueberfahren wird jetzt nur der Rand des Verweises deutlicher, die Flaeche bleibt. */
.al__karte{display:flex;flex-direction:column;min-width:0;background:var(--orange-100);border-radius:16px;padding:24px 26px;text-decoration:none;transition:box-shadow .18s ease}
.al__karte:hover{box-shadow:inset 0 0 0 2px var(--primary-300)}
.al__stufe{font-family:var(--font4);font-weight:600;font-size:var(--schrift-14);line-height:1.3;color:var(--typography-dark-grey)}
.al__titel{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h4);line-height:1.22;color:var(--typography-black);margin-top:6px}
.al__satz{font-family:var(--font4);font-size:var(--schrift-16);line-height:1.55;color:var(--typography-dark-grey);margin-top:10px}
.kv__berater-link{margin-top:8px}
/* Tertiaerlinks sind seit 23.09.2026 der echte Theme-Tertiaerbutton (button
   button_transparent icon-bg-yellow), keine eigene .tlink-Kopie mehr. Die Zeile
   `.al__karte .tlink{...}` ist ersatzlos entfallen: `.al__karte` gehoerte zur
   handgebauten Hub-Sektion, die acf-blocks/hoeher-alternativen laengst abgeloest hat. */


/* Stand- und Verantwortungszeile unter der FAQ. Leise, aber vorhanden: ein Datum, das man
   sieht, ist ein anderes Signal als eins, das nur im Schema steht. */
.faq-stand{font-family:var(--font4);font-size:var(--schrift-14);line-height:1.6;color:var(--typography-dark-grey);margin:22px 0 0;max-width:62ch;margin-left:auto;text-align:right}
@media (max-width:900px){.faq-stand{text-align:left;margin-left:0}}

/* Der Theme-Sticky ist auf allen Breiten aktiv. Hier ab 900px aus: die Sprungleiste fuehrt
   dort ihren eigenen Knopf mit demselben Ziel mit, zwei waeren einer zu viel. */
@media (min-width:900px){.navigation-fixed .sticky-button-wrapper{display:none}}
/* Der Theme-Knopf steht im Sticky rechtsbuendig. Auf der Produktseite korrigiert das
   wp-custom-css auf links, dieselbe Korrektur hier. Volle Breite, damit die Trefferflaeche
   am Telefon nicht in der Ecke klebt. */
@media (max-width:899px){
  /* padding-bottom:51px, EXAKT wie im wp-custom-css der Produktseite. Denis, 15.08.: die IT hat
     dort ein Offset eingebaut, weil das Trustami-Widget am unteren Rand mitlaeuft. Ohne den
     Wert legt sich der Knopf ueber das Widget. Auf der Produktseite steht dieselbe Regel. */
  .navigation-fixed .sticky-button-wrapper{text-align:left;padding-bottom:51px}
  .sticky-button-wrapper .button{width:100%;justify-content:center}
}

/* 4,17:1 gemessen, gefordert sind 4,5:1. Der Block setzt --typography-light-grey (#7c7c7c)
   auf Weiss. Dasselbe Muster wie im Erfahrungsblock, hier fuer den Newsletter korrigiert. */
.subscribe-block__consent{color:var(--typography-dark-grey)}

/* ---------- Audit 15.08., Punkt 1: sichtbarer Tastaturfokus im Beratungsformular ----------
   WCAG 2.4.7 (AA). Acht Felder hatten im Tab-Durchlauf KEINE sichtbare Fokusanzeige, obwohl
   weiter oben in dieser Datei eine `:focus-visible`-Regel steht. Ueber die CDP-Kaskade
   nachgesehen, die Ursache ist Spezifitaet, nicht ein fehlender Selektor:

     .form-wrapper .form-row input[type="text"]:focus { outline:none }   (0,4,1)  Theme
     a:focus-visible, …, input:focus-visible { outline:2px solid … }     (0,1,1)  Entwurf
     input, input:focus, textarea, textarea:focus { outline:none }       (0,1,1)  Theme, pauschal

   Die Entwurfsregel hat also nie gegriffen. Gegengeprueft mit echten Tab-Anschlaegen:
   `:focus-visible` matchte `true`, `outline-style` blieb `none`.

   Der Selektor unten spiegelt den des Themes exakt, Attributselektoren eingeschlossen, und
   steht spaeter in der Kaskade. Damit gewinnt er bei gleicher Spezifitaet — OHNE `!important`,
   das diese Datei nirgends verwendet.
   Der Fokus liegt auf `:focus-visible`, nicht auf `:focus`: wer mit der Maus in ein Feld
   klickt, sieht keinen Ring, wer mit der Tastatur ankommt, sieht ihn. */
.form-wrapper .form-row input[type="text"]:focus-visible,
.form-wrapper .form-row input[type="email"]:focus-visible,
.form-wrapper .form-row input[type="tel"]:focus-visible,
.form-wrapper .form-row select:focus-visible,
.form-wrapper .form-row textarea:focus-visible,
.contact-form .form-row input[type="text"]:focus-visible,
.contact-form .form-row input[type="email"]:focus-visible,
.contact-form .form-row input[type="tel"]:focus-visible,
.contact-form .form-row select:focus-visible,
.contact-form .form-row textarea:focus-visible{
  outline:2px solid var(--typography-black);
  outline-offset:2px;
  border-radius:8px;
}

/* ---------- Audit 15.08., Punkt 4: prefers-reduced-motion ----------
   Gemessen: 30 Elemente haben bei aktivierter Bewegungsreduktion weiterergaenimiert, fast alle
   aus dem Theme (Buttons 0,3s, Karten-Hover, Traegerkarussell 0,35s). Der Entwurf bediente die
   Einstellung nur an vier eigenen Stellen.

   BEWUSST KEIN globales `animation:none`: die Hausregel und der Craft-Standard verlangen eine
   Alternative, die den Zustandswechsel erhaelt, keinen Totschalter. Deshalb 0,01s statt 0 —
   der Zustand wechselt weiterhin und `transitionend` feuert, es dauert nur nicht mehr.
   `scroll-behavior:auto` kommt dazu, weil ein weich scrollender Sprunganker fuer Betroffene
   derselbe Reiz ist wie eine Animation. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- Audit 15.08., Punkt 5: Trefferflaeche des Bewertungslinks ----------
   Gemessen 112x38px, gefordert 44px. Als Inline-Link im Fliesstext faellt er zwar unter die
   Ausnahme von WCAG 2.5.8, er steht aber an der prominentesten Beweisstelle der Seite.
   `padding-block` statt Hoehe, damit die Zeile im Flusstext nicht auseinanderreisst. */
/* .eh__sterne-text a: Trefferflaeche -- mit dem Bauteil nach shared.css umgezogen. */

/* ---------- Audit 15.08., Punkt 3: FAQ ohne JavaScript ----------
   Gemessen war das der schwerste inhaltliche Befund: sichtbarer Text der FAQ-Sektion
   763 Zeichen MIT und 763 Zeichen OHNE JavaScript, also nie eine einzige Antwort. Elf von
   79 Elementen standen in beiden Zustaenden auf `display:none`, und die fokussierbaren
   Elemente fielen von 13 auf 2: ohne JS liess sich das Akkordeon weder mit der Maus noch
   mit der Tastatur oeffnen. Das verstoesst gegen die Hausregel „keine Inhalte, die nur mit
   JavaScript sichtbar werden", und es trifft ausgerechnet den Abschnitt, der fuer
   Antwortmaschinen am wertvollsten ist.

   Die elf `div.item` sind jetzt `details`, die Fragen `summary`. Damit oeffnet das Akkordeon
   ueber den Browser selbst, ohne eine Zeile JavaScript, mit Tastatur, Maus und Screenreader,
   und der Text steht im Quelltext, wo ihn ein Crawler findet. Die `h3` bleibt IM `summary`
   erhalten, die Ueberschriftenhierarchie bricht also nicht.

   Das ist zugleich die Spezifikation fuer den Theme-Block: `acf/mini-faq-block` gehoert
   genauso umgebaut. Bis dahin gilt sie nur hier. */
.faq-mini .item > .answer{display:none}
.faq-mini details.item[open] > .answer{display:block}
.faq-mini summary.question{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;min-height:44px}
.faq-mini summary.question::-webkit-details-marker{display:none}
.faq-mini summary.question::marker{content:""}
.faq-mini summary.question h3{margin:0;font:inherit;color:inherit}
/* Das Zeichen rechts: Plus im geschlossenen, Minus im offenen Zustand. Zwei Striche als
   Pseudoelemente, der senkrechte dreht sich weg. Kein Icon-Font, kein Glyph. */
.faq-mini summary.question::after{content:"";flex:0 0 auto;width:18px;height:18px;background:
  linear-gradient(var(--typography-black),var(--typography-black)) center/18px 2px no-repeat,
  linear-gradient(var(--typography-black),var(--typography-black)) center/2px 18px no-repeat;
  transition:transform .2s ease}
.faq-mini details.item[open] > summary.question::after{background:
  linear-gradient(var(--typography-black),var(--typography-black)) center/18px 2px no-repeat}
.faq-mini summary.question:focus-visible{outline:2px solid var(--typography-black);outline-offset:3px;border-radius:4px}

/* ---------- Tertiaerlinks nach Markenvorgabe ----------
   Seit 23.09.2026 der echte Theme-Tertiaerbutton (button button_transparent icon-bg-yellow,
   wie auf der Startseite), keine eigene .tlink-Kopie mehr. */

.vg{background:var(--background-light-beige);padding:64px 0}
.vg__lead{font-family:var(--font4);font-size:var(--schrift-20);line-height:1.6;color:var(--typography-dark-grey);margin:14px 0 0;max-width:62ch}
/* ---------- Was bei uns anders läuft (vg) ----------
   ZURÜCKGEBAUT 16.08. auf das Vorbild der Proxy-Installation. Denis: „die vergleichssection
   bitte lieber so designen wie es auf der proxi war, wir verschlimmbessern ganz schön."

   Was die Proxy anders macht, und warum sie damit recht hat: die Spaltenüberschrift steht
   IM Kasten, nicht darüber. Genau das war der Fehler, den ich zweimal falsch gelöst habe.
   Erst stand der Kopf über einer Spalte ohne Kante und wirkte verrutscht, dann habe ich der
   Spalte eine Fläche gegeben, und zuletzt die Spalten ganz aufgelöst. Die Proxy löst es an
   der Wurzel: ein Kasten je Seite, Überschrift oben drin, Liste darunter. Damit hat der Kopf
   immer eine Kante, ohne dass irgendwo eine Fläche dazuerfunden werden muss.

   Aufbau wie in der Proxy:
     links   getönter Kasten, Überschrift „So läuft es oft woanders", Liste mit Kreuzen
     rechts  getönter Kasten, HÖHER-Logo statt Überschrift, Liste mit Haken, CTA darunter

   DIE `<table>` BLEIBT, das ist die harte Nebenbedingung aus dem AI-SEO-Check: die Paarung
   muss im Quelltext stehen und nicht nur optisch. Technisch geht beides zusammen, weil ein
   zweispaltiges Grid mit `display:contents` auf thead und tbody die Zellen genau in der
   Reihenfolge th1, th2, td1a, td2a, … einsortiert. In zwei Spalten gelesen ergibt das von
   selbst: Spalte 1 = Kopf plus alle linken Zellen, Spalte 2 = Kopf plus alle rechten. Die
   Kopfzelle ist damit das erste Element ihrer Spalte, also im Kasten. Kein Trick nötig. */
/* `row-gap:0` ist hier keine Kosmetik, sondern der Grund, warum die Spalte als EIN Kasten
   liest. Mit einem Abstand in beide Richtungen zerfällt jede Spalte in sieben einzelne
   Streifen, weil jede Zelle ein eigenes Rasterkind ist. Nur waagerecht getrennt, senkrecht
   auf Stoß: dann ergeben Kopfzelle und sechs Datenzellen eine durchgehende Fläche. */
.vg__tabelle{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(16px,2vw,24px);row-gap:0;margin:clamp(28px,3.2vw,38px) 0 0;border-collapse:separate;border-spacing:0}
/* Am Telefon stehen erst der linke Kasten komplett, dann der rechte. Denis, 15.08.: zwei
   Blöcke statt gestapelter Paare, weil ohne Spaltenköpfe niemand weiß, welche Hälfte wer ist.
   Über `grid-auto-flow:column` und zwei Zeilen-Spuren je Kasten geht das ohne order-Kette. */
@media (max-width:900px){
  .vg__tabelle{grid-template-columns:1fr;grid-auto-flow:row}
  .vg__tabelle th:first-child,.vg__tabelle td:first-child{order:1}
  .vg__tabelle th:last-child,.vg__tabelle td:last-child{order:2}
  .vg__tabelle th:last-child{margin-top:clamp(16px,2vw,24px)}
}
/* `tr` MUSS mit auf `display:contents`. Ohne das bleibt die Zeile selbst das Rasterkind, wird
   im Grid zu einem Block blockifiziert und trägt ihre zwei Zellen als Tabellenzeile in sich.
   Gemessen sah das so aus: vier Spalten statt zwei, weil je Rasterzelle eine ganze Zeile
   mit zwei Zellen stand. Erst wenn thead, tbody UND tr durchsichtig sind, werden die
   Zellen selbst zu Rasterkindern und sortieren sich als th1, th2, td1a, td2a, … ein. */
.vg__tabelle thead,.vg__tabelle tbody,.vg__tabelle tr{display:contents}

/* Die zwei Kästen entstehen dadurch, dass alle Zellen einer Spalte dieselbe Fläche tragen
   und nur die erste oben und die letzte unten gerundet ist. Optisch ein Block, im Quelltext
   eine Tabelle. */
.vg__tabelle th,.vg__tabelle td{font-family:var(--font4);text-align:left;padding:0 clamp(22px,2.4vw,30px)}
.vg__tabelle th{padding-top:clamp(24px,2.6vw,32px);padding-bottom:18px;border-radius:16px 16px 0 0}
.vg__tabelle tbody tr:last-child td{padding-bottom:clamp(24px,2.6vw,32px);border-radius:0 0 16px 16px}
.vg__tabelle td{padding-top:0;padding-bottom:14px;position:relative}

/* Links die anderen: getönt, grau, Kreuze. Rechts wir: Markenfläche, schwarz, Haken. */
.vg__tabelle th:first-child,.vg__tabelle td:first-child{background:var(--background-white)}
.vg__tabelle th:last-child,.vg__tabelle td:last-child{background:var(--orange-100)}
.vg__tabelle thead th:first-child{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h4);line-height:1.2;color:var(--typography-dark-grey)}
.vg__tabelle thead th:last-child{font-size:0;line-height:0}
.vg__tabelle thead th:last-child img{display:block;height:34px;width:auto}
@media (max-width:700px){.vg__tabelle thead th:last-child img{height:27px}}
.vg__tabelle td:first-child{font-size:var(--schrift-16);line-height:1.5;color:var(--typography-dark-grey)}
.vg__tabelle td:last-child{font-size:16px;line-height:1.5;color:var(--typography-black)}

/* Die Zeichen. Kreuz links, Haken rechts, beide als Pseudoelement, damit die Zelle reiner
   Text bleibt und ein Crawler nichts Dekoratives mitliest. Die Zelle rückt dafür ein. */
.vg__tabelle td{padding-left:calc(clamp(22px,2.4vw,30px) + 28px)}
.vg__tabelle td::before{content:"";position:absolute;left:clamp(22px,2.4vw,30px);top:2px;width:18px;height:19px;border-radius:50%;background-repeat:no-repeat;background-position:50%}
.vg__tabelle td:first-child::before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" fill="none"><rect y=".158" width="18" height="18.2" rx="9" fill="%23e6e2da"/><path d="M6.4 6.6l5.2 5.4M11.6 6.6l-5.2 5.4" stroke="%23666" stroke-width="1.3" stroke-linecap="round"/></svg>')}
.vg__tabelle td:last-child::before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" fill="none"><rect y=".158" width="18" height="18.2" rx="9" fill="%23fff"/><path d="m6.125 9.336 2.989 3.012 2.772-6.168" stroke="%23444" stroke-width="1.125" stroke-linecap="round"/></svg>')}

/* Der CTA sitzt in der Proxy im rechten Kasten. Er steht hier ausserhalb der Tabelle, weil
   ein Knopf keine Tabellenzelle ist, und wird ueber dasselbe Raster unter die rechte Spalte
   gelegt. Optisch identisch, semantisch sauber. */
.vg__tun{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(16px,2vw,24px)}
@media (max-width:900px){.vg__tun{grid-template-columns:1fr}}
.vg__tun > :first-child{display:none}
@media (min-width:901px){.vg__tun > :first-child{display:block}}

/* ---------- Ueber die HOEHER Akademie ---------- */
/* align-items:start statt center (Denis, 14.08.: „ist komisch, dass die headline so weit
   aussteht über dem text"). Das Bild ist rund 440px hoch, der Text rund 200px. Zentriert
   rutschte der Text also gut 120px nach unten und die H2 stand allein in der Luft. Oben
   angeschlagen beginnt der Text da, wo jede andere Sektion der Seite beginnt. */

@media (max-width:900px){
  .ue__text,.ue__bild{grid-column:1 / -1}
}

/* ---------- Erfahrungsberichte ----------
   Textkarten fuehren, EIN Video stuetzt — bewusst nicht umgekehrt. Der YouTube-Kanal hat
   11 Abonnenten; ein normales Embed laedt zum Kanal ein, und wer klickt, sieht einen leeren
   Kanal. Das entwertet den Beweis, statt ihn zu stuetzen. Deshalb eine Fassade aus Standbild
   und Abspielzeichen, die direkt auf das Video zeigt, ohne Kanalkontext und ohne dass beim
   Laden der Seite schon YouTube mitlaedt.
   Die Rezensionen stammen aus dem vorhandenen Pool auf /erfahrungsberichte/, mit Vorname,
   Altersgruppe, belegter Weiterbildung und Quelle. Nur Vornamen (Denis, 14.08.). */
/* FARBE 17.08. aus Claude Design uebernommen. Auftakt und Stimmen lagen auf zwei fast
   gleich hellen, aber verschieden getoenten Flaechen und lasen sich als Versehen.
   Ein erster Versuch mit --orange-50 war zu nah an --orange-100 („ich sehe nix").
   Jetzt: Auftakt bleibt --orange-100, die Stimmen bekommen --background-beige
   (#f5efe6). Beide warm, aber zwei klar getrennte Baender, und die weissen Karten
   stehen sauber auf der Flaeche. Beides sind vorhandene Tokens, keine neue Farbe. */
.er{background:var(--background-beige);padding:64px 0}
/* Der Block zentriert seinen Kopf (max-width 640, margin auto, text-align center). Auf dieser
   Seite hat jede Sektion dieselbe linke Lesekante — ein zentrierter Kopf bricht sie als
   einziger. Also linksbuendig, sonst nichts geaendert. */
.er .erfahrungen__head{max-width:var(--textbreite);margin-left:0;margin-right:0;text-align:left}
/* Die Videokarte erbt Flaeche, Rand und Radius vom Block. Nur das Bild muss randlos oben
   sitzen, deshalb zieht es den Innenabstand der Karte wieder heraus. */
.er__video{overflow:hidden;text-decoration:none;padding-top:0;gap:14px}
.er__video .er__medien{margin:0 clamp(-32px,-3vw,-24px)}
.er__zitat{font-family:var(--font4);font-weight:400;font-size:var(--schrift-16);line-height:1.35;color:var(--typography-black);hyphens:none}
@media (max-width:1100px){.er__karte,.er__video{grid-column:span 6}}
@media (max-width:700px){.er__karte,.er__video{grid-column:1 / -1}}


/* Belegzeile der Videokarte: dieselbe Auszeichnung wie im Block, damit die drei Karten
   unten identisch schliessen. Kein margin-top:auto mehr — genau das hat vorher das Loch
   erzeugt, weil es die Belegzeile der kuerzesten Rezension an den Kartenboden gedrueckt hat. */
.er__wer{display:block;font-family:var(--font4);font-weight:600;font-size:var(--schrift-16);line-height:1.45;color:var(--typography-black);margin-top:auto}
/* KORREKTUR 14.08., erst im Screenshot sichtbar geworden: Das YouTube-Standbild traegt selbst
   schon eingebrannten Text („keine Zeit im Alltag"). Ein Untertitel DARUEBER ergab zwei
   Textebenen, beide unlesbar. Jetzt bleibt das Bild ein Bild, der Text steht darunter — in
   derselben Struktur wie die beiden Textkarten daneben. Damit ist die Kachel auch konsistent. */
.er__medien{position:relative;line-height:0}
.er__bild{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* KNOPF AUS DER MITTE GEHOLT 17.08. (Denis: „thumbnail bei dem reviewblock sieht bissl off
   aus"). Der Grund ist derselbe, der schon das Zitat AUF dem Bild gekippt hat: die
   YouTube-Standbilder tragen eingebrannten Text, und der steht mittig links. Ein Knopf in
   der Bildmitte landet zwangslaeufig darauf, im Beispiel mitten auf „Hauskauf".
   Jetzt unten rechts mit Abstand, dazu ein weicher Verlauf an der Unterkante, damit der
   Knopf auf jedem Motiv steht und nicht nur auf diesem. */
.er__medien::after{content:"";position:absolute;left:0;right:0;bottom:0;height:88px;background:linear-gradient(to top,rgba(0,0,0,.28),transparent);pointer-events:none}
.er__spielen{position:absolute;right:14px;bottom:14px;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;transition:transform .2s ease;z-index:1}
.er__video:hover .er__spielen{transform:scale(1.06)}
.er__spielen::after{content:"";width:0;height:0;margin-left:4px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent var(--typography-black)}



/* ============================================================================
   ABWEICHUNGEN DIESES HUBS GEGENUEBER DEM PDL-HUB
   ============================================================================ */

/* Die Steuersektion ist WEISS, wie auf dem PDL-Hub (Denis, 17.08.: „ist immernoch mit grau
   statt weiss"). Sie war zwischenzeitlich getoent, weil ohne Gehaltssektion zwei weisse
   Flaechen aneinanderstiessen. Mit der Gehaltssektion ist der Wechsel wieder da:
   Textstrecke weiss, Gehalt getoent, Steuer weiss. */

/* Gehaltsdiagramm: seit Plugin 1.40.0 im Block acf/hoeher-gehalt, mit eigenem CSS.
   Die frueheren Regeln .gh__svg und .gh__tabelle standen hier fuer das Inline-SVG und sind
   entfallen — sie haetten kein Element mehr, auf das sie zeigen. In dieser Entwurfsdatei
   steht an der Stelle nur ein Platzhalter, die verbindliche Ansicht ist die
   WordPress-Vorschau. */

/* Infografik mit Text daneben. Ein Bild allein traegt seine Aussage nicht: fuer eine
   Antwortmaschine existiert nur, was im Text steht. Deshalb Bild UND Liste. */
.ig__text{display:block;margin-top:18px}
.ig__titel{display:block;font-family:var(--font4);font-weight:600;font-size:16px;line-height:1.4;color:var(--typography-black);margin-bottom:10px}
.ig__liste{margin:0;padding-left:20px;font-family:var(--font4);font-size:16px;line-height:1.55;color:var(--typography-black)}
.ig__liste li{margin-bottom:6px}
/* Das Raster gilt NUR, wenn neben der Grafik auch Text steht. Ohne `:has()` galt es
   immer: auf der PDL-Seite steht die Grafik allein, bekam trotzdem eine halbe Spalte
   und schrumpfte auf 368px, daneben leerer Raum. Gemeldet 19.08.2026. */
@media (min-width:820px){.ig:has(.ig__text){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}.ig__text{margin-top:0}}

/* KURSFINDER, generische Facetten.
   Der PDL-Hub verdrahtet seine Achsen in den Selektoren (#kv-f1-ambulant, #kv-f2-bayern).
   Auf vier Hubs mit vier verschiedenen Achsenpaaren waere das vierfach gepflegtes CSS.
   Hier heissen die Werte deshalb neutral a und b, die Bedeutung steht im Label. Genau so
   muss es auch der spaetere Block koennen: Achsen als Feld, nicht fest verdrahtet.
   Leere Facette heisst weiter „passt zu jeder Auswahl". */
/* Der Riegel `.kv:not(.kv--fN-x-frei)` gehoert zwingend davor. Der Block setzt fuer eine
   Option OHNE Filterwirkung („Noch offen") die Klasse `kv--f1-c-frei` auf die Sektion —
   nur las diese Klasse bis zum 19.08.2026 keine einzige Regel aus. Die Folge: wer „Noch
   offen" waehlte, sah GAR KEINEN Kurs mehr, weil die Regel jede Karte ohne `data-f1="c"`
   ausblendete und keine Karte diesen Wert traegt. Genau so von Denis auf dem PDL-Hub
   gemeldet. GEMESSEN: 3 Karten bei „Ambulant", 0 bei „Noch offen". */
.kv:not(.kv--f1-a-frei) .kv__finder:has(#kv-f1-a:checked) .kv__karte:not([data-f1="a"]):not([data-f1=""]){display:none}
.kv:not(.kv--f1-b-frei) .kv__finder:has(#kv-f1-b:checked) .kv__karte:not([data-f1="b"]):not([data-f1=""]){display:none}
.kv:not(.kv--f1-c-frei) .kv__finder:has(#kv-f1-c:checked) .kv__karte:not([data-f1="c"]):not([data-f1=""]){display:none}
.kv:not(.kv--f2-a-frei) .kv__finder:has(#kv-f2-a:checked) .kv__karte:not([data-f2="a"]):not([data-f2=""]){display:none}
.kv:not(.kv--f2-b-frei) .kv__finder:has(#kv-f2-b:checked) .kv__karte:not([data-f2="b"]):not([data-f2=""]){display:none}

/* Die Antwort der Sektion, dieselbe Mechanik wie beim PDL-Hub, nur mit den neutralen Werten.
   [data-k="start"] bleibt ohne Regel sichtbar: kann ein Browser kein :has(), steht der
   Einstiegssatz und alle Kacheln bleiben stehen. */
.kv__finder:has(#kv-f1-a:checked):not(:has(input[name="kv-f2"]:checked)) .kv__antwort > [data-k="a"],
.kv__finder:has(#kv-f1-b:checked):not(:has(input[name="kv-f2"]:checked)) .kv__antwort > [data-k="b"],
.kv__finder:has(#kv-f1-c:checked):not(:has(input[name="kv-f2"]:checked)) .kv__antwort > [data-k="c"],
.kv__finder:not(:has(input[name="kv-f1"]:checked)):has(#kv-f2-a:checked) .kv__antwort > [data-k="f2a"],
.kv__finder:not(:has(input[name="kv-f1"]:checked)):has(#kv-f2-b:checked) .kv__antwort > [data-k="f2b"],
.kv__finder:has(#kv-f1-a:checked):has(#kv-f2-a:checked) .kv__antwort > [data-k="aa"],
.kv__finder:has(#kv-f1-a:checked):has(#kv-f2-b:checked) .kv__antwort > [data-k="ab"],
.kv__finder:has(#kv-f1-b:checked):has(#kv-f2-a:checked) .kv__antwort > [data-k="ba"],
.kv__finder:has(#kv-f1-b:checked):has(#kv-f2-b:checked) .kv__antwort > [data-k="bb"]{display:block}


/* assets/shared.css */
/* ==========================================================================
   HÖHER Blocks: gemeinsame Grundlagen aller Blöcke dieses Plugins.

   Hintergrundfarbe und Hintergrundbild folgen exakt dem Muster der vorhandenen
   Theme-Blöcke: --bg-color auf der Sektion, --bg-image und --bg-image-mobile
   über ein :before. Dazu die Abstands-Optionen aus dem ACF-Feld.
   ========================================================================== */

.hb-section{position:relative}

.hb-section:before{
  background:var(--bg-image);
  background-repeat:no-repeat;
  background-size:cover;
  content:"";
  height:100%;
  min-width:1400px;
  position:absolute;
  right:0;
  top:0;
  width:100%;
  pointer-events:none;
}

.hb-section > .container{position:relative;z-index:1}

@media only screen and (max-width:767px){
  .hb-section:before{
    background:var(--bg-image-mobile);
    background-position:bottom;
    background-repeat:no-repeat;
    background-size:cover;
    bottom:0;
    left:0;
    min-width:100%;
    right:auto;
    top:auto;
    width:100%;
  }
}

/* Deutsche Komposita sprengen auf schmalen Schirmen jede Überschrift.
   „Qualifizierungschancengesetz" sind 28 Zeichen und passen bei 28px Schriftgröße
   in keine 301 Pixel breite Spalte, der Rest lief bisher aus dem Element heraus.
   `hyphens:auto` trennt sauber nach deutschen Regeln (das <html lang="de"> steht),
   `overflow-wrap` ist die Rückfallebene, falls ein Wort selbst dafür zu lang ist. */
/* Der Schutz galt bisher nur für Überschriften. Rezensionen kommen aber unredigiert
   von den Portalen: „Qualitätsmanagementbeauftragte" hat 30 Zeichen und braucht in
   Rowan bei 18px rund 270px, eine Zitatkarte auf 375px bietet 271px. Das ist auf dem
   Millimeter, „Pflegedienstleitungsweiterbildung" läuft sicher heraus.
   -webkit-hyphens ist Pflicht: Safari kennt hyphens unpräfigiert erst ab Version 17,
   auf iOS 16 und darunter fiele die gesamte Trennung sonst ersatzlos aus. */
.hb-section h1,
.hb-section h2,
.hb-section h3,
.hb-section h4,
.hb-section p,
.hb-section li,
.hb-section blockquote,
.foerder-highlight__title,
.fp-prog__name,
.leistungen__karte-titel,
.ersparnis__kurs-name,
.stapel__label,
.rez__zitat,
.rez__wer,
.rez__kurs,
.rez__quelle,
.vt-card__title{
  overflow-wrap:break-word;
  -webkit-hyphens:auto;
  hyphens:auto;
}

/* Highlight-Wort aus eckigen Klammern, erzeugt von includes/highlight.php.
   Muss hier stehen und nicht im Rezensionen-Block: der Filter greift auf ratings,
   media-text und intro-block, also auf Seiten, die den Block gar nicht enthalten.
   Dessen CSS lädt WordPress nur, wenn der Block auch gerendert wird. */
.hb-mark{
  background:var(--orange-300,#ffc46a);
  border-radius:12px;
  padding:0 .3em .1em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* --------------------------------------------------------------------------
   Steuerpfeile für wischbare Reihen (assets/reihe.js).

   Erscheinen nur, wenn JavaScript läuft UND die Reihe wirklich breiter ist als
   ihr Sichtfenster. Passt alles hinein, bleiben sie unsichtbar. Auf dem Handy
   sind sie ausgeblendet, dort wischt man.
   -------------------------------------------------------------------------- */
/* Punkte unter der Reihe, Maße wie beim Kurs-Slider des Themes (12px, 12px Abstand,
   zentriert, 30px Abstand nach oben). Farben aber aus dem Token-Set: die Theme-Werte
   #dee2e6 und #8b45c7 stehen dort nicht und wären zwei neue Töne.
   Liegen bewusst UNTER der Reihe, nicht darüber: Pfeile über den Karten verdecken das
   Motiv, und genau das ist bei Videokacheln mit eingebranntem Text das Problem. */
.hb-punkte{
  display:none;gap:12px;justify-content:center;margin-top:30px;
}
.hb-punkte_aktiv{display:flex}
.hb-punkt{
  width:12px;height:12px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:var(--background-borders,#e4d6c4);
  transition:background-color 300ms cubic-bezier(.16,1,.3,1),transform 300ms cubic-bezier(.16,1,.3,1);
}
.hb-punkt:hover{background:var(--orange-300,#ffc46a)}
.hb-punkt_aktiv{background:var(--typography-black,#27252a)}
/* Die Klickfläche muss 44px sein, der sichtbare Punkt bleibt 12px.
   Ein 12px-Ziel ist auf dem Handy nicht zuverlässig zu treffen. */
.hb-punkt::before{
  content:"";position:absolute;width:44px;height:44px;
  transform:translate(-16px,-16px);
}
.hb-punkt{position:relative}
.hb-punkt:focus-visible{outline:3px solid var(--typography-black,#27252a);outline-offset:4px}

/* --------------------------------------------------------------------------
   Laufband für Zitatreihen (assets/reihe.js, data-reihe-auto="1").

   Ausnahme aus taste-und-emotion.md 3.6, freigegeben am 01.08.2026, und nur für
   Zitate. Nie für Kurse, Preise oder Förderprogramme: wo jemand vergleicht und
   entscheidet, ist Bewegung eine Zumutung.
   -------------------------------------------------------------------------- */

/* Scroll-Snapping und ein von Hand gesetztes scrollLeft arbeiten gegeneinander, der
   Browser zieht sonst bei jedem Frame auf die nächste Kartenkante zurück. */
.hb-reihe_laufband{scroll-snap-type:none}

/* Ohne die zweite Zeile ist `steuerung.hidden = true` wirkungslos: eine Autorenregel
   mit display:flex schlaegt die Browserregel [hidden]{display:none}. */
.hb-steuerung{display:flex;justify-content:center;margin:0 0 16px}
.hb-steuerung[hidden]{display:none}

/* Beschriftet, nicht nur ein Symbol, und mindestens 44px hoch. Ein Pause-Knopf, den
   man erst deuten muss, ist für jemanden, den die Bewegung stört, keine Hilfe.
   Form und Farben wie die Filter-Chips der Rezensionen, damit nichts Neues entsteht. */
.hb-laufband-schalter{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:96px;padding:0 20px;
  border:1.5px solid var(--background-borders,#e4d6c4);border-radius:999px;
  background:var(--background-white,#fff);color:var(--typography-black,#27252a);
  font-family:var(--font8,"Bricolage Grotesque",sans-serif);font-size:var(--schrift-14);line-height:1;
  cursor:pointer;
  transition:background-color 300ms cubic-bezier(.16,1,.3,1),border-color 300ms cubic-bezier(.16,1,.3,1);
}
.hb-laufband-schalter:hover{border-color:var(--orange-400,#ffaf54)}
.hb-laufband-schalter:focus-visible{outline:3px solid var(--typography-black,#27252a);outline-offset:2px}

/* Rückfallebene zur Abschaltung in reihe.js: schaltet jemand „Bewegung reduzieren"
   erst nach dem Laden ein, ist der Knopf sofort weg, auch ohne dass ein Skript läuft. */
@media (prefers-reduced-motion: reduce){
  .hb-steuerung{display:none}
  .hb-laufband-schalter{transition:none}
}

/* Abstands-Optionen: Standard, Kein Abstand, Mehr, Viel */
.hb-sp-none{padding-top:0 !important}
.hb-sp-more{padding-top:clamp(80px,10vw,132px) !important}
.hb-sp-max{padding-top:clamp(104px,13vw,168px) !important}
.hb-spb-none{padding-bottom:0 !important}
.hb-spb-more{padding-bottom:clamp(80px,10vw,132px) !important}
.hb-spb-max{padding-bottom:clamp(104px,13vw,168px) !important}

/* blocks/trust-leiste/style.css */
/* ==========================================================================
   HÖHER Block: Trust-Leiste
   ========================================================================== */

.trust-leiste-section{
  background-color:var(--bg-color,var(--background-light-beige));
  padding:36px 0;
}
.trust-leiste-section_bordered{
  border-top:1px solid var(--background-borders);
  border-bottom:1px solid var(--background-borders);
}

.trust-stars{display:inline-flex;gap:2px}
.trust-stars svg{width:20px;height:20px}

/* ---------- Darstellung „Spalten" ---------- */
.trust-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:28px 16px}
.trust-col{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.trust-col__media{height:44px;display:inline-flex;align-items:center;gap:3px}
.trust-col__media img{height:44px;width:auto;border-radius:4px;display:block}
.trust-col__media .trust-stars svg{width:20px;height:20px}
.trust-col__value{
  height:44px;display:inline-flex;align-items:center;
  font-family:var(--font4);font-weight:600;font-size:var(--schrift-h3);color:var(--typography-black);
}
.trust-col__label{
  font-family:var(--font4);font-size:14px;line-height:1.45;
  color:var(--typography-dark-grey);max-width:26ch;
}
.trust-col__label strong{color:var(--typography-black);font-weight:600}

/* ---------- Darstellung „Box" ---------- */
.trust-box{
  border:1px solid var(--background-borders);border-radius:20px;
  background:var(--box-bg,var(--background-white));padding:28px 8px 24px;
}
.trust-box__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));align-items:stretch}
.trust-box__col{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:4px 32px;min-width:0}
.trust-box__col + .trust-box__col{border-left:1px solid var(--background-borders)}
.trust-box__media img{height:48px;width:auto;display:block}
.trust-box__value{font-family:var(--font4);font-weight:500;font-size:var(--schrift-h3);line-height:1.15;color:var(--typography-black)}
.trust-box__label{font-family:var(--font4);font-size:var(--schrift-16);line-height:1.45;color:var(--typography-dark-grey)}
.trust-box__label strong{color:var(--typography-black);font-weight:600}
.trust-box__seals{
  display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.5vw,32px);flex-wrap:wrap;
  margin-top:24px;padding:20px 32px 0;border-top:1px solid var(--background-borders);
}
.trust-box__seals img{height:48px;width:auto;display:block}

.trust-leiste__source{
  margin:14px 0 0;font-family:var(--font4);font-size:var(--schrift-14);line-height:1.6;
  color:var(--typography-dark-grey);max-width:96ch;
}
.trust-leiste__cta{display:inline-flex;margin-top:28px}

@media(max-width:767px){
  .trust-box__stats{grid-template-columns:1fr}
  .trust-box__col{padding:12px 20px}
  .trust-box__col + .trust-box__col{border-left:0;border-top:1px solid var(--background-borders)}
  .trust-box__seals{padding-left:20px;padding-right:20px;justify-content:flex-start}
}

/* blocks/erfahrungen/style.css */
/* ==========================================================================
   HÖHER Block: Erfahrungen mit Beleg

   Das Zitat fuehrt in Rowan, die Belegzeile darunter ist bewusst klein und
   nuechtern. Sie soll nicht schmuecken, sondern nachpruefbar machen.
   ========================================================================== */

.erfahrungen-section{
  background-color:var(--bg-color,var(--background-beige));
  padding:clamp(56px,8vw,96px) 0;
}

.erfahrungen__head{
  max-width:640px;margin:0 auto clamp(32px,4vw,48px);
  text-align:center;display:flex;flex-direction:column;gap:12px;
}
.erfahrungen__title{
  font-family:var(--font3),serif;font-weight:400;font-size:var(--schrift-h2);
  line-height:1.2;color:var(--typography-black);margin:0;text-wrap:balance;
}
.erfahrungen__text{
  font-family:var(--font4);font-size:16px;line-height:1.6;
  color:var(--typography-dark-grey);margin:0;
}

/* --- Raster --- */

.erfahrungen__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;
}
.erfahrungen-section_mit-video .erfahrungen__grid{
  grid-template-columns:minmax(260px,340px) 1fr 1fr;
}

/* --- Video-Kachel --- */

.erfahrungen__video{
  grid-row:span 2;position:relative;display:block;margin:0;
  border-radius:20px;overflow:hidden;min-height:480px;
  background:var(--typography-black);text-decoration:none;
}

/* --- Spalten nach Kartenzahl ---

   Ohne diese Regeln bleiben Zellen leer, sobald die Kartenzahl nicht zum Raster
   passt. Siehe Kommentar in index.php.

   Bewusst in einer min-width-Abfrage: die Regeln haben zwei bis drei Klassen und
   damit hoehere Spezifitaet als die Umbrueche weiter unten. Ohne diese Klammer
   wuerden sie dort gewinnen, obwohl Mobil laengst einspaltig sein soll. Ab 1200px
   greift das dreispaltige Raster, darunter ordnen die Umbrueche ohnehin neu. */
@media(min-width:1200px){

  /* Ohne Video: so viele Spalten wie Karten. */
  .erfahrungen-section_karten-1:not(.erfahrungen-section_mit-video) .erfahrungen__grid{
    grid-template-columns:minmax(0,560px);justify-content:center;
  }
  .erfahrungen-section_karten-2:not(.erfahrungen-section_mit-video) .erfahrungen__grid{
    grid-template-columns:repeat(2,1fr);
  }

  /* Mit Video und keiner oder einer Karte: die dritte Spalte entfaellt. */
  .erfahrungen-section_mit-video.erfahrungen-section_karten-0 .erfahrungen__grid{
    grid-template-columns:minmax(260px,340px);
  }
  .erfahrungen-section_mit-video.erfahrungen-section_karten-1 .erfahrungen__grid{
    grid-template-columns:minmax(260px,340px) 1fr;
  }

  /* Mit Video und bis zu zwei Karten passt alles in eine Reihe, die Kachel muss
     dann keine zweite Zeile mehr fuellen. Bei drei Karten bleibt es beim
     Zwei-Zeilen-Raster, dort steht die Kachel besser als danebengesetzt. */
  .erfahrungen-section_mit-video.erfahrungen-section_karten-0 .erfahrungen__video,
  .erfahrungen-section_mit-video.erfahrungen-section_karten-1 .erfahrungen__video,
  .erfahrungen-section_mit-video.erfahrungen-section_karten-2 .erfahrungen__video{
    grid-row:auto;min-height:340px;
  }
}
.erfahrungen__video:focus-visible{outline:2px solid var(--typography-black);outline-offset:3px}
.erfahrungen__video-bild{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease;
}
.erfahrungen__video:hover .erfahrungen__video-bild{transform:scale(1.03)}

.erfahrungen__video-knopf{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:64px;height:64px;border-radius:50%;background:var(--background-white);
  display:flex;align-items:center;justify-content:center;
}
.erfahrungen__video-knopf svg{margin-left:3px}

.erfahrungen__video-text{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:72px 22px 22px;
  background:linear-gradient(to top,rgba(39,37,42,.88),rgba(39,37,42,0));
  display:flex;flex-direction:column;gap:6px;pointer-events:none;
}
.erfahrungen__video-zitat{
  font-family:var(--font4);font-size:var(--schrift-16);line-height:1.4;
  color:var(--typography-white,#fff);
}
.erfahrungen__video-person{
  font-family:var(--font4);font-size:14px;line-height:1.45;
  color:var(--typography-white,#fff);
}

/* --- Zitatkarten --- */

.erfahrungen__karte{
  background:var(--karte-bg,var(--background-white));
  border:1px solid var(--background-borders);
  border-radius:20px;padding:clamp(24px,3vw,32px);margin:0;
  display:flex;flex-direction:column;gap:20px;min-width:0;
}

/* Sternreihe. Orange nur als Flaeche, nie als Textfarbe, deshalb liegt die
   Farbe am SVG und nicht an einem Textknoten. Der Wert steht zusaetzlich als
   Zahl in der Belegzeile, die Grafik ist reine Wiederholung. */
.erfahrungen__sterne-reihe{display:flex;gap:4px;line-height:0}
.erfahrungen__stern{color:var(--background-borders);flex:0 0 auto}
.erfahrungen__stern.is-voll{color:var(--orange-400)}

.erfahrungen__zitat{margin:0;flex:1 1 auto}
.erfahrungen__zitat p{
  margin:0;font-family:var(--font3),serif;font-weight:400;
  font-size:var(--schrift-h3);line-height:1.4;
  color:var(--typography-black);
  overflow-wrap:break-word;hyphens:auto;text-wrap:pretty;
}

.erfahrungen__person{
  font-family:var(--font4);font-style:normal;
  display:flex;flex-direction:column;gap:8px;
}
.erfahrungen__name{
  font-size:16px;font-weight:600;line-height:1.5;
  color:var(--typography-black);overflow-wrap:break-word;
}
.erfahrungen__trenner{color:var(--typography-light-grey)}

.erfahrungen__beleg{
  font-size:14px;line-height:1.5;color:var(--typography-light-grey);
}
.erfahrungen__beleg a{color:var(--typography-light-grey);text-underline-offset:3px}
.erfahrungen__beleg a:hover{color:var(--typography-black)}

.erfahrungen__cta{margin-top:clamp(28px,3.5vw,44px);display:flex;justify-content:center}

/* --- Umbrueche --- */

@media(max-width:1199px){
  .erfahrungen__grid,
  .erfahrungen-section_mit-video .erfahrungen__grid{grid-template-columns:repeat(2,1fr)}
  .erfahrungen__video{grid-row:auto;grid-column:span 2;min-height:380px}
  .erfahrungen__video-text{padding:56px 20px 20px}
}
@media(max-width:767px){
  .erfahrungen__grid,
  .erfahrungen-section_mit-video .erfahrungen__grid{grid-template-columns:1fr;gap:16px}
  .erfahrungen__video{grid-column:auto;min-height:320px}
  .erfahrungen__zitat p{font-size:var(--schrift-h4)} /* Rowan mobil nie unter 24 */
}
@media (prefers-reduced-motion:reduce){
  .erfahrungen__video-bild{transition:none}
  .erfahrungen__video:hover .erfahrungen__video-bild{transform:none}
}