/* ============================================================
   Beirat Akademie — INTERAKTIONEN (interaktionen.css)
   ============================================================
   Gestaltung der Lektionsinteraktionen im Aurelia-Innenraum. Farben aus
   innen.css (--innen-*), nur transform/opacity bewegen sich, Touch-Ziele
   mindestens 44 px, Reduced Motion: Crossfade statt 3D, kein Glanz.
   Kanon: .claude/skills/academy-experience/SKILL.md (Abschnitt 8a)
   ============================================================ */

/* ---- Flipcards: Karte als Button, beide Seiten im selben Grid-Feld (keine feste Hoehe) */
.bak-flipcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.bak-flipcard {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  perspective: 1000px;
}
.bak-flipcard:focus-visible { outline: 3px solid var(--innen-gold); outline-offset: 4px; border-radius: 1rem; }
.bak-flipcard-inner {
  display: grid;
  grid-template-areas: "seite";
  width: 100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.3, .7, .2, 1);
}
.bak-flipcard[aria-pressed="true"] .bak-flipcard-inner { transform: rotateY(180deg); }
.bak-flipcard-front, .bak-flipcard-back {
  grid-area: seite;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  min-height: 9rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--innen-fuge);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 28px rgba(20, 32, 58, 0.10);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.bak-flipcard-front { font-weight: 600; font-size: 1.05rem; align-items: flex-start; }
.bak-flipcard-back {
  transform: rotateY(180deg);
  border-left: 4px solid var(--innen-gold);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(217, 179, 108, 0.25), transparent 55%),
    rgba(255, 255, 255, 0.85);
  font-size: .95rem;
  line-height: 1.5;
}
.bak-flipcard-back strong { color: var(--innen-bronze); letter-spacing: .06em; }
.bak-flipcard-back ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.bak-flipcard-back li + li { margin-top: .2rem; }
.bak-flipcard-hinweis {
  margin-top: auto;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--innen-tinte-dim);
}
/* Merk-Symbol: Monogramm in einer Form, die je Karte anders ist */
.bak-sigil {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--innen-stein-hell);
  background: linear-gradient(160deg, var(--innen-patina), var(--innen-patina-tief));
  box-shadow: 0 0 0 3px rgba(217, 179, 108, 0.55);
  border-radius: 50%;
}
.bak-sigil--sechseck { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); border-radius: 0; box-shadow: none; background: linear-gradient(160deg, var(--innen-gold), var(--innen-bronze)); }
.bak-sigil--raute { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border-radius: 0; box-shadow: none; width: 3.6rem; height: 3.6rem; background: linear-gradient(160deg, #4f7f9a, var(--innen-tinte)); }
.bak-sigil--schild { clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); border-radius: 0; box-shadow: none; background: linear-gradient(160deg, var(--innen-bronze), #7a2a38); }
/* Glanz beim ersten Umdrehen: ein goldener Ring, der sich einmal ausdehnt */
.bak-flipcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  border: 2px solid var(--innen-gold);
  opacity: 0;
  pointer-events: none;
}
.bak-flipcard.ist-neu-gedreht::after { animation: bak-glanz .7s ease-out both; }
@keyframes bak-glanz {
  from { opacity: .9; transform: scale(1); }
  to { opacity: 0; transform: scale(1.08); }
}
.bak-flipcards-fertig {
  grid-column: 1 / -1;
  margin: 0;
  font-weight: 600;
  color: var(--innen-patina-tief);
  animation: bak-erscheinen .5s ease-out both;
}
@keyframes bak-erscheinen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Die globale Site-Regel button:hover setzt weisse Schrift und Helligkeit — hier nicht. */
.bak-flipcard:hover, .bak-flipcard:focus-visible,
.bak-check-antwort:hover, .bak-check-antwort:focus-visible { color: var(--innen-tinte); filter: none; }

/* ---- Wissens-Check: Antworten als Formular, Ergebnis darunter */
.bak-check {
  margin: 1.75rem 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--innen-fuge);
  border-left: 4px solid var(--innen-patina);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.55);
}
.bak-check-frage { margin: 0 0 .75rem; font-weight: 600; }
.bak-check-antworten { display: grid; gap: .5rem; margin: 0; }
.bak-check-antwort {
  min-height: 44px;
  padding: .7rem 1rem;
  border: 1px solid var(--innen-fuge);
  border-radius: .75rem;
  background: rgba(255, 255, 255, 0.8);
  color: var(--innen-tinte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease;
}
.bak-check-antwort:hover:not(:disabled) { transform: translateX(3px); border-color: var(--innen-patina); }
.bak-check-antwort:disabled { cursor: default; opacity: .8; }
.bak-check-antwort.ist-richtig {
  border-color: var(--innen-patina-tief);
  background: rgba(79, 143, 131, 0.18);
  color: var(--innen-tinte);
  font-weight: 600;
  opacity: 1;
}
.bak-check-antwort.ist-falsch { border-color: var(--innen-offen); background: rgba(162, 102, 47, 0.10); text-decoration: line-through; }
.bak-check-ergebnis { margin-top: .75rem; }
.bak-check-antwortkarte {
  padding: .8rem 1rem;
  border-radius: .75rem;
  border: 1px solid var(--innen-fuge);
  background: rgba(255, 255, 255, 0.75);
  animation: bak-erscheinen .45s ease-out both;
}
.bak-check-antwortkarte.ist-richtig { border-color: var(--innen-patina); background: radial-gradient(90% 120% at 100% 0%, rgba(217, 179, 108, 0.3), transparent 55%), rgba(255, 255, 255, 0.8); }
.bak-check-antwortkarte.ist-falsch { border-color: var(--innen-offen); }
.bak-check-urteil { margin: 0; }
.bak-check-text { margin: .35rem 0 0; }
.bak-check-leise { color: var(--innen-tinte-dim); font-size: .9rem; }
.bak-check .innen-xp-chip { animation: bak-chip .5s .15s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes bak-chip { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }

/* ---- Ohne Skript: beide Kartenseiten sichtbar, kein Glanz */
html:not(.hat-interaktionen) .bak-flipcard-inner { display: grid; gap: .5rem; transform: none; }
html:not(.hat-interaktionen) .bak-flipcard-front,
html:not(.hat-interaktionen) .bak-flipcard-back { grid-area: auto; transform: none; backface-visibility: visible; }
html:not(.hat-interaktionen) .bak-flipcard-hinweis { display: none; }

/* ---- Reduced Motion: Crossfade statt Drehung, nichts glaenzt */
@media (prefers-reduced-motion: reduce) {
  .bak-flipcard-inner { transition: none; transform: none !important; }
  .bak-flipcard-front, .bak-flipcard-back { backface-visibility: visible; transform: none; transition: opacity .2s ease; }
  .bak-flipcard .bak-flipcard-back { opacity: 0; pointer-events: none; }
  .bak-flipcard[aria-pressed="true"] .bak-flipcard-back { opacity: 1; pointer-events: auto; }
  .bak-flipcard[aria-pressed="true"] .bak-flipcard-front { opacity: 0; }
  .bak-flipcard.ist-neu-gedreht::after, .bak-flipcards-fertig, .bak-check-antwortkarte, .bak-check .innen-xp-chip { animation: none; }
  .bak-check-antwort { transition: none; }
}

/* ============================================================
   Alle uebrigen Lektionsinteraktionen (Stufe C, 06.09.2026)
   ============================================================ */

/* ---- Gemeinsame Komponentenkarte, Knoepfe, Rueckmeldung */
.bak-int {
  margin: 1.75rem 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--innen-fuge);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.55);
}
.bak-int-titel { margin: 0 0 .85rem; font-weight: 600; }
.bak-int-kicker { display: block; margin: 0 0 .3rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--innen-bronze); }
.aurelia-innen .bak-int-btn, .aurelia-innen .bak-prompt-copy, .aurelia-innen .bak-st-sort {
  min-height: 44px;
  padding: .55rem .95rem;
  border: 1px solid var(--innen-fuge);
  border-radius: .75rem;
  background: rgba(255, 255, 255, 0.85);
  color: var(--innen-tinte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.aurelia-innen .bak-int-btn:hover:not(:disabled), .aurelia-innen .bak-int-btn:focus-visible { color: var(--innen-tinte); filter: none; border-color: var(--innen-patina); transform: translateY(-1px); }
.aurelia-innen .bak-int-btn:disabled { cursor: default; opacity: .75; }
.aurelia-innen .bak-int-btn[aria-pressed="true"], .aurelia-innen .bak-int-btn.ist-gewaehlt { background: var(--innen-tinte); border-color: var(--innen-tinte); color: var(--innen-stein-hell); }
.aurelia-innen .bak-int-btn[aria-pressed="true"]:hover, .aurelia-innen .bak-int-btn.ist-gewaehlt:hover { color: var(--innen-stein-hell); }
.aurelia-innen .bak-int-btn.ist-richtig { border-color: var(--innen-patina-tief); background: rgba(79, 143, 131, 0.18); color: var(--innen-tinte); font-weight: 600; opacity: 1; }
.aurelia-innen .bak-int-btn.ist-falsch { border-color: var(--innen-offen); background: rgba(162, 102, 47, 0.10); text-decoration: line-through; }
.bak-fb { margin: .85rem 0 0; padding: .6rem .85rem; border-left: 3px solid var(--innen-fuge); border-radius: 0 .5rem .5rem 0; background: rgba(255, 255, 255, 0.6); animation: bak-erscheinen .4s ease-out both; }
.bak-fb--ok { border-left-color: var(--innen-patina-tief); }
.bak-fb--nein { border-left-color: var(--innen-offen); }
.bak-haken { stroke: var(--innen-patina-tief); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.bak-panel { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--innen-fuge); }
.bak-panel[hidden] { display: none; }
.bak-panel.ist-aufgedeckt { animation: bak-erscheinen .45s ease-out both; }

/* ---- Tooltip */
.bak-term { position: relative; cursor: help; border-bottom: 2px dotted var(--innen-patina); font-weight: 600; }
.bak-term:focus-visible { outline: 3px solid var(--innen-gold); outline-offset: 2px; }
.bak-term-tip {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30;
  min-width: 14rem; max-width: 20rem;
  padding: .55rem .8rem;
  border-radius: .6rem;
  background: var(--innen-tinte);
  color: var(--innen-stein-hell);
  font-size: .85rem; font-weight: 400; line-height: 1.45;
  box-shadow: 0 10px 28px rgba(20, 32, 58, 0.25);
  animation: bak-erscheinen .2s ease-out both;
}
.bak-term-tip[hidden] { display: none; }

/* ---- Prompt (Kopieren) */
.bak-prompt { position: relative; margin: 1.25rem 0; }
.bak-prompt pre {
  margin: 0; padding: 2.4rem 1.1rem 1rem;
  border-radius: .9rem;
  background: var(--innen-tinte);
  color: var(--innen-stein-hell);
  font-size: .9rem; line-height: 1.6; white-space: pre-wrap; overflow-x: auto;
}
.aurelia-innen .bak-prompt-copy { position: absolute; top: .5rem; right: .6rem; min-height: 36px; padding: .3rem .7rem; font-size: .8rem; background: transparent; color: var(--innen-gold); border-color: rgba(217, 179, 108, 0.6); }
.aurelia-innen .bak-prompt-copy:hover, .aurelia-innen .bak-prompt-copy.ist-kopiert { color: var(--innen-gold); border-color: var(--innen-gold); }

/* ---- Tabs */
.bak-tabs { margin: 1.5rem 0; }
.bak-tablist { display: flex; flex-wrap: wrap; gap: .35rem; border-bottom: 1px solid var(--innen-fuge); }
.aurelia-innen .bak-tab {
  min-height: 44px; padding: .6rem 1rem;
  border: 0; border-bottom: 3px solid transparent; border-radius: .6rem .6rem 0 0;
  background: transparent; color: var(--innen-tinte-dim); font: inherit; font-weight: 600; cursor: pointer;
}
.aurelia-innen .bak-tab:hover { color: var(--innen-tinte); filter: none; transform: none; }
.aurelia-innen .bak-tab[aria-selected="true"] { color: var(--innen-tinte); border-bottom-color: var(--innen-gold); }
.bak-tabpanel { padding: 1rem 1.1rem; border: 1px solid var(--innen-fuge); border-top: 0; border-radius: 0 0 1rem 1rem; background: rgba(255, 255, 255, 0.55); }
.bak-tabpanel[hidden] { display: none; }

/* ---- Hotspot, Zeitachse */
.bak-hs-flaeche { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.bak-hs-flaeche .bak-int-btn { flex: 1 1 8rem; text-align: center; }
.bak-zeitachse { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 .5rem; padding: 0; }
.bak-zeitachse > li { flex: 1 1 9rem; display: flex; align-items: center; gap: .4rem; margin: 0; }
.bak-zeitachse > li + li::before { content: "→"; color: var(--innen-tinte-dim); }
.bak-zeitachse .bak-int-btn { flex: 1 1 auto; width: 100%; text-align: center; }
.bak-za-stand, .bak-fussnote { font-size: .85rem; color: var(--innen-tinte-dim); }

/* ---- Schaetzfrage, Lueckentext */
.bak-sch-optionen, .bak-lu-chips, .bak-ent-optionen, .bak-zu-pool { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.bak-sch-optionen li, .bak-lu-chips li, .bak-ent-optionen li, .bak-zu-pool li { margin: 0; }
.bak-lu-satz { font-size: 1.05rem; line-height: 1.8; }
.bak-lu-slot { display: inline-block; min-width: 6.5rem; padding: 0 .35rem; border-bottom: 2px solid var(--innen-patina); text-align: center; font-weight: 600; }
.bak-lu-slot.ist-gefuellt { border-bottom-color: var(--innen-gold); color: var(--innen-patina-tief); animation: bak-erscheinen .4s ease-out both; }
.bak-lu-gruppe { margin-top: 1rem; }
.bak-lu-gruppe > span { display: block; margin-bottom: .35rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--innen-tinte-dim); }

/* ---- Zuordnen */
.bak-zu-pool { margin-bottom: 1rem; }
.bak-zu-el { touch-action: none; user-select: none; }
.bak-zu-el.ist-am-ziehen { position: relative; z-index: 20; box-shadow: 0 14px 30px rgba(20, 32, 58, 0.25); transition: none; }
.bak-zu-ziele { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.bak-zu-kat { padding: .75rem .9rem; min-height: 6rem; border: 2px dashed var(--innen-fuge); border-radius: 1rem; transition: border-color .15s ease; }
.bak-zu-kat h4 { margin: 0 0 .5rem; }
.bak-zu-kat .bak-zu-ziel { width: 100%; text-align: center; font-weight: 600; }
.bak-zuordnen.hat-auswahl .bak-zu-kat { border-color: var(--innen-patina); border-style: solid; }
.bak-zu-kat.ist-ziel { border-color: var(--innen-gold); border-style: solid; background: rgba(217, 179, 108, 0.12); }
.bak-zu-kat.ist-getroffen { animation: bak-treffer .5s ease-out both; }
@keyframes bak-treffer { 0% { transform: scale(1); } 40% { transform: scale(1.02); } 100% { transform: scale(1); } }
.bak-zu-kat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.bak-zu-kat ul li { display: flex; align-items: baseline; gap: .4rem; animation: bak-erscheinen .4s ease-out both; }
.bak-zu-status { margin-top: .85rem; min-height: 1.4em; color: var(--innen-tinte-dim); }
.bak-zuordnen.ist-fertig .bak-zu-status { color: var(--innen-patina-tief); font-weight: 600; }

/* ---- Entscheidungsbaum, Szenario */
.bak-ent-frage { margin: 0 0 .85rem; font-weight: 600; }
.bak-ent-knoten.ist-neu { animation: bak-erscheinen .4s ease-out both; }
.bak-ent-knoten:focus { outline: none; }
.bak-ent-ergebnis { margin-top: .85rem; padding: .75rem 1rem; border-left: 3px solid var(--innen-gold); border-radius: 0 .75rem .75rem 0; background: rgba(217, 179, 108, 0.12); }
.bak-ent-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; }
.bak-ent-pfad { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; font-size: .85rem; color: var(--innen-tinte-dim); }
.bak-ent-pfad li[data-pfad] { padding: .1rem .6rem; border: 1px solid var(--innen-fuge); border-radius: 999px; background: rgba(255, 255, 255, 0.6); }
.bak-entscheid:not(.ist-js) .bak-ent-knoten + .bak-ent-knoten, .bak-szenario:not(.ist-js) .bak-ent-knoten + .bak-ent-knoten { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--innen-fuge); }
.bak-sz-marke { display: inline-block; padding: .1rem .6rem; border: 1px solid var(--innen-fuge); border-radius: 999px; font-size: .8rem; color: var(--innen-tinte-dim); }
.bak-sz-debrief { margin-top: 1rem; padding: .75rem 1rem; border-left: 3px solid var(--innen-patina); border-radius: 0 .75rem .75rem 0; background: rgba(79, 143, 131, 0.10); }

/* ---- Rechner */
.bak-rechner .bak-feld { display: grid; gap: .3rem; margin: 0 0 .75rem; }
.bak-rechner .bak-feld label { font-weight: 600; }
.bak-rechner .bak-feld input { max-width: 14rem; }
.bak-re-out { margin: 1rem 0 0; padding: .75rem 1rem; border-radius: .75rem; background: rgba(217, 179, 108, 0.14); }
.bak-re-out output span { font-weight: 700; color: var(--innen-patina-tief); }
.bak-re-annahmen { margin-top: .75rem; font-size: .9rem; color: var(--innen-tinte-dim); }

/* ---- Sortier-Tabelle, Tabellen allgemein */
.innen-lektion table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.innen-lektion th, .innen-lektion td { padding: .55rem .7rem; border-bottom: 1px solid var(--innen-fuge); text-align: left; vertical-align: top; }
.innen-lektion th { background: rgba(255, 255, 255, 0.5); font-weight: 600; }
.aurelia-innen .bak-st-sort { all: unset; cursor: pointer; font-weight: 600; }
.bak-sortier-tabelle th[aria-sort] .bak-st-sort::after { content: " ↕"; color: var(--innen-tinte-dim); }
.bak-sortier-tabelle th[aria-sort="ascending"] .bak-st-sort::after { content: " ↑"; color: var(--innen-patina-tief); }
.bak-sortier-tabelle th[aria-sort="descending"] .bak-st-sort::after { content: " ↓"; color: var(--innen-patina-tief); }

/* ---- Praxis-Mission, Checkliste */
.bak-praxis-mission { border-left: 4px solid var(--innen-gold); }
.bak-praxis-mission.ist-erledigt { border-left-color: var(--innen-patina-tief); }
.bak-pm-kriterium { margin: 1rem 0 0; color: var(--innen-tinte-dim); }
.bak-pm-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; }
.bak-pm-status { display: inline-flex; align-items: center; gap: .35rem; color: var(--innen-patina-tief); font-weight: 600; }
.bak-checkliste ul { list-style: none; margin: 0; padding: 0; }
.bak-checkliste ul li { position: relative; padding-left: 1.9rem; margin: .55rem 0; }
.bak-checkliste ul li::before { content: ""; position: absolute; left: 0; top: .3em; width: .95em; height: .95em; border: 2px solid var(--innen-patina); border-radius: .2rem; }
.bak-cl-aktionen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ---- Rein gestaltend: Flow, Vergleich, Schritte, Callouts, Lernziel, Accordion */
.bak-flow-wrap { margin: 1.5rem 0; }
.bak-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; }
.bak-flow-box { flex: 1 1 0; min-width: 8.5rem; align-self: center; padding: .7rem .85rem; border: 1px solid var(--innen-fuge); border-radius: .75rem; background: rgba(255, 255, 255, 0.7); text-align: center; }
.bak-flow-box--akzent { border-color: var(--innen-gold); background: rgba(217, 179, 108, 0.18); }
.bak-flow-conn { align-self: center; color: var(--innen-tinte-dim); }
.bak-flow-conn::before { content: "→"; }
.bak-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.bak-compare-spalte { padding: 1rem 1.1rem; border: 1px solid var(--innen-fuge); border-radius: 1rem; background: rgba(255, 255, 255, 0.55); }
.bak-compare-kopf { margin: 0 0 .5rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--innen-tinte-dim); }
.bak-compare-spalte--stark { border-left: 4px solid var(--innen-gold); }
.bak-compare-spalte--stark .bak-compare-kopf { color: var(--innen-bronze); }
.bak-steps { list-style: none; counter-reset: bak-schritt; margin: 1.5rem 0; padding: 0; }
.bak-steps > li { counter-increment: bak-schritt; position: relative; padding: 0 0 1.25rem 3rem; }
.bak-steps > li::before { content: counter(bak-schritt); position: absolute; left: 0; top: -.15rem; width: 2rem; height: 2rem; 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; }
.bak-steps > li:not(:last-child)::after { content: ""; position: absolute; left: calc(1rem - 1px); top: 2.1rem; bottom: .2rem; width: 2px; background: var(--innen-fuge); }
.bak-callout { margin: 1.5rem 0; padding: .9rem 1.1rem; border: 1px solid var(--innen-fuge); border-left: 4px solid var(--innen-fuge); border-radius: 1rem; background: rgba(255, 255, 255, 0.55); }
.bak-callout-titel { display: block; margin-bottom: .35rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--innen-tinte-dim); }
.bak-callout--merksatz { border-left-color: var(--innen-gold); font-size: 1.05rem; }
.bak-callout--merksatz .bak-callout-titel { color: var(--innen-bronze); }
.bak-callout--praxis { border-left-color: var(--innen-patina); }
.bak-callout--warnung { border-left-color: var(--innen-ernst); }
.bak-callout--recht { border-left-color: var(--innen-tinte-dim); }
/* Merkbar-Bloecke (kernpunkte, merksatz) tragen die Blog-Klasse .beirat-box; im Innenraum
   sehen sie aus wie die Callouts: Stein, Fuge, Patina fuer Kernpunkte, Gold fuer den Merksatz. */
.galaxie .aurelia-innen .beirat-box { margin: 1.5rem 0; padding: .9rem 1.1rem; border: 1px solid var(--innen-fuge); border-left: 4px solid var(--innen-patina); border-radius: 1rem; background: rgba(255, 255, 255, 0.55); color: var(--innen-tinte); }
.galaxie .aurelia-innen .beirat-box-label { margin-bottom: .35rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--innen-patina-tief); }
.galaxie .aurelia-innen .beirat-kernpunkte li::marker { color: var(--innen-gold); }
.galaxie .aurelia-innen .beirat-box--merksatz { border-left-color: var(--innen-gold); font-size: 1.05rem; }
.galaxie .aurelia-innen .beirat-box--merksatz .beirat-box-label { color: var(--innen-bronze); }
.bak-lernziel { margin: 0 0 1.5rem; padding: .8rem 1rem; border-radius: .75rem; background: rgba(79, 143, 131, 0.12); }
.bak-accordion details { margin: .5rem 0; padding: .6rem 1rem; border: 1px solid var(--innen-fuge); border-radius: .75rem; background: rgba(255, 255, 255, 0.55); }
.bak-accordion summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.bak-schaubild svg text { fill: var(--innen-tinte); }

/* ---- Druck: Checkliste als Insel */
@media print {
  body.bak-printing > *:not(.bak-print-root) { display: none !important; }
  .bak-print-root .bak-cl-aktionen, .bak-print-root noscript { display: none; }
}

@media (max-width: 40rem) {
  .bak-flow { flex-direction: column; align-items: stretch; }
  .bak-flow-conn::before { content: "↓"; }
  .bak-zeitachse { flex-direction: column; }
  .bak-zeitachse > li + li::before { content: "↓"; }
  .bak-term-tip { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bak-fb, .bak-panel.ist-aufgedeckt, .bak-lu-slot.ist-gefuellt, .bak-zu-kat.ist-getroffen, .bak-zu-kat ul li, .bak-ent-knoten.ist-neu, .bak-term-tip { animation: none; }
  .aurelia-innen .bak-int-btn, .bak-zu-kat { transition: none; }
}

/* Der Begleiter «Lumo» hat seit dem 23.09.2026 eine eigene Datei: static/akademie/begleiter.css
   (Lektion, Kommandobruecke, Blog und Startseite laden sie). */