/* TrueWagyu Startseite: Hero, USP-Leiste, Sektionen, Trenner, Produkt-Slider,
 * IMF/Lupe, FAQ, Reviews.
 *
 * Quelle: design/handoff/Startseite V3.dc.html (<style>-Block). Werte 1:1
 * uebernommen; wo die Referenz ein Literal nutzt, das exakt einem Token
 * entspricht, steht hier das Token. Einzelwerte ohne Token (Sternenfarben,
 * Linsen-Tint, einzelne Rahmentoene) bleiben Literale - die Referenz hat sie
 * genauso, und geraten wird nichts.
 *
 * Gemeinsame Bausteine (Buttons, Sektionsgeruest, Reveal, Produktkarte)
 * stehen seit dem Kategorie-Paket in css/komponenten.css.
 */

/* ================= Rahmen der Seite =================
 * NOVA polstert #content-wrapper oben mit 64px und #content unten mit 48px.
 * Der Hero sitzt randlos direkt unter der Leiste, der Footer bringt seinen
 * Abstand selbst mit (.foot{margin-top:96px}). data-page="18" ist
 * PAGE_STARTSEITE aus includes/defines_inc.php - die Regeln gelten nur dort.
 */
body[data-page="18"] #content-wrapper{padding-top:0}
body[data-page="18"] #content{padding-bottom:0}

/* ================= Hero =================
 * padding:0 ist Notwehr, nicht Design: NOVA polstert in clear.css jedes
 * <section> in <main> (`main section{padding:2rem 0}`, ab 992px 4rem). Unsere
 * .sec-Regeln gewinnen ueber die Spezifitaet, .hero und .vstrip haben aber
 * keine eigene Polsterung — dort erschienen 64px Himmelblau ueber und unter
 * dem Bild. Jede kuenftige Sektion ohne eigenes padding faellt in dieselbe
 * Falle.
 */
.hero{background:var(--sky-300);position:relative;padding:0}
[data-theme="dark"] .hero{background:var(--navy-950)}
/* Der Verlauf ist Rueckfall, kein Design: Sollte eine Bildebene den Kasten je
   nicht decken (Ladefehler, kuenftige Geometrie-Aenderung), bleibt der Himmel
   trotzdem geschlossen statt Seitenweiss zu zeigen. */
/* Hoehe an die Breite gekoppelt statt fest: mit fester Hoehe wuchs nur die
   Wolkenbank mit der Breite weiter und frass ab ~1900px ueber die Haelfte des
   Heros. Gilt fuer beide Header-Modi; der Overlay-Offset ist das padding-top
   von .hshell (overlay-header.css). */
.hwrap{position:relative;overflow:hidden;height:clamp(840px,44vw,1150px);background:linear-gradient(#bfe4ff,#eaf6ff)}
[data-theme="dark"] .hwrap{background:linear-gradient(#0a1226,#101b36)}
/* Einzige Ebene mit object-fit gegen ein eigenes Kastenmass: der Himmel ist
   2:1 und deckend, die uebrigen Platten sind 16:9 mit Transparenz. Die
   Mehrhoehe oben ist der Auslauf fuer den Parallax - der Hintergrund hat den
   groessten Faktor (0.42) und wandert beim Scrollen nach unten. */
.hlay{position:absolute;left:0;top:-200px;width:100%;height:calc(100% + 200px);object-fit:cover;object-position:center 45%;z-index:1;will-change:transform}
.hstars{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s;background-image:radial-gradient(1.5px 1.5px at 12% 22%,#e8f2fc 50%,transparent 51%),radial-gradient(2px 2px at 28% 10%,var(--sky-300) 50%,transparent 51%),radial-gradient(1.5px 1.5px at 45% 30%,#e8f2fc 50%,transparent 51%),radial-gradient(2px 2px at 64% 14%,#e8f2fc 50%,transparent 51%),radial-gradient(1.5px 1.5px at 78% 26%,var(--sky-300) 50%,transparent 51%),radial-gradient(1px 1px at 55% 8%,#cfe6fb 50%,transparent 51%)}
[data-theme="dark"] .hstars{opacity:.95}
/* top von 7 % auf 15 %: bei 844px Hero liegen 7 % noch hinter der Kopfleiste,
   im Dunkelmodus stand der Mond genau hinter dem Logo. Gleiche Schutzzone wie
   bei Blueten und Bluetenzweig. */
.hmoon{position:absolute;left:11%;top:15%;width:130px;z-index:2;will-change:transform;filter:drop-shadow(0 0 30px rgba(199,233,254,.45))}
.hcl{position:absolute;z-index:2;pointer-events:none;will-change:transform}
.hcl img{width:100%;display:block}
.hclf img{transform:scaleX(-1)}
[data-theme="dark"] .hcl{opacity:.5!important;filter:brightness(.85)}
/* Groesser als zuvor (relativ zur Flaeche war der Zweig zu klein) und wieder
   bei top:64px - die Leiste ist transparent, der Zweig bleibt darunter
   vollstaendig sichtbar; ob er sich mit den Navigationselementen beisst,
   prueft die Sehschleife auf jeder Breite. */
.hblossom{position:absolute;right:-2%;top:64px;width:clamp(380px,24vw,640px);z-index:4;will-change:transform}

/* ---- Vordergrund-Ebenen ----
 *
 * Geometrie wie in der Design-Referenz (Startseite V3.dc.html): am Boden
 * verankert, die Breite steuert die Groesse, kein height und kein object-fit.
 * Der Parallax schreibt ausschliesslich transform.
 *
 * Zu wissen: alle sechs Dateien sind 2000x1131 grosse Vollformat-Platten mit
 * Transparenz um das Motiv, keine freigestellten Elemente. Die Breitenangaben
 * beziehen sich deshalb auf die ganze Platte, nicht auf das sichtbare Motiv -
 * die Produktbox fuellt in ihrer Platte rund 70 % der Breite, das Wolkenband
 * die unteren 55 % der Hoehe. Wer hier eine Zahl aendert, verschiebt das Motiv
 * mit; die Werte stammen aus der Referenz und sind nicht geschaetzt. */
.hl{position:absolute;left:0;bottom:0;width:100%;pointer-events:none;will-change:transform}
/* Der Wald ist keine Baumreihe am Boden, sondern der bewaldete Hang, der von
   rechts oben nach links unten durchs Bild laeuft - so steht es in der
   Referenz. Am Boden verankert deckt er den Berg des Hintergrunds zum Teil zu;
   das ist Absicht und kein Fehler. Oberhalb 1440px haengt er von oben, siehe
   den min-width-Block im Responsive-Teil. */
.hl-trees{left:-2%;width:104%;bottom:0;z-index:2}
/* Die Box ist das Produkt und der zweite Blickfang nach der Headline: VOR
   der Wolkenbank (z 5 > 4), sie liegt auf den Wolken statt dahinter zu
   versinken. Das Asset ist auf sein Motiv zugeschnitten
   (project/bin/produktbox-frei.mjs), die Breite hier meint also die
   sichtbare Box. Der fruehere 640px-Deckel ist bewusst aufgehoben, auf
   Ultra-Wide darf sie gross sein - nur nie ueber 1000px.

   Seit dem 08.09.2026 ist das Motiv das Foto der echten Box (vorher eine
   gezeichnete). Das aendert die Geometrie: 1122x1063 statt 1452x1044, also
   1,06:1 statt 1,39:1. Bei gleicher Breite steht der Karton damit etwa so
   hoch wie vorher - die drei Beutel schweben zusaetzlich darueber und
   greifen rund ein Viertel der Motivhoehe weiter nach oben aus. Wer die
   Breite aendert, verschiebt diesen Ueberstand mit.

   Zur Hoehe, zweimal korrigiert am 08.09.2026 - der Wert ist ein bewusst
   getragener Kompromiss, kein Optimum:

   Zuerst stand sie auf 20 %, dann auf 18 %, weil zwischen Kartonkante und
   vorderer Wolkenbank eine Luecke klaffte und die Box zu schweben schien.
   Damit verschwand aber der Schriftzug "TRUE WAGYU" auf der
   Kartonvorderseite in der Wolke - gemessen waren bei 1920 px null Prozent
   davon sichtbar, bei 1440 px 22 %.

   Der Schriftzug sitzt tief auf dem Karton, deshalb treffen ihn dieselben
   Wolken, die die Unterkante verdecken sollen. Beides zugleich geht mit
   diesem Foto nicht. Bert hat sich fuer den Schriftzug entschieden (Ansage
   08.09.2026): Er ist die Marke, die Luecke ist Geschmack.

   28 % ist der gemessene Wert dafuer, nicht geschaetzt - bei 1920 px sind
   95 % des Schriftzugs frei, bei 1440 px 94 %.

   Seitlich verschieben half uebrigens nicht: Der Schriftzug wird nicht von
   der Seite verdeckt, sondern von unten. right:-3 % brachte bei 1920 px nur
   33 % und haette die Box 63 px ueber den rechten Rand geschoben, wo der
   aeussere Beutel angeschnitten wird.

   --boxbreite bleibt getrennt von width, weil die Responsive-Bloecke weiter
   unten sie setzen. */
/* Alle vier Stufen am 08.09.2026 auf das Foto umgerechnet: rund drei
   Viertel der bisherigen Breite und etwas hoeher angesetzt. Grund ist das
   Seitenverhaeltnis - bei den alten Werten schluckte die Wolkenbank den
   Karton bis ueber den Schriftzug, weil das Motiv bei gleicher Breite 32 %
   hoeher baut. Kleiner und hoeher heisst: der Karton steht frei, "TRUE
   WAGYU" bleibt lesbar, und die Wolken verdecken nur noch die Unterkante -
   also genau so viel, wie die Komposition braucht. */
/* Abstand in PIXELN, nicht in Prozent (13.09.2026). Ein Prozentwert waechst
   mit dem Fenster: 7 % waren bei 1440 px 101 px und bei 2398 px schon 168 px.
   Genau daran hing der Befund von Bert - dieselbe Zahl sah auf dem Laptop
   richtig aus und schob die Box auf dem breiten Schirm so weit nach links,
   dass eine Wolke des Clusters das "TR" von TRUE WAGYU auf dem Karton
   verschluckte. 70 px halten den Abstand ueber alle Breiten gleich; gemessen
   bei 1280, 1440, 1600, 1920, 2398 und 3000 px steht der Schriftzug jedes Mal
   vollstaendig frei und die Wolken decken weiter nur die Unterkante. */
.hl-steak{left:auto;right:var(--boxrechts,70px);bottom:28%;
  --boxbreite:clamp(430px,26vw,640px);
  width:var(--boxbreite);
  z-index:3;filter:drop-shadow(0 24px 32px rgba(17,28,53,.22))}
/* Gleicher z-index wie die Box, spaeter im DOM: das Cluster gewinnt genau
   dort, wo es die Box ueberlappt, und bleibt unter der Textschale (6).
   Breite ans Bank-Raster gebunden: das Cluster ist ein 1500px-Ausschnitt der
   3840er-Platte, die Bank rendert mit max(100vw,1600px) - nativ waere also
   max(39.06vw,625px). +14 % darauf (erlaubt sind +-20 %), damit Kontur-
   staerke und Koernung neben der Bank nicht auseinanderfallen.

   Der Ausschnitt war zuerst 844 breit und deckte auf Desktop nur die rechte
   Haelfte der Box - bei 1440 blieben 216 px der geraden unteren Boxkante
   frei, bei 1920 sogar 323. Verbreitert wurde der Ausschnitt in
   project/bin/wolken-cluster.mjs, nicht diese Breite: strecken haette die
   Konturen dicker gemacht als die der Bank daneben. Die Werte hier sind
   deshalb mit 1500/844 mitskaliert, der Wolkenmaszstab bleibt unveraendert. */
/* Das Vordergrund-Wolkencluster ist am 15.09.2026 ERSATZLOS ENTFALLEN.

   Es existierte aus einem einzigen Grund: die Box lag mit z-index 5 VOR der
   unteren Wolkenbank (4), ihre gerade Unterkante stand also frei, und das
   Cluster wurde davorgelegt, um sie zu verdecken. Ein Pflaster auf einer
   falschen Ebenenreihenfolge.

   Die Box liegt jetzt auf 3, also HINTER der Bank - dieselbe Kante wird von
   der Bank selbst gedeckt, wie bei jeder anderen Ebene auch. Damit faellt
   nicht nur das Cluster weg, sondern auch sein eigentliches Problem: Sobald
   die Box nach links wanderte, musste es mitwandern, und dabei kam seine
   harte rechte Schnittkante mitten ins Bild - die "abgebissene Wolke".

   Wer das Cluster zurueckholen will, holt sich beides zurueck. Die Assets
   (wolken-cluster-front.webp, -nacht.webp) bleiben liegen, ebenso
   project/bin/wolken-cluster.mjs. */
/* Wolkenband v2, gedeckelt auf 40 % der Hero-Hoehe: mehr darf es nie
   einnehmen, sonst verschluckt es Content und Produktbox. Greift der Deckel,
   schneidet object-fit:cover mit object-position top UNTEN im deckenden
   Flaechenteil - die Silhouetten-Oberkante bleibt auf jeder Breite
   vollstaendig. width:max(100vw,1600px) macht das Band auf schmalen Fenstern
   breiter als den Viewport: seitlicher Beschnitt ist gewollt. Der Auslauf
   ins Weiss bzw. Dunkel steckt im Asset selbst (project/bin/wolken-v2.mjs);
   bewusst ohne data-par, das Band ist die Naht zur naechsten Sektion und
   sitzt fix an der Unterkante. */
.hl-clouds{left:50%;transform:translateX(-50%);bottom:0;width:max(100vw,1600px);height:auto;max-height:40%;object-fit:cover;object-position:center top;z-index:4}
/* Sicherungsnaht zur Folgesektion: schmaler Verlauf in die Flaechenfarbe der
   naechsten Sektion, falls das Asset-Weiss minimal abweicht. Ueber dem
   Wolkenband (4), unter Blaettern (5) und Textschale (6). */
.hwrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;z-index:5;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0),var(--color-bg))}
[data-theme="dark"] .hwrap::after{background:linear-gradient(180deg,rgba(11,19,38,0),var(--color-bg))}
/* Sechs einzelne Blaetter statt der gebackenen Gruppen-Platte (die wirkte
   als Klumpen und liess sich nicht staffeln). Lage, Groesse, Drehung und
   Deckung stehen je Blatt inline im Markup, Parallax je Blatt ueber
   data-par am span - die Drehung sitzt am img, weil tw-home.js das
   transform des Parallax-Elements komplett ueberschreibt (gleiches Muster
   wie .hcl/.hclf). Vier Blaetter hinter der Textebene (z 3), zwei mit
   gebackener Unschaerfe davor (z 7). */
.hpetal{position:absolute;z-index:3;pointer-events:none;will-change:transform}
.hpetal img{width:100%;display:block}
/* display:block oben ist spezifischer als .darkonly{display:none} aus
   base.css - ohne dieses Re-Gating rendern Tag- UND Nachtblatt uebereinander
   (gleiche Falle wie bei .payl und .pphoto, dort ebenso geloest). */
.hpetal img.darkonly{display:none}
[data-theme="dark"] .hpetal img.darkonly{display:block}
[data-theme="dark"] .hpetal img.lightonly{display:none}
.hpetal.vorn{z-index:7}

/* ---- Fliegende Blaetter ----
   Drei Ebenen, damit sich keine zwei Schreiber ein transform teilen: .pw
   gehoert dem rAF-Parallax, .pfly der Drift-Keyframe, das img nur noch der
   Tag/Nacht-Umschaltung. Bildquelle sind dieselben petal-0X.webp wie bei
   .hpetal - deshalb pixelgleich und mit Nachtfassung.
   Nur transform wird animiert, alles laeuft auf dem Compositor. */
.petalfield{position:absolute;inset:0;z-index:5;pointer-events:none}
.pw{position:absolute;will-change:transform}
.pfly{display:block;transform-origin:50% 50%;animation:tw-pfly var(--d,18s) linear infinite var(--t,0s);will-change:transform}
.pfly img{width:100%;display:block}
.pfly img.darkonly{display:none}
[data-theme="dark"] .pfly img.darkonly{display:block}
[data-theme="dark"] .pfly img.lightonly{display:none}
/* Kein scale in den Keyframes: die Groesse steht als width am .pw, damit
   die Vorlage der ruhenden Blaetter gilt und die Keyframes nur Weg und
   Drehung fuehren. */
@keyframes tw-pfly{
  0%   {transform:translate3d(0,0,0)         rotate(0deg)}
  25%  {transform:translate3d(-70px,110px,0) rotate(42deg)}
  50%  {transform:translate3d(40px,230px,0)  rotate(-26deg)}
  75%  {transform:translate3d(-50px,340px,0) rotate(54deg)}
  100% {transform:translate3d(0,470px,0)     rotate(10deg)}
}

/* ---- Wolken-Dauerdrift ----
   Eigene Ebene zwischen .hcl (Parallax) und dem img, damit weder der
   rAF-Loop noch die Spiegelung von .hclf img angefasst werden muss. */
.hcld{display:block;animation:tw-cdrift var(--dd,110s) linear infinite;will-change:transform}
@keyframes tw-cdrift{from{transform:translateX(0)}to{transform:translateX(-180px)}}

/* Reduzierte Bewegung: beide Effekte stehen still, aber nichts verschwindet -
   die Blaetter bleiben an ihrer Startposition sichtbar. */
@media (prefers-reduced-motion:reduce){
  .pfly,.hcld{animation:none}
}
[data-theme="dark"] .hl-steak{filter:drop-shadow(0 24px 32px rgba(0,0,0,.55))}
/* padding-bottom reserviert die Wolkenzone: der Flex-Container zentriert
   den Textblock damit im Bereich UEBER der Wolkenbank, Headline und Knoepfe
   koennen nicht in die Wolken rutschen. Prozent-padding zaehlt von der
   BREITE, deshalb steht hier 40 % der Hero-Hoehe ausgerechnet:
   clamp(840px,44vw,1150px) * 0.4 = clamp(336px,17.6vw,420px). Wer die
   Hero-Hoehe aendert, zieht diese Zeile nach. */
.hshell{position:absolute;inset:0;z-index:6;max-width:var(--container-max);margin:0 auto;padding:0 32px clamp(336px,17.6vw,420px);display:flex;align-items:center;box-sizing:content-box}
.hcontent{position:relative;max-width:520px;padding-bottom:34px}
/* Reicht jetzt bis unter die Knopfzeile (400 -> 500px hoch). Seit die
   Wolkenbank ueber ihre Hoehe gebunden ist, liegt ihre Oberkante ab 1900px
   bei y=524 und damit ueber Unterzeile und Knoepfen: Im Dunkelmodus stand
   der helle "Warum TrueWagyu"-Knopf (rgba(224,242,254,.14)) auf weisser
   Wolke und war praktisch unsichtbar. Der Schleier traegt beide. */
.hglow{display:block;position:absolute;left:-70px;top:-50px;width:640px;height:500px;background:radial-gradient(closest-side,rgba(242,250,255,.8),rgba(242,250,255,0));z-index:-1}
[data-theme="dark"] .hglow{background:radial-gradient(closest-side,rgba(11,19,38,.72),rgba(11,19,38,0))}
/* 17vw-Skalierung statt fester 440px: zwischen ~1600 und ~2400px waechst die
   Hero-Hoehe langsamer als die Schutzzone oben, das volle 440er-Banner
   draengte dort den Block in die Wolkenzone. Ab ~2590px ist es wieder 440. */
.hbanner{width:min(clamp(340px,17vw,440px),100%);height:auto;display:block;filter:drop-shadow(0 10px 24px rgba(17,28,53,.18))}
.hsub{font-family:var(--font-accent);font-size:19px;font-weight:700;color:var(--navy-700);margin:16px 0 26px}
/* Schatten aus demselben Grund wie der groessere .hglow: Ab 1900px liegt die
   Unterzeile auf der weissen Wolkenbank, und Sky-300 auf Weiss traegt nicht.
   Auf dem Nachthimmel ist der Schatten unsichtbar. */
[data-theme="dark"] .hsub{color:var(--sky-300);text-shadow:0 2px 14px rgba(11,19,38,.95)}
.hbtns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* Reiner Textlink unter den zwei Hero-Buttons, kein dritter Button -
   dieselbe Kontrastlogik wie .hsub (beide sitzen auf dem variablen
   Hero-Hintergrund, deshalb derselbe Schatten-Trick im Dark Mode). */
.hqrlink{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font:700 14px/1 var(--font-body);color:var(--navy-700);text-decoration:none}
.hqrlink svg{width:18px;height:18px;flex-shrink:0}
.hqrlink:hover{text-decoration:underline}
.hqrlink:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px}
[data-theme="dark"] .hqrlink{color:var(--sky-300);text-shadow:0 2px 14px rgba(11,19,38,.95)}

/* ================= USP-Leiste unterm Hero ================= */
/* padding:0 aus demselben Grund wie beim Hero — den Abstand bringt .vrow mit. */
.vstrip{border-bottom:1px solid var(--hair);padding:0}
/* Das Polster bleibt unter 920px bewusst stehen.
   Die Kurzschreibweise "padding:26px 0" setzte links und rechts auf 0 und
   loeschte damit den Seitenabstand, den .shell am selben Element mitbringt
   - bei 390px liefen die Icons exakt bis x=0 und der Text bis an die
   rechte Kante. Deshalb nur noch die Achse setzen, die gemeint ist. */
.vrow{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:26px;flex-wrap:wrap}
.vitem{display:flex;align-items:center;gap:11px;font:600 13.5px/1.35 var(--font-body);color:var(--navy-800)}
[data-theme="dark"] .vitem{color:var(--navy-100)}
.vitem svg{width:19px;height:19px;color:var(--sky-600);flex:none}
[data-theme="dark"] .vitem svg{color:var(--sky-300)}
.vsep{width:1px;height:26px;background:var(--hair);flex:none}

/* ================= Sektions-Trenner =================
 * Scroll-getrieben ueber --t (0-1 Durchlauf) und --u (Mitte=1), gesetzt von
 * js/tw-home.js. --tk skaliert die Wanderstrecke global (tokens.css).
 */
.tr{position:relative;overflow:hidden;pointer-events:none;z-index:2;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.tr img{position:absolute;display:block;will-change:transform,opacity}
.tr img.darkonly{display:none}
[data-theme="dark"] .tr img.darkonly{display:block}
[data-theme="dark"] .tr img.lightonly{display:none}
.hl-mid{position:absolute;left:50%;bottom:50%;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#dbe6f2 22%,#dbe6f2 78%,transparent);opacity:calc(var(--u,0) * .9)}
[data-theme="dark"] .hl-mid{background:linear-gradient(90deg,transparent,rgba(160,218,254,.3) 22%,rgba(160,218,254,.3) 78%,transparent)}
/* Bluetendrift - PNG ohne Alphakanal, multiply blendet das Weiss weg */
.tr-petal{height:150px;margin:-42px 0}
/* Kein mix-blend-mode mehr: Die Blueten sind seit dem Freistellen echte
   Alpha-Bilder (project/bin/bluete-frei.mjs). Der Multiply-Trick brauchte das
   weisse Rechteck der Vorlage und funktionierte nur auf weissem Grund. */
.tr-petal img{width:calc(var(--s) * 46px);left:var(--x);top:var(--y);opacity:calc(.32 + var(--u,0) * .58);transform:translate3d(calc((.5 - var(--t,0)) * 180px * var(--sp) * var(--tk)),calc((var(--t,0) - .5) * 12px * var(--sp)),0) rotate(calc(var(--r) * .7 * (var(--t,0) - .5)))}
/* Nachts entsaettigtes Mondlicht-Rosa statt invert(1): Das Invertieren machte
   aus Kirschbluetenrosa Gruen und liess das Rechteck der Vorlage als schwarzen
   Kasten stehen. Form und Alphakanal bleiben, nur Saettigung und Helligkeit
   gehen zurueck. */
[data-theme="dark"] .tr-petal img{filter:saturate(.45) brightness(1.02) hue-rotate(-8deg)}
[data-theme="dark"] .tr-petal .hl-mid{width:min(420px,52%)}
/* Wolkenzug */
.tr-cloud{height:210px;margin:-60px 0}
.tr-cloud img.ca{left:-9%;top:8%;width:30%;opacity:calc(.34 + var(--u,0) * .34);transform:translate3d(calc((var(--t,0) - .5) * 215px * var(--tk)),0,0)}
.tr-cloud img.cb{left:auto;right:-5%;top:34%;width:19%;opacity:calc(.16 + var(--u,0) * .24);transform:scaleX(-1) translate3d(calc((var(--t,0) - .5) * -145px * var(--tk)),calc((var(--t,0) - .5) * -12px * var(--tk)),0)}
.tr-cloud .hl-mid{left:34%;width:min(300px,38%)}
/* Nachts Dunst statt Pappkulisse: brightness(1.9) hat die Aquarellzeichnung
   flachgebrannt, uebrig blieb eine graue Silhouette mit harter Kante. Jetzt
   wird die Wolke stark abgedunkelt und mit screen auf das Navy gelegt - sie
   hellt den Grund nur noch in ihrer eigenen Form auf, die weichen Raender
   bleiben weich. */
[data-theme="dark"] .tr-cloud img{mix-blend-mode:screen;filter:brightness(.34) sepia(1) hue-rotate(185deg) saturate(2.4);opacity:calc(.4 + var(--u,0) * .3);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.5) 45%,transparent 88%);
  mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.5) 45%,transparent 88%)}
/* Zweig-Andeutung - bewusst klar, ohne Weichzeichnung und ohne Kantenmaske */
.tr-branch{height:330px;margin:-104px 0;-webkit-mask-image:none;mask-image:none}
.tr-branch img.br{left:auto;right:-3%;top:20px;width:min(44%,600px);height:auto;opacity:1;will-change:auto;transform:translate3d(calc((var(--t,0) - .5) * -34px * var(--tk)),0,0)}
.tr-branch img.fl{left:var(--x);top:var(--y);width:calc(var(--s) * 44px);opacity:calc(.25 + var(--u,0) * .75);transform:translate3d(calc((.5 - var(--t,0)) * var(--d) * var(--tk)),calc((var(--t,0) - .5) * var(--dy) * var(--tk)),0) rotate(calc(var(--r) * 1.6 * (var(--t,0) - .5)))}
.tr-branch .hl-mid{left:30%;width:min(340px,42%)}

/* ================= Slider ================= */
.psliderw{position:relative}
.pslider{display:flex;gap:18px;overflow-x:auto;padding:4px 4px 20px;margin:0 -4px;scrollbar-width:none}
.pslider::-webkit-scrollbar{display:none}
.pslider .pcard{flex:0 0 268px}
.pslider.w3{gap:36px}
.pslider.w3 .pcard{flex:0 0 332px}
.rvslider{display:flex;gap:18px;overflow-x:auto;padding:4px 4px 20px;margin:0 -4px;scrollbar-width:none}
.rvslider::-webkit-scrollbar{display:none}
/* Nie breiter als die Bahn, und immer ein Stueck der naechsten Karte sichtbar.
   356px fest war auf schmalen Geraeten zu viel: auf 375px (iPhone SE, 13 mini)
   ist die Bahn 351px breit, die Karte passte nicht hinein - man sah nie eine
   ganze und nie einen Hinweis darauf, dass daneben noch etwas liegt. Auf dem
   Desktop bleibt es bei 356px. */
.rvslider .rcard{flex:0 0 min(356px,86vw)}

/* Rastpunkte. Ohne sie hat die Bahn keine Ruhelage, und ein Schwung kann
   irgendwo enden - auf dem iPhone auch hinter der letzten Karte, im Leeren.
   Gemeldet 09.09.2026 mit Bildschirmaufnahme: nach schnellem Wischen stand
   der Bewertungs-Slider sechs Sekunden lang leer da, Pfeile und Ueberschrift
   blieben stehen. Zurueckwischen holte die Karten wieder - es war also die
   Scrollposition, nicht die Sichtbarkeit. Rechnerisch gibt es diesen Platz
   gar nicht (scrollWidth 2204 = 6x356 + 5x12 + 8 Polster, Ueberschuss 0);
   iOS parkt dort seinen Gummiband-Ueberhang und kommt ohne Rastpunkt nicht
   von selbst zurueck.

   overscroll-behavior-x haelt die Geste in der Bahn, statt sie an die Seite
   weiterzureichen - beim schraegen Wischen entsteht sonst genau das Hin und
   Her, in dem sich der Schwung verhakt.

   Karten, die breiter als die Bahn sind, blockiert `mandatory` nicht: liegt
   der Rastbereich ueber der Bahnbreite, rastet nur an seinen Kanten. */
.pslider,.rvslider{scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.pslider>*,.rvslider>*{scroll-snap-align:start}
.slarr{position:absolute;top:36%;transform:translateY(-50%);width:46px;height:46px;border-radius:var(--radius-pill);border:1px solid var(--hair);background:rgba(255,255,255,.95);color:var(--navy-800);display:grid;place-items:center;cursor:pointer;z-index:5;box-shadow:0 10px 24px -14px rgba(17,28,53,.35);transition:all var(--transition-fast)}
.slarr:hover{border-color:var(--navy-800);transform:translateY(-50%) scale(1.05)}
.slarr:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.slarr.l{left:-62px}
.slarr.r{right:-62px}
[data-theme="dark"] .slarr{background:rgba(17,28,53,.92);color:var(--navy-100);border-color:rgba(160,218,254,.25)}

/* ================= Fakten / IMF / Lupe ================= */
.lupeg{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center;margin-bottom:28px}
/* Ab 920px abwaerts einspaltig; die Kachel darf dann auf 620px wachsen -
   breiter waere sie in der Textspalte ein Fremdkoerper, schmaler wird die
   cqw-Typografie im Display frueher unlesbar. */
@media (max-width:920px){
  /* gap:0, weil das Raster jetzt nicht mehr zwei Spalten trennt, sondern
     die einzelnen Textbloecke - deren Abstaende stecken schon in ihren
     Margins. Der Abstand um die Kachel steht an .lupewrap. */
  .lupeg{grid-template-columns:1fr;gap:0}
  /* Einspaltig gehoert die Kamera zwischen Fliesstext und Regler: erst
     lesen, dann sehen, woran man zieht. Dafuer loesen sich die beiden
     Spalten per display:contents auf, damit Text, Kachel und Regler
     Geschwister im selben Raster sind - der Regler wandert per order ans
     Ende. Abwaegung wie zuvor: die Tab-Reihenfolge bleibt in der DOM-Folge,
     also Regler vor Kachel. */
  .lupeg>.rv{display:contents}
  /* Die .rv-Huelle erzeugt damit keine Box mehr: ihre Einblendung entfaellt
     hier ersatzlos. Nachbauen laesst sie sich nicht - der Beobachter in
     tw-home.js misst die Huelle, und eine Box ohne Ausdehnung tritt nie in
     den Sichtbereich. Die Kinder blieben dann dauerhaft unsichtbar. */
  .lupewrap{width:100%;max-width:620px;justify-self:center;margin:4px 0 26px}
  .imfw{order:1}
}
/* Farbe war hier nie gesetzt, deshalb erbte die Zeile NOVAs #525252 -
   gemessen am 07.09.2026 mit ci-audit.mjs an "So messen wir den IMF-Wert". */
.h3l{font:800 22px/1.3 var(--font-body);margin:0 0 12px;color:var(--color-ink)}
[data-theme="dark"] .h3l{color:var(--color-text-inverse)}
.lupetxt{font:400 15px/1.7 var(--font-body);color:var(--color-text-muted);max-width:470px;margin:0 0 22px}
.imfw{max-width:430px;margin:2px 0 0}
.imfhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.imfhead b{font:800 17px/1 var(--font-body);color:var(--color-ink);font-variant-numeric:tabular-nums}
.imfhead span{font:600 11px/1.4 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}
.imftrack{position:relative;height:70px;cursor:pointer;touch-action:none}
.imfrail{position:absolute;left:0;right:0;bottom:8px;height:10px;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--hair) 0%,#d6ecfe 52%,var(--sky-300) 100%)}
.imfzmark{position:absolute;left:66.667%;right:0;bottom:24px;height:8px;border:2px solid var(--sky-600);border-bottom:0;border-radius:7px 7px 0 0}
.imfzlbl{position:absolute;right:0;bottom:39px;display:inline-flex;align-items:center;gap:5px;font:700 10.5px/1 var(--font-body);letter-spacing:.05em;text-transform:uppercase;color:var(--sky-700)}
.imfzlbl svg{width:13px;height:13px}
.imfhint{position:absolute;left:2px;bottom:32px;display:inline-flex;align-items:flex-start;gap:7px;font-family:var(--font-accent);font-size:16.5px;font-weight:700;color:var(--navy-700);transition:opacity .4s;pointer-events:none;white-space:nowrap}
.imfarr{width:38px;height:26px;margin-top:11px;stroke:var(--navy-700);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.imfhint.off{opacity:0}
.imfthumb{position:absolute;bottom:0;width:26px;height:26px;transform:translateX(-50%);border-radius:var(--radius-pill);background:#fff;border:3px solid var(--navy-900);box-shadow:0 6px 16px -6px rgba(17,28,53,.5);cursor:grab;padding:0;display:grid;place-items:center}
.imfthumb::after{content:'‹ ›';font:800 9px/1 var(--font-body);letter-spacing:1px;color:var(--navy-900);padding-left:1px}
.imfthumb:active{cursor:grabbing}
.imfthumb:focus-visible{outline:none;box-shadow:var(--focus-ring)}
[data-theme="dark"] .imfthumb{background:var(--navy-900);border-color:var(--sky-300)}
[data-theme="dark"] .imfrail{background:linear-gradient(90deg,rgba(160,218,254,.1) 0%,rgba(160,218,254,.32) 52%,rgba(160,218,254,.78) 100%)}
[data-theme="dark"] .imfzmark{border-color:var(--sky-300)}
[data-theme="dark"] .imfzlbl{color:var(--sky-300)}
[data-theme="dark"] .imfhint{color:var(--sky-300)}
[data-theme="dark"] .imfarr{stroke:var(--sky-300)}
[data-theme="dark"] .imfthumb::after{color:var(--sky-300)}
.imfpoles{display:flex;justify-content:space-between;gap:12px;font:600 11.5px/1.4 var(--font-body);color:var(--color-text-muted);margin-top:8px}
.imfpoles .imfgut{color:var(--sky-700);font-weight:800;text-align:right}
[data-theme="dark"] .imfpoles .imfgut{color:var(--sky-300)}
/* Die Beschriftung sass bis zum 08.09.2026 in einer Flex-Zeile: drei
   flex:1-Spans plus ein rechtsbuendiges "45 %". Damit verteilte sie sich
   ueber die Zeile, statt an den Anteilen der Schiene zu haengen - "30 %"
   landete bei rund 94 % der Breite, obwohl 30 von 45 bei 66,67 % liegen.
   Der Regler stand richtig (left:66,67 %, wie .imfzmark), die Skala
   darunter log: es sah aus, als stuende der Knopf weit links von 30 %.
   Gemeldet Bert 08.09.2026.

   Jetzt dieselbe Geometrie wie Regler und Zonenmarke: absolut, an der
   eigenen Marke ausgerichtet. Erste und letzte Beschriftung stossen an
   die Kante statt ueber sie hinauszuragen. */
.imfscale{position:relative;height:11px;font:600 11px/1 var(--font-body);color:var(--color-text-muted)}
.imfscale span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.imfscale span:first-child{transform:none}
.imfscale span:last-child{transform:translateX(-100%)}
.imfgar{display:inline-flex;align-items:flex-start;gap:8px;margin-top:14px;font:600 12.5px/1.5 var(--font-body);color:var(--color-ink)}
.imfgar svg{width:16px;height:16px;color:var(--sky-600);flex-shrink:0;margin-top:1px}
[data-theme="dark"] .imfgar svg{color:var(--sky-300)}
/* Container fuer die Kachel: die cqw-Typografie im Panel und der
   420px-Umschlag der Metazeile haengen an der KACHELBREITE, nicht am
   Viewport - die Kachel steht mal in einer Spalte, mal allein. */
.lupewrap{container-type:inline-size}
.lupe{position:relative;aspect-ratio:990/575;container-type:inline-size;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -35px rgba(17,28,53,.4);cursor:default;outline:none;background:linear-gradient(175deg,#f7f9fc 0%,#e7ecf3 100%);border:1px solid var(--hair)}
.lupe.hot{cursor:none}
.lupe:focus-visible{box-shadow:var(--focus-ring)}
[data-theme="dark"] .lupe{background:var(--navy-900)}
.lbgd{position:absolute;inset:0;opacity:0;transition:opacity .4s;background:radial-gradient(circle at 50% 58%,rgba(160,218,254,.2),transparent 58%)}
[data-theme="dark"] .lbgd{opacity:1}
/* Ebene 1: die Kameraplatte. EIN Freisteller, der nie wechselt - beide
   Displayfelder sind darin leer. Sie liegt unten, alles Weitere darueber.
   Das Seitenverhaeltnis der Kachel ist exakt das des PNG, deshalb braucht
   es kein object-fit: nichts wird beschnitten. */
.lplate{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 18px 26px rgba(17,28,53,.25))}
/* Ebene 2: Bildfeld links. Gemessen am PNG (990x575): x 356..584,
   y 66..260. Achsparallel, also zwei Prozentwerte statt clip-path oder
   Rotation. Die unterste Stufe bleibt immer voll sichtbar, die darueber
   liegenden werden eingeblendet - so gibt es nie ein Loch im Stapel. */
.lfeld{position:absolute;left:35.960%;top:11.478%;width:23.131%;height:33.913%;overflow:hidden}
.lscr{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .3s ease}
.lscr[data-lvl]{opacity:0}
.lscr[data-lvl="30"]{opacity:1}
/* Ebene 4: Rahmen-Highlight. Innen liegender Ring, damit ihn das
   overflow:hidden des Bildfelds nicht abschneidet. */
.lfeld::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1.5px var(--sky-300);opacity:0;transition:opacity .25s ease;pointer-events:none}
.lupe.hot .lfeld::after{opacity:1}
@media (prefers-reduced-motion:reduce){.lscr,.lfeld::after{transition:none}}
/* Ebene 3: Infopanel rechts, x 585..773. Kein eigener Hintergrund - das
   Displayfeld im PNG traegt die Flaeche. Die Farben sind bewusst hart und
   folgen NICHT dem Theme: das ist ein leuchtendes Display, kein
   UI-Element der Seite (siehe [data-theme="dark"] weiter unten - dort
   steht fuer .lpanel absichtlich nichts). */
/* Die Schriftgroessen stehen im Verhaeltnis der Vorgabe (Label < Wert <
   IMF), aber um Faktor ~1,8 angehoben. Grund: die Vorgabe nennt .86cqw
   fuers Label - bei 573px Kachelbreite (1440er Viewport, rechte Spalte)
   sind das 4,9px. Der QR bleibt bei 5.1cqw, der passte mit 29px bereits.
   Alles zusammen fuellt das Panel fast randvoll; wer hier hochgeht,
   laesst es ueberlaufen. */
.lpanel{position:absolute;left:59.091%;top:11.478%;width:19.091%;height:33.913%;display:flex;flex-direction:column;justify-content:space-between;padding:.7cqw 1.3cqw;box-sizing:border-box;pointer-events:none;overflow:hidden}
.lprow{display:flex;flex-direction:column}
.lplbl{font:400 1.55cqw/1.3 var(--font-body);color:#5b6270;letter-spacing:.03em}
.lpval{font:600 1.8cqw/1.25 var(--font-body);color:#3d434f}
.lpnum{font-variant-numeric:tabular-nums;white-space:nowrap}
.lpimf{font:700 2.5cqw/1.15 var(--font-body);color:#111c35;font-variant-numeric:tabular-nums}
.lpqr{display:flex;align-items:center;gap:.7cqw;color:#3d434f}
.lpqri{width:4.4cqw;height:4.4cqw;flex:0 0 auto;stroke:#111c35;fill:none;stroke-width:2.25}
.lpqrt{font:600 1.45cqw/1.2 var(--font-body)}
.lmst{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.lmst.on{opacity:1;transform:scale(1)}
.lml{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .3s ease}
.lml[data-lvl]{opacity:0}
.lml[data-lvl="30"]{opacity:1}
/* Kein background-image als Startwert: render() setzt beim ersten Lauf die
   zum Reglerwert passende Stufe, und ohne JS wird die Lupe nie sichtbar.
   Der Startwert lud nur ein 547-KB-Bild, das niemand zu sehen bekam. */
.llens{position:absolute;top:0;left:0;width:132px;height:132px;border-radius:var(--radius-pill);border:3px solid var(--sky-300);box-shadow:0 10px 30px -6px rgba(17,28,53,.45),inset 0 0 36px rgba(16,19,28,.3);background-repeat:no-repeat;background-color:#f2b8ad;opacity:0;transform:scale(.8);transition:opacity .2s ease,transform .2s ease;pointer-events:none;will-change:left,top}
.llens.on{opacity:1;transform:scale(1)}
.hspot{position:absolute;inset:0;pointer-events:none;transition:opacity .3s;z-index:4}
.hsvg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--color-text-muted);stroke-width:1.5}
/* Unter dem Display statt rechts daneben: rechts sitzt jetzt das Infopanel.
   Schmaler und leiser als vorher - die Kachel ist im Querformat flacher,
   ein breiter Kasten deckte sonst das halbe Geraet zu. */
.hinfo{position:absolute;left:33%;top:56%;max-width:34%;font:400 10.5px/1.45 var(--font-body);color:var(--navy-800);background:rgba(255,255,255,.85);backdrop-filter:blur(4px);padding:7px 10px;border-radius:9px;border:1px solid rgba(90,107,130,.35);box-sizing:border-box}
.hinfo b{font-size:11px}
.hinfo b{display:block;font:700 12px/1.3 var(--font-body);margin-bottom:3px;color:var(--navy-900)}
.hspot.off{opacity:0}
[data-theme="dark"] .hsvg{stroke:rgba(232,242,252,.7)}
[data-theme="dark"] .hinfo{background:rgba(11,19,38,.78);color:var(--color-text-inverse-muted);border-color:rgba(160,218,254,.35)}
[data-theme="dark"] .hinfo b{color:var(--color-text)}
.lreadout{display:inline-flex;align-items:center;gap:8px;font:700 13px/1 var(--font-body);letter-spacing:.02em;padding:11px 16px;border-radius:var(--radius-pill);background:var(--navy-800);color:#fff;margin-top:14px;opacity:0;transform:translateY(4px);transition:all .25s ease}
.lreadout.on{opacity:1;transform:none}
[data-theme="dark"] .lreadout{background:var(--sky-300);color:var(--navy-900)}
/* Die Displaywerte als Textzeile. Optisch erst unter 420px Kachelbreite -
   fuer Screenreader immer da, weil .lupe als role="button" mit eigenem
   Label den Panelinhalt nicht vorliest. Deshalb ausgeblendet per
   clip statt display:none: das nimmt sie sonst aus dem A11y-Baum. */
/* Kennzeichnung der IMF-Simulation unter der Kamerakachel (Befund 08,
   15.09.2026). Gedaempft, aber sichtbar: Der Satz soll die Kachel nicht
   ueberstimmen und trotzdem gelesen werden, bevor jemand die Zahl fuer einen
   Nachweis haelt. */
.lsim{font:400 12.5px/1.6 var(--font-body);color:var(--color-text-muted);margin:8px 0 0}
/* Herkunft der Kundenstimmen, unter dem Slider (Befund 16, 15.09.2026). */
.rquelle{font:400 12.5px/1.65 var(--font-body);color:var(--color-text-muted);margin:18px auto 0;max-width:760px;text-align:center}
.lsim a{color:var(--color-link)}
.lmeta{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@container (max-width:420px){
  .lpanel{display:none}
  /* Ohne Panel bliebe die rechte Displayhaelfte als weisse Flaeche stehen
     und saehe nach Defekt aus. Das Bildfeld nimmt sie mit: 35.960% bis
     78.182%, also bis zur rechten Kante des Panelfelds im PNG. Der
     Hover-Hotspot im JS bleibt davon unberuehrt - hier ist ohnehin Touch. */
  .lfeld{width:42.222%}
  /* Schmale Kachel: die Bubble braucht Breite statt Zeilen, sonst schiebt
     sie sich unten aus dem overflow:hidden der Kachel heraus. */
  .hinfo{left:20%;top:50%;max-width:62%;font-size:10px;line-height:1.4;padding:6px 9px}
  .hinfo b{font-size:10.5px}
  .lmeta{position:static;width:auto;height:auto;margin:10px 0 0;overflow:visible;clip-path:none;white-space:normal;font:400 12.5px/1.6 var(--font-body);color:var(--color-text-muted)}
}

/* ================= FAQ ================= */
.faqg{display:flex;flex-direction:column;align-items:center}
/* Feste Spaltenbreite. Ohne sie bemisst align-items:center das Kind nach
   seinem breitesten Inhalt - beim Aufklappen einer Frage wuchs der Block von
   560 auf 760px. In der Referenz faellt das nicht auf, weil dort die
   Impact-Ueberschrift mit 813px ohnehin breiter ist als jede Antwort; Anton
   ist schmaler. Gemessen bei 1440px. */
.faqg > div{width:100%;max-width:760px}
.faqw{display:flex;flex-direction:column;gap:10px;max-width:760px;width:100%}
.faq{background:var(--color-surface);border:1px solid var(--hair);border-radius:14px;overflow:hidden}
[data-theme="dark"] .faq{border-color:rgba(160,218,254,.14)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;font:700 15px/1.4 var(--font-body);padding:17px 22px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--color-link)}
.faq summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.faq summary svg{flex-shrink:0;transition:transform var(--transition-fast);color:var(--navy-500)}
[data-theme="dark"] .faq summary svg{color:var(--sky-300)}
.faq[open] summary svg{transform:rotate(180deg)}
.faq p{font:400 14.5px/1.7 var(--font-body);color:var(--color-text-muted);margin:0;padding:0 22px 19px}

/* ================= Reviews ================= */
.rcard{background:var(--color-surface);border:1px solid var(--hair);border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:14px}
[data-theme="dark"] .rcard{border-color:rgba(160,218,254,.14)}
.stars{display:flex;gap:3px;color:var(--color-gold)}
.stars svg{fill:currentColor}
.rtxt{font:400 15px/1.65 var(--font-body);margin:0;flex:1}
.rmeta{display:flex;gap:12px;align-items:center}
.avat{width:42px;height:42px;border-radius:var(--radius-pill);display:grid;place-items:center;font:700 13.5px/1 var(--font-body);flex-shrink:0}
.rname{display:flex;align-items:center;gap:6px;font:700 14px/1.2 var(--font-body)}
.verif{width:16px;height:16px;border-radius:var(--radius-pill);background:var(--sky-600);color:#fff;display:inline-grid;place-items:center;flex-shrink:0}
.rbuy{font:400 12px/1.4 var(--font-body);color:var(--color-text-muted);margin-top:2px}

/* ================= Responsive =================
 * Reihenfolge und Werte wie in der Referenz. Die Pfeil-Regeln der Referenz
 * arbeiten mit !important gegen eine spaetere Regel; hier genuegt, dass der
 * 920er-Block nach dem 1300er steht.
 */
/* ---- Ueber 1440px: der Wald haengt von oben ----
 *
 * Die Referenz kappt die Seite bei 1440px (`body{max-width:1440px}`), der Shop
 * laeuft randlos. Die Waldplatte ist 2000x1131 und wird ueber die Breite
 * skaliert - ihre Hoehe ist also 0,5655 x Breite. Bei 1440px ist sie 847px hoch
 * und der Hero 844px: Platte und Kasten sind deckungsgleich, deshalb geht die
 * Komposition dort auf. Bei 1920px ist dieselbe Platte 1129px hoch. Am Boden
 * verankert schiebt dieser Zuwachs den Hang um 285px nach oben ins Bild.
 *
 * Ab hier zaehlt deshalb die Oberkante statt der Unterkante: der Hang behaelt
 * seine Lage im Bild, der Zuwachs faellt unten aus dem Kasten und liegt ohnehin
 * hinter dem Wolkenband. -3px ist die gemessene Oberkante bei genau 1440px, der
 * Uebergang ist damit stufenlos.
 *
 * Das Wolkenband braucht die Regel nicht mehr - es ist seit dem Cover-Umbau
 * ueber seine Hoehe gebunden und sitzt bei jeder Breite an der Unterkante.
 */
/* Solange der 800px-Hoehenboden greift, bleibt die Zone zwischen
   Schutzzone (150px+) und Wolken (320px) zu knapp fuer den vollen Textblock -
   Banner kleiner und Block gestrafft, bis die Hoehe ab ~1800px wieder mit
   der Breite waechst. */
@media (max-width:1600px){
.hbanner{width:min(320px,100%)}
.hsub{margin:10px 0 18px}
.hcontent{padding-bottom:20px}
}
@media (min-width:1441px){
.hl-trees{top:-3px;bottom:auto}
}
/* Auf Ultra-Wide darf die Box GROSS sein - sie ist das Produkt. Nur die
   1000px-Grenze bleibt. */
@media (min-width:1601px){
/* --boxrechts: der Versatz von rechts, den sich Produktbox UND Wolkencluster
   TEILEN (Ansage Bert 15.09.2026, die Box soll deutlich weiter nach links).

   Dass beide dieselbe Variable benutzen, ist der Kern der Sache. Ein erster
   Anlauf verschob nur die Box - dann kroch das Cluster, das am rechten Rand
   klebte, ueber den Schriftzug "TRUE WAGYU" auf dem Karton und liess
   gleichzeitig dessen gerade Unterkante frei stehen. Das Cluster ist kein
   Dekor: es DECKT diese Kante. Wandert die Box, muss es mitwandern, sonst
   tauscht man ein Problem gegen zwei.

   Der Deckel bleibt trotzdem noetig: auf Ultra-Wide waechst das Cluster mit
   der Breite, und ohne Grenze schoebe der Prozentwert die Box in die
   Textspalte. Gemessen an 1440, 1920, 2560 und 3440 px, hell und dunkel
   (hero-check.mjs). Wer den Wert aendert, misst erneut - der Schriftzug ist
   die Marke, und die Unterkante darf nie frei stehen. */
.hwrap{--boxrechts:clamp(70px,calc(38vw - 250px),740px)}
.hl-steak{--boxbreite:min(27vw,700px);bottom:24%}
}
/* Ultra-Wide: tiefer, sonst steht die Unterkante der Box frei.
   Der Grund liegt nicht an der Box, sondern an der Wolkenbank: sie ist auf
   40 % der Hero-Hoehe gedeckelt, und der Hero selbst auf 1150 px. Ab etwa
   2600 px waechst die Bank also nicht mehr mit, ihre Silhouette rutscht
   relativ nach unten - und die Box, die bei 24 % noch in den Kuppen sass,
   steht daueber. Gemessen bei 3440 px, hell und dunkel. */
@media (min-width:2600px){
.hl-steak{bottom:19%}
}
/* Ab hier waechst der Himmel mit der Breite statt mit der Hoehe: oberhalb
 * 2088px (= 2000 x 1,044) gewinnt bei object-fit:cover der Breitenfaktor.
 * Der Fuji wird damit groesser und rutscht in die Zone, in der die Waldplatte
 * nur noch ihre duennen Kronen zeigt - gemessen bei 2560px stand er als
 * Fragment zwischen den Staemmen, auf halber Hoehe statt am Horizont.
 * Deshalb hier nur noch der obere, reine Himmelteil der Platte: 150vw Kasten
 * heisst Faktor 1,5 x Breite / 1000, sichtbar bleiben die oberen ~27 % der
 * Platte. Der Berg liegt weit unter der Unterkante, der Himmel deckt weiter
 * bis zum Rand. Der Sprung bei 2000px ist bewusst - jede weiche Rampe fuehrt
 * den Gipfel langsam durch den Wald, genau das soll weg.
 */
@media (min-width:2001px){
.hlay{height:150vw;object-position:center top}
}
@media (max-width:1300px){
.slarr.l{left:-14px}
.slarr.r{right:-14px}
}
@media (max-width:1024px){
.vrow{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px}
.vsep{display:none}
}
@media (max-width:920px){
/* Keine eigene Hero-Hoehe mehr: der 700px-Boden des Breiten-clamps traegt
   das Tablet. Zweig und Blaetter behalten die Desktop-Regeln.
   right:1% statt 3%: die linken ~20 % des Box-Assets sind transparent,
   gemessen wird der Abstand ab der SICHTBAREN Kante - bei 3 % blieben am
   unteren Tablet-Ende nur ~40px zur Knopfzeile statt der geforderten 48. */
.hl-steak{--boxbreite:44vw;bottom:30%;right:2%}
/* Ab Tablet abwaerts nimmt die Textspalte fast die volle Breite - die
   vorderen Blaetter ruecken hinter den Text, sonst laegen sie auf Sub-
   oder Knopfzeile. */
.hpetal.vorn{z-index:3}
.vrow{justify-content:flex-start}
.slarr{width:38px;height:38px}
.slarr.l{left:6px}
.slarr.r{right:6px}
}
@media (max-width:640px){
/* 200vw: die Hoehe folgt auch mobil der Breite, bei 390px sind das 780px -
   die groessere Schutzzone oben (156px) braucht den Zuwachs, sonst laege die
   Headline wieder an der Leiste. padding-bottom wieder 40 % der Hoehe:
   200vw * 0.4 = 80vw. */
.hwrap{height:clamp(640px,200vw,780px)}
.hshell{padding-bottom:min(80vw,312px)}
/* bottom:14%: tief genug, dass die Box unter den Knoepfen beginnt (bei 18 %
   lag die Deckeloberkante in der Knopfzeile), hoch genug, dass ihre
   Unterkante hinter dem Cluster (bottom:12%) liegt statt darunter
   herauszuschauen. */
/* 22 % ist auf dieser Breite das gemessene Optimum, nicht der Wert aus der
   Desktop-Logik: Der Schriftzug ist hier zu 34 % frei, und HOEHER wird es
   schlechter (26 % -> 24 %, 30 % -> 14 %, 34 % -> 1 %). Anders als auf
   Desktop verdeckt ihn mobil also etwas von OBEN, nicht die Wolkenbank von
   unten - vermutlich die Textschale, deren Innenabstand unten bis 420 px
   reicht. Wer das aufloesen will, faengt dort an, nicht bei bottom. */
.hl-steak{--boxbreite:66vw;right:2%;bottom:22%}
.hblossom{width:56vw;right:-10%;top:56px}
/* Beide Knoepfe nebeneinander, nie gestapelt: umgebrochen brauchte der
   Textblock eine Knopfhoehe mehr und drueckte die Produktbox aus dem
   sichtbaren Bereich. flex:1 1 0 teilt die Zeile gleichmaessig, die
   Beschriftung bleibt einzeilig. */
.hbtns{flex-wrap:nowrap;gap:8px}
.hbtns .btn{flex:1 1 0;min-width:0;justify-content:center;padding:0 14px;height:48px;font-size:14px;white-space:nowrap}
/* Auf schmalen Schirmen vier fliegende Blaetter statt acht - der Hero ist
   dort deutlich enger, acht driftende Blaetter wuerden ihn zumuellen. */
.pw-s{display:none}
/* Das USP-Band bleibt 2x2, wird aber zu Kacheln: vier nackte Textzeilen mit
   Icon lasen sich als eine graue Flaeche, und ohne eigenen Rahmen war nicht
   zu sehen, wo ein Versprechen aufhoert und das naechste beginnt. Icon
   bekommt einen getoenten Kreis, damit es Anker ist statt Beiwerk. */
/* stretch statt center: sonst ist die Kachel mit dem kuerzeren Text
   niedriger als ihre Nachbarin und die 2x2-Reihe steht schief. */
.vrow{gap:10px;align-items:stretch}
.vitem{flex-direction:column;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.3;
  background:var(--color-surface-2);border:1px solid var(--hair);border-radius:14px;
  padding:14px 12px;flex:1 1 calc(50% - 5px);box-sizing:border-box}
/* sky-100, nicht sky-50: letzteres ist #f2faff und damit auf der Kachel
   (--color-surface-2 = #f5f9fd) nicht zu unterscheiden - der Kreis war da,
   aber unsichtbar. */
.vitem svg{width:18px;height:18px;padding:7px;border-radius:var(--radius-pill);
  background:var(--sky-100);box-sizing:content-box}
[data-theme="dark"] .vitem svg{background:rgba(160,218,254,.1)}
.tr-branch{height:220px;margin:-66px 0}
.tr-branch img.br{width:min(74%,320px);top:8px}
.tr-branch img.fl{width:calc(var(--s) * 26px)}
.tr-petal{height:150px;margin:-44px 0}
.tr-petal img.pt{width:calc(var(--s) * 34px)}
.pslider,.rvslider{gap:12px}
}

/* Der Markenname als Logo mitten im Fliesstext (Ansage Bert 15.09.2026):
   "Erst ab 30 % IMF darf es sich [Logo] nennen." Bewusst klein - es ist ein
   Akzent im Satz, kein zweites Header-Logo.

   Zwei Fallen dabei:
   - Die Hoehe haengt an der Schriftgroesse (em, nicht px), sonst bricht das
     Verhaeltnis zum Text auf jedem Breakpoint neu.
   - width/height am img nennen das ECHTE Seitenverhaeltnis (804x153) und
     reservieren damit den Platz. Die Anzeige regelt CSS ueber beide Achsen -
     nur eine zu setzen verzerrt (siehe Merkregel zu Bildmassen). */
.twlogoin{display:inline-block;height:1.45em;width:auto;vertical-align:-.32em;margin:0 .1em}

/* Der Garantie-Hinweis unter dem Regler ist der USP-Satz der Sektion und
   traegt deshalb seit dem 15.09.2026 Fliesstextgroesse statt Kleingedrucktem
   (12.5px). Ansage Bert. */
.imfgar{font-size:15px;line-height:1.55}
.imfgar svg{width:18px;height:18px;margin-top:2px}

/* ================= Instagram (29.09.2026) =================
 * Zwei-Klick: bis zum Klick eine Flaeche im Hochformat, danach das iframe von
 * Instagram (js/tw-home.js). Die Hoehe gibt das Hochformat vor, nicht der
 * Inhalt - so springt beim Laden nichts. */
#instagram .igtxt{margin:10px 0 0;color:var(--color-text-muted);max-width:52ch}
#instagram .btn-gho{gap:9px;flex-shrink:0}
.igreels{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:32px}
.igreel{aspect-ratio:9/16;max-height:640px;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-2);border:1px solid var(--hair)}
.igreel iframe{width:100%;height:100%;border:0;display:block;background:var(--color-surface)}
.igplay{all:unset;box-sizing:border-box;position:relative;display:block;width:100%;height:100%;cursor:pointer}
.igplay img{width:100%;height:100%;object-fit:cover;display:block}
/* Abspiel-Knopf mittig auf dem Titelbild, deckend statt Verlauf. */
.igbadge{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:var(--radius-pill);background:var(--color-cta);color:var(--color-cta-ink);display:grid;place-items:center;box-shadow:0 10px 24px -10px rgba(17,28,53,.55);transition:transform var(--transition-fast)}
.igbadge svg{width:26px;height:26px;margin-left:3px}
.igplay:hover .igbadge{transform:translateY(-1px) scale(1.04)}
.igplay:focus-visible{box-shadow:var(--focus-ring);border-radius:inherit}
.ighinweis{margin:14px 0 0;font-size:var(--text-caption);color:var(--color-text-muted)}
.ighinweis a{color:var(--color-link)}
@media (max-width:640px){
  #instagram .srow{flex-direction:column;align-items:flex-start;gap:18px}
  /* Mobil nebeneinander zum Wischen statt drei Hochformate untereinander
     (rund 1950 px Scrollweg); die naechste Karte schaut am Rand heraus. */
  .igreels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .igreel{flex:0 0 72%;scroll-snap-align:start}
}

/* ================= Hero V4 (29.09.2026) =================
 * Ein Bild je Modus, echter Text darauf (snippets/tw_hero_v4.tpl).
 *
 * Ab 1024px: das Querformat (2,11:1) deckt per cover bei 47,4vw Hoehe - es
 * wird also nur ueber die Breite skaliert, und jede Stelle darin liegt bei
 * einem festen Anteil der Breite. Deshalb sitzt der Text in vw und nicht im
 * 1140er-Container: die Glaeser beginnen bei 33 % der Breite und 54 % der
 * Hoehe, der Text muss links davon bleiben - bei jeder Breite. Werte
 * abgenommen am Tag-Mockup (1118px breit).
 * Hoeher als der Bildschirm wird der Hero nie: auf Ultra-Wide (3440x1440)
 * laege die Fleischgruppe sonst unter der Falz. Dann schneidet cover vor
 * allem oben Himmel weg (object-position y 85 %: 85 % des Ueberstands oben),
 * unten nur einen Streifen Marmor - mit 20 % fehlte dem Ribeye auf 3440x1440
 * die Unterkante. Nie die Silhouette -
 * der Text bleibt dabei links der Glaeser, weil der Beschnitt nur vertikal ist.
 *
 * Unter 1024px: das Hochformat (Tag bzw. Nacht) mit dem Text oben im Himmel. */
.hero4{position:relative;height:min(47.4vw,100vh);overflow:hidden;background:var(--sky-300)}
[data-theme="dark"] .hero4{background:var(--navy-950)}
.h4bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 85%}
.h4shell{position:absolute;inset:0;z-index:2}
/* Das Nachtbild steht tiefer: dort reicht das Ribeye bis fast an die
   Unterkante, also kommt der ganze Ueberstand oben weg (Gipfel bleibt drin). */
@media (min-width:1024px){[data-theme="dark"] .h4bild img{object-position:50% 100%}}
.nw{white-space:nowrap}
/* Schrift und Knoepfe in festen Groessen wie beim alten Hero (Headline dort
   340-440px breit, Knoepfe in Standardgroesse) - Ansage Bert 29.09.2026,
   mitwachsende vw-Groessen wirkten zu wuchtig. Nur die Lage haengt an der
   Breite: der Text bleibt links der Glaeser, die bei 32,6 % beginnen. */
/* Links buendig mit dem 1140er-Container wie Logo und Inhalte (Ansage Bert
   29.09.2026: "weiter rechts im boxed Bereich") - aber nie so weit, dass die
   Unterzeile (max. 300px) an die Glaeser bei 32,6 % stoesst. Bis etwa 1500px
   gewinnt der Container, darueber die Glaeser: bei 1920 steht der Text bei
   306 statt 390px, bei 3440 bei 801 statt 1150px. Die Knoepfe stehen
   untereinander, damit der Block schmal bleibt. */
.h4text{position:absolute;left:max(4vw,min(50vw - 570px,32.6vw - 320px));top:max(13.4vw,150px);width:320px}
/* Neue OneDrive-Motive (11.10.2026): das erste Glas beginnt schon bei
   rund 31 % der Breite. Auf grossen Displays braucht die nicht umbrechende
   Headline knapp 400 px Platz, sonst liegt sie im Nachtmotiv am Glas. */
@media (min-width:1800px){.h4text{left:max(4vw,min(50vw - 570px,31vw - 400px))}}
.h4eyebrow{font-family:var(--font-accent);font-size:18px;line-height:1.1;color:var(--navy-900);margin:0 0 4px}
.h4title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(50px,4.1vw,76px);line-height:.94;letter-spacing:.01em;margin:0;white-space:nowrap}
.h4z1{display:block;color:var(--navy-900)}
.h4z2{display:block;color:var(--sky-500)}
.h4sub{font:600 15px/1.5 var(--font-body);color:var(--navy-900);margin:14px 0 20px;max-width:300px;text-wrap:balance}
.hero4 .hbtns{gap:10px;flex-direction:column;align-items:flex-start}
.hero4 .btn{font-size:15px;height:48px;padding:0 20px;gap:8px}
.hero4 .h4qr{font-size:14px;margin-top:14px;gap:7px}
.hero4 .h4qr svg{width:18px;height:18px}
/* 1024-1279: fuer den zweiten Knopf und den IMF-Link reicht die Hoehe
   nicht; "Warum" steht gleich darunter, IMF in der Navigation. */
@media (min-width:1024px) and (max-width:1279px){
  .hero4 .btn-pri,.hero4 .h4qr{display:none}
}
[data-theme="dark"] :is(.h4eyebrow,.h4z1,.h4sub){color:var(--color-text);text-shadow:0 2px 16px rgba(11,19,38,.85)}
[data-theme="dark"] .h4z2{color:var(--sky-300);text-shadow:0 2px 16px rgba(11,19,38,.85)}
/* Nachts steht der IMF-Link auf Blueten und hellem Marmor - hellblau mit dem
   weichen Schatten von .hqrlink war dort kaum zu lesen. */
[data-theme="dark"] .hero4 .h4qr{color:var(--color-text);text-shadow:0 1px 3px rgba(11,19,38,.95),0 0 14px rgba(11,19,38,.9)}
/* Nachts dunkel wie im Mockup statt des halbdurchsichtigen Glasknopfs
   (.btn-navy im Dunkelmodus) - der hatte auf dem Bild kaum Kontrast. */
[data-theme="dark"] .hero4 .btn-navy{background:var(--navy-950);color:var(--sky-100);box-shadow:inset 0 0 0 1.5px rgba(160,218,254,.45),0 12px 26px -14px rgba(0,0,0,.6)}
[data-theme="dark"] .hero4 .btn-navy:hover{background:var(--navy-900)}
/* "Warum True Wagyu" ist nachts Navy auf Nachthimmel - ohne Kante war keine
   Knopfflaeche zu erkennen. */
[data-theme="dark"] .hero4 .btn-pri{box-shadow:inset 0 0 0 1.5px rgba(160,218,254,.45)}

@media (max-width:1023px){
  /* Hochformat 1125x2436: bei 216vw deckt es ohne Beschnitt; der Deckel
     (Tablet) nimmt unten Marmor weg, nie den Fuji oben. */
  .hero4{height:min(216vw,1400px)}
  .h4bild img{object-position:50% 0}
  .h4text{left:16px;right:16px;top:128px;width:auto}
  .h4title{font-size:clamp(42px,11.5vw,64px)}
  .h4sub{font-size:14px;margin:10px 0 16px}
  /* Nebeneinander statt untereinander: die alte Hero-Regel fuer Handys gibt
     den Knoepfen flex:1 1 0 - in einer Spalte schrumpfte das ihre Hoehe auf
     die Schrift (gemeldet 29.09.2026, nach dem Deploy). */
  .hero4 .hbtns{flex-direction:row;flex-wrap:nowrap;gap:8px;margin-top:30px}
  /* Nicht mehr ueber die volle Breite (flex:1 der alten Hero-Regel): mit nur
     einem Knopf wirkte der Balken wie eine Leiste, nicht wie ein Knopf. */
  .hero4 .hbtns .btn{flex:0 0 auto;width:auto;font-size:13px;height:42px;padding:0 18px}
  /* Nachts der Kontrastknopf aus dem Mockup (Ansage Bert 04.10.2026): das
     Navy des Tagknopfs verschwindet auf dem Nachthimmel. Tags bleibt es, wie
     es ist - dort passt die Farbe, nur Lage und Groesse nicht. */
  [data-theme="dark"] .hero4 .btn-navy{background:var(--sky-300);color:var(--navy-900);box-shadow:0 12px 26px -14px rgba(0,0,0,.6)}
  [data-theme="dark"] .hero4 .btn-navy:hover{background:var(--sky-400)}
  /* Der IMF-Link steht in der Navigation - auf dem Handy wuerde er auf dem
     T-Bone landen. */
  .hero4 .h4qr{display:none}
}