/* Prototyp Version 2 der Produktseite MGA40: Gestaltung wie Version 1 (Variante 3b, 25.09.2026), dazu die
   Bausteine des Angebots unten unter „Version 2“.
   Markenfarben entschieden am 25.09.2026: Rot #B5121B, Grau #6A6A6A ([09] 7.2, Zusatz zu 28); alles andere abgeleitet.
   Eine Datei, kein Stil im Dokument, kein Skript: so lässt sich der Prototyp später nach seite/ übertragen ([06] 10.2).
   Die Prüfleiste oben und die Prüfansicht gehören nur zum Prototyp. */

@font-face { font-family: "Source Serif 4"; src: url("/schriften/source-serif-4-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/schriften/source-serif-4-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/schriften/source-sans-3-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/schriften/source-sans-3-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --rot: #B5121B;          /* Markenrot: Hauptknopf, Zeichen, Strich über Zwischentiteln, Linkunterstrich; nie an Beträgen */
  --rot-tief: #9A0F17;     /* Hover, Fokus */
  --rot-zart: #F7E9EA;     /* Hover des Randknopfs */
  --grau: #6A6A6A;         /* Markengrau: Logo, Nebentext (5,4 : 1 auf Weiß) */
  --text: #494949;         /* Fließtext, dunkle Fläche (9 : 1 auf Weiß) */
  --weiss: #FFFFFF;
  --papier: #F7F7F7;       /* Grundfläche */
  --flaeche: #EDEDED;      /* Kästen, Zeichenfelder */
  --linie: #DADADA;
  --marker: #E4E4E4;       /* markierte Zeile im Beleg */
  --auf-dunkel: #F3F3F3;
  --auf-dunkel-leise: #C4C4C4;
  --pruef: #FFF3C4;        /* nur Prototyp: Prüfleiste und neue Sätze */
  --pruef-rand: #B8932A;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--papier); color: var(--text); font: 400 19px/1.55 var(--sans); overflow-wrap: break-word; }
img, svg { max-width: 100%; }
a { color: var(--text); text-decoration-color: var(--rot); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--rot-tief); }
:focus-visible { outline: 3px solid var(--rot-tief); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.18; color: var(--text); }
h1 { font: 600 clamp(30px, 3.4vw, 48px)/1.12 var(--serif); letter-spacing: -.01em; margin-bottom: 18px; }
h2 { font: 600 clamp(26px, 2.8vw, 38px)/1.15 var(--serif); margin-bottom: 16px; }
h3 { font: 600 21px/1.3 var(--sans); margin: 0 0 8px; }
h4 { font: 600 19px/1.3 var(--sans); margin: 0 0 6px; }
p { margin: 0 0 1em; max-width: 68ch; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .35em; max-width: 68ch; }
.breite { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 16px; top: -80px; background: var(--text); color: #fff; padding: 12px 16px; z-index: 50; }
.sprung:focus { top: 12px; color: #fff; }
.nw { white-space: nowrap; }
.klein, .quelle { font-size: 16px; color: var(--grau); }
.quelle a { color: var(--grau); }
.mitte { text-align: center; margin-left: auto; margin-right: auto; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-height: 52px; padding: 12px 26px; font: 600 18px/1.2 var(--sans); text-decoration: none; border-radius: 999px; border: 2px solid transparent; cursor: pointer; }
.knopf.rot { background: var(--rot); color: #fff; }
.knopf.rot:hover { background: var(--rot-tief); color: #fff; }
.knopf.rand { background: var(--weiss); color: var(--text); border-color: var(--text); }
.knopf.rand:hover { background: var(--rot-zart); color: var(--text); }
.knopf.hell { color: #fff; border-color: rgba(255,255,255,.8); }
.knopf.klein-k { min-height: 44px; padding: 8px 18px; font-size: 16px; }
.aktion { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.weiter { font-weight: 600; margin-top: 12px; }

/* Prüfleiste und Prüfansicht (nur Prototyp) */
.pruefschalter { position: absolute; opacity: 0; pointer-events: none; }
.pruefleiste { background: var(--pruef); border-bottom: 1px dashed var(--pruef-rand); font-size: 16px; }
.fuss ~ .pruefleiste { border-bottom: 0; border-top: 1px dashed var(--pruef-rand); }
.pruefleiste .breite { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
.pruefleiste b { font-weight: 600; }
.pruefleiste label { cursor: pointer; display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.pruefleiste label::before { content: ""; width: 16px; height: 16px; border: 2px solid var(--text); border-radius: 3px; background: #fff; }
.pruefschalter:checked ~ .pruefleiste label::before { background: var(--text); box-shadow: inset 0 0 0 3px #fff; }
.pruefschalter:focus-visible ~ .pruefleiste label { outline: 3px solid var(--rot-tief); outline-offset: 2px; }
.pruefleiste a { color: var(--text); }
.q { display: none; }
.pruefschalter:checked ~ main .neu { background: var(--pruef); box-shadow: 0 0 0 3px var(--pruef); border-radius: 2px; }
.pruefschalter:checked ~ main .q { display: inline-block; margin-left: 6px; font: 600 14px/1.3 var(--sans); color: #6B5310; border: 1px solid var(--pruef-rand); border-radius: 3px; padding: 0 5px; vertical-align: 2px; background: #fff; }
.ph { font-size: 16px; color: var(--text); background: #EFEFEF; border: 1.5px dashed #7A7A7A; padding: 1px 6px; border-radius: 3px; }
.ph-block { font-size: 16px; color: var(--text); background: #EFEFEF; border: 1.5px dashed #7A7A7A; padding: 10px 14px; border-radius: 6px; max-width: 68ch; }
.bedingt { border: 1.5px dashed #7A7A7A; border-radius: 8px; padding: 14px 16px 4px; margin: 0 0 1em; }
.bedingt-label { font-size: 16px; font-weight: 600; color: var(--grau); margin: 0 0 6px; }
.schluss .ph, .dunkel .ph { color: var(--auf-dunkel); background: transparent; border-color: #A2A2A2; }

/* Kopf */
.kopf { background: var(--weiss); border-top: 4px solid var(--rot); border-bottom: 1px solid var(--linie); position: relative; z-index: 30; }
.kopf .breite { display: flex; align-items: center; gap: 16px 22px; min-height: 76px; }
.kopf-logo img { display: block; height: 40px; width: auto; }
.nav-voll { flex: 1; }
.nav-voll > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0 18px; }
.nav-voll > ul > li { position: relative; margin: 0; }
.nav-voll a { display: inline-flex; align-items: center; gap: 6px; min-height: 76px; white-space: nowrap; text-decoration: none; font-weight: 600; font-size: 17px; color: var(--text); border-bottom: 3px solid transparent; }
.nav-voll > ul > li > a:hover, .nav-voll .aktiv > a { border-bottom-color: var(--rot); color: var(--text); }
.mit-unter > a::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); }
.unter { display: none; list-style: none; position: absolute; top: 100%; left: -18px; min-width: 280px; margin: 0; padding: 8px 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; box-shadow: 0 18px 40px rgba(40,40,40,.14); }
.mit-unter:hover > .unter, .mit-unter:focus-within > .unter { display: block; }
.unter li { margin: 0; max-width: none; }
.unter a { min-height: 44px; padding: 0 18px; width: 100%; border: 0; font-weight: 400; }
.unter a:hover, .unter a[aria-current="page"] { background: var(--papier); color: var(--text); }
.unter a[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--rot); }
.kopf-kontakt { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.kopf-telefon { font-size: 16px; color: var(--grau); white-space: nowrap; text-decoration: none; }
.menue { display: none; }

/* Seitenkopf */
.kopfbereich { background: linear-gradient(180deg, var(--weiss) 0, #E6E6E6 100%); padding: 40px 0 64px; }
.kopfbereich .raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.kopfbereich.schmal .raster { grid-template-columns: minmax(0, 1fr); }
.kopfbereich .lead { font-size: 21px; line-height: 1.5; }
.kopf-logo-gross { display: block; width: min(300px, 70%); height: auto; margin: 0 0 22px -4px; }
.fuer { margin-top: 18px; font-size: 17px; color: var(--grau); }
.pfad ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 16px; color: var(--grau); }
.pfad li { margin: 0; display: flex; gap: 10px; align-items: center; }
.pfad li + li::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--grau); border-top: 1.5px solid var(--grau); transform: rotate(45deg); }
.pfad a { color: var(--grau); text-decoration: none; }
.pfad a:hover, .pfad a:focus-visible { color: var(--text); text-decoration: underline; text-decoration-color: var(--rot); }
.kicker { display: flex; align-items: center; gap: 10px; font: 600 16px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--grau); margin: 0 0 12px; }
.kicker::before { content: ""; width: 28px; height: 3px; background: var(--rot); flex: none; }
.mitte.kicker, .kopf-mitte .kicker { justify-content: center; }
.kopf-bild { display: flex; justify-content: center; }
.kopf-bild .symbol { width: 168px; height: 168px; color: var(--rot); background: var(--weiss); border-radius: 36px; padding: 34px; box-shadow: 0 24px 60px rgba(40,40,40,.14); }

/* Abschnitte */
.abschnitt { padding: 72px 0; }
.abschnitt.weiss { background: var(--weiss); }
.abschnitt + .abschnitt:not(.weiss) { padding-top: 72px; }
.einleitung { max-width: 760px; margin: 0 0 32px; }
.einleitung.mitte { text-align: center; margin-left: auto; margin-right: auto; }
.einleitung.mitte p { margin-left: auto; margin-right: auto; }
.einleitung p { font-size: 20px; }
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.zwei.breit-links { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* Karten und Bereiche */
.karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 28px 26px 24px; display: flex; flex-direction: column; margin: 0; max-width: none; }
.abschnitt.weiss .karte { background: var(--papier); }
.karte .nr { font: 600 44px/1 var(--serif); color: var(--rot); margin-bottom: 14px; }
.karte h3 { font-size: 22px; }
.karte p { font-size: 18px; }
.karte > :last-child { margin-bottom: 0; }
.karte > .symbol { margin-bottom: 14px; }
.karte .mehr { margin-top: auto; padding-top: 8px; font-weight: 600; }
.bereiche { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.bereich { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 22px 22px 20px; display: flex; flex-direction: column; margin: 0; max-width: none; position: relative; }
.abschnitt.weiss .bereich { background: var(--papier); }
.bereich h3 { font-size: 20px; margin-top: 12px; }
.bereich h3 a { text-decoration: none; color: var(--text); }
.bereich h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.bereich:has(a):hover { border-color: var(--text); }
.bereich p { font-size: 17px; margin-bottom: 12px; }
.bereich .status { margin-top: auto; }
.symbol { width: 48px; height: 48px; color: var(--rot); background: var(--flaeche); border-radius: 12px; padding: 10px; flex: none; }
.abschnitt.weiss .bereich .symbol, .karte .symbol { background: var(--weiss); }
.abschnitt:not(.weiss) .karte .symbol { background: var(--flaeche); }

/* Statusmarke L3 (Form und Wort, ohne Farbe als einziges Merkmal) */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--text); }
.status::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--text); flex: none; }
.status.voll::before { background: var(--text); }
.status.halb::before { background: linear-gradient(90deg, var(--text) 50%, transparent 50%); }
.status.leer::before { background: transparent; }
.legende { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 28px; }
.legende li { margin: 0; }

/* Funktionslisten */
.haken { list-style: none; padding: 0; margin: 0 0 1em; }
.haken li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.haken li::before { content: ""; position: absolute; left: 4px; top: .35em; width: 7px; height: 13px; border-right: 2.5px solid var(--rot); border-bottom: 2.5px solid var(--rot); transform: rotate(40deg); }
.funktionsliste { list-style: none; padding: 0; margin: 0 0 1em; border-top: 1px solid var(--linie); }
.funktionsliste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--linie); margin: 0; max-width: none; }
.funktionsliste li .status { justify-self: end; }
.bereich-block { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 24px; padding: 40px 0; border-top: 1px solid var(--linie); }
.bereich-block:first-of-type { border-top: 0; }
.bereich-block h2 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 8px; }

/* Beleg (Ausschnitt [EG] 4.3, wie Variante 3b) */
.beleg { background: var(--weiss); border-radius: 8px; box-shadow: 0 24px 60px rgba(40,40,40,.2); font-variant-numeric: tabular-nums lining-nums; max-width: 470px; margin: 0; }
.beleg.schraeg { transform: rotate(1.5deg); margin-left: auto; }
.beleg-kopf { padding: 18px 22px 10px; border-bottom: 1px solid var(--linie); }
.beleg-kopf small { font-weight: 600; color: var(--grau); font-size: 16px; display: block; }
.beleg-kopf b { display: block; font: 600 22px/1.25 var(--serif); }
.beleg table { width: 100%; border-collapse: collapse; font-size: 17px; }
.beleg th, .beleg td { padding: 7px 22px; font-weight: 400; text-align: left; border-bottom: 1px solid #EDEDED; }
.beleg td { text-align: right; white-space: nowrap; }
.beleg tr.mark > * { background: var(--marker); font-weight: 600; }
.beleg tr.mark th { box-shadow: inset 4px 0 0 var(--text); }
.beleg tr.summe > * { font-weight: 600; border-top: 1.5px solid var(--text); }
.beleg tr.brutto > * { font-weight: 600; border-top: 1.5px solid var(--text); border-bottom: 4px double var(--text); }
.beleg .erkl { padding: 12px 22px 16px; font-size: 16px; color: var(--grau); margin: 0; }
.beleg .erkl b { color: var(--text); }
.beleg-unter { font-size: 16px; color: var(--grau); margin: 14px 0 0 auto; max-width: 470px; text-align: right; }
.beleg.muster { max-width: none; box-shadow: 0 18px 44px rgba(40,40,40,.14); border: 1px solid var(--linie); }
.beleg-daten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; font-size: 16px; margin: 10px 0 4px; }
.beleg-daten dt { color: var(--grau); }
.beleg-daten dd { margin: 0; }
.beleg thead th { font-size: 16px; color: var(--grau); font-weight: 600; text-align: right; }
.beleg thead th:nth-child(-n+2) { text-align: left; }
.beleg .erl { display: block; font-size: 16px; color: var(--grau); font-weight: 400; }
.beleg tr.mark .erl { color: var(--text); }  /* Grau auf Markierung hätte nur 4,25 : 1 */
.beleg .bpos { text-align: left; color: var(--grau); width: 3.2em; padding-right: 0; }
.beleg td.l { text-align: left; white-space: normal; }
/* L10 Parallelbeleg (Umstieg): bisheriges System auf Graufläche, Beträge rechts, die geklärte Zeile markiert */
.beleg.parallel thead th { text-align: right; }
.beleg.parallel thead th:first-child { text-align: left; }
.beleg.parallel td:nth-child(2), .beleg.parallel thead th:nth-child(2) { background: var(--flaeche); }
.beleg.parallel tr.mark > * { background: var(--marker); }
.beleg.parallel th, .beleg.parallel td { padding-left: 14px; padding-right: 14px; }
.beleg.parallel .tabelle-rahmen { margin: 0; }
@media (max-width: 560px) {
  .beleg.parallel th, .beleg.parallel td { padding: 6px 5px; }
  .beleg.parallel th:first-child, .beleg.parallel td:first-child { padding-left: 12px; }
}
.beleg-zwischen { text-align: left; font: 600 17px/1.3 var(--sans); padding: 16px 22px 6px; border-top: 1.5px solid var(--text); }

/* Belegleiste [EG] 4.2 */
.leiste { background: var(--weiss); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.leiste ol { list-style: none; margin: 0 auto; padding: 0 32px; max-width: 1180px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.leiste li { padding: 28px 22px 24px 0; margin: 0; max-width: none; }
.leiste li + li { border-left: 1px solid var(--linie); padding-left: 24px; }
.leiste .wert { display: block; font: 600 clamp(28px, 2.6vw, 38px)/1.05 var(--serif); padding-bottom: 6px; margin-bottom: 8px; border-bottom: 4px double var(--text); width: max-content; max-width: 100%; }
.leiste .text { font-size: 17px; line-height: 1.4; display: block; }
.fussnoten { max-width: 1180px; margin: 10px auto 0; padding: 0 32px 0 52px; font-size: 16px; color: var(--grau); }
.fussnoten li { margin: 0; }

/* Stationen L7 */
.stationen { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.stationen > li { position: relative; padding: 0 0 20px 56px; counter-increment: s; margin: 0; }
.stationen > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--text); color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.stationen > li::after { content: ""; position: absolute; left: 18px; top: 42px; bottom: 4px; border-left: 2px solid var(--linie); }
.stationen > li:last-child::after { display: none; }
.stationen b { display: block; font-size: 19px; }
.stationen span { font-size: 17px; }
.zitat { font: 400 22px/1.5 var(--serif); margin: 0 0 20px; max-width: 44ch; border-left: 4px solid var(--rot); padding-left: 18px; }

/* Spiegelsatz L4, Stichtagsband L5, Skala */
.tabelle-rahmen { overflow-x: auto; margin: 0 0 1em; }
.tabelle { width: 100%; border-collapse: collapse; background: var(--weiss); font-size: 17px; font-variant-numeric: tabular-nums; }
.tabelle caption { text-align: left; font-weight: 600; padding: 0 0 8px; }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--linie); }
.tabelle thead th { font-size: 16px; color: var(--grau); font-weight: 600; border-bottom: 1.5px solid var(--text); }
.tabelle tbody th { font-weight: 600; }
.tabelle .r { text-align: right; white-space: nowrap; }
.tabelle tr.diff > * { font-weight: 600; border-top: 1.5px solid var(--text); border-bottom: 4px double var(--text); }
.tabelle tr.mark > * { background: var(--marker); }
.rechnung { font-variant-numeric: tabular-nums; font-size: 17px; }
.monatsband { margin: 8px 0 18px; }
.monatsband .band { display: flex; height: 38px; border-radius: 6px; overflow: hidden; border: 1px solid var(--text); }
.monatsband .alt { width: 16%; background: var(--flaeche); border-right: 3px solid var(--text); }
.monatsband .neu-satz { flex: 1; background: repeating-linear-gradient(135deg, var(--weiss) 0 8px, var(--flaeche) 8px 16px); }
.monatsband .achse { display: flex; justify-content: space-between; font-size: 16px; color: var(--grau); margin-top: 4px; }
.monatsband dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; font-size: 17px; margin: 10px 0 0; }
.monatsband dt { font-weight: 600; }
.monatsband dd { margin: 0; }
.stufen { list-style: none; padding: 0; margin: 0 0 1em; display: flex; flex-wrap: wrap; gap: 8px; }
.stufen li { margin: 0; padding: 6px 12px; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); font-size: 16px; }
.stufen li b { font-weight: 600; }
.skala { margin: 10px 0 6px; }
.skala-bahn { position: relative; height: 14px; border-radius: 7px; background: var(--flaeche); }
.skala-grenze { position: absolute; left: 50%; top: -6px; bottom: -6px; border-left: 2px solid var(--text); }
.skala-wert { position: absolute; left: 56%; top: -4px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--text); border: 3px solid var(--weiss); }
.skala-achse { display: flex; justify-content: space-between; font-size: 16px; color: var(--grau); margin-top: 6px; }

/* Schema Schnittstellen L8, L9 */
.schema { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); gap: 0; align-items: center; margin: 12px 0 18px; }
.schema-spalte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 18px 20px; }
.schema-spalte h3 { font-size: 18px; color: var(--grau); text-transform: uppercase; letter-spacing: .06em; }
.schema-spalte ul { list-style: none; padding: 0; margin: 0; }
.schema-spalte li { padding: 8px 0; border-top: 1px solid var(--linie); margin: 0; font-size: 17px; }
.schema-mitte { display: flex; align-items: center; justify-content: center; position: relative; padding: 0 18px; }
.schema-mitte::before, .schema-mitte::after { content: ""; position: absolute; top: 50%; width: 18px; border-top: 2px solid var(--text); }
.schema-mitte::before { left: 0; }
.schema-mitte::after { right: 0; }
.schema-kern { background: var(--text); color: #fff; border-radius: 12px; padding: 22px 18px; text-align: center; width: 100%; }
.schema-kern b { display: block; font: 600 26px/1.2 var(--serif); padding-bottom: 6px; margin-bottom: 6px; border-bottom: 4px double var(--rot); }
.naht { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; margin: 12px 0 20px; }
.naht-kasten { background: var(--weiss); border: 2px solid var(--text); border-radius: 12px; padding: 18px; }
.naht-kasten b { display: block; font: 600 22px/1.2 var(--serif); padding-bottom: 6px; margin-bottom: 6px; border-bottom: 4px double var(--text); }
.naht-kasten.mga { background: var(--text); color: #fff; }
.naht-kasten.mga b { border-color: var(--rot); }
.naht ul { list-style: none; margin: 0; padding: 0 14px; }
.naht li { font-weight: 600; font-size: 17px; text-align: center; padding: 6px 0 10px; margin: 8px 0; border-bottom: 2px solid var(--text); position: relative; max-width: none; }
.naht li::after { content: ""; position: absolute; right: -2px; bottom: -7px; width: 10px; height: 10px; border-right: 2px solid var(--text); border-top: 2px solid var(--text); transform: rotate(45deg); }

/* Zeitleiste (Pflichtenkalender, Ablauf Wechsel, Monat) */
.zeitleiste { list-style: none; margin: 0 0 1em; padding: 0; position: relative; }
.zeitleiste::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; border-left: 2px solid var(--linie); }
.zeitleiste li { position: relative; padding: 0 0 18px 40px; margin: 0; max-width: 70ch; }
.zeitleiste li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--weiss); border: 3px solid var(--text); }
.zeitleiste li.stark::before { background: var(--text); }
.zeitleiste .wann { display: block; font-weight: 600; }
.zeitleiste .fund { display: block; font-size: 16px; color: var(--grau); }

/* Stichtag-Band E-Rechnung ([EG] 4.4, ohne Countdown und Warnfarbe) */
.stichtag-band { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; background: var(--weiss); border: 1px solid var(--linie); border-left: 6px solid var(--text); border-radius: 12px; padding: 28px 32px; }
.stichtag-band .datum { font: 600 36px/1.1 var(--serif); }
.kopfbereich .stichtag-band { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.stichtag-band .datum small { display: block; font: 600 16px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--grau); margin-bottom: 6px; }

/* Bildschirmfotos: nur Plätze, keine erfundenen Bilder (B32) */
.fotoplaetze { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fotoplatz { aspect-ratio: 16 / 10; border: 2px dashed #9C9C9C; border-radius: 12px; background: repeating-linear-gradient(135deg, var(--weiss) 0 12px, var(--papier) 12px 24px); display: flex; align-items: flex-end; padding: 14px; margin: 0; max-width: none; }
.fotoplatz p { margin: 0; font-size: 16px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; padding: 8px 10px; }
.fotoplatz b { display: block; }
.fotoplatz-abstand { margin-bottom: 20px; }

/* Demo „Seite 1 der Unterlage“ auf „Für Vorstände“: ein Blatt, schwarz-weiß wie gedruckt (L15, Entscheidung 18) */
.blatt { background: var(--weiss); color: var(--text); border: 1px solid var(--linie); box-shadow: 0 18px 44px rgba(40,40,40,.16); padding: 26px 28px 20px; margin: 0; font-size: 16px; line-height: 1.45; }
.blatt-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; border-bottom: 1px solid var(--text); padding-bottom: 8px; margin-bottom: 16px; color: var(--grau); }
.blatt h3 { font: 600 24px/1.2 var(--serif); margin: 0 0 4px; }
.blatt-unter { margin: 0 0 14px; color: var(--grau); }
.blatt table { width: 100%; border-collapse: collapse; }
.blatt th, .blatt td { text-align: left; vertical-align: top; padding: 9px 10px 9px 0; border-top: 1px solid var(--text); font-weight: 400; }
.blatt thead th { font-weight: 600; border-top: 0; border-bottom: 1.5px solid var(--text); padding-top: 0; }
.blatt tbody tr:first-child > * { border-top: 0; }
.blatt tbody th { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.blatt .fund { display: block; color: var(--grau); }
.blatt-fuss { margin: 14px 0 0; padding-top: 8px; border-top: 1px solid var(--text); color: var(--grau); }
.blatt .erkl { margin: 10px 0 0; color: var(--grau); }

/* Kästen, Hinweise */
.kasten { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 24px 26px; margin: 0 0 1em; }
.abschnitt.weiss .kasten { background: var(--papier); }
.kasten > :last-child { margin-bottom: 0; }
.bruecke { border-left: 4px solid var(--rot); background: var(--weiss); border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 0 0 1em; }
.abschnitt.weiss .bruecke { background: var(--papier); }
.bruecke p { margin: 0 0 8px; }
.bruecke .kicker { margin-bottom: 8px; }
.hinweis { font-size: 17px; color: var(--grau); }
.angaben { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 24px; margin: 0 0 1em; }
.angaben dt { font-weight: 600; }
.angaben dd { margin: 0; }

/* Rechtstexte der IT-Recht Kanzlei unter milchgeldabrechnung.de/impressum und /datenschutz; die Vorlage baut
   werkzeuge/paket_milchgeldabrechnung.py, der Text kommt vom Dienst Rechtstexte (André, 30.09.2026) */
.rechtstext { max-width: 820px; overflow-wrap: anywhere; }
.rechtstext h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 1.6em 0 .5em; }
.rechtstext > h2:first-child, .rechtstext > div:first-child > h2:first-child { margin-top: 0; }
.rechtstext h3, .rechtstext h4 { font: 600 19px/1.3 var(--sans); margin: 1.4em 0 .4em; }
.rechtstext p, .rechtstext ul, .rechtstext ol { margin: 0 0 1em; }
.rechtstext table { border-collapse: collapse; width: 100%; margin: 0 0 1em; }
.rechtstext td, .rechtstext th { border: 1px solid var(--linie); padding: 8px 10px; text-align: left; vertical-align: top; }
.rechtstext-pdf { margin-top: 2em; font-size: 16px; }
/* Bildnachweis unter dem Kanzleitext (André 01.10.2026); die Vorlage gilt für beide Rechtstexte, gezeigt nur im Impressum */
.bildnachweis { max-width: 820px; margin: 2em 0 0; padding-top: 12px; border-top: 1px solid var(--linie); font-size: 16px; color: var(--grau); }
.rechtstext-seite[data-titel^="Datenschutz"] .bildnachweis { display: none; }
/* Copyright-Zeile der Kanzlei: ihr Logo käme von it-recht-kanzlei.de, das sperrt img-src 'self'; daher eine lokale
   Kopie per content, Anordnung wie auf www.brendel-software.de (03.10.2026). Die style-Attribute der Kanzlei greifen nicht (CSP) */
.rechtstext #itkanzlei_txt_copyright { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: 2em; font-size: 16px; color: var(--grau); }
.rechtstext #itkanzlei_txt_copyright > div:empty { display: none; }
.rechtstext #itkanzlei_txt_copyright a { display: block; }
#itkanzlei_img_copyright { content: url("/logo/itrk-datenschutz.png"); display: block; width: 340px; max-width: 100%; height: auto; }
.wortlaut { margin: 0 0 16px; padding: 14px 20px; background: var(--weiss); border-left: 4px solid var(--text); border-radius: 0 8px 8px 0; font: 400 18px/1.55 var(--serif); }
.wortlaut .abs { display: block; font: 600 16px/1.3 var(--sans); color: var(--grau); margin-bottom: 4px; }
.inhaltsliste { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 20px 24px; }
.inhaltsliste h2 { font: 600 17px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--grau); }
.inhaltsliste ol { margin: 0; padding-left: 1.3em; }
.inhaltsliste li { margin-bottom: 6px; }
.fragen { display: grid; gap: 0; }
.frage { padding: 18px 0; border-top: 1px solid var(--linie); }
.frage h3 { font: 600 20px/1.35 var(--sans); }
.frage p { margin: 0; }
.stand-stempel { display: inline-block; font-size: 16px; border: 1.5px solid var(--text); border-radius: 4px; padding: 4px 10px; margin: 0 0 1em; }

/* Formular (Anfrageschein [06] 12) */
.schein { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 26px 28px; box-shadow: 0 18px 40px rgba(40,40,40,.08); }
.schein h2 { font-size: 26px; }
.feld { display: grid; gap: 6px; margin-bottom: 16px; }
.feld label { font-weight: 600; font-size: 17px; }
.feld label span { font-weight: 400; color: var(--grau); }
.feld input, .feld textarea, .feld select { font: 400 18px/1.4 var(--sans); color: var(--text); padding: 10px 12px; border: 1.5px solid #8C8C8C; border-radius: 8px; background: #fff; width: 100%; min-height: 48px; }
.feld textarea { min-height: 120px; resize: vertical; }
.feld-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.honig { position: absolute; left: -5000px; }

/* Schlussband und Fuß */
.schluss { background: var(--text); color: #fff; padding: 64px 0; text-align: center; }
.schluss h2 { color: #fff; }
.schluss p { margin: 0 auto 20px; color: var(--auf-dunkel); }
.schluss p a { color: #fff; font-weight: 600; }
.schluss p a:hover { color: var(--auf-dunkel-leise); }
.schluss .knopf.rot { margin-bottom: 18px; }
.schluss :focus-visible { outline-color: #fff; }
.fuss { background: var(--weiss); border-top: 1px solid var(--linie); padding: 48px 0 28px; font-size: 16px; }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.fuss h2 { font: 600 16px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--grau); margin-bottom: 12px; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: 8px; }
.fuss a { color: var(--text); text-decoration: none; }
.fuss a:hover, .fuss a:focus-visible { text-decoration: underline; text-decoration-color: var(--rot); }
.fuss-logo { height: 34px; width: auto; display: block; margin-bottom: 12px; }
.fuss-unten { margin-top: 32px; padding-top: 18px; border-top: 4px double var(--text); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--grau); }
.fuss-unten p { margin: 0; max-width: 90ch; }

/* Bilder: mit einer Bild-KI erzeugt (bildprompts.md). Zuschnitt, Verläufe und Tiefe nur hier, kein
   Skript. Leichte Entsättigung gleicht farbige und graue Bilder einander an; beim Zeigen kommt die Farbe zurück. */
figure { margin: 0; }
.bild { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(.97);
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .7s ease; }

/* Seitenkopf: Bild mit versetzter Fläche dahinter und weichem Schatten */
.kopf-foto { position: relative; isolation: isolate; aspect-ratio: 4 / 3; border-radius: 22px;
  box-shadow: 0 30px 60px rgba(40, 40, 40, .18), 0 6px 14px rgba(40, 40, 40, .08); }
.kopf-foto::before { content: ""; position: absolute; top: 24px; right: -24px; bottom: -24px; left: 24px; z-index: -1;
  border-radius: 26px; background: linear-gradient(135deg, var(--flaeche) 0, #E2E2E2 100%); }
.kopf-foto::after { content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(40, 40, 40, .14) 100%),
    linear-gradient(90deg, rgba(247, 247, 247, .18) 0, rgba(247, 247, 247, 0) 30%); }
.kopf-foto .bild { border-radius: 22px; }

/* Band: volle Breite, oben und unten in den Seitengrund verlaufend */
.bildband { position: relative; height: clamp(220px, 30vw, 440px); overflow: hidden; }
.bildband .bild { filter: saturate(.9) contrast(.98);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); }

/* Kachel: Bild randlos oben, Zeichen ragt hinein; beim Zeigen leichter Zoom */
.kachel-foto { position: relative; margin: -22px -22px 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 11px 11px 0 0; }
.kachel-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .7) 100%); }
.kachel-foto + .symbol { position: relative; z-index: 1; margin-top: -26px; background: var(--weiss);
  box-shadow: 0 8px 20px rgba(40, 40, 40, .14); }
.abschnitt:not(.weiss) .kachel-foto + .symbol, .abschnitt.weiss .kachel-foto + .symbol { background: var(--weiss); }
.bereich:has(a):hover .kachel-foto .bild, .karte:hover .kachel-foto .bild { transform: scale(1.05); filter: saturate(1) contrast(1); }

/* Funktionsblock: Bild in einer dritten Spalte */
.bereich-block.mit-bild { grid-template-columns: 64px minmax(0, 1fr) 300px; }
.block-foto { grid-column: 3; grid-row: 1; align-self: start; position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 16px; box-shadow: 0 18px 40px rgba(40, 40, 40, .12); margin-top: 6px; }
.block-foto:hover .bild { transform: scale(1.04); filter: saturate(1) contrast(1); }

/* Spalte: Bild über oder neben Text */
.spalten-foto { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 18px; margin: 0 0 24px;
  box-shadow: 0 24px 50px rgba(40, 40, 40, .14); }
.spalten-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, rgba(40, 40, 40, .12) 100%); }

/* Bild mit Verlauf: läuft nach rechts in den Seitengrund aus, der Text steht daneben */
.verlauf-foto { position: relative; min-height: 380px; }
.verlauf-foto .bild { position: absolute; inset: 0; }
.verlauf-foto .bild { border-radius: 20px 0 0 20px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 55%, transparent 100%); }
.mit-verlauf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; align-items: stretch; }

.karten.stapel { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.karten.stapel .karte { padding: 20px 22px; flex-direction: row; gap: 16px; align-items: flex-start; }
.karten.stapel .karte > div { flex: 1; }
.karten.stapel .karte h3 { font-size: 20px; }
.karten.stapel .karte p { font-size: 17px; margin-bottom: 6px; }

/* Offene Punkte am Seitenende (nur Prototyp) */
.offen-box { background: var(--pruef); border-top: 1px dashed var(--pruef-rand); padding: 24px 0; font-size: 17px; }
.offen-box summary { cursor: pointer; font-weight: 600; }
.offen-box summary h2 { display: inline; font: 600 19px/1.3 var(--sans); }
.offen-box ol { margin: 12px 0 0; }
.offen-box .bezug { color: #6B5310; }

/* Seitenübersicht (nur Prototyp) */
.uebersicht td, .uebersicht th { font-size: 16px; }

/* Version 2: Bausteine des Angebots (angebot.md) */
.leiste.drei-werte ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bereiche.drei-spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Großes Logo über dem Hero der Startseite (André, 28.09.2026) */
.kopf-logo-quer { display: block; width: min(460px, 88%); height: auto; margin: 0 0 30px -4px; }

/* Kopfleiste: Logoplatz gleich breit, auf der Startseite die Produktzeile (Variante D, André 28.09.2026);
   dazu die Muster der Seite kopfvarianten.html (nur Prototyp) */
.empfehlung { display: inline-block; vertical-align: middle; font: 600 14px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--rot); border-radius: 999px; padding: 4px 12px; margin-left: 10px; }
.mock-titel { font: 600 15px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--grau); margin: 26px 0 8px; }
.mock { margin: 0 -32px; border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; background: var(--papier); box-shadow: 0 18px 40px rgba(40, 40, 40, .10); }
.mock .kopf { z-index: 1; }
.mock-rumpf { max-height: 360px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.mock-rumpf.flach { max-height: 260px; }
.mock .kopfbereich { padding: 30px 0 40px; }
.h1-wie { font: 600 clamp(30px, 3.4vw, 46px)/1.12 var(--serif); letter-spacing: -.01em; color: var(--text); margin: 0 0 16px; max-width: 22ch; }
.mock-karte { background: var(--weiss); border-top: 5px solid var(--rot); border-radius: 14px; padding: 20px 26px 120px; box-shadow: 0 30px 70px rgba(40, 40, 40, .16); max-width: 480px; margin-left: auto; }
.mock-karte small { display: block; font: 600 15px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.mock-karte b { display: block; font: 600 26px/1.2 var(--serif); margin-top: 4px; }
.kopf.gross .breite { min-height: 112px; }
.kopf.gross .kopf-logo { flex: none; }
.kopf.var-a .nav-voll > ul { justify-content: flex-end; }
.kopf.var-a .kopf-kontakt { flex-direction: column-reverse; align-items: flex-end; gap: 2px; }
.kopf.var-a .kopf-telefon { font-size: 16px; }
.kopf.gross .kopf-logo img { height: 62px; }
.logo-platz { flex: none; width: 176px; }
.logo-platz.breit { width: 214px; }
.kopf-zusatz { display: flex; flex-direction: column; gap: 2px; text-decoration: none; line-height: 1.2; }
.kopf-zusatz b { font: 600 16px/1.2 var(--serif); color: var(--text); }
.kopf-zusatz small { font-size: 16px; color: var(--grau); }
.seiten-logo { display: block; margin: 0 0 18px; }
.seiten-logo img { display: block; height: 46px; width: auto; }

/* Seitenkopf: Pfad als Leiste unter der Navigation (Variante D zur Probe, André 28.09.2026; Schalter
   PFAD_ALS_LEISTE im Bauskript) und die Muster der Seite seitenkopf-varianten.html (nur Prototyp) */
.h1-wie.kleiner { font-size: clamp(28px, 2.9vw, 40px); max-width: 24ch; }
.mock .kopfbereich .raster { align-items: center; }
.pfad-kicker a { color: inherit; text-decoration: none; }
.pfad-kicker a:hover { color: var(--text); }
.pfad-kicker .trenner { color: var(--linie); font-weight: 400; }
.pfad-kicker span:last-child { color: var(--text); }
.unterzeile { font: 400 clamp(21px, 2vw, 25px)/1.4 var(--serif); color: var(--text); margin: 0 0 14px; max-width: 34ch; }
.pfadleiste { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.pfadleiste .pfad ol { margin: 0; min-height: 44px; align-items: center; }

/* Angebotskarte im Hero: wer was tut, darunter die Zusage (ch06: Aufwand und Risiko sichtbar klein) */
.angebotskarte { background: var(--weiss); border-top: 5px solid var(--rot); border-radius: 14px; max-width: 480px; margin: 0 0 0 auto;
  box-shadow: 0 30px 70px rgba(40, 40, 40, .18), 0 6px 14px rgba(40, 40, 40, .06); overflow: hidden; }
.ak-kopf { padding: 20px 26px 10px; }
.ak-kopf small { display: block; font: 600 16px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.ak-kopf b { display: block; font: 600 26px/1.2 var(--serif); margin-top: 4px; }
.ak-teil { padding: 8px 26px 14px; }
.ak-titel { font: 600 17px/1.3 var(--sans); margin: 6px 0 6px; }
.ak-teil ul { list-style: none; margin: 0; padding: 0; }
.ak-teil li { position: relative; margin: 0; padding: 6px 0 6px 30px; border-top: 1px solid #EFEFEF; font-size: 17px; line-height: 1.4; max-width: none; }
.ak-wir li::before { content: ""; position: absolute; left: 5px; top: .62em; width: 7px; height: 13px; border-right: 2.5px solid var(--rot); border-bottom: 2.5px solid var(--rot); transform: rotate(40deg); }
.ak-sie { background: var(--papier); border-top: 1px solid var(--linie); }
.ak-sie li { color: var(--grau); }
.ak-sie li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--grau); }
.ak-zusage { margin: 0; max-width: none; background: var(--text); color: var(--auf-dunkel); padding: 16px 26px 18px; font-size: 17px; }
.ak-marke { display: block; font: 600 16px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 6px; }
.ak-marke::before { content: ""; display: inline-block; width: 22px; height: 3px; background: var(--rot); vertical-align: middle; margin-right: 8px; }

/* Hindernisse und Antworten (ch09) */
.einwaende { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.einwaende.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.einwand { background: var(--papier); border-left: 4px solid var(--rot); border-radius: 0 12px 12px 0; padding: 24px 26px 22px; margin: 0; max-width: none; }
.abschnitt:not(.weiss) .einwand { background: var(--weiss); }
.einwand-frage { font: 400 23px/1.35 var(--serif); margin: 0 0 12px; }
.einwand p:last-child { margin-bottom: 0; }

/* Bausteine des Angebots (ch10) */
.paket { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.baustein { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 24px 24px 22px; margin: 0; max-width: none; display: flex; flex-direction: column; }
.abschnitt.weiss .baustein { background: var(--papier); }
.baustein h3 { font-size: 21px; margin-top: 14px; }
.baustein p { font-size: 18px; }
.baustein .status { margin-top: auto; }

/* Zusagen (ch15) */
.zusagen { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 12px; }
.zusagen li { margin: 0; max-width: none; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 22px; align-items: baseline; padding: 20px 22px; background: var(--papier); border-radius: 12px; }
.abschnitt:not(.weiss) .zusagen li { background: var(--weiss); }
.zusagen h3 { font: 600 22px/1.2 var(--serif); margin: 0; padding-bottom: 6px; border-bottom: 3px solid var(--rot); justify-self: start; }
.zusagen p { margin: 0; }

/* Termine (ch13), ohne Countdown und Warnfarbe (B27) */
.termine { display: grid; gap: 20px; }

/* Ablauf mit „Wir“ und „Sie“: der Aufwand der Molkerei sichtbar klein (ch06) */
.ablauf { list-style: none; margin: 0; padding: 0; position: relative; }
.ablauf::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; border-left: 2px solid var(--linie); }
.ablauf > li { position: relative; display: grid; grid-template-columns: 230px minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 28px; padding: 0 0 22px 40px; margin: 0; max-width: none; }
.ablauf > li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--weiss); border: 3px solid var(--text); }
.ablauf > li.stark::before { background: var(--text); }
.ablauf h3 { font-size: 20px; margin: 0; }
.ablauf .wir, .ablauf .sie { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.ablauf .wir b, .ablauf .sie b { font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.ablauf .wir b { color: var(--rot); }
.ablauf .wir p, .ablauf .sie p { margin: 0; font-size: 18px; }
.ablauf .sie p { color: var(--grau); }

/* Fragen vor dem Wechsel, ohne Skript aufklappbar */
.fragen-auf { border-bottom: 1px solid var(--linie); margin: 0 0 1em; }
.fragen-auf details { border-top: 1px solid var(--linie); }
.fragen-auf summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 10px 0; font: 600 20px/1.35 var(--sans); }
.fragen-auf summary::-webkit-details-marker { display: none; }
.fragen-auf summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px; border-right: 2.5px solid var(--rot); border-bottom: 2.5px solid var(--rot); transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; }
.fragen-auf details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.fragen-auf details p { margin: 0 0 14px; }

/* Schlussband: was die Molkerei aus dem Termin mitnimmt */
.mitnehmen { list-style: none; padding: 0; margin: 0 auto 26px; max-width: 560px; text-align: left; }
.mitnehmen li { position: relative; padding-left: 30px; margin-bottom: 10px; color: var(--auf-dunkel); }
.mitnehmen li::before { content: ""; position: absolute; left: 4px; top: .35em; width: 7px; height: 13px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(40deg); }
.schluss .neu .q, .schluss .q { color: #6B5310; }
.klein-h2 { font: 600 20px/1.3 var(--sans); margin: 22px 0 10px; }

/* Angebotslogik (interne Seite) */
.angebot-text h2 { margin-top: 40px; }
.angebot-text h2:first-child { margin-top: 0; }
.angebot-text .tabelle td, .angebot-text .tabelle th { font-size: 16px; }
.angebot-text p, .angebot-text li { max-width: 80ch; }

@media (max-width: 1080px) {
  .paket, .bereiche.drei-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .einwaende, .einwaende.drei { grid-template-columns: minmax(0, 1fr); }
  .angebotskarte { margin: 8px 0 0; max-width: 560px; }
  .ablauf > li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .leiste.drei-werte ol { grid-template-columns: minmax(0, 1fr); }
  .leiste.drei-werte li + li { border-top: 1px solid var(--linie); }
}
@media (max-width: 700px) {
  .paket, .bereiche.drei-spalten { grid-template-columns: minmax(0, 1fr); }
  .mock { margin: 0 -16px; }
  .kopf .logo-platz, .kopf .logo-platz.breit { width: auto; flex: 0 1 auto; min-width: 0; }
  .zusagen li { grid-template-columns: minmax(0, 1fr); }
  .einwand-frage { font-size: 21px; }
  .paket-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .paket-tabelle, .paket-tabelle tbody, .paket-tabelle tr, .paket-tabelle th, .paket-tabelle td { display: block; }
  .paket-tabelle tr { padding: 12px 0; border-bottom: 1px solid var(--linie); }
  .paket-tabelle th, .paket-tabelle td { border: 0; padding: 2px 14px; }
  .paket-tabelle td::before { display: block; font-size: 16px; font-weight: 600; color: var(--grau); margin-top: 6px; }
  .paket-tabelle td:nth-of-type(1)::before { content: "Was wir tun"; }
  .paket-tabelle td:nth-of-type(2)::before { content: "Was Sie davon haben"; }
}

@media (max-width: 1080px) {
  .nav-voll, .kopf-telefon { display: none; }
  .menue { display: block; margin-left: auto; position: relative; }
  .menue summary { list-style: none; cursor: pointer; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border: 2px solid var(--text); border-radius: 999px; }
  .menue summary::-webkit-details-marker { display: none; }
  .menue[open] summary { background: var(--text); color: #fff; }
  .menue-liste { position: absolute; right: 0; top: calc(100% + 8px); width: min(560px, calc(100vw - 32px)); background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; box-shadow: 0 18px 40px rgba(40,40,40,.16); padding: 14px 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; list-style: none; margin: 0; }
  .menue-liste li { margin: 0; }
  .menue-liste a { display: flex; min-height: 44px; align-items: center; text-decoration: none; font-weight: 600; }
  .menue-liste .unterpunkt a { font-weight: 400; padding-left: 12px; }
  .kopf-kontakt { margin-left: 0; }
  .bereiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kopfbereich .raster, .zwei, .zwei.breit-links { grid-template-columns: minmax(0, 1fr); }
  .beleg.schraeg { transform: none; margin: 0; }
  .beleg-unter { margin-left: 0; text-align: left; }
  .leiste ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leiste li + li { border-left: 0; padding-left: 0; }
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tippflächen auf Handy und Tablet: Fußzeilen-Links, Logo und Pfad 44 px hoch */
  .fuss li { margin-bottom: 0; }
  .fuss li a, .fuss-unten a, .kopf-logo, .pfad a { display: inline-flex; align-items: center; min-height: 44px; }
  .drei, .fotoplaetze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bereich-block.mit-bild { grid-template-columns: 64px minmax(0, 1fr); }
  .bereich-block.mit-bild > div { grid-column: 2; grid-row: 1; }
  .block-foto { grid-column: 2; grid-row: 2; aspect-ratio: 16 / 9; margin-top: 12px; }
  .mit-verlauf { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .verlauf-foto { min-height: 0; aspect-ratio: 16 / 9; }
  .verlauf-foto .bild { border-radius: 20px 20px 0 0;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 60%, transparent 100%); }
  .kopf-foto { max-width: 640px; }
}
@media (max-width: 700px) {
  body { font-size: 18px; }
  .breite, .leiste ol { padding: 0 16px; }
  .fussnoten { padding: 0 16px 0 36px; }
  .kopf .breite { min-height: 64px; gap: 10px; }
  .kopf-logo img { height: 30px; }
  .kopf-kontakt .knopf { display: none; }
  .menue-liste { grid-template-columns: minmax(0, 1fr); right: -16px; width: calc(100vw - 16px); }
  h1 { font-size: clamp(26px, calc((100vw - 32px) / 11.5), 34px); }
  .kopfbereich { padding: 28px 0 44px; }
  .aktion .knopf { width: 100%; white-space: normal; }
  .bereiche, .drei, .fotoplaetze, .leiste ol, .feld-paar, .fuss-raster { grid-template-columns: minmax(0, 1fr); }
  .bereich-block { grid-template-columns: minmax(0, 1fr); }
  .abschnitt { padding: 52px 0; }
  .schema, .naht { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .schema-mitte::before, .schema-mitte::after { display: none; }
  .naht li { text-align: left; border-bottom: 0; border-left: 2px solid var(--text); padding: 6px 0 6px 14px; margin-left: 20px; }
  .naht li::after { display: none; }
  .stichtag-band { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 20px; }
  .beleg th, .beleg td { padding: 6px 12px; font-size: 16px; }
  .funktionsliste li { grid-template-columns: minmax(0, 1fr); }
  .funktionsliste li .status { justify-self: start; }
  .angaben { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .angaben dd { margin-bottom: 10px; }
  .schein { padding: 20px 18px; }
  .kopf-foto::before { top: 12px; right: -10px; bottom: -12px; left: 12px; }
  .bereich-block.mit-bild { grid-template-columns: minmax(0, 1fr); }
  .bereich-block.mit-bild > div { grid-column: 1; grid-row: auto; }
  .block-foto { grid-column: 1; grid-row: 1; margin-top: 0; }
  .bereich-block.mit-bild > .symbol { margin: -38px 0 0 16px; position: relative; z-index: 1; background: var(--weiss);
    box-shadow: 0 8px 20px rgba(40, 40, 40, .14); }
  .bildband { height: 220px; }
  .karten.stapel .karte { flex-direction: column; }
}
@media print {
  .pruefleiste, .kopf-kontakt, .nav-voll, .menue, .schluss, .offen-box { display: none; }
  .beleg.schraeg { transform: none; box-shadow: none; border: 1px solid var(--text); }
}