/* TOTUM-SAFE – nur eigene Stile (CSP: style-src 'self'), Petrol, hell/dunkel */
:root{--petrol:#0e7490;--petrol2:#155e75;--grund:#eef4f6;--karte:#ffffff;--text:#14202b;--leise:#56707d;--rand:#d5e1e6;--rot:#dc2626;--gelb:#b45309;--gruen:#15803d}
@media (prefers-color-scheme:dark){:root{--grund:#0b1a20;--karte:#11262e;--text:#e2edf1;--leise:#9bb3bd;--rand:#24414b}}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(circle at 25% 10%,color-mix(in srgb,var(--petrol) 18%,var(--grund)),var(--grund) 65%);color:var(--text);font-family:"Segoe UI",system-ui,sans-serif;font-size:15px}
.kopf{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--rand);background:color-mix(in srgb,var(--karte) 85%,transparent)}
.logo{font-weight:700;color:var(--petrol);letter-spacing:.3px}
.platz{flex:1}
main{max-width:860px;margin:22px auto;padding:0 16px}
.karte{background:var(--karte);border:1px solid var(--rand);border-radius:16px;padding:18px;margin:0 0 14px;box-shadow:0 6px 18px rgba(14,116,144,.12)}
.schmal{max-width:440px;margin-left:auto;margin-right:auto}
h1,h2{margin:0 0 10px;color:var(--petrol)}
h1{font-size:22px}h2{font-size:17px}
label{display:block;margin:10px 0 4px;font-weight:600;font-size:13px}
input,textarea,select{width:100%;padding:9px 11px;border:1px solid var(--rand);border-radius:10px;background:var(--grund);color:var(--text);font:inherit}
textarea{min-height:70px}
.reihe{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.reihe>input{flex:1;min-width:140px}
.knopf{border:1px solid var(--petrol);background:var(--petrol);color:#fff;border-radius:10px;padding:8px 14px;font:inherit;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 6px rgba(14,116,144,.3)}
.knopf.leicht{background:transparent;color:var(--petrol);box-shadow:none}
.knopf.rot{background:var(--rot);border-color:var(--rot)}
.knopf:disabled{opacity:.5;cursor:default}
.leise{color:var(--leise);font-size:13px}
.fehler{color:var(--rot);font-size:13px;min-height:18px;margin-top:6px}
.versteckt{display:none!important}
.liste .zeile{display:flex;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--rand)}
.liste .zeile:last-child{border-bottom:0}
.zeile .titel{font-weight:600}
.zeile .platz{flex:1}
.mono{font-family:Consolas,"Courier New",monospace;letter-spacing:.5px}
.kit{font-family:Consolas,"Courier New",monospace;font-size:18px;line-height:1.7;padding:12px;border:2px dashed var(--petrol);border-radius:12px;text-align:center;word-spacing:6px}
.hinweis{padding:10px 12px;border-radius:12px;border:1px solid var(--gelb);background:color-mix(in srgb,var(--gelb) 10%,transparent);margin:8px 0}
.alarm{padding:10px 12px;border-radius:12px;border:2px solid var(--rot);background:color-mix(in srgb,var(--rot) 10%,transparent);margin:8px 0;animation:puls 2.4s ease-in-out infinite}
@keyframes puls{50%{background:color-mix(in srgb,var(--rot) 22%,transparent)}}
@media (prefers-reduced-motion:reduce){.alarm{animation-duration:8s}}
.reiter{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap}
.reiter .knopf.leicht.an{background:var(--petrol);color:#fff}
.meldung{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--petrol2);color:#fff;padding:10px 16px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.25);max-width:90vw}
.dialog-grund{position:fixed;inset:0;background:rgba(5,10,20,.6);display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}
.dialog{background:var(--karte);border-radius:16px;padding:18px;max-width:520px;width:100%;max-height:90vh;overflow:auto}
.stark0{color:var(--rot)}.stark1{color:var(--gelb)}.stark2{color:var(--gruen)}
.kit-blatt{display:none}
@media print{body *{visibility:hidden}.kit-blatt,.kit-blatt *{visibility:visible}.kit-blatt{display:block;position:absolute;left:0;top:0;width:100%;padding:24px;color:#000;background:#fff;font-family:Arial,sans-serif}.kit-blatt .kit{border-color:#000;color:#000}}
/* Platzhalter-Ansicht (vor dem Laden der App) */
.schild{font-size:46px;text-align:center}