/* ============================================================= Zentrales Design-System für alle Aquarium-Rechner-Seiten. Referenz-Optik: Kalkmanagement. Wird auf jeder Seite als LETZTES Stylesheet eingebunden, damit es die alten Inline-Stile vereinheitlicht. Seiten-spezifische Klassen bleiben in der jeweiligen Seite. ============================================================= */ :root { /* ---- Zentrale Farb-Palette (34 Rollen) ------------------------------- EINE Stelle für alle UI-Farben. Dark Mode = zweiter Wertesatz hier. Die bunten Element-Farben der C&R-Grafik sind bewusst NICHT hier (das ist kategoriale Datenfarbe, keine UI-Rolle). -------------------- */ /* Struktur / Neutral */ --bg: #f0f4f8; /* Seitenhintergrund */ --card: #ffffff; /* Karten / Panels */ --surface: #f6f8fb; /* subtile Fläche (Zebra, Inset) */ --border: #e1e8ed; /* Standard-Rahmen */ --border-strong: #ccd3da; /* kräftiger Rahmen / Placeholder */ /* Text & Icons */ --text: #2c3e50; /* Überschriften / Fließtext */ --text-mid: #5a6776; /* Labels / sekundär */ --text-light: #7a8896; /* Meta / Hinweise */ --text-faint: #9aa5b1; /* sehr schwach */ --icon-muted: #aab6c2; /* graue Icons / Punkte */ /* Blau (Marke) */ --blue: #3498db; /* Textblau auf hellen Flaechen. Frueher #2980b9 — das ergab auf --blue-light nur 3,8:1 und auf --card 4,3:1, beides unter den 4,5:1, die kleiner Text braucht. Gleicher Farbton (204°) und gleiche Saettigung, 4 % dunkler: 4,6:1 bzw. 5,1:1. */ --blue-dark: #2574a7; --blue-light: #e8f4fb; /* Grün (Erfolg / im Bereich) */ --green: #27ae60; --green-dark: #1d6a3a; --green-light: #e8f8ec; /* Orange (Aktion / Buttons) */ --orange: #e8732a; --orange-dark: #c45f1f; --orange-light: #fff4e6; /* Amber (Warnung) */ --amber: #e6a817; --amber-dark: #6b5900; --amber-light: #fff8e8; --yellow: var(--amber); /* Alt-Alias (cr/spuren nutzen noch --yellow) */ /* Rot (Gefahr / außerhalb) */ --red: #c0392b; --red-dark: #7a3030; --red-light: #fdf2f0; /* ---- Gefüllte Flächen, die weiße Schrift tragen -------------------------- Kopfbereich, Primär-Knopf, aktives Segment, Chips, Zähl-Kreise. Bewusst getrennt von --blue/--orange/--green: die sind im Dark Mode TEXTfarben auf dunklen Tint-Flächen und kippen deshalb ins Helle. Als Fläche ergab das einen grellen Balken mit weißer Schrift darauf — gemessen 2,1:1 im Kopfbereich, das Weiß löste sich fast auf. Diese hier bleiben Flächen: hell im Hellmodus, dunkel im Dunkelmodus, weiße Schrift immer ≥ 4,5:1. Die Hellmodus-Werte sind identisch mit dem bisherigen Aussehen — dort ändert sich nichts. ------------------------- */ --fill-blue: #3498db; --fill-blue-deep: #2980b9; --fill-orange: #e8732a; --fill-orange-deep: #c45f1f; --fill-green: #27ae60; --fill-green-deep: #2e9e5a; --fill-red: #c0392b; --fill-slate: #5a6776; --fill-slate-deep: #3d4753; /* Sonstiges */ --shadow: 0 2px 8px rgba(0,0,0,0.05); --radius: 12px; } /* ---- Dark Mode ------------------------------------------------------------ Dieselben 34 Rollen, dunkler Wertesatz. Greift wenn ODER System = dunkel und der Nutzer nichts anderes gewählt hat. "-dark"-Töne (Text auf Tint-Flächen) kippen bewusst ins Helle, "-light"-Tints werden gedämpfte dunkle Flächen. --------------------------- */ :root[data-theme="dark"] { /* Sagt dem Browser, dass native Bedienelemente dunkel rendern sollen — ohne das bleiben leere Checkboxen, Radios und Scrollbars grell weiß. */ color-scheme: dark; --bg:#12171d; --card:#1b222b; --surface:#232c37; --border:#313b47; --border-strong:#414d5b; --text:#e7ecf1; --text-mid:#b4bec9; --text-light:#8b98a6; --text-faint:#67727e; --icon-muted:#566373; --blue:#4aa5e2; --blue-dark:#74baec; --blue-light:#17303f; --green:#34c46e; --green-dark:#6ed898; --green-light:#143021; --orange:#f0864a; --orange-dark:#f0a577; --orange-light:#3a2715; --amber:#edc149; --amber-dark:#e1c560; --amber-light:#322912; --red:#e6604f; --red-dark:#f0a198; --red-light:#3a1d19; --fill-blue:#2a6f9e; --fill-blue-deep:#1b4d73; --fill-orange:#ad5a1c; --fill-orange-deep:#8f4310; --fill-green:#1f7a45; --fill-green-deep:#196b3b; --fill-red:#b83c2c; --fill-slate:#566373; --fill-slate-deep:#3d4753; --shadow:0 2px 8px rgba(0,0,0,0.4); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg:#12171d; --card:#1b222b; --surface:#232c37; --border:#313b47; --border-strong:#414d5b; --text:#e7ecf1; --text-mid:#b4bec9; --text-light:#8b98a6; --text-faint:#67727e; --icon-muted:#566373; --blue:#4aa5e2; --blue-dark:#74baec; --blue-light:#17303f; --green:#34c46e; --green-dark:#6ed898; --green-light:#143021; --orange:#f0864a; --orange-dark:#f0a577; --orange-light:#3a2715; --amber:#edc149; --amber-dark:#e1c560; --amber-light:#322912; --red:#e6604f; --red-dark:#f0a198; --red-light:#3a1d19; --fill-blue:#2a6f9e; --fill-blue-deep:#1b4d73; --fill-orange:#ad5a1c; --fill-orange-deep:#8f4310; --fill-green:#1f7a45; --fill-green-deep:#196b3b; --fill-red:#b83c2c; --fill-slate:#566373; --fill-slate-deep:#3d4753; --shadow:0 2px 8px rgba(0,0,0,0.4); } } * { margin:0; padding:0; box-sizing:border-box; } /* ---- Verstecken: EIN Weg fuer alles --------------------------------------- Vorher gab es vier: eine .hidden-Klasse mit !important, ein .is-hidden am Anmelde-Chip, das [hidden]-Attribut im Spurenrechner und rund 60 Stellen, die direkt element.style.display schrieben. Letzteres ist der teuerste Weg: ein Inline-Stil schlaegt jede Regel aus dem Stylesheet, damit sind solche Elemente fuer Media-Queries und den Dunkelmodus nicht mehr erreichbar — und genau daran ist in dieser Ecke schon mehrfach etwas haengengeblieben. Jetzt gilt ueberall `el.hidden = true/false` bzw. das Attribut im Markup. Das ist nebenbei das, was Screenreader auswerten. Das !important ist hier bewusst gesetzt und die Ausnahme, die die Regel traegt: der Browser bringt zwar `[hidden] { display:none }` mit, aber mit Spezifitaet (0,1,0) — jedes `.karte { display:flex }` schlaegt es. Eine Hilfsregel, die IMMER gewinnen muss, ist der eine legitime Fall. Nicht zu verwechseln mit einem !important, das gegen einen Inline-Stil kaempft; das ist immer ein Symptom. */ [hidden] { display: none !important; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; } input[type="number"] { -moz-appearance:textfield; } /* Eingabefelder: Hintergrund/Text über Tokens, damit sie im Dark Mode nicht weiß/schwarz bleiben. Nur Farbe — Padding/Rahmen setzen die spezifischeren Regeln. */ input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], textarea, select { background-color: var(--card); color: var(--text); } input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: 1; } body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--text); line-height:1.5; } header { background:linear-gradient(135deg,var(--fill-blue),var(--fill-blue-deep)); color:#fff; padding:1.5rem 2rem; text-align:center; position:relative; margin-bottom:1.5rem; border-radius:var(--radius); } header h1 { font-size:1.6rem; font-weight:700; } header p { opacity:0.85; font-size:0.9rem; margin-top:0.25rem; } footer { text-align:center; padding:1.5rem; font-size:0.8rem; color:var(--text-light); } footer a { color:var(--blue); } .back-btn { position:absolute; top:1rem; left:1rem; width:36px; height:36px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:rgba(255,255,255,0.15); border:none; border-radius:8px; cursor:pointer; padding:0; text-decoration:none; transition:background 0.15s; z-index:2; } .back-btn:hover { background:rgba(255,255,255,0.28); } .back-btn span { display:block; width:18px; height:2px; background:#fff; border-radius:2px; } /* Hover-Navigationsmenü am ☰-Button — Inhalt/Verhalten zentral aus /assets/nav-menu.js */ .nav-dropdown { position:absolute; top:1rem; left:1rem; z-index:20; } .nav-dropdown .back-btn { position:static; } /* Position übernimmt jetzt der Wrapper */ .nav-dropdown::after { /* unsichtbare Brücke über den Spalt zum Menü */ content:""; position:absolute; top:100%; left:0; width:220px; max-width:70vw; height:10px; } .nav-menu { position:absolute; top:calc(100% + 6px); left:0; min-width:220px; background:var(--card); border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.18); padding:0.35rem; opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none; transition:opacity 0.15s, transform 0.15s, visibility 0.15s; } .nav-dropdown:hover .nav-menu, .nav-dropdown:focus-within .nav-menu { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; } /* Beim Scrollen zugeklappt. Auf dem Handy bleibt nach einem Tipp sowohl der :hover- als auch der :focus-within-Zustand haengen — das Menue scrollte einfach mit und ging erst weg, wenn man irgendwohin tippte. Gesetzt und wieder entfernt wird die Klasse in nav-menu.js. Gleiche Spezifitaet wie die Regel darueber (0,3,0), steht aber spaeter und gewinnt deshalb — gegen :hover wie gegen :focus-within. */ .nav-dropdown.zugeklappt .nav-menu { opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none; } .nav-menu-item { display:block; padding:0.55rem 0.8rem; border-radius:7px; text-decoration:none; color:var(--text); font-size:0.9rem; font-weight:600; white-space:nowrap; } .nav-menu-item:hover { background:var(--blue-light); color:var(--blue-dark); } .nav-menu-item.current { background:var(--fill-blue); color:#fff; } .nav-menu-item.overview { color:var(--text-light); border-bottom:1px solid var(--border); border-radius:0; margin-bottom:0.25rem; padding-bottom:0.6rem; } .nav-menu-item.overview:hover { color:var(--blue-dark); background:var(--blue-light); } main { max-width:1000px; margin:0 auto; padding:1.5rem 1rem 3rem; } .card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.5rem; margin-bottom:1.5rem; } .card h2 { font-size:1.15rem; color:var(--blue); margin-bottom:1rem; padding-bottom:0.5rem; border-bottom:2px solid var(--blue-light); display:flex; justify-content:space-between; align-items:center; gap:0.5rem; } .card h3 { font-size:0.95rem; color:var(--text-light); margin:1rem 0 0.5rem; text-transform:uppercase; letter-spacing:0.05em; } .center-state { text-align:center; padding:2rem 1rem; color:var(--text-light); } .center-state .icon { font-size:3rem; margin-bottom:0.5rem; } .center-state h3 { color:var(--text); margin-bottom:0.5rem; text-transform:none; letter-spacing:0; font-size:1.15rem; } .center-state p { max-width:380px; margin:0 auto 0.6rem; line-height:1.5; } .btn { padding:0.6rem 1.2rem; border:none; border-radius:8px; font-size:0.95rem; font-weight:600; cursor:pointer; font-family:inherit; transition:transform 0.15s, box-shadow 0.15s; } .btn-primary { background:linear-gradient(135deg,var(--fill-blue),var(--fill-blue-deep)); color:#fff; box-shadow:0 4px 12px rgba(52,152,219,0.3); } .btn-primary:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(52,152,219,0.4); } .btn-ghost { background:var(--card); border:2px solid var(--border); color:var(--text); } .btn-danger { background:var(--card); border:2px solid var(--red); color:var(--red); } /* --blue-light als Flaeche, --blue-dark als Schrift — dasselbe Paar wie beim Navi-Hover, den Badges und dem Info-Banner. Mit --blue war der Text im hellen Modus zu blass (2,8:1). */ .btn-secondary { background:var(--blue-light); color:var(--blue-dark); } .btn-secondary:hover { background:var(--blue-light); } /* Gesperrter Button: ohne das sieht ein disabled-Button aus wie ein klickbarer. Das Anheben beim Hover ist oben per :not(:disabled) ausgeschlossen — ein pauschales box-shadow:none hier wuerde dem .btn-primary beim Ueberfahren seinen Grundschatten wegnehmen und flackern. */ .btn:disabled { opacity:0.5; cursor:not-allowed; } .btn-row { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:1rem; } /* Großer Aktions-CTA (Berechnen) – orange, zentriert */ .btn-calculate { display:block; width:100%; max-width:340px; margin:1rem auto; padding:0.85rem 2rem; background:linear-gradient(135deg,var(--fill-orange),var(--fill-orange-deep)); color:#fff; border:none; border-radius:10px; font-size:1.05rem; font-weight:700; cursor:pointer; font-family:inherit; box-shadow:0 4px 12px rgba(232,115,42,0.3); transition:transform 0.15s, box-shadow 0.15s; } .btn-calculate:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(232,115,42,0.4); } /* Nebenaktionen im selben Knopf-Format. Standen vorher als Inline-Verlauf am Element und waren damit blind fürs Farbschema: im Dunkelmodus blieben sie im Hellmodus-Ton stehen. */ .btn-calculate.gruen { background:linear-gradient(135deg,var(--fill-green),var(--fill-green-deep)); } .btn-calculate.grau { background:linear-gradient(135deg,var(--fill-slate),var(--fill-slate-deep)); } /* Info-/Hilfe-Punkt (rundes „i" bzw. „?") – einheitlich auf allen Seiten */ .info-i { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:var(--fill-slate); color:#fff; font-size:10px; font-weight:700; font-style:normal; text-transform:none; line-height:1; cursor:pointer; border:none; padding:0; margin-left:5px; vertical-align:middle; flex:none; transition:background 0.15s; } .info-i:hover { background:var(--fill-blue); color:#fff; } .info-i.danger { background:var(--red-light); color:var(--red-dark); } .info-i.danger:hover { background:var(--fill-red); color:#fff; } /* Tabellen-Aktions-Icons (rund): bearbeiten / speichern / löschen — einheitlich */ .row-action { width:28px; height:28px; border-radius:50%; border:none; cursor:pointer; font-size:0.95rem; line-height:1; font-weight:700; display:inline-flex; align-items:center; justify-content:center; transition:filter 0.15s; font-family:inherit; padding:0; } .row-action.edit { background:var(--blue-light); color:var(--text-mid); } .row-action.danger { background:var(--red-light); color:var(--red-dark); } .row-action.save { background:var(--green-light); color:var(--green-dark); } .row-action:hover { filter:brightness(0.92); } /* Collapsible — gemeinsamer Auf-/Zuklapp-Body */ .collapsible-body { display:none; } .collapsible.open .collapsible-body { display:block; } /* Pumpen-Kalibrier-Wizard (kalk + nutrient) */ .pump-cal { border:1px solid var(--border); border-radius:10px; padding:1rem; margin-bottom:0.7rem; } .pump-cal-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; } .pump-cal-name { font-weight:700; font-size:1rem; } .pump-cal-meta { font-size:0.78rem; color:var(--text-light); margin-top:0.15rem; } .pump-cal-current { font-family:monospace; font-size:0.85rem; color:var(--text); background:var(--bg); padding:0.2rem 0.5rem; border-radius:4px; } .pump-cal-wizard { display:none; margin-top:1rem; padding:1rem; background:var(--bg); border-radius:8px; } .pump-cal-wizard.open { display:block; } .pump-cal-row { display:flex; gap:0.7rem; align-items:flex-end; flex-wrap:wrap; } .pump-cal-row .form-row { margin-bottom:0; flex:1 1 140px; } .pump-cal-row input { padding:0.55rem 0.7rem; border:2px solid var(--border); border-radius:8px; font-size:0.95rem; font-family:inherit; width:100%; } .pump-cal-step { padding:0.7rem 0.9rem; background:var(--card); border-radius:6px; margin-bottom:0.7rem; } .pump-cal-step.active { border-left:3px solid var(--blue); background:var(--blue-light); } .pump-cal-step.done { border-left:3px solid var(--green); } .pump-cal-step .num { display:inline-block; width:22px; height:22px; line-height:22px; text-align:center; background:var(--fill-blue); color:#fff; border-radius:50%; font-size:0.78rem; font-weight:700; margin-right:0.5rem; } .pump-cal-step.done .num { background:var(--fill-green); } .pump-cal-step.idle .num { background:var(--icon-muted); } .cal-progress { height:6px; background:var(--surface); border-radius:3px; overflow:hidden; margin:0.5rem 0; } .cal-progress-fill { height:100%; background:linear-gradient(90deg,var(--blue),var(--blue-dark)); transition:width 0.3s; width:0%; } /* Formular */ .form-row { display:flex; flex-direction:column; gap:0.3rem; margin-bottom:0.9rem; } .form-row label { font-size:0.8rem; font-weight:600; color:var(--text-mid); } .form-row .hint { font-size:0.72rem; color:var(--text-light); font-weight:400; } .form-row input[type=text], .form-row input[type=number] { padding:0.6rem 0.7rem; border:2px solid var(--border); border-radius:8px; font-size:0.95rem; font-family:inherit; } .form-row input[type=text]:focus, .form-row input[type=number]:focus { outline:none; border-color:var(--blue); } .form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0.9rem 1.2rem; align-items:end; } .form-grid .form-row { justify-content:flex-end; } /* Spalten-Gruppen: thematisch zusammengehörige Felder vertikal gestapelt, mit feiner (nicht voll durchgehender) Trennlinie zwischen den Spalten. */ .col-groups { display:grid; grid-template-columns:repeat(3,1fr); } .col-group { position:relative; padding:0 1.6rem; } .col-group:first-child { padding-left:0; } .col-group:last-child { padding-right:0; } .col-group + .col-group::before { content:""; position:absolute; left:0; top:0.4rem; bottom:0.9rem; width:1px; background:var(--blue-light); } .col-group .form-row:last-child { margin-bottom:0; } @media (max-width:760px) { .col-groups { grid-template-columns:1fr; } .col-group { padding:0; } .col-group + .col-group { margin-top:0.9rem; padding-top:0.9rem; border-top:1px solid var(--blue-light); } .col-group + .col-group::before { display:none; } } /* Zwei Eingaben (min / max) nebeneinander — schrumpfen sauber in ihre Spalte */ .minmax { display:flex; gap:0.4rem; } .minmax input { flex:1; min-width:0; width:100%; } /* Schalter: Kästchen + Beschriftung, dazu optional Hinweis oder Info-Punkt. Beschriftung und Beiwerk stehen in .form-toggle-text; diese Spalte nimmt den Rest der Zeile. Das