/* Seite „KI sicher einsetzen“ (ki-sicher-einsetzen.html). Baut auf tokens.css und site.css auf.
 * Ein starker Moment: die Zeichnung, die beim Lesen von der Halle bis ins Protokoll zoomt.
 * Gelb heißt hier wie auf Papier „markiert“ (Fundstelle, heute) und wie in ISO 3864
 * „Achtung“ (Hochrisiko); die Bedeutung steht immer zusätzlich im Text. */

:root { --warn-linie: #D9A800; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --warn-linie: #F2C230; } }
[data-theme="dark"] { --warn-linie: #F2C230; }

/* Kopf */
.recht-kopf { padding-block: 0 clamp(48px, 6vw, 88px); }
.recht-kopf .raster { row-gap: 48px; align-items: end; }
.recht-kopf h1 {
  font-size: clamp(2.25rem, 1.35rem + 3.4vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 14ch;
}
.recht-hinweis {
  margin-top: 24px;
  max-width: 60ch;
  padding-left: 14px;
  border-left: 3px solid var(--warn-linie);
  font-size: var(--t-klein);
  color: var(--c-text-sekundaer);
}
.recht-inhalt { border-top: 2px solid var(--c-akzent); padding-top: 14px; }
.recht-inhalt-titel { font-size: var(--t-klein); font-weight: 600; }
.recht-inhalt ol { margin-top: 6px; counter-reset: inhalt; }
.recht-inhalt li { counter-increment: inhalt; border-bottom: var(--rahmen); }
.recht-inhalt a {
  display: flex; gap: 12px;
  padding-block: 10px;
  color: var(--c-text); text-decoration: none;
  font-size: var(--t-klein);
}
.recht-inhalt a::before {
  content: counter(inhalt);
  min-width: 1.1em;
  color: var(--c-akzent-text);
  font-variant-numeric: tabular-nums;
}
.recht-inhalt a:hover { color: var(--c-akzent-text); }
@media (min-width: 960px) {
  .recht-kopf-text { grid-column: 1 / span 8; }
  .recht-inhalt { grid-column: 9 / -1; }
}

/* Zoom: Bühne aus Zeichnung und vier Ebenen */
.zoom-buehne { margin-top: clamp(32px, 5vw, 64px); align-items: start; }
.zoom {
  position: sticky; top: 0; z-index: 2;
  margin-inline: calc(-1 * var(--rand));
  padding: 10px var(--rand);
  background: var(--c-flaeche-erhoben);
  border-bottom: var(--rahmen);
}
.zoom-rahmen {
  position: relative;
  border: var(--rahmen);
  border-radius: var(--r-karte);
  background: var(--c-flaeche);
  overflow: hidden;
}
.zoom-bild { width: 100%; height: min(36svh, 64vw); }
.zoom-stand {
  position: absolute; left: 10px; bottom: 10px;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px 4px 10px;
  border: var(--rahmen); border-radius: var(--r-pille);
  background: var(--c-flaeche);
  font-size: var(--t-mini); font-weight: 600;
}
.zoom-schritte { display: flex; gap: 3px; }
.zoom-schritte span { width: 14px; height: 3px; border-radius: 2px; background: var(--c-linie); transition: background-color 300ms var(--aus); }
.zoom-schritte span:first-child,
.zoom[data-ebene="2"] .zoom-schritte span:nth-child(-n+2),
.zoom[data-ebene="3"] .zoom-schritte span:nth-child(-n+3),
.zoom[data-ebene="4"] .zoom-schritte span { background: var(--c-akzent); }
.zoom-name { display: none; }
.zoom:not([data-ebene]) .zoom-name[data-fuer="1"],
.zoom[data-ebene="1"] .zoom-name[data-fuer="1"],
.zoom[data-ebene="2"] .zoom-name[data-fuer="2"],
.zoom[data-ebene="3"] .zoom-name[data-fuer="3"],
.zoom[data-ebene="4"] .zoom-name[data-fuer="4"] { display: inline; }

/* Zeichnung. Striche bleiben bei jeder Vergrößerung gleich dick. */
.zoom-welt { transform-box: view-box; transform-origin: 0 0; }
.zoom-welt path, .zoom-welt rect, .zoom-welt circle {
  fill: none;
  stroke: var(--c-text-sekundaer);
  stroke-width: 1.5;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 300ms var(--aus), stroke-width 300ms var(--aus);
}
.zoom-welt .z-boden { stroke: var(--c-linie); }
.zoom-welt .z-fein { stroke: color-mix(in srgb, var(--c-text-sekundaer) 55%, var(--c-linie)); stroke-width: 1; }
.zoom-welt .z-verbindung { stroke-dasharray: 3 4; }
.zoom-welt .z-kreuz { stroke: var(--c-status-kritisch); stroke-width: 2; }
.zoom-welt .z-unterlagen rect { fill: var(--c-flaeche); }
.zoom-welt .z-schirm { fill: var(--c-flaeche-erhoben); stroke: none; }
.zoom-welt .z-lampe { fill: var(--c-akzent); stroke: none; }
.zoom-welt .z-feld { stroke: transparent; }
.zoom-welt .z-zeile { fill: var(--c-text-sekundaer); stroke: none; opacity: 0.5; }
.zoom-welt .z-zeile--dunkel { fill: var(--c-text); opacity: 0.7; }
.zoom-welt .z-marker { fill: var(--c-markierung); stroke: none; }
.zoom-welt .z-knopf { fill: var(--c-hauptknopf); stroke: none; }
.zoom-welt .z-trenner { stroke: var(--c-linie); stroke-width: 1; }
.zoom-welt .z-eintrag { fill: var(--c-flaeche); stroke-width: 1; }
.zoom-welt .z-kette { stroke: var(--c-akzent); }
.z-schrift { font-family: var(--f-sans); stroke: none; }
.z-kennung { font-size: 2.05px; font-weight: 500; fill: var(--c-text-sekundaer); }
.z-beleg { font-size: 1.75px; fill: var(--c-akzent-text); }
.z-knopf-text { font-size: 1.7px; font-weight: 600; fill: var(--c-hauptknopf-text); text-anchor: middle; }
.z-log { font-size: 1.5px; fill: var(--c-text-sekundaer); }
.z-log--neu { fill: var(--c-text); font-weight: 600; }

/* Hervorhebung der aktiven Ebene */
.zoom:not([data-ebene]) .zoom-welt .e1,
.zoom[data-ebene="1"] .zoom-welt .e1,
.zoom[data-ebene="2"] .zoom-welt .e2 { stroke: var(--c-akzent); stroke-width: 2.5; }
.zoom[data-ebene="3"] .zoom-welt .e3,
.zoom[data-ebene="4"] .zoom-welt .e4 { stroke: var(--c-akzent); stroke-width: 2; }

/* Einzelheiten erscheinen erst, wenn man nah genug ist */
.ab-2, .ab-3, .ab-4 { opacity: 0; transition: opacity 360ms var(--aus) 280ms; }
.zoom[data-ebene="2"] .ab-2,
.zoom[data-ebene="3"] .ab-2, .zoom[data-ebene="3"] .ab-3,
.zoom[data-ebene="4"] .ab-2, .zoom[data-ebene="4"] .ab-3, .zoom[data-ebene="4"] .ab-4 { opacity: 1; }

/* Vergrößerung je Ebene: translate(200 − s·x, 160 − s·y) scale(s), Ziel in der Bildmitte */
.zoom[data-ebene="2"] .zoom-welt { transform: translate(-584.5px, -536px) scale(3); }
.zoom[data-ebene="3"] .zoom-welt { transform: translate(-1870.5px, -1693.2px) scale(8.2); }
.zoom[data-ebene="4"] .zoom-welt { transform: translate(-2091.9px, -1693.2px) scale(8.2); }
@media (prefers-reduced-motion: no-preference) {
  .zoom-welt { transition: transform 1100ms cubic-bezier(0.55, 0, 0.2, 1); }
}

/* Die vier Ebenen als Text */
.ebenen { counter-reset: ebene; }
.ebene {
  counter-increment: ebene;
  padding-block: 40px 8px;
  scroll-margin-top: calc(36svh + 40px);
}
.ebene h3 {
  display: flex; align-items: center; gap: 14px;
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
  letter-spacing: -0.015em;
}
.ebene h3::before {
  content: counter(ebene);
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1.5px solid var(--c-akzent); border-radius: 50%;
  font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--c-akzent-text);
  transition: background-color 300ms var(--aus), color 300ms var(--aus);
}
.ebene.aktiv h3::before { background: var(--c-hauptknopf); color: var(--c-hauptknopf-text); }
.ebene-frage { margin-top: 12px; font-size: var(--t-einleitung); line-height: 1.5; max-width: 34em; }
.ebene-marke { font-size: var(--t-klein); font-weight: 600; color: var(--c-text); margin-bottom: 6px; }
.ebene-recht { margin-top: 24px; }
.ebene-recht p:not(.ebene-marke) { color: var(--c-text-sekundaer); max-width: 62ch; }
.ebene-convalo {
  margin-top: 20px;
  padding: 16px 20px 18px;
  border-left: 3px solid var(--c-akzent);
  border-radius: 0 var(--r-karte) var(--r-karte) 0;
  background: var(--c-flaeche);
  max-width: 66ch;
}
.ebene-convalo + .ebene-convalo { margin-top: 8px; }
.ebene-convalo--arbeit { border-left-style: dashed; border-left-color: var(--c-text-sekundaer); }
.ebene-convalo--arbeit p { color: var(--c-text-sekundaer); }
.ebene-convalo p + p { margin-top: 10px; }
.ebene-convalo .stufe { margin: 0 0 0 6px; white-space: nowrap; vertical-align: 1px; }
.ebene-rat { font-size: var(--t-klein); color: var(--c-text-sekundaer); }

@media (min-width: 960px) {
  .zoom {
    grid-column: 1 / span 6;
    top: max(24px, calc(50vh - 260px));
    margin: 0; padding: 0;
    background: none; border: 0;
  }
  .zoom-bild { height: auto; aspect-ratio: 5 / 4; max-height: min(70vh, 520px); }
  .ebenen { grid-column: 7 / -1; padding-left: clamp(0px, 2vw, 32px); }
  .ebene {
    min-height: 82vh;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: 48px;
    scroll-margin-top: 0;
  }
  .ebene:first-child { min-height: 70vh; justify-content: flex-start; padding-top: 8vh; }
}

/* Zeitplan */
.zeitleiste { margin-top: clamp(40px, 5vw, 64px); }
.zeitpunkt {
  position: relative;
  display: grid; gap: 4px 32px;
  padding: 0 0 32px 34px;
}
.zeitpunkt::before {
  content: "";
  position: absolute; left: 0; top: 5px;
  width: 14px; height: 14px;
  border: 2px solid var(--c-text-sekundaer); border-radius: 50%;
  background: var(--c-flaeche);
  z-index: 1;
}
.zeitpunkt::after {
  content: "";
  position: absolute; left: 6px; top: 21px; bottom: -3px;
  width: 2px;
  background: repeating-linear-gradient(var(--c-linie) 0 6px, transparent 6px 10px);
}
.zeitpunkt:last-child::after { display: none; }
.zeitpunkt--gilt::before { border-color: var(--c-akzent); background: var(--c-akzent); }
.zeitpunkt--gilt::after { background: var(--c-akzent); }
.zeitpunkt time { font-weight: 600; font-variant-numeric: tabular-nums; }
.zeitpunkt h3 { font-size: 1.0625rem; line-height: 1.4; }
.zeitpunkt p { margin-top: 4px; font-size: var(--t-klein); color: var(--c-text-sekundaer); max-width: 62ch; }
.zeitpunkt--heute { padding-bottom: 32px; }
.zeitpunkt--heute::before { border-color: var(--warn-linie); background: var(--c-markierung); }
.heute {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--c-markierung);
  font-size: var(--t-klein); font-weight: 600;
}
.zeitplan-bussgeld {
  margin-top: 16px;
  max-width: 70ch;
  padding: 16px 20px;
  border: var(--rahmen); border-radius: var(--r-karte);
  background: var(--c-flaeche-erhoben);
  font-size: var(--t-klein);
  color: var(--c-text-sekundaer);
}
@media (min-width: 760px) {
  .zeitpunkt { grid-template-columns: 11em minmax(0, 1fr); }
  .zeitpunkt--heute .heute { grid-column: 1; }
}
@media (min-width: 960px) {
  .zeitleiste, .zeitplan-bussgeld { grid-column: 1 / span 10; }
}

/* Hochrisiko nach Zweck */
.zweck { min-width: 0; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; border: 0; display: grid; gap: 20px var(--spalt); align-items: start; }
.zweck legend { padding: 0; margin-bottom: 16px; font-size: var(--t-h3); font-weight: 600; }
.zweck-wahl { display: grid; gap: 10px; }
.zweck-option {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--c-linie) 60%, var(--c-text-sekundaer));
  border-radius: var(--r-karte);
  background: var(--c-flaeche);
  cursor: pointer;
  transition: border-color 160ms var(--aus), background-color 160ms var(--aus);
}
.zweck-option:hover { border-color: var(--c-text-sekundaer); }
.zweck-option input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--c-akzent); }
.zweck-option:has(input:checked) { border-color: var(--c-akzent); background: var(--c-akzent-flaeche); }
.zweck-option:has(input:focus-visible) { outline: 2px solid var(--c-akzent); outline-offset: 2px; }
.zweck-option input:focus-visible { outline: none; }
.zweck-ergebnisse { display: grid; gap: 12px; }
.zweck-ergebnis {
  padding: 20px 24px 22px;
  border-left: 4px solid var(--c-akzent);
  border-radius: 0 var(--r-karte) var(--r-karte) 0;
  background: var(--c-flaeche);
}
.zweck-ergebnis--hoch { border-left-color: var(--warn-linie); }
.zweck-ergebnis h3 { font-size: var(--t-h3); line-height: 1.3; }
.zweck-ergebnis p { margin-top: 8px; color: var(--c-text-sekundaer); max-width: 58ch; }
.zweck-ergebnis .zweck-fuer { margin: 0 0 4px; font-size: var(--t-klein); font-weight: 500; color: var(--c-text); }
@supports selector(:has(*)) {
  .zweck-ergebnis, .zweck-fuer { display: none; }
  .zweck:has([value="unterlagen"]:checked) [data-fuer="unterlagen"],
  .zweck:has([value="lehre"]:checked) [data-fuer="lehre"],
  .zweck:has([value="personal"]:checked) [data-fuer="personal"],
  .zweck:has([value="pruefung"]:checked) [data-fuer="pruefung"] { display: block; }
  @media (prefers-reduced-motion: no-preference) {
    .zweck-ergebnis { animation: auf 320ms var(--aus) both; }
  }
}
@media (min-width: 960px) {
  .zweck { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(var(--spalt) * 2); }
}

/* Zwölf Fragen */
.pruefliste { margin-top: clamp(40px, 5vw, 64px); border-top: var(--rahmen); counter-reset: frage; }
.pruefpunkt {
  counter-increment: frage;
  position: relative;
  display: grid; gap: 14px var(--spalt);
  padding: 24px 0 28px 44px;
  border-bottom: var(--rahmen);
}
.pruefpunkt::before {
  content: counter(frage);
  position: absolute; left: 0; top: 23px;
  font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--c-akzent-text);
}
.pruefpunkt-frage h3 { font-size: 1.125rem; line-height: 1.35; }
.pruefpunkt-frage p { margin-top: 6px; font-size: var(--t-klein); color: var(--c-text-sekundaer); max-width: 56ch; }
.pruefpunkt-antwort p { max-width: 52ch; }
.pruefpunkt-antwort .stufe { margin: 0 0 6px; }
.stufe--teil::before { background: linear-gradient(90deg, var(--c-akzent) 50%, transparent 50%); }
@media (min-width: 900px) {
  .pruefpunkt { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: calc(var(--spalt) * 2); }
}

/* Eigene Pflichten */
.pflichten { display: grid; margin-top: clamp(40px, 5vw, 64px); border-top: var(--rahmen); column-gap: calc(var(--spalt) * 2); }
.pflichten li { padding: 24px 0 26px; border-bottom: var(--rahmen); }
.pflichten h3 { font-size: 1.125rem; line-height: 1.35; }
.pflichten p { margin-top: 6px; color: var(--c-text-sekundaer); max-width: 52ch; }
.pflichten-schluss { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.pflichten-schluss p { font-weight: 500; }
@media (min-width: 760px) { .pflichten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pflichten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Druck: die Fragen mitnehmen */
@media print {
  .kopf, .fuss, .zoom, .recht-inhalt, .pflichten-schluss, .zweck-wahl { display: none !important; }
  .abschnitt { padding-block: 24px; }
  .zweck-ergebnis, .zweck-fuer { display: block !important; }
  .ebene { min-height: 0 !important; }
}