/*
Theme Name:   ADM Elektro
Theme URI:    https://www.adm-elektro.de/
Author:       Waechterwerk - Lennart Waechter
Author URI:   https://waechterwerk.com
Description:  Individuelles Theme fuer ADM-Elektro UG (haftungsbeschraenkt), Elektro-Meisterbetrieb in Erlensee bei Hanau. Kein Baukasten, keine Fremd-Frameworks. Meta-Angaben, Canonical und Sitemap bleiben bei Yoast SEO.
Version:      1.0.6
Requires at least: 6.4
Requires PHP: 8.0
License:      Proprietaer, Nutzungsrechte gehen nach vollstaendiger Zahlung an den Auftraggeber ueber
Text Domain:  adm
*/
/* ADM Elektro — Stylesheet · Build 20261002-1800 */
/* ============================================================
   ADM ELEKTRO — Entwurf Wächterwerk
   Tokens
   ============================================================ */
:root{
  /* Leitfarbe aus dem Firmenlogo, gemessen: Farbton 208 Grad */
  --blau:#0A6FC2;
  --blau-dunkel:#08558F;
  --blau-hell:#3D9BE9;
  --blau-zart:#DCEBF8;

  /* Dunkle Flaechen: tiefes Marineblau statt Fast-Schwarz */
  --nacht:#0C2C4A;
  --nacht-2:#123A5E;
  --nacht-3:#1B4C77;

  --papier:#F2F6FA;
  --weiss:#fff;

  /* Rot nur noch als Signal: Notdienst, Warnung, aktiver Zustand */
  --rot:#E42618;
  --rot-dunkel:#C21C10;

  --gold:#E8A93C;
  --stahl:#586D80;
  --stahl-hell:#8FA3B5;
  --linie:rgba(12,44,74,.14);
  --linie-hell:rgba(255,255,255,.16);

  --disp:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --wrap:1280px;
  --pad:clamp(20px,5vw,56px);
  --sec:clamp(72px,9vw,132px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
body{
  margin:0;background:var(--papier);color:var(--nacht);
  font-family:var(--body);font-size:17px;line-height:1.68;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

/* Fokus */
:where(a,button,input,textarea,select,summary):focus-visible{
  outline:3px solid var(--rot);outline-offset:3px;border-radius:2px;
}

/* Typo-Bausteine */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--stahl);
  display:flex;align-items:center;gap:12px;margin:0 0 20px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--blau);flex:none}
.eyebrow--hell{color:var(--stahl-hell)}
.h1{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.9rem,7.2vw,5.9rem);line-height:.9;letter-spacing:-.005em;
  margin:0;text-wrap:balance;
}
.h2{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:.96;letter-spacing:.002em;
  margin:0 0 22px;text-wrap:balance;
}
.h3{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.05;margin:0 0 10px;
}
.lead{font-size:clamp(1.02rem,1.35vw,1.18rem);color:#33475C;max-width:62ch;margin:0 0 28px}
.lead--hell{color:#B0C2D2}
.mono-label{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--stahl);
}

/* Sektionen */
.sec{padding-block:var(--sec);position:relative}
section[id],footer[id]{scroll-margin-top:96px}
.sec--dark{background:var(--nacht);color:var(--weiss)}
.sec--dark .lead{color:#B0C2D2}
.sec--raster::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 30%,transparent 100%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 30%,transparent 100%);
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:1.06rem;letter-spacing:.03em;
  padding:15px 26px;border:2px solid transparent;border-radius:2px;
  transition:transform .18s var(--ease),background .18s,color .18s,border-color .18s;
}
.btn svg{width:17px;height:17px;fill:currentColor;flex:none;transition:transform .18s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn--cta{background:var(--blau);color:#fff}
.btn--not{background:var(--rot);color:#fff}
.btn--cta:hover{background:var(--blau-dunkel)}
.btn--not:hover{background:var(--rot-dunkel)}
.btn--linie{border-color:currentColor}
.btn--linie:hover{background:var(--nacht);color:#fff;border-color:var(--nacht)}
.sec--dark .btn--linie:hover,.hero .btn--linie:hover{background:#fff;color:var(--nacht);border-color:#fff}
.hero .btn--linie{color:#fff}

/* Klemmleiste — Trenner aus der Welt des Kunden */
.klemme{display:flex;align-items:center;gap:0;height:9px;margin:0}
.klemme i{display:block;height:1px;background:var(--linie);flex:1}
.klemme b{display:block;width:7px;height:7px;border:1.5px solid var(--blau);flex:none;margin-inline:5px}
.sec--dark .klemme i{background:var(--linie-hell)}

/* ============================================================
   Header
   ============================================================ */
.head{
  position:sticky;top:0;z-index:70;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linie);
  transition:box-shadow .25s,padding .25s;
}
.head.is-fest{box-shadow:0 6px 28px rgba(12,44,74,.09)}
.head .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-block:14px;transition:padding .25s}
.head.is-fest .wrap{padding-block:9px}
.logo img{height:78px;width:auto;transition:height .25s}
.head.is-fest .logo img{height:62px}
.nav{display:flex;align-items:center;gap:26px}
.nav a{
  font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:1.02rem;letter-spacing:.03em;padding:7px 0;position:relative;color:#24384C;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--blau);
  transition:width .24s var(--ease);
}
.nav a:hover::after{width:100%}
.head__cta{display:flex;align-items:center;gap:14px}
.tel-link{
  display:flex;align-items:center;gap:9px;font-family:var(--disp);
  font-weight:700;font-size:1.14rem;letter-spacing:.02em;white-space:nowrap;
}
.tel-link svg{width:18px;height:18px;fill:var(--rot);flex:none}
.burger{display:none;background:none;border:0;padding:9px;color:var(--nacht)}
.burger svg{width:26px;height:26px;fill:currentColor}

/* Mobilmenü */
.mnav{
  position:fixed;inset:0;z-index:90;background:var(--nacht);color:#fff;
  display:none;flex-direction:column;height:100vh;height:100dvh;
}
.mnav.is-auf{display:flex}

.mnav__kopf{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px var(--pad);border-bottom:1px solid rgba(255,255,255,.12);
}
.mnav__logo{display:block}
.mnav__logo img{height:44px;width:auto;display:block}
.mnav__zu{
  flex:none;width:44px;height:44px;display:grid;place-items:center;
  background:none;border:1px solid rgba(255,255,255,.22);border-radius:50%;color:#fff;
  transition:background .2s,border-color .2s;
}
.mnav__zu:active{background:rgba(255,255,255,.1)}
.mnav__zu svg{width:19px;height:19px;fill:currentColor}

.mnav__rolle{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:6px var(--pad) 24px;
}

.mgrp{border-bottom:1px solid rgba(255,255,255,.1)}
.mgrp__knopf{
  width:100%;background:none;border:0;color:#fff;text-align:left;
  display:flex;align-items:center;gap:12px;padding:17px 0;
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:1.42rem;letter-spacing:.02em;
}
.mgrp__zahl{
  flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--blau-hell);border:1px solid rgba(61,155,233,.45);
  border-radius:20px;padding:3px 9px;
}
.mgrp__pfeil{
  margin-left:auto;flex:none;position:relative;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);transition:background .25s,border-color .25s;
}
.mgrp__pfeil::before,.mgrp__pfeil::after{
  content:"";position:absolute;background:#fff;transition:transform .3s var(--ease),opacity .3s;
}
.mgrp__pfeil::before{left:8px;top:15px;width:16px;height:2px}
.mgrp__pfeil::after{left:15px;top:8px;width:2px;height:16px}
.mgrp__knopf[aria-expanded="true"] .mgrp__pfeil{background:var(--blau);border-color:var(--blau)}
.mgrp__knopf[aria-expanded="true"] .mgrp__pfeil::after{transform:rotate(90deg);opacity:0}

.mgrp__inhalt{display:none;padding-bottom:16px}
.mgrp__inhalt.is-auf{display:block;animation:mklapp .3s var(--ease)}
@keyframes mklapp{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mgrp__tag{
  display:flex;align-items:center;gap:10px;margin:12px 0 10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7E93A6;
}
.mgrp__tag::before{content:"";flex:none;width:14px;height:2px;background:var(--blau)}

.mkarten{display:flex;flex-direction:column;gap:8px}
.mkarten a{
  display:block;padding:13px 15px;border-radius:3px;text-transform:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  transition:background .2s,border-color .2s;
}
.mkarten a:active{background:rgba(255,255,255,.11)}
.mkarten a[aria-current]{border-color:var(--blau-hell);background:rgba(61,155,233,.16)}
.mkarten b{
  display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:1.02rem;letter-spacing:.02em;color:#fff;line-height:1.15;
}
.mkarten span{
  display:block;margin-top:3px;font-family:var(--body);font-size:.82rem;
  color:#8FA3B5;line-height:1.45;text-transform:none;letter-spacing:0;
}

.mzeile{
  display:flex;align-items:center;padding:17px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:1.42rem;letter-spacing:.02em;color:#fff;
}
.mzeile::after{
  content:"";margin-left:auto;flex:none;width:9px;height:9px;margin-right:12px;
  border-right:2px solid var(--blau);border-top:2px solid var(--blau);transform:rotate(45deg);
}

.mnav__fuss{
  flex:none;display:flex;align-items:center;gap:10px;background:var(--nacht-2);
  border-top:1px solid rgba(255,255,255,.12);
  padding:12px var(--pad);padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
}
.mnav__tel{
  display:inline-flex;align-items:center;gap:9px;background:var(--rot);color:#fff;
  padding:10px 16px;border-radius:3px;
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:.98rem;letter-spacing:.03em;
}
.mnav__tel svg{width:15px;height:15px;fill:currentColor}
.mnav__wa{
  flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:3px;
  border:1px solid rgba(255,255,255,.2);
}
.mnav__wa svg{width:19px;height:19px;fill:#25D366}
.mnav__zeit{
  margin-left:auto;text-align:right;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;color:#72879A;line-height:1.45;
}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;background:var(--nacht);color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:58% 45%}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(9,34,58,.95) 0%,rgba(9,34,58,.82) 34%,rgba(9,34,58,.42) 62%,rgba(9,34,58,.62) 100%),
    linear-gradient(0deg,rgba(9,34,58,.85) 0%,transparent 42%);
}
.hero__in{
  position:relative;z-index:2;
  min-height:560px;
  height:calc(100vh - var(--kopf,118px));
  height:calc(100svh - var(--kopf,118px));
  max-height:900px;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:40px;padding-bottom:132px;
}
.hero .h1 span{display:block}
@media (min-width:681px){.hero .h1 br{display:none}}
.hero .h1 em{font-style:normal;color:var(--rot)}
.hero__sub{
  max-width:56ch;margin:26px 0 34px;color:#C0D0DE;
  font-size:clamp(1.02rem,1.3vw,1.16rem);
}
.hero__btns{display:flex;gap:14px;flex-wrap:wrap}

/* Schriftfeld — Titelblock wie in technischen Zeichnungen */
.schriftfeld{
  position:absolute;right:var(--pad);bottom:146px;z-index:3;
  border:1px solid rgba(255,255,255,.26);background:rgba(9,34,58,.55);
  backdrop-filter:blur(7px);min-width:280px;
}
.schriftfeld div{
  display:grid;grid-template-columns:124px 1fr;gap:0;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.schriftfeld div:last-child{border-bottom:0}
.schriftfeld dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:#8D949D;padding:9px 13px;border-right:1px solid rgba(255,255,255,.16);margin:0;
  white-space:nowrap;
}
.schriftfeld dd{
  margin:0;padding:9px 13px;font-family:var(--disp);font-weight:600;
  font-size:1.02rem;letter-spacing:.02em;color:#fff;text-transform:uppercase;
}
.schriftfeld dd b{color:var(--gold);font-weight:600}

/* Schnellwahl unten im Hero */
.quick{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid rgba(255,255,255,.16);background:rgba(9,34,58,.5);backdrop-filter:blur(7px)}
.quick ul{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.quick li{border-right:1px solid rgba(255,255,255,.13)}
.quick li:last-child{border-right:0}
.quick a{
  display:flex;align-items:center;gap:12px;padding:19px 22px;
  font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:1.04rem;
  letter-spacing:.03em;color:#E2EBF2;transition:background .2s,color .2s;
}
.quick a:hover{background:var(--blau);color:#fff}
.quick svg{width:20px;height:20px;stroke:var(--blau-hell);fill:none;stroke-width:1.6;flex:none;transition:stroke .2s}
.quick a:hover svg{stroke:#fff}

/* ============================================================
   Leistungen — asymmetrisches Raster
   ============================================================ */
.kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;margin-bottom:44px;flex-wrap:wrap}
.kopf p{margin:0;max-width:46ch;color:#42576D}
.sec--dark .kopf p{color:#AEB5BD}

.raster{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;grid-auto-rows:232px}
.kachel{
  position:relative;overflow:hidden;background:var(--nacht-2);
  border-radius:2px;display:flex;align-items:flex-end;isolation:isolate;
}
.kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .7s var(--ease),filter .45s}
.kachel::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(8,32,55,.93) 0%,rgba(8,32,55,.55) 38%,rgba(8,32,55,.12) 78%);
  transition:background .35s;
}
.kachel__in{position:relative;z-index:2;padding:24px 26px;color:#fff;width:100%}
.kachel__in .h3{margin-bottom:6px}
.kachel__in p{margin:0;font-size:.93rem;color:#C2C8D0;max-width:34ch;opacity:.001;transform:translateY(9px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.kachel__nr{
  position:absolute;top:20px;left:26px;z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.62);
}
.kachel__rule{position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--blau);z-index:3;transition:width .45s var(--ease)}
.kachel:hover img{transform:scale(1.07)}
.kachel:hover::after{background:linear-gradient(0deg,rgba(8,32,55,.96) 0%,rgba(8,32,55,.66) 46%,rgba(8,32,55,.2) 88%)}
.kachel:hover .kachel__in p{opacity:1;transform:none}
.kachel:hover .kachel__rule{width:100%}

.k-pv{grid-column:span 6;grid-row:span 2}
.k-smart{grid-column:span 3;grid-row:span 2}
.k-wallbox{grid-column:span 3}
.k-wp{grid-column:span 3}
.k-neubau{grid-column:span 4}
.k-altbau{grid-column:span 4}
.k-pruef{grid-column:span 4}
.k-licht{grid-column:span 6}
.k-netz{grid-column:span 6}

/* Wärmepumpen-Kachel ohne Foto: gezeichnet */
.kachel--zeichnung{background:var(--nacht-3);align-items:stretch}
.kachel--zeichnung::after{display:none}
.kachel--zeichnung .zeichnung{
  position:absolute;inset:0;z-index:1;display:grid;place-items:center;opacity:.9;
}
.kachel--zeichnung .zeichnung svg{width:60%;max-width:170px;height:auto;overflow:visible}
.kachel--zeichnung .kachel__in{align-self:flex-end;background:linear-gradient(0deg,rgba(12,44,74,.97) 40%,transparent)}

/* ============================================================
   Ablauf — Stromlaufplan (Signature)
   ============================================================ */
.plan{margin-top:64px;position:relative}
.plan__schiene{position:relative;height:2px;background:rgba(255,255,255,.16);margin:0 0 0}
.plan__strom{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--blau),var(--blau-hell));transition:width 2.1s var(--ease);box-shadow:0 0 16px rgba(61,155,233,.6)}
.plan.is-an .plan__strom{width:100%}
.plan__punkt{
  position:absolute;top:50%;translate:-50% -50%;width:15px;height:15px;
  border:2px solid var(--blau);background:var(--nacht);z-index:2;
}
.plan__punkt::after{
  content:"";position:absolute;inset:3px;background:var(--blau);
  opacity:.001;transition:opacity .35s;
}
.plan.is-an .plan__punkt::after{opacity:1}
.plan.is-an .plan__punkt:nth-of-type(2)::after{transition-delay:.30s}
.plan.is-an .plan__punkt:nth-of-type(3)::after{transition-delay:.85s}
.plan.is-an .plan__punkt:nth-of-type(4)::after{transition-delay:1.40s}
.plan.is-an .plan__punkt:nth-of-type(5)::after{transition-delay:1.95s}

.plan__schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:34px}
.schritt__nr{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--blau-hell);
  display:block;margin-bottom:12px;
}
.schritt .h3{color:#fff}
.schritt p{margin:0;color:#A0B4C5;font-size:.97rem}
.plan__fuss{
  margin-top:46px;display:flex;gap:13px;align-items:flex-start;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:#8397A9;
  border-left:2px solid var(--blau);padding-left:16px;max-width:74ch;line-height:1.7;
}

/* ============================================================
   Aus einer Hand
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,86px);align-items:center}
.kette{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.kette li{position:relative;padding:19px 0 19px 62px;border-bottom:1px solid var(--linie)}
.kette li:last-child{border-bottom:0}
.kette li::before{
  content:attr(data-nr);position:absolute;left:0;top:19px;
  width:38px;height:38px;display:grid;place-items:center;
  border:1.5px solid var(--blau);color:var(--blau);
  font-family:var(--mono);font-size:12px;font-weight:500;
}
.kette li::after{
  content:"";position:absolute;left:19px;top:57px;bottom:0;width:1.5px;
  background:repeating-linear-gradient(180deg,var(--blau) 0 4px,transparent 4px 9px);
}
.kette li:last-child::after{display:none}
.kette b{display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:1.16rem;letter-spacing:.02em}
.kette span{color:#526779;font-size:.95rem}

.band{position:relative;margin-top:var(--sec);height:clamp(240px,32vw,400px);overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover}
.band__text{
  position:absolute;inset:0;display:flex;align-items:center;
  background:linear-gradient(90deg,rgba(8,32,55,.9) 0%,rgba(8,32,55,.45) 55%,transparent 100%);
}
.band__text .h2{color:#fff;margin:0;max-width:20ch}

/* ============================================================
   Solarrechner
   ============================================================ */
.rechner{
  border:1px solid rgba(10,111,194,.4);background:#fff;padding:clamp(24px,3.4vw,40px);
  position:relative;
}
.rechner__tag{
  position:absolute;top:-12px;left:24px;background:#fff;padding:0 11px;
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--blau);
}
.rechner__feld{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.feld label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--stahl);margin-bottom:7px}
.feld input,.feld select{
  width:100%;padding:13px 14px;border:1px solid var(--linie);background:var(--papier);
  font:inherit;font-size:.98rem;border-radius:2px;
}
.feld input:focus,.feld select:focus{border-color:var(--blau);background:#fff}
.rechner__hinweis{
  font-family:var(--mono);font-size:11.5px;color:var(--stahl);line-height:1.7;
  border-top:1px solid var(--linie);padding-top:16px;margin-top:22px;
}

/* ============================================================
   Bewertungen
   ============================================================ */
.score{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-bottom:44px}
.score__zahl{font-family:var(--disp);font-weight:800;font-size:clamp(3.4rem,7vw,5.2rem);line-height:.85;letter-spacing:-.01em}
.sterne{display:flex;gap:4px}
.sterne svg{width:22px;height:22px;fill:var(--gold)}
.score__meta{font-family:var(--mono);font-size:12px;letter-spacing:.09em;color:var(--stahl);text-transform:uppercase;margin-top:8px}

.bews{columns:3;column-gap:16px}
.bew{
  break-inside:avoid;background:#fff;border:1px solid var(--linie);border-radius:2px;
  padding:24px 26px;margin-bottom:16px;position:relative;
  transition:transform .25s var(--ease),box-shadow .25s;
}
.bew:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(12,44,74,.09)}
.bew .sterne{margin-bottom:13px}
.bew .sterne svg{width:16px;height:16px}
.bew p{margin:0 0 16px;font-size:.96rem;color:#354A60;line-height:1.68}
.bew__wer{display:flex;align-items:center;gap:11px;border-top:1px solid var(--linie);padding-top:14px}
.bew__ini{
  width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--nacht);color:#fff;font-family:var(--disp);font-weight:700;font-size:.95rem;
}
.bew__name{font-weight:600;font-size:.93rem}
.bew__q{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--stahl);text-transform:uppercase}

/* ============================================================
   Gewerbe + Kennzahlen
   ============================================================ */
.gewerbe{position:relative;overflow:hidden;background:var(--nacht)}
.gewerbe__bg{position:absolute;inset:0}
.gewerbe__bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.gewerbe__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--nacht) 12%,rgba(12,44,74,.7) 60%,rgba(12,44,74,.35) 100%)}
.gewerbe .wrap{position:relative;z-index:2}
.leist2{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:34px;max-width:620px}
.leist2 div{background:rgba(255,255,255,.05);padding:17px 19px;border-left:2px solid var(--blau)}
.leist2 b{display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:1.06rem;letter-spacing:.02em}
.leist2 span{font-size:.88rem;color:#98ACBD}

.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:var(--sec)}
.zahl{background:rgba(255,255,255,.05);padding:30px 26px;border-top:2px solid var(--blau)}
.zahl b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,4.4vw,3.4rem);line-height:.92;letter-spacing:-.01em}
.zahl span{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#9AA1AA;display:block;margin-top:9px}

/* ============================================================
   Einsatzgebiet
   ============================================================ */
.gebiet{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center}
.orte{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;list-style:none;padding:0}
.orte li{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  border:1px solid var(--linie);padding:7px 13px;border-radius:2px;background:#fff;
  transition:border-color .2s,color .2s;
}
.orte li:hover{border-color:var(--blau);color:var(--blau)}
.karte svg{width:100%;height:auto;overflow:visible}

/* ============================================================
   Partner
   ============================================================ */
.partner{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,58px);align-items:center;justify-content:center}
.partner img{
  height:clamp(52px,6vw,74px);width:auto;filter:grayscale(1);opacity:.55;
  transition:filter .3s,opacity .3s,transform .3s var(--ease);
}
.partner img:hover{filter:none;opacity:1;transform:scale(1.06)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:900px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 46px 22px 0;position:relative;
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.08rem,1.7vw,1.34rem);letter-spacing:.02em;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blau)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;translate:0 -50%;
  width:15px;height:15px;
  background:
    linear-gradient(var(--blau),var(--blau)) center/15px 2px no-repeat,
    linear-gradient(var(--blau),var(--blau)) center/2px 15px no-repeat;
  transition:transform .28s var(--ease);
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq__a{padding:0 46px 24px 0;color:#42576D;margin:0;max-width:70ch}

/* ============================================================
   Kontakt
   ============================================================ */
.kontakt{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,80px)}
.kdaten dl{margin:0 0 26px}
.kdaten dt{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--stahl-hell);margin-bottom:6px}
.kdaten dd{margin:0 0 20px;font-size:1.04rem;color:#E6EDF4}
.kdaten dd a{border-bottom:1px solid rgba(255,255,255,.28)}
.kdaten dd a:hover{border-color:var(--blau);color:var(--blau-hell)}
.kdaten .gross{font-family:var(--disp);font-weight:700;font-size:1.5rem;letter-spacing:.02em}

.formular{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.formular .voll{grid-column:1/-1}
.formular label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stahl-hell);margin-bottom:8px}
.formular input,.formular select,.formular textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.24);
  color:#fff;font:inherit;font-size:1rem;padding:11px 2px;border-radius:0;
  transition:border-color .2s;
}
.formular textarea{resize:vertical;min-height:104px}
.formular select option{background:var(--nacht);color:#fff}
.formular input:focus,.formular select:focus,.formular textarea:focus{border-bottom-color:var(--blau);outline-offset:6px}
.formular input::placeholder,.formular textarea::placeholder{color:#6A7F92}
.zustimmung{display:flex;gap:12px;align-items:flex-start;font-size:.85rem;color:#8DA1B3;line-height:1.6}
.zustimmung input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--blau)}
.zustimmung a{border-bottom:1px solid rgba(255,255,255,.3)}
/* Rueckmeldung des Anfrageformulars */
.formular input.is-fehler,.formular select.is-fehler,.formular textarea.is-fehler{border-bottom-color:var(--rot)}
.formular input.is-fehler:focus,.formular select.is-fehler:focus,.formular textarea.is-fehler:focus{outline-offset:2px}
.zustimmung input.is-fehler{outline:2px solid var(--rot);outline-offset:3px}
.fmeldung{
  grid-column:1/-1;margin:2px 0 0;padding:15px 18px;border-left:3px solid var(--blau);
  background:rgba(255,255,255,.055);font-size:.9rem;line-height:1.65;color:#C6D7E6;
}
.fmeldung a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.fmeldung.is-fehler{border-left-color:var(--rot);color:#F3C9C5}
.fmeldung.is-gut{border-left-color:var(--blau-hell);color:#CFE2F3}

/* ============================================================
   Footer + schwebende Elemente
   ============================================================ */
.fuss{background:#0E1116;color:#8397A9;padding-top:clamp(56px,7vw,86px);padding-bottom:26px;font-size:.92rem}
.fuss__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.09)}
.fuss h4{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:1.06rem;letter-spacing:.04em;color:#fff;margin:0 0 16px}
.fuss ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fuss a:hover{color:var(--blau-hell)}
.fuss__wort{font-family:var(--disp);font-weight:800;font-size:1.7rem;letter-spacing:.02em;color:#fff;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.fuss__wort svg{width:22px;height:22px;fill:var(--rot)}
.fuss__unten{display:flex;justify-content:space-between;gap:20px;padding-top:22px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em}

.wa{
  position:fixed;right:22px;bottom:22px;z-index:60;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 8px 26px rgba(0,0,0,.26);
  transition:transform .22s var(--ease);
}
.wa:hover{transform:scale(1.09)}
.wa svg{width:30px;height:30px;fill:#fff}

.mobar{
  position:fixed;left:0;right:0;bottom:0;z-index:65;display:none;
  grid-template-columns:repeat(3,1fr);background:var(--nacht);
  border-top:1px solid rgba(255,255,255,.13);
}
.mobar{padding-bottom:env(safe-area-inset-bottom,0px)}
.mobar a{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 6px;color:#D2DEE8;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
}
.mobar a:nth-child(3){background:var(--blau);color:#fff}
.mobar svg{width:19px;height:19px;fill:currentColor}

/* Reveal */
.rv{opacity:.001;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.is-da{opacity:1;transform:none}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .nav,.head__cta .btn{display:none}
  .burger{display:block}
  .raster{grid-auto-rows:206px}
  .k-pv{grid-column:span 12;grid-row:span 2}
  .k-smart{grid-column:span 6;grid-row:span 2}
  .k-wallbox,.k-wp{grid-column:span 6}
  .k-neubau,.k-altbau{grid-column:span 6}
  .k-pruef,.k-licht,.k-netz{grid-column:span 12}
  .bews{columns:2}
  .plan__schritte{grid-template-columns:repeat(2,1fr);gap:34px}
  .zahlen{grid-template-columns:repeat(2,1fr)}
  .fuss__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .split,.gebiet,.kontakt{grid-template-columns:1fr}
  .schriftfeld{display:none}
  .quick ul{grid-template-columns:repeat(2,1fr)}
  .quick li:nth-child(2){border-right:0}
  .quick li:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.13)}
  .hero__in{padding-bottom:180px;min-height:560px}
  .leist2{grid-template-columns:1fr}
}
@media (max-width:660px){
  body{font-size:16px}
  .mobar{display:grid}
  /* Die Aktionsleiste unten hat WhatsApp bereits, der schwebende
     Knopf waere doppelt und legt sich ueber den letzten Button. */
  .wa{display:none}
  .fuss{padding-bottom:86px}
  .raster{grid-auto-rows:200px;gap:10px}
  .k-pv,.k-smart,.k-wallbox,.k-wp,.k-neubau,.k-altbau,.k-pruef,.k-licht,.k-netz{grid-column:span 12;grid-row:span 1}
  .kachel__in p{opacity:1;transform:none}
  .bews{columns:1}
  .plan__schritte{grid-template-columns:1fr;gap:0}
  .plan{margin-top:44px}
  .plan__schiene{display:none}
  .schritt{padding:22px 0 22px 34px;border-left:2px solid rgba(255,255,255,.16);position:relative}
  .schritt::before{content:"";position:absolute;left:-8px;top:26px;width:14px;height:14px;border:2px solid var(--blau);background:var(--nacht)}
  .zahlen{grid-template-columns:1fr;margin-top:56px}
  .formular{grid-template-columns:1fr}
  .rechner__feld{grid-template-columns:1fr}
  .fuss__grid{grid-template-columns:1fr;gap:30px}
  .score{gap:18px}
}

/* ============================================================
   FEINSCHLIFF
   ============================================================ */

/* Feines Planraster auf den hellen Sektionen */
#leistungen::before,.sonne::before,.gebietsek::before,.faqsek::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(12,44,74,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(12,44,74,.045) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 82% 66% at 50% 45%,#000 22%,transparent 100%);
  mask-image:radial-gradient(ellipse 82% 66% at 50% 45%,#000 22%,transparent 100%);
}
#leistungen>.wrap,.sonne>.wrap,.gebietsek>.wrap,.faqsek>.wrap{position:relative;z-index:2}

/* ── Kette: Nummern glimmen beim Hover ───────────────────── */
.kette li{transition:background .3s var(--ease)}
.kette li::before{transition:color .3s,border-color .3s,background .3s,box-shadow .35s,transform .3s var(--ease)}
.kette li::after{transition:background .3s}
.kette li:hover{background:linear-gradient(90deg,rgba(10,111,194,.09),transparent 62%)}
.kette li:hover b{color:var(--blau)}
.kette li:hover::before{
  color:#fff;border-color:var(--blau-hell);
  background:linear-gradient(145deg,var(--blau),var(--blau-hell));
  transform:scale(1.09);animation:glimm 1.9s ease-in-out infinite;
}
.kette li:hover::after{background:repeating-linear-gradient(180deg,var(--blau-hell) 0 4px,transparent 4px 9px)}
@keyframes glimm{
  0%,100%{box-shadow:0 0 0 5px rgba(10,111,194,.11),0 0 20px rgba(61,155,233,.5)}
  50%{box-shadow:0 0 0 8px rgba(10,111,194,.16),0 0 40px rgba(61,155,233,1)}
}

/* ── Solarrechner ─────────────────────────────────────────── */
.sonne{background:#E8F2FB;overflow:hidden;border-block:1px solid rgba(10,111,194,.22)}
.sonne__glut{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 80% 6%,rgba(61,155,233,.42),rgba(61,155,233,.1) 34%,transparent 62%);
}
.kurve{margin:38px 0 0;padding:0}
.kurve figcaption{margin-bottom:14px}
.kurve svg{width:100%;height:auto;overflow:visible;max-width:520px}
.kurve__linie{stroke-dasharray:820;stroke-dashoffset:820;transition:stroke-dashoffset 2.6s var(--ease) .2s}
.rv.is-da .kurve__linie{stroke-dashoffset:0}
.kurve__flaeche,.kurve__last,.kurve__sonne{opacity:.001;transition:opacity 1s 1.5s}
.rv.is-da .kurve__flaeche,.rv.is-da .kurve__last{opacity:1}
.rv.is-da .kurve__last{opacity:.45}
.rv.is-da .kurve__sonne{opacity:1}

.rechner2{
  position:relative;padding:clamp(26px,3.4vw,42px);border-radius:3px;
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 26px 64px rgba(12,44,74,.13),inset 0 1px 0 rgba(255,255,255,.95);
}
.rechner2::after{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--blau),var(--blau))}
.rechner2__tag{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;
  padding:8px 14px;border:1px solid rgba(10,111,194,.38);background:rgba(10,111,194,.09);
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#12588F;
}
.rechner2__tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blau);flex:none}
.rechner2__feld{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin:0 0 26px}
.rechner2__schritte{list-style:none;counter-reset:rs;margin:0 0 28px;padding:0;display:grid;gap:15px}
.rechner2__schritte li{
  counter-increment:rs;position:relative;padding:0 0 0 46px;min-height:32px;
}
.rechner2__schritte li::before{
  content:counter(rs);position:absolute;left:0;top:0;
  width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(10,111,194,.42);background:rgba(10,111,194,.10);
  font-family:var(--mono);font-size:12px;color:#12588F;
}
.rechner2__schritte li::after{
  content:"";position:absolute;left:15.5px;top:38px;bottom:-15px;width:1px;background:rgba(10,111,194,.26);
}
.rechner2__schritte li:last-child::after{display:none}
.rechner2__schritte b{
  display:block;font-family:var(--disp);font-weight:700;font-size:1.12rem;
  letter-spacing:.005em;color:var(--nacht);line-height:1.2;margin:4px 0 3px;
}
.rechner2__schritte span{display:block;font-size:.92rem;line-height:1.6;color:var(--stahl)}
.rechner2__hinweis{
  font-family:var(--mono);font-size:11.5px;color:var(--stahl);line-height:1.75;
  border-top:1px solid var(--linie);padding-top:17px;margin:24px 0 0;
}
.rechner2__hinweis b{color:var(--nacht)}

/* ── Bewertungen: Glas über weichem Feld ──────────────────── */
.bewsek{overflow:hidden;background:var(--nacht);color:#fff}
.bewsek__feld{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 14% 12%,rgba(10,111,194,.16),transparent 46%),
    radial-gradient(circle at 88% 82%,rgba(10,111,194,.16),transparent 48%);
}
.bewsek__feld::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 84% 68% at 50% 45%,#000 20%,transparent 100%);
  mask-image:radial-gradient(ellipse 84% 68% at 50% 45%,#000 20%,transparent 100%);
}
.bewsek .eyebrow{color:#8FA3B5}
.bewsek>.wrap{position:relative;z-index:2}
.bewsek__kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:46px}

.glas{
  position:relative;border-radius:4px;
  background:rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 44px rgba(0,0,0,.28);
}
.glas::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(158deg,rgba(255,255,255,.13),rgba(255,255,255,0) 46%);
}
.glas::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
}

.score2{display:inline-flex;align-items:center;gap:22px;padding:18px 28px}
.score2__zahl{font-family:var(--disp);font-weight:800;font-size:clamp(2.9rem,5vw,3.9rem);line-height:.82;letter-spacing:-.01em}
.score2__rechts{display:flex;flex-direction:column;gap:8px}
.score2__meta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8FA3B5}

.slider{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:none;
  scrollbar-width:none;-ms-overflow-style:none;padding:6px 2px 12px;
}
.slider::-webkit-scrollbar{display:none}
.slider:focus-visible{outline:3px solid var(--blau);outline-offset:6px}
.bew2{
  flex:0 0 clamp(280px,31vw,394px);scroll-snap-align:start;
  padding:26px 28px;display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.bew2:hover{transform:translateY(-4px);background:rgba(255,255,255,.085);box-shadow:0 26px 60px rgba(0,0,0,.4)}
.bew2 .sterne{margin-bottom:15px;position:relative;z-index:1}
.bew2 .sterne svg{width:16px;height:16px}
.bew2 p{margin:0 0 20px;font-size:.95rem;color:#C4CAD2;line-height:1.68;flex:1;position:relative;z-index:1}
.bew2__wer{display:flex;align-items:center;gap:12px;border-top:1px solid rgba(255,255,255,.13);padding-top:16px;position:relative;z-index:1}
.bew2__ini{width:37px;height:37px;flex:none;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;font-family:var(--disp);font-weight:700;font-size:.95rem}
.bew2__name{font-weight:600;font-size:.93rem;color:#fff}
.bew2__q{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#7E93A6;text-transform:uppercase}

.steuer{display:flex;align-items:center;justify-content:space-between;gap:26px;margin-top:26px}
.steuer__hinweis{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#72879A;margin:0}
.steuer__btns{display:flex;gap:11px}
.steuer__btns button{
  width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:grid;place-items:center;color:#fff;
  transition:background .22s,border-color .22s,color .22s,transform .22s var(--ease);
}
.steuer__btns button:hover{background:var(--blau);border-color:var(--blau);color:#fff;transform:translateY(-2px)}
.steuer__btns svg{width:19px;height:19px;fill:currentColor}
.slider{cursor:grab}
.slider.is-griff{cursor:grabbing;scroll-snap-type:none}

/* ── Einsatzgebiet: Radar ─────────────────────────────────── */
.gebietsek{background:#fff;overflow:hidden}
.gebiet2{display:grid;grid-template-columns:1fr 1.04fr;gap:clamp(36px,6vw,76px);align-items:center}
.band-gruppe{margin-top:28px}
.band-gruppe__tag{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--stahl);margin:0 0 12px}
.ring{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--blau);flex:none}
.ring--2{opacity:.7}.ring--3{opacity:.45}
.orte2{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.orte2 li{
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  border:1px solid var(--linie);padding:7px 13px;background:var(--papier);
  transition:border-color .22s,color .22s,background .22s,box-shadow .22s,transform .22s var(--ease);
}
.orte2 li:hover,.orte2 li:focus,.orte2 li.is-hell{
  border-color:var(--blau);color:var(--blau);background:#fff;
  box-shadow:0 5px 16px rgba(10,111,194,.15);transform:translateY(-1px);outline:none;
}
.radar{position:relative;padding:24px}
.radar svg{width:100%;height:auto;overflow:visible;position:relative;z-index:1}
.radar__eck{position:absolute;width:15px;height:15px;border:1px solid rgba(12,44,74,.24)}
.radar__eck--lo{top:0;left:0;border-right:0;border-bottom:0}
.radar__eck--ro{top:0;right:0;border-left:0;border-bottom:0}
.radar__eck--lu{bottom:0;left:0;border-right:0;border-top:0}
.radar__eck--ru{bottom:0;right:0;border-left:0;border-top:0}
.wellen circle{transform-origin:220px 220px;opacity:0;animation:welle 5.4s ease-out infinite}
.wellen circle:nth-child(2){animation-delay:1.8s}
.wellen circle:nth-child(3){animation-delay:3.6s}
@keyframes welle{0%{transform:scale(.34);opacity:.5}70%{opacity:.1}100%{transform:scale(3.12);opacity:0}}
.ortpunkte .opkt line{stroke:rgba(12,44,74,.15);stroke-width:1;transition:stroke .25s}
.ortpunkte .opkt circle{fill:#7E93A6;transition:fill .25s,r .25s}
.ortpunkte .opkt text{transition:fill .25s}
.ortpunkte .opkt.is-hell line{stroke:var(--blau);stroke-width:1.4}
.ortpunkte .opkt.is-hell circle{fill:var(--blau);r:6}
.ortpunkte .opkt.is-hell text{fill:var(--blau)}
.opkt--sitz circle:first-child{transition:fill .25s}
.opkt--sitz.is-hell circle:first-child{fill:rgba(228,38,24,.3)}

/* ── FAQ zweispaltig ──────────────────────────────────────── */
.faqsek{background:var(--papier);overflow:hidden}
.faq2{display:grid;grid-template-columns:.74fr 1.26fr;gap:clamp(34px,6vw,78px);align-items:start}
.faq2__seite{position:sticky;top:132px}
.faq2__liste details{border-top:1px solid var(--linie)}
.faq2__liste details:last-child{border-bottom:1px solid var(--linie)}
.faq2 summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:18px;padding:25px 0;
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.06rem,1.6vw,1.32rem);letter-spacing:.02em;transition:color .2s;
}
.faq2 summary::-webkit-details-marker{display:none}
.faq2 summary:hover{color:var(--blau)}
.faq2 summary>span:nth-child(2){flex:1;line-height:1.16}
.faq2__nr{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--blau);padding-top:5px;flex:none}
.faq2__kreuz{position:relative;width:16px;height:16px;flex:none;margin-top:5px}
.faq2__kreuz::before,.faq2__kreuz::after{content:"";position:absolute;background:var(--blau);transition:transform .3s var(--ease),opacity .3s}
.faq2__kreuz::before{left:0;top:7px;width:16px;height:2px}
.faq2__kreuz::after{left:7px;top:0;width:2px;height:16px}
.faq2 details[open] .faq2__kreuz::after{transform:rotate(90deg);opacity:0}
.faq2__a{padding:0 0 28px 42px;position:relative}
.faq2__a::before{content:"";position:absolute;left:16px;top:2px;bottom:28px;width:2px;background:linear-gradient(180deg,var(--blau),rgba(10,111,194,0))}
.faq2__a p{margin:0;color:#42576D;max-width:64ch}
.faq2 details[open] .faq2__a{animation:aufklappen .38s var(--ease)}
@keyframes aufklappen{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* ── Responsive für die neuen Bausteine ───────────────────── */
@media (max-width:1080px){
  .gebiet2,.faq2{grid-template-columns:1fr}
  .faq2__seite{position:static}
  .radar{max-width:520px;margin-inline:auto;width:100%}
  .kurve svg{max-width:100%}
}
@media (max-width:660px){
  .rechner2__feld{grid-template-columns:1fr}
  .bew2{flex:0 0 84vw}
  .steuer{gap:16px;margin-top:22px}
  .steuer__btns button{width:44px;height:44px}
  .score2{width:100%;justify-content:flex-start}
  .bewsek__kopf{margin-bottom:30px}
  .faq2 summary{gap:13px;padding:21px 0}
  .faq2__a{padding-left:30px}
  .faq2__a::before{left:10px}
  .logo img{height:58px}
  .head.is-fest .logo img{height:48px}
  .quick{display:none}
  /* Hero-Feinschliff siehe Block "SCHMALE GERAETE" am Ende */
  .opkt--sitz.is-hell circle:first-child{fill:rgba(228,38,24,.3)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .plan__strom{width:100%}
  .wellen circle{animation:none;opacity:0}
  .kurve__linie{stroke-dashoffset:0}
  .kurve__flaeche,.kurve__last,.kurve__sonne{opacity:1}
}

/* ============================================================
   UNTERSEITEN
   ============================================================ */
.krume{background:var(--papier);border-bottom:1px solid var(--linie)}
.krume ol{display:flex;flex-wrap:wrap;align-items:center;gap:9px;list-style:none;margin:0;padding:13px 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--stahl)}
.krume a:hover{color:var(--blau)}
.krume li+li::before{content:"›";margin-right:9px;color:var(--blau)}
.krume [aria-current]{color:var(--nacht)}

.shero{position:relative;background:var(--nacht);color:#fff;overflow:hidden}
.shero__bg{position:absolute;inset:0}
.shero__bg img{width:100%;height:100%;object-fit:cover}
.shero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,32,55,.94) 0%,rgba(8,32,55,.78) 40%,rgba(8,32,55,.42) 100%),
             linear-gradient(0deg,rgba(8,32,55,.7),transparent 55%)}
.shero__in{position:relative;z-index:2;min-height:440px;padding-block:clamp(64px,9vw,110px);
  display:flex;flex-direction:column;justify-content:center}
.shero .h1{font-size:clamp(2.5rem,5.6vw,4.4rem)}
.shero__sub{max-width:58ch;margin:22px 0 30px;color:#C0D0DE;font-size:clamp(1rem,1.25vw,1.14rem)}
.shero__btns{display:flex;gap:14px;flex-wrap:wrap}
.shero__marken{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 0;padding:0;list-style:none}
.shero__marken li{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#D3D8DE;border:1px solid rgba(255,255,255,.24);padding:7px 13px}

.umfang{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:44px;background:var(--linie)}
.umfang article{background:var(--papier);padding:30px 28px;transition:background .25s,transform .25s var(--ease)}
.umfang article:hover{background:#fff;transform:translateY(-2px)}
.umfang__nr{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--blau);display:block;margin-bottom:16px}
.umfang .h3{margin-bottom:9px}
.umfang p{margin:0;font-size:.94rem;color:#42576D}

.fakten{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:40px;background:rgba(10,111,194,.24)}
.fakt{background:#E8F2FB;padding:26px 24px}
.fakt b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:.94;color:var(--nacht)}
.fakt span{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#1E6299}

.bildblock{position:relative;border-radius:3px;overflow:hidden}
.bildblock img{width:100%;height:100%;object-fit:cover;display:block}
.bildblock figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 22px;color:#fff;
  background:linear-gradient(0deg,rgba(8,32,55,.9),transparent);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

@media (max-width:1080px){ .umfang{grid-template-columns:repeat(2,1fr)} }
@media (max-width:660px){
  .umfang,.fakten{grid-template-columns:1fr}
  .shero__in{min-height:340px}
}

/* ============================================================
   ZITAT · ENERGIEFLUSS · PRUEFFRISTEN
   ============================================================ */
.zitat{background:#fff;border-block:1px solid var(--linie);padding-block:clamp(52px,6.5vw,86px)}
.zitat blockquote{margin:0;display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,38px);align-items:start;max-width:1000px}
.zitat__marke{font-family:var(--disp);font-weight:800;font-size:clamp(4rem,8vw,6.5rem);line-height:.6;color:var(--blau);opacity:.5;user-select:none}
.zitat p{margin:0 0 20px;font-family:var(--disp);font-weight:600;text-transform:none;
  font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.24;letter-spacing:.005em;color:var(--nacht);text-wrap:balance}
.zitat footer{display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--stahl)}
.zitat footer .sterne svg{width:14px;height:14px}
.zitat footer b{color:var(--nacht);font-weight:600}

.fluss{position:relative}
.fluss svg{width:100%;height:auto;overflow:visible;max-width:460px;margin-inline:auto;display:block}
.fluss__basis{stroke:rgba(255,255,255,.14);stroke-width:2}
.fluss__leiter{stroke:var(--blau-hell);stroke-width:2.4;stroke-dasharray:6 12;stroke-linecap:round;
  animation:fliessen 1.5s linear infinite;filter:drop-shadow(0 0 5px rgba(61,155,233,.75))}
.fluss__leiter--rein{animation-direction:reverse}
.fluss__leiter--matt{stroke:rgba(61,155,233,.42);filter:none;animation-duration:2.6s}
@keyframes fliessen{to{stroke-dashoffset:-18}}
.fluss__knoten circle{fill:var(--nacht-3);stroke:rgba(255,255,255,.2);stroke-width:1.4}
.fluss__knoten path,.fluss__knoten rect,.fluss__knoten line{stroke:#E9EFF5;stroke-width:1.6;fill:none;stroke-linecap:round}
.fluss__marke{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;fill:#8FA3B5}
.fluss__herz circle{fill:rgba(10,111,194,.12);stroke:rgba(10,111,194,.5);stroke-width:1.6}
.fluss__herz text{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:1px;fill:#fff}
.fluss__puls{fill:none;stroke:rgba(10,111,194,.45);stroke-width:1.4;transform-origin:220px 220px;
  animation:herzschlag 3.4s ease-out infinite}
@keyframes herzschlag{0%{transform:scale(.9);opacity:.7}70%{opacity:.06}100%{transform:scale(1.75);opacity:0}}
.fluss__stand rect{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.2}
.fluss__stand .fuell{fill:var(--blau);stroke:none;animation:laden 5s ease-in-out infinite}
@keyframes laden{0%,100%{height:6px;y:236px}50%{height:22px;y:220px}}

.fristen{margin-top:38px;border-top:1px solid var(--linie)}
.fristen div{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--linie)}
.fristen dt{margin:0;font-size:.97rem;color:#33475C}
.fristen dd{margin:0;font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:1.1rem;letter-spacing:.02em;color:var(--rot);white-space:nowrap}
.fristen__fuss{margin:18px 0 0;font-family:var(--mono);font-size:11.5px;line-height:1.75;color:var(--stahl)}

@media (max-width:660px){
  .zitat blockquote{grid-template-columns:1fr;gap:6px}
  .zitat__marke{font-size:3.4rem}
  .schriftfeld div{grid-template-columns:112px 1fr}
}

#speicher .zahlen{grid-template-columns:repeat(3,1fr);margin-top:36px}
@media (max-width:660px){#speicher .zahlen{grid-template-columns:1fr}}

/* ============================================================
   KLAPPMENUE "LEISTUNGEN"
   ============================================================ */
.nav__punkt{position:relative}
.nav__knopf{
  background:none;border:0;padding:7px 0;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:1.02rem;letter-spacing:.03em;color:#24384C;position:relative;
}
.nav__knopf::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--blau);transition:width .24s var(--ease)}
.nav__punkt:hover .nav__knopf::after,.nav__punkt:focus-within .nav__knopf::after{width:100%}
.nav__knopf svg{width:10px;height:10px;fill:var(--blau);flex:none;transition:transform .25s var(--ease)}
.nav__punkt:hover .nav__knopf svg,.nav__punkt:focus-within .nav__knopf svg,.nav__knopf[aria-expanded="true"] svg{transform:rotate(180deg)}

.klapp{
  position:absolute;top:calc(100% + 15px);left:-20px;width:900px;z-index:80;
  background:#fff;border:1px solid var(--linie);box-shadow:0 28px 74px rgba(12,44,74,.18);
  opacity:0;visibility:hidden;transform:translateY(-9px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.klapp::before{content:"";position:absolute;left:0;right:0;top:-15px;height:15px}
.klapp::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--blau),var(--blau))}
.nav__punkt:hover .klapp,.nav__punkt:focus-within .klapp,.klapp.is-auf{opacity:1;visibility:visible;transform:none}
.klapp__in{display:grid;grid-template-columns:repeat(3,1fr)}
.klapp__gruppe{padding:26px 26px 20px}
.klapp__gruppe+.klapp__gruppe{border-left:1px solid var(--linie)}
.klapp__tag{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--stahl);
}
.klapp__tag::before{content:"";width:16px;height:2px;background:var(--blau);flex:none}
.klapp__gruppe a{display:block;padding:9px 12px;margin-inline:-12px;border-radius:2px;transition:background .18s}
.klapp__gruppe a:hover{background:var(--papier)}
.klapp__gruppe a b{display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:1rem;letter-spacing:.02em;transition:color .18s}
.klapp__gruppe a span{display:block;font-size:.82rem;color:#64798C;line-height:1.5}
.klapp__gruppe a:hover b{color:var(--blau)}
.klapp__fuss{
  grid-column:1/-1;border-top:1px solid var(--linie);background:var(--papier);
  display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 26px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.klapp__fuss a{transition:color .18s}
.klapp__fuss a:hover{color:var(--blau)}
.klapp__not{color:var(--rot);display:inline-flex;align-items:center;gap:8px}
.klapp__not::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rot);animation:puls 2.4s infinite}

/* Untermenue im Mobilmenue */

@media (max-width:1320px){ .klapp{width:660px;left:-16px} .klapp__in{grid-template-columns:1fr 1fr} }

/* ============================================================
   REFERENZEN
   ============================================================ */
.filter{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 38px;padding:0;list-style:none}
.filter button{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--linie);background:#fff;color:var(--stahl);padding:10px 16px;border-radius:2px;
  transition:border-color .2s,color .2s,background .2s;
}
.filter button:hover{border-color:var(--nacht);color:var(--nacht)}
.filter button[aria-pressed="true"]{background:var(--nacht);border-color:var(--nacht);color:#fff}

.projekte{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.projekt{
  background:#fff;border:1px solid var(--linie);border-radius:2px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .28s var(--ease),box-shadow .28s;
}
.projekt:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(12,44,74,.10)}
.projekt[hidden]{display:none}
.projekt__bild{position:relative;aspect-ratio:4/3;background:var(--nacht-2);overflow:hidden}
.projekt__bild img{width:100%;height:100%;object-fit:cover}
.projekt__leer{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
  background-color:var(--nacht-2);
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:26px 26px;
}
.projekt__leer::after{
  content:"";position:absolute;inset:14px;border:1px dashed rgba(255,255,255,.22);pointer-events:none;
}
.projekt__leer svg{width:38px;height:38px;stroke:var(--blau);fill:none;stroke-width:1.4;opacity:.9}
.projekt__leer span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#7E93A6;
}
.projekt__text{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.projekt__meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 13px;padding:0;list-style:none}
.projekt__meta li{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--linie);padding:5px 9px;color:var(--stahl);
}
.projekt__meta li:first-child{border-color:rgba(10,111,194,.45);color:#12588F}
.projekt__text p.projekt__was{margin:0 0 18px;font-size:.93rem;color:#42576D;flex:1}
.projekt__stimme{
  margin:0;padding-top:15px;border-top:1px solid var(--linie);
  font-size:.9rem;color:#33475C;line-height:1.6;
}
.projekt__stimme b{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--stahl);font-weight:500}

.hinweisblock{
  margin-top:44px;border:1px dashed rgba(10,111,194,.5);background:rgba(10,111,194,.06);
  padding:26px 28px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
}
.hinweisblock svg{width:26px;height:26px;stroke:var(--blau);fill:none;stroke-width:1.5}
.hinweisblock h3{margin:0 0 8px}
.hinweisblock p{margin:0;color:#42576D;max-width:70ch;font-size:.95rem}

@media (max-width:1080px){ .projekte{grid-template-columns:repeat(2,1fr)} }
@media (max-width:660px){
  .projekte{grid-template-columns:1fr}
  .hinweisblock{grid-template-columns:1fr;gap:12px}
}

/* ============================================================
   VERGLEICH · PREISBAND
   ============================================================ */
.vergleich{margin-top:40px;border-top:2px solid var(--nacht)}
.vergleich__zeile{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--linie);align-items:center}
.vergleich__kopf{border-bottom:1px solid var(--linie);padding-bottom:12px}
.vergleich__kopf span{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--stahl)}
.vergleich__kopf span:nth-child(2){color:var(--blau)}
.vergleich dt,.vergleich__zeile>span:first-child{margin:0;font-size:.95rem;color:#33475C}
.vergleich__wert{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:1rem;letter-spacing:.02em}
.vergleich__wert--ja{color:var(--blau)}
.vergleich__wert--nein{color:var(--stahl)}

.preisband{margin-top:36px}
.preisband svg{width:100%;height:auto;overflow:visible}
.preisband__balken{transform-origin:bottom;transform:scaleY(.02);transition:transform .9s var(--ease)}
.rv.is-da .preisband__balken{transform:scaleY(1)}
.legende{display:flex;flex-wrap:wrap;gap:20px;margin:20px 0 0;padding:0;list-style:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--stahl)}
.legende li{display:flex;align-items:center;gap:9px}
.legende i{width:13px;height:13px;flex:none;display:block}
.legende .g-guenstig{background:var(--blau)}
.legende .g-mittel{background:#7E93A6}
.legende .g-teuer{background:var(--rot)}

@media (max-width:660px){
  .vergleich__zeile{grid-template-columns:1fr;gap:6px;padding:14px 0}
  .vergleich__kopf{display:none}
  .vergleich__wert::before{content:attr(data-was) ": ";font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--stahl)}
}

.klapp__gruppe:nth-child(3){border-left:1px solid var(--linie)}
@media (max-width:1320px){.klapp__gruppe:nth-child(3){border-left:0;border-top:1px solid var(--linie);grid-column:1/-1}}

/* ============================================================
   SAMMELSEITEN · PLATZHALTER
   ============================================================ */
.themen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.thema{
  background:#fff;border:1px solid var(--linie);border-radius:2px;padding:28px 26px 26px;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s,border-color .28s;
}
.thema::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--blau);transition:width .4s var(--ease)}
.thema:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(12,44,74,.10);border-color:rgba(12,44,74,.2)}
.thema:hover::after{width:100%}
.thema__zeichen{width:46px;height:46px;margin-bottom:20px}
.thema__zeichen svg{width:100%;height:100%;stroke:var(--blau);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .28s}
.thema:hover .thema__zeichen svg{stroke:var(--blau)}
.thema .h3{margin-bottom:10px}
.thema p{margin:0 0 16px;font-size:.94rem;color:#42576D;flex:1}
.thema__mehr{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stahl)}
.thema__mehr b{color:var(--nacht);font-weight:500}

.luecke{
  display:inline;font-family:var(--mono);font-size:.82em;letter-spacing:.06em;
  color:#12588F;background:rgba(10,111,194,.1);
  border:1px dashed rgba(10,111,194,.55);border-radius:2px;
  padding:1px 8px;max-width:100%;
  white-space:normal;overflow-wrap:anywhere;word-break:break-word;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.luecke--block{display:block;margin:4px 0;padding:9px 12px;line-height:1.6}
.recht li>.luecke--block{margin-top:0}
.sec--dark .luecke,.shero .luecke{color:var(--blau-hell);background:rgba(61,155,233,.13);border-color:rgba(61,155,233,.5)}

.koepfe{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.kopfkarte{background:#fff;border:1px solid var(--linie);border-radius:2px;overflow:hidden}
.kopfkarte__bild{position:relative;aspect-ratio:4/5;background:var(--nacht-2)}
.kopfkarte__leer{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background-color:var(--nacht-2);
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:24px 24px;
}
.kopfkarte__leer::after{content:"";position:absolute;inset:13px;border:1px dashed rgba(255,255,255,.22)}
.kopfkarte__leer svg{width:34px;height:34px;stroke:var(--blau);fill:none;stroke-width:1.4}
.kopfkarte__leer span{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#7E93A6}
.kopfkarte__text{padding:20px 22px 22px}
.kopfkarte__text .h3{margin-bottom:5px}
.kopfkarte__text p{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--stahl)}

@media (max-width:1080px){ .themen,.koepfe{grid-template-columns:repeat(2,1fr)} }
@media (max-width:660px){ .themen,.koepfe{grid-template-columns:1fr} }

/* ============================================================
   ZWEITES KLAPPMENUE · KETTE AUF DUNKEL · PRUEFKREISLAUF
   ============================================================ */
.klapp--klein{width:330px}
.klapp--klein .klapp__in{grid-template-columns:1fr}
.klapp--klein .klapp__gruppe+.klapp__gruppe{border-left:0}
@media (max-width:1320px){ .klapp--klein{width:330px} .klapp--klein .klapp__in{grid-template-columns:1fr} }

.sec--dark .kette li{border-bottom-color:rgba(255,255,255,.12)}
.sec--dark .kette span{color:#98ACBD}
.sec--dark .kette b{color:#fff}
.sec--dark .kette li:hover{background:linear-gradient(90deg,rgba(10,111,194,.16),transparent 62%)}
.sec--dark .kette li:hover b{color:var(--blau-hell)}

.zyklus{position:relative}
.zyklus svg{width:100%;height:auto;overflow:visible;max-width:430px;margin-inline:auto;display:block}
.zyklus__spur{fill:none;stroke:rgba(255,255,255,.15);stroke-width:2}
.zyklus__bogen{
  fill:none;stroke:var(--blau);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:942;stroke-dashoffset:942;transition:stroke-dashoffset 2.6s var(--ease) .2s;
  filter:drop-shadow(0 0 6px rgba(10,111,194,.55));
}
.rv.is-da .zyklus__bogen{stroke-dashoffset:0}
.zyklus__halt circle{fill:var(--nacht-3);stroke:rgba(255,255,255,.24);stroke-width:1.5;transition:stroke .3s,fill .3s}
.zyklus__halt text.nr{font-family:var(--mono);font-size:12px;letter-spacing:1px;fill:var(--blau-hell)}
.zyklus__halt text.tx{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.8px;fill:#E6EDF4;text-transform:uppercase}
.zyklus__halt:hover circle{stroke:var(--blau);fill:rgba(10,111,194,.14)}
.zyklus__mitte text{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:1.4px;fill:#fff;text-transform:uppercase}
.zyklus__mitte tspan{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:2px;fill:#8397A9}
.zyklus__puls{fill:none;stroke:rgba(10,111,194,.45);stroke-width:1.5;transform-origin:210px 210px;animation:herzschlag 4s ease-out infinite}
.zyklus__laeufer{fill:var(--blau)}

.gwliste{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:0}
.gwliste li{position:relative;padding:16px 0 16px 26px;border-bottom:1px solid rgba(255,255,255,.12)}
.gwliste li:last-child{border-bottom:0}
.gwliste li::before{content:"";position:absolute;left:0;top:23px;width:12px;height:2px;background:var(--blau)}
.gwliste b{display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:1.08rem;letter-spacing:.02em}
.gwliste span{font-size:.9rem;color:#98ACBD}

@media (max-width:660px){ .zyklus svg{max-width:100%} }
.fuss__logo{display:inline-block;margin-bottom:18px}
.fuss__logo img{height:64px;width:auto}
@media (max-width:660px){ .fuss__logo img{height:56px} }

/* ============================================================
   RECHTSSEITEN
   ============================================================ */
.recht{max-width:820px}
.recht h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(1.3rem,2.2vw,1.7rem);
  letter-spacing:.02em;margin:44px 0 14px;padding-top:22px;border-top:1px solid var(--linie)}
.recht h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.recht h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:1.06rem;letter-spacing:.02em;margin:26px 0 8px}
.recht p{margin:0 0 14px;color:#33475C}
.recht ul{margin:0 0 16px;padding-left:0;list-style:none}
.recht ul li{position:relative;padding-left:22px;margin-bottom:8px;color:#33475C}
.recht ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--blau)}
.recht a{border-bottom:1px solid var(--linie)}
.recht a:hover{color:var(--blau);border-color:var(--blau)}
.recht dl{margin:0 0 18px;display:grid;grid-template-columns:auto 1fr;gap:6px 22px}
.recht dt{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--stahl);padding-top:4px}
.recht dd{margin:0;color:#33475C}
.recht__stand{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--stahl);
  border-top:1px solid var(--linie);padding-top:18px;margin-top:44px}
.rechtkopf{background:var(--nacht);color:#fff;padding-block:clamp(46px,6vw,78px);position:relative;overflow:hidden}
.rechtkopf::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 25%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 25%,transparent 100%)}
.rechtkopf .wrap{position:relative;z-index:2}
.rechtkopf .h1{font-size:clamp(2.2rem,4.6vw,3.4rem)}
.rechtkopf p{margin:16px 0 0;color:#B0C2D2;max-width:60ch}
@media (max-width:660px){ .recht dl{grid-template-columns:1fr;gap:2px 0} .recht dd{margin-bottom:12px} }

/* ============================================================
   SCHUTZ VOR SEITLICHEM UEBERLAUF
   Nichts darf breiter werden als das Sichtfenster. Sonst laesst
   sich die Seite seitlich schieben und feste Elemente wie das
   Mobilmenue wandern mit.
   ============================================================ */
img,svg,video,iframe,table,pre{max-width:100%}
.wrap>*{min-width:0}
.split>*,.themen>*,.umfang>*,.koepfe>*,.projekte>*{min-width:0}

/* ============================================================
   SCHMALE GERAETE
   Auf einem iPhone 12 Pro stehen nach Adressleiste und
   Aktionsleiste nur rund 560 Pixel Hoehe zur Verfuegung.
   Darauf ist alles hier ausgerichtet: kleinere Schrift,
   weniger Abstand, und keine feste Hoehe mehr, damit unten
   nichts abgeschnitten wird.
   ============================================================ */
@media (max-width:680px){
  .head .wrap{padding-block:10px}
  .logo img{height:52px}
  .head.is-fest .logo img{height:44px}

  .h1{font-size:clamp(1.9rem,8.4vw,2.7rem);line-height:.94}
  .h2{font-size:clamp(1.55rem,6.6vw,2.2rem);line-height:1}
  .h3{font-size:1.12rem}
  .eyebrow{font-size:10px;letter-spacing:.13em;margin-bottom:14px;gap:10px}
  .eyebrow::before{width:20px}
  .lead{font-size:.97rem;line-height:1.62;margin-bottom:20px}
  .btn{font-size:1rem;padding:13px 20px}

  /* Startseiten-Hero */
  .hero__in{
    height:auto;max-height:none;
    min-height:calc(100svh - var(--kopf,84px));
    padding-top:34px;
    padding-bottom:calc(var(--mobar,64px) + 10px);
  }
  /* So gross wie moeglich: die laengste Zeile fuellt die Breite aus.
     Damit rutscht "Werktagen." von selbst in die dritte Zeile. */
  .hero .h1{font-size:clamp(2.2rem,12.2vw,3.4rem);line-height:.9;text-wrap:normal;letter-spacing:-.01em}
  .hero .h1 em{display:inline}
  .hero__sub{font-size:.91rem;line-height:1.52;margin:16px 0 20px;max-width:none}
  .hero .eyebrow{margin-bottom:9px;font-size:9px;letter-spacing:.07em;gap:8px}
  .hero .eyebrow::before{width:16px}
  .hero__btns{gap:10px}
  .hero__btns .btn{width:100%;justify-content:center}

  /* Unterseiten-Kopf */
  .shero__in{
    min-height:0;
    padding-top:38px;
    padding-bottom:calc(var(--mobar,64px) + 18px);
  }
  .shero .h1{font-size:clamp(1.95rem,9vw,2.7rem);line-height:.94;text-wrap:normal}
  .shero__sub{font-size:.96rem;line-height:1.6;margin:16px 0 24px}
  .shero__btns{gap:10px}
  .shero__btns .btn{width:100%;justify-content:center}
  .shero__marken{margin-top:22px;gap:7px}
  .shero__marken li{font-size:9.5px;padding:6px 10px;letter-spacing:.1em}

  /* Rechtsseiten-Kopf */
  .rechtkopf{padding-block:34px}
  .rechtkopf .h1{font-size:clamp(1.8rem,7.6vw,2.4rem)}

  /* Letzter Abschnitt darf nicht unter der Aktionsleiste liegen */
  .fuss{padding-bottom:calc(var(--mobar,64px) + 18px)}
}

@media (max-width:400px){
  .hero__sub,.shero__sub{font-size:.92rem}
  .btn{font-size:.95rem;padding:12px 17px}
  .mobar a{font-size:9px;letter-spacing:.08em}
}

/* Nur im echten Querformat die Mindesthoehe aufheben.
   Vorher stand hier 700px, das greift auf jedem iPhone
   im Hochformat und liess den Hero zusammenfallen. */
@media (max-width:900px) and (max-height:460px){
  .hero__in{min-height:0;padding-top:26px}
}

@media (max-width:400px){
  .hero__sub{font-size:.88rem;line-height:1.48;margin:14px 0 18px}
  .hero .btn{padding:12px 16px}
  .hero__in{padding-top:28px}
}

/* Niedrige Hochformat-Displays wie das iPhone 12 Pro: nur Text
   etwas straffen, damit der letzte Button sicher ueber der
   Aktionsleiste bleibt. Die Mindesthoehe bleibt unangetastet. */
@media (max-width:680px) and (max-height:720px){
  .hero .eyebrow{margin-bottom:8px}
  .hero__sub{font-size:.87rem;line-height:1.46;margin:13px 0 17px}
  .hero__btns{gap:9px}
  .hero .btn{padding:12px 18px}
}

/* ── ENTWURFSKENNUNG ──────────────────────────────────────────
   Zeigt an, welcher Build gerade ausgeliefert wird. Vor dem
   Livegang diese Regel und die Zeile im Footer entfernen. */
.fuss__build{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:#64798C;border:1px dashed rgba(255,255,255,.18);
  padding:3px 9px;border-radius:2px;
}
.fuss__build::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blau)}

/* ============================================================
   EINBETTUNG DRITTANBIETER MIT ZWEI-KLICK-LOESUNG
   Der Inhalt wird erst nach ausdruecklicher Zustimmung geladen.
   Vorher geht keine Verbindung zum Anbieter raus.
   ============================================================ */
.extern{
  position:relative;border:1px solid rgba(10,111,194,.28);border-radius:3px;
  background:#fff;overflow:hidden;
}
.extern__sperre{
  padding:clamp(28px,4vw,44px);text-align:center;
  background:
    radial-gradient(circle at 50% 0%,rgba(61,155,233,.1),transparent 60%),
    #fff;
}
.extern__zeichen{width:46px;height:46px;margin:0 auto 18px}
.extern__zeichen svg{width:100%;height:100%;stroke:var(--blau);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.extern__sperre .h3{margin-bottom:10px}
.extern__sperre p{margin:0 auto 20px;max-width:52ch;font-size:.94rem;color:#42576D}
.extern__hinweis{
  margin-top:18px;font-family:var(--mono);font-size:11px;line-height:1.7;
  color:var(--stahl);max-width:60ch;margin-inline:auto;
}
.extern__hinweis a{border-bottom:1px solid var(--linie)}
.extern__hinweis a:hover{color:var(--blau);border-color:var(--blau)}
.extern__rahmen{display:none}
.extern.is-geladen .extern__sperre{display:none}
.extern.is-geladen .extern__rahmen{display:block}
.extern__rahmen iframe{display:block;width:100%;border:0;min-height:320px}
.extern__laeuft{
  padding:40px;text-align:center;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--stahl);
}

/* Ortsliste auf dunklem Grund, etwa im Notdienstbereich */
.sec--dark .orte2 li{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#C0D0DE;
}
.sec--dark .orte2 li:hover{
  background:rgba(255,255,255,.12);border-color:var(--blau-hell);color:#fff;box-shadow:none;
}

/* ============================================================
   KARRIERE
   ============================================================ */
.stellen{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px}
.stelle{
  background:#fff;border:1px solid var(--linie);border-radius:3px;
  padding:26px 28px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s,border-color .28s;
}
.stelle::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--blau);transition:width .4s var(--ease)}
.stelle:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(12,44,74,.1);border-color:rgba(12,44,74,.2)}
.stelle:hover::after{width:100%}
.stelle__kopf{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.stelle__zeichen{flex:none;width:42px;height:42px}
.stelle__zeichen svg{width:100%;height:100%;stroke:var(--blau);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.stelle .h3{margin:0 0 4px}
.stelle__art{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--stahl)}
.stelle p{margin:0 0 16px;font-size:.94rem;color:#42576D;flex:1}
.stelle__punkte{margin:0 0 18px;padding:0;list-style:none;font-size:.9rem;color:#42576D}
.stelle__punkte li{position:relative;padding-left:20px;margin-bottom:6px;line-height:1.5}
.stelle__punkte li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:2px;background:var(--blau)}

.karrierefakten{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:44px;background:var(--linie)}
.karrierefakten div{background:var(--papier);padding:24px 22px}
.karrierefakten b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1;color:var(--nacht)}
.karrierefakten span{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--stahl)}

@media (max-width:900px){ .karrierefakten{grid-template-columns:repeat(2,1fr)} }
@media (max-width:660px){ .stellen{grid-template-columns:1fr} .karrierefakten{grid-template-columns:1fr} }

/* ============================================================
   MOBILER FEINSCHLIFF
   ============================================================ */

/* Karten von Drittanbietern melden ihre Hoehe nicht zurueck.
   Ohne feste Angabe bliebe der Rahmen bei der Mindesthoehe stehen. */
.extern--karte .extern__rahmen iframe{height:460px;min-height:460px}
@media (max-width:660px){
  .extern--karte .extern__rahmen iframe{height:340px;min-height:340px}
}

@media (max-width:660px){
  /* Zweispaltige Wertetabellen untereinander setzen, sonst quetschen
     lange Begriffe die Werte an den Rand. */
  .fristen div{grid-template-columns:1fr;gap:2px;padding:14px 0}
  .fristen dd{font-size:1rem}
  .fristen dt{font-size:.93rem}

  /* Kopfzeilen von Abschnitten brauchen etwas mehr Luft */
  .kopf{gap:20px;margin-bottom:30px}

  /* Aufzaehlungen in Karten nicht zu eng */
  .stelle{padding:22px 22px}
  .stelle__kopf{gap:12px}
  .karrierefakten div{padding:20px 18px}

  /* Consent-Flaeche auf schmalen Displays kompakter */
  .extern__sperre{padding:26px 20px}
  .extern__sperre .btn{width:100%;justify-content:center}
  .extern__hinweis{font-size:10.5px}
}

/* Beruehrflaechen: alles Klickbare mindestens 44 Pixel hoch */
@media (pointer:coarse){
  .nav a,.krume a,.fuss a,.mkarten a,.orte2 li{min-height:44px;display:flex;align-items:center}
  .orte2 li{display:inline-flex}
  .steuer__btns button{width:52px;height:52px}
}

/* Lange Fachwoerter wie "Berufshaftpflichtversicherung" duerfen auf
   schmalen Displays trennen statt ueberzulaufen. Die Sprache steht
   im html-Tag, dadurch trennt der Browser nach deutschen Regeln. */
@media (max-width:520px){
  .h1,.h2,.h3,.recht h2,.recht h3{
    -webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;
  }
  p,li,dd,dt{overflow-wrap:break-word}
}

/* ============================================================
   MEISTERBETRIEB ALS MARKENZEICHEN IM HERO
   Wichtigstes Vertrauensmerkmal, deshalb vor der Ueberschrift
   und deutlich groesser als die uebrigen Auszeichnungen.
   ============================================================ */
.hero__marke{
  /* Der Hero ist ein Flex-Container, deshalb wuerde das Kennzeichen sonst
     auf die volle Breite gezogen und saehe rechts leer aus. */
  display:inline-flex;align-self:flex-start;align-items:center;gap:12px;margin:0 0 18px;
  padding:9px 18px 9px 16px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.28);border-radius:2px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.05rem,2.1vw,1.4rem);letter-spacing:.1em;color:#fff;
}
.hero__marke::before{
  content:"";flex:none;width:22px;height:22px;background:var(--rot);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width:680px){
  .hero__marke{font-size:.98rem;padding:7px 14px 7px 12px;margin-bottom:12px;gap:9px}
  .hero__marke::before{width:18px;height:18px}
}

/* ============================================================
   WERDEGANG ALS ZEITSTRAHL
   ============================================================ */
.weg{position:relative;margin-top:clamp(40px,5vw,64px);padding-left:0}
.weg::before{
  content:"";position:absolute;left:19px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--blau-hell),var(--blau) 35%,rgba(10,111,194,.16));
}
.weg__punkt{position:relative;padding-left:64px;padding-bottom:34px}
.weg__punkt:last-child{padding-bottom:0}
.weg__marke{
  position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--papier);
  border:2px solid var(--blau);color:var(--blau);
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.02em;
}
.weg__punkt--jetzt .weg__marke{background:var(--blau);border-color:var(--blau);color:#fff}
.weg__punkt--jetzt .weg__marke svg{width:19px;height:19px;fill:currentColor}
.weg__jahr{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stahl);margin-bottom:6px;
}
.weg h3{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.1rem,1.8vw,1.3rem);letter-spacing:.02em;margin:0 0 8px;color:var(--nacht);
}
.weg p{margin:0;color:#42576D;font-size:.95rem;line-height:1.62}
.weg__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding:0;list-style:none}
.weg__tags li{
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--blau);background:rgba(10,111,194,.08);
  border:1px solid rgba(10,111,194,.2);border-radius:2px;padding:5px 9px;
}
@media (max-width:660px){
  .weg::before{left:15px}
  .weg__punkt{padding-left:50px;padding-bottom:28px}
  .weg__marke{width:32px;height:32px;font-size:9.5px}
}

/* ============================================================
   TEAMKARTEN OHNE FOTO
   Monogramm statt Platzhalterhinweis: sieht gestaltet aus,
   nicht nach fehlendem Material. Wird durch echte Fotos ersetzt.
   ============================================================ */
.kopfkarte__mono{
  position:relative;width:100%;aspect-ratio:4/5;display:grid;place-items:center;
  background:var(--nacht);overflow:hidden;
}
.kopfkarte__mono::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 20%,transparent 75%);
  mask-image:radial-gradient(circle at 50% 45%,#000 20%,transparent 75%);
}
.kopfkarte__mono::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:124px;height:124px;border-radius:50%;
  border:1px solid rgba(61,155,233,.34);
}
.kopfkarte__zeichen{
  position:relative;z-index:2;font-family:var(--disp);font-weight:800;
  font-size:clamp(2.4rem,5vw,3.2rem);letter-spacing:.06em;color:#fff;line-height:1;
}
.kopfkarte__zeichen svg{width:46px;height:46px;stroke:var(--blau-hell);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.kopfkarte__mono--offen::after{border-style:dashed;border-color:rgba(61,155,233,.42)}

/* ============================================================
   GEGENUEBERSTELLUNG ZWEIER ANLAGENZUSTAENDE
   ============================================================ */
.gegen{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(32px,4vw,48px)}
.gegen figure{margin:0;position:relative}
.gegen img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.gegen figcaption{
  margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--stahl);display:flex;align-items:center;gap:9px;
}
.gegen figcaption::before{content:"";flex:none;width:16px;height:2px;background:var(--blau)}
.gegen__marke{
  position:absolute;left:12px;top:12px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(12,44,74,.86);color:#fff;padding:6px 10px;border-radius:2px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.gegen figure:last-child .gegen__marke{background:rgba(10,111,194,.9)}
@media (max-width:660px){ .gegen{grid-template-columns:1fr;gap:26px} }

/* Pflichthinweis zur Echtheit der Kundenstimmen (§ 5b Abs. 3 UWG) */
.score__echt{
  max-width:62ch;margin:14px 0 0;font-size:.88rem;line-height:1.65;color:var(--stahl);
}

/* ============================================================
   Ergaenzungen des WordPress-Themes
   Alles davor stammt unveraendert aus dem freigegebenen Entwurf.
   Diese Datei wird bei jedem Neubau wieder angehaengt.
   ============================================================ */

/* Sprungmarke fuer Tastatur und Screenreader */
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--blau);color:#fff;padding:12px 20px;border-radius:0 0 2px 0;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}
.skip:focus{left:0}

/* Schlanker Kopfbereich fuer Seiten ohne eigenes Bild (404, neue Seiten) */
.shero--schlank{background:var(--nacht);padding-block:clamp(64px,8vw,104px)}
.shero--schlank .wrap{position:relative;z-index:2}
.shero--schlank .h1{font-size:clamp(2.3rem,5vw,3.8rem);margin:10px 0 0}
.shero--schlank .lead--hell{max-width:56ch;margin:20px 0 30px}
.shero--schlank .hero__btns{display:flex;gap:14px;flex-wrap:wrap}

/* Wegweiser-Karten, z. B. auf der 404-Seite */
.wege{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.wege a{
  display:block;padding:22px 24px;background:var(--weiss);
  border:1px solid var(--linie);border-left:3px solid var(--blau);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-left-color .35s;
}
.wege a:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(12,44,74,.12);border-left-color:var(--rot)}
.wege b{
  display:block;font-family:var(--disp);font-weight:700;font-size:1.18rem;
  color:var(--nacht);letter-spacing:.005em;margin-bottom:5px;
}
.wege span{display:block;font-size:.9rem;line-height:1.55;color:var(--stahl)}

/* ============================================================
   Contact Form 7 in die Gestaltung des Entwurfs einpassen

   Das mitgelieferte Stylesheet von CF7 ist abgeschaltet, damit es
   sich nicht mit dem Entwurf beisst. Was davon gebraucht wird,
   steht hier, vor allem das Verstecken der Screenreader-Hinweise.
   ============================================================ */

.wpcf7 .formular{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.wpcf7 .formular .voll{grid-column:1/-1}
.wpcf7 p{margin:0}
.wpcf7-form-control-wrap{display:block}

/* Alles, was CF7 selbst einstreut, darf das Raster nicht sprengen */
.wpcf7 .formular > p,
.wpcf7 .formular > ul,
.wpcf7 .formular > .wpcf7-response-output{grid-column:1/-1}
.wpcf7 .formular > fieldset.hidden-fields-container{display:none}

/* Hinweise nur fuer Screenreader, nicht sichtbar */
.wpcf7 .screen-reader-response{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}

/* Honigtopf gegen Spam: muss unsichtbar bleiben */
.wpcf7 .hp-message,
.wpcf7 [class*="hp-"][class*="-wrap"]{
  position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;
}

/* Fehlermeldung am einzelnen Feld */
.wpcf7 .wpcf7-not-valid-tip{
  display:block;margin-top:7px;color:#F3C9C5;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
}
.wpcf7 .wpcf7-not-valid{border-bottom-color:var(--rot)}

/* Sammelmeldung unter dem Formular */
.wpcf7 .wpcf7-response-output{
  margin:2px 0 0;padding:15px 18px;border:0;border-left:3px solid var(--blau);
  background:rgba(255,255,255,.055);font-size:.9rem;line-height:1.65;color:#C6D7E6;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{border-left-color:var(--rot);color:#F3C9C5}
.wpcf7 form.sent .wpcf7-response-output{border-left-color:var(--blau-hell);color:#CFE2F3}
.wpcf7-spinner{margin:0 0 0 12px}

/* Dateianhaenge im Anfrageformular */
.dateien{
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035);
  padding:22px 24px;
}
.dateien__kopf{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blau-hell);margin:0 0 9px;
}
.dateien__text{margin:0 0 18px;font-size:.88rem;line-height:1.65;color:#8DA1B3;max-width:62ch}
/* Mindestbreite, damit Chrome den Text neben dem Knopf nicht zu "Kei...hlt" kuerzt.
   WordPress legt um die drei Felder ein <p> mit <br>; display:contents macht die
   Labels wieder zu Rasterfeldern. */
.dateien__felder{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
  gap:16px 18px;margin:0 0 20px;
}
.dateien__felder > p{display:contents;margin:0}
.dateien__felder br{display:none}
.dateien__felder label{
  display:block;min-width:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--stahl-hell);
}
.dateien input[type=file]{
  width:100%;margin-top:7px;padding:11px 0;color:#C6D7E6;font-size:.84rem;
  background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.24);
}
.dateien input[type=file]::file-selector-button{
  margin-right:12px;padding:8px 14px;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);color:#fff;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s,border-color .2s;
}
.dateien input[type=file]::file-selector-button:hover{background:var(--blau);border-color:var(--blau)}
.dateien__linklabel{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stahl-hell);margin:0 0 8px;
}

/* Sicherheitsfrage statt Bild-Captcha: deutsch, gross genug, bedienbar */
.pruefung{
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035);
  padding:22px 24px;
}
.pruefung__kopf{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blau-hell);margin:0 0 14px;
}
.pruefung .wpcf7-quiz-label{
  display:block;font-size:1.06rem;line-height:1.5;color:#fff;margin:0 0 10px;
}
.pruefung input[type=text]{
  max-width:240px;font-size:1.05rem;padding:12px 2px;
}
.pruefung > p{margin:0}
.pruefung br{display:none}
/* Spamfalle: liegt im Markup, darf aber weder Platz einnehmen noch vorgelesen werden */
.wpcf7 .formular .hp-firma-wrap{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
}
.wpcf7 .formular .hp-message{display:none}

/* Absendeknopf: muss die allgemeine Feldregel ueberschreiben */
.wpcf7 .formular input[type=submit],
.wpcf7 .formular input.btn,
.wpcf7 .formular button[type=submit]{
  width:auto;border:0;border-radius:2px;cursor:pointer;
  padding:17px 30px;background:var(--blau);color:#fff;
  font-family:var(--disp);font-weight:700;font-size:1.02rem;
  letter-spacing:.055em;text-transform:uppercase;
  transition:background .25s,transform .25s;
}
.wpcf7 .formular input[type=submit]:hover,
.wpcf7 .formular input.btn:hover{background:var(--blau-dunkel);transform:translateY(-2px)}
.wpcf7 .formular input[type=submit]:focus-visible{outline:2px solid var(--blau-hell);outline-offset:3px}

/* Im Editor angelegte Inhalte sollen nicht aus dem Raster fallen */
.recht .wp-block-image img{max-width:100%;height:auto}
.recht ul,.recht ol{padding-left:1.25em}
.recht table{width:100%;border-collapse:collapse;margin:20px 0}
.recht th,.recht td{border:1px solid var(--linie);padding:10px 12px;text-align:left}

@media (max-width:680px){
  .wpcf7 .formular{grid-template-columns:1fr}
}