/* Gemeinsame Basis für alle Apps unter dashboard.michellmiklos.de: Schrift, Farben, Grundformen. */
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#16181b; --panel:#1d2024; --hover:#23272c; --line:#2c3036; --ctl:#6c727b;
  --ink:#eceae4; --ink-2:#c9c7c1; --muted:#9ba0a8;
  --gelb:#e9c53a; --gelb-text:#e9c53a; --auf-gelb:#16181b; --haupt-rand:#e9c53a;
  --gut:#c9d16a; --teil:#8f949b; --schlecht:#5a5f66; --pegel-leer:#2a2e34;
  --ok:#b6d36a; --nein:#e58a7a;
  --fokus-kern:#16181b; --fokus-ring:#f4e7a8;
  --radius:6px;
  --kopf-h:56px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f1f2f4; --panel:#ffffff; --hover:#e8eaed; --line:#d7dadf; --ctl:#7c838c;
  --ink:#1b1e22; --ink-2:#33383e; --muted:#565c64;
  --gelb:#e2b819; --gelb-text:#7a5f00; --auf-gelb:#1b1e22; --haupt-rand:#7a5f00;
  --gut:#8e9a2a; --teil:#8a9097; --schlecht:#b9bec4; --pegel-leer:#e1e4e8;
  --ok:#3f7a1e; --nein:#b2412f;
  --fokus-kern:#1b1e22; --fokus-ring:#e2b819;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "IBM Plex Sans",system-ui,sans-serif;font-variant-numeric:tabular-nums}
h1,h2,h3,p,dl,dd,ul{margin:0}
button,select,input{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--fokus-kern);outline-offset:2px;box-shadow:0 0 0 4px var(--fokus-ring);border-radius:var(--radius)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Knöpfe: gerahmt; nur die Hauptaktion gefüllt */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border:1px solid var(--ctl);border-radius:var(--radius);background:transparent;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s}
.knopf:hover{background:var(--hover)}
.knopf:active{transform:translateY(1px)}
.knopf.haupt{background:var(--gelb);border-color:var(--haupt-rand);color:var(--auf-gelb);font-weight:600}
.knopf.haupt:hover{background:color-mix(in srgb,var(--gelb) 86%,#fff)}
.knopf[aria-pressed="true"]{background:var(--hover);border-color:var(--ink-2)}
.knopf:disabled{opacity:.5;cursor:default}
@media (max-width:899px){.knopf{min-height:44px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}