@import url('fonts.css');

:root{
  /* Markenpalette */
  --accent: #E3010F;
  --accent-ink: #ffffff;
  --accent-dim: #f8d3d5;
  /* abgedunkeltes Rot fuer Text auf --accent-dim (4,6:1) */
  --accent-tief: #c2010d;
  --ink: #191919;
  --ink-dim: #434343;
  /* erreicht 4.7:1 auch auf dem hellen Seitenhintergrund */
  --ink-faint: #6b6b75;
  --line: #dcdad3;
  --line-soft: #eae8e2;
  --bg: #F3F2F0;
  --bg-sage: #DFE8E5;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --ok: #2f7a4f;
  --ok-bg: #e3f1e8;
  --warn: #b5680a;
  --warn-bg: #fbead2;
  --err: #c41220;
  --err-bg: #fbe1e2;
  --focus: #0b6ea8;
  --shadow: 0 1px 2px rgba(25,25,25,.06), 0 4px 16px rgba(25,25,25,.06);
  --shadow-lg: 0 8px 30px rgba(25,25,25,.12);
  --radius: 10px;
  --radius-sm: 6px;
  --sans: 'Lato', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --ink: #F1EFEA;
    --ink-dim: #C7C4BC;
    --ink-faint: #9d9a92;
    --line: #3a3936;
    --line-soft: #2b2a28;
    --bg: #17181a;
    --bg-sage: #1f2624;
    --surface: #201f1d;
    --surface-raised: #262523;
    --accent: #ff4a4a;
    --accent-ink: #17181a;
    --accent-dim: #3a1e20;
    --accent-tief: #ff8080;
    --ok: #6fbf8f;
    --ok-bg: #1c2c22;
    --warn: #e0a752;
    --warn-bg: #332411;
    --err: #ff6b6b;
    --err-bg: #351417;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 20px rgba(0,0,0,.35);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ink: #F1EFEA; --ink-dim: #C7C4BC; --ink-faint: #9d9a92;
  --line: #3a3936; --line-soft: #2b2a28; --bg: #17181a; --bg-sage: #1f2624;
  --surface: #201f1d; --surface-raised: #262523;
  --accent: #ff4a4a; --accent-ink: #17181a; --accent-dim: #3a1e20; --accent-tief: #ff8080;
  --ok: #6fbf8f; --ok-bg: #1c2c22; --warn: #e0a752; --warn-bg: #332411;
  --err: #ff6b6b; --err-bg: #351417;
}
:root[data-theme="light"]{
  --ink: #191919; --ink-dim: #434343; --ink-faint: #6b6b75;
  --line: #dcdad3; --line-soft: #eae8e2; --bg: #F3F2F0; --bg-sage: #DFE8E5;
  --surface: #FFFFFF; --surface-raised: #FFFFFF;
  --accent: #E3010F; --accent-ink: #ffffff; --accent-dim: #f8d3d5; --accent-tief: #c2010d;
  --ok: #2f7a4f; --ok-bg: #e3f1e8; --warn: #b5680a; --warn-bg: #fbead2;
  --err: #c41220; --err-bg: #fbe1e2;
}

*{ box-sizing:border-box; }

/* Das hidden-Attribut muss jede display-Regel schlagen. Ohne diese Zeile bleibt ein
   Element mit hidden sichtbar, sobald seine Klasse display setzt (etwa display:flex) -
   der Browser-Standard [hidden]{display:none} hat die schwaechere Spezifitaet. */
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-weight:900; letter-spacing:-.01em; margin:0; text-wrap:balance; }
a{ color:inherit; }
button{ font-family:var(--sans); }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
::-webkit-scrollbar{ height:10px; width:10px; }

.brandbar{
  height:4px; background:linear-gradient(90deg, var(--accent), var(--accent) 60%, var(--bg-sage));
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:var(--radius-sm); border:1px solid transparent;
  font-size:14.5px; font-weight:700; cursor:pointer; font-family:var(--sans);
  transition:filter .12s ease, transform .05s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-primary:disabled{ background:var(--ink-faint); cursor:default; filter:none; }
.btn-ghost{ background:transparent; color:var(--ink-dim); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-sage{ background:var(--bg-sage); color:var(--ink); }
.btn-sage:hover{ filter:brightness(0.97); }
.btn-sm{ padding:7px 12px; font-size:13px; }
.btn-block{ width:100%; }
.btn-icon{ padding:8px; }

.card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.field{ margin-bottom:16px; }
.field label{
  display:block; font-size:11.5px; color:var(--ink-dim); margin-bottom:6px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;
}
.field input, .field select, .field textarea{
  width:100%; background:var(--surface); border:1px solid var(--line); color:var(--ink);
  padding:11px 12px; border-radius:var(--radius-sm); font-size:15px; font-family:var(--sans);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--focus); outline-offset:0; border-color:var(--focus);
}
.hint{ font-size:12px; color:var(--ink-faint); margin-top:5px; }

.msg{ font-size:13px; margin-top:10px; font-family:var(--sans); line-height:1.5; }
.msg.ok{ color:var(--ok); }
.msg.err{ color:var(--err); }
.msg.warn{ color:var(--warn); }

.pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.2px; white-space:nowrap;
}
.pill-ok{ background:var(--ok-bg); color:var(--ok); }
.pill-warn{ background:var(--warn-bg); color:var(--warn); }
.pill-err{ background:var(--err-bg); color:var(--err); }
.pill-neutral{ background:var(--bg-sage); color:var(--ink-dim); }

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
thead th{
  text-align:left; padding:10px 12px; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--ink-faint); border-bottom:2px solid var(--line-soft); font-weight:700;
}
tbody td{ padding:11px 12px; border-bottom:1px solid var(--line-soft); font-variant-numeric:tabular-nums; }
tbody tr:hover{ background:var(--bg-sage); }

.empty{ text-align:center; padding:56px 20px; color:var(--ink-faint); }

.scroll-x{ overflow-x:auto; }

.skeleton{
  background:linear-gradient(90deg, var(--line-soft) 25%, var(--line) 37%, var(--line-soft) 63%);
  background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:var(--radius-sm);
}
@keyframes shimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}