@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/manrope-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/manrope-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/manrope-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/manrope-latin-700-normal.woff2") format("woff2");}


/* ============================================================
   EnerKI – Startseite
   Aufbau : dunkelblaue Bühne (Kopfzeile + Hero) · helle Bereichszone · heller Fuß
   Palette: Dunkelblau · Weiß · Orange als Träger; Petrol und Türkis nur als Tiefe
            im Referenzhintergrund und im Datenfluss – nie als eigene UI-Farbe.
   ============================================================ */

:root{
  /* die drei tragenden Farben */
  --orange:#FA762B;
  --blau:#000F1C;            /* Nachtdunkel aus der Referenz */
  --weiss:#FFFFFF;

  /* Abstufungen desselben Dunkelblaus – keine zusätzliche Farbe */
  --blau-buehne:#00131F;
  --blau-hell:#0A2438;

  /* heller Grund: Weiß mit einem Hauch Wärme, damit Orange darauf zuhause ist */
  --papier:#FCFAF7;
  --papier-still:#F5F0EA;
  --linie:rgba(0,15,28,.18);
  --linie-fein:rgba(0,15,28,.10);

  /* Schrift auf hell */
  --text:#000F1C;
  --text-2:#1B3040;
  /* Schrift auf dunkel */
  --hell-2:#D5DFE6;

  --breite:1360px;
  --rand:clamp(1.25rem, 4vw, 4rem);
  --radius:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--papier);
  color:var(--text);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
[hidden]{display:none!important}

/* ---------- Fokus ---------- */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--blau);
  outline-offset:3px;
  border-radius:2px;
}
.auf-dunkel :where(a,button):focus-visible{
  outline:3px solid var(--weiss);
  outline-offset:3px;
}

.skip{
  position:absolute; left:var(--rand); top:.75rem;
  transform:translateY(-180%);
  z-index:100;
  background:var(--weiss); color:var(--blau);
  padding:.85rem 1.25rem;
  font-weight:600; font-size:.95rem;
  text-decoration:none; border-radius:var(--radius);
  transition:transform .16s ease;
}
.skip:focus{transform:translateY(0)}

.huelle{
  width:100%;
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
}

/* ============================================================
   1 · KOPFZEILE – liegt auf der dunklen Bühne
   ============================================================ */
.kopf{
  position:relative;
  z-index:30;
  background:var(--blau-buehne);   /* eigene dunkle Flaeche, damit der Grund
                                      der Navigation immer eindeutig ist */
  color:var(--weiss);
  padding-block:clamp(1.1rem,2.4vw,1.9rem);
}
.kopf-innen{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(.75rem,2.5vw,1.5rem);
}
.marke{
  display:inline-flex; align-items:center;
  text-decoration:none;
  padding:.3rem; margin:-.3rem;
  min-height:44px;
}
.marke svg{
  height:clamp(38px,6.2vw,78px);
  width:auto; display:block;
}

.nav-schalter{
  display:none;
  align-items:center; gap:.6rem;
  min-height:44px; min-width:44px;
  padding:.5rem .85rem;
  background:transparent;
  border:1px solid rgba(255,255,255,.45);
  border-radius:var(--radius);
  color:var(--weiss);
  font:inherit; font-weight:600; font-size:.95rem;
  cursor:pointer;
}
.nav-schalter .balken{display:block;width:20px;height:1.5px;background:currentColor;position:relative}
.nav-schalter .balken::before,.nav-schalter .balken::after{
  content:"";position:absolute;left:0;width:20px;height:1.5px;background:currentColor;
}
.nav-schalter .balken::before{top:-6px}
.nav-schalter .balken::after{top:6px}

.nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center;
  gap:clamp(1rem,2.5vw,2.5rem);
}
.nav a{
  display:inline-flex; align-items:center;
  min-height:44px;
  color:#E4EDF2;                 /* 13,6:1 auf der Buehne */
  text-decoration:none;
  font-weight:500; font-size:1rem;
  border-bottom:2px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.nav a:hover{color:var(--weiss); border-bottom-color:var(--orange)}
.nav a[aria-current="page"]{color:var(--weiss);border-bottom-color:rgba(255,255,255,.55)}

.nav .nav-cta{
  color:var(--weiss);
  font-weight:700;
  border:1.5px solid var(--orange);
  border-bottom:1.5px solid var(--orange);
  border-radius:6px;
  padding:.2rem .7rem;
  margin-inline:.1rem;
}
.nav .nav-cta:hover{background:var(--orange);color:var(--dunkel);border-color:var(--orange)}

/* ============================================================
   2 · BÜHNE – Kopfzeile und Hero als ein durchgehendes dunkles Feld
   ============================================================ */
.buehne{
  position:relative;
  isolation:isolate;
  background-color:var(--blau-buehne);
  background-image:
    linear-gradient(to bottom,var(--blau-buehne) 0,rgba(0,19,31,0) clamp(70px,9vw,130px)),
    url("bilder/enerki-buehne.jpg");
  background-size:100% 100%,cover;
  background-position:top center,52% center;
  background-repeat:no-repeat,no-repeat;
  color:var(--weiss);
}
.hero{
  position:relative;
  display:block;
  padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3.5rem,8vw,6.5rem);
  color:var(--weiss);
}
/* blaue Tiefe: hält die linke Textzone am dunkelsten und lässt die
   Petrolmitte des Referenzhintergrunds rechts atmen */
.buehne::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg,rgba(0,11,20,.93) 0%,rgba(0,14,25,.87) 30%,rgba(0,29,44,.60) 58%,rgba(0,49,66,.40) 82%,rgba(0,62,80,.32) 100%);
}
.kopf,.hero-innen{position:relative}
.hero-innen{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1fr)}

@media (min-width:900px){
  .hero{display:flex;align-items:center;min-height:clamp(460px,62svh,720px)}
  .hero-innen{
    grid-template-columns:minmax(0,.62fr) minmax(0,.38fr);
    align-items:center;
    gap:clamp(2rem,4vw,4rem);
  }
}

/* Datenfluss */
.hero-grafik{
  position:relative;
  z-index:1;
  width:100%;
  height:clamp(200px,48vw,300px);
  margin-top:clamp(2rem,6vw,3rem);
  pointer-events:none;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 76%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 76%,transparent 100%);
}
.hero-grafik .flow{
  width:100%;height:100%;display:block;
  transform:scale(1.34);
  transform-origin:44% 58%;
}
@media (min-width:900px){
  .hero-grafik{
    position:absolute;
    top:0; right:0; bottom:0; left:auto;
    width:min(80%,1180px);
    height:auto; margin:0;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.12) 18%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.80) 55%,#000 78%);
            mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.12) 18%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.80) 55%,#000 78%);
  }
  .hero-grafik .flow{transform:none}
}

.hero-text{max-width:none}

h1{
  margin:0;
  font-weight:600;
  font-size:clamp(1.6rem,1.1rem + 2.9vw,3.4rem);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--weiss);
  overflow-wrap:break-word;
}
h1 .zeile{display:block}
h1 .betont{color:var(--orange)}

.hero-einleitung{
  margin:clamp(1.4rem,2.6vw,2rem) 0 0;
  font-size:clamp(1.06rem,.98rem + .42vw,1.28rem);
  line-height:1.6;
  color:var(--hell-2);
  max-width:42ch;
}

/* ---------- Aktionen ---------- */
.aktionen{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(.9rem,2vw,1.4rem);
  margin-top:clamp(1.9rem,3.6vw,2.8rem);
}
.knopf{
  display:inline-flex; align-items:center; gap:.65rem;
  min-height:48px;
  padding:.8rem 1.5rem;
  font-weight:600; font-size:1rem;
  text-decoration:none;
  border-radius:var(--radius);
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.knopf .pfeil{transition:transform .16s ease}
.knopf:hover .pfeil{transform:translateX(3px)}

/* Primäraktion: weiße Fläche, Orange nur als Spitze – keine orange Balkenwirkung */
.knopf-primaer{
  background:var(--weiss);
  color:var(--blau);
  border:1px solid var(--weiss);
  font-weight:700;
}
.knopf-primaer .pfeil{color:var(--orange)}
.knopf-primaer:hover{background:var(--orange);border-color:var(--orange);color:var(--blau)}
.knopf-primaer:hover .pfeil{color:var(--blau)}

.knopf-sekundaer{
  color:var(--weiss);
  border:1px solid rgba(255,255,255,.50);
  background:transparent;
}
.knopf-sekundaer:hover{border-color:var(--weiss)}

@media (max-width:479.98px){
  .aktionen{flex-direction:column;align-items:stretch}
  .knopf{justify-content:center;font-size:.95rem;white-space:nowrap;padding-inline:1rem}
}

/* ============================================================
   3 · BEREICHE – hell, mit dunkelblauen Kacheln
   ============================================================ */
.bereiche{
  background:var(--papier);
  padding-block:clamp(3.5rem,8vw,6.5rem);
}
.kachel-gitter{
  display:grid;
  gap:clamp(1rem,2.2vw,1.8rem);
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .kachel-gitter{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Kopf des Leistungsteils */
.bereiche-kopf{
  max-width:46ch;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.bereiche-kopf h2{
  margin:0;
  font-size:clamp(1.5rem,1.05rem + 1.6vw,2.3rem);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.018em;
  color:var(--text);
}
.bereiche-kopf p{
  margin:.6rem 0 0;
  font-size:clamp(1.05rem,.98rem + .4vw,1.25rem);
  color:var(--text-2);
}

/* beide Karten identisch: gleicher Verlauf, gleiches Gewicht */
.kachel{
  position:relative;
  display:flex; flex-direction:column;
  gap:clamp(1.1rem,2.2vw,1.5rem);
  min-height:clamp(230px,24vw,300px);
  padding:clamp(1.6rem,3vw,2.4rem);
  background:linear-gradient(152deg,#005E73 0%,#004758 24%,#002B3C 58%,#000F1C 100%);
  border-radius:var(--radius);
  color:var(--weiss);
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.kachel h3{
  margin:0;
  font-size:clamp(1.4rem,1.05rem + 1vw,1.95rem);
  font-weight:600;
  letter-spacing:-.012em;
  line-height:1.2;
}
.leistungen{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:1.05rem;
  border-top:1px solid rgba(255,255,255,.22);
  padding-top:clamp(1.1rem,2.2vw,1.5rem);
}
.leistungen li{
  font-size:.96rem;
  line-height:1.5;
  color:var(--hell-2);
}
.leistung-name{
  display:block;
  color:var(--weiss);
  font-weight:700;
  letter-spacing:.005em;
  margin-bottom:.15rem;
}
.kachel-link{
  margin-top:auto;
  padding-top:clamp(.7rem,1.5vw,1.1rem);
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:44px;
  color:var(--weiss);
  font-weight:700;
  font-size:1.05rem;
  text-decoration:none;
  border-bottom:2px solid var(--orange);
}
/* ganze Karte anklickbar, aber nur ein Link im Zugänglichkeitsbaum */
.kachel-link::after{content:"";position:absolute;inset:0}
.kachel:hover .pfeil{transform:translateX(4px)}
.kachel:hover,.kachel:has(.kachel-link:focus-visible){
  transform:translateY(-3px);
  box-shadow:0 18px 46px -26px rgba(0,15,28,.8);
}
.kachel .pfeil{color:var(--orange);transition:transform .2s ease}

/* ============================================================
   3b · AUS DER PRAXIS
   ============================================================ */
.praxis{
  background:var(--blau-buehne);
  color:var(--weiss);
  padding-block:clamp(3.5rem,8vw,6rem);
}

.praxis-marke{
  margin:0 0 1.1rem;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
}
.praxis h2{
  margin:0;
  max-width:22ch;
  font-size:clamp(1.6rem,1.1rem + 2vw,2.6rem);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.018em;
}
.praxis-text{
  margin:clamp(1rem,2vw,1.5rem) 0 0;
  font-size:clamp(1.05rem,.98rem + .42vw,1.24rem);
  line-height:1.62;
  color:var(--hell-2);
  max-width:62ch;
}

/* ============================================================
   4 · FUSS
   ============================================================ */
.fuss{
  background:var(--papier-still);
  padding-block:clamp(1.75rem,3.5vw,2.5rem);
}
.fuss-innen{
  display:flex; flex-wrap:wrap;
  align-items:flex-start; justify-content:space-between;
  gap:1.5rem 2.5rem;
}
.fuss-signet{height:30px;width:auto;display:block;flex:none;margin-top:.5rem}

.fuss-kontakt{flex:1 1 22rem;min-width:min(100%,18rem)}
.fuss-adresse{
  margin:0;
  display:flex; flex-direction:column;
  font-size:.95rem; line-height:1.55;
  color:var(--text-2);
}
.fuss-wege{
  margin:.45rem 0 0;
  display:flex; flex-wrap:wrap;
  gap:.1rem 1.4rem;
}
.fuss-wege a{font-weight:600}
.fuss ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;
  gap:.35rem clamp(1.1rem,2.6vw,2.1rem);
}
.fuss a,.fuss button{
  display:inline-flex;align-items:center;
  min-height:44px;
  color:var(--text-2);
  font:inherit;font-size:.95rem;font-weight:500;
  text-decoration:none;
  border:0;background:none;padding:0;cursor:pointer;
  border-bottom:2px solid transparent;
}
.fuss a:hover,.fuss button:hover{color:var(--text);border-bottom-color:var(--orange)}

/* ============================================================
   MOBILE NAVIGATION
   ============================================================ */
@media (max-width:899.98px){
  .nav-schalter{display:inline-flex}
  .nav{
    display:none; width:100%; order:3;
    margin-top:1.1rem; padding-top:1rem;
    border-top:1px solid rgba(255,255,255,.22);
  }
  .nav[data-offen="true"]{display:block}
  .kopf-innen{flex-wrap:wrap}
  .nav ul{flex-direction:column;align-items:flex-start;gap:0}
  .nav li{width:100%}
  .nav li+li{border-top:1px solid rgba(255,255,255,.14)}
  .nav a{min-height:52px;font-size:1.05rem;border-bottom:0}
  .nav .nav-cta{margin-top:1rem;border:1.5px solid var(--orange);border-radius:6px;padding:.4rem .7rem}
}

/* ============================================================
   ANIMATION – sehr zurückhaltend
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .strom{stroke-dasharray:5 340;animation:ziehen 84s linear infinite}
  .s1{animation-duration:96s;animation-delay:-14s}
  .s2{animation-duration:78s;animation-delay:-31s}
  .s3{animation-duration:112s;animation-delay:-7s}
  .s4{animation-duration:88s;animation-delay:-46s}
  .s5,.s6,.s7,.s0{animation:none;stroke-dasharray:none}
  @keyframes ziehen{from{stroke-dashoffset:0}to{stroke-dashoffset:-1725}}
  .pulse{animation:atmen 13s ease-in-out infinite}
  .p1{animation-duration:16s;animation-delay:-4s}
  .p2{animation-duration:11s;animation-delay:-8s}
  .p3{animation-duration:18s;animation-delay:-2s}
  .p4{animation-duration:14s;animation-delay:-11s}
  .p5{animation-duration:15s;animation-delay:-6s}
  @keyframes atmen{0%,100%{opacity:.40}50%{opacity:.95}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

@media (prefers-contrast:more){
  :root{--text-2:#000F1C;--hell-2:#FFFFFF;--linie:rgba(0,15,28,.55)}
  .hero-grafik{opacity:.6}
}

@media print{
  .hero-grafik,.nav-schalter{display:none}
  .hero{background:none}
  h1,.hero-einleitung,body{color:#000}
}

/* ============================================================
   UNTERSEITEN
   ============================================================ */
.seiten-hero{
  position:relative;
  padding-block:clamp(2.5rem,6vw,4rem) clamp(2.5rem,6vw,4.5rem);
  color:var(--weiss);
}
.seiten-hero .huelle{position:relative;z-index:2}
.marke-label{
  margin:0 0 .9rem;
  font-size:.85rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange);
}
.seiten-hero h1{
  font-size:clamp(1.9rem,1.2rem + 2.9vw,3.1rem);
  max-width:18ch;
}
.seiten-hero .hero-einleitung{max-width:52ch}

/* heller Inhaltsbereich */
.inhalt{background:var(--papier);padding-block:clamp(3.5rem,8vw,6rem)}
.inhalt-still{background:var(--papier-still);padding-block:clamp(3.5rem,8vw,6rem)}
.inhalt h2,.inhalt-still h2{
  margin:0 0 clamp(1rem,2vw,1.5rem);
  font-size:clamp(1.5rem,1.05rem + 1.6vw,2.2rem);
  font-weight:600; line-height:1.18; letter-spacing:-.018em;
  color:var(--text);
}
.inhalt p,.inhalt-still p{max-width:64ch;color:var(--text-2)}

/* Zweispalter fuer Text plus Nebeninhalt */
.spalten{
  display:grid; gap:clamp(1.8rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:860px){
  .spalten{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}

/* Merkmalsliste mit orangem Haken-Ersatz */
.merkmale{list-style:none;margin:clamp(1.2rem,2.5vw,1.8rem) 0 0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.merkmale li{
  position:relative; padding-left:1.6rem;
  color:var(--text-2); line-height:1.5;
}
.merkmale li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; background:var(--orange);
}

/* Kennzahlen */
.kennzahlen{
  list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;
  display:grid;gap:clamp(1rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
}
.kennzahlen li{
  border-top:2px solid var(--orange);
  padding-top:1rem;
}
.kennzahl-wert{
  display:block;
  font-size:clamp(1.6rem,1.2rem + 1.5vw,2.2rem);
  font-weight:700; line-height:1.1; letter-spacing:-.02em;
  color:var(--text);
}
.kennzahl-text{display:block;margin-top:.35rem;color:var(--text-2);font-size:.96rem;line-height:1.45}

/* Portraet */
.portraet{margin:0}
.portraet-rahmen{
  aspect-ratio:4/5;
  background:linear-gradient(152deg,#005E73 0%,#00293C 55%,#000F1C 100%);
  border-radius:var(--radius);
  display:grid;place-items:center;
  color:rgba(255,255,255,.55);
  font-size:.9rem; text-align:center; padding:1.5rem;
}
.portraet img{display:block;width:100%;height:auto;border-radius:var(--radius);aspect-ratio:4/5;object-fit:cover}
.portraet figcaption{margin-top:.8rem;font-size:.9rem;color:var(--text-2)}

/* Ablauf in Schritten */
.schritte{
  list-style:none;margin:clamp(1.5rem,3vw,2.5rem) 0 0;padding:0;counter-reset:schritt;
  display:grid;gap:clamp(1.2rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}
.schritte li{counter-increment:schritt;padding-top:1rem;border-top:1px solid var(--linie)}
.schritte li::before{
  content:counter(schritt);
  display:block;
  font-size:.85rem;font-weight:700;letter-spacing:.14em;
  color:var(--orange);margin-bottom:.5rem;
}
.schritt-titel{display:block;font-weight:700;color:var(--text);margin-bottom:.25rem}
.schritte li span:last-child{color:var(--text-2);font-size:.96rem;line-height:1.5}

/* Formular */
.formular{display:grid;gap:1.1rem;max-width:34rem}
.feld{display:flex;flex-direction:column;gap:.4rem}
.feld label{font-weight:600;font-size:.96rem;color:var(--text)}
.feld .hinweis{font-weight:400;color:var(--text-2)}
.feld input,.feld textarea{
  font:inherit;font-size:1rem;
  padding:.8rem .9rem;
  min-height:48px;
  color:var(--text);
  background:var(--weiss);
  border:1px solid rgba(0,15,28,.38);
  border-radius:var(--radius);
}
.feld textarea{min-height:8rem;resize:vertical}
.feld input:focus-visible,.feld textarea:focus-visible{
  outline:3px solid var(--blau);outline-offset:2px;border-color:var(--blau);
}
.formular button{
  justify-self:start;
  display:inline-flex;align-items:center;gap:.65rem;
  min-height:48px;padding:.8rem 1.5rem;
  font:inherit;font-weight:700;font-size:1rem;
  color:var(--weiss);background:var(--blau);
  border:1px solid var(--blau);border-radius:var(--radius);
  cursor:pointer;
}
.formular button:hover{background:var(--orange);border-color:var(--orange);color:var(--blau)}
.pflicht-hinweis{font-size:.9rem;color:var(--text-2);margin:0}

/* Kontaktkarte */
.kontaktdaten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem}
.kontaktdaten dt,.kontakt-label{font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.kontaktdaten dd{margin:.2rem 0 0;font-size:1.05rem}
.kontaktdaten a{color:var(--text);text-decoration:none;border-bottom:2px solid var(--orange);font-weight:600}
.kontaktdaten a:hover{color:var(--blau)}

/* Abschluss-Aufruf */
.aufruf{background:var(--blau-buehne);color:var(--weiss);padding-block:clamp(3.5rem,8vw,6rem)}
.aufruf h2{margin:0;font-size:clamp(1.6rem,1.1rem + 2vw,2.5rem);font-weight:600;line-height:1.14;letter-spacing:-.018em;max-width:22ch}
.aufruf p{margin:clamp(1rem,2vw,1.4rem) 0 0;color:var(--hell-2);max-width:56ch;font-size:clamp(1.05rem,.98rem + .42vw,1.2rem);line-height:1.6}
.aufruf .aktionen{margin-top:clamp(1.6rem,3vw,2.4rem)}

/* ============================================================
   RECHTSTEXTE UND FEHLERSEITE
   ============================================================ */
.rechtstext{max-width:70ch}
.rechtstext h2{
  margin:clamp(2rem,4vw,3rem) 0 .7rem;
  font-size:clamp(1.15rem,1rem + .6vw,1.4rem);
  font-weight:700;letter-spacing:-.01em;color:var(--text);
}
.rechtstext h2:first-of-type{margin-top:0}
.rechtstext p{margin:0 0 .9rem;max-width:none}
.rechtstext address{font-style:normal;color:var(--text-2);line-height:1.65}
.rechtstext a{color:var(--text);text-decoration:none;border-bottom:2px solid var(--orange);font-weight:600}
.rechtstext a:hover{color:var(--blau)}
.rechtstext .stand{margin-top:clamp(2rem,4vw,3rem);font-size:.92rem;color:var(--text-2)}

.fehler-hinweis{margin-top:clamp(1.5rem,3vw,2.2rem)}

/* ============================================================
   COOKIE-BANNER
   ============================================================ */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;
  z-index:200;
  background:var(--blau);color:var(--weiss);
  padding:1.1rem 0;
  box-shadow:0 -2px 16px rgba(0,0,0,.3);
}
.cookie-inner{
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
}
.cookie-inner p{
  margin:0;flex:1 1 280px;
  font-size:.92rem;line-height:1.5;color:var(--hell-2);
}
.cookie-inner a{color:var(--orange);text-decoration:underline}
.cookie-actions{display:flex;gap:.75rem;flex-shrink:0;flex-wrap:wrap}
.btn{
  display:inline-block;
  padding:.62rem 1.35rem;
  border-radius:var(--radius);
  font-family:inherit;font-size:.92rem;font-weight:600;
  cursor:pointer;border:2px solid transparent;
  text-decoration:none;line-height:1.2;
  transition:background .18s,color .18s,border-color .18s;
}
.btn-primary{background:var(--orange);color:var(--weiss);border-color:var(--orange)}
.btn-primary:hover{background:#e5641a;border-color:#e5641a}
.btn-outline{background:transparent;color:var(--weiss);border-color:rgba(255,255,255,.45)}
.btn-outline:hover{border-color:var(--weiss)}

/* ============================================================
   FORMULAR-STATUS (Kontaktseite)
   ============================================================ */
.formular .erfolg{
  background:#e6f9ef;color:#1a5c35;
  border-left:4px solid #2ecc71;
  padding:.85rem 1.1rem;border-radius:var(--radius);
  margin-bottom:1rem;font-weight:600;
}
.formular .fehler{
  background:#fdecea;color:#7b1c1c;
  border-left:4px solid #e74c3c;
  padding:.85rem 1.1rem;border-radius:var(--radius);
  margin-bottom:1rem;
}
.formular .fehler a{color:#7b1c1c;font-weight:600}

/* ============================================================
   PREISBEREICH – Prototypenwerkstatt
   ============================================================ */
.preis-gitter{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  margin-top:clamp(2rem,4vw,3rem);
}
@media (min-width:680px){
  .preis-gitter{grid-template-columns:minmax(0,.6fr) minmax(0,.4fr)}
}
.preiskarte{
  background:var(--weiss);
  border:2px solid var(--linie);
  border-radius:6px;
  padding:clamp(1.5rem,3vw,2.2rem);
  display:flex;flex-direction:column;gap:.9rem;
}
.preiskarte.haupt{
  border-color:var(--orange);
  box-shadow:0 4px 24px rgba(250,118,43,.13);
}
.preis-label{
  font-size:.8rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange);
}
.preiskarte h3{
  margin:0;font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);
  font-weight:700;letter-spacing:-.01em;
}
.preis-betrag{
  font-size:clamp(1.9rem,1.4rem + 1.5vw,2.6rem);
  font-weight:700;letter-spacing:-.03em;
  color:var(--blau);line-height:1;
}
.preis-merkmale{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:.6rem;flex:1;
}
.preis-merkmale li{
  padding-left:1.35rem;position:relative;
  font-size:.97rem;color:var(--text-2);
}
.preis-merkmale li::before{
  content:"✓";position:absolute;left:0;
  color:var(--orange);font-weight:700;font-size:.9rem;
}
.preis-notiz{
  font-size:.93rem;color:var(--text-2);line-height:1.55;margin:0;
}
.preis-eigentum{
  margin-top:clamp(1.2rem,2.5vw,1.8rem);
  font-size:.97rem;color:var(--text-2);
  border-left:3px solid var(--orange);
  padding-left:1rem;
}

/* FAQ */
.faq-liste{
  margin-top:clamp(2rem,4vw,3rem);
  display:flex;flex-direction:column;gap:0;
  border-top:1px solid var(--linie);
}
.faq-liste details{
  border-bottom:1px solid var(--linie);
}
.faq-liste summary{
  padding:1.1rem 1.5rem 1.1rem 0;
  font-weight:600;font-size:1rem;
  cursor:pointer;list-style:none;
  position:relative;color:var(--text);
  padding-right:2rem;
}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary::after{
  content:"＋";position:absolute;right:0;top:50%;
  transform:translateY(-50%);
  font-size:1.2rem;color:var(--orange);font-weight:400;
  transition:transform .2s;
}
.faq-liste details[open] summary::after{
  content:"−";
}
.faq-liste details p{
  margin:0 0 1.2rem;
  color:var(--text-2);font-size:.97rem;line-height:1.65;
}


/* ============================================================
   LINKDARSTELLUNG – EnerKI Leistungslinks
   Orange + sichtbare Unterstreichung: auch mobil eindeutig als Link erkennbar.
   ============================================================ */
.bereichslink,
.bereichslink:link,
.bereichslink:visited {
  color:var(--orange) !important;
  text-decoration-line:underline !important;
  text-decoration-thickness:2px !important;
  text-underline-offset:.16em !important;
  text-decoration-color:currentColor !important;
  transition:color .16s ease,text-decoration-thickness .16s ease;
}
.bereichslink:hover,
.bereichslink:active {
  color:var(--text) !important;
  text-decoration-color:var(--orange) !important;
  text-decoration-thickness:3px !important;
}
.bereichslink:focus-visible {
  color:var(--orange) !important;
  outline:2px solid var(--orange);
  outline-offset:4px;
}
@media (hover:none){
  .bereichslink,
  .bereichslink:link,
  .bereichslink:visited {
    text-decoration-thickness:2px !important;
  }
}

/* Buttons in hellen Inhaltsbereichen: ausreichender Kontrast. */
.inhalt .knopf-primaer,
.inhalt-still .knopf-primaer {
  background: var(--blau);
  color: var(--weiss) !important;
  border-color: var(--blau);
  text-decoration: none !important;
}
.inhalt .knopf-primaer:visited,
.inhalt-still .knopf-primaer:visited {
  color: var(--weiss) !important;
}
.inhalt .knopf-primaer:hover,
.inhalt-still .knopf-primaer:hover {
  background: var(--orange);
  color: var(--blau) !important;
  border-color: var(--orange);
}