/* ============================================================
   Tastan Kfz-Gutachten · Designsystem „Maßlinie"
   Grund: kühler Beton · Tinte · EIN Akzent Petrol
   Typo: Archivo (variabel) + DM Mono für Messwerte
   ============================================================ */

/* ---------- Schriften, lokal (keine Fremd-Origins) ---------- */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/Archivo-var.woff2') format('woff2-variations');
  font-weight:400 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Mono';
  src:url('../fonts/DMMono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Mono';
  src:url('../fonts/DMMono-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

/* ---------- Marken-Token ---------- */
:root{
  /* Flächen */
  --beton:#E6E9E9;          /* Grundfläche, kühler Werkstattbeton */
  --beton-tief:#D8DDDD;     /* abgesetzte Bänder */
  --blatt:#FAFBFB;          /* Karten, Formular */
  --tinte:#14181A;          /* Text + dunkle Sektionen */
  --tinte-weich:#1E2427;

  /* Text */
  --stahl:#535C63;          /* Sekundärtext auf hell: 5,59:1 auf Beton, 4,97:1 auf dem
                               abgesetzten Band, 6,58:1 auf Karten — AA überall */
  --stahl-hell:#A8B0B4;     /* Sekundärtext auf dunkel (8,11:1) */
  --linie:#C9CFCF;          /* Rahmen auf hell */
  --linie-dunkel:#2C3336;   /* Rahmen auf dunkel */

  /* EIN Akzent, drei Textvarianten (Kontrast statt Markenwechsel) */
  --petrol:#0C6A73;         /* Fläche / Button */
  --petrol-ink:#0A585F;     /* Akzenttext auf hell   (6,68:1) */
  --petrol-lite:#5FD0D8;    /* Akzenttext auf dunkel (9,79:1) */
  --petrol-tief:#08464C;    /* Hover Button */
  --petrol-hauch:#E3EEEE;   /* getönte Fläche */

  /* Maß */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem;
  --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem;
  --r:4px; --r-lg:6px;
  --breit:1180px; --schmal:720px;
  --z-nav:40; --z-modal:60; --z-banner:70;

  --tempo:.22s;
  --kurve:cubic-bezier(.2,.7,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--beton); color:var(--tinte);
  font:400 1.0625rem/1.65 'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto; display:block}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--petrol-ink); text-decoration-thickness:1px; text-underline-offset:.18em}
a:hover{color:var(--petrol-tief)}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.1}
p{margin:0 0 var(--sp-4)}
p:last-child{margin-bottom:0}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--petrol-ink); outline-offset:3px; border-radius:2px}
[hidden]{display:none!important}
::selection{background:var(--petrol); color:#fff}

/* Sprungmarke */
.skip{position:absolute; left:var(--sp-4); top:-4rem; z-index:99; background:var(--tinte); color:#fff;
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r); transition:top var(--tempo)}
.skip:focus{top:var(--sp-4); color:#fff}

/* ---------- Raster ---------- */
.wrap{width:100%; max-width:var(--breit); margin-inline:auto; padding-inline:var(--sp-5)}
@media (min-width:640px){.wrap{padding-inline:var(--sp-8)}}
.sek{padding-block:var(--sp-16)}
@media (min-width:900px){.sek{padding-block:var(--sp-24)}}
.sek--dunkel{background:var(--tinte); color:var(--beton)}
.sek--dunkel h1,.sek--dunkel h2,.sek--dunkel h3{color:#fff}
.sek--dunkel .lead,.sek--dunkel p{color:var(--stahl-hell)}
.sek--band{background:var(--beton-tief)}

/* ---------- Maßlinie: das Struktur-Motiv ---------- */
/* Eyebrow als Maßstrich mit Endmarken, wie in einer technischen Zeichnung */
.marke{
  display:flex; align-items:center; gap:var(--sp-3);
  font-family:'DM Mono',ui-monospace,monospace; font-size:.75rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--petrol-ink);
  margin-bottom:var(--sp-4);
}
.marke::before{
  content:''; width:2.25rem; height:7px; flex:none;
  border-left:1px solid currentColor; border-right:1px solid currentColor;
  border-top:1px solid currentColor;
  transform:translateY(2px);
}
.sek--dunkel .marke{color:var(--petrol-lite)}

.titel{font-size:clamp(1.85rem,4.2vw,2.85rem); max-width:26ch}
.titel--breit{max-width:34ch}
.lead{font-size:clamp(1.0625rem,1.4vw,1.1875rem); color:var(--stahl); max-width:62ch; margin-top:var(--sp-4)}

/* ---------- Knöpfe ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:48px; padding:var(--sp-3) var(--sp-6);
  border:1px solid transparent; border-radius:var(--r);
  font-weight:600; font-size:1rem; letter-spacing:-.005em;
  text-decoration:none; cursor:pointer;
  transition:background var(--tempo) var(--kurve), border-color var(--tempo), color var(--tempo);
}
.btn svg{width:18px; height:18px; flex:none}
.btn--primaer{background:var(--petrol); color:#fff}
.btn--primaer:hover{background:var(--petrol-tief); color:#fff}
.btn--tinte{background:var(--tinte); color:#fff}
.btn--tinte:hover{background:var(--tinte-weich); color:#fff}
.btn--rand{background:transparent; color:var(--tinte); border-color:var(--linie)}
.btn--rand:hover{border-color:var(--tinte); background:var(--blatt); color:var(--tinte)}
.sek--dunkel .btn--rand{color:#fff; border-color:var(--linie-dunkel)}
.sek--dunkel .btn--rand:hover{border-color:var(--stahl-hell); background:rgba(255,255,255,.06); color:#fff}
.btn--breit{width:100%}
.btn-reihe{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-8)}

/* ---------- Kopf ---------- */
.topbar{background:var(--tinte); color:var(--stahl-hell); font-size:.8125rem}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); min-height:38px}
.topbar strong{color:#fff; font-weight:600}
.topbar a{color:var(--stahl-hell); text-decoration:none}
.topbar a:hover{color:#fff}
.topbar-kontakt{display:flex; gap:var(--sp-5); align-items:center}
@media (max-width:720px){.topbar-kontakt a:not(.tb-tel){display:none}}

.nav{position:sticky; top:0; z-index:var(--z-nav); background:rgba(230,233,233,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linie)}
.nav > .wrap{display:flex; align-items:center; gap:var(--sp-4); min-height:68px; flex-wrap:nowrap}
.logo{display:flex; align-items:baseline; gap:.45rem; text-decoration:none; color:var(--tinte); flex:none}
.logo b{font-size:1.3rem; font-weight:800; letter-spacing:-.03em}
.logo span{font-family:'DM Mono',monospace; font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--petrol-ink)}
.nav-links{display:none; gap:var(--sp-5); margin-left:auto; align-items:center}
@media (min-width:1120px){.nav-links{display:flex}}
.nav-links a{color:var(--tinte); text-decoration:none; font-size:.9375rem; font-weight:500;
  padding-block:var(--sp-2); white-space:nowrap}
.nav-links a:hover{color:var(--petrol-ink)}
.nav-links a[aria-current="page"]{color:var(--petrol-ink); box-shadow:inset 0 -2px 0 var(--petrol-ink)}
.nav-tat{display:flex; align-items:center; gap:var(--sp-3); margin-left:auto}
@media (min-width:1120px){.nav-tat{margin-left:0}}
.nav-tel{display:none; align-items:center; gap:var(--sp-2); text-decoration:none; color:var(--tinte);
  font-weight:600; font-size:.9375rem; white-space:nowrap}
@media (min-width:520px){.nav-tel{display:inline-flex}}
.nav-tel svg{width:17px; height:17px; color:var(--petrol-ink)}
.nav-tel:hover{color:var(--petrol-ink)}
.burger{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  background:transparent; border:1px solid var(--linie); border-radius:var(--r); cursor:pointer}
@media (min-width:1120px){.burger{display:none}}
.burger svg{width:22px; height:22px}
.nav .btn{display:none; white-space:nowrap}
@media (min-width:760px){.nav .btn{display:inline-flex}}

.schub{position:fixed; inset:0; z-index:calc(var(--z-nav) + 5); background:var(--tinte); color:#fff;
  display:flex; flex-direction:column; padding:var(--sp-5);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--tempo) var(--kurve), transform var(--tempo) var(--kurve), visibility var(--tempo)}
.schub.offen{opacity:1; visibility:visible; transform:none}
.schub-kopf{display:flex; align-items:center; justify-content:space-between; min-height:56px}
.schub-kopf .logo{color:#fff}
.schub-kopf .logo span{color:var(--petrol-lite)}
.schub-zu{width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--linie-dunkel); border-radius:var(--r); color:#fff; cursor:pointer}
.schub nav{display:flex; flex-direction:column; margin-top:var(--sp-8); gap:var(--sp-1)}
.schub nav a{color:#fff; text-decoration:none; font-size:1.375rem; font-weight:600;
  padding:var(--sp-3) 0; border-bottom:1px solid var(--linie-dunkel)}
.schub-fuss{margin-top:auto; display:grid; gap:var(--sp-3); padding-top:var(--sp-8)}
body.starr{overflow:hidden}

/* ---------- Hero ---------- */
.hero{padding-block:var(--sp-12) var(--sp-16); position:relative; overflow:hidden}
@media (min-width:900px){.hero{padding-block:var(--sp-16) var(--sp-24)}}
.hero::after{ /* Maßraster, sehr zurückhaltend */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(to right,var(--linie) 1px,transparent 1px);
  background-size:7.5rem 100%; mask-image:linear-gradient(to bottom,transparent,#000 35%,transparent);
}
.hero > .wrap{position:relative; z-index:1}
.hero-netz{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-12); align-items:start}
@media (min-width:980px){.hero-netz{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:var(--sp-16)}}
.hero h1{font-size:clamp(2.3rem,6.2vw,4rem); font-weight:800; letter-spacing:-.035em; max-width:18ch}
.hero h1 .ort{color:var(--petrol-ink); display:block}
.hero-sub{font-size:clamp(1.0625rem,1.5vw,1.25rem); color:var(--stahl); max-width:50ch; margin-top:var(--sp-5)}
.hero-plaketten{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-6)}
.plakette{display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .6rem;
  background:var(--blatt); border:1px solid var(--linie); border-radius:99px;
  font-family:'DM Mono',monospace; font-size:.75rem; font-weight:500; letter-spacing:.02em; color:var(--tinte)}
.plakette::before{content:''; width:5px; height:5px; border-radius:99px; background:var(--petrol); flex:none}

/* Kennzahlen unter dem Hero */
.kenn{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:var(--sp-10);
  background:var(--linie); border:1px solid var(--linie); border-radius:var(--r); overflow:hidden}
@media (min-width:640px){.kenn{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kenn li{background:var(--beton); padding:var(--sp-4)}
.kenn b{display:block; font-family:'DM Mono',monospace; font-size:1.5rem; font-weight:500;
  letter-spacing:-.02em; color:var(--tinte); font-variant-numeric:tabular-nums; white-space:nowrap}
.kenn span{display:block; font-size:.8125rem; color:var(--stahl); margin-top:.15rem; line-height:1.35}

/* ============================================================
   SIGNATUR „Der Aufbau"
   Die Schadenpositionen als vermaßter Stapel. Zeigt, was ein
   eigenes Gutachten erfasst und ein Kostenvoranschlag nicht.
   ============================================================ */
.aufbau{
  background:var(--blatt); border:1px solid var(--linie); border-radius:var(--r-lg);
  padding:var(--sp-5); box-shadow:0 1px 2px rgba(20,24,26,.04), 0 12px 32px -18px rgba(20,24,26,.28);
}
@media (min-width:600px){.aufbau{padding:var(--sp-6)}}
.aufbau-kopf{display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-4); padding-bottom:var(--sp-4); border-bottom:1px solid var(--linie)}
.aufbau-kopf h2{font-size:1.0625rem; font-weight:700; letter-spacing:-.01em}
.aufbau-kopf p{font-family:'DM Mono',monospace; font-size:.75rem; color:var(--stahl); margin:.2rem 0 0}
.aufbau-stempel{font-family:'DM Mono',monospace; font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--petrol-ink);
  border:1px solid var(--petrol); border-radius:var(--r); padding:.25rem .5rem; flex:none}

/* Stapel + Maßklammer */
.aufbau-koerper{display:grid; grid-template-columns:2.25rem minmax(0,1fr); gap:var(--sp-4); padding-top:var(--sp-5)}
.klammer{position:relative}
.klammer::before{ /* senkrechte Maßlinie */
  content:''; position:absolute; right:.4rem; top:0; width:1px; background:var(--petrol);
  height:var(--klammer,0%); transition:height 1.1s var(--kurve);
}
.klammer::after{ /* Endmarken oben/unten */
  content:''; position:absolute; right:0; top:0; width:.9rem; height:var(--klammer,0%);
  border-top:1px solid var(--petrol); border-bottom:1px solid var(--petrol);
  transition:height 1.1s var(--kurve);
}
.klammer-wert{
  position:absolute; left:0; top:50%; transform:translateY(-50%) rotate(-90deg);
  transform-origin:center; white-space:nowrap;
  font-family:'DM Mono',monospace; font-size:.6875rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--petrol-ink);
  opacity:0; transition:opacity .5s var(--kurve) .5s;
}
.aufbau.laeuft .klammer-wert{opacity:1}

.posten{display:grid; gap:var(--sp-2)}
.posten li{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); border:1px solid var(--linie); border-radius:var(--r);
  background:var(--beton);
  opacity:0; transform:translateX(-10px);
  transition:opacity .5s var(--kurve), transform .5s var(--kurve), border-color var(--tempo);
}
.aufbau.laeuft .posten li{opacity:1; transform:none}
.aufbau.laeuft .posten li:nth-child(1){transition-delay:.05s}
.aufbau.laeuft .posten li:nth-child(2){transition-delay:.25s}
.aufbau.laeuft .posten li:nth-child(3){transition-delay:.45s}
.aufbau.laeuft .posten li:nth-child(4){transition-delay:.65s}
.aufbau.laeuft .posten li:nth-child(5){transition-delay:.85s}
.posten li[data-eigen]{border-color:var(--petrol); background:var(--petrol-hauch)}
.posten .name{font-size:.9375rem; font-weight:600; line-height:1.3}
.posten .name em{display:block; font-style:normal; font-weight:400; font-size:.8125rem; color:var(--stahl); margin-top:.1rem}
.posten .wert{font-family:'DM Mono',monospace; font-size:.9375rem; font-weight:500;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.posten li[data-eigen] .wert{color:var(--petrol-ink)}

.aufbau-fuss{margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--linie);
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap}
.aufbau-fuss .etikett{font-size:.8125rem; color:var(--stahl); max-width:32ch}
.summe{text-align:right; margin-left:auto}
.summe span{display:block; font-family:'DM Mono',monospace; font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--stahl)}
.summe b{font-family:'DM Mono',monospace; font-size:clamp(1.5rem,3.4vw,1.875rem); font-weight:500;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--tinte)}
.aufbau-hinweis{margin-top:var(--sp-3); font-size:.75rem; color:var(--stahl); line-height:1.45}

/* ---------- Vertrauensband ---------- */
.band{border-block:1px solid var(--linie); background:var(--blatt)}
.band ul{display:grid; grid-template-columns:minmax(0,1fr); gap:1px; background:var(--linie)}
@media (min-width:760px){.band ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
.band li{background:var(--blatt); padding:var(--sp-6) var(--sp-5); display:flex; gap:var(--sp-4)}
.band .ikon{flex:none; width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--petrol); border-radius:var(--r); color:var(--petrol-ink)}
.band .ikon svg{width:19px; height:19px}
.band h3{font-size:1rem; margin-bottom:.2rem}
.band p{font-size:.9375rem; color:var(--stahl); margin:0}

/* ---------- Karten ---------- */
.karten{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); margin-top:var(--sp-10)}
@media (min-width:640px){.karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.karten{grid-template-columns:repeat(3,minmax(0,1fr))}}
.karte{
  display:flex; flex-direction:column; min-width:0;
  background:var(--blatt); border:1px solid var(--linie); border-radius:var(--r);
  padding:var(--sp-6) var(--sp-5); text-decoration:none; color:inherit;
  transition:border-color var(--tempo), transform var(--tempo) var(--kurve), box-shadow var(--tempo);
}
a.karte:hover{border-color:var(--petrol); transform:translateY(-2px);
  box-shadow:0 10px 26px -18px rgba(20,24,26,.4); color:inherit}
.karte-nr{font-family:'DM Mono',monospace; font-size:.75rem; font-weight:500; letter-spacing:.1em;
  color:var(--petrol-ink); margin-bottom:var(--sp-4)}
.karte h3{font-size:1.125rem; margin-bottom:var(--sp-2)}
.karte p{font-size:.9375rem; color:var(--stahl); margin:0}
.karte-tags{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4); padding-top:var(--sp-4);
  border-top:1px solid var(--linie)}
.karte-tags li{font-family:'DM Mono',monospace; font-size:.6875rem; color:var(--stahl);
  border:1px solid var(--linie); border-radius:99px; padding:.15rem .5rem}
.karte-mehr{margin-top:auto; padding-top:var(--sp-5); display:inline-flex; align-items:center; gap:.4rem;
  font-size:.875rem; font-weight:600; color:var(--petrol-ink)}
.karte-mehr svg{width:15px; height:15px; transition:transform var(--tempo) var(--kurve)}
a.karte:hover .karte-mehr svg{transform:translateX(3px)}

/* ---------- Ablauf: echte Reihenfolge, darum Nummern ---------- */
.ablauf{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-6); margin-top:var(--sp-10); counter-reset:s}
@media (min-width:860px){.ablauf{grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-5)}}
.schritt{position:relative; padding-top:var(--sp-6); border-top:1px solid var(--linie-dunkel)}
.schritt::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  position:absolute; top:var(--sp-4); left:0;
  font-family:'DM Mono',monospace; font-size:.75rem; font-weight:500; letter-spacing:.1em;
  color:var(--petrol-lite);
}
.schritt::after{ /* Fortschrittsmarke auf der Linie */
  content:''; position:absolute; top:-1px; left:0; height:1px; width:0;
  background:var(--petrol-lite); transition:width .8s var(--kurve);
}
.schritt.sichtbar::after{width:100%}
.schritt h3{margin:var(--sp-6) 0 var(--sp-2); font-size:1.0625rem; color:#fff}
.schritt p{font-size:.9375rem; color:var(--stahl-hell); margin:0}
.schritt .dauer{display:inline-block; margin-top:var(--sp-3); font-family:'DM Mono',monospace;
  font-size:.75rem; color:var(--petrol-lite)}

/* ---------- Einsatzgebiet ---------- */
.gebiet{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-10); align-items:start}
@media (min-width:920px){.gebiet{grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:var(--sp-16)}}
.orte{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-6)}
.orte li{background:var(--blatt); border:1px solid var(--linie); border-radius:var(--r);
  padding:.4rem .7rem; font-size:.9375rem}
.orte li[data-kern]{border-color:var(--petrol); background:var(--petrol-hauch);
  color:var(--petrol-ink); font-weight:600}
/* Radius-Diagramm im Maßlinien-Stil */
.radius{background:var(--blatt); border:1px solid var(--linie); border-radius:var(--r-lg); padding:var(--sp-6)}
.radius svg{width:100%; height:auto}
.radius figcaption{margin-top:var(--sp-4); font-size:.8125rem; color:var(--stahl); line-height:1.5}

/* ---------- Umfang (was im Gutachten steht) ---------- */
.umfang{display:grid; grid-template-columns:minmax(0,1fr); gap:1px; margin-top:var(--sp-10); background:var(--linie-dunkel);
  border:1px solid var(--linie-dunkel); border-radius:var(--r); overflow:hidden}
@media (min-width:700px){.umfang{grid-template-columns:repeat(2,minmax(0,1fr))}}
.umfang li{background:var(--tinte); padding:var(--sp-5); display:flex; gap:var(--sp-4); align-items:flex-start}
.umfang .hk{flex:none; width:22px; height:22px; color:var(--petrol-lite); margin-top:2px}
.umfang h3{font-size:.9375rem; color:#fff; margin-bottom:.2rem}
.umfang p{font-size:.875rem; color:var(--stahl-hell); margin:0}

/* ---------- Über / Text-Zweispalter ---------- */
.zwei{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-10)}
@media (min-width:920px){.zwei{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--sp-16)}}
.merkmale{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); margin-top:var(--sp-8)}
@media (min-width:600px){.merkmale{grid-template-columns:repeat(2,minmax(0,1fr))}}
.merkmale li{display:flex; gap:var(--sp-3); align-items:flex-start}
.merkmale svg{flex:none; width:20px; height:20px; color:var(--petrol-ink); margin-top:3px}
.merkmale b{display:block; font-size:.9375rem}
.merkmale span{display:block; font-size:.875rem; color:var(--stahl)}

/* ---------- Prosa (Unterseiten) ---------- */
.prosa{max-width:var(--schmal)}
.prosa h2{font-size:clamp(1.5rem,3vw,2rem); margin-top:var(--sp-12); margin-bottom:var(--sp-4)}
.prosa h2:first-child{margin-top:0}
.prosa h3{font-size:1.125rem; margin-top:var(--sp-8); margin-bottom:var(--sp-2)}
/* Die Maßlinie ist ein Marker, kein Spaltennachbar: ein flex-li würde
   <strong> und den Folgetext nebeneinanderstellen statt umbrechen.   */
.prosa ul:not(.orte):not(.karte-tags){display:grid; gap:var(--sp-3); margin:var(--sp-4) 0}
.prosa ul:not(.orte):not(.karte-tags) li{
  position:relative; padding-left:1.65rem; font-size:1rem; min-width:0;
  overflow-wrap:break-word;
}
.prosa ul:not(.orte):not(.karte-tags) li::before{
  content:''; position:absolute; left:0; top:.6rem; width:.9rem; height:7px;
  border-left:1px solid var(--petrol); border-right:1px solid var(--petrol); border-top:1px solid var(--petrol);
}
/* Tabellen bekommen im Build einen eigenen Scrollrahmen, damit sie auf
   dem Handy nicht die ganze Seite seitwärts schieben.                */
.tabelle{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:var(--sp-5) 0;
  border:1px solid var(--linie); border-radius:var(--r); background:var(--blatt)}
.tabelle table{margin:0; min-width:30rem}
.tabelle::-webkit-scrollbar{height:8px}
.tabelle::-webkit-scrollbar-thumb{background:var(--linie); border-radius:99px}
.prosa table{width:100%; border-collapse:collapse; margin:var(--sp-5) 0; font-size:.9375rem}
.prosa th,.prosa td{text-align:left; padding:var(--sp-3) var(--sp-4); border:1px solid var(--linie);
  vertical-align:top; overflow-wrap:break-word; hyphens:auto}
.tabelle th:first-child,.tabelle td:first-child{border-left:0}
.tabelle th:last-child,.tabelle td:last-child{border-right:0}
.tabelle tr:first-child th{border-top:0}
.tabelle tr:last-child td{border-bottom:0}
.prosa th{background:var(--beton-tief); font-weight:600; font-size:.875rem}
.prosa td{background:var(--blatt)}
.merksatz{border-left:2px solid var(--petrol); background:var(--blatt); padding:var(--sp-5);
  margin:var(--sp-6) 0; border-radius:0 var(--r) var(--r) 0}
.merksatz p{font-size:1.0625rem; margin:0}
.merksatz .quelle{display:block; margin-top:var(--sp-3); font-family:'DM Mono',monospace;
  font-size:.75rem; color:var(--stahl)}

/* ---------- FAQ ---------- */
.faq{max-width:var(--schmal); margin-top:var(--sp-10); border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-5) 0; cursor:pointer; font-weight:600; font-size:1.0625rem; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:''; flex:none; width:16px; height:16px; margin-top:5px;
  background:currentColor; color:var(--petrol-ink);
  clip-path:polygon(46% 0,54% 0,54% 46%,100% 46%,100% 54%,54% 54%,54% 100%,46% 100%,46% 54%,0 54%,0 46%,46% 46%);
  transition:transform var(--tempo) var(--kurve)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--petrol-ink)}
.faq .antwort{padding:0 0 var(--sp-5); color:var(--stahl); font-size:1rem; max-width:60ch}
.faq .antwort p{margin-bottom:var(--sp-3)}

/* ---------- Kontakt + Formular ---------- */
.kontakt{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-10)}
@media (min-width:980px){.kontakt{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--sp-16)}}
.kdaten{display:grid; gap:var(--sp-1); margin-top:var(--sp-8)}
.kdaten > a,.kdaten > div{display:flex; gap:var(--sp-4); align-items:flex-start; padding:var(--sp-4) 0;
  border-bottom:1px solid var(--linie-dunkel); text-decoration:none; color:inherit}
.kdaten > a > div,.kdaten > div > div{min-width:0}
.kdaten svg{flex:none; width:20px; height:20px; color:var(--petrol-lite); margin-top:3px}
.kdaten b{display:block; color:#fff; font-size:1rem; overflow-wrap:anywhere}
.kdaten span{display:block; font-size:.875rem; color:var(--stahl-hell); margin-top:.1rem}
.kdaten a:hover b{color:var(--petrol-lite)}

.formular{background:var(--blatt); border:1px solid var(--linie); border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5); color:var(--tinte)}
@media (min-width:600px){.formular{padding:var(--sp-8)}}
.formular h3{font-size:1.25rem; margin-bottom:var(--sp-2)}
.formular .hint{font-size:.9375rem; color:var(--stahl); margin-bottom:var(--sp-6)}
.feld{display:grid; gap:var(--sp-2); margin-bottom:var(--sp-4)}
.feld label{font-size:.875rem; font-weight:600}
.feld label .opt{font-weight:400; color:var(--stahl)}
.feld input,.feld select,.feld textarea{
  width:100%; min-height:48px; padding:var(--sp-3) var(--sp-4);
  background:#fff; border:1px solid var(--linie); border-radius:var(--r);
  font-size:1rem; transition:border-color var(--tempo), box-shadow var(--tempo);
}
.feld textarea{min-height:120px; resize:vertical; line-height:1.55}
.feld select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23535C63' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:18px; padding-right:2.6rem}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none; border-color:var(--petrol); box-shadow:0 0 0 3px rgba(12,106,115,.16)}
.feld input:user-invalid,.feld select:user-invalid,.feld textarea:user-invalid{border-color:#B3261E}
.feld .fehler{font-size:.8125rem; color:#B3261E}
.feld-paar{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4)}
@media (min-width:520px){.feld-paar{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-4)}}
.zustimmung{display:flex; gap:var(--sp-3); align-items:flex-start; margin:var(--sp-5) 0 var(--sp-6);
  font-size:.875rem; color:var(--stahl); line-height:1.5}
.zustimmung input{flex:none; width:20px; height:20px; min-height:0; margin-top:2px; accent-color:var(--petrol)}
.versteckt{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.formular-fuss{margin-top:var(--sp-4); font-size:.8125rem; color:var(--stahl); text-align:center}

/* Fehlermeldung des Formulars: nur echte Zustände, nie vorgetäuschter Erfolg */
.meldung{border-radius:var(--r); padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-5); font-size:.9375rem}
.meldung--fehler{background:#FDECEA; border:1px solid #E7B4AE; color:#7A1C14}
.meldung--fehler b{display:block; margin-bottom:.25rem}
.meldung--fehler a{color:#7A1C14; font-weight:600}
.btn[aria-busy="true"]{opacity:.7; pointer-events:none}

/* ---------- Abschluss-Aufruf ---------- */
.aufruf{background:var(--petrol); color:#fff}
.aufruf .wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-6); align-items:center}
@media (min-width:860px){.aufruf .wrap{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}}
.aufruf h2{font-size:clamp(1.6rem,3.4vw,2.25rem); color:#fff; max-width:28ch}
.aufruf p{color:rgba(255,255,255,.88); margin-top:var(--sp-3); max-width:52ch}
.aufruf .btn--primaer{background:#fff; color:var(--petrol-tief)}
.aufruf .btn--primaer:hover{background:var(--beton); color:var(--petrol-tief)}
.aufruf .btn--rand{color:#fff; border-color:rgba(255,255,255,.45)}
.aufruf .btn--rand:hover{background:rgba(255,255,255,.12); border-color:#fff; color:#fff}
.aufruf .btn-reihe{margin-top:0}

/* ---------- Fuß ---------- */
.fuss{background:var(--tinte); color:var(--stahl-hell); padding-block:var(--sp-16) var(--sp-8)}
.fuss-netz{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-8)}
@media (min-width:760px){.fuss-netz{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr); gap:var(--sp-8)}}
.fuss .logo{color:#fff}
.fuss .logo span{color:var(--petrol-lite)}
.fuss h3{font-family:'DM Mono',monospace; font-size:.75rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; margin-bottom:var(--sp-4)}
.fuss ul{display:grid; gap:var(--sp-2)}
.fuss a{color:var(--stahl-hell); text-decoration:none; font-size:.9375rem}
.fuss a:hover{color:#fff}
.fuss .beschreibung{font-size:.9375rem; margin-top:var(--sp-4); max-width:34ch}
.fuss-unten{display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-6); align-items:center;
  margin-top:var(--sp-12); padding-top:var(--sp-6); border-top:1px solid var(--linie-dunkel); font-size:.8125rem}
.fuss-unten ul{display:flex; flex-wrap:wrap; gap:var(--sp-5); margin-left:auto}
.fuss-unten button{background:none; border:0; padding:0; color:var(--stahl-hell); font-size:.8125rem;
  cursor:pointer; text-decoration:underline; text-underline-offset:.18em}
.fuss-unten button:hover{color:#fff}

/* ---------- Haftleiste mobil ---------- */
.haft{position:fixed; inset:auto 0 0 0; z-index:var(--z-nav); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1px; background:var(--linie); border-top:1px solid var(--linie);
  transform:translateY(100%); transition:transform .3s var(--kurve)}
.haft.an{transform:none}
@media (min-width:760px){.haft{display:none}}
.haft a{display:flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:56px;
  text-decoration:none; font-weight:600; font-size:.9375rem}
.haft a:first-child{background:var(--blatt); color:var(--tinte)}
.haft a:last-child{background:var(--petrol); color:#fff}
.haft svg{width:17px; height:17px}
body.haft-raum{padding-bottom:57px}
@media (min-width:760px){body.haft-raum{padding-bottom:0}}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; z-index:var(--z-modal); display:grid; place-items:center;
  padding:var(--sp-4); opacity:0; visibility:hidden; transition:opacity var(--tempo), visibility var(--tempo)}
.modal.offen{opacity:1; visibility:visible}
.modal-hg{position:absolute; inset:0; background:rgba(20,24,26,.62); border:0; cursor:pointer}
.modal-kasten{position:relative; width:100%; max-width:540px; max-height:calc(100vh - 2rem);
  overflow-y:auto; transform:translateY(10px); transition:transform var(--tempo) var(--kurve);
  border-radius:var(--r-lg)}
.modal.offen .modal-kasten{transform:none}
.modal-zu{position:absolute; top:var(--sp-4); right:var(--sp-4); width:40px; height:40px;
  display:grid; place-items:center; background:var(--beton); border:1px solid var(--linie);
  border-radius:var(--r); cursor:pointer; z-index:2}
.modal-zu svg{width:18px; height:18px}

/* ---------- Cookie-Banner ---------- */
.cc{position:fixed; inset:auto var(--sp-4) var(--sp-4) var(--sp-4); z-index:var(--z-banner);
  max-width:520px; margin-inline:auto; background:var(--blatt); border:1px solid var(--linie);
  border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:0 18px 44px -20px rgba(20,24,26,.5);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s var(--kurve), transform .3s var(--kurve), visibility .3s}
.cc.an{opacity:1; visibility:visible; transform:none}
.cc h3{font-size:1rem; margin-bottom:var(--sp-2)}
.cc p{font-size:.875rem; color:var(--stahl); margin-bottom:var(--sp-4)}
.cc .reihe{display:flex; flex-wrap:wrap; gap:var(--sp-3)}
.cc .btn{flex:1 1 auto; min-height:44px; font-size:.9375rem}
@media (min-width:760px){.haft.an ~ .cc{bottom:var(--sp-4)}}
body.haft-raum .cc{bottom:calc(57px + var(--sp-4))}
@media (min-width:760px){body.haft-raum .cc{bottom:var(--sp-4)}}

/* ---------- Reveal ---------- */
.rv{opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--kurve), transform .6s var(--kurve)}
.rv.sichtbar{opacity:1; transform:none}
.rv-2{transition-delay:.08s} .rv-3{transition-delay:.16s} .rv-4{transition-delay:.24s}

/* ---------- Danke ---------- */
.danke{min-height:60vh; display:grid; place-items:center; text-align:center; padding-block:var(--sp-24)}
.danke .hk{width:56px; height:56px; margin:0 auto var(--sp-6); display:grid; place-items:center;
  border:1px solid var(--petrol); border-radius:99px; color:var(--petrol-ink)}
.danke .hk svg{width:26px; height:26px}
.danke h1{font-size:clamp(1.9rem,4.4vw,2.6rem); margin-bottom:var(--sp-4)}
.danke p{color:var(--stahl); max-width:48ch; margin-inline:auto}

/* ---------- Bewegung aus ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
  .rv{opacity:1; transform:none}
  .posten li{opacity:1; transform:none}
  .klammer-wert{opacity:1}
  .klammer::before,.klammer::after{height:100%!important}
  .schritt::after{width:100%}
  .hero::after{display:none}
}

/* ---------- Druck ---------- */
@media print{
  .nav,.topbar,.haft,.cc,.modal,.aufruf,.btn{display:none!important}
  body{background:#fff; color:#000; font-size:11pt}
  .sek{padding-block:1rem}
}


/* ---------- Korrekturen: helle Bausteine in dunklen Sektionen ----------
   .sek--dunkel p{color:var(--stahl-hell)} ist unspezifischer als eine
   Klasse, trifft aber jedes p — also die weißen Karten ausdrücklich
   zurückholen, sonst steht hellgrauer Text auf weißem Grund.            */
.sek--dunkel .formular,
.sek--dunkel .formular h3{color:var(--tinte)}
.sek--dunkel .formular p{color:var(--stahl)}
.sek--dunkel .formular label,
.sek--dunkel .formular .feld label{color:var(--tinte)}
.sek--dunkel .formular .zustimmung span{color:var(--stahl)}
.sek--dunkel .meldung--fehler,
.sek--dunkel .meldung--fehler b{color:#7A1C14}
.sek--dunkel .formular .opt{color:var(--stahl)}

/* Fließtext-Links auf dunklem Grund brauchen die helle Akzentvariante */
.sek--dunkel p a,
.sek--dunkel .lead a,
.sek--dunkel li a:not(.btn):not(.karte){color:var(--petrol-lite)}
.sek--dunkel p a:hover,
.sek--dunkel .lead a:hover{color:#fff}
.sek--dunkel .kdaten a{color:inherit}
.sek--dunkel .formular a{color:var(--petrol-ink)}
.aufruf a:not(.btn){color:#fff}

/* ---------- Rechtsseiten: langer Fließtext ---------- */
.recht{max-width:760px}
.recht h1{font-size:clamp(1.9rem,4vw,2.5rem); margin-bottom:var(--sp-8)}
.recht h2{font-size:clamp(1.25rem,2.2vw,1.5rem); margin-top:var(--sp-10)}
.recht h3{font-size:1.0625rem; margin-top:var(--sp-6)}
.recht{font-size:1rem}
.recht p{margin-bottom:var(--sp-4); color:var(--stahl)}
.recht p strong,.recht li strong{color:var(--tinte)}
/* Die Listen im Rechtstext sind Aufzählungen, keine Merkmalslisten:
   normale Marker statt der Maßlinien-Striche aus .prosa */
.recht ul{display:block!important; margin:var(--sp-4) 0 var(--sp-4) var(--sp-5)!important}
.recht ul li{display:list-item!important; list-style:disc; color:var(--stahl);
  margin-bottom:var(--sp-3); font-size:1rem}
.recht ul li::before{display:none!important; content:none!important}
.recht a{overflow-wrap:anywhere}


/* ---------- Schrumpf-Sicherung ----------
   Grid- und Flex-Kinder haben min-width:auto und können ihren Container
   sprengen. overflow-x:clip versteckt das nur, der Inhalt wird trotzdem
   abgeschnitten. Darum ausdrücklich erlauben zu schrumpfen.            */
.hero-netz > *, .zwei > *, .gebiet > *, .kontakt > *, .karten > *,
.kenn > *, .ablauf > *, .umfang > *, .fuss-netz > *, .merkmale > *,
.feld-paar > *, .band li, .aufruf .wrap > *, .posten li > *,
.topbar .wrap > *, .nav > .wrap > *{min-width:0}
.plakette{max-width:100%}
.aufbau-kopf h2{overflow-wrap:anywhere}

/* Kopfleiste auf schmalen Geräten: Nummer nie umbrechen lassen */
.tb-tel{white-space:nowrap}
@media (max-width:520px){
  .topbar{font-size:.75rem}
  .topbar .wrap{gap:var(--sp-3); padding-block:var(--sp-2)}
  .topbar strong{font-weight:500}
}

/* ---------- Signatur auf schmalen Geräten ----------
   „Wiederbeschaffungs- und Restwert" ist breiter als die Namensspalte.
   Unter 460 px steht der Wert deshalb in einer eigenen Zeile.          */
.posten .name{overflow-wrap:anywhere; hyphens:auto}
@media (max-width:460px){
  .posten li{grid-template-columns:minmax(0,1fr)}
  .posten .wert{justify-self:start; margin-top:var(--sp-2);
    padding-top:var(--sp-2); border-top:1px solid var(--linie); width:100%}
  .posten li[data-eigen] .wert{border-top-color:var(--petrol)}
  .aufbau-koerper{grid-template-columns:1.75rem minmax(0,1fr); gap:var(--sp-3)}
}


/* ---------- Tap-Ziele ----------
   WCAG 2.2 verlangt 24x24 px. Die Linklisten in Fußzeile und
   Ortsliste waren nur 16 px hoch.                                */
.fuss ul a{display:inline-block; padding-block:.28rem}
.fuss-unten ul a,.fuss-unten button{display:inline-block; padding-block:.28rem}
.orte li a{display:inline-block; padding-block:.15rem}
.nav-tel{padding-block:.3rem}

/* ---------- Kundenstimmen ---------- */
.bewertung{display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-6)}
.bewertung .note{display:flex; align-items:baseline; gap:.35rem;
  font-family:'DM Mono',monospace; font-size:2rem; font-weight:500;
  letter-spacing:-.02em; color:var(--tinte)}
.bewertung .note span{font-size:1rem; color:var(--petrol-ink)}
.sterne{display:flex; gap:.18rem}
.sterne svg{width:19px; height:19px; color:var(--petrol); fill:currentColor}
.bewertung p{font-size:.875rem; color:var(--stahl); margin:0; max-width:34ch}

.stimmen{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-4); margin-top:var(--sp-10)}
@media (min-width:760px){.stimmen{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stimmen > *{min-width:0}
.stimme{display:flex; flex-direction:column; background:var(--blatt);
  border:1px solid var(--linie); border-radius:var(--r); padding:var(--sp-6) var(--sp-5)}
.stimme blockquote{margin:0; font-size:1rem; line-height:1.6}
.stimme blockquote::before{content:''; display:block; width:1.6rem; height:7px; margin-bottom:var(--sp-4);
  border-left:1px solid var(--petrol); border-right:1px solid var(--petrol); border-top:1px solid var(--petrol)}
.stimme figcaption{display:flex; align-items:center; gap:var(--sp-3); margin-top:auto;
  padding-top:var(--sp-5)}
.stimme .kuerzel{flex:none; width:38px; height:38px; display:grid; place-items:center;
  border-radius:99px; background:var(--petrol-hauch); border:1px solid var(--petrol);
  font-family:'DM Mono',monospace; font-size:.8125rem; font-weight:500; color:var(--petrol-ink)}
.stimme b{display:block; font-size:.9375rem}
.stimme .ort{display:block; font-size:.8125rem; color:var(--stahl)}