/* =================================================================
   ERINNERUNGEN SICHTBAR MACHEN — enhancements.css
   3D Spatial UI · Scroll-Driven Animations · Kinetic Typography
   Advanced Micro-interactions · Teacher Section
   ================================================================= */

/* =====================================================
   1. SCROLL-DRIVEN ANIMATIONS (CSS native)
   ===================================================== */

@supports (animation-timeline: scroll()) {
  /* Top progress bar driven by scroll */
  #topfill {
    animation: fill-bar linear both;
    animation-timeline: scroll(root);
    animation-range: 0% 100%;
  }
  @keyframes fill-bar {
    from { width: 0%; }
    to { width: 100%; }
  }

  /* Section fade-in driven by scroll */
  .sec-scroll-reveal {
    animation: sec-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
  @keyframes sec-reveal {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: none; }
  }

  /* Chapter headings scale with scroll */
  .chap-hd h2 {
    animation: chap-scale linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  @keyframes chap-scale {
    from { opacity: 0; transform: scale(0.92) translateY(24px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  /* Parallax on hero image */
  .sth-img {
    animation: hero-parallax linear both;
    animation-timeline: scroll(root);
    animation-range: 0% 30%;
  }
  @keyframes hero-parallax {
    from { transform: scale(1.04) translateY(0); }
    to { transform: scale(1.1) translateY(-60px); }
  }

  /* Era tiles drift in */
  .era:nth-child(1) {
    animation: era-in1 ease-out both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
  .era:nth-child(2) {
    animation: era-in2 ease-out both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  .era:nth-child(3) {
    animation: era-in3 ease-out both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  @keyframes era-in1 {
    from { opacity: 0; transform: translateX(-50px) rotate(-2deg); }
    to { opacity: 1; transform: none; }
  }
  @keyframes era-in2 {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes era-in3 {
    from { opacity: 0; transform: translateX(50px) rotate(2deg); }
    to { opacity: 1; transform: none; }
  }

  /* Kinetic quote reveal */
  .kq.sd-kinetic {
    animation: kq-wave linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 50%;
  }
  @keyframes kq-wave {
    from { opacity: 0; letter-spacing: -0.06em; }
    to { opacity: 1; letter-spacing: inherit; }
  }

  /* Timeline scroll progress */
  .tl2 {
    animation: tl-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  @keyframes tl-reveal {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0% 0 0); }
  }
}

/* =====================================================
   2. KINETIC TYPOGRAPHY ENHANCEMENTS
   ===================================================== */

/* Morphing hero headline */
.hero-big .blk {
  display: block;
  position: relative;
  overflow: visible;
  will-change: transform;
}
.hero-big .blk .k-char {
  display: inline-block;
  transform-origin: bottom center;
  transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.6s ease;
}
.hero-big.kt-active .blk .k-char {
  animation: char-float ease-in-out infinite alternate;
}
.hero-big.kt-active .blk .k-char:nth-child(odd) {
  animation-delay: calc(var(--ci) * 0.08s);
  animation-duration: calc(2.8s + var(--ci) * 0.1s);
}
@keyframes char-float {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-4px) rotate(0.5deg); }
}

/* Variable weight kinetic */
.heavy-kinetic {
  font-weight: 300;
  transition: font-weight 0.3s ease, letter-spacing 0.3s ease;
  cursor: default;
}
.heavy-kinetic:hover {
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* Running text highlight */
.kq-word {
  display: inline-block;
  position: relative;
  transition: color 0.25s ease;
}
.kq-word::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--amber);
  transition: width 0.4s cubic-bezier(.16,1,.3,1);
}
.kq-word:hover::after {
  width: 100%;
}

/* Letter scramble enhancement */
@keyframes letter-in {
  from { opacity: 0; transform: translateY(12px) scale(0.9); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}
.k-letter {
  display: inline-block;
  animation: letter-in 0.5s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--i) * 0.04s);
}

/* Ticker/marquee kinetic */
.marquee .track span {
  transition: color 0.3s ease;
}
.marquee .track span:hover {
  color: var(--amber);
}

/* Kinetic section kickers */
.kicker-kt {
  overflow: hidden;
  display: inline-block;
}
.kicker-kt span {
  display: inline-block;
  animation: kicker-rise 0.7s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--i) * 0.06s);
}
@keyframes kicker-rise {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* =====================================================
   3. INTERACTIVE 3D + SPATIAL UI
   ===================================================== */

/* 3D perspective container */
.tilt-3d {
  perspective: 800px;
  perspective-origin: 50% 50%;
}
.tilt-3d-inner {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  will-change: transform;
}
.tilt-3d:hover .tilt-3d-inner {
  box-shadow:
    0 20px 60px rgba(35,40,45,0.15),
    0 8px 20px rgba(35,40,45,0.1);
}

/* 3D Era cards */
.era {
  perspective: 1000px;
  transform-style: preserve-3d;
}
.era-inner {
  transform-style: preserve-3d;
  transition: transform 0.12s ease-out;
}
.era:hover .era-inner {
  box-shadow:
    0 30px 80px rgba(35,40,45,0.18),
    0 10px 30px rgba(35,40,45,0.08);
}

/* 3D floated year number */
.yr-float-3d {
  transform: translateZ(20px);
  text-shadow: 0 4px 16px rgba(35,40,45,0.2);
}

/* Hero 3D spatial layer */
.hero-3d-layer {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.08s ease-out;
}
.hero-3d-text {
  transform: translateZ(60px);
}
.hero-3d-img {
  transform: translateZ(-20px);
}

/* Interactive guide avatar 3D */
.chat-fab {
  transform-style: preserve-3d;
  perspective: 400px;
}
.chat-fab .gd-fig {
  transform-origin: bottom center;
  transition: transform 0.3s cubic-bezier(.16,1,.3,1);
}
.chat-fab:hover .gd-fig {
  transform: rotate3d(0,1,0,15deg) scale(1.05);
}

/* 3D scene cards */
.scene-media .arch {
  perspective: 800px;
  transform-style: preserve-3d;
}
.scene-media .arch img {
  backface-visibility: hidden;
  transition: transform 0.4s cubic-bezier(.16,1,.3,1);
}
.scene-media .arch:hover img {
  transform: scale(1.03) translateZ(10px);
}

/* Game cards 3D flip */
.game-card-flip {
  perspective: 800px;
}
.game-card-flip-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.16,1,.3,1);
}
.game-card-flip.flipped .game-card-flip-inner {
  transform: rotateY(180deg);
}
.game-card-face,
.game-card-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.game-card-back {
  transform: rotateY(180deg);
  position: absolute;
  inset: 0;
}

/* Spatial glossary cards */
.glossary-3d-card {
  perspective: 600px;
  transform: perspective(600px) rotateX(0deg);
  transition: transform 0.3s ease;
}
.glossary-3d-card:hover {
  transform: perspective(600px) rotateX(-3deg) translateY(-4px);
}

/* Decision paths 3D hover */
.dopt {
  transition:
    transform 0.3s cubic-bezier(.16,1,.3,1),
    box-shadow 0.3s ease,
    background 0.2s ease !important;
}
.dopt:hover {
  transform: translateZ(8px) translateY(-3px) !important;
}

/* =====================================================
   4. ADVANCED MICRO-INTERACTIONS
   ===================================================== */

/* Ripple effect */
.ripple-host {
  position: relative;
  overflow: hidden;
}
@keyframes ripple-expand {
  from { transform: scale(0); opacity: 0.4; }
  to { transform: scale(3); opacity: 0; }
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  animation: ripple-expand 0.6s ease-out forwards;
  pointer-events: none;
  width: 100px;
  height: 100px;
  margin: -50px;
}

/* Magnetic button effect */
.btn-magnetic {
  transition: transform 0.2s cubic-bezier(.16,1,.3,1) !important;
}

/* XP toast pop */
@keyframes xp-pop {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-8px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}
.xp-pop {
  animation: xp-pop 0.5s cubic-bezier(.16,1,.3,1) forwards;
}

/* Badge unlock animation */
@keyframes badge-unlock {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.badge-new {
  animation: badge-unlock 0.7s cubic-bezier(.16,1,.3,1) forwards !important;
}

/* Level up glow */
@keyframes level-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,123,46,0); }
  50% { box-shadow: 0 0 30px 8px rgba(224,123,46,0.5); }
}
.level-up {
  animation: level-glow 1s ease-in-out 3;
}

/* Button press depth */
.btn:active:not(:disabled),
.dopt:active {
  transform: scale(0.96) translateY(1px) !important;
}

/* Hover shine on cards */
.shine-card {
  position: relative;
  overflow: hidden;
}
.shine-card::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.12) 50%,
    transparent 60%
  );
  transform: rotate(25deg);
  transition: none;
  pointer-events: none;
  z-index: 1;
}
.shine-card:hover::before {
  transition: top 0.5s ease, left 0.5s ease;
  top: 100%;
  left: 100%;
}

/* Focus visible glow */
:focus-visible {
  outline: 2px solid var(--blau) !important;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scroll-snap icon */
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(6px); opacity: 1; }
}
.scrollcue .bar {
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
}

/* =====================================================
   5. TEACHER / DIDAKTIK SECTION
   ===================================================== */

#didaktik {
  background: var(--pergament);
  padding: clamp(80px, 11vh, 140px) 0;
  position: relative;
}
#didaktik::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blau), var(--amber), var(--feldrot));
}

/* Teacher hero banner */
.didaktik-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  margin-bottom: clamp(48px, 8vh, 96px);
}
@media (max-width: 768px) {
  .didaktik-hero { grid-template-columns: 1fr; }
}

.didaktik-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--blau);
  color: #fff;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 30px;
  margin-bottom: 20px;
}
.didaktik-badge::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

.didaktik-visual {
  background: var(--schiefer);
  border-radius: 16px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.didaktik-visual::after {
  content: '';
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(224,123,46,0.12);
  pointer-events: none;
}
.didaktik-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--war-text);
  font-family: var(--f-ui);
  font-size: 14px;
}
.didaktik-stat-num {
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: 900;
  color: var(--amber);
  line-height: 1;
  min-width: 52px;
}

/* Material cards */
.material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.material-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.3s cubic-bezier(.16,1,.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
html[data-theme="dark"] .material-card {
  background: var(--pergament-2);
  border-color: rgba(255,255,255,0.08);
}
.material-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--blau);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s cubic-bezier(.16,1,.3,1);
}
.material-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 40px rgba(35,40,45,0.1), 0 4px 12px rgba(35,40,45,0.06);
  border-color: var(--blau-l);
}
.material-card:hover::before {
  transform: scaleY(1);
}
.material-card.amber::before { background: var(--amber); }
.material-card.rot::before { background: var(--feldrot); }

.material-type {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blau);
  display: flex;
  align-items: center;
  gap: 6px;
}
.material-type.amber { color: var(--amber); }
.material-type.rot { color: var(--feldrot); }

.material-icon {
  font-size: 28px;
  line-height: 1;
}
.material-title {
  font-family: var(--f-head);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
html[data-theme="dark"] .material-title { color: var(--ink); }
.material-desc {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  opacity: .9;
  flex-grow: 1;
  margin-top: 4px;
}
html[data-theme="dark"] .material-desc { color: var(--ink); opacity: .82; }
.teach-cat .tc-d{font-size:13.5px;line-height:1.45;color:var(--ink);opacity:.78;}
.material-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.material-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-soft);
  background: var(--pergament-2);
  padding: 3px 8px;
  border-radius: 20px;
}
html[data-theme="dark"] .material-tag {
  background: rgba(255,255,255,0.06);
}
.material-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--blau);
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.material-btn:hover {
  gap: 10px;
  color: var(--blau-d);
}
.material-btn svg {
  flex-shrink: 0;
}

/* Lesson plan accordion */
.lehrplan-wrap {
  margin-top: 64px;
}
.lehrplan-item {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
html[data-theme="dark"] .lehrplan-item {
  border-color: rgba(255,255,255,0.08);
}
.lehrplan-item.open {
  border-color: var(--blau);
  box-shadow: 0 4px 20px rgba(27,124,140,0.1);
}
.lehrplan-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  background: var(--pergament);
  transition: background 0.2s ease;
}
html[data-theme="dark"] .lehrplan-hd {
  background: var(--pergament-2);
}
.lehrplan-hd:hover {
  background: var(--pergament-2);
}
html[data-theme="dark"] .lehrplan-hd:hover {
  background: rgba(255,255,255,0.04);
}
.lehrplan-title {
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
}
.lehrplan-num {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 900;
  color: var(--blau);
  background: var(--blau-l);
  padding: 3px 10px;
  border-radius: 20px;
}
.lehrplan-arrow {
  color: var(--blau);
  transition: transform 0.3s cubic-bezier(.16,1,.3,1);
  flex-shrink: 0;
}
.lehrplan-item.open .lehrplan-arrow {
  transform: rotate(180deg);
}
.lehrplan-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(.16,1,.3,1), padding 0.3s ease;
}
.lehrplan-item.open .lehrplan-body {
  max-height: 1000px;
}
.lehrplan-content {
  padding: 24px;
  border-top: 1px solid var(--line-2);
  background: var(--pergament);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
html[data-theme="dark"] .lehrplan-content {
  background: var(--pergament-2);
}
@media (max-width: 640px) {
  .lehrplan-content { grid-template-columns: 1fr; }
}
.lehrplan-col h4 {
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
}
.lehrplan-col ul {
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.lehrplan-col ul li { margin-bottom: 4px; }
.lehrplan-full {
  grid-column: 1 / -1;
}
.lehrplan-tasks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.task-item {
  background: var(--blau-l);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--schiefer);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
html[data-theme="dark"] .task-item {
  background: rgba(47,144,105,0.12);
  color: var(--war-text);
}
.task-item::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blau);
  color: #fff;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Worksheet preview */
.worksheet-preview {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 32px;
  margin-top: 48px;
  position: relative;
  overflow: hidden;
}
html[data-theme="dark"] .worksheet-preview {
  background: var(--pergament-2);
  border-color: rgba(255,255,255,0.08);
}
.worksheet-preview::after {
  content: 'VORSCHAU';
  position: absolute;
  top: 16px;
  right: -24px;
  background: var(--feldrot);
  color: #fff;
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 4px 32px;
  transform: rotate(45deg);
}
.worksheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--line);
}
.worksheet-logo {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 14px;
  line-height: 1.1;
}
.worksheet-logo .l1 { color: var(--amber); }
.worksheet-logo .l2 { color: var(--ink-soft); }
.worksheet-meta {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-soft);
  text-align: right;
}
.worksheet-task {
  margin-bottom: 20px;
}
.worksheet-task-num {
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blau);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.worksheet-task p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}
.worksheet-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.worksheet-line {
  height: 1px;
  background: var(--line);
  border-radius: 1px;
}
.worksheet-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Curriculum alignment */
.curriculum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.curriculum-pill {
  background: var(--pergament-2);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease;
}
html[data-theme="dark"] .curriculum-pill {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.curriculum-pill:hover {
  border-color: var(--blau);
  background: var(--blau-l);
}
.curriculum-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blau);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
}

/* Quick tips */
.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.tip-card {
  background: var(--pergament-2);
  border-radius: 12px;
  padding: 24px;
  border-left: 3px solid var(--amber);
  transition: transform 0.3s ease;
}
html[data-theme="dark"] .tip-card {
  background: rgba(255,255,255,0.04);
}
.tip-card:hover {
  transform: translateX(4px);
}
.tip-card h4 {
  font-family: var(--f-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tip-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* =====================================================
   6. ENHANCED HERO WITH TYPING EFFECT
   ===================================================== */

.hero-eyebrow {
  overflow: hidden;
}
.hero-eyebrow > * {
  animation: eyebrow-in 0.8s cubic-bezier(.16,1,.3,1) 0.3s both;
}
@keyframes eyebrow-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* Hero glow orbs */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: multiply;
  animation: orb-float ease-in-out infinite alternate;
  filter: blur(60px);
  opacity: 0.2;
}
html[data-theme="dark"] .hero-orb {
  mix-blend-mode: screen;
  opacity: 0.08;
}
.hero-orb-1 {
  width: 400px;
  height: 400px;
  background: var(--amber);
  top: 20%;
  left: 5%;
  animation-duration: 8s;
}
.hero-orb-2 {
  width: 300px;
  height: 300px;
  background: var(--blau);
  top: 50%;
  right: 10%;
  animation-duration: 11s;
  animation-delay: -4s;
}
@keyframes orb-float {
  from { transform: translate(0, 0); }
  to { transform: translate(30px, -30px); }
}

/* =====================================================
   7. DARK MODE POLISH & ENHANCEMENTS
   ===================================================== */

html[data-theme="dark"] {
  --shadow-ambient: rgba(0,0,0,0.4);
  --shadow-card: 0 4px 20px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .material-card {
  box-shadow: var(--shadow-card);
}
html[data-theme="dark"] .lehrplan-hd:hover {
  background: rgba(255,255,255,0.05);
}
html[data-theme="dark"] .didaktik-visual {
  background: #111827;
  border: 1px solid rgba(255,255,255,0.06);
}
html[data-theme="dark"] #didaktik::before {
  opacity: 0.5;
}
html[data-theme="dark"] .curriculum-pill:hover {
  background: rgba(27,124,140,0.15);
}
html[data-theme="dark"] .worksheet-preview {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
}

/* Smooth theme transitions */
*,
*::before,
*::after {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
/* But not these - they have their own transitions */
.rv,
.btn,
.era,
.kq .w,
.tilt-3d-inner,
.chat-fab .gd-fig,
.dopt,
.material-card {
  transition-property: all !important;
}

/* =====================================================
   8. PROFILE ENHANCEMENTS
   ===================================================== */

/* Level up animation for XP bar */
@keyframes xpbar-fill {
  from { width: 0; }
}
.xpbar i {
  animation: xpbar-fill 1s cubic-bezier(.16,1,.3,1) forwards;
}

/* Badge grid */
.badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 12px;
}
.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 12px 8px;
  border-radius: 10px;
  background: var(--pergament-2);
  border: 1.5px solid var(--line);
  transition: transform 0.3s ease, border-color 0.3s ease;
  cursor: default;
}
.badge-item:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: var(--amber);
}
.badge-item .bi-ic {
  font-size: 24px;
  line-height: 1;
}
.badge-item .bi-t {
  font-family: var(--f-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.2;
}

/* =====================================================
   9. CLASSROOM ENHANCEMENTS
   ===================================================== */

/* Avatar wall with depth */
.member-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}
.member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: default;
}
.member .uav {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid var(--line);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.member:hover .uav {
  border-color: var(--amber);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(224,123,46,0.25);
}
.member.host .uav {
  border-color: var(--amber);
}
.member .name-label {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Class code display */
.code-display {
  font-family: var(--f-display);
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 900;
  letter-spacing: 0.3em;
  color: var(--amber);
  text-align: center;
  padding: 24px 32px;
  background: var(--schiefer);
  color: var(--war-text);
  border-radius: 16px;
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}
.code-display::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.04),
    transparent
  );
  animation: code-shine 3s linear infinite;
}
@keyframes code-shine {
  from { left: -100%; }
  to { left: 100%; }
}
.code-display .code-chars {
  color: var(--amber);
  font-size: inherit;
}

/* Reflection wall enhancements */
.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.wall-card {
  background: var(--pergament);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
html[data-theme="dark"] .wall-card {
  background: var(--pergament-2);
}
.wall-card:hover {
  transform: translateY(-4px) rotate(0.5deg);
  box-shadow: 0 12px 40px rgba(35,40,45,0.1);
}
.wall-card.you {
  border-color: var(--amber);
}

/* =====================================================
   10. ACCESSIBILITY ENHANCEMENTS
   ===================================================== */

/* Skip to main content */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--ink);
  color: var(--pergament);
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  z-index: 10000;
  transition: top 0.3s ease;
}
.skip-link:focus {
  top: 16px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .material-card {
    border-width: 2px;
    border-color: var(--ink);
  }
  .btn {
    border: 2px solid currentColor;
  }
}

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
  .hero-orb,
  .didaktik-badge::before,
  .code-display::after,
  .scrollcue .bar {
    animation: none !important;
  }
  .hero-big.kt-active .blk .k-char {
    animation: none !important;
  }
  @supports (animation-timeline: scroll()) {
    .era,
    .chap-hd h2,
    .kq.sd-kinetic,
    .tl2 {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      clip-path: none !important;
    }
  }
}

/* =====================================================
   11. PRINT STYLES (for teacher materials)
   ===================================================== */

@media print {
  .nav,
  .sidebar,
  .sb-scrim,
  #guide,
  #chatPanel,
  .chat-fab,
  .cursor,
  .scrollcue,
  .rail,
  .topbar,
  .hero,
  .hero-spacer,
  .marquee,
  #spiele,
  #gemeinsam,
  footer,
  .worksheet-actions {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt !important;
  }

  .worksheet-preview {
    border: 1px solid #999;
    box-shadow: none;
  }

  .worksheet-preview::after {
    display: none;
  }
}

/* =====================================================
   12. DARK-MODE FIX for teacher section (#didaktik)
   The dark theme does not flip --pergament, so the
   teacher UI rendered light-on-light. Force dark
   surfaces + light text with concrete values here.
   ===================================================== */
html[data-theme="dark"] #didaktik { background: #100D06; }
html[data-theme="dark"] #didaktik .material-card,
html[data-theme="dark"] #didaktik .worksheet-preview {
  background: #1C1812 !important;
  border-color: rgba(255,255,255,0.12) !important;
}
html[data-theme="dark"] #didaktik .material-title,
html[data-theme="dark"] #didaktik .worksheet-task p,
html[data-theme="dark"] #didaktik .worksheet-logo .l1 { color: #FFFFFF; }
html[data-theme="dark"] #didaktik .material-desc,
html[data-theme="dark"] #didaktik .worksheet-logo .l2,
html[data-theme="dark"] #didaktik .worksheet-meta { color: #D9D9D9; }
html[data-theme="dark"] #didaktik .material-tag {
  background: rgba(255,255,255,0.08) !important;
  color: #C3BBA8;
}
/* curriculum pills — the worst offender (1.02 contrast) */
html[data-theme="dark"] #didaktik .curriculum-pill {
  background: #1C1812 !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: #FFFFFF !important;
}
html[data-theme="dark"] #didaktik .curriculum-pill:hover {
  background: #2A2318 !important;
  border-color: var(--blau);
}
/* lesson-plan accordion */
html[data-theme="dark"] #didaktik .lehrplan-item { border-color: rgba(255,255,255,0.12); }
html[data-theme="dark"] #didaktik .lehrplan-hd,
html[data-theme="dark"] #didaktik .lehrplan-content { background: #1C1812; }
html[data-theme="dark"] #didaktik .lehrplan-hd:hover { background: #2A2318; }
html[data-theme="dark"] #didaktik .lehrplan-title { color: #FFFFFF; }
html[data-theme="dark"] #didaktik .lehrplan-col ul { color: #D9D9D9; }
html[data-theme="dark"] #didaktik .task-item {
  background: rgba(47,144,105,0.16);
  color: #D8E6DC;
}
/* tips + worksheet blockquote */
html[data-theme="dark"] #didaktik .tip-card { background: rgba(255,255,255,0.05); }
html[data-theme="dark"] #didaktik .tip-card h4 { color: #FFFFFF; }
html[data-theme="dark"] #didaktik .tip-card p { color: #D9D9D9; }
html[data-theme="dark"] #didaktik .worksheet-preview blockquote { background: rgba(255,255,255,0.06) !important; color: #E7DFCD !important; }
html[data-theme="dark"] #didaktik .worksheet-line { background: rgba(255,255,255,0.2); }
html[data-theme="dark"] #didaktik .lehrplan-num { color: #7FB0BF; background: rgba(95,208,224,0.14); }

/* =====================================================
   14. TYPOGRAPHY CALM-DOWN + DESCENDER ROOM + ANIMATED
   CHAPTER GRADIENT + QUOTE REVEAL + ROUTER VIEWS
   ===================================================== */

/* (a) global: give every big clipped heading room so g/j/y descenders
   and Ä/Ö/Ü dots never get cut, and dial the sizes down a notch */
.d-xl,.d-lg,.d-md,.display,.chap-hd h2,h1.hero-big{
  line-height:1.1 !important;
  padding-bottom:.14em !important;
  overflow:visible !important;
}
.d-xl,.d-lg,.d-md,.display,.chap-hd h2,h1.hero-big{ -webkit-box-decoration-break:clone; }
.d-md,.display{ font-size:clamp(28px,4.2vw,58px) !important; }
.d-lg{ font-size:clamp(36px,5.6vw,76px) !important; }
.chap-hd h2{ font-size:clamp(38px,6.4vw,90px) !important; }
h1.hero-big{ font-size:clamp(32px,6vw,92px) !important; }
.lede{ font-size:clamp(16px,1.55vw,20px) !important; line-height:1.6 !important; }

/* (b) chapter headings — animated DARK gradient that keeps moving */
.chap-hd h2{
  background-image:linear-gradient(110deg,#16222B 0%,#2C6E7E 45%,#16222B 90%) !important;
  background-size:260% 100% !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  animation:chapGrad 9s linear infinite !important;
}
@keyframes chapGrad{ from{background-position:0% 50%} to{background-position:260% 50%} }
html[data-theme="dark"] .chap-hd h2{
  background-image:linear-gradient(110deg,#F6EFE0 0%,#E8B85A 45%,#F6EFE0 90%) !important;
}
/* heading lines always visible — the view itself fades in via .rt-view-enter */
.chap-hd h2 span{ display:block; opacity:1 !important; transform:none !important; clip-path:none !important; }

/* (c) chapter quotes (.emo): NO gradient — solid ink, with a text-reveal wipe */
.chap-hd .emo{
  background:none !important; -webkit-text-fill-color:currentColor !important;
  color:var(--ink) !important;
  animation:emoReveal 1.15s cubic-bezier(.16,1,.3,1) both;
}
html[data-theme="dark"] .chap-hd .emo, body.epoch-war .chap-hd .emo{ color:#E7DFCD !important; }
@keyframes emoReveal{ from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(8px)} to{opacity:1;clip-path:inset(0 0 0 0);transform:none} }

/* (d) more breathing room / whitespace between blocks */
.sec{ padding-block:clamp(64px,9vh,128px) !important; }
.chap-hd .range{ margin-top:22px !important; }
.chap-hd .emo{ margin-top:26px !important; }
.scene{ margin-bottom:clamp(40px,7vh,96px) !important; }
.lede{ margin-top:18px !important; }

@media(prefers-reduced-motion:reduce){
  .chap-hd h2,.chap-hd h2 span,.chap-hd .emo{ animation:none !important; clip-path:none !important; }
}

/* =====================================================
   15. SIDEBAR ROUTER — each nav target is its own page
   ===================================================== */
.rt-hidden{ display:none !important; }
/* the active view animates in */
.rt-view-enter{ animation:rtEnter .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes rtEnter{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@media(prefers-reduced-motion:reduce){ .rt-view-enter{animation:none} }

/* =====================================================
   16. HERO CENTERING · HOME HUB (3D hover) · FLOWING
   GRADIENTS · DISTINCT SIDEBAR
   ===================================================== */

/* (a) hero title perfectly centered */
.hero .sth-content{align-items:center !important;text-align:center !important;}
h1.hero-big{margin-inline:auto !important;text-align:center !important;max-width:none !important;}
.hero-eyebrow,.hero-eyebrow.center,.hero-tag{justify-content:center !important;text-align:center !important;width:100%;}

/* (b) home discover hub — cards to every subpage, 3D hover */
.hub-wrap{position:relative;}
.hub-wrap::before{content:"";position:absolute;inset:-60px;z-index:0;pointer-events:none;filter:blur(30px);
  background:radial-gradient(38% 55% at 18% 22%,rgba(224,123,46,.16),transparent 62%),
            radial-gradient(40% 55% at 82% 78%,rgba(27,124,140,.18),transparent 62%);
  animation:hubFlow 20s ease-in-out infinite;}
html[data-theme="dark"] .hub-wrap::before{background:radial-gradient(38% 55% at 18% 22%,rgba(224,169,74,.14),transparent 62%),radial-gradient(40% 55% at 82% 78%,rgba(95,160,180,.16),transparent 62%);}
@keyframes hubFlow{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(2.5%,-3%) scale(1.05)}}
.hub-wrap>*{position:relative;z-index:1;}
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;margin-top:44px;perspective:1100px;}
.hub-card{position:relative;display:block;text-align:left;text-decoration:none;border:1px solid var(--line);border-radius:18px;
  padding:26px 24px 24px;overflow:hidden;cursor:pointer;color:var(--ink);transform-style:preserve-3d;
  background:linear-gradient(150deg,var(--pergament) 0%,var(--pergament-2) 100%);
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;
  box-shadow:0 14px 30px -26px rgba(20,15,8,.5);}
html[data-theme="dark"] .hub-card{background:linear-gradient(150deg,#1C1812 0%,#241D14 100%);border-color:rgba(255,255,255,.12);}
.hub-card:hover{border-color:var(--amber);box-shadow:0 34px 60px -30px rgba(20,15,8,.55);}
.hub-card .hc-glow{position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),rgba(224,123,46,.22),transparent 60%);}
.hub-card:hover .hc-glow{opacity:1;}
.hub-card .hc-ic{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:17px;
  background:var(--pergament-3);border:1px solid var(--line);box-shadow:0 7px 18px -11px rgba(20,15,8,.5);
  transform:translateZ(30px);transition:transform .35s var(--ease,cubic-bezier(.16,1,.3,1)),box-shadow .3s;}
.hub-card .hc-ic svg.cute{width:38px;height:38px;overflow:visible;display:block;}
html[data-theme="dark"] .hub-card .hc-ic{background:#2A2318;border-color:rgba(240,232,213,.14);}
.hub-card:hover .hc-ic{transform:translateZ(30px) scale(1.07);box-shadow:0 14px 28px -13px rgba(20,15,8,.5);}

/* cute mini-illustrations: gentle continuous life (motion-safe only) */
.hc-ic .cb,.hc-ic .bk-mark,.hc-ic .ck-hand,.hc-ic .gp-a,.hc-ic .gp-b,
.hc-ic .pin-bob,.hc-ic .pin-sh,.hc-ic .bx-lid,.hc-ic .d,.hc-ic .cap-tas{
  transform-box:fill-box;}
@media (prefers-reduced-motion:no-preference){
  .hc-ic .cb{animation:cbBob 3.6s ease-in-out infinite;transform-origin:50% 60%;}
  .hub-card:nth-of-type(2) .hc-ic .cb{animation-delay:.25s}
  .hub-card:nth-of-type(3) .hc-ic .cb{animation-delay:.5s}
  .hub-card:nth-of-type(4) .hc-ic .cb{animation-delay:.75s}
  .hub-card:nth-of-type(5) .hc-ic .cb{animation-delay:1s}
  .hub-card:nth-of-type(6) .hc-ic .cb{animation-delay:1.25s}
  .hub-card:nth-of-type(7) .hc-ic .cb{animation-delay:1.5s}
  .hc-ic .bk-mark{animation:bkMark 2.9s ease-in-out infinite;transform-origin:50% 0;}
  .hc-ic .ck-hand{animation:ckSpin 6s linear infinite;transform-origin:50% 100%;}
  .hc-ic .gp-a{animation:gpBlink 1.8s ease-in-out infinite;}
  .hc-ic .gp-b{animation:gpBlink 1.8s ease-in-out .9s infinite;}
  .hc-ic .pin-bob{animation:pinBob 2.4s ease-in-out infinite;}
  .hc-ic .pin-sh{animation:pinSh 2.4s ease-in-out infinite;transform-origin:50% 50%;}
  .hc-ic .bx-lid{animation:lidLift 3s ease-in-out infinite;transform-origin:50% 100%;}
  .hc-ic .d{animation:dotBlink 1.5s ease-in-out infinite;transform-origin:50% 50%;}
  .hc-ic .d2{animation-delay:.2s}
  .hc-ic .d3{animation-delay:.4s}
  .hc-ic .cap-tas{animation:tasSway 2.6s ease-in-out infinite;transform-origin:50% 0;}
  /* a little extra pep on hover */
  .hub-card:hover .hc-ic .cb{animation-duration:1.5s;}
}
@keyframes cbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@keyframes bkMark{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(8deg)}}
@keyframes ckSpin{to{transform:rotate(360deg)}}
@keyframes gpBlink{0%,100%{opacity:1}50%{opacity:.28}}
@keyframes pinBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.6px)}}
@keyframes pinSh{0%,100%{transform:scaleX(1);opacity:.3}50%{transform:scaleX(.66);opacity:.16}}
@keyframes lidLift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-3deg)}}
@keyframes dotBlink{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-1.6px)}}
@keyframes tasSway{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}

/* Lehrkräfte-Bereich global ausblenden, solange keine Lehrkraft eingeloggt ist.
   Liegt bewusst hier (enhancements.css wird auf ALLEN Seiten geladen — auch auf
   Karte & Archiv, wo social.css fehlt). !important schlägt die qn-link-Regel. */
html:not(.role-lehrkraft) .role-only-teacher,
html:not(.role-lehrkraft) .qn-link.role-only-teacher,
html:not(.role-lehrkraft) #quickNav .qn-link.role-only-teacher,
html:not(.role-lehrkraft) [data-to="didaktik"],
html:not(.role-lehrkraft) #didaktik{display:none !important;}

/* text-only editorial scenes (no contextually-correct photo) — single centred column */
.scene.solo{grid-template-columns:1fr !important;max-width:820px;margin-left:auto !important;margin-right:auto !important;}
.scene.solo .scene-media{display:none !important;}

/* generic cute mini-icons (role picker, teacher categories, material cards) */
.ro-ic svg.cute,.tc-ic svg.cute,.mat-ic svg.cute,.tip-ic svg.cute{width:100%;height:100%;overflow:visible;display:block;}
.ro-ic .cb,.tc-ic .cb,.mat-ic .cb,.tip-ic .cb,
.ro-ic .cap-tas,.tc-ic .cap-tas,.mat-ic .cap-tas,.tip-ic .cap-tas,
.ro-ic .d,.tc-ic .d,.mat-ic .d,.tip-ic .d,
.ro-ic .spk,.tc-ic .spk,.mat-ic .spk{transform-box:fill-box;}
@media (prefers-reduced-motion:no-preference){
  .ro-ic .cb,.tc-ic .cb,.mat-ic .cb,.tip-ic .cb{animation:cbBob 3.4s ease-in-out infinite;transform-origin:50% 60%;}
  .ro-ic .cap-tas,.tc-ic .cap-tas,.mat-ic .cap-tas,.tip-ic .cap-tas{animation:tasSway 2.6s ease-in-out infinite;transform-origin:50% 0;}
  .ro-ic .d,.tc-ic .d,.mat-ic .d,.tip-ic .d{animation:dotBlink 1.5s ease-in-out infinite;transform-origin:50% 50%;}
  .ro-ic .d2,.tc-ic .d2,.mat-ic .d2{animation-delay:.2s}
  .ro-ic .d3,.tc-ic .d3,.mat-ic .d3{animation-delay:.4s}
  .ro-ic .spk,.tc-ic .spk,.mat-ic .spk{animation:spkTwinkle 2.6s ease-in-out infinite;transform-origin:50% 50%;}
  .role-opt:hover .cb,.teach-cat:hover .cb,.material-card:hover .cb{animation-duration:1.4s;}
}
.hub-card h4{font-family:var(--f-display);font-weight:800;font-size:21px;margin:12px 0 6px;color:var(--ink);transform:translateZ(22px);}
.hub-card p{font-size:13.5px;line-height:1.5;color:var(--ink-soft);transform:translateZ(14px);}
.hub-card::after{content:"→";position:absolute;top:24px;right:22px;color:var(--blau);font-weight:700;transition:transform .25s;}
html[data-theme="dark"] .hub-card::after{color:#7fd0e0;}
.hub-card:hover::after{transform:translateX(5px);}
/* dark-mode: hub card text must be light (don't rely on var(--ink) here) */
html[data-theme="dark"] .hub-card h4{ color:#FFFFFF !important; }
html[data-theme="dark"] .hub-card p{ color:#D9D9D9 !important; }
html[data-theme="dark"] .hub-card .hc-ic{ filter:none; }

/* (c) distinct sidebar — subtle tinted gradient, set apart from the page */
.sidebar{background:linear-gradient(180deg,var(--pergament-2) 0%,var(--pergament-3) 100%) !important;border-right:1px solid var(--line);}
html[data-theme="dark"] .sidebar{background:linear-gradient(180deg,#100D06 0%,#0E0B05 100%) !important;border-right:1px solid rgba(255,255,255,.1);}
.sidebar::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--amber),var(--blau));opacity:.85;}

/* (d) gentle flowing gradient accent on tinted sections */
.sec.tint{position:relative;overflow:hidden;}
.sec.tint::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(50% 60% at 15% 0%,rgba(27,124,140,.10),transparent 60%),radial-gradient(50% 60% at 90% 100%,rgba(224,123,46,.10),transparent 60%);
  animation:hubFlow 24s ease-in-out infinite;}
.sec.tint>*{position:relative;z-index:1;}

/* =====================================================
   17. HERO VERTICAL CENTERING · QUICK-NAV · STRONGER
   ANIMATED GRADIENTS
   ===================================================== */
/* truly center the hero block and keep it from overflowing the top */
.hero .sth-content{justify-content:center !important;gap:4px;padding:90px 24px;}
h1.hero-big{font-size:clamp(30px,5.2vw,80px) !important;line-height:1.02 !important;margin:6px auto !important;}
.hero-eyebrow.center{margin-bottom:6px;}
.hero-tag{margin-top:16px !important;}

/* persistent quick navigation on subpages */
.quick-nav{position:fixed;left:calc(50% + var(--sbw,0)/2);bottom:18px;transform:translateX(-50%) translateY(24px);z-index:80;
  display:flex;gap:5px;flex-wrap:wrap;justify-content:center;align-items:center;max-width:min(92vw,860px);
  background:color-mix(in srgb,var(--pergament-2) 88%,transparent);backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid var(--line);border-radius:44px;padding:7px;box-shadow:0 20px 44px -24px rgba(20,15,8,.5);
  opacity:1;visibility:visible;transition:opacity .35s var(--ease),transform .35s var(--ease);}
html[data-theme="dark"] .quick-nav{background:color-mix(in srgb,#1C1812 90%,transparent);border-color:rgba(255,255,255,.14);}
.quick-nav.on{opacity:1;visibility:visible;transform:translateX(-50%);}
/* §fix — the floating "Seiten" menu must be visible on EVERY page/subpage, not only after scroll */
.quick-nav{opacity:1 !important;visibility:visible !important;}
.quick-nav button,.quick-nav a{font-family:var(--f-ui);font-weight:700;font-size:12.5px;letter-spacing:.02em;
  padding:9px 14px;border-radius:30px;color:var(--ink);background:transparent;border:none;cursor:pointer;text-decoration:none;
  white-space:nowrap;transition:background .2s,color .2s,transform .2s;}
.quick-nav button:hover,.quick-nav a:hover{background:var(--blau);color:#fff;transform:translateY(-2px);}
.quick-nav .qn-home{background:var(--ink-panel);color:var(--on-ink);}
.quick-nav .qn-home:hover{background:var(--amber);color:var(--ink);}
@media(max-width:860px){ .quick-nav{left:50%;bottom:12px;} .quick-nav .qn-hide-m{display:none;} }

/* stronger, ever-moving aurora behind every page view */
.rt-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.rt-aurora b{position:absolute;border-radius:50%;filter:blur(95px);opacity:.30;transition:transform .4s ease-out;}
html[data-theme="dark"] .rt-aurora b{opacity:.34;}
.rt-aurora b:nth-child(1){width:48vw;height:48vw;background:radial-gradient(circle,#C8811A,transparent 62%);top:-8%;left:-6%;animation:auroraA 28s ease-in-out infinite;}
.rt-aurora b:nth-child(2){width:44vw;height:44vw;background:radial-gradient(circle,#3B5A8C,transparent 62%);bottom:-10%;right:-8%;animation:auroraB 34s ease-in-out infinite;}
.rt-aurora b:nth-child(3){width:36vw;height:36vw;background:radial-gradient(circle,#3B5A8C,transparent 64%);top:40%;left:55%;opacity:.2;animation:auroraA 40s ease-in-out infinite reverse;}
html[data-theme="dark"] .rt-aurora b:nth-child(1){background:radial-gradient(circle,#E09B35,transparent 62%);}
html[data-theme="dark"] .rt-aurora b:nth-child(2){background:radial-gradient(circle,#8FB0D9,transparent 62%);}
html[data-theme="dark"] .rt-aurora b:nth-child(3){background:radial-gradient(circle,#3B5A8C,transparent 64%);opacity:.22;}
@keyframes auroraA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(16vw,12vh) scale(1.12)}}
@keyframes auroraB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-14vw,-10vh) scale(1.1)}}
body>.sec,body>header.hero,body>footer{position:relative;z-index:1;}
/* §12 — subpage content above the animated aurora backdrop (NOT the fixed map app) */
body>main,.archive-tools,.page-hd{position:relative;z-index:1;}
@media(prefers-reduced-motion:reduce){ .rt-aurora b{animation:none !important;} }

/* =====================================================
   18. CHAPTER LINE SPACING · EMOJI QUICK-NAV · GLOBAL
   INTERACTIVE HOVER COLOUR
   ===================================================== */
/* (a) roomier chapter reading text */
.scene-body .body-l,.scene-body .body-l p,.step .tx p,.tx p,.body-l p,
#vorkrieg .body-l,#nachkrieg .body-l,.scene-body p{ line-height:1.92 !important; }
.scene-body .body-l p,.step .tx p,.tx p{ margin-bottom:1.15em !important; }
.scene-body .auth-q,.compare .mem q{ line-height:1.6 !important; }

/* (b) quick-nav as emoji chips — visible, with hover colour shift */
.quick-nav button,.quick-nav a{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--f-ui);font-weight:700;font-size:12.5px;
  padding:9px 15px;border-radius:30px;color:var(--ink);background:var(--pergament);border:1px solid var(--line);
  cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s,transform .2s,box-shadow .25s;}
html[data-theme="dark"] .quick-nav button,html[data-theme="dark"] .quick-nav a{background:#1b2735;border-color:rgba(255,255,255,.16);}
.quick-nav .qn-e{font-size:15px;line-height:1;}
.quick-nav button:hover,.quick-nav a:hover{background:var(--blau);color:#fff;border-color:var(--blau);transform:translateY(-3px);box-shadow:0 12px 24px -12px rgba(27,124,140,.6);}
.quick-nav .qn-home{background:var(--ink-panel);color:var(--on-ink);border-color:var(--ink);}
.quick-nav .qn-home:hover{background:var(--amber);color:var(--ink);border-color:var(--amber);box-shadow:0 12px 24px -12px rgba(224,123,46,.6);}
/* active state — shows which subpage you're on */
.quick-nav .active,.quick-nav a.active{background:var(--amber) !important;color:var(--ink) !important;border-color:var(--amber) !important;box-shadow:0 0 0 3px rgba(224,123,46,.25) !important;}
/* keep the bar clear of page content (esp. the map's info rail controls) */
.map-rail{padding-bottom:74px !important;}
.map-zoom{bottom:74px !important;}
.quick-nav{bottom:14px;}

/* (c) consistent interactive hover colour across the whole site */
.sb-item,.hub-card,.era,.qopt,.dopt,.rcard,.material-card,.gl,.glossar,.fbtn,.gtab,.tl2-card,a{
  transition:color .22s,background .22s,border-color .22s,box-shadow .25s,transform .2s;}
.sb-item:hover{color:var(--amber) !important;}
.sb-item:hover .ic svg{stroke:var(--amber);}
.gl:hover,.glossar:hover{color:var(--feldrot);}
.foot-links a:hover,footer a:hover{color:var(--amber) !important;}
.tl2-row:hover .tl2-card{border-color:var(--amber);}

/* =====================================================
   19. COLLAPSIBLE QUICK-NAV (covers nothing by default)
   + extra war-chapter line spacing
   ===================================================== */
.quick-nav{flex-wrap:nowrap !important;gap:6px;padding:6px;align-items:center;}
.quick-nav .qn-toggle{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-ui);font-weight:800;font-size:12.5px;
  letter-spacing:.02em;padding:10px 16px;border-radius:30px;background:var(--ink-panel);color:var(--on-ink);border:none;cursor:pointer;white-space:nowrap;transition:background .25s,transform .2s;}
.quick-nav .qn-toggle:hover{background:var(--amber);color:var(--ink);}
.quick-nav .qn-items{display:flex;align-items:center;gap:5px;overflow:hidden;max-width:0;opacity:0;
  transition:max-width .4s cubic-bezier(.16,1,.3,1),opacity .3s,margin .4s;margin-left:0;}
.quick-nav:focus-within .qn-items,.quick-nav.qn-open .qn-items{max-width:80vw;opacity:1;margin-left:2px;}
@media(max-width:860px){ .quick-nav.qn-open .qn-items{max-width:74vw;overflow-x:auto;} }

/* war chapter (scrollytelling) — generous spacing so text never overlaps on scroll */
#kapitel ~ .sec .step,.st-text .step{ padding-block:clamp(40px,7vh,90px) !important;margin-bottom:clamp(20px,4vh,48px); }
.st-text .step .tx p,.scene-body .body-l p{ line-height:2.0 !important;margin-bottom:1.25em !important; }
.sv-cap{ line-height:1.5 !important; }

/* =====================================================
   13. FIXES — chapter heading legibility + diacritics,
   hero tag/scroll overlap, logo above avatar
   ===================================================== */

/* (a) Chapter headings: dark high-contrast gradient in light mode
   (was washed-out pale blue), light gradient in dark mode; and
   give room so Ä/Ö/Ü dots + g/j descenders are never clipped. */
.chap-hd h2{
  line-height:1.06 !important;
  padding:.1em 0 .16em !important;
  overflow:visible !important;
  background-image:linear-gradient(118deg,#16222B 0%,#2C6E7E 100%) !important;
  -webkit-text-fill-color:transparent !important;
}
.chap-hd h2 span{overflow:visible !important;display:block;}
html[data-theme="dark"] .chap-hd h2{
  background-image:linear-gradient(118deg,#F6EFE0 0%,#E8B85A 100%) !important;
}

/* (b) Hero: keep the scroll cue clear of the tagline */
.hero-tag{margin-bottom:0 !important;}
.scrollcue{bottom:12px !important;}
.scrollcue .bar{height:30px;}

/* (c) Logo — larger and centered directly above the avatar in the rail */
.sidebar-logo .logo-mark{width:66px;height:66px;}
.sidebar .sb-prof .pav{width:54px;height:54px;}
@media(min-width:861px){
  .sidebar:not(.x) .sidebar-logo{justify-content:center;padding-left:0;padding-right:0;}
  .sidebar:not(.x) .sb-prof{justify-content:center;}
}

/* =====================================================
   20. §2 NAVIGATION — bolder "Seiten" toggle + per-chapter jumps
   ===================================================== */

/* (a) "Seiten" toggle: bigger + strong amber background so it's obviously a control */
.quick-nav .qn-toggle{
  font-size:14px !important;font-weight:800 !important;letter-spacing:.04em !important;
  padding:13px 22px !important;border-radius:32px !important;
  background:var(--amber) !important;color:#23170a !important;
  box-shadow:0 10px 26px -10px rgba(224,123,46,.7) !important;
  animation:qnPulse 3.2s ease-in-out infinite;
}
.quick-nav .qn-toggle:hover{background:var(--blau) !important;color:#fff !important;transform:translateY(-2px);}
.quick-nav.qn-open .qn-toggle{animation:none;background:var(--ink-panel) !important;color:var(--on-ink) !important;}
.quick-nav .qn-toggle::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.55;}
@keyframes qnPulse{0%,100%{box-shadow:0 10px 26px -10px rgba(224,123,46,.7);}50%{box-shadow:0 10px 30px -6px rgba(224,123,46,.95);}}
@media(prefers-reduced-motion:reduce){ .quick-nav .qn-toggle{animation:none;} }
html[data-theme="dark"] .quick-nav .qn-toggle{background:var(--amber) !important;color:#1A120A !important;}

/* (b) per-chapter "jump to other chapters" navigation */
.chapter-nav{margin-top:clamp(36px,6vh,72px);padding-top:clamp(28px,4vh,44px);border-top:1px solid var(--line);}
html[data-theme="dark"] .chapter-nav{border-top-color:rgba(255,255,255,.14);}
.chapter-nav .cn-eyebrow{display:block;text-align:center;font-family:var(--f-mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:20px;}
.chapter-nav .cn-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.cn-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;
  background:var(--pergament-2);border:1px solid var(--line);border-radius:16px;padding:22px 24px;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s,background .25s;}
.cn-card:hover{transform:translateY(-4px);border-color:var(--amber);box-shadow:0 20px 44px -24px rgba(20,15,8,.55);}
.cn-card .cn-dir{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blau);}
.cn-card .cn-yr{font-family:var(--f-mono);font-size:12px;color:var(--ink-soft);}
.cn-card .cn-title{font-family:var(--f-display);font-weight:800;font-size:clamp(20px,2.4vw,28px);line-height:1.05;color:var(--ink);margin-top:2px;}
.cn-card .cn-go{margin-top:8px;font-family:var(--f-ui);font-weight:700;font-size:13px;color:var(--blau);}
.cn-card.cn-next{background:var(--ink-panel);border-color:var(--ink-panel);}
.cn-card.cn-next .cn-dir,.cn-card.cn-next .cn-go{color:var(--amber-l);}
.cn-card.cn-next .cn-yr{color:#cdbfa6;}
.cn-card.cn-next .cn-title{color:var(--on-ink);}
.cn-card.cn-next:hover{border-color:var(--amber);}
html[data-theme="dark"] .cn-card{background:#1C1812;border-color:rgba(255,255,255,.14);}
html[data-theme="dark"] .cn-card.cn-next{background:#100D06;}
@media(max-width:880px){ .chapter-nav .cn-grid{grid-template-columns:1fr;} }

/* =====================================================
   21. §4 CHECKABLE TERMS / EVENTS — collect points while reading
   ===================================================== */
.learn-chk{display:inline-flex;align-items:center;gap:10px;margin-top:16px;cursor:pointer;
  font-family:var(--f-ui);font-weight:700;font-size:13.5px;letter-spacing:.01em;color:var(--blau);
  background:color-mix(in oklab,var(--blau) 9%,transparent);border:1.5px solid color-mix(in oklab,var(--blau) 38%,transparent);
  padding:9px 15px 9px 11px;border-radius:30px;transition:background .2s,border-color .2s,color .2s,transform .15s;}
.learn-chk:hover{background:color-mix(in oklab,var(--blau) 16%,transparent);transform:translateY(-1px);}
.learn-chk .lc-box{width:20px;height:20px;border-radius:6px;border:2px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 auto;line-height:1;}
.learn-chk.done{color:#1f8a5b;background:color-mix(in oklab,#1f8a5b 12%,transparent);border-color:color-mix(in oklab,#1f8a5b 45%,transparent);}
.learn-chk.done .lc-box{background:#1f8a5b;border-color:#1f8a5b;color:#fff;}
html[data-theme="dark"] .learn-chk{color:var(--amber-l);background:rgba(224,168,90,.1);border-color:rgba(224,168,90,.4);}
html[data-theme="dark"] .learn-chk.done{color:#5fd39b;background:rgba(95,211,155,.12);border-color:rgba(95,211,155,.45);}
[data-learn].is-learned{box-shadow:-3px 0 0 0 #1f8a5b;}

/* per-chapter learning meter */
.learn-meter{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--pergament-2);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:clamp(28px,4vh,46px) 0;}
html[data-theme="dark"] .learn-meter{background:#1C1812;border-color:rgba(255,255,255,.14);}
.learn-meter .lm-ic{font-size:20px;display:inline-flex;}
.learn-meter .lm-ic svg{width:26px;height:26px;overflow:visible;}
.learn-meter .lm-ic .spk,.learn-meter .lm-ic .spk2{transform-box:fill-box;transform-origin:50% 50%;}
@media (prefers-reduced-motion:no-preference){
  .learn-meter .lm-ic .spk{animation:spkTwinkle 2.6s ease-in-out infinite;}
  .learn-meter .lm-ic .spk2{animation:spk2Twinkle 2.6s ease-in-out .6s infinite;}
}
@keyframes spkTwinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(1.18) rotate(20deg);opacity:.85}}
@keyframes spk2Twinkle{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.1);opacity:1}}
/* game-tab cute mini icons */
.gt-ic{display:inline-flex;align-items:center;margin-right:1px;}
.gt-ic .gt-svg{width:17px;height:17px;transform-box:fill-box;transform-origin:50% 50%;}
@media (prefers-reduced-motion:no-preference){
  .gtab:hover .gt-svg{animation:gtWiggle .55s ease;}
  .gtab.on .gt-svg{animation:gtPulse 2.4s ease-in-out infinite;}
}
@keyframes gtWiggle{0%,100%{transform:rotate(0)}28%{transform:rotate(-10deg)}62%{transform:rotate(7deg)}}
@keyframes gtPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
.learn-meter .lm-label{font-family:var(--f-ui);font-weight:700;font-size:14px;color:var(--ink);}
.learn-meter .lm-sub{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-soft);letter-spacing:.04em;}
.learn-meter .lm-track{flex:1;min-width:140px;height:10px;border-radius:8px;background:var(--pergament-3);overflow:hidden;}
.learn-meter .lm-fill{height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--blau),#1f8a5b);transition:width .6s var(--ease);}
.learn-meter .lm-num{font-family:var(--f-mono);font-weight:700;font-size:14px;color:var(--blau);min-width:54px;text-align:right;}
.learn-meter.lm-complete .lm-fill{background:linear-gradient(90deg,#1f8a5b,#2fb37a);}
.learn-meter.lm-complete .lm-num{color:#1f8a5b;}

/* map reference link inside chapter prose */
.map-ref{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-ui);font-weight:700;font-size:13px;
  color:var(--blau);text-decoration:none;border-bottom:1.5px dotted currentColor;padding-bottom:1px;cursor:pointer;transition:color .2s;}
.map-ref:hover{color:var(--amber);}
.map-ref .mr-pin{font-size:14px;}

/* "facts in a different colour, big enough" inside decision reveals */
.dreveal .big-fact{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(22px,3vw,30px);
  line-height:1.12;color:var(--amber);margin:14px 0 4px;}
html[data-theme="dark"] .dreveal .big-fact{color:var(--amber-l);}

/* "Vorher geschah" recap box at chapter top */
.recap{background:var(--pergament-2);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:14px;padding:18px 22px;text-align:left;}
html[data-theme="dark"] .recap{background:#1C1812;border-color:rgba(255,255,255,.14);border-left-color:var(--amber);}
.recap .recap-l{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--blau);margin-bottom:7px;}
.recap p{font-size:15.5px;line-height:1.65;color:var(--ink-soft);margin:0;}
.recap .map-ref{margin-top:2px;}

/* §5 — bigger, simpler context text inside decision panels */
.decision .dctx{position:relative;font-size:clamp(17px,1.9vw,21px);line-height:1.62;color:#ede2cf;max-width:60ch;margin:18px 0 4px;}
html[data-theme="dark"] .decision .dctx{color:#ede2cf;}
.decision .dopt .ot{font-size:17px;line-height:1.45;}
.decision .dk{font-size:12.5px;}

/* =====================================================
   22. §6 GAMIFICATION — confetti, badge celebration, badge grid, TF pacing
   ===================================================== */
/* profile badge grid: roomy cards, icon over label, nothing overlaps */
#badges, .drawer .badges{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(108px,1fr)) !important;gap:14px !important;}
.drawer .badge{flex-direction:column !important;align-items:center !important;text-align:center;gap:10px !important;
  padding:18px 12px !important;border-radius:16px !important;background:var(--pergament-2) !important;border:1px solid var(--line);min-height:118px;justify-content:center;}
html[data-theme="dark"] .drawer .badge{background:#1C1812 !important;border-color:rgba(255,255,255,.16);}
.drawer .badge .ic{width:46px !important;height:46px !important;font-size:22px !important;border-radius:50% !important;flex:0 0 auto;box-shadow:0 6px 16px -8px rgba(224,123,46,.7);}
.drawer .badge .bt{font-family:var(--f-ui);font-weight:700;font-size:12px;line-height:1.25;color:var(--ink);letter-spacing:.01em;}
.drawer .badge.locked{opacity:1 !important;}
.drawer .badge.locked .ic{background:var(--pergament-3) !important;color:var(--ink-soft);box-shadow:none;font-size:16px !important;}
.drawer .badge.locked .bt{color:var(--ink-soft);}
.drawer .badge:not(.locked){border-color:color-mix(in oklab,var(--amber) 45%,var(--line));}

/* confetti layer + particles */
.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden;}
.confetti-layer i{position:absolute;display:block;will-change:transform,opacity;animation:confettiFly 1.4s cubic-bezier(.18,.7,.3,1) forwards;}
@keyframes confettiFly{0%{transform:translate(0,0) rotate(0);opacity:1;}100%{transform:translate(var(--dx),calc(var(--dy) + 60vh)) rotate(var(--rot));opacity:0;}}

/* badge unlock banner */
.badge-pop{position:fixed;left:50%;top:24%;transform:translate(-50%,-20px) scale(.9);z-index:10000;
  display:flex;align-items:center;gap:16px;background:var(--ink-panel);color:var(--on-ink);
  padding:18px 26px 18px 20px;border-radius:18px;box-shadow:0 30px 70px -24px rgba(0,0,0,.7);
  opacity:0;transition:opacity .4s var(--ease),transform .5s var(--ease);pointer-events:none;max-width:90vw;}
.badge-pop.on{opacity:1;transform:translate(-50%,0) scale(1);}
.badge-pop .bp-ic{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--amber),var(--amber-l));
  color:#23170a;display:flex;align-items:center;justify-content:center;font-size:26px;flex:0 0 auto;
  box-shadow:0 0 0 6px rgba(224,123,46,.2);animation:bpPulse 1.2s ease infinite;}
@keyframes bpPulse{0%,100%{box-shadow:0 0 0 6px rgba(224,123,46,.2);}50%{box-shadow:0 0 0 12px rgba(224,123,46,.05);}}
.badge-pop .bp-l{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-l);}
.badge-pop .bp-n{display:block;font-family:var(--f-display);font-weight:800;font-size:22px;margin-top:3px;}
@media(prefers-reduced-motion:reduce){.badge-pop .bp-ic{animation:none;}}

/* Wahr/Falsch — "Weiter" advance button so explanations stay as long as needed */
.tf-btn.next{background:var(--amber);color:#23170a;border-color:var(--amber);font-weight:800;grid-column:1/-1;}
.tf-btn.next:hover{background:var(--blau);color:#fff;border-color:var(--blau);}

/* "Halte einen Moment inne" game pane */
.inne-card{max-width:640px;margin:0 auto;background:var(--pergament-2);border:1px solid var(--line);border-radius:18px;padding:clamp(24px,4vw,40px);}
html[data-theme="dark"] .inne-card{background:#1C1812;border-color:rgba(255,255,255,.16);}
.inne-card .inne-k{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--blau);}
.inne-card .inne-q{font-family:var(--f-quote);font-style:italic;font-size:clamp(20px,2.6vw,28px);line-height:1.35;color:var(--ink);margin:12px 0 18px;}
.inne-prompts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.inne-pill{font-family:var(--f-mono);font-size:12px;font-weight:700;letter-spacing:.04em;padding:8px 15px;border-radius:30px;border:1.5px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer;transition:.2s;}
.inne-pill:hover{border-color:var(--amber);color:var(--ink);}
.inne-pill.on{background:var(--ink-panel);color:var(--on-ink);border-color:var(--ink);}
html[data-theme="dark"] .inne-pill.on{background:var(--amber);color:#1A120A;border-color:var(--amber);}
.inne-text{width:100%;min-height:130px;resize:vertical;padding:16px;border-radius:12px;border:2px solid var(--line);background:var(--pergament);font-family:var(--f-ui);font-size:16px;line-height:1.6;color:var(--ink);}
html[data-theme="dark"] .inne-text{background:#100D06;color:var(--ink);border-color:rgba(255,255,255,.18);}
.inne-text:focus{outline:none;border-color:var(--amber);}
.inne-actions{display:flex;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap;}
.inne-feedback{font-family:var(--f-mono);font-size:13px;color:var(--ink-soft);}
.inne-feedback.done{color:#1f8a5b;}
.inne-feedback.warn{color:var(--feldrot);}

/* =====================================================
   23. §7 GLOSSARY — full term set, search, filters, mobile cards
   ===================================================== */
.gloss-search{display:flex;align-items:center;gap:12px;max-width:560px;margin:0 auto;background:var(--pergament-2);border:1.5px solid var(--line);border-radius:40px;padding:6px 18px;}
html[data-theme="dark"] .gloss-search{background:#1C1812;border-color:rgba(255,255,255,.18);}
.gloss-search:focus-within{border-color:var(--amber);}
.gloss-search .gs-ic{font-size:18px;color:var(--ink-soft);}
.gloss-search input{flex:1;border:none;background:transparent;font-family:var(--f-ui);font-size:16px;color:var(--ink);padding:10px 0;outline:none;}
.gloss-search .gs-count{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-soft);white-space:nowrap;}
.gloss-filters{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:18px;}
.gloss-fil{font-family:var(--f-mono);font-size:12px;font-weight:700;letter-spacing:.03em;padding:8px 16px;border-radius:30px;border:1.5px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer;transition:.2s;}
.gloss-fil:hover{border-color:var(--amber);color:var(--ink);}
.gloss-fil.on{background:var(--ink-panel);color:var(--on-ink);border-color:var(--ink);}
html[data-theme="dark"] .gloss-fil.on{background:var(--amber);color:#1A120A;border-color:var(--amber);}
.gloss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.gloss-card{position:relative;text-align:left;background:var(--pergament-2);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:14px;padding:20px 22px;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s;}
.gloss-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(20,15,8,.55);}
html[data-theme="dark"] .gloss-card{background:#1C1812;border-color:rgba(255,255,255,.14);border-left-color:var(--amber);}
.gloss-card .gc-cat{display:inline-block;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blau);background:color-mix(in oklab,var(--blau) 12%,transparent);padding:3px 9px;border-radius:20px;margin-bottom:10px;}
.gloss-card h4{font-family:var(--f-display);font-weight:800;font-size:19px;line-height:1.15;margin:0 0 7px;color:var(--ink);}
.gloss-card p{margin:0;font-size:14.5px;line-height:1.62;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.gloss-card.open p{-webkit-line-clamp:unset;overflow:visible;}
.gloss-card .gc-src{display:block;margin-top:12px;font-family:var(--f-mono);font-size:11px;color:var(--ink-soft);opacity:0;max-height:0;overflow:hidden;transition:opacity .25s,max-height .25s;}
.gloss-card.open .gc-src{opacity:.85;max-height:40px;}
.gloss-card::after{content:"Mehr +";position:absolute;top:18px;right:18px;font-family:var(--f-mono);font-size:11px;color:var(--amber);opacity:.8;}
.gloss-card.open::after{content:"Weniger −";}
.gloss-card.flash{animation:glossFlash 1.5s ease;}

/* =====================================================
   24. §9 TIMELINE — legend on top, 3 distinct colour tracks (+ Judenverfolgung)
   ===================================================== */
/* clear, non-mixing hues: amber = Johannes, blue = Zeitgeschichte, deep red = Judenverfolgung */
.tl2-row.cat-p .tl2-yr,.tl2-row.cat-p .tl2-tag{color:var(--amber);}
.tl2-row.cat-p .tl2-dot{background:var(--amber);}
.tl2-row.cat-p .tl2-card{border-left:4px solid var(--amber);}
.tl2-row.cat-h .tl2-yr,.tl2-row.cat-h .tl2-tag{color:var(--blau);}
.tl2-row.cat-h .tl2-dot{background:var(--blau);}
.tl2-row.cat-h .tl2-card{border-left:4px solid var(--blau);}
.tl2-row.cat-v .tl2-yr,.tl2-row.cat-v .tl2-tag{color:var(--feldrot);}
.tl2-row.cat-v .tl2-dot{background:var(--feldrot);}
.tl2-row.cat-v .tl2-card{border-left:4px solid var(--feldrot);background:color-mix(in oklab,var(--feldrot) 6%,var(--pergament-2));}
html[data-theme="dark"] .tl2-row.cat-h .tl2-yr,html[data-theme="dark"] .tl2-row.cat-h .tl2-tag{color:var(--hover);}
html[data-theme="dark"] .tl2-row.cat-v .tl2-card{background:color-mix(in oklab,var(--feldrot) 22%,#1C1812);}

/* legend on top, with matching swatches */
.tl-legend.tl-legend-top{margin:18px auto 0;flex-wrap:wrap;gap:10px 26px;background:var(--pergament-2);border:1px solid var(--line);border-radius:40px;padding:12px 24px;width:max-content;max-width:100%;}
html[data-theme="dark"] .tl-legend.tl-legend-top{background:#1C1812;border-color:rgba(255,255,255,.16);}
.tl-legend.tl-legend-top span{display:inline-flex;align-items:center;color:var(--ink);}
.tl-legend.tl-legend-top i{margin-right:8px;}
.tl-legend.tl-legend-top .cat-p i{background:var(--amber);}
.tl-legend.tl-legend-top .cat-h i{background:var(--blau);}
.tl-legend.tl-legend-top .cat-v i{background:var(--feldrot);}
@keyframes glossFlash{0%,100%{box-shadow:0 0 0 0 rgba(224,123,46,0);}30%{box-shadow:0 0 0 4px rgba(224,123,46,.4);border-color:var(--amber);}}

/* "Im Glossar ansehen" jump button in the hover/tap popup */
.glosspop .gloss-jump{display:block;margin-top:12px;font-family:var(--f-ui);font-weight:700;font-size:12.5px;color:var(--amber-l);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:7px 12px;width:100%;text-align:left;cursor:pointer;transition:background .2s;}
.glosspop .gloss-jump:hover{background:rgba(224,123,46,.2);}
.gl{cursor:pointer;}
@media(max-width:600px){
  .gloss-grid{grid-template-columns:1fr;}
  .glosspop{left:12px !important;right:12px;width:auto !important;max-width:none;}
}

/* =====================================================
   25. §10 DARK MODE LEGIBILITY — keep "ink" accent panels genuinely dark
   In dark mode --ink flips to a light tone (for body text), which turned
   every  background:var(--ink)  panel light-on-light. Force those panels
   back to a real dark surface with light text. Strictly readable.
   ===================================================== */
html[data-theme="dark"] .decision,
html[data-theme="dark"] .audio,
html[data-theme="dark"] .marquee,
html[data-theme="dark"] .glosspop,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .drawer-hd,
html[data-theme="dark"] .chat-hd,
html[data-theme="dark"] .chat-foot .send,
html[data-theme="dark"] .msg.u,
html[data-theme="dark"] .pp-game,
html[data-theme="dark"] .code-display,
html[data-theme="dark"] .mback,
html[data-theme="dark"] .guide-tab,
html[data-theme="dark"] .chat-fab .gd-pill,
html[data-theme="dark"] .guide-bubble .bx,
html[data-theme="dark"] .intro-portrait .tag,
html[data-theme="dark"] .gtab.on,
html[data-theme="dark"] .opt-pill.on,
html[data-theme="dark"] .badge-pop{
  background-color:#1C1812 !important;
  border-color:rgba(255,255,255,.16);
}
/* their text + accents stay light/warm = readable on the dark surface */
html[data-theme="dark"] .decision .dq,
html[data-theme="dark"] .decision .dsub,
html[data-theme="dark"] .marquee,html[data-theme="dark"] .marquee .track,
html[data-theme="dark"] .toast,html[data-theme="dark"] .audio,
html[data-theme="dark"] .pp-game,html[data-theme="dark"] .glosspop,
html[data-theme="dark"] .drawer-hd,html[data-theme="dark"] .chat-hd,
html[data-theme="dark"] .msg.u,html[data-theme="dark"] .gtab.on,
html[data-theme="dark"] .opt-pill.on,html[data-theme="dark"] .code-display{
  color:#FFFFFF !important;
}
html[data-theme="dark"] .code-display{color:var(--amber-l) !important;}
html[data-theme="dark"] .decision .dq{color:#FFFFFF !important;}
html[data-theme="dark"] .mback{color:var(--amber-l) !important;}
/* dark-mode form fields: dark surface, light text (were cream-on-cream) */
html[data-theme="dark"] .chat-foot input,
html[data-theme="dark"] .code-input,
html[data-theme="dark"] .mfront,
html[data-theme="dark"] .msg.j{background-color:#1C1812 !important;color:var(--ink) !important;border-color:rgba(255,255,255,.18) !important;}
html[data-theme="dark"] .chat-foot input::placeholder,
html[data-theme="dark"] .code-input::placeholder{color:#8A8A8A !important;}
/* quick-nav home/toggle pills: keep dark, readable */
html[data-theme="dark"] .quick-nav .qn-home,
html[data-theme="dark"] .quick-nav .qn-toggle{background-color:#1C1812;color:#FFFFFF;}
/* subpage info rail (map) — guarantee dark surface in dark mode */
html[data-theme="dark"] .map-rail{background:#1C1812;}
html[data-theme="dark"] .rail-text,html[data-theme="dark"] .rail-place{color:var(--ink);}

/* §10/§12 — headings in the dedicated heading colour (petrol light / beige dark) */
.sec h2.display,.chap-hd h2,.scene-body h3,.intro h2,.center h2.display{color:var(--heading);}
html[data-theme="dark"] .sec h2.display,html[data-theme="dark"] .chap-hd h2,html[data-theme="dark"] .scene-body h3,html[data-theme="dark"] .intro h2{color:var(--heading);}

/* §11 — sidebar profile monogram fallback (subpages, no avatar engine) */
.sb-prof .pav .pav-mono{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  background:linear-gradient(135deg,var(--amber),var(--amber-l));color:#fff;font-family:var(--f-display);font-weight:800;font-size:18px;}
html[data-theme="dark"] .sb-prof .pav .pav-mono{color:#1A120A;}

/* =====================================================
   27. BOLD PALETTE APPLICATION — make the spec colours actually SHOW,
   with strong contrast. Headings = petrol(light)/beige(dark); interactive
   = türkis(light)/ocker(dark); lavender + altrosa as living accents.
   ===================================================== */
/* (a) every display/section heading in the dedicated HEADING colour */
.display,.d-md,.chap-hd h2,.chap-hd h1,.scene-body h3,.intro h2,
.sec h2,.sec h3.display,.fact h4,.decision .dq,.gloss-card h4,
.rail-place,.map-title h1,.page-hd h1{color:var(--heading) !important;}
.intro h2 em{color:var(--amber) !important;}      /* keep the emphasised word warm */
.decision .dq{color:#FFFFFF !important;}           /* dark decision panel keeps light text */
html[data-theme="dark"] .decision .dq{color:#FFFFFF !important;}
.gloss-card h4,.fact h4{color:var(--heading) !important;}

/* (b) heading colour must stay high-contrast on dark panels/photos */
.scene-media .cap{color:inherit;}
.hero .hero-tag{color:#F0E8D5 !important;}
.hero .hero-eyebrow,.hero .hero-eyebrow .ln{color:var(--amber-l) !important;}
body.epoch-war .scene-body h3{color:#FFFFFF !important;}

/* (c) kickers: warm primary, but with a strong tinted pill so they read as labels */
.kicker{color:var(--amber);font-weight:800;}
.kicker.b{color:var(--heading);}
.kicker.r{color:var(--feldrot-ink);}
html[data-theme="dark"] .kicker{color:#F0997A;}
html[data-theme="dark"] .kicker.b{color:var(--heading);}

/* (d) main buttons = PRIMARY accent (orange light / ocker dark); links = SECONDARY (türkis/blue) */
.btn{background:var(--amber);color:#fff;}
.btn:hover{background:var(--hover);color:#fff;}
html[data-theme="dark"] .btn{background:var(--amber);color:#1A120A;}
html[data-theme="dark"] .btn:hover{background:var(--hover);color:#1A120A;}
/* links inside prose use the secondary accent; button-style links keep their own colours */
.sec p a,.lede a,.body-l a,.rail-text a,.recap a,.prov-banner a{color:var(--link,var(--blau));}
.sec p a:hover,.lede a:hover,.body-l a:hover,.rail-text a:hover{color:var(--hover);}

/* (e) standalone reflection quote — no side bar, centered, calmer size + air */
.inne-card .inne-q{border-color:var(--terra);}
.kq[data-kinetic]{
  border-left:0 !important;padding:0 !important;
  max-width:20ch;margin:clamp(28px,5vh,64px) auto !important;
  text-align:center;font-size:clamp(22px,2.6vw,32px) !important;line-height:1.32 !important;
}
.inne-k{color:var(--terra-ink) !important;}
html[data-theme="dark"] .inne-k{color:var(--terra-ink) !important;}
.reflect .rl,.dreveal .rl{color:var(--feldrot-ink) !important;}
html[data-theme="dark"] .dreveal .rl{color:#F0997A !important;}

/* (f) stronger section rhythm: secondary-surface cards stand off the page bg */
.fact,.gloss-card,.cn-card,.learn-meter,.inne-card,.recap{background:var(--pergament-2);}
html[data-theme="dark"] .fact,html[data-theme="dark"] .gloss-card,
html[data-theme="dark"] .cn-card,html[data-theme="dark"] .learn-meter,
html[data-theme="dark"] .inne-card,html[data-theme="dark"] .recap{background:#1C1812;}

/* §spec — midnight-navy nav / footer / menus surfaces in dark mode */
html[data-theme="dark"] .nav.solid{background:rgba(11,16,33,.92) !important;backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(255,255,255,.08);}
html[data-theme="dark"] footer,html[data-theme="dark"] .site-footer,html[data-theme="dark"] .footer{background:#100D06 !important;}
html[data-theme="dark"] .pm,html[data-theme="dark"] .pmenu,html[data-theme="dark"] .theme-pop,html[data-theme="dark"] .cur-pop{background:#100D06 !important;border-color:rgba(255,255,255,.12) !important;}
/* success / warning / link spec accents available as utilities */
html[data-theme="dark"] .ok,html[data-theme="dark"] .success{color:var(--ok) !important;}
html[data-theme="dark"] .warn,html[data-theme="dark"] .error{color:var(--warn) !important;}
html[data-theme="dark"] .sec p a,html[data-theme="dark"] .lede a,html[data-theme="dark"] .body-l a,html[data-theme="dark"] .rail-text a{color:var(--link);}
html[data-theme="dark"] .sec p a:hover,html[data-theme="dark"] .lede a:hover{color:var(--hover);}
.scrollcue .cue-l{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#efe6d4;opacity:.92;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.6);}

/* §teacher — category chooser at the top of the Lehrkräfte page */
.teach-cats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
@media(max-width:1000px){.teach-cats{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.teach-cats{grid-template-columns:1fr;}}
.teach-cat{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;cursor:pointer;
  background:var(--pergament-2);border:1.5px solid var(--line);border-radius:16px;padding:18px 18px 16px;
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s,background .2s;}
html[data-theme="dark"] .teach-cat{background:#1C1812;border-color:rgba(255,255,255,.14);}
.teach-cat:hover{transform:translateY(-4px);border-color:var(--amber);box-shadow:0 18px 40px -26px rgba(20,15,8,.5);}
.teach-cat .tc-ic{width:30px;height:30px;line-height:1;margin-bottom:6px;}
.material-type .ci{width:1.25em;height:1.25em;vertical-align:-.22em;}
.teach-cat .tc-t{font-family:var(--f-display);font-weight:800;font-size:17px;color:var(--ink);line-height:1.1;}
.teach-cat .tc-d{font-size:12.5px;line-height:1.35;color:var(--ink-soft);}
.teach-cat .tc-n{margin-top:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--blau);
  background:color-mix(in oklab,var(--blau) 12%,transparent);border-radius:20px;padding:3px 10px;}
.teach-cat.is-active{background:var(--amber);border-color:var(--amber);}
.teach-cat.is-active .tc-t,.teach-cat.is-active .tc-d{color:#1c1206;}
.teach-cat.is-active .tc-n{background:rgba(0,0,0,.16);color:#1c1206;}
html[data-theme="dark"] .teach-cat.is-active{background:var(--amber);}
html[data-theme="dark"] .teach-cat.is-active .tc-t,html[data-theme="dark"] .teach-cat.is-active .tc-d{color:#1A120A;}
.material-card{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s,opacity .3s;}
.guide-min{position:absolute;top:-4px;right:-2px;z-index:94;width:30px;height:30px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.6);background:var(--ink-panel);color:var(--on-ink);
  font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.6);opacity:1;pointer-events:auto;transform:scale(1);transition:opacity .25s,transform .25s,background .2s;}
.guide:hover .guide-min,.guide:focus-within .guide-min{transform:scale(1.1);}
.guide-min:hover{background:var(--feldrot);border-color:var(--feldrot);color:#fff;}
@media(hover:none){ .guide-min{opacity:1;pointer-events:auto;transform:scale(1);} }
/* dark mode: amber circle with dark ✕ so the collapse control is obvious */
html[data-theme="dark"] .guide-min{background:var(--amber);color:#100D06;border-color:var(--amber-l);box-shadow:0 6px 18px -4px rgba(0,0,0,.7);}
html[data-theme="dark"] .guide-min:hover{background:var(--warn);border-color:var(--warn);color:#fff;}
/* =====================================================
   26. EXACT PALETTE — dark-mode legibility (authoritative, last word)
   Spec accents (red #B33A3A, sepia #8C6746, green #355E4B) are dark, so
   they are kept for FILLS/borders/dots but every COLORED TEXT instance is
   lifted to a readable tone. WCAG-minded: small text ≥ ~4.5:1 on navy.
   ===================================================== */
html[data-theme="dark"]{
  --amber-tx:#F0997A;   /* readable lightened historical-red, for small accent text */
}
/* sepia "historical / emotional" accent used as TEXT → readable tone in BOTH modes
   (light: dark rose #7A2E4B · dark: sepia-tan #D9B38C). Fills/borders keep spec hue. */
.big-stat .s b,
.mem-stats b,
.pstat b,
.chip.wrong .yr-badge,
.inne-feedback.warn,
.tl2-row.cat-v .tl2-yr,
.tl2-row.cat-v .tl2-tag,
.kicker.r{color:var(--feldrot-ink) !important;}
html[data-theme="dark"] .marquee .sep,
html[data-theme="dark"] .tf-stamp.f{color:var(--feldrot-ink) !important;}
html[data-theme="dark"] .tf-btn.no{color:var(--feldrot-ink) !important;border-color:var(--feldrot-ink) !important;}
/* primary-red accent used as TEXT in dark → lifted red */
html[data-theme="dark"] .kicker,
html[data-theme="dark"] .msg.j .who,
html[data-theme="dark"] .intro h2 em,
html[data-theme="dark"] .gloss-card .gc-cat,
html[data-theme="dark"] .tl2-row.cat-p .tl2-yr,
html[data-theme="dark"] .tl2-row.cat-p .tl2-tag{color:var(--amber-tx) !important;}

/* CHATBOT speech bubble — was hardcoded #fff with cream text (invisible). */
html[data-theme="dark"] .guide-bubble{background:#1C1812 !important;border-color:#3A3A3A !important;color:var(--ink) !important;}
html[data-theme="dark"] .guide-bubble::after{background:#1C1812 !important;border-top-color:#3A3A3A !important;border-right-color:#3A3A3A !important;border-bottom-color:#3A3A3A !important;}
html[data-theme="dark"] .guide-bubble b{color:var(--hover) !important;}
html[data-theme="dark"] .guide-bubble .bx{background:var(--ink) !important;color:#1C1812 !important;}
/* chat window pieces */
html[data-theme="dark"] .chat-panel{background:#100D06 !important;}
html[data-theme="dark"] .msg.j{background:#1C1812 !important;color:var(--ink) !important;border-color:rgba(255,255,255,.16) !important;}
html[data-theme="dark"] .msg.j .who{color:var(--amber-tx) !important;}
html[data-theme="dark"] .msg.j .srcline{color:#BFC3C8 !important;border-top-color:rgba(255,255,255,.2) !important;}
html[data-theme="dark"] .chat-sugg button{background:#2A2318 !important;color:var(--ink) !important;border-color:rgba(255,255,255,.18) !important;}
html[data-theme="dark"] .chat-sugg button:hover{background:#2A2A2A !important;}
html[data-theme="dark"] .chat-hd .st{color:var(--hover) !important;}
html[data-theme="dark"] .chat-typing{color:var(--ink-soft) !important;}

/* generic guard: any remaining hardcoded white card keeps dark text on light bg
   (these intentionally stay light, so force their text dark for contrast) */
html[data-theme="dark"] .msg.j *{color:inherit;}

/* dark mode: ocker (secondary accent) is LIGHT — fills that used white text need DARK text */
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .quick-nav button:hover,
html[data-theme="dark"] .quick-nav a:hover,
html[data-theme="dark"] .quick-nav .qn-toggle:hover,
html[data-theme="dark"] .tf-btn.next:hover,
html[data-theme="dark"] .member .tag.live,
html[data-theme="dark"] .gmaps-btn,
html[data-theme="dark"] .fbtn.on,
html[data-theme="dark"] .opt-pill.on,
html[data-theme="dark"] .gtab.on{color:#1A120A !important;}
/* the red "Weiter" button: white text on historical-red reads well */
html[data-theme="dark"] .tf-btn.next{background:var(--amber) !important;color:#FFF !important;border-color:var(--amber) !important;}
/* ocker links/values on dark surfaces are fine; ensure sidebar active + cn-go stay ocker (not dark) */
html[data-theme="dark"] .sb-item.active,
html[data-theme="dark"] .cn-card .cn-go,
html[data-theme="dark"] .cn-card.cn-next .cn-go{color:var(--hover) !important;}

/* =====================================================
   28. DESIGN SYSTEM v9 — Editorial type + warm terracotta/gold/petrol
   Playfair (headlines/quotes) · Clash (headings/highlights) ·
   Space Grotesk (UI) · Sora (body) · Syne (rubrics/kickers).
   Terracotta = primary · Goldocker = secondary · Petrol = accent/links.
   ===================================================== */
:root{--on-accent:#FFFFFF; --focus:var(--blau);}
html[data-theme="dark"]{--focus:var(--hover);}

/* — Typography roles — */
.kicker{font-family:var(--f-accent) !important;font-weight:700;letter-spacing:.22em;}
.material-title,.fact h4,.gloss-card h4,.tip-card h4,
.hub-card h4,.rail-place,.lehrplan-title,.teach-cat .tc-t,.pp-q,.inne-k{font-family:var(--f-head) !important;}
.display,.d-xl,.d-lg,.d-md,.h2-it,.yearnum,.brand .l1,.brand .l2{font-family:var(--f-display) !important;}
.lede,.quote,.kq,blockquote,.auth-q{font-family:var(--f-quote) !important;}
.lede{font-family:var(--f-body) !important;}
/* Cormorant is delicate — floor the weight + size so quotes stay legible */
.quote,.kq,blockquote,.auth-q,.emo,.mission-q,.inne-q{font-weight:600;letter-spacing:.005em;}
body,.body-l,p,li,.rail-text,.material-desc{font-family:var(--f-body);}
.nav-links .link,.btn,.gtab,.qn-toggle,.quick-nav a,.sb-label,.tab,.fbtn,.dopt .ot{font-family:var(--f-ui) !important;}

/* — Primary buttons: Coral fill with DARK text (white-on-coral fails contrast); hover → amber — */
.btn,
html[data-theme="dark"] .btn{background:var(--amber) !important;color:#1A120A !important;font-weight:700;letter-spacing:.01em;
  box-shadow:0 8px 22px -14px color-mix(in oklab,var(--amber) 80%,transparent);}
.btn:hover,
html[data-theme="dark"] .btn:hover{background:var(--hover) !important;color:#1A120A !important;transform:translateY(-2px);}
.btn.ghost{background:transparent !important;color:var(--ink) !important;border:2px solid var(--ink);box-shadow:none;}
.btn.ghost:hover{background:var(--ink) !important;color:var(--pergament) !important;}
html[data-theme="dark"] .btn.ghost{background:transparent !important;color:var(--ink) !important;border:2px solid rgba(245,242,234,.5) !important;}
html[data-theme="dark"] .btn.ghost:hover{background:var(--ink) !important;color:var(--pergament) !important;border-color:var(--ink) !important;}

/* selection + focus = coral fill, dark text */
::selection{background:var(--amber);color:#1A120A;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;border-radius:4px;}

/* interactive accents in DARK — coral fills carry DARK text */
html[data-theme="dark"] .nav-links .link::after{background:var(--amber);}
html[data-theme="dark"] .gtab.on{background:var(--amber) !important;color:#1A120A !important;border-color:var(--amber) !important;}
html[data-theme="dark"] .quick-nav a.active,html[data-theme="dark"] .quick-nav button.active{color:var(--hover) !important;}
html[data-theme="dark"] .quick-nav a:hover,html[data-theme="dark"] .quick-nav button:hover,
html[data-theme="dark"] .quick-nav .qn-toggle:hover,
html[data-theme="dark"] .member .tag.live,
html[data-theme="dark"] .tf-btn.next:hover,
html[data-theme="dark"] .fbtn.on,html[data-theme="dark"] .opt-pill.on{background:var(--amber) !important;color:#1A120A !important;}
/* progress / xp bars → coral→amber fill */
#xpFill,#pbarFill,.lm-fill,.topbar i,#topfill{background:linear-gradient(90deg,var(--amber),var(--gold)) !important;}
html[data-theme="dark"] .learn-chk.done .lc-box{background:var(--ok);border-color:var(--ok);}

/* the "Weiter" quiz button → coral with dark text */
html[data-theme="dark"] .tf-btn.next,.tf-btn.next{background:var(--amber) !important;color:#1A120A !important;border-color:var(--amber) !important;}
html[data-theme="dark"] .gmaps-btn{color:#1A120A !important;}

/* kicker colour: readable coral(light)/coral(dark); .b → heading tone */
.kicker{color:var(--amber-d);}
html[data-theme="dark"] .kicker{color:var(--amber);}
html[data-theme="dark"] .kicker.b{color:var(--heading);}

/* sidebar top accent line → coral→amber→aqua sweep */
.sidebar::after{background:linear-gradient(90deg,var(--amber),var(--gold),var(--blau)) !important;}

/* hero / section gradient sheen: slow coral→amber→aqua→violet wash behind headers (never behind body copy) */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;opacity:.5;
  background:linear-gradient(120deg,#C8811A,#3B5A8C,#B5462F,#3B5A8C,#3B5A8C,#C8811A);background-size:300% 300%;animation:heroFlow 24s ease-in-out infinite;}
@keyframes heroFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* =====================================================
   29. FOOTER-INFO MODAL — Datenschutz / Impressum / Quellen / Kontakt
   ===================================================== */
.foot-legal button{font-family:var(--f-mono);font-size:13px;text-align:left;color:#cfc4b2;background:none;border:none;padding:0;cursor:pointer;transition:color .2s;width:fit-content;}
.foot-legal button:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.footmodal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(12,9,6,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s;}
.footmodal.on{opacity:1;pointer-events:auto;}
.footmodal-panel{position:relative;width:min(680px,100%);max-height:86vh;overflow:auto;background:var(--pergament-3);
  border:1px solid var(--line);border-radius:20px;padding:clamp(26px,4vw,46px);box-shadow:0 40px 90px -30px rgba(0,0,0,.5);
  transform:translateY(16px) scale(.98);transition:transform .35s cubic-bezier(.22,.61,.36,1);overscroll-behavior:contain;}
.footmodal.on .footmodal-panel{transform:none;}
.footmodal-x{position:absolute;top:16px;right:18px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--pergament-2);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;transition:background .2s,transform .2s;}
.footmodal-x:hover{background:var(--amber);color:#fff;transform:rotate(90deg);}
.footmodal-body{margin-top:14px;color:var(--ink);}
.footmodal-body p{font-family:var(--f-body);font-size:15.5px;line-height:1.7;color:var(--ink-soft);margin:0 0 14px;}
.footmodal-body h4{font-family:var(--f-head);font-size:16px;color:var(--ink);margin:22px 0 7px;letter-spacing:.01em;}
.footmodal-body ul{margin:0 0 14px;padding-left:20px;}
.footmodal-body li{font-family:var(--f-body);font-size:15px;line-height:1.65;color:var(--ink-soft);margin-bottom:5px;}
.footmodal-body a{color:var(--link);text-decoration:underline;text-underline-offset:2px;}
.footmodal-body a:hover{color:var(--hover);}
.footmodal-body b{color:var(--ink);font-weight:700;}
.footmodal-body .fm-note{font-style:italic;font-size:13.5px;color:var(--ink-soft);opacity:.85;margin-top:18px;}
.footmodal-body .fm-mut{color:var(--ink-soft);opacity:.8;font-size:13.5px;}
@media(max-width:600px){.footmodal{padding:0;align-items:flex-end;}.footmodal-panel{border-radius:20px 20px 0 0;max-height:92vh;}}
@media(prefers-reduced-motion:reduce){.hero::after{animation:none;}}

/* =====================================================
   30. ANIMATED GRADIENT HEADINGS — ONLY page-level headings.
   --head-grad: dark saturated stops on light bg, bright stops on dark bg.
   ===================================================== */
@keyframes headingFlow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
:root{
  /* moving heading gradient — DESIGN SYSTEM palette (Tinte · Slate Blue · Amber · warm) */
  --head-grad:linear-gradient(100deg,#1A120A 0%,#3B5A8C 24%,#B87010 50%,#5A3E28 74%,#1A120A 100%);
  --head-grad-bright:linear-gradient(100deg,#F0E8D5 0%,#E3A94A 27%,#8FB0D9 53%,#F0D9A6 80%,#F0E8D5 100%);
}
html[data-theme="dark"]{ --head-grad:var(--head-grad-bright); }
.hero, footer, body.epoch-war{ --head-grad:var(--head-grad-bright); }

/* EVERY heading on EVERY page/subpage gets the moving gradient:
   in-app section/chapter titles, editorial scene + step headings, intro,
   onboarding, and the standalone Karte/Archiv page titles. */
.display,.d-xl,.d-lg,.d-md,.chap-hd h2,
.map-title h1,.page-hd h1,
.intro h2,.scene-body h3,.step h3,.onb-title,.sec h3.display,.group-card h3{
  background-image:var(--head-grad) !important;
  background-size:300% auto !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  letter-spacing:.002em;word-spacing:.02em;
  line-height:1.12 !important;padding-bottom:.1em;
  animation:headingFlow 7s linear infinite !important;
}
/* game-inspired typography split: Impact titles = Barlow Condensed UPPERCASE;
   emotional scene/intro headlines = Playfair Display (Johannes' "Stimme"). */
.display,.d-xl,.d-lg,.d-md,.chap-hd h2,.chap-hd h1,
.map-title h1,.page-hd h1,.onb-title{
  font-family:var(--f-display) !important;
  text-transform:uppercase !important;
  font-weight:800 !important;
  letter-spacing:.014em !important;word-spacing:normal !important;
  line-height:1.02 !important;
}
.scene-body h3,.step h3,.intro h2,.sec h3.display,.group-card h3{
  font-family:var(--f-emo) !important;
  text-transform:none !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  line-height:1.16 !important;
}
.map-title h1 .accent,.map-title h1 .w,.page-hd h1 .accent,.page-hd h1 .w{
  color:inherit !important;-webkit-text-fill-color:transparent !important;background:none;}
/* HERO title: SOLID cream (every letter always renders — no clip:text).
   Motion comes from a SAFE color pulse on the accent word, which can never
   break glyphs. */
.hero h1,.hero-big{mix-blend-mode:normal !important;background:none !important;}
.hero-big .blk{
  background:none !important;
  -webkit-text-fill-color:#F0E8D5 !important;color:#F0E8D5 !important;
  text-shadow:0 2px 20px rgba(0,0,0,.62) !important;
  animation:heroGlow 5.5s ease-in-out infinite !important;
}
.hero-big .blk:nth-child(2){animation-delay:.5s !important;}
.hero-big .blk:nth-child(3){animation-delay:1s !important;}
@keyframes heroGlow{0%,100%{text-shadow:0 2px 20px rgba(0,0,0,.62);}50%{text-shadow:0 2px 30px rgba(255,194,51,.45),0 2px 20px rgba(0,0,0,.62);}}
.hero-big .accent{
  -webkit-text-fill-color:#E6A23C !important;color:#E6A23C !important;
  animation:heroAccent 4.5s ease-in-out infinite !important;
}
@keyframes heroAccent{0%,100%{-webkit-text-fill-color:#E6A23C;color:#E6A23C;}50%{-webkit-text-fill-color:#EFC06A;color:#EFC06A;}}
@media(prefers-reduced-motion:reduce){
  .hero-big .blk,.hero-big .accent{animation:none !important;}
}
/* fallback if background-clip:text is unsupported → solid readable colour */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .display,.d-xl,.d-lg,.d-md,.chap-hd h2,
  .intro h2,.scene-body h3,.step h3,.onb-title,.group-card h3{
    -webkit-text-fill-color:currentColor;color:var(--heading);background:none;}
}
@media(prefers-reduced-motion:reduce){
  .display,.d-xl,.d-lg,.d-md,.chap-hd h2{animation:none;}
}

/* =====================================================
   31. ONBOARDING — section on the HOME page, under the hero
   ===================================================== */
.onb-view{position:relative;z-index:2;padding:clamp(70px,10vh,130px) 24px clamp(70px,10vh,130px);
  background:linear-gradient(180deg,var(--pergament) 0%,var(--pergament-2) 100%);border-top:1px solid var(--line);}
html[data-theme="dark"] .onb-view{background:linear-gradient(180deg,#100D06 0%,#121a30 100%);}
.onb-wrap{max-width:920px;margin:0 auto;}
.onb-head{margin-bottom:clamp(36px,5vh,56px);}
.onb-title{margin:14px 0 0;line-height:1.0;}
.onb-intro{font-family:var(--f-body);font-size:clamp(16px,1.9vw,20px);line-height:1.7;color:var(--ink-soft);margin-top:20px;max-width:62ch;}
.onb-intro b{color:var(--ink);}

.onb-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;perspective:1100px;}
@media(max-width:680px){ .onb-steps{grid-template-columns:1fr;} }
.onb-step{position:relative;display:block;border:1px solid var(--line);border-radius:18px;padding:26px 24px 24px;overflow:hidden;
  color:var(--ink);transform-style:preserve-3d;cursor:default;
  background:linear-gradient(150deg,var(--pergament) 0%,var(--pergament-2) 100%);
  box-shadow:0 14px 30px -26px rgba(20,15,8,.5);transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;}
html[data-theme="dark"] .onb-step{background:linear-gradient(150deg,#1C1812 0%,#241D14 100%);border-color:rgba(255,255,255,.12);}
.onb-step:hover{border-color:var(--amber);box-shadow:0 34px 60px -30px rgba(20,15,8,.55);}
.onb-step .hc-glow{position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),rgba(224,123,46,.22),transparent 60%);}
.onb-step:hover .hc-glow{opacity:1;}
.onb-num{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;
  font-family:var(--f-display);font-weight:800;font-size:26px;color:#fff;
  background:linear-gradient(135deg,var(--amber),var(--feldrot));
  transform:translateZ(40px);box-shadow:0 14px 26px -10px var(--amber),inset 0 2px 0 rgba(255,255,255,.35);
  text-shadow:0 2px 4px rgba(0,0,0,.3);}
.onb-body{margin-top:14px;}
.onb-body h4{font-family:var(--f-head);font-weight:800;font-size:21px;margin:0 0 6px;color:var(--ink);transform:translateZ(22px);}
html[data-theme="dark"] .onb-body h4{color:#fff;}
.onb-body p{font-size:13.5px;line-height:1.5;color:var(--ink-soft);transform:translateZ(14px);margin:0;}
html[data-theme="dark"] .onb-body p{color:#D9D9D9;}
.onb-body b{color:var(--ink);}
html[data-theme="dark"] .onb-body b{color:#fff;}

.onb-note{margin-top:clamp(26px,3.4vh,40px);padding:clamp(24px,3vw,34px);border-radius:18px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in oklab,var(--blau) 14%,var(--pergament-3)),var(--pergament-3));border:1px solid var(--line);}
.onb-note h3{font-family:var(--f-head);font-size:clamp(17px,2vw,21px);color:var(--ink);margin:0 0 10px;}
.onb-note p{font-family:var(--f-body);font-size:clamp(14px,1.5vw,16px);line-height:1.64;color:var(--ink-soft);margin:0;max-width:64ch;}
.onb-note b{color:var(--ink);}

.onb-cta{margin-top:clamp(34px,5vh,52px);text-align:center;}
.onb-go{font-size:clamp(16px,1.8vw,19px);padding:18px 38px;background:linear-gradient(120deg,var(--amber),var(--feldrot),var(--amber)) !important;background-size:200% auto !important;color:#fff !important;border:none !important;
  box-shadow:0 16px 34px -16px var(--feldrot);transition:transform .25s,background-position .5s,box-shadow .25s;animation:onbGo 5s linear infinite;}
@keyframes onbGo{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.onb-go:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 22px 44px -16px var(--feldrot);}
.onb-fine{margin-top:18px;font-family:var(--f-body);font-size:13.5px;line-height:1.6;color:var(--ink-soft);}
.onb-fine b{color:var(--ink);}
@media(prefers-reduced-motion:reduce){ .onb-step::before,.onb-num,.onb-go{animation:none;} .onb-step{opacity:1;transform:none;} }

/* =====================================================
   32. PROFILE — per-chapter progress thermometers
   ===================================================== */
.chap-therms{display:flex;flex-direction:column;gap:14px;margin-top:6px;}
.therm-row{display:flex;align-items:center;gap:12px;}
.therm-name{flex:0 0 auto;width:128px;font-family:var(--f-ui);font-weight:700;font-size:13px;color:var(--ink);}
.therm-name small{display:block;font-weight:500;font-size:11px;color:var(--ink-soft);}
.therm-track{position:relative;flex:1 1 auto;height:16px;border-radius:20px;background:var(--pergament-3);border:1px solid var(--line);overflow:hidden;}
.therm-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:20px;transition:width .8s cubic-bezier(.16,1,.3,1),background .4s;}
.therm-fill.lvl-red{background:linear-gradient(90deg,#E0654F,#E07B5A);}
.therm-fill.lvl-yellow{background:linear-gradient(90deg,#C8811A,#E09B35);}
.therm-fill.lvl-green{background:linear-gradient(90deg,#2FA565,#34D17F);}
.therm-pct{flex:0 0 auto;width:42px;text-align:right;font-family:var(--f-ui);font-weight:800;font-size:13px;color:var(--ink);}
.therm-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-family:var(--f-ui);font-size:11.5px;color:var(--ink-soft);}
.therm-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px;}

/* =====================================================
   33. GAMES feedback popup (after all games completed)
   ===================================================== */
.gfb-stars{display:flex;gap:8px;justify-content:center;margin:14px 0 6px;}
.gfb-star{font-size:30px;line-height:1;cursor:pointer;color:var(--line);transition:transform .15s,color .2s;background:none;border:none;padding:0;}
.gfb-star.on,.gfb-star:hover{color:var(--amber);transform:scale(1.12);}
.gfb-field{width:100%;min-height:96px;resize:vertical;font-family:var(--f-body);font-size:14px;line-height:1.5;
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--pergament-3);color:var(--ink);margin-top:8px;}
.gfb-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.gfb-chip{font-family:var(--f-ui);font-weight:600;font-size:12.5px;padding:7px 13px;border-radius:30px;border:1px solid var(--line);background:var(--pergament-2);color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.gfb-chip.on{background:var(--blau);color:#fff;border-color:var(--blau);}
.gfb-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}

/* =====================================================
   34. MINI-MENU (quick-nav) — authoritative, robust open/close
   Overrides all earlier tangled .quick-nav rules. Uses display
   none/flex for the items (no fragile max-width animation).
   ===================================================== */
#quickNav.quick-nav{position:fixed !important;left:50% !important;right:auto !important;
  transform:translateX(-50%) !important;bottom:18px !important;z-index:95 !important;
  display:none;align-items:center !important;gap:8px !important;flex-wrap:nowrap !important;
  max-width:min(94vw,900px) !important;padding:7px !important;border-radius:44px !important;
  background:var(--pergament-2) !important;border:1px solid var(--line) !important;
  box-shadow:0 20px 46px -22px rgba(0,0,0,.5) !important;
  overflow:visible !important;}
#quickNav.quick-nav.qn-show{display:flex !important;}
html[data-theme="dark"] #quickNav.quick-nav{background:#1C1812 !important;border-color:rgba(255,255,255,.18) !important;}

#quickNav .qn-toggle{display:inline-flex !important;align-items:center;gap:9px;flex:0 0 auto;
  font-family:var(--f-ui);font-weight:800;font-size:13.5px;letter-spacing:.03em;
  padding:12px 20px;border-radius:32px;border:none;cursor:pointer;white-space:nowrap;
  background:var(--amber) !important;color:#1A120A !important;transition:transform .2s,filter .2s;animation:none !important;}
#quickNav .qn-toggle::before{content:none !important;}
#quickNav .qn-toggle:hover{transform:translateY(-1px);filter:brightness(1.05);}
#quickNav .qn-ico{font-size:15px;line-height:1;}

#quickNav .qn-items{display:none !important;align-items:center;gap:7px;overflow-x:auto;
  max-width:min(78vw,700px);padding:2px;scrollbar-width:thin;}
#quickNav.qn-open .qn-items{display:flex !important;}

#quickNav .qn-btn,#quickNav .qn-link{display:inline-flex;align-items:center;flex:0 0 auto;
  font-family:var(--f-ui);font-weight:700;font-size:13px;letter-spacing:.01em;
  padding:11px 16px;border-radius:30px;border:1px solid var(--line);cursor:pointer;
  white-space:nowrap;text-decoration:none;background:var(--pergament) !important;color:var(--ink) !important;
  transition:background .2s,color .2s,border-color .2s,transform .15s;}
html[data-theme="dark"] #quickNav .qn-btn,html[data-theme="dark"] #quickNav .qn-link{background:#2A2318 !important;border-color:rgba(255,255,255,.16) !important;}
#quickNav .qn-btn:hover,#quickNav .qn-link:hover{background:var(--blau) !important;color:#fff !important;border-color:var(--blau) !important;transform:translateY(-2px);}
#quickNav .qn-btn.active{background:var(--amber) !important;color:#1A120A !important;border-color:var(--amber) !important;}
@media(max-width:600px){ #quickNav .qn-items{max-width:62vw;} #quickNav .qn-toggle{padding:11px 16px;} }

/* =====================================================
   34. UNIFIED TYPE SYSTEM — one consistent scale + whitespace rhythm.
   Exactly THREE text roles site-wide:
     · page heading (section/chapter titles)   — one size
     · sub-heading (cards, scenes, blocks)      — one size
     · body copy                                — one size
   Plus a single "lede/intro" size and the kicker. Tuned for 16–18 yr olds:
   confident but not oversized, generous breathing room.
   ===================================================== */
:root{
  --t-h:clamp(34px,4.4vw,58px);     /* page/section heading */
  --t-sub:clamp(21px,2vw,26px);     /* sub-heading — a touch larger, more presence */
  --t-body:clamp(16px,1.05vw,17.5px);/* body copy */
  --t-lede:clamp(18px,1.7vw,21px);  /* lede / intro */
  --t-quote:clamp(17px,1.55vw,21px);/* every pull-quote, one size site-wide — smaller, calmer */
  --lh-body:1.72;
}
/* — quotes: ONE size everywhere (pull-quotes, kinetic, author, mission) — */
.quote,.kq,.kq[data-kinetic],blockquote,.auth-q,.emo,.mission-q,.inne-q,.scene .quote{
  font-size:var(--t-quote) !important;
  line-height:1.38 !important;
  letter-spacing:.004em;
}
/* — page/section headings: one size everywhere — */
.display,.d-md,.chap-hd h2,.chap-hd h1,
.page-hd h1,.intro h2,.onb-title{
  font-size:var(--t-h) !important;
  line-height:1.08 !important;
  letter-spacing:.004em !important;
  word-spacing:.05em !important;
  margin-top:0;
}
.d-lg{ font-size:clamp(40px,5vw,68px) !important; }   /* only the rare extra-large display */

/* — sub-headings: one size everywhere — */
.scene-body h3,.fact h4,.gloss-card h4,.material-title,.tip-card h4,
.hub-card h4,.onb-body h3,.onb-note h3,.intro h3,.teach-cat .tc-t,
.lehrplan-title,.cn-card .cn-title,.pp-q,.decision .dq,.sec h3.display,
.drawer-hd .nm{
  font-size:var(--t-sub) !important;
  line-height:1.32 !important;
  letter-spacing:.005em;
}
/* — body copy: one size everywhere — */
body,p,li,.body-l,.material-desc,.rail-text,.onb-body p,.onb-note p,
.gloss-card p,.fact p,.tip-card p,.cn-card p,.decision .dctx,.hub-card p{
  font-size:var(--t-body) !important;
  line-height:var(--lh-body) !important;
}
/* — lede / intro paragraphs — */
.lede,.onb-intro,.chap-hd .lede{
  font-size:var(--t-lede) !important;
  line-height:1.62 !important;
}
/* small print stays small but consistent */
.caption,.docref,.mnote,.onb-fine,.therm-legend,.rail-src{font-size:13px !important;line-height:1.55 !important;}

/* — WHITESPACE rhythm — more air throughout (works on phone→beamer) — */
.kicker{margin-bottom:18px !important;display:inline-flex;}
.center .kicker,.chap-hd .kicker,.page-hd .kicker,.onb-head .kicker{margin-bottom:22px !important;}
.display + .lede,.d-md + .lede,h2 + .lede,.onb-title + .onb-intro{margin-top:26px !important;}
.sec .wrap > .center{margin-bottom:clamp(54px,7vh,88px);}
/* paragraph spacing inside long-form blocks */
.scene-body p + p,.onb-body p + p,.gloss-card p + p,.rail-text + .rail-text,
.decision .dctx p + p{margin-top:1.3em;}
/* readable measure: never let body lines run too wide */
.scene-body p,.onb-body p,.onb-note p,.decision .dctx,.lede,.body-l{max-width:64ch;}
.center .lede,.onb-head .onb-intro{max-width:60ch;}
/* a touch more room around section headings */
.scene-body h3,.fact h4,.gloss-card h4,.material-title{margin-bottom:16px !important;}
/* more breathing room: scenes, quotes, fact boxes, section padding */
.scene{margin-bottom:clamp(64px,11vh,150px) !important;}
.scene-body .auth-q,.scene-body blockquote{margin-top:28px !important;margin-bottom:28px !important;}
.scene-body .fact,.fact-row{margin-top:clamp(28px,4vh,44px) !important;}
.sec{padding-top:clamp(40px,8vh,104px) !important;padding-bottom:clamp(40px,8vh,104px) !important;}
.chap-hd{padding-bottom:clamp(28px,5vh,56px) !important;}
.hub-card,.gloss-card{padding:clamp(24px,2.4vw,32px) !important;}
.compare,.decision{padding:clamp(24px,2.6vw,36px) !important;}
.lede{margin-top:22px !important;}

/* =====================================================
   UNIFIED QUOTES — Johannes' Stimme: one consistent voice
   (Merriweather italic · gold · gleiche Größe · gleicher Akzent)
   ===================================================== */
.scene-body .auth-q,.mission-q,.chap-hd .emo,.compare .mem q,
.scene-body blockquote,.kq{
  font-family:var(--f-quote) !important;
  font-style:italic !important;
  font-weight:400 !important;
  color:var(--amber-d) !important;
  line-height:1.5 !important;
  letter-spacing:0 !important;
}
html[data-theme="dark"] .scene-body .auth-q,
html[data-theme="dark"] .mission-q,
html[data-theme="dark"] .chap-hd .emo,
html[data-theme="dark"] .compare .mem q,
html[data-theme="dark"] .scene-body blockquote{color:var(--amber) !important;}
/* one reading size for in-flow quotes; left rule in gold */
.scene-body .auth-q,.mission-q,.compare .mem q{
  font-size:clamp(19px,1.9vw,23px) !important;
  border-left:3px solid var(--amber) !important;
  padding-left:20px !important;
}
.chap-hd .emo{font-size:clamp(20px,2.4vw,28px) !important;border-left:0 !important;}
/* citation line stays a quiet, uniform mono caption */
.auth-q cite,.mission-q cite,.kq cite{
  font-family:var(--f-mono) !important;font-style:normal !important;
  font-size:12px !important;font-weight:400 !important;letter-spacing:.01em !important;
  color:var(--ink-soft) !important;display:block;margin-top:10px;
}

/* =====================================================
   35. REALTIME CLASSROOM — status, room card, QR, live poll, team quiz
   ===================================================== */
.rt-status{display:flex;align-items:center;gap:10px;justify-content:center;font-family:var(--f-ui);font-size:13px;
  color:var(--ink-soft);background:var(--pergament-2);border:1px solid var(--line);border-radius:30px;padding:10px 18px;max-width:760px;margin:0 auto;}
.rt-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.rt-dot.ok{background:#34D17F;box-shadow:0 0 0 4px rgba(52,209,127,.18);}
.rt-dot.local{background:var(--amber);box-shadow:0 0 0 4px rgba(244,163,0,.18);}

.room-card{display:block !important;}
.room-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;}
.room-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;}
.qr-box{background:#fff;padding:10px;border-radius:12px;width:148px;height:148px;display:grid;place-items:center;box-shadow:0 8px 22px -12px rgba(0,0,0,.4);}
.qr-box img,.qr-box canvas{display:block;width:128px;height:128px;}
.qr-fallback{font-family:var(--f-display);font-weight:900;font-size:34px;color:#1A120A;letter-spacing:.05em;}
.member .tag.tm{color:#fff;padding:1px 7px;border-radius:20px;font-size:10px;margin-left:4px;}
.member{--tc:#888;border-left:3px solid var(--tc);}

.cl-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);margin-top:30px;align-items:start;}
@media(max-width:820px){ .cl-grid{grid-template-columns:1fr;} .room-top{flex-direction:column;align-items:center;text-align:center;} }
.cl-col{background:var(--pergament-2);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,2vw,26px);}
.cl-h{margin:0 0 14px !important;text-align:left;}
.cl-note{font-family:var(--f-body);font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0 0 14px;}

/* poll pick + live */
.poll-pick{display:flex;flex-direction:column;gap:10px;}
.poll-opt{font-family:var(--f-ui);font-weight:600;font-size:14px;text-align:left;padding:13px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--pergament-3);color:var(--ink);cursor:pointer;transition:border-color .2s,transform .15s,background .2s;}
.poll-opt:hover{border-color:var(--blau);transform:translateY(-2px);}
.poll-q{font-family:var(--f-quote);font-style:italic;font-size:19px;line-height:1.35;color:var(--ink);margin-bottom:14px;}
.poll-buttons{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.poll-vote{flex:1 1 0;min-width:120px;font-family:var(--f-ui);font-weight:700;font-size:14px;padding:14px 12px;border-radius:12px;
  border:2px solid var(--blau);background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,transform .15s;}
.poll-vote:hover{background:var(--blau);color:#fff;transform:translateY(-2px);}
.poll-meta{font-family:var(--f-ui);font-size:12px;color:var(--ink-soft);margin-top:10px;}
.poll-host-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}

/* team quiz */
.tq-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-ui);font-weight:700;font-size:13px;color:var(--ink-soft);margin-bottom:10px;}
.tq-mini{color:var(--ink);}
.tq-q{font-family:var(--f-head);font-size:18px;line-height:1.35;color:var(--ink);margin-bottom:14px;}
.tq-opts{display:flex;flex-direction:column;gap:9px;}
.tq-opt{font-family:var(--f-ui);font-weight:600;font-size:14px;text-align:left;padding:13px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--pergament-3);color:var(--ink);cursor:pointer;transition:border-color .2s,transform .15s,background .2s;}
.tq-opt:hover:not([disabled]){border-color:var(--amber);transform:translateY(-2px);}
.tq-opt[disabled]{cursor:default;opacity:.85;}
.tq-opt.correct{background:rgba(52,209,127,.16);border-color:#34D17F;color:var(--ink);}
.tq-opt.wrong{background:rgba(214,40,57,.14);border-color:#B5462F;}
.tq-locked{font-family:var(--f-ui);font-weight:700;font-size:13px;margin-top:12px;color:var(--ink);}
.tq-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--f-ui);font-size:12px;color:var(--ink-soft);margin-top:14px;}
.tq-result{display:flex;align-items:center;justify-content:center;gap:22px;margin:16px 0 8px;}
.tq-score{display:flex;flex-direction:column;align-items:center;gap:4px;}
.tq-score .tq-t{font-family:var(--f-ui);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tc);}
.tq-score b{font-family:var(--f-display);font-weight:900;font-size:40px;color:var(--ink);line-height:1;}
.tq-vs{font-family:var(--f-display);font-size:26px;color:var(--ink-soft);}
.tq-winner{text-align:center;font-family:var(--f-head);font-weight:700;font-size:18px;color:var(--ink);margin-top:6px;}

/* team pick on join */
.team-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.team-q{font-family:var(--f-ui);font-size:13px;color:var(--ink-soft);}
.team-opt{--tc:#888;font-family:var(--f-ui);font-weight:700;font-size:13px;padding:9px 14px;border-radius:30px;
  border:2px solid var(--tc);background:transparent;color:var(--ink);cursor:pointer;opacity:.6;transition:opacity .2s,background .2s,color .2s;}
.team-opt.on{opacity:1;background:var(--tc);color:#fff;}

/* §ALT — Lehrkräfte page trimmed: hide lesson-plan accordion; game-control callout */
#didaktik .lehrplan-wrap{display:none !important;}
.teach-games{margin-top:8px;}
.tg-card{display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  background:linear-gradient(135deg,color-mix(in oklab,var(--amber) 16%,var(--pergament-3)),var(--pergament-3));
  border:1px solid color-mix(in oklab,var(--amber) 30%,var(--line));border-radius:20px;padding:clamp(20px,2.4vw,30px);}
.tg-ic{width:42px;height:42px;line-height:1;flex:0 0 auto;}
.tg-body{flex:1 1 320px;}
.tg-body h3{font-family:var(--f-head);font-size:var(--t-sub) !important;color:var(--ink);margin:0 0 8px;}
.tg-body p{font-family:var(--f-body);font-size:var(--t-body) !important;line-height:1.6;color:var(--ink-soft);margin:0 0 14px;max-width:60ch;}
.tg-body b{color:var(--ink);}
.tg-go{background:var(--amber) !important;color:#fff !important;}

/* §QUOTES — remove the vertical side bars on quotes site-wide (calmer look) */
.scene-body .auth-q,.auth-q,.psaved,blockquote,.compare q,.mission-q,.inne-q{
  border-left:0 !important;padding-left:0 !important;
}
.scene-body .auth-q{margin:24px 0 !important;}
/* worksheet blockquote keeps a clean look without the left rule */
.worksheet-task blockquote{border-radius:10px !important;background:var(--pergament-2) !important;padding:14px 18px !important;}

/* §PERSPECTIVE — Johannes' first-person recollection block */
.perspective{background:linear-gradient(135deg,color-mix(in oklab,var(--feldrot) 12%,var(--pergament-2)),var(--pergament-2));
  border:1px solid color-mix(in oklab,var(--feldrot) 28%,var(--line));border-radius:18px;padding:clamp(24px,3vw,38px);}
.perspective .persp-body{margin:14px 0 12px;}
.perspective .persp-body p{margin:0 0 14px;}
.perspective .persp-body p:last-child{margin-bottom:0;}
.perspective .docref{display:block;}

/* §FACT-ROW — three context cards side by side, left-aligned under the scene */
.fact-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;margin-left:0;margin-right:0;}
@media(max-width:880px){ .fact-row{grid-template-columns:1fr;} }
.fact-row .fact{margin:0 !important;max-width:none !important;height:100%;display:flex;flex-direction:column;}
.fact-row .fact p{flex:1 1 auto;}
/* youth-friendly: a little lift + accent on hover, keeps it lively for 16–18 yr olds */
.fact{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s;}
.fact:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(20,15,8,.5);border-color:color-mix(in oklab,var(--amber) 45%,var(--line));}
html[data-theme="dark"] .fact:hover{box-shadow:0 18px 44px -22px rgba(0,0,0,.7);}

/* =====================================================
   36. POLISH LAYER v2 — youth-friendly redesign (16–18)
   Calmer surfaces (soft cards, no hard frames) · tactile
   microinteractions · social-media reward feel.
   This is the authoritative final layer; it supersedes
   earlier card/border/shadow rules.
   ===================================================== */
:root{
  --r-card:20px;                 /* uniform soft corner */
  --r-pill:32px;
  --shadow-soft:0 8px 26px -16px rgba(20,15,8,.28), 0 2px 8px -4px rgba(20,15,8,.10);
  --shadow-pop:0 22px 48px -22px rgba(20,15,8,.40), 0 6px 16px -8px rgba(20,15,8,.16);
  --hairline:color-mix(in oklab, var(--ink) 7%, transparent);
  --press:.97;
}
html[data-theme="dark"]{
  --shadow-soft:0 10px 30px -16px rgba(0,0,0,.62), 0 2px 8px -4px rgba(0,0,0,.4);
  --shadow-pop:0 24px 54px -22px rgba(0,0,0,.78), 0 6px 16px -8px rgba(0,0,0,.5);
  --hairline:rgba(255,255,255,.07);
}

/* (a) CLEANER — one soft, consistent card surface everywhere.
   Hard 1px frames become a whisper hairline; depth comes from
   calm, layered shadows instead. Generous, uniform radius. */
.hub-card,.gloss-card,.material-card,.cn-card,.tip-card,.onb-step,
.cl-col,.group-card,.fact,.tg-card,.wall-card,.qcard,.rcard,
.learn-meter,.curriculum-pill,.lehrplan-item,.pstat,.badge-item,
.gfb-field,.bio-display,.rt-status,.games-rec{
  border:1px solid var(--hairline) !important;
  border-radius:var(--r-card) !important;
  box-shadow:var(--shadow-soft);
}
/* keep the few meaningful colour accents, but soft + rounded */
.fact{border-left:3px solid color-mix(in oklab,var(--schiefer) 60%,transparent) !important;}
.fact.ns{border-left-color:color-mix(in oklab,var(--feldrot) 60%,transparent) !important;}
.gloss-card{border-left:3px solid color-mix(in oklab,var(--amber) 80%,transparent) !important;}
.wall-card{border-top:3px solid color-mix(in oklab,var(--amber) 75%,transparent) !important;}
.wall-card.you{border-top-color:color-mix(in oklab,var(--schiefer) 75%,transparent) !important;}
.compare,.decision{border:0 !important;border-radius:var(--r-card) !important;box-shadow:var(--shadow-pop);}
.pstat,.badge-item,.curriculum-pill,.rt-status{border-radius:14px !important;}
.learn-chk{border-radius:var(--r-pill) !important;}

/* more air: roomier grids + a touch more padding inside cards */
.hub{gap:clamp(20px,2.2vw,28px) !important;margin-top:clamp(40px,5vh,52px) !important;}
.gloss-grid{gap:clamp(18px,2vw,24px) !important;}
.material-grid{gap:clamp(20px,2.2vw,28px) !important;}
.hub-card{padding:28px 26px 26px !important;}
.gloss-card{padding:24px 24px !important;}
.material-card{padding:30px !important;}

/* (b) MICROINTERACTIONS — calm, springy, tactile.
   smooth transitions → gentle hover lift + soft shadow growth →
   real "press" sink on every tappable control. */
.btn,.hub-card,.gloss-card,.material-card,.cn-card,.tip-card,.group-card,
.fact,.tg-card,.wall-card,.dopt,.qopt,.learn-chk,.opt-pill,.chip-i,.role-opt,
.gloss-fil,.poll-opt,.poll-vote,.tq-opt,.gtab,.qn-btn,.qn-link,.team-opt,
.fbtn,.teach-cat,.gfb-chip,.gfb-star,.material-btn,.onb-go,.tg-go,
.rate button,.sw,.av-dice,.profile-chip,.badge-item{
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),
             background .22s,border-color .22s,color .22s !important;
  will-change:transform;
}
/* hover: lift + shadow grows softly */
.hub-card:hover,.gloss-card:hover,.cn-card:hover,.material-card:hover,
.tip-card:hover,.group-card:hover,.fact:hover,.tg-card:hover,.wall-card:hover{
  transform:translateY(-5px);box-shadow:var(--shadow-pop);
}
/* press: the whole control sinks (beats any hover transform) */
.btn:active,.hub-card:active,.gloss-card:active,.material-card:active,
.cn-card:active,.tip-card:active,.group-card:active,.fact:active,.tg-card:active,
.dopt:active,.qopt:active,.learn-chk:active,.opt-pill:active,.chip-i:active,
.role-opt:active,.gloss-fil:active,.poll-opt:active,.poll-vote:active,.tq-opt:active,
.gtab:active,.qn-btn:active,.qn-link:active,.team-opt:active,.fbtn:active,
.gfb-chip:active,.material-btn:active,.onb-go:active,.tg-go:active,.teach-cat:active,
.rate button:active,.sw:active{
  transform:scale(var(--press)) !important;
  box-shadow:var(--shadow-soft) !important;
}

/* (c) SOCIAL FEEL — a prominent, glowing level pill */
.profile-chip .lvl,.chip .lvl,.drawer-hd .lvl-badge{
  background:linear-gradient(135deg,var(--amber),var(--amber-l)) !important;
  color:#3a2600 !important;font-weight:800 !important;letter-spacing:.02em;
  padding:3px 12px !important;border-radius:var(--r-pill) !important;
  box-shadow:0 2px 10px -2px color-mix(in oklab,var(--amber) 75%,transparent);
  animation:lvlGlow 2.8s ease-in-out infinite;
}
@keyframes lvlGlow{
  0%,100%{box-shadow:0 2px 10px -2px color-mix(in oklab,var(--amber) 65%,transparent);}
  50%{box-shadow:0 2px 20px 1px color-mix(in oklab,var(--amber) 90%,transparent);}
}

/* XP / progress bars — soft amber glow so progress feels rewarding */
#xpFill,#pbarFill,.lm-fill,.topbar i,#topfill,.xpbar i,.pbar i,.therm-fill{
  box-shadow:0 0 12px -1px color-mix(in oklab,var(--amber) 75%,transparent),
             0 0 4px -1px color-mix(in oklab,var(--amber) 60%,transparent);
}
.therm-fill.lvl-green{box-shadow:0 0 12px -1px rgba(52,209,127,.7);}
.therm-fill.lvl-red{box-shadow:0 0 12px -1px rgba(230,57,70,.6);}
.xpbar,.pbar,.lm-track{border-radius:var(--r-pill) !important;}
.learn-meter.lm-complete .lm-fill{box-shadow:0 0 14px 0 rgba(52,209,127,.75);}

/* reward pulse + glow ring when a term is checked off */
.learn-chk.done .lc-box,.lc.done .lc-box{animation:rewardPop .55s var(--ease);}
.learn-chk.done{animation:rewardGlow .9s var(--ease);}
@keyframes rewardPop{0%{transform:scale(.4);}55%{transform:scale(1.3);}100%{transform:scale(1);}}
@keyframes rewardGlow{
  0%{box-shadow:0 0 0 0 rgba(31,138,91,.5);}
  60%{box-shadow:0 0 0 10px rgba(31,138,91,0);}
  100%{box-shadow:0 0 0 0 rgba(31,138,91,0);}
}

/* toast → a soft, rounded social snackbar with an icon chip */
.toast{
  border-radius:var(--r-pill) !important;
  box-shadow:var(--shadow-pop) !important;
  padding:13px 22px 13px 14px !important;
}
.toast .ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;font-size:15px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--amber),var(--amber-l));color:#3a2600 !important;
  box-shadow:0 2px 10px -2px color-mix(in oklab,var(--amber) 80%,transparent);
}

/* (d) RESPECT REDUCED MOTION — no movement, no glow pulses */
@media(prefers-reduced-motion:reduce){
  .hub-card:hover,.gloss-card:hover,.cn-card:hover,.material-card:hover,
  .tip-card:hover,.group-card:hover,.fact:hover,.tg-card:hover,.wall-card:hover,
  .btn:active,.hub-card:active,.gloss-card:active,.material-card:active,.cn-card:active,
  .dopt:active,.qopt:active,.learn-chk:active,.opt-pill:active,.poll-opt:active,
  .poll-vote:active,.tq-opt:active,.gtab:active,.qn-btn:active,.qn-link:active,
  .fbtn:active,.material-btn:active,.onb-go:active,.tg-go:active{
    transform:none !important;
  }
  .profile-chip .lvl,.chip .lvl,.drawer-hd .lvl-badge,
  .learn-chk.done,.learn-chk.done .lc-box{animation:none !important;}
}

/* =====================================================
   37. RARITY CARD BORDERS — Fortnite-style coloured top edge
   amber = persönlich/Erinnerung · blau = historisch · rot = NS-Kontext
   ===================================================== */
.fact{border-top:3px solid var(--schiefer) !important;}
.fact.ns{border-top:3px solid var(--feldrot) !important;}
.compare .mem,.rcard,.wall-card{border-top:3px solid var(--amber) !important;}
.compare .doc{border-top:3px solid var(--schiefer) !important;}
.gloss-card{border-top:3px solid var(--amber) !important;}
.material-card{border-top:3px solid var(--schiefer) !important;}

/* =====================================================
   38. RESPONSIVE FINE-TUNING — phone · tablet · beamer
   ===================================================== */
/* —— PHONE (≤560px) —— */
@media(max-width:560px){
  :root{ --gut:18px; }
  .wrap,.sec .wrap{padding-left:18px !important;padding-right:18px !important;}
  /* tame oversized display type so it never overflows narrow screens */
  .hero-big{font-size:clamp(40px,15vw,68px) !important;line-height:.96 !important;}
  .chap-hd h2{font-size:clamp(40px,15vw,74px) !important;}
  .display,.d-xl,.d-lg,.d-md{font-size:clamp(30px,9vw,46px) !important;}
  .scene-body h3,.step h3{font-size:clamp(24px,7vw,34px) !important;}
  /* reading quotes a touch smaller, full-width */
  .scene-body .auth-q,.mission-q,.compare .mem q{font-size:clamp(17px,4.6vw,20px) !important;}
  /* trim the big vertical rhythm so phones don't feel empty */
  .scene{margin-bottom:clamp(40px,8vh,70px) !important;}
  .sec{padding-top:clamp(34px,6vh,60px) !important;padding-bottom:clamp(34px,6vh,60px) !important;}
  /* grids collapse to one column */
  .hub,.material-grid,.gloss-grid{grid-template-columns:1fr !important;}
  .dopts,.cl-grid,.cn-grid{grid-template-columns:1fr !important;}
  /* keep tap targets comfortable */
  .btn,.qn-link,.gtab,.dopt,.poll-opt{min-height:46px;}
  /* hero meta wraps cleanly */
  .hero-eyebrow{flex-wrap:wrap;}
}
/* —— TABLET (561–1024px) —— */
@media(min-width:561px) and (max-width:1024px){
  .hub{grid-template-columns:repeat(2,1fr) !important;}
  .material-grid{grid-template-columns:repeat(2,1fr) !important;}
  .gloss-grid{grid-template-columns:repeat(2,1fr) !important;}
  .scene{gap:clamp(28px,4vw,48px) !important;}
}
/* —— BEAMER / large displays (≥1700px) —— */
@media(min-width:1700px){
  :root{ --maxw:1500px; }
  body{font-size:19px;}
  .scene-body p,.onb-body p,.lede,.body-l{max-width:68ch;}
  .hub{grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) !important;}
}
/* —— very tall, narrow phones: prevent hero clipping —— */
@media(max-height:680px) and (max-width:560px){
  .hero,.sth{min-height:560px;}
}

/* =====================================================
   39. ZEITSTRAHL — abwechselnd oben/unten, immer sichtbar
   ===================================================== */
.zs-band{
  position:relative; margin:clamp(22px,3vw,38px) 0 0;
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background:radial-gradient(120% 90% at 50% 50%, #1c3e63 0%, #15324F 55%, #0f2138 100%);
  border-top:1px solid rgba(232,176,84,.22); border-bottom:1px solid rgba(232,176,84,.22);
  padding:clamp(20px,2.6vw,32px) 0;
  overflow:hidden;
}

/* legend */
.zs-legend{
  display:flex; flex-wrap:wrap; gap:18px 26px; justify-content:center; align-items:center;
  max-width:1180px; margin:0 auto clamp(14px,2vw,22px); padding:0 clamp(16px,5vw,40px);
}
.zs-legend .lg{display:flex; align-items:center; gap:9px; color:#E7EDF5; font-size:14px; font-weight:600;}
.zs-legend .lg i{width:14px; height:14px; border-radius:50%; flex:none; box-shadow:0 0 0 4px rgba(255,255,255,.06);}
.zs-legend .lg.p i{background:var(--amber);}
.zs-legend .lg.h i{background:#8FB0D9;}
.zs-legend .lg.v i{background:#DE8168;}
.zs-legend .lg small{display:block; font-weight:400; font-size:11.5px; color:#A9B8CB;}
.zs-legend .lg-note{
  width:100%; text-align:center; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(244,234,210,.5);
}

.zs-scroll{overflow-x:auto; overflow-y:hidden; cursor:grab; -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding-bottom:6px;}
.zs-scroll.grab{cursor:grabbing;}
.zs-scroll::-webkit-scrollbar{height:6px;}
.zs-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.06);}
.zs-scroll::-webkit-scrollbar-thumb{background:rgba(232,176,84,.55); border-radius:3px;}

.zs-track{position:relative; height:660px;}
.zs-baseline{
  position:absolute; left:0; right:0; top:50%; height:2px; transform:translateY(-50%);
  background:linear-gradient(90deg, rgba(232,176,84,0) 0, rgba(232,176,84,.85) 4%, rgba(232,176,84,.85) 96%, rgba(232,176,84,0) 100%);
  box-shadow:0 0 14px 1px rgba(232,176,84,.5); z-index:1;
}

.zs-ev{position:absolute; top:0; bottom:0; width:230px; transform:translateX(-50%); z-index:2;}

.zs-dot{
  position:absolute; top:50%; left:50%; width:15px; height:15px; border-radius:50%;
  transform:translate(-50%,-50%); z-index:4;
  background:var(--amber); border:3px solid #0f2138; box-shadow:0 0 0 4px rgba(232,176,84,.18);
}
.zs-stem{position:absolute; left:50%; transform:translateX(-50%); width:1px; background:rgba(244,234,210,.45); z-index:1;}
.pos-above .zs-stem{bottom:50%; height:30px;}
.pos-below .zs-stem{top:50%; height:30px;}

.zs-card{position:absolute; left:50%; transform:translateX(-50%); width:224px; text-align:center;}
.pos-above .zs-card{bottom:50%; margin-bottom:30px; display:flex; flex-direction:column; justify-content:flex-end;}
.pos-below .zs-card{top:50%; margin-top:30px;}

.zs-photo{
  position:relative; width:170px; height:124px; margin:0 auto 10px; overflow:hidden;
  background:#0d1d30; border:3px solid #f4ead2; box-shadow:0 10px 26px rgba(0,0,0,.42);
}
.zs-photo img{width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block; filter:saturate(.92) contrast(1.03);}
.zs-credit{
  position:absolute; left:0; right:0; bottom:0; font-family:var(--f-mono); font-size:8.5px;
  letter-spacing:.02em; color:#fff; background:rgba(0,0,0,.52); padding:2px 4px; line-height:1.2;
}
.zs-ev:hover .zs-photo{transform:translateY(-4px);}
.zs-photo{transition:transform .3s cubic-bezier(.16,1,.3,1);}

.zs-tag{
  display:inline-block; font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--amber-l,#E6B24E); border:1px solid rgba(232,176,84,.4); padding:3px 9px; border-radius:20px; margin-bottom:7px;
}
.zs-year{font-family:var(--f-display); font-weight:900; font-size:33px; line-height:1; color:var(--amber); letter-spacing:-.01em;}
.zs-title{font-family:var(--f-ui); font-weight:700; font-size:14px; line-height:1.28; color:#F4EAD6; margin-top:5px;}
.zs-desc{font-size:12px; line-height:1.5; color:#C2CEDD; margin-top:6px;}

/* category colours — Thesis-Palette (Slate Blue / warmes Feldrot),
   für die dunkle Museumsfläche aufgehellt, nicht in Himmelblau/Koralle verschoben */
.cat-h .zs-dot{background:#8FB0D9;}
.cat-v .zs-dot{background:#DE8168;}
.cat-h .zs-year{color:#B3C8E4;}
.cat-v .zs-year{color:#E89B84;}
.cat-h .zs-tag{color:#B3C8E4; border-color:rgba(143,176,217,.45);}
.cat-v .zs-tag{color:#E89B84; border-color:rgba(222,129,104,.45);}

.zs-nav{display:flex; align-items:center; gap:16px; max-width:1180px; margin:12px auto 0; padding:0 clamp(16px,5vw,40px);}
.zs-btn{font-family:var(--f-ui); font-size:12px; font-weight:700; padding:9px 20px; border-radius:22px; white-space:nowrap; background:transparent; border:1.5px solid rgba(244,234,210,.4); color:#F4EAD6; cursor:pointer; transition:all .2s;}
.zs-btn:hover{background:var(--amber); border-color:var(--amber); color:#1a120a;}
.zs-progress{flex:1; height:3px; background:rgba(244,234,210,.18); border-radius:2px; overflow:hidden;}
.zs-prog-fill{height:100%; width:0%; background:var(--amber); border-radius:2px; transition:width .12s;}
.zs-hint{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,234,210,.5); text-align:center; margin-top:12px;}

@media(max-width:600px){
  .zs-track{height:600px;}
  .zs-photo{width:140px; height:104px;}
  .zs-year{font-size:27px;}
  .zs-ev{width:190px;}
  .zs-card{width:188px;}
}
@media(prefers-reduced-motion:reduce){ .zs-photo{transition:none;} }

/* Override old vertical TL styles (hidden now) */
.tl2-row{display:none !important;}

/* =====================================================
   40. AVATAR-ANIMATIONEN — Bitmoji / Snapchat Stil
   ===================================================== */

/* Dezentes Schweben — nur sanfte Vertikalbewegung, keine Rotation
   (Snapchat-Sticker-Feel, ruhig statt gruselig) */
@keyframes av-bob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}
/* Einsprung beim Öffnen — weicher Scale-Bounce, ohne Drehung */
@keyframes av-pop-in{
  0%{transform:scale(.7);opacity:0;}
  60%{transform:scale(1.06);opacity:1;}
  100%{transform:scale(1);}
}
/* Antenne / Funke — sanftes Glitzern (kein Verschwinden) */
@keyframes ant-twinkle{
  0%,100%{opacity:1;}
  50%{opacity:.6;}
}

/* Bot-Avatar (Johannes-Figur) schwebt ruhig */
.guide-fab .gd-fig{
  animation:av-bob 4.4s ease-in-out infinite;
  transform-origin:center bottom;
  display:block;
}
/* Chat-Panel-Avatar: weicher Einsprung beim Öffnen, danach Ruhe */
.chat-panel.on .gd-head-av .botava{
  animation:av-pop-in .5s cubic-bezier(.22,1,.36,1) both;
}
/* Bot-Funke glitzert dezent (keine Augen-Animation — wirkt sonst unheimlich) */
.botava .bot-ant path{
  animation:ant-twinkle 3s ease-in-out infinite;
}

/* Nutzer-Avatar schwebt ruhig (Profile-Drawer, Creator) */
#avStage svg,
.drawer-hd .av-anim svg,
.av-stage svg{
  animation:av-bob 4.4s ease-in-out infinite;
  display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.13));
}

/* Reduzierte Bewegung */
@media(prefers-reduced-motion:reduce){
  .guide-fab .gd-fig,
  .chat-panel.on .gd-head-av .botava,
  .botava .bot-ant path,
  #avStage svg,.drawer-hd .av-anim svg,.av-stage svg{animation:none !important;}
}

/* =====================================================
   42. KONTRAST — Lesbarkeit in Hell & Dunkel
   ===================================================== */

/* Synchronoptische Zeitleiste: Card-Year immer kontraststark */
.syno-card-yr{color:var(--ink-soft)!important;}
.syno-row-p .syno-event .syno-card-yr{color:var(--amber)!important;}
.syno-row-h .syno-event .syno-card-yr{color:var(--blau)!important;}
.syno-row-v .syno-event .syno-card-yr{color:var(--feldrot)!important;}
html[data-theme="dark"] .syno-row-p .syno-event .syno-card-yr{color:#FFD060!important;}
html[data-theme="dark"] .syno-row-h .syno-event .syno-card-yr{color:#8FB0D9!important;}
html[data-theme="dark"] .syno-row-v .syno-event .syno-card-yr{color:#E89B84!important;}

/* Interesse-Chips: Label immer lesbar */
.chip-i{color:var(--ink)!important;}
html[data-theme="dark"] .chip-i{color:var(--ink)!important;background:var(--pergament-2)!important;border-color:var(--line)!important;}
.chip-i.on{color:#1a120a!important;}
html[data-theme="dark"] .chip-i.on{color:#1a120a!important;}

/* Mini-Chips im Profil */
.mini-chip{color:var(--ink)!important;background:rgba(0,0,0,.06)!important;border-radius:20px;padding:2px 8px;display:inline-flex;align-items:center;gap:5px;font-size:12px;}
html[data-theme="dark"] .mini-chip{background:rgba(255,255,255,.1)!important;color:var(--ink)!important;}

/* Schnellmenü (QuickNav) Buttons */
.qn-btn,.qn-link{color:var(--ink)!important;}
html[data-theme="dark"] .qn-btn,html[data-theme="dark"] .qn-link{color:var(--ink)!important;}
.qn-btn.active,.qn-link.active{color:var(--amber)!important;font-weight:700;}

/* Sidebar Labels immer lesbar */
.sb-label{color:var(--ink)!important;}
html[data-theme="dark"] .sb-label{color:#C3BBA8!important;}
.sb-item.active .sb-label{color:var(--amber)!important;}
html[data-theme="dark"] .sb-item.active .sb-label{color:var(--amber-l)!important;}

/* Syno RL-Labels Dunkel-Modus Kontrast */
html[data-theme="dark"] .syno-row-p .syno-rl{color:#FFD060!important;border-right-color:#FFD060!important;}
html[data-theme="dark"] .syno-row-h .syno-rl{color:#8FB0D9!important;border-right-color:#8FB0D9!important;}
html[data-theme="dark"] .syno-row-v .syno-rl{color:#E89B84!important;border-right-color:#E89B84!important;}

/* Avatar-Karten im Setup-Modal */
.av-row .av-label{color:var(--ink)!important;}
html[data-theme="dark"] .av-row .av-label{color:var(--ink)!important;}

/* Profil-Drawer dark mode fixes */
html[data-theme="dark"] .drawer{color:var(--ink)!important;}
html[data-theme="dark"] .drawer .psection-t{color:var(--ink-soft)!important;}
html[data-theme="dark"] .pstat b{color:var(--ink)!important;}
html[data-theme="dark"] .pstat span{color:var(--ink-soft)!important;}

/* Entscheidungs-Pfad dark mode */
html[data-theme="dark"] .decision .dk{color:var(--ink)!important;}
html[data-theme="dark"] .decision .dq{color:var(--ink)!important;}
html[data-theme="dark"] .decision .dsub{color:var(--ink-soft)!important;}
html[data-theme="dark"] .dopt{color:var(--ink)!important;border-color:var(--line)!important;}

/* Chat Panel dark mode */
html[data-theme="dark"] .chat-panel{color:var(--ink)!important;}
html[data-theme="dark"] .chat-panel .chat-disc{color:var(--ink-soft)!important;}

/* Syno Hint Text */
.syno-hint{color:var(--ink-soft)!important;}
html[data-theme="dark"] .syno-hint{color:var(--ink-soft)!important;}
/* Intro-Portrait: contain → cover für saubere Füllung */
.intro-portrait .ph img{
  object-fit:cover !important;
  object-position:center top !important;
}
/* Keine ungewollten Ränder / Outlines auf Archivbildern */
.arch img,.sv-frame img,.scene-media img,.syno-card-img img{
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}
/* Interest-Icons: gleiche Größe wie Sidebar-Icons */
.chip-i .em{display:flex;align-items:center;justify-content:center;}
.chip-i .em .ci,.mini-chip .ci{width:20px;height:20px;flex-shrink:0;}
.chip-i .em .ci{width:22px;height:22px;}