/* ══════════════════════════════════════════════════════════════
   Bandel — Gestaltung (Entwurf K, 31.08.2026)
   Server-gerendert, keine Fremd-Hosts, Schriften lokal.
   ══════════════════════════════════════════════════════════════ */

/* ── GeneratePress-Reset entschärfen ────────────────────────────
   GP setzt button{background:#55555e;padding:10px 20px;border:1px solid transparent}.
   Bei border-box bleibt von einem 46-px-Knopf innen 2 px übrig und das Icon
   verschwindet (Skill generatepress-pro §7b/§9 Nr. 14). Deshalb hier zurücksetzen,
   bevor unsere eigenen Knopfregeln greifen. */
button{background:none;border:0;padding:0;color:inherit;font:inherit;line-height:inherit}
input[type=submit],button[type=submit]{background:none;border:0;padding:0}

/* GP-Gerüst tritt zurück: unsere Templates liefern den Rahmen selbst. */
#page,#content,.site-content,.container.grid-container{max-width:none;padding:0;margin:0}
.site-content{display:block}
.entry-content{margin:0}
.site-header,.main-navigation,.site-footer,.entry-header,.entry-meta,
.generate-back-to-top,.sidebar,#right-sidebar,#left-sidebar{display:none !important}
body{overflow-x:hidden}

@font-face{font-family:"Sora";src:url("../fonts/sora.woff2") format("woff2-variations");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken";src:url("../fonts/hanken.woff2") format("woff2-variations");font-weight:300 800;font-style:normal;font-display:swap}

:root{
  --papier:#f0f1ee;
  --flaeche:#e4e7e2;
  --weiss:#fbfcfa;
  --tinte:#1a1c19;

  --gruen:#177245;
  --gruen-tief:#115c37;
  --gruen-dunkel:#0d452a;
  --gruen-hell:#e3f0e8;
  --gruen-rand:#a8cfba;
  --gruen-auf-dunkel:#dcefe3;

  --rot:#b3261e;
  --rot-tief:#8f1d17;
  --rot-hell:#fbeae8;
  --rot-rand:#e6b6b1;

  --grau:#5c635c;
  --linie:#d5d9d2;
  --wrap:1200px;
  --text:"Hanken",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Sora","Hanken",system-ui,sans-serif;
  --r:10px;
  --r-klein:8px;
  --schatten:0 1px 2px rgba(26,28,25,.05), 0 10px 26px -14px rgba(26,28,25,.20);
  --schatten-hoch:0 2px 4px rgba(26,28,25,.06), 0 20px 42px -18px rgba(26,28,25,.28);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--text);font-size:17px;line-height:1.62;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:0}
section{padding-block:92px;padding-inline:28px}
.kopf .wrap,.fuss .wrap{padding-inline:28px}
:focus-visible{outline:3px solid var(--gruen);outline-offset:2px;border-radius:3px}

/* ════════ Kopf ════════ */
.kopf{position:sticky;top:0;z-index:40;background:var(--papier);border-bottom:1px solid var(--linie)}
.kopf-in{display:flex;align-items:center;gap:24px;height:72px}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.marke img{height:38px;width:auto}
.marke b{font-family:var(--display);font-size:15.5px;font-weight:600;letter-spacing:-0.02em;line-height:1.15}
.marke span{display:block;font-family:var(--text);font-size:12.5px;color:var(--grau);font-weight:400;letter-spacing:0}
.kopf-nav{display:flex;align-items:center;gap:26px;margin-left:auto}

/* ════════ Bedienelemente ════════ */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 24px;border:1.5px solid var(--gruen);background:var(--gruen);color:#fff;font-family:var(--text);font-size:16.5px;font-weight:700;text-decoration:none;white-space:nowrap;border-radius:var(--r);cursor:pointer;transition:background .16s ease,transform .12s cubic-bezier(.16,1,.3,1)}
.knopf:hover{background:var(--gruen-tief);border-color:var(--gruen-tief);transform:translateY(-1px)}
.knopf:active{transform:translateY(1px)}
.knopf:disabled{background:#b4bdb6;border-color:#b4bdb6;color:#454b46;cursor:not-allowed;transform:none}
.knopf svg{flex-shrink:0}
.knopf--klein{padding:10px 17px;font-size:15px;border-radius:var(--r-klein)}
.knopf--linie{background:transparent;color:var(--tinte);border-color:#a9b1aa;box-shadow:none}
.knopf--linie:hover{background:var(--tinte);border-color:var(--tinte);color:var(--papier)}
.knopf--hell{background:#fff;border-color:#fff;color:var(--gruen-dunkel);box-shadow:none}
.knopf--hell:hover{background:var(--gruen-hell);border-color:var(--gruen-hell);color:var(--gruen-dunkel)}

/* Medaillon: Icon im getönten Kreis */
.med{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--gruen-hell);color:var(--gruen-tief)}
.med--rot{background:#fff;color:var(--rot)}
.med--weiss{background:rgba(255,255,255,.16);color:#fff}

/* ════════ Aufnahme ════════ */
.auf-sek{padding-top:56px;padding-bottom:80px}
.auf-in{display:grid;grid-template-columns:0.84fr 1.16fr;gap:48px;align-items:stretch}
.auf-links{display:flex;flex-direction:column}
h1{font-family:var(--display);font-size:clamp(36px,4.6vw,58px);line-height:1.04;letter-spacing:-0.036em;font-weight:600;max-width:11ch}
.auf-sub{margin-top:18px;font-size:19px;color:var(--grau);max-width:420px;line-height:1.55}
.rufkasten{margin-top:28px;background:var(--tinte);color:#fff;border-radius:var(--r);padding:24px 26px 26px;position:relative;overflow:hidden;box-shadow:var(--schatten)}
.rufkasten p{position:relative;font-size:15px;color:#fff;margin-bottom:4px}
.rufnummer{position:relative;display:inline-block;font-family:var(--display);font-size:clamp(28px,3.3vw,38px);font-weight:600;letter-spacing:-0.035em;color:#fff;text-decoration:none;font-variant-numeric:tabular-nums;line-height:1.15}
.rufnummer:hover{text-decoration:underline;text-decoration-color:var(--gruen);text-decoration-thickness:3px;text-underline-offset:5px}
.rufkasten small{position:relative;display:block;margin-top:10px;font-size:14.5px;color:#fff;line-height:1.5;max-width:520px}
.wer{margin-top:22px;display:flex;gap:15px;align-items:center}
.wer img{width:78px;height:78px;object-fit:cover;border-radius:50%;flex-shrink:0;background:var(--flaeche)}
.wer p{font-size:15.5px;color:var(--grau);line-height:1.5}
.wer b{color:var(--tinte);display:block;font-size:16.5px}
/* fuellt die linke Spalte bis auf Formularhoehe */
.merkmale{margin-top:26px;flex:1;display:grid;gap:12px;grid-auto-rows:1fr;align-content:stretch}
.merkmal{display:flex;gap:14px;align-items:center;background:var(--weiss);border-radius:var(--r);padding:18px 20px;min-height:86px;box-shadow:var(--schatten)}
.merkmal--gruen{background:var(--gruen-hell);box-shadow:none;border:1.5px solid var(--gruen-rand)}
.merkmal .med{width:38px;height:38px}
.merkmal h2{font-family:var(--display);font-size:17.5px;font-weight:600;letter-spacing:-0.022em;margin-bottom:4px;line-height:1.25}
.merkmal--gruen h2{color:var(--gruen-dunkel)}
.merkmal p{font-size:15px;color:var(--grau);line-height:1.5;max-width:460px}
.merkmal--gruen p{color:#2c5340}
.merkmal a{color:var(--gruen-tief);font-weight:700;text-decoration:none;border-bottom:2px solid var(--gruen-rand);transition:border-color .18s ease}
.merkmal a:hover{border-color:var(--gruen-tief)}

/* ════════ MailForms Lite 3645, echte Klassen des Plugins ════════ */
.melde{background:var(--weiss);border-radius:var(--r);padding:30px 32px 34px;box-shadow:var(--schatten);display:flex;flex-direction:column}
.melde-kopf h2{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-0.025em;margin-bottom:6px}
.melde-kopf p{font-size:15.5px;color:var(--grau);margin-bottom:24px;max-width:520px}
.mailforms-form{display:grid;gap:18px}
.mailforms-field{display:grid;gap:7px}
.mailforms-field label{font-size:14.5px;font-weight:700;letter-spacing:-0.005em}
.mailforms-required-indicator{color:var(--rot);margin-left:2px}
.mailforms-field input[type=text],.mailforms-field input[type=email],.mailforms-field textarea{
  width:100%;font-family:var(--text);font-size:16.5px;color:var(--tinte);background:var(--papier);
  border:1.5px solid #c3c9c2;border-radius:var(--r-klein);padding:13px 15px;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
.mailforms-field input::placeholder,.mailforms-field textarea::placeholder{color:#767d76}
.mailforms-field input:hover,.mailforms-field textarea:hover{border-color:#a7b0a8}
.mailforms-field input:focus,.mailforms-field textarea:focus{outline:none;border-color:var(--gruen);background:var(--weiss);box-shadow:0 0 0 3px rgba(23,114,69,.16)}
.mailforms-field textarea{min-height:126px;resize:vertical}
.mailforms-field-error{font-size:14px;color:var(--rot);font-weight:700;line-height:1.4;display:none;align-items:center;gap:6px}
.mailforms-field.hat-fehler .mailforms-field-error{display:flex}
.mailforms-field.hat-fehler input,.mailforms-field.hat-fehler textarea{border-color:var(--rot);background:var(--rot-hell)}
.mailforms-field.hat-fehler input:focus,.mailforms-field.hat-fehler textarea:focus{box-shadow:0 0 0 3px rgba(179,38,30,.16)}
.mailforms-consent{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start}
.mailforms-consent input{width:19px;height:19px;margin-top:3px;accent-color:var(--gruen)}
.mailforms-consent label{font-size:14.5px;font-weight:400;color:var(--grau);line-height:1.5;max-width:560px}
.mailforms-form-footer{display:flex;flex-wrap:wrap;align-items:center;gap:15px}
.mailforms-submit{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 26px;border:1.5px solid var(--gruen);background:var(--gruen);color:#fff;font-family:var(--text);font-size:16.5px;font-weight:700;border-radius:var(--r);cursor:pointer;transition:background .16s ease,transform .12s cubic-bezier(.16,1,.3,1)}
.mailforms-submit:hover{background:var(--gruen-tief);border-color:var(--gruen-tief);transform:translateY(-1px)}
.mailforms-submit:active{transform:translateY(1px)}
.mailforms-submit:disabled{background:#b4bdb6;border-color:#b4bdb6;color:#454b46;cursor:not-allowed;transform:none}
.footer-hilfe{font-size:13.5px;color:var(--grau);line-height:1.45;flex:1;min-width:170px}
.mailforms-message{border-radius:var(--r);padding:22px 24px;font-size:16.5px;line-height:1.55;display:none}
.mailforms-message.sichtbar{display:block}
.mailforms-success{background:var(--gruen-hell);border:1.5px solid var(--gruen-rand);color:#204d36}
.mailforms-error{background:var(--rot-hell);border:1.5px solid var(--rot-rand);color:var(--rot-tief)}
.mailforms-success h3{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-0.022em;color:var(--gruen-dunkel);margin-bottom:8px;display:flex;align-items:center;gap:10px}
.mailforms-success ol{display:grid;gap:8px;margin-top:16px}
.mailforms-success li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:16px;line-height:1.5}
.mailforms-success li svg{color:var(--gruen);margin-top:4px}
.melde.fertig .mailforms-form{display:none}
.melde.fertig .melde-kopf{display:none}
.melde.sendet .mailforms-form{opacity:.55;pointer-events:none}

/* ════════ Gegenueberstellung ════════ */
.gegen{background:var(--flaeche);border-block:1px solid var(--linie);padding:96px 28px}
.gegen-kopf{display:grid;grid-template-columns:1.08fr 0.92fr;gap:52px;align-items:start}
.gegen h2{font-family:var(--display);font-size:clamp(30px,3.8vw,48px);line-height:1.08;letter-spacing:-0.034em;font-weight:600;max-width:16ch}
.gegen-vor{font-size:18px;color:var(--grau);max-width:520px;padding-top:6px}
.saeulen{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;column-gap:22px;row-gap:18px;grid-template-rows:auto auto repeat(7,auto);align-items:start}
.saeule{border-radius:var(--r);padding:28px 28px 32px;grid-row:1 / span 9;display:grid;grid-template-rows:subgrid;row-gap:18px;align-content:start}
.saeule--ohne{background:var(--rot-hell);border:1.5px solid var(--rot-rand)}
.saeule--mit{background:var(--gruen);color:#fff;box-shadow:0 16px 36px -20px rgba(26,28,25,.5)}
.saeule-kopf{display:flex;align-items:center;gap:12px}
.saeule-kopf h3{font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:-0.025em}
.saeule--ohne .saeule-kopf h3{color:var(--rot-tief)}
.saeule--mit .saeule-kopf h3{color:#fff}
.saeule-zu{font-size:15.5px;max-width:520px}
.saeule--ohne .saeule-zu{color:#7a2a24}
.saeule--mit .saeule-zu{color:#fff}
.z{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.z-ic{margin-top:2px}
.saeule--ohne .z-ic{color:var(--rot)}
.saeule--mit .z-ic{color:#fff}
.z dt{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.03em;margin-bottom:4px}
.saeule--ohne .z dt{color:var(--rot-tief)}
.saeule--mit .z dt{color:#fff}
.z dd{margin:0;font-size:15.5px;line-height:1.5;max-width:560px}
.saeule--ohne .z dd{color:#6f2b25}
.saeule--mit .z dd{color:#fff}
.z-quelle{display:block;margin-top:4px;font-size:13.5px;color:#fff}
.z-plus{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;background:#fff;color:var(--gruen-dunkel);padding:4px 11px;border-radius:999px;letter-spacing:.01em}

/* ════════ Wer zahlt ════════ */
.zahlt{background:var(--gruen-dunkel);color:#fff;padding:92px 28px;position:relative;overflow:hidden}
.zahlt-in{position:relative;display:grid;grid-template-columns:1fr 0.92fr;gap:52px;align-items:center}
.zahlt h2{font-family:var(--display);font-size:clamp(32px,4.4vw,58px);line-height:1.03;letter-spacing:-0.038em;font-weight:600;max-width:13ch}
.zahlt h2 i{font-style:normal;color:#7ee0a8}
.zahlt-sub{margin-top:20px;font-size:19px;color:#fff;max-width:520px;line-height:1.55}
.zahlt-tasten{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.zahlt-liste{display:grid;gap:16px}
.zp{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:20px 22px}
.zp h3{font-family:var(--display);font-size:17.5px;font-weight:600;letter-spacing:-0.018em;margin-bottom:5px;color:#fff}
.zp p{font-size:15.5px;color:#fff;line-height:1.52;max-width:520px}
.zahlt-fuss{position:relative;margin-top:26px;display:grid;grid-template-columns:1.12fr 0.88fr;gap:44px;align-items:start;font-size:14.5px;color:#fff;line-height:1.55}
.zahlt-fuss p{max-width:540px}

/* ════════ Unfallort ════════ */
.vor{padding:92px 28px}
.vor-kopf{display:grid;grid-template-columns:1.08fr 0.92fr;gap:52px;align-items:start}
.vor h2{font-family:var(--display);font-size:clamp(28px,3.4vw,42px);line-height:1.1;letter-spacing:-0.03em;font-weight:600;max-width:16ch}
.vor-sub{font-size:18px;color:var(--grau);max-width:520px;padding-top:5px}
.karten{margin-top:46px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.k{background:var(--weiss);border-radius:var(--r);padding:26px 26px 28px;box-shadow:var(--schatten);transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease}
.k:hover{transform:translateY(-3px);box-shadow:var(--schatten-hoch)}
.k h3{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-0.02em;margin-bottom:16px}
.k li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:15.5px;color:var(--grau);line-height:1.52;margin-bottom:9px;max-width:600px}
.k li svg{color:var(--gruen);margin-top:4px;flex-shrink:0}
.k li:last-child{margin-bottom:0}

/* ════════ Danach ════════ */
.danach{background:var(--flaeche);border-block:1px solid var(--linie);padding:92px 28px}
.danach-kopf{display:grid;grid-template-columns:1.08fr 0.92fr;gap:52px;align-items:start}
.danach h2{font-family:var(--display);font-size:clamp(28px,3.4vw,42px);line-height:1.1;letter-spacing:-0.03em;font-weight:600;max-width:16ch}
.danach-vor{font-size:18px;color:var(--grau);max-width:520px;padding-top:5px}
.danach-in{margin-top:44px;display:grid;grid-template-columns:1.05fr 0.95fr;gap:26px;align-items:stretch}
.schritte{display:grid;gap:14px;align-content:start}
.schritt{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:flex-start;background:var(--papier);border:1px solid var(--linie);border-radius:var(--r);padding:18px 20px}
.schritt b{font-family:var(--display);font-size:16.5px;font-weight:600;color:var(--gruen-tief);display:block;margin-bottom:4px}
.schritt p{font-size:16px;color:var(--grau);line-height:1.5;max-width:600px}
.schritt p em{font-style:normal;color:var(--tinte);font-weight:700}
.danach-bild{height:100%;min-height:100%}
.danach-bild img{width:100%;height:100%;min-height:280px;border-radius:var(--r);object-fit:cover;box-shadow:var(--schatten)}

/* ════════ Leistungen ════════ */
.leist{padding:92px 28px}
.leist h2{font-family:var(--display);font-size:clamp(28px,3.4vw,42px);line-height:1.1;letter-spacing:-0.03em;font-weight:600}
.lg{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lk{background:var(--weiss);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--schatten);transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease}
.lk:hover{transform:translateY(-3px);box-shadow:var(--schatten-hoch)}
.lk-bild{overflow:hidden}
.lk img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.lk:hover img{transform:scale(1.035)}
.lk-t{padding:24px 24px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.lk h3{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:19.5px;font-weight:600;letter-spacing:-0.02em}
.lk h3 svg{color:var(--gruen)}
.lk p{font-size:15.5px;color:var(--grau);line-height:1.55;max-width:600px}
.lk ul{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:12px}
.lk li{font-size:13.5px;background:var(--gruen-hell);color:var(--gruen-tief);padding:5px 11px;border-radius:999px;line-height:1.2;font-weight:700}

/* ════════ Fuss ════════ */
.fuss{background:var(--tinte);color:#b7beb7;padding-block:56px 38px;font-size:15.5px}
.fuss-in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px}
.fuss h3{font-size:14.5px;color:#fff;margin-bottom:14px;font-weight:700}
.fuss a{color:#b7beb7;text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss li{margin-bottom:8px}
.fuss-marke{font-family:var(--display);font-size:20px;font-weight:600;color:#fff;letter-spacing:-0.025em;margin-bottom:11px}
.fuss-schluss{margin-top:42px;padding-top:22px;border-top:1px solid #32362f;font-size:13.5px;color:#8b928b}


.rufleiste{display:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .knopf,.mailforms-submit,.k,.lk,.lk img,.kopf-nav > a:not(.knopf)::after,.nav-auf::after,.nav-panel,.mailforms-field input,.mailforms-field textarea{transition:none}
  .k:hover,.lk:hover{transform:none}
  .lk:hover img{transform:none}
}

/* ════════ Mobil: Struktur, nicht Schrumpfen ════════ */
@media (max-width:1024px){
  .auf-in{grid-template-columns:1fr;gap:34px}
  .auf-sub{max-width:none}
  .merkmale{margin-top:26px;flex:none;grid-auto-rows:auto}
  .saeulen{grid-template-columns:1fr;grid-template-rows:none;row-gap:16px}
  .saeule{grid-row:auto;display:block;padding:24px 22px 26px}
  .saeule-kopf{margin-bottom:8px}
  .saeule-zu{margin-bottom:20px;display:block}
  .z{margin-bottom:16px}
  .z:last-child{margin-bottom:0}
  .zahlt-in{grid-template-columns:1fr;gap:34px}
  .zahlt-fuss{grid-template-columns:1fr;gap:14px;margin-top:22px}
  .karten{grid-template-columns:1fr}
  .gegen-kopf,.vor-kopf,.danach-kopf{grid-template-columns:1fr;gap:16px}
  .danach-in{grid-template-columns:1fr;gap:26px}
  .danach-bild img{min-height:240px}
  .lg{grid-template-columns:1fr}
  .fuss-in{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  body{font-size:16.5px;padding-bottom:72px}
  section{padding-block:60px;padding-inline:20px}
  .gegen,.zahlt,.vor,.danach,.leist{padding:60px 20px}
  .auf-sek{padding-top:34px;padding-bottom:46px}
  .kopf .wrap,.fuss .wrap{padding-inline:20px}
  .kopf-in{gap:10px}
  .marke b{display:none}
  .marke img{height:34px}
  .melde{padding:24px 20px 28px}
  .mailforms-submit{width:100%}
  .fuss-in{grid-template-columns:1fr;gap:30px}
  .rufleiste{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--tinte);padding:11px 20px;border-top:2px solid var(--gruen)}
  .rufleiste .knopf{width:100%}
}

/* ════════════════════════════════════════════════════════════
   UNTERSEITEN — gemeinsame Bausteine
   ════════════════════════════════════════════════════════════ */

/* Seitenkopf */
.seitenkopf{background:var(--flaeche);border-bottom:1px solid var(--linie);padding:52px 28px 60px}
.seitenkopf-in{display:grid;grid-template-columns:1.05fr 0.95fr;gap:52px;align-items:center}
.seitenkopf--schmal .seitenkopf-in{grid-template-columns:1fr}
/* Steht rechts ein Formular statt eines Bildes, ist es deutlich hoeher als die
   linke Spalte. Mittig gesetzt entstuende oben links ein Loch, also oben ausrichten. */
.seitenkopf--formular .seitenkopf-in{align-items:start}
.pfad{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14.5px;color:var(--grau);margin-bottom:18px}
.pfad a{text-decoration:none;color:var(--gruen-tief);font-weight:600}
.pfad a:hover{text-decoration:underline}
.pfad span{color:#9aa39b}
.seitenkopf h1{font-family:var(--display);font-size:clamp(31px,3.9vw,50px);line-height:1.06;letter-spacing:-0.034em;font-weight:600;max-width:17ch}
.lead{margin-top:16px;font-size:19px;color:var(--grau);line-height:1.55;max-width:540px}
.tasten{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.seitenkopf-bild img{width:100%;border-radius:var(--r);aspect-ratio:16/11;object-fit:cover;box-shadow:var(--schatten)}

/* Fliesstext-Abschnitt */
.inhalt{padding:80px 28px}
.inhalt--flaeche{background:var(--flaeche);border-block:1px solid var(--linie)}
.inhalt-kopf{display:grid;grid-template-columns:1.08fr 0.92fr;gap:52px;align-items:start;margin-bottom:40px}
.inhalt h2{font-family:var(--display);font-size:clamp(26px,3.1vw,38px);line-height:1.12;letter-spacing:-0.03em;font-weight:600;max-width:17ch}
.inhalt-vor{font-size:18px;color:var(--grau);max-width:520px;padding-top:4px;line-height:1.55}
.prosa{max-width:620px}
.prosa p{font-size:17px;color:var(--grau);line-height:1.65;margin-bottom:16px;max-width:600px}
.prosa p:last-child{margin-bottom:0}
.prosa strong{color:var(--tinte)}
.prosa h3{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-0.02em;margin:28px 0 10px}
.prosa h3:first-child{margin-top:0}

/* zwei Spalten Text + Beiwerk */
.zweispalt{display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:start}
.zweispalt--bild{align-items:center}

/* Merkmalkarten in Reihe */
.reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.reihe--zwei{grid-template-columns:repeat(2,1fr)}
.rk{background:var(--weiss);border-radius:var(--r);padding:26px 26px 28px;box-shadow:var(--schatten)}
.rk--gruen{background:var(--gruen-hell);box-shadow:none;border:1.5px solid var(--gruen-rand)}
.rk h3{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-0.02em;margin-bottom:12px}
.rk--gruen h3{color:var(--gruen-dunkel)}
.rk p{font-size:15.5px;color:var(--grau);line-height:1.55;max-width:520px}
.rk--gruen p{color:#2c5340}
.rk li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:15.5px;color:var(--grau);line-height:1.52;margin-bottom:9px;max-width:520px}
.rk li svg{color:var(--gruen);margin-top:4px;flex-shrink:0}
.rk li:last-child{margin-bottom:0}

/* Fahrzeug-Chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:700;background:var(--gruen-hell);color:var(--gruen-tief);padding:7px 14px;border-radius:999px;line-height:1.2}
.chip svg{flex-shrink:0}

/* Zahlenpunkte (Wichtige Punkte) */
.punkte{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.punkt{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--linie)}
.punkt-nr{font-family:var(--display);font-size:30px;font-weight:600;line-height:1;color:var(--gruen);font-variant-numeric:tabular-nums;letter-spacing:-0.04em;min-width:44px}
.punkt h3{font-size:17.5px;font-weight:700;line-height:1.32;margin-bottom:7px;letter-spacing:-0.01em}
.punkt p{font-size:15.5px;color:var(--grau);line-height:1.55;max-width:520px}
.fundstelle{margin-top:44px;padding:26px 30px;background:var(--tinte);color:#fff;border-radius:var(--r);display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
.fundstelle-az{font-family:var(--display);font-size:15px;font-weight:600;color:#8fd6ae;white-space:nowrap;line-height:1.4}
.fundstelle p{font-size:16.5px;line-height:1.55;max-width:600px;color:#fff}

/* Anfahrt ohne eingebettete Karte */
.weg{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.weg-karte{background:var(--weiss);border-radius:var(--r);padding:26px 28px 28px;box-shadow:var(--schatten)}
.weg-karte h3{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:18px;font-weight:600;margin-bottom:12px}
.weg-karte p{font-size:16px;color:var(--grau);line-height:1.55;max-width:520px}
.weg-karte address{font-style:normal;font-size:17px;line-height:1.6;margin-bottom:14px}

/* Rechtstext */
.rechtstext{max-width:760px}
.rechtstext h2,.rechtstext h3{max-width:none}
.rechtstext h2{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-0.022em;margin:32px 0 12px}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{font-family:var(--display);font-size:17.5px;font-weight:600;margin:22px 0 8px}
.rechtstext p{font-size:16.5px;color:var(--grau);line-height:1.65;margin-bottom:14px;max-width:640px;overflow-wrap:anywhere}
.rechtstext dl{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;margin-bottom:20px;font-size:16.5px}
.rechtstext dt{color:var(--grau)}
.rechtstext dd{margin:0;font-weight:600}
.rechtstext a{color:var(--gruen-tief);font-weight:600;overflow-wrap:anywhere}
.rechtstext li{font-size:16.5px;color:var(--grau);line-height:1.65;margin-bottom:8px;max-width:640px;overflow-wrap:anywhere}
.rechtstext ul{margin-bottom:16px;padding-left:20px;list-style:disc}

/* Abschlussband */
.abschluss{background:var(--gruen-dunkel);color:#fff;padding:72px 28px}
.abschluss-in{display:grid;grid-template-columns:1.1fr 0.9fr;gap:52px;align-items:center}
.abschluss h2{font-family:var(--display);font-size:clamp(27px,3.3vw,42px);line-height:1.08;letter-spacing:-0.034em;font-weight:600;max-width:15ch}
.abschluss p{margin-top:16px;font-size:18px;color:#fff;max-width:520px;line-height:1.55}
.abschluss-ruf{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.abschluss-nr{font-family:var(--display);font-size:clamp(28px,3.4vw,42px);font-weight:600;letter-spacing:-0.038em;color:#fff;text-decoration:none;font-variant-numeric:tabular-nums;line-height:1.1}
.abschluss-nr:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.abschluss-zu{font-size:15.5px;color:#fff;max-width:460px}

@media (max-width:1024px){
  .seitenkopf-in{grid-template-columns:1fr;gap:32px}
  .inhalt-kopf{grid-template-columns:1fr;gap:16px}
  .zweispalt{grid-template-columns:1fr;gap:32px}
  .reihe,.reihe--zwei{grid-template-columns:1fr}
  .punkte{grid-template-columns:1fr;gap:0}
  .weg{grid-template-columns:1fr}
  .abschluss-in{grid-template-columns:1fr;gap:30px}
}
@media (max-width:767px){
  .seitenkopf{padding:34px 20px 42px}
  .inhalt{padding:56px 20px}
  .abschluss{padding:56px 20px}
  .fundstelle{grid-template-columns:1fr;gap:14px;padding:22px 20px}
  .prosa p{max-width:none}
}

/* Rechtszeile im Fuss: Impressum, Datenschutz, Agentur-Hinweis */
.fuss-schluss{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 30px}
.fuss-recht{display:flex;flex-wrap:wrap;gap:24px}
.fuss-recht a{color:#8b928b;text-decoration:none}
.fuss-recht a:hover{color:#fff;text-decoration:underline}
@media (max-width:767px){
  .fuss-schluss{flex-direction:column;align-items:flex-start;gap:16px}
  .fuss-recht{gap:18px}
}

/* ════════════════════════════════════════════════════════════
   HAUPTMENUE — Desktop mit Aufklapper, Telefon mit Schublade
   ════════════════════════════════════════════════════════════ */
.kopf-in{position:relative}
.menue-knopf{display:none}

.kopf-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.kopf-nav > a:not(.knopf),.nav-auf{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--text);font-size:15.5px;font-weight:500;color:var(--tinte);
  text-decoration:none;white-space:nowrap;background:none;border:0;cursor:pointer;
  padding:9px 13px;border-radius:var(--r-klein);transition:color .16s ease,background .16s ease}
.kopf-nav > a:not(.knopf)::after,.nav-auf::after{
  content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;background:var(--gruen);
  transform:scaleX(0);transform-origin:left;transition:transform .24s cubic-bezier(.16,1,.3,1)}
.kopf-nav > a:not(.knopf):hover,.nav-auf:hover{color:var(--gruen-tief);background:var(--gruen-hell)}
.kopf-nav > a:not(.knopf):hover::after,.nav-auf:hover::after{transform:scaleX(1)}
.kopf-nav > a[aria-current="page"]{color:var(--gruen-tief)}
.kopf-nav > a[aria-current="page"]::after{transform:scaleX(1)}
.nav-auf svg{transition:transform .24s cubic-bezier(.16,1,.3,1)}
.nav-auf[aria-expanded="true"]{color:var(--gruen-tief);background:var(--gruen-hell)}
.nav-auf[aria-expanded="true"] svg{transform:rotate(180deg)}

.nav-gruppe{position:relative}
.nav-panel{
  position:absolute;top:calc(100% + 12px);left:-8px;z-index:50;width:min(560px,86vw);
  background:var(--weiss);border-radius:var(--r);padding:12px;
  box-shadow:0 4px 10px rgba(26,28,25,.08), 0 26px 54px -22px rgba(26,28,25,.42);
  display:grid;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:top left;
  transition:opacity .2s ease,transform .24s cubic-bezier(.16,1,.3,1),visibility .24s}
.nav-auf[aria-expanded="true"] + .nav-panel{opacity:1;visibility:visible;transform:none}
.nav-panel::before{content:"";position:absolute;top:-8px;left:24px;width:16px;height:16px;background:var(--weiss);transform:rotate(45deg);border-radius:3px}
.np{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  padding:13px 14px;border-radius:var(--r-klein);text-decoration:none;transition:background .16s ease}
.np:hover{background:var(--gruen-hell)}
.np .med{width:38px;height:38px}
.np b{display:block;font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-0.018em;color:var(--tinte);margin-bottom:2px}
.np span.np-zu{display:block;font-size:14.5px;color:var(--grau);line-height:1.45;max-width:400px}
.np-fuss{margin-top:6px;padding:12px 14px 4px;border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;gap:18px}
.np-fuss a{font-size:14.5px;font-weight:600;color:var(--gruen-tief);text-decoration:none}
.np-fuss a:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .nav-panel,.nav-auf svg,.kopf-nav > a:not(.knopf)::after,.nav-auf::after{transition:none}
}

/* ── Telefon: Schublade statt versteckter Links ── */
@media (max-width:959px){
  .menue-knopf{display:inline-flex;align-items:center;gap:8px;margin-left:auto;order:2;
    font-family:var(--text);font-size:15.5px;font-weight:700;color:var(--tinte);
    background:var(--weiss);border:0;border-radius:var(--r-klein);padding:11px 15px;cursor:pointer;
    box-shadow:var(--schatten);transition:background .16s ease}
  .menue-knopf:hover{background:var(--gruen-hell)}
  .menue-knopf .zu{display:none}
  .kopf.offen .menue-knopf .auf{display:none}
  .kopf.offen .menue-knopf .zu{display:inline-flex}

  .kopf-nav{
    position:absolute;top:calc(100% + 1px);left:0;right:0;z-index:45;
    flex-direction:column;align-items:stretch;gap:2px;margin:0;
    background:var(--papier);border-top:1px solid var(--linie);
    padding:14px 28px 22px;
    max-height:80vh;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1),visibility .28s}
  .kopf.offen .kopf-nav{opacity:1;visibility:visible;transform:none}

  .kopf-nav > a:not(.knopf),.nav-auf{
    justify-content:flex-start;font-size:17px;font-weight:600;padding:15px 14px;border-radius:var(--r)}
  .kopf-nav > a:not(.knopf)::after,.nav-auf::after{display:none}
  .nav-auf{width:100%;justify-content:space-between}
  .nav-gruppe{order:-1}
  .nav-panel{position:static;width:auto;box-shadow:none;padding:4px 0 8px;background:transparent;
    opacity:1;visibility:visible;transform:none;transition:none;display:none}
  .nav-panel::before{display:none}
  .nav-auf[aria-expanded="true"] + .nav-panel{display:grid}
  .np{padding:12px 14px}
  .np-fuss{padding-inline:14px}
  .kopf-nav .knopf{margin-top:12px;width:100%;padding-block:15px;font-size:17px}
}
@media (max-width:767px){
  .kopf-nav{padding-inline:20px}
}

/* ── Rechtstexte: volle Breite mit Inhaltsverzeichnis statt leerer Spalte ── */
.rechts-in{display:grid;grid-template-columns:264px minmax(0,1fr);gap:56px;align-items:start}
.rechts-nav{position:sticky;top:96px}
.rechts-nav h2{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-0.01em;color:var(--grau);margin-bottom:14px}
.rechts-nav ol{display:grid;gap:2px;counter-reset:rn}
.rechts-nav a{display:block;font-size:15px;line-height:1.4;color:var(--tinte);text-decoration:none;
  padding:8px 12px;border-radius:var(--r-klein);transition:background .16s ease,color .16s ease}
.rechts-nav a:hover{background:var(--gruen-hell);color:var(--gruen-tief)}
.rechtstext{max-width:760px}
@media (max-width:1024px){
  .rechts-in{grid-template-columns:1fr;gap:26px}
  .rechts-nav{position:static}
  .rechts-nav ol{grid-template-columns:1fr 1fr;display:grid;gap:2px 14px}
}
@media (max-width:767px){
  .rechts-nav ol{grid-template-columns:1fr}
}

/* Sprungmarke: nur sichtbar, wenn sie den Fokus hat */
.sprung{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gruen);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r) 0;font-weight:700;text-decoration:none}
.sprung:focus{left:0}

/* MailForms Lite bringt einen eigenen System-Stack mit (…, Roboto, …).
   Unter Linux zieht der tatsächlich Roboto und wird als Allerweltsschrift
   erkannt. Auf dieser Seite gilt die Hausschrift, auch im Formular. */
.mailforms-form,.mailforms-form *,
.mailforms-message,.mailforms-message *,
.mailforms-consent,.mailforms-consent *{font-family:var(--text)}
.mailforms-submit{font-family:var(--text)}

/* ══════════════════════════════════════════════════════════════
   MailForms: unser CSS laedt VOR dem Plugin-CSS. Bei gleicher
   Spezifitaet gewinnt deshalb das Plugin. Alles, was uns wichtig
   ist, steht hier noch einmal mit vorangestelltem body und damit
   hoeherer Spezifitaet.
   ══════════════════════════════════════════════════════════════ */
body .mailforms-field{display:grid;gap:7px;margin:0 0 18px}
body .mailforms-field label{font-size:14.5px;font-weight:700;color:var(--tinte);letter-spacing:-0.005em;margin:0}
body .mailforms-required-indicator{color:var(--rot);margin-left:2px}
body .mailforms-field input[type="text"],
body .mailforms-field input[type="email"],
body .mailforms-field input[type="tel"],
body .mailforms-field input[type="url"],
body .mailforms-field input[type="number"],
body .mailforms-field textarea,
body .mailforms-field select{
  width:100%;font-family:var(--text);font-size:16.5px;color:var(--tinte);
  background:var(--papier);border:1.5px solid #c3c9c2;border-radius:var(--r-klein);
  padding:13px 15px;box-shadow:none;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}
body .mailforms-field input::placeholder,
body .mailforms-field textarea::placeholder{color:#767d76;opacity:1}
body .mailforms-field input:hover,
body .mailforms-field textarea:hover{border-color:#a7b0a8}
body .mailforms-field input:focus,
body .mailforms-field textarea:focus,
body .mailforms-field select:focus{outline:none;border-color:var(--gruen);background:var(--weiss);
  box-shadow:0 0 0 3px rgba(23,114,69,.16)}
body .mailforms-field textarea{min-height:126px;resize:vertical}
body .mailforms-consent{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start}
body .mailforms-consent input[type="checkbox"]{width:19px;height:19px;margin-top:3px;accent-color:var(--gruen)}
body .mailforms-consent label{font-size:14.5px;font-weight:400;color:var(--grau);line-height:1.5;max-width:560px}
body .mailforms-submit{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border:1.5px solid var(--gruen);background:var(--gruen);color:#fff;
  font-family:var(--text);font-size:16.5px;font-weight:700;border-radius:var(--r);cursor:pointer;
  box-shadow:none;transition:background .16s ease,transform .12s cubic-bezier(.16,1,.3,1)}
body .mailforms-submit:hover{background:var(--gruen-tief);border-color:var(--gruen-tief);transform:translateY(-1px)}
body .mailforms-field-error{font-size:14px;color:var(--rot);font-weight:700;line-height:1.4}
body .mailforms-message{border-radius:var(--r);padding:22px 24px;font-size:16.5px;line-height:1.55}
body .mailforms-success{background:var(--gruen-hell);border:1.5px solid var(--gruen-rand);color:#204d36}
body .mailforms-error{background:var(--rot-hell);border:1.5px solid var(--rot-rand);color:var(--rot-tief)}

/* ⛔ Diese Seite hat KEINEN Dark Mode. Das Plugin bringt aber einen mit und
   dreht die Felder auf #1e293b, waehrend die Seite hell bleibt und die
   Beschriftungen unlesbar werden. Hier die Hellwerte zurueckholen. */
@media (prefers-color-scheme: dark){
  body .mailforms-form-wrapper,
  body .mailforms-form{
    --mf-gray-50:#f8fafc;  --mf-gray-100:#f1f5f9; --mf-gray-200:#e2e8f0;
    --mf-gray-300:#cbd5e1; --mf-gray-400:#94a3b8; --mf-gray-500:#64748b;
    --mf-gray-600:#475569; --mf-gray-700:#334155; --mf-gray-800:#1e293b;
  }
  body .mailforms-field input[type="text"],
  body .mailforms-field input[type="email"],
  body .mailforms-field input[type="tel"],
  body .mailforms-field input[type="url"],
  body .mailforms-field input[type="number"],
  body .mailforms-field textarea,
  body .mailforms-field select{background:var(--papier);color:var(--tinte);border-color:#c3c9c2}
  body .mailforms-field label{color:var(--tinte)}
  body .mailforms-consent label{color:var(--grau)}
  body .mailforms-field-error{color:var(--rot)}
}