html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html { font-size:100%; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
:root{
  --lh-title: 1.25;
  --fs-h2: clamp(1.6rem, 3.0vw, 2.5rem);
  /* … deine restlichen Tokens … */
}
:root {
  /* --------- Farb-Tokens --------- */
  --brand: #49a5a2;           /* Primärfarbe – bei Bedarf seitenweise ändern */
  --ink-h: #3c3c3c;           /* Überschriften */
  --ink-t: #4a4a4a;           /* Fließtext */
  --muted: #6b7280;           /* sekundärer Text */
  --bg: #ffffff;              /* Standard-Hintergrund */
  --card-bg: #ffffff;
  --border: rgba(0, 0, 0, .08);

  /* --------- Typografie-Skala --------- */
  /* Basis: mobil-first, wächst fluid */
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.05rem);
  --lh-body: 1.6;
  --lh-title: 1.25;

  /* Headings */
  --fs-h1: clamp(2.2rem, 1.4rem + 2.5vw, 3.2rem);
  --fs-h2: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
  --fs-h3: clamp(1.35rem, 1.05rem + 1.2vw, 1.8rem);
  --fs-h4: clamp(1.15rem, 1.0rem + 0.6vw, 1.35rem);

  /* Section title + body tokens (unified) */
  --fs-h2: clamp(1.6rem, 3.0vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 2.4vw, 1.6rem);
  --fs-lead: clamp(1rem, 1.6vw, 1.08rem);           /* Intro text under h2 */
  --fs-info: clamp(13px, 1.5vw, 17px);              /* Information text size */

  /* Hero-Text (hell auf dunklem Hintergrund) */
  --hero-h1-size: clamp(2rem, 5.4vw, 3.2rem);
  --hero-h1-weight: 400;
  --hero-h1-color: #ffffff;
  --hero-p-size: clamp(1rem, 1.2vw, 1.1rem);
  --hero-p-weight: 100;
  --hero-p-color: #ffffff;
  --hero-eyebrow-color: #d6d6d6;

  /* Eyebrows (Standard / nicht Hero) */
  --eyebrow-color: var(--brand);
  --eyebrow-size: clamp(0.9rem, 1.6vw, 1.1rem);
  --eyebrow-letterspace: .12em;

  /* Cards */
  --card-title-size: clamp(1.5rem, 1.8vw, 1.6rem);
  --card-title-weight: 300;
  --card-title-color: var(--ink-h);
  --card-text-size: clamp(.98rem, 1.2vw, 1.05rem);
  --card-text-weight: 200;
  --card-text-color: var(--ink-t);
  --card-lineheight: 1.65;

  /* --------- Font Weights --------- */
  --fw-100: 100;
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /* --------- Spacing & Radius --------- */
  --space-2: .5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-14: clamp(2.5rem, 2rem + 2vw, 4rem);
  --radius-l: 1rem;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, .06);
}

/* =========================================
   Globale Grundtypografie (optional)
   Greift automatisch, wenn du willst.
   ========================================= */
body {
  color: var(--ink-t);
  background: var(--bg);
  font-weight: var(--fw-400);
  line-height: var(--lh-body);
  font-size: var(--fs-body);
}

h1, h2, h3, h4 {
  color: var(--ink-h);
  line-height: var(--lh-title);
  font-weight: var(--fw-600);
}

a { color: var(--brand); text-decoration: none; }

/* Eyebrow */
.eyebrow {
  color: var(--eyebrow-color);
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-letterspace);
  font-size: var(--eyebrow-size);
  font-weight: var(--fw-500);
}

/* Hero-Spezialfälle */
.hero h1 {
  font-size: var(--hero-h1-size);
  font-weight: var(--hero-h1-weight);
  color: var(--hero-h1-color);
}

.hero p {
  font-size: var(--hero-p-size);
  line-height: var(--lh-body);
  color: var(--hero-p-color);
  font-weight: var(--hero-p-weight);
}

/* Cards */
.card .title {
  font-size: var(--card-title-size);
  font-weight: var(--card-title-weight);
  color: var(--card-title-color);
}

.card p {
  font-size: var(--card-text-size);
  font-weight: var(--card-text-weight);
  line-height: var(--card-lineheight);
  color: var(--card-text-color);
}


/* ===== RESET ===== */
*{ box-sizing:border-box !important; margin:0; padding:0; }

/* === Universal media sizing to prevent overflow === */
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
iframe { max-width: 100%; }

html,body{ font-family: "Noto Sans Extra Condensed", sans-serif; background:#fff; color:#1f1f1f; scroll-behavior:smooth; }

/* Prevent any sideways scrolling on this page */
html, body { overflow-x: hidden !important; }

/* ===== Section Typography Tokens (global) ===== */
:root{
  --sec-title-color: #3c3c3c;
  --sec-title-size: clamp(2rem, 5.4vw, 3.2rem);
  --sec-title-weight: 400; 
  --sec-sub-color: #515760;
  --sec-sub-size: clamp(1rem, 1.2vw, 1.1rem);
  --sec-sub-weight: 300;
}

/* ===== Section Title/Subtitle – unify across sections (Energy page) ===== */
/* Titles */
.ea-headline,
.et-title,
.wb-title,
.faq__title,
.ea-chooser .eac-head h2,
.ea-pr-title{
  color: var(--sec-title-color) !important;
  font-family: "Kaisei Tokumin", serif !important;
  font-weight: var(--sec-title-weight) !important;
  font-size: var(--sec-title-size) !important;
  line-height: 1.06 !important;
  letter-spacing: -.01em !important;
}

/* Subtitles / Intros (only the section-level intros, not cards) */
.wb-intro,
.ea-chooser .eac-sub,
.ea-pr-intro{
  color: var(--sec-sub-color) !important;
  font-size: var(--sec-sub-size) !important;
  line-height: 1.65 !important;
  font-weight: var(--sec-sub-weight) !important;
}

/* ===== HERO (extended) – scoped & clean ===== */
/* ===== Sticky Umgebung neutral ===== */
main, .energy-teaser, .et-wrap, .et-grid{overflow:visible;transform:none;filter:none;contain:initial;}

/* (Optional) Divider global */
.mini-divider{
  display:flex;
  justify-content:center;
  padding:clamp(20px,4vw,36px) 0;
}

.hero-underline {
  display:block;
  width:clamp(160px,18vw,280px);
  height:2px;
  margin:16px auto 0;
  background:radial-gradient(circle at center, rgb(92, 92, 92) 0%,
    rgba(0, 0, 0, 0.6) 40%, rgba(58,166,160,0) 100%);
  border-radius:2px;
  opacity:.9;
}


/* Container & Höhe */
.en-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: visible;
}

/* HERO extended: Section height, image height via CSS variable */
.en-hero.en-hero--extended {
  height: 180vh;
  min-height: 1050px;
  /* Bildhöhe separat steuern: Rest bleibt schwarzer Hintergrund */
  --hero-media-h: 120vh;
}

@media (max-width: 900px) {
  .en-hero.en-hero--extended {
    height: 130vh;
    min-height: 820px;
    --hero-media-h: 90vh; /* Bild nicht endlos strecken – Rest schwarz */
  }
}

/* Hintergrundbild */
.en-hero .en-hero__media img {
  position: absolute;
  top: 0; left: 0; right: 0; /* kein bottom, damit Bildhöhe begrenzt bleibt */
  width: 100%;
  height: var(--hero-media-h, 120vh); /* Bildhöhe: Rest der Section bleibt schwarz */
  object-fit: cover;
  z-index: -2;
}

/* Overlay – weicher Fade in 100% Schwarz */
.en-hero .en-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--hero-media-h, 120vh);  /* Overlay deckt nur Bildhöhe ab */
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.48) 30%,
    rgba(0,0,0,.74) 60%,
    #000 100%              /* Ende des Bildes = 100% Schwarz */
  );
}

/* Content-Wrapper */
.en-hero .en-hero__wrap {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  color: #fff;
  padding-top: clamp(32px, 6vh, 80px);
  /* 5% Abstand links & rechts vom Viewportrand */
  padding-left: 5%;
  padding-right: 5%;
}

/* Grid: links Text, rechts Kundenstimme */
.en-hero .en-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  justify-items: stretch;
}

@media (max-width: 980px) {
  .en-hero .en-hero__grid { grid-template-columns: 1fr; }
  .en-hero .en-hero__col--quote { margin-top: 16px; }

  /* --- Mobile fit: prevent overflow, constrain widths --- */
  .en-hero .en-hero__wrap{ 
    padding-left: clamp(16px, 4vw, 24px);
    padding-right: clamp(16px, 4vw, 24px);
  }

  .en-hero .en-title,
  .en-hero .en-intro,
  .en-hero .en-points{ 
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Quote card must not have a fixed width on mobile */
  .en-hero .quote-card{
    width: 100%;
    max-width: none;
  }
  /* CTA row & buttons: full width on small screens */
  .en-hero .en-cta-row{ max-width: 100%; }
  .en-hero .en-cta-row a.btn-primary{ width: 100%; }

  .en-hero .en-hero__grid,
  .en-hero .en-hero__col--main,
  .en-hero .en-hero__col--quote{ position: relative; z-index: 1; }

  /* Ensure title and text never exceed viewport width on mobile */
  .en-hero .en-title{ 
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .en-hero .en-intro,
  .en-hero .en-points{ 
    max-width: 100%;
  }

  /* CTA buttons: include padding in width to avoid overflow */
  .en-hero .en-cta-row a.btn-primary{
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
}

/* Typografie links */
.en-hero .en-eyebrow {
  color: #d6d6d6;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .85rem;
}

.en-hero .en-title {
  font-family: "Kaisei Tokumin", serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  margin: 12px 0 20px;
  color: #fff;
}

.en-hero .en-intro {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 60ch;
  opacity: 1.0;
  font-weight: 100;
}

.en-hero .en-points {
  list-style: none;
  margin: 20px 0 0;
}

.en-hero .en-points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 8px 0;
  color: #fff;
  font-weight: 100;
  font-size: 1.0rem;
}

.en-hero .ok {
  color: #3aa6a0;
  font-weight: 700;
}

/* === CTA: zwei exakt gleiche Buttons in Glass-Optik === */
/* Zeile */
.en-hero .en-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* gleiche Breite */
  gap: 14px;
  margin-top: 22px;
  max-width: min(560px, 100%);
}

@media (max-width: 560px) {
  .en-hero .en-cta-row { grid-template-columns: 1fr; }
}

/* === MOBILE SAFETY: clamp hero widths & remove horizontal overflow === */
@media (max-width: 640px){
  /* make sure the whole hero cannot create horizontal scroll */
  .en-hero{ overflow-x: hidden; }

  /* tight gutters so content never touches the edge */
  .en-hero .en-hero__wrap{ padding-left: 16px; padding-right: 16px; max-width: 100%; }

  /* all text blocks must stay within viewport */
  .en-hero .en-title,
  .en-hero .en-intro,
  .en-hero .en-points,
  .en-hero .en-cta-row{ max-width: calc(100vw - 32px); width: 100%; }

  /* intro can’t push width via long words */
  .en-hero .en-intro{ overflow-wrap: anywhere; word-break: break-word; }

  /* one-column CTA row and box-sized buttons so padding does not grow width */
  .en-hero .en-cta-row{ grid-template-columns: 1fr; margin-right: 0; }
  .en-hero .en-cta-row a.btn-primary{
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }
}


/* === HERO CTA Button === */
.energie-page .btn-primary.hero-cta{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 15px 40px 15px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
  font-weight: 200;
  color: #fff;
  background: #49a5a2;
  box-shadow: 0 8px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  margin-top: 15px;
}
.energie-page .btn-primary.hero-cta .hero-cta__label{ line-height:1; margin-right:0 !important; display:inline-block; }

.energie-page .btn-primary.hero-cta .cta-arrow{
  position: absolute;
  right: 16px;
  top: 50%;
  width: 20px; height: 20px;
  transform: translate(0,-50%);
  opacity: 1;
  transition: opacity .2s ease;
  pointer-events: none;
}
.energie-page .btn-primary.hero-cta svg.cta-arrow{ display:block; }

.energie-page .btn-primary.hero-cta:hover{
  background: #2f918b;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

.energie-page .btn-primary.hero-cta:hover .cta-arrow{
  animation: cta-arrow-loop .45s cubic-bezier(.22,.8,.25,1) both;
}

@keyframes cta-arrow-loop{
  0%   { transform: translate(0,-50%);   opacity: 1; }
  40%  { transform: translate(10px,-70%); opacity: 0; }
  50%  { transform: translate(-12px,-30%); opacity: 0; }
  100% { transform: translate(0,-50%);    opacity: 1; }
}

/* Motion-Respect */
@media (prefers-reduced-motion: reduce){
  .energie-page .btn-primary.hero-cta{ transition:none; transform:none !important; }
  .energie-page .btn-primary.hero-cta:hover .cta-arrow{ animation:none; }
}


/* === Kundenstimme (rechts) === */
.en-hero .quote-card {
  padding: clamp(14px, 2vw, 18px);
  color: #eef2f6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.2vw, 14px);
  width: 450px;
}

.en-hero .quote-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(6px, 1vw, 10px);
}

.en-hero .quote-rating img {
  width: clamp(46px, 5vw, 60px);
  height: auto;
  display: block;
}

.en-hero .quote-rating strong {
  display: block;
  font-weight: 700;
  color: #fff;
  font-size: clamp(.95rem, 1.2vw, 1rem);
  margin-bottom: -10px;
}

.en-hero .quote-rating span {
  color: rgba(255,255,255,.85);
  line-height: 1.5;
  font-size: clamp(.85rem, 1vw, .9rem);
  margin-top: 0px;
  font-weight: 200;
}

.en-hero .quote-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: clamp(8px, 1.2vw, 12px);
}

.en-hero .quote-author {
  font-weight: 500;
  color: #fff;
  font-size: 1.0rem;
}

.en-hero .quote-role {
  color: rgba(255,255,255,.75);
  font-size: .8rem;
  font-weight: 200;
}



/* === Infocards unten – überlappen den Fade === */
.en-hero .en-hero-cards {
  position: absolute;
  /* gleichmäßige Außenabstände wie der Text (5% vom Viewport) */
  inset-inline: 5%;                 /* = left/right */
  bottom: clamp(90px, 12vh, 70px);

  /* Breite automatisch, optional Deckel für sehr breite Screens */
  width: auto;
  max-width: 1200px;
  margin-inline: auto;              /* zentriert zwischen den 5%-Gutters */

  display: grid;
  grid-template-columns: 1fr 1fr;   /* exakt zwei gleich breite Spalten */
  gap: clamp(18px, 2.4vw, 28px);    /* definierter Abstand in der Mitte */
  align-items: stretch;
  z-index: 2;
}

@media (max-width: 900px) {
  .en-hero .en-hero-cards{
    display: none; /* Mobile: Bilder im Hero ausblenden – Text hat volle Ruhe */
  }

  /* Extra safety: the main grid stacks and stays inside the viewport */
  .en-hero .en-hero__grid{ grid-template-columns: 1fr; }
}


.en-hero .hcard {
  position: relative;
  background: #fff;
  color: #0f1115;
  border-radius: 22px;
  
  padding: 0;
  box-shadow: 0 28px 60px rgba(0,0,0,.24);
  overflow: hidden;
  display: block;
  min-height: clamp(260px, 28vw, 380px);
  aspect-ratio: 16 / 10;
  width: 100%;
  box-sizing: border-box;
}

.en-hero .hcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: center;
  max-width: 100%;
}

.en-hero .en-hero-cards .hcard:nth-child(1) img {
  object-position: 42% 50%;
}
.en-hero .en-hero-cards .hcard:nth-child(2) img {
  object-position: 58% 50%;
}

.en-hero .hcard > * { pointer-events: none; }
.en-hero .hcard * { overflow-wrap: anywhere; }



/* Align main and quote columns in HERO – gleich ausrichten */
.en-hero .en-hero__col--main,
.en-hero .en-hero__col--quote{
  align-self: start;                     /* <-- beide oben ausrichten */
}

/* Gemeinsamer, identischer Offset nach oben */
.en-hero .en-hero__col--main{  margin-top: clamp(-500px, -120vh, -220px); }
.en-hero .en-hero__col--quote{
  justify-self: end;                 /* an den rechten Rand der Grid-Spalte */
  margin-right: 0;
  margin-top: clamp(-320px, -120vh, -220px); /* bestehender vertikaler Offset */
}

/* Auf kleineren Screens Offsets zurücknehmen */
@media (max-width: 980px){
  .en-hero .en-hero__col--main,
  .en-hero .en-hero__col--quote{
    margin-top: 0;
  }
}




/* ===== Energieausweis – Benefits (3 Cards) ===== */
:root{
  --ea-ink:#0f1115;
  --ea-muted:#5d616a;
  --ea-bg:#efefef;
  --ea-brand:#3aa6a0;
  --ea-radius:18px;
  --ea-shadow:0 18px 42px rgba(0,0,0,.08);
}

.ea-benefits{
  background:#fff;
  padding:clamp(40px,6vw,96px) 0;
  color:var(--ea-ink);
  margin-top: 10px;
}
.ea-wrap{ width:min(1200px,92%); margin:0 auto; margin-top: 80px; }

.ea-headline{
  font-family: "Kaisei Tokumin", serif;
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-title);
  color: var(--ink-h);
  font-weight: var(--fw-500);
  letter-spacing:-.01em;
  margin:0 0 clamp(28px,4vw,48px);
  margin-top: 80px;
}

.ea-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.6vw,28px);
}

.ea-card{
  background:var(--ea-bg);
  border-radius:24px;
  padding:clamp(20px,2.8vw,28px);
  box-shadow:var(--ea-shadow);
  display:flex;
  flex-direction:column;
  min-height: clamp(220px, 22vw, 280px);
  border: 1px solid #0000001c;
}

/* ===== EA-Icons mit Bild ===== */
.ea-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.ea-icon img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  display: block;
}

.ea-title{
  font-size: var(--card-title-size);
  font-weight: var(--card-title-weight);
  margin: 0 0 10px;
  color: var(--ink-h);
  font-family: "Kaisei Tokumin", serif;
}

.ea-text{
  color: var(--card-text-color);
  line-height: var(--card-lineheight);
  font-size: var(--card-text-size);
  font-weight: var(--card-text-weight);
  margin: 0;
  margin-top: auto;
}

/* Responsive: 3 → 2 → 1 Spalte */
@media (max-width: 980px){
  .ea-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  .ea-grid{ grid-template-columns:1fr; }
}




/* ===== ENERGY TEASER ===== */
:root{
  --et-brand:#3aa6a0;
  --et-ink:#1f2226;
  --et-muted:#6d7178;
  --et-card:#efefef;
  --et-radius:16px;
  --et-shadow:0 14px 34px rgba(0,0,0,.08);
  --et-media-size:clamp(360px,42vw,520px);
  --et-pin-shift:0px;
}


/* ===== Energy-Teaser (Layout) ===== */
.energy-teaser {
  --p: 0;
  background: #fff;
  color: var(--et-ink);
}

.et-wrap {
  width: min(1200px, 92%);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 80px) 0;
}

.et-title {
  font-family: "Kaisei Tokumin", serif;
  font-weight: var(--fw-500);
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-title);
  color: var(--ink-h);
  margin-bottom: clamp(22px, 3.6vw, 30px);
}

.et-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(26px, 3.6vw, 44px);
  align-items: start;
}

/* Linkes Bild: sticky + Parallax */
.et-media {
  position: sticky;
  top: calc(50vh - var(--et-media-size) / 2 + var(--et-pin-shift));
  align-self: start;
  width: var(--et-media-size);
  height: var(--et-media-size);
  border-radius: var(--et-radius);
  border: 2px solid #fff;
  overflow: hidden;
  box-shadow: var(--et-shadow);
  transform: translateY(calc(var(--p) * -28px));
  will-change: transform;
}

.et-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 2px solid #fff;
}

/* Rechte Liste */
.et-steps {
  display: grid;
  gap: clamp(18px, 2.6vw, 24px);
}

/* Card – Logo/Badge oben, Titel knapp darunter, Text am Card-Ende */
.et-step {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--et-card);
  border-radius: 14px;
  border: 2px solid #fff;
  padding: clamp(18px, 2.6vw, 22px) clamp(20px, 3vw, 26px);
  box-shadow: var(--et-shadow);
  min-height: clamp(160px, 28vh, 240px);
  /* Reveal */
  opacity: 0;
  transform: translateY(28px) translateX(40px) scale(.985);
  transition: opacity .55s ease, transform .55s cubic-bezier(0.22, 1, 0.36, 1);
}

.et-step.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ===== Step-Icons statt Bullet ===== */
.et-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;

  margin-bottom: 16px;  /* Abstand zum Titel */
}

.et-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

/* Inhalt: Titel direkt unter dem Badge, Text am Card-Ende */
.et-copy {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;

  /* Abstand unter dem Badge – klein halten */
  margin-top: 14px;
}

.et-copy h3 {
  font-family: "Kaisei Tokumin", serif;
  font-weight: var(--fw-500);
  font-size: var(--fs-h3);
  line-height: var(--lh-title);
  color: var(--ink-h);
  margin: 0 0 6px;
}

.et-copy p {
  color: var(--card-text-color);
  line-height: var(--card-lineheight);
  font-size: var(--card-text-size);
  font-weight: var(--card-text-weight);
  margin-top: auto;
  margin-bottom: 0;
}

/* Responsive */
@media (max-width: 980px) {
  .et-grid {
    grid-template-columns: 1fr;
  }
  .et-media {
    position: relative;
    top: auto;
    width: min(92vw, 640px);
    height: auto;
    aspect-ratio: 16 / 10;
    transform: none !important;
  }
}

/* ===== Sticky-Umgebung neutralisieren (Verhindert Sticky-Bugs) ===== */
/* WICHTIG: Kein overflow/transform/contain auf Vorfahren, sonst bricht position:sticky */
.energie-page,
.energie-page main,
.energie-page .content,
.energie-page .page,
.energie-page .en-container,
.energie-page .container,
.energie-page .energy-teaser,
.energie-page .energy-teaser .et-wrap,
.energie-page .energy-teaser .et-grid{
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  contain: initial !important;
  will-change: auto !important;
}




/* === Wrapper / Grundlayout === */
.why-band{
  position: relative;
  overflow: hidden;
  background: #ffffff;
  padding: clamp(56px, 8vw, 120px) 0;
  color: #0f1115;
}
.wb-wrap{ width:min(1200px,92%); margin:0 auto; position:relative; }

/* Halbtransparenter Großschriftzug im Hintergrund */
.wb-bgword{
  position: absolute;
  inset: 0 auto auto 60%;
  transform: translateX(-40%);
  font-family: "Kaisei Tokumin", serif;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: clamp(140px, 32vw, 470px);
  line-height: .85;
  color: rgba(54, 54, 54, 0.075);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  margin-top: -80px;
}

@media (max-width: 900px){
  /* BG-Word sauber zentrieren + hinter Content halten */
  .wb-bgword{
    top: clamp(80px, 18vw, 160px);
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -8%);
    font-size: clamp(120px, 48vw, 320px);
    line-height: .9;
    margin-top: 0;           /* nicht nach oben abschneiden */
    z-index: 0;              /* unter Content */
  }
  /* Alles außer dem BG‑Word über das BG‑Word legen */
  .wb-wrap > *:not(.wb-bgword){ position: relative; z-index: 1; }
}

/* Kopfbereich */
.wb-eyebrow{
  display:block;           /* volle Breite, einfacher zu zentrieren */
  width:100%;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-size: var(--eyebrow-size);
  margin-bottom:10px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  color: var(--brand);
  font-weight: var(--fw-200);
}
.wb-title{
  font-family: "Kaisei Tokumin", serif;
  line-height: var(--lh-title);
  letter-spacing: -.01em;
  margin: 8px 0 12px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 38ch;
  font-size: var(--fs-h1) !important;
  color: var(--ink-h);
  font-weight: var(--fw-500);
}
.wb-intro{
  max-width: 75ch;
  line-height: var(--lh-body);
  margin: 0 0 clamp(24px,4vw,40px);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--fs-lead);
  color: var(--ink-t);
  font-weight: var(--fw-200) !important;
}



/* Grid – 2 Reihen, 2 Spalten */
.wb-grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-auto-rows: auto;
  gap: clamp(18px, 2.6vw, 28px);
  align-items: stretch;
  margin-top: 200px;
}

/* Karten & Medien */
.wb-card{
  background: #242424;               /* gleiche Farbe wie Panel */
  border-radius: 22px;
  padding: clamp(20px, 2.8vw, 28px);
  box-shadow: 0 18px 42px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;            /* Titel oben, Inhalt unten */
  gap: 14px;
  min-height: clamp(260px, 32vw, 420px);
  
}

.wb-card--info{
  grid-column: 1;
  grid-row: 1;
}

.wb-media{
  position: relative;
  background:#fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0,0,0,.08);
}
.wb-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Row 1 – großes Bild rechts */
.wb-media--hero{
  grid-column: 2;
  grid-row: 1;
  min-height: clamp(280px, 42vw, 580px);
}

/* Row 2 – kleines Bild links */
.wb-media--chart{
  grid-column: 1;
  grid-row: 2;
  min-height: clamp(280px, 42vw, 580px);
  background:#fff;
}

/* Row 2 – großes Panel rechts (gleiches Layout wie Card) */
.wb-card--panel{
  grid-column: 2;
  grid-row: 2;
  background: #242424;
  display: flex;
  flex-direction: column;            /* Titel oben, Text unten */
}

/* Typo & Abstände in den Karten */
.wb-card-title{
  font-family: "Kaisei Tokumin", serif;
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.1;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  margin: 0;                         /* steht ganz oben */
  color:#909090;                     /* an Panel-Farbe angepasst */
}

.wb-card-text{
  color:#909090;                     /* an Panel-Farbe angepasst */
  line-height:1.7;
  margin: 0;
  margin-top: auto;
  font-size:clamp(.98rem,1.2vw,1.05rem);
  font-weight: 200;                 /* Text an den unteren Bereich drücken */
}

/* CTA sitzt ganz unten, kleiner Abstand zum Text */
.wb-btn{
  align-self:flex-start;
  margin-top: 10px;                  /* Abstand zum Text */
  background: #909090;
  color: #fff;
  text-decoration:none;
  font-weight: 200;
  font-size: 1rem;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.wb-btn:hover{ background:#646464; transform: translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.2); }



/* Panel-Card (2. Reihe rechts): Text ebenfalls unten */
.wb-panel-title{
  font-family: "Kaisei Tokumin", serif;
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.1;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  margin: 0 0 8px;
  color:#909090;
}
.wb-panel-text{
  color:#909090;
  line-height:1.8;
  max-width: 72ch;
  margin: 0;
  margin-top: auto;
  font-size:clamp(.98rem,1.2vw,1.05rem);
  font-weight: 200;
}

/* Reveal-Up */
.reveal-up{ opacity:0; transform: translateY(24px); transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.reveal-up.is-in{ opacity:1; transform: translateY(0); }

/* Responsive */
@media (max-width: 980px){
  .wb-grid{ 
    grid-template-columns: 1fr; 
    margin-top: clamp(40px, 10vw, 80px); /* weniger Luft auf Mobile */
  }
  /* Reihenfolge mobil:
     1) Großes Bild (hero)
     2) Infocard ohne Button (wb-card--info)
     3) Zweites Bild (chart)
     4) Infocard mit Button (wb-card--panel)
  */
  .wb-media--hero{  grid-column:1; grid-row:1; min-height: clamp(240px, 50vw, 460px); }
  .wb-card--info{   grid-column:1; grid-row:2; }
  .wb-media--chart{ grid-column:1; grid-row:3; }
  .wb-card--panel{  grid-column:1; grid-row:4; }
}






/* ===== EA-Chooser (scoped) ===== */
.ea-chooser{
  --eac-brand: #3aa6a0;            /* Marken-Türkis */
  --eac-ink:   #0f1115;
  --eac-muted: #5d616a;
  --eac-card:  #ffffff;
  --eac-sep:   rgba(15,17,21,.08);
  --eac-shadow: 0 20px 48px rgba(0,0,0,.12);
  background:
    /* zartes Rasterpapier */
    linear-gradient(#fff,#fff),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.045) 0, rgba(0,0,0,.045) 1px, transparent 1px, transparent 24px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,.04) 0, rgba(0,0,0,.04) 1px, transparent 1px, transparent 24px
    );
  background-blend-mode: normal, multiply, multiply;
  padding: clamp(40px, 6vw, 90px) 0;
  color: var(--eac-ink);
}
.ea-chooser .eac-wrap{ width:min(1200px,92%); margin:0 auto; }

/* Head */
.ea-chooser .eac-head{ text-align:left; margin-bottom: clamp(22px, 4vw, 38px); }
.ea-chooser .eac-head h2{
  margin:0 0 8px;
  font-family: "Kaisei Tokumin", serif; font-weight:500;
  letter-spacing:-.01em; line-height:1.08;
  margin-left: 0;
}
.ea-chooser .eac-sub{
  margin:0; max-width: 70ch; line-height:1.65; text-align:left;
}

/* Tabelle-Card */
.ea-chooser .eac-table{
  background: var(--eac-card);
  border-radius: 12px;
  border: 1px solid var(--eac-sep);
  padding: 0;
  overflow: hidden;
  position: relative;
  box-shadow: none;
}

@media (max-width: 820px){
  .ea-chooser .eac-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* 4-Spalten Grid: 1x Zeilenkopf + 3 Daten-Spalten */
.ea-chooser .eac-colhead,
.ea-chooser .eac-row{
  display:grid;
  grid-template-columns: 1.05fr 1fr 1fr 1fr;
  align-items: stretch;
}
.ea-chooser .eac-colhead{
  background: #f1f3f5;
  border-bottom: 1px solid var(--eac-sep);
}

/* Spaltenüberschriften */
.ea-chooser .eac-spacer{ /* leeres Eckfeld */ }
.ea-chooser .eac-th{
  background: #f1f3f5;
  color: #1d2a27;
  border-radius: 0;
  padding: clamp(12px, 1.6vw, 14px);
  margin: 0;
  text-align:center;
  font-weight: 700;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--eac-sep);
}

.ea-chooser .eac-th:last-child{ border-right: 0; }

/* Vertikale Linien für gesamte Tabelle */
.ea-chooser .eac-colhead > *:not(:last-child),
.ea-chooser .eac-row > *:not(:last-child){
  border-right: 1px solid var(--eac-sep);
}

/* Individuelle Farben für die 3 Spaltenköpfe */
.ea-chooser .eac-colhead .eac-th:nth-child(2),
.ea-chooser .eac-colhead .eac-th:nth-child(3),
.ea-chooser .eac-colhead .eac-th:nth-child(4){
  background: inherit;
}

/* Reihen */
.ea-chooser .eac-row{ position: relative; }
.ea-chooser .eac-row + .eac-row{ border-top: 1px solid var(--eac-sep); }

/* Entfernt doppelte Linien */
.ea-chooser .eac-row > .eac-td:last-child,
.ea-chooser .eac-colhead > .eac-th:last-child {
  border-right: none;
}

/* Zeilenkopf (links) */
.ea-chooser .eac-rh{
  display:flex; align-items:center;
  padding: clamp(12px, 1.8vw, 16px);
  font-weight:600;
}
.ea-chooser .eac-rhl{ display:block; }

/* Zellen */
.ea-chooser .eac-td{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(12px, 1.8vw, 16px);
  margin: 0;
  border-radius: 0;
  background: #fff;
  position: relative;
  text-align:center;
  font-weight: 500;
  color:#1a2024;
  min-height: 58px;
  border-right: 1px solid var(--eac-sep);
}
.ea-chooser .eac-row > .eac-td:last-child{ border-right: 0; }

/* senkrechte Trenner (nur große Screens) */
@media (min-width: 820px){
  .ea-chooser .eac-colhead > *:not(:first-child):not(:last-child),
  .ea-chooser .eac-row > *:not(:first-child):not(:last-child){
    box-shadow: none;
  }
}

/* Badge-Farben per Datentyp */
.ea-chooser .eac-td[data-type="need"],
.ea-chooser .eac-td[data-type="free"]{
  background: transparent;
  color:#1a2024;
  border: 0;
}

/* CTAs – einheitlicher Button-Stil auf allen Seiten */
.ea-chooser .eac-ctas {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  margin-top: clamp(16px, 2.6vw, 22px);
  flex-wrap: wrap;
}

/* Grundstil */
.ea-chooser .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #49a5a2;
  color: #fff;
  text-decoration: none;
  font-weight: 200;
  font-size: 1rem;
  padding: 12px 28px;
  border-radius: 999px;
  border: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

/* Hover-Effekt */
.ea-chooser .btn:hover {
  background: #2f918b;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

/* Optional: Wenn du Varianten (hell/dunkel) brauchst, kannst du sie so weiterführen */
.ea-chooser .btn.light {
  background: rgba(255,255,255,.36);
  color: #000000;
  border: 1px solid rgba(65, 65, 65, 0.28);
}
.ea-chooser .btn.light:hover {
  background: rgba(255,255,255,.24);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

/* Hinweistext */
.ea-chooser .eac-note{
  text-align:left; margin: clamp(10px, 2vw, 16px) 0 0;
  margin-left: 0;
  margin-right: 0;
  color: var(--eac-muted);
  max-width: 72ch; line-height:1.6; font-size: .95rem;
}

/* Responsive: Tabelle stapeln */
@media (max-width: 820px){
  .ea-chooser .eac-colhead{
    display:none; /* Spaltenköpfe verbergen */
  }
  .ea-chooser .eac-row{
    grid-template-columns: 1fr; gap: 8px;
    padding: 10px 6px; border-top: 1px solid var(--eac-sep);
  }
  .ea-chooser .eac-rh{ padding: 6px 8px 2px; }
  .ea-chooser .eac-td{
    justify-content: space-between; text-align:left;
    padding: 12px; margin: 0;
  }
  /* Pseudo-Spaltenlabel auf kleinen Screens einblenden */
  .ea-chooser .eac-row .eac-td:nth-child(2)::before{ content:"Baujahr bis 1977"; color:#667; font-weight:600; }
  .ea-chooser .eac-row .eac-td:nth-child(3)::before{ content:"Baujahr ab 1978"; color:#667; font-weight:600; }
  .ea-chooser .eac-row .eac-td:nth-child(4)::before{ content:"Neubau";          color:#667; font-weight:600; }
  .ea-chooser .eac-td::before{ margin-right: 10px; }
  .ea-chooser .eac-row, .ea-chooser .eac-td, .ea-chooser .eac-rh{ max-width: 100%; word-break: break-word; overflow-wrap:anywhere; }
}


/* ===== Preise & Leistungen ===== */
:root{
  --brand:#3aa6a0;
  --ink:#3c3c3c;
  --muted:#5d616a;
  --card:#ffffff;
  --bd: #e7eaee;
  --shadow: 0 18px 42px rgba(0,0,0,.08);
  --grid: rgba(15,17,21,.04); /* Rasterfarbe */
}

.ea-wrap{ width:min(1200px,92%); margin:0 auto; }

.ea-pr-title{
  font-family: "Kaisei Tokumin", serif;
  letter-spacing:-.01em;
  margin: 0 0 8px;
  margin-top: 80px;
}
.ea-pr-intro{
  margin: 0 0 clamp(18px,2.2vw,24px);
  line-height: 1.2;
}

/* Card mit Raster-Hintergrund */
.ea-pr-card{
  background: var(--card);
  border:1px solid var(--bd);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow:hidden;
  max-width: 100%;
  /* dezentes Karoraster */
  background-image:
    linear-gradient(0deg, var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

/* Tabelle */
.ea-pr-table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  background: rgba(255,255,255,.82);
  /* Prevent page overflow – allow self scroll if needed on very small screens */
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

@media (min-width: 861px){
  /* Desktop: echte Tabelle ohne Scroll-Wrapper, verhindert weiße Fläche rechts */
  .ea-pr-table{ display: table; table-layout: fixed; overflow-x: visible; }
  .ea-pr-table thead, .ea-pr-table tbody{ display: table-header-group; }
  .ea-pr-table tr{ display: table-row; }
  .ea-pr-table thead, .ea-pr-table tbody, .ea-pr-table tr{ width: auto; }
}
.ea-pr-table thead th{
  text-align:left;
  font-weight:500;
  color:#2a2e35;
  padding: 16px 18px;
  border-bottom: 1px solid var(--bd);
  background: linear-gradient(180deg,#fff, #fafbfc);
}
.ea-pr-table thead, .ea-pr-table tbody, .ea-pr-table tr { width: 100%; }
.ea-pr-table th, .ea-pr-table td { word-break: break-word; overflow-wrap: anywhere; }

.ea-pr-feat-head{ 
    width: 52%; 
    font-size: 20px;
}


.ea-pr-col{ 
    width: 24%; 
    text-align:center;
    font-size: 20px;
}

.ea-pr-table tbody th{
  padding: 16px 18px;
  color:#2a2e35;
  font-weight:300;
  line-height:1.5;
  border-bottom:1px solid var(--bd);
  background: rgba(255,255,255,.86);
  text-align:left;                 /* linksbündig */
}
.ea-pr-table tbody td{
  text-align:center;
  border-bottom:1px solid var(--bd);
  background: rgba(255,255,255,.78);
  padding: 16px 10px;
}

/* Desktop cell normalization */
@media (min-width: 861px){
  .ea-pr-table th, .ea-pr-table td{ white-space: normal; vertical-align: middle; }
}

/* Häkchen */
.ea-pr-table td.ok{
  position: relative;
  /* Setze hier die gewünschte Farbe – jetzt steuert dieser Wert das Häkchen */
  color:  #49a5a2; /* z.B. schwarz; kann beliebig überschrieben werden */
}

.ea-pr-table td.ok::before{
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  /* Die Häkchenfarbe kommt jetzt aus `currentColor` (= .ok { color }) */
  background: currentColor;
  /* leichtes Shadow für mehr Kontrast, optional */
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  /* SVG als Maske formt das gefüllte Quadrat zu einem Häkchen */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M20.285 6.708a1 1 0 0 1 0 1.414l-9.192 9.192a1 1 0 0 1-1.414 0L3.715 11.55a1 1 0 1 1 1.414-1.414l5.04 5.04 8.485-8.485a1 1 0 0 1 1.631.017z"/></svg>') center/16px 16px no-repeat;
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M20.285 6.708a1 1 0 0 1 0 1.414l-9.192 9.192a1 1 0 0 1-1.414 0L3.715 11.55a1 1 0 1 1 1.414-1.414l5.04 5.04 8.485-8.485a1 1 0 0 1 1.631.017z"/></svg>') center/16px 16px no-repeat;
}

/* Footer mit Preisen und CTAs unter der Tabelle */
.ea-pr-footer{
  display:grid;
  grid-template-columns: 52% 24% 24%;
  gap: 0;
  align-items:center;
  padding: clamp(14px,2.2vw,18px);
  border-top: 1px solid var(--bd);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
}

.ea-pr-cell{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-start;
  justify-self: start;
  padding-left: 18px;
}

/* Linke Preiszelle unter Bedarfsspalte, rechte unter Verbrauchsspalte */
.ea-pr-footer .ea-pr-cell:first-child{ grid-column: 2; }
.ea-pr-footer .ea-pr-cell:last-child{  grid-column: 3; }
.ea-price{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:  20px;
}

.ea-price span{
  color:#2a2e35;
  font-weight:600;
}
.ea-price strong{
  font-size:1.1rem;
  color: #49a5a2;
}



/* Abschluss-Notiz */
.ea-pr-note{
  margin: clamp(12px,2vw,16px) 0 0;
  color: var(--muted);
  line-height:1.2;
  font-weight: 200;
  font-size: 12px;
  margin-bottom: 80px;
}

/* responsive */
@media (max-width: 860px){
  .ea-pr-card{ overflow-x: hidden; max-width: 100%; }
  .ea-pr-table{ display:block; width:100%; max-width:100%; }
  .ea-pr-feat-head{ width:auto; }
  .ea-pr-footer{ grid-template-columns:1fr; }
  .ea-pr-cell{ justify-content:space-between; justify-self: stretch; }
  .ea-pr-footer .ea-pr-cell:first-child,
  .ea-pr-footer .ea-pr-cell:last-child{ grid-column: auto; }
  /* On mobile stack pricing footer nicely and avoid horizontal overflow */
  .ea-pr-table thead{ display:none; }
  .ea-pr-table tbody tr{ padding: 4px 2px; }
  .ea-pr-table tr{ display:block; border-bottom:1px solid var(--bd); }
  .ea-pr-table tbody th,
  .ea-pr-table tbody td{ display:flex; justify-content:space-between; align-items:center; padding: 12px 14px; }
}

/* a11y helper */
.sr-only{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}



/* ===== FAQ (scoped) ===== */
.faq{
  --faq-ink: #0f1115;
  --faq-muted:#5d616a;
  --faq-border: rgba(15,17,21,.08);
  --faq-hover:#1b1f24;
  --faq-accent:#3aa6a0;

  background:#fff;
  color:var(--faq-ink);
  padding: clamp(40px, 6vw, 96px) 0;
}
.faq__wrap{
  width: min(1200px, 92%);
  margin: 0 auto;
}
.faq__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.9rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faq-muted);
}
.faq__eyebrow::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--faq-ink);
  display:inline-block;
}
.faq__title{
  font-family: "Kaisei Tokumin", serif;
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.01em;
  margin: 12px 0 32px;
}

.faq__list{
  margin: 16px 0 0;
  padding: 0;
  list-style:none;
}
.faq__item{
  border-bottom:1px solid var(--faq-border);
}

.faq__question{
  width:100%;
  background:none;
  border:0;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: clamp(16px, 2.2vw, 22px) 0;
  font: inherit;
  color: var(--faq-ink);
  cursor:pointer;
  transition: transform .22s ease, color .22s ease;
  will-change: transform, color;
}
.faq__question:hover{
  color:var(--faq-hover);
  transform: translateX(10px);
}
.faq__question:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--faq-accent) 60%, #fff);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Plus/Minus Icon */
.faq__icon{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:50%;
  background: #f4f6f8;
  position:relative;
  transition: background .2s ease, transform .2s ease;
}
.faq__question:hover .faq__icon{ background:#eef2f4; }
.faq__icon::before,
.faq__icon::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:14px; height:2px;
  background:#0f1115;
  transform: translate(-50%,-50%);
  border-radius:2px;
}
.faq__icon::after{ /* vertikaler Strich → Plus */
  transform: translate(-50%,-50%) rotate(90deg);
}
.faq__question[aria-expanded="true"] .faq__icon::after{
  opacity:0; /* wird zu Minus */
}
.faq__question[aria-expanded="true"] .faq__icon{
  background:#e9f5f3;
}

/* Antwort mit sanfter Höhen-Animation */
.faq__answer{
  overflow:hidden;
  max-height:0;
  transition: max-height .28s ease;
  will-change: max-height;
}
.faq__answer p{
  color:var(--faq-muted);
  line-height:1.7;
  margin: 0 0 clamp(16px,2vw,18px);
  padding-right: clamp(8px,2vw,12px);
  /* zusätzlicher Innenabstand oberhalb */
  padding-top: 4px;
}

/* Offen-State (per JS) */
.faq__item.is-open .faq__answer{
  /* max-height wird inline vom Script gesetzt; diese Klasse dient nur als Hook */
}

/* FAQ Footnote */
.faq__footnote{
  margin: clamp(14px, 2.2vw, 20px) 0 0;
  color: var(--faq-muted);
  line-height: 1.65;
  font-size: .95rem;
}

.faq__footnote a{
  color: var(--faq-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color .2s ease, border-color .2s ease;
}

.faq__footnote a:hover{
  color: var(--faq-ink);
  border-bottom-color: transparent;
}


/* kleinere Screens */
@media (max-width: 640px){
  .faq__title{ font-size: clamp(1.8rem, 8vw, 2.4rem); }
}





/* =========================
   Kontakt-Teaser (Energie-Seite)
   ========================= */
.energie-page .contact-teaser.contact-teaser--overlay{
  padding: clamp(24px, 4vw, 40px) 0;
}

.energie-page .contact-teaser.contact-teaser--overlay .ct-wrap{
  position: relative;
  width: min(1175px, 90%) !important;
  height: 650px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 80px;
}

.energie-page .contact-teaser.contact-teaser--overlay .ct-media{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.energie-page .contact-teaser.contact-teaser--overlay .ct-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

.energie-page .contact-teaser.contact-teaser--overlay .ct-panel{
  position: absolute;
  top: clamp(40px, 2.0vw, 30px);
  right: clamp(45px, 5.2vw, 40px);
  bottom: clamp(40px, 2.0vw, 30px);

  width: 50%;
  min-width: 420px;
  max-width: 600px;

  background: var(--ct-bg, #242424);
  color: var(--ct-ink, #909090);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;

  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: start;
  justify-items: start;

  gap: clamp(12px, 2vw, 18px);
  padding: clamp(24px, 4vw, 48px);
  z-index: 2;
  box-shadow: none;
  outline: 1px solid rgba(0,0,0,.06);
}

.energie-page .contact-teaser.contact-teaser--overlay .ct-title{
  margin: 0;
  font-family: "Kaisei Tokumin", serif;
  font-weight: 300;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.15;
  align-self: start;
  color: #909090;
}
.energie-page .contact-teaser.contact-teaser--overlay .ct-lead{
  margin: 0 0 10px 0;
  font-weight: 300;
  line-height: 1.65;
  color: #909090;
  max-width: 46ch;
  align-self: end;
}
/* Energie – CT Button wie alle anderen (mit Pfeil & Spacing) */
.energie-page .contact-teaser.contact-teaser--overlay .ct-btn{
  align-self: end;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: #909090;
  color: #242424;
  text-decoration: none;
  font-weight: 300;
  font-size: 1rem;
  padding: 12px 56px 12px 28px; /* Platz für den Pfeil rechts */
  border-radius: 999px;
  border: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.energie-page .contact-teaser.contact-teaser--overlay .ct-btn:hover{
  background: #676767;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

/* Pfeil im Energie-CTA */
.energie-page .contact-teaser.contact-teaser--overlay .ct-btn .cta-arrow{
  position: absolute;
  right: 22px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translate(0,-50%);
  opacity: 1;
  transition: opacity .2s ease;
  pointer-events: none;
}

/* Hover-Animation wie global */
.energie-page .contact-teaser.contact-teaser--overlay .ct-btn:hover .cta-arrow{
  animation: cta-arrow-loop .45s cubic-bezier(.22,.8,.25,1) both;
}

/* =====================================================
   MOBILE – bis 900px
   ===================================================== */
@media (max-width: 900px) {

  .energie-page .contact-teaser.contact-teaser--overlay .ct-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    gap: 20px !important;
    height: auto !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  /* Bild */
  .energie-page .contact-teaser.contact-teaser--overlay .ct-media {
    width: 94% !important;
    margin: 0 auto !important;
    height: auto !important;
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .energie-page .contact-teaser.contact-teaser--overlay .ct-media img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  /* Card */
  .energie-page .contact-teaser.contact-teaser--overlay .ct-panel {
    width: 94% !important;
    max-width: 94% !important;
    min-width: unset !important;

    position: relative !important;
    inset: auto !important;

    background: #242424 !important; /* Energie Farbe */
    color: #909090 !important;      /* Energie Textfarbe */

    border-radius: 12px !important;

    margin: 0 auto !important;
    padding: 24px 28px !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-rows: auto auto auto !important;
    gap: 16px !important;
  }
}


/* =====================================================
   TABLET – 901px bis 1200px
   ===================================================== */
@media (min-width: 901px) and (max-width: 1200px) {

  .energie-page .contact-teaser.contact-teaser--overlay .ct-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    gap: 28px !important;
    height: auto !important;
  }

  /* Bild */
  .energie-page .contact-teaser.contact-teaser--overlay .ct-media {
    width: 94% !important;
    margin: 0 auto !important;
    height: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .energie-page .contact-teaser.contact-teaser--overlay .ct-media img {
    width: 100% !important;
    height: 260px !important; /* Tablet */
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  /* Card */
  .energie-page .contact-teaser.contact-teaser--overlay .ct-panel {
    width: 94% !important;
    max-width: 94% !important;
    min-width: unset !important;

    position: relative !important;
    inset: auto !important;

    background: #242424 !important;
    color: #909090 !important;

    border-radius: 16px !important;
    padding: 32px !important;
    margin: 0 auto !important;
  }
}



/* =========================
   RELATED LINKS SECTION (Footer-Navigation)
   ========================= */
.related-links {
  background: #000;
  color: #fff;
  text-align: left;
  padding: clamp(80px, 10vh, 120px) 0;
}

.related-wrap {
  width: min(1200px, 92%);
  margin: 0 auto;
}

.related-title {
  margin: 0 0 50px 10px;
  font-size: var(--fs-h1);
  line-height: var(--lh-title);
  font-family: "Kaisei Tokumin", serif;
  font-weight: var(--fw-500);
  color: #fff;
}

.related-title .dot {
  color: #49a5a2;
  font-weight: 700;
}

/* === Grid === */
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  justify-content: center;
  align-items: start;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* === Cards === */
/* === Cards (benefits style) === */
.related-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border-radius: 10px;
  overflow: visible;
  background: transparent;
  transition: transform .3s ease, box-shadow .3s ease;
}

.related-card:hover {
  transform: translateY(-6px);
}

.related-top,
.related-img {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.related-top {
  background: var(--bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.4rem;
  color: #222;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  margin-bottom: 12px;
  min-height: 95px;
  height: 95px;
  box-sizing: border-box;
}

.related-top h3 {
  font-size: 1.33rem;
  margin: 0;
  text-align: left;
  font-weight: 300 !important;
  line-height: 1.3;
  word-wrap: break-word;
}

.related-img {
  width: 100%;
  height: 440px;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  margin: 0 auto;
  position: relative;
}

.related-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  transition: transform .6s ease;
}

.related-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0) 100%);
  z-index: 1;
}


.related-card:hover {
  transform: none;
}

.related-top {
  transition: background-color .3s ease, transform .3s ease;
}

.related-card:hover .related-top {
  background: color-mix(in srgb, var(--bg) 80%, #000);
  transform: scale(0.97);
}

/* === Caption === */
.related-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.18rem;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.22;
  font-weight: 200;
  z-index: 2;
  text-align: left;
  background: transparent;
}

.related-caption p {
  margin: 0;
}

/* === Responsive === */
@media (max-width: 900px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .related-grid {
    grid-template-columns: 1fr;
  }
  .related-img {
    height: 300px;
  }
}



html { font-size: 100% !important; }