/* shop-buchhaltung.de - eigenes Stylesheet.
   Formensprache der Familie (shop-affiliate.de, store-firewall.de), eigener Code.
   Reihenfolge: Grundwerte, Grundformen, Bausteine, Abschnitte, Medienabfragen (absteigend, ganz hinten). */

:root {
  --tinte: #14213d;
  --tinte-weich: #26375a;
  --text: #3d4a61;
  --leise: #5b677c;          /* 5,6:1 auf Weiss, 5,1:1 auf --grund - WCAG AA */
  --linie: #e2e7ef;
  --linie-stark: #cdd5e1;
  --papier: #ffffff;
  --grund: #f5f7fb;
  --akzent: #0b7a86;         /* Petrol, 4,9:1 auf Weiss */
  --akzent-tief: #075f69;
  --akzent-hauch: #e5f3f4;
  --gut: #1a7f52;
  --gut-hauch: #e7f4ec;
  --hinweis: #9a5b06;
  --hinweis-hauch: #fcf1df;
  --fehler: #b3321f;
  --fehler-hauch: #fbe9e6;
  --nacht: #101b33;
  --nacht-weich: #1b2a4a;
  --verlauf: linear-gradient(135deg, #ecf6f7 0%, #f3f3fb 55%, #fbf3ef 100%);
  --schatten: 0 1px 2px rgba(20, 33, 61, .05), 0 8px 24px rgba(20, 33, 61, .07);
  --schatten-gross: 0 2px 4px rgba(20, 33, 61, .05), 0 22px 48px rgba(20, 33, 61, .12);
  --rund: 14px;
  --rund-klein: 9px;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --breite: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: var(--akzent); text-underline-offset: 3px; }
a:hover { color: var(--akzent-tief); }
p { margin: 0; }
p, li, dd, td, figcaption { text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; color: var(--tinte); font-weight: 800; letter-spacing: -0.022em; text-wrap: balance; }
h1 { font-size: clamp(38px, 5.2vw, 60px); line-height: 1.04; }
h2 { font-size: clamp(30px, 3.9vw, 44px); line-height: 1.09; }
h3 { font-size: 18px; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; }
code { font-family: var(--mono); font-size: .9em; background: var(--grund); border: 1px solid var(--linie); border-radius: 6px; padding: 1px 6px; }
strong { color: var(--tinte); }

.mass { max-width: var(--breite); margin: 0 auto; padding: 0 30px; }
.mass--schmal { max-width: 860px; }
.farbe { color: var(--akzent); }

/* ---- Kopf ---- */
.kopf { position: relative; z-index: 5; background: var(--papier); border-bottom: 1px solid var(--linie); }
.kopf__innen { max-width: var(--breite); margin: 0 auto; padding: 14px 30px; display: flex; align-items: center; gap: 28px; }
.kopf__marke { display: inline-flex; align-items: center; gap: 10px; color: var(--tinte); font-weight: 800; font-size: 16.5px; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.kopf__marke:hover { color: var(--tinte); }
.kopf__zeichen { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--akzent); color: #fff; }
.zeichen { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.kopf__wege { display: flex; gap: 22px; margin-left: auto; }
.kopf__wege a { color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.kopf__wege a:hover, .kopf__wege a[aria-current="page"], .kopf__wege a.im-zweig { color: var(--akzent); }
.kopf__rechts { display: flex; align-items: center; gap: 18px; }
.kopf__sprache { color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none; }
.kopf__store { white-space: nowrap; }
.kopf__kurz { display: none; }

/* ---- Knöpfe ---- */
.ziel { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px; border-radius: 999px; font-size: 15.5px; font-weight: 700; line-height: 1.2; text-decoration: none; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; }
.ziel--nacht { background: var(--tinte); color: #fff; }
.ziel--nacht:hover { background: var(--tinte-weich); color: #fff; }
.ziel--rand { background: var(--papier); color: var(--tinte); border-color: var(--linie-stark); }
.ziel--rand:hover { border-color: var(--tinte); color: var(--tinte); }
.ziel--hell { background: #fff; color: var(--tinte); }
.ziel--hell:hover { background: var(--akzent-hauch); color: var(--tinte); }
.ziel--klein { min-height: 40px; padding: 9px 18px; font-size: 14.5px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Schild ---- */
.etikett { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 13px; border: 1px solid var(--linie); border-radius: 999px; background: #fff; box-shadow: 0 3px 12px rgba(20, 33, 61, .05); color: var(--tinte); font-size: 13.5px; font-weight: 700; line-height: 1.4; letter-spacing: normal; }
.etikett i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
.etikett--gut i { background: var(--gut); }
.etikett--hinweis i { background: #d9930a; }
.etikett--fehler i { background: var(--fehler); }
.etikett--nacht { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #e8eef8; box-shadow: none; }

/* ---- Auftakt (Startseite) ---- */
.auftakt { padding: 80px 0 88px; background: var(--verlauf); }
.auftakt__raster { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); gap: 52px; align-items: center; }
.auftakt h1 .etikett { display: flex; width: fit-content; max-width: 100%; margin-bottom: 24px; }
.auftakt__titel { display: block; max-width: 16ch; }
.auftakt__vorspann { margin-top: 22px; max-width: 48ch; color: var(--text); font-size: clamp(17px, 1.7vw, 19.5px); line-height: 1.55; }
.auftakt .knopfreihe { margin-top: 32px; }
.auftakt__notiz { display: flex; align-items: center; gap: 9px; margin-top: 22px; color: var(--leise); font-size: 14.5px; }
.auftakt__notiz i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gut); }
.kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 44px 0 0; padding: 0; list-style: none; }
.kennzahl { padding: 16px 18px; border: 1px solid var(--linie); border-radius: var(--rund-klein); background: #fff; box-shadow: var(--schatten); }
.kennzahl b { display: block; color: var(--tinte); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.kennzahl span { display: block; margin-top: 4px; color: var(--leise); font-size: 13px; line-height: 1.4; }

/* ---- Nachbau: ein fertiger Lauf ---- */
.lauf { border: 1px solid var(--linie); border-radius: var(--rund); background: #fff; box-shadow: var(--schatten-gross); overflow: hidden; }
.lauf__leiste { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--linie); background: var(--grund); }
.lauf__leiste i { width: 10px; height: 10px; border-radius: 50%; background: #d7dde7; }
.lauf__leiste span { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--linie); color: var(--leise); font-size: 12px; font-family: var(--mono); }
.lauf__innen { padding: 22px 22px 24px; }
.lauf__kopf { display: flex; align-items: flex-start; gap: 12px; }
.lauf__titel { display: block; color: var(--tinte); font-size: 16px; font-weight: 800; }
.lauf__kopf p { color: var(--leise); font-size: 13px; }
.lauf__haken { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gut-hauch); color: var(--gut); }
.lauf__haken svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lauf__zustand { margin-left: auto; flex: none; padding: 3px 10px; border-radius: 999px; background: var(--gut-hauch); color: var(--gut); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.lauf__zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.lauf__zahlen li { padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--rund-klein); }
.lauf__zahlen b { display: block; color: var(--tinte); font-size: 16px; font-weight: 800; }
.lauf__zahlen span { color: var(--leise); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.lauf__dateien { margin: 16px 0 0; padding: 0; list-style: none; border: 1px solid var(--linie); border-radius: var(--rund-klein); }
.lauf__dateien li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; }
.lauf__dateien li + li { border-top: 1px solid var(--linie); }
.lauf__dateien code { background: none; border: 0; padding: 0; color: var(--tinte); font-size: 12px; overflow-wrap: anywhere; }
.lauf__dateien small { grid-column: 1; color: var(--leise); font-size: 12px; }
.lauf__pruef { grid-row: 1 / span 2; grid-column: 2; padding: 3px 9px; border-radius: 6px; background: var(--akzent-hauch); color: var(--akzent-tief); font-family: var(--mono); font-size: 11px; font-weight: 700; }

/* ---- Abschnitte ---- */
.abschnitt { padding: 96px 0; }
.abschnitt--grund { background: var(--grund); }
.abschnitt--verlauf { background: var(--verlauf); }
.abschnitt--nacht { background: var(--nacht); color: #c9d4e6; }
.abschnitt--nacht h2, .abschnitt--nacht h3 { color: #fff; }
.abschnitt + .abschnitt--grund, .abschnitt--grund + .abschnitt { border-top: 1px solid var(--linie); }
/* Zwei weiße Abschnitte hintereinander: ohne Farbwechsel reicht ein Abstand. */
.abschnitt:not([class*="abschnitt--"]) + .abschnitt:not([class*="abschnitt--"]) { padding-top: 0; }

.titelblock { max-width: 720px; }
.titelblock .etikett { margin-bottom: 18px; }
.titelblock p { margin-top: 16px; color: var(--leise); font-size: 17.5px; line-height: 1.6; }
.titelblock--mitte { margin: 0 auto; text-align: center; }
.abschnitt--nacht .titelblock p { color: #a9b6cc; }

/* Senkrechter Rhythmus: zwischen Überschrift und Inhalt eines Abschnitts steht
   immer derselbe Abstand, egal welcher Baustein folgt. Die Grundwerte der
   Bausteine stehen davor: dahinter hebt ihr margin den Abstand wieder auf. */
.foto-rahmen, .zaehlung { margin: 0; }
* + .reihe, * + .ablauf, * + .zweiteilung, * + .takt-zeile, * + .plaene, * + .rueckfragen, * + .steckbrief, * + .foto-rahmen, * + .haken, * + .weiter-zeile, * + .bogen-rahmen, * + .zaehlung { margin-top: 44px; }
.fach * + .haken { margin-top: 16px; }

/* ---- Raster und Karten ---- */
.reihe { display: grid; gap: 20px; }
.reihe--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reihe--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reihe--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Wegweiser-Karten: eine unvollständige letzte Reihe steht mittig. */
.reihe--mittig { display: flex; flex-wrap: wrap; justify-content: center; }
.reihe--mittig > * { flex: 0 1 calc((100% - 40px) / 3); }
.reihe--mittig.reihe--zwei > * { flex-basis: calc((100% - 20px) / 2); }
.fach { position: relative; padding: 26px; border: 1px solid var(--linie); border-radius: var(--rund); background: #fff; box-shadow: var(--schatten); }
.fach h3 + p, .fach h3 + ul, .fach__titel + p { margin-top: 8px; }
.fach p { font-size: 15.5px; line-height: 1.58; }
.fach p + p { margin-top: 10px; }
.fach code { overflow-wrap: anywhere; }
.fach__zeichen { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px; border-radius: 12px; background: var(--akzent-hauch); color: var(--akzent); }
.fach__zeichen svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fach__zeichen--gut { background: var(--gut-hauch); color: var(--gut); }
.fach__zeichen--hinweis { background: var(--hinweis-hauch); color: var(--hinweis); }
.fach__zeichen--fehler { background: var(--fehler-hauch); color: var(--fehler); }
.fach--weg h3 a { color: var(--tinte); text-decoration: none; }
.fach--weg h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rund); }
.fach--weg:hover { border-color: var(--akzent); }
.fach--weg:hover h3 a { color: var(--akzent); }
.fach--nacht { border-color: rgba(255, 255, 255, .1); background: var(--nacht-weich); box-shadow: none; }
.fach--nacht p { color: #b3c0d6; }
.fach--nacht .fach__zeichen { background: rgba(255, 255, 255, .08); color: #7fd3dc; }

/* ---- Ablauf in Schritten ---- */
.ablauf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 0; padding: 0; list-style: none; counter-reset: schritt; }
.ablauf li { counter-increment: schritt; padding: 22px 20px; border: 1px solid var(--linie); border-radius: var(--rund); background: #fff; box-shadow: var(--schatten); }
.ablauf li::before { content: counter(schritt, decimal-leading-zero); display: block; margin-bottom: 12px; color: var(--akzent); font-family: var(--mono); font-size: 13px; font-weight: 700; }
.ablauf b { display: block; color: var(--tinte); font-size: 16px; line-height: 1.35; }
/* In Vierer- und Fünferreihen beginnt der Text jeder Karte auf derselben Höhe, auch wenn nur eine Überschrift umbricht. */
.reihe--vier .fach h3, .ablauf:not(.ablauf--senkrecht) b { min-height: 2.7em; }
.ablauf span { display: block; margin-top: 6px; color: var(--leise); font-size: 14.5px; line-height: 1.5; }
.ablauf.ablauf--senkrecht { grid-template-columns: minmax(0, 1fr); max-width: 780px; margin-left: auto; margin-right: auto; }
.ablauf--senkrecht li { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; padding: 20px 22px; }
.ablauf--senkrecht li::before { grid-row: span 2; margin: 2px 0 0; }
.ablauf--senkrecht b, .ablauf--senkrecht span { grid-column: 2; }
.ablauf--senkrecht span { font-size: 15.5px; }

/* ---- Text neben Bild ---- */
.zweiteilung { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.zweiteilung--umgekehrt { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.zweiteilung--oben { align-items: start; }
.zweiteilung--umgekehrt > :first-child { order: 2; }
.zweiteilung .titelblock p + p { margin-top: 12px; }
.zweiteilung > .foto-rahmen { margin-top: 0; }
.foto { display: block; width: 100%; border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten-gross); background: #fff; }
.foto-rahmen figcaption { margin-top: 12px; color: var(--leise); font-size: 14px; text-align: center; }

/* ---- Nachbauten aus dem Admin ---- */
.attrappe { border: 1px solid var(--linie); border-radius: var(--rund); background: var(--grund); box-shadow: var(--schatten-gross); overflow: hidden; color: var(--text); font-size: 13px; line-height: 1.45; text-align: left; }
.attrappe__leiste { display: flex; align-items: center; gap: 7px; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--linie); background: #fff; }
.attrappe__leiste i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #d7dde7; }
.attrappe__leiste span { min-width: 0; margin-left: 8px; overflow: hidden; color: var(--leise); font-family: var(--mono); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.attrappe__inhalt { display: grid; gap: 12px; padding: 16px; }
.attrappe__inhalt > * { min-width: 0; }
.attrappe__karte { padding: 14px 16px; border: 1px solid var(--linie); border-radius: var(--rund-klein); background: #fff; }
.attrappe__titel { margin-bottom: 8px; color: var(--tinte); font-size: 13.5px; font-weight: 700; }
.attrappe__text { margin-top: 10px; color: var(--leise); font-size: 12px; }
.attrappe__titel + .attrappe__text { margin-top: -4px; margin-bottom: 10px; }
.attrappe__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.attrappe__chips span { padding: 3px 10px; border: 1px solid var(--linie); border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.attrappe__chips .ist-an { border-color: var(--akzent); background: var(--akzent); color: #fff; }
.attrappe__felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.attrappe__feld { display: grid; align-content: start; gap: 4px; }
.attrappe__feld span, .attrappe__feldname { color: var(--leise); font-size: 11px; font-weight: 600; }
.attrappe__feld b { overflow: hidden; padding: 7px 10px; border: 1px solid var(--linie); border-radius: 7px; color: var(--tinte); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.attrappe__knopf { display: grid; grid-template-columns: 158px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 0; border-top: 1px solid var(--linie); }
.attrappe__knopf b { padding: 6px 10px; border: 1px solid var(--linie-stark); border-radius: 7px; color: var(--tinte); font-size: 12px; text-align: center; }
.attrappe__knopf span { color: var(--leise); font-size: 12px; }
.attrappe__knopf--haupt b { border-color: var(--akzent); background: var(--akzent); color: #fff; }
.attrappe__knopf--link b { border-color: transparent; padding-left: 0; padding-right: 0; color: var(--akzent); text-align: left; }
.attrappe__rolle { overflow-x: auto; }
.attrappe__tabelle { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 12px; }
.attrappe__tabelle th, .attrappe__tabelle td { padding: 8px 6px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.attrappe__tabelle th { white-space: nowrap; }
.attrappe__tabelle thead th { color: var(--leise); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.attrappe__tabelle tbody th { color: var(--tinte); font-weight: 700; }
.attrappe__tabelle tr:last-child th, .attrappe__tabelle tr:last-child td { border-bottom: 0; }
.attrappe__tabelle small { display: block; color: var(--leise); font-size: 10.5px; font-weight: 400; }
.attrappe__marke { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.attrappe__marke--gut { background: var(--gut-hauch); color: var(--gut); }
.attrappe__marke--hinweis { background: var(--hinweis-hauch); color: var(--hinweis); }
.attrappe__schalter { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--tinte); font-weight: 600; }
.attrappe__schalter::before { content: ""; flex: none; width: 26px; height: 14px; border-radius: 999px; background: radial-gradient(circle at 19px 7px, #fff 0 4.5px, transparent 5px), var(--akzent); }
.attrappe__feldname { margin-bottom: 6px; }
.attrappe__wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.attrappe__option { position: relative; padding: 10px 12px 10px 32px; border: 1px solid var(--linie); border-radius: 8px; }
.attrappe__option::before { content: ""; position: absolute; left: 11px; top: 12px; width: 10px; height: 10px; border: 2px solid var(--linie-stark); border-radius: 50%; }
.attrappe__option b { display: block; color: var(--tinte); font-size: 12.5px; }
.attrappe__option span { display: block; margin-top: 2px; color: var(--leise); font-size: 11.5px; }
.attrappe__option--an { border-color: var(--akzent); background: var(--akzent-hauch); }
.attrappe__option--an::before { border-color: var(--akzent); background: var(--akzent); box-shadow: inset 0 0 0 2px #fff; }
.attrappe__datei { padding: 12px 14px; border: 1px solid var(--linie); border-radius: var(--rund-klein); background: #fff; color: var(--tinte); font-family: var(--mono); font-size: 11.5px; line-height: 1.75; }
.attrappe__datei span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.attrappe__datei .ist-kopf { color: var(--akzent-tief); }
.attrappe__datei .ist-spalten { color: var(--leise); }
/* Nachbauten der Admin-Seiten: Kopf mit Weg, Seitenmenü, Reiter, Karten und Felder */
.attrappe--modal .attrappe__inhalt { padding: 22px; background: #cfd6e1; }
.attrappe__kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 10px 14px; border: 1px solid var(--linie); border-radius: var(--rund-klein); background: #fff; }
.attrappe__weg { grid-column: 1 / -1; color: var(--leise); font-size: 11px; }
.attrappe__seitentitel { color: var(--tinte); font-size: 15px; font-weight: 800; }
.attrappe__knoepfe { display: flex; gap: 6px; }
.attrappe__taste { padding: 5px 12px; border: 1px solid var(--linie-stark); border-radius: 7px; background: #fff; color: var(--tinte); font-size: 12px; font-weight: 700; white-space: nowrap; }
.attrappe__taste--haupt { border-color: var(--akzent); background: var(--akzent); color: #fff; }
.attrappe__admin { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: start; }
.attrappe__admin > *, .attrappe__spalte > *, .attrappe__kartenrumpf > *, .attrappe__formular > * { min-width: 0; }
.attrappe__spalte { display: grid; gap: 12px; }
.attrappe__menue { padding: 8px 0 10px; border: 1px solid var(--linie); border-radius: var(--rund-klein); background: #fff; }
.attrappe__gruppe { padding: 8px 14px 4px; color: var(--leise); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.attrappe__menuepunkt { margin: 1px 8px; padding: 5px 8px; border-radius: 6px; font-size: 12.5px; }
.attrappe__menuepunkt.ist-an { background: var(--akzent-hauch); color: var(--akzent-tief); font-weight: 700; box-shadow: inset 3px 0 0 var(--akzent); }
.attrappe__reiter { display: flex; flex-wrap: wrap; gap: 0 18px; padding: 0 4px; border-bottom: 1px solid var(--linie); }
.attrappe__reiter span { padding: 6px 0 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.attrappe__reiter .ist-an { color: var(--tinte); box-shadow: inset 0 -2px 0 var(--akzent); }
.attrappe__punkt { display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; vertical-align: 2px; }
.attrappe__punkt--fehler { background: var(--fehler); }
.attrappe__notiz { padding: 9px 12px; border-left: 3px solid var(--akzent); border-radius: 6px; background: var(--akzent-hauch); color: var(--akzent-tief); font-size: 12px; }
.attrappe__notiz--gut { border-color: var(--gut); background: var(--gut-hauch); color: var(--gut); }
.attrappe__notiz--fehler { border-color: var(--fehler); background: var(--fehler-hauch); color: var(--fehler); }
.attrappe__kartenkopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 10px; margin-bottom: 12px; }
.attrappe__kartenkopf .attrappe__titel { margin-bottom: 0; }
.attrappe__untertitel { grid-column: 1 / -1; margin-top: 2px; color: var(--leise); font-size: 12px; }
.attrappe__kartenrumpf { display: grid; gap: 10px; }
.attrappe__kartenrumpf .attrappe__schalter { margin-bottom: 0; }
.attrappe__marke--fehler { background: var(--fehler-hauch); color: var(--fehler); }
.attrappe__felder--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.attrappe__felder--breit-schmal { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.attrappe__felder > .attrappe__schalter { align-self: end; padding: 7px 0; }
.attrappe__feld em { color: var(--fehler); font-style: normal; }
.attrappe__feld b.ist-leer { color: #8a94a6; font-weight: 400; }
.attrappe__feld b.ist-wahl { position: relative; padding-right: 28px; }
.attrappe__feld b.ist-wahl::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.5px solid var(--leise); border-bottom: 1.5px solid var(--leise); transform: rotate(45deg); }
.attrappe__feld small { color: var(--leise); font-size: 11px; line-height: 1.45; }
.attrappe__hilfe { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 6px; border: 1px solid var(--linie-stark); border-radius: 50%; color: var(--leise); font-size: 9px; font-style: normal; font-weight: 800; line-height: 1; vertical-align: 1px; }
.attrappe__feld .attrappe__blase { position: relative; margin: 4px 0 4px; padding: 9px 11px; border-radius: 7px; background: var(--tinte); color: #fff; font-size: 11.5px; font-weight: 400; line-height: 1.5; }
.attrappe__feld .attrappe__blase::before { content: ""; position: absolute; left: 150px; top: -4px; width: 9px; height: 9px; background: var(--tinte); transform: rotate(45deg); }
.attrappe__schalter--aus::before { background: radial-gradient(circle at 7px 7px, #fff 0 4.5px, transparent 5px), #c3cad6; }
.attrappe__schalter--rahmen { padding: 9px 12px; border: 1px solid var(--linie); border-radius: 8px; }
.attrappe__gruppenzeile { color: var(--leise); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.attrappe__kontozeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 12px; align-items: center; padding-top: 10px; border-top: 1px solid var(--linie); }
.attrappe__kontoname b { display: block; color: var(--tinte); font-size: 12.5px; }
.attrappe__kontoname small { display: block; margin-top: 2px; font-size: 11px; }
.attrappe__kontoname .ist-fehler { color: var(--fehler); }
.attrappe__kontoname .ist-hinweis { color: var(--hinweis); }
.attrappe__textknopf { color: var(--akzent); font-weight: 700; text-decoration: underline; }
.attrappe__stand { display: grid; gap: 2px; padding: 9px 12px; border-radius: 8px; background: var(--grund); font-size: 12px; }
.attrappe__stand b { color: var(--tinte); }
.attrappe__stand span { color: var(--leise); }
.attrappe__zweispaltig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.attrappe__modal { max-width: 640px; margin: 0 auto; overflow: hidden; border-radius: var(--rund-klein); background: #fff; box-shadow: 0 14px 40px rgba(20, 33, 61, .25); }
.attrappe__modalkopf { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--linie); color: var(--tinte); font-size: 14px; font-weight: 800; }
.attrappe__modalkopf i { color: var(--leise); font-size: 18px; font-style: normal; font-weight: 400; line-height: 1; }
.attrappe__assistent { display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.attrappe__schiene { display: grid; align-content: start; gap: 4px; padding: 14px 10px; border-right: 1px solid var(--linie); background: var(--grund); }
.attrappe__schiene p { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; color: var(--leise); font-size: 12px; }
.attrappe__schiene i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 1.5px solid var(--linie-stark); border-radius: 50%; font-size: 10.5px; font-style: normal; font-weight: 800; }
.attrappe__schiene .ist-an { background: #fff; color: var(--tinte); font-weight: 700; }
.attrappe__schiene .ist-an i { border-color: var(--akzent); background: var(--akzent); color: #fff; }
.attrappe__formular { display: grid; gap: 12px; padding: 16px; }
.attrappe__formular .attrappe__titel { margin-bottom: 0; font-size: 14px; }
.attrappe__formular .attrappe__text { margin-top: -6px; }
.attrappe__modalfuss { display: flex; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--linie); }
.attrappe__modalfuss .attrappe__taste:first-child { margin-right: auto; }
.attrappe__karte--liste { padding: 4px 12px; }
.attrappe__tabelle--menue { min-width: 720px; }
.attrappe__tabelle--befunde { min-width: 0; }
.attrappe__tabelle--befunde td:first-child { width: 58px; text-align: center; }
.attrappe__aktion { position: relative; width: 30px; text-align: right; }
.attrappe__menueknopf { color: var(--leise); font-weight: 800; letter-spacing: 1px; }
.attrappe__kontext { position: absolute; right: 4px; top: calc(100% - 8px); z-index: 1; display: grid; min-width: 180px; padding: 5px; border: 1px solid var(--linie); border-radius: 8px; background: #fff; box-shadow: var(--schatten-gross); text-align: left; }
.attrappe__kontext span { padding: 6px 9px; border-radius: 5px; color: var(--tinte); font-size: 12px; white-space: nowrap; }
.attrappe__kontext span:first-child { background: var(--grund); }
.attrappe__tabelle--befunde .attrappe__kontext { right: 28px; top: 4px; }
.attrappe__zahl { display: inline-block; min-width: 22px; padding: 2px 6px; border-radius: 5px; font-size: 11px; font-weight: 800; text-align: center; }
.attrappe__zahl--fehler { background: var(--fehler-hauch); color: var(--fehler); }
.attrappe__zahl--hinweis { background: var(--hinweis-hauch); color: var(--hinweis); }
.attrappe__befund b { display: block; color: var(--tinte); font-size: 12.5px; }
.attrappe__befund span { display: block; margin-top: 2px; color: var(--leise); }
.attrappe__befund strong { display: block; margin-top: 3px; color: var(--tinte); font-weight: 600; }
.attrappe__pruef { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--linie); }
.attrappe__pruef::before { content: "\2713"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--gut-hauch); color: var(--gut); font-size: 11px; font-weight: 800; }
.attrappe__pruef--fehler::before { content: "!"; background: var(--fehler-hauch); color: var(--fehler); }
.attrappe__pruef span { color: var(--tinte); font-size: 12.5px; }
.attrappe__pruef small { display: block; color: var(--leise); font-size: 11px; }
.attrappe__pruef em { color: var(--akzent); font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }
.foto-rahmen--mitte { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---- Schritte der Einrichtung ---- */
.schritte { display: grid; gap: 88px; margin: 0; padding: 0; list-style: none; }
.schritt__nummer { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--akzent); color: #fff; font-size: 18px; font-weight: 800; }
.schritt__titel { margin-top: 18px; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; }
.schritt__text { margin-top: 14px; font-size: 17px; line-height: 1.62; }

/* ---- Tabellen ---- */
.bogen-rahmen { position: relative; overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--rund); background: #fff; box-shadow: var(--schatten); }
.bogen { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.bogen th { padding: 13px 18px; background: var(--grund); color: var(--leise); font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.bogen td { padding: 14px 18px; border-top: 1px solid var(--linie); vertical-align: top; }
.bogen td:first-child { color: var(--tinte); font-weight: 600; }
.bogen code { white-space: nowrap; }

.bogen--matrix td:not(:first-child), .bogen--matrix th:not(:first-child) { text-align: center; }
.bogen--matrix td:first-child { font-weight: 500; }
.bogen tbody th { padding: 14px 18px; border-top: 1px solid var(--linie); background: #fff; color: var(--tinte); font-size: 15px; font-weight: 500; letter-spacing: normal; text-align: left; text-transform: none; vertical-align: top; }
.bogen__leise { color: var(--leise); }
.bogen td.bogen__kurz { white-space: nowrap; }
.bogen__stark { color: var(--tinte); font-weight: 600; }
.bogen__unter { display: block; margin-top: 2px; color: var(--leise); font-size: 14px; font-weight: 400; }
.bogen__art { font-weight: 700; }
.bogen__art--fehler { color: var(--fehler); }
.bogen__art--hinweis { color: var(--hinweis); }
.bogen--einstellungen { table-layout: fixed; }
.bogen--einstellungen th:first-child { width: 36%; }
.bogen--einstellungen th:nth-child(2) { width: 26%; }
.ja { color: var(--gut); font-weight: 800; }
.nein { color: #8792a6; }
.nur-lesbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fach--beispiel { background: var(--akzent-hauch); border-color: #cfe7ea; box-shadow: none; }
.fach--beispiel p { font-size: 16.5px; }

.hinweiszeile { max-width: 760px; margin-top: 18px; color: var(--leise); font-size: 15px; }
.bogen--befehle code { font-size: 13.5px; white-space: nowrap; }
.befehl span { white-space: nowrap; }
.befehl--zeile { display: block; width: fit-content; max-width: 100%; margin: 8px 0; }
.hinweiszeile--mitte { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; text-wrap: balance; }
.hinweiszeile--nacht { max-width: 760px; margin: 32px auto 0; color: #b3c0d6; text-align: center; }
.haken--mitte { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---- Angaben in einer Karte ---- */
.fach__titel { font-size: 21px; }
.angaben { display: grid; gap: 0; margin: 16px 0 0; }
.angaben div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-top: 1px solid var(--linie); }
.angaben dt { color: var(--leise); font-size: 14.5px; }
.angaben dd { margin: 0; color: var(--tinte); font-size: 15px; }
.angaben--begriffe div { grid-template-columns: 220px minmax(0, 1fr); padding: 14px 0; }
.angaben--begriffe dt { color: var(--tinte); font-weight: 700; font-size: 15.5px; }
.angaben--begriffe dd { color: var(--text); font-size: 15.5px; line-height: 1.55; }
.fach__fuss { margin-top: 16px; color: var(--leise); }
.zaehlung { display: grid; gap: 14px; padding-left: 22px; }
.zaehlung li { padding-left: 6px; font-size: 16.5px; line-height: 1.58; }
.zaehlung li::marker { color: var(--akzent); font-weight: 800; }

/* ---- Hakenliste ---- */
.haken { margin-bottom: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.haken li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.55; }
.haken li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--gut-hauch) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 2.9 6-6.4' fill='none' stroke='%231a7f52' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.abschnitt--nacht .haken li { color: #c9d4e6; }

/* ---- Beleg aus dem Prüfprogramm ---- */

/* ---- Konsole ---- */
.konsole { margin: 0; padding: 20px 22px; border-radius: var(--rund); background: #0b1427; color: #cfe3ff; font-family: var(--mono); font-size: 13.5px; line-height: 1.75; overflow-x: auto; box-shadow: var(--schatten-gross); white-space: pre; }
.konsole .gruen { color: #7ee0a2; }
.konsole .grau { color: #7f8ba3; }

/* ---- Pläne ---- */
.plaene { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
/* Die Karten einer Reihe teilen sich die Zeilen: Preis, Grenzen und „Alles aus …“ stehen auf einer Höhe. */
.plan { position: relative; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; padding: 26px 22px; border: 1px solid var(--linie); border-radius: var(--rund); background: #fff; box-shadow: var(--schatten); }
.plan--empfohlen { border: 2px solid var(--tinte); box-shadow: var(--schatten-gross); }
.plan__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; color: var(--leise); font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.plan__empfohlen { padding: 3px 8px; border-radius: 6px; background: var(--tinte); color: #fff; font-size: 10.5px; letter-spacing: .06em; }
.plan__preis { margin-top: 12px; color: var(--tinte); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.plan__preis small { color: var(--leise); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.plan__fuer { margin-top: 14px; font-size: 14.5px; line-height: 1.5; }
.plan__grenzen { display: grid; gap: 4px; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--linie); list-style: none; font-size: 14px; }
.plan__grenzen b { color: var(--tinte); }
.plan__plus { margin-top: 14px; color: var(--tinte); font-size: 13.5px; font-weight: 700; }
.plan .haken { margin-top: 10px; gap: 8px; align-content: start; }
.plan .haken li { padding-left: 26px; font-size: 14px; line-height: 1.45; }
.plan .haken li::before { width: 18px; height: 18px; top: 1px; background-size: 18px; }
.plaene__fuss { max-width: 760px; margin: 18px auto 0; color: var(--leise); font-size: 14px; text-align: center; }
/* Jährlich oder monatlich: der Umschalter über den Karten zeigt den einen Preis und blendet den anderen aus. */
.takt-zeile { display: flex; justify-content: center; }
.takt-zeile + .plaene { margin-top: 28px; }
.nur-lesbar + .takt-zeile { margin-top: 0; }
.takt { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--linie); border-radius: 999px; background: #fff; box-shadow: var(--schatten); }
.takt__knopf { padding: 8px 22px; border: 0; border-radius: 999px; background: transparent; color: var(--leise); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.takt__knopf[aria-pressed="true"] { background: var(--tinte); color: #fff; }
.takt__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.plan__monatspreis, .plaene--monat .plan__jahrespreis { display: none; }
.plaene--monat .plan__monatspreis { display: inline; }

/* ---- Rückfragen ---- */
.rueckfragen { display: grid; gap: 10px; }
.rueckfrage { border: 1px solid var(--linie); border-radius: var(--rund-klein); background: #fff; }
.rueckfrage summary { position: relative; padding: 18px 56px 18px 22px; color: var(--tinte); font-size: 16.5px; font-weight: 700; line-height: 1.4; cursor: pointer; list-style: none; }
.rueckfrage summary::-webkit-details-marker { display: none; }
.rueckfrage summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--akzent); font-size: 24px; font-weight: 500; line-height: 1; }
.rueckfrage[open] summary::after { content: "−"; }
.rueckfrage__antwort { padding: 0 22px 20px; font-size: 16px; }

/* ---- Steckbrief ---- */
.steckbrief { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.steckbrief dl { margin: 0; border: 1px solid var(--linie); border-radius: var(--rund); background: #fff; overflow: hidden; }
.steckbrief dl div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; padding: 13px 20px; }
.steckbrief dl div + div { border-top: 1px solid var(--linie); }
.steckbrief dt { color: var(--leise); font-size: 14.5px; }
.steckbrief dd { margin: 0; color: var(--tinte); font-size: 15px; font-weight: 600; }
.passt { display: grid; grid-auto-rows: 1fr; gap: 16px; }
.passt .fach h3 { font-size: 16.5px; }
.passt .haken { margin-top: 12px; }
.passt .haken li { font-size: 15px; }
.haken--nein li::before { background: var(--fehler-hauch) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' fill='none' stroke='%23b3321f' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.haken--hinweis li::before { background: var(--hinweis-hauch) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5.6v5.4' fill='none' stroke='%239a5b06' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.4' r='1.3' fill='%239a5b06'/%3E%3C/svg%3E") center / 20px no-repeat; }

/* ---- Weiterlesen ---- */
/* Der Pfeil hängt mit einem geschützten Leerzeichen am letzten Wort und bricht nie allein um. */
.weiter { color: var(--akzent); font-weight: 700; text-decoration: none; }
.weiter::after { content: "\00a0→"; position: relative; left: 0; transition: left .15s; }
.weiter:hover::after { left: 3px; }
.weiter-zeile { text-align: center; }
.weiter-zeile--links { text-align: left; }

/* ---- Schluss ---- */
.schluss { padding: 96px 0; background: var(--nacht); text-align: center; }
.schluss h2 { color: #fff; }
.schluss p { max-width: 560px; margin: 16px auto 0; color: #a9b6cc; font-size: 17.5px; }
.schluss .knopfreihe { justify-content: center; margin-top: 32px; }
.ziel--auf-nacht { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.ziel--auf-nacht:hover { color: #fff; border-color: #fff; }

/* ---- Kopf der Unterseiten ---- */
.kopfblatt { padding: 56px 0 64px; background: var(--verlauf); border-bottom: 1px solid var(--linie); }
.wegweiser { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px; padding: 0; list-style: none; color: var(--leise); font-size: 14px; }
.wegweiser li + li::before { content: "/"; margin-right: 6px; color: var(--linie-stark); }
.wegweiser a { color: var(--leise); text-decoration: none; }
.wegweiser a:hover { color: var(--akzent); }
.kopfblatt h1 .etikett { display: flex; width: fit-content; max-width: 100%; margin-bottom: 20px; }
.kopfblatt__titel { display: block; max-width: 22ch; }
.kopfblatt__vorspann { margin-top: 20px; max-width: 62ch; font-size: 18.5px; line-height: 1.58; }

/* ---- Fuß ---- */
.fuss { padding: 72px 0 36px; background: var(--grund); border-top: 1px solid var(--linie); }
.fuss__raster { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px; }
.fuss__absender p { margin: 14px 0 18px; max-width: 280px; font-size: 14.5px; }
.fuss__spalte h2 { margin-bottom: 14px; color: var(--leise); font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.fuss__spalte ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.fuss__spalte a { color: var(--text); font-size: 15px; text-decoration: none; }
.fuss__spalte a:hover { color: var(--akzent); }
.fuss__schluss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--linie); color: var(--leise); font-size: 14px; }
.fuss__schluss a { color: var(--leise); }
.fuss__marke { max-width: 860px; margin-top: 14px; color: var(--leise); font-size: 12.5px; }

/* ---- Rechtstexte ---- */
.rechtsblatt { color: var(--text); font-size: 16.5px; line-height: 1.65; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 8 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; }
.rechtsblatt h2 { margin: 38px 0 12px; font-size: 22px; }
.rechtsblatt h3 { margin: 26px 0 8px; font-size: 18px; }
.rechtsblatt p { margin: 0 0 14px; }
.rechtsblatt ul { margin: 0 0 14px; padding-left: 22px; }
.rechtsblatt a { color: var(--akzent); }
.rechtsblatt__quelle { margin-top: 28px; color: var(--leise); font-size: 14px; }

/* ---- Nicht gefunden ---- */
.verirrt { text-align: center; }
.verirrt .kopfblatt__vorspann { margin-left: auto; margin-right: auto; }
.verirrt .knopfreihe { justify-content: center; margin-top: 32px; }

/* ---- Medienabfragen, absteigend - MÜSSEN ganz hinten stehen ---- */
@media (max-width: 1080px) {
  .reihe--vier .fach h3, .ablauf:not(.ablauf--senkrecht) b { min-height: 0; }
  .plaene { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reihe--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kopf__innen { gap: 20px; }
  .kopf__wege { gap: 16px; }
}
@media (max-width: 980px) {
  .kopf__wege { display: none; }
  .kopf__rechts { margin-left: auto; }
  .auftakt__raster, .zweiteilung, .zweiteilung--umgekehrt, .steckbrief { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .zweiteilung--umgekehrt > :first-child { order: 0; }
  .reihe--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reihe--mittig > * { flex-basis: calc((100% - 20px) / 2); }
  .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schritte .zweiteilung { gap: 28px; }
}
@media (max-width: 760px) {
  .attrappe__admin { grid-template-columns: minmax(0, 1fr); }
  .attrappe__menue { display: none; }
  .abschnitt, .schluss { padding: 72px 0; }
  .schritte { gap: 64px; }
  .auftakt { padding: 56px 0 64px; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reihe--zwei, .reihe--drei, .reihe--vier { grid-template-columns: minmax(0, 1fr); }
  .reihe--mittig > *, .reihe--mittig.reihe--zwei > * { flex-basis: 100%; }
  .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steckbrief dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 620px) {
  .mass, .kopf__innen { padding-left: 20px; padding-right: 20px; }
  .kopf__sprache { display: none; }
  .plaene, .ablauf, .fuss__raster { grid-template-columns: minmax(0, 1fr); }
  .lauf__innen { padding: 18px 16px 20px; }
  .lauf__zahlen { gap: 8px; }
  .lauf__zahlen li { padding: 8px; }
  .lauf__zahlen span { font-size: 10px; letter-spacing: 0; }
  .hinweiszeile--mitte { text-align: left; }
  .kopf__lang { display: none; }
  .kopf__kurz { display: inline; }
  .knopfreihe .ziel { flex: 1 1 100%; }
  * + .reihe, * + .ablauf, * + .zweiteilung, * + .takt-zeile, * + .plaene, * + .rueckfragen, * + .steckbrief, * + .foto-rahmen, * + .haken, * + .weiter-zeile, * + .bogen-rahmen, * + .zaehlung { margin-top: 36px; }
  .angaben div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .bogen code { white-space: normal; overflow-wrap: anywhere; }
  .bogen--stapel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bogen--stapel, .bogen--stapel tbody, .bogen--stapel tr, .bogen--stapel td { display: block; width: 100%; }
  .bogen--stapel tr { padding: 14px 18px; border-top: 1px solid var(--linie); }
  .bogen--stapel tr:first-child { border-top: 0; }
  .bogen--stapel td { padding: 0; border-top: 0; }
  .bogen--stapel td + td { margin-top: 8px; }
  .bogen--stapel td:empty { display: none; }
  .bogen--stapel td.bogen__kurz { display: inline-block; width: auto; margin-right: 28px; }
  .bogen--stapel td.bogen__kurz:empty { display: none; }
  .bogen--stapel td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--leise); font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
  .bogen--befehle code { white-space: normal; overflow-wrap: normal; }
  .attrappe__felder, .attrappe__wahl, .attrappe__knopf { grid-template-columns: minmax(0, 1fr); }
  .attrappe__knopf { gap: 6px; }
  .attrappe__knopf b { justify-self: start; }
  .attrappe__tabelle td { white-space: nowrap; }
  .attrappe__tabelle--befunde td { white-space: normal; }
  .attrappe__felder--drei, .attrappe__zweispaltig, .attrappe__kontozeile, .attrappe__kopf, .attrappe__assistent { grid-template-columns: minmax(0, 1fr); }
  .attrappe__kontozeile { gap: 6px; }
  .attrappe__schiene { grid-auto-flow: column; justify-content: start; padding: 10px; border-right: 0; border-bottom: 1px solid var(--linie); }
  .attrappe__schiene p { gap: 0; font-size: 0; }
  .attrappe__schiene .ist-an { gap: 8px; font-size: 12px; }
  .attrappe--modal .attrappe__inhalt { padding: 12px; }
  .attrappe__tabelle--befunde .attrappe__kontext { display: none; }
  .attrappe__kartenkopf, .attrappe__pruef { grid-template-columns: minmax(0, 1fr); }
  .attrappe__kartenkopf .attrappe__marke { justify-self: start; margin: 6px 0 4px; }
  .attrappe__knoepfe { margin-top: 8px; }
  .attrappe__pruef { grid-template-columns: 18px minmax(0, 1fr); }
  .attrappe__pruef em { grid-column: 2; }
  .bogen--plaene th, .bogen--plaene td { padding: 10px 6px; }
  .bogen--plaene thead th { font-size: 10.5px; letter-spacing: .02em; }
  .bogen--plaene th:first-child { position: sticky; left: 0; z-index: 1; min-width: 116px; box-shadow: 1px 0 0 var(--linie); }
  .bogen--plaene tbody th { padding: 10px 8px; }
  h1 { overflow-wrap: break-word; }
}
@media (max-width: 380px) {
  .abschnitt, .schluss { padding: 56px 0; }
  h1 { font-size: 32px; }
  .kopfblatt h1 { font-size: 29px; }
  .kennzahlen { grid-template-columns: minmax(0, 1fr); }
  .kopf__marke { font-size: 15px; }
}