/* =========================================================================== FARBPALETTEN =========================================================================== Alle Farbklassen (bg-surface, text-on-surface, …) lesen diese Variablen – siehe tailwind.config.js. Umschalten heißt deshalb: eine Klasse am setzen, nicht hunderte Klassen im Quelltext austauschen. Die Werte stehen als Kanäle ohne rgb(), damit Tailwinds Deckkraft-Kürzel weiter funktionieren (z. B. bg-primary-container/30). Zum Dunkelmodus zwei Entscheidungen, die nicht offensichtlich sind: 1. `primary` ist hell KEIN Gold, sondern fast schwarz (Knöpfe mit weißer Schrift). Im Dunkeln wäre ein fast schwarzer Knopf auf dunklem Grund unsichtbar – dort wird daraus das Marken-Gold mit dunkler Schrift. 2. Die Statusfarben werden nicht einfach abgedunkelt: Ein zartes #fff8e1 als Hinweisfläche wird im Dunkeln zu einem satten Braunton, damit der Kontrast zur Schrift erhalten bleibt. =========================================================================== */ :root { --c-background: 250 249 247; --c-surface: 255 255 255; --c-surface-bright: 255 255 255; --c-surface-dim: 239 236 231; --c-surface-container-lowest: 255 255 255; --c-surface-container-low: 248 246 242; --c-surface-container: 243 240 234; --c-surface-container-high: 236 232 225; --c-surface-container-highest: 230 225 216; --c-surface-variant: 236 232 225; --c-inverse-surface: 27 28 28; --c-on-inverse-surface: 255 255 255; --c-on-background: 26 23 18; --c-on-surface: 26 23 18; --c-on-surface-variant: 107 100 89; --c-outline: 138 131 120; --c-outline-variant: 230 225 214; --c-primary: 28 25 23; --c-on-primary: 255 255 255; --c-primary-container: 255 206 26; --c-on-primary-container: 63 51 0; --c-inverse-primary: 255 206 26; --c-secondary: 26 86 196; --c-on-secondary: 255 255 255; --c-error: 220 38 38; --c-on-error: 255 255 255; --c-error-container: 253 232 232; --c-on-error-container: 127 29 29; --c-warning: 242 169 0; --c-on-warning: 255 255 255; --c-warning-container: 255 248 225; --c-warning-container-high: 255 243 196; --c-on-warning-container: 138 109 0; --c-success: 15 122 67; --c-success-container: 215 245 224; --c-on-success-container: 15 122 67; --c-info: 17 92 185; --c-info-container: 226 236 255; --c-info-container-high: 215 236 255; --c-on-info-container: 0 73 125; --c-showcase-container: 232 221 255; --c-showcase-container-low: 243 237 255; --c-on-showcase-container: 91 63 160; --c-showcase-outline: 201 184 236; --c-star: 245 163 0; --c-schatten: 26 23 18; /* Halbtransparente Auflagen auf Fotos (Badges, Kartenhinweise). Sie müssen die Fläche aufhellen bzw. abdunkeln – als fertiges rgba, weil die Deckkraft dazugehört. */ --auflage: rgba(250, 249, 247, 0.92); --auflage-schwach: rgba(250, 249, 247, 0.82); --initialen-verlauf: linear-gradient(135deg, #2a2622, #1c1917); --initialen-text: #ffffff; /* Fläche neben dem App-Rahmen (nur am großen Bildschirm sichtbar) */ --c-rahmen: #ecebe7; } html.dark { --c-background: 21 18 15; --c-surface: 28 25 23; --c-surface-bright: 45 40 36; --c-surface-dim: 16 14 12; --c-surface-container-lowest: 16 14 12; --c-surface-container-low: 25 22 20; --c-surface-container: 33 29 26; --c-surface-container-high: 43 38 34; --c-surface-container-highest: 53 48 43; --c-surface-variant: 43 38 34; --c-inverse-surface: 240 237 231; --c-on-inverse-surface: 26 23 18; --c-on-background: 242 237 230; --c-on-surface: 242 237 230; --c-on-surface-variant: 185 176 164; --c-outline: 138 131 120; --c-outline-variant: 58 53 47; /* Umgedreht: Gold trägt jetzt den Knopf, die Schrift darauf wird dunkel. */ --c-primary: 255 206 26; --c-on-primary: 36 31 0; --c-primary-container: 74 61 0; --c-on-primary-container: 255 225 122; --c-inverse-primary: 28 25 23; --c-secondary: 138 176 255; --c-on-secondary: 0 33 77; --c-error: 255 138 138; --c-on-error: 59 0 0; --c-error-container: 74 26 26; --c-on-error-container: 255 215 215; --c-warning: 255 193 61; --c-on-warning: 46 34 0; --c-warning-container: 61 47 0; --c-warning-container-high: 82 63 0; --c-on-warning-container: 255 216 128; --c-success: 79 199 131; --c-success-container: 12 61 36; --c-on-success-container: 150 235 184; --c-info: 138 176 255; --c-info-container: 15 40 82; --c-info-container-high: 22 55 105; --c-on-info-container: 190 213 255; --c-showcase-container: 56 41 92; --c-showcase-container-low: 42 31 70; --c-on-showcase-container: 214 194 255; --c-showcase-outline: 88 68 134; --c-star: 255 193 61; --c-schatten: 0 0 0; --auflage: rgba(28, 25, 23, 0.92); --auflage-schwach: rgba(28, 25, 23, 0.82); --initialen-verlauf: linear-gradient(135deg, #4a433c, #2a2622); --initialen-text: #f2ede6; --c-rahmen: #0b0a09; } /* Der Rahmen stand vorher als feste Klasse am und wäre im Dunkelmodus ein heller Balken links und rechts geblieben. */ body { background: var(--c-rahmen); } /* Sagt dem Browser, welche Grundhelligkeit gilt. Ohne das bleiben native Bedienelemente hell: Datumsauswahl, Auswahlpfeile, Kontrollkästchen und die Bildlaufleisten. Eine Zeile, die mehr bewirkt als jede eigene Regel. */ html.light { color-scheme: light; } html.dark { color-scheme: dark; } /* Eingabefelder ohne eigene Hintergrundklasse. Das Formular-Plugin setzt sie sonst auf Weiß – im Dunkelmodus leuchteten die Passwortfelder wie Scheinwerfer. Element-Selektoren stehen unter Klassen: Ein ausdrückliches bg-… am Feld gewinnt weiterhin. */ input, select, textarea { background-color: rgb(var(--c-surface)); color: rgb(var(--c-on-surface)); } input::placeholder, textarea::placeholder { color: rgb(var(--c-on-surface-variant)); } /* Kontrollkästchen und Auswahlknöpfe getrennt behandeln: Das Formular-Plugin füllt sie im angehakten Zustand mit `currentColor`. Mit der Textfarbe wären sie im Dunkelmodus fast weiß – sie sollen die Akzentfarbe tragen. */ /* Ankreuzfelder: native Darstellung, eingefaerbt ueber accent-color. * * Die forms-Erweiterung schaltet appearance:none und malt den Haken selbst – * als WEISSES SVG auf `currentColor`. Die Regel darunter setzte aber * `background-color: var(--c-surface)`; gleiche Spezifitaet wie das * `:checked` der Erweiterung, nur spaeter geladen, also gewann sie. Ergebnis: * helles Kaestchen, weisser Haken darauf – unsichtbar. Erst beim Ueberfahren * griff `:checked:hover` der Erweiterung (hoehere Spezifitaet), das Kaestchen * wurde dunkel und der Haken tauchte auf. Ein gesetzter Haken sah also aus wie * ein nicht gesetzter. * * Statt an Spezifitaeten zu drehen: native Darstellung zurueckholen. Dann * zeichnet der Browser den Haken selbst in accent-color und sorgt auch fuer * dessen Kontrast – in hell wie dunkel. Das ist ohnehin, was die Klasse * `accent-primary` im Quelltext bezweckt. */ input[type="checkbox"], input[type="radio"] { -webkit-appearance: auto; appearance: auto; accent-color: rgb(var(--c-primary)); border-color: rgb(var(--c-outline)); } /* Der weisse Haken der forms-Erweiterung bleibt sonst als Hintergrundbild liegen. Die native Darstellung ignoriert ihn zwar, aber verlassen wollen wir uns darauf nicht. */ input[type="checkbox"]:checked, input[type="radio"]:checked { background-image: none; } /* Weiches Umschalten, aber nicht auf allem – sonst ruckelt jede Seite beim Aufbau. */ html.farbwechsel, html.farbwechsel body, html.farbwechsel #device { transition: background-color .2s ease, color .2s ease; } .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; display: inline-block; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } .icon-fill { font-variation-settings: 'FILL' 1; } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } @keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes pop-in { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } } @keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---- Typografie ---- */ body { font-feature-settings: "cv02","cv03","cv04","cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.006em; } .font-display { letter-spacing: -0.02em; } h1, h2, h3 { letter-spacing: -0.02em; } /* Tabellenziffern für Preise/Zahlen (kein Layout-Sprung) */ .tabular { font-variant-numeric: tabular-nums; } /* ---- Interaktion: sanfte Übergänge & Press-Feedback ---- */ button, a, input, select, textarea, [data-action], [data-nav] { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease, transform .12s ease, opacity .18s ease; } button:active, [data-action]:active, [data-nav]:active { transform: scale(.985); } a[href], [data-nav], [data-action], button, label[for], summary { cursor: pointer; } /* ---- Sichtbare Focus-Ringe (Tastatur) ---- */ /* Der innere Ring war fest auf die helle Hintergrundfarbe gesetzt und leuchtete im Dunkelmodus als heller Kranz um jedes angetippte Element. */ :focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--c-background)), 0 0 0 4px rgb(var(--c-secondary)); border-radius: 10px; } /* ---- Karten: weicher Schatten + Hover-Lift ---- */ .card-soft { box-shadow: 0 1px 2px rgba(26,23,18,0.04), 0 6px 20px -10px rgba(26,23,18,0.10); } .card-hover { transition: box-shadow .22s ease, transform .18s ease, border-color .18s ease; } .card-hover:hover { box-shadow: 0 6px 22px -8px rgba(26,23,18,0.16); transform: translateY(-2px); } /* ---- Mobil: horizontalen Überlauf verhindern ---- */ html, body { max-width: 100%; overflow-x: hidden; } body { scroll-behavior: smooth; } /* Breite des App-Rahmens. ACHTUNG: ID-Selektor – schlägt jede Tailwind-Klasse und wird nach tailwind.css geladen. Die Breitenstufen müssen deshalb HIER stehen, nicht als md:/lg:-Klassen im HTML (die wären wirkungslos). */ #device { width: 100%; max-width: 440px; overflow-x: hidden; } @media (min-width: 768px) { #device { max-width: 680px; } } @media (min-width: 1024px) { #device { max-width: 1080px; box-shadow: none; } } #app { max-width: 100%; overflow-x: hidden; } /* Flex-/Grid-Kinder dürfen unter ihre Inhaltsbreite schrumpfen (verhindert Überlauf) */ #app * { min-width: 0; } #app img { max-width: 100%; } /* Der alt-Text steht im Bildkasten, solange das Foto noch lädt – beim Aktualisieren * blitzten so überall Gerätenamen auf. 'transparent' blendet ihn optisch aus, ohne * ihn zu entfernen: Vorleseprogramme und Suchmaschinen lesen ihn weiterhin. * Für ein wirklich kaputtes Bild greift bei Anzeigen der onerror-Ersatz. */ #app img { color: transparent; } /* Leaflet-Karte an das App-Design angleichen */ .leaflet-container { font: inherit; background: #eef0ea; } .leaflet-popup-content-wrapper { border-radius: 14px; } .leaflet-popup-content { margin: 10px 12px; font-size: 13px; line-height: 1.45; } .leaflet-popup-content a { color: #1a56c4; font-weight: 600; text-decoration: none; } .leaflet-control-attribution { font-size: 9px; } input[type="date"] { min-height: 44px; } input, textarea, select { font-size: 16px; } /* verhindert iOS-Auto-Zoom */ details > summary::-webkit-details-marker { display: none; } body { -webkit-tap-highlight-color: transparent; } /* ---- Rechtsseiten (Impressum, Datenschutz, AGB, Widerruf) ---- */ /* Diese Regeln standen mit festen Hexwerten hier, aus der Zeit vor dem Dunkelmodus. Die Textfarbe #1a1712 (fast schwarz) blieb auch auf dunklem Grund stehen - die Seiten waren im Dunkelmodus praktisch unlesbar. Jetzt ueber dieselben Farbtoken wie der Rest der App, die beim Umschalten mitwandern. */ .legal-prose { line-height: 1.62; color: rgb(var(--c-on-surface)); } .legal-prose h1 { font-family: Poppins, Inter, sans-serif; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; margin: .2rem 0 .6rem; } .legal-prose h2 { font-family: Poppins, Inter, sans-serif; font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 .4rem; } .legal-prose h3 { font-weight: 700; font-size: .95rem; margin: 1rem 0 .25rem; } .legal-prose p { margin: .5rem 0; } .legal-prose ul { list-style: disc; padding-left: 1.2rem; margin: .5rem 0; } .legal-prose ol { list-style: decimal; padding-left: 1.3rem; margin: .5rem 0; } .legal-prose li { margin: .25rem 0; } .legal-prose a { color: rgb(var(--c-secondary)); text-decoration: underline; word-break: break-word; } .legal-prose address { font-style: normal; } .legal-prose .muted { color: rgb(var(--c-on-surface-variant)); font-size: .85rem; } /* Rote Lücke = vom Betreiber auszufüllen */ .legal-gap { display: inline-block; background: rgb(var(--c-error-container)); color: rgb(var(--c-on-error-container)); font-weight: 700; padding: 0 .35rem; border-radius: 5px; border: 1px solid rgb(var(--c-error) / .45); } /* Roter Hinweisblock */ .legal-note { display: flex; gap: .4rem; color: rgb(var(--c-on-error-container)); background: rgb(var(--c-error-container)); border: 1px solid rgb(var(--c-error) / .45); border-radius: .7rem; padding: .55rem .7rem; margin: .7rem 0; font-size: .82rem; font-weight: 600; line-height: 1.45; } /* ---- Bewegung reduzieren (Barrierefreiheit) ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Beleg: beim Drucken bleibt nur der Belegkörper übrig. */ @media print { body { background: #fff; } .no-print, nav, header { display: none !important; } #app { padding: 0 !important; } .receipt { box-shadow: none !important; border: 0 !important; padding: 0 !important; } a[href]::after { content: ''; } /* Der Jahresreport hat neun Spalten. Auf dem Bildschirm darf er seitlich rollen, auf Papier muss er ganz sichtbar sein – sonst fehlen genau die Zahlen, wegen derer das Blatt gedruckt wurde. */ .receipt .overflow-x-auto { overflow: visible !important; } .receipt table { font-size: 10pt; } .receipt thead { display: table-header-group; } /* Kopfzeile auf jeder Seite */ .receipt tr { break-inside: avoid; } }