/* ============================================================
   Kursplattform 28Solutions
   Design-System "Papier und Präzision", übernommen von der
   Firmenwebsite (28solutions.ai). Gleiche Schrift, gleiche
   Farben, gleiche Formsprache: der Kursbereich soll erkennbar
   zur Firma gehören.

   Alle Schriften liegen lokal unter static/fonts. Es wird
   nichts von fremden Servern geladen, das ist Absicht und
   datenschutzrechtlich gewollt (siehe CSP in __init__.py).
   ============================================================ */

/* ---------- Schriften ---------- */

@font-face {
  font-family: 'Clash Display';
  src: url('fonts/clash-display-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('fonts/clash-display-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gambetta';
  src: url('fonts/gambetta-500i.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Fragment Mono';
  src: url('fonts/fragment-mono-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  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: 'Fragment Mono';
  src: url('fonts/fragment-mono-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  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;
}

/* ---------- Farben und Masse ---------- */

:root {
  --paper: #ffffff;
  --paper-2: #f6f6f4;
  --ink: #16161a;
  --ink-70: rgba(22, 22, 26, 0.72);
  --ink-55: rgba(22, 22, 26, 0.62);
  --line: rgba(22, 22, 26, 0.16);
  --line-soft: rgba(22, 22, 26, 0.09);
  --blue: #2438c9;
  --blue-deep: #1c2da8;
  --blue-tint: rgba(36, 56, 201, 0.07);
  /* Der dunkle Satz ist kein Restbestand des alten Dunkeldesigns, sondern
     gehört zum Markendesign: die Firmenwebsite setzt ihren Fuss ebenfalls
     dunkel ab. Hier trägt ihn nur noch footer.fuss. Alles andere ist hell.
     --dark-2 und --dark-line bleiben stehen, damit der Farbsatz mit dem
     der Firmenwebsite deckungsgleich bleibt. */
  --dark: #101014;
  --dark-2: #17171c;
  --dark-line: rgba(255, 255, 255, 0.14);
  --dark-text: #f2f2f0;
  --dark-text-soft: rgba(242, 242, 240, 0.62);
  --amber: #c9873a;       /* nur für Flächen und Rahmen: 2,8:1 auf Papier */
  --amber-ink: #8f5c14;   /* derselbe Ton als Schriftfarbe, 5,2:1, AA */
  --ok: #1a6b45;          /* dunkles Grün, AA auf Papier */
  --ok-tint: rgba(26, 107, 69, 0.09);
  --bad: #b0231c;         /* dunkles Rot, AA auf Papier */
  --bad-tint: rgba(176, 35, 28, 0.08);

  --font-display: 'Clash Display', 'Segoe UI', sans-serif;
  --font-text: 'Switzer', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Fragment Mono', Consolas, monospace;
  --font-serif: 'Gambetta', Georgia, serif;

  --radius: 10px;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --kopf: 4.1rem;         /* Höhe der Kopfleiste, für sticky-Abstände */

  /* Altnamen aus der ersten Fassung. Einzelne Lektionstexte greifen sie
     noch inline ab; sie zeigen jetzt auf die Markenfarben, damit nichts
     ins Leere läuft. Neue Auszeichnungen bitte nicht mehr damit bauen. */
  --bg: var(--paper);
  --panel: var(--paper-2);
  --panel2: var(--paper-2);
  --line2: var(--line);
  --gold: var(--blue);
  --gold-soft: var(--blue);
  --mut: var(--ink-70);
  --dim: var(--ink-55);
  --ivory: var(--paper);
  --label: var(--font-display);
  --text: var(--font-text);
}

/* ---------- Grundlagen ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: 'ss01' on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
img, svg { max-width: 100%; }
a { color: inherit; }
::selection { background: var(--blue); color: #fff; }

button, input, textarea, select { font: inherit; color: inherit; }

/* Sichtbarer Tastaturfokus, überall und in derselben Sprache.
   Ohne das ist die Plattform für Tastaturnutzer blind bedienbar. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sprungmarke: unsichtbar, bis sie per Tabulator Fokus bekommt. */
.skiplink {
  position: fixed; top: 0.7rem; left: 0.7rem; z-index: 3100;
  padding: 0.6rem 1.1rem; border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font-size: 0.9rem; font-weight: 500; text-decoration: none;
  outline: 2px solid var(--blue); outline-offset: 2px;
  transform: translateY(calc(-100% - 2rem));
}
.skiplink:focus, .skiplink:focus-visible { transform: none; }

/* Serifen-Akzent in Überschriften, wie auf der Firmenwebsite */
em.acc {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  letter-spacing: 0; font-size: 1.04em;
}
.blau { color: var(--blue); }

/* ---------- Kopfleiste ---------- */

.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.top-in {
  width: min(1120px, calc(100vw - clamp(2rem, 6vw, 5rem)));
  margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
  padding-block: 0.75rem;
  min-height: var(--kopf);
}

.brand {
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem;
  letter-spacing: -0.01em; text-decoration: none; color: var(--ink);
  white-space: nowrap; display: inline-flex; align-items: baseline; gap: 0.6rem;
}
.brand b { font-weight: 600; color: var(--blue); }
/* Die Acht kippt beim Überfahren zur Unendlichkeit, wie auf der
   Firmenwebsite. Nur transform, damit die Kopfleiste nicht wandert. */
.brand .b8, .brand b {
  display: inline-block; transform-origin: 50% 50%;
  transition: transform 0.6s cubic-bezier(0.2, 1.5, 0.35, 1);
}
.brand:hover .b8, .brand:focus-visible .b8 { transform: translate(0.075em, -0.04em) rotate(90deg); }
.brand:hover b, .brand:focus-visible b { transform: translateX(0.175em); }
.brand .wortmarke { white-space: nowrap; }
.brand-zusatz {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-55);
}

.top-nav {
  margin-left: auto;
  display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.7rem);
  flex-wrap: wrap;
}

.top-nav a, .top-nav button {
  font-size: 0.94rem; font-weight: 500; text-decoration: none;
  color: var(--ink-70); background: none; border: 0; cursor: pointer;
  padding-block: 0.5rem; margin-block: -0.5rem;   /* grössere Tap-Fläche */
  position: relative; transition: color 0.2s;
}

.top-nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0.3rem;
  width: 100%; height: 1px; background: var(--blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.top-nav a:hover, .top-nav a[aria-current='page'] { color: var(--ink); }
.top-nav a:hover::after,
.top-nav a[aria-current='page']::after { transform: scaleX(1); }
.top-nav button:hover { color: var(--ink); }
.top-nav form { margin: 0; display: flex; }

/* ---------- Layout ---------- */

.wrap {
  width: min(1120px, calc(100vw - clamp(2rem, 6vw, 5rem)));
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.2rem) 0 clamp(3rem, 6vw, 5rem);
  flex: 1;
}
.lesewrap { width: min(720px, calc(100vw - clamp(2rem, 6vw, 5rem))); }
.schmal { width: min(430px, calc(100vw - 2rem)); padding-top: clamp(2.5rem, 8vh, 5rem); }

/* Seitenkopf: Kicker, Titel, Unterzeile. Ein Muster für alle Seiten. */
.kopfzeile { margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.kopfzeile h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  margin-top: 1rem; overflow-wrap: break-word;
}
.kopfzeile .lead { margin-top: 0.9rem; }

footer.fuss {
  background: var(--dark); color: var(--dark-text-soft);
  padding: clamp(1.6rem, 3vw, 2.2rem) 0;
  font-size: 0.85rem;
}
.fuss-in {
  width: min(1120px, calc(100vw - clamp(2rem, 6vw, 5rem)));
  margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 0.6rem 2rem;
  justify-content: space-between; align-items: baseline;
}
.fuss-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }
footer.fuss a {
  color: var(--dark-text); text-decoration: none; opacity: 0.85;
  display: inline-block; padding: 0.5rem 0.2rem; margin: -0.5rem -0.2rem;
  transition: opacity 0.2s;
}
footer.fuss a:hover { opacity: 1; text-decoration: underline; }
footer.fuss :focus-visible { outline-color: #fff; }

/* ---------- Typo-Bausteine ---------- */

/* Kicker mit dem Zeichen der Firma: die kleine Unendlichkeit. */
.kicker, .lese .kopf .zu, .zu {
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55);
  margin: 0;
}
.kicker::before, .lese .kopf .zu::before, .zu::before {
  content: ''; width: 22px; height: 12px; flex: 0 0 auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 52'%3E%3Cpath d='M10,26 C10,8 42,8 50,26 C58,44 90,44 90,26 C90,8 58,8 50,26 C42,44 10,44 10,26' fill='none' stroke='%232438c9' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.kicker::after, .lese .kopf .zu::after, .zu::after {
  content: ''; flex: 1; align-self: center; height: 1px; background: var(--line);
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.6;
  color: var(--ink-70); max-width: 40em;
}
.fein { font-size: 0.85rem; line-height: 1.6; color: var(--ink-55); }
.gedaempft { color: var(--ink-70); }
.mono { font-family: var(--font-mono); font-size: 0.9em; }

/* Abstands-Helfer, damit im Markup keine style-Attribute mehr nötig sind. */
.luft-s { margin-top: 0.8rem; }
.luft { margin-top: 1.4rem; }
.luft-l { margin-top: 2.4rem; }

.tlink {
  color: var(--ink); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--ink-55);
  transition: color 0.2s, text-decoration-color 0.2s;
}
.tlink:hover { color: var(--blue); text-decoration-color: var(--blue); }

/* "Mehr"-Link mit wachsendem Pfeil */
.mlink {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.06em;
  text-decoration: none; color: var(--ink);
  padding-block: 0.55rem; margin-block: -0.55rem;
}
.mlink i {
  font-style: normal; display: inline-block; width: 1.6em; height: 1px;
  background: var(--ink); position: relative;
  transition: width 0.25s var(--ease), background 0.2s;
}
.mlink i::after {
  content: ''; position: absolute; right: 0; top: -2.5px;
  width: 6px; height: 6px;
  border-top: 1px solid var(--ink); border-right: 1px solid var(--ink);
  transform: rotate(45deg); transition: border-color 0.2s;
}
.mlink:hover { color: var(--blue); }
.mlink:hover i { width: 2.4em; background: var(--blue); }
.mlink:hover i::after { border-color: var(--blue); }

/* ---------- Knöpfe ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.5rem; border-radius: var(--radius);
  font-family: var(--font-text); font-weight: 500; font-size: 0.98rem;
  line-height: 1.2; text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
    border-color 0.22s var(--ease), transform 0.18s var(--ease);
}
.btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn:active { transform: translateY(1px); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Der hervorgehobene Weg: genau ein blauer Knopf je Seite. */
.btn-blau { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-blau:hover { background: var(--blue-deep); border-color: var(--blue-deep); }

.btn-mini { padding: 0.45rem 0.9rem; font-size: 0.86rem; }
.btn[disabled], .btn[aria-disabled='true'] {
  opacity: 0.4; cursor: not-allowed; transform: none;
}
.btn-reihe { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* ---------- Formulare ---------- */

label.feld {
  display: block; font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-55);
  margin: 1.1rem 0 0.4rem;
}
label.feld .pflicht { color: var(--blue); }

input[type=text], input[type=email], input[type=password], textarea, select {
  width: 100%; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.7rem 0.85rem; font-size: 1rem; font-family: var(--font-text);
  transition: border-color 0.2s;
}
input::placeholder, textarea::placeholder { color: var(--ink-55); }
input:hover, textarea:hover { border-color: var(--ink-55); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--blue); outline: 2px solid var(--blue); outline-offset: 0;
}
textarea { min-height: 6rem; resize: vertical; }

.feldpaar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.feld-fehler { border-color: var(--bad) !important; }
.fehlertext {
  display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--bad);
}

/* Häkchen-Zeile: Zustimmungen im Bestellweg (AGB, Widerruf).
   Bewusst nie vorangekreuzt, grosse Klickfläche, Text bleibt lesbar. */
.haken {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem;
  align-items: start; padding: 0.7rem 0; font-size: 0.94rem;
  line-height: 1.5; cursor: pointer;
}
.haken + .haken { border-top: 1px solid var(--line-soft); }
.haken input[type=checkbox] {
  width: 1.15rem; height: 1.15rem; margin-top: 0.18rem;
  accent-color: var(--blue); cursor: pointer;
}
.haken a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Karten und Hinweise ---------- */

/* Karte im Stil der Firmenwebsite: keine Wanne, sondern eine feine
   Oberkante mit kurzem Anstrich, der beim Überfahren durchläuft. */
.karte {
  position: relative; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.karte::before {
  content: ''; position: absolute; top: -1px; left: 0;
  width: 2.4rem; height: 1px; background: var(--ink);
  transition: width 0.45s var(--ease), background 0.3s;
}
.karte:hover::before { width: 100%; background: var(--blue); }
.karte h2, .karte h3 { font-size: 1.25rem; font-weight: 500; }
.karte > * + * { margin-top: 0.7rem; }
.karte + .karte { margin-top: 2.2rem; }

/* Karte mit Wanne, wenn ein Block wirklich abgesetzt gehört
   (Anmeldung, Ergebnis, Bestellübersicht). */
.karte-flaeche {
  background: var(--paper-2); border: 1px solid var(--line-soft);
  border-radius: 14px; padding: clamp(1.3rem, 3vw, 1.8rem);
  border-top: 1px solid var(--line-soft);
}
.karte-flaeche::before { display: none; }
.karte-flaeche + .karte-flaeche { margin-top: 1.2rem; }

.kacheln {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.6rem, 3.5vw, 2.8rem);
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
}

/* Hinweisboxen. Drei Tonlagen, sonst nichts. */
.hinweis {
  border-left: 2px solid var(--blue); background: var(--blue-tint);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.85rem 1.1rem; margin-bottom: 1.2rem;
  font-size: 0.95rem; color: var(--ink);
}
.hinweis a { color: var(--blue); }
.hinweis-ok { border-left-color: var(--ok); background: var(--ok-tint); }
.hinweis-warn { border-left-color: var(--bad); background: var(--bad-tint); }
.hinweis p + p { margin-top: 0.5rem; }

.chip {
  display: inline-block; font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-70);
  border: 1px solid var(--line); border-radius: 99px; padding: 0.2rem 0.65rem;
  white-space: nowrap;
}
.chip-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.chip-bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.chip-blau { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.chip-reihe { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }

/* ---------- Fortschritt ---------- */

.fortschritt {
  display: flex; align-items: center; gap: 1.2rem;
  margin: 0 0 1.6rem;
}
.balken {
  flex: 1; height: 3px; background: var(--line-soft); border-radius: 99px;
  overflow: hidden;
}
.balken i { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
.balken-text {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-55); white-space: nowrap;
}

/* ---------- Lektionsliste ---------- */

.lektionen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

.lektion-item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto 2.4rem;
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: padding-left 0.3s var(--ease);
}
.lektion-item:hover { padding-left: 0.6rem; }

.lektion-item .nr {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-55); line-height: 1.5;
}
.lektion-item .t strong {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem); letter-spacing: -0.01em;
  line-height: 1.2; transition: color 0.25s;
}
.lektion-item .t span {
  display: block; margin-top: 0.35rem; font-size: 0.94rem;
  color: var(--ink-70); line-height: 1.5;
}
.lektion-item:hover .t strong { color: var(--blue); }

.lektion-item .status {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-55); text-align: right;
  line-height: 1.6; white-space: nowrap;
}
.lektion-item .status.done { color: var(--ok); }

/* Der Pfeilkreis rechts, wie in der Lösungsliste der Firmenwebsite */
.lektion-item::after {
  content: ''; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--line); position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='%2316161a' stroke-width='1.3'/%3E%3C/svg%3E");
  background-size: 15px; background-repeat: no-repeat; background-position: center;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.lektion-item:hover::after {
  background-color: var(--ink); border-color: var(--ink); transform: scale(1.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='%23ffffff' stroke-width='1.3'/%3E%3C/svg%3E");
}

/* Die eine Zeile, die sagt, wo es weitergeht. */
.weiterlernen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
  background: var(--paper-2); border-radius: 14px;
  padding: clamp(1.2rem, 2.5vw, 1.6rem) clamp(1.2rem, 3vw, 1.8rem);
  margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}
.weiterlernen .wl-text { flex: 1 1 18rem; }
.weiterlernen .wl-text strong {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem); letter-spacing: -0.01em;
  line-height: 1.2; margin-top: 0.5rem;
}
.weiterlernen .wl-text .fein { margin-top: 0.4rem; }

/* ---------- Lektionstext ---------- */

.lese { font-size: 1.08rem; }
.lese .kopf { margin-bottom: clamp(2rem, 4vw, 2.8rem); }
.lese h1 {
  font-size: clamp(2rem, 4.6vw, 3rem); margin: 1rem 0 0;
  overflow-wrap: break-word;
}
.lese .sub {
  color: var(--ink-70); font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6; margin-top: 0.9rem; max-width: 40em;
}
.lese h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.75rem); font-weight: 500;
  margin: 3rem 0 1rem; padding-top: 1.8rem; border-top: 1px solid var(--line);
}
.lese h3 {
  font-size: 1.15rem; font-weight: 500; margin: 2rem 0 0.6rem; color: var(--ink);
}
.lese p { margin-bottom: 1.1rem; color: var(--ink-70); }
.lese ul, .lese ol { margin: 0 0 1.2rem; padding-left: 1.3rem; color: var(--ink-70); }
.lese li { margin-bottom: 0.5rem; }
.lese strong { color: var(--ink); font-weight: 600; }
.lese a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Knöpfe und Pfeil-Links im Lesetext bleiben Knöpfe, nicht unterstrichene Wörter. */
.lese a.btn, .lese a.mlink, .rechtstext a.btn { text-decoration: none; }

.lese table, .tab-fein {
  width: 100%; border-collapse: collapse; margin: 1.3rem 0 1.6rem;
  font-size: 0.94rem;
}
.lese th, .tab-fein th {
  font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-55); text-align: left; font-weight: 400;
}
.lese th, .lese td, .tab-fein th, .tab-fein td {
  border-bottom: 1px solid var(--line-soft);
  padding: 0.6rem 0.8rem 0.6rem 0; vertical-align: top;
}
.lese td { color: var(--ink-70); }
.lese thead th, .tab-fein thead th { border-bottom-color: var(--line); }

/* Merksatz */
.merk {
  border-left: 2px solid var(--blue); background: var(--blue-tint);
  border-radius: 0 12px 12px 0; padding: 1rem 1.2rem; margin: 1.6rem 0;
}
.merk .mlabel {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 0.4rem;
}
.merk p { color: var(--ink); }
.merk p:last-child { margin-bottom: 0; }

/* Beispielkasten */
.bsp {
  background: var(--paper-2); border-radius: 12px;
  padding: 1.1rem 1.25rem; margin: 1.6rem 0;
}
.bsp .blabel {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-55); margin-bottom: 0.5rem;
}
.bsp p { color: var(--ink-70); }
.bsp p:last-child, .bsp pre:last-child { margin-bottom: 0; }
.bsp pre {
  white-space: pre-wrap; font-family: var(--font-mono); font-size: 0.85rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 0.9rem 1rem; margin: 0.6rem 0 0.9rem; line-height: 1.6;
  overflow-x: auto;
}
.gut { color: var(--ok); font-weight: 600; }
.schlecht { color: var(--bad); font-weight: 600; }
.mittel { color: var(--amber-ink); font-weight: 600; }

/* Schaubilder: helle Tafel wie der Beispielkasten, nur ruhiger gerahmt.
   Die Zeichnungen selbst sind auf die Markenfarben gestellt (Tinte,
   Ultramarin, Papier), sie leben also im selben Licht wie der Text
   drumherum. Die Kästen in den Zeichnungen sind weiss und heben sich
   dadurch von der Tafel ab, genau wie Karten auf Papier. */
figure.viz {
  background: var(--paper-2); border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1rem, 2.5vw, 1.5rem) 1.1rem;
  margin: 2rem 0; text-align: center; overflow-x: auto;
  color: var(--ink);
  break-inside: avoid;
}
figure.viz svg { display: block; margin: 0 auto; height: auto; }
/* Grundschrift aller Zeichnungen. Einzelne Klassen setzen nur noch
   Grösse, Gewicht und Farbe, nicht mehr die Schriftfamilie. */
figure.viz svg text { font-family: var(--font-text); }
figure.viz figcaption {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.05em;
  color: var(--ink-55); margin-top: 1rem; text-align: center;
}

.weiter-nav {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: clamp(2.6rem, 5vw, 3.6rem); padding-top: 1.8rem;
  border-top: 1px solid var(--line); flex-wrap: wrap;
}

/* ---------- Quiz und Test ---------- */

.quizblock {
  margin-top: clamp(3rem, 6vw, 4rem); padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.quizblock h2 { border-top: 0; padding-top: 0; margin-top: 0; }

.frage { margin-bottom: 1.8rem; }
.frage .ftext { font-weight: 600; color: var(--ink); margin-bottom: 0.7rem; }
.frage .fnr { font-family: var(--font-mono); color: var(--blue); margin-right: 0.5rem; }

.optionen { display: grid; gap: 0.5rem; }
.optionen label {
  display: flex; gap: 0.7rem; align-items: baseline;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.7rem 1rem; cursor: pointer;
  font-size: 0.98rem; color: var(--ink-70);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.optionen label:hover { border-color: var(--ink-55); }
.optionen label:has(input:checked) {
  border-color: var(--blue); background: var(--blue-tint); color: var(--ink);
}
.optionen label:has(input:focus-visible) {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
.optionen input { accent-color: var(--blue); flex: 0 0 auto; }

.q-res {
  border-left: 2px solid var(--line); padding: 0.2rem 0 0.2rem 1.1rem;
  margin-bottom: 1.6rem;
}
.q-res.ok { border-left-color: var(--ok); }
.q-res.falsch { border-left-color: var(--bad); }
.q-res .qfrage { font-weight: 600; color: var(--ink); }
.q-res .antw { font-size: 0.94rem; margin: 0.4rem 0; color: var(--ink-70); }
.q-res .warum {
  font-size: 0.94rem; color: var(--ink-70); background: var(--paper-2);
  border-radius: 8px; padding: 0.7rem 0.9rem; margin-top: 0.6rem;
}

.countdown {
  position: sticky; top: calc(var(--kopf) + 0.6rem); z-index: 40;
  margin-left: auto; width: max-content;
  background: var(--ink); color: var(--paper);
  border-radius: 99px; padding: 0.4rem 1rem;
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.05em;
}
.countdown.knapp { background: var(--bad); }

.abgabe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem;
  padding-top: 1.4rem; border-top: 1px solid var(--line); margin-top: 2rem;
}

.score-gross {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 4rem); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.score-gross small { font-size: 0.4em; color: var(--ink-55); font-weight: 500; }

/* ---------- Zertifikat prüfen ---------- */

.v-karte {
  border-left: 2px solid var(--line); padding: 0.4rem 0 0.4rem 1.3rem;
  margin-top: 1.6rem;
}
.v-karte.gueltig { border-left-color: var(--ok); }
.v-karte.problem { border-left-color: var(--bad); }
.v-karte dl {
  display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.6rem;
  margin: 1.1rem 0 0;
}
.v-karte dt {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-55);
  text-transform: uppercase; letter-spacing: 0.08em; padding-top: 0.15rem;
}
.v-karte dd { margin: 0; font-size: 1rem; color: var(--ink); }

.suchzeile { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.suchzeile input { flex: 1; min-width: 15rem; font-family: var(--font-mono); }

/* ---------- Tabellen (Verwaltung) ---------- */

.tab { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tab th {
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-55); text-align: left; font-weight: 400;
  border-bottom: 1px solid var(--line);
}
.tab td { border-bottom: 1px solid var(--line-soft); color: var(--ink-70); }
.tab th, .tab td { padding: 0.6rem 0.7rem 0.6rem 0; vertical-align: top; }
.tab tr:hover td { background: var(--paper-2); }
.tab .mono { font-family: var(--font-mono); font-size: 0.8rem; }
.tab-rollen { overflow-x: auto; }
.tab tr.inaktiv td { opacity: 0.45; }
.tab td.aktionen { white-space: nowrap; }
.inline-form { display: inline; }
.inline-form + .inline-form { margin-left: 0.3rem; }

.linkbox {
  font-family: var(--font-mono); font-size: 0.78rem; word-break: break-all;
  background: var(--paper-2); border-radius: 8px;
  padding: 0.6rem 0.8rem; margin-top: 0.4rem; color: var(--ink-70);
}

/* ============================================================
   Bausteine für den Bestellweg (Stripe-Checkout, kommt später)
   Angelegt von web, damit produkt sie benutzen kann statt neue
   zu erfinden. Sie werden hier noch nicht verwendet.
   ============================================================ */

/* Schrittanzeige über dem Bestellformular: "Schritt 2 von 3" */
.schritte {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; align-items: center;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-55);
  padding-bottom: 1.2rem; margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--line);
}
.schritte .schritt { display: flex; align-items: center; gap: 0.5rem; }
.schritte .schritt::before {
  content: ''; width: 1.4rem; height: 1px; background: var(--line);
}
.schritte .schritt.aktiv { color: var(--blue); }
.schritte .schritt.aktiv::before { background: var(--blue); }
.schritte .schritt.erledigt { color: var(--ink-70); }
.schritte .schritt.erledigt::before { background: var(--ink-70); }

/* Preisangabe. Immer Gesamtpreis, immer mit Stand-Datum darunter. */
.preis { margin: 1.4rem 0; }
.preis-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; }
.preis-gross {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 2.4rem); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.preis-zusatz { font-size: 0.86rem; color: var(--ink-55); }
.preis-fein { font-size: 0.82rem; color: var(--ink-55); margin-top: 0.3rem; }

/* Prüfseite vor dem Bestellknopf: Eingaben nochmals, jede änderbar. */
.pruefliste { border-top: 1px solid var(--line); margin: 1.4rem 0; }
.pruefliste .zeile {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto;
  gap: 0.4rem 1.2rem; align-items: baseline;
  padding: 0.8rem 0; border-bottom: 1px solid var(--line-soft);
}
.pruefliste dt, .pruefliste .was {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-55);
}
.pruefliste dd, .pruefliste .wert { margin: 0; color: var(--ink); }
.pruefliste .aendern { font-size: 0.85rem; }

/* Zusammenfassung unmittelbar über dem Bestellknopf (§ 312j BGB) */
.bestellkasten {
  background: var(--paper-2); border-radius: 14px;
  padding: clamp(1.2rem, 3vw, 1.7rem); margin: 1.8rem 0;
}
.bestellkasten .btn { width: 100%; margin-top: 1.2rem; }

/* Rechtstexte (AGB, Widerrufsbelehrung, Impressum, Datenschutz) */
.rechtstext { max-width: 46em; }
.rechtstext h2 {
  font-size: 1.4rem; font-weight: 500; margin: 2.6rem 0 0.8rem;
}
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { font-size: 1.05rem; font-weight: 600; margin: 1.6rem 0 0.5rem; }
.rechtstext p { margin-bottom: 1rem; color: var(--ink-70); }
.rechtstext ul, .rechtstext ol { margin: 0 0 1rem; padding-left: 1.3rem; color: var(--ink-70); }
.rechtstext li { margin-bottom: 0.5rem; }
.rechtstext strong { color: var(--ink); }
.rechtstext a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rechtstext .stand {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--ink-55); margin-bottom: 2rem;
}

/* ---------- Vorlagen und Druck ---------- */

.vorlage {
  background: var(--paper-2); border-radius: 14px;
  padding: clamp(1.4rem, 3vw, 2rem); margin-bottom: 1.6rem;
}
.vorlage h2 { border: 0; padding-top: 0; margin-top: 0; }
.vorlage table { background: var(--paper); border-radius: 8px; }

@media print {
  body { background: #fff; color: #111; font-size: 11pt; display: block; }
  .top, footer.fuss, .no-print, .hinweis, .skiplink, .weiter-nav { display: none !important; }
  .wrap, .lesewrap { padding: 0; width: auto; max-width: none; }
  .vorlage {
    border: 0; padding: 0; margin: 0 0 2rem; background: #fff;
    page-break-inside: avoid;
  }
  .vorlage table { background: none; }
  .lese th, .lese td, .tab-fein th, .tab-fein td { border-color: #bbb; }
  .lese th, .tab-fein th { color: #333; }
  .lese p, .lese li, .lese td { color: #111; }
  .merk { background: #f0f1f8; }
  /* Schaubilder drucken auf weissem Grund, nur mit feiner Kante.
     Vorher lag hier eine dunkle Tafel, die eine halbe Patrone kostete. */
  figure.viz { background: #fff; border-color: #ccc; padding: 0.6rem 0; }
  figure.viz figcaption { color: #333; }
  a { color: #111; text-decoration: none; }
  .karte::before { display: none; }
}

/* ---------- Schmale Fenster und Telefone ---------- */

@media (max-width: 760px) {
  /* Auf dem Telefon soll die Kopfleiste beim Lesen aus dem Weg gehen. */
  .top { position: static; }
  .top-in {
    flex-direction: column; align-items: stretch; gap: 0.2rem;
    padding-block: 0.7rem 0;
  }
  .top-nav {
    margin-left: 0; gap: 0 1.1rem; padding-top: 0.2rem; padding-bottom: 0;
    border-top: 1px solid var(--line-soft); margin-top: 0.5rem;
  }
  .top-nav a, .top-nav button { font-size: 0.9rem; padding-block: 0.55rem; margin-block: 0; }
  .top-nav a::after { bottom: 0.35rem; }
  .kicker, .lese .kopf .zu, .zu { font-size: 0.68rem; letter-spacing: 0.1em; }
  .countdown { top: 0.6rem; }

  .lektion-item {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nr status" "titel titel";
    gap: 0.5rem 1rem;
  }
  .lektion-item .nr { grid-area: nr; }
  .lektion-item .status { grid-area: status; }
  .lektion-item .t { grid-area: titel; }
  .lektion-item::after { display: none; }
  .lektion-item:hover { padding-left: 0; }

  /* Schaubilder nicht bis zur Unlesbarkeit schrumpfen lassen: unter der
     Mindestbreite wird die Tafel seitlich scrollbar. Lieber wischen als
     Sieben-Pixel-Schrift. */
  figure.viz { padding-inline: 0.9rem; }
  figure.viz svg { min-width: 460px; }

  .feldpaar { grid-template-columns: minmax(0, 1fr); }
  .v-karte dl { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .v-karte dd { margin-bottom: 0.7rem; }
  .pruefliste .zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .weiter-nav > * { flex: 1 1 14rem; }
  .fuss-in { flex-direction: column; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}