/* ============================================================
   Kaiser & Konsorten — Verwaltung
   Design V17 (10.09.2026) · Schwarz / Weiss / Grau, Rot als Akzent

   ERSETZT die bisherige style.css. Es wird NUR das Aussehen
   geaendert — keine Inhalte, keine Logik, kein PHP, keine DB.

   Die Seiten bringen teils eigene <style>-Bloecke mit, die NACH
   dieser Datei geladen werden. Damit das neue Aussehen trotzdem
   durchgreift, sind die Kernregeln mit !important gesetzt.
   Layout-Regeln der Seiten (Raster, Spalten) bleiben absichtlich
   unangetastet — nur Farbe, Schrift, Rahmen, Rundung.
   ============================================================ */

:root{
  --ink:#0b0b0d;          /* Schwarz — Kopfleiste, Marke */
  --ink-2:#17171b;
  --ink-3:#26262e;
  --papier:#f7f7f8;       /* Seitengrund */
  --karte:#ffffff;
  --linie:#e6e6e9;
  --linie-2:#d4d4d9;
  --text:#15151a;
  --grau:#6c6c76;
  --grau-2:#9a9aa4;
  --rot:#c8102e;          /* Kaiser-Rot — Akzent, sparsam */
  --rot-2:#a00d24;
  --rot-hell:#fdecee;
  --gelb:#8a6a00;         /* gedaempfte Ampel */
  --gelb-hell:#fdf6e3;
  --gruen:#1f7a45;
  --gruen-hell:#eaf5ee;
  --radius:10px;
  --radius-gross:14px;
  --schatten:0 1px 2px rgba(11,11,13,.04), 0 10px 24px -18px rgba(11,11,13,.35);
  --schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- Grundlage ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--schrift) !important;
  background:var(--papier) !important;
  color:var(--text) !important;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
*{ box-sizing:border-box; }

h1,h2,h3,h4{
  font-weight:700 !important;
  letter-spacing:-.015em;
  color:var(--text);
  line-height:1.25;
}
h1{ font-size:1.35rem !important; margin:0 0 4px; }
h2{ font-size:1.06rem !important; margin:24px 0 10px; text-align:left !important; }
h2:first-child, .box h2, header h2{ margin-top:0; }
h3{ font-size:.98rem !important; }

a{ color:var(--rot); }
a:hover{ color:var(--rot-2); }
small{ color:var(--grau); }

::selection{ background:rgba(200,16,46,.16); }
:focus-visible{ outline:2px solid var(--rot) !important; outline-offset:2px; border-radius:6px; }

/* Inhaltsseiten ohne eigenen Rahmen bekommen Seitenrand.
   Ausgenommen: dashboard.php (fixe Kopfleiste + iframe), login.php
   und Seiten, die bereits .wrap/.container mitbringen. */
body:not(:has(> header)):not(:has(> .wrap)):not(:has(> .container)):not(:has(> form[action="authenticate.php"])){
  padding:18px 20px 30px !important;
}

/* Container der Altseiten etwas luftiger */
.container{ max-width:1100px !important; margin:0 auto !important; padding:16px 16px 32px; }
.wrap{ padding:18px 18px 34px !important; }

/* ---------- Kopfleiste (dashboard.php) ---------- */
header{
  background:var(--ink) !important;
  color:#fff !important;
  padding:9px 16px !important;
  border-bottom:1px solid #24242c;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
header a{ color:#e8e8ee !important; }
header a:hover{ text-decoration:none !important; color:#fff !important; }
.menu{ gap:2px 10px !important; }

.gbtn{
  color:#d8d8e0 !important;
  font-weight:600 !important;
  border-radius:8px !important;
  padding:7px 11px !important;
  letter-spacing:-.01em;
  transition:background .14s, color .14s;
}
.gbtn:hover, .gruppe.open .gbtn{ background:rgba(255,255,255,.09) !important; color:#fff !important; }
.gbtn .pfeil{ opacity:.45 !important; }

.gmenu{
  background:#16161c !important;
  border:1px solid #2c2c36 !important;
  border-radius:12px !important;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.7) !important;
  padding:6px !important;
  min-width:224px !important;
  margin-top:6px;
}
/* Der Abstand von 6px oben darf die Maus nicht "verlieren": ohne diese
   unsichtbare Bruecke verlaesst der Zeiger auf dem Weg vom Gruppenknopf
   ins Menue kurz beide Flaechen, .gruppe:hover faellt weg und das Menue
   klappt wieder zu. Die Bruecke gehoert zum Menue und ueberdeckt die Luecke. */
.gmenu::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-7px;
  height:7px;
}
.gmenu a{
  border-radius:8px !important;
  padding:8px 11px !important;
  font-size:.93rem;
}
.gmenu a:hover{ background:rgba(255,255,255,.09) !important; }
.gmenu .trenner{ border-top:1px solid #2c2c36 !important; }
.gmenu .konto{ color:var(--grau-2) !important; }

/* aktive Seite: roter Akzent statt Gelb */
.gmenu a.aktiv{ background:rgba(200,16,46,.20) !important; color:#fff !important; box-shadow:inset 2px 0 0 var(--rot); }
.gbtn.aktiv{ background:rgba(255,255,255,.09) !important; color:#fff !important; box-shadow:inset 0 -2px 0 var(--rot) !important; }
a.top.aktiv{ text-decoration-color:var(--rot) !important; }
.ico{ opacity:.55 !important; }
.gbtn .ico, .gmenu a:hover .ico{ opacity:.8 !important; }

iframe{ background:var(--papier); }

/* ---------- Karten / Boxen ---------- */
.box, .k, .karte, .panel{
  background:var(--karte) !important;
  border:1px solid var(--linie) !important;
  border-radius:var(--radius-gross) !important;
  box-shadow:var(--schatten);
}
.box{ padding:14px 16px !important; }
.k{ padding:13px 15px !important; transition:border-color .15s, transform .15s, box-shadow .15s; }
a.k:hover{ border-color:var(--linie-2) !important; transform:translateY(-1px); box-shadow:0 1px 2px rgba(11,11,13,.05), 0 16px 30px -20px rgba(11,11,13,.5); }

.k .t{ color:var(--grau) !important; font-size:.72rem !important; font-weight:700 !important; letter-spacing:.09em !important; }
.k .z{ font-size:1.7rem !important; font-weight:800 !important; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.k .m{ color:var(--grau) !important; font-size:.84rem !important; }

/* Ampel-Kacheln: gedaempft statt grell */
.k.warn{ border-color:#e9d8a6 !important; background:var(--gelb-hell) !important; }
.k.rot { border-color:#f0c2c7 !important; background:var(--rot-hell) !important; }
.k.ok  { border-color:#c6e2d1 !important; background:var(--gruen-hell) !important; }

.box h2{ font-size:.95rem !important; letter-spacing:-.01em; margin-bottom:10px !important; }
.box h2 a{ color:var(--rot) !important; font-weight:600 !important; font-size:.79rem !important; }

/* ---------- Tabellen ---------- */
table{
  border-collapse:collapse !important;
  font-size:.9rem;
  background:transparent;
}
table, th, td{ border:none !important; }
th{
  background:transparent !important;
  color:var(--grau) !important;
  font-size:.72rem !important;
  font-weight:700 !important;
  letter-spacing:.07em;
  text-transform:uppercase;
  border-bottom:1px solid var(--linie-2) !important;
  padding:7px 8px !important;
  text-align:left;
  white-space:nowrap;
}
td{
  border-bottom:1px solid var(--linie) !important;
  padding:7px 8px !important;
  vertical-align:middle;
}
tr:last-child td{ border-bottom:none !important; }
tbody tr:hover td{ background:rgba(11,11,13,.022) !important; }
td.r, th.r{ text-align:right !important; font-variant-numeric:tabular-nums; }
.leer{ color:var(--grau-2) !important; }

/* Tabellen ausserhalb einer Box bekommen einen eigenen Rahmen */
body > table, .container > table, .wrap > table{
  background:var(--karte) !important;
  border:1px solid var(--linie) !important;
  border-radius:var(--radius-gross) !important;
  box-shadow:var(--schatten);
  overflow:hidden;
  width:100%;
}

/* ---------- Formulare ---------- */
input[type="text"], input[type="number"], input[type="password"], input[type="date"],
input[type="search"], input[type="email"], input[type="file"], select, textarea{
  font-family:var(--schrift) !important;
  font-size:.93rem !important;
  color:var(--text) !important;
  background:var(--karte) !important;
  border:1px solid var(--linie-2) !important;
  border-radius:8px !important;
  padding:7px 10px !important;
  transition:border-color .14s, box-shadow .14s;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--rot) !important;
  box-shadow:0 0 0 3px rgba(200,16,46,.12) !important;
  outline:none !important;
}
label{ font-size:.86rem; color:var(--text); }

button, input[type="submit"], .btn, a.btn{
  font-family:var(--schrift) !important;
  font-size:.9rem !important;
  font-weight:650 !important;
  letter-spacing:-.01em;
  background:var(--ink) !important;
  color:#fff !important;
  border:1px solid var(--ink) !important;
  border-radius:8px !important;
  padding:8px 15px !important;
  cursor:pointer;
  transition:background .14s, border-color .14s, transform .14s, color .14s;
  text-decoration:none !important;
  display:inline-block;
}
button:hover, input[type="submit"]:hover, .btn:hover, a.btn:hover{
  background:var(--ink-3) !important; border-color:var(--ink-3) !important; transform:translateY(-1px);
}
button:disabled, input[type="submit"]:disabled{
  background:var(--linie) !important; border-color:var(--linie) !important;
  color:var(--grau-2) !important; cursor:not-allowed; transform:none;
}
/* sekundaere Schaltflaechen der App */
.sek, .sekundaer, .btn.sek, a.sek, .links a.sek{
  background:var(--karte) !important;
  color:var(--text) !important;
  border:1px solid var(--linie-2) !important;
}
.sek:hover, .sekundaer:hover, .links a.sek:hover{ border-color:var(--ink) !important; background:var(--karte) !important; }
/* Zeilen-Aktionen in Tabellen (loeschen, entfernen, bearbeiten) bleiben
   zurueckhaltend — sonst dominieren 50 schwarze "loeschen"-Knoepfe die Seite.
   Erst beim Darueberfahren werden sie rot. */
td button, td input[type="submit"], td .btn, th button{
  background:transparent !important;
  color:var(--grau) !important;
  border:1px solid var(--linie-2) !important;
  padding:4px 10px !important;
  font-size:.83rem !important;
  font-weight:600 !important;
}
td button:hover, td input[type="submit"]:hover, td .btn:hover, th button:hover{
  color:var(--rot) !important;
  border-color:var(--rot) !important;
  background:var(--rot-hell) !important;
  transform:none;
}

/* Anbieter-Schaltflaechen behalten ihre Erkennungsfarbe */
.btn.google{ background:#1a73e8 !important; border-color:#1a73e8 !important; }
.btn.google:hover{ background:#1765cc !important; border-color:#1765cc !important; }

/* Loeschen/Abbrechen bleiben als Warnung erkennbar */
button.loeschen, .btn.loeschen, .gefahr, input[type="submit"].loeschen{
  background:var(--rot) !important; border-color:var(--rot) !important;
}
button.loeschen:hover, .btn.loeschen:hover, .gefahr:hover{ background:var(--rot-2) !important; border-color:var(--rot-2) !important; }

.center-form{
  background:var(--karte) !important;
  border:1px solid var(--linie) !important;
  border-radius:var(--radius-gross) !important;
  box-shadow:var(--schatten) !important;
}
.action-buttons{ gap:8px !important; }

.links a{ background:var(--ink) !important; border-radius:8px !important; padding:8px 13px !important; font-weight:600; }

/* ---------- Badges, Hinweise ---------- */
.badge, .warnbadge{
  display:inline-block;
  border-radius:999px !important;
  padding:2px 9px !important;
  font-size:.73rem !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  background:var(--linie) !important;
  color:var(--text) !important;
}
.badge.p, .badge.offen{ background:var(--gelb-hell) !important; color:var(--gelb) !important; }
.badge.f, .badge.ok  { background:var(--gruen-hell) !important; color:var(--gruen) !important; }
.warnbadge{ background:var(--rot-hell) !important; color:var(--rot-2) !important; }
header .badge{ background:var(--rot) !important; color:#fff !important; }

.hint, .hinweis, .sub, .info-text{ color:var(--grau) !important; font-size:.86rem !important; }
.error{ color:var(--rot-2) !important; background:var(--rot-hell); border:1px solid #f0c2c7;
        border-radius:8px; padding:9px 12px; text-align:left !important; font-size:.9rem; }

/* Trefferlisten / Suchfelder (Befuellen, Zuordnung) */
.suchfeld{ border-radius:8px !important; }
.treffer{ border:1px solid var(--linie) !important; border-radius:10px !important; background:var(--karte) !important; }
.nr{ color:var(--grau) !important; font-variant-numeric:tabular-nums; }

/* Balken (Auswertung, Umfragen)
   ACHTUNG: .bal ist die Schiene, .bal i die Fuellung.
   .bar ist in snack_auswertung.php eine reine Breitenangabe (width:45%)
   und wird bewusst NICHT angefasst. */
.bal{ background:var(--linie) !important; border-radius:999px !important; height:10px !important; }
.bal i{ background:var(--ink) !important; }
/* Verlaufs-Saeulen (Check-ins je Tag / Uhrzeit) */
.verlauf div{ background:var(--ink) !important; border-radius:3px 3px 0 0 !important; }

/* ---------- Login (login.php) ---------- */
body.login-seite, body:has(> form[action="authenticate.php"]){
  background:var(--ink) !important;
}
form[action="authenticate.php"]{
  background:var(--karte) !important;
  border:1px solid var(--linie) !important;
  border-radius:16px !important;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6) !important;
  padding:28px 26px !important;
  min-width:300px;
}
form[action="authenticate.php"] h2{
  text-align:center !important;
  font-size:1.2rem !important;
  margin-bottom:16px !important;
}
form[action="authenticate.php"] input[type="text"],
form[action="authenticate.php"] input[type="password"]{ width:100% !important; }
form[action="authenticate.php"] input[type="submit"]{
  width:100% !important;
  background:var(--rot) !important;
  border-color:var(--rot) !important;
  padding:10px !important;
  margin-top:6px;
}
form[action="authenticate.php"] input[type="submit"]:hover{
  background:var(--rot-2) !important; border-color:var(--rot-2) !important;
}

/* ---------- Kleinigkeiten ---------- */
hr{ border:none; border-top:1px solid var(--linie); margin:18px 0; }
code, pre{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:#cfcfd6; border-radius:9px; border:3px solid var(--papier); }
::-webkit-scrollbar-thumb:hover{ background:#b6b6bf; }

@media (max-width:700px){
  body{ font-size:14.5px; }
  .container, .wrap{ padding-left:12px !important; padding-right:12px !important; }
  th, td{ padding:6px !important; }
}