/* ============================================================
   Clerc Consulting — Unterseiten-Layout
   Gilt für alle Methoden-, Fallstudien- und Pflichtseiten.
   ============================================================ */

/* ---------- Seiten-Hero ---------- */
.sub-hero {
  padding: 70px var(--page-pad) 60px;
  border-bottom: 1px solid var(--line);
}
.sub-hero .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 28px;
}
.sub-hero .breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.sub-hero .breadcrumb a:hover { color: var(--accent); }
.sub-hero .breadcrumb .sep { opacity: .4; }
.sub-hero h1 {
  font-size: 62px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 800;
  max-width: 18ch;
  text-wrap: balance;
  margin: 0 0 20px;
}
.sub-hero h1 em { font-style: normal; color: var(--accent); }
.sub-hero .lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
  margin: 0;
}

/* ---------- Inhalts-Bereich ---------- */
.sub-content {
  padding: var(--section-gap) var(--page-pad);
  max-width: 900px;
}
.sub-content h2 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 48px 0 16px;
}
.sub-content h2:first-child { margin-top: 0; }
.sub-content h2 em { font-style: normal; color: var(--accent); }
.sub-content p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 18px;
}
.sub-content ul {
  padding-left: 20px;
  margin: 0 0 18px;
}
.sub-content li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 8px;
}

/* ---------- Ergebnis-Karten (Kennzahlen) ---------- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 40px 0;
}
.kpi-card {
  background: var(--accent-soft);
  border-radius: 16px;
  padding: 28px 24px;
}
.kpi-card .kpi-val {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
}
.kpi-card .kpi-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 8px;
}
.kpi-card .kpi-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- Bild-Block ---------- */
.img-block {
  margin: 40px 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--accent-soft);
}
.img-block img {
  display: block;
  width: 100%;
  height: auto;
}
.img-block figcaption {
  font-size: 13px;
  color: var(--muted);
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}

/* ---------- Methoden-Übersicht-Raster ---------- */
.method-grid {
  padding: var(--section-gap) var(--page-pad);
}
.method-list {
  border-top: 2px solid var(--ink);
}
.method-row {
  display: grid;
  grid-template-columns: 0.4fr 1.8fr 2fr auto;
  gap: 30px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.method-row:hover { background: var(--accent-soft); margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-radius: 8px; }
.method-row .num { font-size: 15px; font-weight: 800; color: var(--accent); }
.method-row h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; margin: 0; }
.method-row p { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; }
.method-row .arr { font-size: 20px; color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .sub-hero h1 { font-size: 42px; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .method-row { grid-template-columns: 1fr; gap: 8px; }
  .method-row .arr { display: none; }
}


/* ============================================================
   STIL 14 — portiert aus sub14.css
   ============================================================ */

/* ============================================================
   UNTERSEITEN — Designsystem im Stil von Option 14
   (Minimal Typographic). Alles unter .sp gescoped.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

.sp {
  width: 100%;
  max-width: 100%;
  position: relative;
  background: var(--paper);
  font-family: var(--font);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- generische Bausteine ---------- */
.sp .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.sp .crumb { font-size: 13px; font-weight: 600; color: var(--muted); display: flex; gap: 9px; align-items: center; }
.sp .crumb a { color: var(--muted); text-decoration: none; }
.sp .crumb .sep { color: var(--line); }
.sp .crumb .cur { color: var(--ink); }

.sp .btn-primary { background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 15px 30px; font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; }
.sp .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 15px 26px; font: inherit; font-weight: 600; font-size: 15.5px; cursor: pointer; }
.sp .btn-accent { background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 15px 30px; font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; }
.sp .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

.sp .slot { background: var(--accent-soft); position: relative; overflow: hidden; }
.sp .slot .tag { position: absolute; left: 14px; bottom: 14px; z-index: 3; font-size: 11.5px; font-weight: 600; color: var(--accent); background: var(--paper); padding: 6px 12px; border-radius: 999px; }

/* ============================================================
   A — METHODEN / LEISTUNGEN (Übersicht)
   ============================================================ */
.sp-methods .hero { padding: 70px var(--page-pad) 46px; display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 40px; align-items: end; }
.sp-methods .hero h1 { font-size: 72px; line-height: 0.96; letter-spacing: -0.04em; font-weight: 800; margin: 22px 0 0; text-wrap: balance; }
.sp-methods .hero h1 em { font-style: normal; color: var(--accent); }
.sp-methods .hero .lead { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0 0 6px; }
.sp-methods .grid { padding: 10px var(--page-pad) 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.sp-methods .card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.sp-methods .card .slot { height: 240px; }
.sp-methods .card .c-body { padding: 26px 28px 30px; }
.sp-methods .card .num { font-size: 13px; font-weight: 800; color: var(--accent); letter-spacing: 0.04em; }
.sp-methods .card h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 0; }
.sp-methods .card p { font-size: 15.5px; line-height: 1.55; color: var(--muted); margin: 12px 0 0; }
.sp-methods .card .more { margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.sp-methods .card .more::after { content: "→"; }

/* ============================================================
   B — METHODE DETAIL (CFD)
   ============================================================ */
.sp-detail .head { padding: 36px var(--page-pad) 0; }
.sp-detail .hero { padding: 26px var(--page-pad) 50px; }
.sp-detail .hero h1 { font-size: 64px; line-height: 0.98; letter-spacing: -0.035em; font-weight: 800; margin: 18px 0 0; max-width: 18ch; text-wrap: balance; }
.sp-detail .hero h1 em { font-style: normal; color: var(--accent); }
.sp-detail .hero .lead { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 60ch; margin: 22px 0 0; }
.sp-detail .bigslot { margin: 0 var(--page-pad); height: 460px; border-radius: 20px; }
.sp-detail .two { padding: 56px var(--page-pad); display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; }
.sp-detail .two h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.025em; margin: 0; }
.sp-detail .two p { font-size: 16.5px; line-height: 1.65; color: #41454d; margin: 16px 0 0; }
.sp-detail .specs { border-top: 2px solid var(--ink); }
.sp-detail .specs .row { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.sp-detail .specs .row .k { font-size: 14px; font-weight: 700; }
.sp-detail .specs .row .v { font-size: 14px; color: var(--muted); text-align: right; }
.sp-detail .gallery { padding: 0 var(--page-pad) var(--page-pad); display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sp-detail .gallery .slot { height: 220px; border-radius: 14px; }
.sp-detail .band { margin: 0 var(--page-pad) 70px; background: var(--ink); color: var(--paper); border-radius: 22px; padding: 48px 50px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.sp-detail .band h2 { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; margin: 0; max-width: 18ch; }
.sp-detail .band .btn-primary { background: var(--paper); color: var(--ink); }

/* ============================================================
   C — REFERENZEN / PROJEKTE
   ============================================================ */
.sp-cases .hero { padding: 66px var(--page-pad) 30px; }
.sp-cases .hero h1 { font-size: 70px; line-height: 0.96; letter-spacing: -0.04em; font-weight: 800; margin: 20px 0 0; max-width: 18ch; text-wrap: balance; }
.sp-cases .hero h1 em { font-style: normal; color: var(--accent); }
.sp-cases .filters { padding: 0 var(--page-pad) 30px; display: flex; gap: 10px; flex-wrap: wrap; }
.sp-cases .filters span { font-size: 13.5px; font-weight: 600; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; cursor: pointer; }
.sp-cases .filters span.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sp-cases .grid { padding: 6px var(--page-pad) 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; }
.sp-cases .proj { display: flex; flex-direction: column; }
.sp-cases .proj .slot { height: 260px; border-radius: 16px; }
.sp-cases .proj .meta { display: flex; gap: 10px; margin-top: 16px; }
.sp-cases .proj .meta span { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.sp-cases .proj h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 0; }
.sp-cases .proj p { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin: 7px 0 0; }
.sp-cases .proj.feat { grid-column: 1 / -1; flex-direction: row; gap: 30px; align-items: stretch; }
.sp-cases .proj.feat .slot { flex: 1 1 60%; height: auto; min-height: 320px; }
.sp-cases .proj.feat .f-body { flex: 1 1 40%; display: flex; flex-direction: column; justify-content: center; }
.sp-cases .proj.feat h3 { font-size: 30px; }
.sp-cases .proj.feat p { font-size: 16px; }

/* ============================================================
   D — ÜBER UNS
   ============================================================ */
.sp-about .hero { padding: 70px var(--page-pad) 48px; }
.sp-about .hero h1 { font-size: 64px; line-height: 1.0; letter-spacing: -0.035em; font-weight: 800; margin: 22px 0 0; max-width: 20ch; text-wrap: balance; }
.sp-about .hero h1 em { font-style: normal; color: var(--accent); }
.sp-about .wide { margin: 0 var(--page-pad); height: 380px; border-radius: 20px; }
.sp-about .vals { padding: 56px var(--page-pad); display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; border-bottom: 1px solid var(--line); }
.sp-about .vals .v .n { font-size: 13px; font-weight: 800; color: var(--accent); }
.sp-about .vals .v h3 { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 0; }
.sp-about .vals .v p { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 10px 0 0; }
.sp-about .team { padding: 56px var(--page-pad) 70px; }
.sp-about .team .lab { display: flex; align-items: baseline; justify-content: space-between; }
.sp-about .team h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.025em; margin: 0; }
.sp-about .team .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 30px; }
.sp-about .team .person .slot { height: 230px; border-radius: 14px; }
.sp-about .team .person .nm { font-size: 16px; font-weight: 800; margin-top: 14px; }
.sp-about .team .person .ro { font-size: 13.5px; color: var(--muted); margin-top: 2px; }

/* ============================================================
   E — KONTAKT / DEMO
   ============================================================ */
.sp-contact .body { padding: var(--page-pad) var(--page-pad) 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.sp-contact h1 { font-size: 62px; line-height: 0.98; letter-spacing: -0.035em; font-weight: 800; margin: 18px 0 0; text-wrap: balance; }
.sp-contact h1 em { font-style: normal; color: var(--accent); }
.sp-contact .lead { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 22px 0 0; max-width: 34ch; }
.sp-contact .details { margin-top: 40px; border-top: 1px solid var(--line); }
.sp-contact .details .row { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); }
.sp-contact .details .row .k { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.sp-contact .details .row .v { font-size: 15px; font-weight: 600; }
.sp-contact .form { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 34px 34px 38px; }
.sp-contact .form .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-contact .field { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.sp-contact .field:first-child { margin-top: 0; }
.sp-contact .field label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.sp-contact .field .inp { height: 46px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); display: flex; align-items: center; padding: 0 14px; font-size: 14.5px; color: #a7abb2; }
.sp-contact .field .inp.area { height: 110px; align-items: flex-start; padding-top: 13px; }
.sp-contact .form .btn-accent { width: 100%; margin-top: 22px; justify-content: center; border: 0; cursor: pointer; }
.sp-contact .form .hint { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 14px; }
.sp-contact .form input.inp, .sp-contact .form select.inp, .sp-contact .form textarea.inp { width: 100%; font-family: inherit; font-size: 14.5px; color: var(--ink); -webkit-appearance: none; appearance: none; outline: none; }
.sp-contact .form input.inp::placeholder, .sp-contact .form textarea.inp::placeholder { color: #a7abb2; }
.sp-contact .form textarea.inp { resize: vertical; line-height: 1.5; padding-bottom: 12px; }
.sp-contact .form select.inp { cursor: pointer; }
.sp-contact .form input.inp:focus, .sp-contact .form select.inp:focus, .sp-contact .form textarea.inp:focus { border-color: var(--accent); }
.sp-contact .form .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.sp-contact .form .consent { margin-top: 16px; }
.sp-contact .form .consent label { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; cursor: pointer; }
.sp-contact .form .consent input { margin-top: 2px; flex: none; }
.sp-contact .form .consent a { color: var(--accent); }

/* ============================================================
   F — METHODENFAMILIE (Heizlast + Kühllast etc. untereinander)
   ============================================================ */
.sp-family .head { padding: 36px var(--page-pad) 0; }
.sp-family .hero { padding: 26px var(--page-pad) 46px; }
.sp-family .hero h1 { font-size: 66px; line-height: 0.98; letter-spacing: -0.04em; font-weight: 800; margin: 18px 0 0; max-width: 16ch; text-wrap: balance; }
.sp-family .hero h1 em { font-style: normal; color: var(--accent); }
.sp-family .hero .lead { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 58ch; margin: 22px 0 0; }
.sp-family .hero .ph-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: 7px 14px; }
.sp-family .hero .ph-note::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); opacity: 0.5; }

.sp-family .bigslot { margin: 0 var(--page-pad); height: 440px; border-radius: 20px; }

.sp-family .cross-note { margin: 40px var(--page-pad) 0; background: var(--accent-soft); border-radius: 18px; padding: 26px 30px; display: flex; gap: 18px; align-items: flex-start; }
.sp-family .cross-note .badge { flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--paper); border-radius: 999px; padding: 7px 13px; }
.sp-family .cross-note p { margin: 0; font-size: 16px; line-height: 1.6; color: #41454d; max-width: 80ch; }

.sp-family .methods { padding: 70px var(--page-pad) 6px; display: flex; flex-direction: column; gap: 84px; }
.sp-family .method { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.sp-family .method .m-media { height: 430px; border-radius: 18px; }
.sp-family .method.flip .m-media { order: 2; }
.sp-family .method.flip .m-text { order: 1; }

/* Hero-Bild über einer Methode (volle Breite, 16:9) */
.sp-family .m-hero { margin-bottom: -22px; }
.sp-family .m-hero .m-hero-media { border-radius: 18px; }

/* Histogramm als Seiten-Visual neben dem Methodentext */
.sp-family .m-viz { display: flex; align-items: center; }
.sp-family .m-viz .hist-wrap { margin: 0; max-width: 100%; width: 100%; }
.sp-family .method .m-head { display: flex; align-items: center; gap: 14px; }
.sp-family .method .num { font-size: 13px; font-weight: 800; color: var(--accent); letter-spacing: 0.04em; }
.sp-family .method .chip { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 6px 13px; }
.sp-family .method h2 { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; margin: 16px 0 0; }
.sp-family .method p { font-size: 16.5px; line-height: 1.65; color: #41454d; margin: 16px 0 0; }
.sp-family .method .specs { margin-top: 26px; border-top: 2px solid var(--ink); }
.sp-family .method .specs .row { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.sp-family .method .specs .row .k { font-size: 13.5px; font-weight: 700; flex: 0 0 auto; }
.sp-family .method .specs .row .v { font-size: 13.5px; color: var(--muted); text-align: right; }

.sp-family .band { margin: 80px var(--page-pad) 70px; background: var(--ink); color: var(--paper); border-radius: 22px; padding: 48px 50px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.sp-family .band h2 { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; margin: 0; max-width: 18ch; }
.sp-family .band .btn-primary { background: var(--paper); color: var(--ink); }
.sp-family .band.accent { background: var(--accent); }

/* ---- geteilte Bausteine (layout-übergreifend) ---- */
.sp-family .m-head { display: flex; align-items: center; gap: 14px; }
.sp-family .num { font-size: 13px; font-weight: 800; color: var(--accent); letter-spacing: 0.04em; }
.sp-family .chip { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 6px 13px; }
.sp-family .specs { border-top: 2px solid var(--ink); }
.sp-family .specs .row { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.sp-family .specs .row .k { font-size: 13.5px; font-weight: 700; flex: 0 0 auto; }
.sp-family .specs .row .v { font-size: 13.5px; color: var(--muted); text-align: right; }

/* ---- Hero: split (Text + Bild nebeneinander) ---- */
.sp-family .hero-split { padding: 30px var(--page-pad) 54px; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 56px; align-items: center; }
.sp-family .hero-split h1 { font-size: 56px; line-height: 1.0; margin-top: 16px; max-width: 14ch; }
.sp-family .hero-split .lead { max-width: 46ch; }
.sp-family .hero-split .h-media { height: 500px; border-radius: 20px; }

/* ---- Hero: band (Titel/Lead zweispaltig, vollflächiges Bildband) ---- */
.sp-family .hero-band { padding: 30px var(--page-pad) 38px; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 50px; align-items: end; }
.sp-family .hero-band h1 { font-size: 64px; margin-top: 14px; max-width: 14ch; }
.sp-family .hero-band .hb-side { padding-bottom: 6px; }
.sp-family .hero-band .hb-side .lead { margin: 0; }
.sp-family .band-img { height: 520px; margin: 0; border-radius: 0; }

/* ---- Hero: minimal (zentriert, ohne Großbild) ---- */
.sp-family .hero-minimal { padding: 64px var(--page-pad) 16px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sp-family .hero-minimal h1 { max-width: 20ch; }
.sp-family .hero-minimal .lead { max-width: 62ch; }

/* ---- Methoden: stack (Bild oben, Text/Specs zweispaltig) ---- */
.sp-family .methods-stack { padding: 64px 0 6px; display: flex; flex-direction: column; gap: 78px; }
.sp-family .m-stack .m-band { height: 460px; margin: 0 var(--page-pad) 34px; border-radius: 18px; }
.sp-family .m-stack .m-cols { padding: 0 var(--page-pad); display: grid; grid-template-columns: 1fr 0.78fr; gap: 56px; align-items: start; }
.sp-family .m-stack h2 { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; margin: 16px 0 0; }
.sp-family .m-stack .m-main p { font-size: 16.5px; line-height: 1.65; color: #41454d; margin: 16px 0 0; }
.sp-family .m-stack .specs { margin-top: 6px; }

/* ---- Methoden: cards (zwei Vergleichskarten) ---- */
.sp-family .methods-cards { padding: 52px var(--page-pad) 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.sp-family .m-card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.sp-family .m-card .slot { height: 240px; }
.sp-family .m-card .c-body { padding: 28px 30px 32px; }
.sp-family .m-card h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 14px 0 0; }
.sp-family .m-card p { font-size: 15.5px; line-height: 1.6; color: #41454d; margin: 14px 0 0; }
.sp-family .m-card .specs { margin-top: 24px; }

/* ---- Methoden: cols (zwei Spalten mit Trennlinie) ---- */
.sp-family .methods-cols { padding: 44px var(--page-pad) 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
.sp-family .methods-cols .m-col { padding: 0 48px; }
.sp-family .methods-cols .m-col:first-child { padding-left: 0; border-right: 1px solid var(--line); }
.sp-family .methods-cols .m-col:last-child { padding-right: 0; }
.sp-family .methods-cols .m-col .slot { height: 270px; border-radius: 16px; }
.sp-family .methods-cols .m-col .m-head { margin-top: 24px; }
.sp-family .methods-cols .m-col h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.025em; margin: 14px 0 0; }
.sp-family .methods-cols .m-col p { font-size: 15.5px; line-height: 1.6; color: #41454d; margin: 14px 0 0; }
.sp-family .methods-cols .m-col .specs { margin-top: 24px; }

/* ============================================================
   G — FALLSTUDIE DETAIL
   ============================================================ */
.sp-case .head { padding: 36px var(--page-pad) 0; }
.sp-case .hero { padding: 26px var(--page-pad) 40px; }
.sp-case .hero h1 { font-size: 60px; line-height: 1.0; letter-spacing: -0.035em; font-weight: 800; margin: 16px 0 0; max-width: 20ch; text-wrap: balance; }
.sp-case .hero .meta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.sp-case .hero .meta-row span { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 7px 14px; }
.sp-case .hero .lead { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 60ch; margin: 22px 0 0; }
.sp-case .bighero { margin: 0 var(--page-pad); height: 470px; border-radius: 20px; }

.sp-case .body { padding: 58px var(--page-pad); display: grid; grid-template-columns: 1.45fr 0.55fr; gap: 60px; align-items: start; }
.sp-case .narrative .blk { margin-bottom: 36px; }
.sp-case .narrative .blk:last-child { margin-bottom: 0; }
.sp-case .narrative h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; margin: 0; }
.sp-case .narrative p { font-size: 16.5px; line-height: 1.7; color: #41454d; margin: 14px 0 0; }
.sp-case .side { display: flex; flex-direction: column; gap: 30px; position: sticky; top: 110px; }
.sp-case .side h3 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 6px; }
.sp-case .side .facts { border-top: 2px solid var(--ink); }
.sp-case .side .facts h3 { padding-top: 14px; }
.sp-case .side .facts .row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sp-case .side .facts .row .k { font-size: 14px; font-weight: 700; }
.sp-case .side .facts .row .v { font-size: 14px; color: var(--muted); }
.sp-case .side .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-case .side .chips span { font-size: 12.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 7px 13px; }

.sp-case .stats { margin: 0 var(--page-pad); background: var(--accent-soft); border-radius: 20px; padding: 38px 44px; display: flex; align-items: baseline; gap: 56px; flex-wrap: wrap; }
.sp-case .stats .stat { display: flex; flex-direction: column; gap: 4px; }
.sp-case .stats .stat .v { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); line-height: 1; }
.sp-case .stats .stat .k { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.sp-case .stats .stats-note { margin-left: auto; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border: 1px dashed rgba(29,95,168,0.35); border-radius: 999px; padding: 7px 14px; align-self: center; }

.sp-case .quote { padding: 64px var(--page-pad); }
.sp-case .quote p { font-size: 30px; line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; color: var(--ink); margin: 0; max-width: 26ch; text-wrap: balance; }
.sp-case .quote p::before { content: "\201C"; color: var(--accent); }
.sp-case .quote .by { font-size: 14px; font-weight: 600; color: var(--muted); margin-top: 22px; }
.sp-case .gallery { padding: 0 var(--page-pad) 66px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sp-case .gallery .slot { height: 230px; border-radius: 14px; }

.sp-case .body-narrative-only { grid-template-columns: 1fr; padding-bottom: 0; }
.sp-case .body-eckdaten { grid-template-columns: 0.7fr 1.3fr; padding-top: 40px; align-items: start; }
.sp-case .body-eckdaten .side { position: static; }
.sp-case .eckdaten-visual img { width: 100%; height: auto; border-radius: 16px; display: block; }
.sp-case .body-ergebnis { grid-template-columns: 1fr; padding-top: 0; }

/* Simulations-Charts */
.sp-case .sim-charts { padding: 0 var(--page-pad) 56px; display: flex; flex-direction: column; gap: 0; }
.sp-case .sim-slot { height: 220px; border-radius: 14px; margin-bottom: 16px; }
.sp-case .sim-frame-wrap { width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 28px rgba(15,48,48,.08); border: 1px solid #E9E9E4; }
.sp-case .sim-frame-wrap iframe { display: block; width: 100%; height: 660px; border: none; }
.sp-case .sim-sep { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 24px 0 40px; max-width: 72ch; }
.sp-case .band { margin: 0 var(--page-pad) 70px; background: var(--ink); color: var(--paper); border-radius: 22px; padding: 48px 50px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.sp-case .band h2 { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; margin: 0; max-width: 18ch; }
.sp-case .band .btn-primary { background: var(--paper); color: var(--ink); }

/* ============================================================
   H — RECHTLICHES (Impressum / Datenschutz)
   ============================================================ */
.sp-legal .head { padding: 36px var(--page-pad) 0; }
.sp-legal .legal-hero { padding: 30px var(--page-pad) 40px; border-bottom: 1px solid var(--line); }
.sp-legal .legal-hero h1 { font-size: 56px; line-height: 1.0; letter-spacing: -0.035em; font-weight: 800; margin: 0; }
.sp-legal .legal-hero .ph-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9a5b3d; background: #f6ece6; border: 1px dashed #d8b49f; border-radius: 999px; padding: 7px 14px; }
.sp-legal .legal-hero .intro { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 70ch; margin: 22px 0 0; }
.sp-legal .legal-body { padding: 50px var(--page-pad) 70px; display: grid; grid-template-columns: 0.32fr 0.68fr; gap: 56px; align-items: start; }
.sp-legal .toc { position: sticky; top: 110px; }
.sp-legal .toc .toc-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.sp-legal .toc ol { list-style: none; counter-reset: t; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-legal .toc ol li { counter-increment: t; }
.sp-legal .toc ol li a { display: flex; gap: 10px; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--ink); padding: 8px 0; border-bottom: 1px solid var(--line); }
.sp-legal .toc ol li a::before { content: counter(t, decimal-leading-zero); color: var(--accent); font-weight: 800; }
.sp-legal .legal-main .ls { margin-bottom: 38px; }
.sp-legal .legal-main .ls:last-child { margin-bottom: 0; }
.sp-legal .legal-main .ls h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; display: flex; align-items: baseline; gap: 12px; }
.sp-legal .legal-main .ls h2 .ls-n { font-size: 13px; font-weight: 800; color: var(--accent); }
.sp-legal .legal-main .ls p { font-size: 16px; line-height: 1.7; color: #41454d; margin: 0 0 6px; }

/* ============================================================
   I — DANKE / BESTÄTIGUNG
   ============================================================ */
.sp-confirm .confirm-body { padding: 96px var(--page-pad) 110px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sp-confirm .mark { width: 76px; height: 76px; border-radius: 999px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; }
.sp-confirm .eyebrow { color: var(--accent); }
.sp-confirm h1 { font-size: 60px; line-height: 1.0; letter-spacing: -0.035em; font-weight: 800; margin: 16px 0 0; text-wrap: balance; }
.sp-confirm h1 em { font-style: normal; color: var(--accent); }
.sp-confirm .lead { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 52ch; margin: 22px 0 0; }
.sp-confirm .steps { margin: 44px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; width: 100%; max-width: 860px; text-align: left; }
.sp-confirm .steps .step { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 24px 26px 26px; }
.sp-confirm .steps .step .n { font-size: 13px; font-weight: 800; color: var(--accent); }
.sp-confirm .steps .step .s-t { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin-top: 10px; }
.sp-confirm .steps .step .s-d { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin-top: 8px; }
.sp-confirm .cta-row { margin-top: 40px; justify-content: center; }
.sp-confirm .hint { font-size: 13px; color: var(--muted); margin-top: 22px; }

/* ============================================================
   J — 404
   ============================================================ */
.sp-404 .nf-body { padding: 90px var(--page-pad) 120px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sp-404 .big { font-size: 168px; line-height: 0.9; font-weight: 800; letter-spacing: -0.05em; color: var(--accent-soft); }
.sp-404 h1 { font-size: 54px; line-height: 1.0; letter-spacing: -0.035em; font-weight: 800; margin: 10px 0 0; text-wrap: balance; }
.sp-404 h1 em { font-style: normal; color: var(--accent); }
.sp-404 .lead { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 54ch; margin: 22px 0 0; }
.sp-404 .nf-links { margin: 36px 0 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sp-404 .nf-links .nf-lab { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.sp-404 .nf-links .links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sp-404 .nf-links .links a { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; }
.sp-404 .nf-body .btn-primary { margin-top: 36px; }

/* ============================================================
   K — PV-ANALYSE
   ============================================================ */
.sp-pv .hero-minimal { padding: 64px var(--page-pad) 16px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sp-pv .hero-minimal .eyebrow { color: var(--accent); }
.sp-pv .hero-minimal h1 { font-size: 60px; line-height: 0.98; letter-spacing: -0.04em; font-weight: 800; margin: 16px 0 0; max-width: 20ch; }
.sp-pv .hero-minimal h1 em { font-style: normal; color: var(--accent); }
.sp-pv .hero-minimal .lead { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 56ch; margin: 22px 0 0; }
.sp-pv .hero-split { padding: 30px var(--page-pad) 56px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.sp-pv .hero-split .eyebrow { color: var(--accent); }
.sp-pv .hero-split h1 { font-size: 60px; line-height: 0.98; letter-spacing: -0.04em; font-weight: 800; margin: 16px 0 0; }
.sp-pv .hero-split h1 em { font-style: normal; color: var(--accent); }
.sp-pv .hero-split .lead { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 48ch; margin: 22px 0 0; }
.sp-pv .hero-split .ph-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: 7px 14px; }
.sp-pv .hero-split .ph-note::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); opacity: 0.5; }
.sp-pv .hero-split .h-media { height: 460px; border-radius: 20px; }

.sp-pv .sec { padding: 64px var(--page-pad); }
.sp-pv .sec-head .eyebrow { color: var(--accent); }
.sp-pv .sec-head h2 { font-size: 40px; font-weight: 800; letter-spacing: -0.035em; margin: 14px 0 0; max-width: 22ch; text-wrap: balance; }
.sp-pv .sec-head .sec-lead { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 64ch; margin: 16px 0 0; }

/* Umfang — drei Karten, eskalierende Betonung */
.sp-pv .scope { padding-bottom: 12px; }
.sp-pv .scope-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.sp-pv .scope-card { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 28px 28px 26px; display: flex; flex-direction: column; }
.sp-pv .scope-card.lvl2 { background: var(--accent-soft); border-color: transparent; }
.sp-pv .scope-card.lvl3 { background: var(--ink); border-color: transparent; color: var(--paper); }
.sp-pv .scope-card .sc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp-pv .scope-card .num { font-size: 13px; font-weight: 800; color: var(--accent); letter-spacing: 0.04em; }
.sp-pv .scope-card.lvl3 .num { color: var(--accent-light); }
.sp-pv .scope-card .add { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }
.sp-pv .scope-card.lvl2 .add { color: var(--accent); border-color: rgba(29,95,168,0.25); }
.sp-pv .scope-card.lvl3 .add { color: var(--accent-light); border-color: rgba(255,255,255,0.25); }
.sp-pv .scope-card h3 { font-size: 25px; font-weight: 800; letter-spacing: -0.025em; margin: 18px 0 0; }
.sp-pv .scope-card p { font-size: 15px; line-height: 1.6; color: #41454d; margin: 12px 0 0; }
.sp-pv .scope-card.lvl3 p { color: rgba(240,238,233,0.82); }
.sp-pv .scope-card .out { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 3px; }
.sp-pv .scope-card .out .lab { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.sp-pv .scope-card.lvl3 .out .lab { color: rgba(240,238,233,0.55); }
.sp-pv .scope-card .out .val { font-size: 15px; font-weight: 700; color: var(--accent); }
.sp-pv .scope-card.lvl3 .out .val { color: var(--accent-light); }

/* Tiefe — zwei Karten */
.sp-pv .depth-grid { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.sp-pv .depth-card { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 26px; }
.sp-pv .depth-card.strong { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sp-pv .depth-card .d-tag { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 7px 13px; }
.sp-pv .depth-card .d-media { height: 240px; border-radius: 14px; margin-top: 18px; }
.sp-pv .depth-card .d-img-pair { display: flex; gap: 10px; margin-top: 18px; }
.sp-pv .depth-card .d-pair-img { flex: 1; min-width: 0; width: 100%; height: 200px; object-fit: cover; border-radius: 10px; display: block; }
.sp-pv .depth-card h3 { font-size: 27px; font-weight: 800; letter-spacing: -0.025em; margin: 20px 0 0; }
.sp-pv .depth-card p { font-size: 15.5px; line-height: 1.62; color: #41454d; margin: 12px 0 0; }
.sp-pv .depth-card .d-specs { margin-top: 22px; border-top: 2px solid var(--ink); }
.sp-pv .depth-card .d-specs .row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.sp-pv .depth-card .d-specs .row .k { font-size: 13.5px; font-weight: 700; }
.sp-pv .depth-card .d-specs .row .v { font-size: 13.5px; color: var(--muted); text-align: right; }

/* Parametrische Optimierung */
.sp-pv .opt { padding-top: 24px; padding-bottom: 24px; }
.sp-pv .opt-inner { background: var(--accent-soft); border-radius: 22px; padding: 44px; display: grid; grid-template-columns: 1fr 0.92fr; gap: 48px; align-items: center; }
.sp-pv .opt-text .eyebrow { color: var(--accent); }
.sp-pv .opt-text h2 { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; margin: 12px 0 0; max-width: 18ch; text-wrap: balance; }
.sp-pv .opt-text p { font-size: 16px; line-height: 1.65; color: #41454d; margin: 16px 0 0; max-width: 52ch; }
.sp-pv .opt-chips { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-pv .opt-chips span { font-size: 12.5px; font-weight: 700; color: var(--accent); background: var(--paper); border-radius: 999px; padding: 8px 14px; }
.sp-pv .opt-media { height: 340px; border-radius: 16px; }

/* Disclaimer */
.sp-pv .pv-disclaimer { margin: 8px var(--page-pad) 0; display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 24px; }
.sp-pv .pv-disclaimer .star { font-size: 20px; font-weight: 800; color: var(--accent); line-height: 1.2; flex: 0 0 auto; }
.sp-pv .pv-disclaimer p { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 92ch; }

.sp-pv .band { margin: 56px var(--page-pad) 70px; background: var(--ink); color: var(--paper); border-radius: 22px; padding: 48px 50px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.sp-pv .band h2 { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; margin: 0; max-width: 18ch; }
.sp-pv .band .btn-primary { background: var(--paper); color: var(--ink); }

/* ============================================================
   L — NEUE MODULE: Themen · Kennzahlen · Intro · Compare · Cases
   ============================================================ */
/* Themen-Tags (Hero) */
.sp-family .themen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.sp-family .themen span { font-size: 12.5px; font-weight: 600; color: #41454d; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; }
.sp-family .hero-minimal .themen { justify-content: center; }

/* Kennzahl-Band */
.sp-family .kpis { margin: 8px var(--page-pad) 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.sp-family .kpis .kpi { padding: 30px 34px 30px 0; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--line); }
.sp-family .kpis .kpi:last-child { border-right: 0; }
.sp-family .kpis .kpi + .kpi { padding-left: 34px; }
.sp-family .kpis .kpi .v { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); line-height: 1; }
.sp-family .kpis .kpi .t { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* Intro-Block */
.sp-family .intro-blk { margin: 0 var(--page-pad); padding: 64px 0 8px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.sp-family .intro-blk .kicker { font-size: 12.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
.sp-family .intro-blk h2 { font-size: 38px; font-weight: 800; letter-spacing: -0.035em; margin: 16px 0 0; max-width: 16ch; text-wrap: balance; }
.sp-family .intro-blk .i-right p { font-size: 17px; line-height: 1.7; color: #41454d; margin: 0 0 16px; }
.sp-family .intro-blk .i-right p:last-child { margin-bottom: 0; }

/* Compare-Tabelle (Erzeuger) */
.sp-family .cmp { margin-top: 24px; }
.sp-family .cmp table { width: 100%; border-collapse: collapse; }
.sp-family .cmp th { text-align: left; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0 0 10px; border-bottom: 2px solid var(--ink); }
.sp-family .cmp th:not(:first-child) { text-align: center; }
.sp-family .cmp td { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.sp-family .cmp td.lbl { font-weight: 700; }
.sp-family .cmp td.rate { text-align: center; font-weight: 800; letter-spacing: 0.06em; }
.sp-family .cmp td.rate.pp { color: var(--accent); }
.sp-family .cmp td.rate.p { color: #4a9b7a; }
.sp-family .cmp td.rate.m { color: #c2755e; }
.sp-family .cmp td.rate.mm { color: #b3543d; }
.sp-family .cmp .cmp-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; font-style: italic; }

/* Projektbeispiel (Case) */
.sp-family .case-blk { margin: 70px var(--page-pad) 0; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 46px 48px; }

/* KuehlArgument: Jahresverlauf + Variantenvergleich */
.sp-family .ka-wrap { margin: 0 var(--page-pad) 48px; }
.sp-family .ka-pair { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.sp-family .ka-box { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 28px 24px; }
.sp-family .ka-h { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0 0 14px; }
.sp-family .ka-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 18px; }
.sp-family .ka-chart365 { --brand-green: var(--accent); --alert-orange: #E67E22; position: relative; width: 100%; height: var(--chart-height, 220px); background: var(--accent-soft); margin-bottom: 0; margin-top: 40px; box-sizing: border-box; }
.sp-family .ka-axis-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-left: 2px solid #888; border-bottom: 2px solid #888; pointer-events: none; z-index: 5; }
.sp-family .ka-ylabels { position: absolute; left: -54px; top: -8px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: #888; }
.sp-family .ka-target365 { position: absolute; width: 100%; bottom: 60%; border-bottom: 2px dashed #E67E22; transform: translateY(1px); z-index: 10; pointer-events: none; }
.sp-family .ka-tlabel365 { position: absolute; top: -24px; left: 10px; font-weight: 700; font-size: 11px; color: #E67E22; background: rgba(255,255,255,.9); padding: 2px 6px; border-radius: 4px; }
.sp-family .ka-bars365 { display: flex; align-items: flex-end; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }
.sp-family .ka-bar365 { flex: 1 1 0; margin: 0; }
.sp-family .ka-xlabels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; padding: 0 5px; }
.sp-family .ka-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sp-family .ka-tbl th { text-align: left; padding: 9px 8px; border-bottom: 2px solid var(--ink); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sp-family .ka-tbl td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sp-family .ka-tbl .ka-hl { background: var(--accent-soft); }
.sp-family .ka-tsub { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.sp-family .ka-tsub-acc { color: var(--accent); }
.sp-family .ka-cell { height: 24px; border-radius: 4px; display: flex; align-items: center; padding: 0 8px; min-width: 70px; }
.sp-family .ka-num { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sp-family .ka-num-light { color: #fff; }
.sp-family .ka-num-dark { color: var(--ink); }
.sp-family .ka-max { font-weight: 600; color: var(--ink); white-space: nowrap; }
.sp-family .ka-alt { background: var(--accent-soft); }
/* Bar-Tabelle (Kh/a-Design) */
.sp-family .ka-bar-wrap { display: flex; align-items: center; gap: 10px; min-width: 110px; }
.sp-family .ka-bar-track { flex: 1; height: 20px; background: var(--accent-soft); border-radius: 5px; overflow: hidden; }
.sp-family .ka-bar-track-o { background: #f6e6d2; }
.sp-family .ka-bar-fill { height: 100%; border-radius: 5px; }
.sp-family .ka-bar-g { background: var(--accent); }
.sp-family .ka-bar-o { background: #e8902e; }
.sp-family .ka-bar-val { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px; white-space: nowrap; min-width: 56px; color: var(--ink); }
.sp-family .ka-bar-val-o { color: #b96c14; }
.sp-family .ka-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 30px; white-space: nowrap; }
.sp-family .ka-badge-ok { background: var(--accent-soft); color: var(--accent); }
.sp-family .ka-badge-tight { background: #fbf0dd; color: #b07512; }
.sp-family .ka-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; display: inline-block; }
.sp-family .ka-footnote { margin-top: 18px; font-size: 12px; color: var(--muted); line-height: 1.55; }
.sp-family .ka-footnote b { color: var(--ink); font-weight: 600; }
.sp-family .case-teaser-blk { margin: 70px var(--page-pad) 0; }
.sp-family .ct-inner { border: 1px solid var(--line); border-radius: 18px; padding: 40px 48px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.sp-family .ct-text .kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); display: block; }
.sp-family .ct-text h2 { font-size: 26px; font-weight: 800; margin: 8px 0 12px; color: var(--ink); }
.sp-family .ct-text p { font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 72ch; margin: 0 0 24px; }
.sp-family .ct-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.sp-family .ct-stats .cts { display: flex; flex-direction: column; gap: 3px; }
.sp-family .ct-stats .cts .v { font-size: 20px; font-weight: 800; color: var(--ink); }
.sp-family .ct-stats .cts .t { font-size: 11.5px; color: var(--muted); max-width: 18ch; line-height: 1.4; }
.sp-family .ct-link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; text-decoration: none; border-radius: 999px; padding: 16px 28px; font-size: 14.5px; font-weight: 700; white-space: nowrap; transition: opacity .15s; }
.sp-family .ct-link:hover { opacity: .82; }
.sp-family .ct-arr { font-size: 18px; }
.sp-family .case-blk .case-head .kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.sp-family .case-blk .case-head h2 { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; margin: 12px 0 0; text-wrap: balance; }
.sp-family .case-blk .case-head p { font-size: 16.5px; line-height: 1.65; color: #41454d; margin: 16px 0 0; max-width: 86ch; }

.sp-family .case-imgs { margin-top: 30px; display: grid; gap: 20px; }
.sp-family .case-imgs.n1 { grid-template-columns: 1fr; }
.sp-family .case-imgs.n2 { grid-template-columns: 1fr 1fr; }
.sp-family .case-imgs .case-img { height: 360px; border-radius: 14px; background: #f6f4ef; }
.sp-family .case-imgs.n2 .case-img { height: 320px; }

/* Energiekonzept-Diagramm im Case */
.sp-family .case-viz { margin-top: 30px; background: var(--ed-bg); border: 1px solid var(--line); border-radius: 16px; padding: 30px 34px; }
.sp-family .energy-diagram {
  --ed-bg: #fbfbf9;
  --ed-blue: #2B6FB0;
  --ed-green: var(--accent);
  --ed-dark: #0E3031;
  --ed-amber: #E7A92E;
  --ed-panel: #f3f4f1;
  --ed-panel-bd: var(--line);
  --ed-line: #5F6F69;
  --ed-ink: var(--ink);
  --ed-ink-soft: var(--muted);
  --ed-on-color: #fff;
  max-width: 980px; margin: 0 auto;
}
.sp-family .energy-diagram svg { width: 100%; height: auto; display: block; }
.sp-family .ed-blue { fill: var(--ed-blue); }
.sp-family .ed-green { fill: var(--ed-green); }
.sp-family .ed-dark { fill: var(--ed-dark); }
.sp-family .ed-amber { fill: var(--ed-amber); }
.sp-family .ed-panel { fill: var(--ed-panel); stroke: var(--ed-panel-bd); stroke-width: 1.5; }
.sp-family .ed-diagram text { font-family: "Manrope", system-ui, sans-serif; }
.sp-family .ed-header { fill: var(--ed-ink-soft); font-size: 30px; font-weight: 700; }
.sp-family .ed-label-w { fill: var(--ed-on-color); font-size: 27px; font-weight: 700; }
.sp-family .ed-label-d { fill: var(--ed-ink); font-size: 27px; font-weight: 700; }
.sp-family .ed-sub { fill: #BFC9C4; font-size: 20px; font-weight: 400; }
.sp-family .ed-consumer { fill: var(--ed-ink); font-size: 24px; font-weight: 500; }
.sp-family .ed-note { fill: var(--ed-ink-soft); font-size: 21px; font-weight: 400; }
.sp-family .ed-caption { fill: var(--ed-ink-soft); font-size: 23px; font-weight: 400; }
.sp-family .ed-flow { stroke: var(--ed-line); stroke-width: 5; fill: none; }
.sp-family .ed-flow-acc { stroke: var(--ed-green); stroke-width: 5; fill: none; }
.sp-family .ed-divider { stroke: var(--ed-panel-bd); stroke-width: 1.5; }

.sp-family .case-stats { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--ink); }
.sp-family .case-stats .cs { padding: 22px 28px 4px 0; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--line); }
.sp-family .case-stats .cs:last-child { border-right: 0; }
.sp-family .case-stats .cs + .cs { padding-left: 28px; }
.sp-family .case-stats .cs .v { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); line-height: 1; }
.sp-family .case-stats .cs .t { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.sp-family .case-table { margin-top: 34px; }
.sp-family .case-table .ct-title { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.sp-family .case-table table { width: 100%; border-collapse: collapse; }
.sp-family .case-table th { text-align: left; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 0 14px 10px 0; border-bottom: 2px solid var(--ink); }
.sp-family .case-table th:not(:first-child) { text-align: right; }
.sp-family .case-table td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.sp-family .case-table td:not(:first-child) { text-align: right; color: var(--muted); }
.sp-family .case-table td.lbl { font-weight: 600; color: var(--ink); }
.sp-family .case-table tr.hl td { background: var(--accent-soft); font-weight: 700; color: var(--ink); }
.sp-family .case-table tr.hl td:not(:first-child) { color: var(--accent); }

.sp-family .savings { margin-top: 34px; }
.sp-family .savings .sv-title { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.sp-family .savings .sv-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sp-family .savings .sv { background: var(--accent-soft); border-radius: 14px; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.sp-family .savings .sv .v { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--accent); }
.sp-family .savings .sv .t { font-size: 13.5px; line-height: 1.55; color: #41454d; }

.sp-family .case-bullets { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sp-family .case-bullets .cb { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid var(--accent); }
.sp-family .case-bullets .cb .cb-h { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.sp-family .case-bullets .cb .cb-t { font-size: 14.5px; line-height: 1.6; color: #41454d; }

.sp-family .case-note { font-size: 13.5px; line-height: 1.6; color: var(--muted); font-style: italic; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); max-width: 92ch; }

/* Methoden-Abschnitt: oberer Abstand etwas reduzieren, wenn Intro davor */
.sp-family .intro-blk + .methods { padding-top: 56px; }

/* Bildlose Methoden — Text läuft voll, kein leerer Slot */
.sp-family .method.noimg { grid-template-columns: 1fr; gap: 0; }
.sp-family .method.noimg .m-text { max-width: 78ch; }
.sp-family .method.noimg .cmp { max-width: 560px; }
.sp-family .methods-cols .m-col.noimg { padding-top: 4px; }
.sp-family .methods-cols .m-col.noimg .m-head { margin-top: 0; }
.sp-family .m-card.noimg .c-body { padding-top: 30px; }

/* ============================================================
   M — HISTOGRAMM-VISUALISIERUNG
   ============================================================ */
.sp-family .hist-wrap {
  margin: 28px 0 0;
  max-width: 600px;
}
.sp-family .hist-ylabel {
  color: var(--accent); font-size: 13px; margin-bottom: 8px; font-weight: 600;
}
.sp-family .hist-plot {
  position: relative;
  border-left: 2px solid var(--accent);
  padding-left: 8px;
}
.sp-family .hist-plot::before {
  content: "";
  position: absolute; left: -6px; bottom: -5px;
  width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent);
}
.sp-family .hist-arrow {
  position: absolute; top: 8px; left: 10px; right: 20%;
  display: flex; align-items: center;
}
.sp-family .hist-arrow-line {
  flex: 1; height: 2px; background: var(--accent); position: relative;
}
.sp-family .hist-arrow-line::before {
  content: "";
  position: absolute; left: 0; top: -4px;
  border: 5px solid transparent;
  border-right-color: var(--accent);
}
.sp-family .hist-arrow-text {
  color: var(--accent); font-size: 12px; white-space: nowrap; margin-left: 10px;
}
.sp-family .hist-bars {
  display: flex; align-items: flex-end; gap: 5px;
  height: 200px; border-bottom: 1px solid var(--line);
  margin-top: 44px;
}
.sp-family .hist-bars .bar {
  flex: 1; background: var(--accent); border-radius: 2px 2px 0 0;
}
.sp-family .hist-xaxis {
  display: flex; justify-content: space-between;
  color: var(--muted); font-size: 11px; margin-top: 7px;
}
.sp-family .hist-xlabel {
  color: var(--muted); font-size: 12px; margin-top: 7px; font-style: italic;
}

/* ============================================================
   M — QUICKCHECK / DETAILSIMULATION Vergleichsblock
   ============================================================ */
.sp-family .quickcheck-blk {
  /* flex child inside .methods — naturally full-width */
}
.sp-family .quickcheck-blk .qc-h {
  font-size: 28px; font-weight: 800; letter-spacing: -0.025em;
  margin: 0 0 18px; color: var(--ink);
}
.sp-family .quickcheck-blk .qc-intro {
  font-size: 16.5px; line-height: 1.65; color: #41454d;
  margin: 0 0 28px; max-width: 84ch;
}

/* 3-Spalten-Vergleichstabelle */
.sp-family .qc-cmp { border-top: 2px solid var(--ink); margin-bottom: 24px; }
.sp-family .qc-cmp table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sp-family .qc-cmp col.qc-col-k { width: 120px; }
.sp-family .qc-cmp th {
  text-align: left; padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.sp-family .qc-cmp th.qc-col-val {
  font-size: 13px; font-weight: 800; letter-spacing: 0.01em;
  text-transform: none; color: var(--ink);
  padding-left: 20px; border-left: 1px solid var(--line);
}
.sp-family .qc-cmp td {
  padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line);
  font-size: 14px; vertical-align: top; line-height: 1.55;
}
.sp-family .qc-cmp td.qc-k { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.sp-family .qc-cmp td.qc-a,
.sp-family .qc-cmp td.qc-b { color: var(--muted); padding-left: 20px; border-left: 1px solid var(--line); }

/* Hinweistext */
.sp-family .qc-note {
  font-size: 13.5px; line-height: 1.65; color: var(--muted);
  font-style: italic; margin: 0 0 28px; max-width: 84ch;
}

/* RC-Bilder im QuickCheck */
.sp-family .qc-imgs {
  margin: 28px 0 20px;
}
.sp-family .qc-imgs-pair {
  display: flex; gap: 14px;
}
.sp-family .qc-imgs-pair .qc-img {
  flex: 1; min-width: 0; width: 100%; height: auto;
  border-radius: 10px; object-fit: cover; display: block;
}
.sp-family .qc-imgs-cap {
  margin: 10px 0 0;
  font-size: 12.5px; color: var(--muted); font-style: italic;
}

/* EnerLens-Box */
.sp-family .qc-enerlens {
  background: var(--accent-soft); border-radius: 16px;
  padding: 26px 32px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px;
}
.sp-family .qc-enerlens p {
  font-size: 15.5px; font-weight: 600; color: var(--accent);
  margin: 0; line-height: 1.55; max-width: 72ch;
}
.sp-family .qc-enerlens .qc-btn {
  flex-shrink: 0; background: var(--accent); color: #fff;
  text-decoration: none; border-radius: 999px; padding: 14px 26px;
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  display: inline-flex; align-items: center; white-space: nowrap;
  border: 0; cursor: pointer; transition: opacity .15s;
}
.sp-family .qc-enerlens .qc-btn:hover { opacity: .82; }

/* KuehlArgument Anzeigemodi (chart-only / table-only) */
.sp-family .ka-chart-mode .ka-wrap { margin: 16px 0 0; }
.sp-family .ka-chart-mode .ka-pair > .ka-box:last-child { display: none; }
.sp-family .ka-table-mode .ka-pair > .ka-box:first-child { display: none; }

/* Jahreslastgang-Banner — full-width unter Method 04 */
.sp-family .lb-below { margin: 36px var(--page-pad) 0; }
.sp-family .lb-below .aerosim-loadbanner { border-radius: 16px; overflow: hidden; }

/* CFD-Animation — full-width below method text */
.sp-family .cfd-below { margin: 0 0 48px; padding: 0 var(--page-pad); }
.sp-family .cfd-below canvas { border-radius: 10px; }

/* Synergie-Box */
.sp-family .synergy-box {
  background: var(--accent-soft); border-radius: 14px;
  padding: 22px 28px; margin-top: 28px;
}
.sp-family .synergy-box .synergy-h {
  display: block; font-size: 14.5px; font-weight: 800; color: var(--accent);
  margin-bottom: 8px;
}
.sp-family .synergy-box p {
  font-size: 13.5px; color: var(--accent); margin: 0; line-height: 1.6;
}

.sp .slot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sp .slot.is-filled { background: #f6f4ef; }
.sp .slot.is-filled .tag { display: none; }
.sp .btn-primary { background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 15px 30px; font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; text-decoration: none; display: inline-block; }
.sp .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 15px 26px; font: inherit; font-weight: 600; font-size: 15.5px; cursor: pointer; text-decoration: none; display: inline-block; }
.sp .btn-accent { background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 15px 30px; font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; }
.sp .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.case-teaser-link { display: flex; align-items: center; gap: 32px; margin: 0 var(--page-pad) 64px; padding: 28px 36px; border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .2s, background .2s; }
.case-teaser-link:hover { border-color: var(--ink); background: #fafafa; }
@media (max-width: 1024px) {
  .sp-family .method, .sp-family .intro-blk, .sp-pv .opt-inner, .sp-pv .depth-grid, .sp-pv .scope-grid { grid-template-columns: 1fr; }
  .sp-family .methods-cards, .sp-family .methods-cols, .sp-methods .grid, .sp-cases .grid { grid-template-columns: 1fr; }
  .sp-case .body, .sp-case .body-eckdaten, .sp-contact .body, .sp-legal .legal-body { grid-template-columns: 1fr; }
  .sp-family .hero h1, .sp-case .hero h1, .sp-methods .hero h1 { font-size: 42px; }
  .sp-cases .proj.feat { flex-direction: column; }
  .mega .cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sp-family .kpis, .sp-family .case-stats, .sp-about .vals, .sp-about .team .grid { grid-template-columns: 1fr; }
  .sp-case .gallery { grid-template-columns: 1fr; }

  /* Hero-Überschriften, die noch nicht skaliert wurden, fluid verkleinern */
  .sub-hero h1,
  .sp-detail .hero h1,
  .sp-cases .hero h1,
  .sp-about .hero h1,
  .sp-contact h1,
  .sp-legal .legal-hero h1,
  .sp-confirm h1,
  .sp-404 h1,
  .sp-pv .hero-minimal h1,
  .sp-pv .hero-split h1,
  .sp-family .hero-split h1,
  .sp-family .hero-band h1,
  .sp-family .hero-minimal h1 { font-size: clamp(30px, 9vw, 42px); }

  .sp-family .method h2,
  .sp-pv .sec-head h2 { font-size: 30px; }

  /* Restliche mehrspaltige Raster stapeln */
  .sp-detail .two,
  .sp-detail .gallery,
  .sp-confirm .steps,
  .sp-family .savings .sv-list,
  .sp-family .case-bullets { grid-template-columns: 1fr; }

  /* Hohe Bild-Flächen auf Mobil reduzieren */
  .sp-family .hero-split .h-media,
  .sp-pv .hero-split .h-media { height: 280px; }
}