/* ============================================================================= FEAR — die lange Fassung, in der Sprache des Drops. Auftrag (Operator 2026-07-29): "und auch die andere Loesung sollte genauso aufgebaut sein, das lange mit den Texten usw. bitte alles immer das selbe Design!" Bis hierher liefen zwei Seiten hinter demselben Wort in zwei Sprachen: die Kampagne im Drop-Design (Void, Kamerarahmen, Anzeigeserife, Wortauftritt), die belegte Lesestrecke im Creme-Editorial mit Kopfleiste und Umschaltern. Wer von der einen auf die andere klickte, verliess die Marke. Diese Datei zieht die lange Fassung in dieselbe Sprache — OHNE ihre Substanz anzufassen: alle 50 Module, alle Belege, alle Quellzeilen, der Zustand im localStorage und der Loeschknopf bleiben, wie sie sind. Geaendert wird ausschliesslich, WIE das aussieht. Sie wird deshalb ZULETZT geladen und ueberschreibt gezielt; zz-modules-4.css bleibt unberuehrt und damit ruecknehmbar (diese eine Zeile aus dem nehmen = alter Stand). Die Werte sind KEINE zweite Wahrheit: sie stammen aus zz-drop.css. Wo dort etwas geaendert wird, ist es hier nachzuziehen — deshalb steht ueber jedem Block, wovon er die Entsprechung ist. ============================================================================= */ /* ----------------------------------------------------------------------- ZUERST DIE NAMENSGRENZE. Der erste Anlauf hat hier die Tokens des Drops einfach auf `body` gelegt. Drei davon gibt es im Hausblatt schon — mit ANDERER Bedeutung: --ink im Drop = fast schwarze Flaeche (#0A0A0A) im Haus = die TEXTFARBE (#F3EEE4 im Dunkeln) --gap anderes Mass --sans gleicher Wert, aber fremdes Feld Wirkung von `--ink`: jede Schrift, die das Hausblatt darueber faerbt, wurde schwarz auf schwarz. Sichtbar wurde es NICHT im Bild, das ich mir angesehen habe, sondern erst in der Kontrastwache — drei Durchfaller in der Einwilligungsleiste, 1,07:1. Genau dafuer gibt es sie. Regel daraus: ein fremdes Blatt uebernimmt man nicht, indem man seine Namen neu belegt. Was der Drop braucht und das Haus auch kennt, steht deshalb hier NICHT auf `body`, sondern dort, wo es gebraucht wird. Verwandt: der `in`/`sichtbar`-Fall aus v13 — dieselbe Klasse von Fehler. ----------------------------------------------------------------------- */ body.fear-page{ /* --- Raster und Farben: identisch zu .drop in zz-drop.css --------------- Der Satz "identisch zu .drop" muss auch dann noch stimmen, wenn .drop sich aendert. Am 2026-07-29 hat .drop die Leiter des Hauses uebernommen (24/32/48/64/96, Deckel 1728) — die lange Fassung zieht mit, sonst beginnt derselbe Text auf zwei Seiten an zwei verschiedenen Kanten. */ --edge:24px; --frame:clamp(16px,2.5vw,32px); --hud:clamp(40px,5vh,56px); --deckel:1728px; --spalte:min(calc(100% - 2 * var(--edge)),var(--deckel)); --void:#050505; --carbon:#141414; --smoke:#1F1F1F; --cream:#FFFADA; --bone:#E8E3D8; --sig:#A53A2A; --display:"NotoSerifDisplay",Didot,Georgia,serif; --meta-xs:10px; --meta-sm:11px; --meta-md:12px; --track:.22em; --track-wide:.3em; --e:cubic-bezier(.165,.84,.44,1); /* Eigene Namen fuer die Flaechen dieser Seite — sie beruehren das Hausblatt nicht und koennen deshalb nichts umfaerben, was ihnen nicht gehoert. ZWEITE KORREKTUR am selben Tag. Der erste Anlauf hat sie auf feste helle Werte gesetzt UND `background:var(--void) !important` auf den body gelegt. Damit war die KAPITELSTUFE erschlagen: die lange Fassung faehrt ihre Flaeche ueber `data-akt` von der Nacht in den Tag und steht ab Akt 7 bewusst auf Creme mit dunkler Schrift — "weil der Leser dort etwas entschieden hat". Die Flaeche wurde schwarz, die Schrift blieb dunkel: 60 Durchfaller bei 90 % der Strecke, 1,06:1. Richtig ist, die Stufe NICHT zu ueberfahren, sondern auf die Palette des Drops zu ziehen — der kennt dieselben zwei Toene. Alles Weitere folgt der Stufe dann von selbst, weil es sie abliest statt sie zu behaupten. */ --d-fg:var(--f-ink); --d-fg2:var(--f-ink-dim); --d-hair:var(--f-line); --d-tief:#0A0A0A; cursor:none; } /* Die Leiter, ausgeschrieben wie in zz-drop.css. */ @media(min-width:600px){ body.fear-page{--edge:32px} } @media(min-width:900px){ body.fear-page{--edge:48px} } @media(min-width:1280px){body.fear-page{--edge:64px} } @media(min-width:1680px){body.fear-page{--edge:96px} } /* Die drei Kapitelstufen des Hauses, in den Farben des Drops. Gleiche Spezifitaet wie in zz-modules-4.css, nur spaeter geladen — deshalb gewinnen sie, ohne dass irgendwo ein !important noetig waere. */ body[data-theme="dark"].fear-page{--f-bg:#050505} body[data-theme="dark"].fear-page[data-akt="4"], body[data-theme="dark"].fear-page[data-akt="5"], body[data-theme="dark"].fear-page[data-akt="6"]{--f-bg:#0A0A0A; --f-panel:#141414} body[data-theme="dark"].fear-page[data-akt="7"], body[data-theme="dark"].fear-page[data-akt="8"]{--f-bg:#FFFADA; --f-panel:#F5EFCB} /* Das Drop-Chrom (zz-drop.css) rechnet mit --gap. Es bekommt es hier, wo es ausschliesslich dieses Chrom trifft — nicht auf body, wo das Hausblatt damit rechnet. */ body.fear-page .dhud{--gap:clamp(12px,1.5vw,20px)} @media(pointer:coarse){body.fear-page{cursor:auto}} /* Die Kopfleiste der alten Fassung weicht dem Kamerarahmen. Sie wird nicht entfernt, nur ausgeblendet — ihr Markup traegt den Zurueck-Weg, den der Rahmen uebernimmt. */ body.fear-page .fhdr{display:none} /* ----------------------------------------------- Entsprechung: .dprog ---- */ body.fear-page .fprog{position:fixed;top:0;left:0;right:0;height:1px;z-index:45; background:rgba(255,255,255,.10)} body.fear-page .fprog span{display:block;height:100%;background:var(--sig); transform-origin:0 50%} /* ------------------------------------------------ Entsprechung: .st ------ */ /* Jedes Modul bekommt Luft und eine eigene Flaeche. Die lange Fassung ist kein Plakat — sie wird gelesen —, deshalb keine erzwungene Bildschirmhoehe, aber derselbe Rand und dieselbe Spalte wie im Drop. */ body.fear-page #fear{display:block} body.fear-page .fslot{position:relative; padding:clamp(4rem,13vh,9rem) 0; border-top:1px solid var(--d-hair)} body.fear-page .fslot:first-child{border-top:0} body.fear-page .fslot > .fmod, body.fear-page .fslot .fwrap{width:var(--spalte);margin:0 auto;max-width:none} /* KEIN pauschaler Griff auf .fmod. Hier stand zuerst `background:none;border:0;box-shadow:none;padding:0` — das hat auch die Module entkleidet, die ihre dunkle Flaeche BRAUCHEN: die Uebergabe am Ende der Strecke (.m-hbel, .m-bstr) traegt weisse Schrift auf #16130F. Ohne ihren Grund stand sie auf der Creme des achten Akts, 1,05:1 — vier Durchfaller. Das Hausblatt fuehrt seine Flaechen ohnehin ueber --f-panel, und --f-panel ist oben auf die Drop-Palette gezogen. Hier ist deshalb nichts zu tun. */ /* Der Modulzaehler steht als Vorzeile, wie .meta im Drop. */ /* `position:static` ist hier kein Schmuck: in zz-modules-4.css steht der Zaehler ABSOLUT am Rand. Mit einer festen Breite von 1180 px und ohne Rueckstellung lief er ab seinem alten Ankerpunkt nach rechts hinaus — 120 px Querlauf bei 1440, 21 px am Telefon. Wer eine fremde Regel nur um Breite und Rand ergaenzt, erbt ihre Positionierung mit. */ body.fear-page .mno{position:static;transform:none; display:flex;align-items:center;gap:.8rem; width:var(--spalte);margin:0 auto 1.6rem; font-size:var(--meta-sm);letter-spacing:var(--track);text-transform:uppercase; color:var(--d-fg2);font-variant-numeric:tabular-nums} body.fear-page .mno::after{content:"";flex:1;height:1px;background:var(--d-hair)} body.fear-page .mno i{font-style:normal;opacity:.5;margin:0 .25em} /* Unter 640 px blendet das Hausblatt den Zaehler aus. Diese Entscheidung wird NICHT aufgehoben: der Kamerarahmen zaehlt dort ohnehin mit, zwei Zaehler auf einem Telefonbildschirm sind einer zu viel. Ohne diese Zeile haette die `display:flex`-Regel oben die Ausblendung stillschweigend ueberstimmt. */ @media(max-width:640px){body.fear-page .mno{display:none}} /* --------------------------------------------- Entsprechung: .kap -------- */ body.fear-page .akt{min-height:62svh;display:grid;align-content:center; background:var(--f-bg);border-top:1px solid var(--d-hair); padding:calc(var(--hud) + var(--frame) + var(--gap)) 0} body.fear-page .akt .in{width:var(--spalte);margin:0 auto;display:block} body.fear-page .akt .no{display:block;font-family:var(--display);font-weight:200; font-size:clamp(4rem,14vw,10rem);line-height:.8;letter-spacing:-.05em; opacity:.18;color:var(--d-fg)} body.fear-page .akt h2{font-family:var(--display);font-weight:200; font-size:clamp(2.5rem,6vw,4.4rem);line-height:1;letter-spacing:-.035em; margin:.4rem 0 0;color:var(--d-fg)} body.fear-page .akt .cl{display:block;font-family:var(--sans); font-size:clamp(1rem,1.5vw,1.15rem);color:var(--d-fg2);margin-top:1rem; max-width:34ch} body.fear-page .akt .n{display:block;margin-top:1.2rem; font-size:var(--meta-sm);letter-spacing:var(--track);text-transform:uppercase; color:var(--d-fg2)} /* --------------------------------------------- Entsprechung: .say/.sub --- */ /* Die Ueberschrift traegt die Anzeigeserife und nie unter 40px — dieselbe Hausregel wie im Drop, dieselbe Rechnung ueber --sz und --zoom. */ body.fear-page .fh, body.fear-page .fsay{font-family:var(--display);font-weight:200; --sz:clamp(2.5rem,4.6vw,3.6rem); font-size:max(2.5rem,calc(var(--sz) * var(--zoom,1))); line-height:1.02;letter-spacing:-.03em;color:var(--d-fg); margin:0 0 1.4rem;max-width:22ch} body.fear-page .fsay{--sz:clamp(2.5rem,7vw,5.4rem)} /* Der Auftakt ist die EINZIGE Flaeche, die ihre Farbe nicht von der Kapitelstufe nimmt: er steht immer auf seinem eigenen dunklen Motiv. Nimmt er --f-ink mit, dreht er im achten Akt auf Dunkel und steht schwarz auf schwarz — gemessen 1,00:1. Er bekommt seine Schrift deshalb fest. */ body.fear-page .m-fopen .fsay, body.fear-page .m-fopen .fsub{color:#F2EFE7} /* DIESELBE AUSNAHME, DERSELBE GRUND — dreimal auf dieser Seite. `.m-fopen` (Auftakt), `.m-hbel` (Uebergabe an BELIEVE) und `.m-bstr` tragen ihre EIGENE dunkle Flaeche, dauerhaft, unabhaengig vom Akt. Wer ihnen die Schriftfarbe der Kapitelstufe gibt, faerbt sie im siebten Akt auf Dunkel — und dann steht weisse Marken-Copy unsichtbar auf ihrem eigenen Schwarz. Beim Hinweis auf fachliche Hilfe waren das 1,07:1; gefunden hat es die Pixelwache, nicht das Auge. Merksatz fuer das naechste Mal: eine Flaeche, die ihren Grund SELBST setzt, muss auch ihre Schrift selbst setzen. Sonst erbt sie einen Kontrast, der fuer einen anderen Grund gerechnet wurde. */ body.fear-page .m-hbel, body.fear-page .m-hbel .fnote, body.fear-page .m-hbel .ftx, body.fear-page .m-hbel .fh, body.fear-page .m-bstr, body.fear-page .m-bstr .ftx, body.fear-page .m-bstr .fh{color:#F2EFE7} body.fear-page .m-hbel .fnote{border-left-color:var(--sig)} body.fear-page .ftx, body.fear-page .fsub{font-family:var(--sans); font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.5; color:var(--d-fg);opacity:.86;max-width:56ch;margin:0 0 1.1rem} /* ------------------------------------------ Entsprechung: .z / .bind ----- */ /* Der Satzsetzer arbeitet hier genauso: Satzende und Redepause beginnen eine neue Zeile, und kein Umbruch laesst ein oder zwei Woerter allein stehen. Auf der langen Fassung ist das der eigentliche Gewinn — sie besteht fast nur aus Fliesstext, und genau dort las man bisher ueber jeden Punkt hinweg. */ body.fear-page .z{display:block;text-wrap:balance} body.fear-page .ftx .z,body.fear-page .fsub .z{text-wrap:pretty} body.fear-page .bind{white-space:nowrap} body.fear-page .fh .z + .z{margin-top:.10em} body.fear-page .fh .z[data-art="satz"] + .z{margin-top:.20em} body.fear-page .ftx .z + .z,body.fear-page .fsub .z + .z{margin-top:.12em} /* Eine Redepause ruecken wir minimal ein — so sieht man beim Ueberfliegen, welche Zeile ein neuer Satz ist und welche die Fortsetzung. */ body.fear-page .ftx .z[data-art="pause"] + .z{padding-left:1.1em} /* -------------------------------------------- Entsprechung: .w Auftritt -- */ /* Das Fenster ist groesser als die Zeile — siehe --zz-tinte-* in zz-corporate.css. Gemessen fehlten hier 27 von 38 Woertern unten 0,109 bis 0,122 em, darunter "Koerper", "Signal", "Lage", "gelernte", "Mythos". Die Luft kommt als Padding und wird per negativem Aussenmass wieder eingezogen — die Zeile steht danach exakt da, wo sie vorher stand. Der Zuschlag OBEN ist hier Vorsorge, kein behobener Befund: die einzige Akzent-Versalie in Anzeigegroesse ("Uebergabe") tritt im Messlauf nie in den sichtbaren Zustand, es liegt also KEINE Messung dazu vor — nur die Rechnung (0,021 em zu wenig). Wachsen die deutschen Flaechen, greift der Zuschlag; behauptet werden darf er trotzdem nicht als geprueft. */ body.fear-page .w{display:inline-block;overflow:hidden;vertical-align:bottom; padding-top:var(--zz-tinte-oben);padding-bottom:var(--zz-tinte-unten); margin-top:calc(-1 * var(--zz-tinte-oben)); margin-bottom:calc(-1 * var(--zz-tinte-unten))} body.fear-page .w > span{display:inline-block; transform:translateY(calc(105% + var(--zz-tinte-oben) + var(--zz-tinte-unten))); transition:transform 900ms var(--e);transition-delay:var(--d,0ms)} body.fear-page .sichtbar .w > span{transform:none} /* Die Textspalte tritt nach dem Kopf ein, nicht mit ihm. */ body.fear-page .fslot .ftx,body.fear-page .fslot .fsub{ opacity:0;transform:translateY(14px); transition:opacity 700ms var(--e) 380ms,transform 700ms var(--e) 380ms} body.fear-page .fslot.sichtbar .ftx,body.fear-page .fslot.sichtbar .fsub{ opacity:.86;transform:none} /* --------------------------------------------- Entsprechung: .motiv ------ */ /* Die Motive standen hier als flaechige Stimmungsbilder. Sie werden zu gerahmten Bildern — scharf, in Farbe, mit Vorhang beim Eintritt. Dieselbe Behandlung wie im Drop, damit ein Bild auf beiden Seiten dasselbe bedeutet. */ body.fear-page .im{position:relative;overflow:hidden; border:1px solid var(--d-hair); background-size:cover;background-position:center; filter:saturate(.94) contrast(1.04); transform:scale(1.04); transition:transform 1400ms var(--e),filter 700ms var(--e), border-color 500ms var(--e)} body.fear-page .sichtbar .im{transform:scale(1)} body.fear-page .fig{position:relative} /* ----------------------------------------------- Quellzeilen und Notiz --- */ body.fear-page .fnote,body.fear-page .q,body.fear-page .qz{ font-size:var(--meta-md);line-height:1.5;color:var(--d-fg2)} body.fear-page .fnote{border-left:1px solid var(--sig);padding-left:1rem; margin-top:1.2rem} /* Entsprechung zu #drop:empty in zz-drop.css — gleiche Ursache, gleiche Reserve. `
` kommt leer aus dem Server, die Module setzt das Skript; bis dahin steht die Fussleiste im Bild und wird danach nach unten geschoben. Gemessen: CLS 0,245 im unveraenderten Stand. Eine Bildschirmhoehe ist die Reserve, weil die erste Flaeche selbst so hoch ist (R48). */ #fear:empty{min-height:100svh} /* ------------------------------------------------ Entsprechung: .dfoot --- */ body.fear-page .fend{background:var(--d-tief);color:#8A8A8A; padding:clamp(3rem,9vh,5rem) 0;border-top:1px solid rgba(255,255,255,.12)} body.fear-page .fend .wrap{width:var(--spalte);margin:0 auto;display:grid;gap:1rem} body.fear-page .fend .lbl{font-size:var(--meta-sm);letter-spacing:var(--track); text-transform:uppercase;color:#8A8A8A} /* Entsprechung zu .dfoot a: Bedienflaeche statt Zierzeile. 24x24 ist die harte Untergrenze (R28b), 44 das Hausmass; der Fokusrahmen braucht 2 px bei 3:1 (R68) und darf nicht der Unterstrich sein. */ body.fear-page .fend a{color:#C7C2B8;text-decoration:none; min-height:44px;display:inline-flex;align-items:center; border-bottom:1px solid var(--sig);padding-bottom:2px} body.fear-page .fend a:hover{color:#fff} body.fear-page .fend a:focus-visible{outline:2px solid var(--sig);outline-offset:3px} /* -------------------------------------------------------- BERUEHRUNG ----- */ /* Wortgleich mit dem Drop-Block. Nur an feinen Zeigegeraeten — auf dem Telefon bliebe ein Hover-Zustand nach der Beruehrung haengen. */ @media(hover:hover) and (pointer:fine){ body.fear-page .fig:hover .im{transform:scale(1.05); filter:saturate(1.06) contrast(1.07);border-color:var(--sig)} body.fear-page .fh .z{transition:opacity 420ms var(--e)} body.fear-page .fh:hover .z{opacity:.40} body.fear-page .fh:hover .z:hover{opacity:1} body.fear-page .fslot{transition:background-color 600ms var(--e)} body.fear-page .fslot:hover{background-color:rgba(255,255,255,.014)} } @media(prefers-reduced-motion:reduce){ body.fear-page .w > span,body.fear-page .im, body.fear-page .fslot .ftx,body.fear-page .fslot .fsub{transition:none} body.fear-page .w > span{transform:none} body.fear-page .fslot .ftx,body.fear-page .fslot .fsub{opacity:.86;transform:none} body.fear-page .im{transform:none} } /* ============================================================================= KAPITEL-PLAKAT — Stilschicht der Lesestrecke (Design-Scout R1 + R3-Anleihe, Operator 2026-09-08: "SOTA ab, wie die anderen Module"). Nur Token des Hauses (--f-*, --d-hair, --sig, --mark, --sans, --spalte). ============================================================================= */ /* 1 · Prosa ist Prosa: Lesemaß, Zeilenhöhe, keine Lyrik-Umbrüche. */ body.fear-page .ftx,body.fear-page .fsub{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.6; max-width:62ch;color:var(--f-ink)} body.fear-page .fh{font-family:var(--mark);font-weight:200;letter-spacing:-.02em;line-height:1; font-size:clamp(2.4rem,1.6rem + 3.2vw,4.4rem);max-width:16ch;margin:0 0 1.4rem} body.fear-page .fnote{max-width:52ch} /* 2 · Eintritt als Block, nie zeilenweise. */ body.fear-page .fslot{opacity:0;transform:translateY(12px); transition:opacity 380ms var(--e),transform 380ms var(--e)} body.fear-page .fslot.sichtbar{opacity:1;transform:none} body.fear-page .fslot .ftx,body.fear-page .fslot .fsub{opacity:1;transform:none;transition:none} @media (prefers-reduced-motion:reduce){body.fear-page .fslot{opacity:1;transform:none;transition:none}} /* 3 · Kapitel als Plakat: Vollbild, Motiv des Kapitels, Riesenziffer, Ausgang rechts. */ body.fear-page .akt{position:relative;min-height:100svh;display:grid;align-content:center; overflow:hidden;isolation:isolate;padding:clamp(5rem,14vh,9rem) 0} body.fear-page .akt .bg{position:absolute;inset:-6% 0;z-index:0;background:center/cover no-repeat; filter:grayscale(1) contrast(1.05)} body.fear-page .akt .veil{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.72))} body.fear-page .akt .in{position:relative;z-index:2;color:var(--f-ink)} body.fear-page .akt .no{display:block;font-family:var(--mark);font-weight:200; font-size:clamp(5rem,22vw,16rem);line-height:.8;letter-spacing:-.05em;opacity:.22} body.fear-page .akt h2{font-family:var(--mark);font-weight:200;text-transform:none; font-size:clamp(2.5rem,6vw,4.4rem);line-height:1;letter-spacing:-.035em;margin:.4rem 0 0;max-width:14ch} body.fear-page .akt .cl{display:block;font-family:var(--sans);font-size:clamp(1rem,1.5vw,1.15rem); color:var(--f-ink-dim);margin-top:1rem;max-width:34ch} body.fear-page .akt .n{display:block;font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase; color:var(--f-ink-dim);margin-top:1.6rem} body.fear-page .akt .kexit,body.fear-page .rail .kexit{display:inline-flex;align-items:center;gap:.6em; min-height:44px;margin-top:1.6rem;font-family:var(--sans);font-size:.75rem;letter-spacing:.22em; text-transform:uppercase;color:var(--f-ink);text-decoration:none;border-bottom:1px solid var(--sig);padding-bottom:.35em} body.fear-page .kexit i{width:1.6em;height:1px;background:currentColor;transition:width 300ms var(--e)} body.fear-page .kexit:hover i,body.fear-page .kexit:focus-visible i{width:2.6em} @media (min-width:900px){ body.fear-page .akt .in{position:relative} body.fear-page .akt .kexit{position:absolute;right:0;top:50%;transform:translateY(-50%);margin-top:0} } /* 4 · Rechte Spalte: Zähler, Kapitel, Ausgang. Positionsmarke entfällt. */ body.fear-page .mno{display:none} body.fear-page .fslot .rail{display:none} @media (min-width:1100px){ body.fear-page .fslot{display:grid;grid-template-columns:minmax(0,760px) minmax(220px,1fr); column-gap:clamp(3rem,7vw,9rem);width:var(--spalte);margin:0 auto} body.fear-page .fslot > .fmod{grid-column:1;width:auto;margin:0;max-width:none} body.fear-page .fslot > .fmod .fwrap{width:auto;max-width:none;margin:0} body.fear-page .fslot .rail{display:block;grid-column:2;position:sticky;top:clamp(6rem,16vh,9rem); align-self:start;text-align:right;color:var(--f-ink-dim)} body.fear-page .rail .rz{font-family:var(--mark);font-weight:200;font-size:clamp(4rem,7vw,7rem); line-height:.85;letter-spacing:-.04em;color:var(--f-ink)} body.fear-page .rail .rz i{font-style:normal;opacity:.35;margin:0 .1em;font-size:.55em} body.fear-page .rail .rk{font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;margin-top:1rem} body.fear-page .rail .kexit{margin-top:1.4rem} /* Vollflächen der Übergabe laufen über beide Spalten, ohne Spalte. */ body.fear-page .fslot:has(.m-hbel),body.fear-page .fslot:has(.m-bstr),body.fear-page .fslot:has(.m-fopen){display:block;width:auto} body.fear-page .fslot:has(.m-hbel) .rail,body.fear-page .fslot:has(.m-bstr) .rail,body.fear-page .fslot:has(.m-fopen) .rail{display:none} } /* 5 · Bedienformen in Hausform: Zeilen mit Haarlinie statt Karten, Tabs statt Pillen. */ body.fear-page .m-fsort{gap:0;border-top:1px solid var(--f-line-str)} body.fear-page .m-fsort .cs{border:0;border-bottom:1px solid var(--f-line);border-radius:0;padding:1.4rem 0} body.fear-page .m-fsort .q{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.5;margin-bottom:1rem;max-width:52ch} body.fear-page .m-fsort .opt{gap:0} body.fear-page .m-fsort .opt button,body.fear-page .m-fname .w{border:0;border-bottom:1px solid transparent;border-radius:0; padding:.7rem 1rem .6rem 0;margin-right:1.4rem;min-height:44px;font-size:.75rem;letter-spacing:.18em; text-transform:uppercase;color:var(--f-ink-dim);background:transparent} body.fear-page .m-fsort .opt button:hover,body.fear-page .m-fname .w:hover{color:var(--f-ink)} body.fear-page .m-fsort .cs.done .opt button.pick{color:var(--f-ink);border-bottom-color:var(--f-ink-dim)} body.fear-page .m-fsort .cs.done .opt button.ans,body.fear-page .m-fname .w.on{background:transparent;color:var(--f-ink); border-bottom-color:var(--f-sig)} body.fear-page .m-fsort .why{border-top:0;padding-top:.6rem;margin-top:.6rem;font-size:1rem;line-height:1.55;max-width:60ch} body.fear-page .m-fsort .why .lb{display:block;font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase; color:var(--f-sig-tx,var(--f-sig));margin-bottom:.3rem} body.fear-page .fres{max-width:60ch} /* 6 · Kennzahl-Module: die Zahl ist der Träger (R3). */ body.fear-page .m-fnum .r .m b,body.fear-page .m-fnum .r .f b{font-family:var(--mark);font-weight:200; font-size:clamp(1.6rem,2.4vw,2.4rem);line-height:1;letter-spacing:-.02em} /* 7 · Streifen und Haus-Fuß folgen dem Ton der Strecke (Nacht → Tag): Token der Lesestrecke statt der Corporate-Schale. Ein verborgenes Wort bleibt verborgen — display:block darf [hidden] nie überstimmen (Zustand gehört in den Zustand). */ body.fear-page .dfoot.dfoot-schmal{background:var(--f-bg);color:var(--f-ink-dim);border-top:1px solid var(--f-line)} body.fear-page .dfoot.dfoot-schmal .wm,body.fear-page .dfoot.dfoot-schmal a{color:var(--f-ink)} body.fear-page #zzfoot{--paper:var(--f-bg);--surface:var(--f-panel);--ink:var(--f-ink);--ink2:var(--f-ink); --muted:var(--f-ink-dim);--line:var(--f-line-str);--line-soft:var(--f-line);--signal:var(--f-sig);--auf-film:var(--f-ink)} body.fear-page .fres .fres-wort[hidden]{display:none}