/* ———————————————————————————————————————————————————————————— #BCD — Mobile-Schicht, Schritt 1 (systemische Schicht). Neu geschrieben nach Dominiks Vorlage (quelle/src/mobil.css, Stand 07.08.), nicht kopiert. Plan: _bau/mobile_vorlage_2026-09-21/BAUPLAN_MOBILE.md. GELTUNG. Jede Regel hängt an der Klasse `m-schicht` am . Die Klasse setzt der -Einzeiler (einbinden.py), mobil.js hält sie aktuell. Oberhalb der Grenze ist sie nie gesetzt — dann greift hier nichts. Diese Datei enthält deshalb KEINE Breiten-Media-Query und KEINE Zahl für die Grenze. Die Zahl steht genau einmal: in einbinden.py. ZWEI STUFEN. html.m-schicht Geltungsbedingung trifft (setzt schon der Einzeiler) html.m-schicht.m-leiste zusätzlich: mobil.js hat die Fußleiste wirklich gebaut Alles, was nur MIT Leiste Sinn ergibt (Kapitel kürzen, Platz schaffen, Safe-Area am Footer), hängt an der zweiten Stufe. Fällt mobil.js aus, bleibt es bei Stufe 1 — der Master steht dann unverkürzt und bedienbar da. NICHT PORTIERT (mit Fundstelle): `#helfen .zrow` (I-07, steht im Master) · `footer{padding-bottom}` + `body.mf-pad` (S-3/E19 → Platzhalter) · `-webkit-tap-highlight-color:transparent` + `.mfuss a:active{filter}` (E11 — die Tipp-Rückmeldung des Masters aus `tb-ios` gilt allein) · Theme-Knopf, Sprachschalter · `-webkit-overflow-scrolling` (wirkungslos). Schritt 2 (Topbar, Menü, Startfläche) und Schritt 3 (`.hero`, `tb-menu`) hängen sich unten an — nicht in diesen Teil schreiben. ———————————————————————————————————————————————————————————— */ /* ============ 0 — MASSE ============ */ /* Nur unter der Klasse definiert: oberhalb der Grenze existieren die Variablen nicht. `env()` ist in Chromium 0 — die echte Höhe zeigt erst das iPhone (Haltepunkt 1b). */ /* Schmaler (Valentin 25.09.2026, „zu groß"): Safari-Leiste sichtbar → Safe-Area 0 → 44 px (Tipp-Minimum). Safari-Leiste eingefahren → Safe-Area ≈34 px → 28 px Schriftzeile + Safe-Area = 62 px statt 90. Die ganze Fläche bleibt tippbar, also nie unter 44. */ html.m-schicht{ --msafe:env(safe-area-inset-bottom, 0px); --mfuss-ges:max(44px, calc(28px + var(--msafe))); } /* ============ 1 — RASTER (P01, S-9) ============ */ html.m-schicht{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } /* Kein Zittern nach rechts. Schlägt auf `index` bei gleicher Spezifität `html.gate-open{overflow:hidden}` nur in der x-Achse; y bleibt gesperrt. */ html.m-schicht, html.m-schicht body{ overflow-x:clip; } html.m-schicht{ scrollbar-width:none; } html.m-schicht::-webkit-scrollbar{ width:0; height:0; } /* ============ 2 — FUSSLEISTE (P02, S-7, L-03, E25, E27) ============ */ /* Feste Werte bzw. Fallbacks: auf `agb coc datenschutz impressum plus` fehlen die Tokens (9 von 11), Vererbung trüge nur zufällig. Die Fallbacks sind die Werte aus index.html :root (dunkles Theme, das einzige nach Schritt 0). z 560: über Master-Menü (520/530) und Gate (485); unter `.vov` (1200), `why .schleier` (600, → E22 in Schritt 4) und `.vpop` (600). */ html.m-schicht .mfuss{ position:fixed; left:0; right:0; bottom:0; z-index:560; display:grid; grid-template-columns:1fr; box-sizing:border-box; margin:0; height:var(--mfuss-ges); padding:0; border-top:1px solid var(--line, rgba(244,236,223,.13)); font-family:var(--sans, "Schibsted Grotesk", -apple-system, sans-serif); } /* Tipp-Ziel = ganze Zelle: volle Breite × mindestens 44 px (E27/T1). Login raus (25.09.2026): die Leiste hat nur noch eine Zelle. Die Zelle reicht bis zum Bildrand und polstert die Safe-Area selbst — so trägt sie ihre eigene Fläche bis unten (Vorlage: Streifen leer). Spezifität (0,3,2) schlägt die Link-Regeln der Textseiten. */ html.m-schicht .mfuss a.mf-cta{ display:flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:44px; min-height:44px; height:100%; margin:0; padding:0 12px var(--msafe); border:0; border-radius:0; font-size:14px; line-height:1.2; letter-spacing:.04em; font-weight:500; text-decoration:none; text-transform:none; white-space:nowrap; } /* Volle orange Zeile — ENTSCHEIDUNG Valentin 25.09.2026, bewusste Ausnahme von der Bible („Neutrales Schwarz, ein Signal": Orange ≤3 %, nie als Fläche). Gemessen: 6,5 % des ersten Bildschirms bei 390 × 844. Die gebaute Alternative (dunkel + orange Pille, ≈2,3 %) hat er verworfen. */ html.m-schicht .mfuss a.mf-cta{ background:var(--orange, #FE623C); color:#0B0B0B; font-weight:600; } /* Die Leiste weicht dem Seiten-Knopf (Valentin 25.09.2026): `m-leiste-weicht` setzt mobil.js, solange ein Seiten-Link auf reg.bcd.net im Bild steht. Nur die Leiste geht, der Platzhalter bleibt — kein Springen. `visibility` erst nach dem Ausblenden: kein Tipp-Ziel, kein Fokus. */ html.m-schicht .mfuss{ transition:opacity .2s ease, transform .2s ease, visibility 0s linear 0s; } html.m-schicht.m-leiste-weicht .mfuss{ opacity:0; transform:translateY(100%); visibility:hidden; pointer-events:none; transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s; } @media (prefers-reduced-motion: reduce){ html.m-schicht .mfuss, html.m-schicht.m-leiste-weicht .mfuss{ transition:none; } } /* ============ 3 — PLATZ FÜR DIE LEISTE (S-3, E19, I-09, L-02) ============ */ /* Ein Mechanismus, immer additiv: ein leeres Element als letztes Body-Kind vor der Leiste. Es hängt weder am Body-Polster (Textseiten: 120 px bleiben) noch an der Reihenfolge der Stylesheets (`sessions`: Footer-Regel im Body). `index`: der Footer trägt `scroll-snap-align:end`. Der Platzhalter selbst ist KEIN Snap-Punkt; damit der Footer über der Leiste einrastet statt dahinter, verkürzt `scroll-padding-bottom` (Abschnitt 4) den Snap-Port. */ html.m-schicht .mfuss-platz{ display:block; flex:none; width:100%; height:var(--mfuss-ges); margin:0; padding:0; border:0; background:none; pointer-events:none; } /* ============ 3a — FREI ROLLEN (Valentin 23.09.2026) ============ */ /* `index` rastet im Master an 19 Kapiteln ein (`proximity` + `.vp{scroll-snap-stop:always}`). Am iPhone fühlte sich das „stockig“ an. Gemessen (probe_scroll.mjs, 390×844): 22 von 33 Zwischenlagen ziehen bis 249 px nach, zum Teil rückwärts; die Frame-Zeiten sind sauber. Auf der Schicht gilt deshalb kein Snap, der Desktop bleibt unverändert. Stufe 1: das hängt nicht an der Leiste. Spezifität (0,1,1) schlägt `html{…}` aus index (0,0,1). */ html.m-schicht{ scroll-snap-type:none; } /* ============ 4 — NUR MIT GEBAUTER LEISTE ============ */ html.m-schicht.m-leiste{ scroll-padding-bottom:var(--mfuss-ges); } /* I-08/E14: `.vp` allein genügt nicht — fünf Kapitel tragen ältere ID-Regeln mit `min-height:100svh` (Spezifität 1,0,0). Hier (1,2,1) bzw. (0,3,1). Browser ohne `svh` verwerfen die Zeile; dort bleibt der Master ungekürzt. */ html.m-schicht.m-leiste .vp, html.m-schicht.m-leiste #mitglieder, html.m-schicht.m-leiste #coc, html.m-schicht.m-leiste #vorteile, html.m-schicht.m-leiste #mitgliedschaften, html.m-schicht.m-leiste #entstehung{ min-height:calc(100svh - var(--mfuss-ges)); } /* NAHT (21.09.2026, Valentins iPhone-Foto IMG_6536): Das Finale `#ende` trägt nur ~200 px Inhalt. In voller Kapitelhöhe und zentriert standen darüber und darunter je ~300 px leer — am Handy sichtbar, weil der Snap hier nur `proximity` ist. `#ende` ist deshalb die EINE benannte Ausnahme von I-08/E14: Höhe aus dem Inhalt, unabhängig von `svh`. Polster oben bleibt das Kapitel-Polster des Masters (`--nav-h` + 12 = 76 px); unten dasselbe Maß statt 28 px, damit das Finale in seinem Kasten mittig bleibt wie im Master und nicht am Footer-Strich klebt. Gemessen 390×844: Naht 425 → 185 px, Finale→Footer 300 → 107 px. Spezifität (1,2,1) schlägt `.vp` darüber (0,3,1) und die Master-Regel `@media(max-width:900px){.vp{padding-bottom:28px}}` (0,1,0). */ html.m-schicht.m-leiste #ende{ min-height:0; padding-bottom:calc(var(--nav-h) + 12px); } /* S-4, Variante A (Empfehlung im Entwurfsbericht): Die Leiste trägt die Safe-Area, der Footer-Rand aus `tb-ios` (`footer{margin-bottom:env(…)}`) wäre doppelt. Überschreibt per Spezifität, ohne den Generator zu fahren. Wird stattdessen Variante B (Generator) gebaut: diesen Block streichen. */ html.m-schicht.m-leiste footer{ margin-bottom:0; } /* Übergang nur für Schritt 1 (`index`, Master-Menü bleibt): `.mnav` hat 60 px Unterpolster, die Leiste deckt 56 px + Safe-Area — `.mnav-foot` läge sonst auf Notch-Geräten darunter. Bleibt nach Schritt 2 für den Fall „Leiste steht, Menü-Bau gescheitert" (kein `m-menue`); unter `m-menue` schlägt Abschnitt 7 sie. */ html.m-schicht.m-leiste .mnav{ padding-bottom:calc(60px + var(--mfuss-ges)); } /* Hinweis-Fähnchen des Masters (`bottom:70px`, z 600) über die Leiste heben. */ html.m-schicht.m-leiste .vpop{ bottom:calc(70px + var(--mfuss-ges)); } /* ============ 5 — DRUCK ============ */ @media print{ html.m-schicht .mfuss, html.m-schicht .mfuss-platz{ display:none; } } /* =================================================================== SCHRITT 2 — ANFANG (Startseite G). Anfügen HINTER Abschnitt 5 (Druck) von Schritt 1. Neu geschrieben nach quelle/src/mobil.css, nicht kopiert. STUFE 3: `html.m-schicht.m-menue`. `m-menue` setzt nur mobil.js (`schritt2Auf()`), nachdem das Menü der Schicht gebaut ist. Ohne die Klasse greift hier nichts: Master-Burger (Striche) und Master-Menü bleiben, wie sie sind — auch wenn nur das JS ausfällt. Die Vorlage hatte genau diese Lücke (Striche per CSS aus, Wort nur per JS). Keine Breiten-Media-Query, keine Grenz-Zahl. Eine Höhen-Query (Abschnitt 8, Startfläche auf niedrigen Geräten) — sie ist keine Geltungsbedingung. NICHT PORTIERT: `.m-rechts`, `.m-lang`, `.theme-btn.m-top` (B5, Toggle- Ausbau — rechte Kopfspalte bleibt leer, es gibt kein Element dafür) · die Outline-Abschaltung der Story-Karten (Vorlage mobil.css:327, I-18b) · 8x tap-highlight + `:active`- Skalierung (E11, Rückmeldung kommt allein aus `tb-ios`) · Bänder, Zahlenleiste, Raster, `.mn-wenig` · P09 Reduced Motion (K20: `tb-ios` deckt es global) · `.mn-ohne` (Ersatzbild; 46 von 46 Kacheln haben ein Bild — mobil.js meldet eine Kachel ohne Bild laut). =================================================================== */ /* ============ 6 — TOPBAR (P03, I-06, E27) ============ */ /* Raster `1fr auto 1fr`: Wortmarke mittig, links das Wort, rechts NICHTS. Polster mit Safe-Area (I-06) — der Kurzschreiber überschreibt die vier Langformen des Masters per Spezifität (0,3,1), Reihenfolge egal. */ html.m-schicht.m-menue .topbar{ grid-template-columns:1fr auto 1fr; padding:0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); } /* `grid-row:1` ist Pflicht: der Burger steht im Quelltext NACH der Wortmarke. */ html.m-schicht.m-menue .topbar .logo-btn{ grid-column:2; grid-row:1; justify-self:center; padding:0; } html.m-schicht.m-menue .topbar .burger{ grid-column:1; grid-row:1; justify-self:start; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:0; width:auto; min-width:44px; height:44px; min-height:44px; margin:0; padding:0; font-family:var(--sans); font-size:12px; font-weight:500; line-height:1; letter-spacing:.16em; text-transform:uppercase; color:var(--text); } html.m-schicht.m-menue .topbar .burger span:not(.m-wort){ display:none; } html.m-schicht.m-menue .topbar .burger .m-wort{ display:inline; width:auto; height:auto; background:none; /* gegen `.burger span{…}` des Masters */ } /* ============ 7 — MENÜ-GERÜST (P05, I-10, E15) ============ */ /* `#mnav` bleibt der Behälter (Zustand `open` / `html.mnav-open` wie im Master, `overflow:hidden` am kommt von dort). Beginnt UNTER der Topbar, z 495: unter Topbar (500), über Gate (485) und Mega (490). Schlägt die Übergangsregel aus Schritt 1 (`.mnav{padding-bottom:…}`, gleiche Spezifität, steht früher) — die bleibt für den Fall „Leiste ja, Menü-Bau gescheitert". */ html.m-schicht.m-menue .mnav{ top:var(--nav-h); z-index:495; padding:0; overflow:hidden; } html.m-schicht.m-menue .mnav.open{ display:flex; flex-direction:column; } /* I-10: EINE Einblend-Bewegung — die des Masters (`.mnav.open{animation: mnavAuf}`) bleibt, die Schicht fügt für das Öffnen keine hinzu. `mnRein` unten ist der Ebenenwechsel, kein Einblenden des Menüs. */ /* Master-Kinder aus, solange die Schicht steht (sie werden nicht gelöscht). */ html.m-schicht.m-menue .mnav > .mnav-close, html.m-schicht.m-menue .mnav > #mnav-content, html.m-schicht.m-menue .mnav > .mnav-foot{ display:none; } html.m-schicht.m-menue .mn-kopf{ flex:none; display:flex; align-items:center; justify-content:space-between; height:46px; padding:0 18px; background:var(--bg); border-bottom:1px solid var(--line); /* E15: behalten, am ersten Render gegen W-27 halten */ } html.m-schicht.m-menue .mn-kopf[hidden]{ display:none; } html.m-schicht.m-menue .mn-zurueck{ display:flex; align-items:center; gap:7px; min-width:44px; height:44px; padding:0; margin:0; background:none; border:0; cursor:pointer; font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); } html.m-schicht.m-menue .mn-titel{ font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--text); } html.m-schicht.m-menue .mn-titel .mn-stand{ font-style:normal; color:var(--text-muted); letter-spacing:.10em; font-variant-numeric:tabular-nums; white-space:nowrap; } /* Bühne endet an der Oberkante der Fußleiste — aber nur, wenn es die Leiste gibt (Stufe `m-leiste` aus Schritt 1). Daraus folgt: `.mn-e2.clientHeight` IST die nutzbare Höhe, inklusive env(safe-area-inset-bottom). mobil.js rechnet damit (`hoehen()`), ohne eine zweite Zahl für die Leiste. */ html.m-schicht.m-menue .mn-buehne{ position:relative; flex:1 1 auto; min-height:0; } html.m-schicht.m-menue.m-leiste .mn-buehne{ margin-bottom:var(--mfuss-ges); } html.m-schicht.m-menue .mn-ebene{ position:absolute; top:0; right:0; bottom:0; left:0; display:flex; flex-direction:column; transition:transform .38s var(--ease), opacity .28s var(--ease); } html.m-schicht.m-menue .mn-ebene[hidden]{ display:none; } html.m-schicht.m-menue .mn-e1.raus{ transform:translateX(-26%); opacity:0; pointer-events:none; } /* Fokus sperrt mobil.js per `inert` */ html.m-schicht.m-menue .mn-e2.rein{ animation:mnRein .38s var(--ease) both; } @keyframes mnRein{ from{ transform:translateX(16%); opacity:0 } to{ transform:none; opacity:1 } } /* ============ 8 — STARTFLÄCHE (P10/P11, E17, E27) ============ */ /* `overflow-y:auto` statt `hidden`: passt die Fläche einmal nicht (sehr niedriges Fenster, große Safe-Area), rollt sie — nichts wird unerreichbar. */ html.m-schicht.m-menue.mstart-flaeche .mn-e1{ display:flex; flex-direction:column; gap:0; padding:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; } html.m-schicht.m-menue .mf-label{ flex:none; margin:0; padding:13px 18px 8px; font-family:var(--sans); font-size:10px; letter-spacing:.20em; text-transform:uppercase; color:var(--text-muted); } html.m-schicht.m-menue .mf-reihe{ flex:0 0 auto; display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; height:132px; } html.m-schicht.m-menue .mf-kachel{ position:relative; overflow:hidden; min-width:44px; min-height:44px; margin:0; padding:0; border:0; cursor:pointer; background:#151310; } html.m-schicht.m-menue .mf-bild{ position:absolute; top:0; right:0; bottom:0; left:0; background-size:cover; background-repeat:no-repeat; background-position:var(--mn-focal, 50% 40%); } html.m-schicht.m-menue .mf-schleier{ position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(180deg, rgba(11,11,11,.20) 0%, rgba(11,11,11,.72) 100%); } html.m-schicht.m-menue .mf-kachel::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--akzent, transparent); } /* I-13: kleine Tabelle der drei Haus-Farben (Tokens des Masters). */ html.m-schicht.m-menue .mf-kachel[data-grp="netzwerk"]{ --akzent:var(--c-event); } html.m-schicht.m-menue .mf-kachel[data-grp="invest"]{ --akzent:var(--c-invest); } html.m-schicht.m-menue .mf-kachel[data-grp="stiftung"]{ --akzent:var(--c-social); } html.m-schicht.m-menue .mf-name{ position:absolute; left:10px; right:10px; bottom:11px; text-align:left; font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.08em; line-height:1.1; text-transform:uppercase; color:#F4ECDF; } html.m-schicht.m-menue .mf-mitte{ flex:1 0 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px; padding:18px 26px; text-align:center; } html.m-schicht.m-menue .mf-claim{ margin:0; font-family:var(--serif); font-weight:300; font-size:31px; line-height:1.12; color:var(--text); } html.m-schicht.m-menue .mf-sub{ margin:0; max-width:300px; font-family:var(--sans); font-size:13px; line-height:1.5; color:var(--text-muted); } /* E27: Vorlage 146x39 -> Tipp-Ziel 44 hoch. */ html.m-schicht.m-menue .mf-weiter{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; margin:3px 0 0; padding:0 22px; border-radius:999px; border:1px solid var(--line-mid); background:none; cursor:pointer; font-family:var(--sans); font-size:12.5px; letter-spacing:.05em; color:var(--text); } /* Niedrige Geräte (375x667: Mitte gerechnet 215 px hoch; volle Subline dreizeilig + 44er Knopf brauchen bei 31 px Claim rund 230). Gerechnet, nicht gerendert. */ @media (max-height:700px){ html.m-schicht.m-menue .mf-mitte{ gap:8px; padding:8px 26px; } html.m-schicht.m-menue .mf-claim{ font-size:27px; } } /* ============ 8b — DOPPELTIPP (Klickpfad-Schleife 22.09.2026) ============ Die Ziehharmonika verlangt ZWEI Tipps (erster wählt, zweiter folgt). Ohne `touch-action:manipulation` deutet iOS Safari zwei schnelle Tipps auf dieselbe Stelle als Doppeltipp-Zoom und schluckt den zweiten Klick — die Seite bleibt, wo sie war ("zweimal nichts, beim dritten Mal richtig", Valentin 22.09. ~16:00). HYPOTHESE, in Chromium/WebKit-Playwright nicht messbar (kein Zoom-Gestenmodell; dort landen alle 4 Tipp-Abstände 120–700 ms richtig). `manipulation` lässt den Zwei-Finger-Zoom frei (Sheet 9). Gilt für alle Tipp-Ziele der Schicht — auch die zwei "Launching soon"-Karten (div.mn-karte.mn-bald, kein a/button): wirksam wäre schon der Wert am Vorfahren #mnav (touch-action schneidet sich über die Kette), aber die Prüfschleife liest den Wert am Element, und eine Regel, die für neun Karten gilt und zwei auslässt, ist eine zweite Fassung. */ html.m-schicht :is(#mnav, #burger, .mfuss, .topbar .logo-btn, .tb-kopf, #gate), html.m-schicht :is(#mnav, .mfuss, .tb-kopf, #gate) :is(a, button, .mn-karte){ touch-action:manipulation; } /* ============ 9 — EBENE 2: KARTENBASIS (P06, E16) ============ */ html.m-schicht.m-menue .mn-e2{ overflow:hidden; overscroll-behavior:contain; } html.m-schicht.m-menue .mn-e2.mn-rollt{ overflow-y:auto; } /* B6-Rückfall, s. Abschnitt 10 */ html.m-schicht.m-menue .mn-liste{ display:flex; flex-direction:column; flex:none; margin:0; padding:0; } html.m-schicht.m-menue .mn-karte{ position:relative; display:block; flex:none; width:100%; overflow:hidden; border-top:1px solid var(--line); color:var(--text); text-decoration:none; } /* E15 am Render (21.09.): die Linie unter der Zurück-Zeile und die Oberlinie der ersten Karte lagen als 2 px aufeinander. */ html.m-schicht.m-menue .mn-karte:first-child{ border-top:0; } html.m-schicht.m-menue .mn-karte.mn-bald{ cursor:default; } /* I-18b: die Outline wird NICHT abgeschaltet. Fokusring innen, weil die Karte `overflow:hidden` trägt und randlos am Bildrand steht (Muster `.kdot:focus-visible` des Masters). */ html.m-schicht.m-menue .mn-karte:focus-visible, html.m-schicht.m-menue .mf-kachel:focus-visible{ outline:2px solid var(--sand, #C9B79A); outline-offset:-3px; } html.m-schicht.m-menue .mn-bild{ position:absolute; top:0; right:0; bottom:0; left:0; background-size:cover; background-repeat:no-repeat; background-position:var(--mn-focal, 50% 40%); background-color:#151310; } html.m-schicht.m-menue .mn-schleier{ position:absolute; top:0; right:0; bottom:0; left:0; } html.m-schicht.m-menue .mn-nr{ position:absolute; left:18px; z-index:2; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.14em; color:rgba(244,236,223,.78); } html.m-schicht.m-menue .mn-txt{ position:absolute; z-index:2; } html.m-schicht.m-menue .mn-t{ display:block; font-family:var(--serif); font-weight:300; } html.m-schicht.m-menue .mn-s{ margin-top:5px; font-family:var(--sans); font-size:12.5px; line-height:1.4; color:rgba(244,236,223,.72); } html.m-schicht.m-menue .mn-pfeil{ position:absolute; right:18px; bottom:18px; z-index:2; width:34px; height:34px; border-radius:50%; border:1px solid rgba(244,236,223,.34); display:flex; align-items:center; justify-content:center; font-size:15px; color:#F4ECDF; } /* DURCHGANG_BAU P1-5: Pfeil ist ein Inline-SVG (mobil.js `pfeilKnoten`), kein Schriftzeichen. */ html.m-schicht.m-menue .mn-pfeil svg{ display:block; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; } html.m-schicht.m-menue .mn-bald-tag{ position:absolute; right:14px; top:50%; transform:translateY(-50%); z-index:2; padding:5px 10px; border-radius:999px; border:1px solid rgba(244,236,223,.26); background:rgba(11,11,11,.42); font-family:var(--sans); font-size:10px; letter-spacing:.10em; text-transform:uppercase; color:rgba(244,236,223,.78); white-space:nowrap; } html.m-schicht.m-menue .mn-karte.mn-bald .mn-t{ color:var(--text-muted); } /* ============ 10 — ZIEHHARMONIKA (P12, B6) ============ */ /* Höhen kommen aus mobil.js `hoehen()` als --mn-hc (eingeklappt) und --mn-ha (aktiv); die Rückfallwerte sind die Vorlage (52 / 150). Feste Höhen statt `flex:1` — so hat der Übergang zwei Zahlen und der letzte Punkt liegt nachweisbar über der Fußleiste: (n-1) * hc + ha = Höhe von .mn-e2. Stufen an .mn-liste: mn-treu · mn-eng · mn-dicht · mn-rollt; dazu mn-knapp (aktiv < 150) und mn-ohne-sub (aktiv < 112). */ html.m-schicht.m-menue.mkap-story .mn-karte{ height:var(--mn-hc, 52px); transition:height .34s var(--ease); } html.m-schicht.m-menue.mkap-story .mn-karte.an{ height:var(--mn-ha, 150px); } html.m-schicht.m-menue.mkap-story .mn-bild{ opacity:0; transition:opacity .34s var(--ease); } html.m-schicht.m-menue.mkap-story .mn-karte.an .mn-bild{ opacity:1; } html.m-schicht.m-menue.mkap-story .mn-schleier{ background:linear-gradient(180deg, rgba(11,11,11,.30) 0%, rgba(11,11,11,.62) 50%, rgba(11,11,11,.90) 100%); opacity:0; transition:opacity .34s var(--ease); } html.m-schicht.m-menue.mkap-story .mn-karte.an .mn-schleier{ opacity:1; } /* eingeklappt: Nummer und Titel in einer Zeile — das ist der Satz. */ html.m-schicht.m-menue.mkap-story .mn-nr{ top:50%; transform:translateY(-50%); transition:top .34s var(--ease), transform .34s var(--ease); } html.m-schicht.m-menue.mkap-story .mn-txt{ left:50px; right:18px; top:50%; bottom:auto; transform:translateY(-50%); } html.m-schicht.m-menue.mkap-story .mn-t{ font-size:16.5px; line-height:1.2; color:var(--text); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; /* 19 Titel > 26 Zeichen */ transition:font-size .34s var(--ease), color .34s var(--ease); } html.m-schicht.m-menue.mkap-story .mn-s{ display:none; } html.m-schicht.m-menue.mkap-story .mn-pfeil{ opacity:0; transition:opacity .3s var(--ease); } /* aktiv, Vorlage-Layout (Stufe treu / aktiv >= 112) */ html.m-schicht.m-menue.mkap-story .mn-karte.an .mn-nr{ top:15px; transform:none; } html.m-schicht.m-menue.mkap-story .mn-karte.an .mn-txt{ top:auto; bottom:16px; left:18px; right:60px; transform:none; } html.m-schicht.m-menue.mkap-story .mn-karte.an .mn-t{ font-size:23px; line-height:1.16; color:#F4ECDF; } html.m-schicht.m-menue.mkap-story .mn-karte.an .mn-s{ display:block; } html.m-schicht.m-menue.mkap-story .mn-karte.an .mn-pfeil{ opacity:1; } /* B6-Übergang: aktive Karte unter 150 — kleinerer Titel, engerer Rand. */ html.m-schicht.m-menue.mkap-story .mn-knapp .mn-karte.an .mn-nr{ top:10px; } html.m-schicht.m-menue.mkap-story .mn-knapp .mn-karte.an .mn-txt{ bottom:10px; } html.m-schicht.m-menue.mkap-story .mn-knapp .mn-karte.an .mn-t{ font-size:19px; line-height:1.2; } html.m-schicht.m-menue.mkap-story .mn-knapp .mn-karte.an .mn-pfeil{ bottom:10px; } /* … unter 112: Zeilen-Layout bleibt (Nummer links, Titel daneben), nur Bild, Schleier und Pfeil zeigen „aktiv"; keine Unterzeile. */ html.m-schicht.m-menue.mkap-story .mn-ohne-sub .mn-karte.an .mn-nr{ top:50%; transform:translateY(-50%); } html.m-schicht.m-menue.mkap-story .mn-ohne-sub .mn-karte.an .mn-txt{ left:50px; right:64px; top:50%; bottom:auto; transform:translateY(-50%); } html.m-schicht.m-menue.mkap-story .mn-ohne-sub .mn-karte.an .mn-s{ display:none; } html.m-schicht.m-menue.mkap-story .mn-ohne-sub .mn-karte.an .mn-pfeil{ bottom:auto; top:50%; transform:translateY(-50%); } /* ============ 11 — `fit`-KACHELN (E6, K06: 19 Kacheln, 13 Werte) ============ */ /* `focal` kommt als --mn-focal, nie inline als background-position — deshalb können diese Regeln die Lage überhaupt setzen. Cover-tauglich (6 Kacheln): foto-overlay 2 · karten-wand · mosaik · screen-voll · video-anschnitt -> Basisregel (cover + --mn-focal), keine eigene Zeile nötig. Hier stehen nur die 12 + 1, die NICHT beschnitten werden dürfen. Alle Werte gerechnet für einen Streifen B x 72…425 px, Text links unten — NICHT gerendert (Pflichtpunkt am ersten Render). */ /* `mock` (Schritt 5, gemessen 21.09.): `auto 86%` schnitt Querformat-Mockups in HOHEN Karten an — „Was 03" bei 390×844 zu 90,6 % sichtbar (Karte 313 px hoch → Bild 430 px breit). `contain` im Innenkasten zeigt sie in jeder Kartenhöhe ganz; 8 px oben/unten ≈ die alten 86 % in niedrigen Karten. Die Startflächen-Kachel (`.mf-bild.mock`) regelt der Block darunter. */ html.m-schicht.m-menue .mn-bild.mock{ background-size:contain; background-origin:content-box; padding:8px 0; background-position:88% 50%; } html.m-schicht.m-menue .mn-bild.mock-hoch, html.m-schicht.m-menue .mf-bild.mock-hoch{ background-size:auto 92%; background-position:94% 50%; } html.m-schicht.m-menue .mn-bild.mock-klein, html.m-schicht.m-menue .mf-bild.mock-klein{ background-size:auto 70%; background-position:90% 40%; } html.m-schicht.m-menue .mn-bild.phone-anschnitt, html.m-schicht.m-menue .mf-bild.phone-anschnitt{ background-size:auto 150%; background-position:92% 0; } html.m-schicht.m-menue .mn-bild.anschnitt, html.m-schicht.m-menue .mf-bild.anschnitt{ background-size:auto 112%; background-position:80% 0; } /* `stufen` und `logo` sind Querformate (gemessen 21.09.: 764x204 bzw. 859x216 bei 390 px Breite). Mit `auto N%` blieben 51 % bzw. 45 % sichtbar — abgeschnitten. `contain` im Innenkasten zeigt sie ganz, in jeder Kartenhöhe. */ html.m-schicht.m-menue .mn-bild.stufen, html.m-schicht.m-menue .mf-bild.stufen, html.m-schicht.m-menue .mn-bild.logo, html.m-schicht.m-menue .mf-bild.logo{ background-size:contain; background-origin:content-box; padding:12px 18px; background-position:50% 38%; } html.m-schicht.m-menue .mn-bild.marke, html.m-schicht.m-menue .mf-bild.marke{ background-size:auto 52%; background-position:82% 46%; background-color:var(--bg-soft, #16150F); } /* Startflächen-Kachel ist hochkant (130x132): dort mittig statt rechts. */ html.m-schicht.m-menue .mf-bild.mock, html.m-schicht.m-menue .mf-bild.mock-hoch, html.m-schicht.m-menue .mf-bild.mock-klein, html.m-schicht.m-menue .mf-bild.marke{ background-position:50% 36%; background-size:auto 58%; } /* ============ 12 — DRUCK ============ */ @media print{ html.m-schicht.m-menue .mnav{ display:none !important; } } /* =================================================================== SCHRITT 2 — ENDE =================================================================== */ /* =================================================================== SCHRITT 3 — UNTERSEITEN (21.09.2026) Jede Regel hängt an `html.m-schicht.m-leiste`: sie gilt nur, wenn mobil.js die Leiste wirklich gebaut hat. Fällt mobil.js aus oder baut es keine Leiste, bleibt der Master unverändert — auch sein Burger. Keine Breiten-Query, keine Zahl für die Grenze. =================================================================== */ /* ============ 13 — UNTERSEITEN-KOPF (S-5, E8/E20, B2) ============ */ /* Der Burger der Unterseiten zeigt genau „Mitglied werden" (Login raus 25.09.2026) — dasselbe wie die Leiste. Mit Leiste fliegt er; ohne Leiste (`empfehlen`, data-m-leiste="aus") bleibt er stehen. (0,4,1) gegen `.tb-kopf .tb-menu{display:flex}` (0,2,0) im erzeugten Block `tb-w07`; die Reihenfolge der Blöcke ist damit egal, der Generator bleibt unberührt. Den offenen Zustand räumt mobil.js ab (`kopfMenueZu`): wer quer das Master-Menü öffnet und dann dreht, stünde sonst mit offenem Feld und ohne Knopf da. Die zweite Zeile ist der Gürtel dazu. */ html.m-schicht.m-leiste .tb-kopf .tb-menu{ display:none; } html.m-schicht.m-leiste .tb-kopf.offen .tb-cta{ display:none; } /* ============ 14 — HERO IN VOLLER HÖHE (S-6, E18, L-04) ============ */ /* NICHT `.hero` allein: die Klasse tragen 9 Unterseiten, nur 6 davon mit `min-height:100svh`. Eine nackte `.hero`-Regel HÖBE die Mindesthöhe auf `app`, `whatsapp-gruppen` und `why`; `why` und `empfehlen` sind im Markup gleich gebaut. Deshalb setzt mobil.js `m-hero-voll` genau dort, wo die berechnete Mindesthöhe der Fensterhöhe entspricht (`heroMarkieren`). Ohne `svh` verwirft der Browser die Zeile — der Hero bleibt ungekürzt. */ html.m-schicht.m-leiste .hero.m-hero-voll{ min-height:calc(100svh - var(--mfuss-ges)); } /* ============ 15 — VIDEO-OVERLAY (`html.vov-offen`) ============ */ /* `.vov` (z 1200, Grund zu 94 % deckend) liegt über der Leiste: sie schimmert durch und bleibt per Tab erreichbar, obwohl ein `aria-modal`-Dialog offen ist. Solange `html.vov-offen` steht, ist sie weg. Stand 21.09.2026 trägt kein Film `data-modus="overlay"` — der Zustand ist nur im Test erreichbar. */ html.m-schicht.m-leiste.vov-offen .mfuss{ visibility:hidden; } /* =================================================================== SCHRITT 3 — ENDE =================================================================== */ /* =================================================================== SCHRITT 4 — LÜCKEN-SEITEN (21.09.2026) =================================================================== */ /* ============ 16 — WHY: SCHLEIER UND KACHEL-EBENE (L-06, E22) ============ */ /* Gemessen vor dem Eingriff (390×844 und 375×667): die geöffnete Kachel (`.karte.on`, `position:relative`, z 610) malt ÜBER die Leiste (z 560) und nimmt ihr den Tipp; der Schleier (z 600) dimmt sie mit. Die 610 existiert nur, um über den Schleier zu kommen — ohne Schleier genügt eine kleine Zahl. Schließen geht weiter über einen Tipp neben die Kachel (Dokument-Klick im Master), der Schleier fängt ohnehin keine Tipps. Abgrenzung ohne Seitenname: nur `why` trägt `.schleier`. Geltung: ganze Schicht, nicht nur ≤ 660 px — sonst stünde die 660 von `why` hier ein zweites Mal (N3-2). */ html.m-schicht.m-leiste body.fokus .schleier{ opacity:0; visibility:hidden; } html.m-schicht.m-leiste .schleier ~ * .karte:hover, html.m-schicht.m-leiste .schleier ~ * .karte:focus-visible, html.m-schicht.m-leiste .schleier ~ * .karte.on{ z-index:2; } /* =================================================================== SCHRITT 4 — ENDE =================================================================== */