/* ==========================================================================
   net97 Portal - gemeinsames Design
   Tokens und Komponenten an hosting.net97.de angelehnt.
   Wird von rechner.php, admin/login.php und admin/dashboard.php genutzt.
   ========================================================================== */

:root{
  --red:#c8102e; --red-dark:#a20d25; --red-soft:#fdecef;
  --ink:#26262b; --grey:#54555a; --muted:#767b85; --body:#4b5563;
  --bg:#ffffff; --soft:#f6f7f9; --soft2:#eceef2; --border:#e4e7ec;
  --zebra:#f4f6f8;   /* jede zweite Tabellenzeile - sichtbar, aber ruhig */
  --ok:#0e9f6e; --ok-soft:#e7f7f0; --warn:#b45309; --warn-soft:#fef6e7;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.05);
  --shadow-md:0 6px 18px -6px rgba(16,24,40,.12),0 2px 6px rgba(16,24,40,.05);
  --shadow-lg:0 22px 48px -16px rgba(16,24,40,.22);
  --radius:18px; --radius-sm:11px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --maxw:1160px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--body);background:var(--bg);line-height:1.6;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{color:var(--ink);line-height:1.15;letter-spacing:-.02em;font-weight:800}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.muted{color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--red);background:var(--red-soft);
  padding:6px 13px;border-radius:100px}

/* ---------------------------------------------------------------- Header + Menü */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border)}
.hdr{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.hdr-l{display:flex;align-items:center;gap:20px;min-width:0}
.logo-link{flex-shrink:0;display:inline-flex;align-items:center}
.logo{height:34px;width:auto;display:block;flex-shrink:0}
.nav{display:flex;align-items:center;gap:20px}
.nav a{font-weight:550;font-size:15px;color:var(--grey);transition:color .15s;
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--red)}
.nav a.aktiv{color:var(--ink);font-weight:700;border-bottom-color:var(--red)}
/* Symbol-Links (Zahnrad, Rechner) */
.nav a.ico,.hdr-r a.ico{display:inline-flex;align-items:center;justify-content:center;
  color:var(--grey);padding:7px;border-radius:9px;border-bottom:0}
.nav a.ico:hover,.hdr-r a.ico:hover{color:var(--red);background:var(--red-soft)}
.nav a.ico.aktiv{color:var(--red);background:var(--red-soft)}
.hdr-r{display:flex;align-items:center;gap:10px}
.hdr-user{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);white-space:nowrap}
.hdr-user strong{color:var(--ink)}
.bereich{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--red);background:var(--red-soft);padding:3px 9px;border-radius:100px}
@media(max-width:760px){
  .hdr{height:auto;padding:12px 0;flex-wrap:wrap}
  .hdr-l{flex-wrap:wrap;gap:14px}
  .nav{gap:16px;font-size:14px}
  .hdr-user{display:none}
}

/* ---------------------------------------------------------------- Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:inherit;
  font-weight:650;font-size:15px;padding:12px 20px;border-radius:100px;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease,border-color .2s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 20px -8px rgba(200,16,46,.55)}
.btn-primary:hover{background:var(--red-dark)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--border)}
.btn-ghost:hover{border-color:#c7ccd4;background:var(--soft)}
.btn-sm{padding:8px 15px;font-size:14px}

/* ---------------------------------------------------------------- Flächen */
.section{padding:52px 0 72px}
.section-soft{background:var(--soft)}
.karte{background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow)}

/* ---------------------------------------------------------------- Kacheln */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px}
.kachel{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:16px 18px;box-shadow:var(--shadow)}
.kachel .titel{color:var(--muted);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.05em;font-weight:700;margin-bottom:3px}
.kachel .wert{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.15}
.kachel .fuss{color:var(--muted);font-size:12.5px;margin-top:3px}
.pos{color:var(--ok)} .neg{color:var(--red)}

/* ---------------------------------------------------------------- Tabellen */
.tabelle{background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow-x:auto;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:700;background:var(--soft)}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Zebra: jede zweite Zeile leicht grau, damit das Auge in breiten Listen
   nicht verrutscht. Auf td statt tr, weil ein Hintergrund auf tr von
   Zellen-Hintergruenden ueberdeckt wuerde. Erste Zeile bleibt weiss -
   so hebt sich der graue Kopf weiterhin ab. */
/* Tabellen mit ausklappbaren Detailzeilen sind ausgenommen - dort wuerden die
   versteckten Zeilen mitzaehlen und die Abwechslung verschieben; die vergeben
   ihre Streifen per Klasse .zeile-b selbst. */
table:not(.mit-detailzeilen) tbody tr:nth-child(even) td{background:var(--zebra)}
table.mit-detailzeilen tbody tr.zeile-b > td{background:var(--zebra)}
tbody tr:last-child td{border-bottom:0}
tfoot td{font-weight:800;color:var(--ink);border-top:2px solid var(--ink);border-bottom:0;
  background:var(--soft)}

/* ---------------------------------------------------------------- Status-Pills */
.pill{display:inline-block;padding:2px 10px;border-radius:100px;font-size:12px;font-weight:700}
.pill-ok{background:var(--ok-soft);color:var(--ok)}
.pill-stop{background:var(--red-soft);color:var(--red)}
.pill-neutral{background:var(--soft2);color:var(--grey)}

/* ---------------------------------------------------------------- Formulare */
.feld label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.feld input{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;
  font:inherit;color:var(--ink);background:#fff}
.feld input:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 3px var(--red-soft)}
.feld .u{font-size:12.5px;color:var(--muted);margin-top:5px}

/* ---------------------------------------------------------------- Meldungen */
.hinweis{background:#fff;border:1px solid var(--border);border-left:3px solid var(--red);
  border-radius:var(--radius-sm);padding:14px 16px;font-size:14px;color:var(--body);
  box-shadow:var(--shadow)}
.fehlerbox{background:var(--red-soft);border:1px solid #ffd0d7;color:var(--red-dark);
  padding:14px 16px;border-radius:var(--radius-sm);font-weight:600}

/* ---------------------------------------------------------------- Reiter (Ordner) */
/* Karteireiter fuer lange Einstellungsseiten. Bewusst echte Links mit
   ?reiter=... statt JavaScript: der Zustand steht in der Adresszeile, bleibt
   nach dem Speichern erhalten und laesst sich als Lesezeichen ablegen. */
.reiter{display:flex;gap:2px;flex-wrap:wrap;margin:0 0 20px;
  border-bottom:1px solid var(--border)}
.reiter-knopf{padding:10px 18px;font-size:14px;font-weight:600;color:var(--muted);
  border:1px solid transparent;border-bottom:0;border-radius:10px 10px 0 0;
  margin-bottom:-1px;transition:color .15s,background .15s}
.reiter-knopf:hover{color:var(--ink);background:var(--soft)}
.reiter-knopf.aktiv{color:var(--red);background:#fff;border-color:var(--border);
  border-bottom:1px solid #fff}
@media(max-width:560px){.reiter-knopf{flex:1;text-align:center;padding:10px 8px}}

/* ---------------------------------------------------------------- Rückfrage-Dialog */
/* Ersatz für window.confirm() - siehe assets/dialog.js. Systemfenster lassen
   sich nicht gestalten und werden als Fremdkörper weggeklickt statt gelesen. */
.dlg-hinter{position:fixed;inset:0;z-index:1200;background:rgba(16,24,40,.45);
  display:grid;place-items:center;padding:22px}
.dlg{width:min(430px,100%);background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:24px}
.dlg-titel{font-size:18px;margin:0 0 8px}
.dlg-text{font-size:14.5px;color:var(--body);line-height:1.55;margin:0 0 20px}
.dlg-knoepfe{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.dlg-gefahr{background:var(--red);border-color:var(--red)}
.dlg-gefahr:hover{background:var(--red-dark)}

/* ---------------------------------------------------------------- Warn-Details */
/* Zusatzangaben unter einer Warnung im Dashboard: Postfach, Profil, Zeitpunkte. */
.warn-detail{margin-top:6px;padding:8px 11px;background:var(--soft);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:12.5px;line-height:1.55;color:var(--ink)}
.warn-detail-l{color:var(--muted)}

/* ---------------------------------------------------------------- Ausklappbare Warnzeile */
.warn-auf{display:inline-flex;align-items:center;gap:5px;border:0;cursor:pointer;font:inherit}
.warn-pfeil{display:inline-block;font-size:10px;transition:transform .15s}
.warn-auf[aria-expanded="true"] .warn-pfeil{transform:rotate(180deg)}
.warn-zeile > td{padding-top:2px}

/* ---------------------------------------------------------------- Archivexport */
.export-block{margin-top:14px;border-top:1px solid var(--border);padding-top:12px}
.export-block > summary{cursor:pointer;font-weight:600;color:var(--ink);font-size:14px;
  list-style:none;display:inline-flex;align-items:center;gap:7px}
.export-block > summary::-webkit-details-marker{display:none}
.export-block > summary::before{content:"▸";color:var(--red);font-size:12px}
.export-block[open] > summary::before{content:"▾"}
.export-form input[type=date],.export-form input[type=text]{width:100%;padding:10px 12px;
  border:1.5px solid var(--border);border-radius:10px;font:inherit;color:var(--ink);background:#fff}