/* =====================================================================
   headof.jobs · Sichtbarkeitsseite (Landing) — Seiten-CSS, Kurs E-051
   ---------------------------------------------------------------------
   Uebertragen aus der Massdatei entwurf-seite.html (Style-Block) beim
   Live-Einbau SEB-86; dazu die zwei juengeren Stuecke aus
   entwurf-seite-ansehen.html: Wirbel-Canvas der Buehne und die
   4:5-Flugkacheln mit Bild im Finale. Grundwerte kommen aus
   assets/hohj-grund.css; diese Datei wird NUR auf der
   Sichtbarkeitsseite eingereiht (hohj-core.php), hohj.css laedt dort
   nicht — dieselbe Stylesheet-Lage wie im gemessenen Entwurf.
   ===================================================================== */

/* Grundwerte, Grundlagen, Knöpfe, Kopf und Fuß stehen NICHT mehr hier,
   sondern EINMAL in assets/hohj-rahmen.css — dieselbe Datei benutzen
   Kasse und Käufer-Dashboard, damit die Kopfzeile überall die der
   Startseite ist (Ansage Sebastian 20.08.). Hier bleibt, was nur diese
   Seite hat: die Folien. */

/* --- Folien: ein Viewport, Haarlinien-Trenner, linksbündige Köpfe --- */
.folie{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding-block:var(--hohj-abst-6)}
.folie>*{min-width:0}
.folie>.bahn{width:100%}
.folie + .folie,.finale,.fuss{border-top:1px solid var(--lin-linie)}
/* Micros nach linear.app: gestaffeltes Einblenden je Folie (einmalig,
   additiv — ohne Skript oder bei reduzierter Bewegung ist alles
   normal sichtbar) */
@keyframes einblenden{from{opacity:0;transform:translateY(12px)}}
/* Bis zur Schwelle unsichtbar — aber nur, wenn die Micros laufen
   (html.micros); ohne Skript bleibt alles normal sichtbar. */
.micros .folie:not(.drin)>*:not(.video-platz):not(.bahn),
.micros .folie:not(.drin)>.bahn>*{opacity:0}
.folie.drin>*:not(.video-platz):not(.bahn),.folie.drin>.bahn>*{
  animation:einblenden var(--hohj-zeit-weg) var(--hohj-kurve) both}
.folie.drin>.bahn>:nth-child(2),.folie.drin>*:nth-child(2){animation-delay:.06s}
.folie.drin>.bahn>:nth-child(3),.folie.drin>*:nth-child(3){animation-delay:.12s}
.folie.drin>.bahn>:nth-child(4),.folie.drin>*:nth-child(4){animation-delay:.18s}
.folie.drin>.bahn>:nth-child(5),.folie.drin>*:nth-child(5){animation-delay:.24s}
.folie.drin>.bahn>:nth-child(n+6),.folie.drin>*:nth-child(n+6){animation-delay:.3s}
/* Kopfzeile linksbündig wie linear.app (gemessen: start); rechts darf
   Werkzeug sitzen (Chips) — ganze Breite genutzt */
.kopfzeile{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.kopfzeile h2{font-size:var(--lin-h2);margin-top:8px}
.kopfzeile .unter{color:var(--hohj-gedimmt);font-size:16px;line-height:1.5;margin-top:12px;max-width:52ch}

/* --- Folie 1 · Bühne: mittig, Video dahinter (Ansage 17.08. nachts).
   Bis das echte Video liegt, trägt der Wirbel-Canvas die Fläche. */
.buehne{position:relative;padding-top:calc(var(--hohj-navh) + 16px);overflow:clip;text-align:center}
.video-platz{position:absolute;inset:0;background-color:var(--hohj-platz);
  background-image:radial-gradient(circle at 1px 1px,rgba(10,15,26,.13) 1.6px,transparent 1.7px);
  background-size:16px 16px}
[data-modus="dunkel"] .video-platz{
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1.6px,transparent 1.7px)}
/* Wirbel (SEB-29, Richtungswahl A 19.08.): Canvas fuellt die Buehne, die
   Blende haelt die Mitte fuer die H1 frei und laesst unten den Grund durch. */
.video-platz .wirbel{position:absolute;inset:0;width:100%;height:100%}
/* Blende: Mitte fuer die H1 gedimmt (78 % ueber color-mix), zur
   Unterkante hin VOLL deckend — die fruehere Element-Opacity .78 liess
   die Wand an der Kante durchscheinen. */
.wirbel-blende{position:absolute;inset:0;
  background:radial-gradient(ellipse 52% 42% at 50% 44%,color-mix(in srgb,var(--hohj-grund) 78%,transparent) 0 15%,transparent 64%),
             linear-gradient(180deg,transparent 74%,var(--hohj-grund) 98%)}
.buehne .bahn{position:relative;z-index:2}
.buehne h1{font-size:var(--lin-h1);max-width:18ch;margin:16px auto 0}
.buehne .unter{font-size:18px;line-height:1.5;color:var(--hohj-gedimmt);max-width:44ch;margin:16px auto 0}
.knoepfe{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.muster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--hohj-gedimmt);letter-spacing:.5px}
.partner{margin-top:var(--hohj-abst-8);display:flex;align-items:center;gap:24px}
.partner .zeile-oben{flex:none;color:var(--hohj-gedimmt);font-size:14px;font-weight:500}
.logo-platz{flex:none;width:140px;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:600;color:var(--hohj-gedimmt)}
.band{--hohj-band-gap:var(--hohj-abst-6);overflow:hidden;display:flex;gap:var(--hohj-band-gap);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.band>ul{display:flex;flex:none;gap:var(--hohj-band-gap);align-items:center;list-style:none;
  animation:lauf 25s linear infinite}
.band--langsam>ul{animation-duration:80s}
@keyframes lauf{to{transform:translateX(calc(-100% - var(--hohj-band-gap)))}}

/* --- Folie 2 · Produkte: EIN Panel, drei luftige Zonen mit Linien --- */
.wahl{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* Chipzeile: eigene volle Zeile unter der Überschrift — Chips links wie
   gehabt, der Köder gegenüber an der rechten Kante (Korrektur 18.08.:
   flex:1 auf .wahl hatte die Chips neben die Überschrift gezogen). */
.chipzeile{flex-basis:100%;display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px}
/* Köder Jahrespaket: nur Hinweis, kein Knopf — gedimmt, Punkt als Marke.
   Auto-Rand hält ihn rechts, auch wenn er in eine eigene Zeile bricht. */
.wahl-koeder{display:inline-flex;align-items:center;gap:8px;height:44px;margin-inline-start:auto;
  font-size:14px;color:var(--hohj-gedimmt);white-space:nowrap}
.wahl-koeder .punkt{width:10px;height:10px}
.wahl button{height:44px;padding-inline:14px;border-radius:var(--lin-r-knopf);border:1px solid var(--lin-linie-stark);
  background:transparent;color:var(--hohj-gedimmt);font:inherit;font-size:14px;font-weight:500;cursor:pointer;
  transition:background var(--hohj-zeit) var(--hohj-kurve),color var(--hohj-zeit) var(--hohj-kurve),border-color var(--hohj-zeit) var(--hohj-kurve)}
.wahl button:hover{border-color:var(--hohj-tinte);color:var(--hohj-tinte)}
.wahl button[aria-current="true"]{background:var(--hohj-tinte);color:var(--hohj-grund);border-color:var(--hohj-tinte)}
.wechselnd{transition:opacity var(--hohj-zeit-weg) var(--hohj-kurve),transform var(--hohj-zeit-weg) var(--hohj-kurve)}
.wechselnd.wechselt{opacity:0;transform:translateY(12px);pointer-events:none}
.vh-panel{margin-top:var(--hohj-abst-6);border:1px solid var(--lin-linie-stark);border-radius:var(--lin-r-panel);
  background:var(--hohj-grund);box-shadow:var(--lin-schatten);
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(300px,400px)}
/* Ansage 18.08.: Panel niedriger, die gewonnene Höhe als Luft oben —
   Zonen block 24 statt 32, Liste dichter, Bild 384 statt 400. */
.zone{padding:24px 32px;min-width:0}
.zone + .zone{border-left:1px solid var(--lin-linie)}
.zone--bild{display:flex;align-items:center}
.vh-vorschau{width:var(--vor-breit,384px);border-radius:var(--lin-r-karte);overflow:hidden;
  background:var(--hohj-grund);border:1px solid var(--lin-linie-stark);
  display:flex;flex-direction:column}
/* .vh-vk — Kopfzeile der Vorschau, am 18.08. entfernt (zu eng in der Höhe). */
.vh-vorschau .vor{border-radius:0;box-shadow:none}

.vor{background:var(--hohj-grund);border-radius:var(--lin-r-karte);overflow:hidden;display:flex;flex-direction:column}
.vor-lauf{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--hohj-hell)}
.vor-folie{position:absolute;inset:0;background-color:var(--hohj-platz);
  background-image:radial-gradient(circle at 1px 1px,rgba(10,15,26,.13) 1.6px,transparent 1.7px);
  background-size:16px 16px;
  display:flex;align-items:center;justify-content:center;
  transition:opacity var(--hohj-zeit) var(--hohj-kurve),background-color var(--hohj-zeit) var(--hohj-kurve)}
[data-modus="dunkel"] .vor-folie{
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1.6px,transparent 1.7px)}
.vor-folie.wechselt{opacity:0}
.vor-folie .muster{position:static}
.vor-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:9999px;
  border:1px solid var(--lin-linie-stark);background:var(--hohj-grund);color:var(--hohj-tinte);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--hohj-zeit) var(--hohj-kurve),background var(--hohj-zeit) var(--hohj-kurve)}
.vor-pfeil:hover{background:var(--lin-hover);border-color:var(--hohj-tinte)}
.vor-pfeil--l{left:10px}
.vor-pfeil--r{right:10px}
.vor-pfeil svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--hohj-zeit) var(--hohj-kurve)}
.vor-pfeil--l:hover svg{transform:translateX(-1px)}
.vor-pfeil--r:hover svg{transform:translateX(1px)}
.vor-punkte{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:6px}
/* .45 statt .25: inaktive Punkte lagen im Dunkel bei 2,19:1, unter den
   3:1 für Anzeigen (Gegenprüfung 17.08. nachts, nachgerechnet) */
.vor-punkte i{width:6px;height:6px;border-radius:9999px;background:var(--hohj-tinte);opacity:.45;
  transition:opacity var(--hohj-zeit) var(--hohj-kurve)}
.vor-punkte i.an{opacity:1}

/* Produktinhalt luftig, ohne Karton — die Zone trägt die Linie */
.karte{background:none;border:0;border-radius:0;box-shadow:none;padding:0;display:flex;flex-direction:column}
.k-kopf{padding:0}
.k-titelzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.k-abzeichen{display:inline-flex;align-items:center;height:24px;padding-inline:10px;
  border:1px solid var(--lin-linie-stark);border-radius:var(--lin-r-knopf);background:var(--hohj-grund);
  font-size:12px;line-height:16px;font-weight:500}
.k-name{font-size:14px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.k-kopf .satz{font-size:16px;line-height:1.5;color:var(--hohj-gedimmt);margin-top:12px;max-width:40ch}
.k-preis{margin-top:12px}
.k-preis b{font-size:40px;font-weight:700;line-height:1;letter-spacing:var(--lin-sperrung)}
.k-preis span{display:block;font-size:14px;line-height:20px;color:var(--hohj-gedimmt);margin-top:6px}
.karte .knopfzeile{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.karte .pille{padding-inline:24px}
.karte ul{list-style:none;padding:16px 0 0;display:flex;flex-direction:column;gap:10px}
.karte li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--hohj-gedimmt)}
.karte li::before{content:"";flex:none;width:10px;height:6px;margin-top:8px;
  border-left:1.5px solid var(--hohj-tinte);border-bottom:1.5px solid var(--hohj-tinte);
  transform:rotate(-45deg)}
.dazu{border-top:1px solid var(--lin-linie);margin-top:16px}
.dazu-kopf{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 0;background:none;border:0;font:inherit;font-size:14px;font-weight:500;
  color:inherit;text-align:left;cursor:pointer}
.dazu .zeichen{flex:none;width:24px;height:24px;padding:5px;border-radius:9999px;
  border:1px solid var(--lin-linie-stark);background:none;color:var(--hohj-tinte);
  transition:transform var(--hohj-zeit-weg) var(--hohj-kurve)}
.dazu[data-offen="ja"] .zeichen{transform:rotate(45deg)}
.dazu .inhalt{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--hohj-zeit-weg) var(--hohj-kurve)}
.dazu[data-offen="ja"] .inhalt{grid-template-rows:1fr}
.dazu .inhalt>div{overflow:hidden}
.dazu .inhalt ul{list-style:none;padding:0 0 12px;display:flex;flex-direction:column;gap:6px}
.dazu .inhalt li{font-size:14px;line-height:20px;color:var(--hohj-gedimmt)}
.dazu .inhalt li::before{content:none}

/* Bestellen und der Steuer-Hinweis sitzen am Fuß der Spalte (Ansage
   18.08.) — der Auto-Rand am Knopf schiebt sie nach unten. */
.vh-spalte{display:flex;flex-direction:column}
.vh-spalte h3{font-size:20px;line-height:28px}
.vh-absatz{font-size:12px;line-height:16px;color:var(--hohj-gedimmt);margin-top:8px}
.vh-hinzu{width:100%;margin-top:16px}
.vh-korb-titel{margin-top:var(--hohj-abst-6)}
.vh-korb{border-top:1px solid var(--lin-linie);margin-top:10px}
.vh-korb-zeile{display:flex;justify-content:space-between;align-items:center;gap:8px;
  border-bottom:1px solid var(--lin-linie);font-size:14px;color:var(--hohj-gedimmt);
  animation:einblenden var(--hohj-zeit) var(--hohj-kurve) both}
.vh-korb-zeile .weg{flex:none;width:44px;height:44px;border:0;border-radius:var(--lin-r-knopf);background:none;
  color:var(--hohj-gedimmt);cursor:pointer;font:inherit;font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--hohj-zeit) var(--hohj-kurve),color var(--hohj-zeit) var(--hohj-kurve)}
.vh-korb-zeile .weg:hover{background:var(--lin-hover);color:var(--hohj-tinte)}
.vh-leer{font-size:14px;color:var(--hohj-gedimmt);padding-block:14px;border-bottom:1px solid var(--lin-linie)}
.vh-summe{display:flex;justify-content:space-between;gap:12px;font-size:16px;font-weight:600;
  color:var(--hohj-tinte);margin-top:14px}
.vh-rabatt{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--hohj-gedimmt);margin-top:4px}
.vh-summe[hidden],.vh-rabatt[hidden]{display:none}
.vh-bestellen{width:100%;margin-top:auto}
#vh-paket-hinweis{margin-bottom:20px}
.schrittzeile{display:flex;gap:var(--hohj-abst-4) var(--hohj-abst-6);align-items:center;flex-wrap:wrap;
  font-size:14px;line-height:20px;color:var(--hohj-gedimmt)}
.schrittzeile b{display:inline-flex;align-items:center;gap:8px;color:var(--hohj-tinte);font-weight:500;font-size:14px}
.schrittzeile .nr{flex:none;width:26px;height:26px;border-radius:9999px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--hohj-tinte);border:1px solid var(--lin-linie-stark)}
/* „Shooting beauftragen" mit Strich drunter, springt zum Produkt
   Vor Ort (Ansage 17.08. nachts) */
.schrittzeile a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  transition:color var(--hohj-zeit) var(--hohj-kurve)}
.schrittzeile a:hover{color:var(--hohj-gedimmt)}
.vh-schritte{margin-top:12px}
/* Der Hinweis steht rechtsbündig an der Kante der Bahn, in einer
   Flucht mit dem Panel darüber (Ansage 18.08.). */
.schrittzeile>span:last-child{margin-inline-start:auto;text-align:right}

/* --- Folie 3 · Kanal: randlos über die ganze Fensterbreite ---------- */
.kanal-lauf{margin-top:var(--hohj-abst-6);border-block:1px solid var(--lin-linie);
  padding-block:var(--hohj-abst-6);overflow:hidden}
.kanal .band{max-width:none;mask-image:none}
.feedkachel{flex:none;width:340px}
/* 4:5, nicht 3:4 — Beitragsbilder sind hochkant 4:5 (CLAUDE.md);
   die Kachel stand seit jeher auf 3:4 und log damit ihre eigene
   Beschriftung an (gemessen 19.08.: 340x453 statt 340x425). */
.feedkachel .kachel{aspect-ratio:4/5;border-radius:var(--lin-r-karte);overflow:hidden;position:relative}
.feedkachel .flaeche img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.feedkachel .flaeche{position:absolute;inset:0;background-color:var(--hohj-platz);
  background-image:radial-gradient(circle at 1px 1px,rgba(10,15,26,.13) 1.6px,transparent 1.7px);
  background-size:16px 16px}
[data-modus="dunkel"] .feedkachel .flaeche{
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1.6px,transparent 1.7px)}
.feedkachel figcaption{font-size:14px;color:var(--hohj-gedimmt);margin-top:10px}
.feedkachel .kachel-link{display:block;color:inherit;text-decoration:none}
/* Fokus muss sichtbar sein (Tastaturbedienung), aber das laufende
   Band darf durch den Fokus nicht verschoben werden — darum holt
   seite-panel.js scrollLeft zurueck (Pruefung 20.08.). */
.feedkachel .kachel-link:focus-visible{outline:2px solid var(--hohj-tinte);outline-offset:4px;border-radius:var(--lin-r-karte)}

/* --- Folie 4 · Fragen: Linienliste ---------------------------------- */
.fragen .paar{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,760px);gap:64px;align-items:start;
  justify-content:space-between}
.fragen .unter{color:var(--hohj-gedimmt);font-size:16px;line-height:1.5;margin-top:12px;max-width:36ch}
.klappen{display:flex;flex-direction:column}
.klapp{border-top:1px solid var(--lin-linie);border-radius:0;background:none}
.klapp:last-child{border-bottom:1px solid var(--lin-linie)}
.klapp>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 4px;background:none;border:0;font:inherit;font-size:16px;font-weight:500;color:inherit;
  text-align:left;cursor:pointer}
.klapp .zeichen{flex:none;width:28px;height:28px;padding:6px;border-radius:9999px;
  border:1px solid var(--lin-linie-stark);background:none;color:var(--hohj-tinte);
  transition:transform var(--hohj-zeit-weg) var(--hohj-kurve)}
.klapp[data-offen="ja"] .zeichen{transform:rotate(45deg)}
.klapp .inhalt{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--hohj-zeit-weg) var(--hohj-kurve)}
.klapp[data-offen="ja"] .inhalt{grid-template-rows:1fr}
.klapp .inhalt>div{overflow:hidden}
.klapp .inhalt p{padding:0 4px 20px;font-size:16px;line-height:1.5;color:var(--hohj-gedimmt);max-width:60ch}

/* --- Finale (Scroll-Kino) ------------------------------------------- */
.finale{height:200vh;position:relative}
.finale .buehne2{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.linien{position:absolute;inset:0;width:100%;height:100%;opacity:.3;pointer-events:none}
.mitte{position:relative;z-index:2;text-align:center;opacity:var(--cta,1)}
.mitte h2{font-size:var(--lin-h2);margin-top:16px;max-width:16ch}
.mitte .pille{margin-top:24px}
/* 4:5 mit Bild — Stand entwurf-seite-ansehen.html (die Kacheln tragen
   die Galerie-Bilder folie1-kacheln-kachel-1..6). */
.flug{position:absolute;left:50%;top:50%;width:280px;aspect-ratio:4/5;border-radius:var(--lin-r-karte);
  overflow:hidden;background:var(--hohj-hell);z-index:3;
  transform:translate(calc(-50% + var(--fx,0) * var(--einx,0px) * var(--p,0)),
                      calc(-50% + var(--fy,0) * var(--einy,0px) * var(--p,0)))
            scale(calc(1 + (var(--sz,1) - 1) * var(--p,0)));
  transition:transform 120ms linear}
.flug .flaeche{position:absolute;inset:0;background-color:var(--hohj-platz);
  background-image:radial-gradient(circle at 1px 1px,rgba(10,15,26,.13) 1.6px,transparent 1.7px);
  background-size:16px 16px}
[data-modus="dunkel"] .flug .flaeche{
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1.6px,transparent 1.7px)}
.flug .flaeche img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.flug .muster{font-size:14px}
.buehne2 .flug:nth-child(4) .flaeche{background-color:var(--hohj-platz-b)}
.buehne2 .flug:nth-child(5) .flaeche{background-color:var(--hohj-platz-c)}
.buehne2 .flug:nth-child(6) .flaeche{background-color:var(--hohj-platz-d)}
.buehne2 .flug:nth-child(7) .flaeche{background-color:var(--hohj-platz-b)}
.buehne2 .flug:nth-child(8) .flaeche{background-color:var(--hohj-platz-c)}

/* --- Folie 5 · Die Tür: Linienspalten über volle Breite ------------- */
.tueren{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:var(--hohj-abst-7);
  border-top:1px solid var(--lin-linie)}
.tuerkarte{background:none;border:0;border-left:1px solid var(--lin-linie);padding:32px;
  display:flex;flex-direction:column;gap:12px;
  transition:background var(--hohj-zeit) var(--hohj-kurve),transform var(--hohj-zeit) var(--hohj-kurve)}
.tuerkarte:first-child{border-left:0;padding-left:0}
.tuerkarte:hover{background:var(--lin-hover);transform:translateY(-2px)}
.tuerkarte .punkt{width:10px;height:10px}
.tuerkarte h3{font-size:20px}
.tuerkarte p{font-size:16px;line-height:1.5;color:var(--hohj-gedimmt);max-width:36ch}

/* --- Umbrüche -------------------------------------------------------- */
@media (max-width:1200px){
  .vh-panel{grid-template-columns:auto minmax(0,1fr)}
  .zone--korb{grid-column:1 / -1;border-left:0;border-top:1px solid var(--lin-linie)}
  .fragen .paar{grid-template-columns:1fr;gap:40px}
  .folie{min-height:0}
}
@media (max-width:960px){
  .vh-panel{grid-template-columns:1fr}
  .zone + .zone{border-left:0;border-top:1px solid var(--lin-linie)}
  .zone--bild{justify-content:center}
  .vh-vorschau{width:min(437px,100%)}
  .tueren{grid-template-columns:1fr}
  .tuerkarte{border-left:0;border-top:1px solid var(--lin-linie);padding:24px 8px}
  .tuerkarte:first-child{border-top:0}
  .feedreihe{grid-template-columns:repeat(3,1fr)}
  .feedzelle:nth-child(4){display:none}
  .partner{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:640px){
  .ig-wort{display:none}
  .werkzeuge{gap:6px}
  .feedreihe{grid-template-columns:repeat(2,1fr)}
  .feedzelle:nth-child(3){display:none}
  .zone{padding:24px}
}
@media (max-width:480px){
  .schrittzeile{flex-direction:column;align-items:flex-start;gap:12px}
  .schrittzeile>span:last-child{margin-inline-start:0;text-align:left}
  .flug{width:140px}
}
/* Flache Fenster: Bild und Panel geben Höhe ab (gemessen 17.08.) */
@media (min-width:961px) and (max-height:860px){
  .vh-vorschau{--vor-breit:310px}
  .zone{padding:24px}
  .kopfzeile h2{font-size:26px}
  .karte ul{gap:6px;padding-top:14px}
  .karte li{font-size:14px;line-height:20px}
  .k-kopf .satz{margin-top:8px;font-size:14px}
  .k-preis{margin-top:10px}
  .karte .pille{margin-top:16px}
  .dazu{margin-top:14px}
  .vh-korb-titel{margin-top:var(--hohj-abst-5)}
  .feedpanel{height:clamp(240px,calc(100vh - 520px),400px)}
}
@media (min-width:961px) and (max-height:770px){
  .vh-vorschau{--vor-breit:290px}
  .zone{padding:20px}
  .kopfzeile h2{font-size:26px}
  .k-preis b{font-size:26px}
  .karte li{font-size:14px;line-height:20px}
  .vh-schritte>span{display:none}
  .kanal-lauf{padding-block:var(--hohj-abst-5)}
  .feedkachel{width:240px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:0ms!important;animation:none!important}
  html{scroll-behavior:auto}
  .flug{--p:1!important}
  .buehne2{--cta:1!important}
}

/* Fokusring des Aufklapp-Knopfs am Zeichen statt um den ganzen Block
   (Befund Sebastian 26.08. im Dashboard; dieselbe Bauart hier). */
.dazu-kopf:focus,.dazu-kopf:focus-visible{outline:none}
.dazu-kopf:focus-visible .zeichen{outline:1px solid var(--hohj-gedimmt);outline-offset:2px}

/* Korbzeilen wie im Dashboard (26.08.): Preise auf einer Kante. */
.vh-korb-zeile{justify-content:flex-start}
.vh-korb-zeile span+span{margin-left:auto;font-variant-numeric:tabular-nums}
.vh-korb-zeile .weg{flex:none;margin-right:-8px}