/* ============================================================================ mobile.css — additiver Mobile-Pass für vitalitgroup.de Angelegt 29.07.2026 (Auftrag Pascal, Weekly 29.07.: „Schriftgrößen funktionieren, alles anständig"). WARUM EINE EIGENE DATEI: Die Unterseiten unter site/dist/ sind Astro-Build-Output. Direkt-Edits dort sind beim nächsten lokalen Build weg. Diese Datei wird pro Seite mit EINER Zeile im eingebunden und bleibt deshalb erhalten. Was in die Astro-Source zurückwandern muss, steht in MOBILE-NOTES.md im Repo-Root. AUFBAU 1 Beide Seitentypen — Umbruch-Schutz, Sticky-CTA-Puffer, Anker-Offset 2 Nur Astro-Unterseiten (html[data-accent]) — Schriftgrößen, Tap-Ziele 3 Nur Startseite (html[data-theme]) — BPM-Readout, Granatapfel Die Startseite hat ihren eigenen MOBILE-TYPO-PASS inline (index.html, Abschnitt „MOBILE-TYPO-PASS (≤768px)"). Der bleibt maßgeblich — deshalb sind alle Schriftgrößen-Regeln hier auf html[data-accent] beschränkt und greifen dort nicht. ============================================================================ */ /* ============================================================================ 1 · BEIDE SEITENTYPEN ============================================================================ */ @media (max-width:899px){ /* --- 1.1 Kein horizontaler Scroll ------------------------------------- Lange deutsche Komposita und rohe URLs sprengen sonst den Viewport. Belegt am 29.07.: /impressum/ 600 px statt 390 px (h2 „Verbraucher- streitbeilegung/Universalschlichtungsstelle"), /datenschutz/ 589 px (rohe Plattform-URLs als Linktext). `break-word` bricht NUR, wenn ein Wort sonst überläuft — an kurzen Zeilen ändert sich dadurch nichts. */ h1,h2,h3,h4,dt,th,figcaption{overflow-wrap:break-word;hyphens:auto} .prose a,.prose code,.legal a{overflow-wrap:anywhere} /* --- 1.2 Puffer für den fixierten Sticky-CTA --------------------------- Der Balken ist ~81 px hoch und liegt dauerhaft über dem Seitenende — ohne Puffer bleibt die letzte Footer-Zeile unerreichbar. `[class]` hebt die Spezifität nur auf das Niveau der Astro-Regel `.ft[data-astro-cid-…]{padding-block:…}`; beim Rückport in die Astro-Source ersatzlos streichen. */ .ft[class]{padding-bottom:calc(88px + env(safe-area-inset-bottom))} /* --- 1.3 Ankerziele nicht unter der Sticky-Nav ------------------------- Die Nav ist 64-66 px hoch und sticky; ohne scroll-margin landet jede Sprungmarke (#loesung, #rechner, #kontakt …) darunter. :where() = Spezifität 0, überschreibt also nichts. */ :where([id]){scroll-margin-top:78px} } /* ============================================================================ 2 · NUR ASTRO-UNTERSEITEN (html[data-accent]) ============================================================================ */ @media (max-width:899px){ /* --- 2.1 Schrift-Mindestgrößen ---------------------------------------- Gemessen vor dem Pass: .eyebrow 11,5 px · .mono 12,5 px. Beides unter der 14-px-Grenze, die die Startseite schon einhält. 14 px statt der 16 px der Startseite, weil die Unterseiten-Eyebrows mit .14em Laufweite gesetzt sind und bei 16 px umbrechen würden. */ html[data-accent] .eyebrow{font-size:.875rem;letter-spacing:.11em} html[data-accent] .mono, html[data-accent] .mono-note{font-size:.875rem} /* Die kleinste Stufe zusätzlich vom schwächeren fog-2 auf fog anheben. */ html[data-accent] .mono{color:var(--fog)} /* --- 2.2 Tap-Ziele ≥44 px --------------------------------------------- Gemessen: Burger-Button 25 px, Footer-Links 24 px, Wortmarke 29 px. Nur Eigenschaften, die die Astro-Regeln nicht selbst setzen — deshalb kein !important nötig. */ html[data-accent] .burger{min-width:48px;min-height:48px; align-items:center;justify-content:center} html[data-accent] .ft-links a, html[data-accent] .links a{min-height:44px;display:inline-flex;align-items:center} html[data-accent] .brand{min-height:48px} /* Aufgeklapptes Mobil-Menü: die Einträge liegen gestapelt, 44 px Höhe allein reicht nicht — sie brauchen auch Abstand voneinander. */ html[data-accent] .links.open{gap:.2rem;padding-block:.6rem} /* Consent-Checkbox war 13 px. 22 px Kästchen in einer 48 px hohen Label-Trefferfläche — dasselbe Muster wie auf der Startseite. */ html[data-accent] .consent{min-height:48px;padding-block:.35rem} html[data-accent] .consent input[type=checkbox]{width:22px;height:22px;flex:0 0 auto} } /* ============================================================================ 3 · NUR STARTSEITE (html[data-theme]) ============================================================================ */ /* --- 3.1 BPM-Readout kollidiert nicht mehr mit dem Fließtext ------------- `.nav-bpm` ist `position:absolute; top:calc(100% + 18px)` — es sitzt also 18 px UNTER der Nav. Auf dem Desktop ist das freier Rand, auf 390 px liegt es mitten im Text der jeweiligen Sektion (gemessen: x=316 y=82; überlappt Eyebrow und Absätze in mehreren Sektionen). Mobil wandert es deshalb in den Flex-Flow der Nav — in die Lücke zwischen Wortmarke und CTA (bei 390 px 95 px frei, Readout ~58 px breit). Die Monitor-Metapher bleibt: der Wert sitzt weiter in der Nav-Zeile. */ @media (max-width:899px){ html[data-theme] .nav-bpm{position:static;top:auto;right:auto; align-self:center;white-space:nowrap} /* Der Readout braucht im Flow echte Breite (~56 px). Mit dem 1rem-Gap der Nav passt die CTA ab 375 px abwärts nicht mehr einzeilig daneben und bricht auf zwei Zeilen. Engeres Gap statt kleinerer Schrift. */ html[data-theme] .nav-inner{gap:.55rem} /* Wortmarke war 24 px hoch — Trefferfläche auf 48 px, ohne die Nav zu verändern (die Nav ist ohnehin 64 px hoch). */ html[data-theme] .brand{min-height:48px} } /* Unter 375 px reicht die Nav-Zeile nicht für Wortmarke + Readout + CTA: die CTA bricht zweizeilig. Dann hat die CTA Vorrang — der Puls-Cue steht ohnehin im Hero. Ab 375 px (iPhone SE/mini aufwärts) bleibt er sichtbar. */ @media (max-width:374px){ html[data-theme] .nav-bpm{display:none} } /* --- 3.2 Schicht-Label wieder als kompakte Pille ------------------------- Der Typo-Pass setzt `.layer-label{width:auto}` (Guard für 200 % Textzoom). Dadurch wird die Pille über die ganze Breite gezogen. `fit-content` hält sie kompakt UND lässt sie bei 200 % weiter schrumpfen/umbrechen. */ @media (max-width:1023px){ html[data-theme] .layer-label{width:fit-content;max-width:100%} } /* --- 3.3 Granatapfel auf kurzen Viewports (iPhone SE, 375×667) ---------- Die Sticky-Bühne ist 100svh hoch und hat overflow:hidden. Nav (65 px) und Sticky-CTA (80 px) fressen davon 145 px, es bleiben ~520 px für Label + Frucht + Panel. Gemessen bei 375×667 ohne diesen Block: Label 28 px hinter der Nav, Panel-Text 43 px unter dem CTA-Balken. Gegenmittel in dieser Reihenfolge: Bühne um die Chrome-Höhen einrücken, Frucht an die Viewport-HÖHE koppeln, Zeilenabstand und Abstände straffen. Die Schriftgrößen bleiben unangetastet (17 px) — Lesbarkeit vor Effekt. */ @media (max-width:1023px) and (max-height:739px) and (prefers-reduced-motion:no-preference){ html[data-theme] .pom-sticky{box-sizing:border-box; padding-top:72px;padding-bottom:82px} html[data-theme] .layer-label{margin:0 auto .4rem} html[data-theme] .pom-wrap{width:min(330px,66vw,26svh);margin:0 auto .4rem} html[data-theme] .panel h3{margin-bottom:.6rem} html[data-theme] .panel .fact{margin-bottom:.6rem} html[data-theme] .panel .fact, html[data-theme] .panel .meta{line-height:1.45} }