/* Komponenten aus rudel-v3.css (Stand 14.10.2026), unverändert übernommen:
   Schriften, Grundlagen, Baudoku-Beispiel, FAQ, Kontaktformular, Einsparungsdiagramm.
   Wird vor flow.css geladen; flow.css überschreibt die Grundlagen. */
/* ============================================================
   Montserrat, lokal gehostet. Keine externe Anfrage.
   Die 600er-Datei deckt 600 bis 700 ab, damit fette Ueberschriften
   nicht kuenstlich verzerrt werden. Eine echte 700er-Datei fehlt.
   ============================================================ */
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/montserrat-latin-400-normal.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/montserrat-latin-500-normal.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/montserrat-latin-600-normal.woff2") format("woff2");
  font-weight:600 700;font-style:normal;font-display:swap;
}

/* ============================================================
   RUDEL – Landingpage V3
   Farben laut Markenblatt: Graphit, Off-White, Blau, Kupfer
   Keine externen Fonts, Bilder oder Skripte.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --graphit:#0D1117;
  --offwhite:#F6F7F9;
  --blau:#2563EB;
  --blau-dark:#1D4FD8;
  --blau-soft:#EAF0FE;
  --kupfer:#C87A3A;
  --kupfer-text:#A25A24; /* dunklere Kupfervariante fuer Kleintext auf Hell, Kontrast >= 4.5:1 */
  --kupfer-soft:#F7EDE3;
  --weiss:#FFFFFF;
  --text:#131A22;
  --muted:#525E6B;
  --line:#E1E5EA;
  --line-strong:#CBD2DA;
  --radius:14px;
  --radius-lg:22px;
  --shadow:0 1px 2px rgba(13,17,23,.04),0 12px 32px rgba(13,17,23,.06);
  --shadow-lift:0 2px 4px rgba(13,17,23,.05),0 22px 48px rgba(13,17,23,.10);
  --header-h:80px;
  --font:'Montserrat','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  --ease:cubic-bezier(.2,.7,.3,1);
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font);
  background:var(--offwhite);
  color:var(--text);
  line-height:1.7;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;height:auto;display:block}
a{color:var(--blau);text-decoration-thickness:1px;text-underline-offset:3px}
button{font:inherit;color:inherit}
h1,h2,h3{line-height:1.15;letter-spacing:-.022em;font-weight:700;text-wrap:balance}
p{overflow-wrap:break-word}

:focus-visible{outline:3px solid var(--kupfer);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:clamp(64px,8.5vw,120px) 0}
.section--tight{padding:clamp(48px,6vw,80px) 0}
.skip{position:absolute;left:-9999px;top:0;background:var(--graphit);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- Typo-Bausteine ---------- */
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--blau);margin-bottom:18px;
}
.eyebrow--kupfer{color:var(--kupfer)}
h2{font-size:clamp(1.65rem,3.3vw,2.5rem);margin-bottom:14px}
h3{font-size:1.075rem;letter-spacing:-.01em;margin-bottom:8px}
.lead{color:var(--muted);max-width:60ch;font-size:1.03rem}
.section-head{max-width:62ch;margin-bottom:clamp(32px,4.5vw,56px)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:10px;border:1px solid transparent;
  font-size:.95rem;font-weight:600;letter-spacing:-.005em;text-decoration:none;
  cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),color .18s var(--ease);
}
.btn--primary{background:var(--blau);color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.20)}
.btn--primary:hover{background:var(--blau-dark);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--graphit);background:rgba(13,17,23,.03)}
.btn--onDark{background:var(--weiss);color:var(--graphit)}
.btn--onDark:hover{background:#E8ECF2;transform:translateY(-1px)}
.btn--sm{padding:11px 18px;font-size:.86rem}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

.flow-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;min-height:30px}
.flow-title{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.flow-replay{
  display:inline-flex;align-items:center;gap:7px;background:var(--blau-soft);color:var(--blau-dark);
  border:1px solid #D3E0FC;border-radius:999px;padding:6px 12px;font:inherit;font-size:.74rem;font-weight:600;cursor:pointer;
}
.flow-replay:hover{background:#DEE9FE}
.proc-foot{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--muted);
}
.proc-foot .dot-kupfer{width:8px;height:8px;border-radius:50%;background:var(--kupfer);flex:0 0 auto}

/* ---------- Beispielprozess: Baudokumentation (#baudoku) ----------
   Grundzustand im HTML ist der ENDZUSTAND (alles erledigt, Zweifelsfall abgelegt).
   Ohne JavaScript oder bei weniger Bewegung steht also sofort das Ergebnis.
   Das Skript setzt .is-armed und steuert jede Zelle ueber data-s
   (wait, work, done). Eine Position von Hand dauert 3 s und zaehlt 4,5 Minuten. */
.dk .flow-head{min-height:34px}
.dk{
  background:var(--weiss);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:clamp(18px,2.4vw,30px);margin:0;position:relative;
}
.dk-grid{display:grid;gap:6px}
.dk-top,.dk-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center}
.dk-top{padding:0 14px 10px;border-bottom:1px solid var(--line);margin-bottom:6px;align-items:end}
.dk-top-name{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.dk-clock{display:flex;flex-direction:column;line-height:1.2}
.dk-clock small{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dk-clock b{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:4px}
.dk-clock em{font-style:normal;font-size:.72rem;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.dk-clock--hand b{color:var(--text)}
.dk-clock--auto b{color:var(--blau)}

.dk-row{padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--offwhite);min-height:58px}
.dk-name{display:flex;flex-direction:column;font-size:.86rem;font-weight:600;line-height:1.35;min-width:0}
.dk-name small{font-size:.7rem;font-weight:500;color:var(--muted)}
.dk-cell{display:flex;align-items:center;min-width:0;font-size:.78rem;line-height:1.35}
.dk-wait,.dk-work,.dk-done{display:none}
.dk-cell[data-s="wait"] .dk-wait{display:inline-flex;color:#9AA4AF}
.dk-cell[data-s="work"] .dk-work{display:flex}
.dk-cell[data-s="done"] .dk-done{display:flex}

.dk-work{flex-direction:column;gap:5px;width:100%;max-width:220px;color:var(--text);font-weight:500}
.dk-work-text{white-space:nowrap}
.dk-work-text::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dkDots 1.2s steps(4) infinite}
.dk-bar{display:block;height:4px;border-radius:4px;background:var(--line);overflow:hidden;position:relative}
.dk-bar::before{content:"";position:absolute;inset:0;background:var(--muted);transform-origin:left;animation:dkBar 3s linear both}
.dk-auto .dk-work{color:var(--blau-dark)}

.dk-hand .dk-done{align-items:center;gap:6px;color:var(--muted);font-weight:500}
.dk-hand .dk-done svg{color:var(--muted)}
.dk-auto .dk-done{flex-wrap:wrap;gap:5px}
.dk-doc{
  display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:600;color:var(--text);
  background:var(--weiss);border:1px solid #D3E0FC;border-radius:7px;padding:3px 7px 3px 4px;white-space:nowrap;
}
.dk-doc b{flex:0 0 auto;font-size:.56rem;letter-spacing:.04em;background:var(--blau);color:#fff;border-radius:4px;padding:2px 4px}
.dk-doc--sichten{border-color:#EBD2BC;background:var(--kupfer-soft);color:var(--kupfer-text)}
.dk-doc--sichten b{background:var(--kupfer)}
.dk-miss{font-size:.72rem;font-weight:500;color:var(--muted);border:1px dashed var(--line-strong);border-radius:7px;padding:3px 7px}
.dk-skip{font-size:.72rem;color:#8A95A1}


.dk-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:18px}
.dk-mappe{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;background:var(--weiss)}
.dk-mappe-head{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;margin-bottom:8px;color:var(--text)}
.dk-mappe-head svg{color:var(--blau)}
.dk-mappe-list{list-style:none;display:grid;gap:2px}
.dk-mappe-list li{display:flex;justify-content:space-between;gap:12px;font-size:.8rem;color:var(--muted);padding:4px 0;border-bottom:1px dashed var(--line)}
.dk-mappe-list li:last-child{border-bottom:0}
.dk-mappe-list b{color:var(--text);font-weight:600;text-align:right;display:inline-flex;align-items:center;gap:5px}
.dk-mappe-list .dk-ok{color:var(--blau-dark)}
.dk-mappe-list .dk-vor{color:var(--kupfer-text);font-weight:600}
.dk-mappe[data-s="wait"] [data-n="ueb"]{visibility:hidden}

.dk-frei{
  border:1px solid #EBD2BC;border-radius:var(--radius);padding:16px;background:var(--kupfer-soft);
  display:flex;flex-direction:column;justify-content:center;min-height:236px;
}
.dk-frei-wait,.dk-frei-ask,.dk-frei-done{display:none}
.dk-frei[data-s="wait"]{border-style:dashed;border-color:var(--line-strong);background:var(--offwhite)}
.dk-frei[data-s="wait"] .dk-frei-wait{display:block;font-size:.84rem;color:#9AA4AF;text-align:center}
.dk-frei[data-s="ask"] .dk-frei-ask{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.dk-frei[data-s="done"] .dk-frei-done{display:flex}
.dk-frei-text{display:flex;flex-direction:column;font-size:.8rem;color:var(--muted);line-height:1.45}
.dk-frei-text b{font-size:.9rem;color:var(--text);font-weight:600;margin-bottom:2px}
.dk-btn{
  font:inherit;font-size:.86rem;font-weight:600;color:#fff;background:var(--kupfer);border:1px solid var(--kupfer);
  border-radius:10px;padding:10px 18px;cursor:pointer;
}
.dk-btn:hover{background:#B96C2F}
.dk-btn:focus-visible{outline:3px solid var(--graphit);outline-offset:2px}
.dk-frei-done{align-items:flex-start;gap:12px;font-size:.8rem;color:var(--muted);line-height:1.45;outline:0}
.dk-frei-done svg{flex:0 0 auto;width:28px;height:28px;padding:7px;border-radius:50%;background:var(--kupfer);color:#fff;box-sizing:border-box}
.dk-frei-done span{display:flex;flex-direction:column}
.dk-frei-done b{font-size:.9rem;color:var(--text);font-weight:600}

.dk-stats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}
.dk-stats li{display:flex;flex-direction:column;border-left:3px solid var(--blau);padding:2px 0 2px 16px}
.dk-stats b{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.dk-stats span{font-size:.86rem;color:var(--muted)}
.ba-note{margin-top:26px;color:var(--muted);font-size:.93rem;max-width:64ch}

/* Start durch den Besucher: Schleier ueber der Tabelle, bis gestartet wird */
.dk-buehne{position:relative}
.dk-start[hidden]{display:none}
.dk-start{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:rgba(246,247,249,.84);border-radius:12px;text-align:center;padding:16px;
}
.dk-start-btn{
  display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:.98rem;font-weight:600;color:#fff;
  background:var(--blau);border:1px solid var(--blau);border-radius:12px;padding:14px 24px;cursor:pointer;
  box-shadow:0 10px 24px rgba(37,99,235,.28);
}
.dk-start-btn:hover{background:var(--blau-dark)}
.dk-start-btn:focus-visible,.dk-rechner input:focus-visible{outline:3px solid var(--graphit);outline-offset:3px}
.dk-start-hint{font-size:.8rem;color:var(--muted);font-weight:500}
.dk.is-armed .dk-start-btn{animation:dkStartPuls 2s ease-out 1s infinite}
@keyframes dkStartPuls{0%{box-shadow:0 10px 24px rgba(37,99,235,.28),0 0 0 0 rgba(37,99,235,.45)}70%,100%{box-shadow:0 10px 24px rgba(37,99,235,.28),0 0 0 16px rgba(37,99,235,0)}}

/* Eigener Umfang: Regler fuer Positionen je Baustelle */
.dk-rechner{
  margin-top:14px;display:grid;grid-template-columns:auto minmax(120px,260px) minmax(0,1fr);gap:8px 18px;align-items:center;
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--weiss);font-size:.86rem;
}
.dk-rechner label{font-weight:600;white-space:nowrap}
.dk-rechner output{display:inline-block;min-width:2.2em;text-align:right;color:var(--blau-dark);font-variant-numeric:tabular-nums}
.dk-rechner input{width:100%;accent-color:var(--blau);cursor:pointer}
.dk-rechner p{color:var(--muted);margin:0}
.dk-rechner p b{color:var(--text);font-weight:600}

/* Entscheidung im Zweifelsfall */
.dk-vergleich{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.8rem;background:var(--weiss);border:1px solid #EBD2BC;border-radius:10px;padding:8px 12px;width:100%}
.dk-vergleich dt{color:var(--muted)}
.dk-vergleich dd{font-weight:600}
.dk-vergleich mark{background:#F3D9C2;color:var(--kupfer-text);border-radius:4px;padding:0 4px}
.dk-frei-btns{display:flex;flex-wrap:wrap;gap:8px}
.dk-btn--zweit{background:var(--weiss);color:var(--kupfer-text);border-color:#E2BFA0}
.dk-btn--zweit:hover{background:#FBF4EE}
.dk-e-offen,.dk-e-ok,.dk-e-rf{display:none}
.dk[data-entscheid="offen"] .dk-e-offen,.dk[data-entscheid="ok"] .dk-e-ok,.dk[data-entscheid="rf"] .dk-e-rf{display:inline-flex}
.dk-frei-done .dk-e-ok,.dk-frei-done .dk-e-rf{display:none}
.dk[data-entscheid="ok"] .dk-frei-done .dk-e-ok,.dk[data-entscheid="rf"] .dk-frei-done .dk-e-rf{display:inline}

/* Bewegung nur im laufenden Durchlauf */
@keyframes dkTick{0%{transform:scale(1)}40%{transform:scale(1.35);color:var(--blau)}100%{transform:none}}
@keyframes dkBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dkDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@keyframes dkAsk{0%{box-shadow:0 0 0 0 rgba(200,122,58,.5)}70%,100%{box-shadow:0 0 0 12px rgba(200,122,58,0)}}
.dk.is-armed .dk-auto[data-s="done"] .dk-done > *{animation:flPop .35s var(--ease) both}
.dk.is-armed .dk-auto[data-s="done"] .dk-done > :nth-child(2){animation-delay:.08s}
.dk.is-armed .dk-row:has(.dk-auto[data-s="work"]){border-color:var(--blau);background:var(--blau-soft)}
.dk-row{transition:border-color .25s ease,background-color .25s ease}
.dk.is-armed .dk-mappe-list b.is-pop{animation:dkTick .45s var(--ease) both}
.dk.is-armed .dk-mappe[data-s="done"] [data-n="ueb"]{animation:flPop .35s var(--ease) both}
.dk.is-armed .dk-frei[data-s="ask"]{animation:flRise .4s var(--ease) both}
.dk.is-armed .dk-frei[data-s="ask"] #dkOk{animation:dkAsk 1.6s ease-out .4s infinite}
.dk.is-armed .dk-frei[data-s="done"] .dk-frei-done svg{animation:flPop .4s var(--ease) both,flGlow .9s ease-out .1s both}

@media (prefers-reduced-motion:reduce){
  .dk *,.dk *::before,.dk *::after{animation:none!important;transition:none!important}
}
@media (max-width:760px){
  .dk-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0 4px 10px}
  .dk-top-name{display:none}
  .dk-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 12px;padding:10px 12px}
  .dk-name{grid-column:1/-1}
  .dk-cell{align-items:flex-start;flex-direction:column;gap:3px}
  .dk-cell::before{content:attr(data-label);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9AA4AF}
  .dk-bottom{grid-template-columns:1fr}
  .dk-rechner{grid-template-columns:1fr;gap:6px}
  .dk-frei{min-height:0}
  .dk-start{justify-content:flex-start;padding-top:96px}
  .dk-stats{grid-template-columns:1fr;gap:14px}
  .dk-doc{white-space:normal}
  .dk-auto{min-height:64px}
}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:840px}
.faq details{background:var(--weiss);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 22px;font-weight:600;font-size:1rem;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 auto;width:10px;height:10px;border-right:2px solid var(--kupfer);border-bottom:2px solid var(--kupfer);
  transform:rotate(45deg);transition:transform .2s var(--ease);margin-top:-4px;
}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:2px}
.faq p{padding:0 22px 20px;color:var(--muted);font-size:.93rem;max-width:70ch}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr;gap:44px}
  .band-inner{grid-template-columns:1fr;gap:28px}
  .case{grid-template-columns:1fr}
  .person{grid-template-columns:1fr}
  .cards,.steps,.prices{grid-template-columns:1fr}
  .card,.price,.step{max-width:none}
}
@media (max-width:1280px){
  .nav{gap:2px}
  .nav a{padding:8px 9px;font-size:.85rem}
  .header-cta .btn{padding:10px 14px;font-size:.82rem}
  /* Im Engbereich zwischen Burger-Umschaltpunkt (1140px) und voller Breite
     reicht der Platz sonst nicht: Die Navigation würde umbrechen und
     "Über mich" unter "Beispielprozess" rutschen. Der CTA wird deshalb
     hier auf "Prozessgespräch buchen" verkürzt. Im mobilen Menüpanel
     bleibt die lange Fassung erhalten. */
  .header-cta .cta-lang{display:none}
}
@media (max-width:1140px){
  /* Ohne JS bleibt die Navigation als umbrechende Liste bedienbar. */
  .site-header{height:auto}
  .header-inner{height:auto;flex-wrap:wrap;padding-top:14px;padding-bottom:14px;row-gap:12px}
  .nav{width:100%;order:3;margin-left:0}
  .nav a{padding:8px 10px}
  .header-cta{margin-left:auto}

  .js .site-header{height:var(--header-h)}
  .js .header-inner{height:auto;padding-top:0;padding-bottom:0;position:relative}
  .js .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;order:2;margin-left:auto;
    background:transparent;border:1px solid var(--line-strong);border-radius:9px;padding:9px 12px;
    font-size:.82rem;font-weight:600;cursor:pointer;
  }
  .js .header-cta{display:none}
  .js .nav{
    position:absolute;top:var(--header-h);left:0;right:0;order:4;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--weiss);border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);
    padding:12px;box-shadow:var(--shadow-lift);
  }
  .js .nav[hidden]{display:none}
  .js .nav a{padding:12px 14px;font-size:.95rem}
  .js .nav .btn{display:inline-flex;margin-top:8px;width:100%}
}
@media (max-width:430px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .brand{min-width:0}
  .brand img{width:36px;height:41px}
  .brand-name{font-size:.95rem;letter-spacing:.12em}
  .brand-sub{font-size:.48rem;letter-spacing:.1em}
  .js .nav-toggle{padding:9px 10px}
  .js .nav-toggle .nav-toggle-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hero-actions .btn{width:100%}
}

/* ---------- Abschlussbereich mit Kontaktformular ---------- */
.final{text-align:left}
.final-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(32px,4.5vw,72px);align-items:start}
.final h2{margin:0 0 18px;max-width:18ch}
.final-text>p{margin:0 0 22px;max-width:52ch}
.final-contact{font-size:.9rem;line-height:2;color:rgba(246,247,249,.6)}
.final-contact a{color:#9FBDF7;text-decoration:none}
.final-contact a:hover{text-decoration:underline}

.cform{background:var(--weiss);border-radius:var(--radius-lg);padding:clamp(24px,3vw,34px);color:var(--text);box-shadow:var(--shadow-lift)}
.field{margin-bottom:16px}
.field label{display:block;font-size:.83rem;font-weight:600;margin-bottom:7px}
.req{color:var(--kupfer-text)}
.opt{font-weight:500;color:var(--muted);font-size:.78rem}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.93rem;color:var(--text);background:var(--offwhite);
  border:1px solid var(--line-strong);border-radius:9px;padding:11px 13px;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.field textarea{resize:vertical;min-height:104px;line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#AEB7C1}
.field input:focus,.field select:focus,.field textarea:focus{background:var(--weiss);border-color:var(--blau);outline:2px solid rgba(37,99,235,.25);outline-offset:1px}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#B4341F;background:#FEF4F2}
.field-error{font-size:.79rem;color:#9C2A17;margin-top:5px;min-height:0}
.field-error:empty{display:none}
.field-hint{font-size:.78rem;color:var(--muted);margin-top:12px}
.field--check{margin-top:20px}
.checkbox{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;font-size:.85rem;font-weight:400;line-height:1.55}
.checkbox input{width:20px;height:20px;margin-top:1px;accent-color:var(--blau)}
.checkbox a{color:var(--blau)}
.btn--wide{width:100%;margin-top:8px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform-status{border-radius:9px;padding:12px 14px;font-size:.88rem;margin-bottom:18px}
.cform-status--ok{background:#E9F6EE;color:#1D5C36;border:1px solid #BFE3CD}
.cform-status--err{background:#FEF4F2;color:#9C2A17;border:1px solid #F2CFC7}
@media (max-width:1000px){
  .final-inner{grid-template-columns:1fr;gap:36px}
  .final h2{max-width:none}
}

/* ---------- Einsparung: Diagramm (Abschnitt #einsparung) ---------- */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.esp-intro{color:var(--muted);max-width:70ch;margin-top:14px}
.esp-card{
  background:var(--weiss);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:clamp(20px,2.6vw,32px);margin-top:30px;
}
.esp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.esp-hero-label{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.esp-hero-value{
  /* Hero-Zahl: gleiche Sans wie der Rest, proportionale Ziffern (kein tabular-nums). */
  font-size:clamp(2.1rem,4.4vw,3rem);font-weight:600;letter-spacing:-.03em;
  line-height:1.1;margin-top:6px;color:var(--text);
}
.esp-hero-unit{font-size:.44em;font-weight:600;color:var(--muted);letter-spacing:0}
.esp-hero-sub{color:var(--muted);font-size:.92rem;margin-top:8px}

/* Umschalter nur mit JS, ohne JS bleibt die Zeitansicht plus Tabelle. */
.esp-switch{display:none}
.js .esp-switch{
  display:inline-flex;gap:2px;padding:3px;flex:0 0 auto;
  background:var(--offwhite);border:1px solid var(--line);border-radius:10px;
}
.esp-switch button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:.86rem;font-weight:600;color:var(--muted);
  padding:8px 18px;border-radius:8px;transition:background .15s var(--ease),color .15s var(--ease);
}
.esp-switch button:hover{color:var(--text)}
.esp-switch button[aria-selected="true"]{background:var(--weiss);color:var(--blau);box-shadow:0 1px 2px rgba(13,17,23,.06)}
.esp-switch button:focus-visible{outline:2px solid var(--blau);outline-offset:2px}

.esp-figure{position:relative;margin-top:26px}
.esp-svg{display:block;width:100%;height:auto;overflow:visible}

/* Gitter und Achsen: durchgezogene Haarlinien, bewusst zurueckhaltend. */
.esp-grid line{stroke:var(--line);stroke-width:1}
.esp-tick text{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.esp-tick--y text{text-anchor:end}
.esp-tick--x text{text-anchor:middle}
.esp-tick--x text:first-child{text-anchor:start}
.esp-tick--x text:last-child{text-anchor:end}

/* Flaeche als Wasch, nie als satter Block. */
.esp-band{fill:var(--blau);fill-opacity:.10}
.esp-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.esp-line--hi{stroke:var(--blau)}
.esp-line--lo{stroke:var(--kupfer)}
.esp-dot{stroke:var(--weiss);stroke-width:2}
.esp-dot--hi{fill:var(--blau)}
.esp-dot--lo{fill:var(--kupfer)}
.esp-endlabel{font-size:12px;font-weight:600;fill:var(--text);font-variant-numeric:tabular-nums}
.esp-endlabel--sub{font-size:10.5px;font-weight:500;fill:var(--muted);font-variant-numeric:normal}
.esp-caption{color:var(--muted);font-size:.86rem;margin-top:14px}

/* Trefferflaechen sind bewusst breiter als die Marken. */
.esp-hit rect{fill:transparent;cursor:crosshair}
.esp-cross line{stroke:var(--line-strong);stroke-width:1}
.esp-cross circle{stroke:var(--weiss);stroke-width:2}
#espCrossHi{fill:var(--blau)}
#espCrossLo{fill:var(--kupfer)}
.esp-tip{
  position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,-100%);
  background:var(--graphit);color:#fff;border-radius:9px;padding:9px 12px;
  font-size:.8rem;line-height:1.45;white-space:nowrap;box-shadow:var(--shadow-lift);
}
.esp-tip b{font-weight:600;font-variant-numeric:tabular-nums}
.esp-tip-row{display:flex;align-items:center;gap:7px}
.esp-tip-key{width:8px;height:8px;border-radius:50%;flex:0 0 auto}

.esp-table{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.esp-table summary{cursor:pointer;font-size:.9rem;font-weight:600;color:var(--blau);padding:4px 0}
.esp-table summary:focus-visible{outline:2px solid var(--blau);outline-offset:3px;border-radius:4px}
.esp-table-scroll{overflow-x:auto;margin-top:14px}
.esp-table table{border-collapse:collapse;width:100%;font-size:.88rem}
.esp-table th,.esp-table td{padding:8px 14px 8px 0;text-align:left;border-bottom:1px solid var(--line)}
.esp-table thead th{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.esp-table tbody th{font-weight:600;color:var(--text)}
.esp-table td{color:var(--muted);font-variant-numeric:tabular-nums}
.esp-note{color:var(--muted);font-size:.84rem;line-height:1.6;margin-top:20px;max-width:78ch}

@media (max-width:760px){
  .esp-top{flex-direction:column;gap:18px}
  .js .esp-switch{align-self:flex-start}
  /* Auf schmalen Geraeten schrumpft das Diagramm so stark, dass Achsen und
     Beschriftung unleserlich werden. Es behaelt deshalb eine Mindestbreite
     und wird bei Bedarf seitlich gescrollt, statt unlesbar zu werden. */
  .esp-figure{overflow-x:auto}
  .esp-svg{min-width:620px}
  .esp-tick text{font-size:14px}
  .esp-endlabel{font-size:15px}
  .esp-endlabel--sub{font-size:13px}
}
/* In SVG wirkt das HTML-Attribut hidden nicht von selbst als display:none. */
.esp-cross[hidden]{display:none}

/* ------------------------------------------------------------- Kennzahl
   Grosse Zahl in einer Karte, etwa das Ergebnis auf der Referenzseite.
   Bewusst NICHT .card-num nehmen, das ist die kleine Zaehlung 01/02/03
   und mit .7rem viel zu klein fuer eine Aussage, die wirken soll. */
.stat-num{
  display:block;
  font-size:clamp(2rem,4vw,2.7rem);font-weight:600;letter-spacing:-.03em;
  line-height:1.05;margin-bottom:4px;color:var(--text);
}
.card--kupfer .stat-num{color:var(--kupfer-text)}