/* base.css — Farbmarken, Grundtypografie und das Seitenskelett. * * Das CSS ist nach Bereichen aufgeteilt statt in einer wachsenden app.css; * diese Datei traegt nur, was jede Seite braucht. Karten, Kacheln, Tabellen, * Formularzeilen und Diagramme bekommen eigene Dateien, sobald es sie gibt. * * Namensraum: Variablen beginnen mit --app- , Klassen mit .app- . * (Bewusst mit Leerzeichen geschrieben: die Zeichenfolge Stern-Schrägstrich * schlösse diesen Kommentar mitten im Satz, und der komplette folgende * :root-Block fiele lautlos aus — die Datei bliebe dabei gültig.) * * Pfade in url() sind relativ zu DIESER Datei, also zu assets/css/ — * Schriften liegen unter ../fonts/ , nicht unter assets/fonts/ . */ :root { /* Temperatur-Farbskala. Gilt projektweit identisch und wird sowohl * serverseitig als auch im JavaScript benutzt; das JS liest die Werte * ueber getComputedStyle aus genau diesen Variablen, damit sie am * Hell/Dunkel-Umschalter teilnehmen. Eine neue Farbe gehoert deshalb * immer auch hierher. */ --app-frost: #7a4fd0; /* unter 5 °C */ --app-cold: #4aa8ff; /* 5 bis 16 °C */ --app-good: #3ecf8e; /* 16 bis 23 °C */ --app-warm: #ffb454; /* 23 bis 27 °C */ --app-hot: #ff6b6b; /* ab 27 °C */ /* Luftfeuchte: die drei mittleren Baender nutzen die Temperaturfarben * wieder, nur die Extreme sind eigene Toene. */ --app-hum: #4aa8ff; --app-hum-vdry: #e08e4a; --app-hum-vhumid: #2f6fd0; /* Luftqualitaet, angelehnt an die offizielle AQI-Farbfamilie. */ --app-aqi-yellow: #ffd54a; --app-aqi-purple: #9b5de5; --app-aqi-maroon: #8c2f39; /* CO2 als Diagrammlinie (NEUBAU_PLAN 6.3): derselbe Ton wie * --app-aqi-purple, eigener Name, weil die Bedeutung hier eine andere ist * (Innenraum-Messwert statt Aussen-Index) — dieselbe Wiederverwendung wie * bei der Luftfeuchte-Skala (CLAUDE.md 10.3). */ --app-co2: #9b5de5; /* Batteriehinweis an der Messpunkt-Kurzkarte. Der einzige neue Farbton * dieser Reihe, und zwar aus einem messbaren Grund: der Hinweis kann mit * **jedem** der drei anderen zusammen auf einer Karte stehen (er sagt * etwas ueber das Geraet, nicht ueber die Luft), waehrend jene sich * teilweise ausschliessen. CO2-Violett, Frost-Violett und Feuchte-Blau * sind alle kalt — ein Ocker liegt als einziger Ton ausserhalb dieser * Familie und ist auch bei 0,72 rem Schriftgroesse noch als anderer * Hinweis zu erkennen. Nachgemessen gegen den weissen Text der Plakette: * 5,0:1, damit im Band der drei vorhandenen (4,1 bis 5,5:1). Ein * dunkleres Rot haette 8:1 gegen den Text, faellt dafuer aber auf der * dunklen Karte zusammen (2,1:1 statt 3,5:1) — die Plakette waere dort * kaum noch als Flaeche zu sehen. */ /* Die Mondscheibe (Spezifikation 9k) — gebraucht von der Kachel „Mond" auf * dem Dashboard (`weather.css`) und von der Seite „Sonne & Mond" * (`himmel.css`). Sie stehen deshalb hier und nicht in einer der beiden: * dieselbe Scheibe muss an beiden Stellen gleich aussehen, und zwei * Definitionen derselben Farbe driften auseinander. * * **Kein reines Weiss fuer die beleuchtete Seite.** Auf hellem Grund * verschwaende sie, und der Mond ist auch am Himmel nie weiss. */ --app-moon-lit: #f4e3b8; --app-moon-dark: #cbd3e2; --app-battery: #a85c0e; /* Durchschnittslinie im Langzeitverlauf. Bewusst NICHT theme-abhaengig: * derselbe Grauton bleibt auf hellem und dunklem Kartengrund lesbar. */ --app-avgline: #8b93a1; /* Wetter-Icon-Farbe: fest und temperaturunabhaengig (CLAUDE.md 10.7), * damit sie nicht mit der Temperaturskala vermischt wird — die belegt * bereits Rot, Orange, Gelb und Blau (Frost/Kalt/Gut/Warm/Heiss). Terrakotta * und Pflaume liegen ausserhalb dieser Skala und ausserhalb von Blau, das im * Rest der Oberflaeche fuer Akzent, Kaelte und Luftfeuchte steht. Hell * braucht einen dunkleren, kraeftigeren Ton als Dunkel — Weiss waere auf der * hellen Karte unsichtbar. */ --app-wx-day: #d97757; --app-wx-night: #6b5a7a; /* Flaechen und Text. * * **Der Grund fuer den Blaustich im hellen Schema.** Bis 0.7.0 war der * Grund ein neutrales Grau (#eef1f6) und der Text ein Fast-Schwarz * (#16191f). Beides fuer sich ist korrekt, zusammen ergeben sie die * Anmutung einer noch nicht gestalteten Seite: der Unterschied zwischen * Grund und Karte ist dann reine **Helligkeit**, und Helligkeit allein * liest sich als „Weiss auf Grau" statt als Gestaltung. Der Grund traegt * deshalb jetzt denselben Blauton wie der Akzent, nur stark verduennt, * und der Text ist ein tiefes Marineblau statt Schwarz — die Seite * besteht damit aus **einer** Farbfamilie statt aus Grau plus einem * blauen Akzent, der nirgends sonst vorkommt. * * Die Karte bleibt reines Weiss. Sie ist der einzige Ton ohne Stich, und * genau daran erkennt man sie als Flaeche ueber dem Grund. */ --app-bg: #eaf0fb; --app-surface: #ffffff; /* Die zweite Flaeche: Kartenkopf, Rail, alles, was auf einer Karte liegt * und sich trotzdem absetzen soll. Ohne sie bleibt nur „Rahmen ziehen", * und drei ineinander liegende Rahmen sehen nach Tabelle aus. */ --app-surface-2: #f2f6fd; --app-border: #dbe4f4; --app-text: #1a2744; --app-text-mute: #5d6b95; --app-accent: #2f6fd0; /* Die getoente Akzentflaeche: Symbolplaettchen im Kartenkopf, weiche * Hinterlegungen. Als eigener Wert und nicht als `color-mix` an jeder * Fundstelle, weil der dunkle Modus hier nicht dieselbe Rechnung braucht * — dort traegt dieselbe Rolle eine halbdurchsichtige Aufhellung. */ --app-accent-soft: #e4edfc; /* Tiefe statt Linien. Zwei Lagen: eine harte Kante von einem Pixel und ein * weit gestreuter, sehr schwacher Schlagschatten — so heben sich Karten * vom Grund ab, ohne dass irgendwo ein grauer Kasten steht. * * Der Schatten traegt denselben Blauton wie der Grund. Ein neutralgrauer * Schatten auf einem getoenten Grund sieht schmutzig aus — er legt Grau * ueber Blau, und das ist die Farbe, die entsteht, wenn man zwei * Entscheidungen nicht zusammen getroffen hat. */ --app-shadow: 0 1px 2px rgba(26, 39, 68, .04), 0 14px 32px -18px rgba(26, 39, 68, .30); --app-shadow-sm: 0 1px 2px rgba(26, 39, 68, .05); /* Die Kopfzeile liegt ueber dem scrollenden Inhalt und laesst ihn * durchscheinen. */ --app-veil: rgba(255, 255, 255, .72); /* Der Lichtschein am oberen Seitenrand — die einzige Flaeche der ganzen * Anwendung, die keine Auskunft traegt. Sie steht hier, weil ein * Wetter-Dashboard unter einem Himmel sitzt und nicht auf einem Blatt * Papier: ohne sie endet der Grund oben an der Kopfzeile, als waere die * Seite abgeschnitten. Sie scrollt bewusst mit weg (kein * `background-attachment: fixed`), damit sie oben zum Seitenanfang * gehoert und nicht als Schleier ueber allem liegt. */ --app-glow: radial-gradient(130% 78% at 50% -18%, rgba(47, 111, 208, .16), transparent 64%); /* Der Winkel im Auswahlfeld. Die Farbe ist die von `--app-text-mute`, * hier aber URL-kodiert eingebacken — mehr dazu bei `.app-field select`. * Wer den gedaempften Ton aendert, aendert diese Zeile mit. */ --app-select-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27none%27%20stroke%3D%27%235d6b95%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%206.5%208%2010.5%2012%206.5%27%2F%3E%3C%2Fsvg%3E"); color-scheme: light; /* Zwei Radien, und der groessere ist neu: Karten und Kacheln tragen ihn, * Knoepfe und Felder den kleinen. Vorher lagen beide auf 14px, und eine * Kachel sah damit aus wie ein grosses Eingabefeld. */ --app-radius-lg: 20px; --app-radius: 14px; --app-radius-sm: 9px; --app-gap: 1.25rem; /* Masse des Rahmens (CLAUDE.md 9c). Als Variablen, weil drei Stellen sie * brauchen: die Kopfzeile ihre Hoehe, die Leiste ihren Abstand von oben, * und die ausgefahrene Leiste auf dem Telefon ihre Breite. */ --app-topbar-h: 3.5rem; --app-nav-w: 15rem; --app-nav-rail: 4.25rem; --app-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; } /* --- Farbschema: drei Zustaende, nicht zwei ------------------------------- * * „automatisch" ist der Regelfall und der einzige, in dem `data-theme` fehlt: * dann entscheidet das Geraet. Sobald jemand den Schalter in der Kopfzeile * benutzt, steht der Wert in der Sitzung (`lib/ansicht.php`) und ist schon beim * Rendern des ``-Tags da — die Seite kommt fertig im richtigen Schema an, * statt nach dem Laden umzuspringen. * * Daraus folgt die Form: die dunklen Werte stehen **zweimal**, einmal hinter * der `@media`-Regel (mit `:not([data-theme="hell"])`, damit ein ausdrueckliches * Hell auf einem dunklen Geraet gewinnt) und einmal hinter dem Attribut. Das * laesst sich in CSS nicht zusammenfassen, und zwei Bloecke, die * auseinanderlaufen koennen, sind genau die Sorte Fehler, die dieses Projekt * mechanisch prueft: `tests/test_ansicht.php` haelt beide Bloecke gegeneinander * — in **jeder** Stylesheet-Datei, denn eine Datei, die nur die `@media`-Haelfte * mitbringt, ergaebe eine halb umgeschaltete Seite. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { --app-bg: #0e1117; --app-surface: #171b22; --app-surface-2: #1e232c; --app-border: #2a303a; --app-moon-lit: #f2dfae; --app-moon-dark: #2a303c; --app-text: #e8eaee; --app-text-mute: #98a2b3; --app-accent: #6ea8ff; --app-accent-soft: rgba(110, 168, 255, .15); --app-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -14px rgba(0, 0, 0, .7); --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --app-veil: rgba(23, 27, 34, .74); --app-glow: radial-gradient(130% 78% at 50% -18%, rgba(110, 168, 255, .10), transparent 64%); --app-select-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27none%27%20stroke%3D%27%2398a2b3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%206.5%208%2010.5%2012%206.5%27%2F%3E%3C%2Fsvg%3E"); color-scheme: dark; --app-wx-day: #ffffff; --app-wx-night: #7c8fc9; } } :root[data-theme="dunkel"] { --app-bg: #0e1117; --app-surface: #171b22; --app-surface-2: #1e232c; --app-border: #2a303a; --app-moon-lit: #f2dfae; --app-moon-dark: #2a303c; --app-text: #e8eaee; --app-text-mute: #98a2b3; --app-accent: #6ea8ff; --app-accent-soft: rgba(110, 168, 255, .15); --app-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -14px rgba(0, 0, 0, .7); --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --app-veil: rgba(23, 27, 34, .74); --app-glow: radial-gradient(130% 78% at 50% -18%, rgba(110, 168, 255, .10), transparent 64%); --app-select-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27none%27%20stroke%3D%27%2398a2b3%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%206.5%208%2010.5%2012%206.5%27%2F%3E%3C%2Fsvg%3E"); color-scheme: dark; --app-wx-day: #ffffff; --app-wx-night: #7c8fc9; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100dvh; font: 16px/1.55 var(--app-font); /* Grundton, darueber der Lichtschein. `no-repeat` und eine feste Hoehe: * der Schein gehoert zum Seitenanfang und soll sich nicht ueber eine * lange Seite wiederholen. */ background: var(--app-glow) no-repeat top center / 100% 46rem, var(--app-bg); color: var(--app-text); } h1 { margin: 0 0 .5rem; font-size: 1.6rem; line-height: 1.2; } p { margin: 0 0 .75rem; } a { color: var(--app-accent); } /* --- Nur fuer Bildschirmleser -------------------------------------------- * Die Knoepfe der Kopfzeile tragen nur ein Symbol. `display:none` waere hier * falsch: der Text soll vorgelesen werden, nur nicht zu sehen sein. */ .app-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Seitenskelett (CLAUDE.md 9c) ----------------------------------------- * * Drei Baenke: die Kopfzeile ueber die volle Breite, darunter Leiste links und * Inhalt rechts. Die dritte *Spalte* — Messpunkt-Kurzkarten — ist kein * Rahmenteil, sondern das Klassenpaar .app-columns weiter unten, das eine Seite * bei Bedarf innerhalb von .app-main selbst aufspannt. */ .app-shell { display: flex; flex-direction: column; min-height: 100dvh; } /* --- Kopfzeile ------------------------------------------------------------ */ .app-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .5rem; height: var(--app-topbar-h); padding: 0 .9rem; background: var(--app-veil); /* Der Inhalt scrollt darunter durch und bleibt als weiche Ahnung sichtbar. * Wo es das nicht gibt, traegt `--app-veil` genug Deckkraft, dass die Zeile * trotzdem lesbar bleibt — deshalb .72 und nicht .5. * * `saturate` neben `blur`: ein reiner Weichzeichner zieht die Farbe unter * der Scheibe aus, und die Kopfzeile sitzt genau ueber dem Lichtschein. * Ohne die Saettigung waere sie der einzige entfaerbte Streifen der * Seite. */ backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--app-border); } .app-brand { font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; color: var(--app-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Die Version hinter der Marke. `flex-shrink: 0`, weil die Marke daneben * schrumpfen darf und diese Zahl nicht: eine abgeschnittene Versionsnummer * („0.5…") ist schlechter als keine. * * Die Ausblendgrenze ist **nachgemessen, nicht gegriffen**: auf der * iPhone-Referenzbreite (393px) passt das Abzeichen angemeldet neben Marke, * Kontonamen und Abmelden-Knopf, ohne dass etwas gekuerzt wird — bei 360px * kuerzt sich die Marke. Die Grenze liegt deshalb dazwischen und nicht bei den * 26rem, die ich zuerst geschaetzt hatte: die haetten das Abzeichen * ausgerechnet auf dem Telefon verschwinden lassen, fuer das es passt. */ .app-brand-version { flex-shrink: 0; padding: .1rem .4rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-sm); background: var(--app-surface-2); color: var(--app-text-mute); font-size: .7rem; font-variant-numeric: tabular-nums; line-height: 1.4; white-space: nowrap; } @media (max-width: 23rem) { .app-brand-version { display: none; } } /* Schiebt alles Weitere nach rechts — ohne feste Breite fuer die Marke, die * damit auf einem schmalen Telefon so viel bekommt, wie uebrig ist. */ .app-topbar-actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; } .app-topbar-user { display: flex; align-items: center; gap: .4rem; margin: 0; } /* Hier oben ist Platz: der Name steht neben der Marke und nicht in einer * 4,5rem breiten Spalte, in der „Patrick" als „Patr…" endete. Die Grenze * bleibt trotzdem — ein sehr langer Anzeigename soll die Zeile nicht * auseinanderdruecken. */ .app-topbar-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--app-text-mute); font-size: .9rem; } .app-topbar-login { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; background: var(--app-accent); color: #fff; font-size: .9rem; text-decoration: none; } /* Der wiederkehrende quadratische Knopf: Symbol, keine Beschriftung. */ .app-iconbutton { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: var(--app-radius-sm); background: transparent; color: var(--app-text-mute); font: inherit; cursor: pointer; } /* Trefferflaeche auf die HIG-Mindestgroesse (44px) erweitern, ohne den * sichtbaren Knopf zu vergroessern. Ein tatsaechlich groesserer Knopf kuerzt * in der Kopfzeile die Marke — bei 393px angemeldet fehlten 3 Knoepfe x 8px * = 24px (nachgemessen, Sichtung 2026-08-24), genau die Breite, fuer die * `.app-brand-version` oben als „passt ohne Kuerzung" belegt ist. Die * unsichtbare Flaeche liegt ausserhalb des Layoutflusses (`position: * absolute`), zaehlt also nicht zur Breite, die Flex den Geschwistern laesst. */ .app-iconbutton::after { content: ""; position: absolute; inset: -.25rem; } .app-iconbutton:hover { background: var(--app-surface-2); color: var(--app-text); } /* Der Farbschalter: drei Knoepfe, von denen immer genau einer sichtbar ist — * einer je Zustand (automatisch, hell, dunkel). * * **Der sichtbare zeigt den aktuellen Zustand und schaltet zyklisch weiter.** * Bis 0.6.0 waren es zwei, und der sichtbare trug den Zielwert; das brauchte * die `@media`-Regel als Entscheider, weil der Server bei „automatisch" nicht * weiss, was das Geraet anzeigt — und es machte „automatisch" nach dem ersten * Klick unerreichbar. Jetzt entscheidet allein, ob und welches `data-theme` * am ``-Element steht, also ein Wert, den der Server selbst gesetzt hat. * Die Systemabfrage entfaellt damit an dieser Stelle vollstaendig. */ .app-theme-btn { display: none; } :root:not([data-theme]) .app-theme-btn--auto, :root[data-theme="hell"] .app-theme-btn--hell, :root[data-theme="dunkel"] .app-theme-btn--dunkel { display: inline-flex; } /* --- Leiste und Inhalt ---------------------------------------------------- */ .app-body { display: flex; align-items: stretch; flex: 1; min-height: 0; } .app-nav { position: sticky; top: var(--app-topbar-h); align-self: flex-start; flex: 0 0 auto; display: flex; flex-direction: column; width: var(--app-nav-w); height: calc(100dvh - var(--app-topbar-h)); /* Der letzte Punkt (Einstellungen, `.app-nav-list--fuss`) sitzt sonst * auf dem iPhone genau unter der Home-Indicator-Leiste — `env()` ist 0 * auf jedem Geraet ohne solchen Rand, also keine Aenderung anderswo. */ padding: .9rem .6rem calc(.9rem + env(safe-area-inset-bottom)); /* Dieselbe Scheibe wie die Kopfzeile — beide gehoeren zum Rahmen und * sollen sich vom Inhalt gleich absetzen. Der Lichtschein oben scheint * dadurch auch hinter der Leiste durch, statt an ihrer Kante zu enden. * * In der Schublade auf dem Telefon liegt sie ueber dem Inhalt; dort ist * `.72` zu wenig, weshalb der Umbruch bei 50rem sie wieder deckend * setzt. */ background: var(--app-veil); backdrop-filter: blur(14px) saturate(1.4); border-right: 1px solid var(--app-border); overflow-x: hidden; overflow-y: auto; transition: width .18s ease; } .app-nav-list { display: flex; flex-direction: column; gap: .15rem; margin: 0; padding: 0; list-style: none; } /* Die Einstellungen ans untere Ende, unabhaengig davon, wie viele Punkte * darueber stehen (CLAUDE.md 9c: `fuss` in `layout_nav_items()`). */ .app-nav-list--fuss { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--app-border); } .app-nav-item { position: relative; display: flex; align-items: center; justify-content: var(--app-nav-just, flex-start); gap: .7rem; padding: .58rem .7rem; /* 44px Trefferflaeche (HIG) — der Inhalt (20px-Symbol + Zeile) bleibt * durch `align-items: center` in der Mitte, auch wenn er selbst * schmaler ist. */ min-height: 2.75rem; border-radius: var(--app-radius); color: var(--app-text-mute); text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; } .app-nav-item span { display: var(--app-nav-label, inline); } .app-nav-item:hover { background: var(--app-surface-2); color: var(--app-text); } /* Der aktive Punkt ist **gefuellt**, nicht getoent. * * Bis 0.7.0 war er eine 12%-Toenung mit farbigem Text und einem 3px-Balken * links; der Balken musste dabei sein, weil die Toenung im eingefahrenen * Zustand — wo nur das Symbol bleibt — zu schwach war, um „hier bist du" zu * sagen. Eine gefuellte Flaeche sagt es von selbst, auf jeder Breite, und der * Balken wird damit zum zweiten Zeichen fuer dieselbe Auskunft. Also weg * damit. */ .app-nav-item.is-active { background: var(--app-accent); color: #fff; font-weight: 550; box-shadow: 0 6px 16px -8px var(--app-accent); } .app-nav-item.is-active:hover { background: var(--app-accent); color: #fff; } /* * Drei Breitenbereiche, und sie ueberschneiden sich bewusst nicht — sonst * kaeme es auf die Reihenfolge im Stylesheet an, und das ist die Sorte * Abhaengigkeit, die man beim naechsten Einfuegen nicht mehr sieht: * * bis 50rem die Leiste liegt **ueber** dem Inhalt und ist zu, bis * jemand sie oeffnet (unten) * 50 bis 68,75rem in der Spur, eingefahren — es sei denn, jemand faehrt * sie ausdruecklich aus * ab 68,75rem in der Spur, ausgefahren — es sei denn, jemand faehrt sie * ausdruecklich ein * * Eingefahren heisst: Symbolbreite, keine Beschriftung, zentriert. Die drei * Werte stehen als Variablen am `.app-shell`, weil `display` und * `justify-content` sich nicht anders aus einer Bedingung heraus setzen * lassen — und weil dieselben drei Zeilen sonst zweimal als Regelblock * daestuenden. */ @media (min-width: 50.0625rem) and (max-width: 68.75rem) { .app-shell:not([data-nav="auf"]) { --app-nav-w: var(--app-nav-rail); --app-nav-label: none; --app-nav-just: center; } } @media (min-width: 50.0625rem) { .app-shell[data-nav="zu"] { --app-nav-w: var(--app-nav-rail); --app-nav-label: none; --app-nav-just: center; } } /* * Auf dem Telefon nimmt eine Leiste in der Spur zu viel weg — 4,25rem sind auf * 393px ein Zehntel der Breite, dauerhaft und fuer drei Symbole. Sie liegt * deshalb **ueber** dem Inhalt und ist zu, bis jemand sie oeffnet; der Knopf * dafuer steht ohnehin schon oben links. */ /* * Welcher der beiden Menue-Knoepfe sichtbar ist, entscheidet **nicht** die * Frage „Schublade oder Spur" (50rem), sondern die Frage „steht die Leiste * ohne Zutun offen oder zu" — und die kippt bei 68,75rem. Das ist der * Unterschied, der beim ersten Anlauf danebenlag: auf dem iPad liegt die * Leiste in der Spur, ist aber trotzdem eingefahren, und der „breite" Knopf * bot dort das Einfahren einer bereits eingefahrenen Leiste an. Ein Tippen * ohne jede sichtbare Wirkung — im Testlauf sieht die Zeile richtig aus, * gefunden hat es erst die Sichtung. */ @media (max-width: 68.75rem) { .app-topbar-burger--breit { display: none; } } @media (min-width: 68.8125rem) { .app-topbar-burger--schmal { display: none; } } @media (max-width: 50rem) { .app-nav { position: fixed; left: 0; top: var(--app-topbar-h); z-index: 20; transform: translateX(-100%); /* Ueber dem Inhalt statt darin: hier muss sie decken. Eine * halbdurchsichtige Schublade laesst die Karten darunter durch die * Beschriftung scheinen. */ background: var(--app-surface); box-shadow: var(--app-shadow); transition: transform .2s ease; } .app-shell[data-nav="auf"] .app-nav { transform: none; } /* Die Flaeche daneben. Sie ist ein Knopf (CLAUDE.md 9c) und traegt deshalb * die ueblichen Ruecksetzungen. */ .app-nav-backdrop { display: none; position: fixed; inset: var(--app-topbar-h) 0 0 0; z-index: 10; padding: 0; border: 0; background: rgba(8, 11, 16, .45); cursor: pointer; } .app-shell[data-nav="auf"] .app-nav-backdrop { display: block; } } /* Ueber 50rem liegt die Leiste in der Spur — dort gibt es nichts zu * verdecken und damit auch nichts wegzutippen. */ @media (min-width: 50.0625rem) { .app-nav-backdrop { display: none; } } @media (prefers-reduced-motion: reduce) { .app-nav, .app-nav-item, .app-card--point { transition: none; } } .app-content { flex: 1; display: flex; flex-direction: column; /* Ohne dies sprengt ein breiter Inhalt (z. B. ein Diagramm) die Spalte, * statt sich ihr zu fuegen — derselbe Grund wie bei .app-chart. */ min-width: 0; } .app-main { flex: 1; width: 100%; padding: var(--app-gap); } /* --- Tastaturbedienung --------------------------------------------------- * Ein sichtbarer Fokusring an allem, was man anfassen kann. `:focus-visible` * statt `:focus`: nach einem Mausklick soll er nicht stehen bleiben. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; border-radius: var(--app-radius-sm); } /* --- Zwei-Spalten-Bereich innerhalb von .app-main -------------------------- * Das wiederverwendbare Vokabular fuer die dritte Spalte (Messpunkt- * Kurzkarten rechts, NEUBAU_PLAN 6.1). Nur Seiten, die es brauchen, oeffnen * es — die Anmeldeseite etwa bleibt einspaltig. */ .app-columns { display: flex; align-items: flex-start; gap: var(--app-gap); } .app-col-main { flex: 1; min-width: 0; } .app-col-aside { flex: 0 0 20rem; display: flex; flex-direction: column; gap: .75rem; } /* Unter ~800px wandert die rechte Spalte unter den Inhalt (NEUBAU_PLAN 6.1). * Die Quellreihenfolge im HTML (main vor aside) sorgt dafuer von selbst. */ @media (max-width: 50rem) { .app-columns { flex-direction: column; } .app-col-aside { flex-basis: auto; width: 100%; } } /* --- Icons (lib/icons.php, NEUBAU_PLAN 6.6) ------------------------------- * Font Awesome Free, eingebettet als SVG-Pfad statt als Webfont — die Regel * dazu steht im Dateikopf von lib/icons.php. `vertical-align` verhindert den * kleinen Versatz, den ein Inline-SVG sonst neben Text hat (es sitzt sonst * auf der Grundlinie statt zentriert). */ .app-icon { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; } /* --- Karte ---------------------------------------------------------------- */ .app-card { max-width: 42rem; padding: 1.5rem; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius-lg); /* Der Schatten ist das, was eine Karte zur Karte macht. Nur ein Rahmen * ergibt einen Kasten auf einer Flaeche, und mehrere davon nebeneinander * ergeben ein Formular. */ box-shadow: var(--app-shadow); } /* Ein Panel im Dashboard (Diagramm, Prognose): dieselbe Karte, aber ohne die * Lesbarkeitsgrenze — sie soll die Hauptspalte ausfuellen, nicht wie ein * Formular in der Mitte des Bildschirms stehen. */ .app-card--wide { max-width: none; } /* Messpunkt-Kurzkarte (NEUBAU_PLAN 6.1), rechte Spalte: dieselbe Karte, enger * und anklickbar — sie waehlt den im Hauptbereich gezeigten Messpunkt. * * `position: relative` traegt den Klappknopf: er liegt als Geschwister ueber * dem Auswahlknopf statt in ihm, weil ein `