@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');
:root {
  --primaer: #8FA68E;
  --sekundaer: #F3E9DD;
  --dunkel: color-mix(in srgb, var(--primaer) 70%, #000);
  --tint: color-mix(in srgb, var(--sekundaer) 55%, #fff);
  --ink: #3a3230;
  --quiet: #7a6f6a;
  --rand: #e6ddd4;
  --weiss: #ffffff;
  --warn: #c0392b;
  --ok: #2e7d32;
  --hinweis: #e67e22;
  --radius: 22px;
  --schatten: 0 14px 40px rgba(80, 50, 40, .10);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: "Nunito", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); font-size: 15px; line-height: 1.45;
  background: linear-gradient(135deg, var(--sekundaer) 0%, #fff 55%, color-mix(in srgb, var(--primaer) 22%, #fff) 100%) fixed; position: relative; }
body::after { content: ""; position: fixed; width: 520px; height: 520px; border-radius: 50%; background: var(--primaer); opacity: .12; right: -180px; bottom: -220px; z-index: 0; pointer-events: none; }
a { color: var(--dunkel); font-weight: 600; }
h1, h2, h3 { margin: 0 0 .5em; font-weight: 800; color: var(--dunkel); letter-spacing: -.01em; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; color: var(--ink); }

/* Kopf und Navigation */
.kopf { display: flex; align-items: center; gap: 16px; padding: 16px 28px 6px; background: transparent; color: var(--dunkel); position: relative; z-index: 1; }
.kopf img { height: 42px; max-width: 180px; object-fit: contain; background: #fff; border-radius: 12px; padding: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.kopf .titel { font-weight: 800; font-size: 1.3rem; }
.kopf .rechts { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: .9rem; font-weight: 600; }
.kopf button, .kopf .knopf { background: #fff; color: var(--ink); border: 2px solid color-mix(in srgb, var(--primaer) 35%, #fff); border-radius: 999px; padding: 7px 16px; font-weight: 700; }
.nav { display: flex; gap: 6px; padding: 8px 28px 4px; background: transparent; border: none; flex-wrap: wrap; position: relative; z-index: 1; }
.nav button { background: rgba(255,255,255,.7); border: none; padding: 9px 16px; cursor: pointer; font-size: .92rem; font-weight: 700; color: var(--ink); border-radius: 999px; }
.nav button.aktiv { background: var(--primaer); color: #fff; }
.inhalt { padding: 14px 28px 40px; max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; }

/* Karten, Formulare */
.karte { background: var(--weiss); border: none; border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--schatten); }
.karte .karte, dialog .karte { box-shadow: none; border: 1px solid var(--rand); }
.zeile { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.feld { display: flex; flex-direction: column; gap: 5px; min-width: 140px; flex: 1; }
.feld label { font-size: .8rem; color: var(--quiet); font-weight: 700; }
input, select, textarea { font: inherit; padding: 10px 14px; border: 2px solid transparent; border-radius: 14px; background: var(--tint); width: 100%; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; background: #fff; border-color: var(--primaer); }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--primaer); }
input[type=color] { padding: 4px; height: 42px; }
textarea { min-height: 64px; resize: vertical; }
button, .knopf { font: inherit; font-weight: 700; padding: 9px 18px; border-radius: 999px; border: 2px solid var(--primaer); background: var(--primaer); color: #fff; cursor: pointer; }
button:hover:not(:disabled) { filter: brightness(.96); }
button.leicht { background: #fff; color: var(--ink); border-color: color-mix(in srgb, var(--primaer) 35%, #fff); }
button.warn { background: var(--warn); border-color: var(--warn); }
button.klein { padding: 5px 12px; font-size: .84rem; }
button:disabled { opacity: .5; cursor: default; }

/* Tabellen, Meldungen, Chips */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #f0ebe4; vertical-align: top; }
th { color: var(--quiet); font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
tr.klickbar { cursor: pointer; } tr.klickbar:hover { background: var(--tint); }
.meldung { padding: 10px 16px; border-radius: 14px; margin-bottom: 12px; display: none; font-weight: 600; }
.meldung.fehler { display: block; background: #fdecea; color: var(--warn); }
.meldung.ok { display: block; background: #e8f5e9; color: var(--ok); }
.hinweisbox { background: var(--tint); border-left: 4px solid var(--primaer); padding: 10px 14px; border-radius: 12px; margin-bottom: 12px; }
.warnbox { background: #fdecea; border-left: 4px solid var(--warn); padding: 10px 14px; border-radius: 12px; margin-bottom: 12px; }
.chip { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--tint); font-size: .82rem; font-weight: 700; margin: 2px 4px 2px 0; }
.chip.gruen { background: #e8f5e9; color: var(--ok); } .chip.rot { background: #fdecea; color: var(--warn); } .chip.orange { background: #fff4e5; color: var(--hinweis); }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.kennzahl { font-size: 2rem; font-weight: 800; color: var(--dunkel); } .kennzahl small { font-size: .85rem; color: var(--quiet); font-weight: 600; display: block; }
.quiet { color: var(--quiet); font-size: .88rem; }
.rechts { text-align: right; }
.versteckt { display: none !important; }
.login-box { max-width: 380px; margin: 8vh auto; }
dialog { border: none; border-radius: var(--radius); padding: 26px 28px; max-width: 780px; width: 95%; box-shadow: 0 30px 80px rgba(60,40,30,.25); }
dialog::backdrop { background: rgba(60, 40, 30, .35); backdrop-filter: blur(4px); }
.tab-liste { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tab-liste button { background: var(--tint); color: var(--ink); border-color: transparent; }
.tab-liste button.aktiv { background: var(--primaer); color: #fff; border-color: var(--primaer); }
code { background: var(--tint); padding: 1px 6px; border-radius: 6px; font-size: .9em; }