/* IYLT — Handy- und Tablet-Schicht fuer die App. * * WAS HIER NICHT PASSIERT: die vorhandenen Ansichten werden nicht angefasst. * Mit zwei Ausnahmen (der Knopf und die Verdunkelung, die es vorher gar * nicht gab) steht JEDE Regel in einer Mediaquery mit Obergrenze. Auf einem * Schreibtischbildschirm aendert diese Datei nichts, auch wenn sie geladen * ist. Darum ist es eine eigene Datei und kein Eingriff in die 21 Seiten: * das App-Gerippe ist in jede Seite hineinkopiert, ein Eingriff waere * einundzwanzigmal derselbe Eingriff gewesen. * * GEMESSEN, nicht vermutet (tools/mobil_pruefen.mjs, 390 x 844 px): * app.improveyourlaptime.com/ 725 px breit 335 px Ueberlauf * app.improveyourlaptime.com/shop 496 px breit 106 px Ueberlauf * Ursache beidemal dieselbe: `#side` ist fest 224 px breit und `.main` haelt * mit `margin-left:224px` Abstand. Von 390 Pixeln bleiben 166 fuer den * Inhalt. Dazu kommt `.top` ohne Umbruch - zwoelf Knoepfe in einer Zeile. * * ZWEI SCHICHTEN, zwei Grenzen: * bis 760 px Handy: Seitenleiste ausfahrbar hinter einem Knopf * 761-900 px Tablet hochkant: Seitenleiste auf Sinnbildbreite * ab 901 px unveraendert * * Grenze 760 px: dieselbe, die `web/start.html` schon benutzt. Zwei * verschiedene Grenzen im selben Haus sind eine Fehlerquelle. * Grenze 900 px: deckt die Tablets im Hochformat ab (iPad 768, Air 820, * Pro 11" 834) und laesst alle Querformate sowie das grosse iPad hochkant * (1024) in Ruhe - dort sind 224 px von der Breite kein Problem mehr. */ /* Der Knopf existiert nur fuer das Handy und ist sonst weg. Die Regel steht mit Absicht AUSSERHALB der Mediaquery: so ist er auch dann unsichtbar, wenn diese Datei einmal ohne Mediaquery-Unterstuetzung geladen wird. */ .mobil-burger { display: none; } .mobil-schirm { display: none; } /* Dasselbe fuer den Filterknopf der Cloud: `cloud.html` haengt ihn immer ein, sichtbar ist er nur auf dem Telefon. Und `filt-zu` darf oberhalb von 760 px nichts bewirken - deshalb stehen die Einklapp-Regeln ausschliesslich in der Mediaquery. */ #filtTg { display: none; } @media (max-width: 760px) { /* ── 1. Seitenleiste: ausfahrbar statt immer sichtbar ──────────────── */ /* Sie bleibt im Dokument und behaelt ihre Rolle; sie steht nur links ausserhalb des Bildes, bis jemand den Knopf drueckt. */ /* ZUERST aus dem Fluss nehmen. Siebzehn Seiten haben `position:fixed` schon in ihrem eigenen CSS - der Viewer (`index.html`) als EINZIGER nicht: dort ist `#side` ein Flex-Kind von `#app`. Ein `transform` verschiebt es dann zwar aus dem Bild, sein PLATZ bleibt aber stehen. GEMESSEN, 2026-11-03: bei 390 px Fensterbreite behielt `.vmain` genau 100 px. Die ganze Analyse lag in einem 100 Pixel breiten Streifen am rechten Rand. Warum es die Messung nicht gefunden hat: die Seite war trotzdem 390 px breit und lief nicht ueber, weil `.stage{overflow-x:auto}` den Rest einfaengt. Seitenbreite in Ordnung, Ansicht unbrauchbar - dagegen hilft nur hinsehen. */ #side { position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; width: min(78vw, 290px); transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 44px rgba(0, 0, 0, .6); will-change: transform; } #app.mobil-auf #side { transform: none; } /* Der Schmalmodus (`.col`, 56 px, nur Sinnbilder) ergibt auf dem Handy keinen Sinn: wer die Leiste aufmacht, will die Namen lesen. Deshalb werden seine Regeln hier zurueckgenommen. */ #app.col #side { width: min(78vw, 290px); } #app.col .s-logo { display: block; } #app.col .s-item { justify-content: flex-start; padding: 9px 10px; gap: 12px; } #app.col .s-item .l, #app.col .s-item .tag { display: block; } /* Siebzehn Eintraege zu je 30 px — gemessen am 2026-11-04 im geoeffneten Menue bei 390 px. Ein Menue ist die eine Stelle, an der ein Fehlgriff den Nutzer auf eine voellig andere Seite wirft, also gilt hier das volle Mass von 44 px. `.s-nav` hat `overflow-y:auto`, die Liste scrollt also einfach weiter — nichts wird unerreichbar. */ #side .s-item { min-height: 44px; } #side .s-legal a { min-height: 30px; display: flex; align-items: center; } #app.col .s-top { justify-content: flex-start; padding: 0 14px; } #app.col .s-sec { text-align: left; font-size: 10px; padding: 12px 10px 4px; } .s-col { display: none; } /* Einklappknopf: siehe oben */ /* Der Inhalt bekommt die ganze Breite zurueck. `!important` ist hier kein Holzhammer, sondern noetig: `#app.col .main` ist spezifischer als `.main`, und beide Faelle muessen auf 0. */ .main, #app.col .main { margin-left: 0 !important; } /* ── 2. Verdunkelung hinter der offenen Leiste ─────────────────────── */ .mobil-schirm { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 49; /* unter #side (50), ueber allem sonst */ opacity: 0; pointer-events: none; transition: opacity .22s ease; } #app.mobil-auf .mobil-schirm { opacity: 1; pointer-events: auto; } /* ── 3. Der Knopf ──────────────────────────────────────────────────── */ .mobil-burger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; background: var(--elev, #1A1F26); color: var(--text, #ECEEF1); border: 1px solid var(--border, #262D36); border-radius: 9px; padding: 0; margin-right: 2px; } .mobil-burger:active { border-color: var(--accent, #FF8C00); } /* Mindestens 38 px in jede Richtung: alles darunter trifft man mit dem Daumen nicht zuverlaessig. */ /* ── 4. Kopfzeile ──────────────────────────────────────────────────── */ .topbar { padding: 0 10px; gap: 8px; } .topbar > * { min-width: 0; } .topbar h1 { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Der Anmeldeknopf stand 63 px zu weit rechts, weil nichts schrumpfen durfte. */ .topbar .btn, .topbar .btn2 { flex: none; } .fuel { font-size: 11px; white-space: nowrap; } /* ── 5. Inhalt ─────────────────────────────────────────────────────── */ .wrap { padding: 14px 12px 56px; } .grid { grid-template-columns: 1fr; } .banner { font-size: 12px; padding: 9px 11px; } /* Filterzeilen: die vier Felder haben `min-width:150px` und passen zu zweit nicht nebeneinander (2 x 150 + Abstand > 366 nutzbare Pixel). Untereinander, jedes ueber die volle Breite. */ .filters { padding: 10px; gap: 8px; } .filters .grow { min-width: 0; flex: 1 1 100%; } .filters select, .filters input { width: 100%; } .vsw { margin-left: 0; } /* Karten duerfen schmaler werden als ihre Entwurfsbreite. */ .bcard, .card, .pcard { min-width: 0; } /* ── 6. Werkzeugleiste des Viewers ─────────────────────────────────── */ /* Zwoelf Knoepfe passen in keine 390 px, und Umbruch in vier Zeilen frisst den halben Bildschirm. Also schiebbar: alles bleibt erreichbar, nichts ragt heraus. */ .top { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none; padding: 8px 10px; } .top::-webkit-scrollbar { display: none; } .top > * { flex: none; } .top .sp { flex: 0 0 2px; } /* der Fuellplatz wuerde sonst schieben */ /* Die Leiste traegt seit dem 2026-11-05 benannte Gruppen. Auf dem Desktop darf sie umbrechen, HIER NICHT: sie ist schiebbar, und ein `wrap` aus der Hauptdatei wuerde den Streifen in mehrere Zeilen zerlegen, von denen nur die erste zu sehen waere. Die Regel steht deshalb ausdruecklich dagegen. Die Gruppentitel (RUNDEN, AUSWERTEN …) entfallen: sie kosten auf 390 px Breite, die der Nutzer schieben muss, und die Trennlinien zeigen die Gruppen auch ohne Wort. */ .top { flex-wrap: nowrap !important; row-gap: 0; } .top .hgroup { display: inline-flex; align-items: center; gap: 8px; flex: none; } .top .hlab { display: none; } .top .hsep { margin: 0 2px; } /* ── 6a. Die Menues DARIN, und der Preis der schiebbaren Leiste ─────── */ /* * Die schiebbare Leiste hat beide Popover-Menues unbrauchbar gemacht: * `#viewMenu` (Ansicht) und `#dispMenu` (Darstellung) liegen als * `position:absolute` IN `.top`, und ein `overflow` ausser `visible` * KAPPT absolut positionierte Kinder. Gemeldet am 2026-11-04: „kann die * Ansicht nicht wechseln, die Streckenkarte liegt ueber dem Menue". * * Zwei Dinge, beide bei 390 px gemessen: * 1. `overflow-y` stand auf `auto`, obwohl hier nur `overflow-x` gesetzt * ist. Die Spezifikation erzwingt das, sobald eine Achse nicht * `visible` ist — also wurde auch nach unten gekappt. * 2. `#viewMenu` haengt mit `right:0` an seinem Knopf, und der steht im * seitlich GESCHOBENEN Streifen. Das Menue begann bei x=262 und war * 359 px breit, ragte also 231 px aus dem 390 px breiten Bild. * `document.elementFromPoint` in seiner Mitte lieferte NICHTS. * * Nicht der Stapel war das Problem (das Menue hat z-index:50, die Karte * ist ein statisches Element und kann es gar nicht ueberdecken) — es war * der Zuschnitt. Deshalb hilft kein hoeherer z-index. * * `position:fixed` loest beides: es entkommt dem Zuschnitt, weil es sich * auf das Fenster bezieht statt auf einen Vorfahren mit `overflow`, und * es loest sich vom geschobenen Knopf. Als Tafel von unten ist es auf dem * Handy ohnehin besser zu treffen als ein Popover an einem 30 px hohen * Knopf am Bildrand. * * `!important` ist hier Pflicht, nicht Bequemlichkeit: `#viewMenu` setzt * seine Masse ueber eine ID-Regel, und die schlaegt jede Klassenregel. */ .vmenu, #viewMenu, #dispMenu { position: fixed !important; left: max(8px, env(safe-area-inset-left, 0px)) !important; right: max(8px, env(safe-area-inset-right, 0px)) !important; top: auto !important; bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important; width: auto !important; min-width: 0 !important; max-width: none !important; max-height: 72vh !important; overflow-y: auto; /* Unter `#side` (50) und seiner Verdunkelung (49): ein offenes Hauptmenue gehoert davor. Ueber allem anderen im Viewer — die Schubfaecher liegen bei 20/21, die Modale bei 60 und 2000. */ z-index: 45 !important; } /* Sektorleiste unter der Werkzeugleiste: 54 px Einzug plus sechzehn Felder mit `flex-shrink:0` ergaben 424 px. Der Einzug richtet die Felder an der Karte darueber aus, was auf dem Handy ohnehin nicht aufgeht - also weg damit, und die Felder duerfen schrumpfen. */ #sectorBar, #sectorBar.on { padding-left: 8px; padding-right: 8px; } #sectorBar .seg { flex-shrink: 1; min-width: 0; } /* Der erklaerende Beisatz neben der Ueberschrift ist Schmuck und hat die Fuel-Anzeige aus dem Bild gedraengt. */ .topbar .sub { display: none; } /* ── 6e. Der Filterblock der Cloud klappt ein ──────────────────────── */ /* * GEMESSEN am 2026-11-04 bei 390 px: sieben Quellen-Chips, vier * Auswahlfelder, Suche, Outlaps und Stints belegten rund 640 der 844 px, * BEVOR die erste Runde zu sehen war. Drei Viertel des Bildschirms fuer * die Frage, bevor man die Antwort sieht. * * Zugeklappt bleibt in der Filterleiste nur der Knopf selbst und die * Ansichtsumschalter `.modes` — Liste/Baum/Rangliste sind Navigation, * kein Filter. Die Zahl der Einschraenkungen steht im Knopf (siehe * `filtBadge` in cloud.html), damit ein eingeklappter Filter nicht still * weiterwirkt. */ #filtTg { display: inline-flex; align-items: center; } #app.filt-zu #srcChips { display: none; } #app.filt-zu .filterbar > *:not(#filtTg):not(.modes) { display: none; } /* ── 7. Tabellen ───────────────────────────────────────────────────── */ /* Eine Tabelle mit sieben Spalten schrumpft nicht auf 390 px. Sie bekommt ihren eigenen Schiebebereich, statt die ganze Seite breiter zu machen. */ .ltbl-huelle, .tabelle-huelle { overflow-x: auto; } .ltbl { display: block; overflow-x: auto; white-space: nowrap; } /* ── 8. Fenster und Dialoge ────────────────────────────────────────── */ .modal > div, .mdl, .sheet { max-width: calc(100vw - 20px); max-height: calc(100dvh - 24px); } /* ── 9. Knoepfe allgemein und der Feedback-Knopf ───────────────────── */ /* `.btn` ist der Hauptknopf der App. Gemessen waren die „Einloggen"-Knoepfe auf den Seiten ohne Sitzung 35 px hoch - also genau die Knoepfe, die ein neuer Besucher als erstes trifft. 40 px als Untergrenze, mehr aendert hier nichts am Entwurf. NICHT angefasst: Textlinks mitten im Satz („bitte log in"), 21 px hoch. Die auf 40 px zu ziehen zerreisst den Satz, in dem sie stehen. */ .btn { min-height: 40px; } .mobil-burger { width: 44px; height: 44px; } /* Der runde Feedback-Knopf steht jetzt im 900er-Block: das Verdecken passiert auf dem Tablet genauso (gemessen im Shop bei 768 px). */ } /* ════════════════════════════════════════════════════════════════════════ TABLET HOCHKANT (761-900 px) Hier ist nichts kaputt - gemessen laeuft keine der Seiten ueber. Es ist eine Frage der Aufteilung: die Seitenleiste ist ausgeklappt 224 px breit, und das sind auf einem iPad hochkant 29 % des Bildschirms, die dauerhaft eine Liste mit zwoelf Woertern zeigen. GEMESSEN blieben dem Inhalt 544 px. Ein Knopf wie auf dem Handy waere hier falsch: auf einem Tablet ist Platz fuer eine stehende Leiste, und eine stehende Leiste ist ein Fingertipp weniger. Also die Sinnbildbreite, die die App ohnehin kennt (`#app.col`, 56 px) - nur eben nicht als Einstellung, sondern weil der Bildschirm es verlangt. Der Inhalt waechst damit von 544 auf 712 px, ein Drittel mehr. ════════════════════════════════════════════════════════════════════════ */ @media (min-width: 761px) and (max-width: 900px) { /* Siebzehn Seiten rechnen ihren Rand aus `--sw`. Die Variable einmal umzusetzen erledigt sie alle - Seitenleiste, Hauptbereich, alles was sonst noch daran haengt. */ :root { --sw: var(--swc, 56px); } /* Der Viewer rechnet NICHT mit der Variablen, er schreibt 224 px direkt ins `#side`. Deshalb hier noch einmal von Hand. */ #side { width: 56px; } /* * WARUM HIER `!important` STEHT - und warum das ausnahmsweise die * richtige Wahl ist statt der uebliche Holzhammer: * * Die Regeln, gegen die hier angetreten wird, stehen an DREI Orten in * drei verschiedenen Schreibweisen. Der Viewer schreibt * `#app.col #side .s-logo`, die Team-Seite `#app.col .s-logo`, und die * Rechtslinks kommen aus `injectLegalFooter()` in shell.js, das sein * `