/* Das Telefon-Layout — die eine Datei, die alles zusammenhaelt. * * BEFUND (02.09.2026, Arpads Bildschirmfotos vom iPhone, 16 Stueck, plus * eigene Messung bei 375 px an der LIVE-Seite). * * URSACHE, und sie ist EINE, nicht sechzehn: Der Entwurf ist als React-Seite * gebaut und beim Umbau nach statischem HTML in `style="…"`-Attribute * ueberfuehrt worden (siehe Kopf von chrome.css). Ein Inline-Stil kennt aber * keine Medienabfrage. Jedes Raster, das dort steht — vier Spalten in der * Fusszeile, zwei in der Kontaktspalte, drei in der Vertrauenszeile, vier * Reiter im Aufmacher — steht damit auf JEDER Breite, auch auf 375 px. * Kein Umbruch, keine Ausweichspur. Was nicht passt, laeuft aus dem Kasten * heraus oder wird von einem `overflow: hidden` abgeschnitten; beides sieht * man auf den Bildschirmfotos. * * WEG: keine Zeile Markup wird angefasst. Dieselbe Entscheidung wie bei * kompat.css und seiten.css und aus demselben Grund — was sich aendert, * bleibt ueberpruefbar, weil beim Umschreiben von 43 Seiten kein Layout * verrutschen kann. Gegen einen Inline-Stil hilft nur `!important`; hier * ist es kein Faulheitszeichen, sondern die einzige Hebelstelle. * * Laedt als LETZTE Datei, nach seiten.css. * * Schwellen: 1024 = Tablett quer, 760 = Telefon quer / kleines Tablett, * 620 = Telefon hoch. Dieselben Werte wie in site.css, damit nicht zwei * Dateien zwei Rastermasse fuehren. */ /* ================================================================== 1. FUSSZEILE — vier Spalten auf 375 px ------------------------------------------------------------------ GEMESSEN: .ch44 traegt `grid-template-columns: 1.4fr 1fr 1fr 1fr` mit 48 px Luecke. Innenbreite 311 px, Bedarf 487 px. Die vierte Spalte („Help and reference") lag komplett ausserhalb des Schirms, und .ch42 schnitt sie mit `overflow: hidden` ab — sichtbar auf Bildschirmfoto 13. ================================================================== */ @media (max-width: 1023px) { .ch44 { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 760px) { .ch44 { grid-template-columns: 1fr; gap: 32px; padding: 48px 20px 32px; } /* Der Einleitungssatz war auf 280 px gedeckelt, weil er neben drei Spalten stand. Allein in der Spalte gibt es dafuer keinen Grund. */ .ch46 { max-width: none; } .ch56 { padding: 20px 20px 40px; } .ch57 { gap: 16px; padding-top: 24px; } .ch59 { gap: 16px; margin-top: 28px; } } /* ================================================================== 2. KONTAKT — das Formular war auf dem Telefon NICHT BENUTZBAR ------------------------------------------------------------------ GEMESSEN: zwei Spalten `0.9fr 1.1fr` mit 64 px Luecke = 533 px Bedarf bei 375 px Schirm. Die rechte Spalte traegt das Formular. Der Absendeknopf lag ausserhalb des Schirms und war nicht erreichbar — von allen sechzehn Befunden der einzige, der Umsatz kostet. Bildschirmfoto 11. ================================================================== */ @media (max-width: 900px) { #contact > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 32px !important; } } /* ================================================================== 3. AUFMACHER — die vier Reiter schoben sich uebereinander ------------------------------------------------------------------ GEMESSEN: `repeat(4, minmax(0px, 1fr))` ergibt bei 311 px vier Spalten zu 77,75 px. Die Beschriftungen brauchen 105, 255, 198 und 201 px. `minmax(0px, …)` verhindert das Auseinanderdruecken des Rasters — der Text laeuft stattdessen aus seiner Zelle heraus und legt sich auf den Nachbarn. Das ist der Buchstabenbrei auf Bildschirmfoto 1. Der Reiterstreifen bleibt EINE Zeile und scrollt waagerecht — genau die Bauform, die die Seite unter „Loesungen" (.uc-spur) und auf den Anwendungsfall-Seiten (.fall-spur) schon benutzt. Kein neues Muster. ================================================================== */ @media (max-width: 900px) { #hero [data-ref="tabsRef"] { display: flex !important; gap: 4px !important; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #hero [data-ref="tabsRef"]::-webkit-scrollbar { display: none; } #hero [data-ref="tabsRef"] > button { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; padding: 16px 18px 16px 0 !important; } } /* ================================================================== 4. VERTRAUENSZEILE — drei Spalten Fliesstext zu je 87 px ------------------------------------------------------------------ GEMESSEN: `repeat(3, minmax(0px, 1fr))` ergibt 87,7 px je Spalte. „Processed in Frankfurt / Nothing is kept / Your documents stay yours" standen als drei Saeulen aus je zwei Woertern je Zeile. Bildschirmfoto 12, unterer Teil. ================================================================== */ @media (max-width: 760px) { [style*="repeat(3, minmax(0px, 1fr))"] { grid-template-columns: 1fr !important; gap: 28px !important; } } /* ================================================================== 5. RASTER-AUSBRUCH auf den Anwendungsfall-Seiten ------------------------------------------------------------------ GEMESSEN auf /use-cases/sales.html bei 375 px: .fall-buehne__raster hat unter 900 px bereits `grid-template-columns: 1fr` — und wurde trotzdem 905,5 px breit. Das ist kein Fehler in der Regel, sondern die bekannteste Falle im Grid: `1fr` heisst `minmax(auto, 1fr)`, und `auto` als Minimum ist die MIN-CONTENT-Breite des Inhalts. Der Inhalt ist eine Kartenspur aus drei 292-px-Karten; deren Min-Content ist 906 px, und die Spur druckt die Spalte auf. `minmax(0, 1fr)` setzt das Minimum ausdruecklich auf 0 — die Spur scrollt dann in sich selbst, so wie vorgesehen. Das ist der zerrissene Kopf auf Bildschirmfoto 15. ================================================================== */ @media (max-width: 900px) { .fall-buehne__raster { grid-template-columns: minmax(0, 1fr) !important; } } /* Dieselbe Falle vorbeugend fuer die Selbstumbruch-Raster: `auto-fit` mit einem Mindestmass GROESSER als die Spalte laeuft ueber, statt auf eine Spalte zu fallen. Bei 375 px sind 311 px verfuegbar; 320 passt nicht. `min(100%, …)` deckelt das Mindestmass an der Spalte. */ @media (max-width: 760px) { [style*="minmax(320px, 1fr)"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important; } [style*="minmax(280px, 1fr)"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important; } } /* ================================================================== 6. KOPFLEISTE — 72 px sind auf einem Telefon ein Achtel des Schirms ------------------------------------------------------------------ Arpads Anmerkung zu Bildschirmfoto 5. Die Leiste ist klebend; ihre Hoehe geht auf jedem Bildlauf vom Lesefeld ab. 56 px reichen fuer ein 28-px-Logo, den Burger und die Sprachwahl. MITZUZIEHEN, sonst bricht etwas: `.ch19` (Klappmenue) und `.ch37` (Burger-Ebene) sind mit `top: 72px` bzw. `inset: 72px 0 0` an die alte Hoehe genagelt, und `section[id]` traegt in site.css `scroll-margin-top: 88px`, damit ein Sprungziel nicht unter der Leiste landet. ================================================================== */ @media (max-width: 760px) { .ch02 { height: 56px; padding: 0 20px; gap: 12px; } .ch06 { height: 28px; } .ch19 { top: 56px; } .ch37 { inset: 56px 0 0; padding: 12px 20px 40px; } section[id] { scroll-margin-top: 68px; } } /* ================================================================== 7. DER SPRECHBLASEN-KNOPF liegt auf den Handlungsknoepfen ------------------------------------------------------------------ GEMESSEN: 56 px, fest bei `bottom: 32px; right: 32px`. Auf dem Telefon sind die Handlungsknoepfe voll breit — der Kreis liegt deshalb IMMER auf einem von ihnen. Bildschirmfoto 1 und 2. Kleiner und dichter in die Ecke: er deckt dann nur noch den rechten Rand, wo bei mittig gesetzter Beschriftung nichts steht. `env(safe-area-inset-bottom)` haelt ihn ueber dem Balken des iPhones; ohne das sitzt er auf der Wischleiste. ================================================================== */ @media (max-width: 760px) { [data-ref="chatBtnRef"] { width: 48px !important; height: 48px !important; right: 14px !important; bottom: calc(14px + env(safe-area-inset-bottom)) !important; } } /* ================================================================== 8. DIE MERKMALSPILLEN kosteten einen ganzen Bildschirm ------------------------------------------------------------------ Elf Pillen zu je 8/16 px Innenabstand in Koerpergroesse ergeben bei 375 px elf Zeilen. Arpads Anmerkung zu Bildschirmfoto 8. Kleinerer Satz und engerer Innenabstand bringen zwei bis drei Pillen in die Zeile; der Block schrumpft auf etwa die Haelfte, ohne dass eine Aussage wegfaellt. ================================================================== */ @media (max-width: 620px) { [style*="border-radius: 999px"][style*="inline-flex"] { padding: 6px 12px !important; /* NICHT --fs-body-s: das sind 10 px, und darunter liest niemand mehr eine Merkmalsliste. 12 px bringen zwei bis drei Pillen in die Zeile und bleiben lesbar. */ font-size: 12px !important; } } /* ================================================================== 9. VERTIKALER WEISSRAUM relativ statt fest ------------------------------------------------------------------ Arpads Anmerkung zu Bildschirmfoto 4. --sektion-y steht in site.css unter 620 px auf 40 px — fest. Auf einem 320-px-Geraet ist das anteilig mehr Luft als auf einem 430-px-Geraet. Als clamp() waechst der Abstand mit dem Geraet und behaelt die Grenzen, die der Rhythmus der Seite braucht. ================================================================== */ @media (max-width: 620px) { :root { --sektion-y: clamp(26px, 8vw, 40px); } } /* ================================================================== 10. KARTENRAND verrutscht auf Beruehrung ------------------------------------------------------------------ Arpads Anmerkung zu Bildschirmfoto 7. Die Vorschau-Stufe der Loesungskarte hebt die Karte um 2 px an (`transform: translateY`). Auf einer Maus ist das eine Vorschau, die beim Wegziehen endet; auf einem Finger BLEIBT der Schwebezustand nach dem Tippen stehen. Die Karte steht dann dauerhaft 2 px hoeher als der Text darunter — das ist das „verrutschte" Bild. `hover: none` trifft genau die Geraete ohne Zeiger. ================================================================== */ @media (hover: none) { .uc-karte.uc-vorschau, .fall-karte.fall-vorschau { transform: none; } } /* ================================================================== 11. DER FLUSSBILD-PFEIL zeigte nach rechts, obwohl der Fluss nach unten laeuft ------------------------------------------------------------------ Audio -> transkribiert -> Antwort -> geloescht steht als `flex-wrap: wrap` mit vier Karten (`flex: 1 1 200px`) und drei Pfeil-Zeichen dazwischen. Auf dem Telefon bricht jede Karte in eine eigene Zeile -- die Pfeile bleiben aber waagerecht und stehen neben der Karte statt zwischen zwei Karten. Der Ablauf las sich dann wie vier zusammenhanglose Kaesten. Bildschirmfoto 12, oberer Teil. Gedreht statt ersetzt: das Zeichen steht im HTML und soll dort bleiben; `rotate(90deg)` um die Mitte eines mittig gesetzten Blocks laesst es an derselben Stelle stehen und macht aus dem Rechtspfeil einen Abwaertspfeil. ================================================================== */ @media (max-width: 620px) { [style*="flex-wrap: wrap"] > span[aria-hidden="true"][style*="align-self: center"] { display: block; width: 100%; text-align: center; transform: rotate(90deg); } } /* ================================================================== 12. „LIVE IN THREE STEPS" -- 88 px fuer eine einstellige Zahl ------------------------------------------------------------------ `minmax(64px, 88px) 1fr` gibt der Schrittnummer 88 px und dem Text 199 px. „Upload your knowledge base" braucht damit drei Zeilen. 44 px reichen fuer die Ziffer; der Text gewinnt 52 px. ================================================================== */ @media (max-width: 620px) { [style*="minmax(64px, 88px) 1fr"] { grid-template-columns: 44px 1fr !important; gap: 16px !important; } } /* ================================================================== 13. HANDLUNGSKNOEPFE im Aufmacher liefen 10 px ueber die Spalte ------------------------------------------------------------------ GEMESSEN: „Book a 30-minute session" traegt `white-space: nowrap` und `padding: 0 28px` -- zusammen 321 px bei 311 px Spalte. Der Knopf ragte in den Aussenrand der Sektion und stand damit nicht auf derselben Kante wie die Ueberschrift darueber. Auf dem Telefon nehmen beide Knoepfe die volle Spalte; das ist auf einem Telefon ohnehin die richtige Bauform fuer einen Handlungsknopf. ================================================================== */ @media (max-width: 620px) { #hero a[style*="text-decoration: none"] { width: 100%; } #hero a[style*="text-decoration: none"] button { width: 100% !important; padding: 0 16px !important; } } /* ================================================================== 14. HAKENLISTEN -- 12 px Luecke sind auf 335 px zu viel ------------------------------------------------------------------ Arpads Anmerkung zu Bildschirmfoto 9. Die Liste unter BEFORE/DURING/AFTER steht durch Haken und Luecke um 28 px eingerueckt gegenueber ihrer Ueberschrift. Auf dem Telefon sind das 8 Prozent der Zeile. ================================================================== */ @media (max-width: 620px) { #details li { gap: 8px !important; } } /* ================================================================== ÜBERSCHRIFTEN AUF DEM TELEFON — 03.09.2026 BEFUND (Arpad, Screenshots vom Gerät): „Zwei Wochen Vorbereitun|g — und am Tag selbst …" „…at the pace the conversatio|n runs." Der letzte Buchstabe eines Wortes rutschte in die nächste Zeile, ohne Trennstrich. Er hat es als „Buchstaben nach unten gerutscht" beschrieben — es ist ein Umbruch MITTEN IM WORT. ZWEI URSACHEN, die zusammen erst den Fehler ergeben: 1. Die Größen des Designsystems sind Festwerte, keine Bereiche: `--fs-h1` ist 3,813 rem = rund 61 px, auf JEDER Breite. Auf einem 375-px-Schirm bleiben nach den Rändern etwa 335 px — bei 61 px fetter Schrift sind das fünf bis sechs Zeichen je Zeile. „Vorbereitung" hat zwölf und passt in KEINE Zeile. 2. `seiten.css` setzt `overflow-wrap: break-word` auf jeden `.container`. Die Regel ist für lange Rechtsbegriffe gedacht („Online-Streitbeilegungsplattform") und dort richtig. Sie greift aber auch für Überschriften — und `break-word` bricht ohne Trennstrich, weil es keine Silben kennt. Behoben wird URSACHE 1. Die Größen unten sind so gewählt, dass das längste Wort der Startseiten-Überschriften in eine Zeile passt; `hyphens: auto` bleibt als Netz für alles Längere und trennt DANN mit Strich statt stumpf abzuschneiden. Dafür trägt jede Seite ein `lang`-Attribut — ohne das weiß der Browser die Silben nicht. ================================================================== */ @media (max-width: 767px) { body[data-page] h1, body[data-page] .h1 { font-size: 2.125rem; } body[data-page] h2, body[data-page] .h2 { font-size: 1.75rem; } body[data-page] h3, body[data-page] .h3 { font-size: 1.4375rem; } body[data-page] h4, body[data-page] .h4 { font-size: 1.25rem; } body[data-page] h5, body[data-page] .h5 { font-size: 1.125rem; } /* Trennen statt abschneiden. `break-word` aus seiten.css bleibt für alles andere im Container stehen — nur die Überschriften nehmen den saubereren Weg. */ body[data-page] h1, body[data-page] h2, body[data-page] h3, body[data-page] h4, body[data-page] h5, body[data-page] .h1, body[data-page] .h2, body[data-page] .h3 { overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; text-wrap: balance; } } /* Sehr schmale Geräte (iPhone SE, 320 px) — dort trägt auch 2,125 rem noch nicht jedes deutsche Kompositum. */ @media (max-width: 380px) { body[data-page] h1, body[data-page] .h1 { font-size: 1.875rem; } body[data-page] h2, body[data-page] .h2 { font-size: 1.5625rem; } }