/* Hoftankbörse · gemeinsame Gestaltung aller öffentlichen Seiten (26.09.2026, hell).
   Peter: „die seiten sollen nicht mehr aussehen wie aus einem baukasten“, „alle seiten so bauen,
   das die seitensteuerung einfacher und deutlicher zu sehen ist“. Ein Bekannter aus der
   Speditionsbranche sah keinen Bezug zu Tanken, Börse oder Spedition und erkannte KI. Vorbild ist
   jetzt mont-fort.com (Peter: „das sieht mega aus“, „hell wie montfort“): große echte Fotos aus
   unserer Branche, Weiß und Eisgrau, Stahlblau als einzige Farbe, eine schlanke Hausschrift in
   Großbuchstaben, wenig Text. Bernstein nur noch für „Kostenlos starten“.
   Schrift Jost (SIL OFL 1.1), selbst gehostet unter /static/schrift, keine Google Fonts (DSGVO).
   Klassennamen wie .nacht bleiben aus der dunklen Fassung erhalten, damit alle Seiten weiter passen:
   .nacht ist jetzt der helle, eisgraue Kopfbereich. Dunkel bleiben nur Fußzeile, Menü und Dialog. */

@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url(/static/schrift/jost-300.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(/static/schrift/jost-400.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(/static/schrift/jost-500.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:600;font-display:swap;src:url(/static/schrift/jost-600.woff2) format("woff2")}

:root{
  --tinte:#0f2233;--leise:#56616d;--zart:#8a939d;--haar:#dde3ea;
  --papier:#ffffff;--weiss:#ffffff;--eis:#f1f4f7;--eis-2:#e7edf3;
  --blau:#1f5a8c;--blau-dunkel:#163f63;--blau-hell:#e6eef6;
  --nacht:#0f2233;--nacht-2:#16344d;--nacht-3:#1d4668;
  --licht:#f4a93c;--licht-hover:#ffbb55;--licht-tief:var(--blau);--gruen:#2fbf6d;--gruen-tief:#2f7d4f;
  --licht-rgb:244,169,60;--nacht-rgb:15,34,51;--tiefe-rgb:31,90,140;
  --tafel:#ffffff;--tafel-leise:#6b7682;--balken-1:#d9e1ea;--balken-2:#cbd5e0;--lead:#33404e;
  --auf-nacht:#e9eef5;--auf-nacht-leise:#a9b8cb;--haar-nacht:rgba(233,238,245,.14);
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:var(--sans);
  --mono:var(--sans);
  --kopf-h:76px;
}
*{box-sizing:border-box}
html{background:var(--weiss);scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 16px)}
body{margin:0;font:400 17.5px/1.65 var(--sans);color:var(--tinte);background:var(--weiss);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
a{color:inherit}
img{max-width:100%}
.spalte{max-width:1180px;margin:0 auto;padding:0 28px}
@media(max-width:600px){.spalte{padding:0 18px}}
.nur-leser{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:12px;top:-60px;z-index:100;background:var(--licht);color:var(--nacht);padding:10px 14px;border-radius:2px;font-weight:600;text-decoration:none}
.sprung:focus{top:12px}
:focus-visible{outline:3px solid var(--blau);outline-offset:2px}

/* ── Kopfleiste: weiß, bleibt beim Scrollen stehen ─────────────────────────────── */
.kopfleiste{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.96);border-bottom:1px solid var(--haar)}
@supports (backdrop-filter:blur(8px)){.kopfleiste{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(12px)}}
.kopfleiste .spalte{display:flex;align-items:center;gap:22px;height:var(--kopf-h)}
.marke{display:flex;align-items:center;gap:11px;text-decoration:none;font:600 20px/1 var(--sans);letter-spacing:.01em;color:var(--tinte);flex:none}
/* Zeichen seit 26.09.2026 in Nachtblau mit Bernstein-Tropfen (Variante B, wie das App-Symbol) */
.marke .zeichen{width:38px;height:38px;border-radius:10px;background:var(--nacht);display:flex;align-items:center;justify-content:center}
.menue .marke .zeichen,.fusszone .marke .zeichen{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.marke .oe{color:#e8981f}
.hauptnav{display:flex;align-items:center;gap:4px;margin-left:auto}
.hauptnav a{position:relative;padding:12px 14px;font:500 14.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tinte);text-decoration:none;white-space:nowrap}
.hauptnav a:hover{color:var(--blau)}
.hauptnav a[aria-current="page"]{color:var(--blau)}
.hauptnav a[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--blau)}
.kopf-knoepfe{display:flex;align-items:center;gap:10px;flex:none}
.knopf-rand{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--tinte);
  border-radius:2px;background:transparent;color:var(--tinte);font:500 14px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap}
.knopf-rand:hover{background:var(--tinte);color:#fff}
.menue-knopf{display:none}
.menue-knopf svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
@media(max-width:1080px){.hauptnav,.kopf-knoepfe .anmelden-knopf{display:none}.menue-knopf{display:inline-flex}.kopf-knoepfe{margin-left:auto}}
@media(max-width:560px){:root{--kopf-h:64px}.kopf-knoepfe .kopf-start{display:none}.marke{font-size:18px}.marke .zeichen{width:34px;height:34px;border-radius:9px}}

/* Menü (Handy, Tablet): ganze Seite, dunkel, große Einträge mit kurzer Erklärung */
.menue{border:0;padding:0;margin:0;width:100%;max-width:none;height:100%;max-height:none;background:var(--nacht);color:var(--auf-nacht)}
.menue::backdrop{background:var(--nacht)}
.menue-innen{min-height:100%;display:flex;flex-direction:column;padding:0 0 calc(24px + env(safe-area-inset-bottom))}
.menue-kopf{display:flex;align-items:center;justify-content:space-between;height:var(--kopf-h);padding:0 18px;border-bottom:1px solid var(--haar-nacht)}
.menue .marke{color:#fff}
.menue .knopf-rand{color:#fff;border-color:rgba(233,238,245,.5)}
.menue .knopf-rand:hover{background:#fff;color:var(--nacht)}
.menue-liste{list-style:none;margin:0;padding:8px 18px 0}
.menue-liste a{display:block;padding:18px 0;border-bottom:1px solid var(--haar-nacht);text-decoration:none;color:#fff}
.menue-liste b{display:block;font:300 25px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.menue-liste span{display:block;margin-top:5px;font-size:15px;color:var(--auf-nacht-leise)}
.menue-liste a[aria-current="page"] b{color:var(--licht)}
.menue-knoepfe{display:grid;gap:10px;padding:24px 18px 0}
.menue-knoepfe .knopf,.menue-knoepfe .knopf-rand{width:100%;justify-content:center;min-height:52px}
.menue-kontakt{margin-top:auto;padding:28px 18px 0;font-size:15px;color:var(--auf-nacht-leise)}
.menue-kontakt a{color:#fff;font-weight:500}

/* ── Knöpfe ─────────────────────────────────────────────────────────── */
.knopf{display:inline-flex;align-items:center;gap:12px;padding:17px 30px;border-radius:2px;background:var(--licht);color:var(--nacht);
  font:600 15px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;transition:background .15s}
.knopf:hover{background:var(--licht-hover)}
.knopf svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.knopf.klein{padding:0 18px;min-height:44px;font-size:13.5px;gap:8px}
.knopf.dunkel{background:var(--tinte);color:#fff}
.knopf.dunkel:hover{background:var(--blau-dunkel)}
.leiser-weg{color:var(--tinte);text-decoration:none;font:500 15px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--tinte);padding-bottom:3px}
.leiser-weg:hover{color:var(--blau);border-bottom-color:var(--blau)}
.wege{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px}
@media(max-width:600px){.wege{flex-direction:column;align-items:stretch}.wege .knopf{justify-content:center}.wege .leiser-weg{align-self:center;text-align:center}}

/* ── Flächen und Schrift ──────────────────────────────────────────────── */
.nacht{background:var(--eis);color:var(--tinte);position:relative;
  --auf-nacht:var(--tinte);--auf-nacht-leise:var(--leise);--haar-nacht:var(--haar);--lead:#33404e}
.nacht::before{content:none}
.papier{background:var(--weiss);display:block}
.eis{background:var(--eis)}
.weiss{background:var(--weiss)}
.abschnitt{padding:104px 0}
@media(max-width:700px){.abschnitt{padding:68px 0}}
.ueberzeile{font:500 13px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--blau);margin:0 0 20px}
h1{font:300 clamp(38px,5.4vw,70px)/1.06 var(--sans);letter-spacing:.02em;text-transform:uppercase;margin:0 0 26px;color:var(--tinte)}
h1 em,h2 em{font-style:normal;color:inherit}
.nummer{font:500 13px/1.3 var(--sans);color:var(--blau);letter-spacing:.22em;text-transform:uppercase;margin:0 0 18px}
h2{font:300 clamp(28px,3.4vw,44px)/1.14 var(--sans);letter-spacing:.02em;text-transform:uppercase;margin:0 0 22px;color:var(--tinte)}
.einleitung{font-size:19px;line-height:1.65;color:var(--leise);max-width:38em;margin:0}
.einleitung a{color:var(--blau)}
.kleingedruckt{margin:18px 0 0;font-size:14.5px;color:var(--leise)}

/* ── Aufmacher mit Foto (Startseite und Themenseiten) ─────────────────────────── */
.aufmacher{position:relative;min-height:min(calc(88vh - var(--kopf-h)),780px);display:flex;align-items:center;background:var(--eis) center/cover no-repeat;overflow:hidden}
.aufmacher::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.92) 34%,rgba(255,255,255,.55) 58%,rgba(255,255,255,0) 80%)}
@media(max-width:860px){.aufmacher{min-height:0;align-items:flex-end;padding-top:220px}.aufmacher::before{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.7) 32%,rgba(255,255,255,.97) 55%)}}
.aufmacher .spalte{position:relative;width:100%;padding-top:64px;padding-bottom:72px}
.aufmacher .inhalt{max-width:600px}
.aufmacher .lead{font-size:clamp(17.5px,1.6vw,20px);line-height:1.6;color:#2b3845;margin:0 0 36px;max-width:32em}
.bildnachweis{position:absolute;right:12px;bottom:8px;font-size:11px;color:rgba(15,34,51,.45)}

/* ── Seitenkopf der Unterseiten: Pfad, Überschrift, Einleitung ──────────────────────── */
/* Nur oben und unten: „spalte seitenkopf“ können auf demselben Element sitzen, die seitlichen
   Abstände kommen aus .spalte. */
.seitenkopf{padding-top:48px;padding-bottom:68px}
@media(max-width:700px){.seitenkopf{padding-top:30px;padding-bottom:46px}}
.pfad{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 30px;padding:0;list-style:none;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--leise)}
.pfad li + li::before{content:"/";margin-right:6px;color:var(--zart)}
.pfad a{color:var(--tinte);text-decoration:none}
.pfad a:hover{color:var(--blau)}
.seitenkopf h1{font-size:clamp(32px,4.4vw,56px);line-height:1.08;max-width:18em}
/* Lange Einzelwörter in Großbuchstaben (DATENSCHUTZERKLÄRUNG) passen sonst auf dem Handy nicht in die Zeile */
h1,h2{overflow-wrap:break-word}
.seitenkopf h1,.text h2{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 5 5}
@media(max-width:420px){.seitenkopf h1{font-size:28px}}
.seitenkopf .lead{font-size:clamp(17px,1.6vw,19.5px);line-height:1.6;color:var(--lead);max-width:38em;margin:0}
.seitenkopf .wege{margin-top:32px}

/* ── Lange Seiten: Inhaltsverzeichnis links, Text rechts ───────────────────────────── */
.mit-verzeichnis{display:grid;grid-template-columns:250px minmax(0,1fr);gap:64px;align-items:start}
@media(max-width:960px){.mit-verzeichnis{grid-template-columns:minmax(0,1fr);gap:32px}}
.verzeichnis{position:sticky;top:calc(var(--kopf-h) + 24px);font-size:15px}
@media(max-width:960px){.verzeichnis{position:static;border:1px solid var(--haar);background:var(--eis);padding:18px 20px}}
.verzeichnis p{font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--blau);margin:0 0 14px}
.verzeichnis ol,.verzeichnis ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--haar)}
@media(max-width:960px){.verzeichnis ol,.verzeichnis ul{border-left:0}}
.verzeichnis a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--leise);text-decoration:none;line-height:1.35}
@media(max-width:960px){.verzeichnis a{padding:8px 0;margin:0;border:0;border-bottom:1px solid var(--haar)}.verzeichnis li:last-child a{border-bottom:0}}
.verzeichnis a:hover{color:var(--tinte)}
.verzeichnis a.an{color:var(--blau);border-left-color:var(--blau);font-weight:500}

/* Fließtext (Ratgeber, Fragen, Rechtliches) */
.text{max-width:46em}
.text > :first-child{margin-top:0}
.text h2{font-size:clamp(24px,2.6vw,32px);margin:60px 0 18px}
.text h3{font:500 20px/1.35 var(--sans);margin:36px 0 10px;color:var(--tinte)}
.text p,.text li{color:#2f3b47}
.text p{margin:0 0 16px}
.text ul,.text ol{margin:0 0 18px;padding-left:1.3em}
.text li{margin:0 0 8px}
.text a{color:var(--blau);text-underline-offset:3px}
.text strong,.text b{color:var(--tinte);font-weight:600}
.text blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:2px solid var(--blau);font:300 22px/1.5 var(--sans);color:var(--tinte)}
.text table{width:100%;border-collapse:collapse;margin:20px 0 28px;font-size:15.5px}
.text th,.text td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--haar);vertical-align:top}
.text th{font-weight:600;color:var(--tinte);border-bottom:2px solid var(--tinte)}
.text .tabelle{overflow-x:auto;-webkit-overflow-scrolling:touch}
.merke{margin:28px 0;padding:20px 22px;background:var(--eis);border-left:3px solid var(--blau)}
.merke > :last-child{margin-bottom:0}
.merke b:first-child{display:block;margin-bottom:6px}

/* Fragen und Antworten offen gesetzt */
.frage{padding:26px 0;border-bottom:1px solid var(--haar)}
.frage:first-child{border-top:1px solid var(--tinte)}
.frage h3{font:500 20px/1.35 var(--sans);margin:0 0 10px}
.frage p:last-child{margin-bottom:0}
.fragen-gruppe + .fragen-gruppe{margin-top:64px}
.fragen-gruppe > h2{margin-top:0}

/* Ablauf mit großen Ziffern und Regeln in zwei Spalten */
.ablauf{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--tinte)}
@media(max-width:860px){.ablauf{grid-template-columns:1fr}}
.ablauf li{padding:30px 30px 8px 0;position:relative}
.ablauf li + li{padding-left:30px;border-left:1px solid var(--haar)}
@media(max-width:860px){.ablauf li,.ablauf li + li{padding:24px 0 22px;border-left:0;border-bottom:1px solid var(--haar)}}
.ablauf .ziffer{font:300 56px/1 var(--sans);color:var(--blau);display:block;margin-bottom:16px}
.ablauf b{display:block;font:500 18px/1.35 var(--sans);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.ablauf p{margin:0;color:var(--leise);font-size:16.5px}
.regeln{display:grid;grid-template-columns:1fr 1fr;margin-top:56px;border-top:1px solid var(--tinte)}
@media(max-width:820px){.regeln{grid-template-columns:1fr}}
.regeln > div{padding:30px 40px 0 0}
.regeln > div + div{padding-left:40px;border-left:1px solid var(--haar)}
@media(max-width:820px){.regeln > div,.regeln > div + div{padding:28px 0 8px;border-left:0}.regeln > div + div{border-top:1px solid var(--haar);margin-top:24px}}
.regeln h3{font:500 13px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--blau);margin:0 0 20px}
.regeln dl{margin:0}
.regeln dt{font:500 19px/1.35 var(--sans);color:var(--tinte);margin:0 0 6px}
.regeln dd{margin:0 0 24px;color:var(--leise);font-size:16.5px}
.weiter{display:inline-block;margin-top:4px;font:500 14.5px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--tinte);text-decoration:none;border-bottom:1px solid var(--tinte);padding-bottom:3px}
.weiter:hover{color:var(--blau);border-bottom-color:var(--blau)}
.sorten{margin:48px 0 0;font:500 14px/2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--leise);display:flex;flex-wrap:wrap;gap:0 22px}
.sorten span{white-space:nowrap}
.sorten .hvo{color:var(--gruen-tief)}

/* Bild neben Text (Themenblöcke) */
.bild-text{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.bild-text.umgekehrt{grid-template-columns:1fr 1.05fr}
.bild-text.umgekehrt figure{order:2}
@media(max-width:900px){.bild-text,.bild-text.umgekehrt{grid-template-columns:1fr;gap:32px}.bild-text.umgekehrt figure{order:0}}
.bild-text figure{margin:0}
.bild-text img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.bild-text figcaption{margin-top:10px;font-size:13px;color:var(--zart)}

/* Kontakt als Knöpfe */
.kontakt{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.kontakt a{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 18px;border:1px solid var(--tinte);border-radius:2px;
  text-decoration:none;color:var(--tinte);font:500 15px/1 var(--sans);transition:background .15s,color .15s}
.kontakt a:hover{background:var(--tinte);color:#fff}
.kontakt a svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kontakt a.tel{background:var(--tinte);border-color:var(--tinte);color:#fff;font-weight:500;letter-spacing:.04em}
.kontakt a.tel:hover{background:var(--blau);border-color:var(--blau)}
.kontakt a.wa svg,.kontakt a.li svg{stroke:none;fill:currentColor}
.kontakt a.wa svg{fill:#1fa855}
.kontakt a.wa:hover svg{fill:#25D366}
@media(max-width:520px){.kontakt a{flex:1 1 calc(50% - 5px);justify-content:center}.kontakt a.tel{flex-basis:100%}}

/* Formulare */
.feld{display:block;margin:0 0 16px;font-weight:500;font-size:15px}
.feld input,.feld select,.feld textarea{display:block;width:100%;margin-top:6px;padding:13px 14px;border:1px solid #c5cfda;border-radius:2px;background:#fff;
  font:400 16px/1.4 var(--sans);color:var(--tinte)}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--blau);box-shadow:0 0 0 3px rgba(31,90,140,.18)}
.meldung{padding:14px 16px;margin:0 0 20px;font-size:15.5px}
.meldung.fehler{background:#fdecea;border:1px solid #f1b8b1;color:#8a1f12}
.meldung.ok{background:#e8f5ed;border:1px solid #b5dcc3;color:#1f5c38}
/* Zugangsformular: auf hellen Seiten dunkle Schrift, im Dialog helle */
.zform{--z-text:var(--tinte);--z-label:var(--tinte);--z-leise:var(--leise);--z-link:var(--blau)}
.zdialog .zform{--z-text:#dbe7f7;--z-label:#c7d6ec;--z-leise:#8ea6c8;--z-link:#a9c4ee}

/* ── Fußzeile: dunkel, alle Wege auf einen Blick ─────────────────────────────── */
.fusszone{background:var(--nacht);color:var(--auf-nacht-leise)}
.fuss-spalten{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:40px;padding:72px 0 44px}
@media(max-width:900px){.fuss-spalten{grid-template-columns:1fr 1fr;gap:36px 28px}}
@media(max-width:520px){.fuss-spalten{grid-template-columns:1fr;padding:52px 0 28px}}
.fuss-spalten h2{font:500 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#fff;margin:0 0 18px}
.fuss-spalten ul{list-style:none;margin:0;padding:0}
.fuss-spalten li{margin:0 0 10px}
.fuss-spalten a{color:var(--auf-nacht);text-decoration:none;font-size:15.5px}
.fuss-spalten a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fuss-spalten .anschrift{font-size:15px;line-height:1.7}
.fuss-spalten .anschrift b{color:#fff;font-weight:500}
.fuss-zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:22px 0 120px;border-top:1px solid var(--haar-nacht);font-size:13.5px}
.fuss-zeile a{color:var(--auf-nacht);text-decoration:none;margin-right:18px}
.fuss-zeile a:hover{text-decoration:underline}
@media(min-width:701px){.fuss-zeile{padding-bottom:36px}}

/* Handy: Leiste unten, erscheint erst, wenn der Knopf oben aus dem Bild ist */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);border-top:1px solid var(--haar);transform:translateY(110%);transition:transform .22s}
.leiste.an{transform:none}
.leiste .knopf{flex:1;justify-content:center;padding:15px 16px}
.leiste .wa{flex:none;width:52px;border-radius:2px;background:#25D366;display:flex;align-items:center;justify-content:center}
@media(max-width:700px){.leiste{display:flex}.wa-rund{display:none!important}}
.wa-rund{position:fixed;right:20px;bottom:20px;z-index:60;width:54px;height:54px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.2)}

/* Zugang als Dialog auf jeder Seite (dunkel) */
.zdialog{border:none;border-radius:4px;padding:0;max-width:600px;width:calc(100% - 32px);background:var(--nacht);color:var(--auf-nacht);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.zdialog::backdrop{background:rgba(15,34,51,.55)}
.zdialog-innen{padding:24px 26px 26px}
.zdialog-kopf{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.zdialog-kopf b{font:300 24px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.zdialog-kopf .zclose{margin-left:auto;background:transparent;border:1px solid var(--haar-nacht);color:#fff;border-radius:2px;width:36px;height:36px;font-size:20px;cursor:pointer}
.zdialog .zlede{margin:0 0 14px;font-size:15px;color:var(--auf-nacht-leise)}

/* Schmales Band über der Kopfleiste für eine aktuelle Nachricht */
.hinweisband{background:var(--blau-hell);color:var(--tinte);font-size:14.5px;line-height:1.45;text-align:center;padding:9px 16px}
.hinweisband a{color:var(--blau);font-weight:500;text-decoration:none;border-bottom:1px solid var(--blau)}
.hinweisband a:hover{color:var(--tinte);border-bottom-color:var(--tinte)}
.entwurf{background:var(--licht);color:var(--nacht);text-align:center;font:600 13px/1.4 var(--sans);padding:7px 12px}
.entwurf a{color:var(--nacht)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
@media print{.kopfleiste,.leiste,.wa-rund,.fusszone .fuss-spalten,.verzeichnis{display:none!important}body{background:#fff}}