/* Prognosen im Unternehmen — eigenes Stylesheet, keine externen Abhängigkeiten.
   Mittelton-Farbschema (Schiefer-Blau), dunkle Variante per data-farben="dunkel". Alle Farben stehen als Variablen oben; die Diagramme
   (scripts/zeitreihen_svg.py) sind auf diese Palette abgestimmt.
   Aufbau: Grundlagen, Knöpfe, Kopf und Einstieg, Inhalt, Kontext, Befragung, Fuß. */

/* ------------------------------------------------------------ Grundlagen */

:root {
  color-scheme: dark;
  /* Standard: Schiefer-Blau, ein Mittelton zwischen hell und dunkel */
  --grund: #283a4c;          /* Seitenhintergrund */
  --flaeche: #364b60;        /* Karten */
  --flaeche-2: #405770;      /* Hover */
  --inset: #2d4054;          /* eingelassene Flächen in Karten (Optionen, Kacheln, Diagramme) */
  --linie: #4a6077;
  --linie-stark: #62798f;
  --tinte: #f3f7fa;          /* Überschriften, Hervorhebung */
  --text: #dbe5ee;
  --gedaempft: #b9c8d6;
  --platzhalter: #b0c0cf;
  --akzent: #8fcdf5;         /* Links, Markierungen */
  --akzent-fest: #2f78ab;    /* Flächen mit weißer Schrift */
  --akzent-fest-hover: #3b8ac4;
  --akzent-hell: rgba(143, 205, 245, .15);
  --lern: #b9ccdb;
  --lern-hell: rgba(185, 204, 219, .14);
  --rest: #ff8fa8;
  --rest-hell: rgba(255, 143, 168, .13);
  --fehler: #ffc4c4;
  --fehler-hell: rgba(235, 90, 90, .16);
  --fehler-rand: rgba(235, 90, 90, .45);
  --glanz: rgba(90, 160, 210, .28);
  --schatten: 0 1px 2px rgba(8, 18, 28, .25), 0 10px 28px rgba(8, 18, 28, .3);
  --radius: 12px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --breite: 46rem;
}

/* Variante: tiefdunkel (Vergleich per ?farben=dunkel) */
:root[data-farben="dunkel"] {
  --grund: #0e1a26;
  --flaeche: #162636;
  --flaeche-2: #1b2f43;
  --inset: #0e1a26;
  --linie: #263a4e;
  --linie-stark: #35506b;
  --tinte: #eaf0f6;
  --text: #c3d0dc;
  --gedaempft: #8fa2b4;
  --platzhalter: #8a9bad;
  --akzent: #62aee0;
  --akzent-hell: rgba(98, 174, 224, .13);
  --lern: #9bb3c4;
  --lern-hell: rgba(155, 179, 196, .12);
  --rest: #ef7b97;
  --rest-hell: rgba(239, 123, 151, .11);
  --fehler: #ffb4b4;
  --fehler-hell: rgba(235, 90, 90, .13);
  --fehler-rand: rgba(235, 90, 90, .4);
  --glanz: rgba(47, 120, 171, .22);
  --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .28);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--grund); }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--tinte); line-height: 1.25; margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--akzent); }
b { color: var(--tinte); font-weight: 650; }
::placeholder { color: var(--platzhalter); opacity: .75; }
::selection { background: rgba(98, 174, 224, .35); }

:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }

[hidden] { display: none !important; }

.spalte { width: min(100% - 2rem, var(--breite)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.leise { color: var(--gedaempft); font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------ Knöpfe */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; line-height: 1.2; white-space: nowrap;
  padding: .8rem 1.4rem; border-radius: 10px; border: 1.5px solid transparent;
  background: var(--akzent-fest); color: #fff; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.knopf:hover { background: var(--akzent-fest-hover); }
.knopf:active { transform: translateY(1px); }
.knopf[disabled] { opacity: .6; cursor: progress; }
.knopf--rand { background: transparent; color: var(--tinte); border-color: var(--linie-stark); }
.knopf--rand:hover { background: var(--akzent-hell); border-color: var(--akzent); }
.knopf--klein { padding: .45rem .9rem; font-size: .95rem; }
.knopf--text { background: transparent; color: var(--gedaempft); padding-inline: .6rem; }
.knopf--text:hover { background: transparent; color: var(--tinte); }

/* ------------------------------------------------------------ Kopf und Einstieg */

.kopf { background: var(--grund); border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; }
.marke { font-weight: 700; color: var(--tinte); text-decoration: none; letter-spacing: -.01em; }
.kopf nav { display: flex; align-items: center; gap: 1.25rem; font-size: .95rem; }
.kopf nav a:not(.knopf) { color: var(--gedaempft); text-decoration: none; }
.kopf nav a:not(.knopf):hover { color: var(--tinte); }

.held {
  background:
    radial-gradient(60rem 22rem at 85% -10%, var(--glanz), transparent 70%),
    var(--grund);
  padding-block: clamp(3rem, 8vw, 5rem) clamp(4.5rem, 10vw, 6.5rem);
}
.ueberschrift-klein {
  font-size: .85rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--akzent);
}
.held h1 { margin-top: .75rem; font-size: clamp(2rem, 5.2vw, 3.15rem); letter-spacing: -.025em; font-weight: 750; }
.held .einleitung { margin-top: 1.1rem; font-size: clamp(1.1rem, 2.2vw, 1.25rem); max-width: 38rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.chip {
  font-size: .88rem; font-weight: 550; color: var(--text);
  border: 1px solid var(--linie-stark); border-radius: 999px; padding: .28rem .8rem;
}
.aktionen-held { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* ------------------------------------------------------------ Inhalt */

main { padding-bottom: 2rem; }
main > .spalte > section, main > .spalte > details { margin-top: 1.75rem; }
main > .spalte > section:first-child { margin-top: -2.75rem; position: relative; }

.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.25rem 1.4rem; }
.karte--schatten { box-shadow: var(--schatten); }

.ueber { display: flow-root; padding: 1.25rem 1.4rem 1.4rem; box-shadow: var(--schatten); }
.ueber p { margin: 0; }
/* Foto als Kasten oben links, der Text läuft daneben und darunter weiter */
.ueber-foto {
  float: left; display: block; width: 5.5rem; height: 6.75rem; margin: .15rem 1.1rem .5rem 0;
  object-fit: cover; object-position: 50% 15%;
  border-radius: 10px; border: 1px solid var(--linie-stark);
  background: #05080b; /* Fotohintergrund, damit beim Laden keine helle Fläche aufblitzt */
}
@media (min-width: 40rem) {
  .ueber { padding: 1.6rem 1.8rem 1.7rem; }
  .ueber-foto { width: 8rem; height: 10rem; margin: .2rem 1.5rem .6rem 0; }
}

/* ------------------------------------------------------------ Wissenschaftlicher Hintergrund */

.kontext { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); }
.kontext > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem;
}
.kontext > summary::-webkit-details-marker { display: none; }
.kontext > summary:hover .kontext-titel { color: var(--akzent); }
.kontext-symbol {
  flex: none; width: 2.75rem; height: 2.75rem; border-radius: 10px; display: grid; place-items: center;
  background: var(--akzent-hell); color: var(--akzent);
}
.kontext-text { flex: 1; min-width: 0; }
.kontext-titel { font-weight: 700; color: var(--tinte); font-size: 1.1rem; transition: color .15s; }
.kontext-unter { font-size: .92rem; color: var(--gedaempft); line-height: 1.45; }
.kontext > summary::after {
  content: ""; flex: none; width: .6rem; height: .6rem; margin-right: .3rem;
  border-right: 2px solid var(--gedaempft); border-bottom: 2px solid var(--gedaempft);
  transform: rotate(45deg); transition: transform .2s;
}
.kontext[open] > summary::after { transform: rotate(-135deg); }
.kontext[open] > summary { border-bottom: 1px solid var(--linie); }
.kontext-inhalt { padding: 1.4rem 1.4rem 1.6rem; animation: einblenden .25s ease; }
.kontext-inhalt > * + * { margin-top: 1rem; }
.kontext-inhalt h3 { font-size: 1.15rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.kontext-inhalt h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.raster { display: grid; gap: .85rem; }
@media (min-width: 40rem) {
  .raster--2 { grid-template-columns: repeat(2, 1fr); }
  .raster--3 { grid-template-columns: repeat(3, 1fr); }
}

.kachel { background: var(--inset); border: 1px solid var(--linie); border-radius: 10px; padding: .95rem 1.05rem; }
.kachel h4 { font-size: .98rem; display: flex; align-items: center; gap: .55rem; }
.kachel p { margin-top: .4rem; font-size: .95rem; line-height: 1.55; }
.kachel .klein { font-size: .85rem; color: var(--gedaempft); }
.kachel--lern { border-left: 4px solid var(--lern); background: linear-gradient(90deg, var(--lern-hell), var(--inset) 55%); }
.kachel--rest { border-left: 4px solid var(--rest); background: linear-gradient(90deg, var(--rest-hell), var(--inset) 55%); }
.punkt { width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.punkt--lern { background: var(--lern); }
.punkt--rest { background: var(--rest); }
.siegel {
  display: inline-block; margin-top: .6rem; font-size: .78rem; font-weight: 650; letter-spacing: .02em;
  border-radius: 999px; padding: .12rem .65rem;
}
.siegel--lern { background: var(--lern-hell); color: var(--lern); border: 1px solid rgba(155, 179, 196, .35); }
.siegel--rest { background: var(--rest-hell); color: var(--rest); border: 1px solid rgba(239, 123, 151, .4); }

.abbildung { margin-inline: 0; margin-bottom: 0; background: var(--inset); border: 1px solid var(--linie); border-radius: 10px; padding: .85rem 1rem 1rem; }
.abbildung figcaption { font-weight: 650; font-size: .95rem; color: var(--tinte); }
.abbildung .klein { font-size: .85rem; color: var(--gedaempft); }
.abbildung img { margin-top: .6rem; }
.kachel .abbildung-bild { margin-top: .8rem; }
.quelle { font-size: .85rem; font-style: italic; color: var(--gedaempft); }

.erkenntnisse { margin-inline: 0; margin-bottom: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.erkenntnisse li {
  position: relative; padding: .7rem 1rem .7rem 2.6rem; background: var(--akzent-hell); border-radius: 10px; color: var(--tinte);
}
.erkenntnisse li::before {
  content: ""; position: absolute; left: 1rem; top: 1.05rem; width: .9rem; height: .5rem;
  border-left: 2.5px solid var(--akzent); border-bottom: 2.5px solid var(--akzent); transform: rotate(-45deg);
}

/* ------------------------------------------------------------ Befragung */

.bereich-titel { font-size: 1.35rem; margin-bottom: .75rem; }
#befragung { scroll-margin-top: 1rem; padding: 1.5rem 1.4rem 1.6rem; }
@media (min-width: 40rem) { #befragung { padding: 2rem 2.2rem 2.2rem; } }
#befragung[aria-busy="true"] { opacity: .6; transition: opacity .15s; }
#befragung > * { animation: einblenden .25s ease; }

.start-zeilen { display: grid; gap: .5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.start-zeilen li { display: flex; gap: .6rem; align-items: baseline; }
.start-zeilen li::before { content: "•"; color: var(--akzent); font-weight: 700; }
.start-zeilen + p { margin-top: 1rem; }

.fortschritt-kopf { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--gedaempft); }
.fortschritt { margin-top: .45rem; height: .5rem; background: var(--linie); border-radius: 999px; overflow: hidden; }
.fortschritt > span { display: block; height: 100%; background: linear-gradient(90deg, var(--akzent-fest), var(--akzent)); border-radius: 999px; transition: width .3s ease; }

.frage-titel { margin-top: 1.5rem; font-size: clamp(1.2rem, 3vw, 1.45rem); font-weight: 700; line-height: 1.35; outline: none; }
.frage-titel--start { margin-top: 0; }
.frage-typ { margin-top: .35rem; font-size: .85rem; font-style: italic; color: var(--gedaempft); }

.meldung {
  margin-top: 1rem; padding: .7rem 1rem; border-radius: 10px; font-size: .95rem;
  background: var(--fehler-hell); border: 1px solid var(--fehler-rand); color: var(--fehler);
}
.meldung ul { margin: 0; padding-left: 1.1rem; }

.optionen { display: grid; gap: .55rem; margin-top: 1.15rem; }
.optionen--kacheln { grid-template-columns: repeat(2, 1fr); }
.optionen--spalten, .optionen--karten { grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .optionen--kacheln.optionen--n4 { grid-template-columns: repeat(4, 1fr); }
  .optionen--kacheln.optionen--n5, .optionen--kacheln.optionen--n6 { grid-template-columns: repeat(3, 1fr); }
  .optionen--spalten { grid-template-columns: repeat(2, 1fr); }
  .optionen--karten { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}
.optionen .option--voll { grid-column: 1 / -1; }
.option {
  display: flex; gap: .85rem; align-items: flex-start; padding: .8rem 1rem;
  background: var(--inset); border: 1.5px solid var(--linie); border-radius: 10px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.option:hover { border-color: var(--linie-stark); background: var(--flaeche-2); }
.option:has(:checked) { border-color: var(--akzent); background: var(--akzent-hell); }
.option:has(:focus-visible) { outline: 3px solid var(--akzent); outline-offset: 2px; }
.option input[type="radio"], .option input[type="checkbox"] {
  flex: none; width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: var(--akzent); cursor: pointer;
}
.option-text { flex: 1; color: var(--tinte); line-height: 1.5; }
.optionen--kacheln .option { align-items: center; padding: .85rem 1rem; }
.optionen--kacheln .option input { margin-top: 0; }
.option--karte { flex-direction: column; gap: .6rem; padding: 1rem; }
.option--karte input { margin: 0; }
.karte-titel { display: block; font-size: 1.05rem; color: var(--tinte); }
.karte-text { display: block; margin-top: .35rem; font-size: .92rem; line-height: 1.5; color: var(--text); }
.freitext {
  display: block; width: 100%; margin-top: .5rem; font: inherit; font-size: .95rem; color: var(--tinte);
  padding: .5rem .7rem; border: 1px solid var(--linie-stark); border-radius: 8px; background: var(--flaeche);
}
.freitext:focus { outline: 3px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); }
textarea.freitext { margin-top: .6rem; resize: vertical; min-height: 6rem; }

.folgefeld { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--linie-stark); }
.folgefeld-titel { font-weight: 650; color: var(--tinte); }

.matrix { display: grid; gap: .7rem; margin-top: 1.15rem; }
.matrix fieldset { margin: 0; padding: .8rem 1rem .9rem; border: 1.5px solid var(--linie); border-radius: 10px; background: var(--inset); }
.matrix legend { padding: 0 .35rem; font-weight: 600; color: var(--tinte); font-size: .98rem; }
.pillen { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .2rem; }
.pillen--abschluss { margin-top: .6rem; }
.pille { cursor: pointer; }
.pille span {
  display: inline-block; min-width: 2.8rem; text-align: center; padding: .4rem .8rem;
  border: 1.5px solid var(--linie-stark); border-radius: 8px; font-size: .95rem; color: var(--text); background: var(--flaeche);
  transition: background .12s, border-color .12s, color .12s;
}
.pille:hover span { border-color: var(--akzent); background: var(--akzent-hell); }
.pille input:checked + span { background: var(--akzent-fest); border-color: var(--akzent-fest); color: #fff; }
.pille input:focus-visible + span { outline: 3px solid var(--akzent); outline-offset: 2px; }

.feld { display: block; margin-top: .85rem; font-size: .92rem; color: var(--gedaempft); }
.feld .freitext { margin-top: .25rem; font-size: 1rem; }
.einwilligung { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1rem; font-size: .92rem; }
.einwilligung input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .25rem; accent-color: var(--akzent); }
.kontakt-block { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px dashed var(--linie-stark); }
.abschluss-frage { display: block; margin-top: 1.1rem; font-size: 1.05rem; font-weight: 600; color: var(--tinte); }
.abschluss-frage + .frage-typ { margin-top: .15rem; }

.aktionen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; }
.aktionen--links { justify-content: flex-start; }
.danke-symbol {
  width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--akzent-hell); color: var(--akzent); margin-bottom: 1rem;
}

/* ------------------------------------------------------------ Fuß */

.fuss { margin-top: 2.5rem; padding-bottom: 3rem; font-size: .9rem; color: var(--gedaempft); }
.fuss details { border-top: 1px solid var(--linie); padding: .7rem 0; }
.fuss summary { cursor: pointer; }
.fuss details p { margin-top: .5rem; }
.fuss-zeile { margin-top: 1rem; font-size: .85rem; }
.rechtstext { margin-top: .6rem; color: var(--text); font-size: .92rem; line-height: 1.6; }
.rechtstext p + p { margin-top: .6rem; }
.rechtstext dl { margin: 0; }
.rechtstext dt { margin-top: .9rem; font-weight: 650; color: var(--tinte); }
.rechtstext dt:first-child { margin-top: 0; }
.rechtstext dd { margin: .15rem 0 0; }
.rechtstext ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.rechtstext li + li { margin-top: .3rem; }
.einwilligung-link { margin-top: .4rem; padding-left: 1.8rem; }

/* ------------------------------------------------------------ Passwortseite */

.zugang { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.zugang-karte { width: min(100%, 24rem); padding: 1.75rem 1.6rem; }
.zugang-karte h1 { font-size: 1.3rem; }
.zugang-karte p { margin-top: .6rem; }
.zugang-karte .meldung { margin-top: 1rem; }
.zugang-karte .freitext { margin-top: 1.1rem; font-size: 1rem; }
.zugang-karte .knopf { width: 100%; margin-top: .9rem; }

/* ------------------------------------------------------------ Fehlerseite */

.fehlerseite { padding-block: 4rem; }
.fehlerseite h1 { font-size: 1.6rem; }
.fehlerseite p { margin-top: .75rem; }

/* ------------------------------------------------------------ Schmale Bildschirme */

@media (max-width: 30rem) {
  .kopf nav a:not(.knopf) { display: none; }
  .marke { font-size: .95rem; }
}

@keyframes einblenden { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }