/* Eigenes Stylesheet. Dieselbe Farbwelt wie die Anwendung, aber eine eigene
   Datei: Verwaltung und Anwendung teilen keine Zeile Code.

   Alle Farben stehen in diesem Block. Weiter unten kommt kein roher Wert mehr
   vor - sonst hat man nach dem dritten Handgriff drei Blautöne. */
:root{
  color-scheme:light;
  --bg:#F3F6FB; --karte:#FFFFFF; --linie:#E8EAEB; --linie-stark:#8D95A3;
  --text:#111827; --leise:#667085;
  --haupt:#7557E8; --haupt-2:#5B57E8; --haupt-hover:#6748D8; --haupt-hover-2:#4F4BD8;
  --haupt-ink:#6043CA; --haupt-text:#FFFFFF; --haupt-sanft:#E6E6F9;
  --zweit-ink:#0E7490; --zweit-sanft:#E0F5F9;   /* Zweitakzent: Cyan */
  --haupt-fokus:#7557E8;
  --gefahr:#C42A44; --gefahr-sanft:#FDECEE;
  --reihe:#F7F9FC;
  --hof:rgba(117,87,232,.16);   /* Hof um das Feld im Fokus */
  --scrim:rgba(17,24,39,.45);
  --schatten:0 1px 2px rgba(66,75,95,.06);
  --schatten-karte:0 12px 30px rgba(66,75,95,.08);
  --schatten-gross:0 18px 45px rgba(66,75,95,.14);
  --schein:0 8px 24px rgba(117,87,232,.22);
  --aurora-1:rgba(117,87,232,.08);
  --aurora-2:rgba(11,167,197,.06);
  /* Die Seitenspalte bleibt in beiden Themen dunkel - sie ist der Rahmen,
     nicht der Inhalt. Die Werte kommen aus dem dunklen Thema. */
  --seite-bg:#0B0E16; --seite-text:#F7F8FC; --seite-leise:#9AA5B5;
  --seite-linie:#252831; --seite-hier:#191530; --seite-hier-ink:#C4B5FD;
  --seite-gefahr:#FF667A;
}
@media(prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#070910; --karte:#12151F; --linie:#252831; --linie-stark:#5E6577;
    --text:#F7F8FC; --leise:#A3ADBD;
    --haupt:#7C3AED; --haupt-2:#5B57E8; --haupt-hover:#8054F0; --haupt-hover-2:#6455F0;
    --haupt-ink:#C4B5FD; --haupt-text:#FFFFFF; --haupt-sanft:#191530;
    --zweit-ink:#22D3EE; --zweit-sanft:#0E2A33;
    --haupt-fokus:#8B5CF6;
    --gefahr:#FF667A; --gefahr-sanft:#2A1218;
    --reihe:#181D2A;
    --hof:rgba(139,92,246,.24);
    --scrim:rgba(3,4,8,.72);
    --schatten:0 1px 2px rgba(0,0,0,.5);
    --schatten-karte:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 45px rgba(0,0,0,.45);
    --schatten-gross:0 24px 60px rgba(0,0,0,.6);
    --schein:0 8px 24px rgba(139,92,246,.28);
    --aurora-1:rgba(139,92,246,.16);
    --aurora-2:rgba(34,211,238,.10);
    --seite-bg:#0B0E16; --seite-linie:#252831;
  }
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;color:var(--text)}
/* Aurora: zwei weiche Lichter am oberen Rand, darunter der einfarbige Grund. */
body{background:
  radial-gradient(circle at 15% 0%, var(--aurora-1), transparent 32%),
  radial-gradient(circle at 90% 5%, var(--aurora-2), transparent 28%),
  var(--bg);
  background-attachment:fixed}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
     font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
h1,h2{margin:0;font-weight:650;letter-spacing:-.02em}
h1{font-size:22px} h2{font-size:19px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
svg{width:18px;height:18px;flex:0 0 auto}
.versteckt{display:none!important}
:focus-visible{outline:2px solid var(--haupt-fokus);outline-offset:2px;border-radius:8px}

/* ------------------------------------------------------------- Bausteine */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;
       padding:0 16px;border:1px solid var(--linie);border-radius:12px;background:var(--karte);
       font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;
       transition:background .14s,border-color .14s,color .14s}
.knopf:hover:not(:disabled){border-color:var(--linie-stark)}
.knopf:active:not(:disabled){transform:translateY(1px)}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.knopf.ist-haupt{background:linear-gradient(135deg,var(--haupt),var(--haupt-2));
                 border-color:transparent;color:var(--haupt-text);box-shadow:var(--schein)}
.knopf.ist-haupt:hover:not(:disabled){
  background:linear-gradient(135deg,var(--haupt-hover),var(--haupt-hover-2));
  border-color:transparent}
.knopf.ist-gefahr{color:var(--gefahr)}
.knopf.ist-gefahr:hover:not(:disabled){background:var(--gefahr-sanft);border-color:var(--gefahr)}
.knopf.ist-breit{width:100%}
.knopf.ist-klein{height:34px;padding:0 10px;font-size:13px}

.feld{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.feld > span{font-size:14px;font-weight:600;color:var(--leise)}
.eingabe{width:100%;height:44px;padding:0 12px;border:1px solid var(--linie-stark);
         border-radius:12px;background:var(--karte);color:var(--text)}
.eingabe:focus{outline:none;border-color:var(--haupt-fokus);box-shadow:0 0 0 3px var(--hof)}

.meldung{margin:12px 0 0;font-size:15px;color:var(--leise)}
.meldung:empty{display:none}
.meldung.ist-schlecht{color:var(--gefahr);font-weight:600}
.meldung.ist-gut{color:var(--haupt-ink);font-weight:600}
.unter{margin:6px 0 0;color:var(--leise);font-size:14px}
.leer{color:var(--leise);text-align:center;padding:40px 16px;margin:0}

/* -------------------------------------------------------------- Anmeldung */
.mitte{min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:18px;
       box-shadow:var(--schatten-karte)}
.mitte .karte{width:min(100%,400px);padding:28px 24px 24px}
.karte-zeichen{display:block;width:56px;height:56px;margin:0 auto 12px}
.mitte h1{text-align:center;margin-bottom:22px}
/* Quer gehaltenes Handy: knapp 400px Hoehe. Dort muss die Karte ohne Scrollen
   hineinpassen, also wird das Zeichen kleiner und alles rueckt zusammen. */
@media(max-height:560px){
  .mitte{padding:12px 16px}
  .mitte .karte{padding:18px 20px 20px}
  .karte-zeichen{width:40px;height:40px;margin-bottom:8px}
  .mitte h1{margin-bottom:14px}
  .mitte .feld{margin-bottom:12px;gap:4px}
}

/* ------------------------------------------------------------- Grundriss */
.rahmen{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100dvh}
.seite{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:26px;
       padding:22px 14px;background:var(--seite-bg);color:var(--seite-text)}
.seite-marke{display:flex;align-items:center;gap:10px;padding:0 8px;
             font-weight:700;letter-spacing:-.02em}
.seite-titel{margin:0 0 8px;padding:0 10px;font-size:11px;font-weight:700;
             letter-spacing:.12em;text-transform:uppercase;color:var(--seite-leise)}
.seite-punkt{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;
             border:0;border-radius:11px;background:transparent;color:var(--seite-leise);
             font-size:14px;font-weight:600;text-align:left;cursor:pointer}
.seite-punkt:hover:not(:disabled){background:var(--seite-hier);color:var(--seite-text)}
.seite-punkt.ist-hier{background:var(--seite-hier);color:var(--seite-hier-ink);
                      box-shadow:inset 0 0 0 1px var(--seite-linie);cursor:default}
.seite-punkt.ist-gefahr{color:var(--seite-gefahr)}
.seite-fuss{margin-top:auto;border-top:1px solid var(--seite-linie);padding-top:14px;
            display:grid;gap:4px}
.wer-block{display:flex;align-items:center;gap:10px;padding:6px 8px 10px;min-width:0}
.wer-text{min-width:0}
.wer-text b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wer-text small{display:block;font-size:11px;color:var(--seite-leise)}
.kuerzel{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
         flex:0 0 auto;background:var(--seite-hier);color:var(--seite-text);
         font-size:12px;font-weight:700}

.haupt{min-width:0;padding:30px 32px 56px;max-width:1100px}
.kopfzeile{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
           margin-bottom:22px}

.zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.zahl{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:14px 16px}
.zahl-titel{display:block;font-size:12px;color:var(--leise);margin-bottom:4px}
.zahl strong{font-size:22px;font-weight:700;letter-spacing:-.02em}

/* ----------------------------------------------------------------- Tafel */
.tafel{overflow:hidden}
.werkzeug{display:flex;align-items:center;justify-content:space-between;gap:14px;
          padding:14px 16px;border-bottom:1px solid var(--linie)}
.suche{position:relative;width:min(360px,100%)}
.suche svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--leise)}
.suche .eingabe{padding-left:38px;background:var(--reihe)}
.anzahl{font-size:13px;color:var(--leise);white-space:nowrap}
.tafel .meldung{margin:14px 16px 0}

table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.08em;
         text-transform:uppercase;color:var(--leise);padding:12px 16px;
         background:var(--reihe);border-bottom:1px solid var(--linie)}
th.rechts{text-align:right}
tbody td{padding:12px 16px;border-bottom:1px solid var(--linie);vertical-align:middle;font-size:15px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--reihe)}
.name-zelle{display:flex;align-items:center;gap:11px;min-width:0}
.name-zelle strong{font-weight:650;overflow-wrap:anywhere}
.zeichen{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;
         background:var(--zweit-sanft);color:var(--zweit-ink);font-size:12px;font-weight:700}
.nutzername{color:var(--leise);overflow-wrap:anywhere}
.tat{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.tat-knopf{width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
           border:1px solid var(--linie);border-radius:10px;background:var(--karte);color:var(--leise)}
.tat-knopf:hover:not(:disabled){background:var(--haupt-sanft);color:var(--haupt-ink);border-color:var(--haupt)}
.tat-knopf.ist-gefahr:hover:not(:disabled){background:var(--gefahr-sanft);color:var(--gefahr);border-color:var(--gefahr)}
.tat-knopf:disabled{opacity:.45;cursor:not-allowed}
.tat-knopf svg{width:16px;height:16px}

.marke{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
       font-size:12px;font-weight:700;white-space:nowrap;
       background:var(--haupt-sanft);color:var(--haupt-ink)}
.marke::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.marke.ist-an{background:var(--haupt-sanft);color:var(--haupt-ink)}
.marke.ist-aus{background:var(--gefahr-sanft);color:var(--gefahr)}
.marke.ist-still{background:transparent;border:1px solid var(--linie);color:var(--leise)}
.marke.ist-still::before{display:none}
.marken{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* Auf dem Handy wird aus jeder Zeile eine Karte. */
.kacheln{display:none;grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}
.kachel{border:1px solid var(--linie);border-radius:14px;background:var(--karte);padding:14px}
.kachel-kopf{display:flex;align-items:flex-start;justify-content:space-between;
             gap:8px 12px;flex-wrap:wrap}
.kachel-text{min-width:0}
.kachel-text strong{display:block;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kachel-text .nutzername{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kachel-tat{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 44px;gap:7px;
            margin-top:13px;padding-top:13px;border-top:1px solid var(--linie)}
.kachel-tat .knopf{height:42px;padding:0 8px;font-size:13px;gap:6px}
.kachel-tat .knopf svg{width:15px;height:15px}

/* ---------------------------------------------------------------- Fenster */
/* minmax(0,…) auch hier: ohne das waere die Spalte so breit wie der laengste
   Knopf und das Fenster ragte auf schmalen Schirmen aus dem Bild. */
.hintergrund{position:fixed;inset:0;z-index:100;background:var(--scrim);
             backdrop-filter:blur(6px);
             display:grid;grid-template-columns:minmax(0,1fr);place-items:center;
             padding:16px;overflow:auto}
.fenster{width:min(460px,100%);margin:auto;padding:20px 22px 22px;background:var(--karte);
         border-radius:18px;box-shadow:var(--schatten-gross)}
.fenster-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
              margin-bottom:16px}
.schliessen{width:32px;height:32px;flex:0 0 auto;border:0;border-radius:9px;cursor:pointer;
            background:var(--reihe);color:var(--leise);font-size:16px}
.schliessen:hover{color:var(--text)}
.fenster-aktionen{display:flex;gap:8px;margin-top:20px}
.fenster-aktionen .knopf{flex:1}
.fenster .unter{margin:0}
.warnung{margin:0 0 14px;padding:10px 12px;border-radius:11px;font-size:13px;line-height:1.45;
         background:var(--haupt-sanft);color:var(--haupt-ink)}
.zugang-block{display:grid;gap:2px;padding:4px 12px;border:1px solid var(--linie);border-radius:12px;
              background:var(--reihe)}
.zugang-zeile{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:10px;
              align-items:center;padding:10px 0;border-bottom:1px solid var(--linie)}
.zugang-zeile:last-child{border-bottom:0}
.zugang-titel{font-size:12px;font-weight:650;color:var(--leise)}
.zugang-zeile code{font-size:15px;overflow-wrap:anywhere;user-select:all}

.hinweis-blase{position:fixed;left:50%;bottom:24px;transform:translate(-50%,10px);z-index:200;
               max-width:min(360px,calc(100vw - 32px));padding:12px 16px;border-radius:12px;
               background:var(--text);color:var(--bg);font-size:14px;
               box-shadow:var(--schatten-gross);opacity:0;pointer-events:none;
               transition:opacity .18s,transform .18s}
.hinweis-blase.ist-da{opacity:1;transform:translate(-50%,0)}

/* --------------------------------------------------------------- Handy */
.handy-kopf,.handy-menue{display:none}

@media(max-width:1000px){
  .rahmen{grid-template-columns:200px minmax(0,1fr)}
  .haupt{padding:26px 20px 48px}
}

@media(max-width:760px){
  /* minmax(0,…): sonst kann die Spalte nicht unter die Mindestbreite ihres
     Inhalts schrumpfen und die ganze Seite laesst sich seitlich schieben. */
  .rahmen{grid-template-columns:minmax(0,1fr)}
  .seite{display:none}
  .haupt{padding:0 14px 32px;max-width:640px;margin:0 auto;width:100%}

  .handy-kopf{position:sticky;top:0;z-index:12;display:flex;align-items:center;
              justify-content:space-between;gap:12px;margin:0 -14px 18px;padding:12px 16px;
              background:var(--karte);border-bottom:1px solid var(--linie)}
  .kuerzel.ist-knopf{border:0;cursor:pointer;color:var(--haupt-text);
                     background:linear-gradient(135deg,var(--haupt),var(--haupt-2))}
  .handy-menue{position:fixed;top:60px;right:14px;z-index:30;padding:6px;
               width:min(280px,calc(100vw - 28px));background:var(--karte);
               border:1px solid var(--linie);border-radius:14px;box-shadow:var(--schatten-gross)}
  .handy-menue:not(.versteckt){display:block}
  .menue-punkt{display:block;width:100%;padding:10px 12px;border:0;border-radius:10px;
               background:transparent;color:var(--text);text-align:left;cursor:pointer}
  .menue-punkt:hover{background:var(--reihe)}
  .menue-punkt b{display:block;font-size:14px}
  .menue-punkt small{display:block;margin-top:2px;font-size:12px;color:var(--leise)}
  .menue-punkt.ist-gefahr b{color:var(--gefahr)}

  .kopfzeile{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:14px}
  .kopfzeile .knopf{width:100%}
  h1{font-size:20px}
  .zahlen{gap:8px;margin-bottom:12px}
  .zahl{padding:10px 11px;border-radius:12px}
  .zahl-titel{font-size:11px}
  .zahl strong{font-size:19px}

  .tafel{border:0;background:transparent;box-shadow:none;overflow:visible}
  .werkzeug{display:block;padding:0;border:0;margin-bottom:10px}
  .suche{width:100%}
  .anzahl{display:block;margin-top:8px;font-size:12px}
  .tafel .meldung{margin:12px 0 0}
  table{display:none}
  .kacheln{display:grid;padding:0}
  .leer{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:32px 16px}

  .hintergrund{align-items:flex-end;padding:10px}
  .fenster{width:100%}
  .hinweis-blase{bottom:16px}
}

@media(max-width:430px){
  /* Untereinander statt nebeneinander: „Endgültig löschen" passt sonst nicht. */
  .fenster-aktionen{flex-direction:column-reverse}
  .kachel-tat{grid-template-columns:minmax(0,1fr) 44px 44px}
  .kachel-tat .knopf.ist-kurz span{display:none}
  .zugang-zeile{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
  .zugang-titel{grid-column:1 / -1}
}