/* ============================================================================ 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: Die Garage teilt sich den Bildschirm halbe und halbe, und eine Haelfte unter 450 Punkten traegt weder den Werkstattraum noch die Menuespalte ordentlich. 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. */ /* Die Leiste ist hier hoeher als im Hochformat (--nav-h-quer statt der 58 Punkte, definiert in design.css): Als Kopf einer Webseite darf sie Gewicht haben, waehrend sie als Daumenleiste unten so flach wie moeglich sein soll. Der Umweg ueber die Marke ist Absicht - Margen, Hoehenformeln und der Toast rechnen alle mit --nav-h, und so waechst alles gemeinsam, statt dass der Inhalt unter die Leiste rutscht. */ :root { --nav-h: var(--nav-h-quer); } .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(--s6); justify-content: flex-start; align-items: center; gap: var(--s3); 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. Schrift und Symbole sind auf die hoehere Leiste abgestimmt - die 11px-Beschriftung der Daumenleiste waere hier oben verloren. */ .nav-tab { flex: 0 0 auto; flex-direction: row; gap: var(--s2); /* s3 statt s4: Mit s4 stand die Leiste zwischen 1101 und 1140 Punkten einen Punkt ueber und schob den Konto-Knopf an den Rand (gemessen 05.09.2026 bei 1104). */ padding: 0 var(--s3); height: 100%; /* Gemischte Schrift ohne Sperrung, wie unten: So passen Marke, fuenf Eintraege und Konto auch zwischen 1100 und 1108 Punkten, wo Versalien in Inter die Leiste sprengten (nachgerechnet 05.09.2026). */ font-size: 15px; letter-spacing: 0; } .nav-tab .ic { width: 24px; height: 24px; } /* Der Schriftzug als Bild, darunter der Untertitel. Beides zusammen misst rund 46 Punkte und sitzt damit ruhig in der 80 Punkte hohen Leiste. Der Schriftzug ist hier deutlich kleiner als auf den Anmelde- und Rechtliches-Bildschirmen (dort 220 Punkte, siehe style.css) - eine Kopfleiste soll die Marke zeigen, nicht mit ihr auftrumpfen. */ .nav-marke { display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--s1); margin-right: var(--s6); } .nav-marke .wortmarke-bild { width: 148px; max-width: none; } .nav-marke .wortmarke-sub { /* Kleiner als auf den grossen Bildschirmen, aber mit derselben weiten Laufweite - so bleibt die Zeile genauso breit wie der Schriftzug. */ font-size: 10px; letter-spacing: 0.12em; text-indent: 0.12em; } /* Der rechte Bereich: schiebt sich selbst an den Rand. */ .nav-rechts { display: inline-flex; align-items: center; gap: var(--s3); margin-left: auto; } /* Seit "Stats" dazugekommen ist, stehen fuenf Eintraege neben Schriftzug und Konto. Bequem nebeneinander passt das erst ab gut 1100 Punkten - darunter ruecken sie enger zusammen, statt den Konto-Knopf aus dem Bild zu schieben. Gemessen an der 900er-Ecke: vorher 15 Punkte zu breit, danach passt es mit Luft. */ @media (max-width: 1100px) { .haupt-nav { padding-inline: var(--s4); gap: var(--s2); } .nav-tab { padding: 0 var(--s3); font-size: 14px; } .nav-marke { margin-right: var(--s4); } .nav-marke .wortmarke-bild { width: 118px; } } /* Mit "Ausruestung" als sechstem Eintrag reichte das nicht mehr: An der 900er-Ecke stand die Leiste 17 Punkte ueber, und der Konto-Knopf lag halb ausserhalb. Nachgemessen, nicht geschaetzt. Weg geht die Unterzeile "Deine Motorradapp", nicht ein Eintrag: Der Untertitel ist auf einer 500 Punkte hohen Flaeche ohnehin die unwichtigste Zeile, ein fehlender Reiter dagegen ein fehlender Weg. */ @media (max-width: 1000px) { .haupt-nav { padding-inline: var(--s3); } .nav-tab { padding: 0 var(--s2); font-size: 13px; } .nav-tab .ic { width: 20px; height: 20px; } .nav-marke .wortmarke-sub { display: none; } .nav-marke .wortmarke-bild { width: 104px; } } /* Alles, was die Marke ein ZWEITES Mal ins Bild braechte. Der Grundsatz ist ueberall derselbe: Im Querformat traegt die Kopfleiste den Schriftzug und das Abzeichen, also verschwindet beides ueberall dort, wo es im Hochformat einspringen musste - im Planer-Kopf und im Garagenkopf. Die Unterzeile "Routenplaner" bleibt stehen, sie sagt ja etwas anderes als der Name. */ .panel-header .wortmarke-kopf { display: none; } .nur-hoch { display: none; } /* Der Konto-Knopf im Garagenkopf waere der ZWEITE im Bild - die Leiste hat schon einen. Seit der Neu-laden-Knopf daneben weg ist, bleibt vom Kasten nichts uebrig, also geht er ganz. */ .kopf-knoepfe { 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 { margin-top: var(--nav-raum); } /* --- 3. Der Start im Breiten ------------------------------------------------ Im Hochformat stapeln sich die Karten. Ab 1100 Punkten stehen sie in zwei Spalten: links die Bike-Karte, die beim Scrollen stehen bleibt, rechts der Stapel aus Reise, Merkliste, Vorschlaegen und Reifen. Zwischen 900 und 1100 bleibt es eine Spalte in Lesebreite - zwei Spalten mit je 430 Punkten truegen weder die Buehne noch das Regal. Bis zum 05.09.2026 stand hier der Zweispalter des Werkstattraums (Raum links in voller Hoehe, Spalte rechts), samt der Regel, dass kein Wrapper zwischen Raum und Buehne treten darf - beides ging mit dem Raum. Die 900er-Grenze dieser Datei bleibt trotzdem: Marke, fuenf Reiter und Konto passen erst ab 900 in die Leiste (siehe Abschnitt 1). */ #garageScreen .start-screen-inner { max-width: var(--feed-max); } /* Ab 1100 Punkten ein Widget-Raster: oben die Bike-Karte und die naechste Reise nebeneinander und GLEICH HOCH, darunter die Baender ueber die volle Breite. Alles gehoert zu EINER Seite und scrollt gemeinsam. Hier stand zuerst eine stehende (sticky) Bike-Karte links neben einer scrollenden Spalte rechts. Das las sich wie zwei getrennte Bereiche - genau der Eindruck, den ein Startbildschirm nicht machen soll. */ @media (min-width: 1100px) { #startInner { display: grid; /* Halbe und halbe: Die beiden Widgets der ersten Zeile sind gleich breit und (ueber align-items: stretch) gleich hoch - sie sind gleich gebaut, also sollen sie auch gleich gross sein. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5) var(--s6); /* stretch statt start: Die beiden Karten der ersten Zeile sind damit gleich hoch, und erst das laesst sie als Paar erscheinen. */ align-items: stretch; } #startInner .bike-karte, #startInner .bike-leer { grid-column: 1; grid-row: 1; } #startInner #garageReise { grid-column: 2; grid-row: 1; } /* Das Fahrtband (seit 17.09.2026) steht ueber dem Paar, ueber die volle Breite - und nur wenn es da ist, rueckt das Paar in Zeile zwei. Ohne :has bliebe sonst eine leere erste Zeile mit ihrem Abstand stehen. */ #startInner #garageFahrt { grid-column: 1 / -1; grid-row: 1; } #startInner:has(#garageFahrt:not([hidden])) .bike-karte, #startInner:has(#garageFahrt:not([hidden])) .bike-leer, #startInner:has(#garageFahrt:not([hidden])) #garageReise { grid-row: 2; } /* Die Baender sind Reihen zum Wischen - sie nehmen die volle Breite. */ #startInner #garageFreunde, #startInner #garageMerkliste, #startInner #garageShop, #startInner #garageReifen, #startInner .rechts-fuss { grid-column: 1 / -1; } /* Damit die Reisekarte die Hoehe der Bike-Karte wirklich ausfuellt und nicht oben in ihrer Spalte klebt. */ #startInner #garageReise { display: flex; flex-direction: column; } #startInner .reise-widget { flex: 1; } } /* Die Bike-Karte im Breiten: Die Werte duerfen nicht ueber die halbe Seite auseinanderlaufen, und "Bike bearbeiten" ist ein Knopf, keine Leiste - er steht links unter den Werten wie auf dem Handy, nur ohne die volle Breite zu nehmen. MIT ".bike-karte" DAVOR, und das ist seit dem 11.09.2026 noetig: .widget-knopf ist inzwischen der Fussknopf JEDER Karte - der eigenen Tour, der geteilten, der Reise, der Kasse. Ohne den Vorsatz schrumpfte "Tour oeffnen" im Querformat auf 167 von 602 Punkten zusammen, und aus dem Fuss einer Karte wurde ein verlorener Knopf links unten. */ .bike-karte .widget-knopf { width: auto; align-self: flex-start; padding-inline: var(--s5); font-size: 15px; } /* Die Buehne behaelt das Seitenverhaeltnis des Raumbildes (960 zu 860). Damit zeigt "cover" den Raum vollstaendig, egal wie breit die Karte wird - und die Werkstatt bleibt die Werkstatt statt eines Streifens Drehteller. */ /* Die Buehne braucht im Breiten Hoehe, sonst wird der Raum dahinter zu einem Streifen: Bei 340 Punkten und rund 350 Punkten Breite liegt sie nahe am Seitenverhaeltnis des Bildes (960 zu 860), und "cover" zeigt den Raum fast ganz. Kein aspect-ratio mehr: Zusammen mit einer Mindesthoehe von 100 Prozent machte es die Buehne breiter als ihre Spalte, und die Maschine lief rechts aus der Karte. */ .bike-buehne { min-height: 340px; } .bike-bild { max-height: none; } /* Der Fahrer-Kreis darf im Breiten wachsen, aber nicht so weit wie die Maschine: Ein Portrait ueber 170 Punkte wird zum Poster. */ .fahrer-bild { max-width: 240px; } .bike-karte.zeigt-fahrer .bike-buehne { min-height: 340px; } .fahrer-name { font-size: 14px; } /* Im Breiten hat die Buehne mehr Hoehe, als Tafel und Maschine brauchen - die Tafel rueckt etwas hoch, damit sie nicht auf dem Lenker klebt. */ .buehne-hinweis { margin-bottom: var(--s7); } /* Das Kartenbild im Breiten: hoeher, damit es die Hoehe der Bike-Karte daneben mittraegt, und etwas mehr als die halbe Karte - die Zeilen daneben brauchen weniger Platz als die Werte des Bikes. */ .reise-widget .widget-inhalt { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .reise-bild { min-height: 280px; } /* Der Knopf steht links unter den Zeilen, nicht ueber die ganze Spalte. */ .reise-widget .widget-knopf { width: 100%; } /* --- 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 ----------------------------------------- Steht seit dem 31.08.2026 in style.css unter "min-width: 761px" und nicht mehr hier. Grund: Die Frage "ist genug Breite fuer zwei Spalten?" ist dieselbe, die der Planer stellt, und der beantwortet sie mit 761. Hier haette sie erst ab 900 x 500 gegolten - und ein Handy im Liegen faellt durch die Hoehengrenze, obwohl es breit genug ist. */ /* --- 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 - der Listeninhalt haette ihn doppelt. */ .listen-screen .start-screen-inner { padding-top: var(--s5); } /* --- 7. Touren und Stats im Breiten ----------------------------------------- Im Hochformat ist der Touren-Feed eine Spalte - im Breiten wuerde jede Karte die vollen 1080 Punkte der Lesebreite nehmen und ihr Kartenbild auf ueber 1000 x 440 wachsen. Zwei Spalten halbieren das Bild und machen aus der Liste ein Regal. Die Gruppenueberschriften (je Bundesland) und die Leer-/Lade-Zeilen sind Geschwister der Karten im selben ul und spannen deshalb einfach ueber beide Spalten. */ #tourenList, #serpaListe, #entdeckenListe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: start; } /* Das Raster uebernimmt die Abstaende - die Einzelmarge wuerde sie verdoppeln. */ #tourenList > li, #serpaListe > li, #entdeckenListe > li { margin-bottom: 0; } #serpaListe .geteilt-gruppe, #tourenList .empty, #serpaListe .geteilt-leer, #entdeckenListe .geteilt-leer { grid-column: 1 / -1; } /* Touren und Stats zeigen Bilder, keine Textzeilen - sie duerfen breiter stehen als die Lesebreite der Textseiten (siehe --feed-max in design.css). Rechtliches und Konto behalten die 1080. */ #tourenScreen .start-screen-inner, #statsScreen .start-screen-inner, #shopScreen .start-screen-inner, #merklisteScreen .start-screen-inner { max-width: var(--feed-max); } /* Die Regale der Ausruestung nutzen die Breite: vier Karten im Raster statt zwei, die Trefferliste in zwei Spalten. */ #shopScreen .produkt-raster { grid-template-columns: repeat(4, 1fr); } #shopScreen .produkt-liste { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); } #shopScreen .produkt-liste li { margin: 0; } #shopScreen .produkt-karte { flex-basis: 176px; } #shopScreen .produkt-band .produkt-mini-bild { height: 120px; } #shopScreen .produkt-raster .produkt-mini-bild { height: 160px; } /* Zwei Segmente ueber je 700 Punkte waeren Knoepfe wie Fahrbahnen - der Umschalter bleibt handbreit, die Listen darunter duerfen breit sein. */ .touren-umschalter, .quellen-umschalter { max-width: 460px; } /* Die Stats: mehr Platz, mehr Spalten - die Kacheln zu dritt statt zu zweit, das Gesamtbild und der Rueckblick bleiben untereinander. */ #statsKacheln, #statsZeitWerte { grid-template-columns: repeat(3, 1fr); } /* --- 8. Reifen: Kopf und Groessenwahl nebeneinander ------------------------- Im Hochformat stehen sie untereinander, weil nichts anderes hinpasst. Liegend waeren das zwei breite Baender mit viel Luft darin - also stehen sie nebeneinander, und der Blick geht in einem Zug von der Maschine zur Groesse. Die Liste darunter bleibt einspaltig: Ein Preis laesst sich in einer Spalte vergleichen, in zweien nicht. */ .reifen-oben { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: stretch; } .reifen-held { margin-bottom: 0; } .reifen-wahl { margin-bottom: 0; justify-content: center; } .reifen-held-name { font-size: 38px; } /* --- 10. Reise planen: die Karte links stehend, der Faden rechts ----------- Im Hochformat liegt die Reisekarte ueber dem Faden und scrollt mit ihm weg. Im Breiten bleibt sie links stehen (sticky), waehrend rechts die Tage laufen - so sieht man beim Waehlen einer Route sofort, wie die Linie oben dazukommt. Der Halter ist noetig: Ein Element mit overflow hidden und Rundung klebt nicht zuverlaessig, ein schlichter Halter darum schon. align-items: start ist Pflicht - ein gestrecktes Rasterkind kann nicht kleben. */ #reiseScreen .start-screen-inner { max-width: var(--feed-max); } #reiseInner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s6); align-items: start; /* .listen-screen streckt seine Kinder auf Fensterhoehe (align-items: stretch); der Faden liefe dann unten aus dem Kasten heraus, und die Karte haette nichts, woran sie kleben kann - sticky haelt sich an den Elternkasten. So waechst der Kasten mit dem Inhalt. */ align-self: flex-start; } #reiseInner .reise-kopf { grid-column: 1 / -1; } #reiseInner .reise-held-halter { position: sticky; top: var(--s5); } #reiseInner .reise-held { margin-bottom: var(--s2); } /* Vier Spalten statt zwei: Der Block klebt zusammen mit der Karte, und mit drei Kachelzeilen waere er hoeher als das Fenster. */ #reiseInner .reise-zahlen { margin-bottom: 0; grid-template-columns: repeat(4, 1fr); } #reiseInner .reise-zahlen .stat.breit { grid-column: span 2; } #reiseInner .reise-name { font-size: 32px; } /* Die Liste der Reisen im selben Zweispalter wie die Touren daneben. */ #reisenListe .reisen-liste { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: start; } #reisenListe .reisen-liste > li { margin-bottom: 0; } #reisenListe .empty { grid-column: 1 / -1; } /* --- 11. Planer-Einstieg: die zwei Karten nebeneinander --------------------- Im Hochformat stehen sie untereinander, hier ist Platz fuer beide in einer Reihe - und die Frage "Tour oder Reise?" liest sich dann als Entweder-oder, nicht als Liste. */ .wahl-karten { grid-template-columns: 1fr 1fr; } /* Hier stand "align-items: flex-start" aus der Zeit, als die Karte eine Zeile war (Symbol links, Text rechts). Seit dem 11.09.2026 ist sie eine Spalte, und die Regel nahm der Kopfzeile ihre Breite: Der Pfeil konnte mit seinem "margin-left: auto" nirgendwohin ausweichen und klebte am Abzeichen. */ /* Der Listeninhalt hat im Breiten var(--s6) Innenabstand statt var(--s4) - das Kopfbild muss also weiter herausgezogen werden, sonst bliebe links und rechts ein Streifen stehen. */ /* Und hoeher als im Hochformat: Das Band ist hier gut dreimal so breit wie hoch, und "cover" schneidet dann oben und unten so viel weg, dass vom Fahrer nur noch der Rumpf uebrig bleibt. Mehr Hoehe gibt ihm wieder Kopf und Vorderrad. */ .planer-kopf-bild { margin-inline: calc(-1 * var(--s6)); height: clamp(280px, 52vh, 520px); /* ZWEI Masken, uebereinandergelegt: nach unten wie im Hochformat, und zusaetzlich nach links und rechts. Der Grund steht in derselben Regel darueber: Im Breiten steht der Inhalt in einer Lesespalte (max-width), das Bild ist also KEIN Band ueber das ganze Fenster, sondern ein Rechteck mit schwarzem Rand daneben - und damit mit zwei harten senkrechten Kanten. Im Hochformat gibt es die nicht, dort reicht das Bild ohnehin von Rand zu Rand; deshalb steht diese Regel hier und nicht in style.css. "intersect" heisst: sichtbar bleibt, was in BEIDEN Masken sichtbar ist. Die alte WebKit-Schreibweise dafuer ist "source-in" und muss daneben stehen, sonst faellt auf dem iPhone die zweite Maske aus und das Bild verschwindet ganz. */ -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent 100%), linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%); mask-image: linear-gradient(to bottom, black 78%, transparent 100%), linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } /* --- 9. Der Startfilm im Liegen --------------------------------------------- Das liegende BILD des Films haengt an der Form des Fensters, nicht an dieser Grenze - es steht deshalb in style.css unter "min-aspect-ratio: 23/20" und gilt auch dem Handy im Liegen. Hier bleibt nur, was wirklich von DIESER Anordnung abhaengt: Die Leiste haengt im Querformat oben, also faehrt sie auch von oben herein statt von unten. */ @keyframes filmNavHerein { from { transform: translateY(-100%); opacity: 0; } } }