/* Gemeinsame Grundlage von PWA und Verwaltung. Farbrollen, Schriften und die
   Bausteine, die im Bedienprototyp (docs/prototyp.html) festgelegt sind.
   Alle Schriften liegen lokal — keine externen CDNs, sonst faellt der Offline-
   Betrieb aus und die Content-Security-Policy muesste aufgeweicht werden. */

@font-face { font-family:"IBM Plex Sans"; src:url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:"IBM Plex Sans"; src:url("fonts/IBMPlexSans-Medium.woff2") format("woff2");
             font-weight:500; font-style:normal; font-display:swap }
@font-face { font-family:"IBM Plex Sans"; src:url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
             font-weight:600; font-style:normal; font-display:swap }
@font-face { font-family:"IBM Plex Sans"; src:url("fonts/IBMPlexSans-Bold.woff2") format("woff2");
             font-weight:700; font-style:normal; font-display:swap }
@font-face { font-family:"IBM Plex Mono"; src:url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:"IBM Plex Mono"; src:url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
             font-weight:500; font-style:normal; font-display:swap }
@font-face { font-family:"IBM Plex Mono"; src:url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
             font-weight:600; font-style:normal; font-display:swap }

:root{
  --ground:#eef1f5; --surface:#ffffff; --surface-2:#f7f9fb;
  --ink:#16202e; --muted:#5c6b7e; --faint:#8695a8;
  --line:#dbe1ea; --line-strong:#c3ccd9;
  --brand:#1f3a5f; --brand-soft:#e4eaf3;
  --go:#1d7a4c; --go-soft:#e0f0e7;
  --stop:#a8402f; --stop-soft:#f7e6e2;
  --warn:#8a6410; --warn-soft:#f8eed6;
  --shadow:0 1px 2px rgba(22,32,46,.06), 0 8px 24px -12px rgba(22,32,46,.18);
  --sans:"IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ground:#0d131b; --surface:#171f2a; --surface-2:#1e2733;
  --ink:#e7ecf3; --muted:#98a6b8; --faint:#74839a;
  --line:#293341; --line-strong:#3a4657;
  --brand:#8fb2da; --brand-soft:#1c2a3d;
  --go:#5cbb87; --go-soft:#152c22;
  --stop:#e08770; --stop-soft:#301b17;
  --warn:#d9ac52; --warn-soft:#2b2313;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --ground:#0d131b; --surface:#171f2a; --surface-2:#1e2733;
  --ink:#e7ecf3; --muted:#98a6b8; --faint:#74839a;
  --line:#293341; --line-strong:#3a4657;
  --brand:#8fb2da; --brand-soft:#1c2a3d;
  --go:#5cbb87; --go-soft:#152c22;
  --stop:#e08770; --stop-soft:#301b17;
  --warn:#d9ac52; --warn-soft:#2b2313;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
     font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.num,.v,.re,td.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Bausteine aus dem Prototyp, von beiden Oberflaechen genutzt */
.liste{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
.li{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:baseline;
    padding:9px 12px;font-size:13.5px}
.li+.li{border-top:1px solid var(--line)}
.li .tag{font-family:var(--mono);color:var(--faint);font-size:12px}
.li .mi{color:var(--muted);font-size:12.5px}
.li .re{text-align:right}
.li.heute{background:var(--brand-soft)}
.li.frei .mi{color:var(--faint);font-style:italic}
.stift{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);
       vertical-align:middle;margin-right:5px}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
      padding:2.5px 8px;border-radius:20px;white-space:nowrap}
.pill.on{background:var(--go-soft);color:var(--go)}
.pill.off{background:var(--surface-2);color:var(--faint)}
.pill.pau{background:var(--warn-soft);color:var(--warn)}
.pill.ab{background:var(--brand-soft);color:var(--brand)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor}

.plus{color:var(--go)} .minus{color:var(--stop)}

.knopf2{width:100%;border-radius:9px;padding:12px;font-size:14.5px;font-weight:500;
        background:var(--surface-2);border:1px solid var(--line-strong);color:var(--ink)}
.knopf2:disabled{opacity:.5;cursor:not-allowed}

.meldung{border-radius:9px;padding:10px 12px;font-size:13.5px;border:1px solid transparent}
.meldung.fehler{background:var(--stop-soft);color:var(--stop);
                border-color:color-mix(in srgb,var(--stop) 35%,transparent)}
.meldung.gut{background:var(--go-soft);color:var(--go);
             border-color:color-mix(in srgb,var(--go) 35%,transparent)}
.meldung.hinweis{background:var(--warn-soft);color:var(--warn);
                 border-color:color-mix(in srgb,var(--warn) 35%,transparent)}

.feld{display:block;margin-bottom:12px}
.feld > span{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
             color:var(--faint);font-weight:600;margin-bottom:5px}
.feld input,.feld select,.feld textarea{width:100%;padding:10px 11px;border-radius:8px;
             border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}