/* ============================================================================ quer.css - die Anordnung fuer BREITE Bildschirme Das ist die "eigene Anordnungsdatei fuers Querformat", die die Trennung von Designsprache (design.css) und Anordnung (style.css) von Anfang an vorgesehen hat. Sie laedt NACH style.css und ueberschreibt dessen Hochformat-Anordnung allein durch die Reihenfolge - kein !important. Farben, Schrift, Abstaende und Radien kommen weiterhin ausschliesslich als Marken aus design.css; pruefe.sh Regel 2 prueft das auch hier nach. ALLES in dieser Datei steht in EINER Bedingung: Fensterbreite mindestens 900 Punkte UND Hoehe mindestens 500. Warum diese Werte: Der Garagen-Zweispalter braucht rund 420 Punkte Raum plus 380 Punkte Inhaltsspalte, darunter quetscht er. Ein iPad hochkant (768-834 Punkte breit) bleibt dadurch beim Hochformat-Layout - ein Hochformat-Geraet bekommt die Hochformat-Anordnung. Die Hoehengrenze nimmt die Handys im Querformat heraus (844x390 bis 932x440): Dort waere eine Kopfleiste bei 390 Punkten Resthoehe kein Gewinn, und der Planer hat fuer diesen Fall laengst seine Seitenleiste. ACHTUNG, es gibt eine ZWEITE, unabhaengige Grenze im Projekt: die 760 in style.css (Planer: Seitenleiste oder Schublade?) und ihr Spiegel fensterIstSchmal() in app.js. Die beiden beantworten verschiedene Fragen und duerfen nicht zusammengelegt werden - zwischen 760 und 900 ist beides zugleich richtig: Seitenleiste im Planer, aber noch das Hochformat-Layout mit unterer Leiste. ============================================================================ */ @media (min-width: 900px) and (min-height: 500px) { /* --- 1. Die Kopfleiste ---------------------------------------------------- DIESELBE Leiste wie im Hochformat (#hauptNav), nur oben statt unten - mit Schriftzug links und Konto rechts liest sie sich als Kopf einer Webseite. Alles an ihr (Eintraege, Leuchten, Verkabelung, das Verstecken im Navi-Modus) bleibt der bestehende Code. */ .haupt-nav { top: 0; bottom: auto; height: calc(var(--nav-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); padding-bottom: 0; padding-inline: var(--s5); justify-content: flex-start; align-items: center; gap: var(--s2); border-top: 0; border-bottom: 1px solid var(--glas-hell); /* Kante unten rund statt oben, Schatten nach unten statt nach oben - die aufgelegte Glasscheibe haengt jetzt am oberen Rand. */ border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: inset 0 -1px 0 var(--glas-heller), 0 8px 24px var(--schatten-weich); } /* Aus den gestapelten Daumen-Tabs werden Reiheneintraege: Symbol und Wort nebeneinander, nur so breit wie ihr Inhalt. */ .nav-tab { flex: 0 0 auto; flex-direction: row; gap: var(--s2); padding: 0 var(--s3); height: 100%; font-size: 13px; } .nav-tab .ic { width: 18px; height: 18px; } /* Der Schriftzug mit Untertitel, zweizeilig wie der Kopf des Planers. Die Zeilen stehen eng beieinander (line-height 1), damit beide in die 58 Punkte hohe Leiste passen. */ .nav-marke { display: inline-flex; flex-direction: column; justify-content: center; margin-right: var(--s5); } .nav-marke-name { font-family: var(--schrift-display); font-size: 21px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; color: var(--text); } .nav-marke-sub { font-size: 11px; line-height: 1.3; color: var(--muted); } /* Der rechte Bereich: schiebt sich selbst an den Rand. */ .nav-rechts { display: inline-flex; align-items: center; gap: var(--s3); margin-left: auto; } /* Der runde Konto-Knopf im Garagenkopf waere der ZWEITE Konto-Knopf im Bild - die Leiste hat schon einen. Der Neu-laden-Knopf daneben bleibt: Am Rechner gibt es zwar F5, aber wer die Seite vom Startbildschirm eines Tablets oeffnet, hat keine Adresszeile. */ .kopf-knoepfe #btnKontoRund { display: none; } /* --- 2. Der Platz unter der Leiste ----------------------------------------- Im Hochformat lassen die Bildschirme mit height: calc(100% - --nav-raum) unten Platz fuer die Leiste. Sitzt sie oben, muss derselbe Platz OBEN frei bleiben: Die Marge schiebt jeden Bildschirm unter die Leiste, Marge + Hoehe = 100%. Der safe-area-Zuschlag wandert mit nach oben. Alle Sonderfaelle regeln sich von selbst, weil sie an derselben Schaltung haengen: Auf den Konto-Bildschirmen und im Navi-Modus nimmt app.js der Seite die Klasse mit-nav, --nav-raum faellt auf 0, und damit verschwinden Marge und Hoehenabzug gemeinsam. */ body.mit-nav { --nav-raum: calc(var(--nav-h) + env(safe-area-inset-top)); } .start-screen, .app-layout, .ride-screen, .garage-screen { margin-top: var(--nav-raum); } /* --- 3. Die Garage als Zweispalter ------------------------------------------ Im Hochformat stapelt sich alles untereinander und die Seite scrollt. Im Querformat steht der Werkstattraum links und fuellt die Hoehe, rechts laeuft eine Spalte mit Datenblatt, Shop und Menue - nur SIE scrollt, der Raum steht. WICHTIG, und das ist die eine eiserne Regel dieses Blocks: Zwischen .garage-raum und .garage-buehne darf NIE ein positionierter Wrapper oder ein transform dazukommen. Die Buehnenrechnung in garage.js misst ueber die offsetParent-Kette, und ein Glied dazwischen wuerde die Maschine neben den Teller stellen. Der Zweispalter braucht deshalb keinerlei JavaScript: Raum und Inhaltsspalte sind im HTML schon Geschwister, und der ResizeObserver auf dem Raum rechnet die Buehne bei jeder Spaltenbreite von selbst neu. */ .garage-screen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 480px); grid-template-rows: minmax(0, 1fr); overflow: hidden; /* das Scrollen uebernimmt die rechte Spalte */ } /* Der Raum fuellt die linke Spalte. Die Hochformat-Hoehenformel (64svh usw.) rechnet mit dem FENSTER und wuerde hier einen falschen Ausschnitt waehlen - die Spaltenhoehe ist die richtige Ansage. */ .garage-raum { height: 100%; } /* Die rechte Spalte scrollt fuer sich. Der -20px-Ueberlapp des Hochformats (die Platte schiebt sich dort unter den Raum) ergibt nebeneinander keinen Sinn. */ .garage-inhalt { overflow-y: auto; min-height: 0; margin-top: 0; padding-top: var(--s4); padding-right: var(--s4); } /* --- 4. Listenbildschirme in Lesebreite ------------------------------------- Touren (und spaeter Rechtliches, und der Shop, wenn er wiederkommt) liefen bisher randlos ueber die volle Fensterbreite - eine 1400 Punkte breite Listenzeile liest niemand. Der Inhalt bekommt eine Obergrenze und stellt sich mittig; die Marke dafuer kommt aus design.css. */ .listen-screen .start-screen-inner { max-width: var(--inhalt-max); margin-inline: auto; padding-inline: var(--s6); } /* --- 5. Aufzeichnen als Zweispalter ----------------------------------------- Karte links in voller Groesse, das Wertefeld als feste Spalte rechts. Im Hochformat ist das Feld eine Schublade UNTER der Karte mit Hoehendeckeln je Zustand (55/70/88dvh) - nebeneinander gilt beides nicht mehr: Die Spalte ist immer voll hoch und scrollt selbst. */ .ride-screen { flex-direction: row; } .ride-panel { flex: 0 0 var(--spalte-ride); height: 100%; max-height: none; border-top: 0; border-left: 1px solid var(--glas-hell); border-radius: 0; padding-bottom: var(--s4); } .ride-panel.bereit, .ride-panel.zusammenfassung { max-height: none; } /* --- 6. Kleinigkeiten unter der Kopfleiste ---------------------------------- Der Toast haengt im Hochformat 16 Punkte unter der Oberkante - hier laege er AUF der Leiste. Er rueckt unter sie; ist die Leiste versteckt (Konto-Bildschirme, Navi-Modus), ist --nav-raum 0 und er sitzt wieder wie gewohnt oben. */ .toast { top: calc(var(--nav-raum) + var(--s4)); } /* Der Zuschlag fuer die Geraete-Aussparung (Notch) steckt oben bereits in der Leiste - Garagenkopf und Listeninhalt haetten ihn doppelt. */ .garage-kopf { padding-top: var(--s4); } .listen-screen .start-screen-inner { padding-top: var(--s5); } }