/* * Gestaltung des Pool-Rechners. * * Regel des Projekts: KEINE festen Farbwerte. Jede Farbe kommt aus den * Variablen des Child-Themes „akmaker-design". Nur so bleibt der * Dunkelmodus heil (der Umschalter setzt data-theme auf , das Theme * tauscht daraufhin die Werte der Variablen aus — diese Datei merkt davon * nichts und muss nichts nachbauen). * * Warnstufen werden deshalb NICHT ueber Rot/Gelb unterschieden — die * Farbpalette des Themes kennt keine Warnfarben. Unterschieden wird ueber * Rahmenstaerke, Flaeche, Schriftschnitt und ein vorangestelltes Wort * („Gefahr:", „Achtung:", „Hinweis:"). Das ist zugleich barrierefreier: * Farbe darf ohnehin nie der einzige Traeger einer Information sein. */ .akm-pool { /* Kurznamen fuer die Theme-Variablen. Nur hier steht der lange Name. */ --pr-ink: var(--wp--preset--color--ink); --pr-paper: var(--wp--preset--color--paper); --pr-muted: var(--wp--preset--color--muted); --pr-line: var(--wp--preset--color--line); --pr-accent: var(--wp--preset--color--accent); --pr-accent-strong: var(--wp--preset--color--accent-strong); --pr-accent-text: var(--wp--preset--color--accent-text); --pr-sand: var(--wp--preset--color--sand); --pr-input-border: var(--wp--preset--color--input-border, var(--wp--preset--color--line)); --pr-focus: var(--wp--preset--color--focus, var(--wp--preset--color--accent-strong)); --pr-surface: var(--wp--preset--color--surface, var(--wp--preset--color--paper)); --pr-surface-2: var(--wp--preset--color--surface-2, var(--wp--preset--color--sand)); --pr-schrift: var(--wp--preset--font-family--geist, inherit); --pr-mono: var(--wp--preset--font-family--geist-mono, ui-monospace, monospace); /* Abstaende und Rundungen — keine Farben, deshalb hier erlaubt. */ --pr-radius: 10px; --pr-radius-klein: 6px; --pr-luft: 1rem; color: var(--pr-ink); font-family: var(--pr-schrift); } /* ---------- Grundgeruest ---------- */ .akm-pool__einleitung { border: 1px solid var(--pr-line); background: var(--pr-sand); border-radius: var(--pr-radius); padding: 0.9rem 1.1rem; margin-bottom: 1.6rem; } .akm-pool__einleitung p { margin: 0.35rem 0 0; } .akm-pool__einleitung p:first-child { margin-top: 0; } .akm-pool__raster { display: grid; gap: 1.6rem; align-items: start; } @media (min-width: 60rem) { .akm-pool__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .akm-pool__ausgabe { position: sticky; top: 1.5rem; } } .akm-pool__block { border: 1px solid var(--pr-line); border-radius: var(--pr-radius); padding: var(--pr-luft); margin: 0 0 1.1rem; } .akm-pool__block > legend { padding: 0 0.35rem; font-weight: 650; font-size: 0.98rem; } .akm-pool__hilfetext { color: var(--pr-muted); font-size: 0.9rem; margin: 0 0 0.8rem; } .akm-pool__felder { display: grid; gap: 0.9rem; } @media (min-width: 34rem) { .akm-pool__felder--zwei { grid-template-columns: 1fr 1fr; } } .akm-pool__feld { display: grid; gap: 0.3rem; } .akm-pool__feld > span { font-size: 0.88rem; font-weight: 550; } .akm-pool__feld small { color: var(--pr-muted); font-weight: 400; } .akm-pool__haken { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.92rem; line-height: 1.4; } .akm-pool__haken input { margin-top: 0.2rem; } .akm-pool input[type='number'], .akm-pool input[type='text'], .akm-pool select { width: 100%; border: 1px solid var(--pr-input-border); background: var(--pr-paper); color: var(--pr-ink); border-radius: var(--pr-radius-klein); padding: 0.55rem 0.7rem; font: inherit; } .akm-pool :focus-visible { outline: 2px solid var(--pr-focus); outline-offset: 1px; } .akm-pool__knopf { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pr-accent-strong); background: var(--pr-accent-strong); color: var(--pr-accent-text); border-radius: var(--pr-radius-klein); padding: 0.7rem 1.3rem; font: inherit; font-weight: 650; cursor: pointer; } .akm-pool__knopf:hover { background: var(--pr-accent); border-color: var(--pr-accent); } .akm-pool__knopf--leise { background: var(--pr-paper); color: var(--pr-ink); border-color: var(--pr-line); font-weight: 500; padding: 0.4rem 0.8rem; font-size: 0.9rem; text-decoration: none; } .akm-pool__knopf--leise:hover { border-color: var(--pr-accent); background: var(--pr-surface-2); } .akm-pool__versteckt { display: none !important; } /* ---------- Ergebnis ---------- */ .akm-pool__karte { border: 1px solid var(--pr-line); border-radius: var(--pr-radius); background: var(--pr-surface); padding: var(--pr-luft); margin-bottom: 0.85rem; } .akm-pool__karte h3 { margin: 0 0 0.5rem; font-size: 1.05rem; } .akm-pool__karte p { margin: 0.4rem 0 0; } .akm-pool__karte p:first-of-type { margin-top: 0; } .akm-pool__ueberschrift { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--pr-muted); margin: 0 0 0.3rem; } .akm-pool__menge { font-family: var(--pr-mono); font-size: 1.45rem; font-weight: 650; line-height: 1.2; } .akm-pool__nebensache { color: var(--pr-muted); font-weight: 400; font-size: 0.9rem; } .akm-pool__nachher { color: var(--pr-muted); font-size: 0.88rem; } /* Hinweise: Stufen ueber Rahmen und Schrift, nicht ueber Farbe. */ .akm-pool__hinweis { border: 1px solid var(--pr-line); background: var(--pr-surface-2); border-radius: var(--pr-radius-klein); padding: 0.65rem 0.85rem; margin-bottom: 0.6rem; font-size: 0.9rem; line-height: 1.5; } .akm-pool__hinweis--warnung { border: 2px solid var(--pr-accent-strong); border-left-width: 6px; background: var(--pr-sand); } .akm-pool__hinweis--gefahr { border: 3px solid var(--pr-ink); border-left-width: 10px; background: var(--pr-sand); font-weight: 650; font-size: 0.95rem; } .akm-pool__hinweis b { display: block; margin-bottom: 0.15rem; } .akm-pool__marke { display: inline-block; border: 1px solid var(--pr-line); border-radius: 999px; padding: 0.15rem 0.75rem; font-size: 0.8rem; font-weight: 650; background: var(--pr-surface-2); } /* Wasserbalance: die Abweichung wird durch die Rahmenstaerke sichtbar, nicht durch eine Ampelfarbe (die es im Theme nicht gibt). */ .akm-pool__marke--korrosiv, .akm-pool__marke--kalkend { border-width: 3px; border-color: var(--pr-ink); } .akm-pool__marke--leicht_korrosiv, .akm-pool__marke--leicht_kalkend { border-width: 2px; border-color: var(--pr-accent-strong); } .akm-pool__marke--ausgeglichen { border-color: var(--pr-line); } /* ---------- Mitglieder-Leiste ---------- */ .akm-pool__mitglied { border: 1px dashed var(--pr-line); border-radius: var(--pr-radius); background: var(--pr-surface-2); padding: var(--pr-luft); margin-bottom: 1.1rem; } .akm-pool__mitglied h3 { margin: 0 0 0.2rem; font-size: 0.98rem; } .akm-pool__knopfreihe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; } .akm-pool__meldung { margin: 0.6rem 0 0; font-size: 0.88rem; color: var(--pr-muted); } .akm-pool__meldung--fehler { font-weight: 650; color: var(--pr-ink); } /* ---------- Hilfe (ausklappbar) ---------- */ .akm-pool__hilfe { border: 1px solid var(--pr-line); border-radius: var(--pr-radius); margin-top: 2rem; overflow: hidden; } .akm-pool__hilfe > h2 { margin: 0; padding: 1rem var(--pr-luft) 0.2rem; font-size: 1.1rem; } .akm-pool__hilfe > p { margin: 0; padding: 0 var(--pr-luft) 0.8rem; color: var(--pr-muted); font-size: 0.9rem; } .akm-pool__hilfe details { border-top: 1px solid var(--pr-line); } .akm-pool__hilfe summary { cursor: pointer; padding: 0.7rem var(--pr-luft); font-weight: 550; } .akm-pool__hilfe .akm-pool__hilfeinhalt { display: grid; gap: 0.7rem; padding: 0 var(--pr-luft) 0.9rem; font-size: 0.9rem; } @media (min-width: 44rem) { .akm-pool__hilfe .akm-pool__hilfeinhalt { grid-template-columns: 1fr 1fr; } } /* ---------- Tabelle „Meine Mittel" ---------- */ .akm-pool__tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .akm-pool__tabelle th, .akm-pool__tabelle td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--pr-line); vertical-align: top; } .akm-pool__tabelle th { font-weight: 650; color: var(--pr-muted); font-size: 0.82rem; } .akm-pool__umbruch { overflow-x: auto; } /* ---------- Ausdruck ---------- */ @media print { .akm-pool__eingabe, .akm-pool__mitglied, .akm-pool__hilfe, .akm-pool__knopf { display: none !important; } .akm-pool__raster { display: block; } .akm-pool__ausgabe { position: static; } .akm-pool__karte, .akm-pool__hinweis { break-inside: avoid; } }