/* Shop-Kennzahlen. Rahmen nach dotSHOP-Designsystem (Shop Dark, Beige, Assistant,
   eckig); Diagrammfarben aus der geprueften Datenpalette (dataviz-Referenz). */
@font-face {
  font-family: Assistant;
  src: url(vendor/assistant-variabel.ttf) format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --grund: #f4f2ec;
  --flaeche: #ffffff;
  --flaeche-2: #dfdcd2;
  --kopf: #242833;
  --kopf-text: #ffffff;
  --text: #121212;
  --text-2: #52514e;
  --text-3: #75736d;
  --linie: #e4e1d8;
  --gitter: #ebe9e3;
  --akzent: #f5c11a;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --plus: #2a78d6; --minus: #e34948;
  --gut: #0ca30c; --warnung: #fab219; --kritisch: #d03b3b;
  --seq-1: #86b6ef; --seq-2: #5598e7; --seq-3: #2a78d6; --seq-4: #1c5cab;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --grund: #121211; --flaeche: #1a1a19; --flaeche-2: #262624;
    --kopf: #1d2029; --text: #f0efec; --text-2: #c3c2b7; --text-3: #9a998f;
    --linie: #31312e; --gitter: #2a2a28;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --plus: #3987e5; --minus: #e66767;
    --seq-1: #184f95; --seq-2: #1c5cab; --seq-3: #2a78d6; --seq-4: #5598e7;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --grund: #121211; --flaeche: #1a1a19; --flaeche-2: #262624;
  --kopf: #1d2029; --text: #f0efec; --text-2: #c3c2b7; --text-3: #9a998f;
  --linie: #31312e; --gitter: #2a2a28;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --plus: #3987e5; --minus: #e66767;
  --seq-1: #184f95; --seq-2: #1c5cab; --seq-3: #2a78d6; --seq-4: #5598e7;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--grund);
  color: var(--text);
  font: 400 15px/1.5 Assistant, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
button, select, input { font: inherit; color: inherit; border-radius: 0; }

/* Kopf */
.kopf { background: var(--kopf); color: var(--kopf-text); position: sticky; top: 0; z-index: 10; }
.kopf-innen {
  max-width: 1600px; margin: 0 auto; padding: 12px 24px;
  display: flex; gap: 16px 32px; align-items: center; flex-wrap: wrap;
}
.marke { font-weight: 700; font-size: 18px; letter-spacing: .02em; }
.marke::after { content: ".SHOP"; background: var(--akzent); color: #121212; font-size: 11px; padding: 1px 4px; margin-left: 6px; vertical-align: 3px; }
.filter { display: flex; gap: 16px; flex-wrap: wrap; flex: 1; }
.filter label { display: flex; gap: 8px; align-items: center; font-size: 13px; opacity: .9; }
.filter select {
  background: transparent; color: var(--kopf-text); border: 1px solid rgba(255,255,255,.4);
  padding: 6px 28px 6px 10px; min-width: 180px;
}
.filter select option { color: #121212; }
.abmelden { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.abmelden span { opacity: .75; }
.abmelden button { background: transparent; color: var(--kopf-text); border: 1px solid rgba(255,255,255,.4); padding: 6px 12px; cursor: pointer; }
.abmelden button:hover, .filter select:hover { border-color: #fff; }

.reiter { max-width: 1600px; margin: 0 auto; padding: 0 24px; display: flex; gap: 4px; overflow-x: auto; }
.reiter button {
  background: none; border: 0; color: var(--kopf-text); opacity: .7; padding: 10px 14px 12px;
  cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent;
}
.reiter button:hover { opacity: 1; }
.reiter button[aria-selected="true"] { opacity: 1; border-bottom-color: var(--akzent); font-weight: 600; }

/* Inhalt */
.inhalt { max-width: 1600px; margin: 0 auto; padding: 24px; }
.raster { display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); }
.b12 { grid-column: span 12; } .b8 { grid-column: span 8; } .b6 { grid-column: span 6; } .b4 { grid-column: span 4; }
@media (max-width: 1100px) { .b8, .b6, .b4 { grid-column: span 12; } }

.kacheln { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 16px; }
.kachel { background: var(--flaeche); padding: 16px 18px 12px; border-top: 3px solid var(--flaeche-2); }
.kachel h3 { margin: 0; font-size: 13px; font-weight: 500; color: var(--text-2); }
.kachel .wert { font-size: 28px; font-weight: 600; line-height: 1.2; margin: 4px 0 2px; }
.kachel .vergleich { font-size: 13px; color: var(--text-2); display: flex; gap: 6px; align-items: baseline; }
.kachel .vergleich b { font-weight: 600; }
.kachel .vergleich b.auf::before { content: "▲ "; font-size: 10px; }
.kachel .vergleich b.ab::before { content: "▼ "; font-size: 10px; }
.kachel .vergleich b.gut { color: var(--gut); }
.kachel .vergleich b.schlecht { color: var(--kritisch); }
.kachel svg { display: block; width: 100%; height: 36px; margin-top: 8px; }
.kachel svg polyline { fill: none; stroke: var(--s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kachel svg circle { fill: var(--s1); }

.karte { background: var(--flaeche); padding: 18px 20px 12px; min-width: 0; }
.karte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.karte h2 { margin: 0; font-size: 16px; font-weight: 600; }
.karte .zusatz { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.karte .knopf { background: none; border: 1px solid var(--linie); color: var(--text-2); font-size: 12px; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.karte .knopf:hover { color: var(--text); border-color: var(--text-3); }
.diagramm { height: 320px; margin-top: 8px; }
.diagramm.hoch { height: 400px; }
.diagramm.flach { height: 240px; }
.tabelle { margin-top: 8px; max-height: 360px; overflow: auto; }
.tabelle table { border-collapse: collapse; width: 100%; font-size: 13px; }
.tabelle th, .tabelle td { padding: 6px 10px; border-bottom: 1px solid var(--linie); text-align: right; white-space: nowrap; }
.tabelle th:first-child, .tabelle td:first-child { text-align: left; }
.tabelle th { color: var(--text-2); font-weight: 600; position: sticky; top: 0; background: var(--flaeche); }

.leer { background: var(--flaeche); padding: 32px; text-align: center; color: var(--text-2); }
.leer h2 { color: var(--text); margin: 0 0 8px; font-size: 18px; }
.ausstehend { background: var(--flaeche); padding: 18px 20px; border-left: 3px solid var(--flaeche-2); }
.ausstehend h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.ausstehend p { margin: 0; color: var(--text-2); font-size: 13px; }

.ziele { display: grid; gap: 14px; margin-top: 12px; }
.ziel-zeile { display: grid; grid-template-columns: 130px 1fr 170px; gap: 12px; align-items: center; font-size: 13px; }
.ziel-balken { position: relative; height: 12px; background: var(--gitter); }
.ziel-balken .ist { position: absolute; inset: 0 auto 0 0; background: var(--s1); }
.ziel-balken .soll { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); }
.ziel-zeile .zahl { text-align: right; color: var(--text-2); }
@media (max-width: 600px) { .ziel-zeile { grid-template-columns: 1fr; gap: 4px; } .ziel-zeile .zahl { text-align: left; } }

.fuss { max-width: 1600px; margin: 0 auto; padding: 8px 24px 32px; color: var(--text-3); font-size: 12px; }
.fuss .recht { margin-top: 8px; }
.recht { display: flex; gap: 16px; font-size: 12px; }
.recht a { color: inherit; text-decoration: underline; }
.fuss .punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

@media (max-width: 700px) {
  .kopf-innen, .reiter, .inhalt, .fuss { padding-left: 16px; padding-right: 16px; }
  .filter { flex: 1 1 100%; flex-direction: column; gap: 8px; }
  .filter label { justify-content: space-between; }
  .filter select { min-width: 0; flex: 1; max-width: 75%; }
  .abmelden { flex: 1 1 100%; justify-content: space-between; }
  .kacheln { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kachel { padding: 12px; }
  .kachel .wert { font-size: 20px; }
  .kachel .vergleich { flex-wrap: wrap; font-size: 12px; }
  .kopf { position: static; }
}

/* Anmeldung */
.anmeldung { min-height: 100vh; display: grid; place-items: center; background: var(--kopf); padding: 16px; }
.anmelde-box { background: var(--flaeche); width: min(380px, 100%); padding: 32px; }
.anmelde-box h1 { margin: 0; font-size: 24px; }
.anmelde-box .unterzeile { margin: 0 0 20px; color: var(--text-2); font-size: 13px; }
.anmelde-box form { display: grid; gap: 14px; }
.anmelde-box label { display: grid; gap: 4px; font-size: 13px; color: var(--text-2); }
.anmelde-box input { padding: 10px 12px; border: 1px solid var(--linie); background: var(--flaeche); }
.anmelde-box button { margin-top: 6px; padding: 11px; background: var(--kopf); color: #fff; border: 1px solid var(--kopf); cursor: pointer; font-weight: 600; }
.anmelde-box .recht { margin-top: 20px; color: var(--text-2); }
.meldung { background: #fbe9e9; color: #8c1d1d; padding: 10px 12px; font-size: 13px; }