/* CSE-Muster-Stylesheet — Startpunkt für jede neue Center-Web-App.
   Kopieren, {KOPF}/{KOPF_TEXT} setzen, app-eigene Regeln unten anhängen.
   Diese Tokens sind der Grund, warum die Apps wie eine Familie aussehen —
   also NICHT eigene Grautöne erfinden, sondern diese verwenden. */

:root {
  color-scheme: light;              /* nativer Datumswähler hell */

  /* Kopf: nach Themenbereich setzen (siehe SKILL.md „Kopf-Farbe")
     Finanzen #0e6f0e/#fff · Personendaten #a4262c/#fff
     Orga/Logistik #f2c200/#2b2200 · Rest #005a9e/#fff */
  --kopf: #005a9e;
  --kopf-text: #ffffff;

  /* Akzente (bleiben in ALLEN Apps gleich, unabhängig von der Kopf-Farbe) */
  --blau: #005a9e;
  --blau-hell: #0078d4;
  --rot: #d13438;
  --orange: #ca5010;
  --gelb: #eda100;
  --gruen: #107c10;
  --gruen-dunkel: #0b5c0b;   /* Hover Speichern: abdunkeln, nicht aufhellen */
  --grau: #8a8886;

  /* Flächen und Text */
  --hintergrund: #f3f2f1;
  --karte: #ffffff;
  --text: #201f1e;
  --text-leise: #605e5c;
  --rand: #e1dfdd;
  --schatten: 0 1px 4px rgba(0, 0, 0, .14);

  /* Eingabefelder liegen eine Spur UNTER der Karte und tragen einen deutlich
     kraeftigeren Rand - sonst verschwindet weiss auf weiss (Nutzer, 18.08.2026). */
  --feld: #ffffff;
  --feld-rand: #8a8886;
  --feld-hinweis: #605e5c;   /* Platzhalter-Text: die "leise" Textfarbe, keine neue Farbe */

  /* Tabellen */
  --gitter: #e8e6e3;
  --zebra: #faf9f8;
  --gruppe: #f0f6fb;
}

/* Dunkel — BEIDE Zweige pflegen: erzwungen … */
html[data-theme="dunkel"] {
  color-scheme: dark;
  --hintergrund: #1b1a19;
  --karte: #252423;
  --text: #f3f2f1;
  --text-leise: #a19f9d;
  --rand: #3b3a39;
  --schatten: 0 1px 5px rgba(0, 0, 0, .5);
  --rot: #ea6a6d;           /* dunkel: Rot aufhellen, sonst unlesbar */
  --feld: #454341;          /* dunkel klar UEBER der Karte, ins Graue geruecht */
  --feld-rand: #7d7975;
  --feld-hinweis: #a19f9d;
  --gelb: #c98500;
  --gitter: #34322f;
  --zebra: #2b2a29;
  --gruppe: #26313b;
}
/* … und nach Windows/Teams, solange nichts gewählt wurde.
   Fehlt dieser Zweig, wirkt der Knopf im Systemdunkel nicht. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="hell"]) {
    color-scheme: dark;
    --hintergrund: #1b1a19;
    --karte: #252423;
    --text: #f3f2f1;
    --text-leise: #a19f9d;
    --rand: #3b3a39;
    --schatten: 0 1px 5px rgba(0, 0, 0, .5);
    --rot: #ea6a6d;
    --feld: #454341;
    --feld-rand: #7d7975;
    --feld-hinweis: #a19f9d;
    --gelb: #c98500;
    --gitter: #34322f;
    --zebra: #2b2a29;
    --gruppe: #26313b;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  background: var(--hintergrund);
  color: var(--text);
}

/* ---------- Kopfzeile ---------- */
#kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--kopf); color: var(--kopf-text);
  position: sticky; top: 0; z-index: 20;
}
#kopf img { border-radius: 6px; }
#kopf-text { flex: 1; min-width: 0; }          /* schiebt die Knöpfe nach rechts */
#kopf h1 { margin: 0; font-size: 17px; font-weight: 600; }
#kopf-untertitel { font-size: 11px; opacity: .85; }

/* ---------- Knöpfe ---------- */
button { font-family: inherit; font-size: 13px; cursor: pointer; border-radius: 6px; border: 1px solid transparent; }
button.primaer { background: var(--blau-hell); color: #fff; border: none; padding: 8px 14px; font-weight: 600; }
button.primaer:hover { filter: brightness(1.1); }
button.primaer.gross { font-size: 15px; padding: 12px 22px; }
button.primaer:disabled { opacity: .55; cursor: default; }
button.leise { background: rgba(255, 255, 255, .12); color: inherit; border: none; padding: 7px 10px; }
#kopf button.leise { color: var(--kopf-text); }                       /* trägt die Kopf-Schriftfarbe */
main button.leise, main .chip:not(.aktiv) { background: var(--feld); border: 1px solid var(--feld-rand); color: var(--text); }
button.leise:hover { filter: brightness(1.15); background: rgba(128, 128, 128, .15); }

/* Farb-Konvention (Haus-Regel): die BESTÄTIGENDE Aktion grün, Abbrechen rot,
   Löschen/Gefahr kräftiges Rot. Neutrale Primäraktionen (Anmelden, „Neu",
   Filter) bleiben blau (.primaer) — also NICHT .primaer global grün färben. */
/* Alle drei tragen denselben 1.5px-Rand - sonst steht der randlose Knopf
   in der Popup-Fusszeile 3px niedriger als sein Nachbar. */
button.speichern { background: var(--gruen); color: #fff; border: 1.5px solid var(--gruen); padding: 8px 14px; font-weight: 600; }
button.speichern:hover { background: var(--gruen-dunkel); }
button.speichern:disabled { opacity: .55; cursor: default; }
button.abbrechen { background: transparent; border: 1.5px solid var(--rot); color: var(--rot); padding: 8px 14px; font-weight: 600; }
button.abbrechen:hover { background: rgba(209, 52, 56, .12); }
button.gefahr { background: var(--rot); border: 1.5px solid var(--rot); color: #fff; padding: 8px 14px; font-weight: 600; }
button.gefahr:hover { filter: brightness(1.08); }

/* ---------- Anmeldung ---------- */
#anmeldung { display: flex; justify-content: center; padding: 60px 16px; }
.anmelde-karte {
  background: var(--karte); border-radius: 12px; box-shadow: var(--schatten);
  padding: 36px 40px; text-align: center; max-width: 420px;   /* bleibt schmal */
}
.anmelde-karte h2 { margin: 14px 0 6px; }
.anmelde-karte p { color: var(--text-leise); }
.hinweis { color: var(--text-leise); font-size: 12px; }
.fehler { color: var(--rot); }

/* ---------- Hauptbereich ----------
   Tabellen/Listen: volle Breite. Kachel-Übersicht: max-width: 1080px; margin: 0 auto.
   Formular-App (ganze App ist eine Maske): max-width: 650px; margin: 0 auto.
   Das Element MUSS <main> heißen, sonst findet der ↔-Knopf es nicht. */
#haupt { max-width: none; padding: 14px 24px 60px; }

/* ---------- Karten-Liste ---------- */
.karte {
  background: var(--karte); border-radius: 10px; box-shadow: var(--schatten);
  padding: 10px 14px; margin-bottom: 8px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  border-left: 5px solid var(--grau);
}
.karte[data-farbe="rot"]    { border-left-color: var(--rot); }
.karte[data-farbe="orange"] { border-left-color: var(--orange); }
.karte[data-farbe="blau"]   { border-left-color: var(--blau-hell); }
.karte[data-farbe="gruen"]  { border-left-color: var(--gruen); }
/* Spalten wachsen mit, aber gedeckelt — sonst reißt die Zeile auseinander */
.k-spalte1 { flex: 2 1 340px; min-width: 180px; max-width: 620px; }
.k-spalte2 { flex: 2 1 300px; min-width: 160px; max-width: 560px; }
.k-spalte3 { flex: 1 1 220px; min-width: 100px; max-width: 460px; font-size: 12px; }
.k-badges  { flex: 0 0 auto; margin-left: auto; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.k-aktionen { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; }
.k-aktionen button { font-size: 12px; padding: 3px 9px; white-space: nowrap; }
.pille { border-radius: 12px; padding: 2px 10px; font-size: 11px; font-weight: 600; background: var(--grau); color: #fff; white-space: nowrap; }
.pille[data-farbe="rot"] { background: var(--rot); }
.pille[data-farbe="orange"] { background: var(--orange); }
.pille[data-farbe="blau"] { background: var(--blau-hell); }
.pille[data-farbe="gruen"] { background: var(--gruen); }
.badge { border-radius: 12px; padding: 2px 10px; font-size: 11px; background: var(--hintergrund); border: 1px solid var(--rand); color: var(--text-leise); white-space: nowrap; }

/* ---------- Tabelle ---------- */
.tabelle-huelle { overflow-x: auto; }      /* nötig, sonst sprengt eine breit gezogene Spalte die Seite */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 6px 10px; border-bottom: 1px solid var(--gitter); text-align: left; }
thead th { position: sticky; top: 0; background: var(--karte); z-index: 1; }
tbody tr:nth-child(even) { background: var(--zebra); }

/* ---------- Popup / Maske ---------- */
.popup-hintergrund {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.popup {
  background: var(--karte); border-radius: 10px; box-shadow: var(--schatten);
  width: 100%; max-width: 760px; max-height: 92vh;      /* Popups behalten ihre Breite */
  display: flex; flex-direction: column; overflow: hidden;
}
.popup-kopf { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--rand); }
.popup-kopf h2 { margin: 0; font-size: 16px; }
.popup-inhalt { padding: 14px 18px; overflow-y: auto; }
.popup-fuss { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--rand); }

/* ---------- Formularfelder ---------- */
.form-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.feld { display: flex; flex-direction: column; gap: 3px; }
.feld label { font-size: 12px; color: var(--text-leise); }   /* hierhin setzt cse-tasten.js die Nummer */
.feld input, .feld select, .feld textarea {
  font-family: inherit; font-size: 14px; padding: 7px 10px;
  border: 1px solid var(--feld-rand); border-radius: 6px;
  background: var(--feld); color: var(--text);
}
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--feld-aktiv, #d9a300); }
.feld.breit { grid-column: 1 / -1; }

/* Platzhalter (Haus-Regel): grauer Hinweistext im leeren Feld, kursiv.
   KEIN Ersatz fuers <label> - der Hinweis verschwindet beim Tippen und wird
   nicht mitgesendet. opacity: 1, weil Firefox sonst zusaetzlich aufhellt. */
input::placeholder, textarea::placeholder {
  color: var(--feld-hinweis);
  font-style: italic;
  opacity: 1;
}
/* contenteditable kennt kein placeholder: Hinweis in data-hinweis legen.
   Beim Leeren per Skript kein <br> stehen lassen, sonst greift :empty nicht. */
[contenteditable][data-hinweis]:empty::before {
  content: attr(data-hinweis);
  color: var(--feld-hinweis);
  font-style: italic;
  pointer-events: none;
}

/* ---------- Fußzeile ---------- */
.fuss { padding: 14px 24px; color: var(--text-leise); font-size: 11px; }

/* ---------- App-eigene Handy-Regeln ----------
   /shared/cse-mobil.js deckt die Haus-Muster oben bereits ab.
   Hier NUR ergänzen, was diese App zusätzlich an eigenen Bauteilen hat. */
@media (max-width: 640px) {
  #haupt { padding: 12px 12px 40px; }
}


/* Nur die eigenstaendige App ist schmal - im Portal gilt dessen Breite. */
main { max-width: 860px; margin: 0 auto; }