/* =========================================================
   main.css
   Basis-Styles, Komponenten, Tabellen, Dark Mode, Print
   ========================================================= */

/* ---------- Design-Tokens (Light) ---------- 
:root{
  --bg:#f6f8fc; 
  --card:#fff; 
  --muted:#667788; 
  --text:#0e1320;

  --accent:#0b6bcb; 
  --accent-weak:#e7f1ff; 
  --ok:#1e9e74; 
  --err:#d64545;

  --border:rgba(0,0,0,.14); 
  --shadow:0 10px 30px rgba(10,20,40,.08);

  color-scheme: light;
} */

/* ---------- Reset & Grundlayout ---------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background:linear-gradient(180deg,#f8fbff 0%,#eef2f8 100%);
  color:var(--text);
  font:14px/1.5 system-ui, Segoe UI, Roboto, Arial, sans-serif;
}
.container{ max-width:1200px; margin:9px auto; padding:0 16px; }
.header{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:16px; margin-bottom:5px;
}
.brand{ display:flex; flex-direction:column; gap:4px; }
.brand h1{ margin:0; font-weight:700; letter-spacing:.4px; }
.brand small{ color:var(--muted); }
.logo{
  width:96px; height:96px; border-radius:16px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--border); box-shadow:var(--shadow);
}
.header .right{ text-align:right; color:var(--muted); font-weight:600; }

/* ---------- Hilfsklassen ---------- */
.meta{ color:var(--muted); font-size:12px; }
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; background:var(--accent-weak); color:#0b4a9a; font-size:12px; margin-left:6px; }
.right, .t-right{ text-align:right; }
.muted{ color:var(--muted); }
.strong{ font-weight:700; }
.borderR{ border-right:1px solid var(--border); } /* Standard 1px Trenner */
.borderR2{ border-right:2px solid var(--border); } /* Optional stärkerer Trenner */

/* ---------- Karten ---------- */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow); padding:18px;
}

/* ---------- Formular ---------- */
.form-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr) 160px; /* 4 Felder + Buttonspalte */
  gap:10px; align-items:end;
}
label{ font-weight:650; color:#1f2e45; }
input[type=date], input[type=time]{
  width:100%; padding:9px 10px; border:1px solid var(--border);
  border-radius:10px; background:#fff; color:var(--text);
}
input[type=date]:focus, input[type=time]:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(11,107,203,.14); outline:none;
}

/* Tastaturfokus sichtbar (A11y) */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---------- Buttons ---------- */
.btn{
  appearance:none; border:1px solid var(--border); background:#fff; color:var(--text);
  padding:10px 14px; border-radius:10px; font-weight:650; cursor:pointer;
}
.btn:hover{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(11,107,203,.15); }
.btn-primary{ background:var(--accent); color:#fff; border-color:transparent; }
.btn-primary:hover{ box-shadow:0 0 0 4px rgba(11,107,203,.2); }

/* ---------- Flash-Messages ---------- */
.flash{ margin:10px 0 0; padding:10px 12px; border-radius:10px; border:1px solid var(--border); }
.flash.err{ background:#fdecec; border-color:#f2b9b9; }
.flash.ok{  background:#edf9f4; border-color:#b7ead7; }

/* ---------- Tabellen ---------- */
.table{
  width:100%; max-width:100%;
  border-collapse:collapse; margin-top:10px;
  background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.table th, .table td{
  padding:10px 8px; border-bottom:1px solid var(--border); vertical-align:top;
  white-space:normal; word-break:break-word; overflow-wrap:anywhere;
}
.table th{ background:#f4f7fb; color:#41556b; text-align:left; font-weight:700; }
.zebra tr:nth-child(even) td{ background:#fafbfd; }

/* Wrapper, falls die Tabelle mehr Spalten hat als Platz */
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- Chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  background:#f3f6fb; border:1px solid var(--border); border-radius:999px;
  padding:2px 8px; color:#41556b; font-size:12px;
}

/* ---------- Details/Accordion ---------- */
.details-box{ border:1px dashed var(--border); border-radius:10px; padding:10px; margin:8px 0; background:#fcfdff; }
details.acc{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow); margin-top:14px; overflow:hidden;
}
details.acc > summary{
  list-style:none; cursor:pointer; padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700; color:#1f2e45; background:#f4f7fb; border-bottom:1px solid var(--border);
}
details.acc > summary::-webkit-details-marker{ display:none; }
details.acc > summary .hint{ font-weight:500; color:#667788; font-size:12px; margin-left:8px; }
details.acc > summary .chev{ transition:transform .2s ease; font-size:14px; opacity:.7; }
details.acc[open] > summary .chev{ transform:rotate(90deg); }
details.acc .content{ padding:16px 16px 18px; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .form-grid{ grid-template-columns:1fr 1fr; }
}
/* Responsive Header-Grid */
@media (max-width: 900px) {
  .header { grid-template-columns: 1fr auto; }
  .header .right { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 600px) {
  .header { grid-template-columns: 1fr; row-gap: 8px; }
  .logo { justify-self: start; width:72px; height:72px; }
}

/* =========================================================
   Dark Mode – automatisch & manuell
   ========================================================= */

/* Light explizit (manuelles Erzwingen) */
html.theme-light{
  --bg:#f6f8fc; --card:#fff; --muted:#667788; --text:#0e1320;
  --accent:#0b6bcb; --accent-weak:#e7f1ff; --ok:#1e9e74; --err:#d64545;
  --border:rgba(0,0,0,.14); --shadow:0 10px 30px rgba(10,20,40,.08);
  color-scheme: light;
}


/* Dark explizit (manuelles Erzwingen) */
html.theme-dark{
  --bg:#0b1220; --card:#101a2b; --muted:#9ab0c7; --text:#e7eef7;
  --accent:#4ea1ff; --accent-weak:#122a4a; --ok:#2fc89a; --err:#ff6b6b;
  --border:rgba(255,255,255,.18); --shadow:0 10px 30px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* Tokens nur anwenden, wenn NICHT theme-light erzwungen ist */
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) {
    --bg:#0b1220; --card:#101a2b; --muted:#9ab0c7; --text:#e7eef7;
    --accent:#4ea1ff; --accent-weak:#122a4a; --ok:#2fc89a; --err:#ff6b6b;
    --border:rgba(255,255,255,.18); --shadow:0 10px 30px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

/* Komponenten-Tuning nur anwenden, wenn NICHT theme-light erzwungen ist */
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) body { 
    background: linear-gradient(180deg, #0b1220 0%, #0a0f1b 100%) !important; 
    color: var(--text); 
  }
  html:not(.theme-light) .card,
  html:not(.theme-light) details.acc { background: var(--card); border-color: var(--border); box-shadow: var(--shadow); }
  html:not(.theme-light) .logo { background: var(--card); border-color: var(--border); }
  html:not(.theme-light) .meta,
  html:not(.theme-light) .brand small { color: var(--muted); }

  /* Formulare */
  html:not(.theme-light) input[type="date"],
  html:not(.theme-light) input[type="time"] { background:#0c1627; color:var(--text); border:1px solid var(--border); }
  html:not(.theme-light) input[type="date"]:focus,
  html:not(.theme-light) input[type="time"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(78,161,255,.20); }

  /* Buttons */
  html:not(.theme-light) .btn { background: transparent; color: var(--text); border-color: var(--border); }
  html:not(.theme-light) .btn:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(78,161,255,.18); }
  html:not(.theme-light) .btn-primary { background: var(--accent); color:#08111e; border-color: transparent; }
  html:not(.theme-light) .btn-primary:hover { box-shadow: 0 0 0 4px rgba(78,161,255,.22); }

  /* Flash & Tabellen */
  html:not(.theme-light) .flash.err { background: rgba(214,69,69,.12); border-color:#8f3030; }
  html:not(.theme-light) .flash.ok  { background: rgba(31,158,116,.12); border-color:#2a8268; }
  html:not(.theme-light) .table { background: var(--card); border-color: var(--border); }
  html:not(.theme-light) .table th { background:#14233a; color: var(--text); }
  html:not(.theme-light) .zebra tr:nth-child(even) td { background:#0f1c31; }
  html:not(.theme-light) .details-box { background:#0c1a2c; border-color: var(--border); }

  /* Badge/Chips/Accordion */
  html:not(.theme-light) .badge { background: var(--accent-weak); color:#b3d4ff; }
  html:not(.theme-light) .chip  { background:#0f1c31; border-color: var(--border); color: var(--muted); }
  html:not(.theme-light) details.acc > summary { background:#14233a; border-bottom:1px solid var(--border); color: var(--text); }
}

/* Manuelles Dark (greift immer, unabhängig von System) */
html.theme-dark body{ background:linear-gradient(180deg,#0b1220 0%, #0a0f1b 100%) !important; color:var(--text); }
html.theme-dark .card,
html.theme-dark details.acc{ background:var(--card); border-color:var(--border); box-shadow:var(--shadow); }
html.theme-dark .logo{ background:var(--card); border-color:var(--border); }
html.theme-dark .meta, html.theme-dark .brand small{ color:var(--muted); }

html.theme-dark input[type="date"],
html.theme-dark input[type="time"]{ background:#0c1627; color:var(--text); border:1px solid var(--border); }
html.theme-dark input[type="date"]:focus,
html.theme-dark input[type="time"]:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(78,161,255,.20); }

html.theme-dark .btn{ background:transparent; color:var(--text); border-color:var(--border); }
html.theme-dark .btn:hover{ border-color:var(--accent); box-shadow: 0 0 0 3px rgba(78,161,255,.18); }
html.theme-dark .btn-primary{ background:var(--accent); color:#08111e; border-color:transparent; }
html.theme-dark .btn-primary:hover{ box-shadow: 0 0 0 4px rgba(78,161,255,.22); }

html.theme-dark .flash.err{ background:rgba(214,69,69,.12); border-color:#8f3030; }
html.theme-dark .flash.ok{  background:rgba(31,158,116,.12); border-color:#2a8268; }

html.theme-dark .table{ background:var(--card); border-color:var(--border); }
html.theme-dark .table th{ background:#14233a; color:var(--text); }
html.theme-dark .zebra tr:nth-child(even) td{ background:#0f1c31; }
html.theme-dark .details-box{ background:#0c1a2c; border-color:var(--border); }

html.theme-dark .badge{ background:var(--accent-weak); color:#b3d4ff; }
html.theme-dark .chip{ background:#0f1c31; border-color:var(--border); color:var(--muted); }

html.theme-dark details.acc > summary{ background:#14233a; border-bottom:1px solid var(--border); color:var(--text); }

/* Light hart setzen, wenn theme-light aktiv ist (gute Lesbarkeit) */
html.theme-light body {
  background: linear-gradient(180deg, #f8fbff 0%, #eef2f8 100%) !important;
  color: var(--text);
}
html.theme-light input[type="date"],
html.theme-light input[type="time"] {
  background:#fff; color:#0e1320; border:1px solid var(--border);
}
html.theme-light input[type="date"]:focus,
html.theme-light input[type="time"]:focus {
  border-color: var(--accent); box-shadow:0 0 0 3px rgba(11,107,203,.14);
}

/* =========================================================
   Sticky Footer + Sections
   ========================================================= */
.page {
  min-height: calc(100vh - 14px); /* 14px Luft bei kurzen Seiten */
  display: flex;
  flex-direction: column;
}
.site-footer { margin-top: auto; }
.section + .section { margin-top: 5px; }

/* =========================================================
   Print (A4 hoch) – bleibt hell + Footer-Fix
   ========================================================= */
@media print{
  :root, html.theme-dark, html.theme-light{ color-scheme: light; }
  body{ background:#fff !important; }
  button, .btn{ display:none !important; }
  .card, .acc, .table{ box-shadow:none !important; }
  .page { min-height: auto !important; }
  .site-footer { margin-top: 0 !important; }
  @page{ size:A4 portrait; margin:15mm; }
}

/* externe Links leicht markieren */
a.ext::after {
  content: " ↗";
  font-size: .9em;
  opacity: .7;
}

/* === Proto Utilities & Modifiers (preview) === */
.ml-2 { margin-left: 8px; }                 /* 8px linker Außenabstand */
.img-fluid { display:block }  /* responsive Bilder */
.img-hero { width: clamp(240px, 80%, 720px); height:auto; display:block; }
.w-80p { max-width: 80%; }                  /* max. Breite 80% */
.btn--plain { border: none; box-shadow: none; } /* Button ohne Rand/Schatten */

.theme-dark label[for="von"],
.theme-dark label[for="bis"] {
  color: var(--fg, #fff) !important;
}