/* ==========================================================================
   Wissensseiten: cybersecurity.html und ki-compliance.html
   Ergänzt stil.css; wird nur von diesen beiden Seiten geladen.
   Keine style-Attribute im HTML; Positionen setzt wissen.js per CSSOM.
   ========================================================================== */

.verlauf--rot { background-image: linear-gradient(90deg, var(--rot), var(--pink) 55%, var(--gelb)); }
.verlauf--violett { background-image: linear-gradient(90deg, #9b8cff, var(--himmel) 50%, var(--tuerkis)); }
.pille--violett { border-color: #9b8cff; color: #b9adff; }
.marke--violett { color: #b9adff; }
.wissen .abschnitt { scroll-margin-top: 20px; }
.wissen .fussnote a, .wissen .vertiefung a, .wissen .feld a { color: var(--himmel); }

/* Sprungleiste */
.sprungleiste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(22px, 3vw, 32px); }
.sprungleiste a {
  padding: 8px 14px;
  border: 1.5px solid var(--linie-stark);
  border-radius: 999px;
  font: 700 12px/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.sprungleiste a:hover, .sprungleiste a:focus-visible { border-color: var(--tuerkis); color: var(--tuerkis); }

/* ---------- Akteursdatenbank ---------- */
.akteur-steuerung[hidden] { display: none; }
.akteur-steuerung {
  display: grid;
  gap: 18px;
  margin: clamp(28px, 4vw, 40px) 0 22px;
  padding: 20px 22px;
  border: 2px solid var(--term-rand);
  border-radius: var(--radius);
  background: rgb(5 4 11 / .55);
}
@media (min-width: 900px) { .akteur-steuerung { grid-template-columns: 1fr 1fr; } .akteur-steuerung .suche, .akteur-treffer { grid-column: 1 / -1; } }
.akteur-treffer { margin: 0; font: 400 13px/1.4 var(--mono); color: var(--gedaempft); }
.chip[data-staat="ru"] { --c: var(--rot); }
.chip[data-staat="cn"] { --c: var(--gelb); }
.chip[data-staat="ir"] { --c: var(--tuerkis); }
.chip[data-staat="kp"] { --c: #9b8cff; }
.chip[data-staat="weitere"] { --c: var(--himmel); }
.chip[data-staat="krim"] { --c: var(--pink); }
.chip[data-motiv="spionage"] { --c: var(--himmel); }
.chip[data-motiv="sabotage"] { --c: var(--rot); }
.chip[data-motiv="geld"] { --c: var(--gelb); }
.chip[data-motiv="einfluss"] { --c: #9b8cff; }

.akteure {
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  align-items: start;
  margin-top: 22px;
}
.akteur {
  --f: var(--tuerkis);
  position: relative;
  min-width: 0;
  padding: 18px 20px 16px;
  border: 2px solid var(--term-rand);
  border-radius: 18px;
  background: rgb(5 4 11 / .55);
  transition: border-color .25s, transform .25s var(--ease);
}
.akteur[hidden] { display: none; }
.akteur:target { border-color: var(--tuerkis); box-shadow: 0 0 40px -14px var(--tuerkis); }
.akteur:hover { border-color: var(--linie-stark); }
.akteur[data-staat="ru"] { --f: var(--rot); }
.akteur[data-staat="cn"] { --f: var(--gelb); }
.akteur[data-staat="ir"] { --f: var(--tuerkis); }
.akteur[data-staat="kp"] { --f: #9b8cff; }
.akteur[data-staat="weitere"] { --f: var(--himmel); }
.akteur[data-staat="krim"] { --f: var(--pink); }
.akteur::before {
  content: "";
  position: absolute;
  left: 18px; right: 18px; top: -2px;
  height: 2px;
  background: var(--f);
  box-shadow: 0 0 14px var(--f);
  border-radius: 2px;
}
.akteur-staat { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 11.5px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--f); }
.akteur-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--f); box-shadow: 0 0 10px var(--f); }
.akteur-name { margin: 8px 0 2px; font: 800 22px/1.15 var(--sans); letter-spacing: -.02em; color: var(--text); overflow-wrap: anywhere; }
.akteur-name small { font: 600 14px/1.2 var(--sans); color: var(--gedaempft); letter-spacing: 0; }
.akteur-dienst { margin: 0 0 10px; font: 400 12.5px/1.45 var(--mono); color: var(--gedaempft); }
.akteur-lage { margin: 0 0 12px; font: 400 15px/1.55 var(--sans); color: var(--text-2); }
.akteur-motive { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; }
.akteur-motive li {
  --c: var(--himmel);
  padding: 4px 9px;
  border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent);
  border-radius: 999px;
  font: 700 10.5px/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c);
}
.akteur-motive li[data-motiv="sabotage"] { --c: var(--rot); }
.akteur-motive li[data-motiv="geld"] { --c: var(--gelb); }
.akteur-motive li[data-motiv="einfluss"] { --c: #b9adff; }
.akteur-mehr { border-top: 1px solid var(--linie); padding-top: 10px; }
.akteur-mehr summary {
  cursor: pointer;
  list-style: none;
  font: 700 12px/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.akteur-mehr summary::-webkit-details-marker { display: none; }
.akteur-mehr summary::before { content: "+ "; color: var(--f); }
.akteur-mehr[open] summary::before { content: "− "; }
.akteur-mehr summary:hover { color: var(--text); }
.akteur-daten { margin: 12px 0 0; display: grid; gap: 8px; }
.akteur-daten dt { font: 700 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gedaempft); }
.akteur-daten dd { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--text-2); }
.akteur-ops { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.akteur-ops li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; font: 400 14px/1.5 var(--sans); color: var(--text-2); }
.akteur-jahr { font: 800 13px/1.5 var(--mono); color: var(--f); }
.akteur-quelle { margin: 12px 0 0; font: 400 11.5px/1.5 var(--mono); color: var(--gedaempft); }

/* ---------- Chronik ---------- */
.chronik-steuerung[hidden] { display: none; }
.chronik-steuerung { margin: 24px 0 8px; }
.chronik {
  list-style: none;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0 0 0 4px;
  position: relative;
}
.chronik::before {
  content: "";
  position: absolute;
  left: 61px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--tuerkis), var(--pink) 60%, var(--rot));
  opacity: .35;
}
.chronik-eintrag {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 28px;
  padding: 10px 0;
}
.chronik-eintrag[hidden] { display: none; }
.chronik-eintrag::after {
  content: "";
  position: absolute;
  left: 52px; top: 16px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--grund-1);
  border: 2px solid var(--f);
  box-shadow: 0 0 12px var(--f);
}
.chronik-jahr { grid-row: span 2; font: 800 18px/1.4 var(--sans); letter-spacing: -.02em; color: var(--text); }
.chronik-text { font: 400 15.5px/1.5 var(--sans); color: var(--text); }
.chronik-wer { margin-top: 2px; font: 400 12px/1.5 var(--mono); color: var(--f); }
.chronik-quelle { color: var(--gedaempft); }
@media (max-width: 560px) {
  .chronik::before { left: 49px; }
  .chronik-eintrag { grid-template-columns: 44px 1fr; column-gap: 22px; }
  .chronik-eintrag::after { left: 40px; }
  .chronik-jahr { font-size: 15px; }
}

/* ---------- Angriffskette und Bedrohungen ---------- */
.kette { margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 1000px) { .kette { grid-template-columns: repeat(5, 1fr); } .kette li::after { content: "→"; position: absolute; right: -16px; top: 22px; font: 700 18px var(--mono); color: var(--gedaempft); } .kette li:last-child::after { content: none; } }
.bedrohungen .feld h3 { font-size: 21px; }
.bedrohungen .feld:nth-child(5) { --c: #9b8cff; }
.bedrohungen .feld:nth-child(6) { --c: var(--rot); }
.bedrohungen .feld:nth-child(7) { --c: var(--kupfer); }
.bedrohungen .feld:nth-child(8) { --c: var(--eis); }

/* ---------- Rechtsakte ---------- */
.rechtsakte {
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  margin-top: clamp(28px, 4vw, 44px);
}
.rechtsakt {
  --c: var(--tuerkis);
  padding: 18px 20px 20px;
  border: 2px solid color-mix(in srgb, var(--c) 35%, var(--term-rand));
  border-radius: 18px;
  background: color-mix(in srgb, var(--c) 3%, rgb(5 4 11 / .5));
}
.rechtsakt[data-status="teilweise"] { --c: var(--gelb); }
.rechtsakt[data-status="spaeter"] { --c: #9b8cff; }
.rechtsakt[data-status="vorschlag"] { --c: var(--gedaempft); }
.rechtsakt-kopf { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gedaempft); }
.rechtsakt-status { padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.rechtsakt h3 { margin: 10px 0 4px; font: 800 20px/1.2 var(--sans); letter-spacing: -.02em; color: var(--text); }
.rechtsakt-norm { margin: 0 0 10px; font: 400 12.5px/1.45 var(--mono); color: var(--c); }
.rechtsakt p:last-child { margin: 0; font: 400 14.5px/1.55 var(--sans); color: var(--text-2); }

/* ---------- Diagramm: Meldefristen (wissen.js) ---------- */
.dg-fristen { display: grid; gap: 18px; padding-top: 4px; }
.fr-zeile { display: grid; grid-template-columns: minmax(96px, 150px) 1fr; gap: 14px; align-items: center; }
.fr-name { font: 700 13px/1.3 var(--mono); color: var(--text-2); }
.fr-spur { position: relative; height: 34px; border-radius: 8px; background: rgb(216 212 240 / .05); }
.fr-balken { position: absolute; left: 0; top: 15px; height: 4px; width: 0; border-radius: 4px; background: var(--f); box-shadow: 0 0 12px var(--f); transition: width 1.2s var(--ease); }
.fr-punkt { position: absolute; top: 9px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--grund-1); border: 3px solid var(--f); opacity: 0; transition: opacity .4s; }
.dg-fristen.sichtbar .fr-punkt { opacity: 1; }
.fr-punkt span { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); white-space: nowrap; font: 700 11px/1 var(--mono); color: var(--text); }
.fr-achse { position: relative; height: 18px; margin-left: calc(min(150px, 30%) + 14px); }
.fr-achse span { position: absolute; transform: translateX(-50%); font: 400 10.5px/1 var(--mono); color: var(--gedaempft); white-space: nowrap; }
@media (max-width: 560px) { .fr-zeile { grid-template-columns: 1fr; gap: 4px; } .fr-achse { margin-left: 0; } .fr-punkt span { font-size: 9.5px; } }

/* ---------- Stichtage ---------- */
.regel-unten { align-items: start; }
@media (min-width: 900px) { .regel-unten { grid-template-columns: 1fr 1.2fr; } }
.stichtage { list-style: none; margin: 14px 0 0; padding: 0; }
.stichtage li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.stichtage time { font: 700 13px/1.5 var(--mono); color: var(--tuerkis); }
.stichtage span { font: 400 14.5px/1.5 var(--sans); color: var(--text-2); }
.stichtage li[data-zeit="kommt"] time { color: var(--gelb); }
.stichtage li[data-zeit="kommt"] span::after { content: " · kommt"; font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gelb); }

/* ---------- Lehre und Publikationen ---------- */
.lehre {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  padding: clamp(22px, 3vw, 36px);
  border: 2px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(var(--term), var(--term)) padding-box,
    linear-gradient(120deg, var(--tuerkis), var(--himmel) 40%, #9b8cff) border-box;
}
@media (min-width: 900px) { .lehre { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.lehre-text p { color: var(--text-2); }
.lehre-text .abschnitt-titel { margin-bottom: 14px; }
.lehre-liste { list-style: none; margin: 0; padding: 0; }
.lehre-liste li { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.lehre-liste li:last-child { border-bottom: 0; }
.lehre-liste b { display: block; font: 700 15.5px/1.35 var(--sans); color: var(--text); }
.lehre-liste span { display: block; margin-top: 2px; font: 400 12.5px/1.4 var(--mono); color: var(--gedaempft); }

/* ==========================================================================
   KI-Compliance
   ========================================================================== */

/* Risikopyramide */
.pyramide-raster { display: grid; gap: clamp(22px, 3vw, 40px); margin-top: clamp(28px, 4vw, 44px); align-items: center; }
@media (min-width: 900px) { .pyramide-raster { grid-template-columns: 1.15fr 1fr; } }
.pyramide { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; justify-items: center; }
.pyramide li {
  --c: var(--rot);
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 72px;
  padding: 10px 14px;
  text-align: center;
  background: color-mix(in srgb, var(--c) 16%, rgb(5 4 11 / .6));
  border-top: 2px solid var(--c);
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
}
.pyramide li:nth-child(1) { width: 40%; --c: var(--rot); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.pyramide li:nth-child(2) { width: 60%; --c: var(--pink); }
.pyramide li:nth-child(3) { width: 80%; --c: var(--gelb); }
.pyramide li:nth-child(4) { width: 100%; --c: var(--tuerkis); }
.pyr-titel { font: 800 clamp(15px, 1.7vw, 19px)/1.15 var(--sans); color: var(--text); }
.pyr-text { margin-top: 3px; font: 400 clamp(11px, 1.1vw, 12.5px)/1.35 var(--mono); color: var(--text-2); }
@media (max-width: 560px) { .pyramide li:nth-child(1) { width: 62%; } .pyramide li:nth-child(2) { width: 76%; } .pyramide li:nth-child(3) { width: 90%; } }
.pyramide-gpai { margin-top: 12px; padding: 12px 16px; border: 2px dashed color-mix(in srgb, var(--himmel) 55%, transparent); border-radius: 14px; font: 400 13.5px/1.5 var(--sans); color: var(--text-2); }
.pyramide-gpai b { color: var(--himmel); }

/* Verschiebung durch den KI-Omnibus */
.verschiebung { list-style: none; margin: 14px 0 0; padding: 0; }
.verschiebung li { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--linie); }
.vs-was { font: 500 14.5px/1.4 var(--sans); color: var(--text-2); }
.vs-alt { font: 400 12.5px/1.4 var(--mono); color: var(--gedaempft); text-decoration-color: var(--rot); }
.vs-pfeil { font: 700 13px var(--mono); color: var(--gedaempft); }
.vs-neu { font: 700 13px/1.4 var(--mono); color: var(--gelb); }
.verschiebung li[data-art="neu"] .vs-neu { color: var(--rot); }
.verschiebung li[data-art="gilt"] .vs-neu { color: var(--tuerkis); }
@media (max-width: 560px) { .verschiebung li { grid-template-columns: 1fr auto; } .vs-was { grid-column: 1 / -1; } .vs-pfeil { display: none; } }

/* Rollen-Check */
.rollen-check[hidden] { display: none; }
.rollen-check {
  padding: 20px 22px;
  border: 2px solid var(--term-rand);
  border-radius: var(--radius);
  background: var(--term);
}
.rollen-check fieldset { margin: 0 0 14px; padding: 0; border: 0; }
.rollen-check legend { margin-bottom: 8px; font: 600 15px/1.4 var(--sans); color: var(--text); }
.rollen-check label { display: inline-flex; align-items: center; gap: 8px; margin: 0 16px 6px 0; font: 400 14px/1.4 var(--mono); color: var(--text-2); cursor: pointer; }
.rollen-check input { accent-color: var(--tuerkis); width: 16px; height: 16px; }
.rollen-ergebnis { margin: 6px 0 0; padding: 14px 16px; border-left: 3px solid var(--tuerkis); border-radius: 0 12px 12px 0; background: rgb(0 255 200 / .05); font: 400 14.5px/1.55 var(--sans); color: var(--text); }
.rollen-ergebnis b { color: var(--tuerkis); }

/* Vergleichstabelle */
.vergleich-huelle { overflow-x: auto; margin-top: clamp(24px, 3vw, 36px); border: 2px solid var(--term-rand); border-radius: var(--radius); background: rgb(5 4 11 / .5); }
.vergleich { width: 100%; min-width: 640px; border-collapse: collapse; }
.vergleich th, .vergleich td { padding: 14px 16px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; font: 400 14px/1.5 var(--sans); color: var(--text-2); }
.vergleich thead th { font: 700 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gedaempft); }
.vergleich tbody th { font: 800 16px/1.3 var(--sans); color: var(--text); white-space: nowrap; }
.vergleich tr:last-child th, .vergleich tr:last-child td { border-bottom: 0; }

/* Zwei Welten (Risiko und Ungewissheit) */
.welten { display: grid; gap: clamp(14px, 1.8vw, 20px); margin-top: clamp(24px, 3vw, 36px); }
@media (min-width: 760px) { .welten { grid-template-columns: 1fr 1fr; } }
.welt-karte { --c: var(--himmel); padding: 20px 22px; border: 2px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--c) 4%, rgb(5 4 11 / .45)); }
.welt-karte + .welt-karte { --c: var(--pink); }
.welt-karte h3 { margin: 6px 0 8px; font: 800 22px/1.15 var(--sans); color: var(--text); }
.welt-karte p { margin: 0 0 10px; font: 400 15px/1.55 var(--sans); color: var(--text-2); }
.welt-karte .feld-kopf { color: var(--c); }
.werkzeug-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.werkzeug-chips span { padding: 4px 10px; border: 1.5px solid color-mix(in srgb, var(--c) 50%, transparent); border-radius: 999px; font: 600 12px/1.3 var(--mono); color: var(--text-2); }

/* Kreislauf (Automationsbias) */
.kreislauf { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; display: grid; gap: 34px; counter-reset: k; }
.kreislauf li {
  --c: var(--pink);
  position: relative;
  padding: 16px 18px;
  border: 2px solid color-mix(in srgb, var(--c) 50%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--c) 5%, rgb(5 4 11 / .5));
  counter-increment: k;
}
.kreislauf li:nth-child(2) { --c: var(--gelb); }
.kreislauf li:nth-child(3) { --c: #9b8cff; }
.kreislauf li:nth-child(4) { --c: var(--rot); }
.kreislauf b { display: block; font: 800 17px/1.25 var(--sans); color: var(--text); }
.kreislauf b::before { content: counter(k) " · "; font: 700 13px var(--mono); color: var(--c); }
.kreislauf span { display: block; margin-top: 4px; font: 400 14px/1.5 var(--sans); color: var(--text-2); }
.kreislauf li::after { content: "↓"; position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); font: 700 20px var(--mono); color: var(--gedaempft); }
.kreislauf li:last-child::after { content: "↺ zurück zu 1"; font-size: 12px; letter-spacing: .1em; bottom: -28px; white-space: nowrap; }
@media (min-width: 760px) {
  .kreislauf { grid-template-columns: 1fr 1fr; gap: 44px 70px; }
  .kreislauf li:nth-child(1)::after { content: "→"; left: auto; right: -50px; bottom: auto; top: 50%; transform: translateY(-50%); }
  .kreislauf li:nth-child(2)::after { content: "↓"; }
  .kreislauf li:nth-child(3) { grid-column: 2; grid-row: 2; }
  .kreislauf li:nth-child(4) { grid-column: 1; grid-row: 2; }
  .kreislauf li:nth-child(3)::after { content: "←"; left: -50px; bottom: auto; top: 50%; transform: translateY(-50%); }
  .kreislauf li:nth-child(4)::after { content: "↑"; bottom: auto; top: -38px; font-size: 20px; letter-spacing: 0; }
}

/* Schema-Diagramm Deskilling (Inline-SVG) */
.schema { margin: 0; padding: 20px 22px 18px; border: 2px solid var(--term-rand); border-radius: var(--radius); background: rgb(5 4 11 / .5); }
.schema svg { display: block; width: 100%; height: auto; }
.schema .s-achse { stroke: var(--linie-stark); stroke-width: 1.5; fill: none; }
.schema .s-mit { stroke: var(--tuerkis); stroke-width: 3; fill: none; filter: drop-shadow(0 0 4px rgb(0 255 200 / .5)); }
.schema .s-ohne { stroke: var(--pink); stroke-width: 3; fill: none; stroke-dasharray: 7 6; }
.schema .s-luecke { fill: rgb(255 46 136 / .08); stroke: none; }
.schema text { fill: var(--gedaempft); font: 400 12px var(--mono); }
.schema .s-text-mit { fill: var(--tuerkis); font-weight: 700; }
.schema .s-text-ohne { fill: var(--pink); font-weight: 700; }
.schema .s-text-luecke { fill: var(--text-2); }
.js .schema .s-mit, .js .schema .s-ohne { stroke-dashoffset: 0; }

/* Studienkarten */
.studien { display: grid; gap: clamp(14px, 1.8vw, 20px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin-top: clamp(24px, 3vw, 36px); }
.studie { --c: var(--tuerkis); padding: 18px 20px; border-top: 2px solid var(--c); background: rgb(5 4 11 / .45); border-radius: 0 0 16px 16px; }
.studie:nth-child(2) { --c: var(--pink); }
.studie:nth-child(3) { --c: var(--gelb); }
.studie:nth-child(4) { --c: var(--himmel); }
.studie:nth-child(5) { --c: #9b8cff; }
.studie:nth-child(6) { --c: var(--rot); }
.studie-zahl { display: block; font: 800 clamp(32px, 4vw, 44px)/1 var(--sans); letter-spacing: -.03em; color: var(--c); }
.studie p { margin: 10px 0 8px; font: 400 14.5px/1.55 var(--sans); color: var(--text-2); }
.studie cite { display: block; font: 400 11.5px/1.45 var(--mono); font-style: normal; color: var(--gedaempft); }

/* Checkliste */
.checkliste { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; display: grid; gap: 10px 28px; counter-reset: c; }
@media (min-width: 900px) { .checkliste { grid-template-columns: 1fr 1fr; } }
.checkliste li { position: relative; padding: 12px 0 12px 46px; border-bottom: 1px solid var(--linie); counter-increment: c; font: 400 15px/1.5 var(--sans); color: var(--text-2); }
.checkliste li::before { content: counter(c, decimal-leading-zero); position: absolute; left: 0; top: 12px; font: 800 15px/1.5 var(--mono); color: var(--tuerkis); }
.checkliste b { color: var(--text); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .fr-balken, .fr-punkt, .akteur { transition: none; }
}

.studien--zwei { margin-top: 0; align-content: start; }
@media (min-width: 560px) { .studien--zwei { grid-template-columns: 1fr 1fr; } }
.vs-pfeil::before { content: "→"; }
.pfeil-link--weiter::after { content: " →"; }

/* ==========================================================================
   Länder-Steckbriefe: Slider mit Terminal-Karten, Umriss als Punktraster,
   Steckbrief im Popup (<dialog>, von wissen.js gebaut)
   ========================================================================== */
.land[data-staat="ru"], .landbrief[data-staat="ru"], .landbrief-dialog[data-staat="ru"] { --f: var(--rot); }
.land[data-staat="cn"], .landbrief[data-staat="cn"], .landbrief-dialog[data-staat="cn"] { --f: var(--gelb); }
.land[data-staat="ir"], .landbrief[data-staat="ir"], .landbrief-dialog[data-staat="ir"] { --f: var(--tuerkis); }
.land[data-staat="kp"], .landbrief[data-staat="kp"], .landbrief-dialog[data-staat="kp"] { --f: #9b8cff; }

.umriss-symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
.land-slider { position: relative; margin-top: clamp(28px, 4vw, 44px); }
.land-spur {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 6px 2px 20px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(50% - 10px);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--term-rand) transparent;
}
@media (max-width: 760px) { .land-spur { grid-auto-columns: 88%; gap: 14px; } }
.land {
  --f: var(--tuerkis);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 2px solid color-mix(in srgb, var(--f) 45%, var(--term-rand));
  border-radius: var(--radius);
  background: var(--term);
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.land:hover, .land:focus-within { border-color: var(--f); box-shadow: 0 0 60px -24px var(--f); }
.land-leiste { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--term-rand); font: 600 12.5px/1.2 var(--mono); }
.land-befehl { color: var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.land-nr { margin-left: auto; color: var(--gedaempft); letter-spacing: .12em; }
.land-bild {
  position: relative;
  height: clamp(190px, 22vw, 250px);
  padding: 18px 22px 10px;
  background:
    radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--f) 10%, transparent), transparent 70%),
    repeating-linear-gradient(0deg, rgb(216 212 240 / .045) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgb(216 212 240 / .045) 0 1px, transparent 1px 22px);
  overflow: hidden;
}
.land-bild::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -40%;
  height: 40%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--f) 16%, transparent) 85%, transparent);
  animation: abtasten 4.5s linear infinite;
  pointer-events: none;
}
@keyframes abtasten { to { transform: translateY(350%); } }
.land-umriss, .landbrief-umriss { display: block; width: 100%; height: 100%; overflow: visible; }
.lu-raster { fill: var(--f); opacity: .78; }
.lu-linie { fill: none; stroke: var(--f); stroke-width: 1.4; opacity: .55; vector-effect: non-scaling-stroke; }
.land:hover .lu-raster { opacity: 1; }
.lu-punkt { fill: #fff; }
.lu-puls { fill: none; stroke: #fff; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: puls 2.2s ease-out infinite; }
@keyframes puls { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.lu-ziel text { fill: var(--text); font-family: var(--mono); font-weight: 700; letter-spacing: .08em; paint-order: stroke; stroke: var(--term); }
.lu-ziel .lu-koord { fill: var(--gedaempft); font-weight: 400; }
.land-flagge, .landbrief-flagge {
  display: block;
  width: 56px;
  line-height: 0;
  border: 1px solid rgb(216 212 240 / .35);
  box-shadow: 0 0 18px -4px var(--f);
}
.land-flagge { position: absolute; top: 14px; right: 16px; animation: flimmern 7s steps(1) infinite; }
.land-flagge svg, .landbrief-flagge svg { display: block; width: 100%; height: auto; }
@keyframes flimmern { 0%, 92%, 100% { transform: none; opacity: 1; } 93% { transform: translateX(-2px); opacity: .7; } 95% { transform: translateX(2px) skewX(-6deg); opacity: .85; } 97% { transform: none; opacity: .6; } }
.land-name { margin: 16px 20px 4px; font: 800 clamp(26px, 3vw, 34px)/1.05 var(--sans); letter-spacing: -.03em; color: var(--text); }
.land-kurz { margin: 0 20px 14px; font: 400 15px/1.55 var(--sans); color: var(--text-2); }
.land-daten { margin: 0 20px 18px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font: 400 12.5px/1.45 var(--mono); }
.land-daten dt { color: var(--f); text-transform: uppercase; letter-spacing: .12em; }
.land-daten dd { margin: 0; color: var(--text-2); }
.land-knopf {
  margin: auto 20px 20px;
  align-self: flex-start;
  padding: 11px 18px;
  border: 2px solid var(--f);
  border-radius: 999px;
  font: 700 13px/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--f);
  text-decoration: none;
  transition: background .2s, box-shadow .2s;
}
.land-knopf::after { content: " >_"; }
.land-knopf:hover, .land-knopf:focus-visible { background: color-mix(in srgb, var(--f) 14%, transparent); box-shadow: 0 0 26px -6px var(--f); text-decoration: none; }

/* Steuerung (von wissen.js eingefügt) */
.land-steuerung { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.land-pfeil {
  width: 44px; height: 44px;
  border: 2px solid var(--linie-stark);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font: 700 18px/1 var(--mono);
  cursor: pointer;
  transition: border-color .2s, color .2s, opacity .2s;
}
.land-pfeil:hover:not(:disabled) { border-color: var(--tuerkis); color: var(--tuerkis); }
.land-pfeil:disabled { opacity: .3; cursor: default; }
.land-punkte { display: flex; gap: 8px; }
.land-punkte button {
  --f: var(--tuerkis);
  width: 30px; height: 6px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--linie-stark);
  cursor: pointer;
  transition: background .2s, width .2s;
}
.land-punkte button[data-staat="ru"] { --f: var(--rot); }
.land-punkte button[data-staat="cn"] { --f: var(--gelb); }
.land-punkte button[data-staat="ir"] { --f: var(--tuerkis); }
.land-punkte button[data-staat="kp"] { --f: #9b8cff; }
.land-punkte button[aria-current="true"] { width: 46px; background: var(--f); box-shadow: 0 0 12px var(--f); }
.land-zaehler { margin-left: auto; font: 600 12.5px var(--mono); letter-spacing: .12em; color: var(--gedaempft); }

/* Steckbriefe: ohne JavaScript untereinander auf der Seite, mit JavaScript im Popup */
.landbriefe { display: grid; gap: clamp(28px, 4vw, 48px); margin-top: clamp(36px, 5vw, 60px); }
.landbriefe[hidden] { display: none; }
.landbrief {
  --f: var(--tuerkis);
  padding: clamp(20px, 3.4vw, 40px);
  border: 2px solid color-mix(in srgb, var(--f) 40%, var(--term-rand));
  border-radius: var(--radius);
  background: rgb(5 4 11 / .6);
}
.landbrief-kopf { display: flex; align-items: center; gap: 18px; }
.landbrief-flagge { width: 76px; flex: none; }
.landbrief-titel { margin: 4px 0 0; font: 800 clamp(30px, 4.4vw, 48px)/1 var(--sans); letter-spacing: -.035em; color: var(--text); }
.landbrief-kopf .etikett { color: var(--f); }
.landbrief-held { display: grid; gap: 18px; align-items: center; margin-top: 22px; }
@media (min-width: 760px) { .landbrief-held { grid-template-columns: 1.1fr 1fr; } }
.landbrief-umriss { height: clamp(170px, 24vw, 250px); }
.landbrief-kurz { margin: 0; font: 700 clamp(18px, 2vw, 22px)/1.4 var(--sans); color: var(--text); }
.landbrief-zahlen { display: grid; gap: 14px; margin: 26px 0 8px; }
@media (min-width: 640px) { .landbrief-zahlen { grid-template-columns: repeat(3, 1fr); } }
.landbrief-zahlen p { margin: 0; padding-top: 12px; border-top: 2px solid var(--f); }
.landbrief-zahlen b { display: block; font: 800 clamp(28px, 3.4vw, 40px)/1 var(--sans); letter-spacing: -.03em; color: var(--f); }
.landbrief-zahlen span { display: block; margin-top: 6px; font: 400 12.5px/1.45 var(--mono); color: var(--gedaempft); }
.landbrief h4 { margin: 32px 0 10px; font: 800 clamp(19px, 2vw, 23px)/1.25 var(--sans); letter-spacing: -.02em; color: var(--text); }
.landbrief h4::before { content: "> "; font-family: var(--mono); color: var(--f); }
.landbrief p { max-width: 76ch; color: var(--text-2); }
.landbrief-akteur { color: var(--f); text-decoration-color: color-mix(in srgb, var(--f) 50%, transparent); }
.landbrief-quelle { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--linie); font: 400 12px/1.55 var(--mono); color: var(--gedaempft); }

/* Grafiken im Steckbrief */
.landbrief-grafik { margin: 22px 0 6px; padding: 18px 20px; border: 1px dashed color-mix(in srgb, var(--f) 50%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--f) 4%, transparent); }
.landbrief-grafik figcaption { margin-bottom: 14px; color: var(--f); }
.landbrief-grafik ol { list-style: none; margin: 0; padding: 0; }
.landbrief-grafik li b { display: block; font: 800 16px/1.25 var(--sans); color: var(--text); }
.landbrief-grafik li span { display: block; margin-top: 4px; font: 400 13.5px/1.45 var(--sans); color: var(--text-2); }
.grafik-kette ol { display: grid; gap: 30px; }
.grafik-kette li { position: relative; padding: 12px 14px; border: 1.5px solid color-mix(in srgb, var(--f) 55%, transparent); border-radius: 12px; background: var(--term); }
.grafik-kette li::after { content: "↓"; position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); font: 700 16px var(--mono); color: var(--f); }
.grafik-kette li:last-child::after { content: none; }
@media (min-width: 760px) {
  .grafik-kette ol { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 28px; }
  .grafik-kette li::after { content: "→"; left: auto; right: -22px; bottom: auto; top: 50%; transform: translateY(-50%); }
}
.grafik-ebenen ol { display: grid; gap: 6px; justify-items: center; }
.grafik-ebenen li { width: 100%; padding: 12px 16px; text-align: center; border-top: 2px solid var(--f); background: color-mix(in srgb, var(--f) 10%, var(--term)); clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%); }
.grafik-ebenen li:nth-child(1) { width: 52%; }
.grafik-ebenen li:nth-child(2) { width: 76%; }
@media (max-width: 560px) { .grafik-ebenen li:nth-child(1) { width: 78%; } .grafik-ebenen li:nth-child(2) { width: 90%; } }
.arbeitstag { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; height: 42px; }
.arbeitstag i { border-radius: 3px; background: rgb(216 212 240 / .07); }
.arbeitstag i.an { background: var(--f); box-shadow: 0 0 10px color-mix(in srgb, var(--f) 60%, transparent); }
.arbeitstag i.mittag { background: color-mix(in srgb, var(--f) 35%, transparent); }
.arbeitstag-achse { display: flex; justify-content: space-between; margin-top: 6px; font: 400 11px var(--mono); color: var(--gedaempft); }

/* Popup */
.landbrief-dialog {
  --f: var(--tuerkis);
  width: min(940px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 2px solid var(--f);
  border-radius: var(--radius);
  background: var(--grund-2);
  color: var(--text);
  box-shadow: 0 0 90px -20px var(--f);
  overflow: auto;
  overscroll-behavior: contain;
}
.landbrief-dialog::backdrop { background: rgb(5 4 11 / .8); backdrop-filter: blur(4px); }
.landbrief-dialog[open] { animation: dialog-ein .35s var(--ease); }
@keyframes dialog-ein { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.landbrief-dialog .landbrief { border: 0; border-radius: 0; background: transparent; }
.dialog-leiste {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 18px;
  border-bottom: 1px solid var(--term-rand);
  background: var(--term);
  font: 600 12.5px/1.2 var(--mono);
}
.dialog-leiste .land-befehl { color: var(--f); }
.dialog-schliessen {
  margin-left: auto;
  width: 38px; height: 38px;
  border: 2px solid var(--linie-stark);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font: 700 18px/1 var(--mono);
  cursor: pointer;
}
.dialog-schliessen:hover, .dialog-schliessen:focus-visible { border-color: var(--f); color: var(--f); }
html:has(.landbrief-dialog[open]) { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .land-bild::after, .lu-puls, .land-flagge, .landbrief-dialog[open] { animation: none; }
}