/* Gemeinsames Stylesheet für Portal, Anmeldung, Konto und Medien-Dashboard.
   Apple-orientiert: Systemschrift, viel Weißraum, weiche Radien, ein Akzent.
   Hell und dunkel über prefers-color-scheme, keine externen Abhängigkeiten. */

:root{
  --bg:#f5f5f7; --karte:#fff; --text:#1d1d1f; --leise:#6e6e73; --linie:#d2d2d7;
  --akzent:#0071e3; --gruen:#34c759; --orange:#ff9500; --rot:#ff3b30; --lila:#af52de;
  --r:14px; --schatten:0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.04);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#000; --karte:#1c1c1e; --text:#f5f5f7; --leise:#98989d; --linie:#38383a;
    --akzent:#0a84ff; --gruen:#30d158; --orange:#ff9f0a; --rot:#ff453a; --lila:#bf5af2;
    --schatten:0 1px 3px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font:400 15px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
}
a{color:var(--akzent);text-decoration:none}
a:hover{text-decoration:underline}
.huelle{max-width:1080px;margin:0 auto;padding:0 var(--l5)}
.eng{max-width:420px;margin:0 auto;padding:0 var(--l5)}

header{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--linie);
}
header .huelle{display:flex;align-items:center;gap:var(--l3);
  min-height:56px;flex-wrap:wrap;padding-top:var(--l2);padding-bottom:var(--l2)}
h1{font-size:19px;font-weight:600;letter-spacing:-.02em}
.dehn{flex:1}
/* Nur fuer Text in der Kopfleiste (Benutzername, Zeitstempel).
   Fuer kleine Knoepfe gibt es .knopf-mini — beides zu vermischen faerbt den
   Knopftext grau und macht ihn unlesbar. */
.mini{font-size:12px;color:var(--leise);font-variant-numeric:tabular-nums}
h2{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
   color:var(--leise);margin:var(--l6) 0 var(--l3)}
h3{font-size:16px;font-weight:600;margin-bottom:var(--l1)}

.karte{background:var(--karte);border-radius:var(--r);box-shadow:var(--schatten);overflow:hidden}
.pad{padding:var(--l5)}
.sub{font-size:13px;color:var(--leise)}

/* ── Knöpfe ── */
button,.knopf{
  font:inherit;font-weight:500;font-size:14px;border:none;border-radius:980px;
  padding:10px 20px;background:var(--akzent);color:#fff;cursor:pointer;
  transition:opacity .15s,transform .06s;display:inline-block;text-align:center;
}
button:hover:not(:disabled),.knopf:hover{opacity:.85;text-decoration:none}
button:active:not(:disabled){transform:scale(.97)}
button:disabled{opacity:.4;cursor:not-allowed}
/* Auch .knopf: die Kopfzeilen-Links sind <a class='knopf zart'>, und ein
   rein elementgebundener Selektor liess sie unveraendert blau. */
button.zart,.knopf.zart{background:color-mix(in srgb,var(--text) 8%,transparent);
  color:var(--text)}
button.gefahr,.knopf.gefahr{background:var(--rot);color:#fff}
button.breit{width:100%;padding:12px}
.knopfreihe{display:flex;flex-wrap:wrap;gap:10px}

/* ── Formulare ── */
label{display:block;font-size:13px;font-weight:500;margin:14px 0 5px}
input[type=text],input[type=password],input[type=email]{
  font:inherit;width:100%;padding:11px 13px;border-radius:10px;
  border:1px solid var(--linie);background:var(--bg);color:var(--text);
}
input:focus{outline:2px solid var(--akzent);outline-offset:-1px;border-color:transparent}
input.mitte{text-align:center;letter-spacing:.35em;font-size:20px;font-variant-numeric:tabular-nums}

.meldung{padding:var(--l3) var(--l4);border-radius:10px;font-size:13.5px;
  margin-bottom:var(--l4);display:flex;gap:var(--l3);align-items:flex-start}
.m-fehler{background:color-mix(in srgb,var(--rot) 12%,transparent);
          border:1px solid color-mix(in srgb,var(--rot) 30%,transparent)}
.m-ok{background:color-mix(in srgb,var(--gruen) 12%,transparent);
      border:1px solid color-mix(in srgb,var(--gruen) 32%,transparent)}
.m-hinweis{background:color-mix(in srgb,var(--orange) 12%,transparent);
           border:1px solid color-mix(in srgb,var(--orange) 30%,transparent)}

/* ── Anmeldung ── */
.anmelde-mitte{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 0}
.marke{text-align:center;margin-bottom:26px}
.marke .punkt{width:52px;height:52px;border-radius:14px;margin:0 auto 14px;
  background:linear-gradient(145deg,var(--akzent),var(--lila));
  display:flex;align-items:center;justify-content:center;font-size:26px}
.marke h1{font-size:24px;letter-spacing:-.03em}
.marke p{font-size:14px;color:var(--leise);margin-top:4px}

/* ── Dienste-Kacheln ── */
/* align-items:stretch sorgt dafuer, dass alle Kacheln einer Reihe gleich hoch
   sind — vorher richtete sich jede nach ihrem eigenen Text, und Kacheln mit
   dreizeiliger Beschreibung ragten heraus. */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:var(--l4);align-items:stretch}
.dienst{
  background:var(--karte);border-radius:var(--r);box-shadow:var(--schatten);
  padding:var(--l4);display:flex;flex-direction:column;gap:3px;
  color:var(--text);transition:transform .12s,box-shadow .12s;position:relative;
}
.dienst:hover{transform:translateY(-2px);text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.08),0 12px 32px rgba(0,0,0,.07)}
.dienst .sym{font-size:26px;margin-bottom:var(--l2);line-height:1}
.dienst .nm{font-weight:600;font-size:15px}
.dienst .be{font-size:12.5px;color:var(--leise);
  /* Schiebt alles Folgende nach unten, damit Knoepfe verschiedener Kacheln
     auf einer Linie sitzen statt direkt unter unterschiedlich langem Text. */
  margin-bottom:auto}
.dienst .zustand{position:absolute;top:var(--l4);right:var(--l4);width:8px;height:8px;border-radius:50%}
.z-an{background:var(--gruen)} .z-aus{background:var(--leise)} .z-fehler{background:var(--rot)}
.dienst.aus{opacity:.55}

/* ── Tabellen / Listen ── */
/* Standen bisher nur in medien.css — /sicherung und /galerien laden die aber
   nicht, dort blieben Zahlenspalten unformatiert. */
.zahl{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
td.zahl{color:var(--text)}
th.zahl{text-align:right}
.nm{font-weight:500;overflow-wrap:anywhere}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:500;font-size:12px;color:var(--leise);
   padding:var(--l3);border-bottom:1px solid var(--linie);white-space:nowrap}
td{padding:var(--l3);border-bottom:1px solid var(--linie);vertical-align:middle}
tr:last-child td{border-bottom:none}

.codes{font:13px/2 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--bg);border:1px solid var(--linie);border-radius:10px;
  padding:14px 18px;columns:2;column-gap:24px;margin:12px 0}
.qr{display:block;margin:16px auto;border-radius:10px;background:#fff;padding:12px;width:220px;height:220px}
.geheim{font:13px ui-monospace,Menlo,monospace;word-break:break-all;
  background:var(--bg);border:1px solid var(--linie);border-radius:8px;padding:10px 12px;margin:10px 0}

footer{margin:var(--l7) 0 var(--l6);text-align:center;font-size:12px;color:var(--leise)}
@media(max-width:640px){
  .huelle{padding:0 var(--l4)}
  /* Auf schmalen Geraeten passten Titel und vier Knoepfe nicht nebeneinander:
     die Knoepfe ragten hinaus und die ganze Seite liess sich seitlich schieben.
     Jetzt rutscht die Knopfreihe unter den Titel. */
  header .huelle{gap:var(--l2)}
  header h1{flex:1 1 100%;font-size:17px}
  header .dehn{display:none}
  header .knopf{flex:0 0 auto}
  .codes{columns:1}
}

/* ── Dienste steuern ── */
.kachel-block{display:flex;flex-direction:column;gap:var(--l2);height:100%}
.kachel-block .dienst{flex:1}
.steuer{display:flex}
.steuer button{width:100%;padding:8px 14px;font-size:13px}

/* Stoppen ist Alltag, kein Notfall. Vorher war der Knopf vollflaechig rot und
   beherrschte die ganze Uebersicht; jetzt nur die Schrift rot, Flaeche ruhig. */
.steuer button.gefahr{background:transparent;color:var(--rot);
  border:1px solid color-mix(in srgb,var(--rot) 35%,transparent)}
.steuer button.gefahr:hover{background:color-mix(in srgb,var(--rot) 10%,transparent)}

/* ── Systemleiste ── */
.sysleiste{
  /* Feste Spaltenzahl statt auto-fit: die Leiste hat sechs Felder, und
     auto-fit machte daraus vier plus zwei — die letzte Reihe blieb halb leer
     und wirkte abgebrochen. Drei Spalten gehen glatt auf. */
  display:grid;grid-template-columns:repeat(3,1fr);
  margin:var(--l5) 0 var(--l1);
  background:var(--karte);border-radius:var(--r);box-shadow:var(--schatten);
  overflow:hidden;
}
.sysfeld{padding:var(--l3) var(--l4);border-right:1px solid var(--linie);
  border-bottom:1px solid var(--linie);
  display:flex;flex-direction:column;gap:3px;min-width:0}
/* Keine Linien am aeusseren Rand der Leiste. */
.sysleiste .sysfeld:nth-child(3n){border-right:none}
.sysleiste .sysfeld:nth-last-child(-n+3){border-bottom:none}
.sysfeld .k{font-size:11px;color:var(--leise);text-transform:uppercase;letter-spacing:.05em}
.sysfeld .v{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){
  .sysleiste{grid-template-columns:repeat(2,1fr)}
  .sysleiste .sysfeld:nth-child(3n){border-right:1px solid var(--linie)}
  .sysleiste .sysfeld:nth-child(2n){border-right:none}
  .sysleiste .sysfeld:nth-last-child(-n+3){border-bottom:1px solid var(--linie)}
  .sysleiste .sysfeld:nth-last-child(-n+2){border-bottom:none}
}
.versteckt{display:none}

/* Hilfsklassen statt style=-Attributen: die Kopfzeile setzt style-src 'self'
   ohne 'unsafe-inline', wodurch der Browser auch Attribut-CSS verwirft. */
.versteckt{display:none}
.rechts{text-align:right}
.inline{display:inline}
.umbruch{overflow-wrap:anywhere}
.leer-zelle{padding:22px;text-align:center}
.feld-breit{font:inherit;width:100%;padding:11px 13px;border-radius:10px;
  border:1px solid var(--linie);background:var(--bg);color:var(--text)}
.anhaken{display:flex;align-items:center;gap:10px;margin-top:16px;font-weight:400}
.anhaken input{width:18px;height:18px}
.luft-18{height:18px}
.erbt-farbe{color:inherit}
.abstand-10{margin-top:10px}
.abstand-14{margin-top:14px}
.schmal{max-width:780px}
.quer-roll{overflow-x:auto}
.knopf.mini{padding:6px 14px;font-size:13px}

/* Kennzeichen und Warnmeldung — wurden von portal.py benutzt, ohne dass es
   sie gab, und blieben deshalb unformatiert. */
.chip{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;
  padding:2px 8px;border-radius:99px;vertical-align:middle;margin-left:6px;
  background:color-mix(in srgb,var(--text) 10%,transparent);color:var(--leise)}
.c-neu{background:color-mix(in srgb,var(--akzent) 18%,transparent);color:var(--akzent)}
.c-fehler{background:color-mix(in srgb,var(--rot) 18%,transparent);color:var(--rot)}
.m-warn{background:color-mix(in srgb,var(--orange) 12%,transparent);
  border-color:color-mix(in srgb,var(--orange) 35%,transparent)}

/* ── Abstandsstufung ───────────────────────────────────────────────
   Vorher standen 8, 10, 12, 14, 16, 18, 20 und 26 px kreuz und quer in
   inline-Attributen — die von der CSP ohnehin verworfen wurden, sodass
   Abstaende teils ganz fehlten. Eine feste Stufung, ueberall dieselbe. */
:root{ --l1:4px; --l2:8px; --l3:12px; --l4:16px; --l5:24px; --l6:32px; --l7:48px; }

.oben-0{margin-top:0}
.oben-1{margin-top:var(--l1)}
.oben-2{margin-top:var(--l2)}
.oben-3{margin-top:var(--l3)}
.oben-4{margin-top:var(--l4)}
.oben-5{margin-top:var(--l5)}
.links-2{margin-left:var(--l2)}
.rand-4{margin:var(--l3) 0 var(--l4)}
.pad-3{padding:var(--l3)}

.luft-2{height:var(--l2)}
.luft-3{height:var(--l3)}
.luft-4{height:var(--l4)}
.luft-5{height:var(--l5)}

.trennt-oben{border-top:1px solid var(--linie)}
.trennt-unten{border-bottom:1px solid var(--linie)}
.zeiger{cursor:pointer}
.waechst{flex:1;min-width:180px}
.unten-buendig{align-items:flex-end}
.schmaler{max-width:620px}
.text-mitte{max-width:440px;margin:0 auto var(--l5)}

/* Leere Zustaende und Kopfbereiche */
.leerseite{padding-top:var(--l7);padding-bottom:var(--l5);text-align:center}
.held{padding:var(--l7) 0 var(--l6);text-align:center}
.held .sym{font-size:52px;margin-bottom:var(--l4);display:block}
.gross-titel{font-size:24px;margin-bottom:var(--l3)}

/* Kopfzeile einer Karte */
.karten-kopf{padding:var(--l3) var(--l4);border-bottom:1px solid var(--linie);
  display:flex;gap:var(--l2);flex-wrap:wrap;align-items:center}
.knopf-mini{padding:6px 14px;font-size:13px}
.unten-4{margin-bottom:var(--l4)}

/* Zeilen mit und ohne Knopf gleich hoch halten: der Knopf ist hoeher als eine
   Textzeile und blaehte einzelne Tabellenzeilen auf, wodurch die Liste
   unruhig wirkte. */
td .klein, td button.klein{padding:4px 12px;font-size:12.5px;line-height:1.5}
td:has(form){padding-top:var(--l2);padding-bottom:var(--l2)}

/* Als Web-App am Homebildschirm liegt der Inhalt unter der Statusleiste
   (apple-mobile-web-app-status-bar-style: black-translucent). Ohne diesen
   Abstand schiebt sich die Uhrzeit ueber den Titel. env(safe-area-inset-top)
   ist im Browser 0 und wirkt sich dort nicht aus. */
header{padding-top:env(safe-area-inset-top)}
/* Auch links/rechts: im Querformat schneidet die Kameraaussparung sonst
   den Rand an. */
.huelle{padding-left:max(var(--l5),env(safe-area-inset-left));
        padding-right:max(var(--l5),env(safe-area-inset-right))}
@media(max-width:640px){
  .huelle{padding-left:max(var(--l4),env(safe-area-inset-left));
          padding-right:max(var(--l4),env(safe-area-inset-right))}
}
body{padding-bottom:env(safe-area-inset-bottom)}
/* Karte mit warnendem Rand — fuer Zustaende, die von selbst enden. */
.m-warn-rand{border:1px solid color-mix(in srgb,var(--orange) 40%,transparent)}
/* Ersatz fuer style="…": die CSP verwirft Attribute. */
.mitte-reihe{justify-content:center}
.abstand-o2{margin-top:16px}