/* =========================================================
   Blue Sun Energy Service — Website-Stylesheet
   CI V01: Cyan #25C3DA · Schwarz #0D0E11 · System-Font-Stack
   ========================================================= */

:root{
  --cyan:#25C3DA;
  --cyan-deep:#1B93A6;
  --cyan-hover:#1FADC1;
  --cyan-soft:#E7F7FB;
  --ink:#0D0E11;
  --ink-2:#1E2328;
  --grey-mid:#7E8587;
  --grey-line:#C8C9CA;
  --grey-soft:#E2E3E4;
  --page:#F7F6F3;      /* warmes Papier statt kaltem Grau */
  --creme:#FDFCFA;
  --cyan-nebel:#F1FAFC;
  --white:#FFFFFF;
  --bernstein:#F0A836;
  --bernstein-deep:#B67717;

  /* Hausschrift der Website. Cockpits behalten den System-Font. */
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* Kein Maschinensatz mehr: Zahlen laufen in derselben Familie,
     nur mit Tabellenziffern, damit Spalten stehen. */
  --mono:var(--sans);

  --rail:1240px;
  --gutter:20px;
  --pill:999px;        /* Knöpfe rund, das trägt die Dynamik */
  --kante:18px;        /* Karten und Flächen */
  --kante-s:12px;      /* Felder, kleine Bausteine */
  --bild-r:20px;       /* Bilder bekommen weiche Ecken */
  --schalter-r:999px;
  --kopf:72px;
}
/* Carlito ist der metrisch baugleiche Zwilling von Calibri.
   Achtung: nur 400 und 700, deshalb fallen 500/600/800 auf diese zurueck. */

@media (min-width:720px){ :root{ --gutter:32px; } }
@media (min-width:1080px){ :root{ --gutter:48px; } }

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.62;
  color:var(--ink);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block }
[hidden]{ display:none !important }

.wrap{ max-width:var(--rail); margin:0 auto; padding-inline:var(--gutter); }
.wrap--schmal{ max-width:900px; }

/* ---------- Typografie ---------- */
h1,h2,h3,h4{ margin:0; color:var(--ink); line-height:1.16; letter-spacing:-0.015em; font-weight:700; text-wrap:balance; }
h1{ font-size:clamp(29px,4.3vw,53px); font-weight:800; letter-spacing:-0.026em; line-height:1.07; }
h2{ font-size:clamp(25px,3.1vw,37px); font-weight:700; letter-spacing:-0.02em; line-height:1.14; }
h3{ font-size:20px; font-weight:700; letter-spacing:-0.012em; }
h4{ font-size:15px; font-weight:700; }
p{ margin:0 }
a{ color:inherit; text-decoration:none }

/* Die Oberzeile ist die oberste Ebene der Hierarchie und darf das zeigen. */
.eyebrow{
  display:inline-flex; align-items:center; gap:13px;
  font-size:clamp(18px,1.9vw,24px); font-weight:700;
  letter-spacing:-0.01em; line-height:1.28;
  color:var(--cyan-deep);
  margin-bottom:6px;
}
.eyebrow::before{
  content:""; width:38px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),rgba(37,195,218,0.3));
  flex:none;
}
.eyebrow--hell{ color:var(--cyan); }
.lead{ font-size:19.5px; line-height:1.58; color:var(--ink-2); max-width:60ch; font-weight:400; }
.mono{ font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }

/* ---------- Buttons ---------- */
.pill{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:600; line-height:1;
  letter-spacing:-0.005em;
  padding:15px 27px; border-radius:var(--pill);
  border:1px solid var(--ink); cursor:pointer;
  font-family:var(--sans); white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), background .18s ease,
             color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pill:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(13,14,17,0.16); }
.pill:active{ transform:translateY(0); }
.pill--primary{ background:var(--cyan); color:var(--ink); border-color:var(--ink); }
.pill--primary:hover{ background:var(--cyan-hover); border-color:var(--ink); }
.pill--dark{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.pill--dark:hover{ background:var(--cyan); color:var(--ink); border-color:var(--cyan); }
.pill--outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.pill--outline:hover{ background:var(--ink); color:var(--white); }
.pill--weiss{ background:transparent; color:var(--white); border-color:rgba(255,255,255,0.5); }
.pill--weiss:hover{ background:var(--white); color:var(--ink); border-color:var(--white); }
.pill--sm{ font-size:13px; padding:10px 18px; }
.pill--gross{ font-size:17px; padding:17px 34px; }

/* ---------- Kopfzeile ---------- */
.kopf{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--grey-line);
}
.kopf__inner{
  display:flex; align-items:center; gap:22px;
  min-height:var(--kopf); padding-block:12px;
}
.kopf__logo{ height:38px; width:auto; }
@media (max-width:639px){ .kopf__logo{ height:32px } }

.nav{ display:none; gap:4px; margin-left:auto; align-items:center; }
@media (min-width:1000px){ .nav{ display:flex } }
.nav__link{
  font-size:15.5px; font-weight:500; color:var(--ink-2);
  padding:10px 15px; border-radius:var(--pill);
  transition:color .16s ease, background .16s ease;
}
.nav__link:hover{ color:var(--ink); background:var(--cyan-nebel); }
.nav__link[aria-current="page"]{ color:var(--cyan-deep); font-weight:600; }

/* Dropdown */
.drop{ position:relative; }
.drop__btn{
  font-family:var(--sans); font-size:15.5px; font-weight:500;
  color:var(--ink-2); background:none; border:none; cursor:pointer;
  padding:10px 15px; border-radius:var(--pill);
  display:inline-flex; align-items:center; gap:7px;
  transition:background .14s ease, color .14s ease;
}
.drop__btn:hover{ background:var(--page); color:var(--ink); }
.drop[data-offen="true"] .drop__btn{ background:var(--page); color:var(--ink); }
.drop[data-offen="true"] .drop__menu{
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:310px; background:var(--white);
  border:1px solid var(--grey-line); border-radius:var(--kante);
  box-shadow:0 22px 50px rgba(13,14,17,0.13);
  padding:8px; display:none; z-index:60;
}
.drop[data-offen="true"] .drop__menu{ display:block; }
.drop__item{
  display:block; padding:12px 14px; border-radius:var(--kante-s);
  transition:background .12s ease;
}
.drop__item:hover{ background:var(--cyan-soft); }
.drop__item strong{ display:block; font-size:15px; font-weight:700; color:var(--ink); }
.drop__item span{ display:block; font-size:13px; color:var(--grey-mid); margin-top:2px; line-height:1.4; }

.kopf__cta{ margin-left:auto; }
@media (min-width:1000px){ .kopf__cta{ margin-left:10px } }

/* Mobile-Menü */
.burger{
  margin-left:12px; background:none; border:1px solid var(--grey-line);
  border-radius:var(--pill); padding:10px 14px; cursor:pointer;
  font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink);
}
@media (min-width:1000px){ .burger{ display:none } }
.mobilnav{
  display:none; border-top:1px solid var(--grey-line);
  background:var(--white); padding:14px var(--gutter) 20px;
}
.mobilnav[data-offen="true"]{ display:block; }
@media (min-width:1000px){ .mobilnav{ display:none !important } }
.mobilnav a{
  display:block; padding:12px 0; font-size:16px; font-weight:600;
  border-bottom:1px solid var(--grey-soft);
}
.mobilnav a:last-of-type{ border-bottom:none; }
.mobilnav__gruppe{
  font-size:12.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--grey-mid); margin-top:14px; padding-bottom:4px;
}

/* ---------- Abschnitte ---------- */
.abschnitt{ padding-block:62px; }
.abschnitt--eng{ padding-block:42px; }
.abschnitt--grau{ background:var(--page); }
.abschnitt--dunkel{ background:var(--ink); color:var(--white); }
.abschnitt--dunkel h1,.abschnitt--dunkel h2,.abschnitt--dunkel h3{ color:var(--white); }
.abschnitt--dunkel .lead{ color:rgba(255,255,255,0.78); }
.abschnitt__kopf{ max-width:62ch; margin-bottom:34px; }
.abschnitt__kopf h2{ margin-top:11px; }
.abschnitt__kopf .lead{ margin-top:14px; }

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink); color:var(--white);
  padding-block:56px 60px;
}
.seitenkopf__bg{
  position:absolute; inset:0; z-index:-1;
  background-size:cover; background-position:center 55%;
  opacity:.62;
}
/* Lesbarkeit geht vor Bildwirkung: der Text muss auf jedem Motiv stehen. */
.seitenkopf::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(8,13,17,0.92) 0%, rgba(10,28,36,0.82) 52%,
                             rgba(16,44,52,0.62) 100%);
}
.seitenkopf h1{ color:var(--white); max-width:20ch; margin-top:16px; }
.seitenkopf .lead{ color:rgba(255,255,255,0.82); margin-top:22px; }
.seitenkopf__cta{ margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; }
.brotkrumen{
  font-size:13px; color:rgba(255,255,255,0.6); margin-bottom:6px;
}
.brotkrumen a:hover{ color:var(--cyan); }

/* ---------- Kennzahlen ---------- */
.zahlen{
  display:grid; grid-template-columns:repeat(2,1fr); gap:30px 20px;
}
@media (min-width:900px){ .zahlen{ grid-template-columns:repeat(5,1fr) } }
.zahl__v{
  font-size:31px; font-weight:800; letter-spacing:-0.025em;
  line-height:1; font-variant-numeric:tabular-nums;
}
.zahl__v small{ font-size:15px; opacity:.65; font-weight:700; margin-left:4px; }
.zahl__l{ font-size:13.5px; color:var(--grey-mid); margin-top:7px; line-height:1.4; }
.abschnitt--dunkel .zahl__l{ color:rgba(255,255,255,0.6); }

/* ---------- Karten ---------- */
.karten{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:760px){ .karten--2{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:760px){ .karten--3{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:1000px){ .karten--4{ grid-template-columns:repeat(4,1fr) } }
.karte{
  background:var(--white); border:1px solid var(--grey-line);
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--kante);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.karte:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(13,14,17,0.11);
  border-color:var(--cyan);
}
.karte__bild{
  aspect-ratio:16/10; background-size:cover; background-position:center;
  position:relative; margin:9px 9px 0; border-radius:calc(var(--kante) - 8px);
  overflow:hidden;
}
.karte__marke{
  position:absolute; top:14px; left:14px; z-index:2;
  background:var(--cyan); color:var(--ink);
  padding:6px 14px; border-radius:var(--pill);
  font-size:12.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
}
.karte__marke--bernstein{ background:var(--bernstein); }
.karte__inhalt{ padding:26px 26px 28px; display:flex; flex-direction:column; gap:13px; flex:1; }
.karte__inhalt ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.karte__inhalt li{ font-size:14px; color:var(--ink-2); line-height:1.5; padding-left:17px; position:relative; }
.karte__inhalt li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; background:var(--cyan); border-radius:50%; }
.karte__fuss{ margin-top:auto; padding-top:6px; }

/* ---------- Fußzeile ---------- */
.fuss{ background:var(--ink); color:rgba(255,255,255,0.74); padding-block:56px 30px; }
.fuss__grid{ display:grid; grid-template-columns:1fr; gap:34px; }
@media (min-width:800px){ .fuss__grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px } }
.fuss__logo{ height:52px; width:auto; filter:brightness(0) invert(1); opacity:.94; }
.fuss__adresse{ margin-top:20px; font-size:14px; line-height:1.6; }
.fuss__adresse strong{ display:block; color:var(--white); margin-bottom:6px; font-size:15px; }
.fuss h4{ color:var(--white); font-size:13px; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:16px; }
.fuss ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.fuss a{ color:rgba(255,255,255,0.74); transition:color .14s ease; }
.fuss a:hover{ color:var(--cyan); }
.fuss__basis{
  margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.13);
  font-size:12px; color:rgba(255,255,255,0.5);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}

/* ---------- Mockup-Band ---------- */
.band{
  background:var(--ink); color:rgba(255,255,255,0.85);
  font-size:13px; font-weight:500;
  padding-block:9px;
}
.band__inner{
  display:flex; align-items:center; justify-content:center;
  gap:10px 22px; flex-wrap:wrap;
}
.band em{ font-style:normal; color:var(--grey-mid); }

/* =========================================================
   Formular-Bausteine
   ========================================================= */
.feld{ display:flex; flex-direction:column; gap:7px; }
.feld--voll{ grid-column:1 / -1; }
.feld label{ font-size:13px; font-weight:600; color:var(--ink); }
.feld .pflicht{ color:var(--cyan-deep); margin-left:2px; }
.feld .opt{ color:var(--grey-mid); font-weight:400; font-size:12px; }
.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld select,
.feld textarea{
  font-family:var(--sans); font-size:15px; color:var(--ink);
  padding:13px 16px; border:1.5px solid var(--grey-line);
  border-radius:var(--kante-s); background:var(--white); width:100%;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.feld textarea{ border-radius:var(--kante-s); resize:vertical; min-height:110px; line-height:1.6; }
.feld select{
  appearance:none; cursor:pointer; padding-right:42px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%237E8587' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 18px center;
}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(37,195,218,0.18);
}
.feld__notiz{ font-size:12px; color:var(--grey-mid); line-height:1.45; }
.felder{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:640px){ .felder--2{ grid-template-columns:repeat(2,1fr) } }

/* Schalter */
.schalter{ position:relative; flex-shrink:0; width:46px; height:26px; }
.schalter input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:2; width:100%; height:100%; }
.schalter__bahn{ position:absolute; inset:0; background:var(--grey-line); border-radius:var(--schalter-r); transition:background .16s ease; display:block; }
.schalter__knopf{ position:absolute; top:3px; left:3px; width:20px; height:20px; background:var(--white); border-radius:50%; transition:transform .16s ease; box-shadow:0 1px 3px rgba(13,14,17,0.25); }
.schalter input:checked ~ .schalter__bahn{ background:var(--cyan); }
.schalter input:checked ~ .schalter__bahn .schalter__knopf{ transform:translateX(20px); }
.schalter input:focus-visible ~ .schalter__bahn{ box-shadow:0 0 0 3px rgba(37,195,218,0.3); }

/* Leistungsliste */
.leistungen{ margin-top:18px; border:1px solid var(--grey-line); border-radius:var(--kante); overflow:hidden; }
.lst{ border-bottom:1px solid var(--grey-line); }
.lst:last-child{ border-bottom:none; }
.lst__kopf{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:16px;
  padding:16px 20px; background:var(--white); cursor:pointer;
  transition:background .14s ease;
}
.lst__kopf:hover{ background:var(--page); }
.lst:has(input:checked) .lst__kopf{ background:var(--cyan-soft); }
.lst__text{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.lst__name{ display:block; font-size:15px; font-weight:700; color:var(--ink); line-height:1.3; }
.lst:not(:has(input:checked)) .lst__name{ color:var(--grey-mid); }
.lst__std{ display:block; font-size:13px; color:var(--grey-mid); line-height:1.4; }
.lst__std b{ color:var(--ink-2); font-weight:600; }
.lst:not(:has(input:checked)) .lst__std b{ color:var(--grey-mid); font-weight:400; }
.lst--gesperrt .lst__kopf{ cursor:not-allowed; background:var(--white); }
.lst--gesperrt .lst__kopf:hover{ background:var(--white); }
.lst--gesperrt .lst__name,.lst--gesperrt .lst__std{ color:var(--grey-line); }
.lst--gesperrt .schalter__bahn{ background:var(--grey-soft); }

/* Abschnitts-Untertitel im Formular */
.unter{
  margin:26px 0 4px; padding:13px 18px; background:var(--page);
  border-left:3px solid var(--cyan);
  font-size:13px; font-weight:700; color:var(--ink); letter-spacing:0.02em;
}
.satz{ border:none; padding:0; margin:0 0 30px; }
.satz__titel{
  display:flex; align-items:center; gap:11px;
  font-size:15px; font-weight:800; color:var(--ink); margin-bottom:18px;
}
.satz__titel i{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--cyan); color:var(--ink);
  font-size:12px; font-weight:800; font-style:normal; flex-shrink:0;
}
.satz__hinweis{ font-size:13px; color:var(--grey-mid); line-height:1.5; margin:-8px 0 16px 36px; }

/* Upload */
.upload{
  border:1px dashed var(--grey-line); border-radius:var(--kante);
  padding:19px 22px; background:var(--page);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; cursor:pointer;
  transition:border-color .14s ease, background .14s ease;
}
.upload:hover{ border-color:var(--cyan); background:var(--cyan-soft); }
.upload__symbol{
  width:38px; height:38px; border-radius:50%; background:var(--cyan); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:19px; font-weight:700; flex-shrink:0;
}
.upload__text{ flex:1; min-width:170px; }
.upload__text strong{ display:block; font-size:14px; font-weight:700; }
.upload__text span{ font-size:12px; color:var(--grey-mid); }

/* ---------- Hilfsklassen ---------- */
.mt-0{ margin-top:0 } .mt-1{ margin-top:8px } .mt-2{ margin-top:16px }
.mt-3{ margin-top:24px } .mt-4{ margin-top:32px } .mt-5{ margin-top:44px }
.zentriert{ text-align:center }
.strich{ width:54px; height:2px; background:var(--cyan); margin:18px 0 22px; }

/* =========================================================
   Startseite: Hero mit Rechner
   ========================================================= */
.start{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink); color:var(--white);
  padding-block:64px 76px;
}
.start__bg{
  position:absolute; inset:0; z-index:-1;
  background-image:url('assets/hero.jpg');
  background-size:cover; background-position:center 62%;
}
/* Waermer und durchlaessiger als vorher: das Foto soll zu sehen sein. */
.start__bg::after{
  content:""; position:absolute; inset:0;
  background:
    /* Textseite links tragen, rechts das Motiv moeglichst frei lassen */
    linear-gradient(100deg, rgba(8,14,18,0.88) 0%, rgba(10,26,34,0.68) 38%,
                    rgba(14,40,50,0.30) 64%, rgba(16,46,54,0.10) 100%),
    /* Vignette statt flaechiger Schleier */
    radial-gradient(120% 95% at 72% 42%, rgba(0,0,0,0) 38%, rgba(8,14,18,0.46) 100%),
    linear-gradient(180deg, rgba(8,14,18,0.42) 0%, rgba(0,0,0,0) 22%);
}
.start__inner{
  display:grid; grid-template-columns:1fr; gap:44px; align-items:start;
}
@media (min-width:1000px){
  .start{ padding-block:150px 104px; min-height:88vh; display:flex; align-items:flex-start; }
  .start__inner{ grid-template-columns:1fr 452px; gap:72px; width:100%; }
}
.start__text h1{ color:var(--white); margin-top:18px; max-width:15ch; }
.start__signet + .eyebrow--hell{ margin-top:0; }
.start__lede{
  margin-top:24px; font-size:19px; line-height:1.55;
  color:rgba(255,255,255,0.82); max-width:50ch;
}
.start__punkte{
  list-style:none; padding:0; margin:30px 0 0;
  display:flex; flex-direction:column; gap:12px;
}
.start__punkte li{
  font-size:15px; color:rgba(255,255,255,0.9);
  padding-left:28px; position:relative; line-height:1.45;
}
.start__punkte li::before{
  content:""; position:absolute; left:0; top:6px;
  width:14px; height:8px;
  border-left:2px solid var(--cyan); border-bottom:2px solid var(--cyan);
  transform:rotate(-45deg);
}

/* ---------- Der Rechner ---------- */
.rechner{
  position:relative;
  background:var(--white); color:var(--ink);
  border-radius:24px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.12);
}
.rechner__kopf{
  padding:26px 28px 24px;
  background:linear-gradient(135deg,#0D0E11 0%,#16323A 62%,#14505C 100%);
  color:var(--white);
  position:relative;
}
.rechner__kopf::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--cyan),rgba(37,195,218,0.15));
}
.rechner__label{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:600; color:var(--cyan);
}
.rechner__label::before{
  content:""; width:22px; height:2px; border-radius:2px; background:var(--cyan);
}
.rechner__titel{ font-size:25px; font-weight:700; margin-top:9px; letter-spacing:-0.022em; color:var(--white); }
.rechner__koerper{ padding:22px 26px 26px; }

.wahl{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.wahl__opt{
  font-family:var(--sans); cursor:pointer; text-align:left;
  background:var(--white); border:1.5px solid var(--grey-line);
  border-radius:var(--kante-s); padding:13px 13px 14px;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
  transition:border-color .14s ease, background .14s ease;
  display:flex; flex-direction:column; gap:3px;
}
.wahl__opt:hover{ border-color:var(--cyan); transform:translateY(-1px); }
.wahl__opt[aria-pressed="true"]{ border-color:var(--cyan); background:var(--cyan-soft); }
.wahl__name{ font-size:14px; font-weight:700; color:var(--ink); line-height:1.2; }
.wahl__hint{ font-size:12.5px; color:var(--grey-mid); line-height:1.3; }

.rechner__felder{ display:flex; flex-direction:column; gap:15px; margin-top:20px; }
.mit-einheit{ position:relative; }
.mit-einheit input{
  font-family:var(--sans); font-size:18px; font-weight:700; color:var(--ink);
  width:100%; padding:14px 68px 14px 17px;
  border:1.5px solid var(--grey-line); border-radius:var(--kante-s);
  background:var(--white); font-variant-numeric:tabular-nums;
}
.mit-einheit input:focus{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(37,195,218,0.18);
}
.mit-einheit span{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-size:14px; font-weight:600;
  color:var(--grey-mid); pointer-events:none;
}

.ergebnis{
  margin-top:20px; padding:20px 23px 21px;
  background:linear-gradient(135deg,#0D0E11 0%,#15303A 100%);
  color:var(--white);
  border-radius:var(--kante);
}
.ergebnis__label{
  font-size:13.5px; font-weight:600; color:var(--cyan);
  letter-spacing:-0.005em;
}
.ergebnis__wert{
  font-size:clamp(26px,2.8vw,33px); font-weight:800;
  letter-spacing:-0.035em;
  margin-top:7px; line-height:1.1;
  font-variant-numeric:tabular-nums;
  text-wrap:nowrap;
}
/* Preis je kWp: die Kennzahl, nach der in der Branche gefragt wird */
.ergebnis__einheit{
  margin-top:11px; padding-top:11px;
  border-top:1px solid rgba(255,255,255,0.16);
  font-size:13.5px; color:rgba(255,255,255,0.72); line-height:1.4;
}
.ergebnis__einheit b{
  font-size:17px; font-weight:700;
  color:var(--cyan); letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}
.ergebnis__inkl{
  margin-top:10px; font-size:12px; line-height:1.45;
  color:rgba(255,255,255,0.6);
  padding-left:19px; position:relative;
}
.ergebnis__inkl::before{
  content:""; position:absolute; left:0; top:5px;
  width:10px; height:6px;
  border-left:1.5px solid var(--cyan); border-bottom:1.5px solid var(--cyan);
  transform:rotate(-45deg);
}

.rechner__cta{ width:100%; justify-content:center; margin-top:20px; }
.rechner__fuss{
  font-size:13px; color:var(--grey-mid); line-height:1.5; margin-top:14px;
}

/* ---------- Praktiker-Block ---------- */
.praktiker{ display:grid; grid-template-columns:1fr; gap:36px; align-items:center; }
@media (min-width:900px){ .praktiker{ grid-template-columns:1.02fr 0.98fr; gap:56px } }
.praktiker__bild img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--bild-r);
  box-shadow:0 22px 54px rgba(13,14,17,0.16);
}

/* ---------- Referenz-Chips ---------- */
.ref-leiste{ display:flex; flex-wrap:wrap; gap:10px; }
.ref-chip{
  border:1px solid var(--grey-line); border-radius:var(--pill);
  padding:10px 20px; display:flex; align-items:baseline; gap:9px;
  background:var(--white);
  transition:border-color .16s ease, transform .16s ease;
}
.ref-chip:hover{ border-color:var(--cyan); transform:translateY(-2px); }
.ref-chip b{ font-size:15px; font-weight:700; }
.ref-chip span{ font-size:13px; color:var(--cyan-deep); font-weight:600; }
.ref-chip--bernstein span{ color:var(--bernstein-deep); }

/* =========================================================
   Unterseiten-Bausteine
   ========================================================= */
.punkte{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.punkte li{
  font-size:15px; color:var(--ink-2); line-height:1.5;
  padding-left:19px; position:relative;
}
.punkte li::before{
  content:""; position:absolute; left:0; top:9px;
  width:7px; height:7px; background:var(--cyan); border-radius:50%;
}

.merkmal{ background:var(--white); border:1px solid var(--grey-line); padding:26px 24px 28px; }
.merkmal h3{ font-size:18px; margin-bottom:11px; }
.merkmal p{ font-size:14px; color:var(--ink-2); line-height:1.55; }

.block{ background:var(--white); border:1px solid var(--grey-line); padding:30px 28px 32px; }
.block h3{ font-size:20px; margin-bottom:18px; }

.norm{ background:var(--white); border:1px solid var(--grey-line); padding:24px 22px 26px; }
.norm__badge{
  display:inline-block; font-size:12.5px;
  color:var(--cyan-deep); border:1px solid var(--cyan);
  padding:5px 10px; border-radius:var(--kante); margin-bottom:15px; font-weight:600;
  background:var(--cyan-soft);
}
.norm h3{ font-size:17px; margin-bottom:10px; }
.norm p{ font-size:13px; color:var(--ink-2); line-height:1.55; }

.schritt{ background:var(--white); border:1px solid var(--grey-line); padding:24px 22px 28px; }
.schritt__n{ font-size:12px; font-weight:700; color:var(--cyan-deep); letter-spacing:0.04em; }
.schritt h3{ font-size:18px; margin:10px 0 10px; }
.schritt p{ font-size:14px; color:var(--ink-2); line-height:1.55; }

.erlos{ background:var(--white); border:1px solid var(--grey-line); padding:24px 22px 26px; }
.erlos__n{ font-size:12px; color:var(--bernstein-deep); font-weight:700; letter-spacing:0.05em; }
.erlos h3{ font-size:18px; margin:10px 0 10px; }
.erlos p{ font-size:14px; color:var(--ink-2); line-height:1.55; }

/* Referenzen */
.refgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:640px){ .refgrid{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:1000px){ .refgrid{ grid-template-columns:repeat(4,1fr) } }
.refkarte{
  background:var(--white); border:1px solid var(--grey-line);
  padding:20px 22px 22px; display:flex; flex-direction:column; gap:7px;
  transition:border-color .14s ease, transform .14s ease;
}
.refkarte:hover{ border-color:var(--cyan); transform:translateY(-2px); }
.refkarte__typ{
  font-size:12px; letter-spacing:0.055em;
  color:var(--cyan-deep); font-weight:700; text-transform:uppercase;
}
.refkarte--bernstein .refkarte__typ{ color:var(--bernstein-deep); }
.refkarte__name{ font-size:17px; font-weight:700; letter-spacing:-0.01em; line-height:1.2; }
.refkarte__wert{
  font-size:14px; font-weight:700; color:var(--ink);
  margin-top:auto; padding-top:11px; border-top:1px solid var(--grey-line);
}

/* Standorte */
/* =========================================================
   Standorte: Karte und Liste auf gleicher Höhe
   ========================================================= */
.standorte{ display:grid; grid-template-columns:1fr; gap:28px; align-items:stretch; }
@media (min-width:900px){ .standorte{ grid-template-columns:0.82fr 1.18fr; gap:40px } }

.standorte__karte{
  background:var(--white); border:1px solid var(--grey-line);
  border-radius:var(--kante);
  padding:18px; display:flex; justify-content:center; align-items:center;
}
.karte{ width:100%; max-width:390px; height:auto; display:block; }
.karte .land{ fill:#E6E7E9; stroke:#D2D4D6; stroke-width:1; }
.karte .grenze{ fill:none; stroke:#FBFAF8; stroke-width:1.1; stroke-linejoin:round; }

/* Jede Nadel ist eine eigene Gruppe, damit Überfahren und Tastatur greifen */
.ort{ cursor:default; outline:none; }
.ort__feld{ fill:transparent; }
.ort__nadel{
  fill:var(--cyan); stroke:#fff; stroke-width:2;
  transition:fill .16s ease;
}
.ort__auge{ fill:#fff; pointer-events:none; }
.ort--hq .ort__nadel{ fill:var(--ink); stroke-width:2.4; }
.ort--hq .ort__auge{ fill:var(--cyan); }
.ort__faden{ stroke:var(--ink); stroke-width:2; }

.ort__fahne rect{ fill:var(--ink); }
.ort__fahne text{
  font-family:"Plus Jakarta Sans",-apple-system,sans-serif;
  font-size:15px; font-weight:700; fill:#fff; text-anchor:middle;
}
.ort--hq .ort__fahne text{ text-anchor:start; font-size:17px; }

/* Namensfahne erscheint erst beim Überfahren, die Zentrale trägt ihre dauerhaft */
.ort__fahne:not(.ort__fahne--fest){
  opacity:0; transform:translateY(5px);
  transition:opacity .16s ease, transform .16s ease;
  pointer-events:none;
}
.ort:hover .ort__fahne,
.ort:focus-visible .ort__fahne,
.ort.ist-aktiv .ort__fahne{ opacity:1; transform:translateY(0); }

/* Die Nadel selbst wächst und wechselt die Farbe */
.ort{ transition:transform .18s cubic-bezier(.2,.8,.3,1); transform-box:fill-box; transform-origin:center bottom; }
.ort:hover .ort__nadel,
.ort:focus-visible .ort__nadel,
.ort.ist-aktiv .ort__nadel{ fill:var(--ink); }
.ort:hover .ort__auge,
.ort:focus-visible .ort__auge,
.ort.ist-aktiv .ort__auge{ fill:var(--cyan); }
.ort:focus-visible .ort__nadel{ stroke:var(--cyan); stroke-width:3; }

/* ---------- Die Liste füllt exakt die Kartenhöhe ---------- */
.standorte__liste{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:8px; align-content:stretch;
}
@media (min-width:640px){ .standorte__liste{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:900px){
  .standorte__liste{ grid-template-rows:repeat(6,1fr); gap:10px; }
}
.hub{
  display:flex; align-items:center; gap:10px;
  padding:14px 20px; background:var(--white);
  border:1px solid var(--grey-line); border-radius:var(--pill);
  font-size:14.5px; font-weight:500; color:var(--ink-2);
  white-space:nowrap; cursor:default;
  transition:border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.hub::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--cyan); flex:none;
}
.hub--hq{
  background:var(--ink); border-color:var(--ink); color:var(--white); font-weight:700;
}
.hub--hq::before{ background:var(--cyan); }
.hub.ist-aktiv{
  border-color:var(--cyan); background:var(--cyan-nebel);
  color:var(--ink); transform:translateY(-2px);
}
.hub--hq.ist-aktiv{ background:var(--ink); color:var(--white); border-color:var(--cyan); }

/* Meilensteine */
.meilen{ display:grid; grid-template-columns:1fr; gap:2px; background:var(--grey-line); border:1px solid var(--grey-line); }
@media (min-width:760px){ .meilen{ grid-template-columns:repeat(5,1fr) } }
.meilen__punkt{ background:var(--white); padding:20px 18px 22px; }
.meilen__jahr{ font-size:17px; font-weight:800; color:var(--cyan-deep); letter-spacing:-0.01em; }
.meilen__text{ font-size:13px; color:var(--ink-2); margin-top:8px; line-height:1.45; }

/* Team */
.team{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:700px){ .team{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1080px){ .team{ grid-template-columns:repeat(3,1fr) } }
.person{
  background:var(--white); border:1px solid var(--grey-line);
  padding:20px 22px; display:flex; gap:16px; align-items:center;
}
.person__initialen{
  width:50px; height:50px; border-radius:50%; flex-shrink:0;
  background:var(--ink); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; letter-spacing:-0.01em;
}
.person__name{ font-size:15px; font-weight:700; line-height:1.25; }
.person__rolle{ font-size:13px; color:var(--grey-mid); margin-top:3px; line-height:1.4; }

/* Gruppe */
.gruppe{ display:flex; flex-direction:column; gap:12px; }
.gruppe__eintrag{
  background:var(--white); border:1px solid var(--grey-line);
  padding:17px 20px; border-radius:var(--kante);
}
.gruppe__eintrag b{ display:block; font-size:15px; font-weight:700; }
.gruppe__eintrag span{ display:block; font-size:13px; color:var(--grey-mid); margin-top:3px; }

/* Kontakt */
.kontaktkarte{ background:var(--white); border:1px solid var(--grey-line); padding:28px 26px 30px; }
.kontakt__gross{ font-size:22px; font-weight:800; letter-spacing:-0.02em; margin-top:12px; }
.kontakt__gross a:hover{ color:var(--cyan-deep); }
.kontakt__klein{ font-size:14px; color:var(--grey-mid); margin-top:8px; }
.kontakt__adresse{ font-size:15px; line-height:1.6; color:var(--ink-2); margin-top:12px; }

/* =========================================================
   Anfrage-Seite
   ========================================================= */
.wege{ display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:40px; }
@media (min-width:700px){ .wege{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1100px){ .wege{ grid-template-columns:repeat(4,1fr) } }
.weg{
  background:var(--white); border:2px solid var(--grey-line);
  padding:22px 22px 24px; cursor:pointer; text-align:left;
  font-family:var(--sans); display:flex; flex-direction:column; gap:8px;
  transition:border-color .14s ease, background .14s ease, transform .14s ease;
  border-radius:var(--kante);
}
.weg:hover{ border-color:var(--cyan); transform:translateY(-2px); }
.weg[aria-selected="true"]{ border-color:var(--cyan); background:var(--cyan-soft); }
.weg__marke{
  font-size:12px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--cyan-deep); font-weight:700;
}
.weg__titel{ font-size:18px; font-weight:800; letter-spacing:-0.02em; line-height:1.2; color:var(--ink); }
.weg__text{ font-size:13.5px; color:var(--ink-2); line-height:1.5; }
.weg__meta{
  margin-top:auto; padding-top:8px; font-size:12px; color:var(--grey-mid);
  display:flex; gap:14px; flex-wrap:wrap;
}
.weg__meta b{ color:var(--cyan-deep); font-weight:700; }

.anfrage__raster{ display:grid; grid-template-columns:1fr; gap:34px; align-items:start; }
@media (min-width:1080px){ .anfrage__raster{ grid-template-columns:1.65fr 1fr; gap:44px } }

.formkarte{ background:var(--white); border:1px solid var(--grey-line); border-radius:var(--kante); overflow:hidden; }
.formkarte__kopf{ padding:30px 30px 24px; border-bottom:1px solid var(--grey-line); }
.formkarte__kopf h2{ font-size:25px; margin-bottom:12px; }
.formkarte__kopf p{ font-size:15px; color:var(--ink-2); line-height:1.6; }
.formkarte__dsgvo{
  font-size:13px !important; color:var(--grey-mid) !important;
  font-style:italic; margin-top:14px !important;
}
.formkarte__dsgvo a{ color:var(--cyan-deep); text-decoration:underline; }
.formkarte form{ padding:28px 30px 32px; }

.absenden{
  margin-top:8px; padding-top:26px; border-top:1px solid var(--grey-line);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.absenden__hinweis{ font-size:13px; color:var(--grey-mid); }
.absenden__recht{ font-size:12px; color:var(--grey-mid); line-height:1.5; margin-top:16px; }

.ablauf{
  background:var(--ink); color:var(--white);
  padding:30px 28px 32px; border-radius:var(--kante);
}
@media (min-width:1080px){ .ablauf{ position:sticky; top:96px } }
.ablauf h3{ color:var(--white); font-size:19px; margin-bottom:9px; }
.ablauf__sub{ font-size:13px; color:rgba(255,255,255,0.65); line-height:1.55; margin-bottom:24px; }
.ablauf__schritte{ display:flex; flex-direction:column; }
.ablauf__schritt{
  display:grid; grid-template-columns:auto 1fr; gap:15px;
  padding-bottom:20px; position:relative;
}
.ablauf__schritt:not(:last-child)::before{
  content:""; position:absolute; left:13px; top:29px; bottom:3px;
  width:1px; background:rgba(255,255,255,0.2);
}
.ablauf__punkt{
  width:27px; height:27px; border-radius:50%;
  background:var(--cyan); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; flex-shrink:0; position:relative; z-index:2;
}
.ablauf__schritt strong{ display:block; font-size:14px; color:var(--white); font-weight:700; margin-bottom:3px; }
.ablauf__schritt p{ font-size:13px; color:rgba(255,255,255,0.66); line-height:1.5; }
.ablauf__fuss{
  margin-top:6px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.14);
  font-size:12px; color:rgba(255,255,255,0.55); line-height:1.5;
}

/* =========================================================
   Brotkrumen, Kurzfassung, Fragen und Antworten
   Formsprache: Kante, Haarlinie, Monospace fuer Technisches
   ========================================================= */

/* ---------- Brotkrumen ---------- */
.krumen{
  background:transparent;
  font-size:14px;
  padding-block:18px 0;
  color:var(--grey-mid);
}
.krumen a{ color:var(--grey-mid); transition:color .14s ease; }
.krumen a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.krumen i{ font-style:normal; color:var(--grey-line); margin-inline:9px; }
.krumen [aria-current="page"]{ color:var(--ink); font-weight:600; }

/* ---------- Kurzfassung: das Zitierbare nach oben ---------- */
.kurz{
  background:linear-gradient(140deg,var(--cyan-nebel) 0%,var(--white) 58%);
  border:1px solid rgba(37,195,218,0.3);
  border-radius:var(--kante);
  padding:28px 30px 30px;
}
.kurz__marke{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:700; color:var(--cyan-deep);
  letter-spacing:-0.01em; margin-bottom:17px;
}
.kurz__marke::before{ content:""; width:24px; height:2px; border-radius:2px; background:var(--cyan); }
.kurz__liste{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:1fr; gap:13px;
}
@media (min-width:880px){ .kurz__liste{ grid-template-columns:1fr 1fr; gap:15px 40px; } }
.kurz__liste li{
  font-size:14.5px; line-height:1.55; color:var(--ink-2);
  padding-left:20px; position:relative;
}
.kurz__liste li::before{
  content:""; position:absolute; left:0; top:7px;
  width:8px; height:8px; border-radius:50%; background:var(--cyan);
}
.kurz__liste b{ color:var(--ink); font-weight:700; }

/* ---------- Fragen und Antworten ---------- */
.faq{ display:flex; flex-direction:column; gap:10px; }
.faq__eintrag{
  background:var(--white); border:1px solid var(--grey-line);
  border-radius:var(--kante-s); overflow:hidden;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.faq__eintrag:hover{ border-color:var(--cyan); }
.faq__eintrag[open]{ box-shadow:0 8px 26px rgba(13,14,17,0.07); }
.faq__eintrag summary{
  list-style:none; cursor:pointer;
  padding:18px 52px 18px 22px; position:relative;
  transition:color .14s ease;
}
.faq__eintrag summary::-webkit-details-marker{ display:none; }
.faq__eintrag summary h3{
  display:inline; font-size:16.5px; font-weight:700;
  line-height:1.4; letter-spacing:-0.005em;
}
.faq__eintrag summary:hover h3{ color:var(--cyan-deep); }
/* Plus- und Minuszeichen aus zwei Strichen, passend zur Kante */
.faq__eintrag summary::before,
.faq__eintrag summary::after{
  content:""; position:absolute; right:6px; top:50%;
  background:var(--cyan); transition:transform .18s ease, opacity .18s ease;
}
.faq__eintrag summary::before{ width:13px; height:2px; border-radius:2px; margin-top:-1px; right:20px; }
.faq__eintrag summary::after{ width:2px; height:13px; border-radius:2px; margin-top:-6.5px; right:25.5px; }
.faq__eintrag[open] summary::after{ transform:rotate(90deg); opacity:0; }
.faq__eintrag summary:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.faq__antwort{ padding:0 52px 21px 22px; }
.faq__antwort p{
  font-size:14.5px; line-height:1.68; color:var(--ink-2);
  max-width:68ch;
}

/* ---------- Trennzeichen in der Preiszeile ---------- */
.ergebnis__einheit i{
  font-style:normal; color:rgba(255,255,255,0.32);
  margin-inline:7px;
}

/* =========================================================
   Kopfzeile auf schmalen Geraeten
   Das Logo behaelt sein Seitenverhaeltnis, der Knopf tritt zurueck.
   ========================================================= */
.kopf__inner > a:first-child{ flex:none; display:block; }
.kopf__logo{ flex:none; max-width:none; }

@media (max-width:820px){
  .kopf__inner{ gap:12px; }
  .kopf__cta{ padding-inline:16px; font-size:13px; }
}
@media (max-width:560px){
  /* Zwei Knoepfe nebeneinander sind hier einer zu viel:
     der Weg zum Angebot steht gleich darunter im Hero. */
  .kopf__cta{ display:none; }
  .burger{ margin-left:auto; }
}

/* =========================================================
   Rechtstexte: ruhige Lesespalte
   ========================================================= */
.recht{ max-width:72ch; }
.recht h2{
  font-size:20px; font-weight:700; margin-top:34px; margin-bottom:11px;
  letter-spacing:-0.015em;
}
.recht h2:first-child{ margin-top:0; }
.recht p{
  font-size:16px; line-height:1.72; color:var(--ink-2); margin-bottom:13px;
}
.recht a{ color:var(--cyan-deep); text-decoration:underline; text-underline-offset:3px; }
.recht a:hover{ color:var(--ink); }
.hinweis{
  margin-top:38px; padding:18px 22px;
  background:#FFF6E9; border:1px solid #F3D9AF;
  border-radius:var(--kante-s);
  font-size:14.5px; line-height:1.6; color:#6A4A12;
}
.hinweis strong{ color:#4E360B; }

/* Deutsche Komposita brechen sonst aus schmalen Spalten aus. */
.recht p, .recht h2, .faq__antwort p, .kurz__liste li{
  overflow-wrap:break-word;
  hyphens:auto;
}
.recht a{ overflow-wrap:anywhere; }

/* Lange Überschriften duerfen auf dem Telefon trennen. */
h1,h2,h3{ overflow-wrap:break-word; hyphens:auto; }

/* =========================================================
   Mega-Menü, Sprungmarke, Burger
   ========================================================= */
.sprung{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--white);
  padding:13px 22px; border-radius:0 0 var(--kante-s) 0;
  font-size:14px; font-weight:600;
}
.sprung:focus{ left:0; }

.kopf__marke{ flex:none; display:block; }
.drop__pfeil{ transition:transform .2s ease; opacity:.55; }
.drop[data-offen="true"] .drop__pfeil{ transform:rotate(180deg); opacity:1; }
.drop[data-offen="true"] .drop__btn{ color:var(--ink); }


.mega__titel{
  font-size:12.5px; font-weight:700; color:var(--grey-mid);
  letter-spacing:0.04em; text-transform:uppercase; margin-bottom:13px;
}
.mega__eintrag{
  display:block; padding:10px 12px; margin-inline:-12px;
  border-radius:var(--kante-s);
  transition:background .14s ease;
}
.mega__eintrag:hover{ background:var(--cyan-nebel); }
.mega__eintrag strong{ display:block; font-size:15.5px; font-weight:700; color:var(--ink); }
.mega__eintrag span{ display:block; font-size:13px; color:var(--grey-mid); margin-top:2px; line-height:1.4; }

.mega__weg{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 12px; margin-inline:-12px;
  border-radius:var(--kante-s);
  transition:background .14s ease;
}
.mega__weg:hover{ background:var(--cyan-nebel); }
.mega__weg strong{ font-size:14.5px; font-weight:600; color:var(--ink-2); }
.mega__weg:hover strong{ color:var(--ink); }
.mega__weg em{ font-style:normal; font-size:12.5px; color:var(--cyan-deep); font-weight:600; white-space:nowrap; }

.mega__marke{ font-size:13px; font-weight:700; color:var(--cyan-deep); }
.mega__text{ font-size:13.5px; line-height:1.5; color:var(--ink-2); }

/* Burger mit Strichen statt nacktem Wort.
   Die Ausblendung ab 1000px aus dem Kopfzeilen-Block muss erhalten bleiben. */
.burger{ align-items:center; gap:9px; }
@media (max-width:999px){ .burger{ display:inline-flex; } }
@media (min-width:1000px){ .burger{ display:none; } }
.burger__striche{ display:inline-flex; flex-direction:column; gap:3.5px; width:17px; }
.burger__striche i{ display:block; height:2px; border-radius:2px; background:var(--ink); transition:transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] .burger__striche i:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__striche i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] .burger__striche i:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* =========================================================
   Leistungspakete: drei Stufen nebeneinander
   ========================================================= */
.stufen{
  display:grid; grid-template-columns:1fr; gap:20px;
  align-items:start;
}
@media (min-width:900px){ .stufen{ grid-template-columns:repeat(3,1fr); gap:22px; } }

.stufe{
  position:relative;
  background:var(--white);
  border:1px solid var(--grey-line);
  border-radius:var(--kante);
  padding:28px 26px 26px;
  display:flex; flex-direction:column; gap:20px;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.stufe:hover{ border-color:var(--cyan); transform:translateY(-3px); box-shadow:0 16px 40px rgba(13,14,17,0.09); }
.stufe--empfohlen{
  border-color:var(--ink); border-width:2px;
  box-shadow:0 18px 46px rgba(13,14,17,0.13);
}
@media (min-width:900px){ .stufe--empfohlen{ margin-top:-14px; padding-block:38px 30px; } }

.stufe__marke{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--cyan); color:var(--ink);
  font-size:12.5px; font-weight:700; white-space:nowrap;
  padding:6px 16px; border-radius:var(--pill);
  border:1px solid var(--ink);
}
.stufe__rang{
  display:inline-flex; align-items:baseline; gap:7px;
  font-size:13px; color:var(--grey-mid); margin-bottom:8px;
}
.stufe__rang b{
  font-weight:700; color:var(--cyan-deep);
  letter-spacing:0.02em; text-transform:uppercase; font-size:12px;
}
.stufe__kopf h3{ font-size:26px; font-weight:800; letter-spacing:-0.025em; }
.stufe__fuer{ font-size:14.5px; line-height:1.6; color:var(--ink-2); margin-top:12px; }

.stufe__liste{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; flex:1; }
.stufe__liste li{
  font-size:14.5px; line-height:1.5; padding-left:26px; position:relative;
}
.stufe__liste .ja{ color:var(--ink-2); }
.stufe__liste .ja::before{
  content:""; position:absolute; left:2px; top:5px;
  width:12px; height:7px;
  border-left:2px solid var(--cyan); border-bottom:2px solid var(--cyan);
  transform:rotate(-45deg);
}
.stufe__liste .nein{ color:var(--grey-mid); }
.stufe__liste .nein::before{
  content:""; position:absolute; left:4px; top:9px;
  width:11px; height:2px; border-radius:2px; background:var(--grey-line);
}
.stufe__cta{ width:100%; justify-content:center; }

.stufen__fuss{
  margin-top:26px; font-size:13.5px; line-height:1.6;
  color:var(--grey-mid); max-width:80ch;
}

/* =========================================================
   Anfragetool als Herzstück auf der Startseite
   ========================================================= */
.tool{ background:linear-gradient(170deg,var(--cyan-nebel) 0%,var(--creme) 62%); }
.tool__kopf{ max-width:60ch; }

.schritte{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:1fr; gap:22px;
  counter-reset:schritt;
}
@media (min-width:860px){ .schritte{ grid-template-columns:repeat(3,1fr); gap:26px; } }
.schritte li{
  background:var(--white);
  border:1px solid var(--grey-line);
  border-radius:var(--kante);
  padding:24px 24px 26px;
  position:relative;
}
.schritte__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--cyan); color:var(--ink);
  font-size:16px; font-weight:800;
  margin-bottom:14px;
}
.schritte h3{ font-size:18px; margin-bottom:9px; }
.schritte p{ font-size:14.5px; line-height:1.6; color:var(--ink-2); }

.tool__wege{ margin-top:34px; }
.tool__wege-titel{
  font-size:13px; font-weight:700; color:var(--grey-mid);
  letter-spacing:0.04em; text-transform:uppercase; margin-bottom:14px;
}
.tool__gitter{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:700px){ .tool__gitter{ grid-template-columns:1fr 1fr; } }
@media (min-width:1080px){ .tool__gitter{ grid-template-columns:repeat(4,1fr); } }
.tool__weg{
  display:flex; flex-direction:column; gap:5px;
  background:var(--white);
  border:1px solid var(--grey-line);
  border-radius:var(--kante-s);
  padding:16px 18px 15px;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.tool__weg:hover{
  border-color:var(--cyan); transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(13,14,17,0.09);
}
.tool__weg strong{ font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.3; }
.tool__weg span{ font-size:13px; color:var(--grey-mid); line-height:1.45; }
.tool__weg em{
  font-style:normal; font-size:12.5px; font-weight:700;
  color:var(--cyan-deep); margin-top:4px;
}

/* =========================================================
   Einstieg ins Anfragetool: das Versprechen im Hero
   ========================================================= */
.start__text h1 .hl{ color:var(--cyan); }

.einstieg{
  background:var(--white); color:var(--ink);
  border-radius:24px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.34), 0 2px 8px rgba(0,0,0,0.12);
}
.einstieg__kopf{
  padding:26px 28px 22px;
  background:linear-gradient(135deg,#0D0E11 0%,#16323A 62%,#14505C 100%);
  color:var(--white); position:relative;
}
.einstieg__kopf::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--cyan),rgba(37,195,218,0.15));
}
.einstieg__label{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:600; color:var(--cyan);
}
.einstieg__label::before{ content:""; width:22px; height:2px; border-radius:2px; background:var(--cyan); }
.einstieg__titel{ font-size:25px; font-weight:700; margin-top:9px; letter-spacing:-0.022em; color:var(--white); }
.einstieg__sub{ font-size:14px; color:rgba(255,255,255,0.68); margin-top:7px; }

.einstieg__koerper{ padding:14px 16px 18px; }
/* Jede Zeile ist eine eigene Kachel mit Pfeil: Sie soll auf den ersten
   Blick anklickbar aussehen, auch ohne Maus darüberzufahren. */
.einstieg__weg{
  display:flex; align-items:center; gap:13px;
  padding:12px 13px; border-radius:var(--kante-s);
  border:1px solid var(--grey-line);
  transition:background .16s ease, border-color .16s ease, transform .16s ease,
             box-shadow .16s ease;
}
.einstieg__weg + .einstieg__weg{ margin-top:8px; }
.einstieg__weg:hover,
.einstieg__weg:focus-visible{
  background:var(--cyan-nebel); border-color:var(--cyan);
  transform:translateX(3px);
  box-shadow:0 8px 20px rgba(13,14,17,0.07);
  outline:none;
}
.einstieg__pfeil{
  flex:none; display:flex; color:var(--cyan-deep);
  transition:transform .16s ease;
}
.einstieg__weg:hover .einstieg__pfeil,
.einstieg__weg:focus-visible .einstieg__pfeil{ transform:translateX(4px); }
.einstieg__ikon{
  flex:none; width:40px; height:40px; border-radius:50%;
  background:var(--cyan-soft); color:var(--cyan-deep);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.einstieg__weg:hover .einstieg__ikon{ background:var(--cyan); color:var(--ink); }
.einstieg__text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.einstieg__text strong{ font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.3; }
.einstieg__text span{ font-size:13px; color:var(--grey-mid); line-height:1.4; }
.einstieg__dauer{
  flex:none; font-size:12.5px; font-weight:700; color:var(--cyan-deep);
  background:var(--cyan-soft); padding:5px 11px; border-radius:var(--pill);
}
.einstieg__koerper{ padding:14px 14px 18px; }

.einstieg__fuss{
  margin-top:14px; padding:15px 13px 4px;
  border-top:1px solid var(--grey-line);
}
.einstieg__zusage{ font-size:13.5px; line-height:1.55; color:var(--grey-mid); }
.einstieg__zusage b{ display:block; color:var(--ink); font-size:14.5px; margin-bottom:3px; }
.einstieg__preis{
  display:inline-block; margin-top:11px;
  font-size:13.5px; font-weight:600; color:var(--cyan-deep);
  text-decoration:underline; text-underline-offset:3px;
}
.einstieg__preis:hover{ color:var(--ink); }

/* ---------- Rechner als eigener Abschnitt ---------- */
.rechnerband{ background:linear-gradient(170deg,var(--cyan-nebel) 0%,var(--creme) 60%); }
.rechnerband__inner{
  display:grid; grid-template-columns:1fr; gap:34px; align-items:start;
}
@media (min-width:980px){
  .rechnerband__inner{ grid-template-columns:1fr 440px; gap:56px; }
}
.rechnerband .rechner{ box-shadow:0 22px 56px rgba(13,14,17,0.15); }

/* =========================================================
   Vollbreites Menü: klappt unter der Kopfzeile herunter
   und legt sich über die Seite
   ========================================================= */
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--white);
  border-top:1px solid var(--grey-line);
  border-bottom:1px solid var(--grey-line);
  box-shadow:0 26px 60px rgba(13,14,17,0.16);
  z-index:90;
  overflow:hidden;
  max-height:0;
  opacity:0;
  visibility:hidden;
  transition:max-height .34s cubic-bezier(.22,.9,.28,1),
             opacity .22s ease, visibility .34s;
}
.mega[data-offen="true"]{
  max-height:560px;
  opacity:1;
  visibility:visible;
}
.mega__inner{
  display:grid; grid-template-columns:1.15fr 0.95fr 0.9fr 0.95fr;
  gap:0;
  padding-block:30px 34px;
  align-items:start;
}
.mega__spalte{ padding-inline:26px; }
.mega__spalte:first-child{ padding-left:0; }
.mega__spalte + .mega__spalte{ border-left:1px solid var(--grey-line); }
.mega__spalte--werbung{
  display:flex; flex-direction:column; align-items:flex-start; gap:11px;
  padding-right:0;
}

.mega__titel{
  font-size:12.5px; font-weight:700; color:var(--grey-mid);
  letter-spacing:0.04em; text-transform:uppercase; margin-bottom:14px;
}
.mega__nebenlink{
  font-size:13px; color:var(--grey-mid);
  text-decoration:underline; text-underline-offset:3px;
}
.mega__nebenlink:hover{ color:var(--ink); }

/* Abdunklung der Seite hinter dem Menü */
.mega__schleier{
  position:fixed; inset:0; z-index:40;
  background:rgba(13,14,17,0.38);
  backdrop-filter:blur(2px);
  opacity:0; transition:opacity .28s ease;
}
.mega__schleier[data-offen="true"]{ opacity:1; }

@media (max-width:1180px){
  .mega__inner{ grid-template-columns:1.1fr 1fr 1fr; }
  .mega__spalte--werbung{ display:none; }
}
@media (max-width:999px){
  .mega, .mega__schleier{ display:none; }
}

/* =========================================================
   Karriere: Filter, Stellenliste, Initiativbewerbung
   ========================================================= */
.filter{
  display:flex; flex-direction:column; gap:12px;
  margin-bottom:26px; padding-bottom:22px;
  border-bottom:1px solid var(--grey-line);
}
.filter__reihe{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.filter__name{
  font-size:12.5px; font-weight:700; color:var(--grey-mid);
  letter-spacing:0.04em; text-transform:uppercase;
  min-width:78px;
}
.filter__knopf{
  font-family:var(--sans); font-size:14px; font-weight:600;
  color:var(--ink-2); cursor:pointer;
  background:var(--white); border:1px solid var(--grey-line);
  padding:8px 16px; border-radius:var(--pill);
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.filter__knopf:hover{ border-color:var(--cyan); }
.filter__knopf[aria-pressed="true"]{
  background:var(--ink); border-color:var(--ink); color:var(--white);
}

.stellen{ display:flex; flex-direction:column; gap:12px; }
.stelle{
  background:var(--white);
  border:1px solid var(--grey-line);
  border-radius:var(--kante);
  overflow:hidden;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.stelle:hover{ border-color:var(--cyan); }
.stelle details[open]{ background:var(--white); }
.stelle:has(details[open]){ border-color:var(--ink); box-shadow:0 12px 34px rgba(13,14,17,0.08); }
.stelle summary{
  list-style:none; cursor:pointer;
  padding:22px 54px 22px 24px; position:relative;
}
.stelle summary::-webkit-details-marker{ display:none; }
.stelle summary::before,
.stelle summary::after{
  content:""; position:absolute; top:34px; background:var(--cyan);
  border-radius:2px; transition:transform .2s ease, opacity .2s ease;
}
.stelle summary::before{ right:24px; width:14px; height:2px; }
.stelle summary::after{ right:30px; width:2px; height:14px; margin-top:-6px; }
.stelle details[open] summary::after{ transform:rotate(90deg); opacity:0; }
.stelle summary:focus-visible{ outline:2px solid var(--cyan); outline-offset:-3px; }

.stelle__kopf{ display:flex; flex-direction:column; gap:12px; }
@media (min-width:820px){
  .stelle__kopf{ flex-direction:row; align-items:flex-start; justify-content:space-between; gap:24px; }
  .stelle__haupt{ flex:1; }
}
.stelle__haupt h3{ font-size:19px; font-weight:700; letter-spacing:-0.015em; }
.stelle__haupt p{ font-size:14.5px; line-height:1.55; color:var(--ink-2); margin-top:7px; max-width:62ch; }
.stelle__meta{ display:flex; gap:7px; flex-wrap:wrap; flex:none; }
.stelle__pille{
  font-size:12.5px; font-weight:600; color:var(--grey-mid);
  background:var(--page); border:1px solid var(--grey-line);
  padding:5px 12px; border-radius:var(--pill); white-space:nowrap;
}
.stelle__pille--ort{ color:var(--cyan-deep); background:var(--cyan-soft); border-color:transparent; }

.stelle__koerper{
  padding:4px 24px 24px;
  display:grid; grid-template-columns:1fr; gap:22px;
  border-top:1px solid var(--grey-line);
  margin-top:4px; padding-top:22px;
}
@media (min-width:760px){ .stelle__koerper{ grid-template-columns:1fr 1fr; } }
.stelle__spalte h4{
  font-size:13px; font-weight:700; color:var(--grey-mid);
  letter-spacing:0.04em; text-transform:uppercase; margin-bottom:12px;
}
.stelle__spalte ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.stelle__spalte li{
  font-size:14.5px; line-height:1.55; color:var(--ink-2);
  padding-left:21px; position:relative;
}
.stelle__spalte li::before{
  content:""; position:absolute; left:0; top:7px;
  width:8px; height:8px; border-radius:50%; background:var(--cyan);
}
.stelle__fuss{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding-top:18px; border-top:1px solid var(--grey-line);
}
.stelle__hinweis{ font-size:13.5px; color:var(--grey-mid); }
.stelle__hinweis a{ color:var(--cyan-deep); font-weight:600; }

.stellen__leer{
  margin-top:22px; padding:22px 24px;
  background:var(--page); border:1px dashed var(--grey-line);
  border-radius:var(--kante);
  font-size:15px; line-height:1.6; color:var(--ink-2);
}

@media (min-width:860px){ .schritte--vier{ grid-template-columns:repeat(4,1fr); gap:18px; } }

.initiativ{
  background:linear-gradient(140deg,var(--cyan-nebel) 0%,var(--white) 62%);
  border:1px solid rgba(37,195,218,0.3);
  border-radius:var(--kante);
  padding:34px 34px 32px;
}
.initiativ__fuss{
  margin-top:20px; font-size:13px; line-height:1.6; color:var(--grey-mid);
}
.initiativ__fuss a{ color:var(--cyan-deep); text-decoration:underline; text-underline-offset:3px; }

/* =========================================================
   Stellenseite: Fakten, Aufgaben, Profil, Regionen
   ========================================================= */
.fakten{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  margin:0; background:var(--grey-line);
  border:1px solid var(--grey-line); border-radius:var(--kante); overflow:hidden;
}
@media (min-width:720px){ .fakten{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1040px){ .fakten{ grid-template-columns:repeat(6,1fr); } }
.fakt{ background:var(--white); padding:18px 18px 20px; }
.fakt dt{
  font-size:12.5px; font-weight:700; color:var(--grey-mid);
  letter-spacing:0.04em; text-transform:uppercase; margin-bottom:7px;
}
.fakt dd{ margin:0; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4; }

.aufgaben{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; }
.aufgaben li{
  display:flex; gap:20px; align-items:flex-start;
  padding:22px 4px; border-top:1px solid var(--grey-line);
}
.aufgaben li:last-child{ border-bottom:1px solid var(--grey-line); }
.aufgaben .nummer{
  flex:none; font-size:15px; font-weight:800; color:var(--cyan-deep);
  font-variant-numeric:tabular-nums; padding-top:2px; min-width:30px;
}
.aufgaben h3{ font-size:18px; margin-bottom:7px; }
.aufgaben p{ font-size:15px; line-height:1.62; color:var(--ink-2); max-width:72ch; }

.profil{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:820px){ .profil{ grid-template-columns:1fr 1fr; gap:24px; } }

.regionen{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:860px){ .regionen{ grid-template-columns:repeat(3,1fr); } }
.region{
  background:var(--white); border:1px solid var(--grey-line);
  border-radius:var(--kante); padding:26px 24px 24px;
  display:flex; flex-direction:column; gap:11px;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.region:hover{
  border-color:var(--cyan); transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(13,14,17,0.09);
}
.region__marke{
  align-self:flex-start;
  font-size:12.5px; font-weight:700; color:var(--ink);
  background:var(--cyan); padding:5px 13px; border-radius:var(--pill);
}
.region h3{ font-size:22px; font-weight:800; letter-spacing:-0.02em; }
.region__gebiet{ font-size:13.5px; color:var(--cyan-deep); font-weight:600; margin-top:-5px; }
.region p{ font-size:14.5px; line-height:1.6; color:var(--ink-2); }
.region__cta{ margin-top:auto; align-self:flex-start; }
.regionen__fuss{
  margin-top:22px; font-size:14.5px; line-height:1.6; color:var(--grey-mid); max-width:76ch;
}

/* Stellenliste ohne Aufklappen: die Details stehen auf der eigenen Seite */
.stelle__fuss{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:18px 24px 22px; border-top:1px solid var(--grey-line);
}
.stelle > .stelle__kopf{ padding:22px 24px 18px; }
.stelle__pille--entwurf{
  color:#6A4A12; background:#FFF6E9; border-color:#F3D9AF;
}
.stellenkopf h1{ max-width:24ch; }

/* =========================================================
   Wärme: Bilder bekommen mehr Raum, Flächen weniger Härte
   ========================================================= */
.seitenkopf{ position:relative; }

/* Dunkle Abschnitte mit Abendmotiv statt flächigem Schwarz */
.abschnitt--dunkel{ position:relative; isolation:isolate; overflow:hidden; }
.abschnitt--dunkel::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:url('assets/abend.jpg');
  background-size:cover; background-position:center 62%;
}
.abschnitt--dunkel::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(10,16,20,0.93) 0%, rgba(13,34,42,0.82) 55%,
                             rgba(20,52,60,0.66) 100%);
}

/* Kartenbilder etwas höher, damit das Motiv wirkt */
.karte__bild{ aspect-ratio:16/9; }

/* Graue Abschnitte bekommen einen warmen Verlauf statt einer flachen Fläche */
.abschnitt--grau{
  background:linear-gradient(180deg, var(--page) 0%, #FBFAF8 100%);
}

/* Merkmalskacheln: weicher, weniger Kasten */
.merkmal{
  border-radius:var(--kante);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.merkmal:hover{
  border-color:var(--cyan);
  box-shadow:0 14px 36px rgba(13,14,17,0.08);
  transform:translateY(-2px);
}
.block, .norm{ border-radius:var(--kante); }

/* Die Oberzeile auf dunklem Grund soll leuchten, nicht nur hell sein */
.eyebrow--hell{ color:var(--cyan); }
.seitenkopf .eyebrow, .start__text .eyebrow{ margin-bottom:8px; }

/* Das Hero-Motiv soll bei grossen Schirmen wirklich wirken. */
@media (min-width:1280px){
  .start{ min-height:92vh; }
  .start__bg{ background-position:center 56%; }
}
/* Weicher Uebergang vom Hero in die Seite */
.start::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:90px;
  background:linear-gradient(180deg, rgba(253,252,250,0) 0%, var(--creme) 100%);
  pointer-events:none; z-index:1;
}
.start{ position:relative; }
.start__inner{ position:relative; z-index:2; }

/* =========================================================
   Bildband: ein grosses Motiv, zwei begleitende
   ========================================================= */
.bildband{
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media (min-width:880px){
  .bildband{ grid-template-columns:1.6fr 1fr; grid-template-rows:auto auto; }
  .bildband__gross{ grid-row:span 2; }
}
.bildband figure{ margin:0; display:flex; flex-direction:column; }
.bildband img{
  width:100%; height:100%; object-fit:cover;
  border-radius:var(--kante);
  box-shadow:0 14px 36px rgba(13,14,17,0.12);
  aspect-ratio:16/9;
}
@media (min-width:880px){
  .bildband__gross img{ aspect-ratio:auto; min-height:100%; }
}
.bildband figcaption{
  font-size:13.5px; line-height:1.5; color:var(--grey-mid);
  margin-top:10px; padding-inline:2px;
}

/* Praktikerbild wieder hochkant, das Motiv ist ein Hochformat */
.praktiker__bild img{ aspect-ratio:4/5; }

/* Abschluss der Speicherseite mit eigenem Abendmotiv */
.abschnitt--bess::before{ background-image:url('assets/bess-abend.jpg'); }

/* Abschluss der PV-Seite mit Wind-und-Sonne-Motiv */
.abschnitt--wind::before{ background-image:url('assets/feierabend-wind.jpg'); }

/* =========================================================
   Staffelung: die drei Stufen bauen aufeinander auf
   ========================================================= */
.staffel{
  display:grid; grid-template-columns:1fr; gap:12px; align-items:stretch;
}
@media (min-width:820px){
  .staffel{ grid-template-columns:1fr auto 1fr auto 1fr; gap:0; align-items:center; }
}
.staffel__schritt{
  background:var(--white); border:1px solid var(--grey-line);
  border-radius:var(--kante); padding:20px 22px;
  display:flex; flex-direction:column; gap:5px;
}
.staffel__schritt:nth-child(3){ border-color:var(--ink); border-width:2px; }
.staffel__rang{
  font-size:12px; font-weight:700; color:var(--cyan-deep);
  letter-spacing:0.04em; text-transform:uppercase;
}
.staffel__schritt strong{ font-size:19px; font-weight:800; letter-spacing:-0.02em; }
.staffel__schritt span:last-child{ font-size:14px; line-height:1.5; color:var(--ink-2); }
.staffel__pfeil{
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; color:var(--cyan);
  padding:6px 16px;
}
.staffel__fuss{
  margin-top:20px; font-size:14.5px; line-height:1.65;
  color:var(--ink-2); max-width:78ch;
}
.stufen__fuss a{
  color:var(--cyan-deep); font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
}

/* =========================================================
   Damals und heute: zwei Porträts nebeneinander
   ========================================================= */
.damals{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start;
}
.damals figure{ margin:0; }
.damals img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--bild-r);
  box-shadow:0 18px 44px rgba(13,14,17,0.15);
  display:block;
}
/* Das jüngere Bild sitzt leicht tiefer, das gibt dem Paar Rhythmus */
@media (min-width:640px){
  .damals figure:last-child{ margin-top:30px; }
}
.damals figcaption{
  margin-top:11px; font-size:13.5px; line-height:1.45; color:var(--grey-mid);
}
.damals figcaption b{
  display:block; font-size:15px; font-weight:800; color:var(--ink);
  letter-spacing:-0.01em;
}

/* =========================================================
   Was Betriebsführung kostet: die Spanne als Band
   ========================================================= */
.preis{ background:linear-gradient(170deg,var(--cyan-nebel) 0%,var(--creme) 58%); }
.preis__kopf{ max-width:66ch; }

.spanne{
  position:relative; margin-top:10px; padding-block:26px 0;
  display:grid; grid-template-columns:1fr; gap:22px;
}
@media (min-width:760px){
  .spanne{ grid-template-columns:1fr 1fr; gap:0; padding-block:46px 0; }
}
.spanne__balken{
  grid-column:1 / -1; order:-1; height:10px; border-radius:5px;
  background:linear-gradient(90deg,var(--cyan) 0%, #4fd0e2 30%, #7fb8d8 62%, var(--ink) 100%);
  position:relative;
}
.spanne__balken::before,
.spanne__balken::after{
  content:""; position:absolute; top:-6px; width:22px; height:22px;
  border-radius:50%; background:var(--white);
  border:4px solid var(--cyan);
}
.spanne__balken::before{ left:-2px; }
.spanne__balken::after{ right:-2px; border-color:var(--ink); }

.spanne__pol{ display:flex; flex-direction:column; gap:3px; padding-top:20px; }
.spanne__pol--rechts{ text-align:left; }
@media (min-width:760px){ .spanne__pol--rechts{ text-align:right; align-items:flex-end; } }
.spanne__pol b{
  font-size:clamp(34px,4.4vw,52px); font-weight:800; letter-spacing:-0.035em;
  line-height:1; color:var(--ink); font-variant-numeric:tabular-nums;
}
.spanne__pol--links b{ color:var(--cyan-deep); }
.spanne__pol span{ font-size:14px; color:var(--grey-mid); }
.spanne__pol em{
  font-style:normal; font-size:14.5px; line-height:1.5;
  color:var(--ink-2); margin-top:7px; max-width:34ch;
}
.spanne__hinweis{
  margin-top:26px; font-size:17px; line-height:1.6; color:var(--ink);
  max-width:70ch; font-weight:500;
}

.preis__hebel{
  display:grid; grid-template-columns:1fr; gap:26px; margin-top:44px;
}
@media (min-width:900px){ .preis__hebel{ grid-template-columns:1fr 1fr; gap:34px; } }
.hebel{
  background:var(--white); border:1px solid var(--grey-line);
  border-radius:var(--kante); padding:28px 28px 30px;
}
.hebel__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--cyan); color:var(--ink);
  font-size:16px; font-weight:800; margin-bottom:14px;
}
.hebel h3{ font-size:21px; margin-bottom:12px; letter-spacing:-0.018em; }
.hebel p{ font-size:15px; line-height:1.7; color:var(--ink-2); margin-bottom:12px; }

.umfang{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:11px; }
.umfang li{
  font-size:14.5px; line-height:1.55; color:var(--grey-mid);
  padding-left:22px; position:relative;
}
.umfang li::before{
  content:""; position:absolute; left:0; top:7px;
  width:9px; height:9px; border-radius:50%; background:var(--cyan);
}
.umfang li b{ display:block; color:var(--ink); font-weight:700; font-size:15px; margin-bottom:1px; }

.preis__schluss{
  margin-top:40px; background:var(--white);
  border:1px solid var(--grey-line); border-left:4px solid var(--cyan);
  border-radius:var(--kante); padding:30px 32px 32px;
  max-width:88ch;
}
.preis__schluss h3{ font-size:21px; margin-bottom:14px; letter-spacing:-0.018em; }
.preis__schluss p{ font-size:15.5px; line-height:1.72; color:var(--ink-2); margin-bottom:13px; }
.preis__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }

/* =========================================================
   Unterschrift unter der Geschichte
   ========================================================= */
.signatur{
  margin:30px 0 0; padding-top:24px;
  border-top:1px solid var(--grey-line);
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
}
.signatur img{
  width:auto; height:72px; display:block;
  /* Die Tinte ist bereits freigestellt, hier nur leicht zurueckgenommen */
  opacity:.9;
}
.signatur figcaption{
  font-size:13.5px; line-height:1.5; color:var(--grey-mid);
}
.signatur figcaption b{
  display:block; font-size:15.5px; font-weight:700; color:var(--ink);
  letter-spacing:-0.01em; margin-bottom:1px;
}

/* =========================================================
   Bildmarke im Hero: weiß, groß, zurückgenommen
   Sie liegt im Foto, nicht darüber, und stört den Text nicht.
   ========================================================= */
/* Das Firmenzeichen in Weiss, als Signatur unter dem Versprechen. */
.start__signet{
  margin-bottom:28px;
  width:min(286px, 56%);
}
@media (min-width:1000px){
  /* Die Zeile "seit 2011" soll mit der Oberkante des Kastens fluchten,
     deshalb haengt das Zeichen ueber dem Textblock statt in ihm zu stehen. */
  .start__text{ position:relative; }
  .start__signet{
    position:absolute; left:0; bottom:100%;
    margin:0 0 18px; width:286px;
  }
}
.start__signet img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 3px 18px rgba(0,0,0,0.45));
}
@media (max-width:860px){
  .start__signet{ margin-bottom:26px; width:min(236px, 66%); }
}


/* =========================================================
   Fehlerseite 404
   ========================================================= */
.fehler{ text-align:center; padding-block:40px 20px; }
.fehler h1{ margin-top:14px; }
.fehler__lede{
  margin:20px auto 0; max-width:46ch;
  font-size:18px; line-height:1.6; color:var(--grau);
}
.fehler__wege{
  margin-top:32px; display:flex; flex-wrap:wrap;
  gap:12px; justify-content:center;
}
.fehler__liste{
  list-style:none; margin:46px 0 0; padding:30px 0 0;
  border-top:1px solid var(--grey-line);
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center;
}
.fehler__liste a{ font-size:15px; }