/* schrand.energy — Site-Stylesheet „Der vermessene Standort" (Neugestaltung 23.08.2026)
   Gilt für Startseite und alle Unterseiten; löst das frühere Datenblatt-Raster ab. */

@font-face{font-family:'Archivo';src:url('fonts/Archivo-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-Regular-latin.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --mint-50:#EEF9F7;--mint-100:#DAF2EE;--mint-300:#8CD7CA;--mint-500:#19AF96;
  --mint-700:#107B6A;--mint-900:#0B4F43;
  --petrol-900:#10201C;--petrol-800:#16302A;
  --grau-900:#2A2A2A;--grau-500:#5D6873;--grau-100:#F3F5F4; /* grau-500 abgedunkelt: 5,2:1 auch auf grau-100 */
  --linie:#D9E4E0;--linie-dunkel:#223832;
  --nebel-hell:#D3DEDA;--nebel:#B9C8C3;
  /* CTA-Gold (Vorgabe Sergej 23.08.2026, aus Kunden-Screenshot; dunkle Schrift: 6,7:1 auf Petrol-900) */
  --gold:#C9971F;--gold-tief:#B08418;
  --schrift:'Archivo',system-ui,sans-serif;
  --daten:'IBM Plex Mono',ui-monospace,monospace;
  --weich:cubic-bezier(.16,1,.3,1);
  /* Radien nur für Fotos/Bildflächen (Vorgabe Sergej 30.08.2026, nach Vorbild Variante 9);
     Knöpfe, Karten und Flächen bleiben hartkantig */
  --radius-bild:24px;--radius-bild-klein:16px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip;scrollbar-color:var(--mint-700) var(--grau-100)}
body{font-family:var(--schrift);color:var(--grau-900);background:#fff;font-size:16px;line-height:1.65;overflow-x:clip}
body.fixiert{overflow:hidden}
::selection{background:var(--mint-500);color:var(--petrol-900)}
img{max-width:100%;height:auto;display:block}
[id]{scroll-margin-top:96px}
a{color:var(--mint-700);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--mint-900)}
a:focus-visible,button:focus-visible{outline:3px solid var(--mint-700);outline-offset:2px}
.mono,time{font-family:var(--daten);font-variant-numeric:tabular-nums}
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sprunglink{position:absolute;left:-9999px;z-index:200;background:var(--petrol-900);color:#fff;padding:12px 20px;font-weight:600;text-decoration:none}
.sprunglink:focus-visible{left:0;top:0}

.innen{max-width:1140px;margin:0 auto;padding-left:clamp(20px,5vw,40px);padding-right:clamp(20px,5vw,40px)}
.schmal{max-width:880px}

h1,h2,h3{color:var(--petrol-900);letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(1.85rem,3.4vw,2.7rem);font-weight:650;line-height:1.12;max-width:21em}
h3{font-size:1.1rem;font-weight:650;line-height:1.3}
.einleitung{margin-top:18px;font-size:1.1rem;color:var(--grau-500);max-width:38em}
.abschnittskopf{margin-bottom:clamp(36px,5vw,56px)}

section{padding:clamp(76px,9vw,120px) 0}
section.flaeche{background:var(--grau-100)}
section.dunkel{background:var(--petrol-900)}

/* == Bewegung: sanfte Reveals, eine Handschrift ============================ */
@media (prefers-reduced-motion:no-preference){
  .js .anim{opacity:0;transform:translateY(16px);transition:opacity .55s ease-out,transform .7s var(--weich);transition-delay:var(--vz,0s)}
  .js .anim.sichtbar{opacity:1;transform:none}
}

/* == Kopf ==================================================================
   Zwei Zustände, eine Bewegung (05.09.2026): über dem Hero eine transparente
   Leiste mit Petrol-Schleier — das weiße Logo-Feld (Kundenregel: Bildmarke nie
   durchsichtig) sitzt als Fahne an der Oberkante, statt frei über dem Foto zu
   schweben. Ab 24 px Scroll und auf allen Unterseiten die flachere weiße
   Leiste: Fahne zieht sich ein, Logo rückt auf die Inhaltskante, Gold-CTA
   übernimmt. Alle Maße laufen über Variablen auf .kopf, damit der Wechsel eine
   einzige Bewegung ist und die Mobil-Regeln unverändert darüber greifen. */
.kopf{position:fixed;top:0;left:0;right:0;z-index:80;
      --kopf-pad:16px;--kopf-pad-x:clamp(20px,5vw,40px);
      --logo-h:34px;--logo-pad-x:18px;--logo-fahne:16px;
      --cta-pad-y:12px;--cta-pad-x:20px;
      transition:background .3s var(--weich),box-shadow .3s var(--weich)}
/* Schleier statt Textschatten: trägt die weißen Menüpunkte unabhängig davon,
   welcher Bildausschnitt des Drohnenfotos gerade unter dem Kopf liegt */
.kopf::before{content:'';position:absolute;top:0;left:0;right:0;bottom:-56px;pointer-events:none;
      background:linear-gradient(to bottom,rgba(16,32,28,.60),rgba(16,32,28,.34) 42%,rgba(16,32,28,0));
      transition:opacity .3s var(--weich)}
/* Mess-Hairline an der Unterkante: Lesefortschritt der Seite, nur im weißen
   Zustand — dieselbe Mint-Rolle wie die Messpunkte im Hero */
.kopf::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
      background:var(--mint-500);transform:scaleX(var(--fortschritt,0));transform-origin:left;
      opacity:0;transition:opacity .3s var(--weich)}
.nav{position:relative;z-index:1;max-width:1140px;margin:0 auto;
     padding:var(--kopf-pad) var(--kopf-pad-x);
     display:flex;align-items:center;justify-content:space-between;gap:16px;
     transition:padding .3s var(--weich)}
.logo-panel{display:inline-flex;background:#fff;padding:10px 14px;text-decoration:none}
.logo-panel img{height:36px;width:auto}
/* z-index 50: bleibt ueber dem Menue-Overlay (z 40), das im selben Stapel liegt */
/* Logo-Zelle: ueber dem Hero spannt das weisse Panel die volle Kopfhoehe auf (oben
   buendig, unten mit der Leiste endend), das Logo steht darin mittig auf der
   Menuezeile. Im weissen Zustand fallen Rand und Innenabstand auf 0. */
.kopf .logo-panel{position:relative;z-index:50;align-self:stretch;align-items:center;
     margin:calc(-1 * var(--logo-fahne)) 0;padding:0 var(--logo-pad-x);
     transition:margin .3s var(--weich),padding .3s var(--weich)}
.kopf .logo-panel img{height:var(--logo-h);transition:height .3s var(--weich)}
.nav-rechts{display:flex;align-items:center;gap:0;min-width:0}
#hauptmenue ul{display:flex;gap:0;list-style:none}
#hauptmenue a{position:relative;text-decoration:none;color:#fff;font-weight:600;font-size:.95rem;
     padding:10px 11px;display:inline-block;white-space:nowrap;
     text-shadow:0 1px 6px rgba(10,18,16,.45);transition:color .2s ease-out}
/* Unterstreichung wächst von links — dieselbe Marke trägt auch die aktive Seite */
#hauptmenue a::after{content:'';position:absolute;left:11px;right:11px;bottom:5px;height:2px;
     background:currentColor;transform:scaleX(0);transform-origin:left;
     transition:transform .25s var(--weich)}
#hauptmenue a:hover{color:var(--mint-300)}
#hauptmenue a:hover::after,#hauptmenue a[aria-current]::after{transform:scaleX(1)}
/* Über dem Hero gehört Gold allein dem Hero-Aufruf: der Kopf-CTA ist dort eine
   weiße Kontur und wird erst golden, wenn die Leiste weiß wird */
.nav-cta{position:relative;z-index:50;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6);
     text-decoration:none;font-weight:650;font-size:.95rem;
     padding:var(--cta-pad-y) var(--cta-pad-x);margin-left:12px;white-space:nowrap;
     transition:background .2s ease-out,color .2s ease-out,border-color .2s ease-out,padding .3s var(--weich)}
.nav-cta:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.menue-knopf{position:relative;z-index:50;display:none;font-family:var(--schrift);font-weight:600;font-size:.85rem;
     letter-spacing:.08em;text-transform:uppercase;background:transparent;color:#fff;
     border:1px solid rgba(255,255,255,.6);padding:10px 16px;min-height:44px;cursor:pointer;
     transition:background .2s ease-out,color .2s ease-out,border-color .2s ease-out}

/* Weißer Zustand: fester Kopf, offenes Mobilmenü, jede Unterseite */
.kopf-fest,body.fixiert .kopf,.unterseite .kopf{
     --kopf-pad:9px;--logo-h:29px;--logo-pad-x:0px;--logo-fahne:0px;
     --cta-pad-y:9px;--cta-pad-x:18px;
     background:#fff;box-shadow:0 1px 0 var(--linie)}
.kopf-fest::before,body.fixiert .kopf::before,.unterseite .kopf::before{opacity:0}
.kopf-fest::after,body.fixiert .kopf::after,.unterseite .kopf::after{opacity:1}
.kopf-fest #hauptmenue a,body.fixiert .kopf #hauptmenue a,.unterseite #hauptmenue a{color:var(--grau-900);text-shadow:none}
.kopf-fest #hauptmenue a:hover,body.fixiert .kopf #hauptmenue a:hover,.unterseite #hauptmenue a:hover{color:var(--mint-700)}
.kopf-fest .nav-cta,body.fixiert .kopf .nav-cta,.unterseite .nav-cta{background:var(--gold);border-color:var(--gold);color:var(--petrol-900)}
.kopf-fest .nav-cta:hover,body.fixiert .kopf .nav-cta:hover,.unterseite .nav-cta:hover{background:var(--gold-tief);border-color:var(--gold-tief);color:var(--petrol-900)}
.kopf-fest .menue-knopf,body.fixiert .kopf .menue-knopf,.unterseite .menue-knopf{background:#fff;color:var(--grau-900);border-color:var(--linie)}
/* muss body.fixiert .kopf .menue-knopf schlagen — daher gleiche Tiefe */
body .kopf .menue-knopf[aria-expanded="true"]{background:var(--petrol-900);color:#fff;border-color:var(--petrol-900)}

/* Unterseiten: Kopf von Anfang an weiß und im Fluss (sticky statt fixed) */
.unterseite .kopf{position:sticky}
#hauptmenue a[aria-current]{color:var(--mint-700)}

/* == Knöpfe ================================================================ */
.knopf{display:inline-block;text-decoration:none;font-weight:650;font-size:.95rem;padding:16px 30px;border:none;cursor:pointer;transition:background .2s ease-out,color .2s ease-out,border-color .2s ease-out}
.knopf-cta{background:var(--gold);color:var(--petrol-900)}
.knopf-cta:hover{background:var(--gold-tief);color:var(--petrol-900)}
.knopf-kontur{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);padding:15px 29px}
.knopf-kontur:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.knopf-zweit{background:transparent;color:var(--petrol-900);border:1px solid var(--petrol-900);padding:15px 29px}
.knopf-zweit:hover{background:var(--petrol-900);color:#fff}
.knopfleiste{display:flex;gap:14px;flex-wrap:wrap}
.knopf-hinweis{margin-top:16px;font-size:.95rem;color:var(--mint-100)}

/* == Hero: der vermessene Standort (Startseite) ============================ */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}
@supports(height:1svh){.hero{min-height:100svh}}
.hero-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(18%) brightness(.68) contrast(1.03)}
.hero-schleier{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,18,16,.5) 0%,rgba(10,18,16,.18) 40%,rgba(10,18,16,.34) 70%,rgba(10,18,16,.84) 100%),
  rgba(16,32,28,.14)}
.hero-mess{position:absolute;inset:0;pointer-events:none}
.hero-mess svg{position:absolute;inset:0;width:100%;height:100%}
.mess-linie{fill:none;stroke:var(--mint-500);stroke-width:1.5}
.mess-ring{fill:none;stroke:var(--mint-300);stroke-width:1.5}
.mess-punkt{fill:var(--mint-500)}
.mess-label{font-family:var(--daten);font-size:23px;letter-spacing:1.5px;fill:var(--mint-100);paint-order:stroke;stroke:rgba(10,18,16,.8);stroke-width:5px;stroke-linejoin:round}
.mess-wert{font-family:var(--daten);font-size:20px;letter-spacing:.8px;fill:#fff;font-variant-numeric:tabular-nums;paint-order:stroke;stroke:rgba(10,18,16,.8);stroke-width:5px;stroke-linejoin:round}
.mess-strang{fill:none;stroke:var(--mint-300);stroke-width:1.2;stroke-dasharray:7 5;opacity:.55}
.soc-rahmen{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.2}
.soc-fuell{fill:var(--mint-500)}

/* Fünf Ausbaustufen-Szenen: die aktive zeichnet sich gestaffelt ein (--pd je Messpunkt),
   die abgelöste blendet als Ganzes aus; ohne JS steht Szene 01 statisch. */
.js .mess-szene{opacity:0;visibility:hidden;transition:opacity .35s ease-in,visibility 0s .35s}
.js .mess-szene.aktiv{opacity:1;visibility:visible;transition:opacity .2s ease-out}
@media (prefers-reduced-motion:no-preference){
  .js .mess-szene .mess-linie{stroke-dasharray:1;stroke-dashoffset:1}
  .js .mess-szene .mess-ring,.js .mess-szene .mess-punkt,.js .mess-szene .mess-label,
  .js .mess-szene .mess-wert,.js .mess-szene .mess-strang,
  .js .mess-szene .soc-rahmen,.js .mess-szene .soc-fuell{opacity:0}
  .js .mess-szene.aktiv .mess-linie{stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--weich);transition-delay:calc(.25s + var(--pd,0s))}
  .js .mess-szene.aktiv .mess-ring,.js .mess-szene.aktiv .mess-punkt{opacity:1;transition:opacity .4s ease-out;transition-delay:calc(.25s + var(--pd,0s))}
  .js .mess-szene.aktiv .mess-label,.js .mess-szene.aktiv .mess-wert,
  .js .mess-szene.aktiv .soc-rahmen,.js .mess-szene.aktiv .soc-fuell{opacity:1;transition:opacity .45s ease-out;transition-delay:calc(.8s + var(--pd,0s))}
  .js .mess-szene.aktiv .mess-strang{opacity:.55;transition:opacity .6s ease-out .35s}
  .js .mess-szene.aktiv .mess-ring{transform-box:fill-box;transform-origin:center;animation:mess-puls 4s ease-in-out infinite;animation-delay:calc(1.8s + var(--pd,0s))}
}
@keyframes mess-puls{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

/* Szenen-Titel + Stufen-Navigation mittig oben unter dem Seitenkopf */
.hero-szenen{position:absolute;top:calc(var(--kopf-hoehe,92px) + 22px);left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
.szene-titel{font-family:var(--daten);font-size:.95rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(10,18,16,.85),0 0 2px rgba(10,18,16,.9);transition:opacity .25s ease-out;margin:0}
.szene-titel.wechselt{opacity:0}
.szene-nr{color:var(--mint-300);margin-right:.7em}
.szene-punkte{display:none;gap:2px;pointer-events:auto}
.js .szene-punkte{display:flex}
.szene-punkt{background:none;border:0;padding:9px 7px;cursor:pointer;line-height:0}
.szene-punkt span{display:block;width:26px;height:3px;background:rgba(255,255,255,.38);transition:background .25s ease-out}
.szene-punkt:hover span{background:rgba(255,255,255,.7)}
.szene-punkt.aktiv span{background:var(--mint-300)}
.szene-punkt:focus-visible{outline:2px solid var(--mint-300);outline-offset:2px}

/* Messpunkt-Ebene nur, wo Bildausschnitt und Platz sie tragen (Querformat ab 900 px) */
@media (max-width:899px),(orientation:portrait){
  .hero-mess,.hero-szenen,.hero-fuss .mono{display:none}
  /* Ohne Messpunkt-Bühne darf der Schleier unten kräftiger werden: der Textblock
     steht hier über dem hellen Speichertank (Dachzeile sonst nur 3,7:1). */
  .hero-schleier{background:
    linear-gradient(180deg,rgba(10,18,16,.5) 0%,rgba(10,18,16,.2) 30%,rgba(10,18,16,.48) 55%,rgba(10,18,16,.9) 100%),
    rgba(16,32,28,.14)}
}

/* Textblock kompakt am unteren Rand — die Bildbühne darüber gehört den Szenen */
.hero-inhalt{position:relative;width:100%;max-width:1140px;margin:0 auto;padding:104px clamp(20px,5vw,40px) 18px;text-align:center}
.hero .dachzeile{font-family:var(--daten);font-size:1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mint-300);margin:0 auto 14px}
.hero h1{color:#fff;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:680;line-height:1.08;letter-spacing:-.02em;max-width:22em;margin:0 auto 18px}
.hero h1 .marke{color:var(--mint-300)}
.hero .unterzeile{font-size:1.05rem;color:var(--mint-100);max-width:52em;margin:0 auto 18px}
.hero .knopfleiste{justify-content:center}
.hero .knopf-hinweis{margin-top:9px}
.hero-fuss{position:relative;width:100%;max-width:1140px;margin:0 auto;padding:12px clamp(20px,5vw,40px) 16px;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.hero-fuss p{font-size:.85rem;color:var(--nebel-hell)}
.hero-fuss::before{content:"";position:absolute;top:0;left:clamp(20px,5vw,40px);right:clamp(20px,5vw,40px);height:1px;background:rgba(255,255,255,.22)}
.hero-fuss .mono{font-size:.78rem;letter-spacing:.04em;color:var(--nebel)}

/* Flache Fenster (Laptops, breite Monitore mit wenig Höhe): Textblock deutlich
   verflachen, damit die Messpunkt-Bühne samt Beschriftungen sichtbar bleibt */
@media (min-width:900px) and (orientation:landscape) and (max-height:840px){
  .hero-inhalt{padding-top:84px;padding-bottom:14px}
  .hero .dachzeile{font-size:.9rem;margin-bottom:10px}
  .hero h1{font-size:clamp(1.65rem,2.9vw,2.2rem);margin-bottom:14px}
  .hero .unterzeile{font-size:.95rem;max-width:60em;margin-bottom:14px}
  .hero .knopfleiste .knopf{padding:12px 24px;font-size:.9rem}
  .hero .knopf-hinweis{margin-top:8px;font-size:.85rem}
  .hero-fuss{padding-top:10px;padding-bottom:12px}
}

/* == Problem (Startseite) ================================================== */
.fragen{list-style:none;margin-top:clamp(32px,4vw,44px)}
.fragen li{padding:20px 0;border-top:1px solid var(--linie);font-size:clamp(1.1rem,1.9vw,1.35rem);font-weight:600;line-height:1.45;color:var(--petrol-900);max-width:36em}
.fragen li:last-child{border-bottom:1px solid var(--linie)}
.schlusssatz{margin-top:26px;color:var(--grau-500);max-width:40em}

/* == Drei Schritte (Startseite) ============================================ */
.schritte{list-style:none;counter-reset:schritt;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
.schritte li{counter-increment:schritt;border-top:2px solid var(--petrol-900);padding-top:20px}
.schritte li::before{content:counter(schritt,decimal-leading-zero);font-family:var(--daten);font-size:.85rem;color:var(--mint-700);letter-spacing:.08em}
.schritte h3{margin:10px 0 8px}
.schritte p{color:var(--grau-500);font-size:.95rem;max-width:30em}
@media (max-width:899px){.schritte{grid-template-columns:1fr;gap:24px}}
.einstiegssatz{margin-top:clamp(36px,5vw,56px);background:var(--mint-50);padding:30px 34px;max-width:56em}
.einstiegssatz p{color:var(--mint-900);max-width:none}
.einstiegssatz p+p{margin-top:12px}
.einstiegssatz strong{color:var(--petrol-900)}

/* == Dunkles Band (Anwendung, Startseite) ================================== */
.dunkel h2{color:#fff;max-width:15em}
.dunkel .einleitung{color:var(--nebel-hell)}
.anwendung-lage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center}
@media (max-width:899px){.anwendung-lage{grid-template-columns:1fr}}
.leistungen{list-style:none;margin-top:28px;max-width:32em}
.leistungen li{padding:12px 0;border-top:1px solid var(--linie-dunkel);color:var(--mint-100);font-weight:500}
.leistungen li:last-child{border-bottom:1px solid var(--linie-dunkel)}
.geraet{border:1px solid rgba(255,255,255,.16);background:var(--petrol-800);padding:clamp(10px,1.4vw,16px);border-radius:var(--radius-bild)}
.geraet img{width:100%;border-radius:calc(var(--radius-bild) - 12px)}
.geraet figcaption{padding:0 6px 4px}
.dunkel figcaption{margin-top:12px;font-size:.85rem;color:var(--nebel)}

/* == Steuerung (Startseite) ================================================ */
.wirkung-lage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);max-width:900px}
@media (max-width:679px){.wirkung-lage{grid-template-columns:1fr}}
.wirkung{list-style:none;margin-top:16px}
.wirkung li{padding:12px 0;border-top:1px solid var(--linie);font-weight:500;color:var(--grau-900)}
.wirkung li:last-child{border-bottom:1px solid var(--linie)}
.hinweis{margin-top:clamp(32px,4vw,44px);font-size:.95rem;color:var(--grau-500);max-width:52em}

/* == Ausbaustufen (Startseite) ============================================= */
.stufen{border-top:1px solid var(--linie)}
.stufe{display:grid;grid-template-columns:64px 230px 1fr 28px;gap:24px;align-items:center;padding:24px 10px 24px 0;border-bottom:1px solid var(--linie);text-decoration:none;color:inherit;transition:background .15s ease-out}
.stufe:hover{background:#fff;color:inherit}
.stufe .nr{font-family:var(--daten);font-size:.85rem;color:var(--mint-700);padding-left:2px}
.stufe h3{transition:color .15s ease-out}
.stufe p{color:var(--grau-500);font-size:.95rem}
.stufe .pfeil{color:var(--grau-500);transition:transform .2s var(--weich),color .2s ease-out}
.stufe:hover .pfeil{transform:translateX(6px);color:var(--petrol-900)}
@media (max-width:759px){
  .stufe{grid-template-columns:48px 1fr 24px;gap:8px 16px}
  .stufe .nr{grid-column:1;grid-row:1}
  .stufe h3{grid-column:2;grid-row:1}
  .stufe p{grid-column:2;grid-row:2}
  .stufe .pfeil{grid-column:3;grid-row:1}
}

/* == Standort (Startseite) ================================================= */
.standort-lage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center}
@media (max-width:899px){.standort-lage{grid-template-columns:1fr}}
.foto{width:100%;border-radius:var(--radius-bild)}
.standort-lage figcaption{margin-top:12px;font-size:.85rem;color:var(--grau-500)}
.bestandteile{list-style:none;margin:26px 0 30px;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;max-width:36em}
.bestandteile li{padding:10px 0;border-top:1px solid var(--linie);font-size:.95rem;color:var(--grau-900)}
@media (max-width:539px){.bestandteile{grid-template-columns:1fr}}

/* == Belege (Startseite) =================================================== */
.belege{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,48px) clamp(28px,4vw,56px)}
@media (max-width:899px){.belege{grid-template-columns:1fr 1fr}}
@media (max-width:599px){.belege{grid-template-columns:1fr}}
.beleg{border-top:1px solid var(--linie);padding-top:18px}
.beleg h3{margin-bottom:8px;font-size:1.05rem}
.beleg p{color:var(--grau-500);font-size:.95rem}

/* == Zeitleiste ============================================================ */
.zeitleiste{padding-bottom:clamp(90px,10vw,130px)}
.zl-spur{position:relative;margin-top:10px}
.zl-linie{position:absolute;top:5px;left:0;right:0;height:2px;background:var(--linie)}
.zl-fortschritt{position:absolute;top:5px;left:0;height:2px;width:100%;background:var(--mint-500);transform:scaleX(0);transform-origin:left}
.zeitleiste.sichtbar .zl-fortschritt{transform:scaleX(1);transition:transform 1.6s var(--weich) .2s}
.zl-punkte{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.zl-punkt{position:relative;padding-top:32px}
.zl-punkt::before{content:"";position:absolute;top:0;left:0;width:12px;height:12px;background:var(--mint-500)}
.zl-punkt .jahr{display:block;font-family:var(--daten);font-variant-numeric:tabular-nums;color:var(--mint-700);font-size:.85rem;margin-bottom:6px}
.zl-punkt .was{font-size:.95rem;color:var(--grau-500);max-width:15em;display:block}
@media (max-width:759px){
  .zl-linie,.zl-fortschritt{top:0;left:5px;right:auto;bottom:0;width:2px;height:auto}
  .zl-fortschritt{transform:scaleY(0);transform-origin:top;height:100%}
  .zeitleiste.sichtbar .zl-fortschritt{transform:scaleY(1)}
  .zl-punkte{grid-template-columns:1fr;gap:26px}
  .zl-punkt{padding:0 0 0 36px}
  .zl-punkt::before{top:4px}
}
@media (prefers-reduced-motion:reduce){.zl-fortschritt{transform:none}}

/* == Beitragslisten ======================================================== */
.beitraege{border-top:1px solid var(--linie)}
.beitrag{display:grid;grid-template-columns:120px 140px 1fr 28px;gap:22px;align-items:center;padding:20px 10px 20px 0;border-bottom:1px solid var(--linie);text-decoration:none;color:inherit;transition:background .15s ease-out}
a.beitrag:hover{background:var(--grau-100);color:inherit}
.beitrag time{font-size:.85rem;color:var(--grau-500)}
.beitrag .kat{font-size:.85rem;color:var(--mint-700)}
.beitrag h3,.beitrag h2{font-size:1.05rem;font-weight:600;letter-spacing:0;line-height:1.4}
.beitrag .pfeil{color:var(--grau-500);transition:transform .2s var(--weich),color .2s ease-out}
a.beitrag:hover .pfeil{transform:translateX(6px);color:var(--petrol-900)}
/* Aktuelles-Übersicht: Zeilen mit Vorschaubild; Einträge ohne Seite tragen einen Hinweis statt Pfeil */
.beitrag.mit-bild{grid-template-columns:120px 110px 130px 1fr auto}
.beitrag .vorschau{width:120px;height:80px;object-fit:cover;background:var(--grau-100);border-radius:10px}
.beitrag .cms-hinweis{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grau-500);white-space:nowrap}
@media (max-width:759px){
  .beitrag{grid-template-columns:1fr 24px;gap:6px 16px}
  .beitrag time{grid-column:1;grid-row:1}
  .beitrag .kat{display:none}
  .beitrag h3,.beitrag h2{grid-column:1;grid-row:2}
  .beitrag .pfeil{grid-column:2;grid-row:1/span 2;align-self:center}
  .beitrag.mit-bild{grid-template-columns:96px 1fr 24px}
  .beitrag .vorschau{width:96px;height:64px;grid-column:1;grid-row:1/span 2}
  .beitrag.mit-bild time{grid-column:2;grid-row:1}
  .beitrag.mit-bild h2,.beitrag.mit-bild h3{grid-column:2;grid-row:2}
  .beitrag.mit-bild .pfeil{grid-column:3;grid-row:1/span 2}
  .beitrag .cms-hinweis{grid-column:2;grid-row:3}
}

/* == Abschluss (CTA-Band) ================================================== */
/* Textlinks auf dunklen Flächen hellen im Hover auf Weiß statt auf Mint-900 ab */
.dunkel a:not(.knopf):hover,.abschluss a:not(.knopf):hover,.band a:not(.knopf):hover,footer a:hover{color:#fff}
.abschluss{background:var(--petrol-900)}
.abschluss h2{color:#fff}
.abschluss .einleitung{color:var(--nebel-hell)}
.abschluss-lage{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(28px,5vw,64px);flex-wrap:wrap}

/* == Fuß =================================================================== */
footer{background:var(--petrol-900);border-top:1px solid var(--linie-dunkel);padding:clamp(56px,7vw,80px) 0 36px;color:var(--nebel-hell)}
.fuss-spalten{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
@media (max-width:899px){.fuss-spalten{grid-template-columns:1fr 1fr}}
@media (max-width:539px){.fuss-spalten{grid-template-columns:1fr}}
footer .fuss-titel{color:#fff;font-size:.95rem;font-weight:650;line-height:1.4;letter-spacing:.02em;margin-bottom:16px;max-width:none}
footer ul{list-style:none}
footer li{padding:5px 0}
footer a{color:var(--nebel-hell);text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.anschrift{margin-top:20px;font-style:normal;font-size:.95rem;color:var(--nebel-hell)}
.anschrift a{text-decoration:underline}
.rechtlich{margin-top:52px;padding-top:22px;border-top:1px solid var(--linie-dunkel);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--nebel);font-size:.85rem}

/* == Mobiles Menü ========================================================== */
@media (max-width:1120px){
  #hauptmenue{display:none}
  .js .menue-knopf{display:inline-block}
  /* Ohne JavaScript bleibt die Liste sichtbar und bricht um */
  html:not(.js) #hauptmenue{display:block}
  html:not(.js) .nav{flex-wrap:wrap}
  html:not(.js) #hauptmenue ul{flex-wrap:wrap}
  /* Overlay liegt hinter der weissen Kopfleiste (z-index 80) und beginnt an der
     Oberkante — so kann zwischen Leiste und Liste keine Luecke entstehen, egal
     wie hoch der Kopf bei der jeweiligen Fensterbreite ausfaellt */
  #hauptmenue.offen{display:block;position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;overflow-y:auto;z-index:40;padding-top:72px}
  #hauptmenue.offen ul{display:block}
  #hauptmenue.offen li{border-bottom:1px solid var(--linie)}
  #hauptmenue.offen a{display:block;padding:20px clamp(20px,5vw,40px);font-size:1.15rem;font-weight:600;color:var(--petrol-900);text-shadow:none;box-shadow:none}
  #hauptmenue.offen a:hover{color:var(--mint-700)}
  #hauptmenue.offen a[aria-current]{color:var(--mint-700)}
  /* Im Vollbild-Overlay tragen die Eintraege keine Unterstreichung */
  #hauptmenue.offen a::after{display:none}
}
/* Logo, Anfrage-Knopf und Menü-Knopf standen auf schmalen Telefonen zusammen
   breiter als der Bildschirm — der Menü-Knopf wurde rechts abgeschnitten
   (html/body haben overflow-x:clip, es gab also nicht einmal einen Schiebebalken).
   Abstände und Logohöhe laufen jetzt fließend mit der Fensterbreite mit, statt an
   einem Haltepunkt zu springen. Mindesthöhe 44 px des Menü-Knopfes bleibt. */
@media (max-width:899px){
  .nav{padding-top:10px;padding-bottom:10px;
       padding-left:clamp(9px,3.2vw,20px);padding-right:clamp(9px,3.2vw,20px);
       gap:clamp(6px,2vw,16px)}
  /* Auf Telefonen keine Fahne an der Oberkante — die Leiste ist dafuer zu flach */
  .kopf .logo-panel{align-self:center;margin:0;padding:7px clamp(8px,2.6vw,11px)}
  .kopf .logo-panel img{height:clamp(25px,7vw,30px)}
  .nav-cta{font-size:clamp(.75rem,2.9vw,.82rem);padding:12px clamp(9px,3.4vw,14px);
           margin-left:0;margin-right:clamp(4px,1.6vw,8px)}
  .menue-knopf{padding:10px clamp(9px,3.6vw,16px);font-size:clamp(.79rem,2.7vw,.85rem)}
  .hero-inhalt{padding-top:96px}
}
/* Unter 360 px reicht auch das nicht mehr: dort darf der Kopf umbrechen,
   Logo oben, Anfrage- und Menü-Knopf darunter — lieber zwei Zeilen als
   ein abgeschnittener Knopf. */
@media (max-width:359px){
  .nav{flex-wrap:wrap;justify-content:center;row-gap:8px}
  .nav-rechts{justify-content:center}
}

/* ==========================================================================
   Unterseiten-Komponenten
   ========================================================================== */

/* Seitenkopf: ruhiger Einstieg mit großer Überschrift */
.seitenkopf{padding:clamp(64px,8vw,104px) 0 clamp(40px,5vw,64px)}
.seitenkopf h1{font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:680;line-height:1.08;letter-spacing:-.025em;max-width:18em}
.seitenkopf .einleitung{max-width:44em}
.seitenkopf .einleitung+.einleitung{margin-top:12px}
.seitenkopf+section{padding-top:clamp(28px,4vw,48px)}
.seitenkopf+section.flaeche{padding-top:clamp(76px,9vw,120px)}
.seitenkopf+.band{padding:0}

/* Beitragsseiten: Rückweg und Metazeile */
.rueckweg{display:inline-block;font-size:.85rem;color:var(--grau-500);text-decoration:none;margin-bottom:22px}
.rueckweg:hover{color:var(--mint-700);text-decoration:underline}
.metazeile{display:flex;gap:14px;align-items:baseline;margin:16px 0 0}
.metazeile time{font-size:.85rem;color:var(--grau-500)}
.metazeile .kat{font-size:.85rem;color:var(--mint-700)}

/* Nummerierte Zeilenliste zwischen Hairlines */
.zeilenliste{list-style:none;counter-reset:zeile;max-width:44em}
.zeilenliste li{counter-increment:zeile;position:relative;padding:14px 0 14px 60px;border-top:1px solid var(--linie)}
.zeilenliste li::before{content:counter(zeile,decimal-leading-zero);position:absolute;left:0;top:18px;font-family:var(--daten);font-size:.85rem;color:var(--mint-700)}
.zeilenliste li:last-child{border-bottom:1px solid var(--linie)}
@media (max-width:539px){.zeilenliste li{padding-left:44px}}
/* Schlichte Variante ohne Nummern — für Aufzählungen ohne bedeutungstragende Reihenfolge */
.zeilenliste.schlicht li{padding-left:0}
.zeilenliste.schlicht li::before{content:none}
.zeilenliste a{font-weight:600;text-decoration:none}
.zeilenliste a:hover{text-decoration:underline}

/* Hinweis-Panel (ersetzt den Kasten mit Seitenkante) */
.panel{background:var(--mint-50);padding:26px 30px;max-width:56em}
.panel p{color:var(--mint-900)}
.panel p+p{margin-top:10px}
.panel strong{color:var(--petrol-900)}
.flaeche .panel{background:var(--mint-50)}

/* Bildblock mit Unterschrift */
.bildblock{margin-top:clamp(36px,5vw,56px)}
.bildblock img{border:1px solid var(--linie);width:100%;border-radius:var(--radius-bild)}
figcaption,.fig-text{margin-top:12px;font-size:.85rem;color:var(--grau-500);max-width:44em}

/* Systembausteine (Produktseite): Text links, Beleg rechts */
.sys-block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:start}
@media (max-width:899px){.sys-block{grid-template-columns:1fr}}
.sys-block .untertitel{margin-top:10px;font-size:1.05rem;color:var(--grau-500)}
.sys-block .absatz{margin-top:18px;max-width:36em}
.sys-block .absatz strong{color:var(--petrol-900)}
.sys-block figure img{border:1px solid var(--linie);width:100%;border-radius:var(--radius-bild-klein)}
.sys-block figure img.zuschnitt{aspect-ratio:4/3;object-fit:cover;height:auto}
.flaeche .sys-block figure img{background:#fff}
.sys-block .knopf{margin-top:26px}

/* Kerndaten-Liste (dt/dd) */
.kerndaten{margin-top:22px;display:grid;grid-template-columns:auto 1fr;gap:10px 24px;font-size:.95rem;max-width:40em}
.kerndaten dt{font-weight:650;color:var(--petrol-900);white-space:nowrap}
.kerndaten dd{color:var(--grau-900)}
@media (max-width:539px){.kerndaten{grid-template-columns:1fr;gap:2px}.kerndaten dd{margin-bottom:10px}}

/* Petrol-Band mit Bild (Standort-Seite) */
.band{background:var(--petrol-900);color:#fff;padding:0}
.band-lage{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.band-lage img{width:100%;height:100%;object-fit:cover;min-height:340px}
.band-text{padding:clamp(48px,6vw,88px) clamp(24px,5vw,72px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.band-text h2{color:#fff}
.band-text p{color:var(--nebel-hell);margin-top:16px;max-width:32em}
.band-text .knopf{margin-top:30px}
@media (max-width:899px){.band-lage{grid-template-columns:1fr}.band-lage img{min-height:240px;max-height:380px}}

/* Galerie der Beitragsseiten */
.beitragstext{max-width:44em}
.beitragstext p{margin-bottom:16px;color:var(--grau-900)}
.beitragstext ul{margin:0 0 16px;padding-left:22px}
.beitragstext li{margin-bottom:6px;color:var(--grau-900)}

/* Rechtstexte (Impressum/Datenschutz): lange Generator-Gliederung lesbar setzen */
.rechtstext h2{font-size:1.35rem;margin:38px 0 12px}
.rechtstext h2:first-child,.rechtstext p:first-child{margin-top:0}
.rechtstext h3{font-size:1.1rem;margin:26px 0 8px}
.rechtstext h4{font-size:1rem;margin:18px 0 6px}
.rechtstext a{overflow-wrap:anywhere}

/* Video-Einbettung (Zwei-Klick, DSGVO): lokale Petrol-Fläche im CD, YouTube erst nach Klick */
.video-einbettung{position:relative;aspect-ratio:16/9;margin:26px 0;background:var(--petrol-900);border-radius:var(--radius-bild);overflow:hidden}
.video-einbettung iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-decoration:none;color:#fff;text-align:center}
.video-start .abspielzeichen{display:grid;place-items:center;width:64px;height:64px;border:1px solid rgba(255,255,255,.55);transition:background .2s ease-out,border-color .2s ease-out}
.video-start:hover{color:#fff}
.video-start:hover .abspielzeichen{background:rgba(255,255,255,.12);border-color:#fff}
.video-start strong{font-size:1.05rem;font-weight:650}
.video-start .video-hinweis{font-size:.85rem;color:var(--nebel-hell);max-width:34em}
.galerie{display:grid;grid-template-columns:1fr 1fr;gap:32px 28px;margin-top:clamp(40px,5vw,60px);align-items:start}
.galerie figure{margin:0}
.galerie img{width:100%;border:1px solid var(--linie);background:var(--grau-100);border-radius:var(--radius-bild-klein)}
.galerie .breit{grid-column:1/-1}
@media (max-width:759px){.galerie{grid-template-columns:1fr;gap:26px}}

/* Team / Ansprechpartner */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,44px) clamp(24px,3vw,36px)}
@media (max-width:899px){.team{grid-template-columns:1fr 1fr}}
@media (max-width:539px){.team{grid-template-columns:1fr}}
.person img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--grau-100);border:1px solid var(--linie);border-radius:var(--radius-bild-klein)}
.person .pdaten{padding-top:14px}
.person h3{font-size:1.05rem}
.person .rolle{display:block;font-size:.95rem;color:var(--grau-500);margin:2px 0 8px}
.person a{font-size:.95rem;overflow-wrap:anywhere;text-decoration:none}
.person a:hover{text-decoration:underline}
.foto-folgt{aspect-ratio:3/4;background:var(--grau-100);border:1px solid var(--linie);border-radius:var(--radius-bild-klein);display:flex;align-items:center;justify-content:center;font-size:.85rem;letter-spacing:.06em;color:var(--grau-500);text-transform:uppercase}
.foto-folgt.gruppenbild{aspect-ratio:21/9}

/* Kontakt-Einstieg */
.kontakt-lage{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,80px);align-items:start}
@media (max-width:899px){.kontakt-lage{grid-template-columns:1fr}}
.kdaten dl{display:grid;grid-template-columns:auto 1fr;gap:14px 28px}
.kdaten dt{font-weight:650;color:var(--petrol-900);white-space:nowrap;padding-top:1px}
.kdaten dd{color:var(--grau-900)}
.kdaten dd a{text-decoration:none;overflow-wrap:anywhere}
.kdaten dd a:hover{text-decoration:underline}
.kdaten .knopf{margin-top:26px}

/* Anfrageformular */
.formular{max-width:46em}
/* Honigtopf (Spamfalle): fuer Menschen unsichtbar, fuer Bots im Formular vorhanden; kein display:none, das manche Bots auslassen */
.formular .versteckt{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.formular fieldset{border:0;margin:0 0 clamp(32px,4vw,44px);padding:0}
.formular legend{font-size:1.1rem;font-weight:650;color:var(--petrol-900);letter-spacing:-.01em;margin-bottom:6px}
.formular .schritt-text{color:var(--grau-500);font-size:.95rem;margin-bottom:16px;max-width:38em}
.formular .zeilen{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.formular .feld{display:flex;flex-direction:column;gap:6px}
.formular .feld-voll{grid-column:1 / -1}
.formular label{font-size:.85rem;font-weight:600;color:var(--grau-900)}
.formular input[type=text],.formular input[type=email],.formular input[type=tel],.formular textarea{border:1px solid var(--linie);padding:12px 14px;font:inherit;background:#fff;color:var(--grau-900);min-height:44px;caret-color:var(--mint-700)}
.formular input::placeholder,.formular textarea::placeholder{color:var(--grau-500)}
.formular input:focus-visible,.formular textarea:focus-visible{outline:3px solid var(--mint-700);outline-offset:2px}
.formular textarea{min-height:120px;resize:vertical}
.formular .auswahl{display:flex;flex-wrap:wrap;gap:10px}
.formular .auswahl label{display:flex;align-items:center;gap:8px;border:1px solid var(--linie);padding:10px 14px;cursor:pointer;font-weight:400;font-size:.92rem}
.formular .auswahl input{accent-color:var(--mint-700);width:16px;height:16px}
.formular .auswahl label:has(input:checked){border-color:var(--mint-700);background:var(--mint-50)}
.formular .einwilligung{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.formular .einwilligung label{font-weight:400;font-size:.95rem}
.formular .einwilligung input{width:18px;height:18px;margin-top:3px;accent-color:var(--mint-700);flex:none}
.formular .knopf{margin-top:22px}
.formular .nach-absenden{font-size:.85rem;color:var(--grau-500);margin-top:14px;max-width:38em}
@media (max-width:679px){.formular .zeilen{grid-template-columns:1fr}}

/* Energiefluss-Schema (Technologie) */
.schema{overflow-x:auto;margin-top:clamp(32px,4vw,48px)}
.schema svg{min-width:760px;width:100%;height:auto}
.schema-hinweis{display:none}
@media (max-width:799px){
  .schema-hinweis{display:block;margin-top:10px;font-size:.85rem;color:var(--grau-500)}
}
.fluss{stroke-dasharray:8 8}
@media (prefers-reduced-motion:no-preference){
  .fluss{animation:fluss-lauf 1.1s linear infinite}
  @keyframes fluss-lauf{to{stroke-dashoffset:-16}}
}

/* Standort-Foto mit Anmerkungen (Technologie) — dieselbe Messpunkt-Grammatik wie der Hero */
.anm-buehne{position:relative;margin-top:clamp(32px,4vw,48px)}
.anm-buehne img{display:block;width:100%;height:auto;border:1px solid var(--linie);border-radius:var(--radius-bild)}
.anm-buehne svg{position:absolute;inset:0;width:100%;height:100%}
.anm text{font-family:var(--daten);font-size:26px;fill:var(--mint-100)}
.anm .anm-titel{font-weight:600;font-size:28px;fill:#fff}
.anm rect{fill:rgba(10,18,16,.82)}
.anm line{stroke:var(--mint-500);stroke-width:2.5;stroke-dasharray:1}
.anm circle{fill:none;stroke:var(--mint-300);stroke-width:3}
.anm-fallback{display:none}
@media (prefers-reduced-motion:no-preference){
  .js .anm-buehne .anm line{stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--weich)}
  .js .anm-buehne .anm .anm-rest{opacity:0;transition:opacity .5s ease-out .5s}
  .js .anm-buehne.sichtbar .anm line{stroke-dashoffset:0}
  .js .anm-buehne.sichtbar .anm .anm-rest{opacity:1}
  .js .anm-buehne.sichtbar .anm-2 line{transition-delay:.45s}
  .js .anm-buehne.sichtbar .anm-2 .anm-rest{transition-delay:.95s}
  .js .anm-buehne.sichtbar .anm-3 line{transition-delay:.9s}
  .js .anm-buehne.sichtbar .anm-3 .anm-rest{transition-delay:1.4s}
  .js .anm-buehne.sichtbar .anm-4 line{transition-delay:1.35s}
  .js .anm-buehne.sichtbar .anm-4 .anm-rest{transition-delay:1.85s}
}
@media (min-width:901px){
  .anm-fallback{display:block;position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
}
@media (max-width:900px){
  .anm-buehne svg{display:none}
  .anm-fallback{display:block;margin-top:16px}
}