/* Basiswissen MINT · Fließbild-Welt
   Eine Tinte (Markenblau), Orange nur für Fließrichtung, aktiven Zustand und Zentralatom. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Norm";
  src: url("../fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Norm";
  src: url("../fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Farben */
  --papier: #FFFFFF;
  --raster: #EDF3FB;
  --tinte: #2174D5;
  --tinte-tief: #124C93;
  --tinte-hell: #7FB2EE;
  --tinte-zart: #DCE9F8;
  --text: #14243A;
  --text-2: #3D4D63;
  --orange: #EE7F06;
  --orange-text: #A65200;
  --flaeche: #EEF4FB;

  /* Schriften */
  --f-text: "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-norm: "Norm", "Archivo", "Segoe UI", sans-serif;

  /* Größen */
  --s-h1: clamp(2.5rem, 1.25rem + 4.4vw, 81px);
  --s-h2: clamp(1.8rem, 1.2rem + 2vw, 44.5px);
  --s-h3: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  --s-text: 1.0625rem;
  --s-klein: .9375rem;

  /* Fließbild */
  --leitung: 6px;
  --leitung-neben: 3px;
  --lx: 10px;                 /* Lage der Hauptleitung */
  --einzug: 34px;             /* Abstand Inhalt zur Leitung */
  --rand: 16px;               /* Seitenabstand mobil */
  --blatt-max: 1320px;

  /* Abstände (für das Regler-Panel; Endwerte am 2026-10-19 mit dem Panel eingestellt) */
  --einstieg-oben: clamp(2rem, 1rem + 5.2vw, 91px);
  --einstieg-unten: clamp(3rem, 2rem + 3.55vw, 83px);
  --abschnitt: clamp(3.5rem, 3rem + 2.2vw, 80px);
  --reaktor-breite: clamp(280px, 26.5vw, 381px);
}
@media (min-width: 760px) {
  :root { --lx: 40px; --einzug: 104px; --rand: 32px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--tinte-hell) var(--raster); }
/* Weiches Scrollen mit Lenis (main.js); ohne Skript oder bei reduzierter Bewegung wie gewohnt */
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
  margin: 0;
  font-family: var(--f-text);
  font-size: var(--s-text);
  line-height: 1.6;
  color: var(--text);
  background-color: var(--papier);
  background-image:
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 24px 24px;
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--tinte-zart); color: var(--text); }
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--tinte-tief); text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--tinte); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-weight: 800; line-height: 1.05; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--s-h1); }
h2 { font-size: var(--s-h2); }
h3 { font-size: var(--s-h3); line-height: 1.3; letter-spacing: -.005em; }
p { margin: 0 0 1em; max-width: 68ch; }
/* Umbruch: Zeilen gleichmäßig verteilen, damit keine kurze Restzeile stehen bleibt.
   Browser gleichen nur kurze Absätze aus (Chrome bis 6 Zeilen); längere umbrechen normal, dafür greift pretty. */
p, li, dd, summary, caption, figcaption { text-wrap: pretty; }
@supports (text-wrap: balance) { p, li, dd, summary, caption, figcaption { text-wrap: balance; } }
/* Listen mit untereinanderstehenden Einträgen: einheitlich über die volle Breite, sonst wirkt jede Zeile anders lang */
.video p, .apparat p, .abgaenge li, .thema dd, .meldung p, .fragen .antwort p { text-wrap: pretty; }
.video p, .meldung p, .fragen .antwort p { max-width: 100ch; }
.norm { font-family: var(--f-norm); font-weight: 500; letter-spacing: .02em; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--text); color: #fff; padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }
.skip:hover { color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Blatt mit Rahmen ---------- */
.blatt {
  max-width: var(--blatt-max);
  margin: 0 auto;
  padding: 0 var(--rand);
  position: relative;
}
@media (min-width: 760px) {
  .blatt { margin: 18px auto; border: 1.5px solid var(--tinte); background: rgba(255,255,255,.55); }
}

/* ---------- Kopf ---------- */
.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 0;
  border-bottom: 1.5px solid var(--tinte);
}
.kopf-logo img { height: 44px; width: auto; }
.kopf-nav ul { list-style: none; display: flex; gap: clamp(14px, 2.5vw, 36px); margin: 0; padding: 0; }
.kopf-nav a {
  font-family: var(--f-norm); font-weight: 600; font-size: 1.125rem; letter-spacing: .03em;
  color: var(--text); text-decoration: none; padding: 6px 0; border-bottom: 3px solid transparent;
}
.kopf-nav a:hover { border-bottom-color: var(--tinte-hell); }
.kopf-nav a[aria-current="page"] { border-bottom-color: var(--orange); }
.menue-knopf { display: none; }
@media (max-width: 759px) {
  .kopf-logo img { height: 36px; }
  .menue-knopf {
    display: inline-flex; align-items: center; gap: 8px; background: none; border: 2px solid var(--tinte);
    color: var(--tinte-tief); font: 600 1rem var(--f-norm); padding: 8px 12px; border-radius: 4px; cursor: pointer;
  }
  .kopf-nav { display: none; position: absolute; left: var(--rand); right: var(--rand); top: 74px; z-index: 20;
    background: var(--papier); border: 1.5px solid var(--tinte); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
  .kopf-nav.offen { display: block; }
  .kopf-nav ul { flex-direction: column; gap: 0; }
  .kopf-nav a { display: block; padding: 14px 18px; border-bottom: 1px solid var(--tinte-zart); }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 1.0625rem/1.3 var(--f-text);
  padding: 15px 24px; border-radius: 999px; text-decoration: none; cursor: pointer;
  border: 2.5px solid var(--tinte); transition: background-color .18s, color .18s, transform .18s;
}
.knopf svg { width: 18px; height: 18px; flex: none; }
.knopf-primaer { background: var(--tinte); color: #fff; }
.knopf-primaer:hover { background: var(--tinte-tief); border-color: var(--tinte-tief); color: #fff; }
.knopf-linie { background: var(--papier); color: var(--tinte-tief); }
.knopf-linie:hover { background: var(--flaeche); color: var(--tinte-tief); }
.knopf:active { transform: translateY(1px); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }

/* ---------- Messstellen-Kreis ---------- */
.messstelle {
  --d: 76px;
  width: var(--d); height: var(--d); border-radius: 50%;
  border: 3px solid var(--tinte); background: var(--papier);
  display: grid; grid-template-rows: 1fr 1fr; place-items: center; text-align: center;
  font-family: var(--f-norm); font-weight: 600; color: var(--text); line-height: 1;
  position: relative; flex: none;
}
.messstelle::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--tinte); }
.messstelle span:first-child { align-self: end; padding-bottom: 6px; font-size: 1rem; }
.messstelle span:last-child { align-self: start; padding-top: 6px; font-size: 1.125rem; }

/* ---------- Einstieg (Startseite) ---------- */
.einstieg {
  position: relative;
  display: grid; gap: 40px;
  grid-template-columns: 1fr;
  padding: var(--einstieg-oben) 0 var(--einstieg-unten);
}
@media (min-width: 900px) {
  .einstieg { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 48px; }
}
.einstieg-text { position: relative; z-index: 2; padding-left: var(--einzug); }
.einstieg-unterzeile { font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); color: var(--text-2); margin-top: 1.4rem; max-width: 34ch; }
.einstieg-versprechen { font-family: var(--f-norm); font-weight: 600; font-size: 1.125rem; letter-spacing: .02em; color: var(--tinte-tief); margin-bottom: 2rem; }
.einstieg .knopfreihe { position: relative; }
.einstieg-leitung { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }

/* Reaktor mit Molekül */
.reaktor { margin: 0; position: relative; z-index: 2; justify-self: center; width: var(--reaktor-breite); }
.reaktor-mantel {
  position: relative; aspect-ratio: 4 / 5.4; width: 100%;
  border: 4px solid var(--tinte); border-radius: 50% / 13%;
  background: var(--papier);
}
.reaktor-mantel::before { /* Rührwerkswelle */
  content: ""; position: absolute; left: 50%; top: -46px; width: 4px; height: 46px; margin-left: -2px; background: var(--tinte);
}
.reaktor-mantel::after { /* Antrieb */
  content: ""; position: absolute; left: 50%; top: -70px; width: 46px; height: 26px; margin-left: -23px;
  border: 3px solid var(--tinte); background: var(--papier);
}
.reaktor canvas { position: absolute; inset: 6% 4% 14%; width: 92%; height: 80%; cursor: grab; touch-action: pan-y; }
.reaktor canvas:active { cursor: grabbing; }
.reaktor-wahl { position: absolute; left: 0; right: 0; bottom: 5%; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 0 8%; }
.reaktor-wahl button {
  font: 600 .95rem var(--f-norm); letter-spacing: .02em; color: var(--tinte-tief); background: var(--papier);
  border: 2px solid var(--tinte-hell); border-radius: 4px; padding: 6px 10px; cursor: pointer;
}
.reaktor-wahl button[aria-pressed="true"] { border-color: var(--orange); color: var(--text); box-shadow: inset 0 -3px 0 var(--orange); }
.reaktor .messstelle { position: absolute; }
.reaktor .ms-winkel { right: -40px; top: 26%; }
.reaktor .ms-abe { left: -40px; top: 52%; }
.reaktor .ms-winkel::after, .reaktor .ms-abe::after { content: ""; position: absolute; top: 50%; width: 22px; border-top: 2px dashed var(--tinte); }
.reaktor .ms-winkel::after { left: -25px; }
.reaktor .ms-abe::after { right: -25px; }
.reaktor figcaption { margin-top: 18px; font-family: var(--f-norm); font-weight: 500; font-size: 1rem; color: var(--text-2); text-align: center; }
@media (max-width: 899px) {
  .reaktor { width: min(100%, 360px); margin-top: 70px; }
  .reaktor .ms-winkel { right: -8px; } .reaktor .ms-abe { left: -8px; }
  .reaktor .messstelle { --d: 64px; }
}

/* Leitung im Einstieg (per JS gezeichnet) */
.lt-rohr { fill: none; stroke: var(--tinte); stroke-width: var(--leitung); stroke-linejoin: round; }
.lt-strom { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 10 22; stroke-linecap: round; opacity: .9; animation: stroemen 2.8s linear infinite; }
.lt-pfeil { fill: var(--orange); }
@keyframes stroemen { to { stroke-dashoffset: -64; } }

/* ---------- Strang: Hauptleitung durch die Seite ---------- */
.strang { position: relative; padding-left: var(--einzug); padding-bottom: var(--abschnitt); }
.strang::before {
  content: ""; position: absolute; left: var(--lx); top: 0; bottom: 0; width: var(--leitung); background: var(--tinte);
}
.strang::after {
  content: ""; position: absolute; left: calc(var(--lx) + 2px); top: 0; bottom: 0; width: 2px;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.95) 0 10px, transparent 10px 32px);
  animation: stroemen-strang 2.8s linear infinite;
}
@keyframes stroemen-strang { from { background-position: 0 0; } to { background-position: 0 64px; } }
@media (prefers-reduced-motion: reduce) { .strang::after, .lt-strom { animation: none; } }

.abschnitt { position: relative; padding-top: var(--abschnitt); }
.abschnitt > h2, .abschnitt > .abschnitt-kopf h2 { position: relative; }
.abzweig::before { /* Abzweig von der Hauptleitung zur Überschrift */
  content: ""; position: absolute; top: calc(var(--abschnitt) + .55em);
  left: calc(var(--lx) - var(--einzug) + var(--leitung));
  width: calc(var(--einzug) - var(--lx) - var(--leitung) - 14px); height: var(--leitung-neben); background: var(--tinte);
  font-size: var(--s-h2);
}
.abzweig::after { /* Fließrichtung */
  content: ""; position: absolute; top: calc(var(--abschnitt) + .55em - 5px); left: -24px;
  width: 11px; height: 13px; background: var(--orange); clip-path: polygon(0 0, 100% 50%, 0 100%);
  font-size: var(--s-h2);
}
@media (max-width: 759px) { .abzweig::after { left: -15px; } }
.abschnitt.erstes { padding-top: 0; }
.erstes.abzweig::before { top: .55em; }
.erstes.abzweig::after { top: calc(.55em - 5px); }
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 2.5rem; }
.abschnitt > h2 { margin-bottom: 2rem; }
.einleitung { font-size: 1.15rem; color: var(--text-2); }
/* Einleitungen unter Abschnittsüberschriften nutzen die volle Breite, statt nach 68 Zeichen umzubrechen */
.strang .einleitung { max-width: 100ch; }

/* Farbige Abschnitte (Leitung läuft weiter) */
.feld { margin-left: calc(-1 * var(--einzug)); padding-left: var(--einzug); padding-right: clamp(24px, 4vw, 56px); margin-top: var(--abschnitt); padding-bottom: calc(var(--abschnitt) * .75); position: relative; z-index: 1; }
.feld.abzweig::before { left: calc(var(--lx) + var(--leitung)); }
.feld.abzweig::after { left: calc(var(--einzug) - 24px); }
@media (max-width: 759px) { .feld.abzweig::after { left: calc(var(--einzug) - 15px); } }
.feld.abschnitt { padding-top: var(--abschnitt); }
.feld-zart { background: var(--flaeche); background-image: linear-gradient(var(--tinte), var(--tinte)); background-repeat: no-repeat; background-size: var(--leitung) 100%; background-position: var(--lx) 0; background-color: var(--flaeche); }
.feld-blau { /* gerahmtes Feld auf Papier, eine Tinte */
  background:
    linear-gradient(var(--tinte), var(--tinte)) var(--lx) 0 / var(--leitung) 100% no-repeat,
    linear-gradient(var(--tinte), var(--tinte)) right 0 top 0 / calc(100% - var(--lx)) 2px no-repeat,
    linear-gradient(var(--tinte), var(--tinte)) right 0 bottom 0 / calc(100% - var(--lx)) 2px no-repeat,
    linear-gradient(var(--tinte), var(--tinte)) right 0 top 0 / 2px 100% no-repeat,
    var(--papier);
}
.feld-blau .knopf-weiss { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.feld-blau .knopf-weiss:hover { background: var(--tinte-tief); border-color: var(--tinte-tief); }

/* ---------- Verteiler: Direkt zum Thema ---------- */

/* ---------- Apparate (App-Katalog) ---------- */
.apparate { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); }
.apparat {
  position: relative; display: grid; gap: 20px 40px; align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .apparat { grid-template-columns: 170px minmax(0, 1fr); } }
@media (min-width: 1100px) { .apparat { grid-template-columns: 200px minmax(0, 1fr) minmax(0, .8fr); } }
.apparat::before { /* Nebenleitung zum Apparat */
  content: ""; position: absolute; top: 58px; left: calc(var(--lx) - var(--einzug) + var(--leitung)); width: calc(var(--einzug) - var(--lx) - var(--leitung)); height: var(--leitung-neben); background: var(--tinte);
}
.apparat-symbol { position: relative; display: flex; align-items: flex-start; gap: 10px; color: var(--tinte); }
.apparat-symbol svg { width: 120px; height: 120px; }
.apparat-symbol .messstelle { --d: 62px; margin-top: 4px; }
.apparat-symbol .messstelle span:first-child { font-size: .85rem; } .apparat-symbol .messstelle span:last-child { font-size: 1rem; }
.apparat::after { content: ""; position: absolute; top: 53px; left: -14px; width: 11px; height: 13px; background: var(--orange); clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: 0; transition: opacity .2s; }
.apparat:hover::before, .apparat:focus-within::before { background: var(--orange); }
.apparat:hover::after, .apparat:focus-within::after { opacity: 1; }
.apparat:hover .apparat-symbol svg, .apparat:focus-within .apparat-symbol svg { color: var(--tinte-tief); }
.apparat h3 { margin-bottom: .5rem; }
.apparat h3 a { color: var(--text); text-decoration: none; }
.apparat h3 a:hover { color: var(--tinte-tief); text-decoration: underline; }
.typenschild { margin: 0; display: grid; grid-template-columns: auto 1fr; border: 1.5px solid var(--tinte); font-family: var(--f-norm); font-weight: 500; font-size: 1rem; background: var(--papier); }
.typenschild dt, .typenschild dd { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--tinte-zart); }
.typenschild dt { color: var(--text-2); border-right: 1px solid var(--tinte-zart); }
.typenschild dd { font-weight: 600; }
.typenschild dt:nth-last-of-type(1), .typenschild dd:last-of-type { border-bottom: 0; }
.apparat-aktionen { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 16px; }
.wende {
  background: none; border: 0; padding: 4px 0; cursor: pointer; font: 600 1rem var(--f-norm); letter-spacing: .02em;
  color: var(--tinte-tief); text-decoration: underline; text-underline-offset: .25em; display: inline-flex; gap: 6px; align-items: center;
}
.wende svg { width: 16px; height: 16px; }
.apparat-hinten { border-left: 0; background: var(--flaeche); padding: 16px 18px; margin-top: 14px; outline: 1.5px dashed var(--tinte-hell); }
.apparat-hinten ol, .apparat-hinten ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.apparat-hinten p:last-child, .apparat-hinten ol:last-child { margin-bottom: 0; }
@media (min-width: 1100px) { .apparat .typenschild { margin-top: 6px; } }

/* ---------- Video-Liste ---------- */
.videos { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--tinte); }
.video { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 18px; padding: 18px 0; border-bottom: 1px solid var(--tinte-zart); align-items: start; }
@media (min-width: 760px) { .video { grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; } }
.video-dauer { font-family: var(--f-norm); font-weight: 600; font-size: 1.125rem; color: var(--tinte-tief); }
.video h3 { font-size: 1.2rem; margin-bottom: .2rem; }
.video p { margin: 0; color: var(--text-2); font-size: var(--s-klein); }
.video a.extern { grid-column: 2; font-family: var(--f-norm); font-weight: 600; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
@media (min-width: 760px) { .video a.extern { grid-column: auto; } }
.extern svg { width: 15px; height: 15px; }

/* ---------- Aussage ---------- */
.aussage { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; max-width: 26ch; margin-bottom: 1.5rem; }
.zweispaltig { display: grid; gap: 24px 64px; }
@media (min-width: 900px) { .zweispaltig { grid-template-columns: 1.1fr .9fr; align-items: start; } }

/* ---------- Fragen und Aufgaben ---------- */
.fragen { border-top: 1.5px solid var(--tinte); max-width: 860px; }
.fragen details { border-bottom: 1px solid var(--tinte-zart); }
.fragen summary {
  list-style: none; cursor: pointer; padding: 18px 44px 18px 0; position: relative;
  font-weight: 700; font-size: 1.125rem; line-height: 1.35;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { /* Ventil: offen / zu */
  content: ""; position: absolute; right: 6px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  background: linear-gradient(var(--tinte), var(--tinte)) center / 20px 3px no-repeat, linear-gradient(var(--tinte), var(--tinte)) center / 3px 20px no-repeat;
  transition: transform .2s;
}
.fragen details[open] summary::after { transform: rotate(45deg); background: linear-gradient(var(--orange), var(--orange)) center / 20px 3px no-repeat, linear-gradient(var(--orange), var(--orange)) center / 3px 20px no-repeat; }
.fragen summary:hover { color: var(--tinte-tief); }
.fragen .antwort { padding: 0 0 18px; color: var(--text-2); }
.fragen .antwort p:last-child { margin-bottom: 0; }
.loesung { margin-top: .6rem; }
.loesung summary { font: 600 1rem var(--f-norm); color: var(--tinte-tief); cursor: pointer; }
.loesung p { margin-top: .4rem; }

/* ---------- Unterseiten ---------- */
.seitenkopf { display: grid; gap: 32px; padding: var(--einstieg-oben) 0 calc(var(--einstieg-unten) * .6); }
@media (min-width: 900px) { .seitenkopf { grid-template-columns: minmax(0, 1fr) 260px; align-items: center; } }
.seitenkopf-text { padding-left: var(--einzug); position: relative; }
.seitenkopf-text::before { /* Zulauf in die Hauptleitung */
  content: ""; position: absolute; left: var(--lx); top: 0; bottom: calc(-1 * var(--einstieg-unten) * .6); width: var(--leitung); background: var(--tinte);
}
.seitenkopf h1 { font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4.2rem); margin-bottom: 1.2rem; }
.seitenkopf .einleitung { max-width: 46ch; margin-bottom: 1.8rem; }
.seitenkopf-symbol { display: none; color: var(--tinte); justify-self: center; position: relative; }
.seitenkopf-symbol svg { width: 200px; height: 200px; }
.seitenkopf-symbol .messstelle { position: absolute; right: -36px; top: 20px; }
@media (min-width: 900px) { .seitenkopf-symbol { display: block; } }
.brotkrumen { font: 500 1rem var(--f-norm); letter-spacing: .02em; color: var(--text-2); margin-bottom: 1rem; }
.brotkrumen a { color: var(--text-2); }
.hinweis-klein { font-size: var(--s-klein); color: var(--text-2); }

/* Live-App im Gehäuse */
.live { border: 3px solid var(--tinte); border-radius: 18px / 18px; background: var(--papier); position: relative; overflow: hidden; }
.live-start { display: grid; place-items: center; text-align: center; gap: 14px; padding: clamp(2rem, 1rem + 4vw, 4.5rem) 20px; }
.live-start p { margin: 0 auto; color: var(--text-2); }
.live iframe { display: block; width: 100%; height: min(86vh, 900px); border: 0; }
.live-leiste { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1.5px solid var(--tinte); font: 500 .95rem var(--f-norm); background: var(--flaeche); }

/* Prozess in drei Schritten */
.prozess { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; counter-reset: schritt; }
@media (min-width: 900px) { .prozess { grid-template-columns: repeat(3, 1fr); gap: 0 28px; } }
.prozess li { position: relative; padding: 0 0 28px 84px; }
@media (min-width: 900px) { .prozess li { padding: 96px 0 0; } }
.prozess li::before { /* Behälter mit Nummer */
  counter-increment: schritt; content: counter(schritt);
  position: absolute; left: 0; top: 0; width: 64px; height: 64px; border: 3px solid var(--tinte); border-radius: 50% / 22%;
  display: grid; place-items: center; font: 800 2rem var(--f-text); color: var(--tinte-tief); background: var(--papier); z-index: 1;
}
.prozess li::after { /* Verbindung */
  content: ""; position: absolute; left: 30px; top: 64px; bottom: 0; width: var(--leitung-neben); background: var(--tinte);
}
.prozess li:last-child::after { display: none; }
@media (min-width: 900px) {
  .prozess li::after { left: 70px; right: -28px; top: 30px; bottom: auto; width: auto; height: var(--leitung-neben); }
}
.prozess h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.prozess p { color: var(--text-2); }
.merksatz { margin-top: 1rem; padding: 16px 20px; background: var(--flaeche); outline: 1.5px solid var(--tinte); font-weight: 600; max-width: 72ch; }

/* Liste mit Abgängen */
.abgaenge { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.abgaenge li { position: relative; padding-left: 28px; }
.abgaenge li::before { content: ""; position: absolute; left: 0; top: .78em; width: 16px; height: 3px; background: var(--tinte); }

/* Tabelle Kartensätze */
.tabelle { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 1rem; background: var(--papier); border: 1.5px solid var(--tinte); }
.tabelle caption { text-align: left; font-weight: 800; font-size: 1.2rem; padding: 0 0 10px; }
.tabelle th, .tabelle td { padding: 11px 14px; border-bottom: 1px solid var(--tinte-zart); text-align: left; vertical-align: top; }
.tabelle thead th { font-family: var(--f-norm); font-weight: 600; letter-spacing: .02em; color: var(--text-2); border-bottom: 1.5px solid var(--tinte); }
.tabelle td.zahl { font-family: var(--f-norm); font-weight: 600; white-space: nowrap; }
.tabelle th:nth-child(1) { width: 62%; } .tabelle th:nth-child(2) { width: 16%; } .tabelle th:nth-child(3) { width: 22%; }
@media (max-width: 599px) { .tabelle th:nth-child(1) { width: 66%; } .tabelle th:nth-child(3) { width: 34%; } }
.tabelle a { font-family: var(--f-norm); font-weight: 600; white-space: nowrap; }
.tabellen { display: grid; gap: 32px; }
@media (max-width: 599px) { .tabelle th:nth-child(2), .tabelle td:nth-child(2) { display: none; } }

/* Plattformen */
.plattformen { display: grid; gap: 28px; }
@media (min-width: 900px) { .plattformen { grid-template-columns: 1fr 1fr; gap: 36px 48px; } }
.plattform { border-top: 3px solid var(--tinte); padding-top: 16px; }
.plattform h3 { margin-bottom: .6rem; display: flex; align-items: center; gap: 10px; }
.plattform ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.plattform li { margin-bottom: .35rem; }
code { font-family: Consolas, "Cascadia Mono", monospace; font-size: .9em; background: var(--flaeche); padding: 2px 6px; border-radius: 3px; overflow-wrap: anywhere; }
.befehl { display: block; padding: 12px 14px; margin: .5rem 0; border: 1px solid var(--tinte-zart); }

/* Themenblöcke (Ausbildung) */
.themen { display: grid; gap: 40px; }
@media (min-width: 900px) { .themen { grid-template-columns: 1fr 1fr; gap: 48px 56px; } }
.thema { position: relative; }
.thema h3 { margin-bottom: .8rem; display: flex; align-items: center; gap: 14px; }
.thema h3 svg { width: 44px; height: 44px; color: var(--tinte); flex: none; }
.thema dl { margin: 0; display: grid; grid-template-columns: 112px 1fr; gap: 8px 14px; }
.thema dt { font-family: var(--f-norm); font-weight: 600; color: var(--text-2); }
.thema dd { margin: 0; }

/* ---------- Schriftfeld (Fuß) ---------- */
.schriftfeld {
  display: grid; grid-template-columns: 1fr; border: 1.5px solid var(--tinte); margin: 0 0 var(--rand);
  font-family: var(--f-norm); font-weight: 500; font-size: 1rem; background: var(--papier);
}
@media (min-width: 760px) { .schriftfeld { grid-template-columns: 1.3fr 1fr 1fr; margin: 0 0 24px; } }
.schriftfeld > div { padding: 14px 16px; border-bottom: 1px solid var(--tinte); }
@media (min-width: 760px) {
  .schriftfeld > div { border-right: 1px solid var(--tinte); }
  .schriftfeld > div:nth-child(3n) { border-right: 0; }
  .schriftfeld > div:nth-last-child(-n+3) { border-bottom: 0; }
}
.schriftfeld .feldname { display: block; font-size: .85rem; color: var(--text-2); letter-spacing: .04em; margin-bottom: 2px; }
.schriftfeld a { color: var(--text); font-weight: 600; }
.schriftfeld ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.schriftfeld img { height: 40px; width: auto; margin-top: 4px; }

/* Bewegung beim Erscheinen (nur wenn erlaubt) */
@media (prefers-reduced-motion: no-preference) {
  .js .erscheint { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
  .js .erscheint.sichtbar { opacity: 1; transform: none; }
}

/* ---------- Apps-Menü ---------- */
.unter-knopf {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
  font-family: var(--f-norm); font-weight: 600; font-size: 1.125rem; letter-spacing: .03em; color: var(--text);
  padding: 6px 0; border-bottom: 3px solid transparent;
}
.unter-knopf svg { width: 12px; height: 12px; transition: transform .2s; }
.unter-knopf:hover { border-bottom-color: var(--tinte-hell); }
.unter-knopf[data-aktiv="true"] { border-bottom-color: var(--orange); }
.unter-knopf[aria-expanded="true"] svg { transform: rotate(180deg); }
.hat-unter { position: relative; }
.kopf-nav ul.unter { list-style: none; margin: 0; padding: 6px 0; display: block; }
@media (min-width: 760px) {
  .unter {
    position: absolute; right: -16px; top: calc(100% + 10px); z-index: 30; min-width: 290px;
    background: var(--papier); border: 1.5px solid var(--tinte); box-shadow: 0 10px 24px rgba(0,0,0,.12);
  }
  .kopf-nav ul.unter { display: none; }
  .hat-unter.offen ul.unter { display: block; }
  .kopf-nav .unter a { display: block; padding: 10px 18px; border-bottom: 0; font-size: 1.0625rem; }
  .kopf-nav .unter a:hover { background: var(--flaeche); }
}
.unter .trenner { border-top: 1px solid var(--tinte-zart); margin-top: 6px; padding-top: 6px; }
@media (max-width: 759px) {
  .unter-knopf { display: block; width: 100%; text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--tinte-zart); pointer-events: none; }
  .unter-knopf svg { display: none; }
  .kopf-nav .unter a { padding-left: 34px; font-weight: 500; }
}
.ohne-3d canvas { display: none; }

.hinweis-ausbildung { margin: 3.5rem 0 0; padding-top: 1.2rem; border-top: 1.5px solid var(--tinte-zart); max-width: 72ch; color: var(--text-2); }
.apparat-symbol svg { color: var(--tinte); }
.seitenkopf-symbol svg { width: 170px; height: 170px; }

/* Videozeilen: Titel ist der Link */
.video { grid-template-columns: 64px minmax(0, 1fr); }
@media (min-width: 760px) { .video { grid-template-columns: 76px minmax(0, 1fr); } }
.video h3 a { color: var(--text); text-decoration: none; }
.video h3 a:hover { color: var(--tinte-tief); text-decoration: underline; }
.video h3 .pfeil { display: inline-block; width: 14px; height: 14px; margin-left: 6px; vertical-align: .05em; color: var(--tinte); }

.lt-flansch { stroke: var(--tinte); stroke-width: 3; stroke-linecap: square; }
.reaktor figcaption { text-align: left; padding-left: calc(50% + 16px); }
.nowrap { white-space: nowrap; }


@media (min-width: 1200px) { .reaktor figcaption { margin-right: -150px; } }
.handbuch { margin-top: 2.5rem; border-top: 3px solid var(--tinte); padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.handbuch h3, .handbuch p { margin: 0; }

.seitenkopf-symbol img { width: 170px; height: 170px; }
.nav-trenner { width: 1.5px; align-self: stretch; background: var(--tinte-zart); margin: 4px 0; }
@media (max-width: 759px) { .nav-trenner { display: none; } }
@media (min-width: 760px) and (max-width: 1100px) { .kopf-nav ul { gap: 14px; } .kopf-nav a, .unter-knopf { font-size: 1rem; } }


/* Navigation: Fach-Zeichen über den Reitern, alle Beschriftungen auf einer Linie */
.kopf-nav > ul { align-items: flex-end; }
.kopf-nav .fach > a, .kopf-nav .fach > .unter-knopf { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.2; padding: 0 0 4px; }
.kopf-nav .fach img { width: 30px; height: 30px; transition: transform .2s; }
.kopf-nav .fach > a:hover img, .kopf-nav .fach > .unter-knopf:hover img { transform: translateY(-2px); }
.kopf-nav .fach .unter-knopf span { display: inline-flex; align-items: center; gap: 6px; }
.kopf-nav > ul > li:not(.fach) > a { line-height: 1.2; padding: 0 0 4px; display: inline-block; }
@media (max-width: 759px) {
  .kopf-nav .fach > a, .kopf-nav .fach > .unter-knopf { flex-direction: row; gap: 10px; padding: 12px 18px; width: 100%; }
  .kopf-nav .fach img { width: 26px; height: 26px; }
  .kopf-nav > ul > li:not(.fach) > a { padding: 14px 18px; display: block; }
}

@media (max-width: 759px) { .kopf-nav > ul { align-items: stretch; } .kopf-nav > ul > li { width: 100%; } .kopf-nav .fach > a, .kopf-nav .fach > .unter-knopf { justify-content: flex-start; } .kopf-nav .fach .unter-knopf span { width: auto; } }

/* Navigation: Symbol vor dem Wort, alle Reiter gleich gebaut, kein Umbruch */
.kopf-nav > ul { align-items: center; }
.kopf-nav .fach > a, .kopf-nav .fach > .unter-knopf {
  display: inline-flex; flex-direction: row; align-items: center; gap: 8px;
  padding: 6px 0; line-height: 1.2; white-space: nowrap;
  font-family: var(--f-norm); font-weight: 600; font-size: 1.125rem; letter-spacing: .03em; color: var(--text);
  border-bottom: 3px solid transparent;
}
.kopf-nav .fach img { width: 24px; height: 24px; flex: none; }
.kopf-nav .fach .unter-knopf span { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; }
.kopf-nav > ul > li:not(.fach) > a { padding: 6px 0; line-height: 1.2; white-space: nowrap; }
.kopf-nav .fach > a:hover img, .kopf-nav .fach > .unter-knopf:hover img { transform: none; }
.kopf-nav .fach > a:hover, .kopf-nav .fach > .unter-knopf:hover { border-bottom-color: var(--tinte-hell); }
.kopf-nav .fach > a[aria-current="page"], .kopf-nav .fach > .unter-knopf[data-aktiv="true"] { border-bottom-color: var(--orange); }
@media (min-width: 760px) and (max-width: 1100px) {
  .kopf-nav > ul { gap: 12px; }
  .kopf-nav .fach > a, .kopf-nav .fach > .unter-knopf, .kopf-nav > ul > li:not(.fach) > a { font-size: 1rem; }
  .kopf-nav .fach img { width: 20px; height: 20px; }
}
@media (max-width: 759px) {
  .kopf-nav .fach > a, .kopf-nav .fach > .unter-knopf { padding: 12px 18px; width: 100%; border-bottom: 1px solid var(--tinte-zart); }
}

/* Neuigkeiten */
.meldungen { border-top: 1.5px solid var(--tinte); max-width: 860px; }
.meldung { display: grid; grid-template-columns: 1fr; gap: 4px 28px; padding: 22px 0; border-bottom: 1px solid var(--tinte-zart); }
@media (min-width: 760px) { .meldung { grid-template-columns: 170px minmax(0, 1fr); } }
.meldung-datum { font-family: var(--f-norm); font-weight: 600; color: var(--tinte-tief); padding-top: 3px; }
.meldung h3 { margin-bottom: .4rem; }
.meldung p { margin: 0; color: var(--text-2); }

.feed-adresse { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 1rem 0 1.2rem; }
.feed-adresse code { font-size: 1rem; padding: 10px 14px; background: var(--papier); border: 1.5px solid var(--tinte-zart); }

/* ---------- Fachfarben (2026-10-21) ----------
   Fachseiten und ihre App-Seiten tragen die Farbe ihres Fach-Zeichens. Gilt nur im Inhalt (<main>)
   und für die Unterstreichung des Fachs im Menü; Logo, Kopf, Fußzeile und Textlinks bleiben Markenblau.
   --tinte = Logo-Farbe (Leitung, Linien, Symbole), --fach-knopf = Stufe für weiße Schrift (Kontrast ab 4,5:1). */
html[data-fach="mathe"]   { --fach: #1F9D6B; --fach-tief: #137049; --fach-hell: #8FD3B5; --fach-zart: #D5EFE3; --fach-flaeche: #EEF8F3; --fach-knopf: #167A53; }
html[data-fach="physik"]  { --fach: #7B4FD6; --fach-tief: #5A34B3; --fach-hell: #BBA4F0; --fach-zart: #E7DEFB; --fach-flaeche: #F4F0FD; --fach-knopf: #7B4FD6; }
html[data-fach="chemie"]  { --fach: #EE7F06; --fach-tief: #A85200; --fach-hell: #F7C084; --fach-zart: #FCE4C8; --fach-flaeche: #FEF4E8; --fach-knopf: #B85C00; }
html[data-fach="technik"] { --fach: #D0303F; --fach-tief: #A8202E; --fach-hell: #EBA0A8; --fach-zart: #F8D9DC; --fach-flaeche: #FDF0F1; --fach-knopf: #D0303F; }
html[data-fach] main { --tinte: var(--fach); --tinte-tief: var(--fach-tief); --tinte-hell: var(--fach-hell); --tinte-zart: var(--fach-zart); --flaeche: var(--fach-flaeche); }
html[data-fach="chemie"] main { --orange: #2174D5; } /* Fließpfeile sonst Orange auf Orange */
html[data-fach] main .knopf-primaer { background: var(--fach-knopf); border-color: var(--fach-knopf); }
html[data-fach] main .knopf-primaer:hover { background: var(--fach-tief); border-color: var(--fach-tief); }
html[data-fach] main a:not(.knopf) { color: #124C93; }
html[data-fach] main a:not(.knopf):hover { color: #2174D5; }
html[data-fach] .kopf-nav .fach > a[aria-current="page"], html[data-fach] .kopf-nav .fach > .unter-knopf[data-aktiv="true"] { border-bottom-color: var(--fach); }

/* kein seitliches Scrollen: Bildunterschrift am Reaktor und Leitungsbögen ragen sonst leer über das Fenster */
.blatt { overflow-x: clip; }

/* ---------- Bewegter Hintergrund im Seitenkopf (hintergrund.js) ---------- */
.einstieg, .seitenkopf { position: relative; }
.kopf-grund {
  position: absolute; top: 0; left: calc(-1 * var(--rand)); width: calc(100% + 2 * var(--rand)); height: 100%; max-width: none;
  pointer-events: none; z-index: 0;
  /* zum Text und zum unteren Rand hin auslaufen, damit die Schrift gut lesbar bleibt */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent), linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(0,0,0,.28) 42%, #000 68%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 72%, transparent), linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(0,0,0,.28) 42%, #000 68%);
  mask-composite: intersect;
}
@media (max-width: 899px) { .kopf-grund { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.42) 72%, transparent); mask-image: linear-gradient(to bottom, rgba(0,0,0,.42) 72%, transparent); } } /* Text läuft über die volle Breite */
.seitenkopf > :not(.kopf-grund) { z-index: 1; }
@media print { .kopf-grund { display: none; } }

/* ---------- Überschrift der Startseite ---------- */
.titel-wort { display: inline-block; white-space: nowrap; }
.mint-wort { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  html.js [data-titel-anim]:not(.bereit) { visibility: hidden; animation: titel-notnagel 0s 2.5s forwards; } /* falls main.js nicht läuft */
  .kommt { display: inline-block; animation: buchstabe .75s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 34ms + 120ms); }
  /* dunkle Fachfarben: Kontrast zur Fläche reicht für große Schrift */
  .mint-wort {
    background: linear-gradient(90deg, #2174D5, #167A53, #7B4FD6, #B85C00, #D0303F, #2174D5) 0 0 / 500% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .mint-wort.kommt { animation: buchstabe .75s cubic-bezier(.2, .8, .2, 1) both, fachfarben 28s linear infinite; animation-delay: calc(var(--i) * 34ms + 120ms), 0s; }
  .einstieg-unterzeile, .einstieg-versprechen { animation: aufsteigen .8s ease-out both; }
  .einstieg-unterzeile { animation-delay: .75s; }
  .einstieg-versprechen { animation-delay: .95s; }
  .einstieg .knopfreihe { animation: einblenden .7s ease-out 1.1s both; } /* ohne Versatz: die Leitung misst die Knopflage */
}
@keyframes titel-notnagel { to { visibility: visible; } }
@keyframes buchstabe { from { opacity: 0; transform: translateY(.5em) rotate(5deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes aufsteigen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes fachfarben { to { background-position: 125% 0; } }