/* ============================================================
   Beirat Akademie — AURELIA-INNENRAUM (innen.css)
   ============================================================
   Dieselbe Welt wie die Ankunft (galaxie.css, AURELIA-Block), von innen:
   helle Steinraeume, Patina und Gold, Arkaden-Panels, Tinte statt Schwarz.
   Gilt fuer alle Akademie-Seiten unterhalb des Campus: Kurs, Lektion,
   Modul-Raetsel, Abschluss-Quiz, Kommandobruecke, Zertifikat, Konto.
   Kanon: .claude/skills/academy-experience/SKILL.md

   Regeln:
   - Nur transform/opacity bewegen sich; Lesetext liegt in calm-Zonen.
   - Reduced Motion: alles statisch und vollwertig.
   - Touch-Ziele mindestens 44 px, Fokus immer sichtbar.
   - Keine Neonfarben, kein Gaming-Look, keine Dauerbewegung im Lesetext
     (Figuren atmen, Lumo schwebt, das All fliegt: alles ausserhalb des Panels).
   ============================================================ */

.aurelia-innen {
  /* Innenraum-Palette: Stein, Patina, Gold, Tinte — unabhaengig vom Site-Theme. */
  --innen-stein: #f3eada;
  --innen-stein-hell: #faf5ea;
  --innen-stein-tief: #e6d9c1;
  --innen-fuge: #d3c3a4;
  --innen-tinte: #14203a;
  --innen-tinte-dim: #4d5a75;
  --innen-patina: #4f8f83;
  --innen-patina-tief: #2f6b62;
  --innen-gold: #d9b36c;
  --innen-bronze: #a2662f;
  --innen-erfolg: #2f6b62;
  --innen-offen: #a2662f;
  --innen-ernst: #8b3a2f;
  --innen-schatten: 0 18px 44px rgba(20, 32, 58, 0.14), 0 1px 0 rgba(255, 255, 255, 0.7) inset;

  color: var(--innen-tinte);
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(217, 179, 108, 0.28), transparent 60%),
    linear-gradient(180deg, var(--innen-stein-hell), var(--innen-stein) 38%, var(--innen-stein-tief));
  padding: clamp(1.25rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem);
  line-height: 1.8;
}

.innen-raum {
  width: min(72rem, 100% - 2rem);
  margin-inline: auto;
}

/* Kopf: Rueckweg (Aurelia-Pfad), Kicker, Titel, Rang ------------------- */
.innen-kopf { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.innen-kopf .aurelia-pfad { color: var(--innen-tinte-dim); }
.innen-kopf .aurelia-pfad a { color: var(--innen-tinte); }
.innen-kopf .aurelia-pfad-heim,
.innen-kopf .aurelia-pfad-ort { color: inherit; }

.innen-kicker {
  margin: 0 0 .35rem;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--innen-bronze);
}
.innen-kicker a { color: inherit; text-decoration: none; }
.innen-kicker a:hover, .innen-kicker a:focus-visible { text-decoration: underline; }

.innen-titel {
  margin: 0;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--innen-tinte);
}
.innen-titel--gross { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.innen-lead {
  margin: .75rem 0 0;
  max-width: 44rem;
  font-size: 1.1rem;
  color: var(--innen-tinte-dim);
}

.aurelia-innen h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.2; margin: 0 0 .5rem; color: var(--innen-tinte); }
.aurelia-innen h3 { font-size: 1.15rem; line-height: 1.25; margin: 0; color: var(--innen-tinte); }
.aurelia-innen a { color: var(--innen-patina-tief); }
/* Knoepfe als Links: die Linkfarbe darf die Knopfschrift nicht ueberschreiben (Kontrast). */
.aurelia-innen a.innen-knopf { color: var(--innen-stein-hell); }
.aurelia-innen a.innen-knopf--leise { color: var(--innen-tinte); }
.aurelia-innen a.innen-knopf:hover, .aurelia-innen a.innen-knopf:focus-visible { color: var(--innen-stein-hell); }
.aurelia-innen a.innen-knopf--leise:hover, .aurelia-innen a.innen-knopf--leise:focus-visible { color: var(--innen-tinte); }
.aurelia-innen :focus-visible { outline: 3px solid var(--innen-gold); outline-offset: 3px; border-radius: .25rem; }

/* Rang-Pille: dauerhaft sichtbar, eigener Weg statt Vergleich ----------- */
.innen-rang {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "name xp" "balken balken" "weg weg";
  gap: .3rem 1.1rem;
  align-items: baseline;
  margin-top: 1.1rem;
  padding: 1rem 1.4rem;
  width: 100%;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--innen-fuge);
  border-radius: 1.25rem;
  box-shadow: var(--innen-schatten);
  font-size: 1.08rem;
}
.innen-rang-name { grid-area: name; font-size: 1.25rem; }
.innen-rang-xp { grid-area: xp; color: var(--innen-tinte-dim); font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.innen-rang-prozent { color: var(--innen-patina-tief); font-weight: 600; }
.innen-rang-balken { grid-area: balken; width: 100%; min-width: 14rem; height: .8rem; }
.innen-rang-weg { grid-area: weg; font-size: .95rem; color: var(--innen-tinte-dim); }

/* Fortschrittsbalken: native <progress>, Patina auf Stein */
.aurelia-innen progress {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: .55rem;
  border: 0;
  border-radius: 999px;
  background: var(--innen-stein-tief);
  overflow: hidden;
}
.aurelia-innen progress::-webkit-progress-bar { background: var(--innen-stein-tief); border-radius: 999px; }
.aurelia-innen progress::-webkit-progress-value { background: linear-gradient(90deg, var(--innen-patina-tief), var(--innen-patina)); border-radius: 999px; }
.aurelia-innen progress::-moz-progress-bar { background: linear-gradient(90deg, var(--innen-patina-tief), var(--innen-patina)); border-radius: 999px; }

/* Panels: Arkaden-Stein ------------------------------------------------ */
.innen-panel {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--innen-fuge);
  border-radius: 1.25rem;
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
  box-shadow: var(--innen-schatten);
}
.innen-panel + .innen-panel, .innen-abschnitt + .innen-abschnitt, .innen-panel + .innen-weg,
.innen-fakten + .innen-panel, .innen-panel + .innen-mission, .innen-mission + .innen-route { margin-top: 1.25rem; }
.innen-abschnitt { margin-top: 1.5rem; }

.innen-hinweis { margin: .75rem 0 0; font-size: .9rem; color: var(--innen-tinte-dim); }
.innen-status { margin: 0; color: var(--innen-erfolg); }
.innen-fehler { color: var(--innen-ernst); }

/* Knoepfe ----------------------------------------------------------------- */
.innen-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  padding: .7rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--innen-tinte);
  background: var(--innen-tinte);
  color: var(--innen-stein-hell);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease;
}
.innen-knopf:hover { transform: translateY(-1px); }
.innen-knopf:active { transform: translateY(0); }
.innen-knopf:disabled { opacity: .55; cursor: progress; transform: none; }
.innen-knopf--leise {
  background: transparent;
  color: var(--innen-tinte);
  border-color: var(--innen-fuge);
}
.innen-knopf--ernst { background: var(--innen-ernst); border-color: var(--innen-ernst); }

.innen-weg {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin-top: 1.25rem;
}
.innen-weg form { display: contents; }
.innen-weg-links { display: contents; }

/* Kurs: Fakten, Fortschritt, Mission, Lernreise ------------------------ */
.innen-fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem;
  margin: 0 0 1.25rem;
}
.innen-fakten div { padding: .8rem 1rem; border-left: 3px solid var(--innen-gold); background: rgba(255, 255, 255, 0.4); border-radius: 0 .75rem .75rem 0; }
.innen-fakten dt { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--innen-tinte-dim); }
.innen-fakten dd { margin: .15rem 0 0; font-size: 1.15rem; font-weight: 600; }

.innen-fortschritt-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; margin-bottom: .6rem; }
.innen-fortschritt-kopf p { margin: 0; color: var(--innen-tinte-dim); }

.innen-mission { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; }
.innen-mission ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.innen-mission li + li { margin-top: .35rem; }

.innen-stationen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.innen-station-kopf { display: flex; gap: 1rem; align-items: center; margin-bottom: .75rem; }
.innen-station-nr {
  flex: 0 0 auto;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--innen-gold), var(--innen-bronze));
  color: var(--innen-stein-hell);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.innen-lektionen { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.innen-lektionen li { position: relative; padding-left: 1.6rem; min-height: 44px; display: flex; align-items: center; }
.innen-lektionen li::before {
  content: "";
  position: absolute; left: .3rem; top: 50%;
  width: .7rem; height: .7rem; margin-top: -.35rem;
  border-radius: 50%;
  border: 2px solid var(--innen-fuge);
  background: transparent;
}
.innen-lektionen li.ist-abgeschlossen::before { background: var(--innen-patina); border-color: var(--innen-patina-tief); }
.innen-lektionen a { color: var(--innen-tinte); text-decoration: none; }
.innen-lektionen a:hover, .innen-lektionen a:focus-visible { text-decoration: underline; }
.innen-lektionen .innen-raetsel a { color: var(--innen-patina-tief); font-weight: 600; }
.innen-lektionen .innen-raetsel::before { border-radius: .15rem; transform: rotate(45deg); border-color: var(--innen-gold); }
.innen-lektionen .innen-raetsel.ist-abgeschlossen::before { background: var(--innen-gold); }

/* Lektion: Lesetext ist eine calm-Zone ---------------------------------- */
/* Lektionsseiten: der Raum wird zur Lesespalte (56 rem), Kopf, Rang und Text buendig. */
.innen-raum:has(.innen-lektion) { width: min(56rem, 100% - 2rem); }
.innen-lektion { max-width: none; font-size: 1.1rem; }
.innen-lektion h2, .innen-lektion h3 { margin-top: 1.6rem; }
.innen-lektion img { max-width: 100%; height: auto; border-radius: .75rem; }
.innen-lektion noscript { display: none; }

/* Mission abgeschlossen (Partial und ?fertig=1) -------------------------- */
.innen-mission-fertig {
  margin-top: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 1.25rem;
  border: 1px solid var(--innen-gold);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(217, 179, 108, 0.35), transparent 55%),
    rgba(255, 255, 255, 0.7);
  box-shadow: var(--innen-schatten);
}
.innen-mission-titel { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--innen-tinte); }
.innen-mission-text { margin: .5rem 0 0; font-size: 1.1rem; }
/* .innen-mission-rang/-badge, .innen-xp-chip und innen-ankommen: seit v4 in momente.css (Innenraum und Blog). */
[data-motion="cinematic"] .innen-mission-fertig,
[data-motion="spectacle"] .innen-mission-fertig { animation: innen-ankommen .6s cubic-bezier(.2, .7, .2, 1) both; }

/* Schnupperlektion ohne Konto (ADR-005, Kanon 8k) ------------------------ */
/* Etikett am Lektionslink der Kursseite: steht IM Link, damit der Screenreader es mitliest;
   inline-block, damit die Unterstreichung beim Hover nicht hindurchlaeuft. */
.innen-etikett {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .55rem;
  border: 1px solid var(--innen-patina);
  border-radius: 999px;
  color: var(--innen-patina-tief);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  vertical-align: .1em;
}
.innen-schnupper-punkte { margin: .75rem 0 0; padding-left: 1.2rem; }
.innen-schnupper-punkte li + li { margin-top: .35rem; }

/* Raetsel und Quiz ------------------------------------------------------- */
.innen-feld {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--innen-fuge);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.45);
}
.innen-feld legend { padding: 0 .4rem; font-weight: 600; }
.innen-feld select, .innen-konto input:not([type="checkbox"]) {
  min-height: 44px;
  padding: .5rem .8rem;
  border-radius: .6rem;
  border: 1px solid var(--innen-fuge);
  background: var(--innen-stein-hell);
  color: var(--innen-tinte);
  font: inherit;
}
.innen-antwort { display: flex; gap: .7rem; align-items: flex-start; min-height: 44px; padding: .45rem .25rem; cursor: pointer; }
.innen-antwort input { width: 1.25rem; height: 1.25rem; margin-top: .25rem; accent-color: var(--innen-patina-tief); flex: 0 0 auto; }
.innen-quiz > .innen-knopf { margin-top: .5rem; }
.aurelia-innen label { color: var(--innen-tinte); }
.aurelia-innen input:not([type="checkbox"]):not([type="radio"]), .aurelia-innen textarea {
  min-height: 44px;
  padding: .5rem .8rem;
  border-radius: .6rem;
  border: 1px solid var(--innen-fuge);
  background: var(--innen-stein-hell);
  color: var(--innen-tinte);
  font: inherit;
}
.innen-konto label { display: block; margin-bottom: .3rem; }
.innen-konto input:not([type="checkbox"]) { display: block; width: min(20rem, 100%); }
.innen-namensform label { display: block; font-weight: 600; margin-bottom: .4rem; }
.innen-namensform-zeile { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.innen-namensform-zeile input { flex: 1 1 16rem; }

.innen-ergebnis--erfolg { border-color: var(--innen-patina); }
.innen-ergebnis--offen { border-color: var(--innen-offen); }

/* Kommandobruecke ---------------------------------------------------------- */
.innen-kurskarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.innen-kurskarte { display: grid; gap: .35rem; text-decoration: none; color: var(--innen-tinte); transition: transform .18s ease; }
.innen-kurskarte:hover { transform: translateY(-2px); }
.innen-kurskarte-titel { font-size: 1.15rem; }
.innen-kurskarte-meta { font-size: .9rem; color: var(--innen-tinte-dim); }

.innen-orden { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.innen-kartenvorschau { display: block; width: min(360px, 100%); height: auto; border-radius: 12px; border: 1px solid var(--innen-fuge); margin: .5rem 0; }
/* Lernenden-Karte (ADR-004): Kurs, Rang bei Ausstellung und Pruef-Link untereinander,
   sonst quetscht sich die Zeile auf schmalen Schirmen ineinander. */
.innen-zertifikatsliste { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .75rem; }
.innen-zertifikat { display: grid; gap: .25rem; justify-items: start; }
.innen-zertifikat-kurs { font-size: 1.05rem; }
.innen-orden-chip {
  padding: .45rem .9rem;
  min-height: 44px;
  /* Zwei Zeilen seit den Fleiss-Badges (v4): Name, darunter die Bedingung, solange das
     Badge fehlt. Die 44 px Trefferflaeche bleiben, der Gold-Zustand ebenso. */
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  border-radius: 999px;
  border: 1px dashed var(--innen-fuge);
  color: var(--innen-tinte-dim);
  background: rgba(255, 255, 255, 0.35);
}
.innen-orden-name { font-weight: 600; }
.innen-orden-bedingung { font-size: .78rem; opacity: .8; }
.innen-orden-chip.ist-erhalten {
  border-style: solid;
  border-color: var(--innen-gold);
  color: var(--innen-tinte);
  background: linear-gradient(160deg, rgba(217, 179, 108, 0.35), rgba(255, 255, 255, 0.6));
}
.innen-liste { margin: 0; padding-left: 1.2rem; }

/* Zertifikat (Prüfseite) --------------------------------------------------- */
.innen-urkunde {
  text-align: center;
  border: 2px solid var(--innen-gold);
  outline: 1px solid var(--innen-fuge);
  outline-offset: 6px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(217, 179, 108, 0.25), transparent 70%),
    rgba(255, 255, 255, 0.72);
}
.innen-urkunde-status { color: var(--innen-erfolg); margin: .25rem 0; }
.innen-urkunde-titel { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: .04em; margin: .25rem 0 1rem; }
.innen-urkunde-fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; margin: 0; text-align: left; }
.innen-urkunde-fakten div { padding: .6rem .9rem; background: rgba(255, 255, 255, 0.5); border-radius: .75rem; }
.innen-urkunde-fakten dt { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--innen-tinte-dim); }
.innen-urkunde-fakten dd { margin: .15rem 0 0; }
.innen-urkunde .innen-weg { justify-content: center; }

/* Mobil ------------------------------------------------------------------- */
@media (max-width: 40rem) {
  .innen-raum { width: min(72rem, 100% - 1.5rem); }
  .innen-rang { width: 100%; }
  .innen-rang-balken { min-width: 0; }
  .innen-weg .innen-knopf { flex: 1 1 100%; }
  .innen-station-kopf { align-items: flex-start; }
}

/* Reduced Motion: statisch und vollwertig ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .aurelia-innen *, .aurelia-innen *::before, .aurelia-innen *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Altstyles aus galaxie.css (form fieldset, button, .quiz-reise) im Innenraum ueberschreiben.
   Bis Stufe C die Quiz-Bindung ersetzt, bleibt quiz-reise.js — nur in Stein statt Nacht. ----- */
.aurelia-innen form fieldset, .aurelia-innen .quiz-reise fieldset {
  border: 1px solid var(--innen-fuge);
  background: rgba(255, 255, 255, 0.45);
  color: var(--innen-tinte);
  border-radius: 1rem;
}
.aurelia-innen form fieldset legend, .aurelia-innen .quiz-reise fieldset legend,
.aurelia-innen form fieldset label, .aurelia-innen .quiz-reise fieldset label {
  color: var(--innen-tinte);
}
.aurelia-innen .quiz-reise label:hover { background: rgba(217, 179, 108, 0.18); }
.aurelia-innen .flugroute .stern { background: var(--innen-fuge); box-shadow: none; }
.aurelia-innen .flugroute .stern.besucht { background: var(--innen-patina); }
.aurelia-innen .flugroute .stern.aktiv { background: var(--innen-gold); box-shadow: 0 0 0 4px rgba(217, 179, 108, 0.3); }
.aurelia-innen .flugroute .linie { background: var(--innen-fuge); }
.aurelia-innen button:not(.innen-knopf):not(.bak-flipcard):not(.bak-check-antwort):not(.bak-int-btn):not(.bak-tab):not(.bak-prompt-copy):not(.bak-st-sort):not(.moment-zu):not(.innen-avatar-option):not(.beirat-punkt):not(.beirat-merk-knopf):not(.beirat-illustration-knopf) {
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--innen-tinte);
  background: var(--innen-tinte);
  color: var(--innen-stein-hell);
  font: inherit;
  font-weight: 600;
  padding: .7rem 1.25rem;
}
.aurelia-innen button:not(.innen-knopf):not(.bak-flipcard):not(.bak-check-antwort):not(.bak-int-btn):not(.bak-tab):not(.bak-prompt-copy):not(.bak-st-sort):not(.moment-zu):not(.innen-avatar-option):not(.beirat-punkt):not(.beirat-merk-knopf):not(.beirat-illustration-knopf):hover { filter: none; transform: translateY(-1px); }
.aurelia-innen button.sekundaer { background: transparent; color: var(--innen-tinte); border-color: var(--innen-fuge); }

/* ---- Momente (momente.js): die Karte lebt seit v4 in momente.css, geteilt mit dem Blog ---- */

/* ---- Urkunde: Siegel, Satz, Goldstaub ---- */
.innen-urkunde { position: relative; overflow: hidden; }
.innen-urkunde-satz { margin: .5rem auto 1.25rem; max-width: 34rem; font-style: italic; color: var(--innen-tinte); }
.innen-urkunde-name { margin: .25rem 0 .5rem; font-size: 1.15rem; }
.innen-siegel {
  position: absolute; right: 1.25rem; top: 1.25rem;
  width: 5rem; height: 5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #f0d99a, var(--innen-gold) 55%, var(--innen-bronze));
  color: var(--innen-tinte);
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.25;
  box-shadow: 0 6px 18px rgba(162, 102, 47, 0.35), 0 0 0 3px rgba(255, 255, 255, 0.6) inset;
}
.goldstaub { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.goldstaub span {
  position: absolute; top: -10px; left: var(--x);
  width: var(--g); height: var(--g); border-radius: 50%;
  background: var(--innen-gold);
  opacity: 0;
  animation: innen-goldstaub var(--d) ease-in var(--v) 1 forwards;
}
@keyframes innen-goldstaub { 0% { opacity: .95; transform: translateY(0); } 100% { opacity: 0; transform: translateY(70vh); } }

/* ---- Konto-Fuss auf der Kommandobruecke: leise ---- */
.innen-konto-fuss { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--innen-fuge); }
.innen-konto-fuss h2 { font-size: 1rem; color: var(--innen-tinte-dim); }
.innen-konto-fuss a { color: var(--innen-tinte-dim); }
.innen-konto form p { margin: 0 0 .9rem; }
.innen-konto h1, .innen-konto h2 { color: var(--innen-tinte); font-size: 1.4rem; margin: 0 0 .75rem; }
.innen-konto p { color: var(--innen-tinte); }
.innen-konto a { color: var(--innen-patina-tief); }
.innen-konto input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--innen-patina-tief); }
.innen-konto .helptext, .innen-konto .errorlist { font-size: .9rem; color: var(--innen-tinte-dim); }
.innen-konto .errorlist { color: var(--innen-ernst); list-style: none; padding: 0; }

@media (max-width: 40rem) { .innen-siegel { width: 3.75rem; height: 3.75rem; font-size: .5rem; right: .75rem; top: .75rem; } }
@media (prefers-reduced-motion: reduce) { .goldstaub { display: none; } }
/* Konto-Karte (allauth): die Site-Regeln .konto-karte * setzen Buehnenfarben — im Innenraum Tinte. */
.aurelia-innen .konto-karte h1, .aurelia-innen .konto-karte h2, .aurelia-innen .konto-karte p, .aurelia-innen .konto-karte li, .aurelia-innen .konto-karte label { color: var(--innen-tinte); }
.aurelia-innen .konto-karte a { color: var(--innen-patina-tief); }
.aurelia-innen .konto-karte .innen-status { color: var(--innen-erfolg); }
.aurelia-innen .konto-karte .errorlist { color: var(--innen-ernst); }

/* ---- Avatare (Rang-Pille, Kommandobruecke, Urkunde) ---- */
.innen-rang { grid-template-columns: auto 1fr auto; grid-template-areas: "avatar name xp" "avatar balken balken" "avatar weg weg"; column-gap: 1.25rem; }
.innen-rang-avatar { grid-area: avatar; align-self: center; }
.innen-rang-avatar .avatar { display: block; width: 170px; height: 221px; }
.innen-avatar-buehne { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; }
.innen-avatar-gross { padding: 1rem; border-radius: 1.25rem; background: radial-gradient(70% 70% at 50% 40%, rgba(217, 179, 108, 0.35), transparent 70%), rgba(255, 255, 255, 0.5); }
.innen-avatar-wahl { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }
.aurelia-innen .innen-avatar-option {
  display: grid; justify-items: center; gap: .3rem;
  min-width: 6.5rem; min-height: 44px; padding: .6rem .7rem;
  border: 2px solid var(--innen-fuge); border-radius: 1rem;
  background: rgba(255, 255, 255, 0.6); color: var(--innen-tinte);
  font: inherit; font-size: .85rem; cursor: pointer;
}
.aurelia-innen .innen-avatar-option:hover { border-color: var(--innen-patina); color: var(--innen-tinte); filter: none; transform: translateY(-2px); }
.aurelia-innen .innen-avatar-option.ist-aktiv { border-color: var(--innen-gold); background: rgba(217, 179, 108, 0.2); font-weight: 600; }
.innen-ausruestung-titel { font-size: 1rem; margin: 0 0 .4rem; }
.innen-ausruestung { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .3rem .9rem; }
.innen-ausruestung li { padding-left: 1.4rem; position: relative; color: var(--innen-tinte-dim); }
.innen-ausruestung li::before { content: ""; position: absolute; left: .2rem; top: .45em; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--innen-fuge); }
.innen-ausruestung li.ist-erhalten { color: var(--innen-tinte); }
.innen-ausruestung li.ist-erhalten::before { background: var(--innen-gold); border-color: var(--innen-bronze); }
.innen-urkunde--campus {
  background-size: cover; background-position: center 35%;
  box-shadow: 0 24px 60px rgba(20, 32, 58, 0.25);
}
.innen-urkunde--campus > *:not(.goldstaub):not(.innen-siegel):not(.innen-urkunde-avatar) { position: relative; }
.innen-urkunde--campus::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250, 245, 234, 0.72), rgba(250, 245, 234, 0.9) 45%, rgba(250, 245, 234, 0.95)); }
.innen-urkunde-avatar { position: relative; margin: .25rem auto 0; width: 220px; }
.innen-urkunde-avatar .avatar { display: block; }
.innen-siegel { z-index: 1; }
@media (max-width: 40rem) {
  .innen-avatar-buehne { grid-template-columns: 1fr; }
  .innen-avatar-gross { justify-self: center; }
  .innen-rang { grid-template-columns: auto 1fr; grid-template-areas: "avatar name" "avatar xp" "balken balken" "weg weg"; }
  .innen-rang-avatar .avatar { width: 96px; height: 125px; }
  .innen-urkunde-avatar { width: 150px; }
  .innen-urkunde-avatar .avatar { width: 150px; height: 195px; }
}

/* ---- Merkkasten (Stufe 4, Charles 08.09.): Wiedersehen mit Merksaetzen ---- */
.innen-merkkasten-heute { margin: 1rem 0 .5rem; font-size: 1.1rem; }
.innen-merkkarten { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.merkkarte { position: relative; padding: .9rem 1.1rem; border: 1px solid var(--innen-fuge); border-left: 4px solid var(--innen-gold); border-radius: 1rem; background: rgba(255, 255, 255, 0.62); }
.merkkarte-quelle { margin: 0 0 .25rem; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--innen-tinte-dim); }
.merkkarte-quelle a { color: inherit; }
.merkkarte-frage { margin: 0 0 .6rem; font-weight: 600; }
.merkkarte-aufdecken summary { display: inline-flex; list-style: none; cursor: pointer; }
.merkkarte-aufdecken summary::-webkit-details-marker { display: none; }
.merkkarte-aufdecken[open] summary { display: none; }
.merkkarte-satz { margin: .5rem 0 .8rem; padding: .7rem .9rem; border-radius: .75rem; background: rgba(217, 179, 108, 0.16); font-size: 1.08rem; font-weight: 600; animation: merkkarte-auf .4s ease-out; }
.merkkarte-antwort { display: flex; flex-wrap: wrap; gap: .5rem; }
.merkkarte--fertig { margin: 0; padding: .6rem 0 0; border: 0; border-top: 1px solid var(--innen-fuge); border-radius: 0; background: none; }
.merkkarte--fertig .merkkarte-stand { margin: 0; color: var(--innen-patina-tief); font-weight: 600; }
.merkkarte .hat-begleiter, .merkkarte .begleiter { margin-bottom: .4rem; }
.innen-merkkasten-leer { margin: .75rem 0 0; }
.merkkarte-leise { font-weight: 400; color: var(--innen-tinte-dim); }
.merkkarte-marke { display: inline-block; margin-right: .45rem; padding: .1rem .5rem; border-radius: 999px; background: rgba(79, 143, 131, 0.16); color: var(--innen-patina-tief); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; vertical-align: .1em; }
.merkkarte--flipcard { border-left-color: var(--innen-patina); }
.merkkarte--flipcard .merkkarte-marke { background: rgba(217, 179, 108, 0.22); color: var(--innen-bronze); }
.merkkarte-punkte { margin: .5rem 0 .8rem; padding: .7rem .9rem .7rem 2rem; border-radius: .75rem; background: rgba(79, 143, 131, 0.12); display: grid; gap: .3rem; animation: merkkarte-auf .4s ease-out; }
.merkkarte-punkte li::marker { color: var(--innen-patina-tief); }
/* Merksaetze zu falschen Quizfragen (Merkbar-Regel 10 auf der Ergebnisseite) */
.innen-merkhilfen { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--innen-fuge); }
.innen-merkhilfen-titel { margin: 0 0 .25rem; font-size: 1.05rem; }
.innen-merkhilfen-liste { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .75rem; }
.innen-merkhilfen-liste > li { padding: .75rem .9rem; border-radius: .9rem; border-left: 4px solid var(--innen-gold); background: rgba(255, 255, 255, 0.55); }
.innen-merkhilfen-liste .merkkarte-satz { margin: .35rem 0 0; }
@media (prefers-reduced-motion: reduce) { .merkkarte-punkte { animation: none; } }
/* Gold-Funken (.hat-funken, merk-funken): seit v4 in momente.css, geteilt mit dem Blog. */
.merkkarte--fertig .innen-xp-chip { margin: 0 .25rem; }
@keyframes merkkarte-auf { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .merkkarte-satz { animation: none; } }

/* ---- Faehigkeitenbaum (Charles, 08.09.): ein Zweig je Thema, waechst mit den Lektionen ---- */
.innen-faehigkeiten-panel { display: grid; justify-items: center; gap: .75rem; }
.innen-faehigkeiten-stand { margin: 0; color: var(--innen-tinte-dim); }
.faehigkeitenbaum { display: block; width: min(100%, 700px); height: auto; font-family: inherit; }
.innen-faehigkeiten-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .9rem; color: var(--innen-tinte-dim); }
.innen-faehigkeiten-legende li { display: inline-flex; align-items: center; gap: .4rem; }
.faehigkeit-punkt { width: .85rem; height: .85rem; border-radius: 50%; border: 2px solid var(--innen-fuge); background: var(--innen-stein-hell); }
.faehigkeit-punkt--begonnen { background: linear-gradient(90deg, var(--innen-patina) 50%, var(--innen-stein-hell) 50%); border-color: var(--innen-patina-tief); }
.faehigkeit-punkt--gelernt { background: var(--innen-patina-tief); border-color: var(--innen-patina-tief); }
.faehigkeit-punkt--gemeistert { background: var(--innen-gold); border-color: var(--innen-bronze); box-shadow: 0 0 0 3px rgba(217, 179, 108, 0.35); }
[data-motion="cinematic"] .faehigkeit-glanz, [data-motion="spectacle"] .faehigkeit-glanz { animation: faehigkeit-glanz 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes faehigkeit-glanz { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

/* ---- Figuren leben (Charles, 08.09.): leises Atmen, Blinzeln, Ausruestung leuchtet ---- */
.avatar .avatar-koerper { transform-box: fill-box; transform-origin: 50% 100%; }
[data-motion="cinematic"] .avatar .avatar-koerper, [data-motion="spectacle"] .avatar .avatar-koerper { animation: avatar-atmen 4.2s ease-in-out infinite; }
.avatar .avatar-lider { transform-box: fill-box; transform-origin: 50% 0%; transform: scaleY(0); }
[data-motion="cinematic"] .avatar .avatar-lider, [data-motion="spectacle"] .avatar .avatar-lider { animation: avatar-blinzeln 5.5s ease-in-out infinite; }
[data-motion="cinematic"] .avatar .avatar-licht, [data-motion="spectacle"] .avatar .avatar-licht { animation: avatar-licht 3s ease-in-out infinite; }
[data-motion="cinematic"] .avatar .avatar-schiff, [data-motion="spectacle"] .avatar .avatar-schiff { animation: avatar-schweben 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes avatar-atmen { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.015) translateY(-1px); } }
@keyframes avatar-blinzeln { 0%, 93%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
@keyframes avatar-licht { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes avatar-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .avatar * { animation: none !important; } }

/* ── Konto-Eingang: eine ruhige, zentrierte Karte ─────────────────────────
   Anmelden und Registrieren sind der erste Eindruck. Statt eines Formulars,
   das links oben im Innenraum klebt, steht die Karte mittig, schmal und mit
   der Marke darueber — wie eine Tuer, nicht wie ein Karteikasten. */
.konto-buehne {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: min(60vh, 34rem);
  padding: clamp(1rem, 5vw, 3.5rem) 0;
}

.konto-buehne .konto-karte {
  width: min(26rem, 100%);
  margin: 0;
}

.konto-marke {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  margin: 0 0 1.6rem;
  text-align: center;
}

.konto-marke-zeichen {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--innen-patina-tief, #8a6410);
}

.konto-marke-zeichen svg {
  width: 100%;
  height: 100%;
  display: block;
}

.konto-marke-wort {
  font-size: 1.05rem;
  letter-spacing: .18em;
  text-transform: lowercase;
  color: var(--innen-tinte-dim);
}

/* Im Kontoeingang stehen Ueberschrift und Text mittig; die Felder bleiben
   linksbuendig, weil zentrierte Eingabefelder das Auge beim Ausfuellen
   verlieren. */
.konto-buehne .innen-konto h1,
.konto-buehne .innen-konto h2 {
  text-align: center;
}

.konto-buehne .innen-konto input:not([type="checkbox"]) {
  width: 100%;
}

.konto-buehne .innen-konto .innen-knopf,
.konto-buehne .innen-konto button[type="submit"] {
  width: 100%;
}

.konto-buehne .innen-konto-fuss {
  text-align: center;
}

@media (max-width: 30rem) {
  .konto-buehne {
    padding-top: 1.25rem;
    min-height: 0;
  }
}

/* ── Konto-Eingang, Anmeldeweg (ADR-006) ──────────────────────────────────
   Nutzenzeilen, Felder mit Label ueber dem Eingabefeld, Fehler am Feld und als
   Zusammenfassung oben. Nichts bewegt sich; Farben nur aus den --innen-Tokens. */
.konto-buehne .innen-konto .konto-nutzen {
  list-style: none;
  margin: 0 0 .6rem;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.konto-buehne .innen-konto .konto-nutzen li {
  position: relative;
  padding-left: 1.55rem;
  line-height: 1.5;
}
.konto-buehne .innen-konto .konto-nutzen li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: .42em;
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  background: var(--innen-gold);
  box-shadow: 0 0 0 3px rgba(217, 179, 108, .28);
}
.konto-buehne .innen-konto .konto-frei { margin: 0 0 1.1rem; font-weight: 600; }
.konto-buehne .innen-konto .konto-weiter { margin: 0 0 1rem; font-size: .95rem; line-height: 1.55; color: var(--innen-tinte-dim); }
/* Leise Knoepfe in der Karte in Tinte wie ueberall im Innenraum, nicht in Link-Patina. */
.aurelia-innen .konto-karte a.innen-knopf--leise { color: var(--innen-tinte); }
.konto-buehne .innen-konto .konto-klein { margin: 1rem 0 0; font-size: .88rem; color: var(--innen-tinte-dim); text-align: center; }
.konto-buehne .innen-konto .konto-wechsel { margin: 1.1rem 0 0; text-align: center; }

.konto-feld { margin: 0 0 1rem; }
.konto-feld label { font-weight: 600; }
.konto-feld .helptext { margin-top: .35rem; line-height: 1.5; }
.konto-feld .helptext ul { margin: 0; padding-left: 1.1rem; }
.konto-feld .errorlist { margin: .35rem 0 0; font-weight: 600; }
.konto-feld input[aria-invalid="true"] { border-color: var(--innen-ernst); box-shadow: 0 0 0 1px var(--innen-ernst); }
.konto-feld--haken { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.konto-feld--haken label { font-weight: 400; margin: 0; }
.konto-feld--haken .errorlist { flex-basis: 100%; }

/* Fehler und Sprungziele nicht unter den festen Seitenkopf scrollen (Telefon: zwei Zeilen Nav). */
.konto-fehler, .konto-feld input { scroll-margin-top: 10rem; }
.konto-fehler {
  margin: 0 0 1.1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--innen-ernst);
  border-left-width: 4px;
  border-radius: .6rem;
  background: rgba(139, 58, 47, .06);
}
.aurelia-innen .konto-karte .konto-fehler p,
.aurelia-innen .konto-karte .konto-fehler li,
.aurelia-innen .konto-karte .konto-fehler a { color: var(--innen-ernst); }
.konto-fehler-titel { margin: 0 0 .35rem; font-weight: 700; }
.konto-fehler ul { margin: 0; padding-left: 1.1rem; }

/* Honeypot: fuer Menschen und Screenreader unsichtbar, fuer Bots ein Feld. */
.konto-koeder { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Anmeldung: der Weg zur Registrierung sitzt unter dem Formular, durch eine Fuge getrennt. */
.konto-neu { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--innen-fuge); }
.konto-buehne .innen-konto .konto-neu h2 { font-size: 1.1rem; margin-bottom: .6rem; }
.konto-buehne .innen-konto .konto-neu .innen-knopf { width: 100%; }