/* ==========================================================================
   Anlage - Gestaltung der Weboberflaeche

   Aufbau dieser Datei
   1. Farbwerte (hell und dunkel)
   2. Grundgeruest und Typografie
   3. Kopf- und Navigationsbereich
   4. Bausteine: Karten, Kennzahlen, Tabellen, Hinweise
   5. Formulare und Schaltflaechen
   6. Diagramme
   7. Druckaufbereitung

   Zu den Farben: Die Reihenfarben stammen aus einer Palette, die auf
   ausreichenden Abstand auch bei Rot-Gruen-Sehschwaeche geprueft wurde.
   Farbe traegt in dieser Anwendung nirgends allein eine Information;
   neben jeder farbigen Markierung steht ein Text oder ein Zeichen.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Farbwerte
   ---------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --flaeche:          #fcfcfb;
  --seite:            #f9f9f7;
  --karte:            #ffffff;
  --text:             #0b0b0b;
  --text-zweit:       #52514e;
  --text-gedaempft:   #898781;
  --raster:           #e1e0d9;
  --achse:            #c3c2b7;
  --rand:             rgba(11, 11, 11, 0.10);
  --rand-stark:       rgba(11, 11, 11, 0.18);

  /* Kategoriale Reihen in fester Reihenfolge */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  --serie-5: #e87ba4;
  --serie-6: #008300;
  --serie-7: #4a3aa7;
  --serie-8: #e34948;

  /* Zustandsfarben - niemals fuer Datenreihen verwenden */
  --gut:      #0ca30c;
  --achtung:  #fab219;
  --ernst:    #ec835a;
  --kritisch: #d03b3b;
  --gut-text: #006300;

  /* Divergierende Skala fuer Korrelationen: kuehl (gegenlaeufig) bis
     warm (gleichlaeufig), neutrales Grau in der Mitte */
  --diverg-mitte:   #f0efec;
  --diverg-kuehl-1: #cde2fb;  --diverg-warm-1: #fbdcd9;
  --diverg-kuehl-2: #9ec5f4;  --diverg-warm-2: #f6bab4;
  --diverg-kuehl-3: #6da7ec;  --diverg-warm-3: #ef9890;
  --diverg-kuehl-4: #3987e5;  --diverg-warm-4: #e5726c;
  --diverg-kuehl-5: #256abf;  --diverg-warm-5: #d03b3b;
  --diverg-kuehl-6: #184f95;  --diverg-warm-6: #a32626;

  --band-aussen: rgba(42, 120, 214, 0.16);
  --band-innen:  rgba(42, 120, 214, 0.32);

  --abstand:  16px;
  --radius:   10px;
  --schrift:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    color-scheme: dark;
    --flaeche:        #1a1a19;
    --seite:          #0d0d0d;
    --karte:          #1f1f1e;
    --text:           #ffffff;
    --text-zweit:     #c3c2b7;
    --text-gedaempft: #898781;
    --raster:         #2c2c2a;
    --achse:          #383835;
    --rand:           rgba(255, 255, 255, 0.10);
    --rand-stark:     rgba(255, 255, 255, 0.20);

    --serie-1: #3987e5;
    --serie-2: #d95926;
    --serie-3: #199e70;
    --serie-4: #c98500;
    --serie-5: #d55181;
    --serie-6: #008300;
    --serie-7: #9085e9;
    --serie-8: #e66767;

    --gut-text: #0ca30c;

    --diverg-mitte:   #383835;
    --diverg-kuehl-1: #184f95;  --diverg-warm-1: #7a1d1d;
    --diverg-kuehl-2: #256abf;  --diverg-warm-2: #a32626;
    --diverg-kuehl-3: #2a78d6;  --diverg-warm-3: #c13232;
    --diverg-kuehl-4: #3987e5;  --diverg-warm-4: #d03b3b;
    --diverg-kuehl-5: #5598e7;  --diverg-warm-5: #e5726c;
    --diverg-kuehl-6: #86b6ef;  --diverg-warm-6: #ef9890;

    --band-aussen: rgba(57, 135, 229, 0.20);
    --band-innen:  rgba(57, 135, 229, 0.38);
  }
}

:root[data-thema="dunkel"] {
  color-scheme: dark;
  --flaeche: #1a1a19; --seite: #0d0d0d; --karte: #1f1f1e;
  --text: #ffffff; --text-zweit: #c3c2b7; --text-gedaempft: #898781;
  --raster: #2c2c2a; --achse: #383835;
  --rand: rgba(255,255,255,0.10); --rand-stark: rgba(255,255,255,0.20);
  --serie-1:#3987e5; --serie-2:#d95926; --serie-3:#199e70; --serie-4:#c98500;
  --serie-5:#d55181; --serie-6:#008300; --serie-7:#9085e9; --serie-8:#e66767;
  --gut-text:#0ca30c;
  --diverg-mitte:#383835;
  --diverg-kuehl-1:#184f95; --diverg-warm-1:#7a1d1d;
  --diverg-kuehl-2:#256abf; --diverg-warm-2:#a32626;
  --diverg-kuehl-3:#2a78d6; --diverg-warm-3:#c13232;
  --diverg-kuehl-4:#3987e5; --diverg-warm-4:#d03b3b;
  --diverg-kuehl-5:#5598e7; --diverg-warm-5:#e5726c;
  --diverg-kuehl-6:#86b6ef; --diverg-warm-6:#ef9890;
  --band-aussen: rgba(57,135,229,0.20); --band-innen: rgba(57,135,229,0.38);
}

/* -------------------------------------------------------------------------
   2. Grundgeruest
   ---------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--seite);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.huelle { max-width: 1180px; margin: 0 auto; padding: 0 var(--abstand) 64px; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 12px; font-weight: 650; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.24rem; margin-top: 28px; }
h3 { font-size: 1.04rem; margin-top: 20px; }
p  { margin: 0 0 12px; }
a  { color: var(--serie-1); }
a:hover { text-decoration: none; }

.gedaempft { color: var(--text-zweit); }
.klein { font-size: 0.86rem; }
.mono { font-variant-numeric: tabular-nums; }
.rechts { text-align: right; }
.mitte { text-align: center; }

/* Sprungmarke fuer die Tastaturbedienung */
.sprungmarke {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--serie-1); color: #fff; padding: 10px 16px;
}
.sprungmarke:focus { left: 8px; top: 8px; }

/* -------------------------------------------------------------------------
   3. Kopfbereich und Navigation
   ---------------------------------------------------------------------- */
.kopf {
  background: var(--karte);
  border-bottom: 1px solid var(--rand);
  margin-bottom: 22px;
}
.kopf-inhalt {
  max-width: 1180px; margin: 0 auto; padding: 10px var(--abstand);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.marke { font-weight: 700; font-size: 1.06rem; text-decoration: none; color: var(--text); }
.marke span { color: var(--serie-1); }
.navi { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.navi a {
  padding: 7px 12px; border-radius: 8px; text-decoration: none;
  color: var(--text-zweit); font-size: 0.93rem;
}
.navi a:hover { background: var(--seite); color: var(--text); }
.navi a.aktiv { background: var(--serie-1); color: #fff; }
.kopf-rechts { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; }

/* -------------------------------------------------------------------------
   4. Bausteine
   ---------------------------------------------------------------------- */
.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
}
.karte > :first-child { margin-top: 0; }

.gitter { display: grid; gap: 16px; }
.gitter-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.gitter-3 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.gitter-4 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }

/* Kennzahlenfelder */
.kennzahl {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 14px 16px;
}
.kennzahl .bezeichnung {
  font-size: 0.79rem; color: var(--text-zweit); text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 5px; font-weight: 600;
}
.kennzahl .wert { font-size: 1.6rem; font-weight: 660; line-height: 1.15; }
.kennzahl .erlaeuterung { font-size: 0.8rem; color: var(--text-zweit); margin-top: 5px; }
.wert.positiv { color: var(--gut-text); }
.wert.negativ { color: var(--kritisch); }

/* Risikostufen-Anzeige: Zahl, Text und Farbe zusammen - nie Farbe allein */
.stufenleiste { display: flex; gap: 3px; margin: 8px 0; }
.stufenleiste span {
  flex: 1; height: 9px; border-radius: 2px; background: var(--raster);
}
.stufenleiste span.aktiv-1, .stufenleiste span.aktiv-2 { background: var(--gut); }
.stufenleiste span.aktiv-3, .stufenleiste span.aktiv-4 { background: var(--achtung); }
.stufenleiste span.aktiv-5, .stufenleiste span.aktiv-6 { background: var(--ernst); }
.stufenleiste span.aktiv-7 { background: var(--kritisch); }

/* Tabellen */
table { width: 100%; border-collapse: collapse; font-size: 0.91rem; }
caption { text-align: left; font-weight: 640; padding-bottom: 8px; color: var(--text-zweit); }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--rand); text-align: left; }
th { font-weight: 640; color: var(--text-zweit); font-size: 0.83rem;
     text-transform: uppercase; letter-spacing: 0.03em; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--seite); }
.tabellenhuelle { overflow-x: auto; }

/* Hinweiskaesten. Jeder traegt ein Zeichen, damit die Bedeutung nicht
   allein an der Farbe haengt. */
.hinweis {
  border-left: 4px solid var(--serie-1);
  background: var(--flaeche);
  padding: 12px 16px; border-radius: 0 8px 8px 0;
  margin: 12px 0; font-size: 0.92rem;
}
.hinweis::before { font-weight: 700; margin-right: 8px; }
.hinweis.information::before { content: "Hinweis:"; color: var(--serie-1); }
.hinweis.achtung  { border-left-color: var(--achtung); }
.hinweis.achtung::before  { content: "Zu beachten:"; color: var(--ernst); }
.hinweis.warnung  { border-left-color: var(--kritisch); }
.hinweis.warnung::before  { content: "Warnung:"; color: var(--kritisch); }
.hinweis.erfolg   { border-left-color: var(--gut); }
.hinweis.erfolg::before   { content: "Erledigt:"; color: var(--gut-text); }
.hinweis ul { margin: 6px 0 0; padding-left: 20px; }
.hinweis li { margin-bottom: 5px; }

.marke-demo {
  display: inline-block; background: var(--achtung); color: #0b0b0b;
  padding: 2px 9px; border-radius: 999px; font-size: 0.74rem;
  font-weight: 700; letter-spacing: 0.03em;
}

/* -------------------------------------------------------------------------
   5. Formulare und Schaltflaechen
   ---------------------------------------------------------------------- */
label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 5px; }
.feldhilfe { font-weight: 400; color: var(--text-zweit); font-size: 0.82rem; margin-top: 3px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea {
  width: 100%; padding: 9px 11px; font-size: 0.96rem; font-family: inherit;
  border: 1px solid var(--rand-stark); border-radius: 8px;
  background: var(--flaeche); color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--serie-1); outline-offset: 1px; border-color: var(--serie-1);
}
.feld { margin-bottom: 14px; }
.feldreihe { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.knopf {
  display: inline-block; padding: 9px 18px; border-radius: 8px;
  border: 1px solid transparent; background: var(--serie-1); color: #fff;
  font-size: 0.94rem; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none;
}
.knopf:hover { filter: brightness(1.08); }
.knopf.zweit { background: transparent; color: var(--text); border-color: var(--rand-stark); }
.knopf.zweit:hover { background: var(--flaeche); }
.knopf.gefahr { background: var(--kritisch); }
.knopf.klein { padding: 5px 11px; font-size: 0.85rem; }
.knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }

/* -------------------------------------------------------------------------
   6. Diagramme
   ---------------------------------------------------------------------- */
.diagramm { margin: 0 0 18px; }
.diagrammtitel { font-weight: 640; font-size: 0.97rem; margin-bottom: 8px; }
.diagrammtitel .einheit { font-weight: 400; color: var(--text-zweit); font-size: 0.87rem; }
.diagrammhinweis { font-size: 0.84rem; color: var(--text-zweit); margin-top: 8px; }
.svg-diagramm { width: 100%; height: auto; display: block; }

.svg-diagramm .flaeche { fill: var(--flaeche); }
.svg-diagramm .raster { stroke: var(--raster); stroke-width: 1; }
.svg-diagramm .nulllinie { stroke: var(--achse); stroke-width: 1.5; }
.svg-diagramm .achse { stroke: var(--achse); stroke-width: 1; }
.svg-diagramm .achsentext { fill: var(--text-gedaempft); font-size: 11.5px;
  font-family: var(--schrift); font-variant-numeric: tabular-nums; }
.svg-diagramm .achsenbeschriftung { fill: var(--text-zweit); font-size: 12px;
  font-family: var(--schrift); }
.svg-diagramm .serienlabel { font-size: 11.5px; font-weight: 640; font-family: var(--schrift); }
.svg-diagramm .balkenlabel { fill: var(--text-zweit); font-size: 12px; font-family: var(--schrift); }
.svg-diagramm .balkenwert { fill: var(--text); font-size: 11.5px; font-weight: 600;
  font-family: var(--schrift); font-variant-numeric: tabular-nums; }
.svg-diagramm .punktlabel { fill: var(--text); font-size: 11.5px; font-weight: 600;
  font-family: var(--schrift); }
.svg-diagramm .punktmarke { stroke: var(--flaeche); stroke-width: 2; }
.svg-diagramm .grenzlinie { stroke: var(--serie-1); stroke-width: 2;
  stroke-linejoin: round; }
.svg-diagramm .rueckgangflaeche { fill: var(--kritisch); opacity: 0.17; }
.svg-diagramm .rueckganglinie { stroke: var(--kritisch); stroke-width: 1.8;
  stroke-linejoin: round; }
.svg-diagramm .band-aussen { fill: var(--band-aussen); }
.svg-diagramm .band-innen  { fill: var(--band-innen); }
.svg-diagramm .medianlinie { stroke: var(--serie-1); stroke-width: 2.4; }
.svg-diagramm .einzahlungslinie { stroke: var(--text-zweit); stroke-width: 1.8;
  stroke-dasharray: 5 4; }
.svg-diagramm .bandlabel { font-size: 11px; font-family: var(--schrift); }
.svg-diagramm .label-aussen { fill: var(--text-zweit); }
.svg-diagramm .label-median { fill: var(--serie-1); font-weight: 640; }
.svg-diagramm .saeule { fill: var(--serie-1); opacity: 0.82; }
.svg-diagramm .saeule-risiko { fill: var(--kritisch); opacity: 0.88; }
.svg-diagramm .marke-var  { stroke: var(--text); stroke-width: 1.8; stroke-dasharray: 4 3; }
.svg-diagramm .marke-cvar { stroke: var(--kritisch); stroke-width: 1.8; }
.svg-diagramm .markenlabel { fill: var(--text-zweit); font-size: 10.5px;
  font-family: var(--schrift); font-variant-numeric: tabular-nums; }
.svg-diagramm .matrixkopf { fill: var(--text-zweit); font-size: 11.5px;
  font-family: var(--schrift); }
.svg-diagramm .matrixwert { fill: var(--text); font-size: 12px; font-weight: 600;
  font-family: var(--schrift); font-variant-numeric: tabular-nums; }
.svg-diagramm .matrixwert.hell { fill: #ffffff; }

.legende {
  list-style: none; padding: 0; margin: 10px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.86rem;
}
.legende li { display: flex; align-items: center; gap: 7px; }
.punkt { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }
.punkt.median { background: var(--serie-1); }
.punkt.einzahlung { background: var(--text-zweit); }
.flaechenpunkt { width: 16px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }
.flaechenpunkt.band-innen { background: var(--band-innen); }
.flaechenpunkt.band-aussen { background: var(--band-aussen); }

/* Aufklappbare Datentabelle unter jedem Diagramm. Sie ist die
   barrierefreie Entsprechung der Grafik und zugleich die Quelle fuer
   das Uebertragen in eine Tabellenkalkulation. */
details.datentabelle { margin-top: 10px; }
details.datentabelle summary {
  cursor: pointer; font-size: 0.86rem; color: var(--serie-1);
  padding: 5px 0; font-weight: 600;
}
details.datentabelle[open] summary { margin-bottom: 8px; }

/* -------------------------------------------------------------------------
   7. Druckaufbereitung
   Ziel: Jede Seite laesst sich als PDF sichern, ohne dass Bedienelemente,
   Navigation oder Farbflaechen stoeren.
   ---------------------------------------------------------------------- */
@media print {
  :root {
    --seite: #ffffff; --karte: #ffffff; --flaeche: #ffffff;
    --text: #000000; --text-zweit: #333333; --rand: #cccccc;
  }
  @page { margin: 16mm 14mm; }
  body { background: #fff; font-size: 10.5pt; }
  .kopf, .navi, .knopfreihe, .knopf, .nicht-drucken, form.nicht-drucken {
    display: none !important;
  }
  .huelle { max-width: none; padding: 0; }
  .karte {
    border: 1px solid #ccc; box-shadow: none; padding: 10px 12px;
    margin-bottom: 10px; break-inside: avoid;
  }
  .diagramm, figure, table, .kennzahl { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  details.datentabelle { display: block; }
  details.datentabelle > summary { display: none; }
  details.datentabelle > *:not(summary) { display: block !important; }
  a { text-decoration: none; color: #000; }
  .druckfuss { display: block !important; margin-top: 14px;
    border-top: 1px solid #ccc; padding-top: 7px; font-size: 8.5pt; color: #555; }
}
.druckfuss { display: none; }

/* Schmale Bildschirme */
@media (max-width: 720px) {
  .kopf-inhalt { gap: 10px; }
  .navi { order: 3; width: 100%; }
  .karte { padding: 15px; }
  h1 { font-size: 1.32rem; }
}

/* Wer weniger Bewegung wuenscht, bekommt keine */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}