/* NextRD-CIRS Tutorial – Farben aus der Anwendung und dem Logo */
:root {
  --himmel: #e8f3f7;      /* Seitenhintergrund der App, auch im Vorspann */
  --flaeche: #ffffff;
  --marine: #0a2c52;      /* Schriftfarbe aus dem Logo */
  --schild: #245b8a;      /* Blau des Schilds: Links, Aktives */
  --petrol: #1d5b6e;      /* Kopfleiste der App: Player-Leiste */
  --linie: #c3d9e4;
  --leise: #4d6680;
  --gesehen: #2f7a57;
  --markiert: #d7e9f3;
  --schrift: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --himmel: #0d1c2b;
    --flaeche: #13263a;
    --marine: #e3eef6;
    --schild: #8cc0ea;
    --petrol: #123d4c;
    --linie: #28425b;
    --leise: #9db3c7;
    --gesehen: #6cc79a;
    --markiert: #1c3a57;
    color-scheme: dark;
  }
  .logo { background: #e8f3f7; border-radius: 10px; padding: 10px 14px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--himmel);
  color: var(--marine);
  font: 17px/1.55 var(--schrift);
}
a { color: var(--schild); }
:focus-visible { outline: 3px solid var(--schild); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: 16px; top: 16px; background: var(--flaeche); padding: 8px 12px; z-index: 10; }
.leise-text { color: var(--leise); font-size: 0.88rem; margin: 0 0 12px; }

/* ---------- Übersicht: Kopf ---------- */
.kopf {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px 40px;
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: 56px;
  align-items: start;
}
.logo { width: 100%; height: auto; }
h1 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.kopf h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin: 0 0 16px; }
.einleitung { font-size: 1.12rem; max-width: 60ch; margin: 0 0 32px; }
.einstieg h2 { font-size: 1rem; font-weight: 600; margin: 0 0 10px; }
.einstieg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.einstieg a {
  display: block;
  padding: 9px 16px;
  border: 1.5px solid var(--schild);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  background: var(--flaeche);
}
.einstieg a:hover { background: var(--schild); color: var(--flaeche); }

/* ---------- Übersicht: Kurs ---------- */
.kurs {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 64px;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 56px;
  align-items: start;
}
.inhaltsverzeichnis { position: sticky; top: 24px; }
.inhaltsverzeichnis ol { list-style: none; margin: 0 0 16px; padding: 0; }
.inhaltsverzeichnis li a {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 2px 8px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--marine);
  border-bottom: 1px solid var(--linie);
}
.inhaltsverzeichnis li a:hover .toc-titel { color: var(--schild); text-decoration: underline; }
.toc-nr { font-weight: 600; color: var(--schild); }
.toc-titel { font-weight: 500; line-height: 1.3; }
.toc-stand { grid-column: 2; font-size: 0.8rem; color: var(--leise); }
.toc-stand.fertig { color: var(--gesehen); }
button.leise {
  font: inherit; font-size: 0.85rem; color: var(--leise);
  background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline;
}

/* Die Teile als Weg: eine durchgehende Linie verbindet die Teilnummern */
.teile { position: relative; }
.teil { position: relative; padding: 0 0 56px 84px; }
.teil::before {
  content: "";
  position: absolute;
  left: 27px; top: 60px; bottom: 0;
  width: 2px;
  background: var(--linie);
}
.teil:last-child::before { display: none; }
.teil-nr {
  position: absolute;
  left: 0; top: 0;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--marine);
  color: var(--himmel);
  font-size: 1.6rem;
  font-weight: 600;
}
.teil.fertig .teil-nr { background: var(--gesehen); }
.teil h2 { font-size: 1.7rem; font-weight: 600; margin: 4px 0 2px; line-height: 1.2; }
.teil-fuer { margin: 0 0 6px; font-weight: 500; color: var(--schild); }
.teil-text { margin: 0 0 20px; max-width: 62ch; color: var(--leise); }

.videos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.video-zeile {
  display: grid;
  grid-template-columns: 208px 1fr;
  gap: 20px;
  padding: 12px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}
.video-zeile:hover { border-color: var(--schild); }
.video-zeile:hover h3 { color: var(--schild); }
.bild { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--himmel); }
.bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bild .laenge {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(10, 44, 82, 0.85); color: #fff;
  font-size: 0.78rem; font-weight: 600; padding: 1px 7px; border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.bild .balken { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--schild); }
.video-zeile.gesehen .balken { background: var(--gesehen); }
.zeile-text { align-self: center; min-width: 0; }
.zeile-kopf { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.zeile-nr { font-weight: 600; color: var(--schild); font-variant-numeric: tabular-nums; }
.video-zeile h3 { font-size: 1.12rem; font-weight: 600; margin: 0; line-height: 1.3; }
.video-zeile p { margin: 4px 0 0; font-size: 0.95rem; color: var(--leise); max-width: 62ch; }
.marke { font-size: 0.8rem; font-weight: 600; color: var(--gesehen); white-space: nowrap; }
.marke.handy { color: var(--leise); font-weight: 500; }

.fuss { max-width: 1180px; margin: 0 auto; padding: 24px; border-top: 1px solid var(--linie); color: var(--leise); font-size: 0.9rem; }
.ohne-js { max-width: 600px; margin: 40px auto; padding: 0 24px; }

/* ---------- Player ---------- */
.player-leiste {
  background: var(--petrol);
  color: #fff;
  padding: 12px 24px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.zurueck { color: #fff; font-weight: 600; text-decoration: none; }
.zurueck::before { content: "‹ "; }
.zurueck:hover { text-decoration: underline; }
.p-teil { opacity: 0.85; font-size: 0.95rem; }

.player-inhalt {
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: start;
}
.rahmen { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
video { width: 100%; height: 100%; display: block; }
video::cue { font-family: var(--schrift); font-size: 75%; line-height: 1.35; background: rgba(10, 44, 82, 0.85); }

.weiter {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 24px;
  background: rgba(10, 44, 82, 0.9); color: #fff;
}
.weiter-hinweis { margin: 0; opacity: 0.8; }
.weiter-titel { margin: 4px 0 24px; font-size: clamp(1.2rem, 2.6vw, 1.9rem); font-weight: 600; }
.weiter-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.knopf {
  font: inherit; font-weight: 600; font-size: 1rem;
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--marine); border: 2px solid #fff; text-decoration: none;
}
.knopf.zweit { background: transparent; color: #fff; }
.weiter :focus-visible { outline-color: #fff; }

.unter-video { padding: 20px 0 0; }
.p-nr { margin: 0; font-weight: 600; color: var(--schild); }
.titelzeile h1 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 2px 0 6px; }
.p-text { margin: 0; color: var(--leise); max-width: 70ch; }
.steuerung { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 18px 0 0; font-size: 0.95rem; }
.schalter { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.schalter input { accent-color: var(--schild); width: 18px; height: 18px; }
.schalter select { font: inherit; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--marine); }

.blaettern { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.blatt {
  display: block; padding: 12px 16px;
  border: 1px solid var(--linie); border-radius: 10px;
  background: var(--flaeche); text-decoration: none; color: var(--marine);
}
.blatt:hover { border-color: var(--schild); }
.blatt small { display: block; color: var(--leise); font-size: 0.82rem; }
.blatt span { font-weight: 600; }
.blatt.nach { text-align: right; grid-column: 2; }
.blatt:empty { visibility: hidden; }

.mitlesen {
  position: sticky; top: 24px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 0 18px 8px;
}
.mitlesen-kopf { position: sticky; top: 0; background: var(--flaeche); padding: 18px 0 4px; margin-bottom: 4px; border-bottom: 1px solid var(--linie); }
.mitlesen h2 { font-size: 1.1rem; margin: 0 0 2px; }
#transkript { list-style: none; margin: 0; padding: 0; }
#transkript button {
  display: grid; grid-template-columns: 42px 1fr; gap: 8px;
  width: 100%; text-align: left;
  font: inherit; font-size: 0.93rem; line-height: 1.5; color: var(--marine);
  background: none; border: 0; border-radius: 8px;
  padding: 8px; margin: 0 0 2px; cursor: pointer;
}
#transkript button:hover { background: var(--himmel); }
#transkript .zeit { color: var(--leise); font-variant-numeric: tabular-nums; font-size: 0.82rem; padding-top: 2px; }
#transkript .aktiv button { background: var(--markiert); }
#transkript .aktiv .zeit { color: var(--schild); font-weight: 600; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 1000px) {
  .player-inhalt { grid-template-columns: 1fr; }
  .mitlesen { position: static; max-height: none; }
}
@media (max-width: 860px) {
  .kopf { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; }
  .logo { max-width: 260px; }
  .kurs { grid-template-columns: 1fr; gap: 24px; }
  .inhaltsverzeichnis { display: none; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .kopf, .kurs, .player-inhalt { padding-left: 16px; padding-right: 16px; }
  .player-inhalt { padding-top: 0; padding-left: 0; padding-right: 0; }
  .rahmen { border-radius: 0; }
  .unter-video, .mitlesen { margin-left: 16px; margin-right: 16px; }
  .teil { padding-left: 0; }
  .teil::before { display: none; }
  .teil-nr { position: static; width: 44px; height: 44px; font-size: 1.25rem; margin-bottom: 10px; }
  .video-zeile { grid-template-columns: 1fr; gap: 10px; }
  .blaettern { grid-template-columns: 1fr; }
  .blatt.nach { grid-column: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}