/* =====================================================================
   »verstehen«-REIHE — SHARED ENGINE STYLESHEET (engine.css)
   ---------------------------------------------------------------------
   Topic-agnostic CSS for the whole family of explainer sites.
   Extracted verbatim from the original ki-verstehen single-file site;
   only content-specific illustration CSS was pulled out (see
   illustrations-example.css). Load this BEFORE the per-site inline
   <style> accent block so the site override always wins.

   ── ACCENT-COLOR OVERRIDE CONVENTION ────────────────────────────────
   The "simple" (default) and "advanced" modes are themed via THREE CSS
   custom properties that every site sets in its own inline <style>:

       :root {
         --accent:       #C25E3C;     primary brand / terra-equivalent
         --accent-deep:  #9C4225;     darker shade — WCAG-AA text on cream
         --accent-soft:  #E8A586;     light tint — backgrounds, hovers
       }

   engine.css falls back to the original warm-terra palette if a site
   forgets to set them, so nothing breaks. The DEFAULT (simple) mode
   uses --accent; the ADVANCED mode shifts to the fixed sage palette
   (--sage / --sage-deep). The two SCHOOL modes use fixed identity
   colours shared across the whole family (they are a role signal, not a
   per-site brand): schools = slate-blue #3D5A80, teacher = bronze
   #A67238. Do not re-theme those per site — keep them consistent so a
   teacher recognises "teacher mode" on any sibling.

   Add a new site:  set the three --accent* vars + drop your
   illustration CSS into the site's inline <style>. Nothing here changes.
   ===================================================================== */

/* ============================================
   VARIABLES — Warme, gemütliche Farben
   ============================================ */
:root {
  --paper:        #F7F1E3;
  --paper-deep:   #EFE6D2;
  --paper-edge:   #E5D9BD;
  --ink-deep:     #2A1F1A;
  --ink-medium:   #5A4738;
  --ink-soft:     #6E5C49;  /* darkened from #8B7964 — meets WCAG AA on cream paper (~5.5:1) */
  --ink-faint:    #8E7C66;  /* darkened from #B7A892 — used only for decoration, not body text */

  /* ── PER-SITE ACCENT (overridable) — defaults to the ki-verstehen terra ── */
  --accent:       #C25E3C;
  --accent-deep:  #9C4225;
  --accent-soft:  #E8A586;

  /* Legacy terra aliases kept so any verbatim rule still resolves.
     They point at the accent vars so a site re-theme cascades fully. */
  --terra:        var(--accent);
  --terra-deep:   var(--accent-deep);
  --terra-soft:   var(--accent-soft);

  --sage:         #7B9B6E;
  --sage-deep:    #547349;
  --sage-soft:    #B5C8A5;

  --honey:        #E5A845;
  --honey-soft:   #F5D387;

  --rose:         #D08C7C;
  --rose-soft:    #ECC4B8;

  --sky:          #9DB5C8;
  --sky-soft:     #C8D9E5;

  --shadow-warm:  0 20px 60px -20px rgba(154, 89, 51, 0.25);
  --shadow-deep:  0 30px 80px -25px rgba(42, 31, 26, 0.3);
  --shadow-soft:  0 8px 30px -10px rgba(154, 89, 51, 0.15);

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Newsreader", Georgia, serif;

  /* Fixed family-wide school-mode identity colours */
  --schools-accent: #3D5A80;
  --teacher-accent: #A67238;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--ink-deep);
  background: var(--paper);
  overflow-x: hidden;
  font-variation-settings: "opsz" 16;
}

/* Subtle paper grain overlay */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.65 0 0 0 0 0.55 0 0 0 0 0.4 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================
   CHAPTER NAVIGATION (Top)
   ============================================ */
.chapter-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(247, 241, 227, 0.95), rgba(247, 241, 227, 0));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.brand {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  font-variation-settings: "opsz" 14, "SOFT" 100;
  color: var(--ink-medium);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  text-decoration: none;
}

/* Smooth mode-accent transitions so simple↔advanced swap doesn't flash */
.headline em,
.chapter-label,
.chapter-label::before,
.dot-nav button,
.dot-nav button.active,
.quote-box,
.alltag-card .reveal-text,
.progress-fill,
.chapter-counter span {
  transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.brand-mark {
  width: 26px;
  height: 26px;
  display: inline-block;
}

.chapter-counter {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-style: italic;
  letter-spacing: 0.05em;
}

.chapter-counter span {
  color: var(--accent);
  font-weight: 600;
  font-style: normal;
}

/* ============================================
   MODE TOGGLE — Einfach / Im Detail
   ============================================ */
.mode-toggle {
  display: flex;
  flex-wrap: wrap;
  background: var(--paper-deep);
  border-radius: 100px;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--paper-edge);
}

.mode-toggle button {
  padding: 0.5rem 1.1rem;
  background: transparent;
  border: none;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-variation-settings: "opsz" 14, "SOFT" 80;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  letter-spacing: 0.01em;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap; /* prevent "Im Detail" from wrapping at 320px */
}

.mode-toggle button:hover:not(.active) {
  color: var(--ink-deep);
}

.mode-toggle button.active {
  background: var(--ink-deep);
  color: var(--paper);
  box-shadow: 0 4px 12px -4px rgba(42, 31, 26, 0.4);
}

/* Mode visibility — both versions are in DOM, CSS toggles */
body.mode-simple   [data-mode="advanced"], body.mode-simple   [data-mode="schools"], body.mode-simple   [data-mode="teacher"] { display: none !important; }
body.mode-advanced [data-mode="simple"],   body.mode-advanced [data-mode="schools"], body.mode-advanced [data-mode="teacher"] { display: none !important; }
body.mode-schools  [data-mode="simple"],   body.mode-schools  [data-mode="advanced"], body.mode-schools  [data-mode="teacher"] { display: none !important; }
body.mode-teacher  [data-mode="simple"],   body.mode-teacher  [data-mode="advanced"], body.mode-teacher  [data-mode="schools"] { display: none !important; }

/* ============================================
   SCHOOL MENU — 🎓 dropdown for Schüler-Ansicht / Lehrer-Vorbereitung
   (kept visually distinct from public Einfach/Im Detail toggle)
   ============================================ */
.school-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.school-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.85rem;
  background: var(--paper-deep);
  border: 1px solid var(--paper-edge);
  border-radius: 100px;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 36px;
}
.school-menu-trigger:hover {
  color: var(--ink-deep);
  border-color: var(--ink-soft);
}
.school-menu-trigger.active {
  background: var(--ink-deep);
  color: var(--paper);
  border-color: var(--ink-deep);
}
body.mode-schools .school-menu-trigger.active {
  background: #3D5A80;
  border-color: #3D5A80;
}
body.mode-teacher .school-menu-trigger.active {
  background: #A67238;
  border-color: #A67238;
}
.school-menu-icon { font-size: 1.05rem; line-height: 1; }
.school-menu-caret { font-size: 0.7rem; opacity: 0.7; transition: transform 0.2s ease; }
.school-menu-trigger[aria-expanded="true"] .school-menu-caret { transform: rotate(180deg); }
.school-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 280px;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: 14px;
  box-shadow: 0 12px 40px -8px rgba(154, 89, 51, 0.25);
  padding: 0.4rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.school-menu-dropdown[hidden] { display: none !important; }
/* Mobile: the 280px dropdown must not run off-screen. The trigger sits at
   the right of the masthead, so anchor the dropdown's RIGHT edge to the
   trigger (same as desktop) and cap its width to the viewport — it then
   opens leftward and always stays on screen. (A prior attempt used
   left:50%+translateX, but 50% resolves against the small relatively-
   positioned .school-menu near the right edge, pushing the menu off the
   right side.) */
@media (max-width: 600px) {
  .school-menu-dropdown {
    left: auto;
    right: 0;
    transform: none;
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 2rem);
  }
}
.school-menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: transparent;
  border: none;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
  color: var(--ink-deep);
  font-family: var(--font-body);
}
.school-menu-dropdown button:hover,
.school-menu-dropdown button:focus-visible {
  background: var(--paper-deep);
  outline: none;
}
.school-menu-dropdown .menu-icon { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.school-menu-dropdown .menu-text { display: flex; flex-direction: column; gap: 0.1rem; }
.school-menu-dropdown .menu-text strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-deep);
}
.school-menu-dropdown .menu-text small {
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.3;
}
.school-menu-dropdown button[aria-current="true"] strong {
  color: #3D5A80;
}
.school-menu-dropdown button[data-set-mode="teacher"][aria-current="true"] strong {
  color: #A67238;
}

/* Advanced mode subtle visual shift (sage accent) */
body.mode-advanced .headline em      { color: var(--sage-deep); }
body.mode-advanced .chapter-label    { color: var(--sage-deep); }
body.mode-advanced .chapter-label::before { background: var(--sage-deep); }
body.mode-advanced .progress-fill    { background: linear-gradient(to right, var(--sage-deep), var(--sage)); }
body.mode-advanced .chapter-counter span { color: var(--sage-deep); }
body.mode-advanced .dot-nav button.active { background: var(--sage-deep); border-color: var(--sage-deep); }
body.mode-advanced .dot-nav button:hover { border-color: var(--sage-deep); }
body.mode-advanced .quote-box        { border-left-color: var(--sage-deep); }
body.mode-advanced .next-button::before { background: linear-gradient(135deg, var(--sage-deep), var(--sage)); }
body.mode-advanced .suggestion-btn:hover:not(:disabled) {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
}
body.mode-advanced .alltag-card .reveal-text { color: var(--sage-deep); }

/* Schools mode — deep slate-blue accent (#3D5A80) */
body.mode-schools .headline em                { color: #3D5A80; }
body.mode-schools .chapter-label              { color: #3D5A80; }
body.mode-schools .chapter-label::before      { background: #3D5A80; }
body.mode-schools .progress-fill              { background: linear-gradient(to right, #3D5A80, #5C7CA8); }
body.mode-schools .chapter-counter span       { color: #3D5A80; }
body.mode-schools .dot-nav button.active      { background: #3D5A80; border-color: #3D5A80; }
body.mode-schools .dot-nav button:hover       { border-color: #3D5A80; }
body.mode-schools .quote-box                  { border-left-color: #3D5A80; }
body.mode-schools .next-button::before        { background: linear-gradient(135deg, #3D5A80, #5C7CA8); }
body.mode-schools .suggestion-btn:hover:not(:disabled) {
  background: #3D5A80;
  border-color: #3D5A80;
}
body.mode-schools .alltag-card .reveal-text   { color: #3D5A80; }
body.mode-schools .powered-by-fab:hover {
  border-color: #3D5A80;
  color: #3D5A80;
  box-shadow: 0 12px 32px -6px rgba(61, 90, 128, 0.35);
}
body.mode-schools .fab-icon                   { color: #3D5A80; }
body.mode-schools .powered-by-fab:hover .fab-brand { color: #3D5A80; }
body.mode-schools .powered-by-fab:hover .fab-arrow { color: #3D5A80; }

/* Teacher mode — warm bronze accent (#A67238) */
body.mode-teacher .headline em                { color: #A67238; }
body.mode-teacher .chapter-label              { color: #7E5424; } /* darker bronze, WCAG AA */
body.mode-teacher .chapter-label::before      { background: #A67238; } /* decorative line keeps lighter bronze */
body.mode-teacher .progress-fill              { background: linear-gradient(to right, #A67238, #C99A60); }
body.mode-teacher .chapter-counter span       { color: #A67238; }
body.mode-teacher .dot-nav button.active      { background: #A67238; border-color: #A67238; }
body.mode-teacher .dot-nav button:hover       { border-color: #A67238; }
body.mode-teacher .quote-box                  { border-left-color: #A67238; }
body.mode-teacher .next-button::before        { background: linear-gradient(135deg, #A67238, #C99A60); }
body.mode-teacher .suggestion-btn:hover:not(:disabled) {
  background: #A67238;
  border-color: #A67238;
}
body.mode-teacher .alltag-card .reveal-text   { color: #A67238; }
body.mode-teacher .powered-by-fab:hover {
  border-color: #A67238;
  color: #A67238;
  box-shadow: 0 12px 32px -6px rgba(166, 114, 56, 0.35);
}
body.mode-teacher .fab-icon                   { color: #A67238; }
body.mode-teacher .powered-by-fab:hover .fab-brand { color: #A67238; }
body.mode-teacher .powered-by-fab:hover .fab-arrow { color: #A67238; }

/* ============================================
   GLOSSARY TOOLTIPS — dotted-underlined terms with hover/tap definitions
   ============================================ */
.gloss {
  font-style: normal;
  border-bottom: 1px dotted var(--accent-deep);
  cursor: help;
  position: relative;
  color: inherit;
}
.gloss:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: 2px;
}
.gloss::after {
  content: attr(data-def);
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 240px;
  max-width: 320px;
  padding: 0.7rem 0.9rem;
  background: var(--ink-deep);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  letter-spacing: 0;
  border-radius: 8px;
  box-shadow: 0 8px 24px -6px rgba(42, 31, 26, 0.4);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 300;
  white-space: normal;
}
.gloss::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 0.2rem);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink-deep);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
  pointer-events: none;
}
.gloss:hover::after, .gloss:focus-visible::after, .gloss.gloss-active::after,
.gloss:hover::before, .gloss:focus-visible::before, .gloss.gloss-active::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
@media (max-width: 480px) {
  .gloss::after {
    max-width: calc(100vw - 2rem);
    left: 0;
    transform: translateX(0) translateY(4px);
  }
  .gloss:hover::after, .gloss:focus-visible::after, .gloss.gloss-active::after {
    transform: translateX(0) translateY(0);
  }
  .gloss::before { left: 12px; }
}

/* ============================================
   SCHOOLS-MODE QUIZ GAME — lightweight A/B/C quiz with running score
   ============================================ */
.schools-quiz-game {
  max-width: 720px;
  margin: 2.5rem auto 0;
  padding: 1.5rem 1.75rem;
  background: rgba(61, 90, 128, 0.08);
  border-radius: 14px;
  border-left: 4px solid #3D5A80;
  font-family: var(--font-body);
}
.schools-quiz-game .sq-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #3D5A80;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.schools-quiz-game .sq-question {
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink-deep);
  margin: 0 0 1.25rem;
}
.schools-quiz-game .sq-choices {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.schools-quiz-game .sq-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 2px solid var(--paper-edge);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink-deep);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.schools-quiz-game .sq-choice:hover:not(:disabled) {
  border-color: #3D5A80;
  background: var(--paper);
}
.schools-quiz-game .sq-choice:disabled { cursor: default; }
.schools-quiz-game .sq-choice .sq-letter {
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--paper-deep);
  color: var(--ink-medium);
  font-family: var(--font-display);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
.schools-quiz-game .sq-choice.sq-correct {
  border-color: var(--sage-deep);
  background: rgba(84, 115, 73, 0.12);
}
.schools-quiz-game .sq-choice.sq-correct .sq-letter {
  background: var(--sage-deep);
  color: var(--paper);
}
.schools-quiz-game .sq-choice.sq-correct::after {
  content: "✓";
  margin-left: auto;
  font-size: 1.25rem;
  color: var(--sage-deep);
}
.schools-quiz-game .sq-choice.sq-wrong {
  border-color: var(--accent-deep);
  background: rgba(194, 94, 60, 0.10);
}
.schools-quiz-game .sq-choice.sq-wrong .sq-letter {
  background: var(--accent-deep);
  color: var(--paper);
}
.schools-quiz-game .sq-choice.sq-wrong::after {
  content: "✗";
  margin-left: auto;
  font-size: 1.25rem;
  color: var(--accent-deep);
}
.schools-quiz-game .sq-feedback {
  margin-top: 0.9rem;
  font-size: 0.92rem;
  color: var(--ink-medium);
  font-style: italic;
}
.schools-quiz-score {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  background: rgba(61, 90, 128, 0.12);
  border: 1px solid rgba(61, 90, 128, 0.35);
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: #3D5A80;
}
.schools-quiz-score .sq-score-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.85; }
.schools-quiz-score .sq-score-value { font-weight: 700; }
.schools-quiz-final {
  max-width: 720px;
  margin: 2.5rem auto;
  padding: 2rem 2rem;
  background: rgba(61, 90, 128, 0.10);
  border: 1px solid rgba(61, 90, 128, 0.35);
  border-radius: 14px;
  text-align: center;
}
.schools-quiz-final h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: #3D5A80;
  margin: 0 0 0.5rem;
}
.schools-quiz-final .sq-final-score {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  color: #3D5A80;
  line-height: 1;
  margin: 0.75rem 0;
}
.schools-quiz-final p { color: var(--ink-medium); line-height: 1.55; margin: 0.4rem auto; max-width: 520px; }
.schools-quiz-final button {
  margin-top: 1rem;
  padding: 0.65rem 1.4rem;
  background: #3D5A80;
  color: var(--paper);
  border: none;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.schools-quiz-final button:hover { background: #2C4666; }

/* Teacher-content per-chapter box (analog to .school-box, bronze) */
.teacher-content {
  display: block;
  margin-top: 1.5rem;
  padding: 1.5rem 1.75rem;
  background: rgba(166, 114, 56, 0.08);
  border-radius: 14px;
  border-left: 4px solid #A67238;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-deep);
  text-align: left;
}
.teacher-content .school-label {
  color: #A67238;
}
.teacher-content .school-quiz {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(166, 114, 56, 0.3);
}
.teacher-content .school-quiz summary::after {
  color: #A67238;
}
.teacher-content .school-quiz summary:hover {
  background: rgba(166, 114, 56, 0.08);
}
.teacher-content .school-quiz-answer {
  border-top-color: rgba(166, 114, 56, 0.3);
}
.teacher-content code {
  background: rgba(166, 114, 56, 0.18);
  color: #6B4720;
}
.teacher-content em { color: #A67238; }
.teacher-content p { margin: 0.4rem 0 1rem; }
.teacher-content p:last-child { margin-bottom: 0; }
.teacher-content ul, .teacher-content ol { margin: 0.5rem 0 1rem 1.5rem; }
.teacher-content li { margin-bottom: 0.4rem; line-height: 1.6; }
.teacher-content strong { color: var(--ink-deep); }

/* Print-only worksheet styling (when teacher prints page) */
@media print {
  /* In teacher mode, the page becomes a printable lesson kit: only teacher-content + chapter labels print, everything else is hidden. */
  body.mode-teacher { background: white !important; color: black !important; }
  body.mode-teacher .powered-by-fab,
  body.mode-teacher .dot-nav,
  body.mode-teacher .chapter-nav,
  body.mode-teacher .progress-bar,
  body.mode-teacher .next-button,
  body.mode-teacher .back-link,
  body.mode-teacher .nav-row,
  body.mode-teacher .home-button,
  body.mode-teacher .cat-trainer,
  body.mode-teacher .alltag-card,
  body.mode-teacher .chat-demo,
  body.mode-teacher .suggestion-btn,
  body.mode-teacher details.faq-item,
  body.mode-teacher .skip-link,
  body.mode-teacher .house-illustration,
  body.mode-teacher .lead,
  body.mode-teacher .headline { display: none !important; }
  /* Force-display teacher-content even if data-mode CSS would normally hide */
  body.mode-teacher [data-mode="teacher"] { display: block !important; }
  body.mode-teacher .teacher-content,
  body.mode-teacher .teacher-box {
    background: white !important;
    border: 1px solid #999 !important;
    border-left: 4px solid #A67238 !important;
    page-break-inside: avoid;
    margin: 1.5rem 0 !important;
    padding: 1rem 1.25rem !important;
    max-width: 100% !important;
    box-shadow: none !important;
    font-size: 11pt;
  }
  body.mode-teacher .teacher-content { page-break-after: always; }
  body.mode-teacher section { page-break-inside: avoid; padding: 0 !important; }
  body.mode-teacher .chapter-label {
    font-size: 14pt; color: #A67238 !important; display: block !important;
    margin: 0.5rem 0; padding: 0;
  }
  body.mode-teacher .school-label { color: #A67238 !important; }
  body.mode-teacher a { color: #444 !important; text-decoration: underline; }
  body.mode-teacher a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; }
  /* In other modes (simple/advanced/schools), keep the existing minimal print */
  .teacher-content { page-break-inside: avoid; border-left-width: 6px; }
  .school-box { page-break-inside: avoid; }
}

/* Schools-only content boxes */
.school-box {
  display: block;
  margin-top: 1.5rem;
  padding: 1.5rem 1.75rem;
  background: rgba(61, 90, 128, 0.08);
  border-radius: 14px;
  border-left: 4px solid #3D5A80;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-deep);
  text-align: left;
}
.school-box .school-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #3D5A80;
  font-weight: 600;
  margin-bottom: 0.45rem;
  margin-top: 0.5rem;
}
.school-box .school-label:first-child { margin-top: 0; }
.school-box p { margin: 0.4rem 0 1rem; }
.school-box p:last-child { margin-bottom: 0; }
.school-box ul, .school-box ol { margin: 0.5rem 0 1rem 1.5rem; }
.school-box li { margin-bottom: 0.4rem; line-height: 1.6; }
.school-box code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(61, 90, 128, 0.18);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  color: #2A4258;
}
.school-box strong { color: var(--ink-deep); }
.school-box em { color: #3D5A80; font-style: italic; }

/* Schools quiz — collapsible details/summary */
.school-quiz {
  margin: 0.6rem 0 1rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  border: 1px solid rgba(61, 90, 128, 0.25);
  overflow: hidden;
}
.school-quiz summary {
  cursor: pointer;
  padding: 0.9rem 1.2rem;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 16, "SOFT" 80;
  font-weight: 500;
  color: var(--ink-deep);
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
  transition: background 0.2s ease;
}
.school-quiz summary::-webkit-details-marker { display: none; }
.school-quiz summary::after {
  content: "▾";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #3D5A80;
  transition: transform 0.3s ease;
  font-size: 1.1em;
}
.school-quiz[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.school-quiz summary:hover { background: rgba(61, 90, 128, 0.06); }
.school-quiz-answer {
  padding: 0 1.2rem 1rem;
  font-family: var(--font-body);
  color: var(--ink-medium);
  border-top: 1px dashed rgba(61, 90, 128, 0.25);
  padding-top: 0.85rem;
  margin-top: 0;
}

/* Teacher's box at end of last chapter */
.teacher-box {
  display: block;
  margin: 3rem auto 0;
  max-width: 900px;
  padding: 2rem 2.25rem;
  background: linear-gradient(135deg, rgba(61, 90, 128, 0.10), rgba(92, 124, 168, 0.06));
  border-radius: 18px;
  border: 1px solid rgba(61, 90, 128, 0.25);
  font-family: var(--font-body);
  color: var(--ink-deep);
}
.teacher-box h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 32, "SOFT" 80;
  font-size: 1.55rem;
  color: #3D5A80;
  margin-bottom: 0.5rem;
}
.teacher-box h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink-deep);
  margin: 1.5rem 0 0.5rem;
  font-weight: 600;
}
.teacher-box p { line-height: 1.6; margin: 0.5rem 0 1rem; }
.teacher-box ul, .teacher-box ol { margin: 0.5rem 0 1rem 1.5rem; }
.teacher-box li { margin-bottom: 0.4rem; line-height: 1.55; }
/* Advanced-specific elements */
.tech-detail {
  display: block;
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--paper-deep);
  border-radius: 12px;
  border-left: 3px solid var(--sage-deep);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-medium);
}

.tech-detail code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(84, 115, 73, 0.25); /* raised opacity for WCAG AA contrast */
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  color: #355C3B; /* darker than --sage-deep for safer ratio */
}

.tech-detail strong {
  color: var(--ink-deep);
}

/* FAQ Section (visible in both modes for SEO + AI citation) */
#faq {
  background: var(--paper);
  padding: 6rem 2rem;
}

#faq .container { max-width: 900px; }

#faq .chapter-label {
  justify-content: center;
  display: inline-flex;
}

#faq h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  color: var(--ink-deep);
  text-align: center;
  margin-bottom: 0.75rem;
  line-height: 1.1;
}

#faq h2 em {
  font-style: italic;
  color: var(--sage-deep);
}

#faq .lead {
  text-align: center;
  margin: 0 auto 3rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: var(--paper-deep);
  border-radius: 16px;
  border: 1px solid var(--paper-edge);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: var(--sage-soft);
}

.faq-question {
  width: 100%;
  padding: 1.4rem 1.75rem;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 18, "SOFT" 80;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink-deep);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 60px;
}

.faq-question svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
  color: var(--sage-deep);
}

.faq-item.open .faq-question svg {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When open, max-height is set inline by JS to actual scrollHeight — handles long
   answers at any zoom level. Fallback rule keeps it accessible if JS fails. */
.faq-item.open .faq-answer {
  max-height: 2000px;
}

.faq-answer-inner {
  padding: 0 1.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-medium);
}

.progress-track {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 101;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--accent), var(--honey));
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   DOT NAVIGATION (Side)
   ============================================ */
.dot-nav {
  position: fixed;
  right: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 100;
}

.dot-nav button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ink-faint);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.dot-nav button::after {
  content: attr(data-label);
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-medium);
  background: var(--paper);
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.dot-nav button:hover {
  border-color: var(--accent);
  transform: scale(1.2);
}

.dot-nav button:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.dot-nav button.active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.3);
}

/* ============================================
   SECTIONS
   ============================================ */
section {
  min-height: 100vh;
  min-height: 100svh;
  padding: 7rem 2rem 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.chapter-label {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1rem;
  color: var(--accent-deep); /* WCAG AA: ~6:1 on cream paper */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.chapter-label::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--accent);
}

/* Headline styles */
.headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  line-height: 1;
  color: var(--ink-deep);
  letter-spacing: -0.02em;
}

.headline em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--accent);
}

.lead {
  font-family: var(--font-body);
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--ink-medium);
  max-width: 600px;
}

/* ============================================
   NEXT BUTTON — Large, clear, inviting
   ============================================ */
.next-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 2.25rem;
  background: var(--ink-deep);
  color: var(--paper);
  text-decoration: none;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  font-variation-settings: "opsz" 18, "SOFT" 80;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-warm);
  position: relative;
  overflow: hidden;
}

.next-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.next-button span,
.next-button svg {
  position: relative;
  z-index: 1;
}

.next-button:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-deep);
}

.next-button:hover::before {
  opacity: 1;
}

.next-button svg {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.next-button:hover svg {
  transform: translateX(4px);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1rem;
  margin-top: 1.25rem;
  transition: color 0.3s ease;
}

.back-link:hover {
  color: var(--accent);
}

.nav-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}

/* ============================================
   WELCOME / HERO SECTION SHELL
   (per-site illustration lives in the site's inline CSS)
   ============================================ */
#welcome {
  background: radial-gradient(ellipse at 70% 30%, var(--paper-deep) 0%, var(--paper) 60%);
}

#welcome .container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}

#welcome .text-block .headline {
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  margin-bottom: 1.75rem;
}

#welcome .lead {
  font-size: 1.45rem;
  color: var(--ink-medium);
  margin-bottom: 1rem;
}

.signature {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 18, "SOFT" 100;
  color: var(--ink-soft);
  margin-top: 1.5rem;
  font-size: 1.1rem;
}

/* Generic illustration wrapper — reused by every site's hero / closing SVG.
   The original used .welcome-illustration / .books-illustration /
   .house-illustration with identical rules; this is the shared base. */
.welcome-illustration,
.books-illustration,
.house-illustration,
.site-illustration {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.welcome-illustration svg,
.books-illustration svg,
.house-illustration svg,
.site-illustration svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ============================================
   TWO-COLUMN CONTENT SECTION SHELL
   (e.g. chapter "Was ist …" / "Zum Schluss" — text + illustration)
   ============================================ */
.split-section,
#was-ist,
#ende {
  background: var(--paper);
}

.split-section .container,
#was-ist .container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 5rem;
  align-items: center;
}

#ende .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.split-section .headline,
#was-ist .headline,
#ende .headline {
  font-size: clamp(3rem, 7vw, 5.5rem);
  margin-bottom: 2rem;
}

.quote-box {
  background: var(--paper-deep);
  border-left: 4px solid var(--accent);
  padding: 1.5rem 2rem;
  margin-top: 2rem;
  border-radius: 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 18, "SOFT" 100;
  font-size: 1.2rem;
  color: var(--ink-medium);
  line-height: 1.5;
}

/* ============================================
   CENTERED CONTENT SECTION SHELL
   (e.g. interactive chapter / card-grid chapter)
   ============================================ */
.centered-section .container,
#wie-lernt .container,
#alltag .container,
#grenzen .container {
  text-align: center;
}

.centered-section .headline,
#wie-lernt .headline,
#alltag .headline,
#grenzen .headline {
  font-size: clamp(3rem, 7vw, 5.5rem);
  margin-bottom: 1.5rem;
}

#wie-lernt {
  background: linear-gradient(135deg, var(--paper) 0%, var(--paper-deep) 100%);
}

#wie-lernt .lead {
  margin: 0 auto 3rem;
  text-align: center;
}

#alltag {
  background: var(--paper);
}

#alltag .lead {
  margin: 0 auto 4rem;
}

#grenzen {
  background: var(--paper);
}

#grenzen .lead {
  margin: 0 auto 4rem;
}

#ende {
  background: linear-gradient(160deg, var(--paper-deep) 0%, var(--paper) 60%, var(--paper-deep) 100%);
}

#ende .headline {
  margin-bottom: 1.75rem;
}

/* ============================================
   CLICK-TO-REVEAL CARD GRID ("alltag" style)
   ============================================ */
.alltag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.alltag-card {
  background: var(--paper-deep);
  border-radius: 20px;
  padding: 2.25rem 1.75rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--paper-edge);
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.alltag-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-warm);
  background: var(--paper);
}

.alltag-card .icon-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: transform 0.4s ease;
}

.alltag-card:hover .icon-circle {
  transform: rotate(-8deg) scale(1.1);
}

.alltag-card.color-1 .icon-circle { background: var(--accent-soft); color: var(--accent-deep); }
.alltag-card.color-2 .icon-circle { background: var(--sage-soft); color: var(--sage-deep); }
.alltag-card.color-3 .icon-circle { background: var(--honey-soft); color: var(--accent-deep); }
.alltag-card.color-4 .icon-circle { background: var(--sky-soft); color: var(--ink-deep); }
.alltag-card.color-5 .icon-circle { background: var(--rose-soft); color: var(--accent-deep); }
.alltag-card.color-6 .icon-circle { background: var(--paper-edge); color: var(--ink-deep); }
.alltag-card.color-7 .icon-circle { background: #D0BFD9; color: #5D3F71; }   /* Lavender */
.alltag-card.color-8 .icon-circle { background: #B5D8C5; color: #2F5A41; }   /* Mint    */

.alltag-card h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  font-variation-settings: "opsz" 18, "SOFT" 80;
  color: var(--ink-deep);
  margin-bottom: 0.6rem;
  line-height: 1.2;
}

.alltag-card p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-medium);
  flex: 1;
}

.alltag-card .reveal-text {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--accent-deep); /* darkened from --accent for WCAG AA on --paper-deep */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.alltag-card.open .reveal-text {
  opacity: 1;
  max-height: 200px;
  margin-top: 1rem;
}

.alltag-card .more-hint {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.alltag-card .more-hint svg {
  transition: transform 0.3s ease;
}

/* Rotate chevron + swap label when card is open — give visible close affordance */
.alltag-card.open .more-hint svg {
  transform: rotate(180deg);
}

.alltag-card .more-hint .label-closed { display: inline; }
.alltag-card .more-hint .label-open   { display: none; }
.alltag-card.open .more-hint .label-closed { display: none; }
.alltag-card.open .more-hint .label-open   { display: inline; }

/* ============================================
   INTERACTIVE GAME GRID (generic "trainer" — e.g. cat-trainer)
   The per-item SVGs are content-specific (built in the site script);
   the frame, grid, score-display and result are generic.
   ============================================ */
.cat-trainer {
  background: var(--paper);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-warm);
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  border: 1px solid var(--paper-edge);
}

.trainer-prompt {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-variation-settings: "opsz" 18, "SOFT" 100;
  color: var(--ink-deep);
  margin-bottom: 0.5rem;
}

.trainer-hint {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.cat-card {
  aspect-ratio: 1;
  background: var(--paper-deep);
  border: 3px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.cat-card.correct {
  border-color: var(--sage);
  background: var(--sage-soft);
  animation: pop 0.4s ease;
}

.cat-card.wrong {
  border-color: var(--accent);
  background: var(--rose-soft);
  animation: shake 0.4s ease;
}

@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

.cat-card svg {
  width: 65%;
  height: 65%;
}

.score-display {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--paper-deep);
  border-radius: 16px;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 18, "SOFT" 100;
}

.score-item {
  text-align: center;
}

.score-label {
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-style: italic;
  display: block;
}

.score-value {
  font-size: 2rem;
  color: var(--ink-deep);
  font-weight: 600;
  line-height: 1;
  margin-top: 0.25rem;
}

.score-value.sage  { color: var(--sage-deep); }
.score-value.terra { color: var(--accent-deep); }

.trainer-result {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 18, "SOFT" 100;
  font-size: 1.15rem;
  color: var(--ink-medium);
  min-height: 1.5em;
  transition: opacity 0.4s ease;
}

.trainer-result strong {
  font-style: normal;
  color: var(--sage-deep);
}

/* ============================================
   CHAT DEMO (typing animation + canned responses)
   ============================================ */
#reden {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
}

#reden .container {
  max-width: 900px;
}

#reden .text-block {
  text-align: center;
  margin-bottom: 3.5rem;
}

#reden .headline {
  font-size: clamp(3rem, 7vw, 5.5rem);
  margin-bottom: 1.5rem;
}

#reden .lead {
  margin: 0 auto;
}

.chat-demo {
  background: var(--paper);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: var(--shadow-warm);
  border: 1px solid var(--paper-edge);
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--paper-edge);
  margin-bottom: 1.5rem;
}

.chat-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--honey) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
}

.chat-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-variation-settings: "opsz" 18, "SOFT" 80;
  color: var(--ink-deep);
}

.chat-status {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--sage-deep);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.chat-status::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--sage);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.2); }
}

.chat-messages {
  min-height: 280px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 0.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chat-messages::-webkit-scrollbar {
  width: 6px;
}
.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: var(--paper-edge);
  border-radius: 3px;
}

.chat-bubble {
  max-width: 80%;
  padding: 1rem 1.25rem;
  border-radius: 18px;
  font-size: 1.05rem;
  line-height: 1.5;
  animation: slide-in 0.4s ease-out;
  white-space: pre-wrap;
}

@keyframes slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-bubble.user {
  align-self: flex-end;
  background: var(--ink-deep);
  color: var(--paper);
  border-bottom-right-radius: 4px;
}

.chat-bubble.ki {
  align-self: flex-start;
  background: var(--paper-deep);
  color: var(--ink-deep);
  border-bottom-left-radius: 4px;
}

.chat-bubble.typing {
  align-self: flex-start;
  background: var(--paper-deep);
  border-bottom-left-radius: 4px;
  padding: 1rem 1.25rem;
}

.typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 1.5em;
}

.typing-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-soft);
  animation: bounce 1.4s infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--paper-edge);
}

.suggestion-label {
  width: 100%;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: 0.25rem;
}

.suggestion-btn {
  padding: 0.85rem 1.35rem;
  min-height: 48px;
  background: var(--paper-deep);
  border: 1px solid var(--paper-edge);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-deep);
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  line-height: 1.3;
}

.suggestion-btn:hover:not(:disabled) {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.suggestion-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================
   GRID OF STATIC CARDS ("grenzen" style — illustration + heading + text)
   ============================================ */
.grenzen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.grenz-card {
  background: var(--paper-deep);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  text-align: center;
  border: 1px solid var(--paper-edge);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.grenz-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
}

.grenz-illustration {
  width: 110px;
  height: 110px;
  margin: 0 auto 1.5rem;
}

.grenz-card h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  font-variation-settings: "opsz" 18, "SOFT" 80;
  color: var(--ink-deep);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.grenz-card p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-medium);
}

/* ============================================
   CLOSING SECTION — tips list, closing note, home button
   ============================================ */
.tips-list {
  list-style: none;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tips-list li {
  padding-left: 3rem;
  position: relative;
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink-medium);
}

.tips-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 24px;
  height: 24px;
  background: var(--sage);
  border-radius: 50%;
}

.tips-list li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 0.65rem;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  transform: rotate(-45deg);
}

.closing-note {
  margin-top: 3rem;
  padding: 2rem;
  background: var(--paper);
  border-radius: 20px;
  border: 1px solid var(--paper-edge);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 24, "SOFT" 100;
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--ink-deep);
  text-align: center;
}

.home-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 2rem;
  background: var(--sage);
  color: var(--paper);
  text-decoration: none;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  font-variation-settings: "opsz" 18, "SOFT" 80;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-soft);
  border: none;
  cursor: pointer;
  margin-top: 2.5rem;
}

.home-button:hover {
  background: var(--sage-deep);
  transform: translateY(-3px);
  box-shadow: var(--shadow-warm);
}

/* ============================================
   REVEAL ANIMATIONS
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.25s; }
.reveal-delay-3 { transition-delay: 0.4s; }
.reveal-delay-4 { transition-delay: 0.55s; }
.reveal-delay-5 { transition-delay: 0.7s; }

/* ============================================
   FAMILY BAR — "Teil der »verstehen«-Reihe von webhoch"
   Slim strip rendering links to all live sibling sites.
   Rendered by engine.js from VERSTEHEN.family. Works in header or footer.
   ============================================ */
.family-bar {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  justify-content: center;
  line-height: 1.5;
}

.family-bar .family-bar-label {
  font-style: italic;
  color: var(--ink-soft);
}

.family-bar .family-bar-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  align-items: center;
}

.family-bar a {
  --chip-accent: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.7rem;
  border-radius: 100px;
  text-decoration: none;
  color: var(--ink-medium);
  border: 1px solid var(--paper-edge);
  background: var(--paper);
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}

.family-bar a::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chip-accent);
  flex: 0 0 auto;
}

.family-bar a:hover {
  border-color: var(--chip-accent);
  color: var(--ink-deep);
  transform: translateY(-1px);
}

.family-bar a[aria-current="page"] {
  border-color: var(--chip-accent);
  color: var(--ink-deep);
  background: var(--paper-deep);
  font-weight: 600;
}

/* "Coming soon" siblings: shown muted + non-interactive */
.family-bar span.family-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.7rem;
  border-radius: 100px;
  color: var(--ink-faint);
  border: 1px dashed var(--paper-edge);
  white-space: nowrap;
  font-style: italic;
}

/* Badge text rendered as a real element so engine.js i18n can localize it
   ("bald" / "soon"). Visually identical to the former ::after pseudo-element;
   spacing comes from the parent's flex `gap: 0.4rem`. */
.family-bar span.family-soon .family-soon-badge {
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

/* Header placement: keep it on its own full-width row after the nav wraps */
.chapter-nav .family-bar {
  font-size: 0.82rem;
  justify-content: flex-start;
}

/* ============================================
   "VERWANDTE THEMEN" — related-topics card block
   2–3 cards in the site card style, rendered by engine.js
   from the current site's `related` list.
   ============================================ */
.related-section {
  background: var(--paper-deep);
  padding: 5rem 2rem;
}

.related-section .container { max-width: 1100px; }

.related-section .chapter-label {
  justify-content: center;
  display: inline-flex;
}

.related-section h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(2.2rem, 5vw, 3.25rem);
  color: var(--ink-deep);
  text-align: center;
  margin-bottom: 0.75rem;
  line-height: 1.1;
}

.related-section h2 em { font-style: italic; color: var(--accent); }

.related-section .lead { text-align: center; margin: 0 auto 3rem; }

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.related-card {
  --card-accent: var(--accent);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-left: 4px solid var(--card-accent);
  border-radius: 20px;
  padding: 1.75rem 1.6rem;
  text-decoration: none;
  color: var(--ink-deep);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.related-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-warm);
}

.related-card .related-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--card-accent);
  opacity: 0.16;
  display: flex;
  align-items: center;
  justify-content: center;
}

.related-card h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  font-variation-settings: "opsz" 18, "SOFT" 80;
  color: var(--ink-deep);
  line-height: 1.2;
}

.related-card p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-medium);
  flex: 1;
}

.related-card .related-go {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--card-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.related-card .related-go svg { transition: transform 0.3s ease; }
.related-card:hover .related-go svg { transform: translateX(4px); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  body { font-size: 1.1rem; }

  .dot-nav { display: none; }

  .chapter-nav {
    padding: 1rem 1.25rem;
  }

  section {
    padding: 6rem 1.25rem 4rem;
  }

  .split-section .container,
  #welcome .container,
  #was-ist .container,
  #ende .container {
    grid-template-columns: minmax(0, 1fr); /* prevent SVG overflow at narrow widths */
    gap: 3rem;
    text-align: center;
  }

  #welcome .text-block .headline {
    font-size: 3rem;
  }

  .welcome-illustration,
  .books-illustration,
  .house-illustration,
  .site-illustration {
    max-width: 320px;
  }

  .lead {
    margin-left: auto;
    margin-right: auto;
  }

  .nav-row {
    justify-content: center;
  }

  .cat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

  .cat-trainer {
    padding: 1.75rem 1.25rem;
  }

  .chat-demo {
    padding: 1.5rem;
  }

  .chat-bubble {
    max-width: 90%;
  }

  .grenzen-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .grenz-card {
    padding: 2rem 1.5rem;
  }

  .closing-note {
    font-size: 1.15rem;
    padding: 1.5rem;
  }

  .tips-list li {
    font-size: 1.05rem;
  }
}

@media (max-width: 500px) {
  body { font-size: 1.05rem; }

  section {
    padding: 5.5rem 1rem 3.5rem;
  }

  #faq { padding: 4rem 1rem; }

  /* WCAG 2.5.5 — bump touch targets to 44px on mobile */
  .mode-toggle button {
    min-height: 44px;
    padding: 0.55rem 1rem;
  }

  .back-link {
    min-height: 44px;
    padding: 0.6rem 0.5rem;
    align-items: center;
    display: inline-flex;
  }

  .next-button {
    padding: 1.05rem 1.75rem;
    font-size: 1.05rem;
    min-height: 52px;
  }

  .home-button {
    padding: 1rem 1.5rem;
    font-size: 1rem;
    min-height: 50px;
  }

  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  .cat-trainer {
    padding: 1.5rem 1rem;
    border-radius: 18px;
  }

  .chat-demo {
    padding: 1.25rem 1rem;
    border-radius: 18px;
  }

  .score-display {
    flex-wrap: wrap;
    gap: 1rem 0.5rem;
    padding: 1rem 0.5rem;
  }

  .score-item {
    flex: 1 1 30%;
  }

  .score-value {
    font-size: 1.6rem;
  }

  .chapter-counter {
    font-size: 0.8rem;
  }

  .brand {
    font-size: 0.95rem;
  }

  .chapter-nav {
    padding: 0.85rem 1rem;
  }

  .alltag-card {
    min-height: 240px;
    padding: 1.75rem 1.25rem;
  }

  .alltag-card h3 {
    font-size: 1.4rem;
  }

  .grenz-card {
    padding: 1.75rem 1.25rem;
  }

  .grenz-illustration {
    width: 95px;
    height: 95px;
  }

  .grenz-card h3 {
    font-size: 1.5rem;
  }

  .lead {
    font-size: 1.15rem;
  }

  .nav-row {
    gap: 1rem;
    flex-direction: column;
    align-items: center;
  }

  .back-link {
    margin-top: 0;
    padding: 0.75rem 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .quote-box {
    padding: 1.25rem 1.5rem;
    font-size: 1.05rem;
  }

  .closing-note {
    font-size: 1.05rem;
    padding: 1.25rem;
  }
}

/* Accessibility — reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus styles for accessibility */
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

body.mode-advanced button:focus-visible,
body.mode-advanced a:focus-visible {
  outline-color: var(--sage-deep);
}

/* Screen-reader-only utility — content visible to assistive tech, hidden visually */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Scroll-margin so fixed header doesn't overlap anchored sections */
section {
  scroll-margin-top: 5rem;
}

/* Skip-Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--ink-deep);
  color: var(--paper);
  padding: 0.85rem 1.25rem;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1rem;
  z-index: 1001;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

/* Footer */
footer.site-footer {
  background: var(--paper-deep);
  padding: 3rem 2rem 2.5rem;
  text-align: center;
  border-top: 1px solid var(--paper-edge);
}

footer.site-footer p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 600px;
  margin: 0 auto 0.75rem;
  line-height: 1.5;
}

footer.site-footer .footer-meta {
  font-style: italic;
  font-size: 0.9rem; /* slight increase for legibility */
  color: var(--ink-soft); /* darkened from --ink-faint for WCAG AA */
  margin-top: 1.5rem;
}

footer.site-footer a {
  color: var(--accent-deep); /* WCAG AA: ~6:1 contrast */
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-deep);
}

footer.site-footer .footer-license {
  max-width: 720px;
  margin: 1.25rem auto 0;
  padding: 1rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.5;
}

body.mode-advanced footer.site-footer .footer-license {
  border-left-color: var(--sage-deep);
}

footer.site-footer .footer-legal {
  margin-top: 1rem;
}

footer.site-footer .footer-legal a {
  color: var(--ink-medium);
  border-bottom-color: var(--ink-soft);
}

footer.site-footer .footer-legal a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* The footer family-bar gets a little breathing room */
footer.site-footer .family-bar {
  margin: 1.5rem auto 0;
  max-width: 760px;
}

/* Responsive mode-toggle adjustments */
@media (max-width: 1100px) {
  .chapter-nav .chapter-counter { display: none; }
}

@media (max-width: 1023px) {
  /* WCAG 2.5.5 touch-target on tablet + mobile (previously only ≤600px) */
  .mode-toggle button {
    min-height: 44px;
  }
  .school-menu-trigger { min-height: 44px; min-width: 44px; }
}

@media (max-width: 600px) {
  .mode-toggle button {
    padding: 0.55rem 0.95rem;
    font-size: 0.85rem;
  }
  .chapter-nav {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1rem;
  }
  .chapter-nav .mode-toggle {
    order: 3;
    flex: 1 1 100%;
    justify-content: center;
  }
  /* Family bar in header drops to its own row on small screens */
  .chapter-nav .family-bar {
    order: 4;
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (max-width: 380px) {
  .brand {
    font-size: 0.85rem;
  }
  .brand-mark { width: 22px; height: 22px; }
  .mode-toggle button {
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    min-height: 44px;
  }
}


/* ============================================
   LANGUAGE SWITCHER (next to mode toggle)
   ============================================ */
.lang-switch-nav {
  display: inline-flex;
  gap: 1px;
  background: var(--paper-deep);
  border-radius: 100px;
  padding: 3px;
  border: 1px solid var(--paper-edge);
}
.lang-switch-nav a {
  padding: 0.45rem 0.85rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-variation-settings: "opsz" 14, "SOFT" 80;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.3s ease;
  min-height: 36px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lang-switch-nav a:hover:not(.active) {
  color: var(--ink-deep);
  background: rgba(255,255,255,0.45);
}
.lang-switch-nav a.active {
  background: var(--ink-deep);
  color: var(--paper);
  box-shadow: 0 4px 10px -3px rgba(42,31,26,0.35);
}

@media (max-width: 1023px) {
  .lang-switch-nav a { min-height: 44px; }
}
@media (max-width: 600px) {
  .lang-switch-nav a {
    padding: 0.4rem 0.65rem;
    font-size: 0.75rem;
  }
}
/* ============================================
   FLOATING "BETRIEBEN VON" BADGE
   ============================================ */
.powered-by-fab {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: 100px;
  box-shadow: 0 4px 14px -4px rgba(154, 89, 51, 0.20);
  text-decoration: none;
  color: var(--ink-medium);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.powered-by-fab:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
  box-shadow: 0 12px 32px -6px rgba(194, 94, 60, 0.35);
  transform: translateY(-3px);
}
body.mode-advanced .powered-by-fab:hover {
  border-color: var(--sage-deep);
  color: var(--sage-deep);
  box-shadow: 0 12px 32px -6px rgba(84, 115, 73, 0.35);
}
.fab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--accent);
  transition: transform 0.3s ease, color 0.3s ease;
}
body.mode-advanced .fab-icon { color: var(--sage-deep); }
.powered-by-fab:hover .fab-icon {
  transform: rotate(-8deg) scale(1.1);
}
.fab-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}
.fab-kicker {
  font-family: var(--font-body);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  font-weight: 600;
}
.fab-brand {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 16, "SOFT" 80;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-deep);
  transition: color 0.3s ease;
  margin-top: 1px;
}
.powered-by-fab:hover .fab-brand { color: var(--accent-deep); }
body.mode-advanced .powered-by-fab:hover .fab-brand { color: var(--sage-deep); }
.fab-arrow {
  color: var(--ink-soft);
  transition: transform 0.3s ease, color 0.3s ease;
}
.powered-by-fab:hover .fab-arrow {
  transform: translateX(3px);
  color: var(--accent-deep);
}
body.mode-advanced .powered-by-fab:hover .fab-arrow { color: var(--sage-deep); }

/* Mobile: compact pill — hide the small "Betrieben von" kicker, keep brand */
@media (max-width: 600px) {
  .powered-by-fab {
    bottom: 0.6rem;
    right: 0.6rem;
    padding: 0.35rem 0.75rem 0.35rem 0.6rem;
    gap: 0.4rem;
  }
  .fab-kicker { display: none; }
  .fab-brand { font-size: 0.85rem; }
  .fab-icon { width: 18px; height: 18px; }
}