/**
 * Card CX: theme loop framing + GrammarXP cross-sell (AVO look).
 * Loaded on demand from app.js / quiz.js.
 */

.learn-outline {
  margin: 1rem 0 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.learn-outline > .learn-outline-title,
.learn-outline > h4 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: #0f172a;
}

.learn-outline ul {
  margin: 0;
  padding-left: 1.15rem;
  color: #334155;
  font-size: 0.92rem;
}

.learn-outline li {
  margin-bottom: 0.3rem;
}

.loop-callout {
  margin: 1rem 0 1.35rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid #bfdbfe;
  background: linear-gradient(145deg, #eff6ff 0%, #ffffff 75%);
  color: #1e3a8a;
}

.loop-callout-eyebrow {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1d4ed8;
}

.loop-callout p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #1e3a8a;
}

.loop-callout strong {
  color: #1e40af;
}

.grammarxp-teaser {
  margin: 1.5rem 0 0.5rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid #99f6e4;
  background: linear-gradient(160deg, #f0fdfa 0%, #ffffff 70%);
  color: #134e4a;
}

.grammarxp-teaser-label {
  display: inline-block;
  margin: 0 0 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  background: #ccfbf1;
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.grammarxp-teaser p {
  margin: 0 0 0.65rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #115e59;
}

.grammarxp-teaser-link {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.92rem;
  color: #0f766e;
  text-decoration: none;
  border-bottom: 2px solid #5eead4;
  padding-bottom: 1px;
}

.grammarxp-teaser-link:hover {
  color: #115e59;
  border-bottom-color: #0f766e;
}

/* Mathe-Karten: Aufgabe, Mini-Rechnung, LK-Zusatz, Vorgaben */

.math-task {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border-left: 4px solid #64748b;
  border-radius: 8px;
  background: #f8fafc;
}

.math-task p {
  margin: 0 0 0.45rem;
  font-style: italic;
  color: #0f172a;
}

.math-task .math-task-source {
  margin: 0.4rem 0 0;
  font-style: normal;
  font-size: 0.82rem;
  color: #64748b;
}

.math-mini {
  margin: 1rem 0 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
}

.math-mini > p:first-child {
  margin-top: 0;
}

.math-lk {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border: 1px dashed #a78bfa;
  border-radius: 10px;
  background: #faf5ff;
  font-size: 0.93rem;
}

.math-vorgaben {
  margin: 1.25rem 0 0.5rem;
  padding: 0.8rem 1rem;
  border-left: 4px solid #10b981;
  border-radius: 8px;
  background: #ecfdf5;
  font-size: 0.9rem;
  color: #065f46;
}

/* Kasten „Frag deine Lehrkraft“: Angabe nicht öffentlich ({{frag:…}}, scripts/mathe/data/frag-lehrkraft.json) */
.math-frag {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border-left: 4px solid #0ea5e9;
  border-radius: 8px;
  background: #f0f9ff;
  font-size: 0.93rem;
  color: #0c4a6e;
}

.math-frag p,
.math-frag ul {
  margin: 0.4rem 0;
}

.math-frag .math-frag-title {
  margin-top: 0;
}

.math-figure {
  margin: 1rem 0;
  padding: 0.75rem;
  border-radius: 8px;
  background: #f8fafc;
  overflow-x: auto;
}

.math-figure svg {
  display: block;
  width: 100%;
  margin: 0 auto;
}

/* Handy: Abbildung fast randlos, damit Beschriftungen bei 390 px mindestens ~12 px groß bleiben. */
@media (max-width: 480px) {
  .math-figure { padding: 0.5rem 0.25rem; }
  .math-task .math-figure { margin-left: -12px; margin-right: -12px; }
}

/* Vektorname: Pfeil per CSS, nicht Unicode-Kombinationszeichen (zeigt oft als □). */
.vec {
  position: relative;
  display: inline-block;
  padding-top: 0.4em;
  line-height: 1.05;
}

.vec::before {
  content: "→";
  position: absolute;
  top: -0.05em;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.7em;
  line-height: 1;
  pointer-events: none;
}

.mvec,
.mfrac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1.15;
  font-size: 0.92em;
  margin: 0 0.18em;
  color: inherit;
}

.mvec {
  position: relative;
  padding: 0.12em 0.55em;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 0.45em / 0.55em;
  min-width: 1.1em;
}

.mvec > span {
  display: block;
  text-align: center;
  white-space: nowrap;
}

/* Matrix: Spalten mit festem Abstand */
.mmat > span {
  display: flex;
  gap: 0.9em;
  justify-content: center;
}

.mmat i {
  font-style: normal;
  min-width: 1.6em;
  text-align: center;
}

.mfrac > span:first-child {
  padding: 0 0.15em;
  border-bottom: 1px solid currentColor;
}

.math-table {
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.92rem;
}

.math-table th,
.math-table td {
  padding: 0.35rem 0.7rem;
  border: 1px solid #cbd5e1;
  text-align: center;
}

.math-table th {
  background: #f1f5f9;
}

.math-figure figcaption {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.88rem;
  color: #64748b;
}

/* Fachwort antippen: kurze Erklärung in einer Blase darüber (public/src/begriffe.js); nächster Tipp schließt sie.
   Markup: <span class="wort" tabindex="0" role="button">Begriff<span class="wort-erkl">Erklärung</span></span> */
.wort {
  cursor: pointer;
  border-bottom: 1.5px dotted currentColor;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.wort:focus-visible { outline: 2px solid var(--ks-mark, #2563eb); outline-offset: 2px; border-radius: 3px; }
.wort.is-open { background: var(--lk-hl-soft, rgba(37, 99, 235, .1)); border-radius: 3px; }
.wort > .wort-erkl { display: none; }
.wort-blase {
  position: fixed;
  z-index: 10050;
  max-width: min(18rem, calc(100vw - 24px));
  padding: .55rem .75rem;
  border-radius: 10px;
  background: var(--lk-ink, #1e293b);
  color: var(--lk-paper, #fff);
  font-size: .88rem;
  font-weight: 450;
  line-height: 1.45;
  box-shadow: 0 6px 24px rgba(15, 23, 42, .25);
  animation: wort-in .14s ease-out;
}
.wort-blase b { font-weight: 700; }
.wort-blase::after {
  content: "";
  position: absolute;
  left: var(--pfeil, 50%);
  bottom: -6px;
  width: 12px; height: 12px;
  margin-left: -6px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 2px;
}
.wort-blase.unten::after { bottom: auto; top: -6px; }
@keyframes wort-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wort-blase { animation: none; } }

[data-theme="dark"] .wort-blase { background: #e2e8f0; color: #0f172a; }

/* Fachwörter als Liste, jeder Begriff zum Antippen */
.wortliste {
  margin: 0.25rem 0 1rem;
  padding-left: 1.25rem;
}

.wortliste li {
  margin: 0.35rem 0;
}

/* Dark Mode (data-theme="dark" auf <html>, gesetzt vom Inline-Script #avo-theme-init) */
[data-theme="dark"] .learn-outline {
  border-color: #334155;
  background: rgba(148, 163, 184, 0.1);
}

[data-theme="dark"] .learn-outline > .learn-outline-title,
[data-theme="dark"] .learn-outline > h4 {
  color: #f1f5f9;
}

[data-theme="dark"] .learn-outline ul {
  color: #cbd5e1;
}

[data-theme="dark"] .loop-callout {
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(96, 165, 250, 0.1);
  color: #dbeafe;
}

[data-theme="dark"] .loop-callout-eyebrow,
[data-theme="dark"] .loop-callout strong {
  color: #93c5fd;
}

[data-theme="dark"] .loop-callout p {
  color: #dbeafe;
}

[data-theme="dark"] .grammarxp-teaser {
  border-color: rgba(45, 212, 191, 0.35);
  background: rgba(45, 212, 191, 0.09);
  color: #ccfbf1;
}

[data-theme="dark"] .grammarxp-teaser-label {
  background: rgba(45, 212, 191, 0.2);
  color: #99f6e4;
}

[data-theme="dark"] .grammarxp-teaser p {
  color: #ccfbf1;
}

[data-theme="dark"] .grammarxp-teaser-link,
[data-theme="dark"] .grammarxp-teaser-link:hover {
  color: #5eead4;
}

[data-theme="dark"] .math-task {
  border-left-color: #94a3b8;
  background: rgba(148, 163, 184, 0.1);
}

[data-theme="dark"] .math-task p {
  color: #f1f5f9;
}

[data-theme="dark"] .math-task .math-task-source {
  color: #a3b1c6;
}

[data-theme="dark"] .math-mini {
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(96, 165, 250, 0.1);
}

[data-theme="dark"] .math-lk {
  border-color: #8b5cf6;
  background: rgba(167, 139, 250, 0.1);
}

[data-theme="dark"] .math-vorgaben {
  border-left-color: #10b981;
  background: rgba(52, 211, 153, 0.1);
  color: #a7f3d0;
}

[data-theme="dark"] .math-frag {
  border-left-color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  color: #bae6fd;
}

/* Mathe-Abbildungen hell/dunkel: Farben als Klassen + Variablen (Quelle scripts/mathe/lib/figure-theme.js) */
/* mathe-figuren:start (erzeugt von scripts/build-mathe-figuren.js aus scripts/mathe/lib/figure-theme.js, nicht von Hand ändern) */
.math-figure { --mf-bg: #f8fafc; --mf-caption: #64748b; --mf-axis: #64748b; --mf-ink: #334155; --mf-strong: #0f172a; --mf-slate: #475569; --mf-muted: #94a3b8; --mf-line: #cbd5e1; --mf-grid: #e2e8f0; --mf-graph: #2563eb; --mf-graph-text: #1e3a8a; --mf-bar: #93c5fd; --mf-area: #bfdbfe; --mf-area-2: #dbeafe; --mf-tint: #eff6ff; --mf-pos: #16a34a; --mf-pos-text: #166534; --mf-pos-text-2: #15803d; --mf-pos-deep: #14532d; --mf-pos-area: #bbf7d0; --mf-neg: #dc2626; --mf-neg-text: #991b1b; --mf-neg-area: #fecaca; --mf-warm: #ea580c; --mf-warm-text: #9a3412; --mf-warm-text-2: #c2410c; --mf-violet: #6366f1; --mf-violet-text: #4338ca; --mf-plane: #e0e7ff; --mf-purple: #7c3aed; --mf-cyan: #0891b2; --mf-paper: #f8fafc; --mf-white: #ffffff; }
[data-theme="dark"] .math-figure { --mf-bg: var(--lk-card-2, #273449); --mf-caption: var(--lk-ink-2, #a3b1c6); --mf-axis: #94a3b8; --mf-ink: #e2e8f0; --mf-strong: #f8fafc; --mf-slate: #cbd5e1; --mf-muted: #8b99b0; --mf-line: #475569; --mf-grid: rgba(148, 163, 184, .24); --mf-graph: #60a5fa; --mf-graph-text: #93c5fd; --mf-bar: #4d70a8; --mf-area: rgba(96, 165, 250, .32); --mf-area-2: rgba(96, 165, 250, .22); --mf-tint: rgba(96, 165, 250, .10); --mf-pos: #4ade80; --mf-pos-text: #86efac; --mf-pos-text-2: #86efac; --mf-pos-deep: #bbf7d0; --mf-pos-area: rgba(74, 222, 128, .24); --mf-neg: #f87171; --mf-neg-text: #fca5a5; --mf-neg-area: rgba(248, 113, 113, .26); --mf-warm: #fb923c; --mf-warm-text: #fdba74; --mf-warm-text-2: #fdba74; --mf-violet: #818cf8; --mf-violet-text: #a5b4fc; --mf-plane: rgba(129, 140, 248, .20); --mf-purple: #a78bfa; --mf-cyan: #22d3ee; --mf-paper: var(--mf-bg); --mf-white: var(--mf-bg); }
.math-figure, [data-theme="dark"] .math-figure, [data-theme="dark"] .modal-content .math-figure { background: var(--mf-bg); color: var(--mf-caption); }
.math-figure svg { fill: var(--mf-strong); }
.math-figure figcaption, [data-theme="dark"] .math-figure figcaption { color: var(--mf-caption); }
[data-theme="dark"] .math-figure figcaption * { color: inherit; }
.math-figure .mf-f-axis { fill: var(--mf-axis); }
.math-figure .mf-s-axis { stroke: var(--mf-axis); }
.math-figure .mf-f-ink { fill: var(--mf-ink); }
.math-figure .mf-s-ink { stroke: var(--mf-ink); }
.math-figure .mf-f-strong { fill: var(--mf-strong); }
.math-figure .mf-s-strong { stroke: var(--mf-strong); }
.math-figure .mf-f-slate { fill: var(--mf-slate); }
.math-figure .mf-s-slate { stroke: var(--mf-slate); }
.math-figure .mf-f-muted { fill: var(--mf-muted); }
.math-figure .mf-s-muted { stroke: var(--mf-muted); }
.math-figure .mf-f-line { fill: var(--mf-line); }
.math-figure .mf-s-line { stroke: var(--mf-line); }
.math-figure .mf-f-grid { fill: var(--mf-grid); }
.math-figure .mf-s-grid { stroke: var(--mf-grid); }
.math-figure .mf-f-graph { fill: var(--mf-graph); }
.math-figure .mf-s-graph { stroke: var(--mf-graph); }
.math-figure .mf-f-graph-text { fill: var(--mf-graph-text); }
.math-figure .mf-s-graph-text { stroke: var(--mf-graph-text); }
.math-figure .mf-f-bar { fill: var(--mf-bar); }
.math-figure .mf-s-bar { stroke: var(--mf-bar); }
.math-figure .mf-f-area { fill: var(--mf-area); }
.math-figure .mf-s-area { stroke: var(--mf-area); }
.math-figure .mf-f-area-2 { fill: var(--mf-area-2); }
.math-figure .mf-s-area-2 { stroke: var(--mf-area-2); }
.math-figure .mf-f-tint { fill: var(--mf-tint); }
.math-figure .mf-s-tint { stroke: var(--mf-tint); }
.math-figure .mf-f-pos { fill: var(--mf-pos); }
.math-figure .mf-s-pos { stroke: var(--mf-pos); }
.math-figure .mf-f-pos-text { fill: var(--mf-pos-text); }
.math-figure .mf-s-pos-text { stroke: var(--mf-pos-text); }
.math-figure .mf-f-pos-text-2 { fill: var(--mf-pos-text-2); }
.math-figure .mf-s-pos-text-2 { stroke: var(--mf-pos-text-2); }
.math-figure .mf-f-pos-deep { fill: var(--mf-pos-deep); }
.math-figure .mf-s-pos-deep { stroke: var(--mf-pos-deep); }
.math-figure .mf-f-pos-area { fill: var(--mf-pos-area); }
.math-figure .mf-s-pos-area { stroke: var(--mf-pos-area); }
.math-figure .mf-f-neg { fill: var(--mf-neg); }
.math-figure .mf-s-neg { stroke: var(--mf-neg); }
.math-figure .mf-f-neg-text { fill: var(--mf-neg-text); }
.math-figure .mf-s-neg-text { stroke: var(--mf-neg-text); }
.math-figure .mf-f-neg-area { fill: var(--mf-neg-area); }
.math-figure .mf-s-neg-area { stroke: var(--mf-neg-area); }
.math-figure .mf-f-warm { fill: var(--mf-warm); }
.math-figure .mf-s-warm { stroke: var(--mf-warm); }
.math-figure .mf-f-warm-text { fill: var(--mf-warm-text); }
.math-figure .mf-s-warm-text { stroke: var(--mf-warm-text); }
.math-figure .mf-f-warm-text-2 { fill: var(--mf-warm-text-2); }
.math-figure .mf-s-warm-text-2 { stroke: var(--mf-warm-text-2); }
.math-figure .mf-f-violet { fill: var(--mf-violet); }
.math-figure .mf-s-violet { stroke: var(--mf-violet); }
.math-figure .mf-f-violet-text { fill: var(--mf-violet-text); }
.math-figure .mf-s-violet-text { stroke: var(--mf-violet-text); }
.math-figure .mf-f-plane { fill: var(--mf-plane); }
.math-figure .mf-s-plane { stroke: var(--mf-plane); }
.math-figure .mf-f-purple { fill: var(--mf-purple); }
.math-figure .mf-s-purple { stroke: var(--mf-purple); }
.math-figure .mf-f-cyan { fill: var(--mf-cyan); }
.math-figure .mf-s-cyan { stroke: var(--mf-cyan); }
.math-figure .mf-f-paper { fill: var(--mf-paper); }
.math-figure .mf-s-paper { stroke: var(--mf-paper); }
.math-figure .mf-f-white { fill: var(--mf-white); }
.math-figure .mf-s-white { stroke: var(--mf-white); }
/* mathe-figuren:end */

[data-theme="dark"] .math-table th,
[data-theme="dark"] .math-table td {
  border-color: #475569;
}

[data-theme="dark"] .math-table th {
  background: #273449;
}

/* =====================================================================
   Lernkarten-Standard v1: Bausteine mit Präfix ks-
   (reports/content/lernkarten-standard-v1.md, Vorschau preview/lernkarte-standard-v1.html)
   Gebaut nur aus den Stil-Tokens (--lk-*, public/looks/tokens.css); ohne Stil
   (Klassisch) gelten die Fallbacks, im Dunkeln die Werte darunter.
   In Karten keine Inline-Farben: Hell/Dunkel regelt nur dieser Block.
   Kopf .ks-kopf · Land .ks-land · Aufgabe .ks-aufgabe · Schritte ol.ks-schritte
   Beispiel .ks-beispiel · Zitat .ks-zitat · Abbildung figure.ks-abb (+ .ks-quelle)
   Jetzt du .ks-jetztdu + details.ks-loesung · Fehler ul.ks-fehler · Kurz gesagt .ks-kurz
   Weiter nav.ks-weiter + a.ks-chip (.ks-weiter-haupt) · Fachwort span.wort (Blase) .ks-absatz
   ===================================================================== */
:root {
  --ks-ink: var(--lk-ink, #1e293b);
  --ks-ink-2: var(--lk-ink-2, #475569); /* ≥4.5:1 auch auf --ks-tint (#64748b lag bei 4.34) */
  --ks-card: var(--lk-card, #ffffff);
  --ks-tint: var(--lk-card-2, #f1f5f9);
  --ks-line: var(--lk-line, #e2e8f0);
  --ks-mark: var(--lk-hl, #2563eb);
  --ks-link: var(--lk-accent, #2563eb);
  --ks-ok: var(--lk-ok, #15803d);
  --ks-warn: var(--lk-warn, #b45309);
  /* Boxen in Karten: höchstens 16px, auch wenn ein Stil Etiketten ganz rund macht (Ruhig: 999px) */
  --ks-radius: min(var(--lk-radius-sm, 12px), 16px);
  --ks-graph: #2554c7;
  --ks-graph-soft: rgba(37, 84, 199, .12);
  --ks-red: #dc2626;
  --ks-red-soft: rgba(220, 38, 38, .10);
}
[data-theme=dark] { --ks-graph: #8fb0ff; --ks-graph-soft: rgba(143, 176, 255, .14); --ks-red: #f87171; --ks-red-soft: rgba(248, 113, 113, .14); }
[data-theme=dark]:not([data-look]) {
  --ks-ink: #e2e8f0; --ks-ink-2: #a3b1c6; --ks-card: #1e293b; --ks-tint: rgba(148, 163, 184, .1);
  --ks-line: #334155; --ks-mark: #60a5fa; --ks-link: #93c5fd; --ks-ok: #4ade80; --ks-warn: #fbbf24;
}

/* Kopfzeile in der Karte: Typ · Niveau · Lesezeit */
.ks-kopf { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem !important; font-size: .78rem !important; color: var(--ks-ink-2) !important; }
.ks-kopf span { padding: .15rem .55rem; border: 1px solid var(--ks-line); border-radius: 999px; line-height: 1.5; }
.ks-kopf .ks-typ { background: var(--ks-ink); color: var(--ks-card); border-color: var(--ks-ink); font-weight: 700; }

/* Landeskasten: der einzige Teil, der je Bundesland anders ist */
.ks-land { margin: 0 0 1.1rem; padding: .75rem .9rem; border: 1px solid var(--ks-line); border-left: 4px solid var(--ks-ok); border-radius: var(--ks-radius); background: var(--ks-tint); font-size: .9rem; }
.ks-land > p { margin: 0 0 .35rem !important; }
.ks-land > p:last-child { margin-bottom: 0 !important; }
.ks-label { display: block; margin-bottom: .25rem; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ks-ink-2); }
.ks-quelle { font-size: .8rem !important; color: var(--ks-ink-2) !important; }
.ks-quelle a { color: inherit !important; }

/* Aufgabe, wie sie in der Klausur steht */
.ks-aufgabe { margin: .9rem 0; padding: .75rem .9rem; border: 1px solid var(--ks-line); border-left: 4px solid var(--ks-ink); border-radius: var(--ks-radius); background: var(--ks-card); }
.ks-aufgabe p { margin: 0 0 .4rem !important; font-style: italic; }
.ks-aufgabe p:last-child { margin-bottom: 0 !important; }
.ks-aufgabe .ks-quelle { font-style: normal; }

/* Schritte: nummeriert, je Schritt ein Satz, den man hinschreibt */
.modal-content ol.ks-schritte { list-style: none; counter-reset: ks; padding-left: 0 !important; margin: .8rem 0 1rem !important; }
.ks-schritte > li { counter-increment: ks; position: relative; padding: 0 0 .2rem 2.2rem; margin-bottom: .7rem !important; }
.ks-schritte > li::before { content: counter(ks); position: absolute; left: 0; top: .05rem; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--ks-mark); color: var(--lk-hl-fg, #fff); font-weight: 800; font-size: .82rem; display: grid; place-items: center; }
.ks-schritte em { display: block; margin-top: .15rem; }

/* Beispiel / Musterlösung */
.ks-beispiel { margin: 1rem 0; padding: .8rem .9rem; border: 1px solid var(--ks-line); border-radius: var(--ks-radius); background: var(--ks-tint); }
.ks-beispiel > p { margin: 0 0 .45rem !important; }
.ks-beispiel > p:last-child { margin-bottom: 0 !important; }

/* Quelle / Zitat (Geschichte, Deutsch): Text, den man analysiert */
.ks-zitat { margin: 1rem 0; padding: .8rem .9rem; border-left: 3px solid var(--ks-ink-2); background: var(--ks-tint); border-radius: 0 var(--ks-radius) var(--ks-radius) 0; }
.ks-zitat p { margin: 0 0 .4rem !important; }
.ks-zitat p:last-child { margin-bottom: 0 !important; }

/* Abbildung mit Bildunterschrift und Bildnachweis */
.ks-abb { margin: 1rem 0; padding: .6rem .6rem .7rem; border: 1px solid var(--ks-line); border-radius: var(--ks-radius); background: var(--ks-card); }
.ks-abb svg, [data-theme=dark] .ks-abb svg { display: block; width: 100%; height: auto; background: transparent; color: var(--ks-ink); }
.ks-abb img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.ks-abb figcaption { margin-top: .45rem; font-size: .84rem; line-height: 1.45; color: var(--ks-ink-2); }

/* Kurzkarte als Video: Hochformat 9:16, auf dem Desktop ein schmaler Rahmen, nicht die volle Spalte. */
.ks-video {
  margin: 1rem auto 1.2rem;
  max-width: min(100%, 22rem);
  padding: .6rem .6rem .7rem;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-card);
}
.ks-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: var(--ks-ink);
  border-radius: max(4px, calc(var(--ks-radius) - 6px));
}
.ks-video figcaption { margin-top: .45rem; font-size: .84rem; line-height: 1.45; color: var(--ks-ink-2); }
@media (min-width: 900px) {
  .ks-video { max-width: 18rem; }
}
.ks-video--landscape { max-width: min(100%, 40rem); }
.ks-video--landscape video { aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
  .ks-video--landscape { max-width: 40rem; }
}
/* Statische Seiten: beide Fassungen im HTML, preload none, nur die passende wird gezeigt (gleiche Bedingung wie CARD_VIDEO_WIDE_QUERY). */
.ks-video-wide { display: none; }
@media (min-width: 48rem) and (orientation: landscape) {
  .ks-video-wide { display: block; }
  .ks-video-narrow { display: none; }
}
.ks-abb figcaption strong { color: var(--ks-ink); }
/* Echtes Bild (Foto, Gemälde, Druck) aus templates/bilder.json: volle Breite, dünner Rahmen, im Dunkeln unverändert */
.ks-bild img, [data-theme=dark] .ks-bild img { width: 100%; max-width: 100%; height: auto; border: 1px solid var(--ks-line); border-radius: max(4px, calc(var(--ks-radius) - 6px)); background-clip: padding-box; filter: none; }
.ks-bild .ks-bild-zoom { display: block; cursor: zoom-in; }
.ks-bild .ks-bild-zoom:focus-visible { outline: 2px solid var(--ks-link); outline-offset: 2px; }
.ks-abb .g-achse { stroke: var(--ks-ink-2); stroke-width: 1.4; fill: none; }
.ks-abb .g-pfeil { fill: var(--ks-ink-2); }
.ks-abb .g-raster { stroke: var(--ks-line); stroke-width: 1; }
.ks-abb .g-kurve { stroke: var(--ks-graph); stroke-width: 3; fill: none; stroke-linejoin: round; }
.ks-abb .g-zone-gut { fill: var(--ks-graph-soft); }
.ks-abb .g-zone-rot { fill: var(--ks-red-soft); }
.ks-abb .g-hilf { stroke: var(--ks-ink-2); stroke-width: 1.2; stroke-dasharray: 4 4; fill: none; }
.ks-abb .g-punkt { fill: var(--ks-graph); stroke: var(--ks-card); stroke-width: 2; }
.ks-abb .g-text { fill: var(--ks-ink); font-size: 12.5px; }
.ks-abb .g-klein { fill: var(--ks-ink-2); font-size: 11px; }
.ks-abb .g-rot { fill: var(--ks-red); font-size: 12px; font-weight: 700; }
.ks-abb .g-blau { fill: var(--ks-graph); font-size: 12px; font-weight: 700; }
.ks-platzhalter { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 1rem; border: 2px dashed var(--ks-line); border-radius: 8px; color: var(--ks-ink-2); text-align: center; font-size: .88rem; }

/* Jetzt du: Abrufen statt Nachlesen, Lösung zum Aufklappen */
.ks-jetztdu { margin: 1.2rem 0; padding: .85rem .9rem; border: 2px solid var(--ks-mark); border-radius: var(--ks-radius); background: var(--ks-card); }
.ks-jetztdu > p { margin: 0 0 .5rem !important; }
.ks-loesung { margin-top: .6rem; border-top: 1px dashed var(--ks-line); padding-top: .5rem; }
.ks-loesung > summary { cursor: pointer; font-weight: 700; color: var(--ks-link); list-style: none; }
.ks-loesung > summary::-webkit-details-marker { display: none; }
.ks-loesung > summary::before { content: "▸ "; }
.ks-loesung[open] > summary::before { content: "▾ "; }
.ks-loesung > div { margin-top: .5rem; }
.ks-loesung > div p { margin: 0 0 .4rem !important; }

/* Absatz mit Fachwort zum Antippen: <details> darf nicht in <p> stehen (der Browser beendet das <p> davor) */
.ks-absatz { margin: 0 0 1rem; }

/* Typische Fehler */
.modal-content ul.ks-fehler { list-style: none; padding-left: 0 !important; }
.ks-fehler > li { position: relative; padding-left: 1.6rem; }
.ks-fehler > li::before { content: "✗"; position: absolute; left: .1rem; top: 0; font-weight: 800; color: var(--ks-red); }

/* Kurz gesagt: das, was hängen bleiben soll */
.ks-kurz { margin: 1.2rem 0; padding: .75rem .9rem; border-radius: var(--ks-radius); background: var(--lk-hl-soft, rgba(37, 99, 235, .08)); border: 1px solid var(--ks-line); }
.ks-kurz p { margin: 0 !important; font-weight: 600; }
/* Einstieg „Worum es geht“: das Thema von Grund auf, für alle, die den Stoff vergessen haben */
.ks-einstieg { margin: 0 0 1.2rem; }
.ks-einstieg > .ks-label { margin-bottom: .35rem; }
.ks-einstieg > p { margin: 0 0 .6rem !important; }
.ks-einstieg > p:last-child { margin-bottom: 0 !important; }

/* Layout v2: „Das Wichtigste in Kürze“ oben (scripts/lib/card-layout.js) */
.ks-kurz.ks-oben { margin: 0 0 1.1rem; border-left: 4px solid var(--ks-mark); }
.ks-kurz.ks-oben .ks-label { margin-bottom: .3rem; }
/* Landeskasten v2: amtlicher Wortlaut zum Aufklappen */
.ks-wortlaut { margin: .35rem 0 .45rem; }
.ks-wortlaut > summary { cursor: pointer; font-size: .84rem; font-weight: 700; color: var(--ks-link); list-style: none; }
.ks-wortlaut > summary::-webkit-details-marker { display: none; }
.ks-wortlaut > summary::before { content: "▸ "; }
.ks-wortlaut[open] > summary::before { content: "▾ "; }
.ks-wortlaut > :not(summary) { margin-top: .4rem; }
.ks-wortlaut p { margin: 0 0 .35rem !important; }
.ks-land > .ks-quelle { font-size: .8rem; }
/* Layout v2, ruhiger: gilt nur für umgebaute Karten (erkennbar am Oben-Kasten .ks-oben).
   Abschnitte deutlich getrennt (Linie + Luft über jeder Zwischenüberschrift), weniger Fett, leisere Kästen. */
.modal-body:has(.ks-oben) { line-height: 1.62; }
.ks-kurz.ks-oben p { font-weight: 500; font-size: 1.02rem; line-height: 1.55; }
.modal-body:has(.ks-oben) > h4,
.modal-body:has(.ks-oben) > .core-card > h4 { margin: 2rem 0 .7rem !important; padding-top: 1.1rem; border-top: 1px solid var(--ks-line); font-size: 1.05rem; }
.modal-body:has(.ks-oben) .ks-land { border-left-width: 3px; }
.modal-body:has(.ks-oben) .ks-land + h4,
.modal-body:has(.ks-oben) .ks-oben + h4 { border-top: 0; padding-top: 0; margin-top: 1.4rem !important; }
.modal-body:has(.ks-oben) .ks-jetztdu,
.modal-body:has(.ks-oben) .ks-beispiel { margin: 1.4rem 0; }
.modal-body:has(.ks-oben) ul.ks-fehler { margin-top: .4rem; }

/* Weiter-Leiste: Voraussetzung, Weiter mit, Verwandt */
.ks-weiter { margin: 1.4rem 0 .5rem; padding-top: .9rem; border-top: 1px solid var(--ks-line); }
.ks-weiter p { margin: 0 0 .55rem !important; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .88rem; }
.ks-weiter .ks-label { display: inline; margin: 0 .2rem 0 0; min-width: 6.2rem; }
.modal-body a.ks-chip { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--ks-line); border-radius: 999px; background: var(--ks-tint); color: var(--ks-ink) !important; text-decoration: none !important; font-weight: 600; font-size: .85rem; line-height: 1.3; }
.modal-body a.ks-chip:hover, .modal-body a.ks-chip:focus-visible { border-color: var(--ks-mark); }
.modal-body a.ks-chip.ks-weiter-haupt { background: var(--ks-mark); border-color: var(--ks-mark); color: var(--lk-hl-fg, #fff) !important; }
.ks-chip--geplant { display: inline-block; padding: .3rem .7rem; border: 1px dashed var(--ks-line); border-radius: 999px; color: var(--ks-ink-2); font-size: .85rem; }
/* Abbildungen Physik (scripts/physik/figures.js): zweite Kurve, Linien, Feldlinien, Flächen, Ladungen */
.ks-abb .g-kurve-rot { stroke: var(--ks-red); stroke-width: 2.5; fill: none; stroke-linejoin: round; }
.ks-abb .g-linie { stroke: var(--ks-ink); stroke-width: 1.6; fill: none; }
.ks-abb .g-feld { stroke: var(--ks-graph); stroke-width: 1.3; fill: none; }
.ks-abb .g-flaeche { fill: var(--ks-graph-soft); stroke: none; }
.ks-abb .g-fill-blau { fill: var(--ks-graph); }
.ks-abb .g-fill-rot { fill: var(--ks-red); }
.ks-abb .g-auf { fill: var(--ks-card); font-size: 15px; font-weight: 800; }

/* AFB-Kennzeichen in Operator-Tabellen (Deutsch): weiße Schrift, Grund mit mindestens 4,5 : 1 (WCAG AA) */
.afb-tag { color: #fff !important; }
.afb-tag--1 { background: #047857; }
.afb-tag--2 { background: #6d28d9; }
.afb-tag--3 { background: #b91c1c; }
.afb-tag--amber { background: #b45309; }
.afb-tag--blau { background: #1d4ed8; }
.afb-tag--grau { background: #475569; }

/* Entwurf AVO-44: Abschnitte als kompakte Liste, ein-/ausklappbar (nur mit ?abschnitte=1, public/src/card-sections.js) */
.lz-group{border:1px solid var(--lk-line,#e2e6ee);border-radius:14px;background:var(--lk-card,#fff);margin:14px 0;overflow:hidden}
.lz-sec{border-top:1px solid var(--lk-line,#e2e6ee);padding:0 14px}
.lz-sec:first-child{border-top:0}
.lz-sec>summary{list-style:none;cursor:pointer;font-weight:600;font-size:.98rem;line-height:1.3;padding:12px 24px 12px 0;position:relative}
.lz-sec>summary::-webkit-details-marker{display:none}
.lz-sec>summary::after{content:"";position:absolute;right:4px;top:50%;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .2s;opacity:.5}
.lz-sec[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.lz-sec[open]{padding-bottom:12px}
.lz-sec[open]>summary{font-weight:700}
.lz-intro{font-size:.88rem;color:var(--lk-muted,#5a6889);margin:4px 0 12px}
.lz-note{font-size:.88rem;color:var(--lk-muted,#5a6889);margin:4px 0 8px}
.lz-sec>.ks-einstieg,.lz-sec>.ks-land{margin-top:4px}
.lz-on .ks-kurz,.lz-on .ks-kurz p{font-weight:500 !important;line-height:1.5}
/* AVO-44 v4: kurzer erster Eindruck, Bild oben, Hinweis zum Land auf der Fachseite */
.lz-on .ks-kurz.lz-clamp p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lz-on .ks-kurz.lz-clamp p+p{display:none}
.lz-more{font:inherit;font-size:.88rem;font-weight:600;color:var(--lk-accent,#2554c7);background:none;border:0;padding:4px 0 0;cursor:pointer}
.lz-hero{margin:12px 0 4px}
.lz-hero figure{margin:0}
.lz-hero svg,.lz-hero img{max-width:100%;height:auto;display:block;margin:0 auto}
.lz-banner{display:flex;gap:10px;align-items:flex-start;margin:0 16px 14px;padding:12px 14px;border-radius:14px;background:var(--lk-card,#fff);border:1px solid var(--lk-line,#e2e6ee);font-size:.9rem;line-height:1.4}
.lz-banner-ico{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#16a34a;color:#fff;font-weight:700;display:grid;place-items:center;font-size:.8rem;margin-top:1px}
.lz-banner button{flex:0 0 auto;margin-left:auto;font:inherit;font-weight:700;font-size:.85rem;border:0;background:none;color:var(--lk-accent,#2554c7);cursor:pointer;padding:2px 4px}
.lz-banner{text-align:left}
.lz-on .ks-kurz{position:relative}
.lz-on .ks-kurz .lz-more{display:block;margin:6px 0 0 auto;padding:2px 0;text-align:right}
.lz-hero>.ks-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lk-muted,#5a6889);margin:0 0 6px}
/* Suche (Julian 19.10.): größer, 16px gegen Zoom auf dem iPhone; über den Tab „Suche“ farbig umrandet */
#search-container #card-search{font-size:1.05rem!important;padding:.9rem 1.1rem!important;min-height:52px}
body.lk-suche #search-container #card-search{border-color:var(--lk-strong,#2554c7)!important}
/* AVO-51: interaktive Elemente (card-widgets.js); leer bleibt der Platzhalter unsichtbar */
.lz-widget:empty{display:none}
.lz-widget{margin:14px 0;padding:12px 14px 10px;border:1px solid var(--lk-line,#e3e6ee);border-radius:14px;background:var(--lk-card,#fff)}
.lz-widget svg{display:block;max-width:420px;margin:0 auto;touch-action:pan-y}
.lz-widget-title{margin:0 0 6px;font-weight:700;font-size:.95rem}
.lzw-axis{stroke:#94a3b8;stroke-width:1.2}
.lzw-graph{fill:none;stroke:#2563eb;stroke-width:2.6}
.lzw-graph-label{fill:#2563eb}
.lzw-label{font:600 15px system-ui,sans-serif}
.lzw-tan{stroke:#dc2626;stroke-width:2.6;stroke-linecap:round}
.lzw-pt{fill:#dc2626}
.lz-widget[data-sign="0"] .lzw-tan,.lz-widget[data-sign="0"] .lzw-pt{stroke:#16a34a;fill:#16a34a}
.lz-widget-ctl{display:flex;align-items:center;gap:10px;margin:8px 0 2px;font-weight:600;font-size:.9rem}
.lz-widget-ctl input{flex:1;min-width:0;height:32px;accent-color:#dc2626}
.lz-widget-out{margin:4px 0 2px;font-variant-numeric:tabular-nums}
.lz-widget-note{margin:2px 0 0;font-size:.82rem;color:var(--lk-ink-2,#5a6889)}
[data-theme="dark"] .lzw-graph{stroke:#7aa2ff}
[data-theme="dark"] .lzw-graph-label{fill:#7aa2ff}
[data-theme="dark"] .lzw-tan{stroke:#ff7a7a}
[data-theme="dark"] .lzw-pt{fill:#ff7a7a}
[data-theme="dark"] .lzw-axis{stroke:#64748b}
.lz-widget{max-width:480px;margin-left:auto;margin-right:auto}
.lzw-area-pos{fill:rgba(22,163,74,.22);stroke:none}
.lzw-area-neg{fill:rgba(220,38,38,.18);stroke:none}
.lzw-tick{font:12px system-ui,sans-serif;fill:#64748b}
.lz-widget-ctl+.lz-widget-ctl{margin-top:0}
/* AVO-4: Kopf des Lernzettels am Handy kompakter (vorher ~11 % der Höhe): kleines Ordner-Etikett, Titel daneben Schließen */
@media (max-width:600px){
  .modal-header{position:relative;padding:10px 56px 10px 16px!important}
  .modal-header .modal-header-top{min-height:0!important;margin:0!important;padding:0!important}
  .modal-header .badge{font-size:.62rem!important;padding:2px 8px!important;line-height:1.4!important}
  .modal-header h2{font-size:1.18rem!important;line-height:1.25!important;margin:4px 0 0!important}
  .modal-header .modal-close{position:absolute!important;top:10px;right:12px;width:34px!important;height:34px!important;font-size:1.3rem!important}
}
.lzw-body{fill:#f59e0b;stroke:#b45309;stroke-width:1.5}
.lzw-f-label{fill:#dc2626}
[data-theme="dark"] .lzw-f-label{fill:#ff7a7a}