/* OOPventure – eigenes Erscheinungsbild, angelehnt an den Jugendwettbewerb Informatik. */
:root {
  --ov-gruen: #7f9a0f;
  --ov-gruen-dunkel: #5d7209;
  --ov-gruen-hell: #e7efc6;
  --ov-gruen-zart: #f4f7e8;
  --ov-flaeche: #fbfcf7;
  --ov-rand: #d9e0c2;
  --ov-text: #1f2712;
  --ov-text-leise: #5b6448;
  --ov-ok: #1c7c3a;
  --ov-ok-hell: #e6f5ea;
  --ov-warnung: #8a5a00;
  --ov-warnung-hell: #fff4d6;
  --ov-fehler: #a61b1b;
  --ov-fehler-hell: #fdecec;
  --ov-gold: #d69e2e;
}

.ov-body { background: var(--ov-flaeche); color: var(--ov-text); }
/* Kompakter als das Buch: 15 px Grundschrift. Alle rem-Masse schrumpfen mit. */
.ov-html { font-size: 15px; }
.ov-html body { line-height: 1.5; }
.ov-main { max-width: 1680px; margin: 0 auto; padding: 0 1rem 2rem; }
.ov-fuss { text-align: center; padding: 1rem 1rem 1.5rem; font-size: .8rem; opacity: .7; }
.ov-fuss a { color: inherit; }

/* ---------- Navigation ---------- */
.ov-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem 1.25rem; background: #26300d; color: #fff; position: sticky; top: 0; z-index: 50;
}
.ov-marke { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; }
.ov-marke:hover { text-decoration: none; }
.ov-marke img { width: 30px; height: 30px; image-rendering: pixelated; }
.ov-nav-rechts { display: flex; align-items: center; gap: 1.25rem; }
.ov-nav-rechts a { color: #dfe7c4; }
.ov-konto { display: inline-flex; align-items: center; gap: .35rem; background: rgba(255,255,255,.1); padding: .2rem .7rem .2rem .35rem; border-radius: 999px; font-weight: 700; }
.ov-konto img { width: 22px; height: 22px; }
.ov-vorschau-hinweis { font-size: .85rem; color: #f8e3a3; }

/* ---------- Uebersicht ---------- */
.ov-titelbild {
  position: relative; isolation: isolate; margin-top: 1rem; border-radius: 14px; overflow: hidden;
  background: #6aa7e0 center / cover no-repeat; display: flex; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
/* Die Kulisse fuellt breite Bildschirme links und rechts, weich und etwas dunkler, damit das Titelbild vorne steht. */
.ov-titelbild::before {
  content: ''; position: absolute; inset: -12px; z-index: -1; background: inherit;
  filter: blur(6px) brightness(.8) saturate(.9);
}
.ov-titelbild-buehne {
  position: relative; width: 100%; max-width: calc(46vh * 16 / 9); container-type: inline-size;
  box-shadow: 0 0 24px rgba(0, 0, 0, .35);
}
.ov-titelbild-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Vektor-Banner: Himmelblau statt der Pixel-Kulisse links und rechts */
.ov-titelbild.ist-vektor { background: linear-gradient(#6fb6ea 0 45%, #9fd36c 45% 100%); }
.ov-titelbild-video svg { overflow: visible; }
/* Der Titel steht im Himmel ueber der Burg; die harte, stufige Kontur passt zur Pixelgrafik. */
.ov-titel {
  position: absolute; top: 4cqw; left: 0; right: 0; margin: 0; text-align: center; pointer-events: none;
  font: 900 9.5cqw/1 'Segoe UI Black', 'Arial Black', system-ui, sans-serif; letter-spacing: .02em; color: #ffe27a;
  text-shadow:
    .06em 0 0 #5a2a0a, -.06em 0 0 #5a2a0a, 0 .06em 0 #5a2a0a, 0 -.06em 0 #5a2a0a,
    .06em .06em 0 #5a2a0a, -.06em .06em 0 #5a2a0a, .06em -.06em 0 #5a2a0a, -.06em -.06em 0 #5a2a0a,
    0 .14em 0 #3a1a05, .06em .14em 0 #3a1a05, -.06em .14em 0 #3a1a05;
}
.ov-titel-beta {
  display: inline-block; position: relative; top: -1.9em; margin-left: .25em; padding: .25em .5em;
  font-size: .24em; letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: none;
  background: #d9412b; border: .15em solid #5a2a0a; border-radius: .3em; transform: rotate(-12deg);
  box-shadow: .15em .2em 0 #3a1a05;
}
.ov-uebersicht-kopf { padding: 1.5rem 0 .5rem; }
.ov-uebersicht-kopf h1 { font-size: 2rem; color: var(--ov-gruen-dunkel); }
.ov-uebersicht-kopf p { color: var(--ov-text-leise); max-width: 60ch; }
.ov-kapitel { margin-top: 1.25rem; background: #fff; border: 1px solid var(--ov-rand); border-radius: 12px; padding: 1rem 1.25rem 1.25rem; }
.ov-kapitel-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .75rem; }
.ov-kapitel-kopf h2 { font-size: 1.25rem; }
.ov-phase { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ov-gruen-dunkel); font-weight: 700; }
.ov-material { font-size: .85rem; color: var(--ov-text-leise); }
.ov-kapitel-fortschritt { font-weight: 700; color: var(--ov-gruen-dunkel); background: var(--ov-gruen-hell); padding: .2rem .7rem; border-radius: 999px; white-space: nowrap; }
.ov-level-liste { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.ov-level-kachel {
  position: relative; display: grid; gap: .15rem; padding: .7rem .85rem; border-radius: 10px;
  border: 1px solid var(--ov-rand); background: var(--ov-gruen-zart); color: var(--ov-text);
  transition: transform .1s ease, box-shadow .1s ease;
}
.ov-level-kachel:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(60,80,0,.12); }
.ov-level-kachel.ist-geloest { background: var(--ov-ok-hell); border-color: #b9dcc3; }
.ov-level-id { font-size: .8rem; font-weight: 700; color: var(--ov-gruen-dunkel); }
.ov-level-titel { font-weight: 600; }
.ov-level-sterne { color: var(--ov-gold); letter-spacing: .05em; }
.ov-level-haken { position: absolute; top: .5rem; right: .65rem; color: var(--ov-ok); font-weight: 800; }

/* ---------- Level: Kopf ---------- */
.ov-level { margin-top: .75rem; }
.ov-kopf {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--ov-gruen); color: #fff; padding: .45rem .9rem; border-radius: 10px 10px 0 0;
}
.ov-kopf-titel { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.ov-kopf-titel h1 { font-size: 1.2rem; }
.ov-kopf-kapitel { font-weight: 700; opacity: .85; }
.ov-kopf .ov-level-sterne { color: #fff5c2; }
.ov-geloest-marke { background: #fff; color: var(--ov-ok); font-weight: 700; font-size: .85rem; padding: .05rem .6rem; border-radius: 999px; }
.ov-kopf-nav { display: flex; gap: 1.1rem; }
.ov-kopf-nav a { color: #fff; font-weight: 600; }
.ov-varianten { display: flex; background: var(--ov-gruen-hell); }
.ov-varianten a { padding: .5rem 1.25rem; color: var(--ov-text); font-weight: 600; white-space: nowrap; }
.ov-varianten a.ist-aktiv { background: var(--ov-gruen-zart); color: var(--ov-gruen-dunkel); }
.ov-varianten a.ist-bonus { color: #8a5a00; }
.ov-varianten-sterne { color: #d9a300; letter-spacing: -.06em; }

/* ---------- Level: drei Spalten ---------- */
.ov-arbeitsbereich {
  display: grid; grid-template-columns: minmax(360px, 1fr) auto minmax(380px, 1fr);
  background: #fff; border: 1px solid var(--ov-rand); border-top: 0; border-radius: 0 0 10px 10px; min-height: 70vh;
}
.ov-spalte-aufgabe { padding: .8rem .9rem; display: grid; gap: .7rem; align-content: start; min-width: 0; }
.ov-spalte-code { display: flex; flex-direction: column; min-width: 0; background: #0f172a; border-radius: 0 0 10px 0; }

.ov-beschreibung p { margin-bottom: .5rem; }
.ov-beschreibung ul, .ov-beschreibung ol { padding-left: 1.3rem; }
.ov-beschreibung code, .ov-hinweis code { background: var(--ov-gruen-zart); border: 1px solid var(--ov-rand); padding: 0 .25rem; border-radius: 4px; font-size: .92em; }
.ov-inline-sprite { width: 1.6em; height: 1.6em; vertical-align: middle; image-rendering: auto; }
.ov-klassendiagramm { border-collapse: collapse; margin: .25rem 0 .5rem; font-family: Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; font-size: .9rem; min-width: 220px; }
.ov-klassendiagramm th, .ov-klassendiagramm td { border: 1.5px solid #3f4a24; padding: .3rem .7rem; text-align: left; vertical-align: top; }
.ov-klassendiagramm th { text-align: center; background: var(--ov-gruen-hell); }
.ov-hinweise { display: grid; gap: .5rem; }
.ov-hinweis { background: var(--ov-warnung-hell); border-left: 4px solid #e0b64a; padding: .5rem .75rem; border-radius: 0 6px 6px 0; }
.ov-hinweis pre { white-space: pre; overflow-x: auto; font: .9rem/1.45 Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; }
.ov-hinweis-knopf {
  justify-self: start; border: 0; background: var(--ov-gruen); color: #fff; font-weight: 600;
  padding: .4rem .95rem; border-radius: 999px; cursor: pointer;
}
.ov-hinweis-knopf:hover { background: var(--ov-gruen-dunkel); }

/* ---------- Welt ---------- */
.ov-welt { display: grid; gap: 8px; }  /* 8px: entspricht LUECKE in oop-game.js */
.ov-canvas-rahmen { width: 100%; overflow: hidden; display: flex; justify-content: center; }
#ov-canvas { display: block; border: 2px solid #3f4a24; border-radius: 4px; }
.ov-welt-meldung { margin: 0; padding: .4rem .7rem; border-radius: 6px; background: var(--ov-fehler-hell); color: var(--ov-fehler); font-weight: 600; }
.ov-test-tabs { display: flex; border-bottom: 2px solid var(--ov-rand); }
.ov-tests-hinweis { margin: .4rem 0 .3rem; font-size: .85rem; font-weight: 600; color: var(--ov-gruen-dunkel); }
.ov-test-tabs button {
  flex: 1; padding: .45rem .75rem; background: none; border: 0; border-bottom: 3px solid transparent;
  font-size: 1rem; color: var(--ov-text-leise); cursor: pointer; margin-bottom: -2px;
}
.ov-test-tabs button.ist-aktiv { color: var(--ov-text); border-bottom-color: var(--ov-gruen); font-weight: 700; background: var(--ov-gruen-zart); }
.ov-test-tabs button[data-status="geloest"] .ov-test-symbol { color: var(--ov-ok); }
.ov-test-tabs button[data-status="nicht_geloest"] .ov-test-symbol,
.ov-test-tabs button[data-status="laufzeitfehler"] .ov-test-symbol,
.ov-test-tabs button[data-status="timeout"] .ov-test-symbol { color: var(--ov-fehler); }
.ov-steuerung { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ov-steuerung > button {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--ov-gruen); color: #fff;
  font-size: .95rem; cursor: pointer; display: grid; place-items: center;
}
.ov-steuerung > button:hover { background: var(--ov-gruen-dunkel); }
.ov-steuerung > .ov-play { width: 42px; height: 42px; font-size: 1.1rem; }
.ov-tempo { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; background: var(--ov-gruen-zart); border-radius: 999px; margin-left: .3rem; }
.ov-tempo input { width: 90px; accent-color: var(--ov-gruen); }
#ov-tempo-anzeige { font-variant-numeric: tabular-nums; min-width: 2.6em; font-size: .85rem; color: var(--ov-text-leise); }
.ov-schritt-info { font-size: .85rem; color: var(--ov-text-leise); }

/* Tastaturmodus: ausprobieren statt programmieren. */
.ov-tastatur { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ov-tastatur-knopf {
  border: 1px solid var(--ov-rand); background: #fff; color: var(--ov-text); font-weight: 700;
  padding: .25rem .8rem; border-radius: 999px; cursor: pointer; font-size: .9rem;
}
.ov-tastatur-knopf:hover { background: var(--ov-gruen-zart); }
.ov-tastatur-knopf.ist-aktiv { background: var(--ov-gruen); border-color: var(--ov-gruen); color: #fff; }
.ov-tastatur { position: relative; }
.ov-tastatur-frage {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ov-rand); background: #fff;
  color: var(--ov-gruen-dunkel); font-weight: 800; cursor: pointer; line-height: 1; padding: 0;
}
.ov-tastatur-frage[aria-expanded="true"] { background: var(--ov-gruen); color: #fff; border-color: var(--ov-gruen); }
.ov-tastatur-popup {
  position: absolute; z-index: 15; left: 0; bottom: calc(100% + 6px); min-width: 250px;
  background: #fff; border: 1px solid var(--ov-rand); border-radius: 10px; padding: .6rem .8rem;
  box-shadow: 0 10px 28px rgba(40,55,10,.22); display: grid; gap: .4rem; font-size: .88rem;
}
.ov-tastatur-popup table { border-collapse: collapse; }
.ov-tastatur-popup td { padding: .12rem .5rem .12rem 0; }
.ov-tastatur-popup kbd { display: inline-block; min-width: 1.6em; text-align: center; padding: 0 .3em; border: 1px solid var(--ov-rand); border-bottom-width: 2px; border-radius: 4px; background: var(--ov-gruen-zart); font: .8rem Consolas, monospace; }
.ov-tastatur-popup small { color: var(--ov-text-leise); }
.ov-tastatur-popup[hidden] { display: none; }
.ov-objekt-zeigen {
  display: inline-block; margin-top: .3rem; border: 1px dashed var(--ov-gruen); background: var(--ov-gruen-zart);
  color: var(--ov-gruen-dunkel); border-radius: 8px; padding: .25rem .6rem; font-weight: 700; cursor: pointer;
}
.ov-objekt-gezeigt { display: inline-block; margin-top: .3rem; color: var(--ov-gruen-dunkel); font-weight: 700; }
.ov-tastatur-meldung { margin: 0; padding: .4rem .7rem; border-radius: 6px; background: var(--ov-gruen-zart); font-weight: 600; }
.ov-tastatur-meldung.ist-geloest { background: var(--ov-ok-hell); color: var(--ov-ok); }
.ov-tastatur-meldung.ist-warnung { background: var(--ov-warnung-hell); color: var(--ov-warnung); }
.ov-tastatur-meldung.ist-fehler { background: var(--ov-fehler-hell); color: var(--ov-fehler); }

/* ---------- Ergebnis ---------- */
.ov-status { padding: .55rem .75rem; border-radius: 8px; border: 1px solid transparent; }
.ov-status.ist-laeuft { background: var(--ov-gruen-zart); border-color: var(--ov-rand); }
.ov-status.ist-geloest { background: var(--ov-ok-hell); border-color: #b9dcc3; color: var(--ov-ok); }
.ov-status.ist-warnung { background: var(--ov-warnung-hell); border-color: #efd28a; color: var(--ov-warnung); }
.ov-status.ist-fehler { background: var(--ov-fehler-hell); border-color: #f0c2c2; color: var(--ov-fehler); }
.ov-status-grund { margin-top: .25rem; color: var(--ov-text); }
.ov-belohnung { display: inline-block; margin-left: .4rem; padding: .05rem .55rem; border-radius: 999px; background: #fff3c4; color: #7a5200; font-weight: 800; }
.ov-weiter { margin-left: .6rem; font-weight: 700; color: var(--ov-gruen-dunkel); }
.ov-pruefung h3 { font-size: 1rem; margin-bottom: .35rem; }
.ov-pruefgruppe { border: 1px solid var(--ov-rand); border-radius: 8px; margin-bottom: .35rem; background: #fff; }
.ov-pruefgruppe summary { cursor: pointer; padding: .4rem .7rem; font-weight: 600; }
.ov-pruefgruppe.ist-ok summary { color: var(--ov-ok); }
.ov-pruefgruppe.ist-fehler { border-color: #f0c2c2; }
.ov-pruefgruppe.ist-fehler summary { color: var(--ov-fehler); }
.ov-pruefgruppe > ul { padding: 0 .8rem .6rem 2rem; }
.ov-pruefgruppe li { margin: .2rem 0; }
.ov-pruefgruppe li ul { padding-left: 1.1rem; color: var(--ov-text); }
.ov-pruefgruppe li.ist-ok { color: var(--ov-ok); }
.ov-konsole-rahmen { border: 1px solid var(--ov-rand); border-radius: 8px; overflow: hidden; }
.ov-konsole-titel { padding: .3rem .7rem; background: var(--ov-gruen-zart); font-weight: 700; font-size: .85rem; color: var(--ov-text-leise); }
.ov-konsole { margin: 0; padding: .5rem .7rem; max-height: 200px; overflow: auto; white-space: pre-wrap; font: .85rem/1.45 Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; }
.ov-konsole.ist-fehler { color: var(--ov-fehler); background: var(--ov-fehler-hell); }

/* ---------- Palette und Objektinspektor ---------- */
/* Zwei Abschnitte teilen sich die Mitte. Offene Abschnitte bekommen den Platz zu
   gleichen Teilen und scrollen selbst; zugeklappte zeigen nur ihren Kopf. */
.ov-palette {
  width: 230px; background: var(--ov-gruen-zart); border-left: 1px solid var(--ov-rand);
  border-right: 1px solid var(--ov-rand); display: flex; flex-direction: column; min-height: 0;
}
.ov-palette-abschnitt { display: flex; flex-direction: column; min-height: 0; position: relative; }
.ov-palette-abschnitt.ist-offen { flex: 1 1 0; }
.ov-palette-umschalter {
  display: grid; text-align: left; gap: .05rem; padding: .5rem 1.5rem .5rem .8rem;
  background: var(--ov-gruen-hell); border: 0; border-bottom: 1px solid var(--ov-rand);
  cursor: pointer; flex: none;
}
.ov-palette-umschalter::after {
  content: '▾'; position: absolute; right: .8rem; top: .55rem; color: var(--ov-gruen-dunkel);
}
.ov-palette-abschnitt:not(.ist-offen) .ov-palette-umschalter::after { content: '▸'; }
.ov-palette-abschnitt:not(.ist-offen) .ov-palette-untertitel { display: none; }
.ov-palette-abschnitt:not(.ist-offen) .ov-palette-liste { display: none; }
.ov-palette-titel { font-size: .95rem; font-weight: 700; color: var(--ov-gruen-dunkel); }
.ov-palette-untertitel { font-size: .78rem; color: var(--ov-text-leise); }
.ov-palette-liste { display: grid; gap: .35rem; padding: .6rem; align-content: start; overflow: auto; min-height: 0; }
.ov-palette-gruppe {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ov-text-leise); margin-top: .2rem;
}
.ov-palette-liste button {
  text-align: left; padding: .3rem .55rem; background: #fff; border: 1px solid var(--ov-rand); border-radius: 6px;
  font: 600 .84rem/1.3 Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; color: var(--ov-gruen-dunkel); cursor: pointer;
  overflow-wrap: anywhere;
}
.ov-palette-liste button:hover { border-color: var(--ov-gruen); background: #fdfff5; }
/* Kurzhilfe zu einem Befehl: "?" rechts im Knopf, der Text schwebt darueber (oop-game.js) */
.ov-befehl-info {
  float: right; margin-left: .4rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  display: inline-grid; place-items: center; font: 700 .72rem/1 system-ui, sans-serif;
  color: var(--ov-text-leise); border: 1px solid var(--ov-rand); background: #fff; cursor: help;
}
.ov-befehl-info:hover { color: var(--ov-gruen-dunkel); border-color: var(--ov-gruen); }
.ov-befehl-tooltip {
  position: fixed; z-index: 3000; max-width: 280px; padding: .45rem .65rem; border-radius: 8px;
  background: #1f2937; color: #f9fafb; font: .82rem/1.4 system-ui, sans-serif; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  pointer-events: none;
}
.ov-befehl-tooltip[hidden] { display: none; }
/* Die Palette blendet je nach Bereich (Klasse/Hauptprogramm) um - [hidden] gilt auch fuer Flex-Gruppen. */
.ov-palette-liste [hidden] { display: none !important; }
.ov-palette-kontext {
  margin: 0; padding: .3rem .55rem; border-radius: 6px; font-size: .8rem;
  background: var(--ov-gruen-zart); color: var(--ov-gruen-dunkel);
}
.ov-palette-kontext.ist-klasse { background: #ede9fe; color: #4c1d95; }
.ov-palette-kontext code { font-weight: 700; }

.ov-inspektor { display: grid; gap: .5rem; }
.ov-inspektor-leer { margin: 0; color: var(--ov-text-leise); font-size: .88rem; }
.ov-inspektor-objekt { background: #fff; border: 1px solid var(--ov-rand); border-radius: 6px; padding: .4rem .55rem; }
.ov-inspektor-kopf { display: flex; align-items: center; gap: .4rem; margin-bottom: .25rem; }
.ov-inspektor-kopf img { width: 22px; height: 22px; }
.ov-inspektor-rolle { font-weight: 700; color: var(--ov-gruen-dunkel); }
.ov-inspektor-kopf code { background: var(--ov-gruen-zart); border-radius: 4px; padding: 0 .3rem; font-size: .85rem; }
.ov-inspektor-hinweis { font-size: .78rem; color: var(--ov-text-leise); font-style: italic; }
.ov-inspektor-gestoert { font-size: .78rem; color: #78716c; background: #e7e5e4; border-radius: 6px; padding: .3rem .5rem; margin: 0 0 .4rem; }
.ov-inspektor table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ov-inspektor th { text-align: left; font-weight: 600; color: var(--ov-text-leise); padding: 0 .4rem 0 0; width: 5.5em; }
.ov-inspektor td { font-family: Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; }

/* Objekte, die im Programm sofort bereitstehen - stehen im Aufgabentext. */
.ov-objekte { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 .2rem; }
.ov-objekte-titel { font-size: .85rem; color: var(--ov-text-leise); }
.ov-objekt {
  display: inline-flex; align-items: center; gap: .25rem; background: var(--ov-gruen-zart);
  border: 1px solid var(--ov-rand); border-radius: 999px; padding: .1rem .55rem .1rem .2rem;
}
.ov-objekt img { width: 24px; height: 24px; }
.ov-objekt code { font-weight: 700; color: var(--ov-gruen-dunkel); }

/* ---------- Editor ---------- */
.ov-code-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: .5rem; padding: .5rem .6rem 0; background: #111a33; }
.ov-datei-tabs { display: flex; gap: .2rem; flex-wrap: wrap; }
.ov-datei-tabs button {
  background: #1e293b; color: #94a3b8; border: 0; padding: .4rem .85rem; border-radius: 6px 6px 0 0;
  font: .88rem Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; cursor: pointer;
}
.ov-datei-tabs button.ist-aktiv { background: #0f172a; color: #e2e8f0; box-shadow: inset 0 2px 0 #a3c02a; }
.ov-datei-tabs button.ist-nur-lesen { font-style: italic; }
.ov-datei-tabs .ov-datei-neu { font: 700 1rem system-ui, sans-serif; padding: .3rem .7rem; color: #cbd5e1; }
.ov-datei-tabs .ov-datei-neu:hover { background: #334155; color: #fff; }
/* Blatt 14: Leiste ueber einer neuen, noch nicht gespeicherten Datei */
.ov-datei-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .4rem .6rem;
  background: #1e293b; color: #cbd5e1; font-size: .85rem; border-bottom: 1px solid #334155;
}
.ov-datei-leiste[hidden] { display: none; }
.ov-datei-leiste button {
  border: 1px solid #475569; background: #0f172a; color: #e2e8f0; border-radius: 6px; padding: .25rem .7rem;
  font-size: .85rem; cursor: pointer;
}
.ov-datei-leiste button:hover { border-color: #a3c02a; }
.ov-datei-leiste-hinweis { color: #fde68a; }
/* Lehrkraft: Schuelercode laden */
.ov-lehrer-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .35rem .6rem;
  background: #172033; color: #cbd5e1; font-size: .85rem; border-bottom: 1px solid #334155;
}
.ov-lehrer-leiste.ist-fremd { background: #3b2f0b; }
.ov-lehrer-titel { font-weight: 600; }
.ov-lehrer-leiste select, .ov-lehrer-wechseln {
  border: 1px solid #475569; background: #0f172a; color: #e2e8f0; border-radius: 6px; padding: .2rem .5rem; font-size: .85rem;
}
.ov-lehrer-leiste select[hidden], .ov-lehrer-wechseln[hidden] { display: none; }
.ov-lehrer-wechseln { cursor: pointer; }
.ov-lehrer-hinweis { color: #fde68a; }
.ov-lehrer-knopf {
  align-self: flex-start; border: 1px dashed var(--ov-rand); background: none; color: var(--ov-text-leise);
  border-radius: 6px; padding: .2rem .6rem; font-size: .85rem; cursor: pointer;
}
.ov-lehrer-knopf[aria-pressed="true"] { border-style: solid; color: var(--ov-text); background: var(--ov-gruen-zart); }

/* Blatt 14: "Speichern unter" im Stil eines Betriebssystem-Dialogs */
.ov-dateidialog {
  margin: auto; border: 1px solid #94a3b8; border-radius: 8px; padding: 0; width: min(640px, calc(100vw - 32px));
  box-shadow: 0 20px 50px rgba(15, 23, 42, .35); color: #0f172a; background: #f8fafc;
}
.ov-dateidialog::backdrop { background: rgba(15, 23, 42, .45); }
.ov-dateidialog-rahmen { display: flex; flex-direction: column; gap: .55rem; padding: 0 0 .8rem; }
.ov-dateidialog-titel { background: #e2e8f0; padding: .45rem .8rem; font-weight: 600; font-size: .9rem; border-radius: 8px 8px 0 0; }
.ov-dateidialog-pfad { margin: 0 .8rem; padding: .3rem .6rem; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; font-size: .88rem; }
.ov-dateidialog-pfad span { color: #94a3b8; margin: 0 .2rem; }
.ov-dateidialog-mitte { display: grid; grid-template-columns: minmax(130px, 1fr) 2fr; gap: .5rem; margin: 0 .8rem; min-height: 190px; }
.ov-dateidialog-mitte ul { list-style: none; margin: 0; padding: .3rem 0; border: 1px solid #cbd5e1; background: #fff; border-radius: 4px; overflow: auto; }
.ov-dateidialog-mitte button {
  display: block; width: 100%; text-align: left; border: 0; background: none; padding: .22rem .5rem;
  font-size: .88rem; cursor: pointer; color: inherit;
}
.ov-dateidialog-mitte button:hover { background: #e0f2fe; }
.ov-dateidialog-mitte button.ist-aktiv { background: #bae6fd; }
.ov-dateidialog-mitte button.ist-datei { color: #64748b; }
.ov-dateidialog-mitte .ist-leer { padding: .3rem .6rem; color: #94a3b8; font-size: .85rem; }
.ov-dateidialog-zeile { display: flex; align-items: center; gap: .5rem; margin: 0 .8rem; font-size: .88rem; }
.ov-dateidialog-zeile input { flex: 1; padding: .3rem .45rem; border: 1px solid #94a3b8; border-radius: 4px; font: .9rem Consolas, monospace; }
.ov-dateidialog-typ span { color: #475569; }
.ov-dateidialog-hinweis { margin: 0 .8rem; padding: .45rem .6rem; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 4px; font-size: .86rem; }
.ov-dateidialog-knoepfe { display: flex; justify-content: flex-end; gap: .5rem; margin: 0 .8rem; }
.ov-dateidialog-knoepfe button { padding: .35rem 1.1rem; border: 1px solid #94a3b8; border-radius: 4px; background: #fff; cursor: pointer; }
.ov-dateidialog-knoepfe .ist-primaer { background: #2563eb; border-color: #2563eb; color: #fff; }
@media (max-width: 520px) { .ov-dateidialog-mitte { grid-template-columns: 1fr; } }
.ov-heldin { color: #cbd5e1; font-size: .85rem; padding-bottom: .4rem; display: inline-flex; gap: .35rem; align-items: center; }
.ov-editor { flex: 1; display: flex; }
.ov-editor .python-code-shell { flex: 1; border: 0; border-radius: 0; }
.ov-editor .python-code-input { min-height: 480px; max-height: none; height: 100%; font-size: 14px; }
.ov-code-fuss { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; background: #111a33; border-radius: 0 0 10px 0; }
.ov-ausfuehren {
  border: 0; background: #a3c02a; color: #16200a; font-weight: 800; font-size: .95rem; padding: .45rem 1.2rem;
  border-radius: 999px; cursor: pointer;
}
.ov-ausfuehren:hover { background: #b6d33a; }
.ov-ausfuehren:disabled { opacity: .7; cursor: progress; }
.ov-tastenhinweis { color: #64748b; font-size: .8rem; }
.ov-editor-verlauf { border: 1px solid #334155; background: transparent; color: #cbd5e1; border-radius: 6px; padding: .15rem .5rem; font-size: 1rem; cursor: pointer; }
.ov-editor-verlauf:hover { background: #1e293b; color: #fff; }
.ov-python-status { margin-left: auto; font-size: .82rem; color: #94a3b8; }
.ov-python-neu-laden { margin-left: .3rem; border: 1px solid #f87171; background: transparent; color: #fecaca; border-radius: 999px; padding: .1rem .6rem; cursor: pointer; }
.ov-python-status.ist-bereit { color: #86efac; }
.ov-python-status.ist-fehler { color: #fca5a5; }

/* Tablet quer (iPad: 1080 px): drei Spalten wie am Desktop, nur mit schmalerer Palette.
   Untereinander waeren Aufgabe, Palette und Editor in eine Bildschirmhoehe gequetscht. */
@media (min-width: 981px) and (max-width: 1180px) {
  .ov-arbeitsbereich { grid-template-columns: minmax(300px, 1fr) auto minmax(360px, 1fr); }
  .ov-palette { width: 200px; }
  .ov-palette-liste { grid-template-columns: 1fr; }
  /* Schmaler Editor: lieber eine zweite Zeile im Fuss als Knoepfe mit Zeilenumbruch */
  .ov-code-fuss { flex-wrap: wrap; row-gap: .3rem; }
  .ov-code-fuss > * { white-space: nowrap; }
}
@media (max-width: 980px) {
  .ov-arbeitsbereich { grid-template-columns: 1fr; }
  .ov-palette { width: auto; border: 0; border-top: 1px solid var(--ov-rand); border-bottom: 1px solid var(--ov-rand); }
  .ov-palette-liste { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .ov-spalte-code, .ov-code-fuss { border-radius: 0 0 10px 10px; }
}
@media (max-width: 600px) {
  .ov-main { padding: 0 .5rem 1.5rem; }
  .ov-nav { padding: .5rem .75rem; }
  .ov-vorschau-hinweis { display: none; }
  .ov-kopf-nav { gap: .7rem; font-size: .9rem; }
}

/* ---------- Feste Aufteilung am Bildschirm ----------
   Spielwelt und Abspielsteuerung sollen immer sichtbar bleiben; Aufgabentext
   und Meldungen scrollen dafuer in ihrem eigenen Bereich. Unter 980px greift
   das nicht, dort liegen die Spalten ohnehin untereinander. */
@media (min-width: 981px) {
  .ov-arbeitsbereich { height: calc(100vh - 9rem); height: calc(100dvh - 9rem); min-height: 560px; }

  /* overflow-y: auto als Sicherheitsnetz: Reicht die Hoehe nicht (kleines Fenster,
     langer Auftrag), laesst sich die Spalte scrollen, statt die Meldungen abzuschneiden. */
  .ov-spalte-aufgabe {
    grid-template-rows: minmax(0, auto) auto minmax(0, 1fr);
    align-content: stretch; overflow-x: hidden; overflow-y: auto;
  }
  .ov-aufgabe { max-height: 38vh; overflow: auto; padding-right: .3rem; }
  /* min-height statt 0: Der Bereich darf nicht auf null schrumpfen, sonst
     stehen Ergebnis und Stilhinweis zwar da, sind aber nicht zu sehen. */
  .ov-meldungen { display: grid; gap: .6rem; align-content: start; overflow: auto; padding-right: .3rem; min-height: 5rem; }
  .ov-konsole { max-height: none; }

  /* Der Editor scrollt, "Ausfuehren" bleibt unten stehen. */
  .ov-palette { overflow: auto; }
  .ov-spalte-code { height: 100%; min-height: 0; }
  .ov-editor { min-height: 0; overflow: hidden; }
  .ov-editor .python-code-shell { min-height: 0; overflow: auto; }
  .ov-editor .python-code-input { min-height: 100%; max-height: none; }
  .ov-code-fuss { flex: none; }
}

/* ---------- Platz fuer die Aufgabe (ventures-ansicht.js) ----------
   ⤢ legt die Aufgabe ueber die ganze linke Spalte (der Code bleibt sichtbar),
   Welt bzw. Testfaelle lassen sich unter den Reitern einklappen. */
.ov-aufgabe-gross-knopf {
  float: right; position: sticky; top: 0; z-index: 2; margin: 0 0 .3rem .5rem;
  border: 1px solid var(--ov-rand); border-radius: 999px; background: #fff; color: var(--ov-gruen-dunkel);
  font-weight: 700; font-size: .9rem; line-height: 1.1; padding: .3rem .6rem; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.ov-aufgabe-gross-knopf:hover, .ov-aufgabe-gross-knopf:focus-visible { border-color: var(--ov-gruen); background: var(--ov-gruen-zart); }
.ov-test-leiste { display: flex; align-items: stretch; }
.ov-test-leiste > .ov-test-tabs { flex: 1; min-width: 0; }
.ov-einklappen-knopf {
  flex: none; border: 0; border-bottom: 2px solid var(--ov-rand); background: none; color: var(--ov-gruen-dunkel);
  font-weight: 700; font-size: .82rem; padding: .3rem .7rem; cursor: pointer; white-space: nowrap;
}
.ov-einklappen-knopf:hover, .ov-einklappen-knopf:focus-visible { background: var(--ov-gruen-zart); }
.ov-welt:has(.ist-eingeklappt) .ov-szene-leiste { display: none; }
.ov-szene-rahmen.ist-eingeklappt > .ov-szene:not(.ist-pruefstand),
.ov-szene-rahmen.ist-eingeklappt > .ov-diagramme { display: none; }
/* Pruefstand eingeklappt: nur die Kopfzeile ("x von y Tests bestanden", Testergebnisse zeigen) */
.ov-szene-rahmen.ist-eingeklappt > .ist-pruefstand { min-height: 0; padding: .35rem 1rem; }
.ov-szene-rahmen.ist-eingeklappt .ov-ps-tests > :not(.ov-ps-titel),
.ov-szene-rahmen.ist-eingeklappt .ov-ps-eigene { display: none; }
.ov-szene-rahmen.ist-eingeklappt .ov-ps-tests > .ov-ps-titel { position: static; margin: 0; padding: 0; }
@media (min-width: 981px) {
  .ov-spalte-aufgabe { position: relative; }
  /* Eingeklappt: Die Aufgabe nimmt sich die frei gewordene Hoehe */
  .ov-spalte-aufgabe:has(> .ov-welt .ist-eingeklappt, > .ov-welt.ist-eingeklappt) > .ov-aufgabe { max-height: none; }
  .ov-spalte-aufgabe.ist-aufgabe-gross { overflow: hidden; }
  /* !important: OOPventure begrenzt die Hoehe sonst per style, damit die Welt passt */
  .ov-spalte-aufgabe.ist-aufgabe-gross > .ov-aufgabe {
    position: absolute; inset: 0; z-index: 8; max-height: none !important; overflow: auto;
    padding: .8rem .9rem; background: #fff; box-shadow: 6px 0 14px -8px rgba(0,0,0,.3);
  }
}
/* Untereinander steht die Aufgabe ohnehin ganz da */
@media (max-width: 980px) {
  .ov-aufgabe-gross-knopf { display: none; }
}

/* Konfetti liegt ueber allem und faengt keine Klicks ab. */
.ov-konfetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* Welches Objekt soll es tun? Genau eines ist aktiv. */
.ov-objektwahl { display: flex; gap: .4rem; flex-wrap: wrap; }
.ov-objektwahl button {
  display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem .2rem .25rem;
  background: #fff; border: 1px solid var(--ov-rand); border-radius: 999px; cursor: pointer;
}
.ov-objektwahl button[hidden] { display: none; }
.ov-objektwahl button.ist-programm { border-style: dashed; }
.ov-objektwahl button.ist-programm::after { content: 'aus deinem Programm'; font-size: .66rem; color: var(--ov-text-leise); margin-left: .1rem; }
.ov-objektwahl button img { width: 22px; height: 22px; }
.ov-objektwahl button code { font-weight: 700; color: var(--ov-text-leise); }
.ov-objektwahl button.ist-aktiv { background: var(--ov-gruen); border-color: var(--ov-gruen-dunkel); }
.ov-objektwahl button.ist-aktiv code { color: #fff; }

/* Stilhinweise: kein Fehler, sondern eine Anmerkung zum Programmierstil. */
.ov-stilhinweise { display: grid; gap: .4rem; }
.ov-stilhinweis {
  display: flex; gap: .5rem; padding: .5rem .7rem; border-radius: 8px;
  background: var(--ov-warnung-hell); border: 1px solid #efd28a; color: var(--ov-text);
}
.ov-stilhinweis-zeichen { font-size: 1.1rem; line-height: 1.4; }
.ov-stilhinweis-ort { display: block; margin-top: .15rem; font-size: .82rem; color: var(--ov-text-leise); }

/* ---------- Heft ----------
   Das Heft gibt die Reihenfolge vor. Auf der Levelseite liegt es ueber dem Level
   und klappt fuer einen Level-Schritt ein; dann ersetzt der Auftrag den Aufgabentext. */
.ov-level { position: relative; }
.ov-heft-kopfknopf {
  border: 0; background: #fff; color: var(--ov-gruen-dunkel); font-weight: 800; border-radius: 999px;
  padding: .2rem .8rem; cursor: pointer;
}
/* Als Link in der Kopfzeile: nicht weiss auf weiss (.ov-kopf-nav a faerbt Links sonst weiss) */
.ov-kopf-nav a.ov-heft-kopfknopf { color: var(--ov-gruen-dunkel); text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.ov-kopf-nav a.ov-heft-kopfknopf:hover { background: var(--ov-gold, #f2c230); color: #1f2712; }
.ov-heft-scrim { position: absolute; inset: 0; background: rgba(31,39,18,.38); border-radius: 10px; z-index: 20; }
.ov-heft {
  background: #fffffd; border: 1px solid var(--ov-rand); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden;
}
.ov-heft.ist-overlay {
  position: absolute; z-index: 21; top: .6rem; bottom: .6rem; left: 50%; width: min(900px, calc(100% - 1.2rem));
  translate: -50% 0; box-shadow: 0 18px 50px rgba(40,55,10,.25);
  transform-origin: 15% 0; transition: transform .35s cubic-bezier(.3,.7,.2,1), opacity .3s ease;
}
.ov-heft.ist-overlay.ist-zu { transform: scale(.35, .08); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ov-heft.ist-overlay { transition: none; } }
.ov-heft-kopf { display: grid; gap: .4rem; padding: .7rem 1.1rem .6rem; border-bottom: 1px solid #e6ebd8; background: #fff; }
.ov-heft-kopfzeile { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ov-heft-nr { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ov-gruen-dunkel); background: var(--ov-gruen-hell); padding: .1rem .5rem; border-radius: 4px; }
.ov-heft-kopfzeile h2 { font-size: 1.12rem; }
.ov-heft-rechts { margin-left: auto; display: flex; gap: .6rem; align-items: center; }
.ov-heft-druck { font-size: .85rem; font-weight: 700; color: var(--ov-gruen-dunkel); }
.ov-heft-zu { background: #fff; border: 1px solid var(--ov-rand); border-radius: 999px; padding: .2rem .8rem; font-weight: 700; font-size: .85rem; cursor: pointer; }
.ov-heft-band { display: flex; gap: 3px; }
.ov-heft-band span { flex: 1; height: 6px; border-radius: 2px; background: #e6ebd8; }
.ov-heft-band span.ist-ok { background: var(--ov-gruen); }
.ov-heft-band span.ist-jetzt { background: var(--ov-gold); }
.ov-heft-fortschritt { font-size: .78rem; color: var(--ov-text-leise); font-variant-numeric: tabular-nums; }
.ov-heft-inhalt { padding: 1rem 1.4rem 2rem; display: grid; gap: 1.3rem; align-content: start; }
.ov-heft.ist-overlay .ov-heft-inhalt { overflow-y: auto; flex: 1; }
.ov-heft-aufgabe { display: grid; gap: .8rem; max-width: 72ch; }
.ov-heft-aufgabe > h3, .ov-heft-neu > h3 { font-size: 1rem; }
/* Neu seit dem letzten erledigten Schritt: Linie am Rand, damit klar ist, ab wo man weiterlesen muss.
   Sie laeuft ueber die Luecke zur naechsten Aufgabe hinweg bis zum aktuellen Schritt. */
.ov-heft-neu { position: relative; display: grid; gap: .8rem; scroll-margin-top: 4.5rem; }
.ov-heft-neu::before {
  content: ''; position: absolute; left: -.85rem; top: .35rem; bottom: -1.3rem; width: 4px;
  border-radius: 2px; background: var(--ov-gold);
}
.ov-heft-neu.ist-ende::before { bottom: 0; }
.ov-heft-neu.ist-anfang::after {
  content: ''; position: absolute; left: calc(-.85rem - 4px); top: 0; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ov-gold);
}
.ov-heft-neu-marke {
  justify-self: start; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #7a5200; line-height: 1.2;
}
.ov-heft-schritt { display: grid; gap: .5rem; }
.ov-heft-schritt p { margin: 0 0 .35rem; }
.ov-heft-schritt code, .ov-auftrag code { background: var(--ov-gruen-zart); border: 1px solid var(--ov-rand); padding: 0 .25rem; border-radius: 4px; font-size: .92em; }
/* Ein Code-Ausdruck bricht nicht mitten in sich um (held.gib_objekt_bei(3, 2) bleibt eine Zeile) */
:is(.ov-beschreibung, .ov-hinweis, .ov-heft-schritt, .ov-auftrag) :not(pre) > code { white-space: nowrap; }
:is(.ov-beschreibung, .ov-hinweis, .ov-heft-schritt, .ov-auftrag) .ov-heft-pfeil code { white-space: normal; }
.ov-heft-schritt.ist-erledigt { color: var(--ov-text-leise); }
.ov-heft-schritt.ist-jetzt { background: var(--ov-gruen-zart); border: 1px solid var(--ov-rand); border-radius: 10px; padding: .7rem .9rem; }
/* Nur Lehrkraefte: den aktuellen Schritt ohne Loesung erledigen */
.ov-heft-ueberspringen {
  justify-self: end; margin-top: -1.6rem; font-size: .75rem; font-weight: 700; color: var(--ov-text-leise);
  background: transparent; border: 1px dashed var(--ov-rand); border-radius: 999px; padding: .05rem .6rem; cursor: pointer;
}
.ov-heft-ueberspringen:hover, .ov-heft-ueberspringen:focus-visible { color: var(--ov-text); border-color: var(--ov-gruen); background: #fff; }
.ov-heft-jetzt { justify-self: start; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--ov-gold); color: #1f2712; padding: 0 .45rem; border-radius: 4px; }
.ov-heft-teil { display: grid; grid-template-columns: 1.5em 1fr; gap: .3rem; }
.ov-heft-teil > div { display: grid; gap: .5rem; min-width: 0; }
.ov-heft-bst { font-weight: 800; }
.ov-heft-code, .ov-heft-snip { margin: 0; font: .82rem/1.45 Consolas, "Cascadia Code", monospace; border-radius: 6px; padding: .45rem .7rem; overflow-x: auto; white-space: pre; }
.ov-heft-code { background: #0f172a; color: #dbeafe; }
/* ProgVenture: allgemeine Form eines Konzepts und Beispiel dazu (```allgemein) */
.ov-heft-code[data-titel]::before { content: attr(data-titel); display: block; margin-bottom: .2rem;
  font: 700 .7rem/1.2 system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #a3b8d8; }
/* Aufklappbar im Heft (">>> Knopftext" … "<<<"), z. B. Java-Vergleich in Heft 18 */
.ov-heft-mehr { margin: .5rem 0; }
.ov-heft-mehr > summary { display: inline-block; cursor: pointer; list-style: none; padding: .3rem .8rem; border-radius: 999px;
  border: 1px solid var(--ov-rand, #c9d3a8); background: var(--ov-gruen-zart, #f3f7e6); font-size: .9rem; font-weight: 600; }
.ov-heft-mehr > summary::-webkit-details-marker { display: none; }
.ov-heft-mehr > summary::before { content: "▸ "; }
.ov-heft-mehr[open] > summary::before { content: "▾ "; }
.ov-heft-mehr[open] > summary { margin-bottom: .4rem; }
.ov-heft-code.ist-fremd { background: #1e1b2e; }
.ov-heft-code[data-titel="Allgemein"] { background: #1e293b; border-left: 4px solid #a3c614; font-style: italic; }
/* Bilder aus dem Arbeitsblatt (tools/docx_bilder.py) */
.ov-heft-bild { margin: .2rem 0; display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; }
/* Bild neben dem Text (![…](bild.jpg){rechts}) - wie auf dem Arbeitsblatt */
.ov-heft-bild.ist-rechts, .ov-heft-bild.ist-links { width: min(34%, 190px); margin: .2rem 0 .6rem; }
.ov-heft-bild.ist-rechts { float: right; margin-left: 1rem; }
.ov-heft-bild.ist-links { float: left; margin-right: 1rem; }
.ov-heft-bild.ist-rechts img, .ov-heft-bild.ist-links img { max-height: none; border: 3px solid #1f2712; border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(31,39,18,.25); }
.ov-heft-schritt::after { content: ''; display: block; clear: both; }
/* Demo-Spielwelt in Heft 0 */
.ov-demo-platz { width: 100%; max-width: 560px; margin: .4rem auto; display: flex; justify-content: center; }
.ov-demo-flaeche { display: block; max-width: 100%; image-rendering: pixelated; border: 3px solid #1f2712; border-radius: 8px;
  background: #86c06c; box-shadow: 0 6px 18px rgba(31,39,18,.2); }
/* Shop: Paket ausprobieren (Lehrkraefte) */
.ov-probelauf { margin: auto; width: min(760px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); border: 1px solid var(--ov-rand);
  border-radius: 12px; padding: .8rem 1rem 1rem; }
.ov-probelauf::backdrop { background: rgba(15, 23, 42, .5); }
.ov-probelauf-kopf { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.ov-probelauf-kopf h2 { margin: 0; font-size: 1.2rem; }
.ov-probelauf-zu { font: inherit; font-size: 1.1rem; border: 1px solid var(--ov-rand); background: #fff; border-radius: 999px;
  width: 2.4rem; height: 2.4rem; cursor: pointer; }
.ov-probelauf-eigen { color: #8a5a00; }
.ov-probelauf-gelaende { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-weight: 700; }
.ov-probelauf-gelaende select { font: inherit; font-size: 16px; padding: .2rem .4rem; }
.ov-demo p { text-align: center; font-size: .9rem; color: var(--ov-text-leise); }
.ov-heft-bild img { max-width: 100%; max-height: 260px; border-radius: 6px; }
.ov-auftrag .ov-heft-bild img { max-height: 160px; }
.ov-heft-snip { background: #fff; border: 1px solid #e6ebd8; color: var(--ov-text); }
.ov-heft-station { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; border: 1px solid var(--ov-rand); background: #fff; border-radius: 10px; padding: .45rem .6rem; }
.ov-heft-lvicon { width: 38px; height: 38px; flex: none; border-radius: 8px; background: #6aa84f; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .72rem; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.ov-heft-lvicon.ist-bonus { background: #c28a18; }
.ov-heft-lvinfo { display: grid; line-height: 1.25; }
.ov-heft-lvinfo small { color: var(--ov-text-leise); }
.ov-heft-los, .ov-heft-knopf {
  border: 0; background: var(--ov-gruen); color: #fff; font-weight: 700; border-radius: 999px;
  padding: .35rem 1rem; cursor: pointer; text-decoration: none; display: inline-block;
}
.ov-heft-los { margin-left: auto; }
.ov-heft-los:hover, .ov-heft-knopf:hover { background: var(--ov-gruen-dunkel); text-decoration: none; }
.ov-heft-los.ist-zweit, .ov-heft-knopf.ist-zweit { background: #fff; color: var(--ov-text); border: 1px solid var(--ov-rand); }
.ov-heft-knopf:disabled { opacity: .5; cursor: progress; }
.ov-heft-ergebnis { display: grid; gap: .25rem; font-size: .9rem; }
.ov-heft-ergebnis .ist-ok, .ov-heft-rueck.ist-ok { color: var(--ov-ok); font-weight: 700; }
.ov-heft-rueck { font-size: .88rem; font-weight: 700; }
.ov-heft-rueck.ist-falsch { color: var(--ov-fehler); }
/* Hinweis, wenn die Versuche nach Raten aussehen (ventures_kern/raten.py) */
.ov-heft-raten { margin: .5rem 0 0; padding: .45rem .7rem; border-radius: 8px; background: #fff3cd; color: #664d03; font-size: .88rem; }
.ov-heft-knoepfe { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ov-heft-label { font-weight: 700; font-size: .9rem; }
.ov-heft-antwort { width: 100%; border: 1px solid var(--ov-rand); border-radius: 8px; padding: .45rem .6rem; font: inherit; resize: vertical; background: #fff; }
.ov-heft-antwort.ist-code { font: .85rem/1.45 Consolas, "Cascadia Code", monospace; }
/* ---------- Objektdiagramme zusammenklicken ---------- */
.ov-uml { margin: .5rem 0; background: var(--ov-flaeche); border: 1.5px dashed var(--ov-rand); border-radius: 10px; padding: 14px; }
.ov-uml-flaeche { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.ov-uml-kasten { position: relative; }
/* --ov-uml-zeichen: laengste Zeile (oop-uml.js); dazu Marke, Innenabstand und der Loeschknopf der Zeile */
.ov-uml-rechteck { background: #fff; border: 1.8px solid var(--ov-text); min-width: max(210px, calc(var(--ov-uml-zeichen, 0) * 1ch + 80px)); font: 14px Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; }
.ov-uml-rechteck.ist-ok { box-shadow: 0 0 0 3px var(--ov-ok-hell), 0 0 0 4.5px var(--ov-ok); }
.ov-uml-rechteck.ist-fehler { box-shadow: 0 0 0 3px var(--ov-fehler-hell), 0 0 0 4.5px var(--ov-fehler); }
.ov-uml-fach { border-top: 1.8px solid var(--ov-text); padding: 3px 5px; display: grid; gap: 1px; }
.ov-uml-fach:first-child { border-top: 0; }
.ov-uml-fach.ist-kopf .ov-uml-feld { text-align: center; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* Klassennamen werden nicht unterstrichen - daran erkennt man Klassen- und Objektdiagramm */
.ov-uml-rechteck.ist-klasse .ov-uml-fach.ist-kopf .ov-uml-feld { text-decoration: none; }
.ov-uml-zeile { display: flex; align-items: center; gap: 2px; }
.ov-uml-feld { flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; padding: 2px 5px; border-radius: 4px; font: inherit; color: inherit; }
.ov-uml-feld:hover { border-color: var(--ov-rand); }
.ov-uml-feld:focus { border-color: var(--ov-gruen); background: #fff; outline: none; }
.ov-uml-feld::placeholder { color: var(--ov-text-leise); opacity: .55; font-style: italic; font-weight: 400; }
.ov-uml-fach.ist-kopf .ov-uml-feld::placeholder { text-decoration: none; }
.ov-uml-zeile.ist-ok .ov-uml-feld { background: var(--ov-ok-hell); }
.ov-uml-zeile.ist-fehler .ov-uml-feld { background: var(--ov-fehler-hell); border-color: var(--ov-fehler); }
.ov-uml-zeile.ist-info .ov-uml-feld { background: #edf2f9; }
.ov-uml-marke { width: 1.1em; text-align: center; font: 800 .85rem 'Segoe UI', system-ui, sans-serif; }
.ov-uml-zeile.ist-ok .ov-uml-marke { color: var(--ov-ok); }
.ov-uml-zeile.ist-fehler .ov-uml-marke { color: var(--ov-fehler); }
.ov-uml-zeile.ist-info .ov-uml-marke { color: #3a5a8c; }
.ov-uml-mini { border: 0; background: none; color: var(--ov-text-leise); width: 22px; height: 22px; border-radius: 5px; font: 800 .9rem/1 'Segoe UI', system-ui, sans-serif; padding: 0; flex: none; cursor: pointer; }
.ov-uml-mini:hover { background: var(--ov-gruen-zart); color: var(--ov-gruen-dunkel); }
.ov-uml-mini:disabled { opacity: .35; cursor: default; }
.ov-uml-zeile-weg { opacity: 0; }
.ov-uml-zeile:hover .ov-uml-zeile-weg, .ov-uml-zeile:focus-within .ov-uml-zeile-weg { opacity: 1; }
@media (hover: none) { .ov-uml-zeile-weg { opacity: 1; } }
.ov-uml-plus { justify-self: start; border: 0; background: none; color: var(--ov-gruen-dunkel); font: 650 .78rem 'Segoe UI', system-ui, sans-serif; padding: 0 4px; border-radius: 4px; cursor: pointer; }
.ov-uml-plus:hover { background: var(--ov-gruen-zart); }
.ov-uml-hinweis { font: .74rem 'Segoe UI', system-ui, sans-serif; color: #3a5a8c; padding: 0 4px 2px; }
.ov-uml-fuss { display: flex; gap: 4px; align-items: center; justify-content: center; font-size: .78rem; color: var(--ov-text-leise); padding-top: 5px; }
.ov-uml-fuss .ov-uml-mini { width: 26px; height: 24px; border: 1px solid var(--ov-rand); background: #fff; }
.ov-uml-weg { position: absolute; top: -11px; right: -11px; z-index: 1; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ov-rand); background: #fff; color: var(--ov-text-leise); font-weight: 800; line-height: 1; padding: 0; cursor: pointer; opacity: 0; }
.ov-uml-kasten:hover .ov-uml-weg, .ov-uml-kasten:focus-within .ov-uml-weg { opacity: 1; }
@media (hover: none) { .ov-uml-weg { opacity: 1; } }
/* Tablet: Knoepfe gross genug fuer den Finger */
@media (pointer: coarse) {
  .ov-uml-mini { width: 32px; height: 32px; }
  .ov-uml-fuss .ov-uml-mini { width: 34px; height: 32px; }
  .ov-uml-weg { width: 30px; height: 30px; top: -15px; right: -15px; }
}
.ov-uml-neu { border: 1.8px dashed var(--ov-rand); background: none; min-width: 150px; min-height: 80px; color: var(--ov-text-leise); font-weight: 650; border-radius: 4px; cursor: pointer; }
.ov-uml-neu:hover { border-color: var(--ov-gruen); color: var(--ov-gruen-dunkel); }
.ov-uml-tasten { margin: .6rem 0 0; font-size: .8rem; color: var(--ov-text-leise); }
.ov-uml-tasten kbd { font: .75rem Consolas, monospace; border: 1px solid var(--ov-rand); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: #fff; }
.ov-uml-ergebnis { border-radius: 10px; padding: .55rem .8rem; margin: .4rem 0; display: grid; gap: .3rem; font-size: .92rem; }
.ov-uml-ergebnis.ist-gut { background: var(--ov-ok-hell); border: 1px solid var(--ov-ok); }
.ov-uml-ergebnis.ist-offen { background: var(--ov-fehler-hell); border: 1px solid var(--ov-fehler); }
.ov-uml-ergebnis ul { margin: 0; padding-left: 1.2em; display: grid; gap: 2px; }
.ov-uml-ergebnis .ist-info { color: #3a5a8c; }
.ov-uml-frueher { font-size: .88rem; color: var(--ov-text-leise); font-style: italic; }

.ov-auftrag-offen { margin: .3rem 0; padding: .3rem .6rem; border-radius: 6px; background: var(--ov-warnung-hell); color: var(--ov-warnung); font-weight: 600; font-size: .9rem; }
.ov-heft-info.ist-lesen { border: 2.5px solid #2f4d7a; border-radius: 8px; box-shadow: 0 2px 8px rgba(47,77,122,.18); }
.ov-heft-diagramme.ist-pfeil { flex-wrap: nowrap; align-items: center; gap: 10px; margin-top: .6rem; padding-bottom: 2px; }
.ov-heft-diagramme.ist-pfeil .ov-heft-od { font-size: .7rem; flex: none; }
.ov-heft-diagramme.ist-pfeil .ov-heft-od th, .ov-heft-diagramme.ist-pfeil .ov-heft-od td { padding: .1rem .4rem; }
.ov-heft-pfeil { flex: 1 1 110px; min-width: 110px; display: grid; gap: 4px; justify-items: center; text-align: center; }
.ov-heft-pfeil code { font-size: .78rem; overflow-wrap: anywhere; }
.ov-heft-pfeil span { width: 100%; height: 3px; background: #b5443a; position: relative; }
.ov-heft-pfeil span::after { content: ''; position: absolute; right: -2px; top: -6px; border: 7.5px solid transparent; border-left: 11px solid #b5443a; border-right: 0; }
.ov-heft-od.ist-neu th { color: #c0281c; }
.ov-demo-hinweis { background: var(--ov-warnung-hell); border: 1px solid #e3c36b; border-radius: 10px; padding: .6rem .9rem; max-width: 70ch; }
.ov-heft-vorschlag { display: block; margin: .15rem 0 .4rem; padding: .3rem .6rem; border-radius: 6px; background: var(--ov-warnung-hell); color: var(--ov-warnung); font-size: .88rem; line-height: 1.45; }
.ov-heft-merke { border: 2px solid var(--ov-text); border-radius: 4px; background: #f7f8f2; padding: .6rem .9rem; line-height: 2; }
.ov-heft-merke p { margin: 0 0 .3rem; }
.ov-heft-luecke { font: inherit; width: 9.5em; border: 0; border-bottom: 2px solid var(--ov-gruen-dunkel); background: #fff; padding: 0 .3rem; border-radius: 3px 3px 0 0; }
.ov-heft-luecke.ist-eigen { border-bottom-style: dashed; }
.ov-heft-luecke.ist-eigen::placeholder { color: #8a8a8a; font-size: .8em; }
.ov-heft-luecke.ist-ok { border-color: var(--ov-ok); background: var(--ov-ok-hell); }
.ov-heft-luecke.ist-falsch { border-color: var(--ov-fehler); background: var(--ov-fehler-hell); }
.ov-heft-frei { display: block; width: 100%; font: inherit; line-height: 1.5; border: 0; border-bottom: 1.5px dashed var(--ov-text-leise); background: transparent; resize: vertical; padding: .1rem .3rem; }
.ov-heft-woerter { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .85rem; }
.ov-heft-woerter > span { color: var(--ov-text-leise); font-style: italic; }
.ov-heft-woerter button { background: #fff; border: 1px solid var(--ov-rand); border-radius: 999px; padding: .05rem .6rem; font-style: italic; cursor: pointer; }
.ov-heft-woerter button.ist-benutzt { text-decoration: line-through; opacity: .45; background: transparent; border-style: dashed; }
.ov-heft-mc label { display: flex; gap: .5rem; align-items: baseline; padding: .15rem 0; }
.ov-heft-info { border: 2px solid #2f4d7a; border-radius: 8px; padding: .6rem .9rem; background: #fff; }
.ov-heft-diagramme { display: flex; gap: .9rem; flex-wrap: wrap; overflow-x: auto; }
.ov-heft-od { border-collapse: collapse; font: .84rem/1.45 Consolas, "Cascadia Code", monospace; background: #fff; }
.ov-heft-od th, .ov-heft-od td { border: 1.5px solid var(--ov-text); padding: .15rem .6rem; text-align: left; }
.ov-heft-od th { text-decoration: underline; text-underline-offset: 3px; }
.ov-heft-od.ist-klasse th { text-decoration: none; text-align: center; }
.ov-heft-od .ist-methoden { color: var(--ov-gruen-dunkel); }
.ov-heft-verdeckt { border: 1px dashed var(--ov-rand); border-radius: 10px; padding: .7rem .9rem; color: var(--ov-text-leise); font-size: .9rem; display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.ov-heft-verdeckt.ist-fertig { border-style: solid; color: var(--ov-ok); font-weight: 700; }
.ov-heft-balken { display: grid; gap: 5px; flex: 0 0 120px; }
.ov-heft-balken i { display: block; height: 7px; border-radius: 4px; background: #e6ebd8; }
.ov-heft-balken i + i { width: 65%; }

/* Auftrag aus dem Heft, ersetzt im Level den Aufgabentext und die Hinweise. */
.ist-heft-station .ov-beschreibung, .ist-heft-station .ov-hinweise { display: none; }
.ov-auftrag { border: 1px solid var(--ov-rand); border-radius: 10px; background: #fffffd; overflow: hidden; margin-bottom: .4rem; }
.ov-auftrag.ist-puls { animation: ov-puls 1.2s ease-out 1; }
@keyframes ov-puls { 0% { box-shadow: 0 0 0 0 rgba(214,158,46,.7); } 100% { box-shadow: 0 0 0 14px rgba(214,158,46,0); } }
.ov-auftrag-kopf { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .3rem .5rem .3rem .75rem; background: var(--ov-gruen-hell); }
.ov-auftrag-kicker { font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ov-gruen-dunkel); }
.ov-auftrag-kopf button { background: #fff; border: 1px solid var(--ov-rand); border-radius: 999px; padding: .1rem .7rem; font-weight: 700; font-size: .82rem; cursor: pointer; }
.ov-auftrag-text { padding: .55rem .75rem; display: grid; gap: .45rem; }
.ov-auftrag-text p { margin: 0; }
.ov-auftrag-leise { color: var(--ov-text-leise); font-size: .88rem; }
.ov-auftrag-erinnerung { font-size: .88rem; background: var(--ov-gruen-zart); border-left: 4px solid var(--ov-ok); padding: .4rem .6rem; border-radius: 0 6px 6px 0; }
.ov-bedenkzeit { display: grid; gap: .3rem; }
.ov-bedenkzeit small { color: var(--ov-text-leise); font-size: .88rem; }
.ov-bedenkzeit-balken { display: block; height: 8px; border-radius: 999px; background: var(--ov-rand); overflow: hidden; }
.ov-bedenkzeit-balken i { display: block; height: 100%; background: var(--ov-ok); transition: width .25s linear; }
@media (prefers-reduced-motion: reduce) { .ov-bedenkzeit-balken i { transition: none; } }
.ov-auftrag-verlangt { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .82rem; color: var(--ov-text-leise); }
/* OOPventure: "Was verlangt der Auftrag?" ist wie ein Tipp erst zugeklappt */
details.ov-auftrag-verlangt:not([open]) { display: block; }
.ov-auftrag-verlangt summary { cursor: pointer; color: var(--ov-gruen-dunkel); font-weight: 600; }
/* Soll auffallen: wer unsicher ist, welcher Code vorkommen muss, klickt hier */
details.ov-auftrag-verlangt { font-size: .9rem; }
details.ov-auftrag-verlangt > summary { display: inline-block; padding: .25rem .7rem; border: 1.5px solid var(--ov-gruen-dunkel); border-radius: 999px; background: var(--ov-ok-hell); }
details.ov-auftrag-verlangt > summary:hover { background: #fff; }
details.ov-auftrag-verlangt[open] > summary { margin-bottom: .35rem; }
.ov-auftrag-verlangt[open] summary { flex-basis: 100%; }
.ov-chip { display: inline-flex; gap: .25rem; border: 1px solid var(--ov-rand); border-radius: 999px; padding: 0 .55rem; font: .8rem Consolas, "Cascadia Code", monospace; color: var(--ov-text); background: #fff; }
.ov-chip.ist-ok { border-color: var(--ov-ok); color: var(--ov-ok); background: var(--ov-ok-hell); }
.ov-chip.ist-fehlt { border-color: var(--ov-warnung); color: var(--ov-warnung); background: var(--ov-warnung-hell); }
.ov-auftrag-tipps { display: grid; gap: .35rem; }
/* Schritt erledigt, Level vielleicht noch nicht: der Weg ins Heft soll ins Auge springen. */
.ov-auftrag.ist-erledigt { border-color: var(--ov-ok); box-shadow: 0 0 0 3px rgba(28,124,58,.18); }
.ov-auftrag.ist-erledigt .ov-auftrag-kopf { background: var(--ov-ok-hell); }
.ov-auftrag.ist-erledigt .ov-auftrag-text { opacity: .7; }
.ov-auftrag-fertig {
  display: grid; gap: .35rem; justify-items: start; margin: .55rem .75rem 0; padding: .6rem .75rem;
  background: var(--ov-ok-hell); border: 1px solid #b9dcc3; border-radius: 8px; color: var(--ov-ok);
}
.ov-auftrag-fertig strong { font-size: 1.05rem; }
.ov-auftrag-fertig small { color: var(--ov-text); font-size: .88rem; }
.ov-auftrag-weiter {
  border: 0; border-radius: 999px; padding: .45rem 1.2rem; background: var(--ov-ok); color: #fff;
  font-weight: 800; font-size: 1rem; cursor: pointer; animation: ov-weiter-puls 1.6s ease-in-out infinite;
}
.ov-auftrag-weiter:hover { background: #15602c; }
@keyframes ov-weiter-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(28,124,58,.55); } 50% { box-shadow: 0 0 0 9px rgba(28,124,58,0); } }
.ov-heft-kopfknopf.ist-weiter { background: var(--ov-ok-hell); color: var(--ov-ok); animation: ov-weiter-puls 1.6s ease-in-out infinite; }
.ov-heft-kopfknopf.ist-weiter::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: .35rem; border-radius: 50%; background: #2fbf5b; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .ov-auftrag-weiter, .ov-heft-kopfknopf.ist-weiter { animation: none; } }
.ov-auftrag-link { justify-self: start; background: none; border: 0; padding: 0; color: var(--ov-gruen-dunkel); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ov-heft-zurueck { margin-left: .4rem; border: 1px solid currentColor; background: #fff; color: inherit; border-radius: 999px; padding: .1rem .7rem; font-weight: 700; cursor: pointer; }
.ov-heft-toast {
  position: absolute; z-index: 30; left: 50%; top: 40%; translate: -50% -50%; background: var(--ov-ok); color: #fff;
  font-weight: 800; font-size: 1.15rem; padding: .8rem 1.5rem; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.2);
}
.ov-arbeitsbereich { position: relative; }

/* Eigene Heftseite */
.ov-heftseite { margin-top: .75rem; display: grid; gap: .5rem; }
.ov-heftseite .ov-heft { max-width: 900px; width: 100%; margin: 0 auto; }
.ov-heftseite-nav { max-width: 900px; width: 100%; margin: 0 auto; font-weight: 700; }

/* Uebersicht: Heft-Karten mit Vorschaubild, darunter Heft, Uebungs- und Expertenmodul */
.ov-abschnitt-titel { font-size: 1.15rem; margin: 1.2rem 0 .2rem; color: var(--ov-gruen-dunkel); }
.ov-abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem;
  border-bottom: 2px solid var(--ov-rand); margin-bottom: .8rem; padding-bottom: .3rem; }
.ov-abschnitt-kopf .ov-abschnitt-titel { margin: 1.2rem 0 0; }
.ov-abschnitt-kopf p { color: var(--ov-text-leise); font-size: .9rem; }
/* Fokus ueber Phase 1 (klein wie in ProgVenture): naechstes Heft + Stand der letzten Hefte und angefangener Module */
.ov-fokus { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: .9rem; margin: 0 0 1rem; align-items: start; }
.ov-fokus.ohne-stand { grid-template-columns: minmax(0, 1fr); }
.ov-fokus-titel { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .4rem; color: var(--ov-text-leise); }
.ov-fokus-karte { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: .8rem; align-items: center; padding: .6rem;
  border: 3px solid var(--ov-gold, #d69e2e); border-radius: 14px; background: #fff7d6; }
.ov-fokus-karte .ov-thumb-rahmen { border-radius: 8px; overflow: hidden; max-width: 170px; }
.ov-fokus-karte .ov-thumb-rahmen svg { display: block; width: 100%; height: auto; }
.ov-fokus-text { display: grid; gap: .3rem; min-width: 0; }
.ov-fokus-text h4 { margin: 0; font-size: 1rem; line-height: 1.2; }
.ov-fokus-text .ov-heft-aktionen { margin: 0; }
.ov-fokus-stand { display: grid; gap: .3rem; padding: .6rem .8rem; border: 1px solid var(--ov-rand); border-radius: 12px; background: var(--ov-karte, #fff); }
.ov-fokus-stand .ov-fokus-titel { margin: 0 0 .1rem; }
.ov-stand-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 64px 2.4rem; gap: .5rem; align-items: center; color: inherit;
  text-decoration: none; font-size: .88rem; }
.ov-stand-zeile:hover { text-decoration: underline; }
.ov-stand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-stand-zeile small { text-align: right; color: var(--ov-text-leise); }
.ov-stand-zeile.ist-fertig small { color: var(--ov-gruen-dunkel); font-weight: 700; }
.ov-fokus-hinweis { padding: .8rem 1rem; background: #fff; border: 2px solid var(--ov-gruen); border-radius: 12px; }
.ov-fokus-hinweis .ov-fokus-titel { font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--ov-gruen-dunkel); }
.ov-fokus-hinweis p { margin: 0 0 .5rem; font-size: .92rem; }
.ov-fokus-hinweis.ist-froehlich { background: var(--ov-gruen-zart); text-align: center; }
@media (max-width: 820px) { .ov-fokus { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .ov-fokus-karte { grid-template-columns: minmax(0, 1fr); } }
.ov-heft-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
/* Uebersicht nach Themen (oopventure/gliederung.py): Phase als Banner, darunter aufklappbare Gruppen mit Punkten */
.ov-ansicht-wahl { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .85rem; }
.ov-ansicht-wahl button { font: inherit; padding: .2rem .7rem; min-height: 2rem; border-radius: 999px; border: 1px solid var(--ov-rand);
  background: #fff; color: var(--ov-text); cursor: pointer; }
.ov-ansicht-wahl button.ist-aktiv { background: var(--ov-gruen); border-color: transparent; color: #fff; font-weight: 700; }
.ov-ansicht-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1rem; padding: .6rem .9rem;
  background: var(--ov-gruen-zart); border: 1px solid var(--ov-gruen); border-radius: 10px; }
.ov-ansicht-hinweis p { flex: 1 1 18rem; margin: 0; }
.ov-ansicht-hinweis .ov-knopf { cursor: pointer; font: inherit; font-weight: 600; }
.ov-phase-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; margin: 1.6rem 0 .6rem;
  padding: .7rem 1.1rem; border-radius: 12px; color: #fff; background: linear-gradient(90deg, var(--ov-gruen-dunkel), var(--ov-gruen)); }
.ov-phase-banner h2 { margin: 0; font-size: 1.5rem; color: #fff; }
.ov-phase-banner span { font-size: .95rem; opacity: .92; }
.ov-phase-banner.ist-phase-2 { background: linear-gradient(90deg, #2f6b4f, #4f9a72); }
.ov-phase-banner.ist-phase-3 { background: linear-gradient(90deg, #6b3f8f, #9466b8); }
.ov-phase-banner.ist-phase-4 { background: linear-gradient(90deg, #5a4a3a, #8a7660); }
/* Algorithmik-Werkstatt: freiwillig, deutlich abgesetzt */
.ov-phase-banner.ist-phase-5 { background: linear-gradient(90deg, #1f4e6b, #3a7ca5); }
.ov-algo-hinweis a { font-weight: 700; }
.ov-teil { margin-top: .9rem; border: 1px solid var(--ov-rand); border-radius: 12px; background: var(--ov-gruen-zart); }
.ov-teil > summary { list-style: none; cursor: pointer; padding: .6rem 1rem; display: flex; flex-wrap: wrap; gap: .2rem .9rem; align-items: center; }
.ov-teil > summary::-webkit-details-marker { display: none; }
.ov-teil > summary h3 { margin: 0; font-size: 1.15rem; }
.ov-teil > .ov-heft-liste { padding: 0 1rem 1rem; }
.ov-teil-wozu { flex: 1 1 16rem; min-width: 0; color: var(--ov-text-leise); font-size: .88rem; }
.ov-teil-pfeil { display: inline-block; transition: transform .2s; }
.ov-teil[open] > summary .ov-teil-pfeil { transform: rotate(90deg); }
.ov-teil-zahl { font-size: .85rem; font-weight: 700; color: var(--ov-text-leise); font-variant-numeric: tabular-nums; }
.ov-punkte { display: inline-flex; gap: 3px; }
.ov-punkte i { width: 9px; height: 9px; border-radius: 50%; background: var(--ov-rand); display: block; }
.ov-punkte i.ist-erledigt { background: var(--ov-ok); }
.ov-punkte i.ist-aktuell { background: var(--ov-gold); }
.ov-platzhalter { border-style: dashed; background: transparent; }
.ov-platzhalter:hover { transform: none; box-shadow: none; }
.ov-platzhalter .ov-thumb-rahmen { background: repeating-linear-gradient(135deg, var(--ov-gruen-zart) 0 12px, #fff 12px 24px); }
.ov-platzhalter h3, .ov-platzhalter .ov-phase { color: var(--ov-text-leise); }
@media (prefers-reduced-motion: reduce) { .ov-teil-pfeil { transition: none; } }
.ov-heft-karte { background: #fff; border: 1px solid var(--ov-rand); border-radius: 12px; overflow: hidden; display: grid;
  grid-template-rows: auto 1fr; transition: transform .15s, box-shadow .15s; }
.ov-heft-karte:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(60,80,0,.14); }
.ov-thumb-rahmen { position: relative; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--ov-rand); overflow: hidden; }
.ov-thumb { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.ov-schloss { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; }
.ov-heft-karte.ist-gesperrt .ov-thumb { filter: grayscale(1) brightness(.85); opacity: .55; }
.ov-heft-karte.ist-gesperrt h3 { color: var(--ov-text-leise); }
.ov-heft-karte-inhalt { padding: .75rem .9rem .9rem; display: grid; gap: .5rem; align-content: start; }
.ov-heft-karte h3 { font-size: 1.05rem; line-height: 1.3; }
.ov-karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: -.25rem; }
.ov-heft-status { font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: 4px; white-space: nowrap; }
.ov-heft-status.ist-fertig { background: var(--ov-ok-hell); color: var(--ov-ok); }
.ov-heft-status.ist-aktiv { background: var(--ov-warnung-hell); color: var(--ov-text); border: 1px solid var(--ov-gold); }
.ov-heft-status.ist-uebung { background: #e8f0fb; color: #2f5d8a; border: 1px solid #b9cde6; }

/* ---------- Uebungsmodus (ventures_kern/uebungsmodus.py): Leiste im Heftkopf, Marke im Level ---------- */
.ov-uebung-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0; padding: .4rem .7rem;
  border-radius: 8px; background: var(--ov-gruen-zart); font-size: .88rem; }
.ov-uebung-leiste.ist-aktiv { background: #e8f0fb; border: 1px solid #b9cde6; color: #1f3d5c; }
.ov-uebung-text { flex: 1 1 20rem; }
.ov-uebung-knopf { border: 1px solid var(--ov-gruen); border-radius: 999px; background: #fff; color: var(--ov-gruen-dunkel);
  font-weight: 700; font-size: .9rem; padding: .3rem .9rem; cursor: pointer; white-space: nowrap; }
.ov-uebung-leiste.ist-aktiv .ov-uebung-knopf { border-color: #2f5d8a; color: #2f5d8a; }
.ov-uebung-knopf:hover, .ov-uebung-knopf:focus-visible { background: var(--ov-gruen-zart); }
.ov-uebung-marke { background: #e8f0fb; color: #2f5d8a; font-weight: 700; font-size: .85rem; padding: .05rem .6rem; border-radius: 999px; }
.ov-heft-karte-fortschritt { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ov-text-leise); font-variant-numeric: tabular-nums; }
.ov-heft-leiste { flex: 1; max-width: 160px; height: 7px; background: #e6ebd8; border-radius: 4px; overflow: hidden; }
.ov-heft-leiste i { display: block; height: 100%; background: var(--ov-gruen); }
.ov-heft-aktionen { display: grid; gap: .4rem; margin-top: .2rem; }
.ov-knopf { display: block; text-align: center; background: var(--ov-gruen); color: #fff; font-weight: 600; font-size: .9rem;
  padding: .4rem .8rem; border: 1px solid var(--ov-gruen); border-radius: 8px; text-decoration: none; }
.ov-knopf:hover { background: var(--ov-gruen-dunkel); border-color: var(--ov-gruen-dunkel); color: #fff; text-decoration: none; }
.ov-knopf.ist-leise { background: #fff; color: var(--ov-gruen-dunkel); border-color: var(--ov-rand); }
.ov-knopf.ist-leise:hover { background: var(--ov-gruen-zart); border-color: var(--ov-gruen); color: var(--ov-gruen-dunkel); }
/* Modul-Button als Ladebalken: --stand ist der Anteil geloester Stufen */
.ov-modul-knopf { --stand: 0%; --fuellung: var(--ov-gruen-hell); display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .35rem .65rem; border: 1px solid var(--ov-rand); border-radius: 8px; color: var(--ov-text); text-decoration: none;
  background: linear-gradient(to right, var(--fuellung) var(--stand), #fff var(--stand)); }
a.ov-modul-knopf:hover { border-color: var(--ov-gruen); text-decoration: none; }
.ov-modul-knopf.ist-fertig { --fuellung: var(--ov-ok-hell); border-color: #b9dcc3; }
.ov-modul-knopf.ist-gesperrt { background: transparent; border-style: dashed; color: var(--ov-text-leise); cursor: not-allowed; }
.ov-modul-name { display: grid; min-width: 0; line-height: 1.25; }
.ov-modul-name b { font-size: .85rem; }
.ov-modul-name small { font-size: .75rem; color: var(--ov-text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-modul-stand { flex: none; font-size: .8rem; font-weight: 700; color: var(--ov-text-leise); font-variant-numeric: tabular-nums; }
.ov-modul-knopf.ist-fertig .ov-modul-stand { color: var(--ov-ok); }
/* Uebersicht: Catch-up (freiwillige Wiederholung, Bernstein) vor dem Heft, Uebungen (Blau) dahinter -
   das Heft selbst ist der kraeftige gruene Knopf. */
.ov-heft-knopf { font-size: .95rem; padding-top: .55rem; padding-bottom: .55rem; box-shadow: 0 2px 0 var(--ov-gruen-dunkel); }
.ov-heft-knopf.ist-leise { box-shadow: none; }
.ov-modul-knopf.ist-catchup { --fuellung: #fde7b0; border-color: #e6c27a; background-color: #fffaf0;
  background-image: linear-gradient(to right, var(--fuellung) var(--stand), #fffaf0 var(--stand)); }
.ov-modul-knopf.ist-catchup .ov-modul-name b { color: #8a5a00; }
a.ov-modul-knopf.ist-catchup:hover { border-color: #c98f1c; }
.ov-modul-knopf.ist-uebung { --fuellung: #d6e4f7; border-color: #b4c9e6; background-color: #f6f9fe;
  background-image: linear-gradient(to right, var(--fuellung) var(--stand), #f6f9fe var(--stand)); }
.ov-modul-knopf.ist-uebung .ov-modul-name b { color: #2f4d7a; }
a.ov-modul-knopf.ist-uebung:hover { border-color: #5b7fb4; }
.ov-modul-knopf.ist-catchup.ist-fertig, .ov-modul-knopf.ist-uebung.ist-fertig { --fuellung: var(--ov-ok-hell); }
.ov-modul-knopf.ist-gesperrt.ist-catchup, .ov-modul-knopf.ist-gesperrt.ist-uebung { background: transparent; }
.ov-modul-zusatz { font-weight: 400; font-size: .72rem; color: var(--ov-text-leise); }
@media (prefers-reduced-motion: reduce) { .ov-heft-karte, .ov-heft-karte:hover { transition: none; transform: none; } }
.ov-level-kachel.ist-gesperrt { background: transparent; border-style: dashed; color: var(--ov-text-leise); cursor: not-allowed; }
.ov-level-kachel.ist-gesperrt:hover { transform: none; box-shadow: none; }
.ov-gesperrt-hinweis { background: var(--ov-warnung-hell); color: var(--ov-warnung); border: 1px solid #efd28a; border-radius: 8px; padding: .5rem .8rem; font-weight: 600; }

/* Freischaltung */
.ov-freigabe { display: grid; gap: .5rem; }
.ov-freigabe-wahl { display: flex; gap: .6rem; align-items: baseline; }
.ov-freigabe-wahl span { display: grid; }
.ov-freigabe-wahl small { color: var(--ov-text-leise); }
.ov-freigabe select { font: inherit; max-width: 100%; }
.ov-freigabe .ov-hinweis-knopf { justify-self: start; }

/* Einmaliger Hinweis nach dem Tastaturlevel */
.ov-palette-hinweis {
  margin: .5rem; padding: .55rem .65rem; border-radius: 8px; background: #fff7d6; border: 2px solid var(--ov-gold);
  font-size: .82rem; line-height: 1.4; display: block; box-shadow: 0 4px 14px rgba(120, 90, 0, .18);
}
.ov-palette-hinweis button { display: block; margin-top: .45rem; border: 0; border-radius: 999px; background: var(--ov-gruen); color: #fff; font-weight: 700; padding: .2rem .8rem; cursor: pointer; }

/* ---------- Levelseite: eine Kopfleiste, Ausgabe unter dem Editor ---------- */
.ov-kopf-marke { display: inline-flex; align-items: center; gap: .35rem; color: #fff; font-weight: 800; letter-spacing: .02em; padding-right: .7rem; border-right: 1px solid rgba(255,255,255,.35); }
.ov-kopf-marke:hover { text-decoration: none; }
.ov-kopf-marke img { width: 24px; height: 24px; image-rendering: pixelated; }
.ov-kopf-nav { align-items: center; }
.ov-kopf-trenner { width: 1px; align-self: stretch; background: rgba(255,255,255,.35); }
.ov-kopf .ov-konto { background: rgba(0,0,0,.18); color: #fff; }
.ov-kopf-leise { font-size: .82rem; opacity: .85; }
.ov-level { margin-top: .5rem; }

.ov-shell { flex: none; display: flex; flex-direction: column; min-height: 140px; height: 32%; background: #0b1222; border-top: 1px solid #1e293b; border-radius: 0 0 10px 0; }
.ov-shell-reiter { display: flex; gap: 2px; padding: .3rem .5rem 0; background: #111a33; }
.ov-shell-reiter button { border: 0; background: none; color: #94a3b8; font-weight: 700; font-size: .8rem; padding: .2rem .7rem; border-radius: 6px 6px 0 0; cursor: pointer; }
.ov-shell-reiter button.ist-aktiv { background: #0b1222; color: #e2e8f0; }
.ov-shell-inhalt { flex: 1; min-height: 0; overflow: auto; }
.ov-shell .ov-konsole { margin: 0; padding: .5rem .75rem; max-height: none; color: #cbd5e1; background: transparent; font: .82rem/1.5 Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; white-space: pre-wrap; }
.ov-codefehler { margin: 0 .6rem .6rem; padding: .45rem .7rem; border-radius: 6px; background: rgba(248,113,113,.14); border-left: 3px solid #f87171; color: #fecaca; font: .82rem/1.5 Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; white-space: pre-wrap; }
.ov-codefehler strong { color: #fff; font-family: 'Segoe UI', system-ui, sans-serif; }
.ov-shell .ov-pruefung { padding: .5rem .6rem; }
.ov-spalte-code .ov-code-fuss { border-radius: 0; }

/* ---------- Shop ---------- */
.ov-shop-waren { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; }
.ov-shop-ware { border: 1px solid var(--ov-rand); border-radius: 12px; background: var(--ov-gruen-zart); padding: .7rem .8rem; display: grid; gap: .35rem; align-content: start; }
.ov-shop-ware > img { width: 64px; height: 64px; justify-self: center; image-rendering: pixelated; }
/* Vektor-Grafik: Figuren sind 128 x 160 und duerfen glatt skaliert werden */
.ov-shop-ware > img.ist-vektor { width: auto; height: 80px; max-width: 100%; image-rendering: auto; object-fit: contain; }
.ov-shop-grafik { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: .4rem 0 1rem; }
.ov-shop-grafik > span { font-weight: 700; }
.ov-shop-grafik small { color: var(--ov-text-leise); flex-basis: 100%; }
.ov-shop-grafik-knopf { border: 1px solid var(--ov-rand); background: #fff; border-radius: 999px; padding: .25rem .9rem; font: inherit; cursor: pointer; color: var(--ov-text); }
.ov-shop-grafik-knopf[aria-pressed="true"] { background: var(--ov-gruen); border-color: var(--ov-gruen); color: #fff; font-weight: 700; }
.ov-shop-ware h3 { font-size: 1rem; }
.ov-shop-ware p { margin: 0; font-size: .85rem; color: var(--ov-text-leise); }
.ov-shop-vorschau-knopf { justify-self: start; font: inherit; font-size: .8rem; padding: .15rem .6rem; border-radius: 999px;
  border: 1px solid var(--ov-rand); background: #fff; color: var(--ov-gruen-dunkel); cursor: pointer; }
.ov-shop-vorschau-knopf:hover { border-color: var(--ov-gruen); }
.ov-shop-ware.ist-angelegt { background: var(--ov-ok-hell); border-color: #b9dcc3; }
.ov-shop-ware.ist-demnaechst { opacity: .65; }
.ov-shop-vorschau { display: flex; flex-wrap: wrap; gap: 0; margin: .3rem 0 1rem; }
.ov-shop-vorschau img { width: 64px; height: 64px; image-rendering: pixelated; background: var(--gras) center / cover; }
.ov-shop-fuss { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .2rem; }
.ov-shop-preis { display: inline-flex; align-items: center; gap: .25rem; font-weight: 800; color: #8a5a00; font-variant-numeric: tabular-nums; }
.ov-shop-preis img { width: 18px; height: 18px; }
.ov-shop-knopf { border: 0; border-radius: 999px; padding: .25rem .9rem; font-weight: 700; background: var(--ov-gruen); color: #fff; cursor: pointer; }
.ov-shop-knopf.ist-zweit { background: #fff; color: var(--ov-text); border: 1px solid var(--ov-rand); }
.ov-shop-knopf:disabled { opacity: .5; cursor: default; }
.ov-shop-status { color: var(--ov-ok); font-weight: 700; font-size: .9rem; }
.ov-shop-bald { font-size: .8rem; color: var(--ov-text-leise); font-style: italic; text-align: right; }
.ov-nav-rechts a[href$="/shop"] { font-weight: 700; }

/* ---------- Szenen der Uebungsmodule (oop-szenen.js) ---------- */
.ov-szene { width: 100%; display: flex; justify-content: center; background: #fff; border: 1px solid var(--ov-rand); border-radius: 10px; overflow: hidden; }
.ov-szene svg { display: block; width: 100%; height: auto; max-height: min(62vh, 560px); }
.ov-szene-schild rect { fill: #2f5d8a; }
.ov-szene-schild text { fill: #fff; font: 700 12px Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; }
.ov-szene-winkel { font: 700 15px 'Segoe UI', system-ui, sans-serif; fill: #8a5a00; stroke: #fff; stroke-width: 4px; paint-order: stroke; }
/* Diese Elemente setzen display selbst - hidden muss trotzdem gewinnen (Szenen-Level) */
.ov-canvas-rahmen[hidden], .ov-tastatur[hidden], .ov-heldin[hidden] { display: none; }
.ov-szene-verborgen { font: 800 64px 'Segoe UI', system-ui, sans-serif; fill: #c3c9b0; }
.ov-tafel-gross { font: 700 30px Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; fill: #ffd34d; }
.ov-tafel-klein { font: 12px Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; fill: #f2f5fb; }
.ov-tafel-leise { fill: #9fb0cc; letter-spacing: .06em; }

/* ---------- Uebungsmodule im Heft ---------- */
.ov-uebung-stufen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; margin-top: .6rem; }
.ov-uebung-stufe { display: grid; gap: .2rem; padding: .65rem .8rem; border: 1px solid var(--ov-rand); border-radius: 10px; background: #fff; color: var(--ov-text); text-decoration: none; }
.ov-uebung-stufe:hover, .ov-uebung-stufe:focus-visible { border-color: var(--ov-gruen); box-shadow: 0 0 0 1px var(--ov-gruen); }
.ov-uebung-stufe.ist-geloest { background: var(--ov-ok-hell); border-color: #b9dcc3; }
.ov-uebung-nr { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ov-gruen-dunkel); }
.ov-uebung-lohn { font-size: .85rem; font-weight: 700; color: var(--ov-gold); }
.ov-uebung-stufe.ist-geloest .ov-uebung-lohn { color: var(--ov-ok); }
.ov-uebung-hinweis { font-size: .85rem; color: var(--ov-text-leise); margin-top: .5rem; }
.ov-planer-tag { font: 700 12px 'Segoe UI', system-ui, sans-serif; fill: #1f2712; }
.ov-planer-uhrzeit { font: 11px Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; fill: #5b6448; }
.ov-termin { fill: #f6e3a6; stroke: #d8b54a; }
.ov-termin.ist-neu { fill: #bfe3c8; stroke: #3d9a5a; }
.ov-termin-text { font: 600 10.5px 'Segoe UI', system-ui, sans-serif; fill: #1f2712; }
.ov-planer-pruefung { font: 800 14px 'Segoe UI', system-ui, sans-serif; fill: #fff; }
.ov-zoo-gehege { font: 700 13px 'Segoe UI', system-ui, sans-serif; fill: #7a6340; }
.ov-zoo-schild { font: 800 14px 'Segoe UI', system-ui, sans-serif; fill: #6b4529; }
.ov-zoo-name { font: 700 11px 'Segoe UI', system-ui, sans-serif; fill: #5a4a2c; paint-order: stroke; stroke: rgba(255,255,255,.7); stroke-width: 3px; }
.ov-zoo-hunger { font: 800 12px 'Segoe UI', system-ui, sans-serif; fill: #b06b00; }
.ov-zoo-nein { font: 800 16px 'Segoe UI', system-ui, sans-serif; fill: #b42318; }
.ov-zoo-napf { font: 700 6px 'Segoe UI', system-ui, sans-serif; fill: #3f4a56; }
.ov-bank-titel { font: 800 15px 'Segoe UI', system-ui, sans-serif; fill: #fff; letter-spacing: .02em; }
.ov-bank-schalter { font: 700 11px 'Segoe UI', system-ui, sans-serif; fill: #f6e7d6; letter-spacing: .08em; }
.ov-bank-nr { font: 700 10px 'Segoe UI', system-ui, sans-serif; fill: #dbe7f3; }
.ov-bank-inhaber { font: 700 13px 'Segoe UI', system-ui, sans-serif; fill: #1f2328; }
.ov-bank-stand { font: 700 18px Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; fill: #1f6b3a; }
.ov-bank-stand.ist-minus { fill: #b42318; }
.ov-bank-dispo { font: 600 10px 'Segoe UI', system-ui, sans-serif; fill: #5b6448; }
.ov-bank-abgelehnt { font: 800 12px 'Segoe UI', system-ui, sans-serif; fill: #fff; }
.ov-bank-fehler { font: 800 18px 'Segoe UI', system-ui, sans-serif; fill: #b42318; }
.ov-hinweis-experte { font-size: .88rem; background: var(--ov-gruen-zart); border-radius: 8px; padding: .4rem .7rem; }

/* Objektdiagramme ueber der Szene */
.ov-szene-rahmen { position: relative; }
.ov-szene-leiste { display: flex; justify-content: flex-end; }
.ov-konsole-diagramme-knopf {
  align-self: flex-start; padding: .35rem .8rem; border-radius: 8px; border: 1.5px solid var(--ov-gruen);
  background: var(--ov-gruen-zart); color: var(--ov-gruen-dunkel); font-weight: 700; cursor: pointer;
}
.ov-szene-rahmen[hidden] { display: none; }
.ov-diagramme-knopf { border: 1px solid var(--ov-rand); border-radius: 999px; background: #fff; color: var(--ov-gruen-dunkel); font-weight: 700; font-size: .85rem; padding: .25rem .8rem; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ov-diagramme-knopf:hover, .ov-diagramme-knopf:focus-visible { border-color: var(--ov-gruen); }
.ov-diagramme { position: absolute; inset: 0; z-index: 1; overflow: auto; background: rgba(251, 252, 247, .97); border: 1px solid var(--ov-rand); border-radius: 10px; padding: .8rem; display: flex; flex-wrap: wrap; gap: .6rem; align-content: flex-start; align-items: flex-start; }
.ov-diagramme[hidden] { display: none; }
.ov-diagramme .ov-heft-od { font-size: .78rem; }
.ov-diagramme .ov-heft-od.ist-referenziert th { color: #2f5d8a; }
.ov-diagramme-leer { color: var(--ov-text-leise); }

/* ---------- Expertenmodul: Konsole statt Szene ---------- */
.ov-szene.ist-konsole { display: flex; flex-wrap: wrap; gap: .6rem; align-content: flex-start; align-items: flex-start; justify-content: flex-start; padding: .8rem; min-height: 220px; max-height: 62vh; overflow: auto; background: #fbfcf7; }
.ov-heft-od.ist-fehler { border: 2px solid #b42318; box-shadow: 0 0 0 3px #fdecec; }

/* ---------- Uebungsmodul 3: Pruefstand fuer eigene Klassen ---------- */
.ov-szene.ist-pruefstand { display: block; padding: .8rem 1rem; min-height: 260px; max-height: 66vh; overflow: auto; background: #fbfcf7; }
.ov-ps-titel { font-size: 1rem; margin: .2rem 0 .5rem; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.ov-ps-titel .ist-ok { color: var(--ov-ok); font-size: .85rem; }
.ov-ps-titel .ist-fehler { color: var(--ov-fehler); font-size: .85rem; }
.ov-ps-eigene { margin-top: 1rem; padding-top: .6rem; border-top: 1px dashed var(--ov-rand); }
.ov-ps-leer { color: var(--ov-text-leise); font-size: .9rem; margin: 0 0 .4rem; }
.ov-ps-vorschau { color: var(--ov-text-leise); font-size: .85rem; padding-left: 1.2rem; }
.ov-ps-vorab { background: var(--ov-fehler-hell); color: var(--ov-fehler); border-radius: 8px; padding: .4rem .7rem; margin-bottom: .5rem; font-size: .88rem; }
.ov-ps-vorab ul { margin: .2rem 0 0 1.1rem; }
.ov-ps-hinweis { background: var(--ov-warnung-hell); color: var(--ov-warnung); border-radius: 8px; padding: .4rem .7rem; margin-bottom: .5rem; font-size: .88rem; }
.ov-ps-test { border: 1px solid var(--ov-rand); border-radius: 8px; background: #fff; margin-bottom: .4rem; }
.ov-ps-test > summary { cursor: pointer; padding: .35rem .7rem; font-weight: 600; }
.ov-ps-test.ist-ok > summary { color: var(--ov-ok); }
.ov-ps-test.ist-fehler { border-color: #f0c2c2; }
.ov-ps-test.ist-fehler > summary { color: var(--ov-fehler); }
.ov-ps-kette { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; padding: .3rem .7rem .6rem; }
.ov-ps-schritt { display: flex; flex-direction: column; gap: .25rem; }
.ov-ps-karten { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; }
.ov-ps-code { font: .78rem/1.3 Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; background: #0b1222; color: #e2e8f0; border-radius: 5px; padding: .15rem .45rem; white-space: nowrap; }
.ov-ps-pfeil { align-self: center; color: var(--ov-text-leise); font-size: 1.2rem; }
.ov-ps-karte { border-collapse: collapse; border: 1.5px solid var(--ov-text); font: .8rem/1.4 Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; background: #fff; }
.ov-ps-karte th, .ov-ps-karte td { padding: .05rem .45rem; text-align: left; white-space: nowrap; font-weight: 400; }
.ov-ps-karte th[colspan] { text-align: center; font-weight: 700; border-bottom: 1.5px solid var(--ov-text); }
.ov-ps-karte tr.ist-geaendert { background: #fff7c2; }
.ov-ps-karte tr.ist-fehler { background: var(--ov-fehler-hell); color: var(--ov-fehler); }
.ov-ps-karte tr.ist-hinweis { background: var(--ov-warnung-hell); }
.ov-ps-marke { font-family: 'Segoe UI', system-ui, sans-serif; font-size: .75rem; font-weight: 700; }
.ov-ps-karte tr.ist-ok .ov-ps-marke { color: var(--ov-ok); }
.ov-ps-rueckgabe { font: .78rem Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; padding: .1rem .45rem; border-radius: 5px; background: var(--ov-gruen-zart); align-self: flex-start; }
.ov-ps-rueckgabe.ist-ok { background: var(--ov-ok-hell); color: var(--ov-ok); }
.ov-ps-rueckgabe.ist-fehler { background: var(--ov-fehler-hell); color: var(--ov-fehler); }
.ov-ps-notiz { font-size: .8rem; color: var(--ov-text-leise); padding: 0 .7rem .4rem; }
.ov-ps-schritt .ov-ps-notiz { padding: 0; }
.ov-ps-knall { font-size: .8rem; color: var(--ov-fehler); font-weight: 600; }
.ov-ps-probleme { margin: 0 .7rem .6rem 1.9rem; color: var(--ov-fehler); font-size: .85rem; }
.ist-pruefstand .ov-ps-tests > .ov-ps-titel { position: sticky; top: -.8rem; z-index: 1; background: #fbfcf7; margin-top: -.8rem; padding: .8rem 0 .4rem; }
.ov-ps-zeigen { margin-left: auto; border: 0; border-radius: 999px; background: var(--ov-gruen); color: #fff; font-weight: 700; font-size: .82rem; padding: .25rem .8rem; cursor: pointer; }
.ov-ps-zeigen:hover, .ov-ps-zeigen:focus-visible { background: var(--ov-gruen-dunkel); }

/* "Testergebnisse zeigen": die Tests laufen Schritt fuer Schritt ab */
.ov-ps-buehne[hidden], .ov-ps-tests[hidden], .ov-ps-eigene[hidden] { display: none; }
.ov-vf-leiste { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0 0 .6rem; padding: 0; }
.ov-vf-leiste button { min-width: 1.9rem; height: 1.9rem; border: 1px solid var(--ov-rand); border-radius: 999px; background: #fff; color: var(--ov-text-leise); font-weight: 700; font-size: .78rem; cursor: pointer; }
.ov-vf-leiste button.ist-ok { background: var(--ov-ok-hell); color: var(--ov-ok); border-color: #b9dcc3; }
.ov-vf-leiste button.ist-fehler { background: var(--ov-fehler-hell); color: var(--ov-fehler); border-color: #f0c2c2; }
.ov-vf-leiste button.ist-aktuell { box-shadow: 0 0 0 2px var(--ov-gruen); color: var(--ov-text); }
.ov-vf-kopf { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .5rem; }
.ov-vf-nr { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ov-gruen-dunkel); }
.ov-vf-bild { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.ov-vf-programm { list-style: none; margin: 0; padding: .4rem .5rem; background: #0b1222; border-radius: 8px; min-width: 12rem; flex: 0 1 auto; }
.ov-vf-programm li { padding: .1rem .35rem; border-radius: 4px; }
.ov-vf-programm code { font: .8rem/1.4 Consolas, 'Cascadia Code', ui-monospace, Menlo, monospace; color: #e2e8f0; white-space: pre; }
.ov-vf-programm li.ist-aktuell { background: #2f5d8a; }
.ov-vf-programm li.ist-aktuell code { color: #fff; }
.ov-vf-programm li.ist-erledigt code { color: #94a3b8; }
.ov-vf-programm li.ist-spaeter { visibility: hidden; }
.ov-vf-objekt { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.ov-vf-karte { font-size: .88rem; }
.ov-vf-karte.ist-neu { animation: ov-vf-erscheinen .6s ease-out; }
.ov-vf-karte tr.ist-geaendert td { animation: ov-vf-blinken 1.2s ease-out; }
.ov-vf-alt { color: var(--ov-text-leise); }
.ov-vf-neu { font-weight: 700; }
.ov-vf-karte tr.ist-fehler td, .ov-vf-karte tr.ist-fehler th { font-weight: 700; }
.ov-vf-erklaerung { margin: .6rem 0 .4rem; font-size: .9rem; }
.ov-vf-ergebnis { border-radius: 8px; padding: .4rem .7rem; font-weight: 700; font-size: .9rem; }
.ov-vf-ergebnis.ist-ok { background: var(--ov-ok-hell); color: var(--ov-ok); }
.ov-vf-ergebnis.ist-fehler { background: var(--ov-fehler-hell); color: var(--ov-fehler); border: 1.5px solid #f0c2c2; }
.ov-vf-ergebnis ul { margin: .25rem 0 0 1.1rem; font-weight: 400; }
.ov-vf-angehalten { font-size: .82rem; color: var(--ov-text-leise); margin: .4rem 0 0; }
.ov-vf-angehalten[hidden] { display: none; }
.ov-vf-ende { border-radius: 8px; padding: .6rem .8rem; font-size: .92rem; }
.ov-vf-ende.ist-ok { background: var(--ov-ok-hell); color: var(--ov-ok); }
.ov-vf-ende.ist-fehler { background: var(--ov-fehler-hell); color: var(--ov-fehler); }
.ov-vf-steuerung { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .7rem; }
.ov-vf-steuerung button { border: 1px solid var(--ov-rand); border-radius: 8px; background: #fff; padding: .2rem .55rem; cursor: pointer; font-size: .9rem; }
.ov-vf-steuerung .ov-vf-play { background: var(--ov-gruen); color: #fff; border-color: var(--ov-gruen); min-width: 2.4rem; }
.ov-vf-steuerung .ov-vf-zu { margin-left: auto; font-size: .82rem; }
@keyframes ov-vf-erscheinen { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes ov-vf-blinken { from { background: #ffe066; } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .ov-vf-karte.ist-neu, .ov-vf-karte tr.ist-geaendert td { animation: none; }
}
.ov-pruefgruppe.ist-hinweis { border-color: #f3dca0; }
.ov-pruefgruppe.ist-hinweis summary, .ov-pruefgruppe li.ist-hinweis { color: var(--ov-warnung); }
.ov-klassendiagramm .ist-neu { color: #c0281c; font-weight: 700; }
.ov-heft-od .ist-fehlertext { color: #b42318; background: #fdecec; font-family: 'Segoe UI', system-ui, sans-serif; font-weight: 600; max-width: 22rem; }
.ov-methoden-entdeckt { display: grid; gap: .35rem; }
.ov-palette-untergruppe { font-size: .72rem; font-weight: 700; color: var(--ov-text-leise); margin-top: .2rem; }
.ov-entdeckt-leer { font-size: .85rem; color: var(--ov-text-leise); margin: 0; }
button.ov-weiter { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; padding: 0; text-decoration: underline; }
.ov-sondermodi { margin-top: .8rem; font-size: .9rem; } .ov-sondermodi table { border-collapse: collapse; } .ov-sondermodi th, .ov-sondermodi td { text-align: left; padding: .15rem .6rem .15rem 0; border-bottom: 1px solid var(--ov-rand); }
/* Blatt 9: Inventar des Helden unter der Spielwelt */
.ov-inventar { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: .4rem 0 .2rem; }
.ov-inventar[hidden] { display: none; }
.ov-inventar-titel { font-size: .8rem; font-weight: 700; color: var(--ov-text-leise); margin-right: .2rem; }
.ov-inventar-platz { position: relative; width: 44px; height: 44px; border: 2px solid #8b6b3d; border-radius: 6px; background: #f5ecd7; display: inline-flex; align-items: center; justify-content: center; }
.ov-inventar-platz.ist-leer { background: #efe6d2; border-style: dashed; }
.ov-inventar-platz small { position: absolute; top: 1px; left: 3px; font-size: .65rem; font-weight: 700; color: #8b6b3d; }
.ov-inventar-platz img { width: 34px; height: 34px; image-rendering: pixelated; }
/* Heft 21: Schatzkarte im dichten Nebel - die Wegpunkte des Laufs */
.ov-schatzkarte { flex-wrap: wrap; }
.ov-wegpunkt { position: relative; min-width: 44px; height: 34px; padding: 0 .45rem 0 .7rem; border: 2px solid #8b6b3d; border-radius: 6px; background: #f5ecd7; color: #5a4320; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; white-space: nowrap; }
.ov-wegpunkt small { position: absolute; top: 0; left: 3px; font-size: .6rem; color: #8b6b3d; }
.ov-diagramm-hinweis { margin: .4rem 0; } .ov-diagramm-hinweis table { margin-top: .4rem; }
.ov-zuruecksetzen { max-width: 900px; margin: 1rem auto; font-size: .9rem; color: var(--ov-text-leise); } .ov-zuruecksetzen button { margin: .3rem .4rem 0 0; }
/* Fallen und Herzen: Leben des Helden unter der Spielwelt */
.ov-herz-platz { display: inline-flex; width: 30px; height: 30px; }
.ov-herz-platz img { width: 30px; height: 30px; image-rendering: pixelated; }
.ov-herz-platz.ist-leer img { filter: grayscale(1); opacity: .35; }
/* 45B: Leben nicht lesbar (Attribut oder Getter fehlt) - wie der Held mit Fragezeichen */
.ov-herzen-unbekannt { position: relative; display: inline-flex; }
.ov-herzen-unbekannt > b { position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%;
  background: #d32f2f; color: #fff; font-size: 12px; line-height: 18px; text-align: center; }
.ov-herzen-hinweis { margin-left: .6rem; font-size: .8rem; color: #b42318; font-weight: 600; }
.ov-freigabe-kurs { display: block; margin: .3rem 0 .6rem; font-weight: 600; }
.ov-freigabe-aussehen { border: 1px solid var(--ov-rand); border-radius: 10px; margin: .6rem 0; padding: .4rem .8rem .6rem; display: grid; gap: .35rem; }
.ov-freigabe-aussehen legend { font-weight: 600; padding: 0 .3rem; }
.ov-freigabe-pakete { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.ov-freigabe-pakete label { display: flex; align-items: center; gap: .35rem; }
.ov-freigabe-pakete img { width: 32px; height: 32px; image-rendering: pixelated; }

/* Feedback der Beta-Phase (venture-feedback.js, ventures_kern/feedback.py) */
.vf-anker { display: inline-block; margin-left: .5rem; vertical-align: middle; }
.vf-knopf { font: 600 .72rem/1 'Segoe UI', system-ui, sans-serif; padding: .2rem .45rem; border: 1px solid var(--ov-rand); border-radius: 999px; background: #fffdf3; color: #8a6a00; cursor: pointer; }
.vf-knopf:hover, .vf-knopf:focus-visible { border-color: #d69e2e; background: #fff4cc; }
.vf-dialog { border: 1px solid var(--ov-rand); border-radius: 12px; padding: 1rem 1.2rem; max-width: 30rem; width: calc(100% - 2rem); }
.vf-dialog::backdrop { background: rgba(20, 30, 10, .35); }
.vf-form label { display: grid; gap: .3rem; }
.vf-form label.vf-anonym { display: flex; align-items: center; gap: .45rem; font-size: .9rem; margin-top: .4rem; }
.vf-form textarea { width: 100%; font: inherit; }
.vf-ort-titel { margin: 0 0 .3rem; font-size: .85rem; color: var(--ov-text-leise); }
.vf-sternwahl { display: flex; gap: .2rem; margin-bottom: .6rem; }
.vf-sternwahl button { font-size: 1.8rem; line-height: 1; border: 0; background: none; color: #c9a227; cursor: pointer; padding: 0 .1rem; }
.vf-sternwahl button.ist-an { color: #d69e2e; }
.vf-meldung { color: #a3261b; min-height: 1.2em; margin: .3rem 0; }
.vf-knoepfe { display: flex; justify-content: flex-end; gap: .5rem; }
.vf-knoepfe button { padding: .35rem .8rem; border-radius: 8px; border: 1px solid var(--ov-rand); background: #fff; cursor: pointer; }
.vf-knoepfe .vf-speichern { background: var(--ov-gruen, #4b7f1f); color: #fff; border-color: transparent; }
/* Willkommens-Hinweis zum Entwicklungsstand (venture-willkommen.js) */
.vw-dialog { max-width: 36rem; }
.vw-dialog h2 { margin: 0 0 .6rem; font-size: 1.25rem; }
.vw-stand { display: inline-block; padding: .05rem .45rem; border-radius: 999px; background: #c53030; color: #fff; font-size: .8em; font-weight: 700; }
.vw-aktuell { background: #fff4cc; border-left: 4px solid #d69e2e; padding: .5rem .7rem; border-radius: 6px; }
.vw-andere { font-size: .88rem; color: var(--ov-text-leise); }
.vw-oeffner { cursor: pointer; }
.vf-werkzeuge a.ist-aktiv { font-weight: 700; }
.vf-teilen { font-size: .9rem; display: inline-flex; gap: .3rem; align-items: center; }
.vf-tabelle td { vertical-align: top; }
.vf-sterne { color: #d69e2e; white-space: nowrap; }
.vf-text { white-space: pre-wrap; max-width: 30rem; }
.vf-ort { color: var(--ov-text-leise); }

/* Klassendiagramme mit Beziehungspfeilen (SVG vom Server, ventures_kern/uml_bild.py) */
.ov-uml-bildbox { overflow-x: auto; margin: .6rem 0; }
.ov-uml-bild { display: block; max-width: 100%; height: auto; }
.ov-uml-bildbox.ist-zoombar { cursor: zoom-in; }
.ov-uml-bildbox.ist-im-text .ov-uml-bild { margin: 0 auto; }   /* Diagramm im Merkkasten (Heft 17) */
.ov-uml-bildbox.ist-im-text.ist-zoombar::after { text-align: center; }
.ov-uml-bildbox.ist-zoombar::after { content: "🔍 Antippen zum Vergrößern"; display: block; font-size: .75rem; color: var(--ov-text-leise, #666); margin-top: .2rem; }
.ov-uml-gross { width: 96vw; max-width: 96vw; max-height: 92vh; padding: 2.2rem 1rem 1rem; border: none; border-radius: 10px;
  background: #fff; overflow: auto; cursor: zoom-out; }
.ov-uml-gross::backdrop { background: rgba(0, 0, 0, .55); }
.ov-uml-gross .ov-uml-bild { width: 100%; height: auto; margin: 0 auto; }
.ov-uml-gross-zu { position: absolute; top: .4rem; right: .5rem; border: none; background: none; font-size: 1.3rem; line-height: 1;
  cursor: pointer; padding: .3rem .5rem; color: var(--ov-text, #222); }
.ov-uml-bild rect { fill: #fff; stroke: var(--ov-text, #222); stroke-width: 1.5; }
.ov-uml-bild line, .ov-uml-bild .ov-uml-linie { stroke: var(--ov-text, #222); stroke-width: 1.5; }
.ov-uml-bild .ov-uml-spitze { fill: #fff; stroke: var(--ov-text, #222); stroke-width: 1.5; stroke-linejoin: round; }
.ov-uml-bild .ov-uml-spitze.ist-voll { fill: var(--ov-text, #222); }
.ov-uml-bild text { font: 13px Consolas, "Cascadia Code", monospace; fill: var(--ov-text, #222); }
.ov-uml-bild .ov-uml-name { font-weight: bold; text-anchor: middle; }
.ov-uml-bild .ist-methode { fill: var(--ov-gruen-dunkel, #4a6b0a); }
/* Vererbungshierarchie zuordnen (Heft 16) */
.ov-instanzen-bild { display: flex; flex-direction: column; gap: .6rem; margin: .5rem 0; }
.ov-hierarchie { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .35rem 1rem; margin: .6rem 0; }
.ov-hierarchie-zeile { display: grid; grid-template-columns: 8.5em auto 1fr; align-items: center; gap: .5rem; font-size: .9rem; }
.ov-hierarchie-zeile span { color: #666; font-size: .8rem; }
.ov-hierarchie-zeile select { min-width: 0; padding: .2rem .3rem; font: inherit; }
/* Objekte heissen kurz (a, b, …): schmale Namensspalte, Platz fuer die Klassenwahl */
.ov-hierarchie.ist-instanzen .ov-hierarchie-zeile { grid-template-columns: 2.5em auto 1fr; }
/* Beziehungen einzeichnen (Hefte 20/21): Klasse - Art - Klasse - entfernen; Auswahllisten >= 16 px (iPad zoomt sonst) */
.ov-hierarchie.ist-beziehungen { grid-template-columns: 1fr; }
.ov-hierarchie-zeile.ov-beziehung-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; }
.ov-beziehung-zeile select { font-size: 16px; }
.ov-beziehung-zeile [data-bez-weg] { background: none; color: #7a2e1f; border: 1px solid #d8c7b5; box-shadow: none;
  min-width: 2.4rem; min-height: 2.4rem; padding: 0 .5rem; font-size: 1rem; }
.ov-beziehung-zeile [data-bez-weg]:hover { background: #fbeee8; }
@media (max-width: 520px) {
  .ov-hierarchie-zeile.ov-beziehung-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .ov-beziehung-zeile select[data-teil="1"] { grid-column: 1; }
}
/* Klassendiagramm-Aufgabe mit Vererbung (Uebungsmodul 5): je Klasse "erbt von" waehlen */
.ov-uml-erbt { display: flex; flex-direction: column; gap: .35rem; margin: .4rem 0 .6rem; padding: .5rem .7rem;
  border: 1px dashed #b9c3cf; border-radius: 8px; max-width: 34rem; }
.ov-uml-erbt-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ov-uml-erbt-zeile select { font-family: inherit; font-size: 16px; padding: .25rem .4rem; min-height: 2.2rem; max-width: 100%; }

/* Heft 18: didaktische Vereinfachung - dicker roter Kasten */
.ov-heft-papier { border: 2px dashed var(--ov-rand); border-radius: 8px; padding: .5rem .8rem; margin: .4rem 0; background: var(--ov-gruen-zart); }
.ov-heft-papier.ist-fertig { border-style: solid; display: grid; gap: .2rem; }
.ov-heft-papier small { color: var(--ov-text-leise); }
.ov-heft-papier p { margin: 0 0 .4rem; }
.ov-heft-vereinfachung { border: 4px solid #c0281c; border-radius: 8px; background: #fff5f3; padding: .8rem 1rem; }
.ov-heft-vereinfachung > b { display: block; color: #a11d14; font-size: 1.05rem; margin-bottom: .3rem; }

/* Heft 19: Pseudocode als zusaetzliche Hilfe (kein Tipp) */
.ov-diagramm-klappe { border: 1px dashed var(--ov-rand); border-radius: 8px; padding: .3rem .7rem; }
.ov-diagramm-klappe summary { cursor: pointer; color: var(--ov-gruen-dunkel, #4a6b0a); font-weight: 600; }
.ov-diagramm-klappe[open] summary { margin-bottom: .4rem; }
.ov-pseudocode { margin: .4rem 0; font-size: .85rem; }
.ov-pseudocode summary { cursor: pointer; color: var(--ov-gruen-dunkel, #4a6b0a); font-weight: 600; }
.ov-pseudocode pre { margin: .35rem 0 0; padding: .5rem .7rem; background: #f4f1e6; border-left: 3px solid #d69e2e;
  font: .82rem/1.45 Consolas, "Cascadia Code", monospace; white-space: pre-wrap; }

/* Heft 19: der Held ausserhalb der Karte laeuft ueber die Seite */
.ov-ausreisser { position: fixed; z-index: 2000; pointer-events: none; image-rendering: pixelated;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }

/* Hervorhebungen wie in den Arbeitsblaettern: {rot|...} usw. */
.hv-rot { color: #c62828; font-weight: 700; }
.hv-lila { color: #7b3fa0; font-weight: 700; }
.hv-tuerkis { color: #2f8ca8; font-weight: 700; }
.hv-blau { color: #1f3f8a; font-weight: 700; }
.hv-orange { color: #d9730d; font-weight: 700; }
/* Der Konstruktor im Klassendiagramm (Heft 12) */
.ist-farbschema .ov-heft-od .ov-heft-od-konstruktor { color: #c62828; }
.ov-heft-info-danach { margin-top: .6rem; }

/* Farbschema fuer Code (Kopf "farbschema: ja", erprobt in OOPventure-Heft 7) */
.fs-reserviert { color: #7b3fa0; }
.fs-methode { color: #1565c0; }
.fs-attribut { color: #c62828; }
.fs-variable { color: #b45309; }
.fs-klasse { color: #1b7a3a; }
.fs-punkt { font-weight: 700; }
/* Im dunklen Codeblock hellere Toene */
.ov-heft-code .fs-reserviert { color: #d8b4fe; }
.ov-heft-code .fs-methode { color: #93c5fd; }
.ov-heft-code .fs-attribut { color: #fca5a5; }
.ov-heft-code .fs-variable { color: #fdba74; }
.ov-heft-code .fs-klasse { color: #86efac; }
/* Merkkasten und Objektdiagramm wie auf den Arbeitsblaettern (Hefte mit Farbschema) */
.ov-heft-merke.ist-farbschema { background: #f2f2f2; border: 2px solid #111; border-radius: 0; }
.ov-heft-merke.ist-farbschema .ov-heft-luecke.ist-methode { color: #1565c0; }
.ov-heft-merke.ist-farbschema code { background: none; border: 0; padding: 0; }
.ov-heft-merke.ist-farbschema .ov-heft-luecke.ist-methode:not(.ist-ok):not(.ist-falsch) { border-bottom-color: #1565c0; }
.ist-farbschema .ov-heft-od .ist-attribute { color: #c62828; }
.ist-farbschema .ov-heft-od .ist-methoden { color: #1565c0; }
.ist-farbschema .ov-heft-od.ist-klasse th, .ist-farbschema .ov-heft-od-klasse { color: #1b7a3a; }
/* Info-Kasten mit "ueber:" - Allgemein / Beispiel ueber den Diagrammen */
.ov-heft-od-figur { margin: .4rem 0 0; display: grid; gap: .2rem; justify-items: start; align-content: start; align-self: flex-start; }
.ov-heft-od-figur figcaption { font: .84rem Consolas, "Cascadia Code", monospace; justify-self: center; }
.ov-heft-od td.ov-heft-od-marke { border: 0; padding-left: .9rem; white-space: nowrap; background: var(--ov-flaeche, transparent); }
.ov-heft-od-marke.ist-attribute { color: #c62828; }
.ov-heft-od-marke.ist-methoden { color: #1565c0; }
/* Merkkasten wie auf den Arbeitsblaettern (Heft 15): hellblau, Tabellen Code | Erklaerung, Sichtbarkeit im Diagramm */
.ov-heft-info.ist-merke { background: #edf4fa; }
.ov-heft-info.ist-merke code { background: none; border: 0; padding: 0; }
/* Code im Merkkasten hell wie auf dem Arbeitsblatt (Heft 17), Farben wie im Fliesstext */
.ov-heft-info.ist-merke .ov-heft-code { background: none; color: var(--ov-text, #222); padding: .3rem 0 .3rem .2rem; font-size: .9rem; }
.ov-heft-info.ist-merke .ov-heft-code .fs-reserviert { color: #7b3fa0; }
.ov-heft-info.ist-merke .ov-heft-code .fs-methode { color: #1565c0; }
.ov-heft-info.ist-merke .ov-heft-code .fs-attribut { color: #c62828; }
.ov-heft-info.ist-merke .ov-heft-code .fs-variable { color: #b45309; }
.ov-heft-info.ist-merke .ov-heft-code .fs-klasse { color: #1b7a3a; }
.ov-heft-tabelle { border-collapse: collapse; margin: .3rem 0 .6rem; width: auto; justify-self: start; align-self: start; }
.ov-heft-tabelle td, .ov-heft-tabelle th { padding: .15rem 1.6rem .15rem 0; text-align: left; vertical-align: top; }
.ov-heft-tabelle td:first-child code { font-size: .92rem; white-space: nowrap; }
.hv-gruen { color: #1b7a3a; font-weight: 700; }
.ov-heft-od.ist-sichtbarkeit .ist-attribute, .ov-heft-od.ist-sichtbarkeit .ist-methoden,
.ov-heft-od.ist-sichtbarkeit .ov-heft-od-konstruktor { color: var(--ov-text); }
.ov-heft-od.ist-klasse.ist-sichtbarkeit th { color: var(--ov-text); }
/* Heft 15: Erklaerung und Diagrammzeile leuchten zusammen auf (oop-heft.js, sichtbarkeitZeigen) */
.ov-heft-od.ist-sichtbarkeit .ist-daneben .hv-gruen, .ov-heft-od.ist-sichtbarkeit .ist-daneben .hv-rot { cursor: help; border-radius: 3px; outline-offset: 1px; }
.ov-heft-od.ist-sichtbarkeit .ist-daneben .hv-gruen:hover, .ov-heft-od.ist-sichtbarkeit .ist-daneben .hv-rot:hover { text-decoration: underline dotted; }
.ov-heft-od.ist-sichtbarkeit .ov-heft-od-oeffentlich.ist-hervor-sicht, .ov-heft-od.ist-sichtbarkeit .ist-daneben .hv-gruen.ist-hervor-sicht { background: #e6f5ea; box-shadow: 0 0 0 2px #1b7a3a; border-radius: 3px; }
.ov-heft-od.ist-sichtbarkeit .ov-heft-od-privat.ist-hervor-sicht, .ov-heft-od.ist-sichtbarkeit .ist-daneben .hv-rot.ist-hervor-sicht { background: #fdecea; box-shadow: 0 0 0 2px #c62828; border-radius: 3px; }
.ov-heft-od.ist-sichtbarkeit, .ov-heft-od.ist-sichtbarkeit td.ov-heft-od-marke { background: transparent; }
.ov-heft-od.ist-sichtbarkeit th, .ov-heft-od.ist-sichtbarkeit td:not(.ov-heft-od-marke) { background: #fff; }
.ov-heft-od .ov-heft-od-oeffentlich { color: #1b7a3a; }
.ov-heft-od .ov-heft-od-privat { color: #c62828; }
.ov-heft-od td.ov-heft-od-marke.ist-daneben { background: transparent; font-family: Consolas, "Cascadia Code", monospace; white-space: normal; vertical-align: middle; }
.ov-heft-od-marke.ist-daneben p { margin: 0; }

/* ---------- OOPventure: Hefte nacheinander, Modulziele, Fortschritt der Klasse (Lehrkraft) ---------- */
.ov-modul-zusatz.ist-pflicht { color: var(--ov-fehler); font-weight: 700; }
.ov-modul-name small.ov-modul-ziel { color: var(--ov-warnung); font-weight: 600; }
.ov-heft-naechstes-gesperrt { display: inline-block; margin-left: .5rem; padding: .3rem .7rem; border-radius: 8px;
  background: var(--ov-warnung-hell); color: var(--ov-warnung); font-weight: 600; }
.ov-freigabe-reihenfolge details { margin-top: .2rem; }
.ov-freigabe-reihenfolge summary { cursor: pointer; font-weight: 600; }
.ov-freigabe-reihenfolge > small, .ov-freigabe-reihenfolge details > small { color: var(--ov-text-leise); display: block; }
.ov-freigabe-hefte { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .15rem 1rem; margin-top: .3rem; }
.ov-freigabe-hefte label { display: flex; gap: .35rem; align-items: baseline; }
.ov-freigabe-ziele { border-collapse: collapse; margin-top: .3rem; font-size: .9rem; }
.ov-freigabe-ziele th, .ov-freigabe-ziele td { text-align: left; padding: .15rem .5rem .15rem 0; border-bottom: 1px solid var(--ov-rand); }
.ov-freigabe-ziele td small { display: block; color: var(--ov-text-leise); }
.ov-freigabe-ziele input { width: 5em; font: inherit; }

.ov-fs-wahl { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; margin-bottom: .8rem; }
.ov-fs-wahl select { font: inherit; }
.ov-fs-regeln { color: var(--ov-text-leise); font-size: .9rem; }
.ov-fs-rahmen { overflow-x: auto; border: 1px solid var(--ov-rand); border-radius: 10px; background: #fff; }
.ov-fs-tabelle { border-collapse: collapse; font-size: .85rem; white-space: nowrap; }
.ov-fs-tabelle th, .ov-fs-tabelle td { border-bottom: 1px solid var(--ov-rand); padding: .2rem .3rem; text-align: center; }
.ov-fs-tabelle thead th { position: sticky; top: 0; background: var(--ov-gruen-zart); }
.ov-fs-tabelle thead th.ist-catchup a { color: var(--ov-warnung); }
.ov-fs-tabelle thead th.ist-uebung a { color: #2f4d7a; }
.ov-fs-tabelle .ov-fs-name { text-align: left; position: sticky; left: 0; background: #fff; padding-right: .8rem; z-index: 1; }
.ov-fs-tabelle thead .ov-fs-name { background: var(--ov-gruen-zart); z-index: 2; }
.ov-fs-aktuell { color: var(--ov-text-leise); text-align: left !important; }
.ov-fs-zelle { min-width: 1.9rem; }
.ov-fs-zelle a { display: block; color: inherit; text-decoration: none; min-height: 1.3em; }
.ov-fs-zelle.ist-fertig { background: var(--ov-ok-hell); color: var(--ov-ok); font-weight: 700; }
.ov-fs-zelle.ist-gesperrt { opacity: .45; font-size: .75rem; }
.ov-fs-zelle.ist-offen { color: var(--ov-text-leise); }
.ov-fs-zelle.ist-catchup, .ov-fs-zelle.ist-uebung { font-size: .8rem; }
.ov-fs-zelle.ist-unter-ziel, .ov-fs-legende .ist-unter-ziel { background: var(--ov-warnung-hell); color: var(--ov-warnung); font-weight: 700; }
.ov-fs-zelle:hover { outline: 2px solid var(--ov-gruen); outline-offset: -2px; }
.ov-fs-mini { display: inline-block; width: 1.4rem; height: .45rem; border-radius: 3px; vertical-align: middle;
  background: linear-gradient(90deg, var(--ov-gruen) var(--stand), #e6ebd8 var(--stand)); }
.ov-fs-papier { font-size: .65rem; margin-left: .1rem; }
.ov-fs-coins { color: var(--ov-text-leise); }
.ov-fs-tabelle tfoot td, .ov-fs-tabelle tfoot th { color: var(--ov-text-leise); font-size: .8rem; border-bottom: 0; }
.ov-fs-legende { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .8rem; color: var(--ov-text-leise); }
.ov-fs-legende .ist-unter-ziel { padding: 0 .3rem; border-radius: 4px; }
.ov-fs-hefte { list-style: none; padding: 0; display: grid; gap: .35rem; max-width: 900px; }
.ov-fs-heft a { display: grid; grid-template-columns: minmax(0, 2fr) 160px minmax(0, 2fr); gap: .8rem; align-items: center;
  padding: .45rem .8rem; border: 1px solid var(--ov-rand); border-radius: 8px; background: #fff; color: inherit; text-decoration: none; }
.ov-fs-heft a:hover { border-color: var(--ov-gruen); }
.ov-fs-heft .ov-heft-leiste { max-width: none; }
.ov-fs-heft.ist-catchup a, .ov-fs-heft.ist-uebung a { margin-left: 1.5rem; font-size: .9rem; }
.ov-fs-heft.ist-gesperrt a { opacity: .6; }
.ov-fs-heft.ist-fertig .ov-fs-heft-stand { color: var(--ov-ok); }
.ov-fs-heft.ist-unter-ziel a { border-color: #efd28a; background: var(--ov-warnung-hell); }
.ov-fs-heft-stand { font-size: .85rem; color: var(--ov-text-leise); }
@media (max-width: 700px) { .ov-fs-heft a { grid-template-columns: 1fr; gap: .2rem; } }
/* Objektauswahl im Level: bert = held (Heft 6) */
.ov-objekt-wie { margin-left: .3rem; font-size: .75rem; color: #5b6470; white-space: nowrap; }
.ov-objektwahl button.ist-alias::after { content: none; }
.ov-objektwahl button.ist-programm code { white-space: nowrap; }

/* Merkkasten "Beispiel" (Heft 13): Klassendiagramm links, Code rechts, Bezuege beim Ueberfahren
   - Farben wie im Arbeitsblatt: Klasse rot, Attribute gelb gestrichelt, Konstruktor/Parameter blau, Methoden blau */
.ov-uml-code { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin: .8rem 0 .4rem; }
.ov-uml-code > figcaption { flex-basis: 100%; font: 600 .85rem Consolas, 'Cascadia Code', monospace; color: var(--ov-text-leise); }
.ov-uc-code { margin: 0; flex: 1 1 22rem; min-width: 0; overflow-x: auto; white-space: pre; padding: .5rem .7rem; border-radius: 6px;
  background: #fff; border: 1px solid var(--ov-rand); font: .82rem/1.55 Consolas, 'Cascadia Code', ui-monospace, monospace; }
.ov-uc-nr { display: inline-block; width: 1.8em; margin-right: .6em; text-align: right; color: #94a3b8; user-select: none; }
.ov-uc-uml, .ov-uc-wort, .ov-uc-zeile { border-radius: 3px; cursor: default; transition: background-color .12s, box-shadow .12s; }
.ov-uc-uml:focus { outline: 2px solid var(--ov-gruen-dunkel); outline-offset: 1px; }
.ov-uc-uml.ist-hervor, .ov-uc-wort.ist-hervor, .ov-uc-zeile.ist-hervor { background: #fff7cc; }
.ov-uc-uml.ist-klasse.ist-hervor, .ov-uc-wort.ist-klasse.ist-hervor { box-shadow: 0 0 0 2px #c0392b; background: #fdecea; }
.ov-uc-uml.ist-attribut.ist-hervor, .ov-uc-zeile.ist-attribut.ist-hervor { box-shadow: 0 0 0 2px #e6b800; background: #fff7cc; }
.ov-uc-uml.ist-konstruktor.ist-hervor, .ov-uc-wort.ist-konstruktor.ist-hervor,
.ov-uc-uml.ist-parameter.ist-hervor, .ov-uc-wort.ist-parameter.ist-hervor,
.ov-uc-uml.ist-methode.ist-hervor, .ov-uc-zeile.ist-methode.ist-hervor { box-shadow: 0 0 0 2px #1f8fd6; background: #e6f4fd; }
.ov-uc-uml.ist-konstruktor { color: #c0392b; }
.ov-uc-uml.ist-methode { color: #1f6fb2; }
@media (prefers-reduced-motion: reduce) { .ov-uc-uml, .ov-uc-wort, .ov-uc-zeile { transition: none; } }

/* OOPventure: geplante Unterrichtsstunde (ventures_kern/stundenplanung.py) */
.ov-stunde-banner { margin: .8rem 0; padding: .8rem 1rem; border-radius: 10px; border: 3px solid #2b6cb0; background: #ebf4ff; color: #1a202c; }
.ov-stunde-banner.ist-laufend { box-shadow: 0 0 0 4px rgba(43,108,176,.2); }
.ov-stunde-banner b { display: block; font-size: 1.1rem; color: #1a4e85; }
.ov-stunde-banner ul { margin: .4rem 0 0; padding-left: 0; list-style: none; display: grid; gap: .2rem; }
.ov-stunde-banner li.ist-fertig, .ov-stunde-banner li.ist-fertig a { color: #2f855a; text-decoration: line-through; }
.ov-stunde fieldset { margin: .5rem 0; }