/* ============================================================ Handy-Sonderfälle — der EINZIGE Ort dafür. Wird als LETZTE Stilvorlage eingebunden, damit die Regeln hier gewinnen, ohne dass irgendwo `!important` nötig wird. Die Zahl 767 ist `--bp-md` aus tokens.css ausgeschrieben (in @media-Abfragen sind Variablen nicht erlaubt). ============================================================ */ @media (max-width: 767px) { /* --- Tippziele ------------------------------------------- Gemessen am 15.08.2026 auf 412 px: Navigationsknöpfe 37 px, Reiter 36 px, Auswahlfelder 38 px, Datumsfelder 34 px, Zurück-Link 16 px. Richtwert für den Daumen sind 48 px. */ .nav-group__btn, .ramtab, .tab, .preset, .chip, .cta-btn, .server-badge, .select, .month-select, .dr__in, .dr__clear, .toggle, .search, .brand { min-height: var(--tap); } /* `.tab` ist bisher nur ein Kasten mit Innenabstand — ohne diese Zeile klebt die Beschriftung bei größerer Höhe oben. */ .tab, .brand { display: inline-flex; align-items: center; } .brand { flex-direction: column; justify-content: center; align-items: flex-start; } /* Einträge in den Aufklappmenüs — die trifft man am häufigsten daneben. */ .nav-menu a { min-height: var(--tap); display: flex; align-items: center; } /* Fahrername in der Auto-Kachel: sitzt im Textfluss, bekommt die Fläche deshalb über den Innenabstand (gemessen 34 px). */ .cbox__holder { padding: 10px 5px; margin: -10px -5px; } /* Vor-/Zurück-Links zwischen den Rennen (gemessen 33 px). */ .racenav__l { min-height: var(--tap); display: inline-flex; align-items: center; } /* Das Suchfeld selbst füllt seinen Kasten aus, damit die ganze Fläche trifft und nicht nur die 21 px hohe Textzeile darin. Der Innenabstand des Kastens muss dafür nach oben und unten weichen, sonst bleibt für das Feld nur die Höhe abzüglich 2×9 px übrig. */ .search { padding-top: 0; padding-bottom: 0; } .search input { align-self: stretch; min-height: 46px; } /* Textlinks bekommen die Fläche über Innenabstand statt über Höhe, sonst reißt der Textfluss auseinander. */ .back-link { padding: 16px 2px; } .site-foot__legal a { padding: 16px 2px; } /* --- Eingabefelder --------------------------------------- Unter 16 px zoomt iOS beim Antippen in die Seite hinein und kommt nicht von allein zurück. Gemessen waren 14–15 px. */ .select, .month-select, .dr__in, .search input, input, select, textarea { font-size: var(--feld); } /* --- Dauerbewegung und großflächige Weichzeichner --------- Vier Endlos-Animationen liefen am Telefon durchgehend mit, dazu zwei Weichzeichner über je 60 % der Bildschirmbreite (blur 70 px). Das Neon bleibt — die Farbverläufe sind von sich aus weich, der teure Weichzeichner wird nur zurückgenommen. */ .fx-grid { animation: none; } .fx-glow { animation: none; filter: blur(26px); opacity: 0.42; } .server-badge__dot { animation: none; } } /* ============================================================ Phase 2 — Rangliste, Podest, Kopfbereich ============================================================ */ @media (max-width: 767px) { /* --- Ranglisten-Zeile: zwei Ebenen, ~64 statt 103 px ------ ACHTUNG Spezifität: `.lb--laps.lb--sectors .lb__row` (drei Klassen) schlägt `.lb--laps .lb__row` (zwei) — unabhängig davon, welche Datei später kommt. Deshalb wird hier JEDE Variante ausdrücklich genannt. Genau daran lag der Fehler, dass im RaM-Training am Handy die Desktop-Spalten stehenblieben und 418 px Inhalt in eine 374 px breite Zeile liefen (rechts abgeschnitten, verdeckt durch `body { overflow-x: hidden }`). Gemessen 15.08.2026. */ .lb__row, .lb--laps .lb__row, .lb--laps.lb--sectors .lb__row { grid-template-columns: 24px minmax(0, 1fr) auto auto; grid-template-areas: "pos driver driver time" "pos car laps gap"; height: auto; padding: 6px 10px; gap: 2px 10px; align-items: center; } .lb--laps.lb--sectors .lb__head { display: none; } .lb--sectors .sector-cell { display: none; } /* Die Höhe steckt in zwei Bildern: Avatar (42) und Markenkachel (30). */ .lb__row .avatar, .lb__row .avatar-wrap .avatar { width: 30px; height: 30px; font-size: 11px; } .lb__row .mfr-tile { width: 16px; height: 16px; } /* Das Team steht in fast jeder Zeile auf „—" und kostet eine ganze Textzeile. Es ist im Detail-Blatt weiterhin zu sehen. */ .lb__row .driver-cell__sub { display: none; } .lb__row .driver-cell { gap: 8px; } .lb__row .driver-cell__name { font-size: var(--text-md); } .lb__row .pos { font-size: var(--text-lg); } .lb__row .car-cell { font-size: var(--text-sm); gap: 5px; } .lb__row .mono-badge { font-size: 9.5px; padding: 1px 4px; } .lb__row .time-cell .time { font-size: var(--text-md); } .lb__row .gap-cell .gap, .lb__row .laps-cell { font-size: var(--text-sm); } .lb__row .tag-hrc { font-size: 9px; padding: 1px 4px; } /* `.lb` schneidet bisher hart ab; hier darf nichts mehr überstehen. */ .lb { overflow: visible; } /* `hidden` allein wirkt bei display:grid NICHT — braucht eine eigene Zeile. Ohne sie bliebe der zurückgehaltene Rest der Rangliste sichtbar. */ .lb__row[hidden] { display: none; } /* --- Renn-Ergebnisse (RaM) auf zwei Ebenen ---------------- Sobald die Rundenzeit wieder eingeblendet ist (siehe css/ram.css), passen Platz, Fahrer, Zeit, Platzgewinn und Punkte nicht mehr nebeneinander: gemessen lief die Zeile bei 360 px über. Zweite Ebene wie in den anderen Tabellen. Die Zellen tragen dort keine sprechenden Klassen, deshalb über die Reihenfolge: 4 = Zeit, 5 = Platzgewinn, 7 = Punkte. */ .lb--race .lb__row { grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "pos driver zeit" "pos gewinn punkte"; height: auto; padding: 6px 10px; gap: 2px 10px; align-items: center; } .lb--race .lb__row > .pos { grid-area: pos; } .lb--race .lb__row > .driver-cell { grid-area: driver; } .lb--race .lb__row > .lb__cell:nth-of-type(4) { grid-area: zeit; justify-self: end; text-align: right; } .lb--race .lb__row > .lb__cell:nth-of-type(5) { grid-area: gewinn; justify-self: start; } .lb--race .lb__row > .lb__cell:nth-of-type(7) { grid-area: punkte; justify-self: end; } /* Anders als in den Ranglisten steht unter dem Namen hier etwas Wichtiges: Pole, schnellste Runde, Strafen. Diese Zeile bleibt. */ .lb--race .driver-cell__sub { display: block; font-size: var(--text-xs); } .lb--race .time-cell .gap { font-size: var(--text-xs); margin-left: 5px; } /* --- Podest: aus drei Türmen werden drei Kacheln ----------- Gemessen waren 1.050 px allein für das Podest — zwei Bildschirmhöhen, bevor die erste Datenzeile kommt. Das Autofoto ist der große Posten; es steht im Detail-Blatt weiter zur Verfügung. */ .podium { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px; } .pod, .pod--1, .pod--2, .pod--3 { order: 0; min-height: 0; padding: 10px 6px 8px; } .pod__photo, .pod__car { display: none; } .pod__driver { flex-direction: column; gap: 4px; font-size: var(--text-sm); text-align: center; } .pod__rank { font-size: var(--text-sm); } .pod__crown { font-size: 15px; } .pod__overlay { position: static; padding: 6px 0 0; background: none; text-align: center; } .pod__time { font-size: var(--text-md); } .pod__meta { font-size: var(--text-xs); justify-content: center; gap: 6px; } .pod .avatar { width: 34px; height: 34px; font-size: 12px; } /* --- Kopfbereich schlank ---------------------------------- */ .hero__title { font-size: var(--text-2xl); } .hero__sub { font-size: var(--text-md); } .hero { margin-bottom: var(--space-4); } .app { padding-top: var(--space-3); } /* --- Kennzahlen und Filter: wischbar statt umbrechend ------ Gemessen 15.08.2026 auf 412 px: die drei Kennzahl-Kacheln brachen auf 106 px um, die drei Filterreihen zusammen auf 381 px. Umgebrochene Leisten schieben die Daten nach unten; eine seitlich wischbare Reihe kostet immer nur eine Zeilenhöhe. Gewischt wird bewusst nur auf EINER Ebene je Reihe — ineinander verschachtelte Wischbereiche fühlen sich am Finger falsch an. */ .hero__stats, .ramtabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; align-items: center; } .hero__stats::-webkit-scrollbar, .ramtabs::-webkit-scrollbar { display: none; } .hero__stats > *, .ramtabs > * { flex: 0 0 auto; } /* Die Filterreihen stehen jetzt im Filterblatt (css/filter.css) — dort ist Platz nach unten, also wird umgebrochen statt gewischt. Ausnahme bleibt die Streckenwahl im RaM-Training: sie ist keine Filterung, sondern die eigentliche Auswahl, und bleibt deshalb sofort sichtbar. */ .controls__row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .controls__row--wisch { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .controls__row--wisch::-webkit-scrollbar { display: none; } .controls__row--wisch > * { flex: 0 0 auto; } .tabs, .presets, .toolbar, .daterange { flex-wrap: nowrap; } .search { min-width: 150px; } .controls { gap: var(--space-2); margin-bottom: var(--space-3); } .hero__stats { margin-top: var(--space-2); } .ramtabs { margin-bottom: var(--space-3); } /* Nur am Telefon sichtbar (z. B. die Sortierleiste im RaM-Training, die am Desktop die klickbare Tabellen-Kopfzeile ersetzt). */ .nur-handy { display: flex; } .controls__row.nur-handy { display: flex; flex-wrap: wrap; gap: var(--space-2); } .nur-handy .toolbar { flex-wrap: wrap; width: 100%; } .nur-handy .search { flex: 1 1 100%; } } /* ============================================================ Phase 3 — die Navigation wandert nach unten ============================================================ */ @media (max-width: 767px) { /* Die Klapp-Navigation brach am Handy auf drei Reihen um und machte die obere Leiste 189 px hoch — mehr als ein Fuenftel des Bildschirms, bevor irgendein Inhalt kam. Ersetzt durch die feste Leiste unten; dieselben Ziele, nur erreichbarer. Am Desktop bleibt alles wie bisher. */ .topnav { display: none; } .topbar { flex-wrap: nowrap; gap: 10px; padding: 8px var(--space-3); } .brand__logo { height: 26px; } .server-badge { margin-left: auto; } .server-badge__label { font-size: var(--text-xs); } /* Platz fuer die Leiste unten, damit sie nichts verdeckt — Fusszeile und letzte Ranglisten-Zeile bleiben erreichbar. */ body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } /* --- Autoliste im Fahrerprofil --------------------------- Lief bei 360 px 393 px breit. Ursache ist nicht die Spaltenvorlage, sondern `1fr`: eine Spalte schrumpft damit NIE unter die Mindestbreite ihres Inhalts. Ein langer Autoname („Porsche 911 RSR" samt Klassen-Badge) drueckt die Zeile deshalb ueber den Bildschirmrand — sichtbar erst, wenn man `overflow-x: hidden` am Grundgeruest wegdenkt. `minmax(0, 1fr)` erlaubt das Schrumpfen, der Name wird gekuerzt. */ .car-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; } .car-row > * { min-width: 0; } .car-row__go { display: none; } /* die ganze Zeile ist antippbar */ .car-row__name { font-size: var(--text-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .car-row__time { font-size: var(--text-md); } .car-row__rank { font-size: var(--text-md); } /* --- Auto-Flotte in der Statistik ------------------------ Gleiche Ursache wie oben: feste Spalten (34+40+150+20 px) plus 4x14 px Luecke und 36 px Polster ergeben 336 px — bei 360 px Bildschirm stehen aber nur 328 px zur Verfuegung. Gemessen 363 px Zeilenbreite. */ .fleet-row { grid-template-columns: 26px 30px minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; } .fleet-row > * { min-width: 0; } .fleet-row__go { display: none; } /* die ganze Zeile ist antippbar */ .fleet-row__logo .mfr-tile { width: 26px; height: 26px; } .fleet-row__name { font-size: var(--text-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 6px; } .fleet-row__rank { font-size: var(--text-md); } .fleet-row__km { font-size: var(--text-md); } } /* --- Wer im Betriebssystem „weniger Bewegung" eingestellt hat, ---------- bekommt überall weniger Bewegung. Gilt für ALLE Breiten. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } html { scroll-behavior: auto; } }