/* ============================================================
   mitnehmen.css · Freebie-Seiten flowberatung.de · Stand 22.09.2026
   Ergänzt site.css, ersetzt nichts. Nur Token aus site.css (--t-*, --k-*,
   --z-*, --nav-h, --accent-h). Wird nach site.css geladen.
   ============================================================ */

/* ---------- Schriftwechsel ohne Verschieben (CLS, gemessen 23.09.2026: 0,10 auf dem Handy) ----------
   Bis Inter geladen ist, steht eine Ersatzschrift mit Inter-Maßen da. So bricht der Text
   beim Wechsel nicht um. Nur lokale Schriften, kein Aufruf nach außen. */
@font-face {
  font-family: "Inter Ersatz";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cormorant Ersatz";
  font-style: italic;
  font-weight: 600;
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Times New Roman");
  size-adjust: 85.8%;
}
/* Laufweite gemessen 23.09.2026: Inter/Arial 1,06–1,07; Cormorant 600 kursiv/Times New Roman kursiv 0,858 */
.mn-seite { --font-main: 'Inter', 'Inter Ersatz', sans-serif; --font-serif: 'Cormorant Garamond', 'Cormorant Ersatz', serif; }

/* ---------- Lesefluss: Blocksatz für Fließtext wie in den Artikeln ---------- */
.mn-seite .mn-inhalt { max-width: 74ch; margin-inline: auto; } /* 23.09.2026: Textspalte mittig wie in den Artikeln */
.mn-seite .mn-inhalt--breit { max-width: none; }
.mn-seite .mn-inhalt p,
.mn-seite .mn-inhalt li,
.mn-seite .ww-sheet p.mn-text {
  text-align: justify;
  text-align-last: left;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
/* Absätze und Zwischenüberschriften nur als direkte Kinder eines Abschnitts,
   damit Hinweiskästen, Klappfragen und Karten ihre eigene Gestalt behalten. */
.mn-seite .mn-abschnitt > p { margin: 0 0 1.1rem; color: var(--t-ink-2); line-height: 1.7; }
.mn-seite .mn-inhalt--breit > .mn-abschnitt > p { max-width: 74ch; }
.mn-h2 {
  margin: 3rem 0 1rem;
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.024em;
  color: var(--t-ink);
  text-wrap: balance;
}
.mn-abschnitt:first-child > .mn-h2 { margin-top: 0; }
.mn-seite .mn-abschnitt > h3 { font-size: 1.1rem; margin: 1.8rem 0 .6rem; color: var(--t-ink); }
.mn-seite .mn-inhalt strong { color: var(--t-ink); }
.mn-seite .mn-inhalt a { color: var(--t-accent-vivid); text-decoration: underline; text-underline-offset: 3px; }
.mn-seite .mn-inhalt a:hover { color: var(--t-accent); }
[data-nav-theme="dark"] .mn-inhalt a { color: hsl(var(--accent-h) 85% 72%); }
.mn-seite .mn-inhalt .ww-note p,
.mn-seite .mn-inhalt .ww-note li,
.mn-seite .mn-inhalt .ww-lesetipp__text,
.mn-seite .mn-inhalt .ww-timeline p,
.mn-seite .mn-inhalt figcaption,
.mn-seite .mn-inhalt .ww-table td,
.mn-seite .mn-inhalt .ww-table th { text-align: left; text-align-last: auto; hyphens: manual; -webkit-hyphens: manual; }
.mn-seite .mn-inhalt .ww-table-wrap { max-width: none; margin: 1.2rem 0 1.6rem; }
.mn-seite .mn-inhalt ul.ww-list { margin: .6rem 0 1.4rem; }
.mn-seite .mn-inhalt ol.mn-liste { margin: .4rem 0 1.4rem 1.3rem; padding: 0; color: var(--t-ink-2); }
.mn-seite .mn-inhalt ol.mn-liste li { margin: 0 0 .5rem; }
.mn-seite .mn-inhalt .ww-note { margin: 1.4rem 0 1.8rem; }
.mn-seite .mn-inhalt .ww-timeline { margin: 1.2rem 0 2rem; }
.mn-seite .mn-inhalt .ww-faq-grid { grid-template-columns: 1fr; gap: 0; margin: .8rem 0 1.6rem; }
.mn-seite .mn-inhalt .ww-faq-inner .ww-list { margin: .6rem 0 .4rem; }
.mn-seite .mn-inhalt .ww-lesetipp-grid { margin: 1rem 0 2rem; }
.mn-seite .mn-inhalt .ww-table td:first-child { font-weight: 600; color: var(--t-ink); }
.mn-seite .ww-eyebrow a { color: inherit; text-decoration: none; }
.mn-seite .ww-eyebrow a:hover, .mn-seite .ww-eyebrow a:focus-visible { text-decoration: underline; }

/* ---------- Hero der Leseseiten ---------- */
.mn-hero { max-width: 62rem; }
.mn-hero .ww-lead { margin-bottom: 0; }

/* ---------- Akzenttext bei jedem Farbton lesbar (Farbregler 0–360) ----------
   site.css setzt die Akzentfarbe mit fester HSL-Helligkeit. Bei Gelb und Grün im
   hellen Modus und bei Blau im dunklen Modus fällt Akzenttext damit unter 4,5:1
   (gemessen am 23.09.2026: 1,7 bis 3,9). Hier wird nur die wahrgenommene Helligkeit
   begrenzt, Farbton und Sättigung bleiben. Beim Standardton 215 ändert sich nichts
   Sichtbares. Browser ohne relative Farbsyntax behalten die bisherige Farbe. */
@supports (color: oklch(from red min(l, 0.5) c h)) {
  html:not([data-mode="dark"]) .mn-seite .ww-sheet--light :is(.ww-lesetipp__marke, .ww-lesetipp__mehr, .mn-inhalt a, .ww-note h3, .mn-weiter a) {
    color: oklch(from var(--t-accent-vivid) min(l, 0.47) c h);
  }
  html[data-mode="dark"] .mn-seite .ww-sheet--light :is(.ww-lesetipp__marke, .ww-lesetipp__mehr, .mn-inhalt a, .ww-note h3, .mn-weiter a) {
    color: oklch(from var(--t-accent-vivid) max(l, 0.78) c h);
  }
}

/* ---------- Dunkle Abschnitte im dunklen Modus (23.09.2026) ----------
   toneTheme() gibt data-tone="invert" im dunklen Modus helle Token, .ww-sheet--dark malt aber immer schwarz
   (dieselbe Ursache wie Befund A2). Auf den neuen Seiten gelten auf dunklen Abschnitten in beiden Modi die
   dunklen Token; die Abschnitte sehen dadurch hell und dunkel gleich aus. */
html[data-mode="dark"] .mn-seite :is(.ww-sheet--dark, .ww-sheet--darker) {
  --t-paper: var(--hd-bg); --t-panel: var(--hd-surface);
  --t-ink: var(--hd-text); --t-ink-2: var(--hd-muted);
  --t-border: var(--hd-border); --t-chrome: var(--hd-chrome);
  --t-accent: hsl(var(--accent-h) 85% 68%);
  --t-accent-vivid: hsl(var(--accent-h) 90% 60%);
  --t-accent-wash: hsl(var(--accent-h) 70% 55% / .14);
}
/* Kleine Akzentschriften bei jedem Farbton lesbar (Regler 0–360). Beim Standardton 215 bleibt die Farbe gleich:
   hell höchstens L 0,47, dunkel mindestens L 0,62 (OKLCH). */
@supports (color: oklch(from red min(l, 0.5) c h)) {
  html:not([data-mode="dark"]) .mn-seite .ww-sheet--light :is(.ww-eyebrow:not(.ww-eyebrow--muted), .ww-em, .ww-timeline__when) {
    color: oklch(from var(--t-accent-vivid) min(l, 0.47) c h); -webkit-text-fill-color: currentColor;
  }
  html[data-mode="dark"] .mn-seite .ww-sheet--light :is(.ww-eyebrow:not(.ww-eyebrow--muted), .ww-em, .ww-timeline__when),
  .mn-seite :is(.ww-sheet--dark, .ww-sheet--darker) :is(.ww-eyebrow:not(.ww-eyebrow--muted), .ww-em, .ww-timeline__when) {
    color: oklch(from var(--t-accent-vivid) max(l, 0.72) c h); -webkit-text-fill-color: currentColor;
  }
  /* Wortmarken-Unterzeile und Fuß-Abzeichen: dieselbe Sicherung. Der Fuß folgt seinem Thema.
     Die Kopfleiste ist im dunklen Modus immer dunkel (A6), darum zählt dort der Modus mit. */
  html:not([data-mode="dark"]) .mn-seite .ww-header[data-nav-theme="light"] .ww-brand__sub,
  .mn-seite .ww-footer[data-nav-theme="light"] .ww-brand__badge {
    /* 0,45 statt 0,47: Die Kopfleiste liegt halbdurchsichtig auf hellem Grund, das kostet ein Zehntel. */
    color: oklch(from var(--t-accent-vivid) min(l, 0.45) c h);
  }
  html[data-mode="dark"] .mn-seite .ww-header .ww-brand__sub,
  .mn-seite .ww-header[data-nav-theme="dark"] .ww-brand__sub,
  .mn-seite .ww-footer[data-nav-theme="dark"] .ww-brand__badge {
    /* 0,78 wie in der Bestandsregel oben: Die Kopfleiste ist halbdurchsichtig, ihr Grund also nie ganz schwarz. */
    color: oklch(from var(--t-accent-vivid) max(l, 0.78) c h);
  }
}
/* Musterblatt: weißes Blatt, feste dunkle Schrift auch für Hervorhebungen (im dunklen Modus sonst 1,10:1) */
.mn-blatt strong, .mn-blatt b,
.mn-seite .mn-inhalt .mn-blatt strong, .mn-seite .mn-inhalt .mn-blatt b { color: #0F172A; }

/* ---------- Barrierefreiheit (Lighthouse 23.09.2026) ----------
   Gedämpfte Augenbraue auf Schwarz lag bei 4,48:1; Fußüberschriften sind h3 statt h4. */
.mn-seite .ww-sheet--dark .ww-eyebrow--muted { color: rgba(255, 255, 255, .56); }
.ww-footer h3.mn-fuss-titel {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--t-ink-2);
  margin: 0 0 1.25rem;
}

/* ---------- Stand-Zeile ---------- */
.mn-stand {
  margin: 1rem 0 0;
  font-size: .84rem;
  color: var(--t-ink-2);
}
.ww-sheet--dark .mn-stand,
.ww-sheet--darker .mn-stand { color: rgba(255, 255, 255, .62); }
.mn-stand em { font-style: normal; color: inherit; }

/* ---------- Kapitel-Navigation (horizontal, auf Mobil scrollbar) ---------- */
.mn-kapitel { margin: 1.6rem 0 0; }
.mn-kapitel ol {
  list-style: none;
  margin: 0;
  padding: .2rem 0;
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.mn-kapitel li { flex: 0 0 auto; }
.mn-kapitel a {
  display: inline-block;
  padding: .45rem .85rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.mn-kapitel a:hover { border-color: rgba(255, 255, 255, .5); color: #fff; }
.mn-kapitel a[aria-current="page"] {
  background: rgba(255, 255, 255, .12);
  border-color: hsl(var(--accent-h) 85% 68%);
  color: #fff;
}
.mn-kapitel a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- „Wenn Sie nur fünf Minuten haben" im Hero ---------- */
.mn-fuenf { margin-top: 1.6rem; max-width: 46rem; }
.mn-fuenf p { margin: 0; }
.mn-fuenf h2 {
  margin: 0 0 .4rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t-accent-vivid);
}
.ww-sheet--dark .mn-fuenf { background: rgba(255, 255, 255, .06); border-left-color: hsl(var(--accent-h) 85% 68%); }
.ww-sheet--dark .mn-fuenf h2 { color: var(--k-licht, hsl(var(--accent-h) 90% 74%)); }
.ww-sheet--dark .mn-fuenf p { color: rgba(255, 255, 255, .74); }
.ww-sheet--dark .mn-fuenf a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Anker unter der festen Kopfleiste (auch ohne Lenis) ---------- */
#paket, #mnEnde, #checkliste, .mn-abschnitt[id] {
  scroll-margin-top: calc(var(--nav-h) + 1.6rem);
}
/* Fokus nie unter der klebenden Kopfleiste (WCAG 2.4.11, auch beim Rückwärts-Tabben; Gegenprüfung 23.09.2026).
   scroll-padding und scroll-margin addieren sich, deshalb bleibt der Abstand der Anker in Summe gleich. */
html:has(.mn-seite) { scroll-padding-top: calc(var(--nav-h) + 1rem); }
html:has(.mn-seite) :is(#paket, #mnEnde, #checkliste, .mn-abschnitt[id]) { scroll-margin-top: .6rem; }

/* ---------- Checkliste (erster Abend) ---------- */
.mn-check { list-style: none; margin: 1rem 0 1.6rem; padding: 0; }
.mn-check li {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  gap: .7rem;
  align-items: start;
  margin: 0 0 .9rem;
  color: var(--t-ink-2);
}
.mn-check__box {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .25rem;
  border: 2px solid var(--t-ink-2);
  border-radius: 4px;
}
.mn-seite .mn-inhalt .mn-check li { text-align: left; text-align-last: auto; -webkit-hyphens: manual; hyphens: manual; }
.mn-check strong { display: block; color: var(--t-ink); }
.mn-check small { display: block; font-size: .84rem; margin-top: .15rem; }

/* ---------- Formularblock #paket ---------- */
.mn-form { margin-top: .4rem; }
.mn-form__hinweis {
  margin: .8rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
}
.mn-form__hinweis a { color: #fff; text-decoration: underline; }
.mn-form__direkt {
  margin: 1.2rem 0 0;
  font-size: .88rem;
  color: rgba(255, 255, 255, .55);
}
/* Ohne JavaScript: Formular und Direkt-Zeile blendet <noscript> im Kopf aus, dieser Satz ersetzt sie. */
.mn-form__ohnejs {
  margin: .4rem 0 0;
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
}
#paket .ww-list li { color: rgba(255, 255, 255, .78); }
/* 23.09.2026 · Barrierefreiheit: Auf dem dunklen #paket-Abschnitt kippen die --t-*-Token im dunklen Modus auf hell
   (Haken-Text 2,61:1, Platzhalter 3,74:1); im hellen Modus hatte der Feldrand nur 2,22:1.
   Modusstabil mit den --k-*-Werten aus site.css, nur für das Paket-Formular. */
.ww-sheet--dark .mn-form .pg-wl__input {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .45);
  color: var(--k-text, rgba(255, 255, 255, .9));
}
.ww-sheet--dark .mn-form .pg-wl__input::placeholder { color: rgba(255, 255, 255, .58); opacity: 1; }
.ww-sheet--dark .mn-form .pg-wl__input:focus { outline-color: var(--k-licht, hsl(var(--accent-h) 90% 74%)); }
.ww-sheet--dark .mn-form .pg-wl__check { color: var(--k-text-2, rgba(255, 255, 255, .68)); }
.ww-sheet--dark .mn-form .pg-wl__check input { accent-color: var(--k-licht, hsl(var(--accent-h) 90% 74%)); }

/* ---------- Einladung (Pop-up light) ---------- */
.mn-einladung {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-menu) - 20);
  padding: 1rem 2.6rem 1rem 1.2rem;
  background: var(--t-panel);
  color: var(--t-ink);
  border-top: 1px solid var(--t-border);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .14);
  max-height: 70vh;
  overflow-y: auto;
  transform: translateY(110%);
  transition: transform .3s ease;
}
.mn-einladung.is-sichtbar { transform: none; }
.mn-einladung__text { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--t-ink-2); }
.mn-einladung__text strong { color: var(--t-ink); }
.mn-einladung__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .8rem; }
.mn-einladung__knoepfe .ww-btn-pill { padding: .55rem 1rem; font-size: .84rem; }
.mn-einladung__nicht {
  background: none;
  border: 1px solid var(--t-border);
  border-radius: 999px;
  padding: .5rem .9rem;
  font: inherit;
  font-size: .84rem;
  color: var(--t-ink-2);
  cursor: pointer;
}
.mn-einladung__nicht:hover { color: var(--t-ink); border-color: var(--t-chrome); }
.mn-einladung__x {
  position: absolute;
  top: .35rem;
  right: .5rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--t-ink-2);
  cursor: pointer;
}
.mn-einladung__x:hover { color: var(--t-ink); }
html.bh-lock .mn-einladung { display: none; }
@media (min-width: 720px) {
  .mn-einladung {
    left: auto;
    right: 1.2rem;
    bottom: 1.2rem;
    max-width: 34rem;
    border: 1px solid var(--t-border);
    border-radius: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mn-einladung { transition: none; }
}

/* ---------- Musterblatt (Digital-Check) ---------- */
.mn-blatt {
  max-width: 46rem;
  margin: 1.4rem 0 1.8rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  background: #fff;
  color: #0F172A;
  border: 1px solid rgba(15, 23, 42, .14);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}
.mn-blatt h3 { margin: 0 0 .3rem; font-size: 1.15rem; color: #0F172A; }
.mn-blatt p, .mn-blatt li { color: #334155; text-align: left; hyphens: manual; }
.mn-blatt .mn-blatt__kopf { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #64748B; margin-bottom: 1rem; }
.mn-blatt .mn-blatt__hinweis { font-size: .8rem; color: #64748B; border-top: 1px dashed rgba(15, 23, 42, .2); padding-top: .6rem; margin-top: 1rem; }
.mn-seite .mn-inhalt .mn-blatt p { text-align: left; text-align-last: auto; -webkit-hyphens: manual; hyphens: manual; margin: 0 0 .75rem; line-height: 1.6; }
.mn-seite .mn-inhalt .mn-blatt p.mn-blatt__hinweis { margin: 1rem 0 0; }
.mn-blatt__unterschrift { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.4rem; }
.mn-blatt__unterschrift span { display: block; border-top: 1px solid #94A3B8; padding-top: .3rem; font-size: .78rem; color: #64748B; }

/* ---------- Kleinkram ---------- */
.mn-quelle { font-size: .82rem; color: var(--t-ink-2); }
.mn-druck { margin: 1rem 0 0; }
.mn-druck button {
  background: none;
  border: 1px solid var(--t-border);
  border-radius: 999px;
  padding: .5rem .95rem;
  font: inherit;
  font-size: .86rem;
  color: var(--t-ink-2);
  cursor: pointer;
}
.mn-druck button:hover { color: var(--t-ink); border-color: var(--t-chrome); }

/* ---------- Weiterlesen: Satz zum Gespräch unter den Karten ---------- */
.mn-weiter { margin-top: 2.4rem; max-width: 62ch; }
.mn-weiter p { margin: 0 0 .8rem; color: var(--t-ink-2); line-height: 1.65; }
.mn-weiter a { font-weight: 600; }

/* ---------- Übersicht führt (wissen.html, 23.09.2026) ----------
   Janis Grundsatz: nicht alles auf einmal zeigen. Einstieg mit drei Fragen, Leitfaden als Pfad,
   Artikel je Rubrik mit einer Empfehlung. Ohne JavaScript und im Druck ist alles offen. Nichts wird gespeichert. */

/* Fünf-Minuten-Kasten als Liste 1, 2, 3 */
.mn-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; counter-reset: mn-schritt; }
.mn-schritte li { counter-increment: mn-schritt; position: relative; padding-left: 2.2rem; line-height: 1.55; }
.mn-schritte li::before {
  content: counter(mn-schritt);
  position: absolute; left: 0; top: .02rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid currentColor;
  font: 600 .72rem/1 var(--font-mono);
}
.ww-sheet--dark .mn-schritte li { color: rgba(255, 255, 255, .78); }
.ww-sheet--dark .mn-schritte li::before { color: var(--k-licht, hsl(var(--accent-h) 90% 74%)); }
.ww-sheet--dark .mn-schritte a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Wegweiser im Hero (Baustein .ww-hier aus site.css), linksbündig */
.mn-wegweiser { justify-content: flex-start; margin-top: 1.8rem; padding-top: 1.4rem; }
.ww-sheet--dark .mn-wegweiser .ww-hier__punkt { color: rgba(255, 255, 255, .78); }
.ww-sheet--dark .mn-wegweiser .ww-hier__punkt b { color: rgba(255, 255, 255, .62); }
.mn-wegweiser .ww-hier__punkt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Einstieg: drei Fragen, ein Vorschlag */
.mn-test { margin: 1.2rem 0 2.6rem; }
.mn-seite .mn-inhalt .mn-test p { text-align: left; text-align-last: auto; -webkit-hyphens: manual; hyphens: manual; }
.mn-test__fragen[hidden], .mn-test__neu[hidden] { display: none; }
.mn-test__stand { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem !important;
  font: 600 .7rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-ink-2); }
.mn-test__punkte { display: inline-flex; gap: .35rem; }
.mn-test__punkt { width: .65rem; height: .65rem; border-radius: 50%; border: 1px solid var(--t-ink-2);
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease; }
.mn-test__punkt.ist-voll { background: var(--t-accent-vivid); border-color: var(--t-accent-vivid); transform: scale(1.15); }
.mn-test__frage { border: 0; margin: 0 0 1.4rem; padding: 0; min-width: 0; }
.mn-test__frage legend { padding: 0; margin: 0 0 .65rem; font-size: 1.02rem; font-weight: 600; color: var(--t-ink); }
.mn-test__nr { margin-right: .5rem; font: 600 .7rem/1 var(--font-mono); letter-spacing: .1em; color: var(--t-ink-2); }
.mn-test__wahlen { display: flex; flex-wrap: wrap; gap: .5rem; }
.mn-test__wahl {
  min-height: 44px; padding: .6rem 1.05rem;
  border: 1px solid var(--t-ink-2); border-radius: 999px;
  background: var(--t-panel); color: var(--t-ink);
  font: inherit; font-size: .9rem; line-height: 1.3; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.mn-test__wahl:hover { border-color: var(--t-accent-vivid); }
.mn-test__wahl:focus-visible { outline: 2px solid var(--t-accent-vivid); outline-offset: 2px; }
.mn-test__wahl[aria-pressed="true"] { border-color: var(--t-accent-vivid); background: var(--t-accent-wash);
  box-shadow: inset 0 0 0 1px var(--t-accent-vivid); font-weight: 600; }
.mn-test__wahl[aria-pressed="true"]::before { content: "\2713\00a0"; content: "\2713\00a0" / ""; }
.mn-test__vorschlaege { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.mn-test__kopf { grid-column: 1 / -1; margin: .2rem 0 0 !important;
  font: 600 .7rem/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-ink-2); }
.mn-test__vorschlag { padding: 1rem 1.2rem; border: 1px solid var(--t-border); border-left: 3px solid var(--t-accent-vivid);
  border-radius: 12px; background: var(--t-panel); }
.mn-test__wann { margin: 0 0 .55rem !important; font-size: .82rem; color: var(--t-ink-2); }
.mn-test__marke { margin: 0 0 .3rem !important; font: 600 .66rem/1.3 var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--t-accent-vivid); }
.mn-test__titel { margin: 0 0 .45rem; font-size: 1.12rem; line-height: 1.3; }
.mn-test__titel a { text-decoration: none; }
.mn-test__titel a:hover, .mn-test__titel a:focus-visible { text-decoration: underline; }
.mn-test__warum { margin: 0 !important; color: var(--t-ink-2); line-height: 1.6; }
/* Mit JavaScript: nur der gewählte Vorschlag; Kopfzeile und Ausgangslage entfallen. */
.mn-test.ist-bereit .mn-test__vorschlaege { display: block; }
.mn-test.ist-bereit .mn-test__kopf,
.mn-test.ist-bereit .mn-test__wann,
.mn-test.ist-bereit .mn-test__vorschlag { display: none; }
.mn-test.ist-bereit .mn-test__vorschlag.ist-gewaehlt { display: block; max-width: 40rem; padding: 1.3rem 1.5rem;
  animation: mnVorschlag .45s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes mnVorschlag { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mn-test__neu { margin-top: 1rem; }

/* Der Leitfaden als Pfad (Baustein .ww-weg aus site.css als Szene) */
.mn-pfad { max-width: 46rem; margin: 1rem 0 2.6rem; }
.mn-pfad__liste { list-style: none; margin: 0; padding: 0; }
.mn-pfad .ww-weg__schritt { padding: .85rem .7rem .85rem 0; }
.mn-pfad__etappe { display: block; margin-bottom: .2rem;
  font: 600 .66rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-ink-2); }
.mn-pfad .ww-weg__titel { font-size: 1.04rem; text-decoration: none; }
.mn-pfad .ww-weg__titel:hover, .mn-pfad .ww-weg__titel:focus-visible { text-decoration: underline; }
.mn-pfad .ww-weg__sinn { margin-top: .2rem; font-size: .9rem; }
.mn-pfad__mehr { margin-top: .5rem; }
.mn-pfad__mehr summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 28px; cursor: pointer;
  list-style: none; font-size: .84rem; font-weight: 600; color: var(--t-ink-2); }
.mn-pfad__mehr summary::-webkit-details-marker { display: none; }
.mn-pfad__mehr summary::before { content: "+"; display: grid; place-items: center; width: 1.1rem; height: 1.1rem;
  border: 1px solid currentColor; border-radius: 50%; font: 600 .75rem/1 var(--font-mono); }
.mn-pfad__mehr[open] summary::before { content: "\2013"; }
.mn-pfad__mehr summary:hover { color: var(--t-ink); }
.mn-pfad__mehr summary:focus-visible { outline: 2px solid var(--t-accent-vivid); outline-offset: 2px; border-radius: 4px; }
.mn-seite .mn-inhalt .mn-pfad__mehr p { margin: .5rem 0 0; font-size: .92rem; line-height: 1.65; color: var(--t-ink-2);
  text-align: left; text-align-last: auto; -webkit-hyphens: manual; hyphens: manual; }

/* Artikel je Rubrik: eine Empfehlung sichtbar, der Rest auf Klick */
.mn-rubrik { margin: 1.8rem 0 2.2rem; }
.mn-rubrik__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem; margin-bottom: .8rem; }
.mn-seite .mn-rubrik__kopf .mn-h3 { margin: 0; font-size: 1.1rem; color: var(--t-ink); }
.mn-rubrik__zahl { padding: .28rem .6rem; border: 1px solid var(--t-border); border-radius: 999px;
  font: 600 .66rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-ink-2); }
.mn-seite .mn-inhalt .mn-rubrik .ww-lesetipp-grid { margin: 0 0 1rem; }
.mn-rubrik.ist-bereit:not(.ist-offen) .mn-rubrik__rest { display: none; }
.mn-rubrik__knopf {
  min-height: 44px; padding: .55rem 1.25rem;
  border: 1px solid var(--t-ink-2); border-radius: 999px;
  background: transparent; color: var(--t-ink);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: border-color .2s ease;
}
.mn-rubrik__knopf:hover { border-color: var(--t-accent-vivid); }
.mn-rubrik__knopf:focus-visible { outline: 2px solid var(--t-accent-vivid); outline-offset: 2px; }
.mn-rubrik__knopf[hidden] { display: none; }
/* Abschnitte sind Sprungziele mit tabindex=-1: Fokus ja, Rahmen um den ganzen Abschnitt nein */
.mn-abschnitt[tabindex="-1"]:focus { outline: none; }
/* Karten und Pfad-Titel sind eigenständige Links: keine Fließtext-Unterstreichung, kein Blocksatz im Pfad */
.mn-seite .mn-inhalt a.ww-lesetipp,
.mn-seite .mn-inhalt .mn-pfad .ww-weg__titel,
.mn-seite .mn-inhalt .mn-test__titel a { text-decoration: none; }
.mn-seite .mn-inhalt .mn-pfad .ww-weg__titel:hover,
.mn-seite .mn-inhalt .mn-pfad .ww-weg__titel:focus-visible,
.mn-seite .mn-inhalt .mn-test__titel a:hover,
.mn-seite .mn-inhalt .mn-test__titel a:focus-visible { text-decoration: underline; }
.mn-seite .mn-inhalt .mn-pfad li { text-align: left; text-align-last: auto; -webkit-hyphens: manual; hyphens: manual; }

@supports (color: oklch(from red min(l, 0.5) c h)) {
  html:not([data-mode="dark"]) .mn-seite .ww-sheet--light .mn-test__marke { color: oklch(from var(--t-accent-vivid) min(l, 0.47) c h); }
  html[data-mode="dark"] .mn-seite .ww-sheet--light .mn-test__marke { color: oklch(from var(--t-accent-vivid) max(l, 0.72) c h); }
}
@media (prefers-reduced-motion: reduce) {
  .mn-test.ist-bereit .mn-test__vorschlag.ist-gewaehlt { animation: none; }
  .mn-test__punkt, .mn-test__wahl, .mn-rubrik__knopf { transition: none; }
  .mn-test__punkt.ist-voll { transform: none; }
}
@media print {
  #einstieg, .mn-wegweiser, .mn-rubrik__knopf { display: none !important; }
  .mn-rubrik .mn-rubrik__rest { display: block !important; }
}

/* ---------- Selbst-Check (Kapitel 1, Fassung Runde 4, 23.09.2026) ----------
   Ersetzt den früheren Abschnitt „Selbst-Check“ vollständig. Nur Klassen .mn-selbstcheck…, nur Token aus site.css.
   Aufbau: Frage, klebender Zwischenstand (Striche, Anzahl, Summe), eine Karte je Aufgabe. Erst eine angekreuzte Karte
   öffnet „Wie oft pro Woche?“ und „Wie viele Minuten je Mal?“ (je eine Radiogruppe als Segmentleiste).
   Darunter die Wochenbilanz mit Startpunkten. mitnehmen.js Kapsel 7 rechnet, nichts wird gespeichert.
   Ohne JavaScript: Arbeitsblatt (Karten öffnen per :has, Rechenhinweis statt Bilanz).
   Druck (auch bau_druck.py, dasselbe Markup ohne Skript): Kästchen, Leerstellen, Summenzeile, zwei Schreiblinien. */
.mn-selbstcheck {
  --mn-sc-akzent: var(--t-accent-vivid);
  --mn-sc-auf-akzent: #fff;
  --mn-sc-rand: var(--t-ink-2);    /* Begrenzung von Bedienelementen, mindestens 3:1 */
  --mn-sc-grau: var(--t-border);   /* nur Schmuck: leere Striche, übrige Balken */
  --mn-sc-kante: var(--t-border);  /* Kartenkanten */
  --mn-sc-kopf: 64px;              /* Höhe der klebenden Kopfleiste .ww-header in site.css (fest 64px, auch mobil) */
  --mn-sc-weich: .32s cubic-bezier(.22, 1, .36, 1);
  margin: 1.6rem 0 2.4rem;
}
@supports (color: color-mix(in srgb, red, blue)) {
  .mn-selbstcheck {
    --mn-sc-rand: color-mix(in srgb, var(--t-ink-2) 72%, var(--t-panel));
    --mn-sc-grau: color-mix(in srgb, var(--t-ink-2) 34%, transparent);
  }
}
/* Akzent bei jedem Farbton des Reglers: hell höchstens L 0,47, dunkel mindestens L 0,78 (OKLCH). */
@supports (color: oklch(from red min(l, 0.5) c h)) {
  html:not([data-mode="dark"]) .mn-selbstcheck { --mn-sc-akzent: oklch(from var(--t-accent-vivid) min(l, 0.47) c h); }
  html[data-mode="dark"] .mn-selbstcheck { --mn-sc-akzent: oklch(from var(--t-accent-vivid) max(l, 0.78) c h); }
}
html[data-mode="dark"] .mn-selbstcheck { --mn-sc-auf-akzent: #0B0B0F; --mn-sc-kante: rgba(255, 255, 255, .1); }
.mn-seite .mn-inhalt .mn-selbstcheck :is(p, li) { text-align: left; text-align-last: auto; -webkit-hyphens: manual; hyphens: manual; }
.mn-selbstcheck [hidden] { display: none; }
.mn-selbstcheck__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Frage. Die Legende ist gefloatet, damit ihr Abstand in jedem Browser greift. Das jeweils nächste Geschwister
   braucht clear, sonst schrumpft das Raster daneben auf Breite 0 (im Druck und ohne JavaScript beobachtet). */
.mn-selbstcheck__liste { border: 0; margin: 0; padding: 0; min-width: 0; }
.mn-selbstcheck__legende { float: left; width: 100%; padding: 0; margin: 0 0 .75rem; font-size: 1.08rem; font-weight: 600; line-height: 1.4; color: var(--t-ink); }
.mn-selbstcheck__stand, .mn-selbstcheck__karten, .mn-selbstcheck__wahlen { clear: both; }

/* Zwischenstand: klebt beim Ausfüllen unter der Kopfleiste, damit die Summe mitwächst, am Rechner wie am Handy. */
.mn-selbstcheck__stand {
  position: sticky; top: calc(var(--mn-sc-kopf) + .5rem); z-index: 2;
  margin: 0 0 .7rem; padding: .6rem .95rem .7rem;
  border: 1px solid var(--mn-sc-kante); border-radius: 12px; background: var(--t-panel);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 26px -20px rgba(15, 23, 42, .45);
}
.mn-selbstcheck__stand-zeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem 1rem; margin: 0 0 .5rem; }
.mn-selbstcheck__stand-anzahl { font: 600 .68rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-ink-2); }
.mn-selbstcheck__stand-summe { font-size: .92rem; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--t-ink); }
.mn-selbstcheck__leiste { display: flex; gap: 3px; }
.mn-selbstcheck__leiste i { flex: 1 1 0; height: 4px; border-radius: 99px; background: var(--mn-sc-grau); transition: background-color .25s ease; }
.mn-selbstcheck__leiste i.ist-voll { background: var(--mn-sc-akzent); }
/* Fokus nie unter Kopfleiste und Zwischenstand: 64px Kopfleiste, 8px Abstand, Leiste (auch zweizeilig) und Luft. */
html:has(.mn-selbstcheck__liste :focus) { scroll-padding-top: calc(64px + 6.5rem); }
/* Sehr niedrige Fenster (Querformat, starke Vergrößerung): der Zwischenstand klebt nicht, damit Platz zum Arbeiten bleibt. */
@media (max-height: 30rem) {
  .mn-selbstcheck__stand { position: static; }
  html:has(.mn-selbstcheck__liste :focus) { scroll-padding-top: calc(var(--nav-h) + 1rem); }
}

/* Karten: jede als Ganzes anklickbar. Raster: Kopf (Kästchen, Titel) | Zeit, darunter die Schätzung über die volle Breite. */
.mn-selbstcheck__karten { display: grid; gap: .5rem; }
.mn-selbstcheck__karte {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  border: 1px solid var(--mn-sc-kante); border-radius: 14px; background: var(--t-panel);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mn-selbstcheck__karte:hover { border-color: var(--mn-sc-grau); }
.mn-selbstcheck__karte.ist-gewaehlt,
.mn-selbstcheck__karte:has(.mn-selbstcheck__haken:checked) {
  border-color: var(--mn-sc-akzent);
  box-shadow: inset 0 0 0 1px var(--mn-sc-akzent), 0 10px 26px -18px rgba(15, 23, 42, .35);
}
html[data-mode="dark"] .mn-selbstcheck__karte.ist-gewaehlt,
html[data-mode="dark"] .mn-selbstcheck__karte:has(.mn-selbstcheck__haken:checked) { box-shadow: inset 0 0 0 1px var(--mn-sc-akzent); }
.mn-selbstcheck__karte:has(.mn-selbstcheck__haken:focus-visible) { border-color: var(--t-ink); }
.mn-selbstcheck__kreuz {
  grid-column: 1; grid-row: 1; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .85rem; align-items: start;
  padding: .95rem 1.1rem; border-radius: 13px; cursor: pointer;
}
/* Das echte Kästchen liegt unsichtbar über dem gezeichneten und bleibt fokussier- und klickbar. */
.mn-selbstcheck__haken { grid-area: 1 / 1; width: 1.5rem; height: 1.5rem; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.mn-selbstcheck__kasten {
  grid-area: 1 / 1; display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border: 1.5px solid var(--t-ink-2); border-radius: 7px; background: var(--t-panel); color: var(--mn-sc-auf-akzent);
  transition: background-color .18s ease, border-color .18s ease;
}
.mn-selbstcheck__kasten svg {
  width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .22s ease .04s;
}
.mn-selbstcheck__kreuz:hover .mn-selbstcheck__kasten { border-color: var(--t-ink); }
.mn-selbstcheck__haken:checked + .mn-selbstcheck__kasten { background: var(--mn-sc-akzent); border-color: var(--mn-sc-akzent); }
.mn-selbstcheck__haken:checked + .mn-selbstcheck__kasten svg { stroke-dashoffset: 0; }
.mn-selbstcheck__haken:focus-visible + .mn-selbstcheck__kasten { outline: 2px solid var(--t-ink); outline-offset: 3px; }
.mn-selbstcheck__titel { display: block; min-width: 0; }
.mn-selbstcheck__titel strong { display: block; font-size: 1rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; color: var(--t-ink); }
.mn-selbstcheck__titel small { display: block; margin-top: .2rem; font-size: .82rem; line-height: 1.5; color: var(--t-ink-2); }

/* Zeit je Aufgabe: erscheint nach dem Ankreuzen rechts neben dem Titel. Als eigene Rasterspalte nimmt sie sich
   genau ihren Platz, auch mit großen Textabständen überdeckt sie den Titel nie. */
.mn-selbstcheck__zeit {
  grid-column: 2; grid-row: 1; align-self: start; margin: 0; padding: .95rem 1.1rem 0 0; pointer-events: none;
  display: flex; align-items: baseline; gap: .4rem;
  font-size: .98rem; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--t-ink);
}
.mn-selbstcheck__zeit small { font-size: .78rem; font-weight: 500; line-height: 1.3; color: var(--t-ink-2); }
.mn-selbstcheck__zeit:empty { display: none; }

/* Schätzung: klappt unter der angekreuzten Karte auf. Zugeklappt ist sie visibility:hidden und damit nicht im Tab-Weg. */
.mn-selbstcheck__schaetzung {
  grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--mn-sc-weich), visibility 0s linear .32s;
}
.mn-selbstcheck__karte.ist-gewaehlt .mn-selbstcheck__schaetzung,
.mn-selbstcheck__karte:has(.mn-selbstcheck__haken:checked) .mn-selbstcheck__schaetzung {
  grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--mn-sc-weich), visibility 0s;
}
.mn-selbstcheck__schaetzung-innen { min-height: 0; overflow: hidden; }
.mn-selbstcheck__felder {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.2rem;
  margin: 0 1.1rem 1.05rem 3.45rem; padding-top: .9rem; border-top: 1px solid var(--mn-sc-kante);
}
.mn-selbstcheck__frage { border: 0; margin: 0; padding: 0; min-width: 0; }
.mn-selbstcheck__frage legend { float: left; width: 100%; padding: 0; margin: 0 0 .45rem; font-size: .85rem; font-weight: 600; line-height: 1.35; color: var(--t-ink-2); }
/* Segmentleiste: eine Spur, der gewählte Wert gefüllt. Die Spur trägt die Begrenzung (mindestens 3:1).
   Jeder Wert ist mindestens so breit wie seine Schrift; wird es eng (große Textabstände), bricht die Spur um. */
.mn-selbstcheck__wahlen {
  display: flex; flex-wrap: wrap; gap: 3px; padding: 3px;
  border: 1px solid var(--mn-sc-rand); border-radius: 11px; background: var(--t-paper);
}
.mn-selbstcheck__wahl { position: relative; display: block; flex: 1 1 0; min-width: max-content; }
.mn-selbstcheck__wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mn-selbstcheck__wahl span {
  display: grid; place-items: center; min-height: 2.35rem; padding: 0 .2rem; border-radius: 8px;
  font-size: .9rem; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--t-ink);
  transition: background-color .18s ease, color .18s ease;
}
.mn-selbstcheck__wahl:hover span { background: var(--t-accent-wash); }
.mn-selbstcheck__wahl input:checked + span { background: var(--mn-sc-akzent); color: var(--mn-sc-auf-akzent); font-weight: 600; }
.mn-selbstcheck__wahl input:focus-visible + span { outline: 2px solid var(--t-ink); outline-offset: 2px; }

/* Nur im Druck */
.mn-selbstcheck__leerstelle, .mn-selbstcheck__blatt { display: none; }

/* Ohne JavaScript: Rechenhinweis an der Stelle der Bilanz */
.mn-selbstcheck__hilfe {
  margin: 1rem 0 0; padding: 1rem 1.2rem; border: 1px dashed var(--mn-sc-rand); border-radius: 14px;
  font-size: .92rem; line-height: 1.6; color: var(--t-ink-2);
}

/* Wochenbilanz */
.mn-selbstcheck__platzhalter {
  margin: 1rem 0 0; padding: 1rem 1.2rem; border: 1px dashed var(--mn-sc-rand); border-radius: 14px;
  font-size: .9rem; line-height: 1.55; color: var(--t-ink-2);
}
.mn-selbstcheck__bilanz {
  margin-top: 1.1rem; padding: clamp(1.25rem, 3vw, 1.9rem); border: 1px solid var(--mn-sc-kante); border-radius: 18px;
  background: var(--t-panel); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -26px rgba(15, 23, 42, .35);
  animation: mnVorschlag .45s cubic-bezier(.22, 1, .36, 1) both;
}
html[data-mode="dark"] .mn-selbstcheck__bilanz { box-shadow: none; }
.mn-selbstcheck__kopf {
  margin: 0 0 1rem; padding: 0 0 .8rem; border-bottom: 1px solid var(--mn-sc-kante);
  font: 600 .66rem/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mn-sc-akzent);
}
.mn-selbstcheck__satz { margin: 0; color: var(--t-ink-2); }
.mn-selbstcheck__vor { display: block; font-size: .92rem; }
.mn-selbstcheck__zahl {
  display: block; margin: .1rem 0 .3rem; font-size: clamp(2.3rem, 5vw, 3.1rem); font-weight: 600; line-height: 1.05;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--t-ink);
}
.mn-selbstcheck__zahl span { font-size: .42em; font-weight: 500; letter-spacing: -.01em; }
.mn-selbstcheck__nach { display: block; font-size: .92rem; line-height: 1.55; }
/* Anteil: ab drei Aufgaben, mit Schlüssel. Die farbigen Stücke sind die Startpunkte. */
.mn-selbstcheck__anteil { margin: 1.15rem 0 0; }
.mn-selbstcheck__balken { display: flex; gap: 3px; height: 10px; }
.mn-selbstcheck__balken i { flex: 1 1 0; min-width: 6px; border-radius: 99px; background: var(--mn-sc-grau); }
.mn-selbstcheck__balken i.ist-start { background: var(--mn-sc-akzent); }
.mn-selbstcheck__schluessel { display: flex; flex-wrap: wrap; gap: .25rem 1.3rem; margin: .6rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--t-ink-2); }
.mn-selbstcheck__schluessel > span { display: inline-flex; align-items: center; gap: .45rem; }
.mn-selbstcheck__schluessel b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--t-ink); }
.mn-selbstcheck__punkt { flex: none; width: .7rem; height: .7rem; border-radius: 3px; background: var(--mn-sc-grau); }
.mn-selbstcheck__punkt.ist-start { background: var(--mn-sc-akzent); }
/* Startpunkte */
.mn-selbstcheck__marke { margin: 1.35rem 0 .6rem; font: 600 .66rem/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mn-sc-akzent); }
.mn-selbstcheck__startpunkte { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.mn-selbstcheck__marke[hidden] + .mn-selbstcheck__startpunkte[hidden] + .mn-selbstcheck__gleich { margin-top: 1.2rem; }
.mn-selbstcheck__startpunkte li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .75rem; align-items: baseline;
  padding: .9rem 1rem; border: 1px solid var(--mn-sc-akzent); border-radius: 12px; background: var(--t-accent-wash);
}
.mn-selbstcheck__nr {
  grid-row: span 2; align-self: start; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--mn-sc-akzent); color: var(--mn-sc-auf-akzent); font: 700 .75rem/1 var(--font-mono);
}
/* Nur ein Startpunkt oder zwei gleich große: ohne Nummer */
.mn-selbstcheck__startpunkte li:only-child, .mn-selbstcheck__startpunkte.ist-gleich li { grid-template-columns: minmax(0, 1fr); }
.mn-selbstcheck__startpunkte li:only-child .mn-selbstcheck__nr, .mn-selbstcheck__startpunkte.ist-gleich .mn-selbstcheck__nr { display: none; }
.mn-selbstcheck__startname { font-weight: 600; line-height: 1.4; color: var(--t-ink); }
.mn-selbstcheck__startwert { font-size: .85rem; line-height: 1.45; font-variant-numeric: tabular-nums; color: var(--t-ink-2); }
.mn-selbstcheck__gleich, .mn-selbstcheck__hinweis, .mn-selbstcheck__weiterweg { margin: 0 0 .5rem; font-size: .95rem; line-height: 1.6; color: var(--t-ink-2); }
.mn-selbstcheck__gleich { color: var(--t-ink); }
.mn-selbstcheck__fuss { display: flex; justify-content: flex-end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--mn-sc-kante); }
.mn-selbstcheck__zurueck { min-height: 2.25rem; }
.mn-selbstcheck__zurueck:focus-visible { outline: 2px solid var(--t-ink); outline-offset: 3px; }

/* Schmal: Schätzung über die volle Kartenbreite, Fragen untereinander, Zeit kurz neben dem Titel */
@media (max-width: 40rem) {
  .mn-selbstcheck__karten { gap: .45rem; }
  .mn-selbstcheck__stand { padding: .5rem .8rem .6rem; }
  .mn-selbstcheck__stand-zeile { margin-bottom: .4rem; }
  .mn-selbstcheck__kreuz { gap: .7rem; padding: .8rem .9rem; }
  .mn-selbstcheck__titel strong { font-size: .97rem; }
  .mn-selbstcheck__titel small { font-size: .79rem; line-height: 1.45; }
  .mn-selbstcheck__zeit { padding: .8rem .9rem 0 0; font-size: .95rem; }
  .mn-selbstcheck__zeit small {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .mn-selbstcheck__felder { grid-template-columns: minmax(0, 1fr); gap: .6rem; margin: 0 .9rem .85rem; padding-top: .7rem; }
  .mn-selbstcheck__frage legend { margin-bottom: .3rem; }
  .mn-selbstcheck__wahl span { min-height: 2.15rem; }
  .mn-selbstcheck__bilanz { padding: 1.15rem 1.05rem; }
  .mn-selbstcheck__startpunkte { grid-template-columns: minmax(0, 1fr); }
  .mn-selbstcheck__startpunkte li { padding: .7rem .85rem; }
}
/* Sehr schmal (320 px, 400 % Zoom): Werte in zwei Reihen, damit „20 ד auch mit großen Textabständen passt;
   die Zeit steht dann unter dem Titel, damit lange Wörter wie „Wochenübersichten“ Platz haben. */
@media (max-width: 22rem) {
  .mn-selbstcheck__wahl { flex-basis: 30%; }
  .mn-selbstcheck__zeit { grid-column: 1 / -1; grid-row: 2; margin: -.3rem .9rem .55rem 3.1rem; padding: 0; }
  .mn-selbstcheck__schaetzung { grid-row: 3; }
}

/* Ohne :has und ohne JavaScript bleiben die Felder offen, damit das Arbeitsblatt benutzbar ist. */
@supports not selector(:has(*)) {
  .mn-selbstcheck:not(.ist-bereit) .mn-selbstcheck__schaetzung { grid-template-rows: 1fr; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .mn-selbstcheck *, .mn-selbstcheck *::before, .mn-selbstcheck *::after { transition: none !important; animation: none !important; }
}

/* Erzwungene Farben: gewählte Werte als Systemmarkierung, Schrift bleibt lesbar */
@media (forced-colors: active) {
  .mn-selbstcheck__kasten { forced-color-adjust: none; border-color: CanvasText; background: Canvas; color: HighlightText; }
  .mn-selbstcheck__haken:checked + .mn-selbstcheck__kasten { border-color: Highlight; background: Highlight; }
  .mn-selbstcheck__wahl span, .mn-selbstcheck__wahl:hover span { forced-color-adjust: none; background: Canvas; color: CanvasText; }
  .mn-selbstcheck__wahl input:checked + span { background: Highlight; color: HighlightText; }
  .mn-selbstcheck__wahl input:focus-visible + span, .mn-selbstcheck__haken:focus-visible + .mn-selbstcheck__kasten { outline-color: CanvasText; }
  .mn-selbstcheck__karte.ist-gewaehlt { outline: 2px solid Highlight; outline-offset: -2px; }
  .mn-selbstcheck__leiste i, .mn-selbstcheck__balken i, .mn-selbstcheck__punkt { forced-color-adjust: none; background: GrayText; }
  .mn-selbstcheck__leiste i.ist-voll, .mn-selbstcheck__balken i.ist-start, .mn-selbstcheck__punkt.ist-start,
  .mn-selbstcheck__nr { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* Druck (Seite und Leitfaden-PDF aus bau_druck.py): Arbeitsblatt im Belegstil, Maße passend zu DRUCK_CSS.
   Keine Auswahl, kein Zwischenstand, keine Bilanz. Angekreuzte Kästchen bleiben angekreuzt, Werte nicht. */
@media print {
  .mn-selbstcheck { margin: 3mm 0 4mm; }
  .mn-selbstcheck *, .mn-selbstcheck *::before, .mn-selbstcheck *::after { transition: none !important; animation: none !important; box-shadow: none !important; }
  .mn-selbstcheck__legende { margin: 0 0 2mm; font-size: 10.5pt; line-height: 1.3; color: #000; }
  .mn-selbstcheck__stand, .mn-selbstcheck__schaetzung, .mn-selbstcheck__zeit, .mn-selbstcheck__auswertung { display: none !important; }
  .mn-selbstcheck__karten { gap: 0; border-top: .5pt solid #94A3B8; }
  .mn-selbstcheck__karte,
  .mn-selbstcheck__karte.ist-gewaehlt,
  .mn-selbstcheck__karte:has(.mn-selbstcheck__haken:checked) {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 5mm;
    padding: 1.7mm 0; border: 0; border-bottom: .5pt solid #94A3B8; border-radius: 0; background: none; outline: 0;
    break-inside: avoid; page-break-inside: avoid;
  }
  .mn-selbstcheck__kreuz { flex: 1 1 90mm; grid-template-columns: 4mm minmax(0, 1fr); gap: 2.5mm; padding: 0; border-radius: 0; }
  .mn-selbstcheck__haken, .mn-selbstcheck__kasten { width: 4mm; height: 4mm; }
  .mn-selbstcheck__kasten,
  .mn-selbstcheck__haken:checked + .mn-selbstcheck__kasten { margin-top: .4mm; border: .75pt solid #000; border-radius: .8mm; background: #fff; color: #000; }
  .mn-selbstcheck__kasten svg { width: 3.2mm; height: 3.2mm; }
  .mn-selbstcheck__titel strong { font-size: 9.5pt; line-height: 1.3; color: #000; }
  .mn-selbstcheck__titel small { margin-top: .3mm; font-size: 8.3pt; line-height: 1.35; color: #334155; }
  .mn-selbstcheck__leerstelle { display: block; flex: 0 0 auto; margin: 0 0 0 auto; font-size: 8.5pt; line-height: 1.3; white-space: nowrap; color: #000; }
  .mn-selbstcheck__hilfe,
  .mn-selbstcheck .mn-selbstcheck__hilfe[hidden] { display: block; margin: 3mm 0 0; padding: 0; border: 0; border-radius: 0; font-size: 9pt; line-height: 1.4; color: #000; }
  .mn-selbstcheck__blatt { display: block; margin: 2.5mm 0 0; font-size: 9pt; line-height: 1.4; color: #000; break-inside: avoid; page-break-inside: avoid; }
  .mn-selbstcheck__blatt p { margin: 0 0 2.2mm; }
  .mn-selbstcheck__blatt-summe { font-weight: 600; }
}

/* ---------- Wissensseite mittig (Janis Wunsch 23.09.2026) ---------- */
.mn-seite .mn-inhalt--breit { max-width: 64rem; margin-inline: auto; }
.mn-seite .mn-inhalt--breit > .mn-abschnitt > .mn-h2,
.mn-seite .mn-inhalt--breit > .mn-abschnitt > p { text-align: center; text-align-last: center; margin-inline: auto; }
.mn-seite .mn-inhalt--breit .mn-test { max-width: 46rem; margin-inline: auto; }
.mn-seite .mn-inhalt--breit .mn-test__stand { justify-content: center; }
.mn-seite .mn-inhalt--breit .mn-test__frage legend { width: 100%; text-align: center; }
.mn-seite .mn-inhalt--breit .mn-test__wahlen { justify-content: center; }
.mn-seite .mn-inhalt--breit .mn-test__vorschlag { margin-inline: auto; }
.mn-seite .mn-inhalt--breit .mn-test__neu:not([hidden]) { display: flex; width: max-content; margin-inline: auto; }
.mn-seite .mn-inhalt--breit .mn-pfad { margin-inline: auto; }
.mn-seite .mn-inhalt--breit .ww-lesetipp-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 20rem)); justify-content: center; }
.mn-seite .mn-inhalt--breit .mn-rubrik > .ww-lesetipp-grid { grid-template-columns: minmax(0, 32rem); }
.mn-seite .mn-inhalt--breit .mn-rubrik__kopf { justify-content: center; }
.mn-seite .mn-inhalt--breit .mn-rubrik__knopf:not([hidden]) { display: flex; margin-inline: auto; }

/* ============================================================
   DRUCK · Hausvorlage 06 vorlagen\branche-*.html auf ww-Klassen übertragen.
   Wird von den Druckseiten in _paket\ und vom Druckknopf genutzt.
   ============================================================ */
@media print {
  .ww-header, .bh-menu, .ww-atmos, .ww-atmos-vignette, .pg-wipe, .ww-footer, .bh-skip,
  .ww-cursor-glow, .ww-nav-cta, .mn-einladung, .mn-form, .mn-form__direkt, #paket, #mnEnde,
  .mn-kapitel, .mn-druck, [data-szene-neu], .ww-szene__neu { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 10.5pt; line-height: 1.45; }
  .ww-sheet, .ww-sheet--dark, .ww-sheet--darker, .ww-sheet--light {
    margin: 0 !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important;
    background: #fff !important; color: #000 !important; padding-top: 0 !important;
  }
  .ww-sheet-inner { width: auto !important; max-width: none !important; padding: 0 !important; }
  .ww-sheet--dark *, .ww-sheet--darker *, .ww-sheet * { color: #000 !important; }
  .mn-seite .mn-inhalt { max-width: none; }
  .mn-seite .mn-inhalt p, .mn-seite .mn-inhalt li { text-align: justify; text-align-last: left; }
  .ww-szene__teil, .ww-szene__satz { opacity: 1 !important; transform: none !important; }
  .ww-faq-content { grid-template-rows: 1fr !important; }
  .ww-faq-inner { overflow: visible !important; }
  .ww-note, .ww-table-wrap, .ww-timeline li, .ww-lesetipp, .mn-blatt, .mn-check li, .ww-faq-item { page-break-inside: avoid; break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
  .ww-note { border: 1px solid #000 !important; border-left-width: 4px !important; background: #fff !important; padding: .6rem .9rem; }
  .ww-table { min-width: 0 !important; width: 100%; font-size: 9pt; border-collapse: collapse; }
  .ww-table th, .ww-table td { border: 1px solid #999; padding: .3rem .4rem; }
  .ww-timeline__when { font-weight: 700; }
  .ww-eyebrow, .ww-eyebrow--muted { color: #555 !important; }
  .ww-gradient-text, .ww-gradient-text-light, .ww-em, .sw {
    -webkit-text-fill-color: #000 !important; background: none !important; filter: none !important; animation: none !important; color: #000 !important;
  }
  a { color: #000 !important; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
  a[href^="#"]::after, a.ww-lesetipp::after { content: ""; }
  .mn-kapitel-druck { page-break-before: always; break-before: page; }
  .mn-druck-titel { page-break-after: always; break-after: page; }
  .mn-check__box { border-color: #000; }
  img { max-width: 100%; }
  @page { size: A4; margin: 18mm 16mm; }
}