/* IntraVolt, Variante 3b „Petrol editorial“ (Farbfassung von Variante 3, Kundenwunsch vom 12.09.2026)
   Petrol-Blaugrün-Grund (der Ton aus der Mitte des bisherigen Energieblocks), große Typografie, wenige Kästen, breite Fotobänder.
   Radius-System: alles 6 px (Buttons, Bilder, Inputs). Ein Akzent: Grün #7CAE02. */

@font-face{font-family:"Manrope";src:url("assets/fonts/Manrope-Variable-latin.woff2") format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";src:url("assets/fonts/Manrope-Variable-latin-ext.woff2") format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#0B2334;            /* Petrol-Blaugruen, exakt der Ton aus der Mitte des bisherigen Energieblocks */
  --surface:#0F2C40;
  --surface-2:#143A52;     /* reserviert, derzeit ungenutzt. Nicht für Akzent- oder Muted-Text: Akzent liegt hier mit 4,50:1 exakt an der Grenze */
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.2);
  --input-line:rgba(255,255,255,.4);        /* Rahmen auf --bg gemischt: 3,7:1 gegen das Feld, 3,3:1 gegen --surface (WCAG 1.4.11 verlangt 3:1) */
  --input-line-hover:rgba(255,255,255,.5);
  --text:#F1F5EE;
  --muted:#A9B5A6;
  --accent:#7CAE02;
  --accent-hover:#8CC30A;
  --blue:#074C72;          /* bleibt Kundenblau. Reserviert, derzeit ungenutzt. Nicht als Fläche für Akzent- oder Muted-Text: Muted 4,3:1, Akzent 3,5:1 */
  --blue-deep:#061A26;     /* neuer Anfang des Energieblock-Verlaufs, dunkler als die Seite */
  --fehler:#F5A08C;
  --radius:6px;                 /* ein Radius für alles */
  --header-h:72px;
  --container:1328px;
  --gutter:clamp(20px,4vw,56px);
  --section:clamp(88px,10vw,152px);
  --ease:cubic-bezier(.16,1,.3,1);
  --schatten:0 24px 48px rgba(3,10,16,.55);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  padding-top:var(--header-h);
  background:var(--bg);
  color:var(--text);
  font-family:"Manrope",ui-sans-serif,system-ui,sans-serif;
  font-size:1.0625rem;
  line-height:1.55;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
@media (min-width:768px){body{font-size:1.125rem}}
body.menu-offen{overflow:hidden}

[hidden]{display:none !important}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0}
button{font:inherit;color:inherit}

/* text-wrap:balance erst ab 768 px: auf schmalen Breiten stellt es das erste Wort allein in die Zeile */
h1{font-size:clamp(2.25rem,1rem + 3.7vw,4.25rem);font-weight:800;line-height:1.02;letter-spacing:-.025em;text-wrap:pretty}
@media (min-width:768px){h1{text-wrap:balance}}
h2{font-size:clamp(2rem,1.25rem + 2.1vw,3.25rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
h3{font-size:1.375rem;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.h2-klein{font-size:clamp(1.5rem,1rem + 1.2vw,2rem)}

.container{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto}
.sektion{padding-block:var(--section)}
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

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

.sentinel{position:absolute;top:0;left:0;width:1px;height:1px}
.skip{position:absolute;left:-9999px;top:.75rem;z-index:100;background:var(--accent);color:var(--bg);padding:.75rem 1rem;border-radius:var(--radius);font-weight:700;text-decoration:none}
.skip:focus{left:1rem}

/* Icons (Tabler Outline, Inline-SVG) */
.icon{width:1.25em;height:1.25em;flex:none}
.icon-klein{width:1em;height:1em}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:0 1.5rem;border-radius:var(--radius);
  font-weight:700;font-size:1rem;line-height:1;text-decoration:none;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .15s var(--ease);
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-outline{background:transparent;color:var(--text);border-color:rgba(241,245,238,.38)}
.btn-outline:hover{border-color:var(--text)}
.btn-sm{min-height:44px;padding:0 1.1rem;font-size:.95rem}
.btn[disabled]{opacity:.6;cursor:progress}
.btn .icon{transition:transform .3s var(--ease)}
.btn:hover .icon{transform:translateX(3px)}

/* Textlink läuft als Inline-Text: bricht der Link um, bleibt das Extern-Icon am letzten Wort.
   Dafür stehen letztes Wort und Icon im HTML in einem <span class="nowrap">; ein geschütztes Leerzeichen
   allein reicht nicht, weil Chrome vor einem Inline-Block-SVG trotzdem umbricht. Als Flex-Kind wird der
   Link zum Block, min-height greift dann; im Fließtext sorgt padding-block für die Klickfläche. */
.nowrap{white-space:nowrap}
.textlink{
  display:inline;min-height:44px;padding-block:.5rem;
  color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px;text-decoration-color:var(--line-strong);
  transition:text-decoration-color .25s var(--ease),color .25s var(--ease);
}
.textlink:hover{text-decoration-color:var(--accent);color:var(--accent)}
.textlink .icon{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.2em}

.aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem}
@media (max-width:480px){
  .aktionen{flex-direction:column;align-items:stretch}
  .aktionen .btn{width:100%}
}

/* Eyebrow (einziges Vorkommen: Hero der Startseite) */
.eyebrow{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 0;
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
/* Trennstrich hängt am folgenden Wort (::before), damit er beim Umbruch nicht allein am Zeilenende bleibt */
.eyebrow span{white-space:nowrap}
.eyebrow span+span::before{content:"";display:inline-block;width:1px;height:.9em;background:var(--line-strong);margin:0 .9em;vertical-align:-.05em}

/* Header */
.site-header{
  position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:50;
  background:var(--bg);border-bottom:1px solid var(--line);
  transition:background-color .3s var(--ease);
}
.site-header.is-scrolled{background:rgba(11,35,52,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.header-inner{height:100%;display:flex;align-items:center;gap:2rem}
.logo{display:block;flex:none;border-radius:var(--radius)}
.logo img{display:block;height:62px;width:auto;max-width:180px;object-fit:contain}
@media (max-width:559px){.site-header .logo img{height:56px;max-width:140px}}
.menu-toggle{
  display:none;margin-left:auto;width:48px;height:48px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;
}
.menu-toggle .icon{width:24px;height:24px}
.menu-toggle[aria-expanded="true"] .icon-menu{display:none}
.menu-toggle[aria-expanded="false"] .icon-x{display:none}

.nav{display:flex;align-items:center;gap:1.5rem;margin-left:auto}
.nav-list{display:flex;gap:.15rem;list-style:none}
.nav-item{position:relative}
.nav-link{
  display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:0 .9rem;
  color:var(--text);font-weight:600;font-size:.95rem;text-decoration:none;
  background:none;border:0;border-radius:var(--radius);cursor:pointer;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.nav-link:hover,.nav-item.is-open>.nav-link{background:rgba(255,255,255,.05)}
.nav-link[aria-current="page"]{color:var(--accent)}
.nav-link .icon{width:1em;height:1em;transition:transform .3s var(--ease)}
.nav-item.is-open>.nav-link .icon{transform:rotate(180deg)}
.sub{
  display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:270px;
  list-style:none;padding:.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--schatten);
}
.nav-item.is-open>.sub{display:block}
.sub a{
  display:flex;align-items:center;min-height:44px;padding:.55rem .85rem;border-radius:var(--radius);
  color:var(--text);text-decoration:none;font-size:.95rem;font-weight:500;
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.sub a:hover{background:rgba(255,255,255,.06)}
.sub a[aria-current="page"]{color:var(--accent)}
.nav-cta{flex:none}

@media (max-width:1023px){
  .menu-toggle{display:inline-flex}
  .nav{
    position:fixed;top:var(--header-h);right:0;bottom:0;left:0;z-index:40;
    flex-direction:column;align-items:stretch;gap:0;
    padding:.5rem var(--gutter) 2.5rem;overflow:auto;background:var(--bg);
    transform:translateX(100%);visibility:hidden;
    transition:transform .45s var(--ease),visibility 0s .45s;
  }
  .nav.is-open{transform:none;visibility:visible;transition-delay:0s}
  .nav-list{flex-direction:column;gap:0}
  .nav-link{width:100%;justify-content:space-between;min-height:58px;padding:0;font-size:1.125rem;border-bottom:1px solid var(--line);border-radius:0}
  .nav-link:hover,.nav-item.is-open>.nav-link{background:none}
  .sub{position:static;min-width:0;padding:.25rem 0 .75rem;background:none;border:0;box-shadow:none}
  .sub a{padding-left:1rem;min-height:48px}
  .nav-cta{margin-top:1.5rem;min-height:52px;font-size:1rem}
}

/* Hero (Startseite): Kopf und Fotoband untereinander, ohne Mindesthöhe am Hero selbst.
   Das Fotoband hat einen Pixel-Deckel (34dvh, höchstens 420 px), damit es in hohen Fenstern nicht mitwächst;
   bei 1440 × 900 bleibt der ganze Hero samt Band im ersten Viewport. */
.hero{display:grid;grid-template-rows:auto auto}
.hero-kopf{padding:clamp(1.75rem,4.5vh,3.5rem) 0 clamp(1.75rem,4.5vh,3rem)}
.hero-grid,.kopf-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2rem;row-gap:clamp(1.5rem,3vh,2.25rem)}
.hero-grid>*,.kopf-grid>*{grid-column:1/-1}
.hero h1{font-size:clamp(2.25rem,1.25rem + 3.3vw,4rem)} /* 1280 px: 62 px, ab 1400 px: 64 px, zwei Zeilen */
.hero h1,.kopf-grid h1{max-width:17.5em}
/* Untertext und Buttons stehen linksbündig direkt unter der H1 (Spalten 1 bis 8), damit Überschrift und Absatz ein Block sind */
.hero-neben,.kopf-neben{display:grid;gap:1.75rem;align-content:start}
.hero-neben p,.kopf-neben p{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.5;color:var(--muted);max-width:58ch}
@media (min-width:1024px){
  .hero-neben,.kopf-neben{grid-column:1/9}
}
@media (max-width:1023px){
  .hero-grid,.kopf-grid{grid-template-columns:1fr;column-gap:0}
}
/* Sehr schmale Geräte (320 px): Orientierungszeile weg, H1 und Abstände kleiner, damit der Hauptbutton im ersten Viewport bleibt.
   Ab 360 px passt der Hero mit Orientierungszeile (bei 375 × 812 enden die Buttons deutlich vor dem Viewportende). */
@media (max-width:359px){
  .hero .eyebrow{display:none}
  .hero h1{font-size:2rem}
  .hero-kopf{padding:1.25rem 0}
  .hero-grid{row-gap:1.25rem}
  .hero-neben{gap:1.25rem}
  .hero-neben p{font-size:1rem}
}
.hero-bild{position:relative;min-height:min(34dvh,420px);height:clamp(260px,34dvh,420px);overflow:hidden}
.hero-bild img,.bildband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.bildband{position:relative;height:clamp(260px,46vh,560px);margin-top:clamp(2.5rem,6vh,4rem)}

/* Fachseiten-Kopf */
.seitenkopf{padding-top:clamp(1.5rem,4vh,3rem)}
.brotkrumen ol{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;list-style:none;font-size:.9rem;color:var(--muted);font-weight:500}
.brotkrumen li{display:inline-flex;align-items:center;gap:.35rem}
.brotkrumen a{color:var(--muted);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.brotkrumen a:hover{color:var(--text)}
.brotkrumen .icon{width:1em;height:1em;opacity:.7}
.brotkrumen [aria-current]{color:var(--text)}

/* Textblöcke */
.lead{max-width:60ch;font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem);line-height:1.55;margin-top:1.75rem}
.lead+.lead{margin-top:1rem}
.lead-muted{color:var(--muted)}

/* Kriterien: Reihe großer dünner Begriffe, nur durch senkrechte Hairlines getrennt.
   minmax(auto,1fr): jede Spalte ist mindestens so breit wie ihr Begriff (nowrap), der Rest wird gleich verteilt.
   Unter 1280 px reicht die Breite für vier Begriffe bei dieser Größe nicht, dann 2×2. */
.kriterien{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(auto,1fr));margin-top:clamp(3rem,6vw,4.75rem)}
.kriterien li{padding:.25rem 1.25rem .25rem 0}
.kriterien li+li{border-left:1px solid var(--line);padding-left:1.5rem}
.wert{display:block;white-space:nowrap;font-size:clamp(2.25rem,1.2rem + 2.4vw,3.5rem);font-weight:300;line-height:1.05;letter-spacing:-.02em;color:var(--accent)}
.wert small{font-size:.5em;font-weight:500;color:var(--muted);letter-spacing:0}
.kriterien p{margin-top:.85rem;color:var(--muted);font-size:.95rem;line-height:1.45;max-width:24ch}
.kern .aktionen{margin-top:clamp(2.5rem,5vw,3.75rem)}
@media (max-width:1279px){
  .kriterien{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.25rem}
  .kriterien li{min-width:0}
  .kriterien li:nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:559px){
  .kriterien{grid-template-columns:1fr;row-gap:0}
  .kriterien li{padding:1.25rem 0;border-left:0 !important;padding-left:0 !important;border-top:1px solid var(--line)}
  .kriterien li:first-child{border-top:0;padding-top:0}
  .kriterien p{max-width:40ch}
}

/* Geschäftsfelder der Unternehmensseite: drei bewusst gleichwertige Bildkacheln. */
.geschaeftsfelder{padding-top:clamp(64px,7vw,104px)}
.geschaeftsfeld-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2.5rem}
.geschaeftsfeld{
  position:relative;display:flex;align-items:flex-end;min-height:clamp(400px,42vw,540px);overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);color:var(--text);text-decoration:none;isolation:isolate;
}
.geschaeftsfeld::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(6,26,38,.98) 0%,rgba(11,35,52,.68) 48%,rgba(11,35,52,.08) 78%)}
.geschaeftsfeld img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.geschaeftsfeld-text{width:100%;padding:clamp(1.5rem,2.5vw,2.25rem)}
.geschaeftsfeld h3{font-size:clamp(1.35rem,1rem + 1vw,2rem);max-width:15ch}
.geschaeftsfeld p{margin-top:.85rem;color:var(--muted);line-height:1.55;max-width:34ch}
.karten-link{display:inline-flex;margin-top:1.5rem;color:var(--accent);font-weight:700}
.geschaeftsfeld:hover img{transform:scale(1.035)}
.geschaeftsfeld:hover .karten-link{color:var(--accent-hover)}
@media (max-width:900px){
  .geschaeftsfeld-grid{grid-template-columns:1fr}
  .geschaeftsfeld{min-height:360px}
  .geschaeftsfeld h3{max-width:none}
}
@media (max-width:479px){.geschaeftsfeld{min-height:330px}}

/* Unternehmenspositionierung und kompakte Themenbereiche. */
.positionierung{background:var(--surface);border-block:1px solid var(--line)}
.positionierung-grid,.investments-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,7vw,7rem);align-items:start}
.positionierung h2,.investments h2{max-width:13ch}
.positionierung .lead+.lead,.investments .lead+.lead{margin-top:1.25rem}
.flaechen-kompakt .lead{margin-top:1.5rem}
.flaechen-kompakt .aktionen{margin-top:2rem}

.speicher{background:linear-gradient(150deg,var(--surface),var(--bg));border-block:1px solid var(--line)}
.speicher-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.speicher-bild{overflow:hidden;border-radius:var(--radius);aspect-ratio:3/2;background:var(--surface)}
.speicher-bild img{width:100%;height:100%;object-fit:cover}
.speicher .lead{margin-top:1.5rem}
.speicher-wert{margin-top:2rem;color:var(--accent);font-size:clamp(2.25rem,1.5rem + 2vw,3.5rem);font-weight:300;line-height:1.1}
.speicher-wert small{display:block;margin-bottom:.4rem;color:var(--muted);font-size:.9rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.speicher .aktionen{margin-top:2rem}

.loesungen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line-strong)}
.loesungen-grid article{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:2rem 2.5rem 0 0}
.loesungen-grid article+article{padding-left:2.5rem;border-left:1px solid var(--line)}
.loesungen-grid h3{font-size:clamp(1.25rem,1rem + .7vw,1.625rem)}
.loesungen-grid p{margin:.9rem 0 1.5rem;color:var(--muted);max-width:36ch}
.loesungen-grid .textlink{margin-top:auto}
.investments{background:var(--surface);border-block:1px solid var(--line)}
.investments .aktionen{margin-top:2rem}
@media (max-width:767px){
  .positionierung-grid,.investments-grid,.speicher-grid{grid-template-columns:1fr}
  .positionierung h2,.investments h2{max-width:none}
  .speicher-bild{order:2}
  .loesungen-grid{grid-template-columns:1fr}
  .loesungen-grid article,.loesungen-grid article+article{padding:1.75rem 0;border-left:0;border-bottom:1px solid var(--line)}
}

/* Drei Einstiege: Accordion Image Slider. Titel und Beschreibungssatz stehen in allen drei Streifen dauerhaft;
   der Satz skaliert mit der Streifenbreite (Container-Einheit cqw, 14 px im schmalen, 16 px im breiten Streifen).
   Hover und Fokus vergrößern den Streifen und blenden zusätzlich den Linktext ein. */
.einstiege-liste{display:flex;gap:.5rem;height:clamp(420px,62vh,600px);margin-top:2.5rem}
.streifen{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:var(--radius);
  color:var(--text);text-decoration:none;isolation:isolate;container-type:inline-size;
  transition:flex-grow .7s var(--ease);
}
.streifen:first-child{flex-grow:1.9}
/* Sobald ein Streifen gehovert oder fokussiert ist: die übrigen auf 1, der aktive auf 2.3.
   :where() hält die Rückstellregel unter der Öffnungsregel (0,5,0 gegen 0,4,0). */
.einstiege-liste:has(.streifen:hover,.streifen:focus-visible) .streifen:where(:not(:hover,:focus-visible)){flex-grow:1}
.einstiege-liste:has(.streifen:hover,.streifen:focus-visible) .streifen:is(:hover,:focus-visible){flex-grow:2.3}
/* Fokusring als echte Outline innerhalb der Kachel. Chrome zeichnet die eigene Outline vor den positionierten
   Kind-Ebenen; darum liegen Bild und Verlauf auf z-index -1 im eigenen Stacking Context (isolation:isolate),
   die Outline darüber, der Text (z-index 1) zuoberst. */
.streifen:focus-visible{outline:2px solid var(--accent);outline-offset:-6px}
.streifen img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.streifen:hover img{transform:scale(1.03)}
.streifen::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(11,35,52,.94) 0%,rgba(11,35,52,.55) 45%,rgba(11,35,52,0) 75%)}
.streifen-text{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(1.25rem,2.5vw,2rem)}
.streifen h3{font-size:clamp(1.25rem,1rem + .8vw,1.75rem);font-weight:700;max-width:14ch}
.streifen-text p{margin-top:.75rem;max-width:44ch;color:var(--muted);font-size:clamp(.875rem,.5rem + 1.2cqw,1rem);line-height:1.5}
.streifen-satz{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .65s var(--ease),opacity .45s var(--ease)}
.streifen-satz>div{overflow:hidden;min-height:0}
.streifen-pfeil{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;color:var(--accent);font-weight:700;font-size:.95rem}
.streifen-pfeil .icon{transition:transform .3s var(--ease)}
.streifen:hover .streifen-satz,.streifen:focus-visible .streifen-satz,
.einstiege-liste:not(:has(.streifen:hover,.streifen:focus-visible)) .streifen:first-child .streifen-satz{grid-template-rows:1fr;opacity:1}
.streifen:hover .streifen-pfeil .icon{transform:translateX(4px)}
/* Touch-Geräte in Desktopbreite (Tablet quer): ohne Hover bleibt Satz und Linktext dauerhaft sichtbar */
@media (min-width:1024px) and (hover:none){
  .streifen-satz{grid-template-rows:1fr;opacity:1}
}
/* Unter 1024 px (Tablet und Mobil): drei Bildzeilen statt Slider. Zwischen 768 und 1023 px wären die
   Streifen zu schmal; Satz und Linktext stehen hier ohne Hover dauerhaft im Fluss. */
@media (max-width:1023px){
  .einstiege-liste{flex-direction:column;height:auto;gap:2rem}
  .einstiege-liste .streifen{flex:none !important} /* keine Breitenanimation, schlägt die :has()-Regeln */
  .streifen{display:grid;gap:1rem;border-radius:0;overflow:visible;container-type:normal}
  .streifen img{position:static;aspect-ratio:3/2;border-radius:var(--radius)}
  .streifen:hover img{transform:none}
  .streifen::after{display:none}
  .streifen-text{position:static;padding:0}
  .streifen-text p{font-size:1rem}
  .streifen-satz{grid-template-rows:1fr !important;opacity:1 !important}
  .streifen:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
}
/* Tablet: Bild links, Text rechts, damit die Zeilen nicht zu hoch werden */
@media (min-width:600px) and (max-width:1023px){
  .einstiege-liste{gap:2.5rem}
  .streifen{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem;align-items:center}
  .streifen h3{max-width:none}
}

/* Energie- und Technikblock: Verlauf beginnt dunkler als die Seite und läuft in --bg aus, damit er sich weiter absetzt.
   Der Verlauf allein trennt nur schwach (Oberkante 1,10:1, Unterkante identisch mit der Seite), darum begrenzen
   zwei Hairlines den Block, wie bei Abschluss und Footer. */
.energie{background:linear-gradient(168deg,var(--blue-deep) 0%,#081F2E 48%,var(--bg) 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.energie-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.energie h2{font-size:clamp(1.75rem,1.1rem + 1.7vw,2.75rem)}
.energie .lead{margin-top:1.25rem;font-size:1.125rem}
.energie .aktionen{margin-top:2rem}
.preisbaustein{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line-strong)}
body:not([data-preis="freigegeben"]) .preisbaustein{display:none}
.preis-titel{font-weight:600;line-height:1.2}
.preis-label{display:block;font-size:1rem;color:var(--muted);font-weight:600}
.preis-zahl{display:block;font-size:clamp(2.5rem,1.6rem + 2.6vw,4rem);font-weight:300;letter-spacing:-.02em;line-height:1.05;color:var(--accent);margin-top:.4rem}
.preis-zahl small{font-size:.42em;font-weight:500;color:var(--text);margin-left:.2em}
.preis-bedingung{margin-top:1rem;font-size:inherit;color:var(--text);max-width:48ch}
.preis-unterzeile{margin-top:.75rem;color:var(--muted);max-width:48ch}
.energie-bild{border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;background:var(--surface)}
.energie-bild img{width:100%;height:100%;object-fit:cover}
.energie-dv h2{margin-top:2.25rem}
@media (max-width:1023px){
  .energie-grid{grid-template-columns:1fr;gap:4rem}
}

/* Ablauf: fünf Spalten, durchgehende Hairline oben.
   768 bis 1023 px: zwei Spalten, jede Zelle mit eigener Linie. Unter 768 px: Liste, Ziffer links, Titel rechts. */
.ablauf{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2rem;margin-top:clamp(2.5rem,5vw,3.75rem);border-top:1px solid var(--line-strong)}
.ablauf li{padding-top:1.75rem;min-width:0}
.ziffer{display:block;font-size:clamp(3.25rem,2rem + 2.6vw,4.5rem);font-weight:200;line-height:1;letter-spacing:-.03em;color:var(--accent)}
.ablauf h3{margin-top:1.25rem;font-size:1.2rem;max-width:15ch}
.ablauf-satz h3{max-width:20ch;font-size:1.125rem}
@media (max-width:1023px){
  .ablauf{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 2.5rem;border-top:0}
  .ablauf li{border-top:1px solid var(--line-strong);padding-top:1.5rem}
  .ablauf h3,.ablauf-satz h3{max-width:none}
}
@media (max-width:767px){
  .ablauf{grid-template-columns:1fr;gap:0}
  .ablauf li{display:grid;grid-template-columns:2.75rem minmax(0,1fr);column-gap:1rem;align-items:baseline;padding:1.25rem 0;border-top:1px solid var(--line)}
  .ablauf li:first-child{border-top-color:var(--line-strong)}
  .ablauf h3{margin-top:0}
  .ziffer{font-weight:300} /* dünne grüne Ziffern (200) dünnen auf dem Handy aus, darum 300 */
}

/* Vorteile: 2×2 typografisches Raster ohne Kästen */
.vorteile{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(2.5rem,5vw,3.75rem);border-top:1px solid var(--line-strong)}
.vorteile li{padding:2rem 2.5rem 2.5rem 0;border-bottom:1px solid var(--line)}
.vorteile li:nth-child(even){padding-left:2.5rem;padding-right:0;border-left:1px solid var(--line)}
.vorteile h3{font-size:clamp(1.25rem,1rem + .7vw,1.625rem);max-width:18ch}
.vorteile p{margin-top:.85rem;color:var(--muted);max-width:44ch}
@media (max-width:767px){
  .vorteile{grid-template-columns:1fr}
  .vorteile li,.vorteile li:nth-child(even){padding:1.75rem 0;border-left:0}
}

/* Bild-Text-Split (Dachsanierung) */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.5rem,6vw,6rem);align-items:center}
.split-bild{border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;background:var(--surface)}
.split-bild img{width:100%;height:100%;object-fit:cover}
@media (max-width:767px){.split{grid-template-columns:1fr;gap:2.5rem}}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.acc{border-top:1px solid var(--line-strong)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.4rem 0;background:none;border:0;text-align:left;cursor:pointer;
  font-size:clamp(1.125rem,1rem + .5vw,1.375rem);font-weight:700;line-height:1.3;
  transition:color .25s var(--ease);
}
.acc-btn:hover{color:var(--accent)}
.acc-btn .icon{width:1.3em;height:1.3em;color:var(--accent);transition:transform .4s var(--ease)}
.acc-btn[aria-expanded="true"] .icon{transform:rotate(180deg)}
.acc-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s var(--ease),visibility 0s .45s}
.acc-panel.is-open{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
.acc-panel>div{overflow:hidden;min-height:0}
.acc-panel p{padding:0 3rem 1.75rem 0;color:var(--muted);max-width:60ch}
@media (max-width:1023px){.faq-grid{grid-template-columns:1fr;gap:2rem}}

/* Abschluss: zweispaltig, Bild bis zum rechten Rand.
   Volle Breite mit innerem Raster: äußere Spalten mindestens Gutter, innere je halbe Containerbreite.
   So liegt die Textkante exakt auf der Containerkante, ohne 100vw (Scrollbalken-Breite). */
.abschluss{
  display:grid;
  grid-template-columns:minmax(var(--gutter),1fr) minmax(0,calc(var(--container) / 2)) minmax(0,calc(var(--container) / 2)) minmax(var(--gutter),1fr);
  border-top:1px solid var(--line);
}
.abschluss-text{grid-column:2;align-self:center;padding:var(--section) clamp(2rem,5vw,5rem) var(--section) 0}
.abschluss-text h2{max-width:12ch}
.abschluss-text .lead{margin-top:1.5rem}
.abschluss-text .aktionen{margin-top:2.25rem}
.abschluss-link{margin-top:1.5rem}
.abschluss-bild{grid-column:3/-1;position:relative;min-height:520px}
.abschluss-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:767px){
  .abschluss{grid-template-columns:1fr}
  .abschluss-text{grid-column:1;padding:var(--section) var(--gutter) 3rem}
  .abschluss-bild{grid-column:1;min-height:0;aspect-ratio:3/2}
}

/* Footer */
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding:4.5rem 0 2.5rem;font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:2.5rem 2rem}
.footer-marke{display:grid;gap:1.25rem;align-content:start}
.footer-marke img{height:100px;width:auto;max-width:100%;object-fit:contain}
.footer-marke p{color:var(--muted);max-width:30ch}
.footer-titel{font-size:1rem;font-weight:700;margin-bottom:1rem}
.site-footer ul{list-style:none;display:grid;gap:0}
.site-footer li a,.footer-marke a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;color:var(--muted);text-decoration:none;transition:color .2s var(--ease)}
.site-footer li a:hover,.footer-marke a:hover{color:var(--text)}
.site-footer a[aria-current="page"]{color:var(--accent)}
.footer-unten{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;color:var(--muted);font-size:.9rem}
@media (max-width:1023px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-marke{grid-column:1/-1}}
@media (max-width:559px){.footer-grid{grid-template-columns:1fr}}

/* Kontakt */
.kontakt-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.kontakt-intro{position:sticky;top:calc(var(--header-h) + 2.5rem)}
.kontakt-intro h1{font-size:clamp(2.25rem,1rem + 2.9vw,3.25rem)}
.kontakt-intro .lead{color:var(--muted);max-width:42ch}
.kontakt-direkt{margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--line);color:var(--muted)}
.kontakt-direkt a{display:inline-flex;align-items:center;gap:.5rem;color:var(--text);font-weight:600;text-decoration:none;min-height:44px}
.kontakt-direkt a:hover{color:var(--accent)}
@media (max-width:1023px){.kontakt-grid{grid-template-columns:1fr;gap:3rem}.kontakt-intro{position:static}}

.formular{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,3.5vw,2.75rem)}
.fortschritt{display:grid;gap:.85rem;margin-bottom:2.25rem}
.stufen{display:flex;justify-content:space-between;list-style:none;font-size:.9rem;font-weight:600;color:var(--muted)}
.stufen [aria-current]{color:var(--text)}
.fortschritt-linie{height:2px;background:var(--line-strong);border-radius:1px;overflow:hidden}
.fortschritt-linie span{display:block;height:100%;background:var(--accent);transform:scaleX(var(--p,.5));transform-origin:left;transition:transform .6s var(--ease)}

fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0}
.stufe-titel{font-size:clamp(1.375rem,1rem + .9vw,1.75rem);font-weight:800;letter-spacing:-.01em;line-height:1.2;margin-bottom:.5rem}
.stufe-titel:focus{outline:none}
.feld{display:grid;gap:.45rem;align-content:start;margin-top:1.5rem} /* align-content:start: in der Feldreihe streckt sich kein Input auf die Höhe des Nachbarn */
.feld label,.feld>legend{font-weight:600;font-size:1rem}
.feld>legend{margin-bottom:.35rem}
.pflicht{font-weight:500;color:var(--muted)}
.hilfe{font-size:.9rem;color:var(--muted);line-height:1.45}
.fehler{font-size:.9rem;color:var(--fehler);font-weight:600}
.feld-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.25rem}
@media (max-width:559px){.feld-reihe{grid-template-columns:1fr}}

input:not([type="radio"]),select,textarea{
  width:100%;min-height:50px;padding:.7rem .95rem;
  background:var(--bg);border:1px solid var(--input-line);border-radius:var(--radius);
  color:var(--text);font:inherit;font-size:1rem;line-height:1.4;
  transition:border-color .2s var(--ease);
}
textarea{min-height:150px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--input-line-hover)}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--accent);outline-offset:2px}
/* Spezifität (0,1,1) wie die Grundregel oben, steht dahinter und gewinnt deshalb; ein reines [aria-invalid] (0,1,0) verlor gegen input:not(...) */
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--fehler)}
.select-wrap{position:relative}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:2.75rem}
.select-wrap .icon{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted);width:1.1rem;height:1.1rem}

.radio-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.radio-karte{
  position:relative;display:flex;align-items:center;min-height:54px;padding:.75rem 1rem;
  background:var(--bg);border:1px solid var(--input-line);border-radius:var(--radius);
  font-weight:600;font-size:1rem;cursor:pointer;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.radio-karte input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.radio-karte:hover{border-color:var(--input-line-hover)}
.radio-karte:has(input:checked){border-color:var(--accent);background:rgba(124,174,2,.1)}
.radio-karte:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.feld-interesse[aria-invalid="true"] .radio-karte{border-color:rgba(245,160,140,.5)}
@media (max-width:479px){.radio-karten{grid-template-columns:1fr}}

.zusatz{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.zusatz>legend{font-weight:700;font-size:1.05rem;float:left;width:100%}
.zusatz>legend+.hilfe{clear:both;padding-top:.35rem}
.hinweis{margin-top:1.25rem;padding:.9rem 1rem;border-left:2px solid var(--accent);background:rgba(124,174,2,.06);border-radius:0 var(--radius) var(--radius) 0;font-size:.95rem}

.form-aktionen{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;margin-top:2rem}
.form-aktionen .btn{flex:1 1 auto}
@media (min-width:560px){.form-aktionen .btn{flex:0 0 auto}}
.datenschutz{margin-top:2rem;font-size:.95rem;color:var(--muted);max-width:60ch}
.datenschutz a{color:var(--text)}
.kein-vertrag{margin-top:1rem;font-size:.9rem;color:var(--muted)}
.fehler-uebersicht{margin-bottom:1.5rem;padding:1rem 1.25rem;border:1px solid var(--fehler);border-radius:var(--radius);background:rgba(245,160,140,.06)}
.fehler-uebersicht p{font-weight:700}
.fehler-uebersicht ul{list-style:none;margin-top:.5rem;display:grid;gap:.25rem}
.fehler-uebersicht a{color:var(--text)}
/* Live-Regionen: bleiben leer im Fluss (kein display:none), damit Screenreader den Text vorlesen.
   role=status für den Versandhinweis, role=alert für den Fehlertext, je ein eigenes Element. */
.form-status{margin-top:1.5rem;padding:1rem 1.25rem;border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--text)}
.form-status:empty{margin:0;padding:0;border:0;min-height:0}
.form-status-fehler{border-color:var(--fehler)}
.form-status a{color:var(--text)}
.erfolg{display:grid;gap:1rem;padding:.5rem 0}
.erfolg .icon{width:2.75rem;height:2.75rem;color:var(--accent)}
.erfolg-text{font-size:1.125rem;max-width:48ch}
.anfrage-id{color:var(--muted)}
.anfrage-id strong{color:var(--text);letter-spacing:.04em;font-weight:700}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Bewegung: begründet, nur transform und opacity, hinter prefers-reduced-motion */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
  .js [data-reveal].is-visible{opacity:1;transform:none}
  .js .hero-grid>*{animation:aufsteigen .8s var(--ease) both}
  .js .hero-grid>:nth-child(2){animation-delay:.08s}
  .js .hero-grid>:nth-child(3){animation-delay:.18s}
  .js .hero-bild{animation:einblenden 1s var(--ease) .3s both}
}
@keyframes aufsteigen{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Rechtliche Unterseiten: isolierte, helle Lesefläche im bestehenden Design. */
.recht-seite{padding:clamp(40px,6vw,88px) 0}
.recht-kopf{max-width:900px;margin:0 auto 2rem}
.recht-kopf>a{color:var(--accent-hover);text-underline-offset:.2em}
.recht-kopf h1{font-size:clamp(2rem,5vw,3.7rem);line-height:1.15;margin-top:1rem;overflow-wrap:anywhere}
.recht-inhalt{max-width:900px;margin:auto;padding:clamp(22px,5vw,60px);background:#F1F5EE;color:#0B2334;border-radius:var(--radius);border-top:5px solid var(--accent);line-height:1.8;color-scheme:light;overflow-wrap:anywhere}
.recht-inhalt h2{font-size:clamp(1.25rem,3vw,1.65rem);line-height:1.35;margin:2rem 0 .8rem;color:#0B2334;letter-spacing:normal}
.recht-inhalt h2:first-child{margin-top:0}
.recht-inhalt h3{font-size:1.15rem;line-height:1.4;margin:0 0 .5rem}
.recht-inhalt p{margin:0 0 1rem;max-width:75ch}
.recht-inhalt a{color:#164D29;text-decoration:underline;text-underline-offset:.2em}
.recht-inhalt a:focus-visible{outline:3px solid #164D29;outline-offset:3px}
.recht-stand{font-size:.9rem;color:#415647}
.recht-hinweis{padding:1.25rem;border-left:4px solid #527700;background:#E4ECD9;margin:1.5rem 0}
.formular-hinweis{padding:1.25rem;margin-bottom:1.5rem;border:1px solid var(--accent);border-radius:var(--radius);line-height:1.6}
.formular-hinweis p{margin-top:.6rem}.formular-hinweis a{overflow-wrap:anywhere}