/* ders solution - Haus-Design. Einzige Farb- und Schriftquelle.
   Schrift wechseln = nur --font-display / --font-text hier ändern.

   Bebas Neue hat KEINE Kleinbuchstaben und nur ein Gewicht.
   Deshalb: Display nur h1/h2, ab h3 schreibt DM Sans 700. Zahlen immer DM Sans. */

:root{
  /* --- Schrift --- */
  --font-display:"Bebas Neue","Haettenschweiler","Impact",sans-serif;
  --font-text:"DM Sans","Segoe UI",Arial,sans-serif;
  --font-mono:"DM Mono","Consolas",monospace;

  --size-xs:12px; --size-sm:13px; --size-base:14px; --size-md:16px;
  --size-lg:20px; --size-xl:24px; --size-2xl:34px; --size-3xl:46px;
  --lh-tight:1.05; --lh-normal:1.6;
  --ls-display:.02em;   /* Versalien brauchen Luft - positiv, nicht negativ */

  /* --- Farbe: Handlung + Bedeutung --- */
  --primary:#1565c0;      /* Klick, Verweis, Auswahl */
  --primary-2:#0aa3ff;    /* Glanzlicht, nie Text auf Weiß */
  --accent:#ff3d00;       /* NUR Marketing-CTA auf Dunkel */
  --danger:#d32f2f;       /* Schaden, Fehler, Löschen */
  --warn:#ed6c02;         /* fällig, läuft ab */
  --ok:#2e7d32;           /* erledigt, freigegeben */

  /* --- Heller Grund: Portal, Formulare, Tabellen, Bericht --- */
  --bg:#f6f8fa;
  --surface:#ffffff;
  --text:#0f1e28;
  --muted:#5a7180;
  --line:#dce4ea;
  --shadow:0 2px 8px rgba(15,30,40,.07);

  /* --- Maße --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:28px; --sp-7:40px; --sp-8:56px;
  --r-control:8px; --r-card:14px; --r-pill:999px;
  --wrap:1180px; --tap:44px;
}

/* --- Dunkler Grund: Landingpage, Hero, Film, Store-Bilder --- */
.auf-dunkel,[data-grund="dunkel"]{
  --bg:#09141b;
  --surface:rgba(255,255,255,.06);
  --text:#dce8ef;
  --muted:#9eb4c1;
  --line:rgba(255,255,255,.14);
  --shadow:0 24px 80px rgba(0,0,0,.36);
}

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-text); font-size:var(--size-base); line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
}

/* Display: nur kurze Titel. Kein text-transform - Bebas ist schon Versal. */
h1,h2{
  font-family:var(--font-display); font-weight:400;
  letter-spacing:var(--ls-display); line-height:var(--lh-tight);
  margin:0 0 var(--sp-3);
}
h1{font-size:var(--size-3xl)}
h2{font-size:var(--size-2xl)}

/* Ab h3 wieder Text-Schrift - sonst schreit das Formular den Nutzer an. */
h3,h4{
  font-family:var(--font-text); font-weight:700;
  letter-spacing:0; line-height:1.3; margin:0 0 var(--sp-2);
}
h3{font-size:var(--size-lg)} h4{font-size:var(--size-md)}

code,kbd,.mono,.ref{ font-family:var(--font-mono); font-size:var(--size-sm); }

/* Zahlen stehen untereinander - Gewichte, Beträge, Stunden. Nie in Bebas. */
td.zahl,th.zahl,.zahl,.kennzahl{
  font-family:var(--font-text); font-variant-numeric:tabular-nums;
}
td.zahl,th.zahl,.zahl{ text-align:right; }
.kennzahl{ font-weight:700; font-size:var(--size-xl); letter-spacing:-.01em; }

.knopf{
  font-family:var(--font-text); font-weight:700; font-size:var(--size-sm);
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-control); border:1px solid transparent;
  background:var(--primary); color:#fff; cursor:pointer; min-height:var(--tap);
}
.knopf--rand{ background:transparent; color:var(--text); border-color:var(--line); }
.knopf--gefahr{ background:var(--danger); }

.karte{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:var(--sp-5); box-shadow:var(--shadow);
}

.chip{
  display:inline-block; font-family:var(--font-text);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:5px 11px; font-size:var(--size-xs); text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted);
}
.chip--schaden{ color:var(--danger); border-color:var(--danger); }
.chip--faellig{ color:var(--warn);   border-color:var(--warn); }
.chip--fertig { color:var(--ok);     border-color:var(--ok); }

table{ width:100%; border-collapse:collapse; }
th{ font-family:var(--font-text); font-weight:700; color:var(--muted); font-size:var(--size-sm); text-align:left; }
th,td{ padding:var(--sp-3) var(--sp-2); border-bottom:1px solid var(--line); }

.inhalt{ max-width:var(--wrap); margin:0 auto; padding-block:var(--sp-6); padding-left:var(--sp-4); padding-right:var(--sp-4); }