/* ===== PRIVIA DESIGN: maximal lesbar, kontraststark, keine weiße Schrift auf hell ===== */
:root{
  /* Farben (WCAG-konform) */
  --bg:#ffffff;          /* Hintergrund hell */
  --fg:#0b1020;          /* Text sehr dunkel */
  --muted:#465268;       /* Sekundärtext */
  --border:#e7e9f2;      /* Linien/Border */
  --accent:#6d28d9;      /* Privia-Violett */
  --accent-2:#8b5cf6;    /* helleres Violett */
  --accent-contrast:#ffffff;
  --ok:#0f9b6e; --warn:#a66206; --danger:#c72e2e;
  --table:#f7f8fe;       /* Tabellenkopf */
  --chip:#f2f4f9;        /* Chips/Inputs */
  --focus:#0ea5e9;       /* Fokus-Ring */
  --radius:12px;
  --shadow:0 10px 24px rgba(13,20,40,.10);
  --shadow-strong:0 18px 48px rgba(13,20,40,.20);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c1222;        /* Hintergrund dunkel */
    --fg:#e6ebff;        /* Text sehr hell (nicht reinweiß) */
    --muted:#aab4d4; 
    --border:#1c2742;
    --accent:#8b5cf6; 
    --accent-2:#b39cff;
    --accent-contrast:#0b1020;
    --table:#101833;
    --chip:#131c34;
    --focus:#38bdf8;
    --shadow:0 10px 28px rgba(5,10,20,.35);
    --shadow-strong:0 22px 60px rgba(5,10,20,.55);
  }
}

/* Grundlayout & Typo – groß & ruhig */
html{scrollbar-gutter:stable}
html,body{
  background:var(--bg)!important;color:var(--fg)!important;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.55;
}
h1{font-size:1.8rem;margin:.3rem 0 .6rem;letter-spacing:.2px}
h2{font-size:1.35rem;margin:.4rem 0 .5rem}
h3{font-size:1.12rem;margin:.4rem 0 .4rem}
p{margin:.4rem 0 .8rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.navbar,.menu,.header{background:var(--bg)!important;border-bottom:1px solid var(--border)!important;backdrop-filter:saturate(1.1)}
#login_header_logo{max-height:64px;margin:12px 0}
.content,.login{max-width:1180px;margin-inline:auto;padding-inline:8px}

/* Formulare & Buttons – große Targets, klare Kontraste */
input,select,textarea{
  border-radius:var(--radius)!important;border:1px solid var(--border)!important;
  background:var(--chip)!important;color:var(--fg)!important;padding:.7rem .85rem!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
input:focus,select:focus,textarea:focus, a:focus, button:focus, .btn:focus{
  outline:3px solid var(--focus)!important; outline-offset:2px!important;
}
.btn,button,input[type=submit]{
  border-radius:var(--radius)!important;padding:.7rem 1.1rem!important;border:0!important;
  color:var(--accent-contrast)!important;
  background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;
  box-shadow:var(--shadow-strong); text-shadow:0 1px 0 rgba(0,0,0,.15);
}
.btn:hover{filter:brightness(.98)}
.btn.secondary, .btn.cancel{
  background:var(--chip)!important;color:var(--fg)!important;border:1px solid var(--border)!important;
  box-shadow:var(--shadow);
}

/* Tabellen – sticky head, zebra, große Zeilenhöhe */
.table{border-color:var(--border)!important}
.table th{
  background:var(--table)!important;color:var(--fg)!important;font-weight:700;position:sticky;top:0;z-index:2;
}
.table td,.table th{border-color:var(--border)!important}
.table tr:nth-child(even) td{background:color-mix(in srgb, var(--table) 30%, transparent)}

/* Chips/Badges */
.badge{display:inline-block;padding:.28rem .6rem;border-radius:999px;font-weight:700;
  background:var(--chip);border:1px solid var(--border);font-size:.78rem;color:var(--fg)}
.badge.ok{background:rgba(15,155,110,.12);border-color:rgba(15,155,110,.3);color:var(--ok)}
.badge.warn{background:rgba(166,98,6,.1);border-color:rgba(166,98,6,.28);color:var(--warn)}
.badge.danger{background:rgba(199,46,46,.12);border-color:rgba(199,46,46,.32);color:var(--danger)}

/* Cards/Alerts/Footer */
.alert{border-radius:var(--radius)!important;border:1px solid var(--border)!important;background:var(--chip)!important;box-shadow:var(--shadow)}
.footer{color:var(--muted)!important;border-top:1px solid var(--border)!important;padding:.8rem 0}

/* UI-Aufräumen */
a[href*="change-this-to-your.domain.tld"], a:contains("Auf Updates überprüfen"){display:none!important}

/* Sektionen visuell klarer */
.section, .content > div, .login > div{background:var(--bg);border:1px solid var(--border);
  border-radius:18px; padding:14px 16px; box-shadow:var(--shadow); margin:10px 0}

/* Fokus sichtbarer an Tabellenlinks */
.table a:focus{outline:3px solid var(--focus)!important;outline-offset:2px}

/* Sanfter Hero-Streifen im Login */
body:has(.login) .header{background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--bg)), var(--bg))!important}