/* Zoll.Agency – Gestaltung B-hell (R1-38, Bernd 15.10.2026), originalgetreu nach dem Prototyp
   prototype/gestaltung-r1-38/bh-*.html (Bernd 16.10.2026: „Bitte nutze das abgenommene Layout und baue es auf der
   kompletten Seite ein.“). Die Regeln des Prototyps stehen weiter unten wörtlich (Block „Prototyp B-hell“), nur die
   Farbwerte kommen aus den Variablen hier; der body trägt wie im Prototyp die Klassen „r-b r-bh“.

   Farben nur über die Variablen unten; außerhalb der beiden :root-Blöcke steht keine Farbe als Wert.
   tests/test_marke.py liest diese Variablen und prüft jede Kombination aus Text und Grund auf mindestens 4,5:1, hell
   und dunkel. Modul 18 („Marke“, docs/marke/) legt --text, --neben, --link und --grund fest; der Prototyp hat dafür
   eigene Werte, die hier als --text-b, --neben-b, --link-b stehen und in allen Regeln des Prototyps gelten.
   Abweichungen vom Prototyp, die der Kontrasttest verlangt (Orange #E24E14 nie als Schrift, kein Blau, Knopf im
   dunklen Schema): docs/abnahme/prototyp-treu.md.
   - --marke (#E24E14) nur für Logo, Linien und Flächen ohne Schrift, nie als Textfarbe.
   - Status (--ok, --warn, --fehler) nur als Schrift, Rahmen und Symbol, immer mit Wort; Grün nie als Fläche. */
:root {
  color-scheme: light;
  --text: #27313A;          /* Modul 18: Anthrazit (Strecke) */
  --text-b: #1F272E;        /* Prototyp B-hell: Schrift */
  --neben: #5F6A72;         /* Modul 18: Nebentext */
  --neben-b: #58636B;       /* Prototyp B-hell: Nebentext */
  --grund: #F6F6F4;         /* Modul 18 */
  --bg: #FFFFFF;            /* Prototyp: Seitengrund */
  --bg-wechsel: #F3F4F2;           /* Prototyp: Abschnitte im Wechsel, Felder */
  --strecke-bg: #F3F4F2;    /* Prototyp: Grund der Strecke */
  --karte: #FFFFFF;
  --flaeche: #EEEFEC;       /* Plakette, gesperrter Knopf */
  --linie: #E1E4E6;
  --linie-stark: #C3C9CE;
  --rahmen: #A9B1B7;        /* Eingabefelder (Prototyp) */
  --marke: #E24E14;         /* Orange der Marke: keine Schrift darauf, keine Schrift darin */
  --knopf: #CB4612;
  --knopf-hover: #B23C0E;
  --knopf-tief: #B23C0E;
  --auf-knopf: #FFFFFF;
  --link: #CB4612;          /* Modul 18: Link, nur auf --karte */
  --link-b: #B9410F;        /* Prototyp B-hell: Link und Dachzeilen */
  --link-tief: #B23C0E;
  --fokus: #E24E14;
  --ico: #1F272E;           /* Strich der Piktogramme */
  --akz: var(--marke);      /* Akzent der Piktogramme */
  --ico-standard: #1F272E;  /* Grundwerte, auf die Regeln des Prototyps zurücksetzen */
  --akz-standard: var(--marke);
  --weich: #FCEEE7;
  --weich-fest: #FFF3EC;
  --dunkel: #1F272E;
  --auf-dunkel: #FFFFFF;
  --auf-dunkel-neben: #B8C0C6;
  --akzent-hell: #F7A47D;   /* Orange als Schrift nur auf --dunkel */
  --auf-orange-akz: #FFE1D3;/* Akzent der Piktogramme auf Orange */
  --eilig-text: #D5DADE;    /* Text im Band „Sie haben es eilig?“ */
  --abschluss-knopf: #1F272E;
  --abschluss-knopf-tief: #0B0F12;
  --hervor-flaeche: rgba(255, 255, 255, .07);
  --held: #F6F1EC;          /* warmer Papierton: Kopf der Textseiten */
  --held-oben: #F8F3EE;     /* Kopfband der Startseite (Verlauf) */
  --held-unten: #F4EEE8;
  --held-kreis: rgba(226, 78, 20, .16);
  --held-kreis-schatten: 0 0 0 3rem rgba(226, 78, 20, .035);
  --eilig-kreis: rgba(226, 78, 20, .35);
  --schatten: rgba(31, 39, 46, .25);
  --karte-schatten: 0 1px 0 rgba(31, 39, 46, .04), 0 12px 32px -18px rgba(31, 39, 46, .3);
  --v-schatten: 0 18px 40px -26px rgba(31, 39, 46, .35);
  --upload-schatten: 0 2px 4px rgba(31, 39, 46, .04), 0 24px 48px -24px rgba(31, 39, 46, .25);
  --ok: #17804B;
  --warn: #A16207;
  --warn-grund: #FFF8EB;
  --fehler: #B42318;
  --fehler-grund: #FDECEA;
  --info: #58636B;          /* Hinweiskasten „Info“: im Prototyp Blau, Blau ist nach Modul 18 ausgeschlossen */
  --zebra: #F8F9F8;
  --tip-grund: #27313A;
  --tip-text: #FFFFFF;
  --fuss-grund: #1F272E;
  --fuss-text: #C9D0D5;
  --fuss-titel: #FFFFFF;
  --fuss-neben: #97A1A9;
  --fuss-linie: #36414B;
  --a-papier: #FFFFFF;      /* Animation (R1-33): die Musterrechnung bleibt in beiden Schemata hell */
  --a-text: #1F272E;
  --a-neben: #7A858D;
  --a-linie: #E1E4E6;
  --a-hl: rgba(226, 78, 20, .12);
  --a-karte: #FFFFFF;
  --a-rand: #E1E4E6;
  --a-schatten: rgba(31, 39, 46, .10);
  --a-pille: #FCEEE7;
  --a-pille-text: #B9410F;
  --a-fertig: #CB4612;
  --a-fertig-text: #FFFFFF;
  --a-ok: #FFFFFF;
  --a-haken: #CB4612;
  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-titel: "Unbounded", system-ui, sans-serif;
  --font-m: ui-monospace, "SF Mono", Menlo, monospace;
  --radius: .75rem;
  --radius-knopf: .55rem;
  --h1-gewicht: 600;
  --h2-gewicht: 600;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --text: #F2F3F4;
    --text-b: #EEF0F2;
    --neben: #A3ACB4;
    --neben-b: #A3ACB4;
    --grund: #1B2127;
    --bg: #13181C;
    --bg-wechsel: #1A2026;
    --strecke-bg: #13181C;
    --karte: #20282F;
    --flaeche: #2C353E;
    --linie: #303A44;
    --linie-stark: #475360;
    --rahmen: #56626D;
    --marke: #E24E14;
    --knopf: #CB4612;       /* Prototyp #D24A12: weiße Schrift darauf nur 4,4:1 */
    --knopf-hover: #B23C0E;
    --knopf-tief: #B23C0E;
    --auf-knopf: #FFFFFF;
    --link: #F0703A;
    --link-b: #F28A5B;
    --link-tief: #F0703A;
    --fokus: #F0703A;
    --ico: #E3E6E9;
    --akz: #F0703A;
    --ico-standard: #E3E6E9;
    --akz-standard: #F0703A;
    --weich: #3A2A22;       /* Prototyp: Orange 15 % auf Dunkel */
    --weich-fest: #2A2420;
    --dunkel: #0B0F12;
    --auf-dunkel: #FFFFFF;
    --auf-dunkel-neben: #B8C0C6;
    --akzent-hell: #F59A70;
    --auf-orange-akz: #FFE1D3;
    --eilig-text: #D5DADE;
    --abschluss-knopf: #1F272E;
    --abschluss-knopf-tief: #0B0F12;
    --hervor-flaeche: rgba(255, 255, 255, .07);
    --held: #1A2026;
    --held-oben: #1A2026;
    --held-unten: #1A2026;
    --held-kreis: rgba(226, 78, 20, .16);
    --held-kreis-schatten: 0 0 0 3rem rgba(226, 78, 20, .035);
    --eilig-kreis: rgba(226, 78, 20, .35);
    --schatten: rgba(0, 0, 0, .6);
    --karte-schatten: 0 1px 2px rgba(0, 0, 0, .35);
    --v-schatten: 0 18px 40px -26px rgba(0, 0, 0, .6);
    --upload-schatten: 0 1px 2px rgba(0, 0, 0, .35);
    --ok: #4ACB8A;
    --warn: #E5A93A;
    --warn-grund: #2E2718;
    --fehler: #FF8A7A;
    --fehler-grund: #3A2226;
    --info: #A3ACB4;
    --zebra: #1D242A;
    --tip-grund: #F2F3F4;
    --tip-text: #1B2127;
    --fuss-grund: #0B0F12;
    --fuss-text: #C9D0D5;
    --fuss-titel: #FFFFFF;
    --fuss-neben: #97A1A9;
    --fuss-linie: #232B32;
    --a-papier: #F4F4F2;
    --a-text: #1F272E;
    --a-neben: #7A858D;
    --a-linie: #E1E4E6;
    --a-hl: rgba(226, 78, 20, .12);
    --a-karte: #20282F;
    --a-rand: #34404B;
    --a-schatten: rgba(0, 0, 0, .35);
    --a-pille: rgba(240, 112, 58, .18);
    --a-pille-text: #F59A70;
    --a-fertig: #CB4612;
    --a-fertig-text: #FFFFFF;
    --a-ok: #FFFFFF;
    --a-haken: #CB4612;
    --schrift: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --schrift-titel: "Unbounded", system-ui, sans-serif;
    --font-m: ui-monospace, "SF Mono", Menlo, monospace;
    --radius: .75rem;
    --radius-knopf: .55rem;
    --h1-gewicht: 600;
    --h2-gewicht: 600;
  }
}


/* Schriften der Gestaltung B-hell (R1-38): Inter für Text, Unbounded (die Schrift der Wortmarke) für Überschriften.
   Beide SIL OFL 1.1, selbst ausgeliefert aus /statisch/schrift/ (Lizenzen daneben), kein Abruf bei Dritten. Bis die
   Schrift geladen ist, steht die Systemschrift (font-display: swap). */
@font-face { font-family: "Inter"; src: url("/statisch/schrift/inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("/statisch/schrift/unbounded.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

/* Strecke und Formulare (Bau 01 bis 33, Abnahme Test 1 bis 7). Klassen, die es auch im Prototyp gibt, gelten nur
   in der Strecke (:where(.raster), ohne Gewicht im Kaskadenvergleich). */
:where(.raster) h1 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-weight: 600; margin: 0 0 .45rem; }
:where(.raster) h2 { font: 700 1.08rem/1.3 var(--schrift); margin: 0 0 .8rem; }
:where(.raster) h3 { font: 700 1rem/1.3 var(--schrift); margin: 1.25rem 0 .5rem; }
:where(.raster) p { margin: 0 0 .8rem; }
/* Raster: Inhalt links, Warenkorb rechts */
.raster { display: grid; grid-template-columns: minmax(0, 680px) 280px; gap: 1.5rem; justify-content: center; padding: 1.5rem 1rem; align-items: start; }
.raster.ohne-spalte { grid-template-columns: minmax(0, calc(680px + 1.5rem + 280px)); }  /* T7-33: Vorprüfung ohne Spalte, gleiche Kanten */
.raster.ohne-spalte .opts:not(.eins), .raster.ohne-spalte .beschraenkt-gruppen { max-width: none; }  /* T7-33: Karten und Liste über die ganze Breite */
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; scroll-margin-top: 7rem; }
:where(.raster) .abschnitt { scroll-margin-top: 8rem; }
:where(.raster) .abschnitt + .abschnitt { border-top: 1px solid var(--linie); margin-top: 1.1rem; padding-top: 1.1rem; }

/* Felder */
.reihe { display: flex; flex-wrap: wrap; gap: 0 1rem; }
/* Abnahme Test 6 (T6-9): Felder nebeneinander mit unterschiedlich langen Beschriftungen stehen unten bündig (etwa „Ab wann
   steht die Ware verpackt bereit?“ neben „Wann wird abgeholt?“): die Beschriftung nimmt die Höhe auf, das Eingabefeld
   steht in jeder Zeile auf derselben Linie. Überall, wo Felder in einer Reihe stehen */
.reihe { align-items: flex-end; }
.reihe > .fld { display: flex; flex-direction: column; justify-content: flex-end; }
/* Abnahme Test 6 (T6-7): Vor- und Nachname nebeneinander */
.fld:has(> .eingabe > [name="absender.vorname"]), .fld:has(> .eingabe > [name="absender.nachname"]) { flex: 1 1 14rem; }
.fld { margin: .8rem 0; flex: 1 1 100%; scroll-margin-top: 8rem; }
.fld.schmal { flex: 0 1 9.5rem; }
.fh { display: flex; align-items: flex-start; gap: .4rem; margin-bottom: .3rem; font-weight: 600; }
.frw { font-weight: 400; color: var(--neben); }
input, select { font: inherit; color: var(--text); border: 1px solid var(--rahmen); border-radius: 8px; padding: .55rem .65rem; background: var(--karte); width: 100%; max-width: 340px; }
input:focus, select:focus { outline: 3px solid var(--fokus); outline-offset: 0; border-color: var(--text); }
input.fehlt, select.fehlt { border-color: var(--fehler); background: var(--fehler-grund); }
[id^="feld-"] { scroll-margin-top: 9rem; }
:where(.raster, .upload-teil) .hinweis { color: var(--neben); font-size: .85rem; margin: .3rem 0 0; }
/* Bau 29: Nachricht im Kontaktformular über die ganze Breite; Honigtopf außerhalb des Bildschirms (nicht
   display:none, das überspringen manche Roboter) */
textarea { font: inherit; color: var(--text); border: 1px solid var(--rahmen); border-radius: 8px; padding: .55rem .65rem;
  background: var(--karte); width: 100%; resize: vertical; min-height: 9rem; line-height: 1.45; }
textarea:focus { outline: 3px solid var(--fokus); outline-offset: 0; border-color: var(--text); }
textarea.fehlt { border-color: var(--fehler); background: var(--fehler-grund); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Status: Farbe nie allein, immer Symbol und Wort */
.befund, .noch-offen { display: flex; align-items: baseline; gap: .4rem; }
.befund::before, .noch-offen::before {
  flex: none; display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; border: 1.5px solid currentColor; border-radius: 50%;
  font-size: .85em; font-weight: 800; line-height: 1; position: relative; top: .1em;
}
.befund::before, .noch-offen::before { content: "×"; content: "×" / ""; }
.befund { color: var(--fehler); font-size: .85rem; margin: .3rem 0 0; }

/* Tooltip am i-Symbol: Maus darüber oder antippen; bleibt am Handy im Bildschirm */
details.tip { display: inline-block; position: relative; font-weight: 400; }
details.tip summary { list-style: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1.5px solid var(--neben); color: var(--neben); font: italic 700 .7rem/1rem Georgia, serif; text-align: center; cursor: pointer; }
details.tip summary::-webkit-details-marker { display: none; }
.tipb { display: block; position: absolute; z-index: 20; left: -.6rem; top: 1.5rem; width: 16rem; max-width: calc(100vw - 2rem); background: var(--tip-grund); color: var(--tip-text); font-size: .82rem; padding: .6rem .75rem; border-radius: 8px; box-shadow: 0 6px 20px var(--schatten); }
details.tip:not([open]) .tipb { display: none; }
details.tip:hover .tipb { display: block; }
.tipb .amtlich { display: block; margin-top: .4rem; opacity: .85; }

/* Auswahlknöpfe als Karten (Ticket 27 Antwort 4). Bernd 10.10.2026: ungewählt neutral (weiß, grauer Rahmen,
   leerer Kreis), gewählt deutlich (Rahmen und gefüllter Kreis in --marke, keine Schrift darin), die andere
   Möglichkeit wird wieder neutral. Rot nur nach dem ersten Weiter (fieldset.wahl.fehlt). */
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; max-width: 640px; }
.opts .opt { cursor: pointer; position: relative; padding-left: 2.6rem; }
.opts .opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opts .opt::before { content: ""; position: absolute; left: .9rem; top: .85rem; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--rahmen); background: var(--karte); }
.opts .opt:has(input:checked) { border-color: var(--marke); box-shadow: inset 0 0 0 1px var(--marke); }
.opts .opt:has(input:checked)::before { border-color: var(--marke); background: radial-gradient(circle, var(--marke) 0 45%, var(--karte) 50%); }
.opts .opt:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.opts a.opt::before { display: none; }
.opts a.opt { padding-left: .9rem; }
.haken { display: flex; gap: .5rem; align-items: flex-start; padding: .5rem; border-radius: 8px; }
.haken.fehlt { outline: 2px solid var(--fehler); outline-offset: 2px; background: var(--fehler-grund); }

/* Feste Wahl Versandweg */
.opt { display: flex; flex-direction: column; border: 1.5px solid var(--rahmen); background: var(--karte); border-radius: 10px; padding: .7rem .9rem; }
.opt .ol { font-weight: 700; }
.opt .od { font-size: .9rem; }
/* Hinweis unter dem Text einer Karte, klein in eigener Zeile (EXW, Bernd 10.10.2026) */
.opt .od-hinweis { font-size: .82rem; color: var(--neben); margin-top: .25rem; }

/* Knöpfe */
.weiter { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1rem 0; }
.btn { display: inline-block; background: var(--knopf); color: var(--auf-knopf); border: 0; border-radius: 10px; padding: .75rem 1.25rem; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.btn.geist { background: transparent; color: var(--link); border: 1.5px solid var(--link); }
.btn.gesperrt, .btn:disabled { background: var(--flaeche); color: var(--neben); border: 1px solid var(--linie); cursor: not-allowed; }
.noch-offen { color: var(--fehler); font-size: .9rem; margin: 0; flex: 1 1 100%; display: block; }
/* als Block (der Link bricht im Satz um) gilt gap nicht: Abstand des Symbols zum Text */
.noch-offen::before { margin-right: .4rem; }
.noch-offen a { color: var(--fehler); }
/* Vor dem ersten Weiter ist „Noch offen“ ein Hinweis, kein Fehler (Bernd 10.10.2026) */
.noch-offen.neutral, .noch-offen.neutral a { color: var(--neben); }
.box { border-radius: 10px; padding: .75rem .9rem; margin: 1rem 0; }
.box.schlecht { background: var(--fehler-grund); color: var(--fehler); border-left: 4px solid var(--fehler); }
.box.schlecht p { margin: 0; }

/* Zusammenfassung */
.sum { display: grid; grid-template-columns: 11rem 1fr; gap: .35rem 1rem; margin: 0; }
.sum dt { color: var(--neben); font-size: .9rem; }
.sum dd { margin: 0; font-weight: 700; }
/* Abnahme Test 7 (T7-23): Hinweise unter einem Wert (EORI-Abgleich, Anschrift des Warenorts, Zollamt) deutlich vom Wert
   abgesetzt: kleiner, normale Schriftstärke, Nebenfarbe (der Wert fett in Textfarbe); „ändern“ ebenso normal */
.sum dd .mut, .sum dd .klein { font-weight: 400; font-size: .85rem; color: var(--neben); }
.sum dd .warnung { font-weight: 400; }
:where(.raster) .tabelle { overflow-x: auto; margin-bottom: 1rem; }
table.pos { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.pos th { text-align: left; font-size: .75rem; color: var(--neben); font-weight: 600; border-bottom: 1px solid var(--linie); padding: .4rem; }
table.pos td { border-bottom: 1px solid var(--linie); padding: .5rem .4rem; vertical-align: top; }
.num { text-align: right; white-space: nowrap; }

/* Warenkorb */
.spalte { position: sticky; top: 7rem; }
/* Startseite (Bernd 10.10.2026, Funnel): große Überschrift und Unterzeile vor der Karte */
.einstieg { margin: 0 0 1.25rem; }
.einstieg h1 { font-size: 2.1rem; line-height: 1.2; margin: 0 0 .5rem; }
.einstieg-unterzeile { margin: 0; font-size: 1.1rem; color: var(--neben); }
.korb { background: var(--karte); border: 1px solid var(--linie); border-top: 3px solid var(--marke); border-radius: 12px; padding: 1rem 1.1rem; }
.korb summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; margin-bottom: .5rem; }
.korb summary::-webkit-details-marker { display: none; }
.korb-summe { display: none; }
.kz { display: flex; justify-content: space-between; gap: .75rem; font-size: .9rem; padding: .15rem 0; }
.kz span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.kz.neben { color: var(--neben); font-size: .82rem; }
.kz.gesamt { border-top: 1px solid var(--linie); margin-top: .4rem; padding-top: .5rem; font-weight: 800; font-size: 1.05rem; }

/* Handy: kompaktes Logo, Warenkorb oben, aufklappbar */
@media (max-width: 960px) {
  .raster, .raster.ohne-spalte { grid-template-columns: minmax(0, 1fr); }
  .spalte { position: static; order: -1; }
  .korb details:not([open]) .korb-summe { display: inline; }
  .sum { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .einstieg h1 { font-size: 1.6rem; }
  .einstieg-unterzeile { font-size: 1rem; }
  .raster { padding: .75rem; }
  .karte { padding: 1rem .9rem; }
  .opts { grid-template-columns: 1fr; }
  input, select { max-width: none; }
  .fld.schmal input { max-width: 9.5rem; }
  .fld.schmal.zahl input { max-width: none; }
  /* Weiter-Knopf unten fest über die ganze Breite */
  .weiter.fest { position: sticky; bottom: 0; z-index: 5; background: var(--karte); margin: 1rem -.9rem -1rem; padding: .75rem .9rem; border-top: 1px solid var(--linie); box-shadow: 0 -4px 14px var(--schatten); }
  .weiter.fest .btn { flex: 1 1 100%; }
}

.klein { font-size: .85rem; }
.von-hand { margin: 0 0 1rem; font-size: .9rem; color: var(--neben); }  /* T7-34: unter der Karte */
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; }
.ok-zeile { color: var(--ok); font-weight: 600; margin: 0 0 .25rem; }
details.neu { margin: 0 0 .9rem; font-size: .9rem; }
details.neu summary { color: var(--link); text-decoration: underline; cursor: pointer; list-style: none; display: inline; }
details.neu summary::-webkit-details-marker { display: none; }
details.neu .box { margin-top: .5rem; }
details.neu .weiter { margin: .6rem 0 0; }
details.neu .weiter form { margin: 0; }
.box.info { background: none; color: var(--text); padding-left: 0; padding-right: 0; }  /* Bernd 12.10.2026: Hinweise gelb (.box.warn) oder ohne Kasten, kein Grau */
.box.warn { background: var(--warn-grund); color: var(--text); border-left: 4px solid var(--warn); }
.box p { margin: 0; }

/* Fortschritt beim Auslesen */
.auslesen-stand progress { width: 100%; height: .6rem; margin: .5rem 0; accent-color: var(--knopf); }
/* Bernd 13.10.2026: bewegter Balken, solange im Hintergrund noch etwas läuft (Warennummern, Beschränkungen, Vergleich) */
progress.laeuft-balken { display: block; width: 100%; max-width: 24rem; height: .4rem; margin: .4rem 0 0; accent-color: var(--knopf); }

/* Vorbelegung aus der Rechnung */
.auslesung { border-left: 4px solid var(--marke); }
.auslesung-liste { margin: .5rem 0; padding-left: 1.2rem; }
.auslesung-liste li { margin: .25rem 0; }
.auslesung .weiter form { margin: 0; }
/* Abnahme Test 5 (T5-19): ruhiger als eine Warnung, ohne Ausrufezeichen; Rahmen in der Warnfarbe, Grund weiß */
.fld.vergleichen input, .fld.vergleichen select { border-color: var(--warn); border-width: 1.5px; }
.vergleichen-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; color: var(--neben);
  font-size: .85rem; margin: .3rem 0 0; }
.vergleichen-hinweis .vergleichen-satz { flex: 0 1 auto; }
/* Abnahme Test 6 (T6-1): „Stimmt“ als Auswahl mit Kreis wie die Karten (.opts .opt); der Klick füllt den Kreis, blendet
   Satz und Knopf aus und nimmt den Rahmen weg (strecke.js), der Server merkt es sich (bleibt nach Neuladen weg) */
button.stimmt { position: relative; font: inherit; font-size: .85rem; font-weight: 700; color: var(--text);
  background: var(--karte); border: 1.5px solid var(--rahmen); border-radius: 10px; padding: .35rem .8rem .35rem 2.1rem;
  cursor: pointer; }
button.stimmt::before { content: ""; position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: .9rem;
  height: .9rem; border-radius: 50%; border: 2px solid var(--rahmen); background: var(--karte); box-sizing: border-box; }
button.stimmt:hover { border-color: var(--marke); }
button.stimmt:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
button.stimmt.gewaehlt { border-color: var(--marke); box-shadow: inset 0 0 0 1px var(--marke); }
button.stimmt.gewaehlt::before { border-color: var(--marke); background: radial-gradient(circle, var(--marke) 0 45%, var(--karte) 50%); }
.position-titel { flex: 1 1 100%; margin: 1rem 0 0; padding-top: .6rem; border-top: 1px solid var(--linie); }
.korb > p:first-child { margin-top: 0; }

/* Maske Angaben (Bau 27.4): Einheit und Herkunft am Feld, Positionen eine nach der anderen,
   Warenort als Karten mit der Gruppe der gewählten Möglichkeit */
.eingabe { display: flex; align-items: center; gap: .4rem; }
.eingabe input { flex: 1 1 auto; min-width: 0; }
.fld:has(.einheit) .eingabe input { flex: 0 1 8rem; }
.fld.schmal:has(.einheit) { flex-basis: 11rem; }
/* Zahlenfelder (Menge, Betrag, Gewicht): Platz für „123.456.789,00“, auch am Handy (Abnahme Test 1: das Feld
   zeigte nur eine Ziffer, weil Einheit und „aus der Rechnung“ es zusammendrückten). Einheit und Herkunft
   rücken in die nächste Zeile, wenn es eng wird. */
.fld.zahl { --zahlfeld: calc(14ch + 1.3rem + 2px); }  /* 14 Zeichen „123.456.789,00“; mit Inter (B-hell) passt so die Fahne daneben */
.fld.zahl.schmal { flex: 0 1 auto; min-width: min(var(--zahlfeld), 100%); }
.fld.zahl .eingabe { flex-wrap: wrap; }
.fld.zahl .eingabe input { flex: none; width: var(--zahlfeld); max-width: 100%; }
/* Abnahme Test 2 (T2-2): Hausnummer und Postleitzahl (Absender, Empfänger, Warenort) zeigten nur 1–2 Zeichen, weil
   „aus der Rechnung“ das Feld zusammendrückte. Gleiches Muster wie die Zahlenfelder: Platz für „1234 b“ und
   „SW1A 1AA“, die Plakette rückt in die nächste Zeile. */
.fld.schmal:not(.zahl) { --kurzfeld: calc(11ch + 1.3rem + 2px); flex: 0 1 auto; min-width: min(var(--kurzfeld), 100%); }
.fld.schmal:not(.zahl) .eingabe { flex-wrap: wrap; }
.fld.schmal:not(.zahl) .eingabe input { flex: none; width: var(--kurzfeld); max-width: 100%; }
.einheit { color: var(--text); }
.eingabe select { flex: 1 1 auto; min-width: 0; }
.opt .herkunft { font-weight: 400; margin-left: .3rem; }
.herkunft { font-size: .72rem; color: var(--neben); background: var(--flaeche); border-radius: 4px; padding: .05rem .4rem; white-space: nowrap; }
.pos-block { border: 1px solid var(--linie); border-radius: 12px; padding: .2rem 1rem .6rem; margin: .5rem 0; }
.pos-block:has(.fehlt) { border-color: var(--fehler); }
.pos-block .position-titel { border-top: 0; padding-top: 0; margin-top: .8rem; }
/* Abnahme Test 3 (T3-4): Positionen als Ziehharmonika. Eingeklappt eine Kopfzeile (Knopf des Formulars) mit Pfeil,
   Bezeichnung, Warennummer und Stand; die Reihenfolge bleibt 1, 2, 3. */
.positionen { flex: 1 1 100%; }
button.pos-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; width: 100%; margin: .5rem 0;
  padding: .7rem 1rem; text-align: left; font: inherit; color: var(--text); background: var(--karte);
  border: 1px solid var(--linie); border-radius: 12px; cursor: pointer; }
button.pos-kopf:hover { border-color: var(--rahmen); }
.pos-kopf .pfeil { flex: none; width: 1rem; color: var(--link); }
.pos-kopf .pos-name { flex: 1 1 12rem; font-weight: 600; }
.pos-kopf .pos-kn, .pos-kopf .pos-eur { color: var(--neben); font-size: .9rem; }
.pos-kopf .pos-stand { font-size: .85rem; font-weight: 600; }
.pos-kopf .pos-stand.fertig { color: var(--ok); }
.pos-kopf .pos-stand.fertig::before { content: "✓ "; }
.pos-kopf .pos-stand.offen { color: var(--warn); }
.pos-block .pos-kopf.offen { display: flex; gap: .2rem; }
.wahl-aufheben { margin: .2rem 0 .4rem; font-size: .85rem; }
/* Abnahme Test 7 (T7-7): Ist oben eine Nummer gewählt (Vorschläge oder Unterlagen), verschwinden „Oder geben Sie die Nummer
   selbst ein:“, das Eingabefeld und die Wiederholung der Nummer darunter; nach „Auswahl aufheben“ ist das Feld wieder da.
   Nur mit JavaScript (strecke.js setzt „mit-js“): ohne bleibt das Feld zum Absenden */
.mit-js .fld:has(:is(.kand, .kn-wahl) input[type=radio]:checked) :is(.selbst, .eingabe:has([data-kn-eingabe]), .kn-ziel) { display: none; }
.kand:not(:has(input[type=radio]:checked)) .wahl-aufheben,
.kn-wahl:not(:has(input[type=radio]:checked)) .wahl-aufheben { display: none; }
fieldset.wahl { border: 0; padding: 0; min-width: 0; }
fieldset.wahl legend { padding: 0; }
.opts.eins { grid-template-columns: 1fr; max-width: 420px; }
.gruppe { margin-top: .2rem; }
.abschnitt:has(input[name="warenort.wahl"][value="firma"]:checked) .gruppe-anders,
.abschnitt:has(input[name="versand.gestellung"][value="im_betrieb"]:checked):has(input[name="warenort.wahl"][value="anders"]:checked) .gruppe-firma { display: none; }
/* Bau 04: beim Zollamt und an der Grenze von der Anschrift des Unternehmens nur die Postleitzahl */
.nur-ohne-betrieb { display: none; flex-basis: 100%; margin: 0; }
.abschnitt:has(input[name="versand.gestellung"]:not([value="im_betrieb"]):checked) .gruppe-firma > :not(.plz-firma):not(.nur-ohne-betrieb) { display: none; }
.abschnitt:has(input[name="versand.gestellung"]:not([value="im_betrieb"]):checked) .nur-ohne-betrieb { display: block; }

/* Bau 03: Versandweg und „Wo kann der Zoll die Ware ansehen?“ (Ticket 27 Antwort 8). Was nur zu einer
   Wahl gehört, ist sonst verborgen; ohne :has bleibt alles sichtbar, die Prüfung bleibt beim Server. */
fieldset.wahl.fehlt .opt:not(:has(input:checked)) { border-color: var(--fehler); background: var(--fehler-grund); }
fieldset.wahl .befund { margin: .4rem 0 0; }
form:not(:has(input[name="versand.versandweg"][value="paketdienst"]:checked)) .nur-paketdienst,
form:not(:has(input[name="versand.versandweg"][value="spedition"]:checked)):not(:has(input[name="versand.versandweg"][value="eigen"]:checked)) .nur-strasse,
form:has(input[name="versand.gestellung"]:not([value="im_betrieb"]):checked) .nur-betrieb { display: none; }
/* Sammelliste Punkt 34: Ware im Reisegepäck, Fragen und Hinweise nur mit dieser Wahl */
form:not(:has(input[name="versand.versandweg"][value="gepaeck"]:checked)) .nur-gepaeck { display: none; }
.reise-hinweis p + p { margin-top: .4rem; }
#teil-reise > .fld, #teil-reise > .reihe, #teil-reise > .zeile-vorbelegt { margin-top: .8rem; }
/* Abnahme Test 7 (T7-2): die Anzahl der Packstücke steht bei jedem Versandweg, bei DHL Paket als „Wie viele Pakete?“
   (bis Test 7 verschwand das Feld mit der Wahl DHL Paket, T5-3) */
form:has(input[name="versand.versandweg"][value="dhl_paket"]:checked) .packstuecke .ohne-dhl,
form:not(:has(input[name="versand.versandweg"][value="dhl_paket"]:checked)) .packstuecke .nur-dhl,
form:not(:has(input[name="versand.versandweg"][value="dhl_paket"]:checked)) #hinweis-dhl-je-paket { display: none; }
.grenzuebergang { margin: .8rem 0; }
/* Vorgang 48: Ort und Land der Lieferbedingung nur, wo sie sich nicht ableiten lassen (fach.lieferbedingung:
   ORT_FRAGEN, LAND_FRAGEN; ab Werk ohne Warenort im Betrieb). Ohne :has bleibt alles sichtbar. Abnahmeprotokoll
   17.10.2026 (B01): den Ort auch bei DAP, DPU und DDP (von der Rechnung oder vom Empfänger, änderbar). */
.lieferort > div { flex: 1 1 14rem; }
/* Abnahme Test 4 (T4-2): bei FCA steht das Land sichtbar da (Deutschland, fach.lieferbedingung) */
form:not(:has(input[name="lieferbedingung.incoterm"][value="FCA"]:checked)) .lieferort-land-fca { display: none; }
.lieferort-land-fca { flex: 1 1 14rem; align-self: end; margin: 0 0 .6rem; }
form:not(:has(input[name="lieferbedingung.incoterm"]:is([value="FCA"],[value="CPT"],[value="CIP"],[value="FAS"],[value="FOB"],[value="CFR"],[value="CIF"],[value="DAP"],[value="DPU"],[value="DDP"]):checked)):not(:has(input[name="lieferbedingung.incoterm"][value="EXW"]:checked):has(input[name="versand.gestellung"]:is([value="zollamt"],[value="grenze"]):checked)) .lieferort-ort,
form:not(:has(input[name="lieferbedingung.incoterm"]:is([value="CPT"],[value="CIP"],[value="FAS"],[value="FOB"],[value="CFR"],[value="CIF"]):checked)) .lieferort-land { display: none; }
.grenzuebergang.fehlt { border-left: 3px solid var(--fehler); padding-left: .6rem; }
/* Druckvorlage EUR.1 (Bernd 15.10.2026): Angaben des Kunden in Gruppen, rot markiert, wenn etwas fehlt */
fieldset.eur1-feld { border: 0; padding: 0; margin: .6rem 0; min-width: 0; }
fieldset.eur1-feld legend { padding: 0; }
fieldset.eur1-feld.fehlt { border-left: 3px solid var(--fehler); padding-left: .6rem; }
.zeile-vorbelegt { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.zeile-vorbelegt details.aendern-wahl[open] { flex-basis: 100%; }
.kopfzeile { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; }
.kopfzeile h2 { margin: 0; }
details.aendern-wahl > summary { display: inline; color: var(--link); text-decoration: underline; cursor: pointer; font-size: .9rem; list-style: none; }
details.aendern-wahl > summary::-webkit-details-marker { display: none; }
details.aendern-wahl[open] > summary { display: none; }
.fld:has(input[type=time]) { flex: 0 1 16rem; }
.fld:has(input[type=date]) input, .fld:has(input[type=time]) input { max-width: 11rem; }
/* Abnahme Test 7 (T7-3): Felder nebeneinander auf einer Linie. Die Reihe ist ein Raster; jedes Feld belegt drei
   gemeinsame Zeilen (Beschriftung, Eingabe, Hinweis: .fh, .eingabe, .unter in _feld.html) und übernimmt sie mit subgrid.
   So stehen die Eingabefelder einer Zeile immer auf einer Linie, gleich wie lang Beschriftung oder Hinweis sind; die
   Beschriftung steht unten bündig über dem Feld. Schmale Felder (Hausnummer, Postleitzahl, Zahlen, Uhrzeit, Vor- und
   Nachname, Ort und Land der Lieferbedingung) teilen sich eine Zeile, alles andere hat die ganze Breite. Am Handy und
   ohne subgrid bleibt es bei der Reihe von oben (untereinander bzw. unten bündig). */
.reihe .fh { display: block; }  /* das Info-Zeichen steht hinter dem letzten Wort der Beschriftung, nicht daneben */
.reihe .fh details.tip { vertical-align: -.15em; margin-left: .1rem; }
@media (min-width: 640px) {
  @supports (grid-template-rows: subgrid) {
    /* Abnahme Test 7 (T7-16): Spalten so breit, dass ein schmales Feld (Hausnummer, Postleitzahl, Zahl mit Einheit) und
       seine Fahne „aus der Rechnung“ nebeneinander passen (gemessen im Browser: bis 290 px); vorher 11,5 rem, drei Spalten
       zu 202 px, die Fahne brach unter das Feld */
    .reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: 0 1rem; align-items: start; }
    .reihe > * { grid-column: 1 / -1; grid-row: span 3; }
    .reihe > :is(.plz-firma, .lieferort-ort, .lieferort-land, [id^="wert-eur-bereich-"]) { display: contents; }
    .reihe:has(> .fld > .eingabe > [name="absender.vorname"]) { grid-template-columns: 1fr 1fr; }  /* Vor- und Nachname je halbe Breite (T6-7) */
    .reihe .fld.schmal:not(:has(.kn-ziel)), .reihe .fld:has(input[type=time]),
    .reihe .fld:has(> .eingabe > :is([name="absender.vorname"], [name="absender.nachname"])) { grid-column: auto; }
    /* Abnahme Test 7 (T7-21): Ort der Lieferbedingung in normaler Breite (wie jeder Ort), Land darunter; vorher teilten sie
       sich eine Spalte und „Musterstadt“ war abgeschnitten */
    .reihe > :is(.lieferort-ort, .lieferort-land) > .fld { grid-column: 1 / -1; }
    .reihe > div.fld:not(:has(.kn-ziel)),
    .reihe > :is(.plz-firma, .lieferort-ort, .lieferort-land, [id^="wert-eur-bereich-"]) > div.fld { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; justify-content: normal; }  /* sonst schiebt justify-content: flex-end (T6-9, Flex) den Inhalt im Raster nach rechts */
    /* nur im Raster (subgrid): unten bündig. In einem Feld, das Flex bleibt (Warennummer mit Vorschlägen), hieße align-self:
       end „rechts“; so stand „Warennummer“ rechts über dem Feld (gefunden im Browser, Test 7 D) */
    .reihe > div.fld:not(:has(.kn-ziel)) > .fh, .reihe > * > div.fld > .fh { align-self: end; }
    /* Ausnahmen mit eigenem Aufbau (Bescheinigung der Maßnahme, Versatz der A.TR) bleiben eine Reihe */
    .massnahme .reihe, #atr-versatz { display: flex; }
  }
}

/* Zusammenfassung (Bau 27.5) */
.sum .aendern { font-size: .82rem; font-weight: 400; margin-left: .35rem; }
.anmeldung { border: 1px solid var(--linie); border-radius: 10px; padding: .6rem .9rem; margin: 1rem 0; }
.anmeldung h3 { margin: 0 0 .3rem; }
.pos-zeile { padding: .1rem 0 .3rem; }
/* Abnahme Test 6 (T6-13): jede Position mit eigener Überschrift „Position 1“ … */
.pos-titel { font-size: .85rem; margin: .5rem 0 0; padding-top: .4rem; border-top: 1px solid var(--linie); }
.anmeldung h3 + .pos-titel { border-top: 0; padding-top: 0; }
.korb.inline { border-top-width: 1px; padding: .75rem 0 0; border: 0; border-top: 1px solid var(--linie); border-radius: 0; }
.korb.inline summary { cursor: default; }
.knoepfe { justify-content: space-between; }
/* Abnahme Test 5 (T5-7): „Zurück“ links neben „Weiter“; als Knopf des Formulars steht er im Baum nach „Weiter“, damit
   die Eingabetaste weiter vorwärts geht */
.knoepfe .zurueck { order: -1; }
.knoepfe > div:has(.noch-offen), .knoepfe > .noch-offen { order: 1; flex: 1 1 100%; }
/* Abnahme Test 7 (T7-5): der Behälter für „Noch offen“ steht immer in eigener Zeile; leer ist er kein Element der Leiste,
   sonst rückt „Weiter“ zwischen „Zurück“ und den leeren Behälter in die Mitte */
.knoepfe > #noch-offen-ziel { order: 1; flex: 1 1 100%; }
.knoepfe > #noch-offen-ziel:not(:has(.noch-offen)) { display: none; }
.sum .warnung { display: inline-block; margin-top: .3rem; font-size: .9rem; color: var(--text); border-left: 3px solid var(--warn); padding-left: .5rem; }
.sum .warnung::before { content: "⚠ "; color: var(--warn); }

/* Bau 06: Warennummer mit Warengruppe und amtlichem Wortlaut (Prototyp D knCell) */
.kn-box { margin: .4rem 0 0; font-size: .88rem; color: var(--neben); max-width: 34rem; }
.kn-box p { margin: .1rem 0; }
.kn-wortlaut { color: var(--text); }
.kn-code { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); margin-right: .3rem; white-space: nowrap; }
.kn-herkunft { color: var(--ok); }
.kn-wahl { margin: .2rem 0 .6rem; max-width: 34rem; }
.kn-wahl p { margin: 0 0 .4rem; }
.kn-wahl-option { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; font-size: .9rem; padding: .35rem 0; border-top: 1px solid var(--linie); }
.kn-wahl-option .kn-gruppe { color: var(--neben); }
.fld.fehlt .kn-wahl-option input { outline: 2px solid var(--fehler); outline-offset: 1px; }
/* Warennummer in eigener Zeile wie in Prototyp D (posCard), Eingabe schmal */
.fld.schmal:has(.kn-ziel) { flex: 1 1 100%; --kurzfeld: 11rem; }
.fld:has(.kn-ziel) .eingabe input { max-width: 11rem; }

/* Kandidatensuche (Bau 09, Prototyp D .kand): Gruppen unter der Überschrift der Warengruppe, Wahl per Klick */
.kand { margin: .4rem 0 .6rem; padding: .7rem .8rem; background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; max-width: 40rem; }
.kand > p { margin: 0 0 .3rem; }
.kand-gruppe { font-size: .8rem; font-weight: 700; color: var(--neben); margin: .6rem 0 .2rem; }
.kand-wahl { display: flex; gap: .5rem; align-items: flex-start; padding: .3rem 0; font-weight: 400; font-size: .9rem; cursor: pointer; }
.kand-wahl input { flex: 0 0 auto; width: auto; margin-top: .2rem; }
.fld.fehlt .kand-wahl input { outline: 2px solid var(--fehler); outline-offset: 1px; }
.kand .merkmal { margin-top: .5rem; }
.kand .merkmal summary { color: var(--link); cursor: pointer; font-size: .9rem; }
.merkmal-zeile { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.merkmal-zeile input { flex: 1 1 16rem; max-width: 26rem; }
.merkmal-zeile .btn { padding: .5rem .9rem; }
.kand.laeuft p { margin: 0; color: var(--neben); }
/* Warennummer-Vorschläge v2 (Bernd 10.10.2026): Ziehharmonika je Position, Kapitel klein und grau darüber, die
   Position mit Wortlaut und Zahl der Nummern als Überschrift; ein gewähltes Optionsfeld zeigt seine Klappe an */
.kand-pos { border-top: 1px solid var(--linie); }
.kand-pos:first-child { border-top: 0; }
/* Abnahme Test 5 (T5-21): die ganze Kopfzeile ist die Klickfläche (mindestens 44 px), rechts ein großer Pfeil */
.kand-pos > summary { cursor: pointer; padding: .45rem 2.4rem .45rem 0; min-height: 44px; box-sizing: border-box;
  list-style: none; position: relative; display: flex; flex-direction: column; justify-content: center; }
.kand-pos > summary::-webkit-details-marker { display: none; }
.kand-pos > summary::after { content: ""; position: absolute; right: .7rem; top: 50%; width: .65rem; height: .65rem;
  margin-top: -.5rem; border-right: 2.5px solid var(--link); border-bottom: 2.5px solid var(--link);
  transform: rotate(45deg); transition: transform .15s; }
.kand-pos[open] > summary::after { transform: rotate(-135deg); margin-top: -.15rem; }
.kand-pos > summary:hover .kand-gruppe { text-decoration: underline; }
.kand-pos > summary .kand-kapitel { display: block; font-size: .72rem; color: var(--neben); }
.kand-pos > summary .kand-kopf { display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; }
.kand-pos[open] .kand-anzeigen { display: none; }
.kand-pos > summary .kand-gruppe { margin: 0; flex: 1 1 auto; font-size: .9rem; color: inherit; }
.kand-anzahl { font-size: .78rem; color: var(--neben); white-space: nowrap; }
.kand-pos:not([open]) .kand-anzahl { color: var(--link); font-weight: 600; }
.kand-pos:not([open]):has(input[type=radio]:checked) > summary .kand-gruppe::after { content: " ✓"; color: var(--ok); }
.kand-pos > .kand-wahl { padding-left: .2rem; }
.kand-weitere > summary { color: var(--link); cursor: pointer; font-size: .9rem; margin: .4rem 0; }
p.selbst { margin: .2rem 0; }

/* Vorprüfung (Bau 08): Hilfe nur, wenn „Nein / weiß nicht“ gewählt ist (Prototyp D), EORI-Nummer nur bei „Ja“ */
.fragen .nur-eori-ja, .fragen .nur-eori-nein, .fragen .nur-portal-nein { display: none; }
.fragen:has(input[name="vorpruefung.eori"][value="ja"]:checked) .nur-eori-ja,
.fragen:has(input[name="vorpruefung.eori"][value="nein"]:checked) .nur-eori-nein,
.fragen:has(input[name="vorpruefung.portal"][value="nein"]:checked) .nur-portal-nein { display: block; }
#vorpruefung-ergebnis details { margin-top: .4rem; }
/* Ergebnis der Vorprüfung als Kasten mit Titel, unter den Fragen und über dem Knopf (Bernd 10.10.2026) */
.box.ergebnis { background: var(--karte); color: var(--text); border: 2px solid var(--marke); scroll-margin-top: 9rem; }
.box.ergebnis.ende { background: var(--warn-grund); border-color: var(--warn); }
.box.ergebnis:focus { outline: none; }
.box.ergebnis .ergebnis-titel { font-size: 1.15rem; margin: 0 0 .4rem; }
.box.ergebnis p + p { margin-top: .4rem; }

/* Bau 10: Nachfrage bei abweichendem Namen zur EORI-Nummer als Kasten mit drei Antworten (Prototyp D) */
fieldset.wahl.box { padding: .75rem .9rem; }
fieldset.wahl.box > p { margin: 0 0 .6rem; }
.eori-stand .box { margin: .5rem 0 0; }
.eori-stand .ok-zeile { margin: .4rem 0 0; }

/* Bau 04: Frist als großer Satz mit Zeitplan, Zollamt groß (Prototyp D .plan und .zabox; Farben aus Modul 18) */
.plan { border: 1px solid var(--warn); background: var(--warn-grund); border-radius: 12px; padding: .75rem .9rem; margin: .9rem 0; }
.plan .frist { font-size: 1.1rem; line-height: 1.35; margin: 0 0 .3rem; }
.plan .plan-titel { margin: .6rem 0 0; }
.plan ol { list-style: none; margin: .4rem 0 0; padding: 0; }
.plan li { display: flex; gap: .75rem; padding: .5rem 0; border-top: 1px dashed var(--linie); font-size: .9rem; }
.plan li:first-child { border-top: 0; }
.plan .w { flex: none; width: 9.5rem; font-weight: 700; font-size: .85rem; }
.zabox { border: 2px solid var(--marke); border-radius: 12px; padding: .75rem 1rem; margin: .9rem 0; background: var(--karte); }
.zabox p { margin: 0; }
.zabox .zaname { font-size: 1.25rem; font-weight: 800; margin: .15rem 0; }
fieldset.zabox { min-width: 0; }
fieldset.zabox legend { float: left; width: 100%; padding: 0; margin-bottom: .3rem; }
.zabox .opts { margin-top: .5rem; clear: both; }
.zabox.fehlt { border-color: var(--fehler); }
@media (max-width: 639px) { .plan .w { width: 6.9rem; } }

/* Bau 05: Auf Anmeldungen aufteilen (Prototyp D, Block „aufteilen“) */
:where(.raster) .frage { font-weight: 700; margin: 0; }
.zeile-schritt { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
:where(.raster) .schritt { display: inline-flex; align-items: center; gap: .5rem; }
:where(.raster) .schritt .btn { padding: .35rem .85rem; }
:where(.raster) .schritt output { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
table.pos th.zahl, table.pos td.zahl { text-align: right; }
table.aufteilung input { max-width: 5.5rem; text-align: right; }
/* Vorgang 91: Beschreibung und Stückzahl auf der Höhe der Eingabefelder, Kopf „Paket 1“ in einer Zeile */
table.pos.aufteilung td { vertical-align: middle; }
table.pos.aufteilung th { white-space: nowrap; }
table.aufteilung input { width: 6.5rem; }
.warum { color: var(--fehler); font-size: .85rem; margin: .2rem 0 0; }
.kasten-kopf { display: flex; justify-content: space-between; gap: .75rem; font-size: 1rem; }
.kasten-kopf .preis { white-space: nowrap; font-variant-numeric: tabular-nums; }
details.entfernen { margin-top: .5rem; }
.anmeldung > .btn { margin-top: .5rem; }

/* Bau 11: Sanktionsrückfrage und Warnhinweis (Prototyp D: oben in der Zusammenfassung, rot umrandet, bis beantwortet) */
.box.warn.fehlt, .haken.fehlt { outline: 2px solid var(--fehler); outline-offset: 2px; }
.box h3 { margin: 0 0 .4rem; font-size: 1rem; }
table.vergleich th[scope=row] { white-space: nowrap; color: var(--neben); font-weight: 600; font-size: .8rem; }
table.vergleich td { overflow-wrap: anywhere; }
.antworten { gap: .5rem; margin: .5rem 0 0; }
.antworten .btn { padding: .5rem .9rem; }
.fehler-text { color: var(--fehler); }
.haken input[type=checkbox], .haken-zeile input[type=checkbox] { width: auto; flex: none; margin-top: .2rem; }
.haken-zeile { display: flex; gap: .5rem; align-items: flex-start; }
/* Bau 28: Ausweg-Haken direkt unter dem Feld, zu dem er gehört (etwa Hausnummer) */
.fld.haken-feld { margin-top: -.3rem; font-size: .9rem; }
.fld.haken-feld .haken-zeile label { font-weight: 400; }
/* Links und Link-Knöpfe im gelben Warnkasten: --link erreicht auf --warn-grund nur 4,42:1, deshalb Textfarbe,
   unterstrichen (Kontrasttest: text auf warn-grund) */
.box.warn a, .box.warn button.link { color: var(--text); }

/* Bau 12: TARIC-Maßnahmen als fehlende Angabe unter der Warennummer (Prototyp D massnahmeHtml) */
.massnahmen { flex: 1 1 100%; }
.massnahmen fieldset.massnahme { border: 0; padding: 0; margin: .6rem 0 0; min-width: 0; }
.massnahmen legend { padding: 0; }
/* Abnahme Test 5 (T5-20): je Maßnahme und Zusatzcode eine Karte mit Rand und Abstand (vorher ein gelber Kasten, nur
   durch dünne Linien getrennt). Offen gelb, beantwortet neutral mit grünem Häkchen, „keine Genehmigung“ rot. */
.massnahmen-kopf { margin: .6rem 0 .2rem; }
/* Abnahme Test 7 (T7-17): Kasten der Maßnahmen unter dem Zusatzcode; der Knopf „Normalfall“ steht darin über genau den
   Maßnahmen, auf die er wirkt */
.massnahmen-kasten { border: 1px solid var(--linie); border-radius: 12px; padding: .1rem .8rem .8rem; margin: .9rem 0 0; }
.massnahmen-kasten > .massnahmen-kopf { margin-top: .6rem; }
.massnahmen-satz { margin: 0 0 .4rem; }
.massnahmen .massnahme-verbot { margin: .5rem 0; }
.massnahmen .massnahme-karte { border: 1.5px solid var(--linie); border-radius: 10px; background: var(--karte);
  padding: .6rem .8rem; margin: .7rem 0 0; }
/* der Zusatzcode ist ein fieldset.massnahme (oben ohne Rand); die Farbe kommt aus dem Stand */
.massnahmen fieldset.massnahme.massnahme-karte { border-style: solid; border-width: 1.5px; padding: .6rem .8rem; margin: .7rem 0 0; }
.massnahmen .massnahme-karte.offen { background: var(--warn-grund); border-color: var(--warn); }
.massnahmen.fehlt .massnahme-karte.offen { border-color: var(--fehler); }
.massnahmen .massnahme-karte.beantwortet { border-color: var(--ok); }
.massnahmen .massnahme-karte.abgelehnt { background: var(--fehler-grund); border-color: var(--fehler); }
.massnahme-karte .karte-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.massnahme-karte legend.karte-kopf { float: left; width: 100%; margin-bottom: .3rem; }
.massnahme-karte legend.karte-kopf + * { clear: left; }
.massnahme-karte .karte-name { flex: 1 1 14rem; }
.massnahme-karte .karte-grundlage { color: var(--neben); flex: 1 1 100%; order: 2; }
.massnahme-karte .massnahme-stand { font-weight: 700; }
.massnahme-karte.offen .massnahme-stand { color: var(--warn); }
.massnahme-karte.beantwortet .massnahme-stand { color: var(--ok); }
.massnahme-karte.beantwortet .massnahme-stand::before { content: "✓ "; content: "✓ " / ""; }
.massnahme-karte.abgelehnt .massnahme-stand { color: var(--fehler); }
details.massnahme-karte > summary.karte-kopf { list-style: none; cursor: pointer; padding-right: 1.8rem; position: relative; }
details.massnahme-karte > summary.karte-kopf::-webkit-details-marker { display: none; }
details.massnahme-karte > summary.karte-kopf::after { content: ""; position: absolute; right: .2rem; top: .35rem;
  width: .55rem; height: .55rem; border-right: 2px solid var(--neben); border-bottom: 2px solid var(--neben);
  transform: rotate(45deg); transition: transform .15s; }
details.massnahme-karte[open] > summary.karte-kopf::after { transform: rotate(-135deg); top: .6rem; }
details.massnahme-karte[open] > summary.karte-kopf { margin-bottom: .3rem; }
.massnahmen .wahl-zeile { display: flex; gap: .5rem; align-items: flex-start; padding: .35rem 0; cursor: pointer; }
.massnahmen .wahl-zeile input { width: auto; flex: none; margin-top: .25rem; }
.massnahme .gen-felder { margin: 0 0 .4rem 1.6rem; display: grid; gap: .3rem; }
.massnahme:not(:has(input[value="gen"]:checked)) .gen-felder { display: none; }
.massnahme-zeile { margin-top: .15rem; }
/* Abnahme Test 4 (T4-11): Normalfall oben, jede Maßnahme einzeln aufklappbar mit der Angabe in der Kopfzeile */
.massnahme-normalfall { margin: .5rem 0 .3rem; }
.massnahme-normalfall p { margin: .25rem 0 0; }
.massnahmen .wahl-zeile.abbruch b { color: var(--fehler); }
/* T4-12: Behörde „andere“ mit eigenem Namen, Daten nebeneinander */
.massnahme .gen-felder select.gen-behoerde:not(:has(option[value="andere"]:checked)) + .gen-behoerde-text { display: none; }
.massnahme .gen-daten > div { flex: 1 1 10rem; display: grid; gap: .2rem; }
.massnahme .gen-abschreibung .reihe > div { flex: 1 1 8rem; display: grid; gap: .2rem; }
/* T4-1: Frage „mit oder ohne Verpackung?“ am gelesenen Gewicht */
.gewicht-frage { flex: 1 1 100%; }
.gewicht-frage p { margin: 0 0 .4rem; }
.gewicht-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.gewicht-frage.fehlt { outline: 2px solid var(--fehler); outline-offset: 4px; border-radius: 4px; }
/* T4-13: gültige Nummern unter den ersten sechs Ziffern der Rechnungsnummer, gekennzeichnet */
.kand-passend { margin-bottom: .4rem; }
.kand-passt { font-size: .72rem; color: var(--neben); background: var(--flaeche); border-radius: 4px; padding: .05rem .4rem; white-space: nowrap; }

/* Bau 13: Bezahlen (Prototyp D, Block „zahlung“) und E-Mail mit Code */
.btn.breit { display: block; width: 100%; margin-top: .75rem; text-align: center; }
details.vertrag { margin: .75rem 0; }
details.vertrag summary { color: var(--link); cursor: pointer; }
details.vertrag p { margin: .4rem 0 0; }
/* Bernd 10.10.2026: Kasten „Rechnung an“; mit anderer Rechnungsanschrift tritt der Absender zurück */
.rechnung-an details.vertrag { margin: .6rem 0 0; }
.rechnung-an .ersetzt { opacity: .55; }
input.code { max-width: 10rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
#feld-agb { margin: .75rem 0 0; }

/* Bau 30: „Enthält Ihre Sendung eines davon?“ (beschränkte Waren), Muster wie die TARIC-Maßnahmen */
.beschraenkt .wahl-zeile { display: flex; gap: .5rem; align-items: flex-start; padding: .3rem 0; cursor: pointer; }
.beschraenkt .wahl-zeile input { width: auto; flex: none; margin-top: .25rem; }
.beschraenkt-gruppen { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; max-width: 46rem; }
.beschraenkt-sonst { border-top: 1px solid var(--linie); margin-top: .4rem; padding-top: .3rem; }
fieldset.beschraenkt-frage { border: 0; padding: 0; margin: 1rem 0 0; min-width: 0; }
fieldset.beschraenkt-frage.fehlt .wahl-zeile input { outline: 2px solid var(--fehler); outline-offset: 1px; }
.beschraenkt fieldset.massnahme { min-width: 0; border-top: 0; border-right: 0; border-bottom: 0; }
.beschraenkt fieldset.massnahme legend { float: left; width: 100%; padding: 0; margin-bottom: .3rem; }
.beschraenkt fieldset.massnahme legend + * { clear: left; }
.beschraenkt-zus h3 { margin: 1rem 0 .3rem; font-size: 1rem; }
@media (max-width: 640px) { .beschraenkt-gruppen { grid-template-columns: 1fr; } }
/* Bau 16: Senden nach dem Kauf, Konto, Änderung, Anleitungen. Grün nur als Status (Rand), nie als Fläche. */
.box.ok { background: var(--flaeche); color: var(--text); border-left: 4px solid var(--ok); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.knopfreihe .btn { margin: 0; }
.btn.klein-btn { padding: .4rem .8rem; font-size: .85rem; }
form.mailen { margin: .3rem 0 .6rem; }
form.gesendet { margin: .5rem 0 0; }
form.gesendet .fld { margin: .5rem 0; }
.zeile-zwischen { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.src { font-size: .8rem; color: var(--neben); }
.klein-h { font-size: 1.05rem; margin: 1.4rem 0 .4rem; }
.bestellung-konto { border-top: 1px solid var(--linie); margin-top: 1rem; }
.fest-titel { font-size: .95rem; margin: 1rem 0 .4rem; }
.sum.fest dd { font-weight: 600; }
ol.zeitplan { list-style: none; padding: 0; margin: 1rem 0; }
ol.zeitplan > li { border-left: 3px solid var(--marke); padding: .2rem 0 .6rem .9rem; margin-bottom: .6rem; }
ol.zeitplan .tag { font-weight: 700; margin: 0 0 .3rem; }
:where(.raster) ol.schritte { margin: 0; padding-left: 1.2rem; }
:where(.raster) ol.schritte li { margin: .3rem 0; }
table.pos th[scope=row] { font-weight: 600; color: var(--text); font-size: .9rem; width: 40%; }

/* Test 5 C (T5-10): Suche im Länderfeld (strecke.js, laendersuche) */
.laendersuche { position: relative; flex: 1 1 auto; max-width: 340px; }
.laendersuche input { max-width: none; }
.laender-liste { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: .2rem 0 0; padding: .2rem 0; list-style: none; max-height: 16rem; overflow-y: auto; background: var(--karte); border: 1px solid var(--rahmen); border-radius: 8px; box-shadow: 0 4px 14px var(--schatten); }
.laender-liste li { padding: .45rem .65rem; cursor: pointer; }
.laender-liste li[aria-selected="true"], .laender-liste li:hover { background: var(--flaeche); }
.laender-liste li.kein-treffer { cursor: default; color: var(--neben); }
/* Test 5 C (T5-13): gesperrter Versandweg mit Grund */
.opt.gesperrt { opacity: .6; cursor: not-allowed; }
/* Vorgang 77: Antwort, die der Drittlandszollsatz laut TARIC nahelegt; nur markiert, nie vorausgewählt */
.opt.vorgeschlagen:not(:has(input:checked)) { border-style: dashed; border-color: var(--marke); }

/* Test 5 D und Rechnungscheck Stufe 1 (Wayfinder 43): ruhige Kästen, keine Warnfarbe */
/* Abnahme Test 7 (T7-1): alles gefunden: Rahmen wie der Ergebniskasten, aber ruhiger (1 px, ohne Grund); fehlt etwas: gelb */
.box.rechnungscheck { background: none; border: 1px solid var(--rahmen); }
.box.rechnungscheck.warn { border: 0; border-left: 4px solid var(--warn); }
.box.rechnungscheck.warn { background: var(--warn-grund); border-left-color: var(--warn); }  /* T6-3: wie .box.warn */
.box.rechnungscheck ul { margin: .3rem 0; padding-left: 1.2rem; }
.box.rechnungscheck p { margin: .2rem 0; }
.posten-liste { list-style: none; padding: 0; margin: .3rem 0; }
.posten-liste li { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; padding: .3rem 0; border-bottom: 1px solid var(--linie); }
.wertrechnung { margin: .5rem 0 0; font-size: .9rem; }
.wertrechnung dt { color: var(--neben); }
.wertrechnung dl { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; margin: .3rem 0; }
.wertrechnung dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
/* Abnahme Test 6 (T6-18): Messfrage A.TR/EUR.1, die gegebene Antwort ist markiert */
.eur1-messfrage .btn.gewaehlt { border-color: var(--text); font-weight: 700; }

/* Einwilligungsbanner (web/statistik.py): unten fest, beide Knöpfe gleich gestaltet und gleich breit */
.einwilligung { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--karte); border-top: 1px solid var(--linie);
  box-shadow: 0 -6px 20px var(--schatten); padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
.einwilligung-innen { max-width: calc(680px + 1.5rem + 280px); margin: 0 auto; display: flex; gap: 1rem 1.5rem; align-items: center; flex-wrap: wrap; }
.einwilligung-text { flex: 1 1 28rem; }
.einwilligung-text h2 { font-size: 1rem; margin: 0 0 .25rem; }
.einwilligung-text p { margin: 0; font-size: .9rem; }
.einwilligung-knoepfe { display: flex; gap: .75rem; flex: 0 1 auto; flex-wrap: wrap; }
.einwilligung-knoepfe .gleich { min-width: 11rem; flex: 1 1 11rem; }
body:has(#einwilligung:not([hidden])) { padding-bottom: 14rem; }  /* der Fuß bleibt unter dem Banner erreichbar */

/* Abnahme Test 7 (T7-39 Nachtrag): Kasse „Meinten Sie …?“ und die Adresse über dem Bestellknopf; Erfolgsseite
   Bestätigung der Adresse mit Code */
.vorschlag { margin: .4rem 0 0; font-weight: 600; }
.vorschlag button.link { font-weight: 700; overflow-wrap: anywhere; }
.email-wiederholt { margin: .9rem 0 .5rem; }
.email-wiederholt b { overflow-wrap: anywhere; }
.bestaetigen h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
.bestaetigen b { overflow-wrap: anywhere; }
.code-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; margin: .6rem 0; }
.code-zeile .fld { margin: 0; }
.code-zeile input { width: 9rem; letter-spacing: .15em; }
.code-erneut { margin: .4rem 0 0; }

/* Bau 19: Ratgeberseiten (Modul 17, Marke aus Modul 18): Lesebreite, Brotkrumen, Zitate der Auskunft, Tabellen,
   Übergang zur Vorprüfung. Orange nur als Linie, nie als Schriftgrund */
.ratgeber-spalte { max-width: 46rem; margin: 0 auto; }
.ratgeber h1 { font-size: 1.6rem; line-height: 1.25; margin-bottom: 1rem; }
.ratgeber h2 { font-size: 1.2rem; margin: 1.75rem 0 .5rem; scroll-margin-top: 1rem; }
.ratgeber h3 { font-size: 1.05rem; margin: 1.25rem 0 .4rem; }
.ratgeber p, .ratgeber li { line-height: 1.6; }
.ratgeber ul, .ratgeber ol { padding-left: 1.3rem; }
.ratgeber li { margin: .25rem 0; }
.ratgeber blockquote { margin: 1rem 0; padding: .6rem 1rem; border-left: 4px solid var(--marke); background: var(--flaeche); border-radius: 0 10px 10px 0; }
.ratgeber blockquote p, .ratgeber blockquote ul { margin: .35rem 0; }
/* Bernd 14.10.2026: Zusammenfassung oben („## Kurz gesagt“, ratgeber.py) als eigener Kasten */
.ratgeber .kurz-gesagt { margin: 1rem 0 1.5rem; padding: .7rem 1.1rem .8rem; border: 1px solid var(--linie); border-top: 3px solid var(--marke); background: var(--flaeche); border-radius: 10px; }
.ratgeber .kurz-gesagt h2 { margin: .2rem 0 .4rem; font-size: 1.05rem; }
.ratgeber .kurz-gesagt ul { margin: .3rem 0; }
.start-ratgeber > .kurz-gesagt:first-child { margin-top: 0; }
.ratgeber .kurz-gesagt:has(+ .ratgeber-knopf-oben) { margin-bottom: 1rem; }
.ratgeber-knopf-oben { margin: 0 0 1.5rem; }  /* Knopf zur Vorprüfung unter dem Kasten (R1-4) */
.ratgeber table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ratgeber th { text-align: left; border-bottom: 2px solid var(--linie); padding: .45rem .5rem; }
.ratgeber td { border-bottom: 1px solid var(--linie); padding: .45rem .5rem; vertical-align: top; }
.ratgeber hr { border: 0; border-top: 1px solid var(--linie); margin: 1.5rem 0; }
.ratgeber img { max-width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 8px; }
/* Schaubild als SVG (Incoterms, Bernd 15.10.2026): volle Breite, Farben hell/dunkel stecken im SVG selbst;
   die schmale Fassung kommt über <picture> (ratgeber.SCHMAL_BIS) */
.ratgeber picture.schaubild { display: block; margin: .75rem 0; }
.ratgeber img.schaubild { display: block; width: 100%; height: auto; }
.start-ratgeber { margin-top: 1.5rem; }
.start-ratgeber > h2:first-child { margin-top: 0; }
.ratgeber .neu-fenster { font-size: .8em; }  /* externer Link, neues Fenster (R1-5) */
/* der unsichtbare Text „(neues Fenster)“ ist absolut gesetzt: in einer breiten Tabelle bliebe er sonst rechts außerhalb
   des Kastens stehen und machte die Seite am Handy breiter */
.ratgeber .tabelle { position: relative; }
.ratgeber code { font-size: .9em; background: var(--flaeche); padding: .05rem .3rem; border-radius: 4px; }
/* Seite „Preise“ (Bernd 14.10.2026): Preisliste als Tabelle, Beispiel in der Art des Warenkorbs */
.preise-einleitung { font-size: 1.05rem; }
table.preisliste { width: 100%; max-width: 40rem; border-collapse: collapse; font-size: .95rem; }
table.preisliste th, table.preisliste td { text-align: left; border-bottom: 1px solid var(--linie); padding: .55rem .4rem; vertical-align: top; }
table.preisliste thead th { font-size: .75rem; color: var(--neben); font-weight: 600; }
table.preisliste tbody th { font-weight: 400; }
table.preisliste td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
table.preisliste thead th:last-child { text-align: right; }
table.preisliste .preis-hinweis { display: block; margin-top: .15rem; }
.preisbeispiel { max-width: 26rem; margin: .5rem 0 .8rem; padding: .8rem 1rem; border: 1px solid var(--linie); border-top: 3px solid var(--marke); border-radius: 12px; background: var(--karte); }
@media (max-width: 639px) {
  .ratgeber h1 { font-size: 1.35rem; }
}

/* Bauauftrag Warenkorb (Bernd 15.10.2026): Angebotskarten auf Startseite und Seite Preise, Druckvorlagen in der
   Zusammenfassung, Leistung neben der Anmeldung */
.angebot-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; }
.angebot-karte { border: 1px solid var(--linie); border-radius: 12px; padding: .75rem .9rem; display: flex; flex-direction: column; }
.angebot-karte h3 { margin: 0 0 .35rem; font-size: 1rem; }
.angebot-karte p { margin: 0 0 .4rem; }
.angebot-karte .angebot-preis { margin-top: auto; font-weight: 700; }
.zusatz { border-top: 1px solid var(--linie); padding-top: .75rem; margin-top: 1rem; }
.zusatz-wahl { margin-bottom: .9rem; }
.zusatz-wahl p { margin: .2rem 0; }
.kopf-anm .leistung, h3 .leistung { font-weight: inherit; }

/* --- Suche, Ratgeber-Hubs, Leistungen (Bau suche-seo, R1-14, G-7, G-18, G-19) -------------------------------------
   Eigener Abschnitt, damit die Gestaltung ihn beim Zusammenführen übernehmen oder ersetzen kann. Suchfeld im Kopf:
   am Rechner links neben dem mittigen Logo (die Navigation steht rechts), bis Tablet-Breite unter der Navigation,
   am Handy über die ganze Breite (G-7). */
.ratgeber-liste { list-style: none; padding: 0; margin: .4rem 0 1rem; }
.ratgeber-liste li { padding: .35rem 0; border-bottom: 1px solid var(--linie); }
.ratgeber-liste li:last-child { border-bottom: 0; }
.ratgeber-liste .mut.klein { display: block; }
.ratgeber-gruppe { margin-top: 1.4rem; }
.ratgeber-verwandte, .ratgeber-hub-link { margin-top: 1rem; }

/* Animation der Startseite (R1-33, G-20): 12 s, Endzustand 3,8 s; Farben im Block „Prototyp B-hell“ */
@keyframes za-hl-empf { 0.00% { opacity: 0; } 6.93% { opacity: 0; } 8.41% { opacity: 1; } 16.34% { opacity: 1; } 18.32% { opacity: 0; } 100.00% { opacity: 0; } }
@keyframes za-chip-empf { 0.00% { opacity: 0; transform: translate(0, 0); } 9.41% { opacity: 0; transform: translate(0, 0); } 10.40% { opacity: 1; transform: translate(0, 0); } 15.84% { opacity: 1; transform: translate(218.0px, -24.0px); } 16.84% { opacity: 0; transform: translate(218.0px, -24.0px); } 100.00% { opacity: 0; transform: translate(218.0px, -24.0px); } }
@keyframes za-w-empf { 0.00% { opacity: 0; } 15.35% { opacity: 0; } 17.32% { opacity: 1; } 84.16% { opacity: 1; } 89.10% { opacity: 0; } 100.00% { opacity: 0; } }
.anim-an .hl-empf { animation: za-hl-empf 10.1s linear infinite; } .anim-an .chip-empf { animation: za-chip-empf 10.1s ease-in-out infinite; } .anim-an .w-empf { animation: za-w-empf 10.1s linear infinite; }
@keyframes za-hl-ware { 0.00% { opacity: 0; } 16.34% { opacity: 0; } 17.82% { opacity: 1; } 25.75% { opacity: 1; } 27.72% { opacity: 0; } 100.00% { opacity: 0; } }
@keyframes za-chip-ware { 0.00% { opacity: 0; transform: translate(0, 0); } 18.81% { opacity: 0; transform: translate(0, 0); } 19.81% { opacity: 1; transform: translate(0, 0); } 25.25% { opacity: 1; transform: translate(252.0px, -61.0px); } 26.23% { opacity: 0; transform: translate(252.0px, -61.0px); } 100.00% { opacity: 0; transform: translate(252.0px, -61.0px); } }
@keyframes za-w-ware { 0.00% { opacity: 0; } 24.75% { opacity: 0; } 26.73% { opacity: 1; } 84.16% { opacity: 1; } 89.10% { opacity: 0; } 100.00% { opacity: 0; } }
.anim-an .hl-ware { animation: za-hl-ware 10.1s linear infinite; } .anim-an .chip-ware { animation: za-chip-ware 10.1s ease-in-out infinite; } .anim-an .w-ware { animation: za-w-ware 10.1s linear infinite; }
@keyframes za-hl-menge { 0.00% { opacity: 0; } 25.75% { opacity: 0; } 27.23% { opacity: 1; } 35.14% { opacity: 1; } 37.13% { opacity: 0; } 100.00% { opacity: 0; } }
@keyframes za-chip-menge { 0.00% { opacity: 0; transform: translate(0, 0); } 28.22% { opacity: 0; transform: translate(0, 0); } 29.20% { opacity: 1; transform: translate(0, 0); } 34.66% { opacity: 1; transform: translate(166.0px, -23.0px); } 35.64% { opacity: 0; transform: translate(166.0px, -23.0px); } 100.00% { opacity: 0; transform: translate(166.0px, -23.0px); } }
@keyframes za-w-menge { 0.00% { opacity: 0; } 34.16% { opacity: 0; } 36.14% { opacity: 1; } 84.16% { opacity: 1; } 89.10% { opacity: 0; } 100.00% { opacity: 0; } }
.anim-an .hl-menge { animation: za-hl-menge 10.1s linear infinite; } .anim-an .chip-menge { animation: za-chip-menge 10.1s ease-in-out infinite; } .anim-an .w-menge { animation: za-w-menge 10.1s linear infinite; }
@keyframes za-hl-wert { 0.00% { opacity: 0; } 35.14% { opacity: 0; } 36.63% { opacity: 1; } 44.55% { opacity: 1; } 46.54% { opacity: 0; } 100.00% { opacity: 0; } }
@keyframes za-chip-wert { 0.00% { opacity: 0; transform: translate(0, 0); } 37.63% { opacity: 0; transform: translate(0, 0); } 38.61% { opacity: 1; transform: translate(0, 0); } 44.06% { opacity: 1; transform: translate(112.0px, 15.0px); } 45.05% { opacity: 0; transform: translate(112.0px, 15.0px); } 100.00% { opacity: 0; transform: translate(112.0px, 15.0px); } }
@keyframes za-w-wert { 0.00% { opacity: 0; } 43.57% { opacity: 0; } 45.54% { opacity: 1; } 84.16% { opacity: 1; } 89.10% { opacity: 0; } 100.00% { opacity: 0; } }
.anim-an .hl-wert { animation: za-hl-wert 10.1s linear infinite; } .anim-an .chip-wert { animation: za-chip-wert 10.1s ease-in-out infinite; } .anim-an .w-wert { animation: za-w-wert 10.1s linear infinite; }
@keyframes za-hl-gew { 0.00% { opacity: 0; } 44.55% { opacity: 0; } 46.04% { opacity: 1; } 53.96% { opacity: 1; } 55.94% { opacity: 0; } 100.00% { opacity: 0; } }
@keyframes za-chip-gew { 0.00% { opacity: 0; transform: translate(0, 0); } 47.03% { opacity: 0; transform: translate(0, 0); } 48.02% { opacity: 1; transform: translate(0, 0); } 53.47% { opacity: 1; transform: translate(250.0px, -15.0px); } 54.45% { opacity: 0; transform: translate(250.0px, -15.0px); } 100.00% { opacity: 0; transform: translate(250.0px, -15.0px); } }
@keyframes za-w-gew { 0.00% { opacity: 0; } 52.97% { opacity: 0; } 54.95% { opacity: 1; } 84.16% { opacity: 1; } 89.10% { opacity: 0; } 100.00% { opacity: 0; } }
.anim-an .hl-gew { animation: za-hl-gew 10.1s linear infinite; } .anim-an .chip-gew { animation: za-chip-gew 10.1s ease-in-out infinite; } .anim-an .w-gew { animation: za-w-gew 10.1s linear infinite; }
@keyframes za-wn { 0.00% { opacity: 0; } 55.45% { opacity: 0; } 58.42% { opacity: 1; } 84.16% { opacity: 1; } 89.10% { opacity: 0; } 100.00% { opacity: 0; } }
@keyframes za-fertig { 0.00% { opacity: 0; transform: translateY(6px); } 62.38% { opacity: 0; transform: translateY(6px); } 65.35% { opacity: 1; transform: translateY(0); } 84.16% { opacity: 1; transform: translateY(0); } 89.10% { opacity: 0; transform: translateY(0); } 100.00% { opacity: 0; transform: translateY(6px); } }
@keyframes za-balken { 0.00% { transform: scaleX(0); } 4.95% { transform: scaleX(0); } 62.38% { transform: scaleX(1); } 84.16% { transform: scaleX(1); } 89.10% { transform: scaleX(0); } 100.00% { transform: scaleX(0); } }
.anim-an .wn { animation: za-wn 10.1s linear infinite; } .anim-an .fertig { animation: za-fertig 10.1s ease-out infinite; } .anim-an .k-balken { animation: za-balken 10.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .anim-an * { animation: none !important; } }

/* G-22: „Keine passt? Ware genauer beschreiben“ als deutlicher Knopf in einem Kasten unter den Vorschlägen */
.kand .merkmal { margin-top: .9rem; border: 1px dashed var(--linie-stark); border-radius: var(--radius); padding: .7rem .9rem; background: var(--karte); }
.kand .merkmal summary { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem .95rem; border: 1.5px solid var(--link); border-radius: 10px; color: var(--link); font-weight: 600; font-size: .95rem; list-style: none; }
.kand .merkmal summary::-webkit-details-marker { display: none; }
.kand .merkmal summary .ico { width: 1.1rem; height: 1.1rem; --ico: currentColor; --akz: currentColor; }
.kand .merkmal summary:hover { background: var(--weich); color: var(--link-tief); }
.kand .merkmal[open] summary { margin-bottom: .4rem; }
.karte h1 { font-size: 1.55rem; }
.karte > .zahlarten-marken { margin: .2rem 0 1rem; }

/* Abnahme Ratgeber 1 (R1-30): „Aktuelles“, Übersicht und Beitrag (Vorlagen aktuelles.html, aktuelles_beitrag.html) */
.aktuelles-liste { list-style: none; margin: 1rem 0 0; padding: 0; }
.aktuelles-eintrag { padding: 1rem 0; border-top: 1px solid var(--linie); }
.aktuelles-eintrag h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
.aktuelles-eintrag p { margin: .2rem 0 0; }
.aktuelles-datum { color: var(--neben); font-size: .9rem; margin: -.3rem 0 .8rem; }
.aktuelles-eintrag .aktuelles-datum { margin: 0; }
.aktuelles-titelbild { margin: 0 0 1rem; }
.aktuelles-titelbild img, img.aktuelles-titelbild { display: block; width: 100%; height: auto; border-radius: 12px; }
.aktuelles-titelbild figcaption { color: var(--neben); font-size: .8rem; margin-top: .3rem; }
.aktuelles-ratgeber { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--linie); font-weight: 600; }

/* ===== Prototyp B-hell (prototype/gestaltung-r1-38: basis.css, logo.css, stil-b.css, stil-runde2.css, stil-bh.css,
   stil-runde3.css), Regeln wörtlich; Farbwerte als Variablen, von B-hell überschriebene Erklärungen aus B entfernt ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
/* Bernd 18.10.2026 (Scrollsprung): weich nur für Sprünge innerhalb der geladenen Seite (strecke.js setzt .weich nach
   dem Laden). Vorher fuhr jede neu geladene Seite mit Sprungmarke sichtbar von oben bis zur Marke. */
html.weich{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html,html.weich{scroll-behavior:auto}
}
body{margin:0;font-family:var(--schrift);font-size:16px;line-height:1.6;color:var(--text-b);background:var(--bg);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--link-b);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--schrift-titel);color:var(--text-b);line-height:1.18;margin:0}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--fokus);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:-999px;top:0}
.sprung:focus{left:1rem;top:1rem;z-index:99;background:var(--karte);padding:.5rem 1rem}
.rahmen{max-width:72rem;margin:0 auto;padding-inline:1.25rem}
.ico{width:1.5rem;height:1.5rem;flex:none;fill:none;stroke:var(--ico);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
symbol .akz{stroke:var(--akz)}
.pfeil{width:1rem;height:1rem;stroke-width:2;--ico:currentColor;--akz:currentColor}
.ext{width:.8em;height:.8em;margin-left:.2em;vertical-align:-.05em;--ico:currentColor;stroke-width:2}
.logo-svg{display:block;height:2.1rem;width:auto;color:var(--text-b)}
.logo-balken{fill:var(--marke)}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--knopf);color:var(--auf-knopf);font-weight:600;font-size:1rem;text-decoration:none;border:0;border-radius:var(--radius-knopf);padding:.75rem 1.3rem;cursor:pointer;font-family:var(--schrift);transition:background .15s, transform .15s;line-height:1.2}
.knopf:hover{background:var(--knopf-hover);text-decoration:none}
.knopf .ico{--ico:currentColor;--akz:currentColor}
.knopf.gross{padding:.95rem 1.6rem;font-size:1.05rem}
.knopf-zweit{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;background:transparent;color:var(--link-b);border:1.5px solid var(--knopf);border-radius:var(--radius-knopf);padding:.65rem 1.1rem;font:600 .95rem/1.2 var(--schrift);text-decoration:none;cursor:pointer}
.knopf-zweit .ico{--ico:currentColor;--akz:currentColor;width:1.2rem;height:1.2rem}
.kopf{position:sticky;top:0;z-index:50;background:var(--karte);border-bottom:1px solid var(--linie)}
.kopf-innen{display:flex;align-items:center;gap:2rem;height:4.5rem}
.marke{display:block;color:var(--text-b)}
.hauptnav{display:flex;align-items:center;gap:.25rem}
.hauptnav > a,.mega > summary{color:var(--text-b);text-decoration:none;font-weight:500;font-size:.98rem;padding:.55rem .8rem;border-radius:.5rem;cursor:pointer;display:flex;align-items:center;gap:.3rem;list-style:none}
.mega > summary::-webkit-details-marker,.mobil > summary::-webkit-details-marker,:where(.voll) .frage > summary::-webkit-details-marker,.toc-mobil > summary::-webkit-details-marker{display:none}
.hauptnav > a:hover,.mega > summary:hover{background:var(--bg-wechsel)}
.hauptnav > a[aria-current],.mega[data-aktiv] > summary{color:var(--link-b)}
.mega{position:relative}
.mega[open] > summary .pfeil{transform:rotate(180deg)}
.mega-panel{position:absolute;left:-1rem;top:calc(100% + .7rem);width:min(52rem,calc(100vw - 4rem));background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:0 18px 50px -12px var(--schatten);padding:1.5rem 1.5rem 1rem}
.mega-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem 1.75rem}
.mega-kopf,.menue-kopf{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:.92rem;margin:0 0 .45rem}
.mega-ico,.menue-kopf > .ico{width:2.1rem;height:2.1rem;padding:.35rem;border-radius:.55rem;background:var(--weich)}
.mega-gruppe ul,.menue-gruppe ul{list-style:none;margin:0;padding:0 0 0 2.7rem}
.mega-gruppe li,.menue-gruppe li{margin:.15rem 0}
.mega-gruppe a,.menue-gruppe a{color:var(--neben-b);text-decoration:none;font-size:.9rem}
.mega-gruppe a:hover,.menue-gruppe a:hover{color:var(--link-b);text-decoration:underline}
.mega-gruppe .bald,.menue-gruppe .bald{color:var(--neben-b);font-size:.85rem;font-style:italic;opacity:.8}
.mega-fuss{margin:1.1rem 0 0;padding-top:.9rem;border-top:1px solid var(--linie);font-size:.92rem}
.mega-fuss a{font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.3rem}
.mega-fuss .pfeil{--ico:currentColor}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.suche{position:relative;display:flex;align-items:center}
.suche-ico{position:absolute;left:.7rem;width:1.1rem;height:1.1rem;pointer-events:none;--ico:var(--neben-b);--akz:var(--neben-b)}
.suche input{font:inherit;font-size:.92rem;width:15rem;padding:.55rem .8rem .55rem 2.2rem;border:1px solid var(--linie);border-radius:.6rem;background:var(--bg-wechsel);color:var(--text-b)}
.suche input:focus{outline:2px solid var(--marke);outline-offset:0;background:var(--karte)}
.treffer{position:absolute;right:0;top:calc(100% + .4rem);width:24rem;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:0 18px 40px -12px var(--schatten);padding:.4rem;z-index:60}
.treffer a{display:block;padding:.55rem .7rem;border-radius:.5rem;text-decoration:none;color:var(--text-b)}
.treffer a:hover{background:var(--bg-wechsel)}
.treffer b{display:block;font-size:.92rem}
.treffer span{display:block;font-size:.8rem;color:var(--neben-b);line-height:1.35}
.treffer .leer{padding:.6rem;font-size:.88rem;margin:0}
.einloggen{display:flex;align-items:center;gap:.4rem;color:var(--text-b);text-decoration:none;font-weight:500;font-size:.95rem;padding:.5rem .7rem;border-radius:.5rem}
.einloggen .ico{width:1.2rem;height:1.2rem}
.einloggen:hover{background:var(--bg-wechsel)}
.mobil{display:none}
.mobil > summary{list-style:none;cursor:pointer;padding:.45rem;border-radius:.5rem;display:flex}
.mobil .auf{display:none}
.mobil[open] .auf{display:block}
.mobil[open] .zu{display:none}
.mobil-panel{position:fixed;left:0;right:0;top:4rem;bottom:0;overflow:auto;background:var(--karte);padding:1rem 1.25rem 2rem;border-top:1px solid var(--linie)}
.mobil-panel .mega-gruppe,.mobil-panel .menue-gruppe{padding:.6rem 0;border-bottom:1px solid var(--linie)}
.mobil-titel{font-family:var(--schrift-titel);font-size:1.1rem;margin:1rem 0 .3rem}
.mobil-links{display:flex;flex-direction:column;gap:.2rem;margin:.6rem 0 0}
.mobil-ratgeber{border-bottom:1px solid var(--linie)}
.mobil-ratgeber > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:1.1rem;font-weight:600;padding:.6rem 0}
.mobil-ratgeber > summary::-webkit-details-marker{display:none}
.mobil-ratgeber > summary .pfeil{width:1.2rem;height:1.2rem;transition:transform .2s}
.mobil-ratgeber[open] > summary .pfeil{transform:rotate(180deg)}
.mobil-gruppen{padding-bottom:.6rem}
.mobil-links a{font-size:1.1rem;font-weight:600;color:var(--text-b);text-decoration:none;padding:.6rem 0;border-bottom:1px solid var(--linie)}
.suche-mobil{width:100%}
.suche-mobil input{width:100%;font-size:1rem}
.held{background:var(--bg-wechsel);padding-block:3.5rem 3.5rem}
.held-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center}
.dachzeile{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--neben-b);margin-bottom:.9rem}
.dachzeile::before{content:"";width:1.6rem;height:2px;background:var(--marke)}
.werkzeug h1{font-size:clamp(1.85rem,3.4vw,2.75rem);font-weight:var(--h1-gewicht);letter-spacing:-.01em;margin-bottom:.9rem;color:var(--text-b)}
.lead{font-size:1.1rem;color:var(--neben-b);max-width:34rem;margin-bottom:1.6rem}
.upload{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.1rem 1.25rem 1.1rem;box-shadow:var(--karte-schatten);color:var(--text-b)}
.upload-kopf{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:.95rem;margin-bottom:.85rem}
.upload-kopf .ico{width:1.3rem;height:1.3rem}
.upload-schritt{margin-left:auto;font-weight:500;font-size:.78rem;color:var(--neben-b);white-space:nowrap;flex:none}
.drop{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;border:1.5px dashed var(--rahmen);border-radius:calc(var(--radius) - .2rem);padding:1.6rem 1rem 1.4rem;background:var(--bg-wechsel);cursor:pointer;transition:border-color .15s, background .15s}
.drop:hover{border-color:var(--marke)}
.drop-ico{display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:50%;background:var(--weich);margin-bottom:.3rem}
.drop-ico .ico{width:1.7rem;height:1.7rem}
.drop-titel{font-weight:600;font-size:1.08rem}
.drop-oder{font-size:.85rem;color:var(--neben-b)}
.drop .knopf{margin-top:.3rem}
.nur-handy{display:none}
.erlaubt{font-size:.8rem;color:var(--neben-b);margin:.65rem 0 .5rem;text-align:center}
.rechtlich{font-size:.82rem;color:var(--neben-b);margin:0 0 .55rem;line-height:1.45}
.messen{display:flex;gap:.5rem;font-size:.8rem;color:var(--neben-b);margin:0;line-height:1.45;padding-top:.6rem;border-top:1px solid var(--linie)}
.messen .ico{width:1rem;height:1rem;margin-top:.12rem}
.ohne-rechnung{margin:1rem 0 0;font-size:.95rem;color:var(--neben-b)}
.ohne-rechnung a{font-weight:600;display:inline-flex;align-items:center;gap:.25rem;color:var(--link-b)}
.ohne-rechnung .pfeil{--ico:currentColor}
.anim{position:relative}
.anim-unter{font-size:.78rem;color:var(--neben-b);text-align:center;margin:.4rem 0 0}
.szene{display:block;width:100%;height:auto}
.papier{fill:var(--a-papier)}
.papier-schatten{fill:var(--a-schatten)}
.p-titel{font:700 15px var(--schrift-titel);fill:var(--a-text);letter-spacing:.08em}
.p-klein{font:10px var(--schrift);fill:var(--a-neben)}
.p-label{font:600 9px var(--schrift);fill:var(--a-neben);text-transform:uppercase;letter-spacing:.06em}
.p-fett{font:600 13px var(--schrift);fill:var(--a-text)}
.p-text{font:12px var(--schrift);fill:var(--a-text)}
.p-zeile{font-size:11px}
.p-linie{stroke:var(--a-linie);stroke-width:1}
.p-balken{fill:var(--a-linie)}
.hl{fill:var(--a-hl);stroke:var(--marke);stroke-width:1.2;opacity:0}
.chip rect{fill:var(--marke)}
.chip{opacity:0}
.k-grund{fill:var(--a-karte);stroke:var(--a-rand);stroke-width:1}
.k-schatten{fill:var(--a-schatten)}
.k-titel{letter-spacing:.03em;font:700 12.5px var(--schrift);fill:var(--a-text)}
.k-spur{fill:var(--a-linie)}
.k-balken{fill:var(--marke);transform-box:fill-box;transform-origin:left center}
.k-label{font:600 9.5px var(--schrift);fill:var(--a-neben);text-transform:uppercase;letter-spacing:.06em}
.k-wert{font:500 14px var(--schrift);fill:var(--a-text)}
.k-linie{stroke:var(--a-linie)}
.k-pille{fill:var(--a-pille)}
.k-pille-text{font:600 8.5px var(--schrift);fill:var(--a-pille-text)}
.f-grund{fill:var(--a-fertig)}
.f-kreis{fill:var(--a-ok)}
.f-haken{fill:none;stroke:var(--a-haken);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f-text{font:600 12px var(--schrift);fill:var(--a-fertig-text)}
.fertig,.chip g{transform-box:fill-box}
.vertrauen{background:var(--karte);border-bottom:1px solid var(--linie)}
.v-liste{list-style:none;margin:0;padding:1.4rem 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.v-liste li{display:flex;gap:.75rem;align-items:flex-start}
.v-ico{width:2.4rem;height:2.4rem;padding:.45rem;border-radius:.7rem;background:var(--weich)}
.v-titel{font-weight:600;font-size:.93rem;line-height:1.3;margin:0 0 .2rem}
.v-text{font-size:.8rem;color:var(--neben-b);line-height:1.4;margin:0}
:where(.voll) .abschnitt{padding-block:4.5rem}
:where(.voll) .abschnitt.wechsel{background:var(--bg-wechsel)}
.abschnitt-kopf{max-width:44rem;margin-bottom:2.25rem}
.dach{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--link-b);margin:0 0 .6rem;display:flex;gap:.6rem;align-items:center}
.dach .nr{display:none}
.abschnitt-kopf h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:var(--h2-gewicht);letter-spacing:-.01em}
.abschnitt-text{margin:.8rem 0 0;color:var(--neben-b);font-size:1.05rem}
.kurz-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.kurz-karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--karte-schatten)}
.kurz-ico{width:2.6rem;height:2.6rem;padding:.5rem;border-radius:.7rem;background:var(--weich);margin-bottom:.9rem}
.kurz-frage{font-family:var(--schrift-titel);font-weight:500;font-size:1.05rem;margin:0 0 .4rem}
.kurz-karte p:last-child{margin:0;font-size:.93rem;color:var(--neben-b)}
:where(.voll) .schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;position:relative}
:where(.voll) .schritt{position:relative}
.schritt-ico{position:relative;width:4.25rem;height:4.25rem;border-radius:50%;display:grid;place-items:center;background:var(--karte);border:1px solid var(--linie);margin-bottom:1.1rem;z-index:1}
.schritt-ico .ico{width:2rem;height:2rem}
.schritt-nr{position:absolute;right:-.3rem;top:-.3rem;width:1.55rem;height:1.55rem;border-radius:50%;background:var(--knopf);color:var(--auf-knopf);font:600 .8rem/1.55rem var(--schrift);text-align:center}
:where(.voll) .schritt h3{font-size:1.15rem;font-weight:500;margin-bottom:.5rem}
:where(.voll) .schritt p{color:var(--neben-b);margin:0}
.schritte-nach{display:flex;gap:.6rem;margin:2.25rem 0 0;padding:1rem 1.2rem;border-radius:var(--radius);background:var(--karte);border:1px solid var(--linie);font-size:.95rem;max-width:52rem}
.schritte-nach .ico{width:1.3rem;height:1.3rem;margin-top:.15rem}
.fuer-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.fuer{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.6rem;display:flex;flex-direction:column;box-shadow:var(--karte-schatten)}
.fuer-ico{width:3rem;height:3rem;padding:.6rem;border-radius:.8rem;background:var(--weich);margin-bottom:1rem}
.fuer h3{font-size:1.15rem;font-weight:500;margin-bottom:.5rem}
.fuer p{color:var(--neben-b);font-size:.96rem}
.fuer-link{margin-top:auto;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.3rem}
.fuer-link .pfeil{--ico:currentColor}
.marke-bald{margin:auto 0 0;align-self:flex-start;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--neben-b);border:1px solid var(--linie);border-radius:99px;padding:.2rem .65rem}
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.kachel{display:flex;flex-direction:column;gap:.35rem;padding:1.3rem;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);color:var(--text-b);text-decoration:none;transition:border-color .15s, box-shadow .15s, transform .15s;box-shadow:var(--karte-schatten)}
.kachel:hover{border-color:var(--marke);text-decoration:none;transform:translateY(-2px);box-shadow:0 14px 30px -14px var(--schatten)}
.kachel-ico{width:2.6rem;height:2.6rem;padding:.5rem;border-radius:.7rem;background:var(--weich);margin-bottom:.45rem}
.kachel-titel{font-weight:600;font-size:1.02rem;line-height:1.3}
.kachel-text{font-size:.86rem;color:var(--neben-b);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kachel-mehr{margin-top:auto;padding-top:.5rem;font-size:.86rem;font-weight:600;color:var(--link-b);display:flex;align-items:center;gap:.25rem}
.kachel-mehr .pfeil{--ico:currentColor}
.kachel.bald{background:transparent;border-style:dashed;box-shadow:none;color:var(--neben-b)}
.kachel.bald:hover{transform:none;border-color:var(--linie);box-shadow:none}
.kachel.bald .kachel-ico{opacity:.6}
.kacheln.vier{grid-template-columns:repeat(4,1fr)}
.fragen-raster{display:grid;grid-template-columns:1fr;gap:0;max-width:52rem}
.fragen-hilfe{color:var(--neben-b)}
:where(.voll) .frage{border-bottom:1px solid var(--linie)}
:where(.voll) .frage:first-child{border-top:1px solid var(--linie)}
:where(.voll) .frage > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.15rem 0;font-weight:600;font-size:1.04rem}
.frage-ico{width:1.3rem;height:1.3rem;transition:transform .2s;--ico:var(--link-b)}
:where(.voll) .frage[open] .frage-ico{transform:rotate(45deg)}
.frage-text{padding:0 0 1.2rem;color:var(--text-b);font-size:.97rem}
.frage-text ul{padding-left:1.2rem}
.rechtsgrundlagen{font-size:.82rem;color:var(--neben-b);margin-top:1.5rem}
.rechtsgrundlagen p{margin:0 0 .5rem}
.abschluss{background:var(--dunkel);color:var(--auf-dunkel);padding-block:3.5rem}
.abschluss-innen{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.abschluss h2{color:var(--auf-dunkel);font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:500;margin-bottom:.5rem}
.abschluss p{margin:0;color:var(--auf-dunkel-neben);max-width:38rem}
.fuss{background:var(--fuss-grund);color:var(--fuss-text);font-size:.9rem;padding-top:3.5rem}
.fuss a{color:var(--fuss-text);text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss-raster{display:grid;grid-template-columns:1.2fr 2fr 1fr;gap:2.5rem;padding-bottom:2.5rem}
.fuss .logo-svg{height:1.9rem;color:var(--fuss-titel)}
.claim{font-family:var(--schrift-titel);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;margin:.8rem 0 .8rem;color:var(--fuss-titel)}
.fuss-marke p:last-child{color:var(--fuss-neben)}
.fuss-titel{font-weight:600;color:var(--fuss-titel);margin:0 0 .7rem}
.fuss ul{list-style:none;margin:0 0 1.5rem;padding:0}
.fuss li{margin:0;padding:.22rem 0;break-inside:avoid}
.fuss-ratgeber{columns:2;column-gap:2rem}
.fuss-unten{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--fuss-linie);padding-block:1.2rem;font-size:.8rem;color:var(--fuss-neben)}
.r-kopf{background:var(--held);padding-block:2rem 2.5rem;border-bottom:1px solid var(--linie)}
.brotkrumen{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.84rem;color:var(--neben-b);margin-bottom:1.4rem}
.brotkrumen a{color:var(--neben-b)}
.r-kopf-zeile{display:flex;gap:1.4rem;align-items:flex-start;max-width:58rem}
.r-kopf-ico{flex:none;display:grid;place-items:center;width:4.5rem;height:4.5rem;border-radius:1.1rem;background:var(--marke);border:1px solid var(--linie)}
.r-kopf-ico .ico{width:2.3rem;height:2.3rem}
.r-gruppe{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--link-b);margin:0 0 .5rem}
.r-kopf h1{font-size:clamp(1.6rem,3vw,2.35rem);font-weight:var(--h1-gewicht);letter-spacing:-.01em;color:var(--text-b)}
.r-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1rem 0 0;font-size:.86rem;color:var(--neben-b)}
.r-meta span{display:inline-flex;align-items:center;gap:.4rem}
.r-meta .ico{width:1.05rem;height:1.05rem}
.r-meta a{color:inherit}
.r-lead{margin:.9rem 0 0;font-size:1.08rem;color:var(--neben-b);max-width:44rem}
.r-raster{display:grid;grid-template-columns:minmax(0,46rem);justify-content:center;gap:3rem;padding-block:2.5rem 4rem}
.r-seite{display:none}
@media (min-width:1100px){
  .r-raster{grid-template-columns:minmax(0,46rem) minmax(0,20rem);justify-content:space-between}
  .r-seite{display:block}
  .toc-mobil,.toc-leiste{display:none}
}
.r-seite-innen{position:sticky;top:6rem}
.toc{border-left:2px solid var(--linie);padding-left:0}
.toc-titel{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--neben-b);margin:0 0 .6rem 1rem}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{display:block;padding:.35rem 1rem;margin-left:-2px;border-left:2px solid transparent;color:var(--neben-b);text-decoration:none;font-size:.88rem;line-height:1.4}
.toc a:hover{color:var(--text-b)}
.toc a.aktiv{border-left-color:var(--marke);color:var(--text-b);font-weight:600}
.seite-cta{margin-top:1.75rem;padding:1.25rem;border-radius:var(--radius);background:var(--karte);border:1px solid var(--linie);box-shadow:var(--karte-schatten)}
.seite-cta .cta-ico{width:2.4rem;height:2.4rem;padding:.45rem;border-radius:.7rem;background:var(--weich);margin-bottom:.6rem}
.seite-cta-titel{font-weight:600;margin:0 0 .3rem}
.seite-cta p{font-size:.9rem;color:var(--neben-b)}
.seite-cta .knopf{width:100%;font-size:.93rem;padding:.7rem .9rem}
.r-text{font-size:1.05rem;line-height:1.7;min-width:0}
.r-text h2{font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:var(--h2-gewicht);margin:0 0 1rem;scroll-margin-top:6rem}
.r-text ul,.r-text ol{padding-left:1.3rem;margin:0 0 1.2rem}
.r-text li{margin:.35rem 0}
.r-text li::marker{color:var(--link-b)}
.r-abschnitt{padding-top:.4rem}
.r-text h3.zwischen{font-family:var(--schrift);font-size:1.08rem;font-weight:700;margin:1.4rem 0 .6rem}
.trenner{width:80%;height:0;border:0;border-top:1px solid var(--linie);margin:2.6rem auto 2.2rem}
:where(.voll) .zusammenfassung,:where(.voll) .kurz-gesagt{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.4rem 1.6rem .6rem;margin-bottom:1.25rem;box-shadow:var(--karte-schatten)}
.zf-titel{display:flex;align-items:center;gap:.6rem;font-family:var(--schrift-titel);font-weight:500;font-size:1.1rem;margin:0 0 .7rem}
.zf-titel .ico{width:1.5rem;height:1.5rem}
:where(.voll) .zusammenfassung li,:where(.voll) .kurz-gesagt li{margin:.45rem 0}
.r-text > .knopf{margin:0 0 2rem}
.toc-mobil{margin:0 0 2rem;border:1px solid var(--linie);border-radius:var(--radius);background:var(--karte)}
.toc-mobil summary{list-style:none;cursor:pointer;padding:.85rem 1.1rem;font-weight:600;display:flex;gap:.5rem;align-items:center}
.toc-mobil summary .ico{width:1.2rem;height:1.2rem}
.toc-mobil ol{margin:0;padding:0 1.1rem 1rem 2.3rem;font-size:.93rem}
.toc-mobil a{color:var(--text-b)}
/* Bernd 18.10.2026: „Auf dieser Seite“ steht am Handy zugeklappt vor der Zusammenfassung, über die ganze Breite, und
   bleibt beim Scrollen ohne Abstand direkt unter dem Kopf stehen; aufgeklappt rollt die Liste in sich, ein Klick auf
   einen Abschnitt klappt sie wieder zu (strecke.js) und die Überschrift landet darunter */
.toc-leiste{position:sticky;top:4.5rem;z-index:40;margin:0 calc(50% - 50vw) 1.5rem;width:100vw;background:var(--karte);border-bottom:1px solid var(--linie);box-shadow:0 4px 12px var(--schatten)}
.toc-leiste .toc-mobil{margin:0;border:0;border-radius:0;background:transparent}
.toc-leiste .toc-mobil summary{width:fit-content;padding-right:1rem}  /* der Titel reicht nicht unter den Knopf */
.toc-mobil summary{min-height:3.3rem}
.toc-mobil summary,.toc-mobil ol{padding-inline:max(1rem,calc(50vw - 23rem))}
.toc-mobil ol{padding-left:max(2.2rem,calc(50vw - 21.8rem))}
@media (max-width:860px){.toc-leiste{top:4rem}}
/* Bernd 18.10.2026: rechts in der Leiste der feste Knopf zur Vorprüfung, gestaltet wie „Foto aufnehmen“ (.knopf-zweit)
   auf weißem Grund; er liegt über der Zeile des Titels, die aufgeklappte Liste steht darunter. Reicht der Platz nicht,
   heißt der Titel „Inhalt“, der Knopftext bleibt ganz. */
.toc-knopf{position:absolute;top:1.65rem;right:max(1rem,calc(50vw - 23rem));transform:translateY(-50%);display:inline-flex;align-items:center;white-space:nowrap;background:var(--karte);color:var(--link-b);border:1.5px solid var(--knopf);border-radius:var(--radius-knopf);padding:.45rem .8rem;font:600 .88rem/1.2 var(--schrift);text-decoration:none}
.toc-knopf:hover{background:var(--weich)}
.toc-kurz{display:none}
@media (max-width:389px){.toc-lang{display:none}.toc-kurz{display:inline}}
.toc-mobil[open] ol{max-height:60vh;overflow-y:auto}
@media (max-width:1099px){.r-text h2[id]{scroll-margin-top:8.5rem}}
.quelle{display:flex;gap:.55rem;font-size:.84rem;color:var(--neben-b);line-height:1.5;padding:.7rem .9rem;background:var(--bg-wechsel);border-radius:.55rem;margin:1.2rem 0 1.4rem}
.quelle .ico{width:1.05rem;height:1.05rem;margin-top:.1rem;--akz:var(--neben-b);--ico:var(--neben-b)}
:where(.r-text) .hinweis{display:flex;gap:.9rem;padding:1.1rem 1.25rem;border-radius:var(--radius);margin:1.4rem 0;border:1px solid var(--linie);background:var(--karte)}
.hinweis-ico{width:1.7rem;height:1.7rem;margin-top:.1rem}
.hinweis-titel{font-weight:700;margin:0 0 .25rem}
.hinweis-zusatz{font-size:.85rem;color:var(--neben-b);margin:-.15rem 0 .4rem}
:where(.r-text) .hinweis p:last-child,:where(.r-text) .hinweis ul:last-child{margin-bottom:0}
:where(.r-text) .hinweis ul{padding-left:1.1rem}
:where(.r-text) .hinweis.tipp{border-left:4px solid var(--ok)}
:where(.r-text) .hinweis.tipp .hinweis-ico{--ico:var(--ok);--akz:var(--ok)}
:where(.r-text) .hinweis.achtung{border-left:4px solid var(--warn);background:var(--warn-grund)}
:where(.r-text) .hinweis.achtung .hinweis-ico{--ico:var(--warn);--akz:var(--warn)}
:where(.r-text) .hinweis.info{border-left:4px solid var(--info)}
:where(.r-text) .hinweis.info .hinweis-ico{--ico:var(--info);--akz:var(--info)}
:where(.voll) .tabelle{overflow-x:auto;margin:1.2rem 0 1.4rem;border:1px solid var(--linie);border-radius:var(--radius);background:var(--karte)}
:where(.voll) .tabelle table{width:100%;border-collapse:collapse;font-size:.93rem;line-height:1.45}
:where(.voll) .tabelle th{text-align:left;font-weight:600;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--neben-b);background:var(--bg-wechsel);padding:.75rem 1rem;border-bottom:1px solid var(--linie)}
:where(.voll) .tabelle td{padding:.75rem 1rem;border-bottom:1px solid var(--linie);vertical-align:top}
:where(.voll) .tabelle tr:last-child td{border-bottom:0}
:where(.voll) .tabelle tbody tr:nth-child(even) td{background:var(--zebra)}
.schaubild-fig{margin:1.6rem 0 1.8rem;padding:1.4rem 1rem .8rem;border:1px solid var(--linie);border-radius:var(--radius);background:var(--karte)}
.schaubild{display:block;width:100%;height:auto}
.schaubild.hoch{display:none;max-width:20rem;margin:0 auto}
.schaubild-fig figcaption{font-size:.8rem;color:var(--neben-b);text-align:center;margin-top:.4rem}
.sb-k{fill:var(--weich-fest);stroke:var(--linie-stark);stroke-width:1}
.sb-ico{fill:none;stroke:var(--ico);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sb-nr-k{fill:var(--knopf)}
.sb-nr{font:600 11px var(--schrift);fill:var(--auf-knopf)}
.sb-t1{font:600 14px var(--schrift);fill:var(--text-b)}
.sb-t2{font:13px var(--schrift);fill:var(--neben-b)}
.sb-linie{stroke:var(--linie-stark);stroke-width:2;stroke-dasharray:5 5}
.sb-pfeil{fill:none;stroke:var(--marke);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mrn-aufbau{margin:1.4rem 0;padding:0}
.mrn-reihe{display:flex;flex-wrap:wrap;gap:.3rem}
.mrn-teil{display:flex;flex-direction:column;align-items:center;border-radius:.5rem;padding:.55rem .6rem .45rem;background:var(--karte);border:1px solid var(--linie);border-top:4px solid var(--c)}
.mrn-teil b{font-family:var(--font-m);font-size:1.15rem;letter-spacing:.06em;font-weight:500}
.mrn-teil small{font-size:.72rem;color:var(--neben-b);white-space:nowrap}
.mrn-aufbau figcaption{font-size:.8rem;color:var(--neben-b);margin-top:.4rem}
.kacheln.drei{grid-template-columns:repeat(3,1fr)}
.gratis{display:flex;align-items:center;gap:1.1rem;padding:1.1rem 1.4rem;border:1px solid var(--linie);border-radius:var(--radius);background:var(--karte);margin-bottom:1.5rem}
.gratis > .ico{width:2.6rem;height:2.6rem;padding:.5rem;border-radius:.7rem;background:var(--weich)}
.gratis-titel{font-weight:700;margin:0 0 .15rem}
.gratis p:last-child{margin:0;color:var(--neben-b);font-size:.93rem}
.gratis .knopf-zweit{margin-left:auto;white-space:nowrap}
.preise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.preise .preis h3{overflow-wrap:break-word;hyphens:auto}
:where(.voll) .preis{display:flex;flex-direction:column;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--karte-schatten)}
.preis-kopf{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem}
.preis-ico{width:2.6rem;height:2.6rem;padding:.5rem;border-radius:.7rem;background:var(--weich)}
:where(.voll) .preis h3{font-size:1.15rem;font-weight:500}
.preis-text{color:var(--neben-b);font-size:.93rem;min-height:2.9em}
.preis-betrag{display:flex;align-items:baseline;gap:.4rem;margin:.2rem 0 0}
.betrag{font-family:var(--schrift-titel);font-size:3rem;font-weight:600;line-height:1;letter-spacing:-.02em}
.waehrung{font-weight:600;font-size:1.1rem}
.preis-ust{margin:.45rem 0 0;font-size:.88rem;font-weight:500}
.preis-netto{margin:.1rem 0 1rem;font-size:.78rem;color:var(--neben-b)}
.preis-plus{display:flex;gap:.5rem;align-items:flex-start;font-size:.9rem;padding:.7rem .8rem;border-radius:.55rem;background:var(--bg-wechsel);margin:0 0 .8rem;min-height:2.9rem}
.preis-plus.leer{background:transparent;padding:0;min-height:0}
.preis-plus .ico{width:1.1rem;height:1.1rem;margin-top:.15rem}
.preis-plus small{display:block;color:var(--neben-b);font-size:.78rem}
.preis-hinweis{font-size:.82rem;color:var(--neben-b);margin:0 0 .8rem}
:where(.voll) .preis .knopf{margin-top:auto;width:100%}
.bald-reihe{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:1.25rem}
.bald-preis{display:flex;gap:.9rem;align-items:center;padding:1rem 1.3rem;border:1px dashed var(--linie-stark);border-radius:var(--radius);color:var(--neben-b)}
.bald-preis .ico{width:2rem;height:2rem;opacity:.7}
.bald-preis p{margin:0;font-size:.85rem}
.bald-preis .bald-titel{font-weight:600;color:var(--text-b);font-size:.98rem}
.ust-satz{font-size:.85rem;color:var(--neben-b);margin:1.2rem 0 0}
.zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.haken-liste{list-style:none;margin:0;padding:0}
.haken-liste li{display:flex;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--linie)}
.haken-liste .ico{width:1.35rem;height:1.35rem;stroke-width:2.2}
.haken-liste .ico{--akz:var(--ok)}
.zahlarten{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}
.zahlarten li{padding:.45rem .9rem;border:1px solid var(--linie);border-radius:.5rem;background:var(--karte);font-weight:600;font-size:.88rem}
.so-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.so{padding:1.4rem;border:1px solid var(--linie);border-radius:var(--radius);background:var(--karte)}
.so-ico{width:2.6rem;height:2.6rem;padding:.5rem;border-radius:.7rem;background:var(--weich);margin-bottom:.8rem}
.so h3{font-size:1.05rem;font-weight:500;margin-bottom:.45rem}
.so p{color:var(--neben-b);font-size:.93rem;margin:0}
.beispiel{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;max-width:56rem}
.bon{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.3rem 1.4rem}
.bon-titel{display:flex;gap:.55rem;align-items:center;font-weight:700;margin:0 0 .15rem}
.bon-unter{font-size:.86rem;color:var(--neben-b);margin:0 0 .8rem}
.bon table{width:100%;border-collapse:collapse;font-size:.93rem}
.bon td{padding:.45rem 0;border-bottom:1px dashed var(--linie)}
.bon td:last-child{text-align:right;font-family:var(--font-m);white-space:nowrap}
.bon .summe td{font-weight:700;border-bottom:0;border-top:2px solid var(--text-b);padding-top:.6rem}
@media (max-width:1180px){
  .suche input{width:11rem}
}
@media (max-width:980px){
  .held-raster{grid-template-columns:1fr;gap:2rem}
  .anim{max-width:34rem;margin:0 auto;width:100%}
  .v-liste{grid-template-columns:repeat(2,1fr)}
  .kurz-raster{grid-template-columns:repeat(2,1fr)}
  .kacheln,.kacheln.drei,.kacheln.vier{grid-template-columns:repeat(2,1fr)}
  .mega-raster{grid-template-columns:repeat(2,1fr)}
  .nav-ratgeber .mega-raster{column-count:2}
  .fuss-raster{grid-template-columns:1fr 1fr}
  .fuss-marke{grid-column:1/-1}
}
@media (max-width:860px){
  .hauptnav,.kopf-rechts > .suche,.einloggen span{display:none}
  .mobil{display:block}
  .kopf-innen{height:4rem}
  :where(.voll) .schritte,.fuer-raster,.preise,.so-raster{grid-template-columns:1fr}
  .preis-text{min-height:0}
  .zwei-spalten,.beispiel,.bald-reihe{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .rahmen{padding-inline:1rem}
  .logo-svg{height:1.75rem}
  .held{padding-block:1.75rem 2.25rem}
  .lead{font-size:1rem}
  .nur-handy{display:flex;width:100%;margin-top:.7rem}
  .drop{padding:1.2rem .8rem}
  .drop-titel{font-size:1rem}
  .v-liste{grid-template-columns:1fr;gap:1rem;padding:1.2rem 0}
  .kurz-raster,.kacheln,.kacheln.drei,.kacheln.vier{grid-template-columns:1fr}
  :where(.voll) .abschnitt{padding-block:3rem}
  .abschluss-innen{flex-direction:column;align-items:flex-start}
  .abschluss .knopf{width:100%}
  .fuss-raster{grid-template-columns:1fr}
  .fuss-ratgeber{columns:1}
  .fuss-unten{flex-direction:column}
  .r-kopf-zeile{flex-direction:column;gap:1rem}
  .kachel{display:grid;grid-template-columns:auto 1fr auto;column-gap:.85rem;row-gap:.1rem;align-items:center;padding:.9rem 1rem}
  .kachel-ico{grid-row:1/3;margin:0;width:2.4rem;height:2.4rem}
  .kachel-titel{font-size:.97rem}
  .kachel-text{grid-column:2;-webkit-line-clamp:2;font-size:.82rem}
  .kachel-mehr{grid-row:1/3;grid-column:3;padding:0;font-size:0}
  .kachel-mehr .pfeil{width:1.2rem;height:1.2rem}
  .kurz-karte{display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;padding:1.1rem}
  .kurz-ico{grid-row:1/3;margin:0;width:2.4rem;height:2.4rem}
  .kurz-frage{align-self:center;margin:0}
  .kurz-karte p:last-child{grid-column:1/-1;margin-top:.6rem}
  .fuer{padding:1.25rem}
  .r-kopf-ico{width:3.4rem;height:3.4rem;border-radius:.9rem}
  .r-kopf-ico .ico{width:1.8rem;height:1.8rem}
  .r-text{font-size:1rem}
  .r-text > .knopf{width:100%}
  .schaubild.quer{display:none}
  .schaubild.hoch{display:block}
  :where(.voll) .zusammenfassung,:where(.voll) .kurz-gesagt{padding:1.1rem 1.1rem .4rem}
  .gratis{flex-wrap:wrap}
  .gratis .knopf-zweit{margin-left:0;width:100%}
  .betrag{font-size:2.6rem}
  .treffer{width:calc(100vw - 2rem)}
}
.lv{display:none;color:var(--text-b)}
.claim-text{font-family:"Unbounded",var(--schrift-titel);font-weight:300;text-transform:uppercase;white-space:nowrap;line-height:1}
html[data-logo="3"] .lv3{display:flex;align-items:center;gap:.8rem}
.logo-kompakt{display:block;height:2.6rem;width:auto}
.lv3 .claim-text{white-space:normal;width:5.4rem;font-size:.58rem;letter-spacing:.2em;line-height:1.4;border-left:1px solid color-mix(in srgb,currentColor 35%,transparent);padding-left:.8rem}
@media (max-width:640px){
  .logo-kompakt{height:2.25rem}
  .lv3 .claim-text{font-size:.52rem;width:4.9rem;padding-left:.65rem}
}
.marke,.marke:hover{text-decoration:none}
.hauptnav > a,.mega > summary{white-space:nowrap}
.r-b .mega-panel,.r-b .mobil-panel{color:var(--text-b)}
.r-b .mobil-panel .ico{--ico:var(--ico-standard);--akz:var(--akz-standard)}
.r-b .mega-panel .mega-ico,.r-b .mobil-panel .mega-ico,.r-b .mega-panel .menue-kopf > .ico,.r-b .mobil-panel .menue-kopf > .ico{--ico:var(--auf-dunkel);--akz:var(--auf-dunkel)}
.r-b .v-ico,.r-b .kurz-ico,.r-b .fuer-ico,.r-b .kachel-ico,.r-b .preis-ico,.r-b .so-ico,.r-b .mega-ico,.r-b .cta-ico,.r-b .gratis > .ico,.r-b .drop-ico,.r-b .menue-kopf > .ico{background:var(--knopf);--ico:var(--auf-dunkel);--akz:var(--auf-orange-akz);border-radius:.6rem}
.r-b .drop-ico{border-radius:.8rem}
.r-b .zf-titel .ico{--akz:var(--akz-standard)}
.r-b .held{padding-block:3.75rem 6.5rem;position:relative;overflow:hidden}
.r-b .held::after{content:"";position:absolute;right:-12rem;top:-10rem;width:36rem;height:36rem;border-radius:50%;border:2px solid var(--held-kreis);box-shadow:var(--held-kreis-schatten)}
.r-b .held-raster{position:relative;z-index:1}
.r-b .werkzeug h1{font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:-.02em}
.r-b .vertrauen{background:transparent;border:0;margin-top:-3.75rem;position:relative;z-index:2}
.r-b .v-liste{padding:0;gap:1rem}
.r-b .v-liste li{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.1rem;flex-direction:column;gap:.7rem}
.r-b :where(.voll) .abschnitt.kurz{padding-top:3.5rem}
.r-b .dach .nr{display:inline;color:var(--neben-b);font-weight:600}
.r-b .dach .nr::after{content:"/";margin-left:.5rem;color:var(--neben-b);opacity:.45}
.r-b :where(.voll) .schritt{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.6rem 1.5rem 1.5rem;box-shadow:var(--karte-schatten)}
.r-b .schritt-ico{border:0;background:var(--weich);border-radius:.8rem;width:3.6rem;height:3.6rem}
.r-b .schritt-nr{position:absolute;right:1.4rem;top:1.2rem;left:auto;width:auto;height:auto;background:none;color:var(--neben-b);opacity:.35;font:700 2.6rem/1 var(--schrift-titel)}
.r-b :where(.voll) .schritt{counter-increment:none}
.r-b .schritt-ico{position:static}
.r-b .fuer{border-top:4px solid var(--marke)}
.r-b .kgruppen{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem 2rem}
.r-b .kgruppe{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.2rem 1.3rem}
.r-b .kgruppe-titel{display:flex;align-items:center;gap:.6rem;font-size:1rem;font-weight:600;margin:0 0 .7rem}
.r-b .kgruppe-titel .ico{width:2.2rem;height:2.2rem;padding:.4rem;border-radius:.55rem;background:var(--knopf);--ico:var(--auf-dunkel);--akz:var(--auf-orange-akz)}
.r-b .kgruppe .kacheln{grid-template-columns:1fr;gap:0}
.r-b .kgruppe .kachel{flex-direction:row;flex-wrap:wrap;align-items:center;border:0;border-top:1px solid var(--linie);border-radius:0;padding:.65rem 0;box-shadow:none;gap:.1rem .6rem}
.r-b .kgruppe .kachel:hover{transform:none;box-shadow:none}
.r-b .kgruppe .kachel:hover .kachel-titel{color:var(--link-b)}
.r-b .kgruppe .kachel-ico,.r-b .kgruppe .kachel-text{display:none}
.r-b .kgruppe .kachel-titel{font-size:.96rem;font-weight:500}
.r-b .kgruppe .kachel-mehr{margin:0 0 0 auto;padding:0}
.r-b .kgruppe .kachel-mehr{font-size:0}
.r-b .kgruppe .kachel-mehr .pfeil{width:1.1rem;height:1.1rem}
.r-b .kgruppe.leer{background:transparent;border-style:dashed}
.r-b .kgruppe.leer .kgruppe-titel .ico{background:var(--linie-stark)}
.r-b .bald-kachel{margin:0;font-size:.88rem;color:var(--neben-b);font-style:italic}
.r-b .fragen-raster{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:3rem;max-width:72rem}
.r-b .fragen-intro .abschnitt-kopf{position:sticky;top:6rem}
.r-b :where(.voll) .frage{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);margin-bottom:.6rem;padding:0 1.2rem}
.r-b :where(.voll) .frage:first-child{border-top:1px solid var(--linie)}
.r-b :where(.voll) .frage[open]{border-color:var(--linie-stark);box-shadow:var(--karte-schatten)}
.r-b .abschluss{background:var(--knopf);--auf-dunkel-neben:var(--auf-dunkel)}
.r-b .abschluss .knopf{background:var(--abschluss-knopf);color:var(--auf-dunkel)}
.r-b .abschluss .knopf:hover{background:var(--abschluss-knopf-tief)}
.r-b .r-kopf{border:0;padding-block:2.25rem 3rem}
.r-b .r-kopf-ico{border:0;--ico:var(--auf-dunkel);--akz:var(--auf-orange-akz)}
.r-b :where(.voll) .zusammenfassung,.r-b :where(.voll) .kurz-gesagt{padding:0 0 .4rem;overflow:hidden}
.r-b .zf-titel{background:var(--dunkel);color:var(--auf-dunkel);padding:.85rem 1.4rem;margin:0 0 .6rem;font-size:1rem}
.r-b .zf-titel .ico{--ico:var(--auf-dunkel);--akz:var(--akzent-hell)}
.r-b :where(.voll) .zusammenfassung ul,.r-b :where(.voll) .kurz-gesagt ul{padding:0 1.4rem 0 2.6rem}
.r-b .r-text h2{font-weight:600}
.r-b :where(.voll) .tabelle th{background:var(--dunkel);color:var(--auf-dunkel);border-bottom:0}
.r-b :where(.voll) .preis.hervor{background:var(--dunkel);color:var(--auf-dunkel);border-color:var(--dunkel);--neben-b:var(--auf-dunkel-neben);--bg-wechsel:var(--hervor-flaeche)}
.r-b :where(.voll) .preis.hervor h3{color:var(--auf-dunkel)}
.r-b .preis-plus .ico{--ico:var(--akz)}
.r-b :where(.voll) .preis.hervor .preis-plus .ico{--ico:var(--akzent-hell)}
.r-b .seite-cta{background:var(--dunkel);color:var(--auf-dunkel);border:0;--neben-b:var(--auf-dunkel-neben)}
@media (max-width:980px){
  .r-b .kgruppen{grid-template-columns:1fr}
  .r-b .fragen-raster{grid-template-columns:1fr;gap:1rem}
  .r-b .fragen-intro .abschnitt-kopf{position:static}
}
@media (max-width:640px){
  .r-b .held{padding-block:1.75rem 5rem}
  .r-b .held::after{display:none}
  .r-b .v-liste li{flex-direction:row}
}
.held.breit{padding-block:3.25rem 6.5rem}
.held-text{margin-bottom:2rem;position:relative;z-index:1}
.held.breit h1{font-size:clamp(1.9rem,4.1vw,3.15rem);font-weight:var(--h1-gewicht);letter-spacing:-.02em;margin:0 0 .8rem;color:var(--text-b)}
.held.breit .lead{max-width:50rem;margin:0}
.held-raster.oben{align-items:stretch}
.held.breit .werkzeug{display:flex;flex-direction:column}
.held.breit .upload{flex:1;display:flex;flex-direction:column}
.held.breit .ohne-rechnung{margin:auto 0 0;padding-top:.8rem;border-top:1px solid var(--linie);color:var(--neben-b);font-size:.9rem}
.held.breit .ohne-rechnung a{color:var(--link-b)}
.held.breit .messen{margin-bottom:.8rem}
.anim.kasten{display:flex;flex-direction:column;border-radius:var(--radius);padding:1.1rem 1.25rem 1rem}
.anim-titel{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:.95rem;margin:0 0 .4rem}
.anim.kasten .szene{flex:1;margin:auto 0}
@media (max-width:640px){
  .held.breit{padding-block:1.75rem 5rem}
  .held-text{margin-bottom:1.25rem}
  .anim.kasten{padding:.9rem}
}
.uu-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.uu-karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--karte-schatten)}
.uu-kopf{display:flex;align-items:center;gap:.7rem;font-weight:700;font-size:1.05rem;margin:0 0 .8rem}
.uu-ico{width:2.4rem;height:2.4rem;padding:.45rem;border-radius:.6rem;background:var(--knopf);--ico:var(--auf-dunkel);--akz:var(--auf-orange-akz)}
.uu-karte.sie .uu-ico{background:var(--dunkel)}
.uu-karte.nicht{background:transparent;border-style:dashed;box-shadow:none}
.uu-karte.nicht .uu-ico{background:var(--linie-stark)}
.uu-liste{list-style:none;margin:0;padding:0}
.uu-liste li{display:flex;gap:.6rem;padding:.5rem 0;border-top:1px solid var(--linie);font-size:.95rem;line-height:1.45}
.uu-liste .ico{width:1.2rem;height:1.2rem;margin-top:.1rem;stroke-width:2.2;--akz:var(--ok)}
.uu-karte.nicht .uu-liste .ico{--akz:var(--neben-b);--ico:var(--neben-b)}
/* 02 Datensicherheit als vier Kästen (Bernd 18.10.2026), zwei nebeneinander, auf dem Handy untereinander */
.uu-daten-raster{grid-template-columns:repeat(2,1fr)}
.uu-daten-raster + .uu-text{max-width:56rem;margin-top:1.5rem}
.uu-daten-raster + .uu-text > :last-child{margin-bottom:0}
.uu-zwei{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.uu-zwei .abschnitt-kopf,.uu-wer .abschnitt-kopf{margin-bottom:1.2rem}
.uu-wer{max-width:52rem}
.uu-kontakt-titel{font-family:var(--schrift);font-size:1.05rem;margin:1.6rem 0 .5rem}
@media (max-width:860px){
  .uu-raster,.uu-zwei{grid-template-columns:1fr;gap:1.25rem}
  .uu-wer{grid-template-columns:1fr;gap:1rem}
}
body.strecke{background:var(--bg-wechsel)}
.kopf-strecke{border-bottom:0}
.s-fortschritt{background:var(--karte);border-bottom:1px solid var(--linie);color:var(--text-b)}
.s-etappen,.fortschritt .etappen{display:flex;align-items:center;justify-content:center;list-style:none;margin:0;padding:.85rem 0 .6rem;gap:.7rem}
.s-etappe,.fortschritt .etappe{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;color:var(--neben-b)}
.s-etappe.aktiv,.fortschritt .etappe.aktiv{color:var(--text-b)}
.s-nr,.fortschritt .nr{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;border:2px solid var(--linie-stark);font:700 .85rem/1 var(--schrift);background:var(--karte)}
.s-etappe.aktiv .s-nr,.fortschritt .etappe.aktiv .nr{background:var(--knopf);border-color:var(--knopf);color:var(--auf-dunkel);box-shadow:0 0 0 4px var(--weich)}
.s-etappe.erledigt .s-nr,.fortschritt .etappe.erledigt .nr{background:var(--dunkel);border-color:var(--dunkel)}
.s-ok{width:1rem;height:1rem;stroke-width:2.6;--akz:var(--auf-dunkel)}
.s-linie,.fortschritt .linie{flex:0 1 5rem;height:2px;background:var(--linie);list-style:none}
.s-linie.erreicht,.fortschritt .linie.erreicht{background:var(--marke)}
.s-unter,.unterschritte{display:flex;justify-content:center;gap:1.6rem;list-style:none;margin:0;padding:0;font-size:.85rem;color:var(--neben-b);overflow-x:auto;white-space:nowrap}
.s-unter li,.unterschritte li{padding:.35rem 0 .55rem}
.s-unter .aktiv,.unterschritte .aktiv{color:var(--text-b);font-weight:600;box-shadow:inset 0 -2px 0 var(--marke)}
.s-unter .erledigt,.unterschritte .erledigt{color:var(--text-b)}
.s-unter .erledigt::before,.unterschritte .erledigt::before{content:"✓ ";color:var(--ok);font-weight:700}
.s-raster{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:2rem;padding-block:2.2rem 3rem;align-items:start}
.s-titel{font-size:clamp(1.4rem,2.4vw,1.75rem);font-weight:600;margin:0 0 .45rem}
.s-einleitung{color:var(--neben-b);margin-bottom:1.2rem}
.s-haupt > .s-titel + .s-karte{margin-top:1.2rem}
.s-karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.4rem;margin-bottom:1rem;box-shadow:var(--karte-schatten)}
.s-pos-kopf{display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--linie)}
.s-pos-nr{width:1.9rem;height:1.9rem;border-radius:.5rem;display:grid;place-items:center;background:var(--knopf);color:var(--auf-dunkel);font:700 .9rem/1 var(--schrift)}
.s-pos-kopf h2{font:700 1.05rem/1.2 var(--schrift)}
.s-pos-art{margin-left:auto;color:var(--neben-b);font-size:.9rem}
.s-felder{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.25rem}
.s-feld{min-width:0}
.s-feld.breit{grid-column:1/-1}
.s-feld > label{display:block}
.s-label{display:flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9rem;margin:0 0 .35rem}
.s-tip{width:1.15rem;height:1.15rem;border-radius:50%;border:1px solid var(--rahmen);background:transparent;color:var(--neben-b);font:700 .68rem/1 var(--schrift);cursor:help;padding:0;display:inline-grid;place-items:center}
.s-eingabe{display:flex;border:1px solid var(--rahmen);border-radius:.5rem;background:var(--karte);overflow:hidden}
.s-eingabe:focus-within{outline:2px solid var(--marke);outline-offset:-1px}
.s-eingabe input{flex:1;min-width:0;border:0;font:inherit;font-size:1rem;padding:.68rem .8rem;background:transparent;color:var(--text-b);outline:0}
.s-einheit{padding:.68rem .8rem;background:var(--bg-wechsel);color:var(--neben-b);border-left:1px solid var(--linie);font-size:.9rem}
.s-herkunft{display:flex;align-items:center;gap:.3rem;font-size:.78rem;color:var(--neben-b);margin:.35rem 0 0}
.s-herkunft .ico{width:.95rem;height:.95rem}
.s-kand-einleitung{font-size:.88rem;color:var(--neben-b);margin:0 0 .55rem}
.s-kandidaten{display:grid;gap:.45rem}
.s-kandidat{display:grid;grid-template-columns:auto auto 1fr;gap:.8rem;align-items:center;padding:.7rem .9rem;border:1px solid var(--linie);border-radius:.55rem;cursor:pointer;background:var(--karte)}
.s-kandidat:hover{border-color:var(--rahmen)}
.s-kandidat.gewaehlt{border-color:var(--knopf);box-shadow:0 0 0 1px var(--knopf);background:var(--weich-fest)}
.s-kandidat input{accent-color:var(--knopf);margin:0}
.s-kn{font:600 .95rem var(--font-m);white-space:nowrap}
.s-kn-text{font-size:.9rem;line-height:1.4}
.s-quelle{font-size:.75rem;color:var(--neben-b);margin:.3rem 0 0}
.s-knoepfe{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.25rem}
.s-zurueck{color:var(--neben-b);font-weight:600;text-decoration:none}
.s-zurueck:hover{color:var(--text-b)}
.s-korb{position:sticky;top:11.5rem}
.s-korb-innen{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--karte-schatten)}
.s-korb-titel{display:flex;align-items:center;gap:.55rem;font-weight:700;margin:0 0 .8rem}
.s-korb-titel .ico{width:1.3rem;height:1.3rem}
.s-korb table{width:100%;border-collapse:collapse;font-size:.92rem}
.s-korb td{padding:.45rem 0;border-bottom:1px solid var(--linie);vertical-align:top}
.s-korb td:last-child{text-align:right;white-space:nowrap;padding-left:.8rem}
.s-korb .summe td{font-weight:700;font-size:1.05rem;border-bottom:0;padding-top:.7rem}
.s-korb-netto{font-size:.78rem;color:var(--neben-b);margin:.1rem 0 .9rem}
.s-korb-hinweis{display:flex;gap:.5rem;font-size:.82rem;color:var(--neben-b);margin:0;padding-top:.8rem;border-top:1px solid var(--linie)}
.s-korb-hinweis .ico{width:1rem;height:1rem;margin-top:.1rem}
.s-h2{font:700 1.08rem/1.3 var(--schrift);margin:0 0 .8rem}
.s-klein{font-size:.85rem;color:var(--neben-b);margin:.8rem 0 0}
.s-haken{display:flex;gap:.7rem;align-items:flex-start;font-weight:500;cursor:pointer}
.s-haken input{width:1.2rem;height:1.2rem;accent-color:var(--knopf);margin-top:.15rem}
.s-vertrag summary{cursor:pointer;color:var(--link-b);font-weight:600;margin-top:.9rem;font-size:.92rem}
.s-vertrag p{font-size:.88rem;color:var(--neben-b);margin:.6rem 0 0}
.s-fuss{display:flex;justify-content:center;gap:1.4rem;padding:1.5rem 1rem 2.5rem;font-size:.82rem}
.s-fuss a{color:var(--neben-b)}
.strecke .kopf-innen{height:4rem}
@media (max-width:860px){
  .s-raster{grid-template-columns:1fr;gap:1rem}
  .s-korb{position:static}
  .s-unter,.unterschritte{justify-content:flex-start;padding-inline:0}
}
@media (max-width:640px){
  .s-felder{grid-template-columns:1fr}
  .s-etappen,.fortschritt .etappen{gap:.35rem;justify-content:space-between}
  .s-etappe,.fortschritt .etappe{flex-direction:column;gap:.2rem;font-size:.75rem}
  .s-linie,.fortschritt .linie{flex:1 1 1rem;margin-top:-1.1rem}
  .s-nr,.fortschritt .nr{width:1.75rem;height:1.75rem}
  .s-kandidat{grid-template-columns:auto 1fr;row-gap:.2rem}
  .s-kn-text{grid-column:2}
  .s-knoepfe .knopf{flex:1}
  .s-karte{padding:1.1rem}
}
.r-bh .kopf{border-bottom-color:var(--linie)}
.r-bh .hauptnav > a,.r-bh .mega > summary,.r-bh .einloggen{color:var(--text-b)}
.r-bh .hauptnav > a:hover,.r-bh .mega > summary:hover,.r-bh .einloggen:hover{background:var(--bg-wechsel)}
.r-bh .hauptnav > a[aria-current],.r-bh .mega[data-aktiv] > summary{color:var(--link-b)}
.r-bh .einloggen .ico,.r-bh .mobil .ico{--ico:var(--ico-standard);--akz:var(--akz-standard)}
.r-bh .kopf .suche input{background:var(--bg-wechsel);border-color:var(--linie);color:var(--text-b)}
.r-bh .kopf .suche input::placeholder{color:var(--neben-b)}
.r-bh .kopf .suche input:focus{background:var(--karte)}
.r-bh .held{border-bottom:1px solid var(--linie)}
.r-bh .held::after{border-color:var(--held-kreis);box-shadow:var(--held-kreis-schatten)}
.r-bh .dachzeile{color:var(--link-b)}
.r-bh .upload{border:1px solid var(--linie);box-shadow:var(--upload-schatten)}
.r-bh .anim-unter{color:var(--neben-b)}
.r-bh .anim.kasten{background:var(--karte);border:1px solid var(--linie);box-shadow:var(--upload-schatten)}
.r-bh .anim-titel{color:var(--text-b)}
.r-bh .anim-titel .ico{--ico:var(--ico-standard);--akz:var(--akz-standard)}
.r-bh .k-titel{fill:var(--text-b)}
.r-bh .k-wert{fill:var(--text-b)}
.r-bh .k-label{fill:var(--neben-b)}
.r-bh .k-linie{stroke:var(--linie)}
.r-bh .k-spur{fill:var(--linie)}
.r-bh .v-liste li{box-shadow:var(--v-schatten)}
.r-bh .r-kopf{border-bottom:1px solid var(--linie)}
.r-bh .r-gruppe{color:var(--link-b)}
.r-bh .brotkrumen a{color:var(--neben-b)}
.r-bh .r-meta a{color:var(--link-b)}
.r-bh .r-meta .ico{--ico:var(--neben-b);--akz:var(--neben-b)}
.vertrauen.fuenf .v-liste{grid-template-columns:repeat(5,1fr);gap:.8rem}
.vertrauen.fuenf .v-liste li{padding:1rem}
.vertrauen.fuenf .v-titel{font-size:.9rem}
/* Bernd 20.10.2026: kein oranger Rahmen um die Garantie (wirkte wie ein vorausgewählter Knopf) */
.v-garantie .v-text a{color:var(--link-b);white-space:nowrap}
@media (max-width:1100px){
  .vertrauen.fuenf .v-liste{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .vertrauen.fuenf .v-liste{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .vertrauen.fuenf .v-liste{grid-template-columns:1fr}
}
.person-pos{padding-block:2.5rem 0}
.person-kasten{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.3fr) auto;gap:1.5rem;align-items:center;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.2rem 1.5rem;box-shadow:var(--karte-schatten)}
.person-foto img,.uu-foto img{display:block;width:100%;height:auto;border-radius:50%}
.person-foto{width:5.5rem;height:5.5rem;display:block}
.person-name{font-family:var(--schrift-titel);font-weight:600;font-size:1.1rem;margin:0 0 .15rem}
.person-name.gross{font-size:1.35rem;margin-top:.4rem}
.person-rolle{font-size:.88rem;color:var(--neben-b);margin:0 0 .45rem}
.person-quali{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600;margin:0;padding:.35rem .7rem .35rem .45rem;border-radius:.5rem;background:var(--weich);color:var(--text-b)}
.person-quali .ico{width:1.15rem;height:1.15rem}
.person-praxis{margin:0;font-size:.92rem;color:var(--neben-b);border-left:1px solid var(--linie);padding-left:1.5rem}
.person-link{white-space:nowrap}
@media (max-width:980px){
  .person-kasten{grid-template-columns:auto minmax(0,1fr);row-gap:1rem}
  .person-praxis{grid-column:1/-1;border-left:0;padding-left:0}
  .person-link{grid-column:1/-1;justify-self:start}
}
@media (max-width:640px){
  .person-kasten{padding:1.1rem}
  .person-foto{width:4.5rem;height:4.5rem}
}
.uu-wer:has(.uu-wer3){max-width:72rem}
.uu-wer3{display:grid;grid-template-columns:16rem minmax(0,46rem);gap:3rem;align-items:start}
.uu-foto{display:block;width:16rem;max-width:100%}
.uu-foto img{border-radius:var(--radius);box-shadow:var(--karte-schatten)}
.uu-wer-titel{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:600;margin-bottom:.2rem}
.uu-wer3 .person-quali{margin-bottom:1.2rem}
@media (max-width:860px){
  .uu-wer3{grid-template-columns:1fr;gap:1.5rem}
  .uu-foto{width:11rem}
}
.garantie{display:flex;gap:1rem;align-items:flex-start;margin-top:1.25rem;padding:1.1rem 1.4rem;border:1px solid var(--linie);border-left:4px solid var(--marke);border-radius:var(--radius);background:var(--karte)}
.garantie-ico{width:2.6rem;height:2.6rem;padding:.5rem;border-radius:.6rem;background:var(--knopf);--ico:var(--auf-dunkel);--akz:var(--auf-orange-akz);flex:none}
.garantie-titel{font-weight:700;margin:0 0 .2rem}
.garantie p{margin:0}
.garantie-grenze{font-size:.84rem;color:var(--neben-b);margin-top:.25rem!important}
.klein-link{font-size:.85rem}
.s-garantie{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;margin:.2rem 0 0;padding:.85rem 1rem;border-radius:var(--radius);background:var(--karte);border:1px solid var(--linie)}
.s-garantie .ico{width:1.3rem;height:1.3rem;margin-top:.05rem}
.fuss-unten{align-items:center;flex-wrap:wrap}
.person-quali.praxis-kurz{margin-top:.35rem;background:transparent;border:1px solid var(--linie)}
.person-text .person-quali{display:flex;width:fit-content}
@media (max-width:640px){
  .person-kasten .person-praxis{display:none}
}
.eilig-band{background:var(--dunkel);color:var(--auf-dunkel);padding-block:2.4rem;position:relative;overflow:hidden}
.eilig-band::after{content:"";position:absolute;right:-6rem;top:-8rem;width:22rem;height:22rem;border-radius:50%;border:2px solid var(--eilig-kreis)}
.eilig-innen{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.6rem;align-items:center;position:relative;z-index:1}
.eilig-ico{display:grid;place-items:center;width:4rem;height:4rem;border-radius:1rem;background:var(--knopf)}
.eilig-ico .ico{width:2.2rem;height:2.2rem;--ico:var(--auf-dunkel);--akz:var(--auf-orange-akz)}
.eilig-band h2{color:var(--auf-dunkel);font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:600;margin:0 0 .35rem}
.eilig-band p{margin:0;color:var(--eilig-text);max-width:44rem;font-size:1.05rem}
.eilig-kurz{border-left-color:var(--dunkel)}
.eilig-kurz .garantie-ico{background:var(--dunkel)}
@media (max-width:860px){
  .eilig-innen{grid-template-columns:auto minmax(0,1fr)}
  .eilig-band .knopf{grid-column:1/-1;justify-self:start}
}
@media (max-width:640px){
  .eilig-innen{grid-template-columns:1fr;gap:1rem}
  .eilig-band .knopf{width:100%}
  .eilig-ico{width:3.2rem;height:3.2rem}
}
@media (max-width:860px){
  .eilig-band::after{display:none}
}

/* ===== Anwendung auf den Prototyp abgebildet ===========================================================================
   Wo das Markup der Anwendung andere Elemente braucht als der Prototyp (Listen für die Navigation mit ihren Kennungen,
   Formulare, htmx), stehen hier die Erklärungen des Prototyps wörtlich an den Selektoren der Anwendung. */
main.voll { display: block; }
.kopf { padding-top: env(safe-area-inset-top, 0px); }  /* iPhone: unter der Statusleiste */
.mut { color: var(--neben-b); }
.knopf .ico, .btn .ico { --ico: currentColor; --akz: currentColor; }

/* Knöpfe der Anwendung (.btn) = .knopf des Prototyps, .btn.geist = .knopf-zweit */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--knopf); color: var(--auf-knopf);
  font-weight: 600; font-size: 1rem; text-decoration: none; border: 0; border-radius: var(--radius-knopf); padding: .75rem 1.3rem; cursor: pointer;
  font-family: var(--schrift); transition: background .15s, transform .15s; line-height: 1.2; }
.btn:hover { background: var(--knopf-hover); text-decoration: none; }
.btn .ico { width: 1rem; height: 1rem; }
.btn.gross { padding: .95rem 1.6rem; font-size: 1.05rem; }
.btn.geist { background: transparent; color: var(--link-b); border: 1.5px solid var(--knopf); border-radius: var(--radius-knopf);
  padding: .65rem 1.1rem; font: 600 .95rem/1.2 var(--schrift); }
.btn.geist:hover { background: var(--weich); }
.btn.gesperrt, .btn:disabled { background: var(--flaeche); color: var(--neben); border: 1px solid var(--linie); cursor: not-allowed; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--link-b); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; cursor: pointer; }

/* Kopf: Logo „Variante 3 kompakt“ als Bild (hell und dunkel aus docs/marke) */
.marke .lv3 { display: flex; align-items: center; gap: .8rem; }
.marke picture { display: block; }
.kopf-innen { gap: 2rem; }
/* Navigation: eine Liste (Kennungen und Reihenfolge am Handy, G-19), am Rechner wie .hauptnav und .kopf-rechts */
.kopf-nav { flex: 1 1 auto; min-width: 0; }
.kopf-nav > ul { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.kopf-nav > ul > li { margin: 0; }
.kopf-nav > ul > li > a, .kopf-nav .mega > summary { color: var(--text-b); text-decoration: none; font-weight: 500; font-size: .98rem; padding: .55rem .8rem; border-radius: .5rem;
  cursor: pointer; display: flex; align-items: center; gap: .3rem; list-style: none; white-space: nowrap; }
.kopf-nav > ul > li > a:hover, .kopf-nav .mega > summary:hover { background: var(--bg-wechsel); }
.kopf-nav > ul > li > a[aria-current], .kopf-nav .mega[data-aktiv] > summary { color: var(--link-b); }
.kopf-nav .mega > summary::-webkit-details-marker { display: none; }
.kopf-nav li.nav-suche { order: 10; margin-left: auto; }
.kopf-nav li.nav-konto { order: 11; margin-left: .5rem; }
.kopf-nav li.nav-konto > a.einloggen { display: flex; align-items: center; gap: .4rem; color: var(--text-b); font-weight: 500; font-size: .95rem; padding: .5rem .7rem; }
.einloggen .ico { width: 1.2rem; height: 1.2rem; }
.kopf-nav:not(:has(.nav-suche)) li.nav-konto { margin-left: auto; }
.kopf-einloggen-handy { display: none; }
.menue-knopf { display: none; margin-left: auto; background: none; border: 0; padding: .45rem; border-radius: .5rem; color: var(--text-b); cursor: pointer; }
.menue-knopf .zu { display: none; }
.kopf.menue-offen .menue-knopf .auf { display: none; }
.kopf.menue-offen .menue-knopf .zu { display: block; }
.menue-knopf .ico { --ico: var(--ico-standard); --akz: var(--akz-standard); }
/* Menüs Leistungen und Ratgeber: .mega-panel des Prototyps */
.aufklapp-panel.schmal { width: 22rem; }
.mega-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.mega-liste a { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .92rem; color: var(--text-b); text-decoration: none; }
.mega-liste a:hover span { color: var(--link-b); text-decoration: underline; }
.mega-liste a[aria-current] span { color: var(--link-b); }
.menue-gruppe a[aria-current] { color: var(--link-b); font-weight: 600; }
.nav-leistungen .mega-panel { left: -1rem; }
/* Bernd 23.10.2026: „Kostenlose Tools“ steht rechts im Kopf, das Menü öffnet sich nach links */
.nav-werkzeuge .mega-panel { left: auto; right: -1rem; }
/* Bernd 24.10.2026: „auch auf der Desktop-Seite wird das Menü sehr umfangreich. Das Carnet klebt jetzt ganz unten“:
   die Ratgeber-Gruppen fließen in Spalten (keine Zeilen mit Lücken), und das Menü passt immer ins Fenster */
.nav-ratgeber .mega-raster { display: block; column-count: 3; column-gap: 1.75rem; }
/* breiter als der Platz rechts von „Ratgeber“ (lief bei 1280 px rechts aus dem Fenster): mittig unter dem Kopf */
.kopf-innen { position: relative; }
.nav-ratgeber .mega { position: static; }
.nav-ratgeber .mega-panel { left: 50%; top: calc(100% - .2rem); transform: translateX(-50%); }
.nav-ratgeber .menue-gruppe { break-inside: avoid; margin: 0 0 1.1rem; }
.kopf-nav .mega-panel { max-height: calc(100vh - 6.5rem); overflow-y: auto; }
/* Suche (R1-14) im Stil des Prototyp-Suchfelds (.suche, .treffer) */
.kopf-suche .suche { position: relative; display: flex; align-items: center; margin: 0; }
.suche-kasten { position: absolute; right: 0; top: calc(100% + .4rem); width: 24rem; max-height: 70vh; overflow-y: auto; background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: 0 18px 40px -12px var(--schatten); padding: .4rem; z-index: 60; text-align: left; }
.suche-kasten[hidden], .suche-liste[hidden], .suche-leer[hidden] { display: none; }
.suche-liste { list-style: none; margin: 0; padding: 0; }
.suche-vorschlag a { display: block; padding: .55rem .7rem; border-radius: .5rem; text-decoration: none; color: var(--text-b); }
.suche-vorschlag[aria-selected="true"] a, .suche-vorschlag a:hover { background: var(--bg-wechsel); }
.suche-name { display: block; font-weight: 700; font-size: .92rem; }
/* Bernd 23.10.2026: Überschrift je Gruppe der Vorschläge (Kostenlose Tools, Leistungen, Ratgeber) */
.suche-gruppe { padding: .6rem .7rem .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--neben-b); list-style: none; }
.suche-gruppe:not(:first-child) { margin-top: .3rem; border-top: 1px solid var(--linie); }
.suche-frage .suche-name { font-weight: 400; }
.suche-satz { display: block; font-size: .8rem; color: var(--neben-b); line-height: 1.35; }
.suche-vorschlag mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--marke); text-decoration-thickness: 2px; }
.suche-leer { padding: .6rem; font-size: .88rem; margin: 0; }
.suche-leer a { display: block; margin-top: .3rem; }

/* Fortschritt der Strecke (G-11: in der Kopfleiste neben dem Logo) mit .s-etappen, .s-unter des Prototyps */
.kopf-strecke .kopf-innen { height: auto; min-height: 4rem; }
.fortschritt { position: sticky; top: 0; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; background: none; border: 0; }
.fortschritt .etappen { padding: 0; }
.fortschritt .etappe a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: .5rem; }
.fortschritt .etappe a:hover .name { text-decoration: underline; }
.fortschritt .etappe.erledigt { color: var(--text-b); }
.fortschritt .etappe.erledigt .nr { color: var(--auf-dunkel); }
.etappen.vorphase { margin: 0; font-weight: 600; font-size: .95rem; color: var(--text-b); }
.etappe-kurz { display: none; margin: 0; font-size: .85rem; font-weight: 600; }
.kopf-konto { margin-left: auto; display: flex; align-items: center; gap: .4rem; color: var(--text-b); text-decoration: none; font-weight: 500; font-size: .95rem; padding: .5rem .7rem; border-radius: .5rem; white-space: nowrap; }
.kopf-konto:hover { background: var(--bg-wechsel); }
.fortschritt-unter { background: var(--karte); }
.fortschritt-unter .unterschritte { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.unterschritte li + li::before { content: none; }
.unterschritte a { color: inherit; text-decoration: none; }
.unterschritte a:hover { text-decoration: underline; }
.unterschritte .erledigt::before { content: "✓ "; content: "✓ " / ""; }

/* Fuß: Hilfe und Rechtliches in einer Spalte wie im Prototyp */
.fuss .fuss-gruppe { margin: 0; }
.fuss h2.fuss-titel { font: 600 .9rem/1.6 var(--schrift); letter-spacing: 0; }
.fuss .fuss-marke p { margin: 0 0 1rem; }
.fuss .fuss-marke .claim { margin: .8rem 0 .8rem; }
.fuss-unten p { margin: 0; }
.fuss-server { display: inline-flex; align-items: center; gap: .45rem; }
.fuss-server .ico { width: 1.1rem; height: 1.1rem; --ico: var(--fuss-neben); --akz: var(--fuss-neben); }
.fuss .service a { display: inline; }
/* Zahlarten (G-2): die Zeichen der Marken auf hellen Kärtchen, Maße der Textmarken des Prototyps */
.zahlmarken.mit-logo li { display: grid; place-items: center; min-width: 4.6rem; height: 2rem; padding: .25rem .7rem; border-radius: .4rem; background: var(--a-papier); border: 1px solid var(--linie); }
.zahlmarken.mit-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.fuss-zahl.mit-logo li { height: 1.7rem; min-width: 4rem; padding: .2rem .55rem; border-color: var(--fuss-linie); }

/* Startseite: Upload-Karte (.upload) mit Ablagefläche (.drop) */
.upload-karte { margin: 0; }
.upload-kopf h2 { font: 600 .95rem/1.3 var(--schrift); margin: 0; color: var(--text-b); flex: 1; min-width: 0; }  /* der Titel bricht um, „Schritt 1 von 4“ nicht */
.upload-flaeche .drop { cursor: default; }
.upload-flaeche.ueber .drop { border-color: var(--marke); }
.drop .drop-ico .ico { --ico: var(--auf-dunkel); --akz: var(--auf-orange-akz); }
.drop form, .upload-flaeche form { margin: 0; }
.drop label.knopf { margin-top: .3rem; position: relative; }
.upload-flaeche .upload-kamera label { position: relative; }
.upload-kamera .nur-handy { display: none; }
.drop .upload-kamera { display: none; }  /* steht in der Ziehfläche; nur wo „Foto aufnehmen“ sichtbar ist */
@media (max-width: 640px) { .drop .upload-kamera { display: block; } .upload-kamera .nur-handy { display: flex; width: 100%; margin-top: .7rem; } }
/* Bernd 18.10.2026: auf Touch-Geräten (nicht nach User-Agent) nur die Knöpfe „Datei auswählen“ und „Foto aufnehmen“,
   gleich breit untereinander; ohne Ziehen kein Symbol, kein „hierher ziehen“, kein „oder“. Rückmeldung Bernd 18.10.2026:
   beide Knöpfe im selben gestrichelten Rahmen wie die Ziehfläche am Desktop. */
@media (hover: none) and (pointer: coarse) {
  .upload-flaeche:not(.abgelegt) .drop { padding: 1.1rem; gap: 0; }
  .upload-flaeche .drop > .drop-ico, .upload-flaeche .drop > .drop-titel, .upload-flaeche .drop > .drop-oder { display: none; }
  .upload-flaeche .drop form { width: 100%; }
  .upload-flaeche .drop label.knopf { margin-top: 0; width: 100%; min-height: 3rem; }
  .upload-flaeche .drop .upload-kamera { display: block; width: 100%; }
  .upload-kamera .nur-handy { width: 100%; }
  .upload-kamera .nur-handy { display: flex; min-height: 3rem; margin-top: .7rem; }
}
.upload-flaeche .hinweis { font-size: .8rem; color: var(--neben-b); text-align: center; margin: .3rem 0; }
.upload-teil .messen { margin-bottom: .5rem; }
.held.breit .upload-teil + .messen { padding-top: .6rem; }
.held.breit .upload .messen + .messen { border-top: 0; padding-top: 0; }
form.ohne-rechnung { display: block; }
.ohne-rechnung button.link { font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; color: var(--link-b); }
.ohne-rechnung .pfeil { --ico: currentColor; --akz: currentColor; }
.schritte-nach p { margin: 0; }
.kacheln { list-style: none; }
.kgruppe .kachel .kachel-titel { color: var(--text-b); }
.fragen-liste .frage-text > :first-child { margin-top: 0; }
/* G-1, G-21 (Bernd 15.10.2026): größerer Abstand zwischen Überschrift und Fragen, die Fragen etwas schmaler; Dachzeile,
   Überschrift und „Ihre Frage ist nicht dabei?“ laufen als EIN Block mit */
.r-b .fragen-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); gap: 4rem; }
.r-b .fragen-intro { position: sticky; top: 6rem; align-self: start; }
.r-b .fragen-intro .abschnitt-kopf { position: static; }
.fragen-intro h2 { hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 980px) { .r-b .fragen-raster { grid-template-columns: 1fr; gap: 1rem; } .r-b .fragen-intro { position: static; } }

/* Animation (R1-33, G-20): Grundzustand ist der fertige Endzustand; Bewegung nur mit „anim-an“ (strecke.js) */
.fertig, .chip { transform-box: fill-box; }

/* Textseiten: Brotkrumen als Liste (Kennungen), Aussehen wie im Prototyp mit „/“ */
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.brotkrumen li { display: flex; gap: .45rem; }
.brotkrumen li + li::before { content: "/"; content: "/" / ""; }

@media (max-width: 860px) {
  .menue-knopf { display: none; }
  .mit-js .menue-knopf { display: flex; }
  .mit-js .kopf-einloggen-handy { display: flex; margin-left: auto; padding: .5rem; }
  /* Bernd 24.10.2026: im Handy-Menü kein „Einloggen“, dafür steht oben rechts das Personenzeichen */
  .mit-js .kopf-nav li.nav-konto { display: none; }
  .mit-js .kopf-einloggen-handy + .menue-knopf, .mit-js .kopf-einloggen-handy ~ .menue-knopf { margin-left: 0; }
  .mit-js .menue-knopf { order: 3; }
  .kopf-innen:has(.kopf-nav) { flex-wrap: wrap; }
  .mit-js .kopf-innen:has(.kopf-nav) { flex-wrap: nowrap; gap: .75rem; }
  .kopf-nav { flex-basis: 100%; }
  .kopf-nav > ul { flex-wrap: wrap; }
  /* .mobil-panel des Prototyps */
  .mit-js .kopf-nav { display: none; position: fixed; left: 0; right: 0; top: 4rem; bottom: 0; overflow: auto; background: var(--karte); padding: 1rem 1.25rem 2rem; border-top: 1px solid var(--linie); }
  .mit-js .kopf.menue-offen .kopf-nav { display: block; }
  .mit-js .kopf-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .mit-js .kopf-nav > ul > li { margin: 0; }
  .mit-js .kopf-nav > ul > li > a, .mit-js .kopf-nav .mega > summary { font-size: 1.1rem; font-weight: 600; color: var(--text-b); padding: .6rem 0; border-radius: 0; border-bottom: 1px solid var(--linie); justify-content: space-between; }
  .mit-js .kopf-nav > ul > li > a:hover, .mit-js .kopf-nav .mega > summary:hover { background: none; }
  .mit-js .kopf-nav li.nav-konto > a.einloggen { justify-content: flex-start; }
  .mit-js .kopf-nav li.nav-konto > a.einloggen .ico { display: none; }
  /* Bernd 15.10.2026 (G-19): mobil Leistungen, Über uns (seit 22.10.2026 Kostenlose Tools), Preise, Einloggen; Ratgeber zugeklappt am Ende; Suche oben (G-7) */
  .mit-js .kopf-nav li.nav-suche { order: 0; margin: 0 0 .6rem; }
  .mit-js .kopf-nav li.nav-leistungen { order: 1; }
  .mit-js .kopf-nav li.nav-werkzeuge { order: 2; }
  .mit-js .kopf-nav li.nav-preise { order: 3; }
  .mit-js .kopf-nav li.nav-konto { order: 4; margin-left: 0; }
  .mit-js .kopf-nav li.nav-ratgeber { order: 5; }
  .mit-js .kopf-nav .mega-panel { position: static; transform: none; width: auto; max-height: none; overflow: visible; border: 0; box-shadow: none; padding: .8rem 0 .6rem; border-radius: 0; }  /* Bernd 24.10.2026: Abstand nach oben */
  .mit-js .kopf-nav .mega-raster { grid-template-columns: 1fr; gap: 0; column-count: 1; }
  .mit-js .kopf-nav .mega-gruppe { padding: .6rem 0; border-bottom: 1px solid var(--linie); }
  /* Bernd 24.10.2026: auch am Handy „Alle … ansehen“ unter jedem Aufklappmenü */
  .mit-js .kopf-nav .mega-fuss { display: block; margin: .5rem 0 0; padding: .6rem 0 .2rem; font-size: 1rem; }
  .kopf-suche .suche, .kopf-suche .suche input { width: 100%; }
  .kopf-suche .suche input { font-size: 1rem; }
  .suche-kasten { width: auto; left: 0; }
  .kopf.strecke .kopf-innen { flex-wrap: wrap; row-gap: .6rem; }
  .kopf.strecke .fortschritt { order: 3; flex-basis: 100%; align-items: flex-start; padding-bottom: .4rem; }
  .kopf.strecke .etappen:not(.vorphase) { display: none; }
  .kopf.strecke .etappe-kurz { display: block; }
  /* Prototyp (bh-strecke-*, mobil): Einloggen nur als Symbol neben dem Logo, das Wort bleibt für Screenreader;
     Logo mit Abstand nach oben wie die Leiste der übrigen Seiten */
  .kopf.strecke .kopf-innen { padding-top: .55rem; }
  .kopf.strecke .kopf-konto { padding: .5rem; }
  .kopf.strecke .kopf-konto-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .unterschritte { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .fuss-unten { align-items: flex-start; }
}

/* Schaubilder der Ratgeber (R1-17): Rückweg des Ausgangsvermerks gestrichelt in --marke wie die Pfeile des Prototyps */
.sb-rueck { fill: none; stroke: var(--marke); stroke-width: 1.5; stroke-dasharray: 5 5; }
.schaubild-fig { margin: 1.6rem 0 1.8rem; }
.r-text > .knopf { margin: 0 0 2rem; }
.r-kopf .r-kopf-ico .ico { --ico: var(--auf-dunkel); --akz: var(--auf-orange-akz); }
.r-kopf { background: var(--held); }
.ratgeber-hub-link { margin: 1.25rem 0 0; font-weight: 600; }
.kacheln.drei .kachel .kachel-ico { --ico: var(--auf-dunkel); --akz: var(--auf-orange-akz); }
.toc li { margin: 0; }
/* Tabellen im Text: der unsichtbare Zusatz „(neues Fenster)“ bleibt im Kasten (sonst wird die Seite am Handy breiter) */
.r-text .tabelle { position: relative; }
/* G-21: „Ihre Frage ist nicht dabei?“ mit festem Abstand unter der Überschrift */
.fragen-intro .abschnitt-kopf { margin-bottom: 1rem; }
/* Fünf Einträge plus Suche (G-19, R1-14) passen bis 861 px in die Leiste */
@media (min-width: 861px) and (max-width: 1180px) { .kopf-suche .suche input { width: 11rem; } }
@media (min-width: 861px) and (max-width: 1060px) { .kopf-innen { gap: 1rem; } .kopf-nav > ul > li > a, .kopf-nav .mega > summary { padding-inline: .55rem; } .kopf-suche .suche input { width: 9rem; } }
/* Bernd 22.10.2026: „Kostenlose Tools“ ist länger als „Über uns“; damit die Leiste bei 861 bis 1180 px in eine Zeile passt */
@media (min-width: 861px) and (max-width: 1180px) { .kopf-nav > ul > li > a, .kopf-nav .mega > summary { padding-inline: .6rem; } }
@media (min-width: 861px) and (max-width: 1060px) { .kopf-innen { gap: .75rem; } .kopf-nav > ul > li > a, .kopf-nav .mega > summary { padding-inline: .4rem; } .kopf-suche .suche input { width: 6rem; } }
/* Bernd 23.10.2026: „Kostenlose Tools“ mit Pfeil ist breiter; bei 961 px lief der Kopf um 11 px über */
.kopf-nav li.nav-konto > a.einloggen[aria-current] { color: var(--link-b); }
:where(.r-text) .hinweis > div { min-width: 0; }
@media (max-width: 860px) {
  .mit-js .kopf-nav li.nav-konto > a.einloggen { font-size: 1.1rem; font-weight: 600; padding: .6rem 0; border-radius: 0; border-bottom: 1px solid var(--linie); }
}
/* lange Wörter (Warenverkehrsbescheinigung, Ausfuhrbegleitdokument) brechen am Handy um, statt die Seite breiter zu machen */
.r-text, .r-kopf, .kgruppe, .kurz-karte, .frage { overflow-wrap: break-word; }
@media (max-width: 860px) { .r-text h2, .r-text h3, .r-kopf h1, .abschnitt-kopf h2 { hyphens: auto; } }
/* Über uns: der Absatz ueber_uns.was_text (im Prototyp nicht enthalten) mit Abstand unter den drei Karten */
.uu-raster + .uu-text { max-width: 56rem; margin-top: 1.5rem; }
.uu-raster + .uu-text > :last-child { margin-bottom: 0; }
/* Preisliste (Preise, bleibt zusätzlich zum Prototyp): Tabelle über die ganze Karte, nur der Kopf dunkel wie .tabelle im
   Prototyp; die Zeilenköpfe (th scope=row) sehen aus wie Zellen */
.preisliste-tabelle table.preisliste { max-width: none; font-size: .93rem; }
.preisliste-tabelle table.preisliste td, .preisliste-tabelle table.preisliste thead th { padding: .75rem 1rem; }
.r-b :where(.voll) .preisliste-tabelle tbody th { background: none; color: var(--text-b); text-transform: none; letter-spacing: 0;
  font-size: inherit; font-weight: 400; padding: .75rem 1rem; border-bottom: 1px solid var(--linie); }
.r-b :where(.voll) .preisliste-tabelle tbody tr:nth-child(even) th { background: var(--zebra); }
.preisliste-tabelle tbody tr:last-child th { border-bottom: 0; }

/* ===== Strecke wie bh-strecke-ware / bh-strecke-kasse ================================================================
   Raster .s-raster (Inhalt links, Warenkorb 19rem rechts), Fragen als Überschrift über der Karte (.s-titel, .s-karte),
   Felder .s-feld mit Beschriftung .s-label, Eingabe in einem Kasten mit Einheit (.s-eingabe, .s-einheit) und „aus der
   Rechnung“ darunter (.s-herkunft); Warenkorb .s-korb; Knöpfe .s-knoepfe. */
body.strecke { background: var(--strecke-bg); }
.raster { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2rem; max-width: 72rem; margin: 0 auto; padding: 2.2rem 1.25rem 3rem; align-items: start; justify-content: normal; }
.raster.ohne-spalte { grid-template-columns: minmax(0, 1fr); }
.raster > main { min-width: 0; }
.spalte { position: sticky; top: 6rem; }
:where(.raster) h1, .raster .s-titel { font-family: var(--schrift-titel); font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-weight: 600; color: var(--text-b); margin: 0 0 .45rem; line-height: 1.18; }
.raster .s-titel { margin: 0 0 1rem; }
.s-haupt .abschnitt + .abschnitt { margin-top: 2.2rem; border-top: 0; padding-top: 0; }
.s-haupt .kopfzeile { margin: 0 0 1rem; }
.s-haupt .kopfzeile .s-titel { margin: 0; }
/* .karte der Strecke = .s-karte des Prototyps */
.raster .karte, .s-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.4rem; margin-bottom: 1rem; box-shadow: var(--karte-schatten); }
.raster .karte > h1:first-child { margin-bottom: 1rem; }
.raster .karte h2, .s-karte h2:not(.s-titel), .raster .s-h2 { font: 700 1.08rem/1.3 var(--schrift); color: var(--text-b); margin: 0 0 .8rem; letter-spacing: 0; }
.raster p, .raster li { color: var(--text-b); }
/* Felder */
.raster .fld { margin: .55rem 0; }
.raster .fh, .raster legend.fh { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; margin: 0 0 .35rem; color: var(--text-b); }
.raster .reihe .fh { display: block; }
.raster .frw { font-weight: 400; color: var(--neben-b); }
details.tip summary { width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid var(--rahmen); background: transparent; color: var(--neben-b);
  font: 700 .68rem/1 var(--schrift); padding: 0; display: inline-grid; place-items: center; cursor: help; }
.raster input:not([type=checkbox]):not([type=radio]), .raster select, .raster textarea { max-width: none; border: 1px solid var(--rahmen); border-radius: .5rem; font-size: 1rem; padding: .68rem .8rem; background: var(--karte); color: var(--text-b); }
.raster .s-eingabe { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--rahmen); border-radius: .5rem; background: var(--karte); overflow: visible; position: relative; }
.raster .s-eingabe:focus-within { outline: 2px solid var(--marke); outline-offset: -1px; }
/* :not(…) wie in der Regel darüber, sonst gewinnt sie und das Feld trägt im Kasten einen eigenen Rahmen (Kasten im Kasten) */
.raster .s-eingabe > input:not([type=checkbox]):not([type=radio]), .raster .s-eingabe > select, .raster .s-eingabe .laendersuche input { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; border: 0; font: inherit; font-size: 1rem; padding: .68rem .8rem;
  background: transparent; color: var(--text-b); outline: 0; border-radius: .5rem; text-align: left; }
.raster .s-eingabe > input:focus, .raster .s-eingabe > select:focus, .raster .s-eingabe .laendersuche input:focus { outline: 0; border: 0; }
.raster .s-eingabe .laendersuche { flex: 1 1 auto; max-width: none; }
.raster .s-einheit { flex: none; display: flex; align-items: center; padding: .68rem .8rem; background: var(--bg-wechsel); color: var(--neben-b); border-left: 1px solid var(--linie); font-size: .9rem; border-radius: 0 calc(.5rem - 1px) calc(.5rem - 1px) 0; }
.raster .s-eingabe:has(.fehlt) { border-color: var(--fehler); background: var(--fehler-grund); }
.raster .s-eingabe > .fehlt { background: transparent; border: 0; }
.raster .fld.vergleichen .s-eingabe { border-color: var(--warn); border-width: 1.5px; }
.raster .fld.vergleichen .s-eingabe > input { border: 0; }
.herkunft { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--neben-b); background: none; border-radius: 0; padding: 0; white-space: nowrap; }
.s-herkunft { display: flex; margin: .35rem 0 0; }
.s-herkunft .ico { width: .95rem; height: .95rem; }
/* Abnahmeprotokoll Nachholauf 17.10.2026: der Satz an einem nicht übernommenen Feld ist länger als „aus der Rechnung“ */
.leer-hinweis { white-space: normal; align-items: flex-start; }
/* Breiten: Zahlen- und kurze Felder füllen ihre Spalte wie im Prototyp; Hausnummer und Postleitzahl bleiben schmal */
.raster .fld.zahl .s-eingabe > input, .raster .fld.schmal .s-eingabe > input { flex: 1 1 auto; width: auto; }
.raster .fld.schmal:not(.zahl) .s-eingabe { max-width: calc(11ch + 1.6rem + 2px); }
.raster .fld:has(.kn-ziel) .s-eingabe { max-width: 14rem; }
@media (min-width: 640px) {
  @supports (grid-template-rows: subgrid) {
    .raster .reihe { grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: 0 1.25rem; }
  }
}
/* Auswahl als Karten und Kandidaten wie .s-kandidat */
.raster .opt { border: 1px solid var(--linie); border-radius: .55rem; background: var(--karte); }
.raster .opts .opt:has(input:checked) { border-color: var(--knopf); box-shadow: 0 0 0 1px var(--knopf); background: var(--weich-fest); }
.raster .opts .opt:has(input:checked)::before { border-color: var(--knopf); background: radial-gradient(circle, var(--knopf) 0 45%, var(--karte) 50%); }
.kand { border: 0; padding: 0; background: transparent; max-width: none; }
.kand-wahl { padding: .7rem .9rem; border: 1px solid var(--linie); border-radius: .55rem; margin: .45rem 0 0; background: var(--karte); }
.kand-wahl:has(input:checked) { border-color: var(--knopf); box-shadow: 0 0 0 1px var(--knopf); background: var(--weich-fest); }
.kand-wahl input { accent-color: var(--knopf); }
/* Positionen: die offene Position ist der Inhalt der Karte (kein Kasten im Kasten), Kopf wie .s-pos-kopf */
.raster .pos-block { border: 0; border-radius: 0; padding: 0; margin: 0; }
.raster .pos-block:has(.fehlt) { border: 0; }
.raster .pos-block .s-pos-kopf { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem; padding: 0 0 .9rem; border-top: 0; border-bottom: 1px solid var(--linie); font: 700 1.05rem/1.2 var(--schrift); }
.raster .pos-block .s-pos-kopf .pos-stand { margin-left: auto; font-size: .85rem; }
.raster button.pos-kopf { border: 0; border-top: 1px solid var(--linie); border-radius: 0; margin: 0; padding: .8rem 0; background: transparent; }
.raster .positionen > button.pos-kopf:first-child { border-top: 0; }
.raster .pos-block + button.pos-kopf { margin-top: 1rem; }
/* Warenkorb = .s-korb */
.korb { background: var(--karte); border: 1px solid var(--linie); border-top: 1px solid var(--linie); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--karte-schatten); }
.korb summary { font-weight: 700; margin: 0 0 .8rem; display: flex; justify-content: flex-start; align-items: center; gap: .55rem; color: var(--text-b); }
.korb summary .ico { width: 1.3rem; height: 1.3rem; }
.korb .kz { font-size: .92rem; padding: .45rem 0; border-bottom: 1px solid var(--linie); color: var(--text-b); }
.korb .kz span:last-child { padding-left: .8rem; }
.korb .kz.gesamt { font-weight: 700; font-size: 1.05rem; border-top: 0; border-bottom: 0; margin-top: 0; padding-top: .7rem; }
.korb .kz.neben { font-size: .78rem; color: var(--neben-b); border-bottom: 0; padding: .05rem 0; }
.korb-hinweis { display: flex; gap: .5rem; font-size: .82rem; color: var(--neben-b); margin: .8rem 0 0; padding-top: .8rem; border-top: 1px solid var(--linie); }
.korb-hinweis .ico { width: 1rem; height: 1rem; margin-top: .1rem; }
.korb.inline { box-shadow: none; }
/* Knöpfe wie .s-knoepfe: Zurück links (.s-zurueck), Weiter rechts groß */
.raster .weiter.knoepfe { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.raster .knoepfe > .btn { padding: .95rem 1.6rem; font-size: 1.05rem; margin-left: auto; }
.raster .knoepfe .zurueck, .raster a.zurueck, .raster button.link.zurueck { color: var(--neben-b); font-weight: 600; text-decoration: none; }
.raster .knoepfe .zurueck:hover, .raster a.zurueck:hover { color: var(--text-b); }
.raster .karte > .weiter.knoepfe, .raster .s-karte > .weiter.knoepfe { margin-bottom: 0; }
/* Haken (AGB, Gesehen) wie .s-haken */
.raster .haken, .raster label.haken { display: flex; gap: .7rem; align-items: flex-start; font-weight: 500; cursor: pointer; padding: .5rem 0; }
.raster .haken input[type=checkbox] { width: 1.2rem; height: 1.2rem; accent-color: var(--knopf); margin-top: .15rem; }
.raster details.vertrag summary { cursor: pointer; color: var(--link-b); font-weight: 600; margin-top: .9rem; font-size: .92rem; }
.raster details.vertrag p { font-size: .88rem; color: var(--neben-b); margin: .6rem 0 0; }
/* Vorgang 66, Bernd 18.10.2026: Gutschein an der Kasse eingeklappt ganz oben; die Zeile sieht aus wie die anderen
   Aufklapper (details.vertrag), der Inhalt bleibt ein gewöhnliches Feld (keine kleine graue Schrift für Befund und Knopf) */
details.gutschein-kasten > summary { cursor: pointer; color: var(--link-b); font-weight: 600; font-size: .92rem; }
details.gutschein-kasten[open] > summary { margin-bottom: .8rem; }
details.gutschein-kasten > .fld { margin-bottom: 0; }
@media (max-width: 860px) {
  .raster, .raster.ohne-spalte { grid-template-columns: 1fr; gap: 1rem; }
  .spalte { position: static; order: -1; }
}
@media (max-width: 640px) {
  .raster { padding: 1.25rem 1rem 2rem; }
  .raster .karte, .s-karte { padding: 1.1rem; }
  .raster .knoepfe > .btn { flex: 1; }
}
.raster .opts { max-width: none; }
.korb summary .korb-summe { margin-left: auto; }
/* Hinweiskästen der Strecke im Stil des Prototyps (.hinweis): Rahmen, Kante links in der Farbe des Hinweises.
   Bernd 16.10.2026: „Kasten im Kasten ist doof!“ Kästen stehen nebeneinander auf einer Ebene, nie ineinander. */
.raster .box { border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin: 1rem 0; }
.raster .box.warn { background: var(--warn-grund); border-left: 4px solid var(--warn); color: var(--text-b); }
.raster .box.schlecht { background: var(--fehler-grund); border-left: 4px solid var(--fehler); }
.raster .box.ok { background: var(--karte); border-left: 4px solid var(--ok); }
.raster .box.info { border: 0; padding: 0; background: none; }
.raster .box.rechnungscheck:not(.warn) { border-left: 4px solid var(--linie-stark); }
.raster .box p + p, .raster .box p + ul, .raster .box ul + p { margin-top: .5rem; }
.raster .box .haken { padding: .6rem 0 0; font-weight: 600; }
.raster .box a, .raster .box button.link { color: var(--text-b); }
.raster .box p.klein a { font-weight: 600; }
.raster .box + .box { margin-top: .8rem; }
/* TARIC-Maßnahmen: die Gruppe ist kein eigener Kasten um die Karten der Maßnahmen */
.raster .massnahmen-kasten { border: 0; border-top: 1px solid var(--linie); border-radius: 0; padding: .2rem 0 0; }
/* Upload: abgelegte Datei in der Fläche (Bernd 16.10.2026), im Stil der Ablagefläche des Prototyps */
.upload-flaeche.abgelegt .drop > :not(.upload-stand) { display: none; }
.upload-flaeche.abgelegt .drop { border-style: solid; border-color: var(--knopf); cursor: default; }
.upload-flaeche.stand-fehler .drop { border-color: var(--fehler); }
.upload-stand { width: 100%; text-align: left; }
.upload-stand[hidden] { display: none; }
/* Nachbesserung Lieferantenerklärung: im Ratgebertext (.r-text) zeigten Regeln für .hinweis den versteckten Satz zum
   Botschutz; in der Upload-Fläche bleibt Verstecktes immer versteckt */
.upload-flaeche [hidden] { display: none !important; }
.stand-datei { display: flex; align-items: center; gap: .8rem; }
.stand-ico { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: .8rem; background: var(--knopf); }
.stand-ico[hidden] { display: none; }
.stand-ico .ico { width: 1.7rem; height: 1.7rem; --ico: var(--auf-dunkel); --akz: var(--auf-orange-akz); }
.stand-vorschau { flex: none; width: 3.2rem; height: 3.2rem; object-fit: cover; border-radius: .6rem; border: 1px solid var(--linie); }
.stand-angaben { min-width: 0; }
.stand-name { display: block; font-weight: 600; overflow-wrap: anywhere; color: var(--text-b); }
.stand-groesse { display: block; font-size: .85rem; color: var(--neben-b); }
.stand-ok { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--ok); margin: .8rem 0 .5rem; }
.stand-ok[hidden] { display: none; }
.stand-ok .ico { width: 1.2rem; height: 1.2rem; stroke-width: 2.4; --ico: var(--ok); --akz: var(--ok); }
.stand-balken { display: block; width: 100%; height: .45rem; accent-color: var(--knopf); }
.stand-balken[hidden] { display: none; }
.stand-text { font-size: .9rem; margin: .4rem 0 0; color: var(--text-b); }
.stand-fehler .stand-text { color: var(--fehler); font-weight: 600; }
/* Zahlenfelder (Menge, Betrag, Gewicht) je halbe Breite nebeneinander wie im Prototyp; der Kasten füllt die Spalte */
@media (min-width: 640px) {
  @supports (grid-template-rows: subgrid) {
    .raster .reihe > .fld.zahl { grid-column: auto; }  /* Sammelliste Punkt 18: netto und brutto gleich breit */
  }
}
.raster .fld .s-eingabe { width: 100%; }
.raster .fld.schmal:not(.zahl) .s-eingabe { width: auto; }
.zahlmarken.mit-logo li { width: 4.6rem; }
.zahlmarken.mit-logo img { max-height: 1.35rem; max-width: 100%; }
.fuss-zahl.mit-logo li { width: 4rem; }
.fuss-zahl.mit-logo img { max-height: 1.15rem; }
.zahlmarken { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.fuss-unten .zahlmarken { margin: 0; }
.raster .s-eingabe { flex-wrap: nowrap; }
.raster .fld.schmal:not(.zahl):has(.s-einheit) .s-eingabe { max-width: 16rem; }
.raster h3 { font: 700 1rem/1.3 var(--schrift); color: var(--text-b); margin: 1.25rem 0 .5rem; }
.unterschritte .erledigt:has(a)::before { content: none; }
.stand-vorschau-platz:empty { display: none; }


/* Abnahme 16.10.2026 (Bernd): „Etwas stimmt nicht? Fehler melden“ mittig unter der Seite */
#lernen-knopf { text-align: center; margin-top: 1.5rem; }

/* Abnahme 16.10.2026 (Bernd: Name und Land leer, obwohl „Der Käufer“ gewählt): Name und Land des Zahlers bzw. Abholers
   nur bei „Jemand anderes“; bei „Der Käufer“ kommt das Land aus der Rechnung (Frage nach dem Land des Käufers) */
#fahrzeug-zahler-anderer, #fahrzeug-abholer-anderer { display: none; }
form:has(input[name="fahrzeugausfuhr.zahler"][value="anderer"]:checked) #fahrzeug-zahler-anderer,
form:has(input[name="fahrzeugausfuhr.abholer"][value="anderer"]:checked) #fahrzeug-abholer-anderer,
#fahrzeug-zahler-anderer:has(.fehlt), #fahrzeug-abholer-anderer:has(.fehlt) { display: block; }

/* Musterrechnung als Seite (Bernd 16.10.2026, musterrechnung.html): Aufbau wie das PDF, Bausteine des Ratgebertexts
   (Hinweis, .tabelle mit eigenem waagerechten Scrollen); Zahlen rechtsbündig, Rechnungsbetrag mit Linie wie im PDF */
.mr{padding-block:2.5rem 4rem}
.mr-aussteller{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.5rem 2rem;margin:2rem 0 1.5rem;padding-bottom:1.25rem;border-bottom:1px solid var(--linie)}
.mr-aussteller p,.mr-aussteller h2,.mr-block p,.mr-fahrzeug p{margin:0}
.mr-bloecke{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.25rem 2.5rem;margin-bottom:1.5rem}
.r-text .mr-bloecke h3.zwischen,.r-text .mr-fahrzeug h3.zwischen{margin-top:0}
.mr-angaben{margin:0}
.mr-angaben div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 1rem;padding:.2rem 0;border-bottom:1px solid var(--linie)}
.mr-angaben dt{color:var(--neben-b)}
.mr-angaben dd{margin:0;font-weight:600}
.mr-angaben.zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:0 2.5rem;margin-bottom:.8rem}
.mr-tabelle th,.mr-tabelle td{padding:.7rem .75rem}
.mr-tabelle .zahl{text-align:right;white-space:nowrap}
.mr-tabelle th span{display:block;font-weight:400;text-transform:none;letter-spacing:0}
.mr-tabelle td:nth-child(2){min-width:14rem}
.mr-fahrzeug{margin:0 0 1.5rem}
.mr-summen{margin:0 0 1.5rem auto;border-collapse:collapse;width:min(100%,26rem)}
.mr-summen th{text-align:left;font-weight:400;padding:.2rem 1.5rem .2rem 0}
.mr-summen td{text-align:right;white-space:nowrap;padding:.2rem 0}
.mr-summen .gesamt th,.mr-summen .gesamt td{font-weight:700;border-top:1px solid var(--linie-stark);padding-top:.5rem}
.mr-fuss{font-size:.84rem;color:var(--neben-b);border-top:1px solid var(--linie);padding-top:.8rem;margin-top:2rem}
.r-text.mr > .knopf:first-child{margin:0 0 .4rem}
.r-text.mr > .knopf:last-child{margin:1rem 0 0}

/* Fehler melden, Abbruchgründe (Bernd 16.10.2026): Haken links neben dem Text wie .s-kandidat im Prototyp B-hell,
   angehakt wie .s-kandidat.gewaehlt; kein grauer Rahmen ums Ganze. Die Nachfrage zu „Etwas hat nicht funktioniert“ und
   „Anderer Grund“ steht nur unter dem angehakten Grund (ohne :has immer sichtbar). */
fieldset.lernen-gruende { border: 0; padding: 0; margin: .8rem 0 0; min-width: 0; }
.lernen-gruende .s-kandidat { grid-template-columns: auto 1fr; align-items: start; }
.lernen-gruende .s-kandidat input[type=checkbox] { width: 1.2rem; height: 1.2rem; margin: .05rem 0 0; }
.lernen-gruende .s-kandidat .s-kn-text { font-size: .95rem; }
.lernen-gruende .s-kandidat:has(input:checked) { border-color: var(--knopf); box-shadow: 0 0 0 1px var(--knopf); background: var(--weich-fest); }
.lernen-gruende .s-kandidat:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.lernen-nachfrage { margin: .1rem 0 .3rem 2.9rem; }
.lernen-nachfrage label { display: block; font-weight: 600; margin: 0 0 .3rem; }
.lernen-nachfrage label .mut { font-weight: 400; }
.lernen-nachfrage textarea { width: 100%; }
.s-kandidat:not(:has(input:checked)) + .lernen-nachfrage { display: none; }
@media (max-width: 640px) { .lernen-nachfrage { margin-left: 0; } }

/* ===== Seiten ohne Vorlage im Prototyp (Layout-Rest, Bernd 16.10.2026: „Warum sind die Seiten schmaler? Warum die
   Überschriften anders? Warum keine Kacheln?“) ==========================================================================
   Gebaut aus den Bausteinen der bh-Seiten oben (Kopf .r-kopf, Abschnitte .abschnitt mit .abschnitt-kopf, Karten .fuer,
   .schritt, .preis, .kachel, .kgruppe, Text .r-text, Formulare in .s-karte); hier nur, was das andere Markup der
   Anwendung braucht. Keine Kästen in Kästen. Übersicht je Seite: docs/abnahme/prototyp-treu.md, „Seiten ohne Vorlage“. */
/* Leistungen: Karten wie „Für wen“ als Liste, Preis wie auf den Preiskarten */
ul.fuer-raster { list-style: none; margin: 0; padding: 0; }
.fuer h3 a { color: inherit; text-decoration: none; }
.fuer h3 a:hover { color: var(--link-b); text-decoration: underline; }
.fuer .preis-betrag, .fuer .preis-ust { color: var(--text-b); }
.fuer .preis-ust { margin: .45rem 0 1rem; }
/* Ablauf mit vier Schritten in einer Reihe wie .kacheln.vier */
:where(.voll) .schritte.vier { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 980px) { :where(.voll) .schritte.vier { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { :where(.voll) .schritte.vier { grid-template-columns: 1fr; } }
.leistung-kopf-knopf { margin: 1.4rem 0 0; }
.r-kopf .leistung-nur-mit { margin: .6rem 0 0; display: flex; gap: .35rem; align-items: flex-start; font-size: .85rem; line-height: 1.45; color: var(--neben-b); max-width: 42rem; }
.r-kopf .leistung-nur-mit svg { width: 1em; height: 1em; flex: none; margin-top: .2em; }
.leistung-preis-raster { align-items: start; }
.leistung-text > :last-child { margin-bottom: 0; }
/* Ratgeber-Übersicht: Gruppen wie „04 / Ratgeber“ der Startseite, mit dem Satz des Hubs unter dem Kopf */
.kgruppe-titel a { color: inherit; text-decoration: none; }
.kgruppe-titel a:hover { color: var(--link-b); text-decoration: underline; }
.kgruppe-text { font-size: .88rem; color: var(--neben-b); line-height: 1.45; margin: -.2rem 0 .7rem; }
.r-kopf .r-gruppe a { color: inherit; text-decoration: none; }
/* Aktuelles: Liste in der Textspalte ohne Karte */
.r-text .aktuelles-liste { margin: 0; padding: 0; }
.r-text .aktuelles-eintrag:first-child { border-top: 0; padding-top: 0; }
.r-text .aktuelles-eintrag h2 { margin: 0 0 .3rem; }
.r-text .aktuelles-eintrag h2 a { color: inherit; text-decoration: none; }
.r-text .aktuelles-eintrag h2 a:hover { color: var(--link-b); text-decoration: underline; }
.aktuelles-eintrag .r-meta { margin: 0 0 .5rem; }
.r-text > .aktuelles-titelbild { margin: 0 0 1.5rem; }
/* Seiten mit Formular (Kontakt, Anmelden, Konto): Karten wie in der Kasse (.s-karte) in der Breite der Textspalte des
   Ratgebers; die Felder bekommen den Stil der Strecke über .raster */
.raster.seite-formular { grid-template-columns: minmax(0, 46rem); justify-content: start; padding-block: 2.5rem 4rem; }
.raster.seite-formular .s-karte > :last-child { margin-bottom: 0; }
.s-karte.bestellung-konto { margin-top: 0; border-top: 1px solid var(--linie); }
/* Keine Kästen in Kästen (Bernd 16.10.2026): Anmeldungen in einer Karte stehen mit Linie, ohne eigenen Rahmen. Hinweise
   (.box) in Karten: Sammelliste 16.10.2026 Punkt 10, Block „Runde 2“ am Ende */
.s-karte .anmeldung, .raster .karte .anmeldung { border: 0; border-top: 1px solid var(--linie); border-radius: 0; padding: .9rem 0 0; margin: 1rem 0 0; }
/* Rechtstexte: PDF-Link unter dem letzten Abschnitt */
.r-text > .ratgeber-hub-link { margin-top: 2rem; }
/* Seiten nach dem Kauf: Zeitplan und bezahlter Warenkorb stehen zwischen den Karten, nicht in einer */
.raster > main > .plan { margin: 0 0 1rem; border-radius: var(--radius); padding: 1.1rem 1.25rem; }
/* Auswahl mit Kreis wie die Haken (.s-haken): das Feld nicht in voller Breite (EUR.1, Feld 4 und 7; Warennummer
   des Fahrzeugs) */
.raster .haken input[type=radio], .raster .kn-wahl-option input[type=radio] { flex: none; width: 1.2rem; height: 1.2rem; max-width: none; accent-color: var(--knopf); margin: .15rem 0 0; padding: 0; }
/* Bezahlter Warenkorb rechts wie in der Kasse (.s-korb), nicht als Zeile in einer Karte */
.spalte > .korb.inline { border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--karte-schatten); }
/* Seite Fahrzeug (Sammelliste 16.10.2026, Punkt 1): die Ablagefläche des Fahrzeugscheins wie die der Rechnung; bis zur
   nächsten Überschrift „Angaben aus dem Fahrzeugschein“ (erster Abschnitt im Formular) der Abstand zwischen Abschnitten */
.upload-fahrzeugschein .upload-flaeche { margin-top: .8rem; }
.raster .abschnitt + form > .abschnitt:first-of-type { border-top: 1px solid var(--linie); margin-top: 1.1rem; padding-top: 1.1rem; }
/* FIN-Vergleich (Sammelliste 16.10.2026, Punkt 6): echte Tabelle im Hinweiskasten, ohne eigenen Rahmen; alles links und
   oben, Zeilenköpfe ohne Umbruch, Abstand zwischen den Spalten, Zeilen mit Trennlinie wie die Preisliste. Am Handy je
   Zeile untereinander: Quelle, Nummer, Prüfung. */
.fin-vergleich-rahmen { margin: .7rem 0; }
table.fin-vergleich { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.fin-vergleich th, table.fin-vergleich td { text-align: left; vertical-align: top; padding: .55rem 1.2rem .55rem 0; border-bottom: 1px solid var(--linie); }
table.fin-vergleich th:last-child, table.fin-vergleich td:last-child { padding-right: 0; }
table.fin-vergleich thead th { font-size: .75rem; color: var(--neben-b); font-weight: 600; padding-top: 0; }
table.fin-vergleich tbody th { font-weight: 600; white-space: nowrap; color: var(--text-b); }
table.fin-vergleich tbody th span { display: block; }
table.fin-vergleich code { white-space: nowrap; font-size: .95em; }
table.fin-vergleich tbody tr:last-child > * { border-bottom: 0; }
.haken-feld.gesperrt label { color: var(--neben-b); }
.haken-feld.gesperrt .klein { margin: .3rem 0 0; }
@media (max-width: 640px) {
  table.fin-vergleich thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.fin-vergleich, table.fin-vergleich tbody, table.fin-vergleich tr, table.fin-vergleich th, table.fin-vergleich td { display: block; }
  table.fin-vergleich tbody tr { padding: .55rem 0; border-bottom: 1px solid var(--linie); }
  table.fin-vergleich tbody tr:last-child { border-bottom: 0; }
  table.fin-vergleich tbody th, table.fin-vergleich td { border: 0; padding: 0 0 .15rem; }
}
/* Felder mit Einheit (Sammelliste 16.10.2026, Punkt 5): Einheit rechts im Kasten in derselben Zeile wie die Eingabe, gleiche
   Höhe wie jedes andere Feld (bh-strecke-ware). Ein schmales Feld ohne Zahl (Versandkosten der Vorprüfung) brach sonst
   um (.fld.schmal:not(.zahl) .eingabe { flex-wrap: wrap } galt vor .raster .s-eingabe): doppelt hoch, EUR unten links. */
.raster .fld .s-eingabe:has(> .s-einheit) { flex-wrap: nowrap; }
.raster .fld .s-eingabe:has(> .s-einheit) > input:not([type=checkbox]):not([type=radio]) { flex: 1 1 auto; width: auto; min-width: 0; }
.raster .fld.schmal:not(.zahl):has(.s-einheit) .s-eingabe { width: 16rem; max-width: 100%; }
/* Kennzeichen (Sammelliste 16.10.2026, Punkt 2): Feld in der Breite eines Kennzeichens, Schrift wie auf dem Schild (fett,
   Großbuchstaben, gesperrt); darunter der Satz zum Format der gewählten Art und die Vorschau der Schreibweise */
.raster .kennzeichen-feld .s-eingabe { width: 15rem; max-width: 100%; }
.raster .kennzeichen-eingabe > input:not([type=checkbox]):not([type=radio]) { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.raster .kennzeichen-eingabe > input::placeholder { font-weight: 400; letter-spacing: .08em; color: var(--neben-b); }
.kennzeichen-format { margin: .35rem 0 0; }
.kennzeichen-vorschau { margin: .45rem 0 0; font-size: .9rem; }
.kennzeichen-vorschau[hidden] { display: none; }
.kennzeichen-schild { display: inline-block; padding: .1rem .55rem; border: 1.5px solid var(--text-b); border-radius: .3rem; font-weight: 700; letter-spacing: .08em; background: var(--karte); }
.kennzeichen-vorschau .mut[hidden] { display: none; }
/* Am Handy jedes Feld mit Einheit über die ganze Spalte wie in bh-strecke-ware (vorher endeten Stück, netto und brutto
   verschieden breit, weil schmale Felder ihre eigene Breite behielten) */
@media (max-width: 640px) {
  .raster .fld:has(> .eingabe > .s-einheit) { flex: 1 1 100%; width: 100%; max-width: none; min-width: 0; }
  .raster .fld .s-eingabe:has(> .s-einheit), .raster .fld.schmal:not(.zahl):has(.s-einheit) .s-eingabe { width: 100%; max-width: none; }
}

/* ===== Runde 2 Strecke-Oberfläche (Sammelliste 16.10.2026, Punkte 9, 10, 12, 13, 15, 18, 19) ===== */
/* Punkt 13: ein Befund, den strecke.js nach dem Ausfüllen verbirgt (.befund ist sonst flex und überginge hidden) */
.befund[hidden], .noch-offen[hidden] { display: none; }
/* Punkt 12 (Bernd 16.10.2026: Haken nur mit orangem Kästchen, „Bitte bestätigen Sie …“ ohne Hervorhebung): fehlende und
   fehlerhafte Felder in der Fehlerfarbe, nie in Markenorange (das heißt „gewählt“), auf allen Seiten der Strecke gleich.
   - Befundtext rot: .raster p (Schrift der Karte) war spezifischer als .befund und machte ihn grau.
   - Eingabefeld ohne Kasten mit Einheit (Ländersuche und Felder der Seite Fahrzeug, Kasse): Rahmen und Fläche rot; im
     Kasten (.s-eingabe) trägt der Kasten das Rot, das Feld darin bleibt ohne eigenen Rahmen (kein Kasten im Kasten).
   - Haken: der ganze Block aus Kästchen und Beschriftung rot umrandet mit leichter roter Fläche, wie die Auswahlkarten.
   - Auswahl ohne Karten (Warennummer der Seite Fahrzeug, Listen mit Kreis oder Kästchen): die Gruppe als ein roter Block.
   Kontrast: Schrift (--text-b, --fehler) auf --fehler-grund, geprüft in tests/test_marke.py. */
.raster .befund, .raster p.befund, .raster details.vertrag p.befund, .raster .fld p.befund { color: var(--fehler); }
.raster input.fehlt:not([type=checkbox]):not([type=radio]), .raster select.fehlt, .raster textarea.fehlt { border-color: var(--fehler); background: var(--fehler-grund); }
.raster .s-eingabe > input.fehlt:not([type=checkbox]):not([type=radio]), .raster .s-eingabe > select.fehlt,
.raster .s-eingabe .laendersuche input.fehlt:not([type=checkbox]):not([type=radio]) { border: 0; background: transparent; }
.raster .eingabe:not(.s-eingabe) .laendersuche input.fehlt:not([type=checkbox]):not([type=radio]) { border-color: var(--fehler); background: var(--fehler-grund); }
.raster .haken.fehlt, .raster .haken-feld.fehlt .haken-zeile { border: 1px solid var(--fehler); background: var(--fehler-grund); border-radius: .55rem; padding: .7rem .9rem; outline: 0; }
.raster .haken.fehlt input[type=checkbox], .raster .haken-feld.fehlt input[type=checkbox] { outline: 0; }
.raster fieldset.fld.fehlt:not(:has(.opts)):not(:has(.s-kandidat)):not(.box) { border: 1px solid var(--fehler); background: var(--fehler-grund); border-radius: .55rem; padding: .7rem .9rem; }
.raster fieldset.fld.fehlt:not(:has(.opts)) .kn-wahl-option input, .raster fieldset.fld.fehlt .wahl-zeile input { outline: 0; }
/* Punkt 10 (Bernd 16.10.2026: „Ergebnis: Ausfuhranmeldung nötig“ nur noch mit dünner Linie links, Rechnungscheck eckig):
   die Pauschalregel „keine Kästen in Kästen“ (Commit e9d0e0e) nahm jedem Hinweis in einer Karte Rahmen und Rundung.
   Jetzt wie .hinweis im Prototyp B-hell: Fläche, Rundung, Kante links in der Farbe des Hinweises, ohne zweiten Rahmen
   (die Karte ist der Rahmen). Neutrale und gute Hinweise auf dem Wechselgrund (Grün nie als Fläche). Das Ergebnis der
   Vorprüfung wieder deutlich: voller Rahmen in der Markenfarbe, am Ende (kein Weiter) in der Warnfarbe. */
.s-karte .box, .raster .karte .box { border: 0; border-left: 4px solid var(--linie-stark); border-radius: var(--radius); background: var(--bg-wechsel); }
.s-karte .box.warn, .raster .karte .box.warn { border-left-color: var(--warn); background: var(--warn-grund); }
.s-karte .box.schlecht, .raster .karte .box.schlecht { border-left-color: var(--fehler); background: var(--fehler-grund); }
.s-karte .box.ok, .raster .karte .box.ok { border-left-color: var(--ok); }
.s-karte .box.info, .raster .karte .box.info { border: 0; border-radius: 0; padding: 0; background: none; }
.s-karte .box.ergebnis, .raster .karte .box.ergebnis, .raster .box.ergebnis { border: 2px solid var(--marke); border-radius: var(--radius); background: var(--karte); }
.s-karte .box.ergebnis.ende, .raster .karte .box.ergebnis.ende, .raster .box.ergebnis.ende { border-color: var(--warn); background: var(--warn-grund); }
/* Punkt 9 (Bernd 16.10.2026, Vorprüfung: Fragen kleben aneinander, Warengruppen größer als die Fragen):
   a) Zwischen zwei Fragen der Vorprüfung (Formular .fragenblock) ein deutlicher Abstand; was zur Frage darüber gehört
      (Haken „Der Betrag ist geschätzt“, Erläuterung), steht dicht darunter; ein einleitender Satz gehört zur Frage danach.
   b) Rangfolge: Frage = Überschrift (1rem, fett), Antwort in normaler Größe, Name halbfett, Erläuterung klein und grau.
      Kästchen als Auswahlkarten wie .s-kandidat im Prototyp (wie die Abbruchgründe), angehakt wie .s-kandidat.gewaehlt.
   c) Gilt auf allen Seiten der Strecke: Fragen mit Auswahl (legend) über ihren Karten, Haken als Karte (außer in einem
      Hinweis: kein Kasten im Kasten). */
.raster .fragenblock .fld { margin: 1.6rem 0 0; }
.raster .fragenblock h2 + .fld, .raster .fragenblock h2 + .abschnitt > .fld:first-child, .raster .fragenblock h3 + .fld { margin-top: 0; }
.raster .fragenblock .fld.haken-feld { margin-top: .55rem; }
.raster .fragenblock .versandkosten > p.klein { margin: 1.6rem 0 0; }
.raster .fragenblock .versandkosten > p.klein + .fld { margin-top: .6rem; }
.raster .fragenblock .fh, .raster legend.fh { font-size: 1rem; font-weight: 700; }
.raster .opt .ol { font-size: .95rem; font-weight: 600; }
.raster .opt .od { font-size: .85rem; color: var(--neben-b); }
.raster .beschraenkt-gruppen { gap: .45rem 1rem; max-width: none; margin-top: .6rem; }
.raster .beschraenkt-sonst { display: grid; gap: .45rem; margin-top: .6rem; padding-top: .6rem; }
.raster .wahl-zeile.s-kandidat { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .7rem; padding: .7rem .9rem; }
.raster .s-kandidat input[type=checkbox] { width: 1.2rem; height: 1.2rem; margin: .05rem 0 0; accent-color: var(--knopf); }
.raster .wahl-zeile.s-kandidat b { font-weight: 600; font-size: .95rem; }
.raster .wahl-zeile.s-kandidat .mut.klein { display: block; font-size: .85rem; color: var(--neben-b); margin-top: .15rem; }
.raster .s-kandidat:has(input:checked) { border-color: var(--knopf); box-shadow: 0 0 0 1px var(--knopf); background: var(--weich-fest); }
.raster .s-kandidat:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.raster fieldset.fehlt .s-kandidat:not(:has(input:checked)) { border-color: var(--fehler); background: var(--fehler-grund); }
.raster .haken-feld:not(.box .haken-feld) .haken-zeile { display: flex; gap: .7rem; align-items: flex-start; width: fit-content; max-width: 100%; padding: .7rem .9rem;
  border: 1px solid var(--linie); border-radius: .55rem; background: var(--karte); }
.raster .haken-feld .haken-zeile input[type=checkbox] { width: 1.2rem; height: 1.2rem; margin: .05rem 0 0; accent-color: var(--knopf); }
.raster .haken-feld .haken-zeile label { font-size: .95rem; cursor: pointer; }
.raster .haken-feld:not(.box .haken-feld) .haken-zeile:has(input:checked) { border-color: var(--knopf); box-shadow: 0 0 0 1px var(--knopf); background: var(--weich-fest); }
.raster .haken-feld:not(.box .haken-feld) .haken-zeile:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }
.raster .haken-feld.fehlt:not(.box .haken-feld) .haken-zeile, .raster .box .haken-feld.fehlt .haken-zeile { border-color: var(--fehler); background: var(--fehler-grund); box-shadow: none; }
.raster #fahrzeug-formular .fld.wahl, .raster #fahrzeug-formular .fld.haken-feld:not(.box .haken-feld) { margin-top: 1.4rem; }
/* Punkt 15: „aus der Rechnung“ mit Rechnungssymbol auch im Text (gewählte Karte, Grenzübergang, Versandkosten, Zahlungsart) */
.herkunft .ico { width: .95rem; height: .95rem; flex: none; }
.opt .ol .herkunft { vertical-align: baseline; }
/* Punkt 12 (beim Bildvergleich): Vorschläge zur Warennummer offen wie die Auswahlkarten rot, ohne Rahmen ums Optionsfeld */
.raster .fld.fehlt .kand-wahl:not(:has(input:checked)) { border-color: var(--fehler); background: var(--fehler-grund); }
.raster .fld.fehlt .kand-wahl input { outline: 0; }
/* Punkt 19 (Bernd 16.10.2026: eingeklappt nur ein kleines Dreieck vor „2. Drills“): die eingeklappte Position trägt
   dasselbe Nummernfeld wie die aufgeklappte, mit offenen Angaben in der Fehlerfarbe (Punkt 12), damit sie nicht
   übersehen wird; Stand „offen: …“ ebenfalls in der Fehlerfarbe. */
.raster button.pos-kopf { align-items: center; }
.raster button.pos-kopf .s-pos-nr { flex: none; }
.raster .pos-kopf .pos-stand.offen { color: var(--fehler); }
.raster button.pos-kopf .pfeil { align-self: center; line-height: 1; width: auto; }
.raster .fragenblock h2 ~ h2 { margin-top: 2rem; }  /* Punkt 9: „Ihre Lieferung“ nach den zwei Fragen vorab */
/* Musterrechnung, Summen bündig unter dem Gesamtpreis (Sammelliste 16.10.2026, Punkt 16): Der Gesamtpreis ist die letzte
   Spalte; die Beträge der Summen enden dort, wo die Zahlen der Spalte enden (Rahmen 1px und Innenabstand der Zelle). */
.mr-summen { margin-right: calc(.75rem + 1px); width: min(100% - .75rem - 1px, 26rem); }
/* Am Handy scrollt die Tabelle in ihrem Behälter, ihre letzte Spalte steht nicht über den Summen: Summen bis zum Rand */
@media (max-width: 640px) { .mr-summen { margin-right: 0; width: 100%; } }

/* Runde 2 fachlich (Sammelliste 16.10.2026), Punkt 20: „Namen übernehmen“ als Knopf in der Auswahl wie die Karte
   „Nummer korrigieren“ (.opts a.opt), ohne Kreis; „aus der Rechnung“ mit Symbol darunter wie .s-herkunft */
.opts button.opt { font: inherit; color: inherit; text-align: left; padding-left: .9rem; cursor: pointer; }
.opts button.opt::before { display: none; }
.opts button.opt:hover { border-color: var(--knopf); }
.opts button.opt:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
/* Punkt 24 a: Fälle unter einer Frage (passive Veredelung, Sonderfälle): Fall halbfett in der Größe der Frage, Erklärung klein
   und grau darunter (Rangfolge wie Punkt 9: Frage > Antwort > Erläuterung) */
.fall-liste { margin: .1rem 0 .9rem; padding-left: 1.2rem; }
.fall-liste li { margin: .45rem 0; }
.fall-liste li::marker { color: var(--link-b); }
.fall-liste .fall-titel { display: block; font-weight: 600; font-size: .9rem; }
.fall-liste .fall-text { display: block; font-size: .82rem; color: var(--neben); margin-top: .1rem; }
/* Punkte 14 und 23: i-Symbol (Makro info in _feld.html), Kreis und Fahne wie die ?-Hilfe (details.tip, .tipb), in
   Fließtext und an Titeln; offen beim Überfahren, mit dem Tastaturfokus oder per Klick (.offen, strecke.js) */
.info { position: relative; display: inline-block; vertical-align: -.2em; font-weight: 400; }
.info-i { width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid var(--rahmen); background: transparent; color: var(--neben-b);
  font: italic 700 .74rem/1 Georgia, serif; padding: 0; display: inline-grid; place-items: center; cursor: help; }
.info-i:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.info > .tipb { display: none; text-align: left; font-style: normal; white-space: normal; }
.info:hover > .tipb, .info:has(.info-i:focus-visible) > .tipb, .info.offen > .tipb { display: block; }
.info .info-titel { display: block; margin-bottom: .2rem; }
.info .info-link { display: block; margin-top: .4rem; color: inherit; text-decoration: underline; }
.info-wort { white-space: nowrap; }
/* Punkt 14 a: das i steht direkt an der Rechtsgrundlage in der zweiten Zeile des Kartenkopfs (nicht rechts beim Stand) */
.massnahme-karte .karte-rechtsgrundlage { flex: 1 1 100%; order: 2; }
.massnahme-karte .karte-rechtsgrundlage .info { margin-left: .2rem; }
/* Ratgeber-Tabellen am Handy (Bernd 18.10.2026: die Karten mit Spaltenkopf je Zelle aus Punkt 27 waren „sehr
   verwirrend“). Die Spaltenzahl entscheidet ratgeber.py: .tabelle-eng (2 bis 3 Spalten) bleibt eine echte Tabelle, Schrift
   wie am Desktop (.93rem, rund 15 px), enge Zellen, erste Spalte fett und so schmal wie ihr Inhalt, Text bricht in der
   Zelle um (keine Laufleiste). .tabelle-breit (ab 4 Spalten) wischt man waagerecht im Behälter .tabelle-wisch, die erste
   Spalte bleibt stehen, der Verlauf rechts zeigt, dass es weitergeht (strecke.js setzt .am-ende). Desktop unverändert. */
@media (max-width: 640px) {
  .r-text .tabelle th { padding: .55rem .6rem; font-size: .72rem; }
  .r-text .tabelle td { padding: .55rem .6rem; }
  .r-text .tabelle td:first-child { font-weight: 600; }
  .r-text .tabelle-eng th, .r-text .tabelle-eng td { overflow-wrap: break-word; hyphens: auto; }  /* Breite nach Inhalt: Nummern bleiben ganz */
  .r-text .tabelle-eng thead th { hyphenate-limit-chars: 10 5 5; }  /* kurze Kopfwörter nicht trennen („ZEI-CHEN“), lange wie AUSGANGSZOLLSTELLE weiter, sonst zu breit bei 360 px */
  .r-text .tabelle-breit { overflow: hidden; }
  .r-text .tabelle-wisch { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }
  .r-text .tabelle-wisch:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; }
  .r-text .tabelle-breit th, .r-text .tabelle-breit td { min-width: 10rem; overflow-wrap: break-word; hyphens: auto; }
  .r-text .tabelle-breit th:first-child, .r-text .tabelle-breit td:first-child { position: sticky; left: 0; z-index: 1;
    width: 7rem; min-width: 7rem; box-shadow: inset -1px 0 0 var(--linie); }
  .r-text .tabelle-breit td:first-child { background: var(--karte); }
  .r-text .tabelle-breit tbody tr:nth-child(even) td:first-child { background: var(--zebra); }
  .r-text .tabelle-breit::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1.75rem; z-index: 2;
    pointer-events: none; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--text-b) 22%, transparent));
    opacity: 1; }
  .r-text .tabelle-breit.am-ende::after { opacity: 0; }
}
/* Bernd 16.10.2026 („den Pfeil zum Aufklappen bitte um einiges größer“): Pfeil der eingeklappten Position deutlich
   größer als die Schrift, in der Linkfarbe, mittig neben dem Nummernfeld */
.raster button.pos-kopf .pfeil { position: relative; width: 1.6rem; height: 1.6rem; font-size: 0; color: transparent; flex: none; align-self: center; }
.raster button.pos-kopf .pfeil::before { content: ""; position: absolute; left: .3rem; top: 50%; transform: translateY(-50%);
  border-style: solid; border-width: .7rem 0 .7rem 1rem; border-color: transparent transparent transparent var(--link); }
/* Bernd 16.10.2026 („Sonst denken die Leute noch, unsere Logofarbe ist ein Fehler!“): Positionen wie die
   Fortschrittsleiste. Fertig: Nummernfeld und Pfeil dunkel (wie „✓ Daten“); offen: Markenorange (wie „2 Prüfen“).
   Dass etwas fehlt, sagt allein der rote Text „offen: …“ (Rot bleibt das einzige Fehlersignal; ersetzt das rote
   Nummernfeld aus Punkt 19 und den grünen Pfeil von 22:15) */
.raster button.pos-kopf .pfeil::before { border-left-color: var(--knopf); }
.raster button.pos-kopf:not(.pos-offen) .pfeil::before { border-left-color: var(--dunkel); }
.raster button.pos-kopf:not(.pos-offen) .s-pos-nr { background: var(--dunkel); color: var(--auf-dunkel); }

/* ===== Abnahmeprotokoll 17.10.2026, Paket P5 (Oberfläche und Texte) ===== */
/* B35: endet die Vorprüfung am Land (Ausschluss, EU, Sondergebiet; data-ende am Ergebnis), stehen keine weiteren Fragen
   mehr da. Sie bleiben im Formular und kommen mit einem anderen Land ohne Neuladen wieder (htmx tauscht das Ergebnis) */
.fragenblock:has(#vorpruefung-ergebnis[data-ende="land"]) :is(.nach-land, #beschraenkt-bereich) { display: none; }
/* B29: offene Angaben einer Position beim ersten Öffnen neutral, rot erst nach Weiter (springen) */
.raster .pos-kopf .pos-stand.offen.neutral { color: var(--neben-b); }
/* B30: Sprungziele (Blöcke mit tabindex="-1": Sanktionsrückfrage, Maßnahmen, Hinweise) bekamen nach der Antwort den
   Fokusring in Markenorange (#feld-sanktion-antwort in der Adresse), der wie ein roter Rahmen um den erledigten Block
   aussah, ohne Innenabstand um den gelben Kasten. Sie sind keine Bedienelemente; was fehlt, zeigt .fehlt */
.raster div[tabindex="-1"]:focus, .raster div[tabindex="-1"]:focus-visible { outline: none; }
/* B42: Auswahl und Haken nie im Blau des Browsers. Frei stehend sind sie Karten (.s-kandidat, .haken-feld); in einem
   Hinweis oder einer Maßnahmenkarte (Zusatzcode, Genehmigung, Erinnerung im Zeitplan) ohne eigene Karte (kein Kasten
   im Kasten, SL 9 c), aber in der Knopffarbe und in der Größe der Karten */
.raster input[type=radio], .raster input[type=checkbox] { accent-color: var(--knopf); }
.raster .massnahmen .wahl-zeile input[type=radio], .raster .beschraenkt .massnahme .wahl-zeile input[type=radio],
.raster .plan .haken-zeile input[type=checkbox] { width: 1.2rem; height: 1.2rem; margin: .1rem 0 0; flex: none; }
.raster .plan .haken-zeile { display: flex; gap: .6rem; align-items: flex-start; }
.raster .zusatz-wahl .fld.haken-feld { margin: .5rem 0 .3rem; font-size: .95rem; }
/* B43: der Kasten „Zuständig … Zollamt“ ist ein Hinweis, keine gewählte Karte (Orange heißt „gewählt“) und steht in
   einer Karte: wie die Hinweise in Karten (Punkt 10) Fläche und Kante links, Rahmen nur, wenn etwas fehlt */
.raster .zabox { border: 0; border-left: 4px solid var(--linie-stark); border-radius: var(--radius); background: var(--bg-wechsel); }
.raster .zabox.fehlt { border: 1px solid var(--fehler); border-left-width: 4px; background: var(--fehler-grund); }
/* B40: Positionskopf am Handy. Der Titel lief über fünf Zeilen neben „offen: …“, das Nummernfeld wurde zum Strich:
   das Nummernfeld behält seine Breite, der Stand steht in einer eigenen Zeile unter dem Titel */
.raster .pos-block .s-pos-kopf .s-pos-nr { flex: none; min-width: 1.9rem; }
@media (max-width: 480px) {
  .raster .pos-block .s-pos-kopf { flex-wrap: wrap; row-gap: .3rem; }
  .raster .pos-block .s-pos-kopf .pos-name { flex: 1 1 0; min-width: 0; }
  .raster .pos-block .s-pos-kopf .pos-stand { flex: 1 1 100%; margin-left: calc(1.9rem + .7rem); }
}
/* B46: Felder einer Reihe am Handy (Flex, unter 640 px) oben bündig. Unten bündig schob die Fahne „aus der Rechnung“
   unter der Postleitzahl das Feld Hausnummer daneben nach unten */
@media (max-width: 639.98px) {
  .reihe { align-items: flex-start; }
  .reihe > .fld { justify-content: flex-start; }
}
/* B41: Aufteilen am Handy. Pakete als Spalten passten nicht (Zahlen abgeschnitten, ab Paket 4 nichts zu sehen): unter
   640 px wird jede Position ein Block mit ihrem Namen als Kopf und einer Zeile je Paket (Beschriftung aus data-label),
   getrennt durch eine Linie wie die Zeilen der Tabelle (kein Kasten im Kasten) */
@media (max-width: 639.98px) {
  .raster .tabelle:has(> table.aufteilung) { overflow: visible; }
  table.pos.aufteilung, table.pos.aufteilung tbody, table.pos.aufteilung tr, table.pos.aufteilung td { display: block; width: 100%; }
  table.pos.aufteilung tr.spaltenkopf { display: none; }
  table.pos.aufteilung tr { border-bottom: 1px solid var(--linie); padding: .5rem 0 .6rem; }
  table.pos.aufteilung td { border: 0; padding: .25rem 0; }
  table.pos.aufteilung td.pos-name { font-weight: 600; padding-bottom: .4rem; }
  table.pos.aufteilung td[data-label] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; }
  table.pos.aufteilung td[data-label]::before { content: attr(data-label); color: var(--neben-b); font-size: .9rem; text-align: left; }
  table.aufteilung input { max-width: 8rem; width: 8rem; }
}
/* B34: „Zusammenfassen“ und „Getrennt lassen“ mit Abstand, nicht aneinander */
.vorschlag-zusammenlegen .aktionen { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
/* B77: „… für alle Positionen ohne Ursprungsland übernehmen“ unter dem Feld, über die ganze Breite der Reihe */
.reihe > .ursprung-alle { flex: 1 1 100%; grid-column: 1 / -1; margin: -.2rem 0 .6rem; }
.reihe > .ursprung-alle p { margin: 0 0 .35rem; }
/* Abnahmeprotokoll 16./17.10.2026, Paket P4 (Fahrzeug und Druckvorlagen).
   B38: Druckvorlage A.TR bzw. EUR.1 auf der Seite der Bestellung als ein Formular untereinander: Erklärung, Versatz mit
   Einheit „mm“ (Felder wie in der Strecke, .s-eingabe/.s-einheit), darunter ein Knopfpaar (.knopfreihe). Hebt die
   frühere Reihe „#atr-versatz“ (Text, Felder und Knöpfe nebeneinander) auf. */
:is(#atr-versatz, #eur1-versatz) { display: block; margin: .6rem 0; }
:is(#atr-versatz, #eur1-versatz) .reihe { max-width: 34rem; }
:is(#atr-versatz, #eur1-versatz) .s-eingabe input { width: 5rem; }
:is(#atr-mrn-fehlt, #eur1-mrn-fehlt) { margin-bottom: .8rem; }
/* Abnahmeprotokoll 16./17.10.2026, Paket P3 (Sperren, Sanktionen, Maßnahmen) */
/* B25: Sanktionsrückfrage am Handy. Die Spalte des Listeneintrags war rechts abgeschnitten. Unter 640 px steht jede
   Zeile untereinander: Zeilenkopf (Name, Anschrift …), darunter je Zelle ihr Spaltenkopf (data-label) und der Wert,
   getrennt durch eine Linie wie bei den Ratgeber-Tabellen (Sammelliste Punkt 27), ohne Rahmen je Zeile (kein Kasten im
   Kasten der Rückfrage). Leere Zellen der Empfängerspalte fallen weg. */
@media (max-width: 640px) {
  .sanktion .tabelle { overflow: visible; }
  table.vergleich, table.vergleich tbody, table.vergleich tr, table.vergleich th, table.vergleich td { display: block; width: 100%; }
  table.vergleich tr:first-child { display: none; }
  table.vergleich tr { border-top: 1px solid var(--linie); padding: .45rem 0; }
  table.vergleich th[scope=row], table.vergleich td { border: 0; padding: .1rem 0; white-space: normal; }
  table.vergleich td::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--neben-b); }
  table.vergleich td:empty { display: none; }
}
/* B39: Art der Genehmigung als Auswahlliste wie die Bedingungen (am Handy umbrechend statt im Auswahlfeld
   abgeschnitten). Nennt die gewählte Art die Behörde (BAFA), entfällt die Frage nach der Behörde; bei der Genehmigung
   eines anderen Mitgliedstaats bleibt nur ihr Name. */
.massnahme .gen-arten { border: 0; margin: 0; padding: 0; min-width: 0; }
.massnahme .gen-arten legend { padding: 0; margin-bottom: .2rem; }
.massnahme .gen-arten.fehlt { outline: 2px solid var(--fehler); outline-offset: 2px; border-radius: var(--radius); }
.massnahme .gen-felder:has(input[data-behoerde="bafa"]:checked) .gen-behoerde-wahl,
.massnahme .gen-felder:has(input[data-behoerde="andere"]:checked) .gen-behoerde-wahl > label,
.massnahme .gen-felder:has(input[data-behoerde="andere"]:checked) .gen-behoerde-wahl > select { display: none; }
.massnahme .gen-felder:has(input[data-behoerde="andere"]:checked) .gen-behoerde-wahl .gen-behoerde-text { display: block; }
.massnahme .gen-felder select { max-width: 100%; }

/* Abnahmeprotokoll 17.10.2026 (B44): die vorbelegte 0 bei DHL Paket mit Begründung unter dem Feld „bis zur deutschen
   Grenze“. Die Herkunftszeile (.herkunft, sonst „aus der Rechnung“) bricht hier um, statt am Handy abgeschnitten zu werden. */
#kosten-grenze-vorbelegt { white-space: normal; align-items: flex-start; }

/* Vorgang 68 (Unterlagen zur Ausfuhr): je Anmeldung Ausgangsvermerk, Versandbeleg, Abgleich als Liste von Tatsachen.
   Abweichungen fett, ohne Rot (kein Urteil über den Nachweis), übereinstimmend mit Haken. */
.unterlagen { margin: 1rem 0 0; padding: .8rem 0 0; border-top: 1px dashed var(--linie-stark); }
.unterlagen h4 { margin: 0 0 .4rem; font-size: 1rem; }
.unterlage { margin: .6rem 0; }
.unterlage form { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin: .3rem 0; }
.unterlage input[type="file"] { max-width: 100%; font-size: .9rem; }
.abgleich { list-style: none; padding: 0; margin: .3rem 0 .5rem; }
.abgleich li { padding: .15rem 0 .15rem 1.4rem; position: relative; }
.abgleich li::before { position: absolute; left: 0; width: 1.2rem; text-align: center; color: var(--neben); content: "–"; }
.abgleich li.gleich::before { content: "✓"; color: var(--ok); }
.abgleich li.abweichend { font-weight: 600; }
.abgleich li.abweichend::before { content: "≠"; color: var(--text); }
.ausfuhrliste form { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: flex-end; }
.ausfuhrliste select { min-width: 12rem; }

/* Bilder im Ratgebertext nie verzerren (Bernd 17.10.2026): die HTML-Maße geben nur das Seitenverhältnis vor,
   die Höhe folgt der Breite. Vorher galt height:auto nur unter .ratgeber, die Seiten nutzen aber .r-text. */
.r-text img { max-width: 100%; height: auto; }

/* Bildbausteine im Ratgebertext (Bernd 18.10.2026: „volle Textwüste … Schaubilder abwechselnd links und rechts oder
   quer darüber“; ratgeber.py, „::: bild rechts|links|quer“). Schaubilder aus werkzeuge/ratgeberbilder im Markenstil
   der Erklärvideos. Am Handy und auf schmalen Tablets steht jedes Bild voll breit zwischen den Absätzen; erst ab 50rem
   fließt der Text um die Bilder rechts und links, auch Listen. Neben einem Bild beginnt eine Tabelle oder ein Zitat erst
   rechts davon (eigener Block), der nächste Abschnitt erst darunter. */
.r-bild { margin: 1.5rem 0 1.7rem; }
.r-aufklappen { margin: 0.6rem 0 1.4rem; }
.r-aufklappen > summary { cursor: pointer; color: var(--akzent, inherit); font-weight: 600; }
.r-aufklappen[open] > summary { margin-bottom: 0.8rem; }
.r-bild a.bild-gross, .r-bild picture { display: block; }
.r-bild img { display: block; width: 100%; height: auto; border: 1px solid var(--linie); border-radius: calc(var(--radius) / 2); }
.r-bild figcaption { font-size: .9rem; color: var(--neben-b); margin-top: .5rem; line-height: 1.5; }
.r-bild.rechts, .r-bild.links { max-width: 24rem; margin-inline: auto; }
@media (min-width: 50rem) {
  .r-bild.rechts { float: right; width: 42%; margin: .35rem 0 1.2rem 1.75rem; }
  .r-bild.links { float: left; width: 42%; margin: .35rem 1.75rem 1.2rem 0; }
  .r-abschnitt:has(> .r-bild) { display: flow-root; }  /* das Bild bleibt in seinem Abschnitt */
  .r-abschnitt > .r-bild.quer { clear: both; }
  /* Bernd 18.10.2026 (MRN): Listen sind Fließtext wie Absätze, unter dem Bild wieder volle Breite. Neben einem Bild
     links stehen die Aufzählungszeichen innen, sonst lägen sie unter dem Bild. Zitat und Tabelle bleiben eigene Blöcke. */
  .r-abschnitt:has(> .r-bild.rechts, > .r-bild.links) > :is(blockquote, .tabelle) { display: flow-root; }
  .r-abschnitt:has(> .r-bild.links) > :is(ul, ol) { list-style-position: inside; padding-left: 0; }
}

/* Vorgang 76: Erklärvideos unter der Zusammenfassung (_videos.html). Eigene MP4, Player des Browsers. Das
   Seitenverhältnis steht fest (Vorgang 78, nichts springt): 2 / 1 wie die breite Fassung, nicht das des Vorschaubilds
   (1280x720) und nicht das der geladenen MP4; das Vorschaubild steht ohne Verzerrung im Player (contain). */
.r-video { margin: 1.6rem 0 1.8rem; padding: 1rem 1rem .8rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); }
.r-text .r-video-titel { font-size: 1.1rem; margin: 0 0 .6rem; }
.r-text .schaubild-titel { font-size: 1.1rem; margin: 0 0 .8rem; }
.r-video video { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; border-radius: calc(var(--radius) / 2); object-fit: contain; }
/* Bernd 18.10.2026: Unter 640 px (BREIT_AB in videos.py) liefert der Browser die Quadrat-Fassung, der Player ist dann
   quadratisch. Nichts abschneiden (contain von oben): das eigene Quadrat-Vorschaubild (video.js) passt genau, fehlt es,
   steht das breite ganz im Quadrat. */
@media (max-width: 639.98px) {
  .r-video video.r-video-quadrat { aspect-ratio: 1 / 1; }
}
.r-video figcaption { font-size: .9rem; color: var(--neben-b); margin-top: .5rem; }
/* Bernd 18.10.2026: unter jedem Video eine Trennlinie wie die übrigen der Seite, das Video ist vom folgenden Text abgesetzt */
hr.r-video-trenner { width: 80%; border: 0; border-top: 1px solid var(--linie); margin: 0 auto 1.8rem; }  /* wie .trenner (Bernd 23.10.2026: überall 80 %) */
/* Bernd 20.10.2026: Text zwischen zwei Videos (einleitung in videos.toml) */
.r-text .r-video-einleitung { margin: 0 0 1.4rem; }
/* Bernd 18.10.2026: Imagevideo auf Über uns direkt unter dem Seitenkopf, ruhig für sich, nicht breiter als der Text */
.uu-video-bereich { padding-block: 2.5rem 0; }
.r-video.uu-video { max-width: 56rem; margin: 0 auto; }
/* Bernd 18.10.2026: Druckvorlagen auf der Seite nach dem Kauf als Angebot (bestellung.html), solange nicht gekauft; der
   Hinweis „Nur zusammen mit einer Ausfuhranmeldung“ klein direkt unter dem Kaufknopf (Gedächtnis #618) */
.raster .karte.angebot, .karte.angebot { border: 2px solid var(--marke); }
.karte.angebot .nur-mit { margin-top: -.3rem; }
/* Rückfrage zum Upload in Stufen (Bernd 18.10.2026): verborgene Stufen bleiben verborgen */
.upload-annahme [hidden] { display: none; }
/* Bernd 18.10.2026: Druckvorlagen vor dem Kauf (zusammenfassung.html) wie nach dem Kauf als offenes Angebot mit Rahmen,
   Überschrift und Kaufknopf; im Warenkorb ohne den farbigen Rahmen */
.zusatz-karte { border: 1px solid var(--linie); border-radius: 12px; padding: .8rem .95rem; margin-bottom: .9rem; }
.zusatz-karte.angebot { border: 2px solid var(--marke); }
.zusatz-karte .zusatz-titel { font-size: 1rem; margin: 0 0 .4rem; }
.zusatz-karte .zusatz-titel .tipb { font-weight: 400; }
.zusatz-karte .nur-mit { margin-top: -.3rem; }
.zusatz-karte .btn { white-space: normal; max-width: 100%; text-align: center; }

/* Beispielrechnung auf der Startseite (Bernd 19.10.2026): eigener Abschnitt, Text mit Knopf links und mitlaufend, das
   Muster rechts in ganzer Höhe; am Handy untereinander, Bild in voller Breite, nichts abgeschnitten */
.muster-kachel .rahmen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3rem;align-items:start}
.muster-kachel .abschnitt-kopf{position:sticky;top:6rem;margin-bottom:0}
.beispiel-wege{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;margin-top:1.6rem}
.beispiel-mehr{font-weight:600}
.beispiel-bild{margin:0}
.beispiel-bild a{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--linie);background:var(--karte);box-shadow:0 18px 50px -18px var(--schatten);transition:transform .15s, box-shadow .15s}
.beispiel-bild a:hover{transform:translateY(-2px);box-shadow:0 22px 56px -16px var(--schatten)}
.beispiel-bild img{display:block;width:100%;height:auto}
.beispiel-bild figcaption{margin-top:.75rem;font-size:.85rem;color:var(--neben-b)}
@media (max-width: 900px){
  .muster-kachel .rahmen{grid-template-columns:1fr;gap:2rem}
  .muster-kachel .abschnitt-kopf{position:static}
}

/* Bernd 21.10.2026: „Zoll.Agency“ nie trennen (Silbentrennung in Überschriften am Handy) */
.wort-ganz { hyphens: none; white-space: nowrap; }

/* Bernd 22.10.2026: Werkzeug-Kasten im Ratgebertext (unter der Zusammenfassung), Knopf rechts; in der Seitenleiste
   bleibt er wie der Kasten zur Vorprüfung. Bernds Abnahme 22.10.2026 („Und warum ist dieses Feld weiß, die anderen Links
   oder Tools sind grau hinterlegt!“): grau wie die aufklappbaren Werkzeuge (.kum-klapp), ohne Schatten */
.r-text .werkzeug-kasten { display: grid; grid-template-columns: auto 1fr auto; gap: .3rem 1rem; align-items: center;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: none; padding: 1rem 1.2rem; margin: 1.2rem 0 2rem; }
.r-text .werkzeug-kasten .cta-ico { grid-row: span 2; margin: 0; }
.r-text .werkzeug-kasten .seite-cta-titel { margin: 0; color: var(--text); }
.r-text .werkzeug-kasten p:not(.seite-cta-titel) { margin: 0; grid-column: 2; color: var(--neben); font-size: .95rem; }
.r-text .werkzeug-kasten .knopf { grid-column: 3; grid-row: 1 / span 2; width: auto; white-space: nowrap; }
@media (max-width: 640px) {
  .r-text .werkzeug-kasten { grid-template-columns: auto 1fr; }
  .r-text .werkzeug-kasten .knopf { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
}

/* Bernd 22.10.2026: Kumulierungsprüfung aufklappbar auf /kumulierung („zuerst eingeklappt, grauer Kasten“) */
.r-text .kum-klapp { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); margin: 1.2rem 0 2rem; }
.r-text .kum-klapp > summary { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.2rem; cursor: pointer; list-style: none; }
.r-text .kum-klapp > summary::-webkit-details-marker { display: none; }
.r-text .kum-klapp > summary .cta-ico { margin: 0; }
.r-text .kum-klapp .seite-cta-titel { display: block; margin: 0; font-weight: 700; color: var(--text); }
.r-text .kum-klapp .kum-klapp-text { display: block; color: var(--neben); font-size: .95rem; }
.r-text .kum-klapp[open] > summary .knopf { display: none; }
.r-text .kum-klapp-innen { padding: 0 1.2rem 1.2rem; }
.r-text .kum-klapp .kum-ergebnis, .r-text .kum-klapp .kum-formular { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem; margin: 0 0 1rem; }
.r-text .kum-klapp .haken { display: flex; gap: .6rem; align-items: flex-start; padding: .3rem 0; cursor: pointer; }
.r-text .kum-klapp .haken input { width: 1.2rem; height: 1.2rem; flex: none; accent-color: var(--knopf); margin: .2rem 0 0; padding: 0; }
.r-text .kum-klapp fieldset { border: 0; padding: 0; margin: .8rem 0; min-width: 0; }
.r-text .kum-klapp select { max-width: 100%; }
@media (max-width: 640px) {
  .r-text .kum-klapp > summary { grid-template-columns: auto 1fr; }
  .r-text .kum-klapp > summary .knopf { grid-column: 1 / -1; justify-self: start; }
}
.r-text .kum-klapp h3 { margin-top: 0; }
.r-text .kum-klapp h4 { margin: 1rem 0 .3rem; }
.r-text .kum-klapp .fld .mut.klein { margin: .3rem 0 0; }
/* Bernds Abnahme 22.10.2026 (_werkzeug_box.html): Werkzeug mit Hochladen offen im Kasten, Kopf wie die Zeile eines
   aufklappbaren Kastens; der Rest klappt mit dem Knopf „ohne Rechnung“ oder nach dem Hochladen auf */
.r-text .werkzeug-box > .werkzeug-kopf { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1rem 1.2rem; }
.r-text .werkzeug-box > .werkzeug-kopf .cta-ico { margin: 0; }
.r-text .werkzeug-rest > summary { display: inline-flex; list-style: none; cursor: pointer; margin: 0 0 1rem; }
.r-text .werkzeug-rest > summary::-webkit-details-marker { display: none; }
.r-text .werkzeug-rest[open] > summary { display: none; }
.r-text .werkzeug-box .upload-teil { margin: .6rem 0; }
.r-text .werkzeug-box .von-hand { margin: .8rem 0 0; }
.r-text .werkzeug-box .wn-auswahl { margin: 0 0 1rem; }
/* Bernd 23.10.2026: Incoterms®-Wähler (_incoterms_waehlen.html); was nicht zu den bisherigen Antworten passt, blendet
   das Skript aus (hidden schlägt sonst .haken und .fld) */
.r-text .ic-klapp [hidden] { display: none !important; }
/* nach dem Austausch durch htmx scrollt die Seite zum Ergebnis, unter Kopf und Inhaltsleiste */
#incoterms-ergebnis-bereich { scroll-margin-top: 8rem; }
.r-text .ic-klausel { font-size: 1.15rem; margin: .2rem 0 .6rem; }
.r-text .ic-felder { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: .4rem 0 .6rem; }
.r-text .ic-felder dt { font-weight: 700; }
.r-text .ic-felder dd { margin: 0; }
.r-text .ic-kopierbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.r-text .ic-baustein code { font-size: 1rem; padding: .35rem .6rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); user-select: all; }
/* Bernd 23.10.2026: Kopierknopf aller Werkzeuge (strecke.js, data-kopieren), klein neben dem Text */
.kopieren-knopf { font-size: .85rem; padding: .25rem .7rem; min-height: 0; }
.kopieren-knopf[hidden] { display: none; }
.lieferbedingung-aus-waehler { margin-top: .5rem; }
.kum-kopierbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wn-kopieren { margin-left: .4rem; vertical-align: middle; }
.r-text .ic-hinweise { margin: .3rem 0 0; padding-left: 1.2rem; }
.r-text .ic-hinweise li { margin: .3rem 0; }
/* Bernd 22.10.2026: Werkzeug „Welcher Präferenznachweis gilt für mein Land?“ (_praeferenznachweis_pruefen.html) */
.r-text .pn-klapp input[name=wert] { width: 100%; max-width: 16rem; box-sizing: border-box; }
.r-text .pn-wortlaut-kopf { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: .8rem 0 .3rem; }
.r-text .pn-wortlaut-kopf .pn-sprache { margin: 0; }
.r-text .pn-wortlaut { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .95rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: .8rem 1rem; margin: 0 0 .6rem; user-select: all; }
.r-text .pn-selbst { border-left: 3px solid var(--knopf); padding-left: .8rem; margin-top: 1.2rem; }
.r-text .pn-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .4rem; }
/* Bernd 22.10.2026: Seite „Kostenlose Tools“ (werkzeuge.html): Karten wie /leistungen, der Knopf unten.
   SEO-Audit 23.10.2026, Maßnahme 6: je Werkzeug eine Zeile, links die Kachel, rechts H2 und Text; am Handy
   untereinander (H2, Kachel, Text) */
.werkzeuge-liste { list-style: none; padding: 0; margin: 0; }
.werkzeug-zeile { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); grid-template-areas: "kachel kopf" "kachel text"; grid-template-rows: auto 1fr; column-gap: 2.5rem; padding: 2.2rem 0; border-top: 1px solid var(--linie); }
.werkzeug-zeile:first-child { border-top: 0; padding-top: 0; }
.werkzeug-kachel { grid-area: kachel; align-self: start; }
.werkzeug-h2 { grid-area: kopf; font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: var(--h2-gewicht); margin: 0 0 .8rem; overflow-wrap: break-word; }
.werkzeug-text { grid-area: text; font-size: 1.05rem; line-height: 1.7; min-width: 0; overflow-wrap: break-word; }
.werkzeug-text p { margin: 0 0 .9rem; max-width: 44rem; }
.werkzeug-text a { color: var(--link-b); }
@media (max-width: 860px) {
  .werkzeug-zeile { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "kachel" "text"; grid-template-rows: auto; padding: 1.8rem 0; }
  .werkzeug-kachel { margin-bottom: 1.2rem; }
}
.werkzeuge-liste .fuer h3 a { color: inherit; text-decoration: none; }
.werkzeuge-liste .werkzeug-zweit { margin: -.2rem 0 .8rem; }
.werkzeuge-liste .werkzeug-knopf { margin-top: auto; align-self: flex-start; }
.werkzeuge-hinweis { margin: 1.5rem 0 0; }
/* Übergabe 22.10.2026 Punkt 3: Werkzeug Lieferantenerklärung (_lieferantenerklaerung.html); welche Teile zur gewählten
   Art gehören, ohne JavaScript über :has (ohne :has bleibt alles sichtbar) */
.le-formular input:not([type=checkbox]):not([type=radio]), .le-formular textarea { width: 100%; box-sizing: border-box; }
.le-formular legend h3 { margin: 0; }
.le-formular:has(input[name=art][value^="lang"]:checked) .le-nur-einzel,
.le-formular:has(input[name=art][value^="einzel"]:checked) .le-nur-lang,
.le-formular:has(input[name=art][value$="_ohne"]:checked) .le-nur-mit,
.le-formular:has(input[name=art][value$="_mit"]:checked) .le-nur-ohne,
.le-formular:not(:has(input[name=art][value="lang_mit"]:checked)) .le-nur-lang-mit,
.le-formular:not(:has(input[name=art][value="einzel_mit"]:checked)) .le-nur-einzel-mit { display: none; }
/* Bernd 23.10.2026: Erinnerung vor dem Ablauf nur bei der Langzeit-Lieferantenerklärung */
#le-rest:has(input[name=art][value^="einzel"]:checked) .le-erinnerung { display: none; }
.le-erinnerung input[type=email], .le-erinnerung input[type=date] { width: 100%; box-sizing: border-box; }
.le-tabelle { overflow-x: auto; }
.le-tabelle table { width: 100%; border-collapse: collapse; }
.le-tabelle th { text-align: left; font-size: .85rem; font-weight: 600; padding: .2rem .3rem; }
.le-tabelle td { padding: .15rem .3rem; }
.le-tabelle td input { min-width: 6rem; }
.le-tabelle td.le-gilt { text-align: center; width: 3rem; }
.le-tabelle td.le-gilt input { min-width: 0; width: 1.2rem; height: 1.2rem; accent-color: var(--knopf); }
.le-laender summary { cursor: pointer; margin: .3rem 0; }
.le-laender-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0 1rem; max-height: 22rem; overflow-y: auto; margin-bottom: .6rem; }
.le-zeitraum { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.le-zeitraum label { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 12rem; }
.le-rechnung > form { margin: .6rem 0; }
/* Nachbesserung 22.10.2026: Upload-Fläche der Startseite im Kasten; Warennummer-Vorschläge der Strecke je Ware */
.le-rechnung .upload-teil { margin: .6rem 0; }
.le-kandidaten { margin: 1rem 0 .4rem; }
.le-kandidaten h4 { margin: 0 0 .4rem; }
.le-kand { margin: .4rem 0 1rem; }
.le-kand-ware { margin: 0 0 .2rem; }
.le-mehr { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; }
.le-tabelle .le-gilt-text { display: none; }
@media (max-width: 640px) {  /* am Handy je Ware ein Block: Bezeichnung voll breit, die anderen Felder darunter */
  .le-tabelle thead { display: none; }
  .le-tabelle tr { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .5rem 0; border-bottom: 1px solid var(--linie); }
  .le-tabelle td { padding: 0; }
  .le-tabelle td:first-child { grid-column: 1 / -1; }
  .le-tabelle td input { min-width: 0; }
  .le-tabelle td.le-gilt { width: auto; text-align: left; align-self: center; }
  .le-tabelle td.le-gilt label { display: flex; gap: .4rem; align-items: center; }
  .le-tabelle .le-gilt-text { display: inline; font-size: .9rem; }
}
.r-text .le-klapp #le-vorlagen ul { margin: .4rem 0; padding-left: 1.2rem; }
/* Bernd 22.10.2026: Rechnung hochladen auf /zolltarifnummer-finden (wie das Werkzeug Lieferantenerklärung) */
.wr-rechnung > form { margin: .6rem 0; }
.wr-rechnung .upload-teil { margin: .6rem 0; }
.wr-position { margin: .4rem 0 1.2rem; padding-bottom: .8rem; border-bottom: 1px solid var(--linie); }
.wr-position:last-child { border-bottom: 0; padding-bottom: 0; }
.wr-ware { margin: 0 0 .3rem; }
.wr-unsicher { display: block; color: var(--neben); }
.wr-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
.kand-baum { display: inline-block; margin: .1rem 0 .3rem 2.4rem; font-size: .85rem; }
/* Vorgang 90 Punkt 2: Warennummernsuche auf /zolltarifnummer-finden (_warennummer_suchen.html), offen wie ein Werkzeug,
   Ergebnis als Baum Kapitel › Position › Unterposition mit eingerückten Stufen */
.r-text .wn-kasten { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.2rem 1.1rem; margin: 1.2rem 0 2rem; }
.r-text .wn-kopf { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.r-text .wn-kopf .cta-ico { margin: 0; }
.r-text .wn-kopf h2.seite-cta-titel { margin: 0; font-size: 1.1rem; color: var(--text); }
.r-text .wn-kopf-text { margin: .2rem 0 0; color: var(--neben); font-size: .95rem; }
.r-text .wn-formular { display: flex; gap: .6rem; margin: 1rem 0 .4rem; }
.r-text .wn-formular input { flex: 1; min-width: 0; }
.r-text .wn-formular .btn { flex: none; }
.r-text .wn-auswahl { margin: .4rem 0 0; font-size: .95rem; }
.r-text .wn-ergebnis { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 1rem 0 .6rem; }
.r-text .wn-ergebnis > p:first-child { margin-top: 0; }
.r-text .wn-zahl { font-weight: 700; }
.r-text .wn-doppelt p { margin: .2rem 0; }
.r-text .wn-kapitel { border-top: 1px solid var(--linie); padding: .8rem 0 .2rem; }
.r-text .wn-kapitel-kopf { margin: 0 0 .5rem; font-weight: 700; }
.r-text .wn-abschnitt { display: block; font-weight: 400; font-size: .85rem; color: var(--neben); }
.r-text .wn-kapitel-text { font-weight: 400; }
.r-text .wn-position { margin: 0 0 .8rem .2rem; }
.r-text .wn-position-kopf { margin: 0 0 .3rem; }
.r-text .wn-anzahl { white-space: nowrap; font-size: .95rem; }
.r-text .wn-baum { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--linie); }
.r-text .wn-knoten { margin: .25rem 0; padding: 0; }
.r-text .wn-zeile { display: block; }
.r-text .wn-blatt > .wn-zeile { background: var(--flaeche); border-radius: calc(var(--radius) / 2); padding: .25rem .5rem; }
.r-text .wn-beschreibung, .r-text .wn-stellen { display: block; font-size: .85rem; color: var(--neben); padding: .1rem .5rem 0; }
.r-text .wn-stellen-block { font-weight: 700; margin: .8rem 0 .4rem; }
.r-text .wn-quelle { margin: .6rem 0 0; }
.kn-nachschlagen { margin: .3rem 0 0; }
@media (max-width: 640px) {
  .r-text .wn-kasten { padding: .9rem .8rem 1rem; }
  .r-text .wn-baum { padding-left: .7rem; }
}
/* Präferenzkalkulation Phase 2 (Bernd 22.10.2026): je Vormaterial ein Rahmen, breit in zwei Zeilen (Beschreibung und
   Warennummer; Land, Wert, Nachweis), auf dem Handy untereinander */
fieldset.vm-zeile { border: 1px solid var(--linie); border-radius: 8px; padding: .25rem .9rem .5rem; margin: 0 0 .8rem; }
fieldset.vm-zeile legend { padding: 0 .3rem; }
fieldset.vm-zeile .vm-felder { display: grid; grid-template-columns: minmax(0, 1fr) 11rem 11rem; gap: 0 1rem;
  align-items: end; grid-template-areas: "b b k" "s s s" "l w n"; }
fieldset.vm-zeile .fld { margin: .4rem 0; min-width: 0; }
fieldset.vm-zeile .vm-beschreibung { grid-area: b; }
fieldset.vm-zeile .vm-warennummer { grid-area: k; }
fieldset.vm-zeile .vm-land { grid-area: l; }
fieldset.vm-zeile .vm-wert { grid-area: w; }
fieldset.vm-zeile .vm-nachweis { grid-area: n; }
fieldset.vm-zeile select, fieldset.vm-zeile input { width: 100%; }
@media (max-width: 640px) {
  fieldset.vm-zeile .vm-felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "b b" "l l" "k w" "s s" "n n"; }
}
.praeferenz-liste { list-style: none; padding: 0; margin: .75rem 0; border-top: 1px solid var(--linie); }
.werkzeug-rahmen { display: contents; }  /* Messrahmen der Webanalyse („Werkzeug“), ohne eigene Box */
.praeferenz-liste li { margin: 0; padding: .55rem 0; border-bottom: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; }
.praeferenz-liste li::before { content: ""; align-self: center; width: 0; height: 0; border-left: .55em solid var(--text-b); border-top: .38em solid transparent; border-bottom: .38em solid transparent; margin-right: .2rem; }
.praeferenz-liste li a { font-weight: 600; }

/* Bernds Abnahme 22.10.2026: Präferenzkalkulation als eine Seite für die ganze Bestellung. Positionen untereinander
   zum Aufklappen wie in der Strecke (Pfeil, Nummernfeld, Name, Warennummer, Stand); der Kopf der offenen Position bleibt
   beim Scrollen unter dem Seitenkopf stehen (Kopf der Strecke 4rem, am iPhone mit Statusleiste) */
.pk-positionen { margin: 1.2rem 0; }
.pk-pos { border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); margin: .6rem 0; }
.pk-pos > summary.pos-kopf { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem;
  padding: .8rem 1rem; cursor: pointer; border-radius: 12px; background: var(--karte); }
.pk-pos > summary::-webkit-details-marker { display: none; }
.pk-pos > summary:hover { background: var(--bg-wechsel); }
.pk-pos > summary .pfeil { position: relative; width: 1.6rem; height: 1.6rem; font-size: 0; color: transparent; flex: none; }
.pk-pos > summary .pfeil::before { content: ""; position: absolute; left: .3rem; top: 50%; transform: translateY(-50%);
  border-style: solid; border-width: .7rem 0 .7rem 1rem; border-color: transparent transparent transparent var(--knopf);
  transition: transform .15s; }
.pk-pos > summary:not(.pos-offen) .pfeil::before { border-left-color: var(--dunkel); }
.pk-pos[open] > summary .pfeil::before { transform: translateY(-50%) rotate(90deg); }
.pk-pos > summary .s-pos-nr { flex: none; }
.pk-pos > summary:not(.pos-offen) .s-pos-nr { background: var(--dunkel); color: var(--auf-dunkel); }
.pk-pos > summary .pos-stand.offen { color: var(--fehler); }
.pk-pos > summary .pos-nachweis { color: var(--neben-b); font-weight: 400; }
.pk-pos[open] > summary { position: sticky; top: calc(4rem + 2.6rem + env(safe-area-inset-top, 0px)); z-index: 20;
  border-bottom: 1px solid var(--linie); border-radius: 12px 12px 0 0; box-shadow: 0 6px 12px -8px var(--schatten); }
.pk-inhalt { padding: .4rem 1rem 1rem; }
/* Bernds Abnahme 22.10.2026 abends: Leiste mit „Zurück zur Bestellung“, bleibt unter dem Seitenkopf stehen; der Kopf
   der offenen Position steht darunter (2.6rem). Positionen ohne Vormaterial ausgegraut, aufnehmbar */
.pk-leiste { position: sticky; top: calc(4rem + env(safe-area-inset-top, 0px)); z-index: 21; height: 2.6rem;
  display: flex; align-items: center; gap: 1rem; background: var(--strecke-bg, var(--bg)); border-bottom: 1px solid var(--linie);
  margin: 0 0 .6rem; }
.pk-leiste .pk-zurueck { font-weight: 600; white-space: nowrap; }
.pk-leiste .pk-zurueck::before { content: ""; display: inline-block; width: 0; height: 0; margin-right: .45rem;
  border-right: .5em solid currentColor; border-top: .35em solid transparent; border-bottom: .35em solid transparent; }
.pk-leiste-titel { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pk-pos { scroll-margin-top: calc(4rem + 2.6rem + .6rem); }
#praeferenz-gespeichert { scroll-margin-top: calc(4rem + 2.6rem + 1rem); }
.pk-pos.pk-ohne { background: var(--bg-wechsel); border-style: dashed; color: var(--neben-b); }
.pk-pos.pk-ohne > .pos-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem; padding: .8rem 1rem .2rem; }
.pk-pos.pk-ohne .pfeil { width: 1.6rem; flex: none; }
.pk-pos.pk-ohne .s-pos-nr { flex: none; background: var(--linie); color: var(--neben-b); }
.pk-pos.pk-ohne .pos-stand { font-weight: 600; }
.pk-aufnehmen { padding: 0 1rem .8rem calc(1rem + 1.6rem + .8rem); }
.pk-aufnehmen p { margin: .3rem 0; }
.pk-pos > summary .pos-gespeichert { color: var(--ok); }
.pk-pos > summary .pos-anteil { font-weight: 400; }
.pk-check.pk-ohne { background: var(--bg-wechsel); border-style: dashed; color: var(--neben-b); }
.pk-check.pk-ohne a { color: var(--neben-b); }
.pk-stand.ohne { color: var(--neben-b); }
.pk-staende { list-style: none; padding: 0; margin: .4rem 0 .6rem; }
.pk-staende li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .2rem 1rem; padding: .45rem 0;
  border-bottom: 1px solid var(--linie); }
.pk-staende li a { font-weight: 600; white-space: nowrap; }
.pk-staende li a::before { content: "↓ "; }
.praeferenz-liste li.ohne, .praeferenz-liste li.ohne a { color: var(--neben-b); }
.praeferenz-liste li.ohne::before { border-left-color: var(--linie); }
.pk-inhalt .pk-teil { margin: 1.2rem 0; padding-top: 1rem; border-top: 1px solid var(--linie); }
.pk-inhalt .pk-teil h3 { font-size: 1.02rem; margin: 0 0 .4rem; }
.pk-inhalt .pk-ware { margin: .6rem 0 0; }
.pk-inhalt .pk-ware th { width: 11rem; }
.pk-wortlaut { margin: .4rem 0; padding: .6rem .9rem; border-left: 3px solid var(--knopf); background: var(--bg-wechsel); }
.pk-regel + .pk-regel { margin-top: .8rem; }
.pk-regel-ergebnis { margin: .6rem 0; }
.pk-schluss { margin: 1.2rem 0 .4rem; }
/* Übersicht „Was noch fehlt“: je Position eine Checkliste, ✓ erledigt, ○ offen */
.pk-check-liste { list-style: none; padding: 0; margin: .4rem 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .8rem; }
.pk-check { border: 1px solid var(--linie); border-radius: 10px; padding: .6rem .8rem; }
.pk-check-kopf { margin: 0 0 .3rem; display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.pk-check-kopf a { font-weight: 600; }
.pk-stand { font-size: .85rem; font-weight: 600; }
.pk-stand.fertig { color: var(--ok); }
.pk-stand.fertig::before { content: "✓ "; }
.pk-stand.offen { color: var(--fehler); }
.pk-haken { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.pk-haken li { padding-left: 1.3rem; position: relative; margin: .15rem 0; }
.pk-haken li::before { position: absolute; left: 0; }
.pk-haken li.ja::before { content: "✓"; color: var(--ok); font-weight: 700; }
.pk-haken li.nein::before, .pk-haken li.leer::before { content: "○"; color: var(--neben-b); }
.pk-nachweise ul { margin: .2rem 0 .8rem; padding-left: 1.2rem; }
.pk-nachweise li { margin: .2rem 0; }
/* Warennummernsuche am Vormaterial: unter Beschreibung und Warennummer, Treffer über die ganze Breite */
fieldset.vm-zeile .vm-suche { grid-area: s; margin: 0 0 .2rem; }
fieldset.vm-zeile .vm-suche > summary { cursor: pointer; color: var(--link); text-align: right; list-style: none; }
fieldset.vm-zeile .vm-suche > summary::-webkit-details-marker { display: none; }
fieldset.vm-zeile .vm-suche > summary::before { content: "⌕ "; }
fieldset.vm-zeile .vm-suche[open] > summary { text-align: left; font-weight: 600; }
.vm-suche-kasten { border: 1px solid var(--linie); border-radius: 8px; padding: .6rem .8rem; margin-top: .3rem; background: var(--bg-wechsel); }
.vm-suche-feld { display: flex; gap: .5rem; }
.vm-suche-feld[hidden] { display: none; }
.vm-suche-feld input { flex: 1 1 auto; }
.vm-suche-feld .btn { flex: none; width: auto; }
.vm-suche-treffer { max-height: 22rem; overflow: auto; margin-top: .4rem; }
.vm-suche-treffer .wn-baum { padding-left: 1rem; margin: .2rem 0; }
.vm-suche-treffer .wn-position-kopf, .vm-suche-treffer .wn-zeile { font-size: .9rem; }
.vm-suche-treffer .wn-kapitel { margin-top: .7rem; }
.vm-suche-treffer .wn-nehmen { font-size: .85rem; margin-left: .3rem; white-space: nowrap; }
@media (max-width: 640px) {
  .pk-inhalt { padding: .3rem .7rem .8rem; }
  .pk-pos > summary.pos-kopf { padding: .7rem .7rem; gap: .2rem .5rem; }
  .pk-pos > summary .pos-name { flex: 1 1 0; min-width: 0; }
  .pk-pos > summary .pos-kn { flex: 1 1 100%; margin-left: calc(1.6rem + 1.9rem + 1rem); }
  .pk-pos > summary .pos-stand { flex: 1 1 100%; margin-left: calc(1.6rem + 1.9rem + 1rem); }
  .pk-pos.pk-ohne > .pos-kopf { padding: .7rem .7rem .2rem; gap: .2rem .5rem; }
  .pk-pos.pk-ohne .pos-name { flex: 1 1 0; min-width: 0; }
  .pk-pos.pk-ohne .pos-kn, .pk-pos.pk-ohne .pos-stand { flex: 1 1 100%; margin-left: calc(1.6rem + 1.9rem + 1rem); }
  .pk-aufnehmen { padding: 0 .7rem .7rem; }
  .pk-inhalt .pk-ware th { width: auto; }
  fieldset.vm-zeile .vm-suche > summary { text-align: left; }
}

/* Bernd 23.10.2026: Werkzeug „Handelsrechnung oder Proformarechnung erstellen“ über der Musterrechnung
   (_rechnung_werkzeug.html). Felder im Raster, nicht sicher Gelesenes gelb markiert, Befunde als Tabelle */
.rw-rahmen { margin: 1.5rem 0 0; }
/* Bernd 23.10.2026: Linie und eigene Überschrift zwischen Werkzeug und Muster */
.mr-trenner { border: 0; border-top: 1px solid var(--linie); margin: 3rem 0 2rem; }
.mr-beispiel { margin-bottom: 1.5rem; }
.mr-beispiel p { margin: 0; }
.mr-beispiel .knopf { margin: 1rem 0 0; }  /* Bernd 24.10.2026: Knopf direkt unter dem Einleitungssatz */
/* Linie vor „Vorlage zum Ausfüllen“: über ihr Abstand unter dem Beispiel und Innenabstand des Artikels (zusammen 4rem),
   so steht sie mit etwa gleichem Abstand zwischen Knopf und Überschrift */
.r-text.mr > hr.r-abschnitt-trenner:first-child { margin-top: -2rem; }
.rw-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0 1rem; }
.rw-raster .rw-breit { grid-column: 1 / -1; }
.r-text .rw-feld input, .r-text .rw-feld select, .r-text #rw-vermerke input { width: 100%; max-width: none; box-sizing: border-box; }
.rw-unsicher { color: var(--neben-b); background: var(--warn-grund); border-radius: 3px; padding: 0 .3rem; }
.rw-feld .rw-unsicher { display: inline-block; margin-top: .2rem; }
.rw-markiert input, td.rw-markiert input { background: var(--warn-grund); border-color: var(--warn); }
.rw-tabelle td input { min-width: 5.5rem; }
.rw-tabelle td input.rw-beschreibung { min-width: 14rem; }
.rw-tabelle td input.rw-warennummer, .rw-tabelle td input.rw-ursprung, .rw-tabelle td input.rw-gesamtpreis { min-width: 7.5rem; }
.rw-befunde th[scope="row"] { font-weight: 400; text-align: left; }
.rw-befunde tr td, .rw-befunde tr th { border-bottom: 1px solid var(--linie); padding: .35rem .4rem; vertical-align: top; }
.rw-befunde tr.rw-z-fehlt td:nth-child(2), .rw-befunde tr.rw-z-teil td:nth-child(2) { color: var(--fehler); font-weight: 600; }
.rw-befunde tr.rw-z-unsicher td:nth-child(2), .rw-befunde tr.rw-z-umsatzsteuer td:nth-child(2) { color: var(--warn); font-weight: 600; }
.rw-befunde tr.rw-z-da td:nth-child(2) { color: var(--neben-b); }
.rw-verweis { display: block; margin-top: .15rem; }
.rw-liefer { margin: .6rem 0 0; }
.rw-liefer > summary { cursor: pointer; font-weight: 600; }
.rw-fehlend ul { margin: .3rem 0 .6rem 1.2rem; }

/* Bewertung der kostenlosen Werkzeuge (Bernd 23.10.2026, _bewertung.html): eine Zeile unter dem Ergebnis, fünf Sterne
   als Radiogruppe. Die Sterne sind Zeichen aus CSS (::before), damit Bildschirmleser nur „4 von 5 Sternen“ lesen. Beim
   Zeigen füllen sich die Sterne bis zum Zeiger, gewählt bis zur Wahl. Mit JavaScript genügt ein Klick: der Knopf
   „Bewerten“ erscheint nur, wenn die Tastatur in der Gruppe ist (strecke.js schickt nur beim Klicken). */
.bewertung { margin: 1.2rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--linie); }
.bewertung fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.bewertung legend { float: left; padding: 0; margin: 0 .4rem 0 0; font-weight: 600; color: var(--text); }
.bewertung .sterne { display: inline-flex; gap: .1rem; }
.bewertung .stern { position: relative; cursor: pointer; line-height: 1; padding: .2rem; border-radius: 4px; }
.bewertung .stern input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.bewertung .stern::before { content: "★"; font-size: 1.7rem; color: var(--neben); }
.bewertung .sterne:has(input:checked) .stern::before,
.bewertung .sterne:hover .stern::before { color: var(--link); }
.bewertung .stern:has(input:checked) ~ .stern::before,
.bewertung .sterne:hover .stern:hover ~ .stern::before { color: var(--neben); }
.bewertung .stern:has(input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 1px; }
.mit-js .bewertung-sterne:not(:has(:focus-visible)) .bewertung-senden { display: none; }
.mit-js [data-bewertung-nach]:not(.da) { display: none; }
.bewertung-danke { margin: 0 0 .5rem; }
/* Schnitt und Zahl ab der Schwelle: im Titel des Werkzeugs und auf /werkzeuge */
.bewertung-stand { display: block; margin-top: .25rem; }
.bewertung-stand .stand-sterne::before { content: "★"; color: var(--link); margin-right: .2rem; }
.bewertung-stand .bewertung-hinweis { display: block; }

/* Bernd 23.10.2026: „Kostenloses Tool“ über dem Titel jedes Werkzeug-Kastens, als Dachzeile wie in den Seitenköpfen
   (Großbuchstaben in der Linkfarbe, kurzer Strich in der Markenfarbe davor); kein Rahmen, keine eigene Fläche */
.werkzeug-dach { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--link-b); }
.werkzeug-dach::before { content: ""; flex: 0 0 1.2rem; height: 2px; background: var(--marke); }
/* Linie zwischen Zusammenfassung, Werkzeug und Video */
hr.r-abschnitt-trenner { width: 80%; border: 0; border-top: 1px solid var(--linie); margin: 1.8rem auto; }  /* wie .trenner */

/* Bernd 24.10.2026: Titel eines Ergebnisses beim Sprung (Sprungmarke, strecke.js ergebnisZeigen) unter dem festen Kopf
   (html scroll-padding-top: 5.5rem), am Handy auch unter der Leiste „Auf dieser Seite“; die Sprungmarken zeigen auf den
   Abschnitt, dessen Titel einen Innenabstand tiefer steht. Der Fokus auf dem Titel (tabindex=-1) ohne Rahmen, er ist
   kein Bedienelement */
[data-ergebnis-titel] { scroll-margin-top: .5rem; }
[data-ergebnis-titel]:focus { outline: none; }
@media (max-width: 1099px) { [data-ergebnis-titel] { scroll-margin-top: 3rem; } .kum-ergebnis, .wn-ergebnis { scroll-margin-top: 2rem; } }

/* Bernd 24.10.2026: nach „Ergebnis“ Abstand, die Antwortzeile deutlich abgesetzt (Balken links: grün ja, rot nein,
   orange bedingt; sonst in der Linkfarbe) */
.kum-ergebnis > h3 { margin-bottom: .9rem; }
.kum-ergebnis > h3 + p { margin: 0 0 1rem; padding: .35rem 0 .35rem .9rem; border-left: 4px solid var(--link); font-size: 1.05rem; }
.kum-ergebnis[data-werkzeug-ergebnis^="ja"] > h3 + p { border-left-color: var(--ok); }
.kum-ergebnis[data-werkzeug-ergebnis^="nein"] > h3 + p, .kum-ergebnis[data-werkzeug-ergebnis="nachweis_fehlt"] > h3 + p { border-left-color: var(--fehler); }
.kum-ergebnis[data-werkzeug-ergebnis^="bedingt"] > h3 + p, .kum-ergebnis[data-werkzeug-ergebnis^="nur_minimal"] > h3 + p { border-left-color: var(--warn); }