/* WERT PAKET.EU – Neubau 31.10.2026. Erzeugt nach web/assets/wp.css durch _werkzeug/bauen.py.
   Schriften: Cormorant Garamond (Ueberschriften) + Inter (Text), SIL OFL 1.1, selbst gehostet (assets/fonts).
   Drei Designrichtungen als Klasse am body: .e-a Atelier (hell, Elfenbein/Tinte/Champagner), .e-b Nocturne (dunkel),
   .e-c Galerie (weiss, reine Grotesk). Bewegung nur ohne prefers-reduced-motion. Kein Inline-CSS (CSP style-src 'self'). */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format("woff2")}

/* ---------- Tokens: A Atelier (Standard) – Markenfarben aus dem Logo-Paket: Gruen #78D64B, Fast-Schwarz #101820 ----------
   Gruen #78D64B nur fuer Flaechen/Linien/Marken (auf Hell zu kontrastarm fuer Text); Textgruen #34701b erfuellt WCAG AA. */
:root{
  --bg:#f5f4ef; --flaeche:#ecebe4; --karte:#ffffff; --tinte:#101820; --text:#2a3038; --leise:#575d66;
  --linie:#e1dfd6; --linie-stark:#c9c6ba; --akzent:#34701b; --akzent-hell:#78d64b; --akzent-flaeche:#eaf3e2;
  --marke:#78d64b;
  --dunkel:#101820; --dunkel-text:#e9ece6; --dunkel-leise:#a9b0b8; --dunkel-linie:#26303b;
  --btn:#101820; --btn-text:#ffffff; --btn-hover:#22303f;
  --serif:"Cormorant Garamond","Iowan Old Style",Georgia,serif; --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --h-schrift:var(--serif); --h-gewicht:500; --h-zeichen:-0.01em;
  --radius:2px; --rand:clamp(24px,4vw,40px); --max:1240px;
  --s:clamp(88px,10vw,144px);
  --ease:cubic-bezier(.16,1,.3,1);
}
/* B Nocturne */
.e-b{
  --bg:#0d1320; --flaeche:#111a2b; --karte:#162136; --tinte:#f1ebdf; --text:#d9d3c7; --leise:#a59f93;
  --linie:#26324a; --linie-stark:#3a4762; --akzent:#d0ad74; --akzent-hell:#e2c592; --akzent-flaeche:#1c2840;
  --dunkel:#080c15; --dunkel-text:#ece6da; --dunkel-leise:#a59f93; --dunkel-linie:#1f2a3f;
  --btn:#d0ad74; --btn-text:#0d1320; --btn-hover:#e2c592;
}
/* C Galerie */
.e-c{
  --bg:#ffffff; --flaeche:#f3f1ed; --karte:#ffffff; --tinte:#0f0f10; --text:#2a2a2c; --leise:#5c5c60;
  --linie:#e2dfd9; --linie-stark:#c9c5bd; --akzent:#1d3a5f; --akzent-hell:#3c6496; --akzent-flaeche:#e9eef5;
  --dunkel:#0f0f10; --dunkel-text:#f2f2f0; --dunkel-leise:#a8a8a6; --dunkel-linie:#2a2a2c;
  --btn:#0f0f10; --btn-text:#ffffff; --btn-hover:#1d3a5f;
  --h-schrift:var(--sans); --h-gewicht:600; --h-zeichen:-0.035em;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--sans);font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-color:var(--akzent-hell);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--akzent)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--h-schrift);font-weight:var(--h-gewicht);letter-spacing:var(--h-zeichen);color:var(--tinte);margin:0;line-height:1.08}
h3{font-size:1.5rem;line-height:1.2}
.e-c h3{font-size:1.2rem;letter-spacing:-.015em}
p{margin:0 0 1em}
/* Silbentrennung nur in schmalen Spalten (Karten, Hinweise), nicht in Leads und Hero */
.karte p,.schritt p,.vp p,.hinweise p,.stufe p,.faq-a p,.weg-text>p{hyphens:auto;-webkit-hyphens:auto}
ul,ol{margin:0;padding:0;list-style:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--btn);color:var(--btn-text);padding:10px 16px;border-radius:var(--radius)}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
.wrap-schmal{max-width:900px}
.fein{font-size:.875rem;color:var(--leise)}
.mitte{text-align:center}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Knoepfe ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;min-height:48px;padding:0 1.6em;border-radius:var(--radius);background:var(--btn);color:var(--btn-text);
  font:500 .9375rem/1 var(--sans);letter-spacing:.02em;text-decoration:none;border:1px solid var(--btn);transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:var(--btn-text)}
.btn:active{transform:scale(.98)}
.btn .ic{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover .ic{transform:translateX(3px)}
.btn-zweit{background:transparent;color:var(--tinte);border-color:var(--linie-stark)}
.btn-zweit:hover{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.btn-klein{min-height:40px;padding:0 1.1em;font-size:.875rem}
.btn[disabled]{opacity:.85;cursor:not-allowed}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.2) blur(14px);-webkit-backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.kopf.gerollt{border-bottom-color:var(--linie)}
.kopf-in{display:flex;align-items:center;gap:28px;height:76px}
.logo{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.logo-bild{height:40px;width:auto}
.fuss .logo-bild{height:30px}
.dachmarke{display:flex;align-items:center;gap:16px;margin-top:44px;padding-top:28px;border-top:1px solid var(--dunkel-linie)}
.dachmarke img{height:56px;width:auto}
.dachmarke p{margin:0;font-size:.8125rem;max-width:160px}
.nav ul{display:flex;gap:30px}
.nav a{font-size:.9rem;text-decoration:none;color:var(--text);position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--akzent);transition:right .3s var(--ease)}
.nav a:hover{color:var(--tinte)}
.nav a:hover::after{right:0}
.menue-btn{display:none;width:44px;height:44px;border:1px solid var(--linie-stark);background:transparent;border-radius:var(--radius);cursor:pointer;position:relative}
.menue-strich,.menue-strich::before,.menue-strich::after{position:absolute;left:12px;width:18px;height:1.5px;background:var(--tinte);transition:transform .3s var(--ease),opacity .2s}
.menue-strich{top:21px}.menue-strich::before{content:"";left:0;top:-6px}.menue-strich::after{content:"";left:0;top:6px}
.menue-btn[aria-expanded="true"] .menue-strich{background:transparent}
.menue-btn[aria-expanded="true"] .menue-strich::before{transform:translateY(6px) rotate(45deg)}
.menue-btn[aria-expanded="true"] .menue-strich::after{transform:translateY(-6px) rotate(-45deg)}
.mnav{border-top:1px solid var(--linie);background:var(--bg)}
.mnav ul{padding:12px var(--rand) 24px}
.mnav li a:not(.btn){display:block;padding:14px 0;border-bottom:1px solid var(--linie);text-decoration:none;font:var(--h-gewicht) 1.5rem/1.2 var(--h-schrift);color:var(--tinte)}
.mnav .btn{margin-top:20px;width:100%;justify-content:center}
/* Umschaltpunkt Kopfmenue 1280 statt 1020 (01.11.2026: 7 Menuepunkte mit den Infoseiten passen erst ab 1280 in eine Zeile) */
@media (max-width:1279px){.nav,.kopf-cta{display:none}.menue-btn{display:block}}
@media (min-width:1280px){.mnav{display:none!important}}
body.gesperrt{overflow:hidden}

/* ---------- Kicker + Abschnittskoepfe ---------- */
.kicker{display:flex;align-items:center;gap:14px;font:500 .75rem/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--akzent);margin:0 0 22px}
.kicker::before{content:"";width:32px;height:2px;background:var(--marke)}
.s{padding:var(--s) 0}
.s-flaeche{background:var(--flaeche)}
.s-kopf{max-width:760px;margin-bottom:clamp(40px,6vw,72px)}
.s-kopf h2{font-size:clamp(2.25rem,4.6vw,3.75rem)}
.e-c .s-kopf h2{font-size:clamp(2rem,4vw,3.25rem)}
.lead{font-size:1.1875rem;line-height:1.6;color:var(--leise);margin-top:22px;max-width:640px}

/* ---------- Hero ---------- */
.hero{position:relative}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;min-height:min(78vh,760px);padding-top:clamp(32px,5vw,64px);padding-bottom:clamp(32px,5vw,64px)}
.hero-text{max-width:560px;position:relative;z-index:2}
.hero h1{font-size:clamp(2.75rem,6.2vw,5.4rem);line-height:1.02;letter-spacing:-.02em}
.hero h1 em{font-style:italic;color:var(--tinte);display:block;margin-top:.18em;font-size:.62em;line-height:1.1;max-width:18ch}
.e-c .hero h1{letter-spacing:-.045em;line-height:.98}
.e-c .hero h1 em{font-style:normal;color:var(--leise)}
.hero-lead{font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--leise);margin:28px 0 36px;max-width:500px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}
/* A: Bild rechts, randabfallend */
.hero-oben{position:relative}
.e-a .hero-bild{position:absolute;top:0;right:0;bottom:0;width:56%}
.e-a .hero-pic,.e-a .hero-pic img{width:100%;height:100%;object-fit:cover;object-position:55% 55%}
.e-a .hero-in{grid-template-columns:minmax(0,44fr) minmax(0,56fr)}
/* B: Vollbild mit Verlauf */
.e-b .hero-oben{position:static}
.e-b .hero-bild{position:absolute;inset:0;overflow:hidden}
.e-b .hero-pic,.e-b .hero-pic img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.e-b .hero-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,19,32,.94) 0%,rgba(13,19,32,.78) 38%,rgba(13,19,32,.15) 75%),linear-gradient(0deg,rgba(13,19,32,.9),rgba(13,19,32,0) 30%)}
.e-b .hero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-height:min(88vh,820px)}
/* C: Text oben, Bild als breites Band darunter */
.e-c .hero-oben{display:flex;flex-direction:column}
.e-c .hero-oben>.wrap,.e-c .hero>.wrap{width:100%}
.e-c .hero-in{order:1;grid-template-columns:1fr;min-height:0;padding-top:clamp(56px,8vw,112px);padding-bottom:48px}
.e-c .hero-text{max-width:980px}
.e-c .hero-lead{max-width:640px}
.e-c .hero-bild{order:2;max-width:var(--max);margin:0 auto;padding:0 var(--rand);width:100%}
.e-c .hero-pic img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:60% 55%}
/* Fakten */
.fakten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--linie);position:relative;z-index:2}
.e-a .fakten{background:var(--bg)}
.fakten li{padding:30px 24px 34px 0;display:flex;flex-direction:column;gap:6px}
.fakten li+li{padding-left:32px}
.fakt-zahl{font:var(--h-gewicht) clamp(1.875rem,2.8vw,2.5rem)/1 var(--h-schrift);color:var(--tinte);letter-spacing:var(--h-zeichen);font-variant-numeric:lining-nums}
.fakt-text{font-size:.875rem;color:var(--leise)}
.fakt-zahl::after{content:"";display:block;width:28px;height:2px;background:var(--marke);margin-top:12px}
.fakten li:first-child .fakt-zahl{font-size:clamp(2rem,3vw,2.6rem)}

/* ---------- Karten (Zielgruppen) ---------- */
.raster-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.raster-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.karte{--karte-pad:clamp(28px,3vw,40px);background:var(--karte);border:1px solid var(--linie);box-shadow:0 4px 24px rgba(20,28,43,.03);padding:var(--karte-pad);border-radius:var(--radius);position:relative}
.karte-nr,.schritt-nr{font:500 .8125rem/1 var(--sans);letter-spacing:.16em;color:var(--akzent);display:block;margin-bottom:28px}
.karte h3{margin-bottom:14px}
.karte,.beleg{transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.karte:hover,.beleg:hover{border-color:var(--linie-stark);box-shadow:0 8px 28px rgba(16,24,32,.06)}
.karte p{color:var(--leise);margin:0}

/* ---------- Ablauf ---------- */
.schritte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:s;border-top:1px solid var(--linie-stark)}
.schritt{padding:32px 28px 8px 0;position:relative}
.schritt+.schritt{padding-left:28px;border-left:1px solid var(--linie)}
.schritt::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--marke)}
.schritt+.schritt::before{left:28px}
.schritt-nr{font:var(--h-gewicht) 3.25rem/1 var(--h-schrift);letter-spacing:var(--h-zeichen);color:var(--akzent);margin:12px 0 22px}
.schritt h3{margin-bottom:12px}
.schritt p{color:var(--leise);font-size:1rem;margin:0}

/* ---------- Wege ---------- */
.weg{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.weg-bild img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.2s var(--ease)}
.weg:hover .weg-bild img{transform:scale(1.03)}
.weg-bild{overflow:hidden}
.weg-text{padding:clamp(28px,3vw,40px)}
.weg-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.weg-kopf h3{font-size:1.875rem}
.weg-preis{font:600 .6875rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tinte);border:1px solid var(--linie-stark);padding:8px 12px;border-radius:2px;white-space:nowrap}
.weg:last-child .weg-preis{background:var(--tinte);color:var(--bg);border-color:var(--tinte)}
.weg-text>p{color:var(--leise)}
.haken li{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--linie);font-size:.9375rem}
.haken .ic{color:var(--akzent);margin-top:3px}

/* ---------- Preise ---------- */
.preis-raster{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:clamp(20px,2.4vw,32px);align-items:start}
.preis-block{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:clamp(24px,2.6vw,36px)}
.preis-block h3{font-size:1.375rem;margin-bottom:20px}
.formel div{padding:14px 0;border-top:1px solid var(--linie)}
.formel dt{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--leise);margin-bottom:4px}
.formel dd{margin:0;color:var(--tinte);font-weight:500}
.tab{width:100%;border-collapse:collapse;font-size:.9375rem}
.tab th{font:500 .6875rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--leise);text-align:left;padding:0 0 10px;border-bottom:1px solid var(--linie-stark)}
.tab th.num{text-align:right}
.tab td{padding:14px 0;border-bottom:1px solid var(--linie);vertical-align:top}
.tab td+td{padding-left:16px}
.tab tr:last-child td{border-bottom:0}
.unter-h{font-size:clamp(1.75rem,2.6vw,2.25rem);margin:clamp(56px,7vw,88px) 0 28px}
.beleg{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:28px 28px 22px;position:relative}
.beleg-h{font-size:1.375rem;margin-bottom:6px}
.beleg-meta{font-size:.8125rem;color:var(--leise);margin-bottom:18px}
.beleg-tab{width:100%;border-collapse:collapse;font-size:.875rem}
.beleg-tab td{padding:10px 0;border-top:1px solid var(--linie)}
.beleg-tab td+td{padding-left:12px}
.beleg-tab tfoot th,.beleg-tab tfoot td{padding-top:14px;border-top:1px solid var(--tinte);font-weight:600;color:var(--tinte);text-align:left}
.beleg-tab tfoot td{text-align:right;font:var(--h-gewicht) 1.5rem/1 var(--h-schrift)}
.belege+.fein{margin-top:20px}

/* ---------- Versicherung ---------- */
.stufen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--linie-stark);border-radius:var(--radius)}
.stufe{padding:clamp(28px,3vw,44px)}
.stufe+.stufe{border-left:1px solid var(--linie-stark)}
.stufe:nth-child(2){background:var(--karte);box-shadow:inset 0 0 0 1px var(--akzent)}
.stufe-wert{font:var(--h-gewicht) clamp(2.25rem,3.6vw,3rem)/1 var(--h-schrift);letter-spacing:var(--h-zeichen);color:var(--tinte);margin:0}
.stufe-unter{font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--akzent);margin:10px 0 22px}
.stufe p:last-child{color:var(--leise);margin:0}
.hinweise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:44px}
.hinweise p{margin:0;font-size:.9375rem;color:var(--leise);padding-top:18px;border-top:1px solid var(--linie)}
.hinweise strong{color:var(--tinte);font-weight:600}

/* ---------- Inhalt (dunkle Flaeche) ---------- */
.s-dunkel{background:var(--dunkel);color:var(--dunkel-text);--tinte:#f4eee3;--leise:var(--dunkel-leise);--linie:var(--dunkel-linie);--linie-stark:#3a4459;--karte:#1a2335}
.e-b .s-dunkel{--karte:#131c2e}
.e-c .s-dunkel{--akzent:#c9b48a;--akzent-hell:#c9b48a}
.e-a .s-dunkel{--akzent:#78d64b;--akzent-hell:#78d64b}
.s-dunkel .kicker{color:var(--akzent)}
.inhalt-listen h3{font-size:1.5rem;margin-bottom:20px}
.iliste li{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-top:1px solid var(--linie)}
.iliste .ic{margin-top:3px;width:18px;height:18px}
.liste-ja .ic{color:rgba(233,236,230,.7)}
.liste-nein .ic{color:#e38b7c}
.begruendung{margin-top:28px;padding:18px 0 0;border-top:1px solid var(--linie-stark);font-size:.875rem;line-height:1.65;color:var(--dunkel-leise);max-width:62ch}
.muenzen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(56px,7vw,96px)}
.muenzen-bild img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.muenzen h3{font-size:clamp(1.75rem,2.6vw,2.25rem);margin-bottom:18px}
.muenzen{align-items:start}
.muenzen p{color:var(--dunkel-text);margin:0 0 14px}
.muenzen p.muenzen-detail{color:var(--leise);font-size:.875rem;line-height:1.6;margin:0}

/* ---------- Verpackung ---------- */
.verp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.verp-bild{position:sticky;top:110px}
.verp-bild img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.vp-liste{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;counter-reset:vp}
.vp{padding:22px 0;border-top:1px solid var(--linie);counter-increment:vp}
.vp h3{font-size:1.25rem;margin-bottom:8px;display:flex;gap:10px;align-items:baseline}
.e-c .vp h3{font-size:1.0625rem}
.vp h3::before{content:counter(vp,decimal-leading-zero);font:500 .75rem/1 var(--sans);letter-spacing:.12em;color:var(--akzent)}
.vp p{font-size:.9375rem;color:var(--leise);margin:0}

/* ---------- Laender ---------- */
.laender{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0;border-top:1px solid var(--linie-stark)}
.laender li{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--linie);font-size:.9875rem}
.laender-aus{margin:22px 0 0;max-width:70ch}
.laender .flagge{flex:none;width:24px;height:18px;border-radius:2px;box-shadow:0 0 0 1px var(--linie-stark);object-fit:cover}
.laender{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.laender li{gap:10px;padding-right:12px;min-width:0}
.iso{font:500 .6875rem/1 var(--sans);letter-spacing:.14em;color:var(--leise);min-width:26px}

/* ---------- Buchung (Widget-Rahmen) ---------- */
.s-buchen{padding-bottom:calc(var(--s) * .45)}
#fragen{padding-top:calc(var(--s) * .55)}
.s-buchen .s-kopf{margin-left:auto;margin-right:auto;text-align:center}
.s-buchen .kicker{justify-content:center}
.s-buchen .kicker::after{content:"";width:32px;height:2px;background:var(--marke)}
.s-buchen .lead{margin-left:auto;margin-right:auto}
.widget{max-width:860px;margin:0 auto 28px;background:#fff;border:1px solid rgba(16,24,32,.15);border-radius:2px;overflow:hidden}
.widget-frame{display:block;width:100%;height:640px;border:0;background:var(--karte)}

/* ---------- FAQ ---------- */
.faqs{border-top:1px solid var(--linie-stark)}
.faq{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:1.375rem;font-weight:var(--h-gewicht)}
.e-c .faq summary h3{font-size:1.125rem}
.faq-plus{width:28px;height:28px;flex:none;border:1px solid var(--linie-stark);border-radius:50%;position:relative;transition:transform .35s var(--ease),border-color .3s}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;left:8px;right:8px;top:13px;height:1px;background:var(--tinte)}
.faq-plus::after{transform:rotate(90deg);transition:transform .35s var(--ease)}
.faq[open] .faq-plus{border-color:var(--akzent)}
.faq[open] .faq-plus::after{transform:rotate(0)}
.faq summary:hover h3{color:var(--akzent)}
.faq-a{padding:0 56px 26px 0;color:var(--leise)}
.faq-a p{margin:0}

/* ---------- Anbieter ---------- */
.anbieter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.anbieter .s-kopf{margin-bottom:28px}
.anb-text{color:var(--leise);max-width:520px}
.anb-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:28px}
.anb-links a{font-size:.9375rem}
.anb-karte{font-style:normal;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:clamp(28px,3vw,44px)}
.anb-firma{font:var(--h-gewicht) 1.5rem/1.25 var(--h-schrift);color:var(--tinte);margin-bottom:10px}
.anb-dl{margin:24px 0 0}
.anb-dl div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--linie);font-size:.9375rem}
.anb-dl dt{color:var(--leise)}
.anb-dl dd{margin:0;color:var(--tinte)}

/* ---------- Fuss ---------- */
.fuss{background:var(--dunkel);color:var(--dunkel-leise);padding:72px 0 0;font-size:.9375rem;--tinte:#f4eee3;--leise:var(--dunkel-leise);--linie:var(--dunkel-linie)}
.fuss a{color:var(--dunkel-text);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease),color .25s}
.fuss a:hover{background-size:100% 1px}
.fuss a:hover{color:var(--marke)}
.fuss .logo{color:var(--dunkel-text);margin-bottom:22px}
.fuss-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px}
.fuss-marke p{max-width:300px}
.fuss-h{font:500 .75rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--dunkel-text);margin:6px 0 18px}
.fuss ul li{margin-bottom:8px}
.fuss-unten{position:relative;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:24px;padding-bottom:32px;font-size:.8125rem}
.fuss-unten::before{content:"";position:absolute;top:0;left:var(--rand);right:var(--rand);height:1px;background:var(--dunkel-linie)}
.fuss-unten p{margin:0}

/* ---------- Rechtsseiten ---------- */
.recht{padding:clamp(48px,7vw,96px) 0 var(--s)}
.recht-in{display:grid;grid-template-columns:240px minmax(0,760px);gap:56px;justify-content:center}
.recht-kopf{grid-column:1/-1;max-width:1040px}
.recht-kopf h1{font-size:clamp(2.5rem,5vw,4rem)}
.recht-stand{color:var(--leise);margin-top:14px}
.sprung{position:sticky;top:104px;align-self:start;font-size:.875rem;max-height:calc(100vh - 130px);overflow:auto}
.sprung-h{font:500 .75rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--akzent)}
.sprung li{padding:6px 0;border-top:1px solid var(--linie)}
.sprung a{text-decoration:none;color:var(--leise);display:block}
.sprung a:hover{color:var(--tinte)}
.recht-text{grid-column:2;max-width:760px}
.recht-in:not(:has(.sprung)) .recht-text{grid-column:1/-1;margin:0 auto;width:100%}
.recht-text h2{font-size:clamp(1.6rem,2.4vw,2rem);margin:56px 0 18px;padding-top:28px;border-top:1px solid var(--linie)}
.recht-text h2.recht-teil{font-size:clamp(1.9rem,3vw,2.4rem);border-top:2px solid var(--tinte)}
.recht-text h3{font:600 1.0625rem/1.4 var(--sans);letter-spacing:0;margin:32px 0 10px;color:var(--tinte)}
.recht-text p,.recht-text li{font-size:1rem;line-height:1.7}
.recht-liste{list-style:disc;padding-left:1.3rem;margin:0 0 1em}
.recht-liste li{margin-bottom:6px}
.recht-text a{overflow-wrap:anywhere}
.recht-text strong{color:var(--tinte);font-weight:600}
.recht-kasten{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:22px 26px;margin:0 0 1em}
.recht-kasten p:last-child{margin:0}
.fehler{min-height:56vh}
.fehler h1{font-size:clamp(2.5rem,5vw,4rem);margin-bottom:18px}

/* ---------- Bewegung (nur wenn erlaubt; ohne JS ist alles sichtbar) ---------- */
@media (prefers-reduced-motion:no-preference){
  .rv.rv-warte{opacity:0;transform:translateY(18px)}
  .rv{transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .hero-pic img{animation:hero-ein 1.6s var(--ease) both}
  @keyframes hero-ein{from{opacity:.0;transform:scale(1.04)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ---------- Responsiv ---------- */
@media (max-width:1100px){
  .preis-raster{grid-template-columns:1fr 1fr}
  .preis-raster .preis-block:first-child{grid-column:1/-1}
}
@media (max-width:980px){
  .hero-in,.e-a .hero-in,.e-b .hero-in{grid-template-columns:1fr;min-height:0;gap:0}
  .e-a .hero-oben{display:flex;flex-direction:column}
  .e-a .hero-bild{position:relative;width:100%;order:2;height:auto;margin-top:8px}
  .e-a .hero-pic img{aspect-ratio:4/3;height:auto}
  .e-a .hero-in{order:1;padding-bottom:40px}
  .e-b .hero-bild::after{background:linear-gradient(0deg,rgba(13,19,32,.96) 35%,rgba(13,19,32,.55) 75%,rgba(13,19,32,.35))}
  .e-b .hero-in{min-height:88vh;align-items:end}
  .fakten{grid-template-columns:1fr 1fr}
  .fakten li:nth-child(3){padding-left:0;border-left:0}
  .fakten li:nth-child(n+3){border-top:1px solid var(--linie)}
  .raster-3,.stufen,.hinweise{grid-template-columns:1fr}
  .stufe+.stufe{border-left:0;border-top:1px solid var(--linie-stark)}
  .schritte{grid-template-columns:1fr 1fr}
  .schritt:nth-child(3){padding-left:0;border-left:0}
  .schritt:nth-child(3)::before{left:0}
  .schritt:nth-child(n+3){border-top:1px solid var(--linie);margin-top:24px}
  .raster-2,.muenzen,.verp,.anbieter{grid-template-columns:1fr}
  .verp-bild{position:static}
  .verp-bild img{aspect-ratio:4/3}
  .recht-in{grid-template-columns:1fr;gap:32px}
  .sprung{position:static;max-height:none}
  .recht-text{grid-column:1}
  .fuss-in{grid-template-columns:1fr 1fr}
  .fuss-marke{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:1rem}
  .kopf-in{height:66px}
  .logo-bild{height:26px}
  .preis-raster{grid-template-columns:1fr}
  .schritte{grid-template-columns:1fr}
  .schritt,.schritt+.schritt{padding:28px 0 0;border-left:0}
  .schritt+.schritt{border-top:1px solid var(--linie);margin-top:24px}
  .schritt::before,.schritt+.schritt::before{left:0}
  .schritt-nr{font-size:2.75rem}
  .vp-liste{grid-template-columns:1fr}
  .fakten li{padding:20px 12px 22px 0}
  .fakten li+li{padding-left:14px}
  .fakten li:nth-child(3){padding-left:0}
  .faq-a{padding-right:0}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .anb-dl div{grid-template-columns:1fr;gap:2px}
  .fuss-in{grid-template-columns:1fr}
  .widget-frame{height:760px}
}


/* ---------- Runde 2 (Gate 31.10.2026): Rhythmus mobil, Ablauf als Zeitleiste ---------- */
@media (max-width:640px){
  :root{--s:80px}
  .s-kopf{margin-bottom:40px}
  .schritte{border-top:0;padding-left:26px;position:relative}
  .schritte::before{content:"";position:absolute;left:3px;top:6px;bottom:6px;width:1px;background:var(--linie-stark)}
  .schritt,.schritt+.schritt{padding:0 0 36px;border:0;margin:0}
  .schritt::before,.schritt+.schritt::before{left:-26px;top:6px}
  .schritt-nr{font:600 .75rem/1 var(--sans);letter-spacing:.14em;color:var(--akzent);margin:0 0 10px}
  .schritt h3{font-size:1.375rem}
  .weg-bild img{aspect-ratio:16/11}
  .fakt-zahl{font-size:1.625rem}
}

/* Versalziffern fuer die Serife (Cormorant hat Mediaevalziffern: „01“ las sich als „OI“). Steht hinter allen font-Kurzschreibweisen,
   weil „font:“ font-variant-numeric zuruecksetzt. */
h1,h2,h3,h4,.fakt-zahl,.schritt-nr,.stufe-wert,.anb-firma,.wpk-preis strong,.beleg-tab tfoot td,.karte-nr{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}

/* Platzhalter (Runde 5): ruhige Karte statt gesperrter Formularfelder */
.wpk-ruhe{text-align:center;padding:clamp(24px,5vw,48px) 8px 8px}
.wpk-ruhe h1{font-size:clamp(1.75rem,3vw,2.25rem);margin:0 0 14px}
.wpk-ruhe p{color:var(--leise);max-width:46ch;margin:0 auto 22px}
.wpk-tel{display:block;font:500 1.5rem/1.2 var(--sans);color:var(--tinte);text-decoration:none;margin-bottom:6px;font-variant-numeric:tabular-nums}

/* ---------- Platzhalter der Buchungsstrecke (nur /buchen/ bis zum echten Widget) ---------- */
.wpk-platzhalter{background:var(--karte)}
.wpk{padding:clamp(20px,4vw,40px)}
.wpk-schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:28px;counter-reset:w}
.wpk-schritte li{counter-increment:w;font-size:.8125rem;color:var(--leise);padding-top:12px;border-top:2px solid var(--linie)}
.wpk-schritte li::before{content:counter(w) " · "}
.wpk-schritte li.ist{color:var(--tinte);border-top-color:var(--akzent);font-weight:500}
.wpk-form fieldset{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wpk-feld{display:flex;flex-direction:column;gap:6px}
.wpk-breit{grid-column:1/-1}
.wpk-feld label,.wpk-label{font-size:.8125rem;color:var(--leise)}
.wpk-feld input,.wpk-feld select{font:inherit;min-height:48px;padding:0 14px;border:1px solid var(--linie-stark);border-radius:var(--radius);background:var(--bg);color:var(--text)}
.wpk-wege{flex-direction:row;flex-wrap:wrap;gap:12px 28px;align-items:center}
.wpk-wege label{display:flex;gap:8px;align-items:center;color:var(--text);font-size:.9375rem}
.wpk-fuss{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:28px;padding-top:22px;border-top:1px solid var(--linie);flex-wrap:wrap}
.wpk-preis{margin:0;display:flex;flex-direction:column}
.wpk-preis span{font-size:.8125rem;color:var(--leise)}
.wpk-preis strong{font:var(--h-gewicht) 2rem/1.1 var(--h-schrift);color:var(--tinte)}
.wpk-hinweis{margin:0 0 22px;font-size:.8125rem;color:var(--leise)}
@media (max-width:640px){.wpk-form fieldset{grid-template-columns:1fr}.wpk-schritte{font-size:.75rem}.wpk-fuss .btn{width:100%;justify-content:center;min-height:52px}.wpk-feld input,.wpk-feld select{font-size:16px}}

/* ---------- Nach oben (01.11.2026, Muster DWL): ohne JS Anker auf #top (Sprunglink); mit JS erst nach gut einer Bildschirmhoehe.
   Flaeche Fast-Schwarz, Rand/Fokus Markengruen. Fokusring gruen zwischen zwei dunklen Saeumen -> auf hellem wie dunklem Grund sichtbar.
   Abstand zum Rand + Safe-Area; die Seite hat keine fixierten Leisten/Cookie-Hinweise. Ueber dem Buchungs-iframe blendet wp.js ihn aus. */
.nach-oben{position:fixed;right:calc(16px + env(safe-area-inset-right, 0px));bottom:calc(16px + env(safe-area-inset-bottom, 0px));z-index:40;
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--dunkel);color:#fff;border:1.5px solid var(--marke);
  box-shadow:0 2px 10px rgba(16,24,32,.24);text-decoration:none}
.nach-oben:hover{color:var(--marke)}
.nach-oben:focus-visible{outline:3px solid var(--marke);outline-offset:3px;box-shadow:0 0 0 8px var(--dunkel)}
.nach-oben svg{display:block}
/* Letzte Fusszeile (© rechts) nie unter dem Knopf: unten Platz fuer Knopf (16+48 px) + Safe-Area */
.fuss-unten{padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px))}
@media (scripting:enabled){.nach-oben:not(.zeigen){opacity:0;visibility:hidden;transform:translateY(8px)}}
@media (prefers-reduced-motion:no-preference){.nach-oben{transition:opacity .2s,visibility .2s,transform .2s var(--ease),color .15s}}
@media print{.nach-oben{display:none}}

/* ---------- Infoseiten (01.11.2026): Versicherung, Verpackung, Verpackungsnachweis – Raster wie Rechtsseiten ---------- */
.nav a[aria-current="page"]{color:var(--tinte)}
.nav a[aria-current="page"]::after{right:0}
.nav a,.kopf-cta{white-space:nowrap}.kopf-cta{flex:none}
.kopf .logo{flex:none}   /* Logo nie stauchen (Lighthouse image-aspect-ratio, 8 Menuepunkte 01.11.2026) */
/* 8 Menuepunkte: der Kopf ist ab 1320 px auf 1160 px Inhalt begrenzt (wrap) – kompakt fuer alle Desktopbreiten */
@media (min-width:1280px){.nav ul{gap:14px}.nav a{font-size:.8125rem}.kopf-in{gap:18px}.kopf .logo-bild{height:30px}.kopf-cta{padding:0 1.1em}}
.info .recht-kopf h1{overflow-wrap:break-word;hyphens:manual}
@media (min-width:981px){.fuss-in{grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:32px}}
.info-lead{font-size:clamp(1.125rem,1.6vw,1.3125rem);line-height:1.55;color:var(--text);max-width:62ch;margin:18px 0 0}
.info .recht-kopf{margin-bottom:8px}
.info-tab{width:100%;margin:8px 0 1.25em;font-size:.9375rem}
.info-tab caption{caption-side:top;text-align:left;font:600 .9375rem/1.4 var(--sans);color:var(--tinte);padding-bottom:8px}
.info-tab th[scope="row"]{font:500 .9375rem/1.45 var(--sans);letter-spacing:0;text-transform:none;color:var(--tinte);text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--linie)}
.info-tab tr:last-child th[scope="row"]{border-bottom:0}
.info-tab td{vertical-align:top}
.info-tab-schmal{max-width:520px}
.info-liste{margin:0 0 1.25em}
.info-liste li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--linie)}
.info-liste li:last-child{border-bottom:1px solid var(--linie)}
.info-liste .ic{margin-top:3px}
.info-ja .ic{color:var(--akzent)}
.info-nein .ic{color:#9b2c2c}
.info-schritte{counter-reset:schritt;margin:8px 0 1.5em}
.info-schritte li{counter-increment:schritt;position:relative;padding:4px 0 18px 56px}
.info-schritte li::before{content:counter(schritt,decimal-leading-zero);position:absolute;left:0;top:0;font:var(--h-gewicht) 1.75rem/1 var(--h-schrift);color:var(--akzent);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.info-schritte li+li{border-top:1px solid var(--linie);padding-top:18px}
.info-schritte li+li::before{top:16px}
.recht-text .info-schritte h3{margin:0 0 6px}
.info-schritte p{margin:0}
.info-bilder{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:8px 0 1.5em}
.info-fig{margin:0}
.info-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.info-fig figcaption,.vn-video figcaption{font-size:.875rem;color:var(--leise);margin-top:8px}
.vn-video{margin:0 0 1.5em}
.vn-video video{display:block;width:100%;height:auto;background:#0b1626;border-radius:var(--radius)}
.vn-video .vn-quer{aspect-ratio:16/9}
.vn-video .vn-hoch{display:none;aspect-ratio:9/16;max-width:340px;margin:0 auto}
.vn-video figcaption{text-align:center}
.info-weiter{margin-top:56px;padding-top:28px;border-top:2px solid var(--tinte)}
.info-weiter ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:0 0 28px}
.info-weiter li a{display:block;height:100%;padding:18px 20px;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);text-decoration:none;color:var(--tinte);font:var(--h-gewicht) 1.25rem/1.25 var(--h-schrift)}
.info-weiter li a:hover{border-color:var(--akzent)}
.info-weiter li span{display:block;font:400 .875rem/1.5 var(--sans);color:var(--leise);margin-top:6px}
@media (max-width:640px){
  .vn-video .vn-quer{display:none}
  .vn-video .vn-hoch{display:block}
  .info-bilder,.info-weiter ul{grid-template-columns:1fr}
  .info-schritte li{padding-left:44px}
  .info-schritte li::before{font-size:1.5rem}
  .info-tab{font-size:.875rem}
  .info-tab-weg thead{display:none}
  .info-tab-weg tr{display:block;padding:14px 0;border-bottom:1px solid var(--linie)}
  .info-tab-weg th[scope="row"],.info-tab-weg td{display:block;border:0;padding:4px 0}
  .info-tab-weg td::before{content:attr(data-label);display:block;font:500 .6875rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--leise)}
}
@media print{.vn-video,.info-weiter{display:none}}
/* Sendungsverfolgung direkt auf der Seite (01.11.2026): Formular Nummer + Empfaenger-PLZ, Zeitleiste mit eigenen Icons (Sprite #tr-i-*).
   Markenfarben: Fast-Schwarz #101820 (--dunkel) fuer erledigte Schritte, Gruen #78D64B (--marke) fuer den aktuellen Schritt und Haken
   (nur als Flaeche, nie als Textfarbe). Am Handy senkrecht, ab 721 px waagerecht. Bewegung nur ohne prefers-reduced-motion. */
.verfolgen{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:24px 26px;margin:0 0 1.5em}
.verfolgen-felder{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;gap:14px;align-items:end}
.verfolgen label{display:block;font:600 .9375rem/1.4 var(--sans);color:var(--tinte);margin-bottom:8px}
.verfolgen input{display:block;width:100%;min-width:0;min-height:52px;padding:0 16px;font:500 1.0625rem/1 var(--sans);letter-spacing:.04em;color:var(--tinte);background:var(--bg);border:1px solid var(--linie-stark);border-radius:var(--radius)}
.verfolgen input::placeholder{color:#6b7078;opacity:1}
.verfolgen input:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.verfolgen input[aria-invalid="true"]{border-color:#9b2c2c;box-shadow:inset 0 0 0 1px #9b2c2c}
.verfolgen .btn{min-height:52px;white-space:nowrap}
.verfolgen .btn:disabled{opacity:.7;cursor:progress}
.recht-text .verfolgen .fein{margin:12px 0 0;font-size:.875rem}
.recht-text .verfolgen .verfolgen-meldung{color:var(--tinte);font-weight:500}
.verfolgen .fein:empty{display:none}
.tr-sprite{position:absolute;width:0;height:0;overflow:hidden}
.tr-ic{width:24px;height:24px;flex:none}
.tr-flaeche{margin:0 0 1.5em}
.tr-flaeche:focus,.tr-ergebnis:focus,.tr-meldung:focus{outline:none}

/* Ergebnis: Kopf mit aktuellem Stand */
.tr-ergebnis{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:28px 28px 22px}
.tr-kopf{display:flex;gap:20px;align-items:flex-start}
.tr-kopf-ic{flex:none;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--dunkel);color:var(--marke)}
.tr-kopf-ic .tr-ic{width:34px;height:34px}
.tr-kopf-ic.is-fertig{background:var(--marke);color:var(--dunkel)}
.tr-kopf-ic.is-sonder{background:var(--karte);color:var(--tinte);border:2px dashed var(--tinte)}
.recht-text .tr-nr{margin:2px 0 4px;font:600 .75rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--leise)}
.recht-text .tr-titel{margin:0 0 6px;padding:0;border:0;font-size:clamp(1.75rem,3vw,2.25rem);line-height:1.1}
.recht-text .tr-satz{margin:0 0 10px;font-size:1rem;color:var(--text)}
.recht-text .tr-meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;font-size:.875rem;color:var(--leise)}
.recht-text .tr-stand{margin:18px 0 0;padding:12px 16px;background:var(--flaeche);border-left:3px solid var(--dunkel);font-size:.9375rem}

/* Fortschrittsband (Grundform senkrecht = Handy) */
.tr-band{position:relative;margin:28px 0 8px;padding:0;list-style:none;counter-reset:none}
.recht-text .tr-band li{font-size:inherit;line-height:1.35}
.tr-schritt{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center;padding:0 0 20px}
.tr-schritt:last-child{padding-bottom:0}
.tr-schritt::before,.tr-schritt::after{content:"";position:absolute;left:21px;top:46px;bottom:2px;width:2px;background:var(--linie-stark)}
.tr-schritt::after{background:var(--marke);transform-origin:top;transform:scaleY(0)}
.tr-schritt.is-erledigt::after{transform:scaleY(1)}
.tr-schritt:last-child::before,.tr-schritt:last-child::after{display:none}
.tr-punkt{position:relative;z-index:1;grid-row:1/span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--karte);border:2px solid var(--linie-stark);color:#6b7078}
.tr-schritt.is-erledigt .tr-punkt{background:var(--dunkel);border-color:var(--dunkel);color:var(--marke)}
.tr-schritt.is-aktuell .tr-punkt{background:var(--marke);border-color:var(--marke);color:var(--dunkel);box-shadow:0 0 0 6px rgba(120,214,75,.24)}
.tr-schritt.is-sonder .tr-punkt{background:var(--karte);border:2px dashed var(--tinte);color:var(--tinte);box-shadow:0 0 0 6px rgba(16,24,32,.07)}
.tr-haken{position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--marke);color:var(--dunkel);border:2px solid var(--karte)}
.tr-haken .tr-ic{width:12px;height:12px;stroke-width:3}
.tr-label{display:block;font:600 .9375rem/1.3 var(--sans);color:var(--tinte)}
.tr-schritt.is-offen .tr-label{font-weight:500;color:var(--leise)}
.tr-schritt.is-aktuell .tr-label{font-weight:600}
.tr-zeit{display:block;font:400 .8125rem/1.3 var(--sans);color:var(--leise);font-variant-numeric:tabular-nums}

/* Vorschau vor der Abfrage: ruhige Icon-Leiste, keine Linien */
.tr-vorschau{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:0 0 2em}
.tr-vorschau .tr-schritt{padding:0;grid-template-columns:38px minmax(0,1fr);column-gap:10px}
.tr-vorschau .tr-schritt::before,.tr-vorschau .tr-schritt::after{display:none}
.tr-vorschau .tr-punkt{width:38px;height:38px;grid-row:auto;border-width:1px;color:var(--tinte);background:var(--flaeche);border-color:var(--linie)}
.tr-vorschau .tr-ic{width:20px;height:20px}
.recht-text .tr-vorschau .tr-label{font-size:.8125rem;font-weight:500;color:var(--text)}
.tr-vorschau[hidden]{display:none}

/* Ereignisliste */
.tr-details{margin:22px 0 0;border-top:1px solid var(--linie)}
.tr-details summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 0 0;cursor:pointer;list-style:none;font:600 .9375rem/1.3 var(--sans);color:var(--tinte)}
.tr-details summary::-webkit-details-marker{display:none}
.tr-details summary::after{content:"";flex:none;width:9px;height:9px;margin-right:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.tr-details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.tr-details summary:hover{color:var(--akzent)}
.tr-details summary:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.tr-ereignisse{margin:14px 0 0;padding:0;list-style:none}
.tr-ereignis{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;padding:12px 0;border-bottom:1px solid var(--linie)}
.tr-ereignis:last-child{border-bottom:0}
.tr-ereignis-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--flaeche);color:var(--tinte)}
.tr-ereignis-ic .tr-ic{width:20px;height:20px}
.tr-k-zugestellt .tr-ereignis-ic{background:var(--marke);color:var(--dunkel)}
.tr-k-versuch .tr-ereignis-ic,.tr-k-abholbereit .tr-ereignis-ic,.tr-k-ruecksendung .tr-ereignis-ic,.tr-k-problem .tr-ereignis-ic{background:var(--karte);border:1.5px dashed var(--tinte)}
.recht-text .tr-ereignis p{margin:0}
.recht-text .tr-ereignis-titel{font:600 .9375rem/1.4 var(--sans);color:var(--tinte)}
.recht-text .tr-ereignis-roh{font-size:.9375rem;line-height:1.5;color:var(--text)}
.recht-text .tr-ereignis-zeit{font-size:.8125rem;color:var(--leise);font-variant-numeric:tabular-nums}
.recht-text .tr-leer{margin:20px 0 0;font-size:.9375rem;color:var(--text)}
.recht-text .tr-fuss{margin:18px 0 0;font-size:.8125rem}
.recht-text .tr-kontakt{margin:10px 0 0;font-size:.9375rem}

/* Meldungen (Maske, Fehler, noch keine Daten) */
.tr-meldung{display:flex;gap:16px;align-items:flex-start;background:var(--karte);border:1px solid var(--linie);border-left:4px solid var(--dunkel);border-radius:var(--radius);padding:20px 22px}
.tr-meldung-ic{width:40px;height:40px;padding:8px;border-radius:50%;background:var(--flaeche);color:var(--tinte)}
.tr-meldung-maske{border-left-color:var(--marke)}
.tr-meldung-fehler{border-left-style:dashed}
.recht-text .tr-meldung p{margin:0 0 8px;font-size:.9375rem}
.recht-text .tr-meldung .tr-meldung-titel{font:600 1.0625rem/1.35 var(--sans);color:var(--tinte)}
.recht-text .tr-meldung p:last-child{margin-bottom:0}
.recht-text .tr-gruende{margin:0 0 10px;padding:0;list-style:none}
.recht-text .tr-gruende li{position:relative;padding-left:18px;margin:0 0 6px;font-size:.9375rem;line-height:1.5}
.tr-gruende li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--marke)}

/* Waagerecht ab 721 px: sieben Spalten, Linie zwischen den Punkten */
@media (min-width:721px){
  .tr-band:not(.tr-vorschau){display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0 6px}
  .tr-band:not(.tr-vorschau) .tr-schritt{display:block;text-align:center;padding:0}
  .tr-band:not(.tr-vorschau) .tr-schritt::before,.tr-band:not(.tr-vorschau) .tr-schritt::after{display:block;top:21px;bottom:auto;height:2px;width:auto;left:calc(-50% + 25px);right:calc(50% + 25px)}
  .tr-band:not(.tr-vorschau) .tr-schritt::after{transform-origin:left;transform:scaleX(0)}
  .tr-band:not(.tr-vorschau) .tr-schritt.is-erledigt::after,.tr-band:not(.tr-vorschau) .tr-schritt.is-aktuell::after{transform:scaleX(1)}
  .tr-band:not(.tr-vorschau) .tr-schritt:first-child::before,.tr-band:not(.tr-vorschau) .tr-schritt:first-child::after{display:none}
  .tr-band:not(.tr-vorschau) .tr-schritt:last-child::before,.tr-band:not(.tr-vorschau) .tr-schritt:last-child::after{display:block}
  .tr-band:not(.tr-vorschau) .tr-punkt{margin:0 auto 10px}
  .tr-band:not(.tr-vorschau) .tr-label{font-size:.8125rem;hyphens:auto;-webkit-hyphens:auto}
  .tr-band:not(.tr-vorschau) .tr-zeit{font-size:.75rem;margin-top:3px}
  .tr-vorschau{grid-template-columns:repeat(7,minmax(0,1fr));gap:0 6px}
  .tr-vorschau .tr-schritt{display:block;text-align:center}
  .tr-vorschau .tr-punkt{margin:0 auto 8px;width:44px;height:44px}
  .tr-vorschau .tr-ic{width:22px;height:22px}
  .recht-text .tr-vorschau .tr-label{font-size:.75rem;line-height:1.3;hyphens:auto;-webkit-hyphens:auto}
}
@media (max-width:640px){
  .verfolgen{padding:18px}
  .verfolgen-felder{grid-template-columns:1fr}
  .verfolgen .btn{width:100%;justify-content:center}
  .verfolgen input{font-size:16px}
  .tr-ergebnis{padding:20px 18px 18px}
  .tr-kopf{gap:14px}
  .tr-kopf-ic{width:52px;height:52px}
  .tr-kopf-ic .tr-ic{width:26px;height:26px}
  .tr-meldung{padding:16px;gap:12px}
}
@media (min-width:641px) and (max-width:900px){.verfolgen-felder{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.verfolgen .btn{grid-column:1/-1;justify-content:center}}

/* Bewegung: Band fuellt sich nacheinander, aktueller Schritt atmet ruhig (nur ohne prefers-reduced-motion) */
@media (prefers-reduced-motion:no-preference){
  .tr-ergebnis,.tr-meldung{animation:tr-ein .45s var(--ease) both}
  @keyframes tr-ein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .tr-ergebnis .tr-schritt::after{transition:transform .45s var(--ease)}
  .tr-ergebnis:not(.tr-an) .tr-schritt::after{transform:scaleY(0)}
  .tr-ergebnis .tr-schritt:nth-child(2)::after{transition-delay:.08s}.tr-ergebnis .tr-schritt:nth-child(3)::after{transition-delay:.16s}
  .tr-ergebnis .tr-schritt:nth-child(4)::after{transition-delay:.24s}.tr-ergebnis .tr-schritt:nth-child(5)::after{transition-delay:.32s}
  .tr-ergebnis .tr-schritt:nth-child(6)::after{transition-delay:.4s}.tr-ergebnis .tr-schritt:nth-child(7)::after{transition-delay:.48s}
  .tr-schritt.is-aktuell .tr-punkt{animation:tr-atmen 2.6s ease-in-out infinite}
  @keyframes tr-atmen{0%,100%{box-shadow:0 0 0 6px rgba(120,214,75,.24)}50%{box-shadow:0 0 0 10px rgba(120,214,75,.08)}}
}
@media (prefers-reduced-motion:no-preference) and (min-width:721px){
  .tr-ergebnis:not(.tr-an) .tr-band .tr-schritt::after{transform:scaleX(0)}
}
@media print{.verfolgen,.tr-vorschau,.tr-details summary::after{display:none}.tr-details:not([open]) .tr-ereignisse{display:block}}

/* Startseite: Link „Alle Fragen und Kontaktformular“ unter der FAQ-Auswahl (Seite /fragen.html, 01.11.2026) */
.faq-mehr{margin:36px 0 0;text-align:center}
.faq-rita{margin:14px 0 0;text-align:center;font-size:.9375rem}
.faq-rita a{color:var(--akzent);text-underline-offset:3px}

/* ---------- Frachtgewicht-Seite /frachtgewicht.html (FG_0111, 01.11.2026) + Hinweisboxen/Kurz-gefragt der Versicherungsseite ---------- */
.fg-bild{margin:0 0 28px}
.fg-svg{width:100%;height:auto;background:var(--flaeche);border-radius:14px;padding:6px}
.fg-svg text{font-family:var(--sans)}
.fg-svg .fg-ziffer{font-variant-numeric:tabular-nums lining-nums}
.fg-hoch{display:none}
.fg-bild figcaption{font-size:.875rem;color:var(--leise);margin-top:10px}
@media (max-width:640px){.fg-quer{display:none}.fg-hoch{display:block;max-width:420px;margin:0 auto}}
.fg-kurz-h,.info-wichtig-h{font:600 .75rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--akzent);margin:0 0 12px}
.fg-dl{margin:0}
.fg-dl div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:10px 0;border-top:1px solid var(--linie)}
.fg-dl dt{font-weight:600;color:var(--tinte)}
.fg-dl dd{margin:0}
.recht-text .fg-st-h{margin:28px 0 12px}
.fg-staffel{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;margin:0 0 1.25em}
.recht-text .fg-staffel li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--karte);border:1px solid var(--linie);border-radius:6px;font-size:.875rem;line-height:1.3}
.fg-staffel li:first-child{border-color:var(--akzent-hell);background:var(--akzent-flaeche)}
.fg-st-kg{color:var(--leise)}
.fg-st-p{font-weight:600;color:var(--tinte);font-variant-numeric:tabular-nums}
.fg-beispiele{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:8px 0 1.5em}
.fg-bsp{background:var(--karte);border:1px solid var(--linie);border-radius:10px;padding:20px 22px;display:flex;flex-direction:column}
.recht-text .fg-bsp-nr{font:600 .6875rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);margin:0 0 6px}
.recht-text .fg-bsp h3{margin:0 0 4px;font-size:1.0625rem}
.recht-text .fg-bsp-inhalt{font-size:.875rem;color:var(--leise);margin:0 0 12px}
.fg-mini{width:100%;max-width:270px;height:auto;margin:0 0 10px}
.fg-mini text{font-family:var(--sans)}
.fg-bsp-dl{margin:0 0 12px;font-size:.875rem}
.fg-bsp-dl div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--linie)}
.fg-bsp-dl dt{color:var(--leise)}
.fg-bsp-dl dd{margin:0;text-align:right;color:var(--tinte);font-variant-numeric:tabular-nums}
.fg-bsp-fg dd{font-weight:600}
.fg-bsp-fg dd span{font-weight:400;color:var(--akzent)}
.fg-bsp-preis{border-top:2px solid var(--tinte)!important}
.fg-bsp-preis dt{color:var(--tinte);font-weight:600}
.fg-bsp-preis dd{font-weight:600;font-size:1.0625rem}
.recht-text .fg-bsp-fazit{font-size:.875rem;margin:auto 0 0}
.recht-text .fg-bsp-plus{font-size:.875rem;margin:10px 0 0;padding:10px 12px;background:var(--akzent-flaeche);border-left:3px solid var(--akzent-hell)}
.fg-grenzen th[scope="row"]{width:34%}
.fg-rechner{background:var(--karte);border:1px solid var(--linie);border-radius:10px;padding:22px;margin:8px 0 1.5em}
.fg-r-felder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fg-r-feld label{display:block;font:600 .8125rem/1.3 var(--sans);color:var(--tinte);margin:0 0 6px}
.fg-r-ein{display:flex;align-items:center;border:1px solid var(--linie-stark);border-radius:var(--radius);background:var(--bg)}
.fg-r-ein:focus-within{outline:2px solid var(--akzent);outline-offset:2px}
.fg-r-ein input{flex:1;min-width:0;min-height:48px;padding:0 4px 0 12px;border:0;background:transparent;font:500 1.0625rem/1 var(--sans);color:var(--tinte);font-variant-numeric:tabular-nums}
.fg-r-ein input:focus{outline:0}
.fg-r-ein span{padding:0 12px 0 4px;color:var(--leise);font-size:.875rem}
.fg-r-aus{margin:18px 0 0;padding:16px 18px;background:var(--flaeche);border-radius:8px}
.fg-r-aus dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px}
.fg-r-aus dl div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--linie);font-size:.9375rem}
.fg-r-aus dt{color:var(--leise)}
.fg-r-aus dd{margin:0;text-align:right;color:var(--tinte);font-weight:500;font-variant-numeric:tabular-nums}
.fg-r-aus .fg-r-preis dd{font-weight:600}
.recht-text .fg-r-hinweis{margin:10px 0 0;font-size:.9375rem;color:var(--tinte)}
.recht-text .fg-r-hinweis:empty{display:none}
.recht-text .fg-r-fein{margin:12px 0 0}
.info-wichtig{margin:0 0 1.5em;padding:20px 24px;background:var(--akzent-flaeche);border:1px solid var(--akzent-hell);border-left:4px solid var(--akzent);border-radius:var(--radius)}
.info-wichtig ul{display:grid;gap:10px}
.recht-text .info-wichtig li{font-size:.9688rem;line-height:1.6}
.info-wichtig p:last-child{margin:0}
.info-wichtig-frist{margin-top:8px}
.vfaqs{border-top:1px solid var(--linie-stark);margin:0 0 1.25em}
.vfaq{border-bottom:1px solid var(--linie)}
.vfaq summary{list-style:none;cursor:pointer;padding:14px 32px 14px 0;position:relative;font-weight:600;color:var(--tinte)}
.vfaq summary::-webkit-details-marker{display:none}
.vfaq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:1.25rem;line-height:1;color:var(--akzent)}
.vfaq[open] summary::after{content:"–"}
.vfaq summary:hover{color:var(--akzent)}
.recht-text .vfaq p{margin:0 0 16px;color:var(--text)}
@media (max-width:760px){.fg-beispiele{grid-template-columns:1fr}.fg-r-felder{grid-template-columns:repeat(2,minmax(0,1fr))}.fg-r-aus dl{grid-template-columns:1fr}}
@media (max-width:640px){.fg-dl div{grid-template-columns:1fr;gap:2px}.fg-r-ein input{font-size:16px}.info-wichtig{padding:16px 18px}.fg-rechner{padding:18px 16px}}
@media print{.fg-rechner{display:none}.fg-hoch{display:none}.fg-quer{display:block}}

/* „Vertrag widerrufen“ als Schaltflaeche im Fuss (§ 356a BGB, Markus 01.11.2026; Muster waffenversand.de .foot-widerruf).
   Dunkler Fuss: Text #f4eee3 auf --dunkel, Rand/Hover in --akzent-hell; Fokusring sichtbar; Klickziel >= 44 px. */
.fuss-widerruf-p{margin:0 0 18px}
.fuss a.fuss-widerruf{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--akzent-hell,#78d64b);border-radius:var(--radius);
  background:none;color:#f4eee3;font:600 .9375rem/1.2 var(--sans);letter-spacing:.01em;text-decoration:none;transition:background-color .2s,color .2s}
.fuss a.fuss-widerruf:hover{background:var(--akzent-hell,#78d64b);color:#101820}
.fuss a.fuss-widerruf:focus-visible{outline:2px solid var(--akzent-hell,#78d64b);outline-offset:3px}

/* ---------- Buehne: Bildwechsler im Startseiten-Hero (Auftrag Markus 01.11.2026) ----------
   Vollflaechig, dunkle Tinte (#101820) als Grund; Bilder 16:9 (Quer) / 4:5 (Hochkant bis 640 px) per <picture>.
   Gitter statt absoluter Lage: Desktop liegen Kopf (Kicker+H1) und Rest (Lead+Knoepfe) links auf dem Bild, Handy liegt nur der
   Kopf auf dem Bild, der Rest folgt darunter auf Tinte. Lesbarkeit per Verlauf (::after), nicht ins Bild gebacken. */
.hero-buehne .hero-oben{--tinte:#f4eee3;--leise:#c8ced5;--akzent:#78d64b;--linie-stark:rgba(244,238,227,.42);--btn:#f4eee3;--btn-text:#101820;--btn-hover:#ffffff}
.hero-buehne .hero-oben{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;background:#101820;
  min-height:min(82vh,800px);position:relative;isolation:isolate}
.buehne{grid-area:1/1/5/2;position:relative;overflow:hidden;background:#101820}
.buehne::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(16,24,32,.94) 0%,rgba(16,24,32,.86) 26%,rgba(16,24,32,.5) 44%,rgba(16,24,32,.08) 62%,rgba(16,24,32,0) 72%),
             linear-gradient(0deg,rgba(16,24,32,.55) 0%,rgba(16,24,32,0) 22%)}
.b-bild{position:absolute;inset:0;opacity:0;z-index:0}
.b-bild.an{opacity:1;z-index:1}
.b-bild img{width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.hero-kopf,.hero-rest{position:relative;z-index:3;width:100%}
.hero-kopf{grid-area:2/1/3/2;padding-top:clamp(56px,7vw,96px)}
.hero-rest{grid-area:3/1/4/2;padding-bottom:clamp(64px,8vw,104px)}
.hero-buehne .hero-text{max-width:540px}
.hero-buehne .hero-lead{margin:28px 0 36px}
.hero-buehne .kicker{color:#78d64b}
.hero-buehne .btn-zweit{color:#f4eee3;border-color:rgba(244,238,227,.5)}
.hero-buehne .btn-zweit:hover{color:#ffffff;border-color:#ffffff}
.hero-buehne :focus-visible{outline-color:#78d64b}
/* Pausenknopf (WCAG 2.2.2): unten rechts auf dem Bild, 44 px Klickziel; erst sichtbar, wenn wp.js den Wechsel startet */
.b-pause{position:absolute;right:max(16px,calc((100vw - var(--max)) / 2 + 16px));bottom:20px;z-index:4;width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#f4eee3;
  background:rgba(16,24,32,.55);border:1px solid rgba(244,238,227,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.b-pause[hidden]{display:none}
.b-pause:hover{background:rgba(16,24,32,.8);border-color:#f4eee3}
.b-pause:focus-visible{outline:2px solid #78d64b;outline-offset:3px}
.b-ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.b-ic-spiel{fill:currentColor;stroke-width:1.5}
.b-pause .b-ic-spiel,.b-pause[aria-pressed="true"] .b-ic-pause{display:none}
.b-pause[aria-pressed="true"] .b-ic-spiel{display:block}
@media (prefers-reduced-motion:no-preference){
  .b-bild{transition:opacity 1.4s cubic-bezier(.4,0,.2,1)}
  .b-bild img{transition:transform 9s linear;transform:scale(1.035)}
  .b-bild.an img{transform:none}
  .b-bild:first-child.an img{transition:none}
}
@media (min-width:981px) and (max-width:1199px){.hero-buehne .hero-text{max-width:440px}.b-bild img{object-position:84% 50%}}
@media (max-width:980px){
  .hero-buehne .hero-oben{grid-template-rows:auto auto;min-height:0}
  .buehne{grid-area:1/1/2/2;aspect-ratio:16/10;max-height:72svh}
  .buehne::after{background:linear-gradient(180deg,rgba(16,24,32,.88) 0%,rgba(16,24,32,.62) 30%,rgba(16,24,32,.12) 56%,rgba(16,24,32,0) 72%,rgba(16,24,32,.6) 92%,#101820 100%)}
  .hero-kopf{grid-area:1/1/2/2;align-self:start;padding-top:clamp(28px,6vw,48px)}
  .hero-rest{grid-area:2/1/3/2;padding-top:4px;padding-bottom:44px}
  .b-pause{grid-area:1/1/2/2;right:16px;bottom:14px}   /* abspos im Grid: Bezug = Bildfeld, nicht ganzer Hero */
  .b-bild img{object-position:center 60%}
}
@media (max-width:640px){
  .buehne{aspect-ratio:4/5;max-height:none}
  .b-bild img{object-position:center bottom}
  .hero-buehne h1{font-size:clamp(2.4rem,11vw,2.75rem)}
}

/* ---------- Kacheln „Was darf rein“ (Zusatzauftrag Markus 01.11.2026) ----------
   Helle Katalogkarten auf der dunklen Flaeche. Erlaubt: gruenes Haken-Abzeichen. Nicht erlaubt: Bild entsaettigt, diagonal
   durchgestrichen + rotes X. Bedeutung nie nur ueber Farbe: Form (Haken/X+Balken) und Screenreader-Text „Erlaubt:“/„Nicht erlaubt:“. */
.inhalt-kacheln{display:grid;gap:clamp(48px,6vw,72px)}
.inhalt-kacheln h3{font-size:1.5rem;margin-bottom:22px}
.kacheln{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.liste-nein .kacheln{grid-template-columns:repeat(6,minmax(0,1fr))}
.kachel{display:flex;flex-direction:column;min-width:0}
.k-bild{position:relative;border-radius:var(--radius);overflow:hidden;background:#e9e5dc;aspect-ratio:1/1}
.k-bild img{width:100%;height:100%;object-fit:cover}
.k-zeichen{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(16,24,32,.25)}
.k-zeichen svg{width:20px;height:20px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.k-ja .k-zeichen{background:#78d64b}
.k-ja .k-zeichen svg{stroke:#101820}
.k-nein .k-zeichen{background:#c6372a}
.k-nein .k-zeichen svg{stroke:#ffffff}
.k-nein picture{filter:saturate(.45) contrast(.94)}   /* leicht entsaettigt, Gold bleibt als Gold erkennbar */
.k-nein .k-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top right,transparent calc(50% - 2.5px),rgba(198,55,42,.92) calc(50% - 2.5px),rgba(198,55,42,.92) calc(50% + 2.5px),transparent calc(50% + 2.5px))}
.k-titel{margin:12px 0 0;font-size:.9375rem;line-height:1.4;color:var(--dunkel-text);font-weight:500;overflow-wrap:break-word}
.k-bed{margin:4px 0 0;font-size:.8125rem;line-height:1.4;color:#78d64b}
.k-nein .k-bed{color:var(--dunkel-leise)}
.k-lang{margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--linie);display:grid;gap:8px;max-width:80ch}
.k-lang li{font-size:.875rem;line-height:1.6;color:var(--dunkel-leise)}
@media (max-width:1100px){.kacheln,.liste-nein .kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.kacheln,.liste-nein .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}.k-zeichen{width:30px;height:30px}.k-zeichen svg{width:18px;height:18px}}

/* Preisrechner Startseite (Auftrag Markus 01.11.2026): direkt unter der Buehne, Eingaben links, Ergebnis rechts (Handy: untereinander) */
.s-rechner{padding:clamp(56px,7vw,96px) 0}
.s-rechner .s-kopf{margin-bottom:clamp(28px,4vw,44px)}
.pr-rechner{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:start}
.pr-ein{background:var(--karte);border:1px solid var(--linie);border-radius:10px;padding:clamp(18px,2.4vw,28px)}
.pr-feld label,.pr-wege legend{display:block;font:600 .8125rem/1.3 var(--sans);color:var(--tinte);margin:0 0 6px;padding:0}
.pr-f-art select{width:100%;min-height:48px;padding:0 12px;border:1px solid var(--linie-stark);border-radius:var(--radius);background:var(--bg);color:var(--tinte);font:500 1rem/1.2 var(--sans)}
.pr-f-art select:focus{outline:2px solid var(--akzent);outline-offset:2px}
.pr-wege{border:0;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.pr-wege legend{width:100%;margin-bottom:8px}
.pr-weg{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--linie-stark);border-radius:var(--radius);cursor:pointer;font-size:.9375rem;color:var(--tinte)}
.pr-weg input{accent-color:var(--akzent);width:18px;height:18px;margin:0}
.pr-weg:has(input:checked){border-color:var(--akzent);background:var(--akzent-flaeche)}
.pr-weg:has(input:disabled){opacity:.5;cursor:not-allowed}
.pr-felder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.pr-f-wert{grid-column:1 / -1}
.pr-aus{background:var(--dunkel);color:var(--dunkel-text);border-radius:10px;padding:clamp(20px,2.6vw,30px);--tinte:#f4eee3;--leise:var(--dunkel-leise);--linie:var(--dunkel-linie)}
.pr-aus-h{font:600 .75rem/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--dunkel-leise);margin:0 0 12px}
.pr-pos{list-style:none;margin:0;padding:0}
.pr-pos li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--dunkel-linie);font-size:.9375rem}
.pr-pos .pr-cent{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--tinte)}
.pr-summe{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:16px 0 0}
.pr-summe span{font-weight:600;color:var(--tinte)}
.pr-summe strong{font:500 clamp(2rem,3.4vw,2.6rem)/1 var(--h-schrift);color:var(--tinte);font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-ust{margin:4px 0 0;text-align:right;font-size:.8125rem;color:var(--dunkel-leise)}
.pr-hinweis{margin:14px 0 0;font-size:.875rem;line-height:1.5;color:var(--tinte)}
.pr-hinweis:empty{display:none}
.pr-gesperrt .pr-summe strong{font-size:1.25rem;font-family:var(--sans);font-weight:600}
.pr-gesperrt .pr-hinweis{color:#ffd6a8}
.pr-cta{margin-top:20px;width:100%;justify-content:center;--btn:#f4eee3;--btn-text:#101820;--btn-hover:#ffffff}
.pr-gesperrt .pr-cta{opacity:.55}
.pr-fein{margin:16px 0 0;max-width:760px}
@media (max-width:900px){.pr-rechner{grid-template-columns:1fr}}
@media (max-width:640px){.pr-felder{grid-template-columns:repeat(3,minmax(0,1fr))}.pr-f-kg{grid-column:1 / -1}.pr-weg{flex:1 1 100%}.pr-f-art select{font-size:16px}}
@media print{.s-rechner{display:none}}

/* ===== SEO-Programm 01.11.2026: Laender-, Hub- und Themenseiten, Verlinkung Startseite/Fuss (seo_bau.py) ===== */
.krumen{margin:0 0 18px;font-size:.8125rem;color:var(--leise)}
.krumen ol{display:flex;flex-wrap:wrap;gap:4px 0}
.krumen li{display:flex;align-items:center}
.krumen li+li::before{content:"/";margin:0 .55em;color:var(--linie-stark)}
.krumen a{color:var(--leise);text-decoration:none;display:inline-block;padding:6px 0}
.krumen a:hover{color:var(--tinte);text-decoration:underline}
.kicker .kicker-flagge{width:32px;height:24px;border-radius:2px;box-shadow:0 0 0 1px var(--linie-stark);object-fit:cover}
.kicker:has(.kicker-flagge)::before{display:none}
.kurz{margin:0 0 1.75em;padding:20px 24px;background:var(--karte);border:1px solid var(--linie);border-left:4px solid var(--akzent);border-radius:var(--radius)}
.recht-text .kurz .kurz-h{font:600 .75rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--akzent);margin:0 0 10px}
.recht-text .kurz p{margin:0;font-size:1.0625rem;line-height:1.65;color:var(--tinte)}
.blick-tab{margin:0 0 1.5em}
.blick-tab th[scope="row"]{width:34%}
.preis-bsp{margin-top:4px}
.preis-bsp td.num{text-align:right;white-space:nowrap}
.preis-bsp tfoot th,.preis-bsp tfoot td{font-weight:600;color:var(--tinte);border-top:1px solid var(--linie-stark);padding-top:12px}
.empf-hinweis{margin:10px 0 18px;padding:14px 18px;background:var(--flaeche);border-left:3px solid var(--dunkel);border-radius:var(--radius)}
.recht-text .empf-hinweis p{margin:0;font-size:.9688rem;line-height:1.6}
.recht-text .empf-hinweis-h{margin:18px 0 0;font-size:.875rem;color:var(--leise)}
.land-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:0 0 24px}
.land-links li a{display:flex;align-items:center;gap:10px;min-height:52px;height:100%;padding:12px 16px;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);text-decoration:none;color:var(--tinte);font-weight:500}
.land-links li a:hover{border-color:var(--akzent)}
.ware-links li a{flex-direction:column;align-items:flex-start;gap:2px;font:var(--h-gewicht) 1.2rem/1.25 var(--h-schrift)}
.ware-links li a span{font:400 .8125rem/1.45 var(--sans);color:var(--leise)}
.land-links .flagge,.land-raster .flagge{flex:none;width:24px;height:18px;border-radius:2px;box-shadow:0 0 0 1px var(--linie-stark);object-fit:cover}
.land-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:8px 0 1.5em}
.land-raster li a{display:grid;grid-template-columns:24px 1fr;column-gap:12px;align-items:center;min-height:60px;padding:12px 14px;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);text-decoration:none;color:var(--tinte)}
.land-raster li a:hover{border-color:var(--akzent)}
.land-raster .land-name{font-weight:600}
.land-raster .land-plz{grid-column:2;font-size:.8125rem;color:var(--leise)}
.seo-cta{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 0}
.recht-text .seo-cta a{text-decoration:none}
.thema-bild{margin:0 0 1.5em}
.thema-bild img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius)}
.laender .land-a{display:flex;align-items:center;gap:10px;min-width:0;color:inherit;text-decoration:none;min-height:24px}
.laender .land-a:hover{color:var(--akzent)}
.laender-mehr{margin:18px 0 0}
.laender-mehr a{display:inline-flex;align-items:center;gap:.5em;font-weight:500;padding:6px 0}
.laender-mehr .ic{width:18px;height:18px}
.themen-links{margin:28px 0 0;padding:18px 0 0;border-top:1px solid var(--linie-stark)}
.themen-h{font:500 .75rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--akzent);margin:0 0 10px}
.themen-links ul{display:flex;flex-wrap:wrap;gap:8px 12px}
.themen-links a{display:inline-block;padding:8px 14px;border:1px solid var(--linie-stark);border-radius:999px;text-decoration:none;font-size:.9375rem;color:var(--tinte)}
.themen-links a:hover{border-color:var(--akzent);color:var(--akzent)}
/* Fuss mit Spalte „Versand“: Marke als eigene Zeile oben, darunter 3 (ab 981 px) bzw. 5 Spalten (ab 1180 px) */
@media (min-width:981px){.fuss-in{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}.fuss-marke{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:40px;padding-bottom:28px;border-bottom:1px solid var(--dunkel-linie)}.fuss-marke .logo{margin-bottom:0}.fuss-marke p{margin:0}.fuss-marke .dachmarke{margin-top:0;padding-top:0;border-top:0}.fuss-marke .dachmarke p{max-width:none}}
@media (min-width:1180px){.fuss-in{grid-template-columns:repeat(5,minmax(0,1fr))}}
.fuss-spalte a{overflow-wrap:anywhere;hyphens:auto}
@media (max-width:640px){.blick-tab th[scope="row"]{width:auto}.blick-tab tr{display:block;padding:10px 0;border-bottom:1px solid var(--linie)}
  .blick-tab th[scope="row"],.blick-tab td{display:block;border:0;padding:2px 0}.land-raster{grid-template-columns:1fr 1fr}}
@media print{.krumen,.seo-cta,.land-links{display:none}}

/* ---------- Imagefilm (Auftrag Markus 04.11.2026) ----------
   Buehne: stumme Schleife ueber den Standbildern (z-index 1 < Verlauf 2 < Text 3); sichtbar erst, wenn wp.js sie abspielt (.an).
   Knopf „Film ansehen“ unter den Hero-Knoepfen; Film mit Ton im <dialog>. Keine Inline-Styles (CSP style-src 'self'). */
.b-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%;z-index:1;opacity:0;pointer-events:none}
.b-film.an{opacity:1}
@media (prefers-reduced-motion:no-preference){.b-film{transition:opacity 1.2s cubic-bezier(.4,0,.2,1)}}
@media (min-width:981px) and (max-width:1199px){.b-film{object-position:84% 50%}}
@media (max-width:980px){.b-film{object-position:center 60%}}
@media (max-width:640px){.b-film{object-position:center 40%}}
.hero-film{margin:22px 0 0}
.btn-film{display:inline-flex;align-items:center;gap:14px;color:#f4eee3;text-decoration:none;font-weight:500;min-height:44px}
.btn-film-kreis{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;
  border:1px solid rgba(244,238,227,.55);background:rgba(16,24,32,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-film-kreis svg{width:16px;height:16px;fill:#78d64b;margin-left:3px}
.btn-film-dauer{color:#c8ced5;font-weight:400}
.btn-film:hover .btn-film-kreis{border-color:#78d64b;background:rgba(16,24,32,.8)}
.btn-film:hover{color:#ffffff}
.btn-film:focus-visible{outline:2px solid #78d64b;outline-offset:4px;border-radius:24px}
.film-dialog{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;margin:0}
.film-dialog::backdrop{background:rgba(8,12,16,.92)}
.film-dialog[open]{display:flex;align-items:center;justify-content:center}
.film-rahmen{position:relative;width:min(92vw,1600px)}
/* Groesse ueber max-height + contain statt fester Rahmenformel: bleibt auch nach Drehen des Geraets stimmig (Gate Kimi 04.11.) */
.film-video{display:block;width:100%;height:auto;max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);object-fit:contain;background:#080c10;box-shadow:0 30px 120px rgba(0,0,0,.6)}
.film-fehler{margin:14px 0 0;color:#f4eee3;font-size:.95rem}.film-fehler a{color:#a3e583}.film-fehler[hidden]{display:none}
.film-zu{position:absolute;top:-56px;right:0;width:44px;height:44px;border-radius:50%;cursor:pointer;color:#f4eee3;
  display:inline-flex;align-items:center;justify-content:center;background:rgba(16,24,32,.6);border:1px solid rgba(244,238,227,.45)}
.film-zu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.film-zu:hover{border-color:#78d64b}
.film-zu:focus-visible{outline:2px solid #78d64b;outline-offset:3px}
@media (max-width:640px) and (orientation:portrait){
  .film-rahmen{width:100vw}
  .film-zu{top:auto;bottom:calc(100% + 10px);right:8px}
}

/* Ablauf: Bild je Schritt (Markus 04.11.2026, Stills aus dem Imagefilm) – ueber Nummer und Titel, gleiche Hoehe dank 4:3 */
.schritt-bild{display:block;margin:6px 0 4px}
.schritt-bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px;background:#101820}
.schritt-bild+.schritt-nr{margin-top:22px}
/* Spalten ohne linken Innenabstand (1. bzw. 1.+3.) sind 28 px breiter -> Bild gleich breit halten, damit Nummern auf einer Linie stehen */
.schritt:first-child .schritt-bild{margin-right:28px}
@media (max-width:980px){.schritt:first-child .schritt-bild{margin-right:28px}.schritt:nth-child(3) .schritt-bild{margin-right:28px}}
@media (max-width:640px){.schritt:first-child .schritt-bild,.schritt:nth-child(3) .schritt-bild{margin-right:0}}
/* Zielgruppen-Karten mit Bild (04.11.2026): randlos oben, gleiche Ecken wie die Karte */
.karte-bild{display:block;max-width:none;margin:calc(-1 * var(--karte-pad)) calc(-1 * var(--karte-pad)) 26px;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;background:#101820}
.karte-bild img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
/* Uebergang 05.11.2026: Buchung als eigene Seite - Kasten mit Innenabstand statt iframe */
.widget-seite{padding:clamp(24px,3vw,40px) clamp(20px,3vw,40px)}
.widget-seite p{margin:0}
.widget-seite p+p{margin-top:18px}