/* ---------- Schrift ----------
   Poppins liegt eingebettet in dieser Datei und wird NICHT von Google geladen.
   Ein Aufruf von fonts.googleapis.com würde die IP-Adresse jedes Besuchers an
   Google in die USA übertragen, bevor irgendetwas angeklickt ist — ohne
   Einwilligung und ohne Rechtsgrundlage. Auf eh.tax ist das am 15.09.2026 aus
   demselben Grund abgestellt worden.
   Auf dem Server liegen die drei Schnitte als eigene Dateien unter /assets/;
   der Lizenztext der SIL Open Font License gehört daneben. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/poppins-400.woff) format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/poppins-500.woff) format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/poppins-700.woff) format('woff')}

:root{
  color-scheme: light;
  /* CI eh.tax, verbindlich */
  --blau:#456890; --grau:#575756; --hellgrau:#dadada; --weiss:#ffffff; --rot:#c1272d;
  /* Sekundärakzent der Spezialdomain — nur Markierungen, Linien, Schaubilder */
  --akzent:#2f7a72; --akzent-tief:#245f59; --akzent-hell:#e7f1ef; --akzent-zart:#f3f9f8;
  /* abgeleitete Töne: nur Flächen, Linien, Hover */
  --blau-tief:#33506f; --blau-dark:#3a5a7c; --blau-hell:#eef2f6; --blau-zart:#f7f9fb;
  --linie:#e6e9ec; --linie-stark:#d6dbe0; --grau-text:#5c5c5b;

  --font-bold:"MADE Evolve Sans Bold","Poppins SemiBold",Poppins,"Century Gothic","Segoe UI",system-ui,sans-serif;
  --font-text:"MADE Evolve Sans Medium",Poppins,"Century Gothic","Segoe UI",system-ui,sans-serif;

  --fs-display:clamp(31px,7.2vw,58px);
  --fs-h1:clamp(27px,5.4vw,44px);
  --fs-h2:clamp(21px,3.4vw,31px);
  --fs-h3:clamp(17px,2.1vw,19px);
  --fs-lead:clamp(17.5px,2.5vw,21px);
  --fs-body:17px;
  --fs-small:15px;
  --fs-micro:12px;

  --wrap:1180px;
  --pad:clamp(20px,5.2vw,44px);
  --sec:clamp(46px,8vw,108px);
  --r:14px; --r-gross:28px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--weiss);color:var(--grau-text);font-family:var(--font-text);
     font-size:var(--fs-body);line-height:1.65;-webkit-font-smoothing:antialiased;
     overflow-x:hidden;padding-bottom:0}
img{max-width:100%;display:block}
body,p,li,td,th,dd,dt,figcaption{overflow-wrap:break-word;hyphens:auto}
h1,h2,h3,h4,summary{overflow-wrap:break-word;hyphens:auto}
h1,h2,h3,h4{font-family:var(--font-bold);font-weight:700;color:var(--blau-tief);
  line-height:1.12;letter-spacing:-.012em;text-wrap:balance;margin:0}
strong,b,th{font-family:var(--font-bold);font-weight:700}
a{color:var(--blau);text-decoration:none}
a:hover{color:var(--blau-tief)}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.2em}
li{margin:0 0 .5em}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}

/* ---------- Raster ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wrap--eng{max-width:820px}
.measure{max-width:62ch}
.sec{padding:var(--sec) 0}
.sec--zart{background:var(--blau-zart)}
.sec--hell{background:var(--blau-hell)}
.sec--akzent{background:var(--akzent-zart)}
.sec--tief{background:var(--blau-tief);color:#fff}
.sec--tief h1,.sec--tief h2,.sec--tief h3{color:#fff}
/* Fließtextlinks im dunklen Block werden aufgehellt — Buttons und Karten
   bringen ihre eigene Farbgebung mit und dürfen nicht überschrieben werden.
   Ohne die Ausnahme stand weiße Schrift auf weißem Button.
   Wortgleich mit claude/baukasten/shell.html. */
.sec--tief a:not(.btn):not(.karte):not(.post){color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.sec--linie{border-top:1px solid var(--linie)}
.sec__kopf{max-width:60ch;margin:0 0 clamp(26px,3.4vw,46px)}
.sec__kopf h2{font-size:var(--fs-h2);margin:0 0 .5em}
.sec__kopf p{margin:0;font-size:var(--fs-lead);line-height:1.5}
.sec--tief .sec__kopf p{color:#dde5ee}

.eyebrow{display:block;font-family:var(--font-bold);font-size:var(--fs-micro);letter-spacing:.15em;
  text-transform:uppercase;color:var(--akzent);margin:0 0 1em}
.sec--tief .eyebrow{color:#a3d3cc}  /* 5,06:1 auf #33506f — #8fc4bc lag mit 4,29:1 unter der Schwelle */
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--grau-text)}
.sec--tief .lead{color:#dde5ee}
.small{font-size:var(--fs-small)}
.micro{font-size:var(--fs-micro);line-height:1.55;color:var(--grau)}
.zahlen{font-variant-numeric:tabular-nums}

.grid{display:grid;gap:clamp(16px,2.2vw,26px)}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr 1fr}
@media (min-width:620px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
/* align-items:start, nicht center — bei eh.tax hat center die kürzere Spalte
   vertikal zentriert und in den Formularen 838 px Leerraum erzeugt. */
.split{display:grid;gap:clamp(26px,4vw,58px);grid-template-columns:1fr;align-items:start}
.grid>*,.split>*,.zg>*,.karte,.person__txt,.tblwrap{min-width:0}
.person__txt{overflow-wrap:anywhere}
@media (min-width:920px){
  .split{grid-template-columns:1fr 1fr}
  .split--text{grid-template-columns:1.15fr .85fr}
  .split--bild{grid-template-columns:.85fr 1.15fr}
}

/* ---------- Bogen ---------- */
.bogen{display:block;width:min(58%,300px);color:var(--blau);margin:1.2em 0 0}
.sec--tief .bogen{color:#7f9dbd}

/* ---------- Grafikfläche ---------- */
.flaeche{position:relative;background:var(--blau-hell);color:var(--blau);
  border-radius:var(--r-gross) 4px var(--r-gross) 4px;overflow:hidden;min-height:210px;display:block}
.flaeche--hoch{min-height:clamp(220px,42vw,410px)}
.flaeche--tief{background:var(--blau-tief);color:#fff}
.flaeche svg{position:absolute;left:-3%;bottom:-3%;width:112%;height:auto;opacity:.17}
.flaeche--tief svg{opacity:.26}
.flaeche img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-bold);font-size:16px;line-height:1.2;
  background:var(--blau);color:#fff;padding:.95em 1.6em;border-radius:999px;
  border:2px solid var(--blau);cursor:pointer;transition:background .18s,border-color .18s,color .18s;
  min-height:50px;text-align:center}
.btn:hover{background:var(--blau-tief);border-color:var(--blau-tief);color:#fff}
.btn--linie{background:transparent;color:var(--blau)}
.btn--linie:hover{background:var(--blau-hell);color:var(--blau-tief)}
.btn--weiss{background:#fff;color:var(--blau-tief);border-color:#fff}
.btn--weiss:hover{background:var(--hellgrau);border-color:var(--hellgrau);color:var(--blau-tief)}
.btn--hell{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--hell:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.btnzeile{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.7em}
@media (max-width:479px){.btnzeile .btn{width:100%}}
.textlink{font-family:var(--font-bold);font-size:var(--fs-small);display:inline-flex;gap:.4em;align-items:center}

/* ---------- Kopfzone ---------- */
.kopfzone{padding:clamp(30px,5vw,62px) 0 clamp(26px,4vw,46px)}
.krumen{font-size:var(--fs-micro);color:var(--grau);margin:0 0 1.4em;letter-spacing:.02em}
.krumen a{color:var(--grau)}
.krumen a:hover{color:var(--akzent)}
.kopfzone h1{font-size:var(--fs-h1);margin:0 0 .55em;max-width:22ch}
.kopfzone .lead{max-width:56ch}
.kopfzone--breit h1{max-width:30ch}

/* ---------- Bilder ---------- */
.portrait{width:104px;height:104px;border-radius:999px;object-fit:cover;flex:0 0 104px;
  background:var(--blau-hell)}
.portrait--gross{width:100%;max-width:320px;height:auto;aspect-ratio:1;
  border-radius:var(--r-gross) 4px var(--r-gross) 4px;object-fit:cover}
.person{display:flex;gap:18px;align-items:flex-start}
.person__txt{min-width:0}
.initialen{width:104px;height:104px;border-radius:999px;flex:0 0 104px;background:var(--blau-hell);
  color:var(--blau);font-family:var(--font-bold);font-size:30px;display:grid;place-items:center}
.initialen.portrait--gross{width:100%;max-width:320px;height:auto;aspect-ratio:1;flex:none;
  border-radius:var(--r-gross) 4px var(--r-gross) 4px;font-size:clamp(44px,7vw,66px);
  letter-spacing:.02em}
.avatarzeile{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  padding-top:26px;margin-top:6px;border-top:1px solid var(--linie)}
.siegel{height:58px;width:auto;flex:0 0 auto}
.siegel--breit{height:40px}
@media (min-width:700px){.siegel{height:70px}.siegel--breit{height:46px}}

/* ---------- Beweisleiste ---------- */
.beweise{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  padding:20px 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.beweis{display:flex;align-items:center;gap:.6em;font-size:var(--fs-small)}
.beweis__mark{font-family:var(--font-bold);color:var(--akzent);font-size:13px;letter-spacing:.06em;
  border:1.5px solid var(--akzent);border-radius:5px;padding:.25em .5em;line-height:1;white-space:nowrap}

/* ---------- Kennzahlen ---------- */
.kz{display:grid;gap:0;grid-template-columns:1fr 1fr;border-top:1px solid var(--linie)}
@media (min-width:760px){.kz{grid-template-columns:repeat(4,1fr)}}
.kz__i{padding:22px 20px 22px 0;border-bottom:1px solid var(--linie)}
.kz__w{display:block;font-family:var(--font-bold);color:var(--blau-tief);
  font-size:clamp(24px,3.4vw,34px);line-height:1.05;letter-spacing:-.02em}
.kz__l{display:block;font-size:var(--fs-micro);color:var(--grau);margin-top:.5em;line-height:1.5}
.sec--tief .kz{border-color:rgba(255,255,255,.22)}
.sec--tief .kz__i{border-color:rgba(255,255,255,.22)}
.sec--tief .kz__w{color:#fff}
.sec--tief .kz__l{color:#c3d3e3}

/* ---------- Karten ---------- */
.karte{background:#fff;border:1px solid var(--linie);border-radius:var(--r);
  padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:.6em}
.karte h3{font-size:var(--fs-h3)}
.karte p{margin:0;font-size:var(--fs-small)}
.karte__mehr{margin-top:auto;padding-top:.8em;font-family:var(--font-bold);font-size:var(--fs-small);color:var(--akzent)}
a.karte{transition:border-color .18s,transform .18s}
a.karte:hover{border-color:var(--akzent);transform:translateY(-2px)}
.karte--zart{background:var(--blau-zart);border-color:transparent}
.karte--rand{border-left:3px solid var(--akzent)}
.karte--tief{background:var(--blau-tief);border-color:transparent;color:#fff}
.karte--tief h3{color:#fff}
.karte--tief p{color:#dde5ee}
.karte__nr{font-family:var(--font-bold);font-size:var(--fs-micro);letter-spacing:.14em;color:var(--akzent);
  text-transform:uppercase}

/* ---------- Themenraster ---------- */
.zg{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden}
@media (min-width:640px){.zg{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.zg{grid-template-columns:repeat(3,1fr)}}
.zg a{background:#fff;padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:.5em;
  transition:background .18s}
.zg a:hover{background:var(--akzent-zart)}
.zg h3{font-size:var(--fs-h3)}
.zg p{font-size:var(--fs-small);margin:0;color:var(--grau-text)}
.zg .mehr{margin-top:auto;padding-top:1em;font-family:var(--font-bold);font-size:var(--fs-small);color:var(--akzent)}

/* ---------- Icon-Liste ---------- */
.featurelist{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,2.4vw,28px)}
@media (min-width:760px){.featurelist--2{grid-template-columns:1fr 1fr}}
.feature{display:flex;gap:16px;align-items:flex-start;margin:0}
.feature__icon{flex:0 0 46px;height:46px;width:46px;border-radius:999px;background:var(--akzent-hell);
  color:var(--akzent-tief);font-family:var(--font-bold);font-size:18px;display:grid;place-items:center}
  /* --akzent-tief statt --akzent: 6,38:1 statt 4,39:1 auf --akzent-hell */
.sec--tief .feature__icon{background:rgba(255,255,255,.15);color:#fff}
.feature__title{font-family:var(--font-bold);color:var(--blau-tief);font-size:var(--fs-h3);margin:.1em 0 .25em}
.sec--tief .feature__title{color:#fff}
.feature__text{font-size:var(--fs-small);margin:0}
.sec--tief .feature__text{color:#dde5ee}

/* ---------- Schritte ---------- */
.steps{list-style:none;counter-reset:s;margin:0;padding:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:32px minmax(0,1fr);gap:6px 16px;
  align-items:start;padding:20px 0;border-top:1px solid var(--linie);margin:0}
.steps li:last-child{border-bottom:1px solid var(--linie)}
.steps li::before{content:counter(s);font-family:var(--font-bold);color:var(--akzent);font-size:15px;
  width:32px;height:32px;border-radius:999px;background:var(--akzent-hell);display:grid;place-items:center;
  line-height:1;grid-column:1;grid-row:1}
.steps b{display:block;color:var(--blau-tief);font-size:var(--fs-h3);grid-column:2;grid-row:1}
.steps p{margin:0;font-size:var(--fs-small);grid-column:2}

/* ---------- Klammer ---------- */
.klammer{position:relative;padding:clamp(20px,3vw,30px) clamp(26px,4vw,42px);margin:0;
  max-width:min(32ch,100%)}
.klammer p{overflow-wrap:normal;hyphens:auto;margin:0;font-family:var(--font-bold);
  font-size:clamp(19px,2.4vw,27px);line-height:1.28;letter-spacing:-.01em}
.klammer::before,.klammer::after{content:"";position:absolute;top:0;bottom:0;width:18px;
  border-top:2.5px solid currentColor;border-bottom:2.5px solid currentColor}
.klammer::before{left:0;border-left:2.5px solid currentColor}
.klammer::after{right:0;border-right:2.5px solid currentColor}
.klammer--blau{color:var(--blau)}
.klammer--weiss{color:#fff}

/* ---------- Tabelle ---------- */
.tblwrap{overflow-x:auto;margin:0 0 1.2em;-webkit-overflow-scrolling:touch}
table.eh{border-collapse:collapse;width:100%;min-width:420px;font-size:var(--fs-small);
  font-variant-numeric:tabular-nums}
table.eh th{background:var(--blau);color:#fff;text-align:left;padding:.8em .9em;
  font-size:var(--fs-micro);letter-spacing:.07em;text-transform:uppercase;font-weight:700}
table.eh td{padding:.8em .9em;border-bottom:1px solid var(--linie)}
table.eh td+td,table.eh th+th{text-align:right}
table.eh tr.summe td{font-family:var(--font-bold);color:var(--blau-tief);border-bottom:2px solid var(--akzent)}
table.eh--text td+td,table.eh--text th+th{text-align:left}
table.eh--text td{vertical-align:top}
table.eh--text tbody tr:nth-child(even) td{background:var(--blau-zart)}
table.eh--eng{min-width:0}
table.eh--eng td:first-child{width:58%}

/* ---------- Auftragsbedingungen ----------
   Eigene Nummerierung, weil die Absatzziffern der AAB Teil des Rechtstextes
   sind und beim Zitieren stimmen müssen. */
.aab{list-style:none;counter-reset:abs;margin:0 0 1.6em;padding:0}
.aab>li{counter-increment:abs;position:relative;padding-left:2.4em;margin:0 0 .9em}
.aab>li::before{content:"(" counter(abs) ")";position:absolute;left:0;top:0;
  font-family:var(--font-bold);color:var(--akzent);font-variant-numeric:tabular-nums}
.aab--buchstaben{counter-reset:buchst;margin:.9em 0 0}
.aab--buchstaben>li{counter-increment:buchst}
.aab--buchstaben>li::before{content:counter(buchst,lower-alpha) ")"}
.aab-inhalt{border:1px solid var(--linie);border-radius:var(--r);
  padding:clamp(18px,2.4vw,26px);margin:0 0 2.2em;background:var(--blau-zart)}
.aab-inhalt__titel{font-family:var(--font-bold);color:var(--blau-tief);
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;margin:0 0 .9em}
.aab-inhalt ol{list-style:none;margin:0;padding:0;font-size:var(--fs-small);
  display:grid;gap:.35em}
@media (min-width:760px){.aab-inhalt ol{grid-template-columns:1fr 1fr;gap:.35em 26px}}
.aab-inhalt li{margin:0}
.aab-inhalt a{display:flex;gap:.7em;align-items:baseline;padding:.2em 0;color:var(--grau-text)}
.aab-inhalt a:hover{color:var(--akzent)}
.aab-inhalt a span{flex:0 0 1.6em;font-family:var(--font-bold);color:var(--akzent);
  font-variant-numeric:tabular-nums}
.artikel h2[id^="ziffer-"]{scroll-margin-top:96px}

/* ---------- Callout ---------- */
.callout{background:var(--akzent-zart);border-left:3px solid var(--akzent);padding:20px 22px;
  border-radius:0 var(--r) var(--r) 0;font-size:var(--fs-small)}
.callout--risk{border-left-color:var(--rot);background:#fdf4f4}
.callout--warnung{border-left-color:#b5762f;background:#fdf6ec}
.callout--warnung b{color:#8a5820}
.callout p{margin:0 0 .7em}.callout p:last-child{margin:0}
.callout b{color:var(--akzent-tief)}
.callout--risk b{color:var(--rot)}
.sec--tief .callout{background:rgba(255,255,255,.08);border-left-color:#fff;color:#eaf0f6}
.sec--tief .callout b{color:#fff}
.sec--tief .micro,.sec--tief .small{color:#c3d1e0}
.sec--tief .callout .micro{color:#c9d6e4}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;
  font-family:var(--font-bold);color:var(--blau-tief);font-size:var(--fs-h3);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:26px;width:11px;height:11px;
  border-right:2px solid var(--akzent);border-bottom:2px solid var(--akzent);transform:rotate(45deg);
  transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--akzent-tief)}
.faq .a{padding:0 0 20px;font-size:var(--fs-small);max-width:70ch}
.faq__kurz{font-family:var(--font-bold);color:var(--blau-tief);font-size:16px;line-height:1.5;
  border-left:3px solid var(--akzent);padding-left:14px;margin:0 0 .9em}
.faq .a p:last-child{margin:0}

/* ---------- Kopf ---------- */
.topbar{display:none;background:var(--akzent-zart);border-bottom:1px solid var(--linie);
  font-size:var(--fs-micro);color:var(--grau)}
@media (min-width:900px){.topbar{display:block}}
.topbar .wrap{display:flex;gap:24px;align-items:center;padding-top:9px;padding-bottom:9px}
.topbar .rechts{margin-left:auto;display:flex;gap:22px}
.topbar a{color:var(--grau)}
.topbar a:hover{color:var(--akzent)}

header.site{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linie);
  box-shadow:inset 0 -3px 0 0 var(--akzent)}
header.site .wrap{display:flex;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:32px;width:auto}
@media (min-width:900px){.logo img{height:36px}}
/* Wortmarke der Spezialdomain neben dem Kanzleilogo */
.marke{display:none;padding-left:12px;border-left:1px solid var(--linie-stark);
  font-family:var(--font-bold);font-size:12px;line-height:1.25;color:var(--akzent);
  letter-spacing:.04em;text-transform:uppercase}
.marke span{display:block;color:var(--grau);font-size:10.5px;letter-spacing:.12em}
@media (min-width:560px){.marke{display:block}}
/* Ab 1100 px steht die Navigation neben Logo und Wortmarke. In der 1180er-Zeile
   passen Logo, zweizeilige Wortmarke und volle Navigation nicht nebeneinander —
   bisher wurde die Wortmarke dabei stillschweigend zusammengedrückt und ab
   1100 px von der Navigation überlagert. Deshalb steht die Wortmarke dort eine
   Spur kleiner, und .logo behält seine Breite, statt zu schrumpfen. */
@media (min-width:1100px){
  .marke{font-size:11px;letter-spacing:.02em;padding-left:10px}
  .marke span{font-size:9.5px;letter-spacing:.08em}
}
/* Zwischen 1100 und 1180 px reicht es auch dann nicht: dort steht nur die
   erste Zeile der Wortmarke. */
@media (min-width:1100px) and (max-width:1179px){
  .marke span{display:none}
}
nav.haupt{display:none}
@media (min-width:1100px){
  nav.haupt{display:flex;align-items:center;gap:2px;margin-left:auto}
  .logo{flex:0 0 auto}
  nav.haupt>div{position:relative}
  nav.haupt>div>a,nav.haupt button.nav{font-family:var(--font-bold);font-size:15px;color:var(--grau-text);
    background:none;border:0;padding:.65em .7em;border-radius:8px;cursor:pointer;
    display:inline-flex;align-items:center;gap:.3em;white-space:nowrap}
  nav.haupt>div>a,nav.haupt button.nav{padding:.65em .45em;font-size:14.5px}
  nav.haupt a.kopf-cta{margin-left:8px;padding:.7em 1em}
  nav.haupt>div>a:hover,nav.haupt button.nav:hover,nav.haupt button.nav[aria-expanded="true"]{color:var(--akzent);background:var(--akzent-hell)}
  nav.haupt>div>a.aktiv{color:var(--akzent)}
  nav.haupt a.kopf-cta{display:inline-flex;align-items:center;background:var(--blau);color:#fff;
    border-radius:999px;padding:.7em 1.2em;margin-left:12px;font-family:var(--font-bold);font-size:15px}
  nav.haupt a.kopf-cta:hover{background:var(--blau-tief);color:#fff}
  .drop{position:absolute;top:calc(100% + 10px);left:0;min-width:320px;background:#fff;
    border:1px solid var(--linie);border-radius:var(--r);padding:10px;display:none;
    box-shadow:0 16px 40px rgba(51,80,111,.13)}
  .drop.auf{display:block}
  .drop a{display:block;font-size:15px;padding:.55em .7em;border-radius:8px;color:var(--grau-text)}
  .drop a:hover{background:var(--akzent-hell);color:var(--akzent)}
  .drop .titel{display:block;font-family:var(--font-bold);font-size:var(--fs-micro);letter-spacing:.14em;
    text-transform:uppercase;color:var(--hellgrau);padding:.7em .7em .25em}
}
.kopf-tel{margin-left:auto;display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-bold);
  font-size:15px;color:var(--blau)}
@media (min-width:1100px){.kopf-tel{display:none}}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;background:none;
  border:1px solid var(--linie-stark);border-radius:10px;width:46px;height:46px;align-items:center;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--blau-tief);transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:1100px){.burger{display:none}}

.mobilnav{position:fixed;inset:0;z-index:90;background:#fff;overflow-y:auto;display:none;
  padding:16px 0 120px;-webkit-overflow-scrolling:touch}
.mobilnav.auf{display:block}
.mobilnav__kopf{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--linie)}
.mobilnav__kopf .logo{margin-right:auto}
.mobilnav__gruppe{border-bottom:1px solid var(--linie);padding:6px 0}
.mobilnav__gruppe>a,.mobilnav__gruppe>button{display:flex;width:100%;align-items:center;
  font-family:var(--font-bold);font-size:19px;color:var(--blau-tief);background:none;border:0;
  padding:16px 2px;cursor:pointer;text-align:left;min-height:56px}
.mobilnav__gruppe>button::after{content:"";margin-left:auto;width:10px;height:10px;
  border-right:2px solid var(--akzent);border-bottom:2px solid var(--akzent);transform:rotate(45deg);
  transition:transform .2s}
.mobilnav__gruppe>button[aria-expanded="true"]::after{transform:rotate(-135deg)}
.mobilnav__sub{display:none;padding:0 0 12px 2px}
.mobilnav__sub.auf{display:block}
.mobilnav__sub a{display:block;font-size:16px;color:var(--grau-text);padding:12px 2px;min-height:44px}
.mobilnav__sub .titel{display:block;font-family:var(--font-bold);font-size:var(--fs-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--hellgrau);padding:14px 2px 2px}
.mobilnav__fuss{padding-top:26px;display:grid;gap:12px}

.aktionsleiste{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);border-top:1px solid var(--linie);
  display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom))}
@media (min-width:1100px){.aktionsleiste{display:none}}
.aktionsleiste .btn{font-size:15px;padding:.75em 1em;min-height:48px}

/* ---------- Fuß ---------- */
footer.site{background:var(--blau-tief);color:#dde5ee;margin-bottom:0}
footer.site a{color:#fff}
footer.site a:hover{color:var(--hellgrau)}
footer.site h2{color:#fff;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.15em;
  margin:0 0 1.1em;font-family:var(--font-bold)}
.fgrid{display:grid;gap:32px;grid-template-columns:1fr;padding:clamp(40px,6vw,72px) 0 32px}
@media (min-width:620px){.fgrid{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.fgrid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.fgrid ul{list-style:none;padding:0;margin:0;font-size:var(--fs-small)}
.fgrid li{margin:0 0 .6em}
.fband{border-top:1px solid rgba(255,255,255,.2)}
.fband .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  padding-top:18px;padding-bottom:calc(24px + env(safe-area-inset-bottom));font-size:var(--fs-micro)}
.fband .url{font-family:var(--font-bold);letter-spacing:.06em}
@media (min-width:760px){.fband .url{margin-left:auto}}
@media (max-width:1099px){footer.site{padding-bottom:76px}}

/* ---------- Beiträge ---------- */
.post{border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;display:flex;
  flex-direction:column;background:#fff;transition:border-color .18s,transform .18s}
a.post:hover{border-color:var(--akzent);transform:translateY(-2px)}
.post__body{padding:22px;display:flex;flex-direction:column;gap:.55em;flex:1}
.post__meta{font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--grau);
  font-family:var(--font-bold)}
.post h3{font-size:var(--fs-h3)}
.post p{font-size:var(--fs-small);margin:0}
.post__mehr{margin-top:auto;padding-top:.8em;font-family:var(--font-bold);font-size:var(--fs-small);color:var(--akzent)}
.artikel{max-width:66ch;font-size:17.5px}
.artikel>p:first-of-type{font-size:var(--fs-lead);line-height:1.5;color:var(--grau-text)}
.artikel h2{font-size:var(--fs-h2);margin:1.9em 0 .55em}
.artikel h3{font-size:var(--fs-h3);margin:1.6em 0 .35em}
.artikel .tblwrap,.artikel .callout{margin-bottom:1.4em}
.quellen{font-size:var(--fs-small)}

/* ---------- Schaubilder ----------
   Selbst gezeichnete SVG-Grafiken in den Hausfarben. Zeichenfläche 440
   Einheiten breit, angezeigt bis 560 px — so bleibt die Beschriftung auch
   auf einem 390-px-Bildschirm lesbar. */
.schaubild{margin:2.2em 0;padding:0}
.schaubild svg{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;
  background:#fff;border:1px solid var(--linie);border-radius:var(--r);
  font-family:var(--font-text)}
.schaubild svg .b{font-family:var(--font-bold);font-weight:700}
.schaubild figcaption{font-size:var(--fs-small);line-height:1.55;color:var(--grau-text);
  max-width:560px;margin:.9em auto 0;padding-left:14px;border-left:3px solid var(--akzent)}
.artikel .schaubild{margin:2.4em 0}
.kachelbild{background:var(--akzent-zart);border-bottom:1px solid var(--linie)}
.kachelbild svg{display:block;width:100%;height:auto}

/* ---------- Formular ---------- */
.form{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:560px){.form{grid-template-columns:1fr 1fr}}
.form label{font-family:var(--font-bold);font-size:var(--fs-small);color:var(--blau-tief);
  display:block;margin-bottom:.4em}
.feld{display:flex;flex-direction:column}
.breit{grid-column:1/-1}
.form input,.form select,.form textarea{font:inherit;font-size:16px;padding:.85em .9em;
  border:1px solid var(--linie-stark);border-radius:10px;background:#fff;color:var(--grau-text);
  width:100%;min-height:50px}
.form textarea{min-height:120px}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--akzent);outline:none;
  box-shadow:0 0 0 3px var(--akzent-hell)}
.form .check{display:flex;gap:.7em;align-items:flex-start;font-size:var(--fs-small)}
.form .check input{width:22px;min-height:22px;height:22px;margin-top:.15em;flex:0 0 22px}
.hinweis{font-size:var(--fs-micro);color:var(--grau)}
.honigtopf{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}