/* Themenfilter — Chips, die eine Reihe umsortieren.
   v1.0 · 2026-09-10 · Herkunft: Startup Hilfe Dubai V4 (entwurf/assets/css/seite.css)
   Farben aus den Marken-Variablen der aufnehmenden Seite, sonst Ausweichwerte. */
:root{ --tf-akzent:var(--blau,#0631EF); --tf-haken:var(--mint,#10FFC4);
  --tf-linie:var(--linie,#E2DED7); --tf-flaeche:var(--papier,#fff);
  --tf-tief:var(--tief,#0A1220); --tf-text:var(--text,#16202E);
  --tf-leise:var(--text-leise,#5A6675); --tf-akte:var(--schrift-akte,ui-monospace,monospace) }

/* --- Die Themenwahl -------------------------------------------------------
   Bewegung "Filter-Chips" (bewegungen.md §17): ruhend = Flaeche + Rahmen,
   aktiv = Akzentfuellung + Haekchen. Der Satz, an dem es sonst scheitert:
   "If active looks like idle, the filter feels broken."
   Die Zeile bricht NIEMALS auf zwei Zeilen um (§17 Reiterwechsel) — bei zu
   wenig Platz laeuft sie waagerecht, mit ausgeblendeten Kanten. */
.kanal-wahl{ margin-bottom:20px }
.kanal-schalter{ position:relative; display:flex; gap:8px; overflow-x:auto; overflow-y:hidden;
  padding-bottom:10px; scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%) }
.kanal-schalter::-webkit-scrollbar{ display:none }
.kanal-schalter__knopf{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  min-height:var(--treffer-min); padding:0 15px; border:1px solid var(--tf-linie); border-radius:var(--radius-pille);
  background:var(--tf-flaeche); color:var(--tf-leise); font:inherit; font-size:14px; cursor:pointer;
  transition:background var(--dauer-ui) var(--ease-out), color var(--dauer-ui) var(--ease-out),
             border-color var(--dauer-ui) var(--ease-out) }
/* Der Haken hatte seine BREITE animiert — damit wuchs der Schalter beim Waehlen
   und die ganze Zeile rueckte nach. Jetzt steht sein Platz fest, und nur er selbst
   erscheint. Zwei Fliegen: keine animierte Layout-Eigenschaft, und die Themenzeile
   springt beim Wechsel nicht mehr. */
.kanal-schalter__knopf .haken{ width:1em; overflow:hidden; opacity:0; font-size:12px;
  transform:scale(.5);
  transition:opacity var(--dauer-ui) var(--ease-out), transform var(--dauer-ui) var(--ease-out) }
.kanal-schalter__knopf .zahl{ font-family:var(--tf-akte); font-size:11.5px; opacity:.62;
  padding-left:7px; border-left:1px solid currentColor; line-height:1 }
@media (hover:hover){ .kanal-schalter__knopf:hover{ border-color:var(--tf-leise); color:var(--tf-text) } }
.kanal-schalter__knopf:active{ transform:translateY(1px) }
.kanal-schalter__knopf[aria-pressed="true"]{ background:var(--tf-tief); border-color:var(--tf-tief); color:#fff }
.kanal-schalter__knopf[aria-pressed="true"] .haken{ opacity:1; transform:none; color:var(--tf-haken) }
.kanal-schalter__knopf[aria-pressed="true"] .zahl{ opacity:.8 }
.kanal-schalter__knopf:focus-visible{ outline:2px solid var(--tf-akzent); outline-offset:2px }

/* Der Unterstrich GLEITET zum neuen Schalter, er springt nicht (§17). */
/* Der Strich ist 1 px breit und wird auf Laenge GEZOGEN, statt seine Breite zu
   aendern: `width` ist eine Layout-Eigenschaft, `transform` nicht — der Browser
   zeichnet die Fahrt, ohne die Zeile neu zu rechnen (Handwerks-Abnahme,
   bewegungen.md Abschnitt 33). Dieselbe Bewegung, gleiche Dauer, gleiche Kurve. */
.kanal-strich{ position:absolute; left:0; bottom:2px; height:2px; border-radius:2px; background:var(--tf-akzent);
  width:1px; transform-origin:left center;
  transform:translateX(var(--links,0)) scaleX(var(--breite-zahl,0));
  transition:transform 280ms cubic-bezier(.22,1.1,.36,1) }
/* Bis das Skript laeuft, ist hier nichts — und ohne Skript bleibt es dabei. */
.kanal-wahl:not(.kanal-wahl--bereit){ display:none }

/* Pfeile auf dem Desktop (bewegungen.md §17). Sie erscheinen nur, wenn die
   Zeile ueberlaeuft, und nur dort, wo eine Maus zeigt — am Handy wischt man. */
.kanal-wahl{ position:relative }
.kanal-pfeil{ display:none }
@media (hover:hover) and (pointer:fine){
  .kanal-wahl--laeuft .kanal-pfeil{ position:absolute; top:0; display:grid; place-items:center;
    width:34px; height:var(--treffer-min); border:1px solid var(--tf-linie); border-radius:var(--radius-pille);
    background:var(--tf-flaeche); color:var(--tf-text); font-size:20px; line-height:1; cursor:pointer;
    box-shadow:0 2px 10px rgba(10,18,32,.10); transition:opacity var(--dauer-ui) var(--ease-out) }
  /* Platz fuer die Pfeile, damit kein Schalter unter einem liegt: ein Knopf,
     der zur Haelfte verdeckt ist, wird zur Haelfte getroffen. */
  /* `scroll-padding` haelt den gewaehlten Schalter aus der Pfeilzone heraus:
     ohne das stoppt `scrollIntoView` sobald der Knopf sichtbar ist — und
     sichtbar heisst dort UNTER dem Pfeil (gemessen 10.09. bei `bestand`,
     die Trefferzahl des aktiven Schalters lag hinter dem Pfeil). */
  .kanal-wahl--laeuft .kanal-schalter{ padding-inline:40px; scroll-padding-inline:46px }
  .kanal-wahl--laeuft .kanal-pfeil--links { left:-6px }
  .kanal-wahl--laeuft .kanal-pfeil--rechts{ right:-6px }
  .kanal-wahl--laeuft .kanal-pfeil:hover{ border-color:var(--tf-leise) }
  .kanal-wahl--laeuft .kanal-pfeil:disabled{ opacity:0; pointer-events:none }
  .kanal-pfeil:focus-visible{ outline:2px solid var(--tf-akzent); outline-offset:2px }
}


/* --- Die benannte Luecke --------------------------------------------------
   Wo der Kanal zu einem Thema wenig oder nichts hergibt, steht das da — statt
   die Reihe mit Videos aufzufuellen, die etwas anderes behandeln (Bauplan
   "Die Falle"; dasselbe Verhalten wie im Fallcheck-Ausgang, Befund N34).
   Und sie ist keine Sackgasse: sie fuehrt in den Fallcheck (CLAUDE.md #9). */
/* Hoechstens ZWEI Spalten breit und in der Reihe zentriert, auch wenn vier frei
   waeren: Gemessen am 10.09.2026 stand bei `bestand` (kein Video) ein gestrichelter
   Kasten von 1.324 x 440 px mit vier Zeilen Text darin — eine leere Flaeche, die
   nach einem Fehler aussieht statt nach einer ehrlichen Auskunft. Der Rest der
   Reihe bleibt einfach leer; die Hoehe haelt die gemessene Untergrenze. */
.kanal-luecke{ grid-column:span var(--spalten,1); align-self:center;
  display:flex; flex-direction:column; gap:9px; padding:22px 24px;
  border:1px dashed var(--tf-linie); border-radius:10px; background:var(--tf-flaeche) }
/* Steht sie ALLEIN in der Reihe (Thema ohne ein einziges Video), fuellt sie die
   gemessene Hoehe aus und stellt ihren Text in die Mitte — sonst schwebt ein
   kleines Feld in einer grossen Leere und der Abschnitt sieht unfertig aus. */
.kanal-luecke--allein{ align-self:stretch; justify-content:center }
.kanal-luecke b{ font-size:14px; color:var(--tf-text); font-weight:600 }
.kanal-luecke p{ font-size:13.5px; line-height:1.5; color:var(--tf-leise); max-width:52ch }
.kanal-luecke a{ display:inline-flex; align-items:center; gap:.5em; align-self:flex-start;
  min-height:var(--treffer-min); color:var(--tf-akzent); font-size:14px; font-weight:600; text-decoration:none }
.kanal-luecke a .pfeil{ font-family:var(--tf-akte) }
@media (hover:hover){ .kanal-luecke a:hover{ text-decoration:underline } }

/* v1.1 · Reduzierte Bewegung: der Unterstrich springt statt zu gleiten, Farben wechseln kurz. */
@media (prefers-reduced-motion: reduce){
  .kanal-strich{ transition:none }
  .kanal-schalter__knopf, .kanal-pfeil{ transition-duration:80ms }
  .kanal-reihe--hinaus, .kanal-reihe--herein{ animation:none; transition:none }
}