/* M38 Doku-Seite V1.00 (31.10.2026) - Farben/Schrift wie Produktblatt und Bedienungsanleitung */
@font-face{font-family:"Inter";src:url("/assets/Inter-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/Inter-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/Inter-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --bg:#F4F6F9; --karte:#FFFFFF; --text:#1A2B40; --mut:#5A6573; --linie:#E2E7EE; --hell:#EEF4FB;
  --blau:#0B5CAB; --blau-text:#FFFFFF; --kopf:#0B1520; --kopf-text:#E6EDF5;
  --sensor:#1C86D1; --aktor:#E2711D; --eingabe:#7C5CD6; --gruen:#178A43; --warn-bg:#FFF4E5; --warn:#8A4B00;
  --schatten:0 1px 2px rgba(16,32,56,.06),0 4px 14px rgba(16,32,56,.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B1520; --karte:#121F2E; --text:#E6EDF5; --mut:#9AA8B8; --linie:#23344A; --hell:#16283B;
    --blau:#5AB4FF; --blau-text:#071420; --kopf:#060C14; --gruen:#3DD17A; --warn-bg:#3A2A12; --warn:#FFC37A;
    --schatten:none;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 "Inter",system-ui,sans-serif}
a{color:var(--blau)}
img{max-width:100%;height:auto;display:block}
.breit{max-width:1040px;margin:0 auto;padding:0 16px}

/* Kopf */
.kopf{background:var(--kopf);color:var(--kopf-text)}
.kopf .breit{display:flex;align-items:center;gap:14px;min-height:60px}
.kopf .logo{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:600;letter-spacing:.02em}
.kopf .logo img{height:28px;width:auto}
.kopf .logo span{font-size:14px;opacity:.8;border-left:1px solid rgba(255,255,255,.25);padding-left:10px}
.kopf .rechts{margin-left:auto;font-size:14px}
.kopf .rechts a{color:var(--kopf-text);opacity:.85;text-decoration:none}
.kopf .rechts a:hover{opacity:1;text-decoration:underline}

/* Kacheln/Karten */
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:14px;box-shadow:var(--schatten)}
h1{font-size:clamp(26px,5vw,36px);line-height:1.15;margin:.2em 0 .25em;font-weight:700}
h2{font-size:20px;margin:0 0 .5em;font-weight:700}
h3{font-size:17px;margin:0 0 .3em;font-weight:600}
.mut{color:var(--mut)}
.klein{font-size:14px}
.chip{display:inline-block;font-size:13px;font-weight:600;padding:3px 10px;border-radius:99px;color:#fff;background:var(--blau)}
.chip.sensor{background:var(--sensor)} .chip.aktor{background:var(--aktor)} .chip.eingabe{background:var(--eingabe)}
.chip.hell{background:var(--hell);color:var(--text)}
.chip.ok{background:transparent;color:var(--gruen);border:1px solid currentColor}
.chip.warn{background:var(--warn-bg);color:var(--warn)}

/* Modulseite */
.held{display:grid;gap:20px;padding:22px 0 8px;grid-template-columns:1fr}
.held .foto{border-radius:14px;overflow:hidden;background:var(--hell);aspect-ratio:4/3}
.held .foto img{width:100%;height:100%;object-fit:cover}
.held .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.held .claim{font-size:18px;color:var(--mut);margin:0 0 12px}
.held .typ{font-family:ui-monospace,Consolas,monospace;font-size:13px;color:var(--mut)}
@media (min-width:760px){ .held{grid-template-columns:5fr 6fr;align-items:center} }
.teaser{margin:4px 0 10px}
.einsatz{margin:0;padding-left:20px}
.einsatz li{margin:2px 0}

.abschnitt{margin:26px 0}
.drei{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:760px){ .drei{grid-template-columns:1fr 1fr} .drei .ganz{grid-column:1 / -1} }
.dl{padding:18px;display:flex;flex-direction:column;gap:10px}
.dl .kopfzeile{display:flex;align-items:center;gap:12px}
.dl .icon{flex:none;width:42px;height:42px;border-radius:10px;background:var(--hell);display:grid;place-items:center;color:var(--blau)}
.dl .icon svg{width:22px;height:22px}
.dl p{margin:0}
.knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.knopf{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:10px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid var(--blau)}
.knopf.voll{background:var(--blau);color:var(--blau-text)}
.knopf.rand{color:var(--blau);background:transparent}
.knopf:focus-visible{outline:3px solid var(--sensor);outline-offset:2px}
.folgt{padding:10px 12px;border-radius:10px;background:var(--hell);color:var(--mut);font-size:14px}

/* Software */
.varianten{display:flex;flex-wrap:wrap;gap:8px}
.varianten button{font:inherit;font-size:14px;font-weight:600;min-height:40px;padding:0 14px;border-radius:99px;border:1px solid var(--linie);background:var(--karte);color:var(--text);cursor:pointer}
.varianten button[aria-pressed="true"]{background:var(--blau);border-color:var(--blau);color:var(--blau-text)}
.paket{display:grid;grid-template-columns:1fr;gap:6px 12px;padding:12px 0;border-top:1px solid var(--linie)}
.paket .knopf{justify-self:start}
@media (min-width:560px){ .paket{grid-template-columns:1fr auto;align-items:center} }
.paket:first-of-type{border-top:0}
.paket .ver{font-weight:700}
.paket .sha{grid-column:1 / -1;font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--mut);word-break:break-all}
.hinweis{font-size:14px;color:var(--mut);margin:0}
details{border-top:1px solid var(--linie);padding-top:8px}
summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--mut);min-height:32px;display:flex;align-items:center}

/* Startseite */
.intro{padding:26px 0 6px}
.intro p{max-width:680px;margin:.3em 0 1em}
.suche{width:100%;max-width:460px;min-height:46px;padding:0 14px;font:inherit;border-radius:10px;border:1px solid var(--linie);background:var(--karte);color:var(--text)}
.gruppe{margin:26px 0}
.gruppe > p{margin:-.3em 0 12px}
.kacheln{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.kachel{display:flex;gap:12px;align-items:center;padding:10px;text-decoration:none;color:inherit;min-height:84px}
.kachel:hover{border-color:var(--blau)}
.kachel .mini{flex:none;width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--hell)}
.kachel .mini img{width:100%;height:100%;object-fit:cover}
.kachel b{display:block;line-height:1.25}
.kachel .typ{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--mut)}
.leer{display:none}

/* Fuss */
.fuss{margin-top:40px;padding:24px 0 34px;border-top:1px solid var(--linie);font-size:14px;color:var(--mut)}
.fuss .breit{display:flex;flex-wrap:wrap;gap:8px 22px}
.fuss a{color:var(--mut)}
.textseite{max-width:760px;padding:24px 16px}
.textseite h2{margin-top:1.4em}