/* ============================================================================
   PROMPTHEUS — die oeffentliche Seite auf dem VPS.

   Eine Datei, keine Fremdquelle, keine Webschrift. Was fuer die Academy gilt,
   gilt hier erst recht: diese Seite sehen Schulleitungen, Eltern und
   Minderjaehrige, und jede Fremdquelle waere eine Anfrage nach draussen, die
   niemand bestellt hat.

   Sie ist bewusst **nicht** promptheus.css. Jene Datei kleidet die Academy —
   Kurse, Aufgaben, Tutoren — und traegt deren DOM. Hier steht ein Schaufenster
   mit Bewegtbild, Textrotation und Karten. Gemeinsam sind die Tokens, und die
   stehen unten in einem einzigen Block; alles darunter ruft nur `var(--…)`.

   Bild: die Schmiede. Dunkler Grund, Glut als Akzent, Gold nur fuer
   Geschafftes. Kein blau-violetter Verlauf, keine Platine, kein Roboter.
   ========================================================================= */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────
   Die Palette „Schmiede" aus Brand/BRAND.md. Die einzige Stelle mit rohen
   Hexwerten in dieser Datei. Eine Farbaenderung ist eine Zeile.            */

:root {
  --grund:        #14110f;
  --grund-2:      #1c1815;
  --grund-3:      #262019;
  --rand:         #3a3129;
  --rand-hell:    #504338;

  --schrift:      #ede5db;
  --schrift-2:    #b3a596;
  --schrift-3:    #8b8178;

  --glut:         #ff7a1c;
  --glut-hell:    #ffa347;
  --glut-tief:    #c14e00;
  --gold:         #ffc94d;
  --lapis:        #4e82b6;

  --gut:          #5fbf7a;
  --schlecht:     #e8635a;
  --warn:         #e5b34a;

  /* Flaechen mit Durchsicht. Als rgb-Tripel, damit color-mix nicht noetig
     ist — das versteht nicht jeder Browser, den eine Schule noch betreibt. */
  --glas:         rgba(28, 24, 21, .82);
  --glas-tief:    rgba(20, 17, 15, .92);
  --lapis-flor:   rgba(78, 130, 182, .10);
  --glut-flor:    rgba(255, 122, 28, .10);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --mono:  "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --breit:        1180px;
  --radius:       10px;
  --radius-klein: 6px;
  --radius-gross: 16px;
  --schatten:     0 2px 10px rgba(0, 0, 0, .45);

  /* Das Hintergrundbild ist regelbar. 0 schaltet es aus — es darf nie noetig
     sein, Code anzufassen, um ein Bild loszuwerden. */
  --bild-staerke: .20;
}

/* ── 2. Grundlage ──────────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 1rem/1.6 var(--serif);
  -webkit-text-size-adjust: 100%;
}

/* Prometheus, gefesselt, mit dem Feuer. Liegt fest hinter jeder Seite und
   scrollt nicht mit; der Text laeuft darueber. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("../img/background/promptheus-background.jpg") center / cover no-repeat;
  opacity: var(--bild-staerke);
  pointer-events: none;
}

img, video { max-width: 100%; display: block; }

a { color: var(--glut); text-decoration: none; }
a:hover, a:focus-visible { color: var(--glut-hell); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--glut-hell);
  outline-offset: 2px;
  border-radius: var(--radius-klein);
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.25; margin: 0 0 .6rem; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: .01em; }
h2 { font-size: clamp(1.45rem, 3vw, 1.95rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 .9rem; }
p:last-child { margin-bottom: 0; }

.klein   { font-size: .86rem; line-height: 1.5; }
.hinweis { font-size: .86rem; line-height: 1.5; color: var(--schrift-3); }
.leise   { color: var(--schrift-2); }
.mono    { font-family: var(--mono); font-size: .92em; }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Sprungmarke. Wer mit der Tastatur kommt, soll nicht durch die ganze
   Kopfleiste steigen muessen. */
.sprung {
  position: absolute; left: .6rem; top: -3rem; z-index: 60;
  background: var(--glut); color: var(--grund);
  padding: .5rem .9rem; border-radius: var(--radius-klein);
  font-family: var(--sans); font-size: .9rem;
  transition: top .15s ease;
}
.sprung:focus { top: .6rem; text-decoration: none; }

.hof { width: min(100% - 2.4rem, var(--breit)); margin-inline: auto; }

/* ── 3. Ornamente ──────────────────────────────────────────────────────────
   Drei Muster, alle als SVG-Maske, nie als Bild: die Flaeche darunter gibt
   die Farbe, ein Token die Deckkraft. Dadurch stimmt dasselbe Muster in jeder
   Variante, ohne zweimal zu existieren.

   Harte Regel: hoechstens ein Ornament je Flaeche, und nie ueber Text.     */

.maeander {
  height: 8px;
  background: var(--glut);
  opacity: .30;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='8' viewBox='0 0 32 8'%3E%3Cpath d='M0 6h6V2h10v4h6V0h10' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") repeat-x center / 32px 8px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='8' viewBox='0 0 32 8'%3E%3Cpath d='M0 6h6V2h10v4h6V0h10' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") repeat-x center / 32px 8px;
}

.funken-grund { position: relative; }
.funken-grund::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--glut);
  opacity: .05;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='%23000'%3E%3Ccircle cx='12' cy='18' r='1.6'/%3E%3Ccircle cx='54' cy='9' r='1.1'/%3E%3Ccircle cx='79' cy='34' r='1.7'/%3E%3Ccircle cx='31' cy='47' r='1.2'/%3E%3Ccircle cx='66' cy='63' r='1.5'/%3E%3Ccircle cx='17' cy='75' r='1.3'/%3E%3Ccircle cx='88' cy='83' r='1.1'/%3E%3Ccircle cx='44' cy='88' r='1.4'/%3E%3C/g%3E%3C/svg%3E") repeat center / 96px 96px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='%23000'%3E%3Ccircle cx='12' cy='18' r='1.6'/%3E%3Ccircle cx='54' cy='9' r='1.1'/%3E%3Ccircle cx='79' cy='34' r='1.7'/%3E%3Ccircle cx='31' cy='47' r='1.2'/%3E%3Ccircle cx='66' cy='63' r='1.5'/%3E%3Ccircle cx='17' cy='75' r='1.3'/%3E%3Ccircle cx='88' cy='83' r='1.1'/%3E%3Ccircle cx='44' cy='88' r='1.4'/%3E%3C/g%3E%3C/svg%3E") repeat center / 96px 96px;
}
.funken-grund > * { position: relative; z-index: 1; }

/* ── 4. Kopfleiste ─────────────────────────────────────────────────────── */

.kopf {
  position: sticky; top: 0; z-index: 40;
  background: var(--glas-tief);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rand);
}
.kopf .maeander { opacity: .16; }

.kopf-reihe {
  display: flex; align-items: center; gap: 1.2rem;
  padding: .7rem 0;
}

.marke {
  display: flex; align-items: center; gap: .6rem;
  color: var(--schrift); font-family: var(--serif);
  letter-spacing: .14em; text-transform: uppercase; font-size: .95rem;
  white-space: nowrap;
}
.marke:hover { text-decoration: none; color: var(--schrift); }
.marke .flamme { width: 22px; height: 22px; flex: 0 0 auto; }
.marke b { color: var(--glut); font-weight: 600; }

.kopf nav {
  margin-left: auto;
  display: flex; align-items: center; gap: 1.4rem;
  font-family: var(--sans); font-size: .93rem;
}
.kopf nav a { color: var(--schrift-2); }
.kopf nav a:hover, .kopf nav a[aria-current="page"] { color: var(--glut); text-decoration: none; }
.kopf nav a[aria-current="page"] { border-bottom: 2px solid var(--glut); padding-bottom: 2px; }
/* Ein Knopf im Menue behaelt seine eigene Schrift.
   `.kopf nav a` ist spezifischer (0,2,1) als `.knopf-haupt` (0,1,0) und hat
   ihm die dunkle Schrift weggenommen: auf dem orangenen Verlauf stand beiger
   Text, und beim Zeigen wurde er glutfarben auf Glut. Die Regel fuer die
   Menuepunkte war nie fuer den Knopf gedacht -- sie hat ihn nur mitgenommen. */
.kopf nav a.knopf-haupt,
.kopf nav a.knopf-haupt:hover  { color: var(--grund); }
.kopf nav a.knopf-still,
.kopf nav a.knopf-still:hover  { color: var(--schrift); }

.kopf nav a.nav-raus::after {
  content: "\2197";           /* Pfeil nach schraeg oben: fuehrt hinaus */
  font-size: .78em; margin-left: .18em; vertical-align: .12em;
  opacity: .75;
}

/* ── Untermenues im Kopf ──────────────────────────────────────────────────
   Der Elternpunkt fuehrt weiter auf seine Seite; der Pfeil daneben klappt die
   Unterseiten auf. Am Rechner reicht Zeigen oder Tastaturfokus, auf dem Telefon
   der Pfeil. Die Bewegung ist Verzierung -- ohne sie oeffnet das Menue trotzdem. */
.nav-ast { position: relative; display: flex; align-items: center; gap: .25rem; }

.nav-klapp-schalter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--schrift-2); font-size: .8rem; line-height: 1;
  border-radius: var(--radius-klein);
}
.nav-klapp-schalter:hover { color: var(--glut); }
.nav-klapp-schalter span { display: inline-block; transition: transform .18s ease; }
.nav-ast:hover .nav-klapp-schalter span,
.nav-ast:focus-within .nav-klapp-schalter span,
.nav-klapp-schalter[aria-expanded="true"] span { transform: rotate(180deg); }

.nav-klapp {
  position: absolute; top: 100%; left: 0;
  min-width: 14rem;
  list-style: none; margin: 0; padding: .4rem;
  background: var(--glas-tief);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; gap: .1rem;
  opacity: 0; visibility: hidden; transform: translateY(.3rem);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  z-index: 50;
}
/* Eine unsichtbare Bruecke, damit der Zeiger nicht zwischen Punkt und Menue
   in die Luft faellt und das Menue wieder zuklappt. */
.nav-klapp::before {
  content: ""; position: absolute; top: -.5rem; left: 0; right: 0; height: .5rem;
}
.nav-ast:hover .nav-klapp,
.nav-ast:focus-within .nav-klapp,
.nav-klapp-schalter[aria-expanded="true"] ~ .nav-klapp {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .16s ease, transform .16s ease;
}
.kopf nav .nav-klapp a {
  display: block; padding: .5rem .6rem; border-radius: var(--radius-klein);
  color: var(--schrift-2); white-space: nowrap;
}
.kopf nav .nav-klapp a:hover,
.kopf nav .nav-klapp a[aria-current="page"] { color: var(--glut); background: var(--grund-3); }
.kopf nav .nav-klapp a[aria-current="page"] { border-bottom: 0; padding-bottom: .5rem; }

@media (prefers-reduced-motion: reduce) {
  .nav-klapp, .nav-klapp-schalter span { transition: none; }
}

@media (max-width: 860px) {
  /* Im Klappmenue des Telefons steht jeder Ast als Block; die Unterseiten
     ruecken ein und oeffnen nur ueber den Pfeil, nicht ueber das Zeigen. */
  .nav-ast { flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--rand); }
  .nav-ast .nav-haupt { flex: 1; padding: .7rem 0; border-bottom: 0; }
  .nav-klapp-schalter { width: 2.4rem; height: 2.4rem; font-size: 1rem; color: var(--schrift); }
  .nav-klapp {
    position: static; min-width: 0; flex-basis: 100%;
    background: none; border: 0; box-shadow: none;
    padding: 0 0 .4rem .8rem;
    opacity: 1; visibility: visible; transform: none; display: none;
  }
  .nav-klapp::before { display: none; }
  .nav-ast:hover .nav-klapp, .nav-ast:focus-within .nav-klapp { display: none; }
  .nav-klapp-schalter[aria-expanded="true"] ~ .nav-klapp { display: flex; }
  .kopf nav .nav-klapp a { padding: .55rem 0; border-bottom: 0; }
}

.kopf-schalter {
  display: none;
  background: var(--grund-3); border: 1px solid var(--rand-hell);
  color: var(--schrift); border-radius: var(--radius-klein);
  padding: .45rem .7rem; font: 1rem var(--sans); cursor: pointer;
  margin-left: auto;
}

@media (max-width: 860px) {
  .kopf-schalter { display: block; }
  .kopf nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--glas-tief); border-bottom: 1px solid var(--rand);
    padding: .4rem 1.2rem 1rem; margin-left: 0;
  }
  .kopf nav:not([data-offen]) { display: none; }
  .kopf nav a { padding: .7rem 0; border-bottom: 1px solid var(--rand); }
  .kopf nav a[aria-current="page"] { border-bottom-color: var(--glut); }
  .kopf nav .knopf { margin-top: .8rem; text-align: center; }
}

/* ── 5. Knoepfe ────────────────────────────────────────────────────────────
   Die Grotesk fuer die Bedienung. Ein Knopf in Palatino sieht aus wie eine
   Ueberschrift, die man versehentlich anklicken kann.                      */

.knopf {
  display: inline-block;
  font: 600 .95rem/1.2 var(--sans);
  padding: .68rem 1.25rem;
  border-radius: var(--radius-klein);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
  text-align: center;
}
.knopf:hover { text-decoration: none; transform: translateY(-1px); }
.knopf:active { transform: translateY(0); }

.knopf-haupt {
  background: linear-gradient(180deg, var(--glut-hell), var(--glut));
  color: var(--grund);
}
.knopf-haupt:hover { filter: brightness(1.06); color: var(--grund); }

.knopf-still {
  background: var(--grund-3);
  border-color: var(--rand-hell);
  color: var(--schrift);
}
.knopf-still:hover { border-color: var(--glut); color: var(--schrift); }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* ── 6. Held: Bewegtbild, Textrotation, Handlungsaufforderung ──────────── */

.held {
  position: relative;
  min-height: min(92vh, 780px);
  display: flex; align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--rand);
}

.held-film {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Der Schleier. Ohne ihn steht heller Text auf hellen Bildstellen und die
   4,5:1 sind Glueckssache. Links fast deckend, nach rechts unten offen —
   dieselbe Kurve wie bei den Kartenbildern der Academy. */
.held-schleier {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(115deg,
      rgba(20, 17, 15, .96) 0%,
      rgba(20, 17, 15, .90) 38%,
      rgba(20, 17, 15, .70) 72%,
      rgba(20, 17, 15, .52) 100%),
    linear-gradient(180deg, rgba(20, 17, 15, .55) 0%, rgba(20, 17, 15, 0) 28%);
}

.held-inhalt {
  position: relative; z-index: 2;
  padding: 5rem 0 4rem;
  max-width: 44rem;
}

.held-auge {
  font: 600 .82rem/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--glut);
  margin-bottom: 1rem;
}

.held h1 { margin-bottom: 1.1rem; }

/* Die Textrotation. Zehn Saetze, einer sichtbar. Die Hoehe steht fest,
   damit die Seite darunter nicht bei jedem Wechsel springt. */
.rotation {
  position: relative;
  min-height: 4.4rem;
  margin-bottom: 1.6rem;
}
.rotation-satz {
  position: absolute; inset: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  line-height: 1.35;
  /* Gold, und zwar auffaellig. Die Marke haelt Gold sonst fuer Geschafftes
     zurueck — hier traegt es den einen Satz, den jemand beim Vorbeiscrollen
     liest. Das ist eine bewusste Ausnahme und bleibt die einzige auf der
     Seite; ueberall sonst heisst Glut „hier geht es weiter" und Gold „das
     hast du geschafft".
     Die beiden Schatten sind nicht Zierde, sondern Lesbarkeit: der Satz
     steht ueber bewegtem Bild, und dort wechselt der Untergrund. Der harte
     dunkle Schatten haelt den Kontrast, der weiche goldene gibt die Glut. */
  color: var(--gold);
  text-shadow:
    0 2px 10px rgba(0, 0, 0, .85),
    0 0 26px rgba(255, 201, 77, .28);
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.rotation-satz[data-an] { opacity: 1; transform: none; pointer-events: auto; }

.rotation-punkte {
  display: flex; align-items: center; gap: .45rem;
  margin-top: .4rem;
}
/* Ruhezustand: ein feiner Punkt, kaum zu sehen und nicht zu uebersehen.
   Nur der laufende Satz bekommt einen Balken, und der wandert mit. Zehn
   gleich helle Balken sagen zehnmal „hier", also nichts. */
.rotation-punkte button {
  width: 6px; height: 6px; padding: 0; flex: 0 0 auto;
  border: 0; border-radius: 999px;
  background: var(--rand-hell);
  opacity: .55;
  cursor: pointer;
  transition: width .35s cubic-bezier(.4,.2,.2,1), background-color .35s ease,
              opacity .35s ease;
}
.rotation-punkte button:hover { opacity: .9; }
.rotation-punkte button[aria-current="true"] {
  width: 30px;
  border-radius: 3px;
  background: var(--gold);
  opacity: 1;
}

/* ── Fuenf Anzeigeeffekte ────────────────────────────────────────────────
   Nicht der Abwechslung wegen. Zehn Saetze mit demselben Auftritt werden
   nach dem dritten zur Tapete — man sieht die Bewegung und liest den Satz
   nicht mehr. Fuenf verschiedene halten den Blick an der Zeile.

   Jeder Effekt fuehrt zum selben Ruhezustand (deckend, unverschoben,
   ungefiltert). Wer `prefers-reduced-motion` gesetzt hat, bekommt sie alle
   ohne Bewegung — die Regel weiter unten setzt jede Dauer auf null, und der
   Satz steht einfach da. */

.rotation-satz[data-an] { animation-fill-mode: both; }

/* 1 — Aufsteigen: von unten herein. Der ruhigste. */
.rotation-satz[data-wirkung="1"][data-an] { animation: rot-auf .55s ease both; }
@keyframes rot-auf {
  from { opacity: 0; transform: translateY(1.1rem); }
  to   { opacity: 1; transform: none; }
}

/* 2 — Blende: unscharf heran, als traete der Satz aus dem Rauch. */
.rotation-satz[data-wirkung="2"][data-an] { animation: rot-blende .6s ease both; }
@keyframes rot-blende {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: none; }
}

/* 3 — Wischen: von links aufgedeckt, wie ein Vorhang. */
.rotation-satz[data-wirkung="3"][data-an] { animation: rot-wisch .65s cubic-bezier(.4,.2,.2,1) both; }
@keyframes rot-wisch {
  from { opacity: 1; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* 4 — Zusammenziehen: die Buchstaben ruecken zusammen. */
.rotation-satz[data-wirkung="4"][data-an] { animation: rot-ziehen .6s ease both; }
@keyframes rot-ziehen {
  from { opacity: 0; letter-spacing: .5em; }
  to   { opacity: 1; letter-spacing: normal; }
}

/* 5 — Entzuenden: aus der Glut ins Gold, mit kurzem Nachleuchten.
   Der auffaelligste; deshalb steht er nur an jeder fuenften Stelle. */
.rotation-satz[data-wirkung="5"][data-an] { animation: rot-glut .75s ease both; }
@keyframes rot-glut {
  0%   { opacity: 0; color: var(--glut-tief); transform: scale(.97);
         text-shadow: 0 0 0 rgba(255,201,77,0); }
  55%  { opacity: 1; color: var(--glut-hell); transform: scale(1.01);
         text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 0 46px rgba(255,201,77,.6); }
  100% { opacity: 1; color: var(--gold); transform: none;
         text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 0 26px rgba(255,201,77,.28); }
}

.held-fuss {
  margin-top: 1.4rem;
  font-size: .86rem; color: var(--schrift-3);
}

/* ── 7. Abschnitte ─────────────────────────────────────────────────────── */

.band { padding: 4.5rem 0; border-bottom: 1px solid var(--rand); }
.band-still { background: var(--glas); }

.band-kopf { max-width: 44rem; margin-bottom: 2.4rem; }
.band-kopf .auge {
  font: 600 .8rem/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--glut); margin-bottom: .7rem;
}
.band-kopf p { color: var(--schrift-2); font-size: 1.05rem; }

/* Kein Text steht frei auf dem Grund. Die Flaeche ist bewusst schwaecher als
   eine Karte — sonst zerfiele die Seite in lauter gleich starke Kaesten. */
.textkarte {
  background: rgba(28, 24, 21, .82);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}

.wissen {
  border-left: 3px solid var(--lapis);
  background: var(--lapis-flor);
  padding: 1rem 1.2rem;
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  color: var(--schrift-2);
}

/* ── 8. Karten mit Rahmen-Deko ─────────────────────────────────────────────
   Der Rahmen ist kein Bild, sondern vier Ecken aus zwei Strichen. Beim
   Zeigen wachsen sie in die Kante hinein. Das ist der ganze Effekt: er
   kostet nichts, laeuft ueberall und traegt keine Aussage, die verloren
   ginge, wenn ihn jemand nicht sieht.                                      */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.2rem;
}

/* Die vier Tutorkarten stehen fest zu viert nebeneinander -- die vierte darf
   nicht umbrechen. Bei mittlerer Breite zwei, auf dem Telefon einzeln
   untereinander. `repeat(4, 1fr)` laesst die Spalten schrumpfen, statt eine
   Karte in die naechste Zeile zu schieben. */
.karten-tutoren { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .karten-tutoren { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .karten-tutoren { grid-template-columns: 1fr; } }

/* Formelkarten (Seite Dialektik): drei nebeneinander, auf dem Telefon einzeln.
   Vorn das Formelbild in voller Höhe (object-fit: contain, nichts wird
   beschnitten), darunter eine Leiste mit Nummer und Dreh-Knopf; hinten die
   Erklärung mit Ton. */
.formeln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 900px) { .formeln { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; } }

/* Hoehe mit `.dreh.dreh-formel`, damit sie die spaeter im CSS stehende
   Basisregel `.dreh { height: 25rem }` sicher schlaegt und das Formelbild
   gross genug fuer lesbaren Text bleibt. */
.dreh.dreh-formel { height: 42rem; }
.dreh-formel .dreh-vorn { padding: 0; justify-content: stretch; }
.dreh-formel .dreh-vorn::before { display: none; }
.dreh-formel .dreh-vorn img {
  width: 100%; flex: 1 1 auto; min-height: 0;
  object-fit: contain; background: var(--grund);
}
.formel-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .6rem .8rem; border-top: 1px solid var(--rand); background: var(--grund-2);
}
.formel-fuss .karte-marke { margin: 0; }
@media (max-width: 560px) {
  .dreh.dreh-formel { height: auto; }
  .dreh-formel .dreh-vorn img { height: auto; max-height: 34rem; flex: none; }
}

.karte {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--glas);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  color: var(--schrift);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
a.karte:hover { text-decoration: none; color: var(--schrift); }
.karte:hover { border-color: var(--rand-hell); transform: translateY(-2px); }

.karte::before,
.karte::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid var(--glut);
  opacity: 0;
  transition: opacity .18s ease, width .18s ease, height .18s ease;
  pointer-events: none;
}
.karte::before { top: 8px;    left: 8px;  border-right: 0; border-bottom: 0; border-radius: var(--radius-klein) 0 0 0; }
.karte::after  { bottom: 8px; right: 8px; border-left: 0;  border-top: 0;    border-radius: 0 0 var(--radius-klein) 0; }
.karte:hover::before, .karte:hover::after,
.karte:focus-visible::before, .karte:focus-visible::after { opacity: .85; width: 26px; height: 26px; }

.karte-marke {
  font: 600 .74rem/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--glut);
  margin-bottom: .7rem;
}
.karte h3 { margin-bottom: .5rem; }
.karte p { color: var(--schrift-2); font-size: .95rem; }
.karte .weiter {
  margin-top: auto; padding-top: 1rem;
  font: 600 .88rem/1 var(--sans); color: var(--glut);
}
.karte:hover .weiter::after { margin-left: .5rem; }
.karte .weiter::after { content: "→"; margin-left: .35rem; transition: margin-left .18s ease; }

/* Gold nur, wo etwas geschafft wurde. */
.karte-gold { border-color: rgba(255, 201, 77, .35); }
.karte-gold .karte-marke { color: var(--gold); }
.karte-gold::before, .karte-gold::after { border-color: var(--gold); }

/* ── 9. Karten-Rotation ────────────────────────────────────────────────────
   Ein Kartenzug, der von selbst weiterrueckt. Er steht still, sobald jemand
   mit der Maus daraufliegt oder mit der Tastatur hineinkommt — sonst
   verschiebt er sich unter dem Finger weg, waehrend man liest.             */

.zug { position: relative; }

.zug-bahn {
  display: flex; gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rand-hell) transparent;
}
.zug-bahn > * {
  flex: 0 0 min(22rem, 82vw);
  scroll-snap-align: start;
}
.zug-bahn::-webkit-scrollbar { height: 6px; }
.zug-bahn::-webkit-scrollbar-thumb { background: var(--rand-hell); border-radius: 3px; }

.zug-steuer {
  display: flex; gap: .5rem; align-items: center;
  margin-top: 1rem;
}
.zug-steuer button {
  width: 2.4rem; height: 2.4rem;
  background: var(--grund-3); border: 1px solid var(--rand-hell);
  color: var(--schrift); border-radius: var(--radius-klein);
  font: 1rem var(--sans); cursor: pointer;
}
.zug-steuer button:hover { border-color: var(--glut); color: var(--glut); }
.zug-lauf { margin-left: auto; font-size: .86rem; color: var(--schrift-3); }

/* ── 10. Zahlentafel ───────────────────────────────────────────────────── */

.tafel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--rand);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
}
.tafel > div { background: var(--grund-2); padding: 1.3rem 1.4rem; }
.tafel .zahl {
  font: 600 1.9rem/1 var(--serif);
  color: var(--schrift);
  display: block; margin-bottom: .4rem;
}
.tafel .wofuer {
  font: .84rem/1.4 var(--sans);
  color: var(--schrift-3);
}

/* ── 11. Stufenleiste ──────────────────────────────────────────────────── */

.stufen { display: grid; gap: .9rem; }
.stufe {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1.1rem;
  align-items: start;
  background: var(--glas); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 1.1rem 1.3rem;
}
.stufe .nr {
  font: 600 1.5rem/1 var(--serif);
  color: var(--glut-tief);
  text-align: center;
}
.stufe h3 { margin-bottom: .3rem; }
.stufe p { color: var(--schrift-2); font-size: .95rem; }

/* Der Titel ist der Weg hinein.
   Er sieht aus wie eine Ueberschrift und nicht wie ein Verweis — bis der
   Zeiger darauf steht. Ein Gitter aus sechs unterstrichenen Titeln liest
   sich wie eine Linkliste, und das ist es nicht: es ist der Aufstieg. */
.stufe h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.stufe h3 a:hover,
.stufe h3 a:focus-visible {
  color: var(--glut);
  border-bottom-color: var(--glut);
}
.stufe:hover { border-color: var(--rand-hell); }

/* Der Langteil, auf den das Gitter zeigt. */
.stufen-lang { display: grid; gap: 1.2rem; }
.stufe-lang {
  background: var(--glas); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 1.4rem 1.5rem;
}
.stufe-lang h3 { margin: .1rem 0 .6rem; }
.stufe-lang p { color: var(--schrift-2); }
.stufe-lang .danach {
  margin-top: .8rem; padding-top: .8rem;
  border-top: 1px solid var(--rand);
  color: var(--schrift);
}
.stufe-lang .danach b { color: var(--glut); }

/* Die Kopfleiste klebt oben. Ohne diese Zeile springt ein Anker genau so
   weit zu hoch, wie die Leiste hoch ist — die Ueberschrift, auf die man
   geklickt hat, liegt dann darunter. */
[id^="stufe-"] { scroll-margin-top: 5.5rem; }

/* ── 12. Fusszeile ─────────────────────────────────────────────────────── */

.fuss {
  padding: 3rem 0 2.5rem;
  color: var(--schrift-3);
  font-size: .9rem;
}
.fuss-reihen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem;
  margin-bottom: 2.2rem;
}
.fuss h4 {
  font: 600 .8rem/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--schrift-2); margin: 0 0 .9rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .5rem; }
.fuss a { color: var(--schrift-2); }
.fuss a:hover { color: var(--glut); }
.fuss-unten {
  border-top: 1px solid var(--rand);
  padding-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
}
.fuss-unten .rechts { margin-left: auto; }

/* ── 13. Athena ────────────────────────────────────────────────────────────
   Die Beraterin sitzt in einer Schublade rechts unten. Sie oeffnet sich nur
   auf Klick: ein Fenster, das von selbst aufgeht, waehrend jemand liest,
   ist eine Unterbrechung und keine Hilfe.                                  */

.athena-knopf {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 50;
  display: flex; align-items: center; gap: .6rem;
  background: linear-gradient(180deg, var(--glut-hell), var(--glut));
  color: var(--grund);
  border: 0; border-radius: 999px;
  padding: .7rem 1.2rem .7rem .9rem;
  font: 600 .95rem/1 var(--sans);
  box-shadow: var(--schatten);
  cursor: pointer;
}
.athena-knopf svg { width: 20px; height: 20px; }

.athena {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 51;
  width: min(23rem, calc(100vw - 2.4rem));
  height: min(34rem, calc(100vh - 2.4rem));
  display: none; flex-direction: column;
  background: var(--grund-2);
  border: 1px solid var(--rand-hell);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  overflow: hidden;
}
.athena[data-offen] { display: flex; }

.athena-kopf {
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--rand);
  background: var(--grund-3);
}
.athena-kopf .name { font: 600 .98rem/1.2 var(--sans); }
.athena-kopf .rolle { font-size: .8rem; color: var(--schrift-3); }
.athena-kopf .zu {
  margin-left: auto; background: none; border: 0;
  color: var(--schrift-2); font-size: 1.3rem; cursor: pointer;
  line-height: 1; padding: .2rem .4rem;
}

.athena-lauf {
  flex: 1; overflow-y: auto;
  padding: 1rem; display: flex; flex-direction: column; gap: .8rem;
  font-size: .95rem;
}
.athena-zeile { max-width: 90%; padding: .7rem .9rem; border-radius: var(--radius); }
.athena-zeile.von-ihr  { background: var(--grund-3); align-self: flex-start; }
.athena-zeile.von-dir  { background: var(--glut-flor); border: 1px solid var(--rand-hell); align-self: flex-end; }
.athena-zeile p:last-child { margin-bottom: 0; }

.athena-fuss {
  border-top: 1px solid var(--rand);
  padding: .7rem;
  display: flex; gap: .5rem; align-items: flex-end;
}
.athena-fuss textarea {
  flex: 1; resize: none;
  background: var(--grund-3); border: 1px solid var(--rand);
  color: var(--schrift); border-radius: var(--radius-klein);
  padding: .6rem .7rem; font: .95rem/1.4 var(--sans);
  max-height: 7rem;
}
.athena-fuss button {
  width: 2.55rem; height: 2.55rem; flex: 0 0 auto;
  background: linear-gradient(180deg, var(--glut-hell), var(--glut));
  color: var(--grund); border: 0; border-radius: var(--radius-klein);
  font-size: 1rem; cursor: pointer;
}
.athena-fuss button[disabled] { opacity: .5; cursor: default; }

/* Der Honigtopf. Menschen sehen ihn nicht, Maschinen fuellen ihn aus. */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── 14. Formular ──────────────────────────────────────────────────────── */

label { display: block; margin: .9rem 0 .3rem; color: var(--schrift-2); font: .9rem var(--sans); }
input[type="text"], input[type="email"], input[type="search"], select, textarea {
  width: 100%;
  background: var(--grund-3); border: 1px solid var(--rand);
  color: var(--schrift); border-radius: var(--radius-klein);
  padding: .6rem .7rem; font: 1rem var(--sans);
}
input:focus, select:focus, textarea:focus { border-color: var(--glut); outline: none; }

/* ── 15. Weniger Bewegung ──────────────────────────────────────────────────
   Wer das eingestellt hat, meint es. Kein Video, das von selbst laeuft, kein
   Zug, der weiterrueckt, keine Uebergaenge. Die Seite bleibt vollstaendig —
   sie steht nur still.                                                     */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .zug-bahn { scroll-behavior: auto; }
}

[data-bewegung="wenig"] .rotation-satz { transition: none; }
[data-bewegung="wenig"] .karte:hover { transform: none; }
[data-bewegung="wenig"] .funken-grund::before { opacity: .02; }

/* ── 16. Druck ─────────────────────────────────────────────────────────────
   Eine Schulleitung druckt die Seite aus und legt sie in die Konferenz. Dann
   soll dastehen, was zaehlt, und nicht ein schwarzes Rechteck.             */

@media print {
  body::before, .held-film, .held-schleier, .athena, .athena-knopf { display: none !important; }
  body { background: #fff; color: #000; }
  .kopf { position: static; }
  .karte, .textkarte, .band-still { background: none; border: 1px solid #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ── 17. Die Community: Bibliothek ──────────────────────────────────────────
   Aufbau nach dem Vorbild einer Rezeptbibliothek: links die Kategorien mit
   ihren Zahlen, oben die Tafel und die Suche, rechts das Kartenraster.

   Warum diese Form und nicht eine Liste: was hier liegt, wird **gesucht**,
   nicht gelesen. Wer ein Werkzeug fuer eine Elternmail braucht, will nicht
   scrollen, sondern filtern — und dann in einer Karte auf einen Blick sehen,
   ob es das ist. Deshalb traegt jede Karte ihren Kurznamen in Schreibmaschine
   und darunter einen Satz, der sagt, was sie tut.                          */

.werkbank {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 2.4rem;
  align-items: start;
  padding: 2.4rem 0 4rem;
}

.werkbank-spalte { position: sticky; top: 5rem; }
.werkbank-spalte h4 {
  font: 600 .78rem/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--schrift-3); margin: 0 0 .9rem;
}
.werkbank-spalte ul { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.werkbank-spalte li { margin-bottom: .15rem; }
.werkbank-spalte button {
  width: 100%;
  display: flex; align-items: center; gap: .6rem;
  background: none; border: 0; border-radius: var(--radius-klein);
  color: var(--schrift-2);
  font: .92rem/1.3 var(--sans);
  padding: .48rem .6rem; cursor: pointer; text-align: left;
}
.werkbank-spalte button:hover { background: var(--grund-3); color: var(--schrift); }
.werkbank-spalte button[aria-pressed="true"] {
  background: var(--glut-flor); color: var(--schrift);
  box-shadow: inset 2px 0 0 var(--glut);
}
.werkbank-spalte .zahl-klein {
  margin-left: auto;
  font: .8rem var(--mono); color: var(--schrift-3);
}

.werkbank-suche { position: relative; margin: 1.6rem 0 1.8rem; }
.werkbank-suche input { padding-left: 2.4rem; }
.werkbank-suche::before {
  content: "⌕";
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--schrift-3); font-size: 1.15rem; pointer-events: none;
}

.regal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.1rem;
}

.baustein {
  display: flex; flex-direction: column;
  background: var(--glas);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  position: relative; overflow: hidden;
  transition: border-color .18s ease;
}
.baustein:hover { border-color: var(--rand-hell); }
.baustein::before, .baustein::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid var(--glut); opacity: 0;
  transition: opacity .18s ease; pointer-events: none;
}
.baustein::before { top: 7px; left: 7px;     border-right: 0; border-bottom: 0; }
.baustein::after  { bottom: 7px; right: 7px; border-left: 0;  border-top: 0; }
.baustein:hover::before, .baustein:hover::after { opacity: .8; }

.baustein .kurzname {
  font: .95rem/1.3 var(--mono);
  color: var(--schrift);
  margin-bottom: .5rem;
  word-break: break-word;
}
.baustein p { font-size: .9rem; color: var(--schrift-2); }
.baustein .fuss {
  margin-top: auto; padding-top: .9rem;
  display: flex; align-items: center; gap: .9rem;
  border-top: 1px solid var(--rand);
  font: .84rem var(--sans);
}
.baustein .fuss button, .baustein .fuss a {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--schrift-3); font: inherit;
}
.baustein .fuss button:hover, .baustein .fuss a:hover { color: var(--glut); }
.baustein .talente {
  margin-left: auto;
  color: var(--gold); font-family: var(--mono); font-size: .84rem;
}

.regal-leer {
  grid-column: 1 / -1;
  background: var(--glas); border: 1px dashed var(--rand-hell);
  border-radius: var(--radius); padding: 2.4rem 2rem;
  text-align: center; color: var(--schrift-2);
}
.regal-leer h3 { color: var(--schrift); }

@media (max-width: 880px) {
  .werkbank { grid-template-columns: 1fr; gap: 1.4rem; }
  .werkbank-spalte { position: static; }
  .werkbank-spalte ul {
    display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem;
  }
  .werkbank-spalte li { margin: 0; }
  .werkbank-spalte button {
    width: auto; border: 1px solid var(--rand); padding: .4rem .7rem;
  }
}

/* ── 18. Drehkarten ────────────────────────────────────────────────────────
   Vorderseite mit Bild, Rueckseite mit dem, was nicht auf die Vorderseite
   passt: der ausfuehrliche Absatz, die Aufnahme zum Anhoeren und der Weg
   weiter. Gedreht wird auf Klick, nicht beim Zeigen — eine Karte, die sich
   unter dem Mauszeiger wegdreht, liest niemand zu Ende.

   Das Drehen ist Verzierung. Wer es nicht sieht — kein 3D, kein JavaScript,
   `prefers-reduced-motion` —, bekommt beide Seiten untereinander. Der
   Inhalt geht nie verloren, nur die Bewegung.                              */

.dreh {
  perspective: 1400px;
  height: 25rem;
}

.dreh-innen {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4, .2, .2, 1);
}
.dreh[data-gedreht] .dreh-innen { transform: rotateY(180deg); }

.dreh-seite {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* ── Vorderseite: das Bild traegt, der Verlauf haelt den Kontrast ────────
   Die vier Stopps sind dieselben wie bei den Kartenbildern der Academy und
   fuer alle Stiche durchgerechnet: links fast deckend, zur rechten unteren
   Ecke offen. Damit liegt der Text ueber jedem Bild bei 7:1 — das ist
   gemessen und nicht geschaetzt.                                          */

.dreh-vorn {
  justify-content: flex-end;
  padding: 1.3rem 1.4rem;
  background-color: var(--grund-2);
  background-size: cover;
  background-position: center;
}
.dreh-vorn::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    rgba(20, 17, 15, .96) 0%,
    rgba(20, 17, 15, .90) 38%,
    rgba(20, 17, 15, .66) 72%,
    rgba(20, 17, 15, .42) 100%);
}
.dreh-vorn > * { position: relative; z-index: 1; }

/* Der Rahmen-Deko-Effekt wie bei den uebrigen Karten: vier Ecken aus zwei
   Strichen, die beim Zeigen in die Kante wachsen. */
.dreh-seite::after {
  content: "";
  position: absolute; top: 8px; left: 8px;
  width: 18px; height: 18px; z-index: 2;
  border: 2px solid var(--glut);
  border-right: 0; border-bottom: 0;
  border-radius: var(--radius-klein) 0 0 0;
  opacity: 0;
  transition: opacity .18s ease, width .18s ease, height .18s ease;
  pointer-events: none;
}
.dreh:hover .dreh-seite::after,
.dreh:focus-within .dreh-seite::after { opacity: .85; width: 26px; height: 26px; }

.dreh h3 { margin-bottom: .45rem; }
.dreh p { color: var(--schrift-2); font-size: .95rem; }

.dreh-knoepfe {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: 1rem;
}
.dreh-knoepfe .knopf { padding: .48rem .9rem; font-size: .88rem; }

/* ── Rueckseite ─────────────────────────────────────────────────────────── */

.dreh-hinten {
  transform: rotateY(180deg);
  background: var(--grund-2);
  padding: 1.3rem 1.4rem;
  overflow-y: auto;
}
.dreh-hinten p { color: var(--schrift-2); font-size: .93rem; }

.dreh-ton {
  margin-top: auto; padding-top: 1rem;
}
.dreh-ton .was {
  font: 600 .74rem/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
}
/* Die eingebaute Bedienleiste des Browsers. Ein selbstgebauter Abspieler
   waere huebscher und koennte weniger: keine Tastatur, keine Geschwindigkeit,
   keine Untertitelspur, und auf jedem Geraet ein anderer Fehler. */
.dreh-ton audio { width: 100%; height: 2.2rem; }

@media (max-width: 560px) {
  .dreh { height: auto; perspective: none; }
  .dreh-innen { transform: none !important; height: auto; }
  .dreh-seite { position: static; backface-visibility: visible; }
  /* Auf dem Telefon stehen beide Seiten untereinander: eine Drehung, die
     halb so breit wie hoch ist, kippt den Text aus der Karte. */
  .dreh-vorn { min-height: 14rem; border-radius: var(--radius) var(--radius) 0 0; }
  .dreh-hinten { transform: none; border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
  .dreh-knoepfe [data-drehen] { display: none; }
}

/* Ohne JavaScript bleibt die Rueckseite stehen, statt unerreichbar zu sein. */
.kein-js .dreh { height: auto; perspective: none; }
.kein-js .dreh-innen { transform: none; height: auto; }
.kein-js .dreh-seite { position: static; backface-visibility: visible; }
.kein-js .dreh-hinten { transform: none; }
.kein-js [data-drehen] { display: none; }

/* ── 19. Profil oben rechts ────────────────────────────────────────────────
   Wer angemeldet ist, findet sein Konto dort, wo es auf jeder Seite der Welt
   steht: rechts oben hinter einem runden Zeichen. Vorher hing „Kennwort
   aendern" unten links am Seitenende — an einer Stelle, an der man es nur
   findet, wenn man es schon sucht.                                         */

.profil { position: relative; margin-left: .4rem; }

.profil-knopf {
  display: flex; align-items: center; gap: .5rem;
  background: var(--grund-3);
  border: 1px solid var(--rand-hell);
  color: var(--schrift);
  border-radius: 999px;
  padding: .3rem .8rem .3rem .35rem;
  font: 600 .9rem/1 var(--sans);
  cursor: pointer;
}
.profil-knopf:hover { border-color: var(--glut); }
.profil-zeichen {
  width: 1.9rem; height: 1.9rem; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--glut-hell), var(--glut));
  color: var(--grund);
  font: 700 .85rem/1 var(--sans);
  text-transform: uppercase;
}
/* Der Punkt mahnt, dass noch das Anfangskennwort gilt. Er traegt die
   Aussage nicht allein — im Menue steht sie als Satz. */
.profil-knopf[data-mahnung] .profil-zeichen { box-shadow: 0 0 0 2px var(--warn); }

.profil-menu {
  position: absolute; right: 0; top: calc(100% + .55rem); z-index: 45;
  min-width: 16rem;
  background: var(--grund-2);
  border: 1px solid var(--rand-hell);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: .5rem;
  display: none;
}
.profil-menu[data-offen] { display: block; }
.profil-menu .wer {
  padding: .5rem .7rem .7rem;
  border-bottom: 1px solid var(--rand);
  margin-bottom: .4rem;
}
.profil-menu .wer .name { font: 600 .95rem/1.3 var(--sans); }
.profil-menu .wer .was  { font-size: .82rem; color: var(--schrift-3); }
.profil-menu a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .7rem;
  border-radius: var(--radius-klein);
  color: var(--schrift-2);
  font: .92rem/1.3 var(--sans);
}
.profil-menu a:hover { background: var(--grund-3); color: var(--schrift); text-decoration: none; }
.profil-menu a .zeichen { width: 1.1rem; text-align: center; opacity: .8; }
.profil-menu .trenner { height: 1px; background: var(--rand); margin: .4rem 0; }
.profil-menu .mahnung-zeile {
  margin: .2rem .3rem .5rem;
  padding: .55rem .7rem;
  border-left: 3px solid var(--warn);
  background: var(--grund-3);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  font-size: .82rem; color: var(--schrift-2);
}

@media (max-width: 860px) {
  .profil { margin-left: auto; order: -1; }
  .profil-knopf span:not(.profil-zeichen) { display: none; }
  .profil-knopf { padding: .3rem; }

  /* Das Menue oeffnet nach rechts, nicht nach links.
     Auf dem Telefon sitzt der Profilknopf ganz links (order: -1). Mit
     `right: 0` haengt die Klappe dann mit ihrer RECHTEN Kante am Knopf und
     wuchs nach links aus dem Bild heraus -- sichtbar war ein Streifen.
     Jetzt haengt sie mit der linken Kante am Knopf und laeuft ins Bild.
     Die Breite ist gedeckelt, damit sie auf einem schmalen Geraet nicht auf
     der anderen Seite hinausragt. */
  .profil-menu {
    left: 0; right: auto;
    min-width: 0;
    width: min(18rem, calc(100vw - 2rem));
  }
}

/* ── 20. Einstellungen: Reiter ─────────────────────────────────────────────
   Reiter und nicht ein langes Blatt: die vier Bereiche haben nichts
   miteinander zu tun, und wer sein Kennwort wechseln will, soll nicht an
   Zahlungsdaten vorbeiscrollen.

   Sie sind **Verweise**, keine Schalter. Damit hat jeder Reiter eine eigene
   Adresse, der Rueckwaerts-Knopf tut das Erwartete, und ohne JavaScript
   funktioniert alles unveraendert.                                        */

.reiter {
  display: flex; flex-wrap: wrap; gap: .3rem;
  border-bottom: 1px solid var(--rand);
  margin-bottom: 2rem;
}
.reiter a {
  padding: .7rem 1.1rem;
  color: var(--schrift-2);
  font: .95rem/1.2 var(--sans);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.reiter a:hover { color: var(--schrift); text-decoration: none; }
.reiter a[aria-current="page"] {
  color: var(--glut);
  border-bottom-color: var(--glut);
}

.noch-nicht {
  border: 1px dashed var(--rand-hell);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  color: var(--schrift-2);
}
.noch-nicht h3 { color: var(--schrift); }
.noch-nicht .knoten {
  display: inline-block;
  font: 600 .74rem/1 var(--mono);
  letter-spacing: .08em;
  color: var(--glut);
  border: 1px solid var(--rand-hell);
  border-radius: var(--radius-klein);
  padding: .3rem .55rem;
  margin-top: .9rem;
}

/* ── 21. Formularbausteine ────────────────────────────────────────────────
   Die Registrierungsstrecke wurde fuer den Verwaltungsrahmen gebaut und
   erbte ihre Stile von dort. Seit sie im Marken-Rahmen steht, muessen sie
   hier stehen — sonst steht die Strecke ohne CSS da, und das sah man ihr an.

   Die Strecke bringt ihre eigenen Besonderheiten (`.wahl`, `.leiste`,
   `.haken`, `.zwei`) weiterhin selbst mit; hier steht nur, was allgemein
   ist und was jede Seite mit einem Formular braucht.                      */

input[type="password"] {
  width: 100%;
  background: var(--grund-3); border: 1px solid var(--rand);
  color: var(--schrift); border-radius: var(--radius-klein);
  padding: .6rem .7rem; font: 1rem var(--sans);
}

/* Ein nackter <button> **in einem Formular** ist der Hauptknopf. Die
   Registrierungsstrecke setzt ihn neunmal ohne Klasse.

   Der erste Versuch stand hier als `button:not(.knopf):not(…)` und zaehlte
   auf, was nicht gemeint war. Das ging sofort schief: die Rotationspunkte im
   Held sind nackte Knoepfe ohne Klasse, von JavaScript erzeugt -- aus zehn
   feinen Strichen wurden zehn fette Kacheln. Eine Liste von Ausnahmen ist
   immer unvollstaendig; sie vergisst das, was es noch nicht gibt.

   Deshalb jetzt umgekehrt: nicht "alle ausser diesen", sondern "die hier".
   Formularknoepfe sind gemeint, und sonst keine. */
form button:not(.knopf) {
  display: inline-block;
  font: 600 .95rem/1.2 var(--sans);
  padding: .68rem 1.25rem;
  margin-top: 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  background: linear-gradient(180deg, var(--glut-hell), var(--glut));
  color: var(--grund);
  cursor: pointer;
}
form button:not(.knopf):hover { filter: brightness(1.06); }

table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th, td {
  text-align: left; padding: .5rem .6rem;
  border-bottom: 1px solid var(--rand);
  vertical-align: top;
}
th { color: var(--schrift-3); font-weight: 600; font-family: var(--sans); }

/* Meldungen. Der Streifen links traegt die Farbe, das Wort die Aussage —
   Farbe allein sagt hier nichts, und das ist Absicht. */
.strich {
  border-left: 3px solid var(--glut-tief);
  padding-left: 1rem; margin: 1.25rem 0;
  color: var(--schrift-2);
}
.mahnung, .gut, .fehler {
  border-left: 3px solid var(--rand-hell);
  background: var(--grund-3);
  padding: .8rem 1rem;
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  margin-bottom: 1.25rem;
}
.mahnung { border-left-color: var(--warn); }
.gut     { border-left-color: var(--gut); }
.fehler  { border-left-color: var(--schlecht); }

/* Ein Beispiel sagt, dass es eines ist. Oben rechts in der Karte, klein
   genug, um nicht zu stoeren, und deutlich genug, um nicht uebersehen zu
   werden. */
.beispiel-marke {
  position: absolute; top: .6rem; right: .6rem; z-index: 3;
  font: 600 .68rem/1 var(--sans);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--schrift-3);
  background: var(--grund-3);
  border: 1px solid var(--rand-hell);
  border-radius: 999px;
  padding: .25rem .55rem;
}
.baustein { padding-top: 1.4rem; }