/* Effizienzpioniere Lern-Hub – Gestaltung nach Design-System v1.2

   Grundlage ist das Design-System der Effizienzpioniere in der Fassung v1.2
   (Skill ep-design, Stand 29.09.2026; kanonisch ist dort styles.css, für die
   dunkle Darstellung dark.css). Die harten Regeln, an denen sich alles andere
   ausrichtet:

   1. Moss #00E069 ist eine Fläche, keine Schrift. Grüne Schrift ist Antumbra
      #136B3C (6,57:1 auf Weiß, 6,19:1 auf Platinum), in der dunklen
      Darstellung Moss. Auf jeder grünen Fläche steht #1F1D1E, nie Weiß.
   2. Keine Schatten. Tiefe entsteht aus dem Wechsel Weiß ↔ #F8F8F8 und aus
      1px-Linien.
   3. Der Verlauf läuft bei 78°: hell Moss → Sun (Überfahren Moss → Grass),
      dunkel Antumbra → Penumbra. Nur der Marker unter Überschriften und
      einzelne Fortschrittsbalken laufen bei 90°.
   4. <em> in einer Überschrift ist der Marker, kein Kursiv. Kursiv gibt es
      nirgends.
   Dazu: Radien nur 24 / 16 / 8 / rund, Übergänge 0,2 s nur auf Farbe und
   Deckkraft, nur Montserrat in 450/500/550/650/680, Icons aus Solar „Bold
   Duotone“, Eyebrows groß getippt statt per text-transform.

   Wo diese Seite davon abweicht, steht der Grund daneben; gesammelt in
   docs/design-audit-2026-10-09-v12.md unter „Bewusste Abweichungen“.

   Alle Farben stehen in :root, in zwei Ebenen. Die --ep-*-Tokens sind
   wörtlich aus styles.css v1.2 übernommen und tauchen in keiner Regel weiter
   unten direkt auf – mit Ausnahme der Marken-Flächen (grüne Fläche,
   Fußzeile, Höhepunkt), die in beiden Darstellungen gleich bleiben. Die
   Rollen darunter (--paper, --ink, --gruen-text …) zeigen auf die Tokens.
   Wer eine Farbe ändern will, ändert die Rolle, nicht die Regel.

   Hell und Dunkel: Das Kopfskript in index.html setzt data-theme auf light
   oder dark – aus der gespeicherten Wahl, sonst aus der Systemeinstellung.
   Ohne JavaScript greift die prefers-color-scheme-Regel. Im Druck gilt immer
   die helle Palette.

   Reihenfolge: Schriften, Tokens, Grundlagen, Icons, Knöpfe, Kopfbereich,
   Leiste, Module, Bausteine, Videos, Bildschirmfotos, Fachbegriffe, Übungen,
   Lektionen, Abschlussblöcke, Fußzeile, Meldungen, schmale Fenster, Druck,
   danach Wissenscheck je Pfad, Suche, Team-Wahl, Höhepunkt und Glossar. */

/* ---------- Schriften ----------
   Selbst ausgeliefert, nicht von Google geladen: Ein Aufruf an fonts.gstatic.com
   meldet die IP-Adresse jeder lesenden Person an einen Dritten, und diese Seite
   predigt in Modul 03 selbst Zurückhaltung bei Datenabfluss. Die Dateien liegen
   in assets/fonts, die Lizenz (SIL OFL 1.1) daneben.

   Nur Montserrat, auch für Tastenkürzel und Code (v1.2: keine zweite Schrift).
   Eine Variable Font für alle Schnitte; der Skill liefert sie als TTF, hier
   liegt dieselbe Schrift als woff2 in zwei Teilmengen. unicode-range lädt die
   latin-ext-Datei nur, wenn ein Zeichen daraus vorkommt. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/montserrat-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/montserrat-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
/* ==== Design-System v1.2: Tokens aus styles.css des Skills ==== */
/* Marken-Rohfarben */
--ep-moss:#00E069;      /* Moss – Primär-FLÄCHE, keine Schrift (1,77:1 auf Weiß) */
--ep-grass:#64E755;     /* Grass – Verlaufsende im Überfahren */
--ep-sun:#D3EE3F;       /* Sun – Verlaufsende in Ruhe, Textmarkierung */
--ep-sunset:#EA5115;    /* Sunset – warmer Akzent, Warnzeichen */
/* Die drei Grüntöne, verbindlich benannt */
--ep-penumbra:#009947;  /* Penumbra – helles Ende der grünen Fläche */
--ep-antumbra:#136B3C;  /* Antumbra – grüne Schrift, Kennzahlen, Links, Icons */
--ep-umbra:#0E4D2A;     /* Umbra – tiefste Fläche, Link im Überfahren */
/* Neutrale – echtes Grau, nie grün getönt */
--ep-black:#262626;     /* Fließtext */
--ep-dark-900:#1F1D1E;  /* Schrift AUF Grün (9,47:1), Grund im Dunkel */
--ep-dark-800:#2F2B2D;  /* Fläche 2 im Dunkel */
--ep-platinum:#F8F8F8;  /* Sektionsfläche, Kasten */
--ep-light-200:#EBEBEB; /* Linien, Kartenrand */
--ep-silver:#A8A8A8;    /* Feldrand; als Schrift nie (2,38:1) */
--ep-eiscreme:#F8FCE0;  /* Eiscreme – Überfahren, Status-Pille */
--ep-white:#FFFFFF;
--ep-error:#C62828;     /* im Design-System provisorisch */
--ep-error-50:#FDECEC;
/* Ergänzungen dieser Seite – im Skill nicht definiert, dort als offen geführt */
--ep-meta:#666666;            /* gedämpfte Schrift für Meta-Angaben, wie die PowerPoint-Vorlage: 5,74:1 */
--ep-error-auf-dunkel:#FFB4A9; /* Fehlerrot im Dunkel: 8,2:1; #C62828 fiele dort auf 2,98:1 */
/* Semantische Rollen des Skills (dark.css belegt sie für Dunkel neu) */
--ep-bg:var(--ep-white);
--ep-bg-alt:var(--ep-platinum);
--ep-bg-accent:var(--ep-eiscreme);
--ep-text:var(--ep-black);
--ep-text-muted:var(--ep-silver);
--ep-text-on-green:var(--ep-dark-900);
--ep-text-green:var(--ep-antumbra);
--ep-border:var(--ep-light-200);
--ep-border-strong:var(--ep-silver);
--ep-border-accent:var(--ep-moss);
--ep-focus:var(--ep-antumbra);
/* Der Verlauf – 78 Grad, immer */
--ep-gradient:linear-gradient(78deg,#00E069,#D3EE3F);
--ep-gradient-hover:linear-gradient(78deg,#00E069,#64E755);
--ep-gradient-halo:linear-gradient(78deg,rgba(0,224,105,.3),rgba(211,238,63,.3));
--ep-gradient-marker:linear-gradient(90deg,#00E069,#D3EE3F);
--ep-gradient-deep:linear-gradient(78deg,#136B3C,#009947);
--ep-gradient-umbra:linear-gradient(78deg,#136B3C,#0E4D2A);
/* Typografie */
--ep-font:'Montserrat',Arial,sans-serif;
--ep-weight-body:450;--ep-weight-medium:500;--ep-weight-h3:550;--ep-weight-h2:650;--ep-weight-h1:680;
--ep-ls-tight:-0.03em;
/* Radien – nur diese vier */
--ep-radius:24px;--ep-radius-small:16px;--ep-radius-tiny:8px;--ep-radius-round:9999px;
/* Bewegung – 0,2 s, nur Farbe und Deckkraft */
--ep-transition:.2s;

/* ==== Rollen dieser Seite ==== */
--grund:var(--ep-bg-alt);         /* Seitengrund unter Leiste und Modulen */
--paper:var(--ep-bg);             /* Kopfleiste, Kopfbereich */
--flaeche:var(--ep-bg);           /* Karte: Modul, Werkzeug, Antwort */
--flaeche-leise:var(--ep-bg-alt); /* Kasten innerhalb einer Karte */
--akzent-flaeche:var(--ep-bg-accent); /* Überfahren, Status-Pille */
--ink:var(--ep-text);
--ink-soft:var(--ep-meta);        /* nur Meta: Minuten, Zähler, Herkunft */
--line:var(--ep-border);          /* Kartenrand, Trennlinie (dekorativ) */
--feld-kante:var(--ep-border-strong); /* Rand wählbarer Karten und Felder */
--gruen-text:var(--ep-text-green);
--gruen-flaeche:var(--ep-moss);
--auf-gruen:var(--ep-text-on-green);
--link:var(--ep-text-green);
--link-hover:var(--ep-umbra);
--fokus:var(--ep-focus);
/* Eyebrow: v1.2 setzt Sunset. Sunset hält auf Weiß nur 3,69:1 – zu wenig für
   13px nach WCAG AA, und axe meldet es. v1.2 nennt für diesen Fall #262626. */
--eyebrow:var(--ep-text);
/* Bewertung: Grün = richtig, Rot = falsch, Grau = vertretbar. Sunset ist
   Akzent, nie Bewertung. Richtig ist Moss mit dunkler Schrift, falsch und
   vertretbar tragen Weiß (5,62:1 und 5,74:1). */
--falsch:var(--ep-error);
--falsch-tint:var(--ep-error-50);
--falsch-zeichen:var(--ep-error); /* Zeichen und Rand – im Dunkel #FFB4A9 */
--neutral:var(--ep-meta);
--warn-zeichen:var(--ep-sunset);  /* als Zeichen ausreichend: 3,69:1 auf Weiß, 3,48:1 auf Platinum */
--pop-flaeche:var(--ep-bg);       /* Aufklappfenster und Meldung */
--video-grund:var(--ep-dark-900); /* Player, in beiden Darstellungen dunkel */
--video-vorschau:var(--ep-gradient-umbra); /* Vorschaufläche vor dem Klick, in beiden Darstellungen */
--scroll-blende:rgb(38 38 38 / .09); /* Blende an seitwärts scrollenden Tabellen */

/* Icons: Solar „Bold Duotone“ aus dem Skill (icons/begriffe, brand/icons),
   als Maske eingesetzt – die Farbe kommt aus der Regel (currentColor oder
   eine Rolle). Der hintere Pfad trägt opacity .5, die Maske übernimmt das als
   halbe Deckkraft; so bleibt die Zweitönigkeit in jeder Farbe erhalten. */
--ico-suchen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.313 11.157a9.157 9.157 0 1 1-18.313 0a9.157 9.157 0 0 1 18.313 0' opacity='.5'/%3E%3Cpath fill='%23000' d='m17.1 18.122l3.666 3.666a.723.723 0 0 0 1.023-1.022L18.122 17.1a9 9 0 0 1-1.022 1.022'/%3E%3C/svg%3E");
--ico-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' opacity='.5'/%3E%3Cpath d='M12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V17C11.25 17.4142 11.5858 17.75 12 17.75Z'/%3E%3Cpath d='M12 7C12.5523 7 13 7.44771 13 8C13 8.55229 12.5523 9 12 9C11.4477 9 11 8.55229 11 8C11 7.44771 11.4477 7 12 7Z'/%3E%3C/g%3E%3C/svg%3E");
--ico-warnung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M12 3C9.68925 3 8.23007 5.58716 5.31171 10.7615L4.94805 11.4063C2.52291 15.7061 1.31034 17.856 2.40626 19.428C3.50217 21 6.21356 21 11.6363 21H12.3637C17.7864 21 20.4978 21 21.5937 19.428C22.6897 17.856 21.4771 15.7061 19.0519 11.4063L18.6883 10.7615C15.7699 5.58716 14.3107 3 12 3Z' opacity='.5'/%3E%3Cpath d='M12 7.25C12.4142 7.25 12.75 7.58579 12.75 8V13C12.75 13.4142 12.4142 13.75 12 13.75C11.5858 13.75 11.25 13.4142 11.25 13V8C11.25 7.58579 11.5858 7.25 12 7.25Z'/%3E%3Cpath d='M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z'/%3E%3C/g%3E%3C/svg%3E");
--ico-zu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12Z' opacity='.5'/%3E%3Cpath d='M15.5303 11.0303C15.8232 10.7374 15.8232 10.2626 15.5303 9.96967C15.2374 9.67678 14.7626 9.67678 14.4697 9.96967L12 12.4393L9.53033 9.96967C9.23744 9.67678 8.76256 9.67678 8.46967 9.96967C8.17678 10.2626 8.17678 10.7374 8.46967 11.0303L11.4697 14.0303C11.7626 14.3232 12.2374 14.3232 12.5303 14.0303L15.5303 11.0303Z'/%3E%3C/g%3E%3C/svg%3E");
--ico-auf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z' opacity='.5'/%3E%3Cpath d='M8.46967 12.9697C8.17678 13.2626 8.17678 13.7374 8.46967 14.0303C8.76256 14.3232 9.23744 14.3232 9.53033 14.0303L12 11.5607L14.4697 14.0303C14.7626 14.3232 15.2374 14.3232 15.5303 14.0303C15.8232 13.7374 15.8232 13.2626 15.5303 12.9697L12.5303 9.96967C12.2374 9.67678 11.7626 9.67678 11.4697 9.96967L8.46967 12.9697Z'/%3E%3C/g%3E%3C/svg%3E");
--ico-schliessen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M5.53717 19.5302C5.24427 19.8231 4.7694 19.8231 4.47651 19.5302C4.18361 19.2373 4.18361 18.7624 4.47651 18.4696L18.4764 4.46967C18.7693 4.17678 19.2442 4.17678 19.5371 4.46967C19.8299 4.76256 19.8299 5.23744 19.5371 5.53033L5.53717 19.5302Z' opacity='.5'/%3E%3Cpath d='M4.46978 5.53033C4.17689 5.23744 4.17689 4.76256 4.46978 4.46967C4.76268 4.17678 5.23755 4.17678 5.53044 4.46967L19.5303 18.4696C19.8232 18.7624 19.8232 19.2373 19.5303 19.5302C19.2374 19.8231 18.7626 19.8231 18.4697 19.5302L4.46978 5.53033Z'/%3E%3C/g%3E%3C/svg%3E");
--ico-zuruecksetzen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z' opacity='.5'/%3E%3Cpath fill-rule='evenodd' d='M9.3011 6.91463C9.58205 7.219 9.56307 7.69349 9.25871 7.97445L8.41824 8.75027L14.0758 8.75027C14.7279 8.75025 15.2721 8.75024 15.7133 8.79399C16.1748 8.83976 16.6038 8.93919 16.9931 9.19091C17.3199 9.40218 17.5981 9.68039 17.8093 10.0071C18.0611 10.3965 18.1605 10.8255 18.2063 11.287C18.25 11.7281 18.25 12.2723 18.25 12.9245V12.9991C18.25 13.6513 18.25 14.1955 18.2063 14.6366C18.1605 15.0981 18.0611 15.5271 17.8094 15.9165C17.5981 16.2432 17.3199 16.5214 16.9931 16.7327C16.6038 16.9844 16.1748 17.0839 15.7133 17.1296C15.2721 17.1734 14.7279 17.1734 14.0758 17.1733H9.5C9.08579 17.1733 8.75 16.8376 8.75 16.4233C8.75 16.0091 9.08579 15.6733 9.5 15.6733H14.0385C14.7376 15.6733 15.2069 15.6725 15.5652 15.6369C15.9116 15.6026 16.0724 15.5418 16.1787 15.4731C16.3272 15.377 16.4537 15.2506 16.5497 15.102C16.6185 14.9957 16.6793 14.8349 16.7136 14.4886C16.7491 14.1303 16.75 13.6609 16.75 12.9618C16.75 12.2627 16.7491 11.7933 16.7136 11.435C16.6793 11.0887 16.6184 10.9279 16.5497 10.8216C16.4537 10.673 16.3272 10.5466 16.1787 10.4506C16.0724 10.3818 15.9116 10.321 15.5652 10.2867C15.2069 10.2511 14.7376 10.2503 14.0385 10.2503H8.41824L9.25871 11.0261C9.56307 11.307 9.58205 11.7815 9.3011 12.0859C9.02015 12.3903 8.54565 12.4092 8.24129 12.1283L5.99129 10.0514C5.83748 9.90939 5.75 9.70959 5.75 9.50027C5.75 9.29094 5.83748 9.09114 5.99129 8.94916L8.24129 6.87224C8.54565 6.59129 9.02015 6.61027 9.3011 6.91463Z' clip-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
--ico-loeschen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M9.42578 11.4815C9.83777 11.4383 10.2049 11.7548 10.2461 12.1885L10.7461 17.4522C10.7871 17.8858 10.4862 18.2721 10.0742 18.3154C9.66223 18.3586 9.29511 18.0421 9.25391 17.6084L8.75391 12.3457C8.71269 11.9119 9.01362 11.5248 9.42578 11.4815Z'/%3E%3Cpath d='M14.5742 11.4815C14.9864 11.5248 15.2873 11.9119 15.2461 12.3457L14.7461 17.6084C14.7049 18.0422 14.3378 18.3586 13.9258 18.3154C13.5138 18.2721 13.2129 17.8858 13.2539 17.4522L13.7539 12.1885C13.7951 11.7548 14.1623 11.4384 14.5742 11.4815Z'/%3E%3Cpath d='M13.7393 2.00002C13.9618 1.99986 14.1558 1.99998 14.3389 2.03322C15.0621 2.16462 15.688 2.67737 16.0264 3.41603C16.112 3.60305 16.1729 3.8126 16.2432 4.05275L16.3584 4.44435C16.3778 4.51052 16.383 4.52913 16.3877 4.54396C16.5678 5.11018 17.1279 5.49355 17.6572 5.50881H20.2285C20.6545 5.50881 20.9999 5.90141 21 6.38576C21 6.87022 20.6546 7.26271 20.2285 7.26271H3.77148C3.34544 7.26271 3 6.87022 3 6.38576C3.00011 5.90141 3.3455 5.50881 3.77148 5.50881H6.43555C6.9649 5.49355 7.43218 5.11018 7.6123 4.54396C7.61702 4.52913 7.6222 4.51055 7.6416 4.44435L7.75684 4.05275C7.82709 3.8126 7.88799 3.60305 7.97363 3.41603C8.31193 2.67739 8.93792 2.16467 9.66113 2.03322C9.84415 1.99999 10.0383 1.99986 10.2607 2.00002H13.7393Z'/%3E%3Cpath d='M11.5956 22.0001H12.4044C15.1871 22.0001 16.5785 22.0001 17.4831 21.1142C18.3878 20.2283 18.4803 18.7751 18.6654 15.8686L18.9321 11.6807C19.0326 10.1037 19.0828 9.31524 18.6289 8.81558C18.1751 8.31592 17.4087 8.31592 15.876 8.31592H8.12405C6.59127 8.31592 5.82488 8.31592 5.37105 8.81558C4.91722 9.31524 4.96744 10.1037 5.06788 11.6807L5.33459 15.8686C5.5197 18.7751 5.61225 20.2283 6.51689 21.1142C7.42153 22.0001 8.81289 22.0001 11.5956 22.0001Z' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
--ico-speichern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M20.5355 20.5355C22 19.0711 22 16.714 22 12C22 11.6585 22 11.4878 21.9848 11.3142C21.9142 10.5049 21.586 9.71257 21.0637 9.09034C20.9516 8.95687 20.828 8.83317 20.5806 8.58578L15.4142 3.41944C15.1668 3.17206 15.0431 3.04835 14.9097 2.93631C14.2874 2.414 13.4951 2.08581 12.6858 2.01515C12.5122 2 12.3415 2 12 2C7.28595 2 4.92893 2 3.46447 3.46447C2 4.92893 2 7.28595 2 12C2 16.714 2 19.0711 3.46447 20.5355C4.1485 21.2196 5.02727 21.5841 6.25 21.7784L7.75 21.9313C8.9058 22 10.2996 22 12 22C13.7004 22 15.0942 22 16.25 21.9313L17.75 21.7784C18.9727 21.5841 19.8515 21.2196 20.5355 20.5355Z' opacity='.5'/%3E%3Cpath d='M13.0518 16.25C13.9502 16.25 14.7001 16.2501 15.2949 16.3301C15.9225 16.4145 16.489 16.6003 16.9443 17.0557C17.3997 17.511 17.5855 18.0775 17.6699 18.7051C17.7499 19.2999 17.75 20.0498 17.75 20.9482V21.7812L16.25 21.9219V21C16.25 20.036 16.2485 19.3883 16.1836 18.9053C16.1216 18.4439 16.0141 18.2465 15.8838 18.1162C15.7535 17.9859 15.5561 17.8784 15.0947 17.8164C14.6117 17.7515 13.964 17.75 13 17.75H11C10.036 17.75 9.38831 17.7515 8.90527 17.8164C8.44389 17.8785 8.24652 17.9859 8.11621 18.1162C7.98591 18.2465 7.87845 18.4439 7.81641 18.9053C7.75146 19.3883 7.75 20.036 7.75 21V21.9258L6.25 21.7773V20.9482C6.24997 20.0498 6.25011 19.2999 6.33008 18.7051C6.41451 18.0775 6.60031 17.511 7.05566 17.0557C7.51102 16.6003 8.07747 16.4145 8.70508 16.3301C9.29985 16.2501 10.0498 16.25 10.9482 16.25H13.0518Z'/%3E%3Cpath d='M13 7.25C13.4142 7.25 13.75 7.58579 13.75 8C13.75 8.41421 13.4142 8.75 13 8.75H7C6.58579 8.75 6.25 8.41421 6.25 8C6.25 7.58579 6.58579 7.25 7 7.25H13Z'/%3E%3C/g%3E%3C/svg%3E");
--ico-bedingt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2L12 4.5C16.141 4.5 19.5 7.859 19.5 12S16.141 19.5 12 19.5L12 22C17.523 22 22 17.523 22 12S17.523 2 12 2Z' opacity='.5'/%3E%3Cpath fill='%23000' d='M12 2C6.477 2 2 6.477 2 12S6.477 22 12 22L12 2Z'/%3E%3C/svg%3E");
--ico-system:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M10 2H14C17.7712 2 19.6569 2 20.8284 3.17157C22 4.34315 22 6.22876 22 10V11C22 11.5516 22 12.5494 21.9935 13H2.00652C2 12.5494 2 11.5516 2 11V10C2 6.22876 2 4.34315 3.17157 3.17157C4.34315 2 6.22876 2 10 2Z' opacity='.5'/%3E%3Cpath d='M7.9846 17.5C5.14528 17.5 3.72562 17.5 2.84356 16.6213C2.27207 16.052 2.07085 15.2579 2 14V13H22V14C21.9292 15.2579 21.7279 16.052 21.1564 16.6213C20.2744 17.5 18.8547 17.5 16.0154 17.5H12.7529V21.5H16.0154C16.4312 21.5 16.7683 21.8358 16.7683 22.25C16.7683 22.6642 16.4312 23 16.0154 23H7.9846C7.56879 23 7.23171 22.6642 7.23171 22.25C7.23171 21.8358 7.56879 21.5 7.9846 21.5H11.2471V17.5H7.9846Z'/%3E%3C/g%3E%3C/svg%3E");
--ico-hell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12Z'/%3E%3Cpath fill-rule='evenodd' d='M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V3C12.75 3.41421 12.4142 3.75 12 3.75C11.5858 3.75 11.25 3.41421 11.25 3V2C11.25 1.58579 11.5858 1.25 12 1.25ZM1.25 12C1.25 11.5858 1.58579 11.25 2 11.25H3C3.41421 11.25 3.75 11.5858 3.75 12C3.75 12.4142 3.41421 12.75 3 12.75H2C1.58579 12.75 1.25 12.4142 1.25 12ZM20.25 12C20.25 11.5858 20.5858 11.25 21 11.25H22C22.4142 11.25 22.75 11.5858 22.75 12C22.75 12.4142 22.4142 12.75 22 12.75H21C20.5858 12.75 20.25 12.4142 20.25 12ZM12 20.25C12.4142 20.25 12.75 20.5858 12.75 21V22C12.75 22.4142 12.4142 22.75 12 22.75C11.5858 22.75 11.25 22.4142 11.25 22V21C11.25 20.5858 11.5858 20.25 12 20.25Z' clip-rule='evenodd'/%3E%3Cg opacity='.5'%3E%3Cpath d='M4.39838 4.39838C4.69127 4.10549 5.16615 4.10549 5.45904 4.39838L5.85188 4.79122C6.14477 5.08411 6.14477 5.55898 5.85188 5.85188C5.55898 6.14477 5.08411 6.14477 4.79122 5.85188L4.39838 5.45904C4.10549 5.16615 4.10549 4.69127 4.39838 4.39838Z'/%3E%3Cpath d='M19.6009 4.39864C19.8938 4.69153 19.8938 5.16641 19.6009 5.4593L19.2081 5.85214C18.9152 6.14503 18.4403 6.14503 18.1474 5.85214C17.8545 5.55924 17.8545 5.08437 18.1474 4.79148L18.5402 4.39864C18.8331 4.10575 19.308 4.10575 19.6009 4.39864Z'/%3E%3Cpath d='M18.1474 18.1474C18.4403 17.8545 18.9152 17.8545 19.2081 18.1474L19.6009 18.5402C19.8938 18.8331 19.8938 19.308 19.6009 19.6009C19.308 19.8938 18.8331 19.8938 18.5402 19.6009L18.1474 19.2081C17.8545 18.9152 17.8545 18.4403 18.1474 18.1474Z'/%3E%3Cpath d='M5.85188 18.1477C6.14477 18.4406 6.14477 18.9154 5.85188 19.2083L5.45904 19.6012C5.16615 19.8941 4.69127 19.8941 4.39838 19.6012C4.10549 19.3083 4.10549 18.8334 4.39838 18.5405L4.79122 18.1477C5.08411 17.8548 5.55898 17.8548 5.85188 18.1477Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
--ico-dunkel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath fill-rule='evenodd' d='M22 12.0004C22 17.5232 17.5228 22.0004 12 22.0004C10.8358 22.0004 9.71801 21.8014 8.67887 21.4357C8.24138 20.3772 8 19.217 8 18.0004C8 15.7792 8.80467 13.7459 10.1384 12.1762C11.31 13.8818 13.2744 15.0004 15.5 15.0004C17.8615 15.0004 19.9289 13.741 21.0672 11.8572C21.3065 11.4612 22 11.5377 22 12.0004Z' clip-rule='evenodd' opacity='.5'/%3E%3Cpath d='M2 12C2 16.3586 4.78852 20.0659 8.67887 21.4353C8.24138 20.3768 8 19.2166 8 18C8 15.7788 8.80467 13.7455 10.1384 12.1758C9.42027 11.1303 9 9.86422 9 8.5C9 6.13845 10.2594 4.07105 12.1432 2.93276C12.5392 2.69347 12.4627 2 12 2C6.47715 2 2 6.47715 2 12Z'/%3E%3C/g%3E%3C/svg%3E");
--ico-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10' opacity='.5'/%3E%3Cpath fill='%23000' d='M16.03 8.97a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.235L14.97 8.97a.75.75 0 0 1 1.06 0'/%3E%3C/svg%3E");
--ico-nein:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10' opacity='.5'/%3E%3Cpath fill='%23000' d='M8.97 8.97a.75.75 0 0 1 1.06 0L12 10.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L13.06 12l1.97 1.97a.75.75 0 0 1-1.06 1.06L12 13.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L10.94 12l-1.97-1.97a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
--ico-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 16c0-2.828 0-4.243.879-5.121C3.757 10 5.172 10 8 10h8c2.828 0 4.243 0 5.121.879C22 11.757 22 13.172 22 16s0 4.243-.879 5.121C20.243 22 18.828 22 16 22H8c-2.828 0-4.243 0-5.121-.879C2 20.243 2 18.828 2 16' opacity='.5'/%3E%3Cpath fill='%23000' d='M6.75 8a5.25 5.25 0 0 1 10.5 0v2.004c.567.005 1.064.018 1.5.05V8a6.75 6.75 0 0 0-13.5 0v2.055a24 24 0 0 1 1.5-.051z'/%3E%3C/svg%3E");
--ico-glossar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 8c0-2.828 0-4.243.879-5.121C4.757 2 6.172 2 9 2h6c2.828 0 4.243 0 5.121.879C21 3.757 21 5.172 21 8v8c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22H9c-2.828 0-4.243 0-5.121-.879C3 20.243 3 18.828 3 16z' opacity='.5'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8.75 2.012v20h-1.5v-20zM1.25 8A.75.75 0 0 1 2 7.25h2a.75.75 0 0 1 0 1.5H2A.75.75 0 0 1 1.25 8m0 4a.75.75 0 0 1 .75-.75h2a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h2a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75' clip-rule='evenodd'/%3E%3Cpath fill='%23000' d='M10.75 6.5a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75m0 3.5a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E");
--ico-wissen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.217 3.5a5.17 5.17 0 0 0-4.434 0L3.092 6.637c-1.076.504-1.357 1.927-.842 2.91V14.5a.75.75 0 0 0 1.5 0v-3.828L9.783 13.5a5.17 5.17 0 0 0 4.434 0l6.691-3.137c1.456-.682 1.456-3.044 0-3.726z'/%3E%3Cpath fill='%23000' d='M5 11.258L9.783 13.5a5.17 5.17 0 0 0 4.434 0L19 11.258v5.367c0 1.008-.503 1.952-1.385 2.44C16.146 19.88 13.796 21 12 21s-4.146-1.121-5.615-1.935C5.504 18.577 5 17.633 5 16.625z' opacity='.5'/%3E%3C/svg%3E");
--ico-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M23 12c0-1.035-.53-2.07-1.591-2.647L8.597 2.385C6.534 1.264 4 2.724 4 5.033V12z' clip-rule='evenodd'/%3E%3Cpath fill='%23000' d='m8.597 21.615l12.812-6.968A2.99 2.99 0 0 0 23 12H4v6.967c0 2.31 2.534 3.769 4.597 2.648' opacity='.5'/%3E%3C/svg%3E");
--ico-aufgabe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8.048 2.488a.75.75 0 0 1-.036 1.06l-4.286 4a.75.75 0 0 1-1.095-.076l-1.214-1.5a.75.75 0 0 1 1.166-.944l.708.875l3.697-3.451a.75.75 0 0 1 1.06.036M11.25 5a.75.75 0 0 1 .75-.75h10a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75M8.048 16.488a.75.75 0 0 1-.036 1.06l-4.286 4a.75.75 0 0 1-1.095-.076l-1.214-1.5a.75.75 0 1 1 1.166-.944l.708.875l3.697-3.451a.75.75 0 0 1 1.06.036M11.25 19a.75.75 0 0 1 .75-.75h10a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75' clip-rule='evenodd'/%3E%3Cpath fill='%23000' d='M8.048 9.488a.75.75 0 0 1-.036 1.06l-4.286 4a.75.75 0 0 1-1.095-.076l-1.214-1.5a.75.75 0 1 1 1.166-.944l.708.875l3.697-3.451a.75.75 0 0 1 1.06.036M11.25 12a.75.75 0 0 1 .75-.75h10a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75' opacity='.5'/%3E%3C/svg%3E");
--ico-export:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M3 14.25a.75.75 0 0 1 .75.75c0 1.435.002 2.436.103 3.192c.099.734.28 1.122.556 1.399c.277.277.665.457 1.4.556c.754.101 1.756.103 3.191.103h6c1.435 0 2.436-.002 3.192-.103c.734-.099 1.122-.28 1.399-.556c.277-.277.457-.665.556-1.4c.101-.755.103-1.756.103-3.191a.75.75 0 0 1 1.5 0v.055c0 1.367 0 2.47-.116 3.337c-.122.9-.38 1.658-.982 2.26s-1.36.86-2.26.982c-.867.116-1.97.116-3.337.116h-6.11c-1.367 0-2.47 0-3.337-.116c-.9-.122-1.658-.38-2.26-.982s-.86-1.36-.981-2.26c-.117-.867-.117-1.97-.117-3.337V15a.75.75 0 0 1 .75-.75' opacity='.5'/%3E%3Cpath d='M12 16.75a.75.75 0 0 0 .553-.244l4-4.375a.75.75 0 1 0-1.107-1.012l-2.696 2.95V3a.75.75 0 0 0-1.5 0v11.068l-2.696-2.95a.75.75 0 0 0-1.108 1.013l4 4.375a.75.75 0 0 0 .554.244'/%3E%3C/g%3E%3C/svg%3E");
--ico-import:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M3 14.25a.75.75 0 0 1 .75.75c0 1.435.002 2.436.103 3.192c.099.734.28 1.122.556 1.399c.277.277.665.457 1.4.556c.754.101 1.756.103 3.191.103h6c1.435 0 2.436-.002 3.192-.103c.734-.099 1.122-.28 1.399-.556c.277-.277.457-.665.556-1.4c.101-.755.103-1.756.103-3.191a.75.75 0 0 1 1.5 0v.055c0 1.367 0 2.47-.116 3.337c-.122.9-.38 1.658-.982 2.26s-1.36.86-2.26.982c-.867.116-1.97.116-3.337.116h-6.11c-1.367 0-2.47 0-3.337-.116c-.9-.122-1.658-.38-2.26-.982s-.86-1.36-.981-2.26c-.117-.867-.117-1.97-.117-3.337V15a.75.75 0 0 1 .75-.75' opacity='.5'/%3E%3Cpath d='M12 2.25a.75.75 0 0 1 .553.244l4 4.375a.75.75 0 1 1-1.107 1.012l-2.696-2.95V16a.75.75 0 0 1-1.5 0V4.932l-2.696 2.95a.75.75 0 0 1-1.108-1.013l4-4.375A.75.75 0 0 1 12 2.25'/%3E%3C/g%3E%3C/svg%3E");

/* Schriftgrößen – die fluide Skala des Design-Systems, linear zwischen 320px
   und 1280px Fensterbreite (MIN + Spanne × (100vw − 20rem) / 60). Keine
   Sprünge an Umbrüchen.
   Die kleinen Stufen und der Fließtext laufen am Handy nicht so weit
   herunter wie die Skala des Skills (12/13/14px): Die Seite ist eine
   Lernstrecke von gut 65.000px Höhe am Handy, das liest sich bei 14px
   Fließtext schlecht. Bewusste Abweichung (erstes Design-Audit, Maßnahme 5). */
--t-mikro:.75rem;                                                                  /* 12, kleinste Stufe */
--t-klein:.8125rem;                                                                /* 13, System: 12→13 */
--t-ui:.875rem;                                                                    /* 14, System: 13→14 */
--t-text:clamp(.9375rem, calc(.9375rem + .0625 * (100vw - 20rem) / 60), 1rem);    /* 15→16, System: 14→16 */
--t-lead:clamp(1rem, calc(1rem + .125 * (100vw - 20rem) / 60), 1.125rem);          /* 16→18, System: 14→18 */
--t-h4:clamp(1rem, calc(1rem + .25 * (100vw - 20rem) / 60), 1.25rem);             /* H4 16→20 */
--t-h3:clamp(1.125rem, calc(1.125rem + .5 * (100vw - 20rem) / 60), 1.625rem);     /* H3 18→26 */
--t-h2:clamp(1.375rem, calc(1.375rem + .875 * (100vw - 20rem) / 60), 2.25rem);    /* H2 22→36 */
--t-h1:clamp(1.625rem, calc(1.625rem + 1.1875 * (100vw - 20rem) / 60), 2.8125rem);/* Hero 26→45 */

/* Zeilenhöhen – an die Größe gekoppelt */
--lh-eng:1.2;     /* H1, Zahlen */
--lh-h2:1.25;     /* H2 */
--lh-mit:1.3;     /* H3, H4, Etiketten, Knöpfe */
--lh-weit:1.5;    /* Fließtext, Listen */

/* Schnitte nach v1.2. 600 und 700 gibt es nicht. */
--fw-normal:var(--ep-weight-body);    /* 450 Text */
--fw-mittel:var(--ep-weight-medium);  /* 500 Eyebrow, Knopf, H4, Etikett */
--fw-titel:var(--ep-weight-h3);       /* 550 H3, Fragen */
--fw-stark:var(--ep-weight-h2);       /* 650 H2, Kastentitel, <strong> */
--fw-h1:var(--ep-weight-h1);          /* 680 H1, Kennzahl */

/* Abstände – Vierer-Raster, die großen Stufen fluid */
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;
--s6:clamp(1.5rem, calc(1.5rem + .75 * (100vw - 20rem) / 60), 2.25rem);  /* 24→36 */
--s7:clamp(2rem, calc(2rem + 1 * (100vw - 20rem) / 60), 3rem);           /* 32→48 */
--rand:clamp(1.5rem, calc(1.5rem + 1 * (100vw - 20rem) / 60), 2.5rem);   /* Außenrand 24→40 */

/* Radien nach Rolle: Karte 24 → Kasten darin 16 → Etikett, Feld, Bild in der
   Karte 8. Knöpfe und Pillen sind rund. 9999px statt 100vw: optisch gleich,
   aber unabhängig vom Viewport (im Druck wäre 100vw sonst null). */
--r-s:var(--ep-radius-tiny);--r-m:var(--ep-radius-small);--r-l:var(--ep-radius);--pill:var(--ep-radius-round);

/* Klickziel nach web-app.md des Skills: mindestens 44px */
--ziel:44px;

/* Satzbreite des Fließtexts: 36em sind in Montserrat rund 70 Zeichen. */
--satz:36em;
/* Breite der Kästen im Kopfbereich (Dein Weg, Einträge aus Version 1) */
--kasten:46rem;

color-scheme:light}

/* ---------- Dunkle Darstellung ----------
   Werte aus dark.css des Skills: Grund #1F1D1E, Fläche 2 #2F2B2D, Schrift
   Weiß, grüne Schrift Moss (Antumbra hielte dort nur 2,55:1), Fokus Moss,
   Link im Überfahren Grass, Linien Weiß zu 20 %. dark.css ist vom Marketing
   nicht freigegeben – als Werkzeug-Darstellung erlaubt (tokens.md § 8).
   Nur Tokens und Rollen werden neu belegt, keine Regel weiter unten. */
:root[data-theme="dark"]{
--ep-bg:var(--ep-dark-900);--ep-bg-alt:var(--ep-dark-800);--ep-bg-accent:var(--ep-dark-800);
--ep-text:var(--ep-white);--ep-text-muted:rgb(255 255 255 / .70);--ep-text-green:var(--ep-moss);
--ep-border:rgb(255 255 255 / .20);--ep-border-strong:var(--ep-silver);--ep-focus:var(--ep-moss);
--grund:var(--ep-bg);--ink-soft:var(--ep-text-muted);--link-hover:var(--ep-grass);
--falsch-tint:var(--ep-dark-800);--falsch-zeichen:var(--ep-error-auf-dunkel);
--pop-flaeche:var(--ep-dark-800);--scroll-blende:rgb(255 255 255 / .10);
color-scheme:dark}

/* Ohne JavaScript: Systemeinstellung. Mit JavaScript setzt das Kopfskript
   data-theme, und diese Regel greift nicht mehr. */
@media (prefers-color-scheme:dark){
:root:not([data-theme]){
--ep-bg:var(--ep-dark-900);--ep-bg-alt:var(--ep-dark-800);--ep-bg-accent:var(--ep-dark-800);
--ep-text:var(--ep-white);--ep-text-muted:rgb(255 255 255 / .70);--ep-text-green:var(--ep-moss);
--ep-border:rgb(255 255 255 / .20);--ep-border-strong:var(--ep-silver);--ep-focus:var(--ep-moss);
--grund:var(--ep-bg);--ink-soft:var(--ep-text-muted);--link-hover:var(--ep-grass);
--falsch-tint:var(--ep-dark-800);--falsch-zeichen:var(--ep-error-auf-dunkel);
--pop-flaeche:var(--ep-dark-800);--scroll-blende:rgb(255 255 255 / .10);
color-scheme:dark}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--ink);
  font-family:var(--ep-font);font-weight:var(--fw-normal);
  font-size:var(--t-text);line-height:var(--lh-weit);-webkit-font-smoothing:antialiased}
/* Reduzierte Bewegung schaltet auch das gleitende Scrollen ab. Die Sperre auf
   animation und transition allein greift dafür nicht; das Gegenstück in
   JavaScript steht in views/progress.js. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
::selection{background:var(--ep-sun);color:var(--ep-dark-900)}
/* <b> und <strong> rechnen sonst „bolder“ auf 700 – v1.2 kennt 650. */
b,strong{font-weight:var(--fw-stark)}
/* Kein Kursiv im Design-System. Betonung im Fließtext trägt das Gewicht. */
em{font-style:normal;font-weight:var(--fw-stark)}
code,kbd{font-family:inherit;font-variant-numeric:tabular-nums;font-size:.92em}
/* Text-Link nach v1.2: Antumbra, unterstrichen, im Überfahren Umbra (im
   Dunkel Moss und Grass). */
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
  transition:color var(--ep-transition) ease}
a:hover{color:var(--link-hover)}
/* Fokusring nach v1.2: 2px, 2px Abstand, Antumbra (im Dunkel Moss). Auf der
   grünen Fläche und in der Fußzeile Weiß, auf dem Höhepunkt #1F1D1E – das
   setzen diese Abschnitte über --fokus. */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--fokus);outline-offset:2px}
/* Die Videokarte schneidet ab (overflow:hidden), dort liegt der Ring innen. */
.ytc-play:focus-visible{outline-offset:-3px}

/* Überschriften: Gewichte nach v1.2, ausgeglichener Umbruch, H1 und H2 mit
   −0,03em Laufweite. */
h1,h2,h3,h4{margin:0;text-wrap:balance}
h1{line-height:var(--lh-eng);letter-spacing:var(--ep-ls-tight)}
h2{line-height:var(--lh-h2);letter-spacing:var(--ep-ls-tight)}
h3,h4{line-height:var(--lh-mit);letter-spacing:0}
p{margin:0 0 var(--s4)}
p,li,dd{text-wrap:pretty}

/* Der Marker: <em> in einer Überschrift trägt eine Verlaufsleiste mit
   runden Kappen darunter statt farbiger Schrift – baugleich mit
   .ep-heading-accent in styles.css v1.2. Die zwei SVG-Kappen machen die
   Enden rund (Moss links, Sun rechts); ein border-radius griffe am Balken
   nicht. box-decoration-break: jede Zeile bekommt ihren eigenen Strich. */
:is(h1,h2,h3) em{
  --line-h:.14em;--line-y:1.05em;
  font-style:normal;font-weight:inherit;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20' preserveAspectRatio='none'%3E%3Cpath d='M10 0H10A10 10 0 0 0 10 20H10Z' fill='%2300e069'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H0A10 10 0 0 1 0 20H0Z' fill='%23d3ee3f'/%3E%3C/svg%3E"),
    var(--ep-gradient-marker);
  background-size:calc(var(--line-h) / 2) var(--line-h),calc(var(--line-h) / 2) var(--line-h),calc(100% - var(--line-h)) var(--line-h);
  background-position:left 0 top var(--line-y),right 0 top var(--line-y),center top var(--line-y);
  background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

.wrap{max-width:80rem;margin:0 auto;padding:0 var(--rand)}

/* Eyebrow: die Zeile über einer Sektionsüberschrift. Nach v1.2 groß
   getippt – der Text steht in Großbuchstaben im Markup oder im Skript, nicht
   per text-transform –, Medium, ohne Sperrung. Farbe siehe --eyebrow. */
.eyebrow,.step,.weg-etikett,.fuss-etikett,.ytc-etikett{display:block;font-size:var(--t-klein);line-height:var(--lh-eng);
  font-weight:var(--fw-mittel);letter-spacing:0;color:var(--eyebrow);margin:0 0 var(--s3)}

/* Kurze Etiketten und Abzeichen: enge Zeilenhöhe. Ohne diese Regel erben sie
   1,5 vom Körper und stehen luftiger als der Fließtext, den sie beschriften. */
.tile .tag,.lhead .meta,.q-num,.rail a .num,table.lessons .part,
.req .attach,.sources a,.ytc-bar b,.ytc-bar a,.budget-head b{line-height:var(--lh-mit)}

/* Zahlen fluchten: Minuten, Nummern, Zähler, Bewertungen */
.seg-n,.seg-min,.weg a .num,.stufe-zeit,.rail-count,.rail a .num,.module h2 .num,
table.lessons .lnum,table.lessons .ldur,.tile .tag,.calib-count,.teamtag,.vd,.btag,
.lhead h3 .lk,.lhead .meta,.q-num,.score b,.team-status,.budget-head b,.gl-az a{font-variant-numeric:tabular-nums}

/* ---------- Icons ----------
   .ico ist ein Icon im Fluss (Markup: <span class="ico ico-NAME"
   aria-hidden="true">). Größe 1,25em, Farbe aus der Schrift. Wo ein Icon nur
   ein Zeichen vor einer Beschriftung ist, setzt die Regel es als ::before –
   das Markup bleibt dann unverändert.
   Im Kontrastmodus von Windows würde die Hintergrundfarbe der Maske durch
   die Systemfarbe ersetzt und das Zeichen verschwinden; dort steht es in
   der Schriftfarbe des Systems. */
.ico{display:inline-block;flex:none;width:1.25em;height:1.25em;vertical-align:-.25em;background-color:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
@media (forced-colors:active){.ico{forced-color-adjust:none;background-color:CanvasText}}
.ico-ok{--i:var(--ico-ok)}.ico-nein{--i:var(--ico-nein)}.ico-bedingt{--i:var(--ico-bedingt)}
.ico-suchen{--i:var(--ico-suchen)}.ico-info{--i:var(--ico-info)}.ico-warnung{--i:var(--ico-warnung)}
.ico-play{--i:var(--ico-play)}.ico-wissen{--i:var(--ico-wissen)}.ico-glossar{--i:var(--ico-glossar)}
.ico-speichern{--i:var(--ico-speichern)}.ico-system{--i:var(--ico-system)}.ico-hell{--i:var(--ico-hell)}
.ico-dunkel{--i:var(--ico-dunkel)}.ico-export{--i:var(--ico-export)}.ico-import{--i:var(--ico-import)}
.ico-loeschen{--i:var(--ico-loeschen)}.ico-zuruecksetzen{--i:var(--ico-zuruecksetzen)}

/* ---------- Knöpfe ----------
   Knöpfe sind Pillen, ausnahmslos, und mindestens 44px hoch.

   Primär (.btn): Fläche im 78°-Verlauf Moss → Sun, dunkle Schrift, darum ein
   5px Ring aus demselben Verlauf zu 30 %. Im Überfahren und im Fokus blendet
   der zweite Verlauf (Moss → Grass) über die Deckkraft ein, 0,2 s – kein
   Farbwechsel, ein Überblenden. Der Ring ist der transparente Rand mit eigenem
   Hintergrund (border-box), die Blende ein Pseudo-Element hinter dem Text.

   Sekundär (eine Regel für alle): 1,5px Kante und Schrift in Antumbra,
   durchsichtig; im Überfahren füllt Eiscreme die Fläche. Im Dunkel Moss mit
   Fläche 2 im Überfahren. Die frühere Umkehrung auf Schwarz ist in v1.2
   „überholt“. */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--ziel);padding:var(--s3) var(--s5);border:5px solid transparent;border-radius:var(--pill);
  background:var(--ep-gradient) padding-box,var(--ep-gradient-halo) border-box;
  color:var(--auf-gruen);font:inherit;font-size:var(--t-ui);line-height:1.15;font-weight:var(--fw-mittel);cursor:pointer}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--ep-gradient-hover);opacity:0;transition:opacity var(--ep-transition) ease}
.btn:hover::after,.btn:focus-visible::after{opacity:1}

.btn-ghost,.aufklappen,.sources a,.check,.exreset,.suche-zu,.weg-knopf,.team-wechsel,.rail a.rail-weg{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--ziel);
  padding:var(--s2) var(--s5);border:1.5px solid var(--gruen-text);border-radius:var(--pill);
  background:transparent;color:var(--gruen-text);font:inherit;font-size:var(--t-ui);line-height:1.15;
  font-weight:var(--fw-mittel);text-decoration:none;cursor:pointer;
  transition:background-color var(--ep-transition) ease,color var(--ep-transition) ease}
.btn-ghost:hover,.aufklappen:hover,.sources a:hover,.check:hover,.exreset:hover,.suche-zu:hover,
.weg-knopf:hover,.team-wechsel:hover,.rail a.rail-weg:hover{background:var(--akzent-flaeche);color:var(--gruen-text)}
/* .btn-ghost steht als Zusatz an .btn: Ring und Blende fallen weg. */
.btn.btn-ghost{padding:var(--s2) var(--s5);border-width:1.5px}
.btn-ghost::after{display:none}
/* Zerstörende Aktion (Alles zurücksetzen, Einträge löschen): Kante, Schrift
   und Zeichen im Fehlerrot (5,62:1, im Dunkel #FFB4A9 mit 8,2:1), im
   Überfahren die Fehlertönung. Die Rückfrage davor bleibt. */
.btn-gefahr{border-color:var(--falsch-zeichen);color:var(--falsch-zeichen)}
.btn-ghost.btn-gefahr:hover{background:var(--falsch-tint);color:var(--falsch-zeichen)}
/* Zeichen vor der Beschriftung: Löschen, Sichern, Einlesen, Zurücksetzen */
.btn-gefahr::before,#stateExport::before,#stateImportBtn::before,.exreset::before{content:"";flex:none;width:18px;height:18px;background-color:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.btn-gefahr::before{--i:var(--ico-loeschen)}
#stateExport::before{--i:var(--ico-export)}
#stateImportBtn::before{--i:var(--ico-import)}
.exreset::before{--i:var(--ico-zuruecksetzen)}
.btnrow{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-top:var(--s2)}

/* ---------- Kopfleiste ---------- */
.topbar{background:var(--paper);border-bottom:1px solid var(--line);padding:var(--s2) 0}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.topbar-rechts{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
/* Wortmarke als SVG aus dem Skill: ep-logo.svg auf hellem Grund,
   ep-logo-outline.svg (weißer Ring) im Dunkel. Zwei Bilder, eines davon
   ausgeblendet – <picture> folgte nur der Systemeinstellung, nicht der Wahl
   im Umschalter. */
.logo{height:38px;width:auto;display:block}
/* Die Outline-Fassung trägt den weißen Ring zusätzlich; 44px hoch steht die
   Pille darin so groß wie die helle Fassung mit 38px. */
.logo-dunkel{display:none;height:44px}
:root[data-theme="dark"] .logo-hell{display:none}
:root[data-theme="dark"] .logo-dunkel{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .logo-hell{display:none}:root:not([data-theme]) .logo-dunkel{display:block}}
.topbar-note{font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel);color:var(--ink-soft)}

/* Darstellung umschalten. Drei Zustände statt zwei, weil „System" ein eigener
   Zustand ist: Wer nichts wählt, folgt dem Gerät – und soll dorthin auch
   zurückkommen können. Gewählt ist die Moss-Fläche mit dunkler Schrift, wie
   ein aktiver Reiter in v1.2. Zeichen aus der Icon-Registry
   (ui-darstellung-system/-hell/-dunkel), das Wort steht daneben. */
.theme{display:inline-flex;gap:2px;padding:2px;border:1.5px solid var(--feld-kante);border-radius:var(--pill);background:var(--paper)}
.theme-b{display:inline-flex;align-items:center;gap:6px;min-height:var(--ziel);border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel);color:var(--ink);
  padding:0 var(--s3);border-radius:var(--pill);transition:background-color var(--ep-transition) ease,color var(--ep-transition) ease}
.theme-b:hover{background:var(--akzent-flaeche)}
.theme-b[aria-pressed="true"]{background:var(--gruen-flaeche);color:var(--auf-gruen)}
.theme-b .ico{width:18px;height:18px}

/* ---------- Kopfbereich ----------
   Zwei Teile. Oben der Einstieg auf der grünen Fläche mit Raster (.ep-band):
   Text links, Peilung rechts, beide im Raster des Inhalts. Unter 900px läuft
   er einspaltig, und die Grafik weicht dem Text. Darunter auf Weiß (im Dunkel
   #1F1D1E) Dein Weg und der Fortschritt – deren Felder, Pillen und Segmente
   sind für den hellen Grund gebaut.

   Bewusste Abweichung von Entscheidung E1 im zweiten Design-Audit
   („Hero Weiß, Bild rechts“ nach der Seitenarchitektur des Skills): Der
   Einstieg trägt auf Wunsch die grüne Markenfläche. Die Flächenfolge bleibt
   leicht – Kopfleiste weiß, grüne Fläche, Dein Weg weiß.

   Die Fläche ist dieselbe wie zwischen Teil 1 und Teil 2 (siehe .module.band),
   nur anders ins Bild gesetzt: Das Raster wird zur rechten oberen Ecke heller,
   und Weiß fiele dort auf 4,2:1. Deshalb steht hier das untere Ende des
   Ausschnitts im Bild (bottom), schmal zusätzlich nur seine linke Hälfte
   (200 %). Gemessen auf der gezeichneten Seite hält Weiß hinter dem Text
   damit mindestens 4,98:1 (320 bis 2560 px, mit und ohne Stufe), am
   unskalierten Bild im selben Ausschnitt rund 4,6:1 – wenig Reserve, wie der
   Skill sagt. Darauf steht jeder Text voll Weiß, auch die Eyebrow. In beiden
   Darstellungen gleich. */
.hero{position:relative;overflow:hidden;padding:var(--s7) 0;
  background-color:var(--ep-antumbra);background-image:url(../img/ep-flaeche-dunkel.webp),var(--ep-gradient-deep);
  background-size:cover,auto;background-position:left bottom;background-repeat:no-repeat;
  color:var(--ep-white);--fokus:var(--ep-white);--eyebrow:var(--ep-white);--ehb-ring:var(--ep-white);--ehb-nord:var(--ep-sun)}
@media (max-width:900px){.hero{background-size:200% auto,auto}}
/* flow-root: Ohne fiele der obere Abstand von Dein Weg aus der weißen
   Fläche heraus, und ein Streifen Seitengrund stünde unter dem Grün. */
.hero-weg{display:flow-root;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
.hero-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(16rem,30vw,24rem));gap:var(--s6);align-items:center}
.ep-hero-anim-b{position:relative;pointer-events:none;line-height:0}
/* overflow:visible – die äußeren Ringe und der Schein dürfen über das Bild
   hinaus in den Kopfbereich laufen; dessen overflow:hidden schneidet ab. */
.ep-hero-anim-b svg{display:block;width:100%;height:auto;overflow:visible}
@media (max-width:900px){.hero-kopf{grid-template-columns:1fr}.ep-hero-anim-b{display:none}}

/* Drei Hinweise unter der Einleitung als Vertrauens-Pillen (TrustBadge):
   Eiscreme, Schrift Antumbra (6,3:1), davor das Zeichen check-circle. Auf
   der grünen Fläche in beiden Darstellungen gleich. */
.hero-chips{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;margin:var(--s5) 0 0;padding:0}
.hero-chips li{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4) var(--s2) var(--s3);border-radius:var(--pill);
  background:var(--ep-eiscreme);font-size:var(--t-ui);line-height:var(--lh-mit);font-weight:var(--fw-mittel);color:var(--ep-antumbra)}
.hero-chips li::before{content:"";flex:none;width:18px;height:18px;background-color:currentColor;
  -webkit-mask:var(--ico-ok) center/contain no-repeat;mask:var(--ico-ok) center/contain no-repeat}

/* ---------- Peilung: die Animation im Kopfbereich ----------
   Die Kompassscheibe zieht auf, die Skala dreht sich in ihre Lage, die Nadel
   holt aus und schwenkt in abgebremsten Etappen auf ihre Peilung. Steht sie,
   schießt die Peillinie zum Claude-Symbol, und dessen Strahlen gehen nacheinander
   auf. Knapp drei Sekunden, danach still.

   Bewusste Abweichung von v1.2: Das Design-System erlaubt Bewegung über
   transform nur im Logo-Laufband. Die Animation ist auf ausdrücklichen
   Wunsch eingebaut und bleibt die eine Ausnahme der Seite (Entscheidung E2
   im zweiten Design-Audit).

   Bewusst ohne Endlosschleife: Bewegung, die länger als fünf Sekunden neben
   dem Inhalt läuft, braucht nach WCAG 2.2.2 einen Knopf zum Anhalten. Wer
   reduzierte Bewegung eingestellt hat, sieht das Endbild: Die Regel ganz oben
   schaltet jede Animation ab, und die Grundwerte hier sind die Endlage.

   Die Scheibe ist Antumbra wie der Grund des Signets, in beiden
   Darstellungen; Skala, Achse und Südhälfte der Nadel stehen weiß darauf.
   Ringe und Skala außen stehen weiß auf der grünen Fläche, die Nordmarke in
   Sun (--ehb-ring, --ehb-nord am Kopfbereich). */
@keyframes ehbSchein{0%{opacity:0}100%{opacity:1}}
/* Anlauf statt Kaltstart: einen Hauch über die Endgröße und zurück. */
@keyframes ehbAuf{
  0%{opacity:0;transform:scale(.6)}
  55%{opacity:1;transform:scale(1.04)}
  100%{opacity:1;transform:scale(1)}}
@keyframes ehbSkala{0%{transform:rotate(-60deg)}100%{transform:rotate(0deg)}}
@keyframes ehbRing{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}
/* Die Nadel holt weit aus: grob -104 Grad, ein harter Schwenk auf -18, dann
   über das Ziel hinaus auf +19, zurück auf -5 und still auf 0. Zwei Schwünge
   über die Endlage, nicht drei – mehr liest sich als Wackeln. Jede Etappe hat
   ihre eigene Beschleunigung, sonst wirkt der Weg gleichmäßig statt geschwenkt. */
@keyframes ehbPeilung{
  0%,6%{transform:rotate(-104deg);animation-timing-function:cubic-bezier(.16,.92,.2,1)}
  26%,31%{transform:rotate(-18deg);animation-timing-function:cubic-bezier(.2,.86,.25,1)}
  49%{transform:rotate(19deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}
  65%{transform:rotate(-5deg);animation-timing-function:cubic-bezier(.4,0,.3,1)}
  77%,100%{transform:rotate(0deg)}}
/* Die Peillinie schießt heraus, sie blendet nicht ein. */
@keyframes ehbPeilstrahl{
  0%{opacity:0;transform:scaleX(0)}
  60%{opacity:1;transform:scaleX(1)}
  100%{opacity:.85;transform:scaleX(1)}}
@keyframes ehbStrahl{
  0%{opacity:0;transform:scale(.1)}
  70%{opacity:1;transform:scale(1.12)}
  100%{opacity:1;transform:scale(1)}}
/* Das Symbol setzt sich aus einer Drehung heraus, einmal über die Endgröße. */
@keyframes ehbStern{
  0%{transform:rotate(-30deg) scale(.7)}
  60%{transform:rotate(4deg) scale(1.06)}
  100%{transform:rotate(0deg) scale(1)}}

.ehb-schein{animation:ehbSchein .8s ease-out both}
.ehb-kompass,.ehb-skala,.ehb-ring,.ehb-nadel{transform-box:view-box;transform-origin:200px 215px}
.ehb-kompass{animation:ehbAuf .7s cubic-bezier(.2,.9,.25,1) .05s both}
.ehb-skala{animation:ehbSkala 1.4s cubic-bezier(.15,.85,.25,1) .05s both}
/* Die Ringe kommen nicht gemeinsam, sondern von innen nach außen versetzt –
   der Kunstgriff, der aus drei Kreisen eine Welle macht. */
.ehb-ring{stroke:var(--ehb-ring);animation:ehbRing .9s cubic-bezier(.15,.85,.25,1) both;animation-delay:calc(.15s + var(--i) * 90ms)}
.ehb-nadel{animation:ehbPeilung 2s linear .25s both}
.ehb-peilstrahl{opacity:.85;transform-box:fill-box;transform-origin:0 50%;
  animation:ehbPeilstrahl .45s cubic-bezier(.2,.8,.2,1) 1.75s both}
.ehb-stern{transform-box:view-box;transform-origin:358px 74px;animation:ehbStern .8s cubic-bezier(.2,.8,.25,1) 1.95s both}
.ehb-strahl{transform-box:fill-box;transform-origin:50% 100%;
  animation:ehbStrahl .32s cubic-bezier(.2,.85,.2,1) both;animation-delay:calc(1.95s + var(--i) * 25ms)}
/* Der Zähler --i als Klasse statt style-Attribut: So kommt die
   Content-Security-Policy ohne 'unsafe-inline' für style-src aus. */
.ehb-i0{--i:0}.ehb-i1{--i:1}.ehb-i2{--i:2}.ehb-i3{--i:3}.ehb-i4{--i:4}.ehb-i5{--i:5}
.ehb-i6{--i:6}.ehb-i7{--i:7}.ehb-i8{--i:8}.ehb-i9{--i:9}.ehb-i10{--i:10}.ehb-i11{--i:11}
.ehb-scheibe,.ehb-achse{fill:var(--ep-antumbra)}
/* Die Skala liegt außerhalb der Scheibe: Striche in der Farbe der Ringe,
   die Nordmarke in Sun. */
.ehb-skala path[stroke]{stroke:var(--ehb-ring)}
.ehb-skala path[fill]{fill:var(--ehb-nord)}

.hero h1{font-size:var(--t-h1);font-weight:var(--fw-h1)}
.hero h1>span{display:block}
/* Zweite Titelzeile: leichter und kleiner als die erste, aber wie alles auf
   der grünen Fläche voll Weiß. Das Akzentwort trägt der Marker unter
   „Lern-Hub“, nicht eine grüne Schrift. */
.hero h1 .l2{font-size:.72em;font-weight:var(--fw-normal);line-height:var(--lh-mit);letter-spacing:0;margin-top:var(--s3)}
/* Mit gewählter Stufe steht „Dein Weg“ im Mittelpunkt: Einleitung und
   Hinweise kennt man dann, die Grafik wird kleiner. Ohne :has() bleibt der
   Kopfbereich vollständig – nichts fehlt, er ist nur höher. */
header:has(.weg-kopf) .hero-lead,header:has(.weg-kopf) .hero-chips{display:none}
header:has(.weg-kopf) .hero-kopf{grid-template-columns:minmax(0,1fr) minmax(0,clamp(10rem,18vw,15rem))}
.hero-lead{max-width:var(--satz);font-size:var(--t-lead);line-height:1.4;margin-top:var(--s5)}

/* Fortschritt je Teil */
.budget{margin:var(--s6) 0 0;padding-bottom:var(--s6)}
.budget-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);flex-wrap:wrap;
  font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel);color:var(--ink-soft);margin-bottom:var(--s2)}
.budget-head.zweiter{margin-top:var(--s5)}
.budget-head b{color:var(--ink);font-size:var(--t-klein);font-weight:var(--fw-stark)}
.bar{display:flex;gap:var(--s1);height:var(--ziel);width:100%}
/* Segmente: offen als Fläche 2 mit Feldrand, abgeschlossen im 90°-Verlauf
   (v1.2: einzelne Balken dürfen ihn tragen) mit dunkler Schrift. */
.seg{position:relative;border-radius:var(--r-s);background:var(--flaeche-leise);border:1.5px solid var(--feld-kante);display:flex;align-items:flex-end;
  padding:var(--s1) var(--s2);cursor:pointer;color:var(--ink);font:inherit;text-align:left;min-width:0;
  transition:background-color var(--ep-transition) ease,border-color var(--ep-transition) ease}
.seg:hover{background-color:var(--akzent-flaeche);border-color:var(--ep-border-accent)}
.seg.done{background:var(--ep-gradient-marker);border-color:transparent;color:var(--auf-gruen)}
.seg-n{font-size:var(--t-mikro);line-height:var(--lh-mit);font-weight:var(--fw-mittel);display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg-min{position:absolute;top:var(--s1);left:var(--s2);right:var(--s2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:var(--t-mikro);line-height:var(--lh-mit);color:var(--ink-soft)}
.seg.done .seg-min{color:var(--auf-gruen)}
/* Segmente im Pfad (views/weg.js): Pflicht mit kräftigem Antumbra-Rand,
   empfohlen gestrichelt, weiterführend gepunktet und ohne Fläche; die
   Legende darunter (#barLegende) sagt es in Worten. Vorher trug Pflicht den
   gewöhnlichen Feldrand – im Test war nicht zu erkennen, welche Segmente
   Pflicht sind. Das Wort steht zusätzlich in der Beschriftung des Knopfs. */
.seg.pfad-p{border:2px solid var(--gruen-text)}
.seg.pfad-e{border-style:dashed;border-color:var(--ink-soft)}
.seg.pfad-w{background:transparent;border-style:dotted;border-color:var(--ink-soft)}
.seg.done.pfad-p,.seg.done.pfad-e,.seg.done.pfad-w{background:var(--ep-gradient-marker);border-color:transparent;border-style:solid}

/* ---------- Dein Weg: Stufenwahl und persönliche Startseite ----------
   Gezeichnet von views/weg.js. Fläche 2 im weißen Teil des Kopfbereichs,
   24px. */
.weg{max-width:var(--kasten);margin:var(--s6) 0 0;padding:var(--s5);
  border:1px solid var(--line);border-radius:var(--r-l);background:var(--flaeche-leise)}
.weg:empty{display:none}
.weg-titel{font-size:var(--t-h3);line-height:var(--lh-mit);letter-spacing:0;font-weight:var(--fw-stark);color:var(--ink);margin:0 0 var(--s2)}
.weg-titel:focus{outline:none}
.weg-etikett{margin-bottom:var(--s1)}
.weg p{font-size:var(--t-ui);line-height:var(--lh-weit);color:var(--ink);margin:0 0 var(--s3)}
.weg p:last-child{margin-bottom:0}
.weg a{font-weight:var(--fw-mittel)}
.weg a .num{font-size:var(--t-klein);margin-right:var(--s1)}
.weg-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.weg-kopf .weg-titel{margin:0}
.weg p.weg-naechst{font-size:var(--t-text)}
.weg p.weg-fuss{font-size:var(--t-klein);color:var(--ink-soft)}
/* Stufen: wählbare Karten (16px, eine Ebene unter dem 24px-Kasten), weiß mit
   Feldrand; im Überfahren Moss-Rand und Eiscreme. Gewählt ist die Moss-Fläche
   mit dunkler Schrift – das Wort „Gewählt" steht zusätzlich im Knopf. */
.stufen{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin:var(--s4) 0}
.stufe,.team-knopf{display:flex;flex-direction:column;gap:var(--s1);text-align:left;padding:var(--s3) var(--s4);
  border-radius:var(--r-m);border:1.5px solid var(--feld-kante);background:var(--flaeche);
  color:var(--ink);font:inherit;cursor:pointer;
  transition:background-color var(--ep-transition) ease,border-color var(--ep-transition) ease}
.stufe:hover,.team-knopf:hover{background-color:var(--akzent-flaeche);border-color:var(--ep-border-accent)}
.stufe[aria-pressed="true"],.team-knopf[aria-pressed="true"]{background:var(--ep-gradient);border-color:transparent;color:var(--auf-gruen)}
.stufe-name{font-size:var(--t-text);line-height:var(--lh-mit);font-weight:var(--fw-stark)}
.stufe-kann{font-size:var(--t-klein);line-height:var(--lh-weit)}
.stufe-zeit{margin-top:auto;padding-top:var(--s1);font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel);color:var(--gruen-text)}
.stufe[aria-pressed="true"] .stufe-zeit{color:var(--auf-gruen)}
/* Unter der Pflichtzeit: welche Module, dann die empfohlenen in Meta-Grau */
.stufe-module{font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel);color:var(--gruen-text);font-variant-numeric:tabular-nums}
.stufe-empf{margin-top:var(--s1);font-size:var(--t-klein);line-height:var(--lh-mit);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.stufe[aria-pressed="true"] .stufe-module,.stufe[aria-pressed="true"] .stufe-empf{color:var(--auf-gruen)}

/* Pflicht für dich, empfohlen, weiterführend (views/weg.js, pfadListe): je
   Gruppe ein Etikett mit Zahl und Minuten, darunter die Module als Sprung.
   Dieselben Farben wie die Marke im Modulkopf und an der Nummer in der
   Leiste – Pflicht Moss mit dunkler Schrift, empfohlen Eiscreme mit
   Antumbra-Rand, weiterführend weiß mit Feldrand. Der Rand trägt die
   Unterscheidung auch im Dunkel, wo Eiscreme und Fläche 2 zusammenfallen.
   34 px hoch wie die Leiste: dichte Navigation. */
.weg-pfad{margin:var(--s4) 0;padding-top:var(--s4);border-top:1px solid var(--line)}
.weg-gruppe+.weg-gruppe{margin-top:var(--s3)}
.weg-pfad dt{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s2);margin-bottom:var(--s2)}
.weg-pfad dt .weg-etikett{display:inline;margin:0}
.weg-gruppe-info{font-size:var(--t-klein);line-height:var(--lh-mit);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.weg-pfad dd{margin:0}
.weg-module{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;margin:0;padding:0}
.weg .weg-module a{display:inline-flex;align-items:center;gap:var(--s1);min-height:34px;padding:var(--s1) var(--s3);
  border:1px solid transparent;border-radius:var(--pill);font-size:var(--t-ui);line-height:var(--lh-mit);text-decoration:none;
  transition:background-color var(--ep-transition) ease,border-color var(--ep-transition) ease}
.weg .weg-module a .num{margin-right:0}
.weg-module .ico{width:16px;height:16px}
.weg-module a[data-pfad="p"]{background:var(--gruen-flaeche);color:var(--auf-gruen)}
.weg-module a[data-pfad="p"]:hover{background:var(--ep-gradient-hover);color:var(--auf-gruen)}
.weg-module a[data-pfad="e"]{background:var(--akzent-flaeche);color:var(--gruen-text);border-color:var(--gruen-text)}
.weg-module a[data-pfad="w"]{background:var(--flaeche);color:var(--ink-soft);border-color:var(--feld-kante)}
.weg-module a[data-pfad="e"]:hover,.weg-module a[data-pfad="w"]:hover{border-color:var(--ep-border-accent);color:var(--ink)}

/* Legenden zu Balken und Leiste (views/weg.js, renderLegenden): Zeichen und
   Wort je Status. Das Zeichen zeigt dieselbe Form wie das, was es erklärt. */
.legende{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin:var(--s3) 0 0;
  font-size:var(--t-klein);line-height:var(--lh-mit);color:var(--ink-soft)}
.legende[hidden]{display:none}
.legende-eintrag{display:inline-flex;align-items:center;gap:var(--s2)}
.legende-zeichen{flex:none}
.legende-zeichen.bl{width:28px;height:16px;border-radius:var(--r-s);background:var(--flaeche-leise);border:1.5px solid var(--feld-kante)}
.legende-eintrag[data-pfad="p"] .bl{border:2px solid var(--gruen-text)}
.legende-eintrag[data-pfad="e"] .bl{border-style:dashed;border-color:var(--ink-soft)}
.legende-eintrag[data-pfad="w"] .bl{background:transparent;border-style:dotted;border-color:var(--ink-soft)}
.legende-zeichen.rl{width:24px;height:16px;border-radius:var(--pill);border:1px solid transparent}
.legende-eintrag[data-pfad="p"] .rl{background:var(--gruen-flaeche)}
.legende-eintrag[data-pfad="e"] .rl{background:var(--akzent-flaeche);border-color:var(--gruen-text)}
.legende-eintrag[data-pfad="w"] .rl{border-color:var(--feld-kante)}
/* In der Leiste untereinander: nebeneinander passen die drei Wörter nicht in
   230 px, und ein Umbruch mitten in der Legende liest sich wie ein Eintrag. */
.rail-legende{flex-direction:column;align-items:flex-start;gap:var(--s1);margin:calc(var(--s2) * -1) 0 var(--s4);padding:0 var(--s3)}

/* Einträge aus der früheren Fassung (views/altlast.js): eine Meldung mit
   Infozeichen, wie alle Hinweise. */
.altlast{position:relative;z-index:1;max-width:var(--kasten);margin:var(--s4) 0 0;padding:var(--s4) var(--s4) var(--s4) calc(var(--s4) + 24px + var(--s3));
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--flaeche-leise)}
.altlast::before{content:"";position:absolute;left:var(--s4);top:var(--s4);width:24px;height:24px;background-color:var(--gruen-text);
  -webkit-mask:var(--ico-info) center/contain no-repeat;mask:var(--ico-info) center/contain no-repeat}
.altlast p{font-size:var(--t-ui);line-height:var(--lh-weit);margin:0 0 var(--s3)}
.altlast-knoepfe{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}

/* ---------- Leiste und Gerüst ----------
   Leiste und Module stehen auf Fläche 2 (#F8F8F8), die Module darauf als
   weiße Karten: Tiefe aus dem Flächenwechsel, nicht aus einem Schatten. */
/* Nur oben und unten: Der seitliche Rand kommt aus .wrap. */
.shell{display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--s7);align-items:start;padding-top:var(--s7);padding-bottom:88px}
.rail{position:sticky;top:var(--s5)}
.rail-title{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);
  font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel);color:var(--ink-soft);margin-bottom:var(--s2)}
.rail-count{font-size:var(--t-klein);color:var(--gruen-text);white-space:nowrap}
/* Einträge nach der Seitenleiste in web-app.md: Text in Schriftfarbe, im
   Überfahren Eiscreme, der aktuelle Abschnitt als Moss-Pille mit dunkler
   Schrift. 34px hoch statt 44: dichte Navigation, sonst passt die Leiste am
   Desktop nicht mehr in die Fensterhöhe. WCAG AA (24px) ist erfüllt. */
.rail a{display:flex;gap:var(--s3);align-items:baseline;padding:var(--s2) var(--s3);border-radius:var(--pill);border:none;color:var(--ink);
  text-decoration:none;font-size:var(--t-ui);line-height:var(--lh-mit);font-weight:var(--fw-mittel);margin-bottom:var(--s1);
  transition:background-color var(--ep-transition) ease,color var(--ep-transition) ease}
.rail a:hover{background:var(--akzent-flaeche);color:var(--ink)}
.rail a .num{font-size:var(--t-klein);color:var(--gruen-text)}
.rail a .state{margin-left:auto;align-self:center;display:inline-flex;color:var(--gruen-text)}
.rail a .state .ico{width:18px;height:18px}
/* Zeichen der drei Abschluss-Einträge: Doktorhut für den Wissenscheck,
   Notizbuch für das Glossar, Speichern für den Stand. Gleiche Breite wie
   die Modulnummern daneben, damit die Beschriftungen in einer Spalte bleiben. */
.rail-ico{width:20px;height:20px;flex:none;align-self:center;color:var(--gruen-text)}
.rail a.done{color:var(--ink)}
/* Wo man gerade ist – gesetzt von views/progress.js beim Scrollen */
.rail a.here{background:var(--gruen-flaeche);color:var(--auf-gruen);font-weight:var(--fw-stark)}
.rail a.here .num,.rail a.here .state,.rail a.here .rail-ico{color:var(--auf-gruen)}
.rail hr{border:0;border-top:1px solid var(--line);margin:var(--s4) 0}
/* Oben in der Leiste: die gewählte Stufe, Sprung zu „Dein Weg“ – ein
   Sekundärknopf über die volle Breite. */
.rail a.rail-weg{display:flex;width:100%;margin-bottom:var(--s4);font-weight:var(--fw-mittel)}
/* Status im Pfad: Die Nummer trägt eine Marke in den Farben der Pille im
   Modulkopf – Pflicht Moss gefüllt, empfohlen Eiscreme mit Antumbra-Rand,
   weiterführend nur Feldrand. Die Legende darüber (#railLegende) sagt es in
   Worten. Empfohlen und weiterführend treten zusätzlich in 450 und Meta-Grau
   zurück. Das Wort steht für Sprachausgaben unsichtbar daneben (.vh).
   Vorher war der Unterschied nur das Grau – im Test nicht als Pflicht
   erkennbar. Die Nummer ist immer 28 px breit, die Zeichen der
   Abschluss-Einträge auch, damit die Beschriftungen fluchten. */
.rail a .num{display:inline-flex;justify-content:center;flex:none;min-width:28px;padding:1px 0;border:1px solid transparent;border-radius:var(--pill)}
.rail-ico{margin:0 4px}
.rail a[data-pfad="p"] .num{background:var(--gruen-flaeche);color:var(--auf-gruen)}
.rail a[data-pfad="e"] .num{background:var(--akzent-flaeche);border-color:var(--gruen-text)}
.rail a[data-pfad="w"] .num{border-color:var(--feld-kante);color:var(--ink-soft)}
.rail a.here[data-pfad] .num{background:var(--flaeche);color:var(--ink);border-color:transparent}
.rail a.pfad-e,.rail a.pfad-w{font-weight:var(--fw-normal);color:var(--ink-soft)}
.rail a.pfad-e:hover,.rail a.pfad-w:hover{color:var(--ink)}

/* ---------- Module ----------
   Karte nach .ep-card: Weiß, 1px #EBEBEB, 24px, kein Schatten. */
.module{background:var(--flaeche);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s6);margin-bottom:var(--s5);scroll-margin-top:var(--s5)}
/* Weiterführend und eingeklappt: ohne eigene Fläche, nur mit Feldrand – so
   sind Pflicht und weiterführend schon im Vorbeiscrollen zu unterscheiden. */
.module.zu{background:transparent;border-color:var(--feld-kante)}

/* Die grüne Fläche (.ep-band) zwischen Teil 1 und Teil 2: Verlauf Antumbra →
   Penumbra bei 78°, darauf das Raster aus der Logo-Spitze (ep-flaeche-dunkel
   aus dem Skill). Der Skill zeigt mit background-size 350% nur den dunklen
   Anfang des Bildes, rund 29 % der Breite. Hier liegt genau dieser Teil
   zugeschnitten (die linken 30 %, 576 × 1080) als WebP vor, 25 KB statt
   1 MB; 105% sind dieselben 350% auf den Zuschnitt gerechnet, das Bild ist
   dasselbe. Gemessen hält Weiß am hellsten Punkt 4,56:1 (das PNG 4,62:1) –
   ohne Reserve, wie der Skill sagt. Darauf steht deshalb jeder Text voll
   Weiß, auch die Eyebrow; 70 % Weiß fiele auf 4,12:1. In beiden
   Darstellungen gleich. */
.module.band{background-color:var(--ep-antumbra);background-image:url(../img/ep-flaeche-dunkel.webp),var(--ep-gradient-deep);
  background-size:105% auto,auto;background-position:left center;background-repeat:no-repeat;
  border-color:transparent;color:var(--ep-white);--fokus:var(--ep-white);--eyebrow:var(--ep-white)}
.module.band h2,.module.band p{color:var(--ep-white)}
.module.band .satz{max-width:var(--satz)}

/* Modulkopf nach dem Sektionsmuster: Eyebrow „MODUL 02“, dahinter als
   Meta-Zeile Dauer und Kapitel, am Ende der Status im Pfad als Pille. Das
   Markup bleibt (das Prüfskript gleicht es mit curriculum.js ab); die
   Modulnummer zählt CSS mit und steht als getippte Großschrift im
   Stylesheet, nicht per text-transform. Die Ziffer in der Überschrift bleibt
   für Sprachausgaben und die Suche stehen. */
main{counter-reset:modul -1}
section.module[id^="m"]{counter-increment:modul}
.mod-top{display:flex;gap:0;align-items:center;flex-wrap:wrap;margin-bottom:var(--s2);
  font-size:var(--t-klein);line-height:var(--lh-weit);font-weight:var(--fw-mittel);color:var(--ink-soft)}
.mod-top::before{content:"MODUL " counter(modul, decimal-leading-zero);content:"MODUL " counter(modul, decimal-leading-zero) / "";color:var(--eyebrow)}
.mod-top .pill-time,.mod-top .pill-src{background:none;padding:0;border-radius:0;font-size:inherit;color:inherit;min-height:0}
.mod-top .pill-time::before,.mod-top .pill-src::before{content:"·";content:"·" / "";margin:0 .5em}
/* Pillen nach der Status-Pille in web-app.md: rund, Satzschreibung. */
.pill{display:inline-flex;align-items:center;padding:2px var(--s3);border-radius:var(--pill);font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel)}
/* Status des Moduls im eigenen Pfad, gesetzt von views/weg.js: Pflicht als
   Moss-Fläche, empfohlen als Eiscreme, weiterführend als Fläche 2. */
.mod-top .pill-pfad{margin-left:var(--s3)}
.pill-pfad[data-pfad="p"]{background:var(--gruen-flaeche);color:var(--auf-gruen)}
.pill-pfad[data-pfad="e"]{background:var(--akzent-flaeche);color:var(--gruen-text);border:1px solid var(--gruen-text)}
.pill-pfad[data-pfad="w"]{background:var(--flaeche-leise);color:var(--ink-soft);border:1px solid var(--line)}
/* Weiterführende Module sind eingeklappt: Kopf, Titel und Ziel bleiben
   stehen, der Rest wartet hinter dem Knopf. Nur am Bildschirm – gedruckt wird
   alles. */
@media screen{.module.zu>:not(.mod-top):not(h2):not(.goal):not(.aufklappen){display:none}}
/* Zeichen ui-zugeklappt / ui-aufgeklappt – es wechselt, statt sich zu drehen
   (v1.2: kein transform). */
.aufklappen::before,.kapitel-knopf::after{content:"";flex:none;width:22px;height:22px;background-color:currentColor;
  -webkit-mask:var(--ico-zu) center/contain no-repeat;mask:var(--ico-zu) center/contain no-repeat}
.aufklappen[aria-expanded="true"]::before,.kapitel-knopf[aria-expanded="true"]::after{-webkit-mask-image:var(--ico-auf);mask-image:var(--ico-auf)}
.aufklappen{padding-left:var(--s3)}
.module h2{font-size:var(--t-h2);font-weight:var(--fw-stark);line-height:var(--lh-h2)}
.module h2 .num{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.module h3{font-size:var(--t-h3);font-weight:var(--fw-titel);margin:var(--s6) 0 var(--s3)}
.module h4{font-size:var(--t-h4);font-weight:var(--fw-mittel);margin:var(--s5) 0 var(--s2)}
/* Modulziel als Einleitungsabsatz (.ep-lead) – ohne die frühere senkrechte
   Verlaufsachse, die v1.2 nicht mehr kennt. */
.goal{font-size:var(--t-lead);line-height:1.4;color:var(--ink);margin:var(--s3) 0 var(--s5)}
.module ul,.module ol{margin:0 0 var(--s4);padding-left:var(--s5)}
.module li{margin-bottom:var(--s2)}

/* Satzbreite: Text schmal, Kästen und Daten dürfen darüber hinaus.
   Ohne das läuft der Fließtext auf großen Bildschirmen über 100 Zeichen –
   das Auge findet beim Rücksprung die Zeile nicht mehr. */
.module>p,.module>ul,.module>ol,.module>h3,.module>h4,
.lesson>p,.lesson>ul,.lesson>ol,.lesson>h4,
.kapitel-inhalt>p,.kapitel-inhalt>ul,.kapitel-inhalt>ol,.kapitel-inhalt>h4,
.goal,.tool>p{max-width:var(--satz)}
/* Auch in Kästen: die Regel muss am Textelement hängen, nicht am Kasten –
   em rechnet gegen die Schriftgröße des Elements, auf dem es steht. */
.goals ul,.warn p,.task li,.req p,.verdict p,.rephrase p,.tile p,
.shot figcaption{max-width:var(--satz)}

/* ---------- Bausteine ----------
   Kästen innerhalb einer Karte: Fläche 2, 16px, dazu eine 1px-Linie – sie
   trägt im Dunkel die Tiefe, wo Fläche und Grund nur 1,2:1 auseinander
   liegen. */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:var(--s4) 0}
.tile{border-radius:var(--r-m);padding:var(--s4);background:var(--flaeche-leise);border:1px solid var(--line)}
.tile.eigen{margin:var(--s4) 0}
/* Kastentitel sind keine Dokumentüberschriften – sie bleiben auf Textgröße */
.tile h4{font-size:var(--t-text);font-weight:var(--fw-stark);margin:0 0 var(--s1)}
.tile p{font-size:var(--t-ui);line-height:var(--lh-weit);color:var(--ink);margin:0}
.tile p+p{margin-top:var(--s2)}
.tile .tag{font-size:var(--t-klein);font-weight:var(--fw-mittel);color:var(--gruen-text);display:block;margin-bottom:var(--s1)}
.teams{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin:var(--s4) 0}
.teams .tile{display:flex;flex-direction:column;justify-content:center;gap:var(--s1)}
/* Trennung nur an den weichen Trennstrichen im Namen (v1.2: hyphens manual) */
.teams .tile h4{font-size:var(--t-text);margin:0;hyphens:manual}

/* Tabellen nach web-app.md: Kopfzeile auf Fläche 2, Medium, Satzschreibung;
   Zeilen durch 1px getrennt, kein Zebra; Dauer rechtsbündig. */
table{width:100%;border-collapse:collapse;margin:var(--s4) 0;font-size:var(--t-ui)}
th,td{text-align:left;padding:var(--s3);border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--flaeche-leise);font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel);color:var(--ink)}
table.lessons .lnum{color:var(--gruen-text);font-weight:var(--fw-mittel);width:60px}
table.lessons .ldur,table.lessons th:last-child{text-align:right;white-space:nowrap}
table.lessons .ldur{color:var(--ink-soft)}
table.lessons .part{font-size:var(--t-klein);font-weight:var(--fw-stark);color:var(--ink);background:var(--flaeche-leise);padding-top:var(--s3)}
/* Englischer Zweitname am Kapitelkopf: leiser als die Überschrift, damit die
   deutsche Bezeichnung führt – gebraucht wird er nur, wenn im Video der
   englische Begriff fällt. */
.lhead h3 .lk-en{font-size:var(--t-klein);
  font-weight:var(--fw-normal);letter-spacing:0;color:var(--ink-soft);white-space:nowrap}

/* Datenregeln und Zugriffswege: Kürzel schmal und ohne Umbruch, die Regel in
   der letzten Spalte hervorgehoben. Bewusst ohne Ampelfarben – Grün und Rot
   sind in diesem Hub die Bewertung einer Antwort, und „erlaubt" ist keine
   Bewertung. Die Regel steht deshalb als Wort da, was auch im Ausdruck und
   bei Rot-Grün-Blindheit trägt. */
table.daten td:first-child{white-space:nowrap}
table.daten td:last-child{font-weight:var(--fw-stark);color:var(--ink)}
/* Zeichen vor der Regel: check-circle, empfehlung-bedingt, lock – in
   Textfarbe, ohne Ampel. Sie wiederholen nur das Wort daneben, deshalb als
   Maske ohne Inhalt für Sprachausgaben. */
table.daten td[data-regel]{position:relative;padding-left:calc(var(--s3) + 26px)}
table.daten td[data-regel]::before{content:"";position:absolute;left:var(--s3);top:calc(var(--s3) - 1px);width:20px;height:20px;background-color:currentColor;
  -webkit-mask:var(--regel-zeichen) center/contain no-repeat;mask:var(--regel-zeichen) center/contain no-repeat}
td[data-regel="erlaubt"]{--regel-zeichen:var(--ico-ok)}
td[data-regel="bedingt"]{--regel-zeichen:var(--ico-bedingt)}
td[data-regel="gesperrt"]{--regel-zeichen:var(--ico-lock)}

/* Hinweiskasten als Meldung nach web-app.md: Fläche 2, 16px, 1px Rand, links
   das Zeichen hinweis-warnung in Sunset, 24px. Kein Farbbalken. Titel und
   Text in Schriftfarbe – Sunset trägt als Zeichen (3,48:1 auf Fläche 2), als
   Schrift nicht. Das Zeichen ersetzt die Überschrift nicht: Im Ausdruck und
   ohne Hintergrundbilder bleibt der Wortlaut die Aussage. */
.warn{position:relative;background:var(--flaeche-leise);border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s4) var(--s4) var(--s4) calc(var(--s4) + 24px + var(--s3));margin:var(--s4) 0}
.warn::before,.privnote::before,.glossar-hinweis::before,.toast::before{content:"";position:absolute;left:var(--s4);top:var(--s4);width:24px;height:24px;
  background-color:var(--warn-zeichen);-webkit-mask:var(--ico-warnung) center/contain no-repeat;mask:var(--ico-warnung) center/contain no-repeat}
.warn h4{color:var(--ink);font-size:var(--t-text);font-weight:var(--fw-stark);margin:0 0 var(--s1)}
.warn p{font-size:var(--t-ui);line-height:var(--lh-weit);margin:0;color:var(--ink)}
.warn p+p{margin-top:var(--s2)}
.local-only{display:none}
/* Aufgabe zum Selbermachen: Eiscreme mit dem Zeichen checklist, ohne Balken. */
.task{position:relative;background:var(--akzent-flaeche);border-radius:var(--r-m);
  padding:var(--s4) var(--s4) var(--s4) calc(var(--s4) + 24px + var(--s3));margin:var(--s5) 0}
.task::before{content:"";position:absolute;left:var(--s4);top:var(--s4);width:24px;height:24px;background-color:var(--gruen-text);
  -webkit-mask:var(--ico-aufgabe) center/contain no-repeat;mask:var(--ico-aufgabe) center/contain no-repeat}
.task h4{font-size:var(--t-ui);line-height:var(--lh-mit);color:var(--gruen-text);margin:2px 0 var(--s2);font-weight:var(--fw-stark)}
.task li{font-size:var(--t-text)}
/* Quellen: Sekundärknöpfe als Pille (Regel oben bei den Knöpfen) */
.sources{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 0}
.done-row{display:flex;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
/* „Modul abschließen": Sekundärknopf; abgeschlossen ist die Moss-Fläche mit
   dunkler Schrift. Davor ein runder Ring, abgeschlossen das Zeichen
   check-circle – Form und Wort tragen den Zustand, nicht die Farbe allein. */
.check[aria-pressed="true"]{background:var(--ep-gradient);border-color:transparent;color:var(--auf-gruen)}
.check[aria-pressed="true"]:hover{background:var(--ep-gradient-hover);color:var(--auf-gruen)}
.check .box{flex:none;width:18px;height:18px;border-radius:var(--pill);border:1.5px solid currentColor}
.check[aria-pressed="true"] .box{border:0;background-color:currentColor;
  -webkit-mask:var(--ico-ok) center/contain no-repeat;mask:var(--ico-ok) center/contain no-repeat}

/* ---------- Videos ---------- */
/* Eine Karte mit Vorschaufläche. Bis Oktober 2026 stand jedes Video als eine
   Zeile da – im Test hieß es, die Videos seien „eher als Links hinterlegt“,
   dabei waren sie das Hilfreichste. Jetzt: links die dunkle Fläche (Antumbra
   → Umbra, 78°) mit dem Abspielknopf in der Mitte, die ganze Fläche ist der
   Knopf; rechts Etikett, Titel, worum es geht und der Weg zu YouTube. Schmal
   steht die Fläche als 16:9 über dem Text. Der Klick setzt den Player an ihre
   Stelle (views/media.js); er nimmt dann die ganze Breite über dem Text ein.

   Kein Vorschaubild von YouTube: das kam von i.ytimg.com, und damit lief bei
   jedem Seitenaufruf 15-mal eine Anfrage an Google, bevor jemand ein Video
   angeklickt hatte – dasselbe Leck wie die Einbettung selbst. Die Fläche ist
   deshalb ohne Bild. */
.ytc{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;border-radius:var(--r-m);overflow:hidden;
  background:var(--flaeche-leise);border:1px solid var(--line);margin:var(--s5) 0}
.ytc-thumb{flex:0 0 15rem;display:flex;min-height:8.4375rem}
.ytc-play{flex:1;display:flex;align-items:center;justify-content:center;border:0;background:var(--video-vorschau);
  cursor:pointer;padding:var(--s3);font:inherit;--fokus:var(--ep-white)}
/* Der Abspielknopf ist ein Primärknopf: Verlauf, dunkle Schrift, im
   Überfahren blendet der zweite Verlauf ein. Zeichen: play aus Solar. */
.ytc-play>span{position:relative;isolation:isolate;display:flex;align-items:center;gap:var(--s2);min-height:var(--ziel);
  background:var(--ep-gradient) padding-box,var(--ep-gradient-halo) border-box;color:var(--auf-gruen);
  border:5px solid transparent;padding:var(--s2) var(--s4);border-radius:var(--pill);font:inherit;font-size:var(--t-ui);font-weight:var(--fw-mittel);white-space:nowrap}
.ytc-play>span::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--ep-gradient-hover);opacity:0;transition:opacity var(--ep-transition) ease}
.ytc-play:hover>span::after,.ytc-play:focus-visible>span::after{opacity:1}
.ytc-play .ico{width:16px;height:16px}
.ytc-bar{flex:1 1 13rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s1);
  padding:var(--s4) var(--s5) var(--s2)}
.ytc-bar .ytc-etikett{margin:0}
.ytc-bar b{color:var(--ink);font-size:var(--t-text);font-weight:var(--fw-stark)}
.ytc-text{max-width:var(--satz);font-size:var(--t-ui);line-height:var(--lh-weit);color:var(--ink)}
.ytc-bar a{display:inline-flex;align-items:center;min-height:var(--ziel);font-size:var(--t-klein);font-weight:var(--fw-mittel);white-space:nowrap}
@media(max-width:560px){.ytc-thumb{flex-basis:100%;aspect-ratio:16/9;min-height:0}.ytc-bar{padding:var(--s3) var(--s4) var(--s1)}}
/* Im Kapitelkopf neben den Minuten: Hier ist ein Video (views/media.js) */
.lvideo{display:inline-flex;align-items:center;gap:var(--s1);padding:2px var(--s3) 2px var(--s2);border-radius:var(--pill);
  background:var(--akzent-flaeche);color:var(--gruen-text);font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel)}
.lvideo .ico{width:14px;height:14px}
/* Modul 00: Empfehlung und Überblick über alle Videos */
.video-ueberblick{margin-top:var(--s3)}
.video-ueberblick[hidden]{display:none}
.video-gruppe{margin:var(--s3) 0 0}
.video-gruppe .tag{color:var(--eyebrow)}
.module .video-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(18rem,100%),1fr));gap:0 var(--s5)}
.module .video-liste li{margin:0;padding:var(--s1) 0;font-size:var(--t-ui);line-height:var(--lh-mit)}
.video-liste a .num{font-size:var(--t-klein);font-variant-numeric:tabular-nums;margin-right:var(--s1)}
/* Nach dem Klick: der Player oben über die ganze Breite, auf dunklem Grund */
.ytc-frame{position:relative;order:-1;flex:1 1 100%;padding-top:56.25%;background:var(--video-grund)}
.ytc-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Bildschirmfotos ----------
   Aufklappbar, nicht dauerhaft sichtbar und nicht per Hover: 19 Vollbilder im
   Fließtext zerschneiden das Lesen, und Hover gibt es auf Touch, Tastatur und
   im Ausdruck nicht. Das Klickziel steht deshalb in der Zusammenfassung und
   ist auch zugeklappt lesbar; im Bild steht danach, wo es sitzt.
   Kein Kasten: Die Zeile ist ein Angebot, keine eigene Station. Sie steht
   als leiser Hinweis im Fluss, eine Stufe kleiner als der Fließtext, mit
   dem Zeichen hinweis-info davor; 44px hoch als Klickziel. */
.shot{margin:var(--s2) 0}
.shot>summary{display:flex;gap:var(--s2);align-items:center;min-height:var(--ziel);cursor:pointer;
  font-size:var(--t-ui);line-height:var(--lh-mit);font-weight:var(--fw-normal);color:var(--ink-soft);list-style:none}
.shot>summary::-webkit-details-marker{display:none}
.shot>summary::before{content:"";flex:none;width:20px;height:20px;background-color:var(--gruen-text);
  -webkit-mask:var(--ico-info) center/contain no-repeat;mask:var(--ico-info) center/contain no-repeat}
/* Anklickbar wird die Zeile über das grüne Zeichen davor; unterstrichen wird
   erst beim Überfahren, damit im Ruhezustand nichts nach Verweis aussieht. */
.shot>summary:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.shot[open]>summary{color:var(--ink)}
.shot figure{margin:0;padding:var(--s2) 0 0}
/* Bild in der Karte: 8px (v1.2). Grund passt sich an: die Aufnahmen zeigen
   die dunkle Oberfläche von Claude, und eine weiße Fläche darunter blitzt
   beim Laden unangenehm auf. */
.shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-s);background:var(--flaeche-leise)}
.shot figcaption{font-size:var(--t-klein);line-height:var(--lh-weit);color:var(--ink);margin-top:var(--s2)}

/* ---------- Fachbegriffe mit Aufklappfenster ----------
   Der englische Begriff führt im Text, die deutsche Beschriftung steht im
   Fenster dahinter. Gepunktete Linie statt Unterstreichung, damit es nicht wie
   ein Verweis aussieht – geklickt wird hier nichts, es klappt nur auf. */
.be{position:relative;border-bottom:1.5px dotted currentColor;cursor:help}
/* position:fixed, weil ein absolut gesetztes Fenster am rechten Rand die Seite
   seitwärts schieben würde. Die Koordinaten rechnet views/begriffe.js.
   Ohne Schatten (v1.2): Das Fenster setzt sich über einen 1,5px-Rand in
   Antumbra vom Text darunter ab, im Dunkel über Fläche 2 und Moss. */
.be-pop{position:fixed;left:0;top:0;z-index:40;display:none;width:max-content;max-width:min(320px,78vw);
  padding:var(--s3) var(--s4);border-radius:var(--r-m);border:1.5px solid var(--gruen-text);
  background:var(--pop-flaeche);color:var(--ink);font-family:var(--ep-font);
  font-size:var(--t-ui);font-weight:var(--fw-normal);line-height:var(--lh-weit);
  letter-spacing:0;text-transform:none;font-style:normal}
.be-pop.offen{display:block}
.be-pop b{display:block;font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel);color:var(--gruen-text);margin-bottom:var(--s1)}
/* Im Aufklappfenster: die Stelle, an der der Begriff ausführlich steht. Text,
   kein Link – siehe views/begriffe.js. */
.be-pop .be-ziel{display:block;margin-top:var(--s2);font-weight:var(--fw-mittel)}

/* ---------- Übungen ----------
   Antwortknöpfe sind wählbare Karten (16px), keine Pillen: Sie tragen ganze
   Sätze über mehrere Zeilen. Rand wie ein Formularfeld (Silber), im
   Überfahren Moss-Rand und Eiscreme. */
.calib{border-radius:var(--r-m);padding:var(--s5);margin:var(--s4) 0;background:var(--flaeche-leise);border:1px solid var(--line)}
.calib-head{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4)}
.calib-dots{display:flex;gap:var(--s1)}
.dot{width:26px;height:6px;border-radius:var(--pill);background:var(--feld-kante)}
.dot.ok{background:var(--gruen-text)}
.dot.no{background:var(--falsch-zeichen)}
.dot.mid{background:var(--neutral)}
.calib-count{font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel);color:var(--ink-soft)}
.teamtag{display:inline-flex;font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel);
  color:var(--gruen-text);background:var(--akzent-flaeche);padding:2px var(--s3);border-radius:var(--pill);margin-bottom:var(--s2)}
.calib-item,.route-item{padding-top:var(--s5);border-top:1px solid var(--line);margin-top:var(--s5)}
.calib-item:first-of-type,.route-item:first-of-type{border-top:0;padding-top:0;margin-top:0}
.req{border-radius:var(--r-s);background:var(--flaeche);padding:var(--s3) var(--s4);margin-bottom:var(--s3);border:1px solid var(--line)}
.req p{margin:0;font-size:var(--t-text)}
.req .attach{display:block;font-size:var(--t-klein);color:var(--ink-soft);margin-top:var(--s1)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-bottom:var(--s3)}
.choice,.rbtn,.opt{min-height:var(--ziel);padding:var(--s3) var(--s4);border-radius:var(--r-m);border:1.5px solid var(--feld-kante);background:var(--flaeche);
  font:inherit;font-size:var(--t-ui);line-height:var(--lh-mit);cursor:pointer;text-align:left;color:var(--ink);
  transition:background-color var(--ep-transition) ease,border-color var(--ep-transition) ease}
.choice:hover,.rbtn:hover,.opt:hover{background-color:var(--akzent-flaeche);border-color:var(--ep-border-accent)}
.choice small{display:block;font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel);color:var(--ink-soft);margin-bottom:var(--s1)}

/* Bewertet: richtig Moss mit dunkler Schrift, falsch Rot und vertretbar Grau
   mit weißer Schrift. Das Kürzel am Knopf (.btag) sagt es zusätzlich als Wort. */
.choice.pick-ok,.rbtn.hit,.opt.right{background:var(--gruen-flaeche);border-color:var(--gruen-flaeche);color:var(--auf-gruen)}
.choice.pick-no,.rbtn.miss,.opt.wrong{background:var(--falsch);border-color:var(--falsch);color:var(--ep-white)}
.choice.pick-mid,.rbtn.mid{background:var(--neutral);border-color:var(--neutral);color:var(--ep-white)}
.choice.pick-ok small,.choice.pick-no small,.choice.pick-mid small{color:inherit}
.choice.faded,.rbtn.pale,.opt.dim{color:var(--ink-soft);border-color:var(--line)}
.choice.faded small{color:var(--ink-soft)}
/* nicht gewählt, aber die richtige Antwort: sichtbar bleiben */
.choice.sol{border-color:var(--gruen-text);border-width:2px;background:var(--akzent-flaeche)}
/* Auswertung unter einer Antwort: eine weiße Fläche auf dem Kasten, ohne
   Farbbalken. Was sie bedeutet, sagt die Pille mit Zeichen und Wort (.vd). */
.verdict{padding:var(--s3) var(--s4);background:var(--flaeche);border:1px solid var(--line);border-radius:var(--r-m)}
.verdict .label{display:inline-flex;font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel);
  padding:2px var(--s3);border-radius:var(--pill);background:var(--flaeche-leise);color:var(--ink);margin-bottom:var(--s2)}
.verdict p{font-size:var(--t-ui);line-height:var(--lh-weit);margin:0 0 var(--s2)}
.verdict p:last-child{margin-bottom:0}
/* Auswertung als Wort mit Zeichen: richtig (check-circle), falsch
   (close-circle), kein festes Richtig (empfehlung-bedingt). Status-Pille
   nach web-app.md; bei falsch die Fehlertönung, das Rot nur am Zeichen. */
.vd{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-stark);
  padding:2px var(--s3) 2px var(--s2);border-radius:var(--pill);margin-bottom:var(--s2)}
.vd .ico{width:18px;height:18px}
.vd-ok{background:var(--akzent-flaeche);color:var(--gruen-text)}
.vd-no{background:var(--falsch-tint);color:var(--ink)}
.vd-no .ico{color:var(--falsch-zeichen)}
.vd-mid{background:var(--flaeche-leise);color:var(--ink);border:1px solid var(--line)}
/* Kürzel an einem Antwortknopf: eigene Wahl, richtige Antwort */
.btag{display:block;font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-stark);margin-top:var(--s1);color:currentColor}
.rephrase{background:var(--flaeche-leise);border-radius:var(--r-s);padding:var(--s3)}
.rephrase span{display:block;font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel);color:var(--ink-soft);margin-bottom:var(--s1)}
.rephrase p{font-size:var(--t-ui);line-height:var(--lh-weit);margin:0}
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-bottom:var(--s3)}
.routes.scale{grid-template-columns:repeat(5,1fr)}
.routes.scale .rbtn{font-size:var(--t-klein)}
.rbtn{font-weight:var(--fw-mittel)}
/* Gewählt (Kollisionen, Mehrfachwahl): Moss-Fläche wie eine gesetzte
   Auswahl in web-app.md, dazu das Zeichen check-circle – hier gibt es kein
   Richtig, die Auswahl steht zusätzlich in aria-pressed. */
.rbtn.sel{display:flex;align-items:center;gap:var(--s2);background:var(--gruen-flaeche);border-color:var(--gruen-flaeche);color:var(--auf-gruen)}
.rbtn.sel::before{content:"";flex:none;width:18px;height:18px;background-color:currentColor;
  -webkit-mask:var(--ico-ok) center/contain no-repeat;mask:var(--ico-ok) center/contain no-repeat}

/* ---------- Lektionen ---------- */
.lesson{border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s5)}
.lesson:first-of-type{border-top:0;padding-top:0;margin-top:var(--s4)}
.lhead{display:flex;justify-content:space-between;align-items:center;gap:var(--s2) var(--s4);flex-wrap:wrap;margin-bottom:var(--s1)}
.lhead h3{flex:1 1 20rem;margin:0;font-size:var(--t-h3);font-weight:var(--fw-titel);color:var(--ink)}
.lhead h3 .lk{font-size:var(--t-klein);color:var(--gruen-text);margin-right:2px;font-weight:var(--fw-mittel);letter-spacing:0}
.lhead .meta{font-size:var(--t-klein);font-weight:var(--fw-mittel);color:var(--ink-soft);white-space:nowrap}
/* Kapitel einklappen (views/kapitel.js): Kopf und Lernziele stehen immer
   da. Der Titel selbst ist der Knopf (Akkordeon nach WAI-APG) – die ganze
   Zeile, mindestens 44px hoch, das Zeichen ui-zugeklappt / ui-aufgeklappt
   am Ende. Nur am Bildschirm; gedruckt wird alles, ohne JavaScript ist alles
   offen.
   Ohne 0,3-s-Ausklappen (web-app.md): Sprünge aus Suche, Glossar und Adresse
   öffnen ein Kapitel und scrollen sofort hinein – während einer Animation
   landeten sie neben dem Ziel. */
.kapitel-knopf{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:var(--ziel);padding:var(--s1) 0;margin:0;
  border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:var(--r-s)}
.kapitel-knopf .kapitel-titel{flex:0 1 auto}
.kapitel-knopf::after{margin-left:auto;width:24px;height:24px;color:var(--gruen-text);background-color:var(--gruen-text)}
.kapitel-knopf:hover .kapitel-titel{color:var(--gruen-text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
@media screen{.lesson.zu .kapitel-inhalt{display:none}}
.lesson.zu .goals{margin-bottom:0}
/* Lernziele: Kasten auf Fläche 2, Inhalt in Schriftfarbe */
.goals{background:var(--flaeche-leise);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s3) var(--s4);margin:var(--s3) 0 var(--s4);max-width:var(--satz)}
.goals b{display:block;font-size:var(--t-klein);line-height:var(--lh-mit);color:var(--ink);margin-bottom:var(--s1);font-weight:var(--fw-stark)}
.goals ul{margin:0;padding-left:var(--s4);font-size:var(--t-ui)}
.goals li{margin-bottom:var(--s1);color:var(--ink)}

/* ---------- Abschlussblöcke: Wissenscheck, Glossar, Stand ----------
   Weiße Karten wie die Module. Bis zum zweiten Design-Audit standen sie als
   dunkle Blöcke hintereinander; v1.2 erlaubt keine zwei schweren Flächen in
   Folge, und Lesetext gehört auf hellen Grund. */
.tool{background:var(--flaeche);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s6);margin-bottom:var(--s5);scroll-margin-top:var(--s5)}
.tool h2,.module.band h2{font-size:var(--t-h2);font-weight:var(--fw-stark);line-height:var(--lh-h2);margin-bottom:var(--s3)}
.tool>p{color:var(--ink);font-size:var(--t-text)}
/* Formularfeld nach .ep-input: Fläche 2, 1,5px Rand, 8px; im Fokus Moss-Rand
   und weiße Fläche. */
input[type=text],select{width:100%;padding:var(--s3) var(--s4);border-radius:var(--r-s);border:1.5px solid var(--line);
  background:var(--flaeche-leise);color:var(--ink);font:inherit;font-size:var(--t-ui);
  transition:border-color var(--ep-transition) ease,background-color var(--ep-transition) ease}
input[type=text]:focus,select:focus{border-color:var(--ep-border-accent);background:var(--flaeche)}
input::placeholder{color:var(--ink-soft);opacity:1}

/* ---------- Wissenscheck ---------- */
.q{border-top:1px solid var(--line);padding:var(--s5) 0 var(--s1)}
.q:first-of-type{border-top:0}
/* Schon beim Laden beantwortet: Frage und Auswertung, der Rest aufklappbar */
.q.kurz{padding-bottom:var(--s3)}
.q.kurz .q-text{font-size:var(--t-text);margin-bottom:var(--s2)}
.q.kurz .vd{margin:0 var(--s3) 0 0}
.q-mehr{display:inline}
.q-mehr>summary{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--ziel);cursor:pointer;list-style:none;
  font-size:var(--t-ui);font-weight:var(--fw-mittel);color:var(--link);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.q-mehr>summary::-webkit-details-marker{display:none}
.q-mehr>summary:hover{color:var(--link-hover)}
.q-mehr[open]{display:block}
.q-mehr[open]>summary{margin-bottom:var(--s3)}
.q-num{font-size:var(--t-klein);font-weight:var(--fw-mittel);color:var(--ink-soft)}
.q-text{font-size:var(--t-lead);line-height:var(--lh-mit);font-weight:var(--fw-titel);margin:var(--s2) 0 var(--s3);max-width:var(--satz)}
.opt{display:block;width:100%;margin-bottom:var(--s2)}
.opt.right{font-weight:var(--fw-stark)}
.q-why{font-size:var(--t-ui);line-height:var(--lh-weit);color:var(--ink);margin:var(--s2) 0 0;max-width:var(--satz)}
/* Ergebnis als Kennzahl (StatFigure): Ziffer in Antumbra, im Dunkel Moss,
   680, Tabellenziffern. Eine Verlaufsfüllung der Ziffern hielte nur 1,3 bis
   1,8:1. Der Zwischenstand läuft beim Scrollen durch die Fragen oben mit –
   mit Fläche, damit die Fragen darunter durchlaufen und nicht durchscheinen. */
.score{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;margin:var(--s4) 0 var(--s1);
  position:sticky;top:0;z-index:3;background:var(--flaeche);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.score b{font-size:var(--t-h2);font-weight:var(--fw-h1);letter-spacing:var(--ep-ls-tight);color:var(--gruen-text);line-height:1}
.score span{font-size:var(--t-ui);color:var(--ink)}

/* ---------- Fußzeile: die tiefste Fläche (.ep-band-umbra) ----------
   Verlauf Antumbra → Umbra bei 78°, ohne Raster, 24px, im Raster des
   Inhalts. Alles Weiß (Antumbra-Ende 6,57:1, Umbra-Ende 9,94:1), auch die
   Eyebrow. Links im Überfahren mit kräftigerer Unterstreichung statt anderer
   Farbe – Moss oder Sun hielten auf Grün nicht. In beiden Darstellungen
   gleich. */
.fuss{padding:0 0 var(--s6)}
.fuss-band{background:var(--ep-gradient-umbra);color:var(--ep-white);border-radius:var(--r-l);padding:var(--s6);
  font-size:var(--t-ui);line-height:var(--lh-weit);--fokus:var(--ep-white);--eyebrow:var(--ep-white)}
.fuss-raster{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--s6)}
.fuss p{margin:0 0 var(--s2)}
.fuss-titel{font-size:var(--t-text);font-weight:var(--fw-stark)}
.fuss-etikett{margin-bottom:var(--s2)}
.fuss-links{list-style:none;margin:0;padding:0}
.fuss-links li{margin-bottom:var(--s2)}
.fuss a{color:var(--ep-white)}
.fuss a:hover{color:var(--ep-white);text-decoration-thickness:3px}
@media(max-width:900px){.fuss-raster{grid-template-columns:1fr;gap:var(--s5)}}

/* Meldung nach web-app.md: Fläche, 16px, Rand, Zeichen links. Unten rechts
   statt mittig: dort liegt kein Fließtext. Ohne Schatten setzt sie sich über
   den 1,5px-Rand in Antumbra ab. Am Handy unten über die ganze Breite. */
.toast{position:fixed;bottom:var(--s5);right:var(--s5);max-width:min(26rem,calc(100% - 2*var(--s4)));
  background:var(--pop-flaeche);color:var(--ink);border:1.5px solid var(--gruen-text);
  padding:var(--s3) var(--s4) var(--s3) calc(var(--s4) + 20px + var(--s2));border-radius:var(--r-m);
  font-size:var(--t-ui);font-weight:var(--fw-mittel);opacity:0;pointer-events:none;transition:opacity var(--ep-transition) ease;z-index:99}
.toast::before{top:50%;margin-top:-10px;width:20px;height:20px;background-color:var(--gruen-text);
  -webkit-mask-image:var(--ico-info);mask-image:var(--ico-info)}
.toast.show{opacity:1}

/* ---------- Sprunglink, Hinweis ohne JavaScript, Datenschutzhinweis,
   gesperrter Knopf ---------- */

/* Erstes fokussierbares Element, sonst tabbt man sich auf jeder Position durch
   die Einträge der Seitenleiste. */
.skiplink{position:absolute;left:-9999px;top:var(--s2);z-index:100;background:var(--ep-gradient);color:var(--auf-gruen);
  padding:var(--s3) var(--s5);border-radius:var(--pill);font-size:var(--t-ui);
  font-weight:var(--fw-mittel);border:none;text-decoration:none}
.skiplink:focus{left:var(--s2)}

/* Ohne JavaScript bleiben die Übungen, der Wissenscheck, das Glossar und die
   Fortschrittsbalken leer – das sagt dieser Streifen. */
.noscript{background:var(--flaeche-leise);border-bottom:1px solid var(--line);padding:var(--s4) 0;color:var(--ink)}
.noscript .wrap{font-size:var(--t-ui);line-height:var(--lh-weit)}
.noscript b{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s1)}
.noscript b::before{content:"";flex:none;width:20px;height:20px;background-color:var(--warn-zeichen);
  -webkit-mask:var(--ico-warnung) center/contain no-repeat;mask:var(--ico-warnung) center/contain no-repeat}

/* „Übung zurücksetzen" – sitzt rechts in der Kopfzeile der Übung. */
.exreset{margin-left:auto;padding-left:var(--s4);padding-right:var(--s4);font-size:var(--t-klein)}

/* Hinweis, was gespeichert wird – unter den drei Knöpfen im Abschnitt
   „Dein Stand“. Meldung mit Infozeichen. */
.privnote,.glossar-hinweis{position:relative;margin-top:var(--s4);padding:var(--s3) var(--s4) var(--s3) calc(var(--s4) + 24px + var(--s3));
  background:var(--flaeche-leise);border:1px solid var(--line);border-radius:var(--r-m);
  font-size:var(--t-klein);line-height:var(--lh-weit);color:var(--ink);max-width:var(--satz)}
.privnote::before,.glossar-hinweis::before{top:var(--s3);background-color:var(--gruen-text);
  -webkit-mask-image:var(--ico-info);mask-image:var(--ico-info)}

/* Beantwortet: nicht disabled, sondern aria-disabled. disabled nimmt den Knopf
   aus der Tabulatorreihenfolge, und genau dort steht nach der Auswertung, welche
   Antwort die eigene und welche die richtige war. Der Klick wird in JavaScript
   abgefangen, die Beschriftung bleibt erreichbar. */
[aria-disabled="true"]{cursor:default}
/* Ausgewertete Antworten reagieren nicht mehr aufs Überfahren. */
.choice.faded:hover,.rbtn.pale:hover,.opt.dim:hover{background-color:var(--flaeche);border-color:var(--line)}
.choice.sol:hover{background-color:var(--akzent-flaeche);border-color:var(--gruen-text)}

/* Nur für Sprachausgaben: sichtbar ist das Wort an anderer Stelle */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Schmale Fenster ---------- */
@media(max-width:900px){
.shell{grid-template-columns:1fr;gap:var(--s5);padding-top:var(--s5);padding-bottom:64px}
/* relative statt static: Die Leiste muss Bezugsrahmen der unsichtbaren
   Wörter für Sprachausgaben (.vh) sein. Sonst ragen sie aus der seitlich
   scrollenden Leiste heraus und machen die ganze Seite breiter. */
/* Am rechten Rand blendet die Leiste aus: das Zeichen, dass sie seitwärts
   weitergeht. Der Innenabstand rechts lässt den letzten Eintrag aus der
   Blende herausscrollen. */
.rail{position:relative;display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s2);padding-right:var(--s7);
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 3rem),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 3rem),transparent)}
.rail-title,.rail hr,.rail-legende{display:none}
.rail a{white-space:nowrap;background:var(--flaeche);border:1.5px solid var(--feld-kante);align-items:center;margin-bottom:0}
.rail a.here{border-color:transparent}
.rail a.rail-weg{width:auto;margin-bottom:0;background:var(--flaeche);border-color:var(--gruen-text)}
/* Die Leiste scrollt seitwärts und schneidet ab, was über sie hinausragt –
   der Fokusring liegt hier deshalb innen. */
.rail a:focus-visible{outline-offset:-5px}
.module,.tool{padding:var(--s5) var(--s4)}
.grid2,.choices{grid-template-columns:1fr}
.teams{grid-template-columns:1fr 1fr}
.logo{height:30px}.logo-dunkel{height:35px}
/* Grid-Kinder haben min-width:auto – ohne diese Zeile diktiert die breiteste
   Tabelle die Spaltenbreite und die ganze Seite scrollt seitwärts. */
main{min-width:0}
/* Tabellen scrollen in sich. Die Blende am rechten Rand zeigt, dass da noch
   mehr kommt; background-attachment:local blendet sie am Ende aus. */
.module table,.tool table{display:block;overflow-x:auto;
  background-image:linear-gradient(to right,rgb(0 0 0 / 0),var(--scroll-blende));
  background-repeat:no-repeat;background-position:right center;background-size:32px 100%;background-attachment:local}
.routes.scale{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.stufen{grid-template-columns:1fr}.routes:not(.scale){grid-template-columns:1fr}}

/* Die vier Teamkarten brauchen je 174px, sonst passt „genossenschaften" nicht
   in eine Zeile – der weiche Trennstrich teilt das Wort, kürzer wird es nicht.
   Darunter zweispaltig; ohne diese Regel schob die Kachelreihe die ganze
   Seite seitwärts, sichtbar zwischen 901 und 976px. */
@media(max-width:1060px){.teams{grid-template-columns:1fr 1fr}}

/* Sehr schmale Fenster: die letzten zweispaltigen Raster brechen um */
@media(max-width:560px){
/* Schmal bricht die Modulzeile um: Sie läuft dann als Text, das Pfad-Etikett
   steht in eigener Zeile darunter statt eingerückt mittendrin. */
.mod-top{display:block}
.mod-top .pill-pfad{display:flex;width:fit-content;margin:var(--s2) 0 0}
.hero-chips li{font-size:var(--t-klein)}
.toast{left:var(--s4);right:var(--s4);bottom:var(--s7);max-width:none}
.teams,.routes.scale{grid-template-columns:1fr}
.module,.tool{padding:var(--s4) var(--s3)}
.fuss-band{padding:var(--s5) var(--s4)}
.calib{padding:var(--s4)}
.hero{padding:var(--s5) 0}
.topbar-note{display:none}}

/* ---------- Druck ----------
   Papier ist immer hell: die dunkle Palette wird zurückgesetzt, sonst kommt
   heller Text auf weißem Grund heraus. Die Marken-Flächen drucken als weiße
   Kästen mit Rand. Videos und Bedienknöpfe drucken nicht, zugeklappte
   Bildschirmfotos zeigen ihre Zusammenfassung – darin steht das Klickziel im
   Wortlaut. Der Kapitelknopf ist der Titel und druckt mit, ohne Zeichen. */
@media print{
:root,:root[data-theme="dark"],:root[data-theme="light"]{
--ep-bg:var(--ep-white);--ep-bg-alt:var(--ep-platinum);--ep-bg-accent:var(--ep-eiscreme);
--ep-text:var(--ep-black);--ep-text-muted:var(--ep-silver);--ep-text-green:var(--ep-antumbra);
--ep-border:var(--ep-light-200);--ep-border-strong:var(--ep-silver);--ep-focus:var(--ep-antumbra);
--grund:var(--ep-white);--flaeche-leise:var(--ep-white);--ink-soft:var(--ep-meta);--link-hover:var(--ep-umbra);
--falsch-tint:var(--ep-error-50);--falsch-zeichen:var(--ep-error);--pop-flaeche:var(--ep-white);
--scroll-blende:rgb(38 38 38 / .09);color-scheme:light}
.ytc-thumb,.ytc-bar a,.toast,.done-row,.btnrow,.rail,.theme,.ep-hero-anim-b,.stufen,.weg-knopf,.altlast,.aufklappen,.gl-az,.kapitel-knopf::after,.legende{display:none}
.module.band,.fuss-band,.geschafft{background:var(--ep-white)!important;color:var(--ink)!important;border:1.5px solid var(--line)!important}
.module.band *,.fuss-band *,.geschafft *{color:var(--ink)!important}
/* Der Kopfbereich läuft über die ganze Breite: weiß ohne Rahmen. */
.hero{background:var(--ep-white)!important;color:var(--ink)!important;padding:var(--s5) 0!important}
.hero *{color:var(--ink)!important}
.shell{display:block}
.shot{break-inside:avoid}
.seg{border-style:solid!important}
.logo-hell{display:block!important}.logo-dunkel{display:none!important}
}

/* ---------- Wissenscheck je Pfad (Aufgabe 3.5) ----------
   Mit gewählter Stufe teilt views/quiz.js die Fragen in zwei Gruppen: was für
   den Pfad zählt und was freiwillig ist. Die Gruppe steht als Wort in der
   Überschrift und an jeder freiwilligen Frage; die Linie trennt nur, sie
   trägt keine Bedeutung allein. Ohne Stufe und für Builder gibt es keine
   Gruppen – dann greift keine dieser Regeln. */
.q-gruppe-titel{font-size:var(--t-h3);line-height:var(--lh-mit);font-weight:var(--fw-titel);color:var(--ink);margin:var(--s5) 0 var(--s2)}
.q-gruppe-satz{font-size:var(--t-ui);line-height:var(--lh-weit);color:var(--ink);margin:0;max-width:var(--satz)}
.q-gruppe+.q-gruppe{margin-top:var(--s6);border-top:1px solid var(--line)}

/* ---------- Suche (views/suche.js, Aufgabe 5.1) ----------
   Ein Knopf in der Kopfleiste, der wie ein Suchfeld aussieht (.ep-input:
   Fläche 2, 1,5px Rand, 8px), öffnet ein modales Fenster mit Eingabefeld und
   Trefferliste. Warum ein Fenster und kein Feld in der Leiste selbst, steht
   in views/suche.js.

   Eigene Tokens nur für das, was es sonst nicht gibt: den Schleier hinter dem
   Fenster und das kurze Aufleuchten am Sprungziel. Das Aufleuchten ist
   durchscheinend, damit es auf jedem Grund liegt, ohne den Kontrast der
   Schrift darauf zu brechen. Sunset ist dabei Akzent, keine Bewertung: als
   Linie 3,69:1 auf Weiß und 4,54:1 auf #1F1D1E.
   Ein Gegenstück für die Systemeinstellung ohne data-theme braucht es nicht:
   Die Suche gibt es nur mit JavaScript, und dann ist data-theme gesetzt. */
:root{
--suche-schleier:rgb(31 29 30 / .6);   /* Dialog-Hintergrund nach web-app.md */
--suche-ziel:rgb(234 81 21 / .14);
--suche-ziel-linie:var(--ep-sunset)}
:root[data-theme="dark"]{
--suche-schleier:rgb(0 0 0 / .66);
--suche-ziel:rgb(234 81 21 / .22)}

/* hidden steht im HTML und muss gegen display:inline-flex gewinnen – sonst
   stünde ohne JavaScript ein Knopf da, der nichts tut. */
.suche-knopf{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--ziel);padding:0 var(--s2) 0 var(--s3);
  border:1.5px solid var(--line);border-radius:var(--r-s);background:var(--flaeche-leise);color:var(--ink);
  font:inherit;font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel);cursor:pointer;
  transition:border-color var(--ep-transition) ease,background-color var(--ep-transition) ease}
.suche-knopf[hidden]{display:none}
.suche-knopf:hover{border-color:var(--ep-border-accent);background:var(--flaeche)}
.suche-knopf .ico{width:20px;height:20px;color:var(--gruen-text)}
/* Tastenkappen: im Knopf das Kürzel, unten im Fenster die Bedienung. Eine
   Kappe bricht nicht um – „Strg" und „K" gehören zusammen. Montserrat in
   Tabellenziffern, keine zweite Schrift. */
.suche-taste,.suche-hilfe kbd{display:inline-block;min-width:22px;padding:1px var(--s1);white-space:nowrap;
  border:1px solid var(--feld-kante);border-radius:var(--r-s);background:var(--flaeche);
  font-family:inherit;font-size:var(--t-mikro);line-height:var(--lh-mit);font-weight:var(--fw-mittel);text-align:center;color:var(--ink-soft)}

/* Platz in der Kopfleiste. Unter 1000px fehlt der Vermerk „Interne
   Weiterbildung · alle Teams“. Ohne ihn bleiben Logo, Suche und Umschalter
   bis etwa 700px in einer Zeile. */
@media (max-width:999px){.topbar-note{display:none}}
/* Schmale Fenster: Die Suche rückt neben das Logo, der Umschalter in die
   zweite Zeile. display:contents löst die rechte Gruppe dafür auf, ohne das
   Markup anzufassen. */
@media (max-width:560px){.topbar-rechts{display:contents}.suche-knopf{padding:0 var(--s3)}.suche-taste{display:none}}
/* Unter 360px stehen Suche und Umschalter nur mit ihren Zeichen da; die
   Wörter bleiben für Sprachausgaben und Spracheingabe im Namen. */
@media (max-width:360px){.suche-knopf-text,.theme-wort{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.theme-b{padding:0 var(--s3)}}

/* Das Fenster nach dem Dialog in web-app.md: Fläche, 24px, 1px Rand, kein
   Schatten; Hintergrund abgedunkelt. Oben statt mittig, damit die Liste nach
   unten wachsen kann, ohne dass das Eingabefeld springt. Die Seite dahinter
   scrollt nicht mit. Breite in Prozent statt vw: vw zählt eine feste
   Bildlaufleiste mit, und das Fenster säße dann neben der Mitte. */
.suche{width:min(680px,calc(100% - 2*var(--s4)));max-width:none;
  max-height:min(680px,calc(100vh - 8vh - var(--s5)));max-height:min(680px,calc(100dvh - 8vh - var(--s5)));
  margin:8vh auto auto;padding:0;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-l);background:var(--flaeche);color:var(--ink)}
.suche[open]{display:flex;flex-direction:column}
.suche::backdrop{background:var(--suche-schleier,rgb(31 29 30 / .6))}
@media screen{html:has(.suche[open]){overflow:hidden;scrollbar-gutter:stable}}

/* Das Feld ist der Kopf: Der Fokus zeigt sich als Linie unter dem ganzen
   Kopf, nicht als Ring um das randlose Feld. */
.suche-kopf{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3) var(--s2) var(--s4);
  border-bottom:2px solid var(--line)}
.suche-kopf:focus-within{border-bottom-color:var(--gruen-text)}
.suche-kopf::before{content:"";flex:none;width:22px;height:22px;background-color:var(--ink-soft);
  -webkit-mask:var(--ico-suchen) center/contain no-repeat;mask:var(--ico-suchen) center/contain no-repeat}
.suche .suche-feld{flex:1;min-width:0;width:auto;height:var(--ziel);padding:0;border:0;border-radius:0;
  background:transparent;color:var(--ink);font:inherit;font-size:var(--t-lead);line-height:var(--lh-mit)}
.suche .suche-feld::placeholder{color:var(--ink-soft);opacity:1}
.suche .suche-feld:focus-visible{outline:none}
.suche-zu{flex:none;font-size:var(--t-klein);padding-left:var(--s4);padding-right:var(--s4)}

.suche-status{margin:0;padding:var(--s3) var(--s4) var(--s1);font-size:var(--t-klein);line-height:var(--lh-mit);color:var(--ink-soft)}
.suche-status:empty{display:none}
.suche-liste{display:flex;flex-direction:column;gap:var(--s1);list-style:none;margin:0;padding:var(--s1) var(--s2) var(--s2);
  overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;min-height:0}
.suche-liste[hidden]{display:none}
/* Der gewählte Treffer trägt Fläche und einen 2px-Rand in Antumbra – nicht
   nur eine Farbe. Sprachausgaben bekommen ihn über aria-selected. */
.suche-treffer{display:block;padding:var(--s2) var(--s3);border-radius:var(--r-m);cursor:pointer;overflow-wrap:anywhere;outline:2px solid transparent;outline-offset:-2px}
.suche-treffer:hover{background:var(--akzent-flaeche)}
.suche-treffer[aria-selected="true"]{background:var(--akzent-flaeche);outline-color:var(--gruen-text)}
@media (forced-colors:active){.suche-treffer[aria-selected="true"]{outline:2px solid Highlight}}
.suche-zeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s2);margin-bottom:var(--s1)}
.suche-art{font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-stark);color:var(--gruen-text)}
.suche-wo{font-size:var(--t-klein);line-height:var(--lh-mit);color:var(--ink-soft)}
.suche-text{display:block;font-size:var(--t-ui);line-height:var(--lh-weit);color:var(--ink)}
/* Das Suchwort: Sun mit dunkler Schrift (12,8:1) und fetter Schnitt, damit
   es auch ohne Farbe heraussticht */
.suche-treffer mark{background:var(--ep-sun);color:var(--ep-dark-900);font-weight:var(--fw-stark);padding:0 2px}
.suche-hilfe{margin:0;padding:var(--s2) var(--s4);border-top:1px solid var(--line);background:var(--flaeche-leise);
  font-size:var(--t-klein);line-height:var(--lh-weit);color:var(--ink-soft)}
/* Ohne Tastatur sind Kürzel und Pfeiltasten nur Ballast */
@media (hover:none){.suche-taste,.suche-hilfe{display:none}}
@media (max-width:560px){
.suche{width:calc(100% - 2*var(--s2));margin-top:var(--s2);border-radius:var(--r-m);
  max-height:calc(100vh - 2*var(--s2));max-height:calc(100dvh - 2*var(--s2))}
.suche-kopf{padding-left:var(--s3)}
.suche-status{padding-left:var(--s3);padding-right:var(--s3)}}

/* Sprungziel: leuchtet kurz auf und blendet aus – 2,8 s statt 0,2, weil es
   der Orientierung nach dem Sprung dient. Bei reduzierter Bewegung bleibt
   das Ziel ruhig markiert, bis views/suche.js die Klasse wieder nimmt.
   Gegen den Fokusring gesetzt, der sonst die eigene Linie überdecken würde. */
.suche-ziel,.suche-ziel:focus-visible{outline:3px solid var(--suche-ziel-linie);outline-offset:4px;
  background-color:var(--suche-ziel);animation:sucheZiel 2.8s ease-in forwards}
@keyframes sucheZiel{
  0%,60%{outline-color:var(--suche-ziel-linie);background-color:var(--suche-ziel)}
  100%{outline-color:transparent;background-color:transparent}}

@media print{
.suche-knopf,.suche{display:none!important}
.suche-ziel{outline:none!important;background-color:transparent!important}}

/* ---------- Team-Wahl als Beispiel-Filter (Aufgabe 3.4) ----------
   Gezeichnet von views/weg.js (Zeile unter der Stufe, Auswahl in „Dein Weg")
   und views/exercises.js (Herkunft über den Fällen, Beispiel in den
   Kollisionen). Die Auswahl folgt der Stufenwahl: dieselbe Karte, derselbe
   gewählte Zustand; zusätzlich steht der Zustand als Wort im Knopf
   („Gewählt"). Der Knopf „Team wechseln" steht oben bei .weg-knopf. */
.weg p.weg-team:focus{outline:none}
.team-gruppe{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin:var(--s4) 0}
/* „Wohnbaugenossenschaften" in einem Stück ist breiter als eine Spalte bei
   701, 561 und 320 px. Getrennt wird am weichen Trennstrich im Namen (TEAMS in
   data/curriculum.js); v1.2 lässt keine automatische Trennung zu. */
.team-name{font-size:var(--t-text);line-height:var(--lh-mit);font-weight:var(--fw-stark);hyphens:manual}
.team-zusatz{font-size:var(--t-klein);line-height:var(--lh-weit)}
.team-status{margin-top:auto;padding-top:var(--s1);font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel);color:var(--gruen-text)}
.team-knopf[aria-pressed="true"] .team-status{color:var(--auf-gruen)}
/* Herkunft über den Fällen eines Teams */
.team-quelle{margin:0 0 var(--s4);font-size:var(--t-klein);line-height:var(--lh-mit);color:var(--ink-soft)}
.team-quelle b{color:var(--ink)}
/* Beispiel des Teams in den Kollisionen: gebaut wie die Gegenmaßnahme
   darunter – es ist kein Zitat */
.coll-beispiel{background:var(--flaeche-leise);border-radius:var(--r-s);padding:var(--s3);margin-bottom:var(--s3)}
.coll-beispiel span{display:block;font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel);color:var(--ink-soft);margin-bottom:var(--s1)}
.coll-beispiel p{font-size:var(--t-ui);line-height:var(--lh-weit);margin:0}
@media(max-width:700px){.team-gruppe{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.team-gruppe{grid-template-columns:1fr}}
@media print{.team-gruppe,.team-wechsel{display:none}}

/* ---------- Höhepunkt: Wissenscheck bestanden ----------
   Die helle Fläche (.ep-flaeche): 78°-Verlauf Moss → Sun, Schrift #1F1D1E
   (9,47:1 und mehr über den ganzen Verlauf). Sie steht für sich – kein
   Muster, kein Signet dahinter. Der Marker der Überschrift läge im gleichen
   Verlauf unsichtbar auf der Fläche, deshalb steht er hier in #1F1D1E. Der
   Knopf nach „Button onGreen": weiße Pille, Antumbra-Schrift, im Überfahren
   Eiscreme. In beiden Darstellungen gleich. */
.geschafft{background:var(--ep-gradient);color:var(--ep-dark-900);
  border-radius:var(--r-l);padding:var(--s6);margin-bottom:var(--s5);scroll-margin-top:var(--s5);
  --fokus:var(--ep-dark-900);--eyebrow:var(--ep-dark-900)}
.geschafft[hidden]{display:none}
.geschafft h2{font-size:var(--t-h2);font-weight:var(--fw-stark);line-height:var(--lh-h2);margin-bottom:var(--s3)}
.geschafft h2 em{background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20' preserveAspectRatio='none'%3E%3Cpath d='M10 0H10A10 10 0 0 0 10 20H10Z' fill='%231f1d1e'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H0A10 10 0 0 1 0 20H0Z' fill='%231f1d1e'/%3E%3C/svg%3E"),
    linear-gradient(var(--ep-dark-900),var(--ep-dark-900))}
.geschafft p{max-width:var(--satz);font-size:var(--t-text)}
#geschafftZahl{font-weight:var(--fw-stark)}
a.btn-brand{display:inline-flex;align-items:center;min-height:var(--ziel);padding:var(--s2) var(--s5);border-radius:var(--pill);border:0;
  background:var(--ep-white);color:var(--ep-antumbra);font-weight:var(--fw-mittel);font-size:var(--t-ui);line-height:1.15;text-decoration:none;
  transition:background-color var(--ep-transition) ease}
a.btn-brand:hover{background:var(--ep-eiscreme);color:var(--ep-antumbra)}

/* ---------- Glossar und Sprungziele (Lernhub 2.0, Aufgabe 5.2) ----------
   Das Glossar steht als weiße Karte wie Wissenscheck und Stand. Die Liste
   zeichnet views/begriffe.js aus data/begriffe.js.

   Zwei Spalten, sobald Platz ist: Bei rund 50 Einträgen wäre eine einzige
   Spalte mehrere Bildschirme lang. Gelesen wird wie in jedem Register erst
   die linke Spalte hinunter, dann die rechte. */
.glossar{margin:var(--s4) 0 0;column-width:20rem;column-gap:var(--s6)}
/* Sprungleiste A–Z und Buchstabenköpfe. Felder mit 8px wie Chips, 44px. */
.gl-az{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s5) 0 0}
.gl-az a{display:inline-flex;align-items:center;justify-content:center;min-width:var(--ziel);height:var(--ziel);padding:0 var(--s2);
  border:1.5px solid var(--feld-kante);border-radius:var(--r-s);color:var(--gruen-text);font-weight:var(--fw-stark);font-size:var(--t-ui);text-decoration:none;
  transition:background-color var(--ep-transition) ease,border-color var(--ep-transition) ease}
.gl-az a:hover{background:var(--akzent-flaeche);border-color:var(--ep-border-accent);color:var(--gruen-text)}
.gl-gruppe{scroll-margin-top:var(--s5)}
.gl-gruppe dl{margin:0}
.gl-buchstabe{font-size:var(--t-h4);font-weight:var(--fw-stark);color:var(--gruen-text);
  border-bottom:1px solid var(--line);padding:var(--s4) 0 var(--s1);margin:0;break-after:avoid}
.gl-eintrag{break-inside:avoid;padding:var(--s3) 0 var(--s4);scroll-margin-top:var(--s5)}
.gl-eintrag dt{font-size:var(--t-lead);line-height:var(--lh-mit);font-weight:var(--fw-stark);color:var(--ink)}
/* Englischer Zweitname wie am Kapitelkopf: leiser als der Begriff */
.gl-en{font-size:var(--t-klein);font-weight:var(--fw-normal);color:var(--ink-soft);white-space:nowrap}
.gl-eintrag dd{margin:var(--s1) 0 0;font-size:var(--t-ui);line-height:var(--lh-weit);color:var(--ink)}
.gl-eintrag dd.gl-ui{font-size:var(--t-klein);line-height:var(--lh-mit);font-weight:var(--fw-mittel);color:var(--gruen-text)}
.gl-ziel a{font-weight:var(--fw-mittel)}
/* Angesprungen – über einen geteilten Link oder aus der Suche: Die Fläche
   zeigt, wo man gelandet ist. Innen eingerückt statt mit negativem Rand, damit
   bei 390 px nichts über den Block hinausragt. */
.gl-eintrag:target{background:var(--akzent-flaeche);border-radius:var(--r-m);padding-left:var(--s3);padding-right:var(--s3)}

/* Sprungziele aus dem Glossar und der Suche: Kapitelköpfe (k01 bis k21) und
   Zwischenüberschriften mit id halten Abstand zum oberen Rand, statt an der
   Fensterkante zu kleben. */
.lhead h3[id],.module h3[id],.module h4[id]{scroll-margin-top:var(--s5)}

@media print{
.glossar{column-gap:var(--s5)}
.gl-eintrag:target{background:none;padding-left:0;padding-right:0}
}

/* Kontrastmodus von Windows: Masken-Zeichen färbt sonst die Systemfarbe des
   Hintergrunds ein, und sie verschwinden. Dort stehen sie in Schriftfarbe. */
@media (forced-colors:active){
.btn-gefahr::before,#stateExport::before,#stateImportBtn::before,.exreset::before,.hero-chips li::before,
.aufklappen::before,.kapitel-knopf::after,table.daten td[data-regel]::before,.warn::before,.privnote::before,
.glossar-hinweis::before,.toast::before,.task::before,.check[aria-pressed="true"] .box,.shot>summary::before,
.rbtn.sel::before,.noscript b::before,.altlast::before,.suche-kopf::before{forced-color-adjust:none;background-color:CanvasText}}