/*
 * Gemeinsame Grundlage fuer Adminpanel und Mitgliederbereich.
 *
 * Hier stehen nur Dinge, die beide brauchen: Farben, Schrift, Knoepfe, Felder,
 * Karten, Tabellen, Meldungen, Dialoge. Das Geruest - also Seitenleiste oder
 * Kopfzeile - gehoert in die jeweilige Oberflaeche, weil es sich dort
 * unterscheidet.
 *
 * Die Farben sind dieselben wie auf der Startseite: keine der Oberflaechen
 * soll wie ein Fremdkoerper wirken.
 */
/* Die Marken (Farben, Radien, Abstände, Schrift) stehen NICHT mehr hier.
   Sie werden aus app/src/theme.ts erzeugt - siehe gemein/marken.css und
   werkzeuge/marken-erzeugen.mjs.

   Warum: hier standen sie von Hand abgeschrieben. Beim ersten Mal stimmten
   sie, danach nie wieder - wer eine Farbe in der App änderte, änderte sie
   im Web nicht mit, und es fiel erst auf, wenn jemand beides nebeneinander
   hielt. Jetzt gibt es eine Quelle. */
@import url('marken.css');
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--glut);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 12px;line-height:1.25;font-weight:700}
h1{font-size:22px} h2{font-size:18px} h3{font-size:16px}
p{margin:0 0 12px}
.zart{color:var(--text-matt);font-size:13px}
.blass{color:var(--text-blass)}

/* --- Anmeldung --- */
.anmelden-huelle{min-height:100dvh;display:grid;place-items:center;padding:24px}
.anmelden{width:100%;max-width:360px;background:var(--karte);
  border:1px solid var(--linie-stark);border-radius:var(--r-gross);padding:28px;
  box-shadow:var(--schatten)}
.anmelden .marke{display:flex;align-items:center;gap:10px;margin-bottom:20px;
  font-weight:800;font-size:17px}
.anmelden .marke span{width:26px;height:26px;border-radius:7px;
  background:linear-gradient(135deg,var(--glut-hell),var(--glut));display:inline-block}

/* --- Bausteine --- */
.karte{background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--r);padding:18px;margin-bottom:16px;box-shadow:var(--schatten-s)}
.feld{background:var(--feld);border:1px solid var(--linie);color:var(--text);
  border-radius:var(--r-klein);padding:9px 11px;font:inherit;width:100%;
  transition:border-color .12s,background .12s}
.feld:hover{border-color:var(--linie-stark)}
.feld:focus{outline:2px solid var(--glut);outline-offset:-1px}

/* Sichtbarer Rahmen bei Tastaturbedienung.
   Bisher hatte NUR .feld einen - wer sich mit der Tabulatortaste durch die
   Seite bewegt, sah an keinem Knopf, wo er gerade steht. Das trifft
   Tastaturnutzer und alle, die eine Tastatur ans Tablet stecken.
   :focus-visible und nicht :focus: beim Anklicken mit der Maus soll kein
   Rahmen aufblitzen. */
.knopf:focus-visible,
.navknopf:focus-visible,
.chateintrag:focus-visible,
.reaktknopf:focus-visible,
.blasenknopf:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--glut);outline-offset:2px;border-radius:6px}
select.feld{cursor:pointer}
label{display:block;font-size:13px;color:var(--text-matt);margin:0 0 5px}
.reihe{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.reihe > *{flex:1 1 160px;min-width:0}
.reihe > .schmal{flex:0 0 auto}

.knopf{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;
  border-radius:var(--r-klein);padding:8px 14px;font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;background:var(--feld);color:var(--text);white-space:nowrap;
  transition:filter .12s,border-color .12s,background .12s}
.knopf:hover{filter:brightness(1.15)}
.knopf:disabled{opacity:.45;cursor:not-allowed;filter:none}
.knopf.voll{background:var(--glut);color:var(--auf-glut);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, var(--schatten-s)}
.knopf.rand{background:transparent;border-color:var(--linie-stark)}
.knopf.rand:hover{background:var(--feld);border-color:var(--linie-stark)}
.knopf.gefahr{background:var(--ziegel);color:#fff}
.knopf.klein{padding:5px 10px;font-size:13px;border-radius:var(--r-mini)}

.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;
  font-weight:600;background:color-mix(in srgb,var(--chip,var(--stahl)) 18%,transparent);
  color:var(--chip,var(--stahl));border:1px solid color-mix(in srgb,var(--chip,var(--stahl)) 34%,transparent)}

/* Waagerecht scrollt der Rahmen, nie die Seite. */
.tabellen-rahmen{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--r-klein)}
.tabelle{width:100%;border-collapse:collapse;font-size:14px;min-width:600px}
.tabelle th{text-align:left;font-size:12px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-blass);font-weight:700;
  padding:10px 12px;border-bottom:1px solid var(--linie);white-space:nowrap;
  background:var(--erhaben);position:sticky;top:0;z-index:1}
.tabelle td{padding:10px 12px;border-bottom:1px solid var(--linie);vertical-align:middle}
/* Zahlen rechts und in Monospace, sobald eine Spalte so ausgezeichnet ist. */
.tabelle .zahl{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tabelle tbody tr:last-child td{border-bottom:0}
.tabelle tbody tr.klickbar{cursor:pointer}
.tabelle tbody tr.klickbar:hover{background:var(--feld)}

.leer{padding:34px 18px;text-align:center;color:var(--text-matt);
  background:var(--karte);border:1px dashed var(--linie-stark);border-radius:var(--r)}
.leer.fehler{color:var(--ziegel);border-color:color-mix(in srgb,var(--ziegel) 40%,transparent)}
.laedt{display:flex;align-items:center;gap:10px;padding:24px;color:var(--text-matt)}
.kreisel{width:15px;height:15px;border:2px solid var(--linie-stark);
  border-top-color:var(--glut);border-radius:50%;animation:dreh .7s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

/* --- Meldungen --- */
#meldungen{position:fixed;top:16px;right:16px;z-index:50;display:flex;
  flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 32px))}
.meldung{background:var(--erhaben);border:1px solid var(--linie-stark);border-left-width:3px;
  border-radius:var(--r-klein);padding:11px 14px;font-size:14px;box-shadow:var(--schatten);
  animation:rein .22s ease-out}
.meldung.gut{border-left-color:var(--gut)}
.meldung.fehler{border-left-color:var(--ziegel)}
.meldung.info{border-left-color:var(--stahl)}
.meldung.geht{opacity:0;transform:translateX(12px);transition:.3s}
@keyframes rein{from{opacity:0;transform:translateX(14px)}}

/* --- Dialog --- */
.dialog-huelle{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:60;
  display:grid;place-items:center;padding:20px;animation:rein .15s ease-out}
.dialog{background:var(--karte);border:1px solid var(--linie-stark);
  border-radius:var(--r-gross);padding:22px;max-width:420px;width:100%;
  box-shadow:var(--schatten)}
.dialog-fuss{display:flex;gap:9px;justify-content:flex-end;margin-top:16px}


/* --- Kennzahlen und Diagramme --- */
.kennzahlen{display:grid;gap:11px;
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));margin-bottom:16px}
.kennzahl{background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--r);padding:14px 16px;box-shadow:var(--schatten-s);
  transition:border-color .12s,transform .12s}
a:hover > .kennzahl{border-color:var(--linie-stark);transform:translateY(-1px)}
.kennzahl-wert{font-size:25px;font-weight:800;line-height:1.15;
  font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kennzahl-text{color:var(--text-matt);font-size:12.5px;margin-top:2px}

.balkenwerk{display:flex;flex-direction:column;gap:7px}
.balkenzeile{display:grid;grid-template-columns:minmax(70px,26%) 1fr auto;
  gap:10px;align-items:center;font-size:13px}
.balkenname{color:var(--text-matt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.balkenbahn{background:var(--feld);border-radius:999px;height:9px;overflow:hidden}
.balken{height:100%;border-radius:999px;transition:width .3s ease-out}
.balkenzahl{color:var(--text);font-weight:700;font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  min-width:44px;text-align:right}

.stundenwerk{display:flex;gap:2px;align-items:flex-end;height:90px}
.stundensaeule{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;gap:3px}
.stundenbalken{background:var(--glut);border-radius:2px 2px 0 0;opacity:.85}
.stundensaeule:hover .stundenbalken{opacity:1}
.stundenmarke{color:var(--text-blass);font-size:9.5px;text-align:center;height:11px}

/* Zwei Diagramme nebeneinander, ab 720px. Darunter untereinander - ein
   Diagramm unter 300px breit sagt nichts mehr aus. */
.diagrammgitter{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* Verläufe brauchen Breite, sonst wird aus einem Monat ein Zickzack. Bei vier
   Diagrammen ergeben zwei Spalten zwei volle Reihen statt 3+1. */
.diagrammgitter.breit{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}

/* Veränderung gegenüber dem Vorzeitraum. Die Farbe folgt der Bewertung, nicht
   der Richtung - mehr Meldungen sind nicht gut, nur weil die Zahl steigt. */
.delta{font-size:11.5px;font-weight:800;font-family:var(--mono);
  padding:1px 6px;border-radius:99px;white-space:nowrap;letter-spacing:-.01em}
.delta.gut{color:var(--gut);background:color-mix(in srgb,var(--gut) 14%,transparent)}
.delta.schlecht{color:var(--ziegel);background:color-mix(in srgb,var(--ziegel) 14%,transparent)}
.delta.hoch{color:var(--glut);background:color-mix(in srgb,var(--glut) 14%,transparent)}
.delta.gleich{color:var(--text-blass);background:var(--feld)}