/*
 * Kursfinder. CSS 1:1 aus dem abgenommenen Hub-Entwurf gezogen
 * (templates-pdl/hub-entwurf.html), nicht abgeschrieben.
 *
 * Der Filter laeuft ueber native Radios plus :has(), ohne JavaScript. Ohne
 * :has()-Unterstuetzung bleiben alle Kacheln und der Einstiegssatz stehen: das ist
 * der gewollte Rueckfall und zugleich der crawlbare Zustand.
 *
 * Die Facettenwerte heissen neutral a, b und c. Die Bedeutung steht im Label, damit
 * ein CSS fuer jedes Thema reicht.
 */
/* ============================================================
   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}
@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}
@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}

/* ---------- 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}
}
.kv__karte{display:flex;flex-direction:column;min-width:0;background:var(--background-light-beige);border-radius:16px;padding:22px 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)}
/* display:block, weil der Titel seit dem 18.08.2026 ein <span> ist und kein <h3> mehr
   (Max, SEO: Angebote in einem Filter gehoeren nicht in die Gliederung). Ohne das faellt
   er in den Textfluss zurueck und die Kachel bricht. */
.kv__titel{display:block;font-family:var(--font3);font-weight:400;font-size:var(--schrift-h4);line-height:1.25;color:var(--typography-black);margin:0;overflow-wrap:break-word;hyphens:auto}
/* DIE URSACHE DER UNGLEICHEN ABSTÄNDE (Denis, 14.08.: „bei manchen hast Du den Abstand gut
   gesetzt, bei anderen nicht").
   Sie lag nicht in den Abständen, sondern in `margin-top:auto` am Preisfuß. Der hält die
   Preise einer Reihe auf einer Linie, und dafür muss die Höhendifferenz zwischen zwei
   Nachbarkacheln irgendwo hin: sie landet als Leerraum genau vor dem Preis. Bei einer Kachel
   mit einzeiligem Satz waren das 40px, bei der Nachbarin 18px. Zwei verschiedene Abstände an
   derselben Stelle, und das sieht man.
   Der Fix greift an der Wurzel: der Satz bekommt eine Mindesthöhe von zwei Zeilen, und die
   Sätze selbst sind auf zwei Zeilen getextet. Damit sind alle Kacheln gleich hoch, die
   Differenz ist null, und der Abstand vor dem Preis ist überall derselbe. */
.kv__wer{font-family:var(--font4);font-size:var(--schrift-16);line-height:1.55;color:var(--typography-dark-grey);margin:8px 0 14px;min-height:3.1em}
@media (max-width:760px){
  .kv__wer{min-height:0}
}
/* ---------- Die Faktenliste ----------
   Der eigentliche Punkt: sie unterscheidet sich in der FORM vom Satz darüber, nicht nur in
   der Größe. Zwei graue Absätze in 15px und 13px lasen sich als ein einziger Absatz, und
   genau das hat Denis gestört. Jetzt: Haarlinie darüber, feste Beschriftungsspalte, Werte in
   Schwarz und 500. Die feste Spaltenbreite ist kein Detail — sie ist der Grund, warum die
   Werte über alle acht Kacheln hinweg in einer Flucht stehen und vergleichbar werden.
   Beschriftung in --typography-dark-grey, nicht in --typography-light-grey: #7c7c7c auf
   der Kachelfläche reißt die 4,5:1. */
/* 22px statt 14px nach der Haarlinie (Denis: „die Linie braucht bissl mehr Abstand zum Wort").
   Eine Trennlinie, die zu dicht am Text klebt, liest sich als Unterstreichung der Zeile darueber
   statt als Trenner zwischen zwei Bloecken. */
.kv__fakten{margin:0;padding-top:22px;border-top:1px solid var(--background-borders);display:flex;flex-direction:column;gap:6px}
.kv__fakten > div{display:grid;grid-template-columns:6.75rem minmax(0,1fr);gap:10px;align-items:baseline}
.kv__fakten dt{font-family:var(--font4);font-size:var(--schrift-14);line-height:1.5;color:var(--typography-dark-grey);margin:0}
.kv__fakten dd{font-family:var(--font4);font-weight:500;font-size:14px;line-height:1.5;color:var(--typography-black);margin:0}
@media (max-width:400px){
  .kv__fakten > div{grid-template-columns:6rem minmax(0,1fr);gap:8px}
}
/* margin-top:auto am Preisblock ist der Grund, warum die Preise einer Reihe auf einer Linie
   sitzen, egal wie lang der Satz darueber ist. Der Preis ist die „grosse Zahl" der Kachel,
   deshalb Displayschrift und kein Icon. */
/* PREIS UND KNOPF IN EINER ZEILE (Denis, 14.08.: „wie wäre es mit preis schreiben und
   daneben den cta button oder macht man das nicht ui technisch").
   Doch, macht man, und es ist hier sogar das bessere Muster: Preis und Handlung stehen im
   selben Blickfeld, die Entscheidung „das kostet X, das nehme ich" braucht keinen Sprung
   mehr über zwei Zeilen. Der Kartenfuß wird dadurch rund 60px flacher, mal acht Kacheln.
   `margin-top:auto` hält den Fuß an der Kachelunterkante, damit alle Preise einer Reihe auf
   einer Linie sitzen, egal wie lang der Satz darüber ist.
   Unter 480px bricht die Zeile um: „ab 3.059 €" plus Rate plus Knopf passen dort nicht
   nebeneinander, ohne dass der Knopf unter 44px fällt. */
/* RUHE IM BLICKFLUSS, dritte Runde (Denis: „insgesamt schön, aber immer noch bissl unruhig,
   so richtig der Flow vom Blick kommt noch nicht rein").
   Der Befund war zählbar: die Kachel hatte VIER senkrechte Kanten. Text links bei 0, die
   Faktenwerte bei 7,5rem, der Preis wieder bei 0, der Knopf rechtsbündig. Dazu ein fünfter
   Textgrad, die Ratenzeile unter dem Preis. Bei jedem Wechsel springt das Auge zurück.
   Drei Eingriffe, alle in dieselbe Richtung:
   1. Die Rate ist in die Faktenliste gewandert, als vierte Zeile „Ratenzahlung". Sie ist eine
      Angabe wie Dauer und Umfang, keine Fußnote zum Preis. Damit fällt eine Textgröße weg.
   2. Der Preisfuß ist jetzt EINE Zeile: eine Zahl, ein Knopf, eine Haarlinie darüber. Das ist
      der Ankerpunkt, den die Kachel vorher nicht hatte.
   3. Beschriftungsspalte von 7,5 auf 6,75rem und Zeilenabstand von 8 auf 6px: die vier
      Faktenzeilen lesen sich als ein Block statt als vier Zeilen.
   Übrig bleiben drei Blöcke mit einer gemeinsamen linken Kante und genau einer Ausnahme. */
/* POLISH 15.08. (Denis: „ich würde die raten kleiner unter die vollzahlerpreise machen und
   den button rechts daneben falls es mit der höhe passt").
   Der Bauplan dafür stand längst im Markup — `.kv__preis-zahl` umschließt Betrag und Rate —,
   nur hatte weder der Wrapper noch die Rate je eine Regel bekommen. Beide liefen deshalb
   inline weiter: „ab 1.999 € oder 12 x 166,58 €, 0 % Mehrwertsteuer" wurde EINE lange Zeile,
   die die volle Kachelbreite fraß, und der Knopf hatte keinen Platz mehr und ist unter den
   Preis umgebrochen. Der Kommentar oben beschreibt seit dem 14.08. eine Zeile, die es nie
   gab. Gemessen, nicht vermutet.
   Jetzt: Betrag 30px Displayschrift, Rate 13px grau direkt darunter, Knopf rechts daneben.
   Die Höhe passt, weil der zweizeilige Preisstapel (rund 52px) höher ist als der Knopf
   (44px) und damit die Zeilenhöhe ohnehin bestimmt. */
.kv__preis{margin-top:auto;padding-top:16px;border-top:1px solid var(--background-borders);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px}
.kv__preis-zahl{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.kv__betrag{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h3);line-height:1.05;color:var(--typography-black);white-space:nowrap}
.kv__rate{font-family:var(--font4);font-size:var(--schrift-14);line-height:1.45;color:var(--typography-dark-grey);margin-top:5px}
.kv__preis .button{flex:0 0 auto}
@media (max-width:560px){
  .kv__preis{align-items:flex-start;flex-direction:column;gap:14px}
  .kv__preis .button{align-self:stretch;justify-content:center}
}
/* FÖRDER-CHIP wieder nach oben und in Grün (Denis, 14.08.), wie auf der
   Weiterbildungsübersicht. Vorher stand er unten neben dem CTA — die Begründung damals war,
   dass die Förderung den Preis-Einwand beantwortet und der unten entsteht. Das stimmt für
   jemanden, der die Kachel liest. Es stimmt nicht für jemanden, der acht Kacheln überfliegt
   und wissen will, welche für ihn in Frage kommt: dafür muss das Merkmal oben stehen, wo die
   anderen Merkmale stehen.
   --green-700 mit weißer Schrift, 5,9:1. Kräftiger als die blassen Kategorie-Badges, weil er
   kein Kategorie-, sondern ein Vorteilsmerkmal ist. Beide Grüns treffen nie in derselben
   Kachel aufeinander. */
/* Hellgruen aus der Palette statt --green-700 (Denis, 14.08.). --green-200 mit schwarzer
   Schrift ergibt 13,9:1 und liegt damit weit ueber der Grenze, und der Chip ordnet sich in die
   Badge-Reihe ein, statt als einziges Element der Kachel zu schreien. */
.kv__foerder{font-family:var(--font4);font-weight:600;font-size:12px;letter-spacing:.02em;line-height:1.3;color:var(--typography-black);background:var(--green-200);border-radius:999px;padding:6px 13px}
/* ---------- 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}




.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. */


/* ------------------------------------------------------------------------- *
 * FILTER, generische Facetten
 *
 * Der Entwurf hat seine Achsen in den Selektoren verdrahtet (#kv-f1-ambulant,
 * #kv-f2-bayern). Auf fuenf Hubs mit fuenf verschiedenen Achsenpaaren waere das
 * fuenffach gepflegtes CSS. Hier heissen die Werte neutral a, b und c, die Bedeutung
 * steht im Label. Genau das war die Anforderung an diesen Block: Achsen als Feld,
 * nicht fest verdrahtet.
 *
 * Eine Achse traegt zwei ODER drei Optionen. Gemessen am 17.08.: bei Hygiene und
 * Palliative Care laeuft eine ZWEITE Achse zwangslaeufig in eine leere Kombination,
 * weil es je Thema genau einen Fernlehrgang gibt. Eine dritte OPTION auf derselben
 * Achse trennt dagegen sauber und kann nie leer werden.
 *
 * Leere Facette heisst weiterhin „passt zu jeder Auswahl".
 * ------------------------------------------------------------------------- */
.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}
.kv:not(.kv--f2-c-frei) .kv__finder:has(#kv-f2-c:checked) .kv__karte:not([data-f2="c"]):not([data-f2=""]){display:none}

/* Die Antwort der Sektion. [data-k="start"] bleibt ohne Regel sichtbar: kann ein
   Browser kein :has(), steht der Einstiegssatz und alle Kacheln bleiben stehen. */
.kv__finder:has(input:checked) .kv__antwort > [data-k="start"]{display:none}
.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"],
.kv__finder:has(#kv-f1-c:checked):has(#kv-f2-a:checked) .kv__antwort > [data-k="ca"],
.kv__finder:has(#kv-f1-c:checked):has(#kv-f2-b:checked) .kv__antwort > [data-k="cb"]{display:block}