/* ==========================================================================
   Arbeitsheft.online — Brücke zwischen neuem Design und bestehenden Bausteinen
   Lädt nach dem eingebetteten Stylesheet der Seite und nach arbeitsheft.css.
   Alle Regeln hängen an .ah-root, damit sie die alten Regeln (eine Klasse)
   sicher überstimmen und auf Seiten ohne neues Design nichts bewirken.
   Tokens und Komponenten stammen aus arbeitsheft.css (Übergabe des Entwurfs).
   ========================================================================== */

/* --- 1. Gerüst ----------------------------------------------------------- */
/* Das alte body-Layout (Flex-Spalte, Segoe UI, #333) zurücknehmen */
.ah-root { display: block; line-height: 1.5; }

/* Schiene auf langen Seiten stehen lassen (nur im festen Modus, nicht als Overlay) */
@media (min-width: 1101px), (min-width: 900px) and (orientation: landscape) {
  .ah-root .ah-rail { position: sticky; top: 0; align-self: flex-start;
                      height: 100vh; height: 100dvh; }
}
/* Kopfzeile bleibt oben stehen – Punkte und Serie sind immer sichtbar */
.ah-root .ah-topbar { position: sticky; top: 0; z-index: 25; }

/* --- Schiene in der Farbe des Lernbereichs -------------------------------
   Gilt ebenso für die Kopfzeile des Fokus-Modus (.fokus-nav, gleiches data-bereich).
   data-bereich am <nav class="ah-rail"> kommt aus der alten Bereichsnavigation
   (nav-physik → physik). Die Farben sind die der alten Kopfleisten; drei davon
   sind eine Stufe dunkler, damit weiße Schrift mindestens 4,5:1 erreicht
   (Funktionen #e35342, Funktionen 11 #667eea, Physik #ff4966 liegen bei 3,3–3,7).
   Terme bleibt gelb und bekommt dunkle Schrift. Ohne Bereich: Schiefertürkis.
   Die --ah-rail-*-Tokens ersetzen die festen Farbwerte der Schienenregeln in
   arbeitsheft.css; ihre Vorgaben entsprechen genau dem Entwurf. */
.ah-root .ah-rail {
  --ah-rail-hi: #fff;                              /* Text bei Hover / aktuell */
  --ah-rail-kap: var(--ah-accent);                 /* "Kapitel 1" */
  --ah-rail-mark: var(--ah-accent);                /* Strich am aktuellen Eintrag */
  --ah-rail-tint: rgba(229,83,61,.16);             /* Grund am aktuellen Eintrag */
  --ah-rail-mark-text: var(--ah-accent-soft);      /* Nummer/Stand am aktuellen Eintrag */
  --ah-rail-hover: rgba(255,255,255,.06);
  --ah-rail-bar: var(--ah-accent);
  --ah-rail-track: rgba(255,255,255,.16);
  --ah-rail-done: var(--ah-ok-soft);
  --ah-rail-eyebrow: rgba(234,240,239,.5);
  background: var(--ah-rail-bg, var(--ah-ink));
}
.ah-root :is(.ah-rail, .fokus-nav)[data-bereich] {
  --ah-on-ink: #fff;
  --ah-on-ink-75: rgba(255,255,255,.95);
  --ah-on-ink-60: rgba(255,255,255,.95);
  --ah-on-ink-40: rgba(255,255,255,.82);
  --ah-on-ink-line: rgba(255,255,255,.22);
  --ah-on-ink-border: rgba(255,255,255,.45);
  --ah-rail-kap: rgba(255,255,255,.82);
  --ah-rail-mark: #fff;
  --ah-rail-tint: rgba(255,255,255,.2);
  --ah-rail-mark-text: #fff;
  --ah-rail-hover: rgba(255,255,255,.12);
  --ah-rail-bar: #fff;
  --ah-rail-track: rgba(255,255,255,.3);
  --ah-rail-done: #fff;
  --ah-rail-eyebrow: rgba(255,255,255,.75);
}
.ah-root :is(.ah-rail, .fokus-nav)[data-bereich="wiederholung"]  { --ah-rail-bg: #950753; }
.ah-root :is(.ah-rail, .fokus-nav)[data-bereich="funktionen"]    { --ah-rail-bg: #C4402F; }
.ah-root :is(.ah-rail, .fokus-nav)[data-bereich="funktionen-11"] { --ah-rail-bg: linear-gradient(170deg, #5561D4, #6C4499); }
.ah-root :is(.ah-rail, .fokus-nav)[data-bereich="mathe-1213"]    { --ah-rail-bg: linear-gradient(170deg, #1A237E, #283593); }
.ah-root :is(.ah-rail, .fokus-nav)[data-bereich="physik"]        { --ah-rail-bg: #C92A47; }
.ah-root :is(.ah-rail, .fokus-nav)[data-bereich="physik-sek2"]   { --ah-rail-bg: linear-gradient(170deg, #8E44AD, #7E3A9C); }
.ah-root :is(.ah-rail, .fokus-nav)[data-bereich="geometrie"]     { --ah-rail-bg: #9E2997; }
.ah-root :is(.ah-rail, .fokus-nav)[data-bereich="wassersport"]   { --ah-rail-bg: #0E7490; }
.ah-root :is(.ah-rail, .fokus-nav)[data-bereich="edv"]           { --ah-rail-bg: #455A64; }
.ah-root :is(.ah-rail, .fokus-nav)[data-bereich="spiele"]        { --ah-rail-bg: #1F6B4A; }
.ah-root :is(.ah-rail, .fokus-nav)[data-bereich="anleitung"]     { --ah-rail-bg: #34507A; }
.ah-root :is(.ah-rail, .fokus-nav)[data-bereich="terme"] {
  --ah-rail-bg: #FFB11E;
  --ah-on-ink: var(--ah-ink);
  --ah-on-ink-75: rgba(20,52,59,.92);
  --ah-on-ink-60: rgba(20,52,59,.92);
  --ah-on-ink-40: rgba(20,52,59,.78);
  --ah-on-ink-line: rgba(20,52,59,.16);
  --ah-on-ink-border: rgba(20,52,59,.38);
  --ah-rail-hi: var(--ah-ink);
  --ah-rail-kap: rgba(20,52,59,.78);
  --ah-rail-mark: var(--ah-ink);
  --ah-rail-tint: rgba(20,52,59,.1);
  --ah-rail-mark-text: var(--ah-ink);
  --ah-rail-hover: rgba(20,52,59,.07);
  --ah-rail-bar: var(--ah-ink);
  --ah-rail-track: rgba(20,52,59,.2);
  --ah-rail-done: var(--ah-ink);
  --ah-rail-eyebrow: rgba(20,52,59,.7);
}

/* Schienenregeln aus arbeitsheft.css mit den Tokens statt fester Werte */
.ah-root .ah-rail .ah-eyebrow { color: var(--ah-rail-eyebrow); }
.ah-root .ah-rail .ah-rail-chapter .ah-eyebrow { color: var(--ah-rail-kap); }
.ah-root .ah-rail-close { color: var(--ah-on-ink-75); }
.ah-root .ah-rail-close:hover,
.ah-root .ah-rail-foot > *:hover { border-color: var(--ah-rail-mark); color: var(--ah-rail-hi); }
.ah-root .ah-rail-foot > * { color: var(--ah-on-ink-75); }
.ah-root .ah-rail-item { color: var(--ah-on-ink-60); }
.ah-root .ah-rail-item:hover { background: var(--ah-rail-hover); color: var(--ah-rail-hi); }
.ah-root .ah-rail-item[aria-current="true"] {
  background: var(--ah-rail-tint); box-shadow: inset 3px 0 0 var(--ah-rail-mark); color: var(--ah-rail-hi);
}
.ah-root .ah-rail-item[aria-current="true"] > .ah-no,
.ah-root .ah-rail-item[aria-current="true"] > .ah-meta { color: var(--ah-rail-mark-text); }
.ah-root .ah-rail-item.is-done > .ah-meta { color: var(--ah-rail-done); }
.ah-root .ah-rail .ah-tag { border-color: var(--ah-on-ink-border); color: var(--ah-on-ink-75); }
.ah-root .ah-rail .ah-progress-track { background: var(--ah-rail-track); }
.ah-root .ah-rail .ah-progress-bar,
.ah-root .ah-rail .ah-progress-bar.is-done { background: var(--ah-rail-bar); }
.ah-root .ah-rail .ah-progress-label { color: var(--ah-on-ink-75); }
.ah-root .ah-rail a.ah-wordmark:hover,
.ah-root .ah-rail a.ah-eyebrow:hover { color: var(--ah-rail-hi); }

.ah-root .ah-rail a.ah-wordmark { display: block; color: var(--ah-on-ink); text-decoration: none; }
.ah-root .ah-rail a.ah-eyebrow  { display: block; text-decoration: none; }

/* Kapitel des Lernbereichs als Baum (designSeitenteile im Exporter): oberste Ebene die Kapitel,
   das aktuelle (.ah-rail-kapitel) aufgeklappt mit seinen Abschnitten, eingerückt an einer Linie */
.ah-root .ah-rail-item.ah-rail-page {
  min-height: 36px; padding-top: 7px; padding-bottom: 7px; color: var(--ah-on-ink-75); font-size: 14px;
}
.ah-root .ah-rail-item.ah-rail-page::before {
  content: "›"; flex: none; width: 12px; margin-right: -3px; font-size: 15px; line-height: 1; color: var(--ah-on-ink-40);
}
.ah-root .ah-rail-kapitel {
  margin: 4px 0; padding: 2px 0 8px; border-radius: var(--ah-radius); background: var(--ah-rail-hover);
}
.ah-root .ah-rail-item.ah-rail-page.is-aktuell { color: var(--ah-rail-hi); font-weight: 600; }
.ah-root .ah-rail-item.ah-rail-page.is-aktuell::before { content: "▾"; font-size: 12px; color: var(--ah-rail-hi); }
.ah-root .ah-rail-themen {
  display: flex; flex-direction: column; gap: 2px;
  margin-left: 15px; padding-left: 6px; border-left: 1px solid var(--ah-on-ink-border);
}
.ah-root .ah-rail-themen .ah-rail-item { font-size: 13px; min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
/* Gruppen: Kapitel einer Seite mit mehreren Kapiteln (Kajak), Liste ohne aktuellen Eintrag */
.ah-root .ah-rail-group {
  margin: var(--ah-3) 10px var(--ah-1); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ah-on-ink-60); font-weight: 600;
}
.ah-root .ah-rail-group-kapitel { margin-top: var(--ah-5); padding-top: var(--ah-4); border-top: 1px solid var(--ah-on-ink-line); }
/* Untermenü im Bereich (Physik: Elektrik 1–4; „Verwaltung“ unter „Mein Konto“) */
.ah-root .ah-rail-sub { display: block; padding: 10px 10px 2px; font-size: 12.5px; font-weight: 600; color: var(--ah-on-ink-60); }
.ah-root .ah-rail-item.is-sub { padding-left: 24px; }
/* Rennmodus: Aufgabenliste des Rennens statt der Themen (TOCNav.setRaceMode) */
.ah-root .ah-rail.is-rennen .ah-rail-item[data-thema] { display: none; }
.ah-root .ah-rail-race .toc-race-page { padding: 10px 10px 4px; font-size: 13.5px; font-weight: 600; color: var(--ah-rail-hi); }
.ah-root .ah-rail-race .toc-race-page a { color: var(--ah-on-ink-60); text-decoration: none; font-weight: 400; }
.ah-root .ah-rail-race .toc-race-page a:hover { color: var(--ah-rail-hi); }
.ah-root .ah-rail-race .toc-race-thema { padding: 8px 10px 2px; font-size: 11px; letter-spacing: .06em; color: var(--ah-on-ink-40); }
.ah-root .ah-rail-race .toc-race-task {
  display: block; padding: 7px 10px 7px 18px; border-radius: var(--ah-radius-sm);
  font-size: 13px; color: var(--ah-on-ink-60); text-decoration: none;
}
.ah-root .ah-rail-race .toc-race-task:hover { background: var(--ah-rail-hover); color: var(--ah-rail-hi); }
.ah-root .ah-rail-race .toc-race-task.solved { color: var(--ah-rail-done); }
.ah-root .ah-rail-item .ah-tag { flex: none; }

.ah-root .ah-crumb a { color: inherit; text-decoration: none; }
.ah-root .ah-crumb a:hover { color: var(--ah-accent); }

/* Brotkrumen als Navigation: ⌂ Startseite › Lernbereich ▾ › Kapitel ▾ › Abschnitt.
   Der Pfad bleibt ganz, gekürzt wird der Abschnitt; die Listen dürfen nicht in einem
   Element mit overflow: hidden stecken, sonst werden sie abgeschnitten. */
.ah-root .ah-topbar-left { min-width: 0; flex: 1 1 auto; }
.ah-root .ah-topbar-right { flex: none; }
.ah-root .ah-topbar.is-dd-offen { z-index: 100; }
.ah-root .ah-crumb { display: flex; align-items: center; min-width: 0; }
.ah-root .ah-crumb-pfad { display: flex; align-items: center; flex: none; min-width: 0; }
.ah-root .ah-crumb-sep { margin: 0 4px; color: var(--ah-ink-40); }
.ah-root .ah-crumb-start { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 5px 6px 0; }
.ah-root .ah-crumb-haus { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.ah-root .ah-crumb-thema { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.ah-root .ah-crumb-thema[hidden] { display: none; }
.ah-root .ah-crumb-thema strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-root .ah-dd { position: relative; display: inline-flex; min-width: 0; }
.ah-root .ah-dd-knopf {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%;
  padding: 6px; border-radius: var(--ah-radius-sm); color: inherit; font: inherit;
}
.ah-root .ah-dd-knopf:hover,
.ah-root .ah-dd-knopf[aria-expanded="true"] { background: var(--ah-surface-2); color: var(--ah-ink); }
.ah-root .ah-dd-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-root .ah-dd-pfeil { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
                        stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.ah-root .ah-dd-knopf[aria-expanded="true"] .ah-dd-pfeil { transform: rotate(180deg); }
.ah-root .ah-dd-menu {
  position: absolute; top: calc(100% + 8px); left: -10px; z-index: 1;
  display: block; min-width: 250px; max-width: 340px; max-height: calc(100vh - 90px); overflow-y: auto;
  padding: 6px; background: var(--ah-surface); border: 1px solid var(--ah-line);
  border-radius: var(--ah-radius); box-shadow: 0 14px 34px rgba(20,52,59,.16);
}
.ah-root .ah-dd-menu[hidden] { display: none; }
.ah-root .ah-dd-titel {
  display: block; padding: 8px 10px 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ah-ink-55);
}
.ah-root .ah-dd-gruppe { display: block; padding: 10px 10px 2px; font-size: 12px; font-weight: 600; color: var(--ah-ink-55); }
.ah-root .ah-dd-item,
.ah-root .ah-crumb a.ah-dd-item {
  display: block; padding: 9px 10px; border-radius: var(--ah-radius-sm);
  font-size: 14px; line-height: 1.3; color: var(--ah-ink); text-decoration: none;
}
.ah-root .ah-dd-item.is-sub { padding-left: 22px; }
.ah-root .ah-crumb a.ah-dd-item:hover { background: var(--ah-surface-2); color: var(--ah-ink); }
.ah-root .ah-dd-item[aria-current] { font-weight: 600; background: var(--ah-surface-2); box-shadow: inset 3px 0 0 var(--ah-accent); }

/* Anker nicht unter der klebenden Kopfzeile verstecken */
.ah-root .thema,
.ah-root .element { scroll-margin-top: 84px; }

/* Fokus-Modus: nur Inhalt, eigene Kopfzeile der Seite */
html.fokus-modus .ah-root .ah-rail,
html.fokus-modus .ah-root .ah-scrim,
html.fokus-modus .ah-root .ah-topbar,
html.fokus-modus .ah-root .ah-footer { display: none !important; }
html.fokus-thema .ah-root .kapitel.fokus-aktiv > .ah-section-label { display: none; }
html.fokus-modus .ah-root .thema { border-top: 0; padding-top: 0; }
/* Kopfzeile des Fokus-Modus in der Farbe des Lernbereichs; Schrift über die Tokens
   des Bereichs (Terme: dunkel auf Gelb), ohne Bereich wie bisher Schiefertürkis */
.ah-root .fokus-nav { background: var(--ah-rail-bg, var(--ah-ink)); color: var(--ah-on-ink); height: 56px; }
.ah-root .fokus-nav-logo { color: var(--ah-on-ink-75); }
.ah-root .fokus-nav-logo:hover,
.ah-root .fokus-nav-title { color: var(--ah-on-ink); }
.ah-root .fokus-nav-exit { color: var(--ah-on-ink-75); border-color: var(--ah-on-ink-border); }
.ah-root .fokus-nav-exit:hover { background: rgba(255,255,255,.14); color: var(--ah-on-ink); }
.ah-root .fokus-nav[data-bereich="terme"] .fokus-nav-exit:hover { background: rgba(20,52,59,.08); }
.ah-root .fokus-nav-title { font-family: var(--ah-serif); font-weight: 500; font-size: 18px; }

/* Fußzeile */
.ah-root .ah-footer {
  padding: var(--ah-8) var(--ah-10) var(--ah-10); margin-top: var(--ah-10);
  border-top: 1px solid var(--ah-line); text-align: center;
  font-size: 12.5px; line-height: 1.7; color: var(--ah-ink-55);
}
.ah-root .ah-footer a { color: inherit; }
.ah-root .ah-footer a:hover { color: var(--ah-accent); }
.ah-root .ah-footer .ki-hinweis { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ah-root .ah-footer .ki-hinweis img { width: 15px; height: 15px; opacity: .6; }

/* Unsichtbar, aber vorgelesen und in textContent enthalten */
.ah-root .ah-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
                  clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 899px), (orientation: portrait) and (max-width: 1100px) {
  .ah-root .ah-footer { padding: var(--ah-6) var(--ah-5) var(--ah-8); }
  .ah-root .ah-content { padding-bottom: var(--ah-5); }
  /* Brotkrumen zweizeilig: oben klein ⌂ › Lernbereich ▾ › Kapitel ▾, darunter der
     Abschnitt. Die Listen spannen über die ganze Breite unter der Kopfzeile. */
  .ah-root .ah-crumb { flex-direction: column; align-items: flex-start; line-height: 1.3; }
  .ah-root .ah-crumb-pfad { flex: 0 1 auto; max-width: 100%; font-size: 12px; }
  .ah-root .ah-crumb-start-text { display: none; }
  .ah-root .ah-crumb-sep { margin: 0 1px; }
  .ah-root .ah-dd { flex: 0 1 auto; position: static; }
  .ah-root .ah-dd--bereiche { flex-shrink: 3; }   /* erst den Lernbereich kürzen, dann das Kapitel */
  .ah-root .ah-dd-knopf { padding: 4px 6px; }
  .ah-root .ah-crumb-thema { max-width: 100%; }
  .ah-root .ah-crumb-thema > .ah-crumb-sep { display: none; }
  .ah-root .ah-crumb-thema strong { font-size: 15px; font-weight: 600; }
  .ah-root .ah-dd-menu {
    position: fixed; top: calc(var(--nav-height, 64px) + 6px); left: 8px; right: 8px;
    min-width: 0; max-width: none; max-height: calc(100vh - var(--nav-height, 64px) - 20px);
  }
  .ah-root .ah-dd-item { padding: 12px 10px; font-size: 15px; }
}

/* --- 2. Kapitel und Abschnitte ------------------------------------------ */
.ah-root .kapitel { margin-bottom: var(--ah-10); }
.ah-root .kapitel-titel.ah-h1 {
  color: var(--ah-ink); border-bottom: 0; padding-bottom: 0; margin-bottom: var(--ah-8);
}

.ah-root .thema { margin: 0; padding-top: var(--ah-8); border-top: 1px solid var(--ah-line); }
.ah-root .thema + .thema { margin-top: var(--ah-10); }

.ah-root .thema-titel {
  display: block; position: relative; padding: 0 76px 0 0; margin: 0 0 var(--ah-5);
  border-left: 0; color: var(--ah-ink); font-size: inherit; list-style: none;
}
.ah-root .thema:not([open]) > .thema-titel { margin-bottom: 0; }
.ah-root .thema-titel .ah-section-label { display: block; }
.ah-root .ah-thema-name {
  display: block; margin-top: 6px;
  font-family: var(--ah-serif); font-size: clamp(22px, 2.3vw, 30px); font-weight: 500;
  letter-spacing: -.015em; line-height: 1.22;
}
.ah-root .ah-thema-name .ah-tag,
.ah-root .element-label .ah-tag {
  vertical-align: 4px; margin-left: 4px; font-family: var(--ah-sans);
  border-color: var(--ah-line-strong); color: var(--ah-ink-55);
}
.ah-root .thema:not([open]) .ah-thema-name { color: var(--ah-ink-55); }

/* Auf-/Zuklappen: Winkel rechts, QR-Knopf daneben */
.ah-root .thema-titel::after,
.ah-root .element > summary.element-header::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px;
  border-right: 1.5px solid var(--ah-ink-40); border-bottom: 1.5px solid var(--ah-ink-40);
  transform: translateY(-70%) rotate(45deg); transition: transform .15s;
}
.ah-root .thema-titel::after { right: 48px; }
.ah-root .thema:not([open]) > .thema-titel::after,
.ah-root .element:not([open]) > summary.element-header::after { transform: translateY(-30%) rotate(-45deg); }

.ah-root .qr-button {
  right: 6px; width: 32px; height: 32px; border-radius: var(--ah-radius-sm);
  background: transparent; color: var(--ah-ink-40); opacity: 1;
}
.ah-root .qr-button:hover { background: var(--ah-surface-2); color: var(--ah-ink); }
.ah-root .qr-button svg { width: 15px; height: 15px; }

/* --- 3. Blöcke (Erklärung, Beispiel, Aufgaben …) ------------------------ */
.ah-root .element {
  margin: var(--ah-3) 0; background: var(--ah-surface); border: 1px solid var(--ah-line);
  border-left-width: 1px; border-radius: var(--ah-radius); box-shadow: none; overflow: hidden;
}
.ah-root .element > summary.element-header,
.ah-root .aufgabe > summary {
  display: flex; align-items: center; gap: var(--ah-3); position: relative;
  min-height: 56px; padding: 12px 84px 12px 18px;
  background: transparent; color: var(--ah-ink); font-weight: 400; cursor: pointer;
}
.ah-root .element > summary.element-header::after { right: 52px; }
.ah-root .element > summary.element-header:hover { background: #fff; }
.ah-root .element[open] > summary.element-header { border-bottom: 1px solid var(--ah-line-soft); }
.ah-root .element-icon { display: none; }

.ah-root .element-label {
  flex: 1; min-width: 0; font-family: var(--ah-serif); font-size: 18px; line-height: 1.3;
}
/* Dachzeile: Art und Nummer des Blocks */
.ah-root .ah-el-art,
.ah-root .erklaerung > summary .element-label::before {
  display: block; margin-bottom: 3px;
  font-family: var(--ah-sans); font-size: 10.5px; line-height: 1.4; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; color: var(--ah-ink-55);
}
.ah-root .erklaerung > summary .element-label::before { content: "Erkl\00E4rung"; }
/* Erklärung ohne eigenen Titel: kein doppeltes "Erklärung" */
.ah-root .erklaerung > summary .element-label.ah-el-nur-art::before { content: none; }

/* Aufgaben: Dachzeile in Korall wie "Aufgaben-Set 1.4.1" im Entwurf */
.ah-root .stack-aufgabe .ah-el-art,
.ah-root .aufgaben-set .ah-el-art,
.ah-root .aufgaben-pool .ah-el-art,
.ah-root .cloze-aufgabe .ah-el-art,
.ah-root .mc-aufgabe .ah-el-art,
.ah-root .truefalse-aufgabe .ah-el-art,
.ah-root .ku-kset .ah-el-art,
.ah-root .ku-wset .ah-el-art,
.ah-root .ku-eset .ah-el-art,
.ah-root .aufgabe .ah-el-art { color: var(--ah-accent); }

/* Block mit Inhalt breiter als die Lesespalte (JSXGraph bis 900 px): tritt
   symmetrisch heraus, gesetzt von arbeitsheft-seite.js; notfalls waagerecht scrollen */
.ah-root .element.ah-breit {
  --ah-w: min(var(--ah-breite), var(--ah-platz, 100%));
  width: var(--ah-w); max-width: none;
  margin-left: calc((100% - var(--ah-w)) / 2);
}
.ah-root .element.ah-breit > .element-content { overflow-x: auto; }

/* Beispiel: Hinweisfläche statt Karte */
.ah-root .beispiel { background: var(--ah-surface-2); border-color: transparent; }
.ah-root .beispiel > summary.element-header:hover { background: #EFE9DF; }
.ah-root .beispiel[open] > summary.element-header { border-bottom-color: var(--ah-line); }
/* Erweitert: gestrichelt, zum Weiterlesen */
.ah-root .erweitert { border-style: dashed; border-color: var(--ah-line-strong); background: transparent; }

/* Stand in der Kopfzeile eines Sets/Pools ("0/2") */
.ah-root .set-progress,
.ah-root .pool-progress {
  margin: 0; font-family: var(--ah-sans); font-size: 12px; color: var(--ah-ink-55);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Inhalt */
.ah-root .element-content {
  padding: var(--ah-5) var(--ah-6) var(--ah-6); background: transparent;
  font-family: var(--ah-serif); font-size: 17.5px; line-height: 1.6; color: var(--ah-ink-80);
}
.ah-root .element-content p { margin: 0 0 .75em; }
.ah-root .element-content p:last-child { margin-bottom: 0; }
.ah-root .element-content strong { font-weight: 600; color: var(--ah-ink); }
.ah-root .element-content ul,
.ah-root .element-content ol { margin: 0 0 .75em 1.3em; }
.ah-root .element-content li { margin: .2em 0; }
.ah-root .element-content h3 {
  margin: 1.2em 0 .45em; font-family: var(--ah-serif); font-size: 21px; font-weight: 500;
  color: var(--ah-ink); letter-spacing: -.01em;
}
.ah-root .element-content h4 {
  margin: 1.1em 0 .4em; font-family: var(--ah-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ah-ink-55);
}
.ah-root .element-content h5 {
  margin: 1em 0 .35em; font-family: var(--ah-serif); font-size: 17.5px; font-weight: 600; color: var(--ah-ink);
}
.ah-root .element-content h3:first-child,
.ah-root .element-content h4:first-child { margin-top: 0; }
.ah-root .element-content code {
  font-size: .88em; background: var(--ah-surface-2); padding: 1px 5px; border-radius: 4px;
}
.ah-root .element-content a { color: var(--ah-ink); text-decoration-color: var(--ah-accent); text-underline-offset: 2px; }
.ah-root .element-content a:hover { color: var(--ah-accent); }

/* Tabellen im Stil von .ah-table. Das alte Stylesheet macht Tabellen in Blöcken
   zu display:block (waagerecht scrollbar am Handy); so bleiben sie, nur so breit
   wie ihr Inhalt statt mit blauem Kopf über die volle Spalte. */
.ah-root .element-content table.content-table {
  width: max-content; max-width: 100%; margin: var(--ah-4) 0; border-collapse: collapse;
  font-family: var(--ah-serif); font-size: 17px; background: var(--ah-surface);
  border: 1px solid var(--ah-line); border-radius: var(--ah-radius); box-shadow: none;
}
.ah-root .content-table thead tr,
.ah-root .content-table tbody tr,
.ah-root .content-table tbody tr:nth-of-type(even),
.ah-root .content-table tbody tr:hover { background: transparent; color: inherit; }
.ah-root .content-table th {
  text-align: left; padding: 10px 18px; color: var(--ah-ink-55);
  font-weight: 400; font-size: 15px; border: 0; border-bottom: 1px solid var(--ah-line);
}
.ah-root .content-table td { padding: 10px 18px; border: 0; border-bottom: 1px solid var(--ah-line-soft); }
.ah-root .content-table tr:last-child td { border-bottom: 0; }
/* Anleitungen für Lehrkräfte: ganze Sätze in den Zellen – umbrechen statt waagerecht scrollen */
.ah-root:has(.ah-rail[data-bereich="anleitung"]) .element-content table.content-table { width: auto; white-space: normal; }

.ah-root .jxgbox { border-color: var(--ah-line); border-radius: var(--ah-radius-sm); background: #fff; }
.ah-root .content-bild { box-shadow: none; border: 1px solid var(--ah-line); }

/* Experiment: Abschnittsüberschriften (Material, Durchführung …) ohne Grün */
.ah-root .experiment .element-content h3 {
  font-size: 19px; border-bottom: 1px solid var(--ah-line); padding-bottom: 3px; color: var(--ah-ink);
}
.ah-root .experiment .element-content h4 { color: var(--ah-ink); }
.ah-root .experiment-preview { font-family: var(--ah-sans); font-size: 13px; color: var(--ah-ink-55); opacity: 1; }

/* --- 4. Aufgaben: Sets, Pools, STACK ------------------------------------ */
/* Multiple Choice und Wahr/Falsch */
.ah-root .mc-option {
  padding: 12px 16px; margin: 8px 0; background: #fff; border: 1px solid var(--ah-line-strong);
  border-radius: 7px; font-family: var(--ah-serif); font-size: 17px; color: var(--ah-ink);
}
.ah-root .mc-option:hover { background: #fff; border-color: var(--ah-ink); }
.ah-root .mc-option input[type="radio"],
.ah-root .mc-option input[type="checkbox"] { accent-color: var(--ah-ink); }
.ah-root .mc-option.correct { background: var(--ah-ok-bg); border-color: var(--ah-ok); }
.ah-root .mc-option.incorrect { background: #FDF1EE; border-color: var(--ah-accent); }
.ah-root .mc-feedback {
  border: 0; border-radius: var(--ah-radius); padding: var(--ah-4) var(--ah-5);
  font-family: var(--ah-serif); font-size: 16.5px; font-weight: 400; color: var(--ah-ink);
}
.ah-root .mc-feedback.success { background: var(--ah-ok-bg); color: var(--ah-ink); border: 0; }
.ah-root .mc-feedback.error { background: #FDF1EE; color: var(--ah-ink); border: 0; }
.ah-root .truefalse-btn {
  min-height: 44px; padding: 0 20px; border-radius: 7px; background: #fff;
  border: 1px solid var(--ah-line-strong); color: var(--ah-ink);
  font-family: var(--ah-sans); font-size: 14px; font-weight: 600;
}
.ah-root .truefalse-btn:hover:not(:disabled) { border-color: var(--ah-ink); }

/* Schrittkreise wie .ah-dots */
.ah-root .set-navigation,
.ah-root .pool-navigation {
  gap: 6px; align-items: center; margin-bottom: var(--ah-5); padding-bottom: var(--ah-4);
  border-bottom: 1px solid var(--ah-line-soft); font-family: var(--ah-sans);
}
.ah-root .set-nav-btn,
.ah-root .pool-nav-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ah-line-strong);
  background: #fff; color: var(--ah-ink-55); font-size: 13px; padding: 0;
}
.ah-root .set-nav-btn .nav-number,
.ah-root .pool-nav-btn .nav-number { font-size: 13px; font-weight: 600; line-height: 1; }
/* Die Zeichen im Kreis (✓ ✗ ○ 🔒) trägt hier die Farbe bzw. der gestrichelte Rand */
.ah-root .set-nav-btn .nav-status,
.ah-root .pool-nav-btn .nav-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ah-root .set-nav-btn:hover:not(:disabled),
.ah-root .pool-nav-btn:hover:not(:disabled) { border-color: var(--ah-ink); background: #fff; }
.ah-root .set-nav-btn.solved,
.ah-root .pool-nav-btn.solved { border-color: var(--ah-ok); background: var(--ah-ok-bg); color: var(--ah-ok); }
.ah-root .set-nav-btn.solved .nav-status,
.ah-root .pool-nav-btn.solved .nav-status { color: var(--ah-ok); }
.ah-root .set-nav-btn.attempted,
.ah-root .pool-nav-btn.attempted { border-color: var(--ah-accent); background: #FDF1EE; color: var(--ah-accent); }
.ah-root .set-nav-btn.attempted .nav-status,
.ah-root .pool-nav-btn.attempted .nav-status,
.ah-root .set-nav-btn.attempted .nav-number { color: var(--ah-accent); }
.ah-root .set-nav-btn.active,
.ah-root .pool-nav-btn.active { border-color: var(--ah-ink); background: var(--ah-ink); color: #fff; }
.ah-root .set-nav-btn.active .nav-number,
.ah-root .set-nav-btn.active .nav-status,
.ah-root .pool-nav-btn.active .nav-number,
.ah-root .pool-nav-btn.active .nav-status { color: #fff; }
.ah-root .set-nav-btn:disabled { border-style: dashed; background: transparent; opacity: 1; color: var(--ah-ink-40); }

/* Fragetext */
.ah-root .stack-question { font-size: 18.5px; line-height: 1.55; color: var(--ah-ink); margin-bottom: var(--ah-4); }

/* Eingaben wie .ah-input, aber in der Zeile */
.ah-root .stack-inputs input[type="text"],
.ah-root .stack-question input[type="text"],
.ah-root .element-content input[type="text"],
.ah-root .element-content input[type="number"],
.ah-root .element-content textarea {
  background: #fff; border: 1.5px solid var(--ah-ink); border-radius: 7px;
  padding: 8px 12px; min-height: 42px;
  font-family: var(--ah-serif); font-size: 17px; color: var(--ah-ink);
}
.ah-root .element-content input[type="text"]::placeholder { color: var(--ah-ink-40); }
.ah-root .element-content input:focus-visible,
.ah-root .element-content textarea:focus-visible,
.ah-root .element-content select:focus-visible { outline: 2px solid var(--ah-accent); outline-offset: 1px; border-color: var(--ah-ink); }
.ah-root .element-content select {
  background: #fff; border: 1.5px solid var(--ah-ink); border-radius: 7px; padding: 6px 10px;
  font-family: var(--ah-serif); font-size: 16.5px; color: var(--ah-ink);
}

/* Knöpfe wie .ah-btn: Prüfen dunkel, Weiter in Korall, Nebenaktionen hell */
.ah-root .stack-buttons,
.ah-root .cloze-buttons { gap: var(--ah-2); align-items: center; }
.ah-root .stack-submit-btn,
.ah-root .cloze-check-btn,
.ah-root .mc-check-btn,
.ah-root .mc-reset-btn,
.ah-root .truefalse-reset-btn,
.ah-root .kset-round-grade-btn,
.ah-root .set-weiter-btn,
.ah-root .stack-validate-btn,
.ah-root .stack-reload-btn,
.ah-root .set-reload-btn,
.ah-root .cloze-reset-btn,
.ah-root .cloze-new-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 20px; border-radius: 7px; border: 1px solid transparent;
  font-family: var(--ah-sans); font-size: 14px; font-weight: 600; line-height: 1.2;
  box-shadow: none; transform: none; transition: background .15s, border-color .15s, color .15s;
}
.ah-root .stack-submit-btn,
.ah-root .cloze-check-btn,
.ah-root .mc-check-btn,
.ah-root .kset-round-grade-btn { background: var(--ah-ink); color: #fff; }
.ah-root .stack-submit-btn:hover:not(:disabled),
.ah-root .cloze-check-btn:hover:not(:disabled),
.ah-root .mc-check-btn:hover:not(:disabled),
.ah-root .kset-round-grade-btn:hover:not(:disabled) { background: var(--ah-accent); color: #fff; }
.ah-root .set-weiter-btn { background: var(--ah-accent); color: #fff; }
.ah-root .set-weiter-btn:hover:not(:disabled) { background: var(--ah-accent-hi); }
.ah-root .stack-validate-btn,
.ah-root .stack-reload-btn,
.ah-root .set-reload-btn,
.ah-root .cloze-reset-btn,
.ah-root .cloze-new-btn,
.ah-root .mc-reset-btn,
.ah-root .truefalse-reset-btn {
  background: #fff; color: var(--ah-ink); border-color: var(--ah-line-strong); font-weight: 500;
}
.ah-root .stack-validate-btn:hover:not(:disabled),
.ah-root .stack-reload-btn:hover:not(:disabled),
.ah-root .set-reload-btn:hover:not(:disabled),
.ah-root .cloze-reset-btn:hover:not(:disabled),
.ah-root .cloze-new-btn:hover:not(:disabled),
.ah-root .mc-reset-btn:hover:not(:disabled),
.ah-root .truefalse-reset-btn:hover:not(:disabled) { background: #fff; border-color: var(--ah-ink); color: var(--ah-ink); }
.ah-root .set-reload-btn { min-height: 32px; padding: 0 12px; font-size: 12.5px; margin-left: 4px; }
.ah-root .stack-submit-btn:disabled,
.ah-root .cloze-check-btn:disabled,
.ah-root .mc-check-btn:disabled,
.ah-root .set-weiter-btn:disabled { background: var(--ah-track); color: var(--ah-ink-40); cursor: not-allowed; }
.ah-root .stack-submit-btn:focus-visible,
.ah-root .set-weiter-btn:focus-visible,
.ah-root .stack-validate-btn:focus-visible,
.ah-root .cloze-check-btn:focus-visible { outline: 2px solid var(--ah-accent); outline-offset: 2px; }

/* Rückmeldung wie .ah-feedback */
.ah-root .stack-feedback.active,
.ah-root .cloze-feedback {
  border: 0; border-radius: var(--ah-radius); padding: var(--ah-4) var(--ah-5);
  background: var(--ah-surface-2); color: var(--ah-ink-80);
  font-family: var(--ah-serif); font-size: 16.5px; line-height: 1.55;
}
.ah-root .stack-feedback.success,
.ah-root .cloze-feedback.success { background: var(--ah-ok-bg); color: var(--ah-ink); }
.ah-root .stack-feedback.error,
.ah-root .cloze-feedback.error { background: #FDF1EE; color: var(--ah-ink); }
.ah-root .stack-feedback.partial { background: #FBF3E4; color: var(--ah-ink); }
.ah-root .stack-feedback.info { background: var(--ah-surface-2); color: var(--ah-ink); }

.ah-root .stack-status-box {
  border-radius: var(--ah-radius-sm); border-left-width: 3px; padding: 10px 14px;
  font-family: var(--ah-sans); font-size: 14px; font-weight: 600;
}
.ah-root .stack-status-box .stack-status-icon { font-size: 1.25em; }
.ah-root .stack-status-box.success { background: #E3F0E6; color: #2F5A3B; border-left-color: var(--ah-ok); }
.ah-root .stack-status-box.partial { background: #F8EBD2; color: #6B4A12; border-left-color: #C98A1B; }
.ah-root .stack-status-box.error   { background: #FBE3DE; color: #8A2A1B; border-left-color: var(--ah-accent); }

/* Prüfanzeige neben dem Eingabefeld ("Eingabe überprüfen"): hell statt Blau */
.ah-root .stack-validation-success,
.ah-root .stack-validation-error {
  background: #fff; color: var(--ah-ink); border: 1px solid var(--ah-line-strong);
  border-radius: var(--ah-radius-sm); padding: 6px 12px; font-weight: 400;
}
.ah-root .stack-validation-error { border-color: var(--ah-accent); background: #FDF1EE; }

/* Markierung je Eingabefeld nach dem Bewerten */
.ah-root .stack-input-status.success { background: var(--ah-ok); }
.ah-root .stack-input-status.partial { background: #C98A1B; }
.ah-root .stack-input-status.error   { background: var(--ah-accent); }

/* Vergleich "Deine Antwort | Musterlösung" */
.ah-root .stack-answer-compare > div {
  border-radius: var(--ah-radius-sm); border-color: var(--ah-line); background: #fff; padding: 10px 14px;
}
.ah-root .stack-answer-compare .compare-label {
  font-family: var(--ah-sans); font-size: 10.5px; letter-spacing: .14em; opacity: 1; color: var(--ah-ink-55);
}
.ah-root .stack-answer-compare .compare-student.is-wrong { background: #FDF1EE; border-color: #F3C7BD; }
.ah-root .stack-answer-compare .compare-student.is-right,
.ah-root .stack-answer-compare .compare-teacher { background: var(--ah-ok-bg); border-color: #CFE3D5; }
.ah-root .prt-feedback.partial { background: #FBF3E4; border-left-color: #C98A1B; }

/* "Dieses Thema ausführlich anschauen" (Sets, Pools, Karteikasten): großer Knopf unter der Aufgabe */
.ah-root .thema-link-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--ah-4); min-height: 44px;
  padding: 10px 20px; background: var(--ah-surface); border: 1.5px solid var(--ah-ink); border-radius: 7px; box-shadow: none;
  font-family: var(--ah-sans); font-size: 15px; font-weight: 600; color: var(--ah-ink);
  text-decoration: none;
}
.ah-root .thema-link-btn:hover { background: var(--ah-ink); border-color: var(--ah-ink); color: #fff; }

.ah-root .stack-loading,
.ah-root .cloze-loading { color: var(--ah-ink-55); font-family: var(--ah-sans); font-size: 14px; font-style: normal; }

/* --- 5. Rennen und Menüs ------------------------------------------------- */
.ah-root .race-panel { background: var(--ah-ink); border-radius: 0; box-shadow: none; font-family: var(--ah-sans); }
.ah-root .race-panel.sticky { top: var(--nav-height, 62px); }
.ah-root .thema-qr-menu,
.ah-root .qr-modal-content { font-family: var(--ah-sans); }
/* Lehrermodus: Pille „Test: n Aufgaben →“ (TestAuswahl). Unten links läge sie auf dem Fuß
   der Schiene (Fokus, Rennen); rechts unten ist im neuen Gerüst frei. Die geöffnete
   Overlay-Schiene deckte sie nicht ab (z-index 40 gegen 900) – dann ausblenden. */
.ah-root .test-entwurf-pill { left: auto; right: var(--ah-4); }
@media (max-width: 899px), (orientation: portrait) and (max-width: 1100px) {
  .ah-root .ah-shell[data-rail="open"] ~ .test-entwurf-pill { display: none; }
}

/* --- 5a. Kompetenzraster, Wiederholung, Karteikasten -------------------- */
/* Seiten aus testmodus: Indigo (Raster) und Türkis (Karteikasten) auf die Farben des
   Entwurfs. Die Stufen und richtig/falsch bleiben als Zustand erkennbar. */
.ah-root .kr-gesperrt { background: var(--ah-surface-2); border-left-color: var(--ah-accent); color: var(--ah-ink); }
.ah-root .kr-bereich-titel { color: var(--ah-ink-55); border-bottom-color: var(--ah-line); }
.ah-root .kr-kompetenz { border-color: var(--ah-line); background: var(--ah-surface); }
.ah-root .kr-kompetenz.ist-ziel { border-color: var(--ah-accent); box-shadow: inset 3px 0 0 var(--ah-accent); }
.ah-root .kr-kompetenz.ist-belegt { border-color: var(--ah-ok); box-shadow: inset 3px 0 0 var(--ah-ok); }
.ah-root .kr-beispiel { color: var(--ah-ink-80); }
.ah-root .kr-beispiel-label { color: var(--ah-ink-55); font-family: var(--ah-sans); }
.ah-root .kr-stufe { border-color: var(--ah-line-strong); background: #fff; color: var(--ah-ink); font-family: var(--ah-sans); }
.ah-root .kr-stufe:hover { background: var(--ah-surface-2); }
.ah-root .kr-stufe-0.aktiv { background: var(--ah-accent); border-color: var(--ah-accent); color: #fff; }
.ah-root .kr-stufe-2.aktiv { background: var(--ah-ok); border-color: var(--ah-ok); color: #fff; }
.ah-root .kr-plan,
.ah-root .kr-klasse-hinweis { background: var(--ah-surface-2); color: var(--ah-ink); }
.ah-root .kr-plan-titel,
.ah-root .kr-klasse-hinweis .kr-code { color: var(--ah-ink); }
.ah-root .kr-klasse-hinweis span,
.ah-root .kr-verlassen { color: var(--ah-ink-55); }
.ah-root .kr-verlassen { border-color: var(--ah-line-strong); }
.ah-root .kr-tag { border-color: var(--ah-line-strong); color: var(--ah-ink-80); }
.ah-root .kr-tag-ziel { background: var(--ah-ink); border-color: var(--ah-ink); color: #fff; }
.ah-root .kr-aufgabe-kompetenz { color: var(--ah-accent); font-family: var(--ah-sans); }
/* Knöpfe wie oben: Training starten dunkel, Ziele vorschlagen hell */
.ah-root .kr-plan-aktionen button {
  min-height: 44px; padding: 0 20px; border-radius: 7px; border: 1px solid transparent;
  font-family: var(--ah-sans); font-size: 14px; font-weight: 600; background: var(--ah-ink); color: #fff;
}
.ah-root .kr-plan-aktionen button:hover:not(:disabled) { background: var(--ah-accent); }
.ah-root .kr-plan-aktionen .kr-vorschlag-btn { background: #fff; color: var(--ah-ink); border-color: var(--ah-line-strong); font-weight: 500; }
.ah-root .kr-plan-aktionen .kr-vorschlag-btn:hover:not(:disabled) { background: #fff; border-color: var(--ah-ink); }
.ah-root .kr-plan-aktionen button:disabled { background: var(--ah-track); color: var(--ah-ink-40); }

.ah-root .wh-seite-text,
.ah-root .gw-seite-text,
.ah-root .gw-ablagen-text { color: var(--ah-ink-80); }
.ah-root .gw-klasse-hinweis { background: var(--ah-surface-2); color: var(--ah-ink); }
.ah-root .gw-ablage { border: 1px solid var(--ah-line-strong); border-radius: var(--ah-radius-lg); background: var(--ah-surface); color: var(--ah-ink); }
.ah-root .gw-ablage:hover:not(:disabled) { box-shadow: none; border-color: var(--ah-ink); }
.ah-root .gw-ablage.aktiv { border-color: var(--ah-ink); background: var(--ah-ink); color: #fff; }
.ah-root .gw-filter-art { border: 1px solid var(--ah-line-strong); border-radius: var(--ah-radius); background: var(--ah-surface); color: var(--ah-ink); }
.ah-root .gw-filter-art:hover { transform: none; box-shadow: none; border-color: var(--ah-ink); }
.ah-root .gw-filter-art[aria-pressed="true"] { border-color: var(--ah-ink); background: var(--ah-ink); color: #fff; }
.ah-root .gw-filter-titel { color: var(--ah-ink); }
.ah-root .gw-ablage.gesperrt { border-color: var(--ah-line); background: transparent; color: var(--ah-ink-40); }
.ah-root .gw-stapel span { background: repeating-linear-gradient(0deg, var(--ah-surface-2) 0 3px, var(--ah-line-strong) 3px 4px); }
.ah-root .gw-ablage.aktiv .gw-stapel span { background: repeating-linear-gradient(0deg, var(--ah-on-ink) 0 3px, var(--ah-accent-soft) 3px 4px); }
/* Die Karte wie ein Block der Kursseite: Rahmen, Schrift der Lesespalte */
.ah-root .gw-karte-rahmen { border: 1px solid var(--ah-line); border-radius: var(--ah-radius-lg); background: var(--ah-surface); box-shadow: none; }
.ah-root .gw-karte-kopf { color: var(--ah-ink-55); }
.ah-root .gw-karte-ablage { background: var(--ah-ink); }
.ah-root .gw-karte { font-family: var(--ah-serif); font-size: 17.5px; line-height: 1.6; color: var(--ah-ink-80); }
.ah-root .gw-ergebnis.richtig { background: var(--ah-ok-bg); color: var(--ah-ink); }
.ah-root .gw-ergebnis.falsch { background: #FDF1EE; color: var(--ah-ink); }
.ah-root .gw-weiter { min-height: 44px; border-radius: 7px; background: var(--ah-accent); font-size: 14px; font-weight: 600; }
.ah-root .gw-weiter:hover { background: var(--ah-accent-hi); }
.ah-root .gw-nachlesen { min-height: 44px; box-sizing: border-box; border: 1.5px solid var(--ah-ink); border-radius: 7px; background: var(--ah-surface);
  color: var(--ah-ink); font-family: var(--ah-sans); font-size: 14px; font-weight: 600; }
.ah-root .gw-nachlesen:hover { background: var(--ah-ink); color: #fff; }
.ah-root .gw-fuss,
.ah-root .gw-neu { color: var(--ah-ink-55); }

/* --- 6. Schmale Fenster ------------------------------------------------ */
/* Unter 960 px blendet das alte Stylesheet die QR-Knöpfe aus: rechts nur der Winkel */
@media (max-width: 960px) {
  .ah-root .element > summary.element-header,
  .ah-root .aufgabe > summary { padding: 12px 40px 12px 16px; }
  .ah-root .element > summary.element-header::after { right: 18px; }
  .ah-root .thema-titel { padding-right: 32px; }
  .ah-root .thema-titel::after { right: 8px; }
  .ah-root .element-content { padding: var(--ah-4) var(--ah-4) var(--ah-5); font-size: 17px; }
  /* alte Regel: width 100 % – quetschte den Titel in eine Spalte */
  .ah-root .set-progress,
  .ah-root .pool-progress { width: auto; margin-top: 0; text-align: right; }
  .ah-root .set-nav-btn,
  .ah-root .pool-nav-btn { width: 44px; height: 44px; min-width: 0; padding: 0; }
}

/* --- 7. Druck ------------------------------------------------------------ */
@media print {
  .ah-root .ah-footer, .ah-root .ah-skip { display: none !important; }
  .ah-root .element { break-inside: avoid; }
}