/* ============================================================
   EBS — Stylesheet

   Gebaut nach den Gestaltungsrichtungen 2026. Die Nummern in den
   Kommentaren verweisen auf den jeweiligen Punkt.

   Nicht übernommen: Punkt 6, Neo-Brutalismus. Die Quelle schließt ihn
   für B2B- und Finanzkontexte selbst aus, weil dort Sorgfalt das
   Vertrauenssignal ist. Punkt 8, echtes 3D, entfällt mangels Objekt,
   das sich vorzeigen ließe; stattdessen leichte Tiefe per Parallaxe.
   ============================================================ */

/* ————————————————————————————————————————————— Grundlagen */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6rem;
  overflow-x: clip;
}

body {
  font-family: var(--font);
  font-size: var(--t-base);
  font-weight: var(--w-book);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* Punkt 4: Farbwechsel weich, damit der Moduswechsel nicht blitzt */
  transition: background var(--base), color var(--base);
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Punkt 7: Sichtbarer Fokus, der in beiden Modi trägt */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; z-index: 400;
  padding: var(--s3) var(--s5);
  background: var(--ink); color: var(--bg);
  border-radius: var(--r-sm);
}
.skip-link:focus { left: var(--s4); top: var(--s4); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ————————————————————————————————————————————— Typografie
   Display-Serif nur in h1/h2. Navigation, Buttons, h3 bleiben Archivo. */

h1, h2, h3, h4 {
  line-height: var(--lh-head);
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--t-3xl); line-height: var(--lh-display); letter-spacing: -0.028em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); font-weight: var(--w-bold); letter-spacing: -0.018em; }
h4 { font-size: var(--t-md); font-weight: var(--w-bold); letter-spacing: -0.01em; }

p { text-wrap: pretty; }

.lead { font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.muted { color: var(--ink-2); }
.accent { color: var(--accent); }

/* ————————————————————————————————————————————— Kinetische Typografie
   Punkt 2: Text als Blickfang, nie im Fließtext oder in der Navigation.
   Die Zeilen steigen nacheinander auf und gewinnen dabei an Gewicht —
   die Gewichtsachse der variablen Schrift wird mitanimiert. */

.kinetic { display: block; }

.kinetic > span {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.06em;
}

.kinetic > span > span {
  display: block;
  font-variation-settings: "wght" 500;
  transform: translateY(105%);
  opacity: 0;
  animation: zeile-auf 1s var(--ease) forwards;
}

.kinetic > span:nth-child(1) > span { animation-delay: 0.05s; }
.kinetic > span:nth-child(2) > span { animation-delay: 0.17s; }
.kinetic > span:nth-child(3) > span { animation-delay: 0.29s; }

@keyframes zeile-auf {
  0%   { transform: translateY(105%); opacity: 0; font-variation-settings: "wght" 500; }
  60%  { opacity: 1; }
  100% { transform: none; opacity: 1; font-variation-settings: "wght" 800; }
}

/* Wortmarkierung, die beim Erscheinen unterstrichen wird */
.mark {
  position: relative;
  color: var(--accent);
  white-space: nowrap;
}
.mark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.06em;
  height: 0.09em;
  background: var(--accent);
  opacity: 0.35;
  transform: scaleX(0);
  transform-origin: left;
  animation: strich 0.7s var(--ease) 0.9s forwards;
}
@keyframes strich { to { transform: scaleX(1); } }

/* ————————————————————————————————————————————— Layout */

.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - var(--gutter) * 2); margin-inline: auto; }

.band { padding-block: var(--band); position: relative; }
.band--spacious { padding-block: clamp(4rem, 9vw, 6.5rem); }
.band-sm { padding-block: clamp(2.5rem, 5vw, 4rem); position: relative; }

.on-surface-2 { background: var(--surface-2); }
.on-deep { background: var(--deep); color: var(--on-deep); }
.on-deep h2, .on-deep h3 { color: var(--on-deep); }
.on-deep p, .on-deep .lead { color: var(--on-deep-2); }
/* Kontrakt: auf dunklen Flächen gelten dunkle Text-Tokens.
   Sonst erbt .muted / .section-label die hellen Ink-Werte (Kontrastbruch). */
.on-deep,
.section--deep,
.contact-card,
.closing,
.video-consent,
.model-desk {
  --ink: var(--on-deep);
  --ink-2: var(--on-deep-2);
  --ink-3: color-mix(in srgb, var(--on-deep) 72%, var(--deep));
  --accent: var(--accent-on-deep);
  --accent-hover: #ffb27c;
  --on-accent: #0d1c24;
  --accent-line: color-mix(in srgb, var(--accent-on-deep) 70%, var(--on-deep));
  --line: var(--deep-line);
  --line-strong: color-mix(in srgb, var(--on-deep) 35%, transparent);
}

.wave-top { position: relative; }
.wave-top::before { display: none; }

.head { max-width: 46ch; margin-bottom: var(--s8); }
.head--center {
  margin-inline: 0;
  text-align: left;
  margin-bottom: var(--s8);
}
.head .section-label,
.head--center .section-label {
  margin-bottom: var(--s4);
}
.head h2 {
  max-width: 18ch;
  line-height: 1.08;
  font-size: clamp(2.45rem, 1.2rem + 3.2vw, 3.85rem);
  letter-spacing: -0.03em;
}
.chapter-photo__slab h2 {
  font-size: clamp(2.25rem, 1.15rem + 2.8vw, 3.45rem);
  line-height: 1.08;
  max-width: 18ch;
  letter-spacing: -0.03em;
}
.head--center h2 { margin-inline: 0; max-width: 22ch; }
.head p { margin-top: var(--s4); font-size: var(--t-md); line-height: 1.6; color: var(--ink-2); max-width: 42ch; }
.head--center p { margin-inline: 0; }
.on-deep .head p { color: var(--on-deep-2); }

/* ————————————————————————————————————————————— Schaltflächen
   Punkt 3: Rückmeldung an funktionalen Momenten. */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  padding: 1.05rem 1.9rem;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--t-base);
  font-weight: var(--w-bold);
  line-height: 1.15;
  letter-spacing: -0.01em;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--fast), border-color var(--fast),
    color var(--fast), transform 0.09s var(--ease-soft), box-shadow var(--fast);
}

.btn:active { transform: translateY(1px) scale(0.99); }
.btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }

.btn-solid { background: var(--ink); color: var(--bg); }
.btn-solid:hover { background: var(--ink-2); }

.btn-outline { border-color: var(--line-strong); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); background: var(--surface); }

.btn-on-deep { border-color: var(--deep-line); color: var(--on-deep); }
.btn-on-deep:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--on-deep); }

.btn-lg { padding: 1.2rem 2.4rem; font-size: var(--t-md); }
/* Der kleine Knopf steht im Kopf neben der Navigation. Bricht er um,
   wächst der Kopfbereich in der Höhe und die Zeile verrutscht. */
.btn-sm { padding: 0.65rem 1.2rem; font-size: var(--t-sm); white-space: nowrap; }

.btns { display: flex; flex-wrap: wrap; gap: var(--s4); }
.btns--center { justify-content: center; }

/* Punkt 3: Der Pfeil rückt beim Zeigen — kleine Bestätigung, dass es weitergeht */
.go {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: var(--w-bold); color: var(--accent);
}
.go::after { content: "→"; transition: transform var(--fast); }
.go:hover::after { transform: translateX(5px); }

/* ————————————————————————————————————————————— Kopfbereich */

.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  overflow: visible;
  transition: border-color var(--base), background var(--base);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 28px -18px color-mix(in srgb, var(--ink) 35%, transparent);
}

/* Startseite: Header sitzt auf der Navy, bis gescrollt wird. */
@media (min-width: 1100px) {
  body.home .site-header:not(.is-scrolled) {
    background: var(--deep);
    color: var(--on-deep);
  }
  body.home .site-header:not(.is-scrolled) .brand-hell { display: none; }
  body.home .site-header:not(.is-scrolled) .brand-dunkel { display: block; }
  body.home .site-header:not(.is-scrolled) .nav__links > a,
  body.home .site-header:not(.is-scrolled) .nav__dropdown-toggle,
  body.home .site-header:not(.is-scrolled) .nav__phone {
    color: var(--on-deep);
  }
  body.home .site-header:not(.is-scrolled) .nav__phone svg { color: var(--accent-on-deep); }
  body.home .site-header:not(.is-scrolled) .theme-toggle {
    border-color: color-mix(in srgb, var(--on-deep) 28%, transparent);
    color: var(--on-deep);
  }
  body.home .site-header:not(.is-scrolled) .theme-toggle:hover {
    background: color-mix(in srgb, var(--on-deep) 10%, transparent);
    border-color: var(--on-deep);
  }
  body.home .site-header:not(.is-scrolled) .nav__dropdown-panel,
  body.home .site-header:not(.is-scrolled) .nav__dropdown-panel a,
  body.home .site-header:not(.is-scrolled) .nav__dropdown-panel strong {
    color: var(--ink);
  }
  body.home .site-header:not(.is-scrolled) .nav__dropdown-panel span {
    color: var(--ink-2);
  }
  body.home .site-header:not(.is-scrolled) .nav__dropdown-panel {
    background: var(--surface);
    border: 1px solid var(--line);
  }
}

.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: var(--s4); }
/* Die Wortmarke darf nie zusammengedrückt werden — sonst ist der
   Schriftzug auf schmalen Geräten nicht mehr zu lesen. */
.nav__brand { flex: 0 0 auto; }
.nav__brand img { height: 46px; width: auto; }
@media (max-width: 420px) { .nav__brand img { height: 38px; } }
/* Zwei Fassungen des Logos, je Modus eine. Der Schriftzug ist dunkelblau
   und wäre auf dunklem Grund nicht zu lesen. */
.brand-dunkel { display: none; }
:root[data-theme="dark"] .brand-dunkel { display: block; }
:root[data-theme="dark"] .brand-hell { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-dunkel { display: block; }
  :root:not([data-theme="light"]) .brand-hell { display: none; }
}
.site-footer .brand-hell { display: block; }
.site-footer .brand-dunkel { display: none; }
:root[data-theme="dark"] .site-footer .brand-hell { display: none; }
:root[data-theme="dark"] .site-footer .brand-dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-footer .brand-hell { display: none; }
  :root:not([data-theme="light"]) .site-footer .brand-dunkel { display: block; }
}
.nav__menu { display: flex; align-items: center; gap: var(--s5); }

.nav__links {
  display: none; align-items: center; gap: var(--s5);
  font-size: var(--t-sm); font-weight: var(--w-semi);
}
@media (min-width: 1100px) { .nav__links { display: flex; } }

/* ——— Navigation auf schmalen Geräten
   Unter 1100px klappt dasselbe Menü als Fläche unter dem Kopf auf.
   Kein zweiter Satz Links, damit Kopf und Fläche nie auseinanderlaufen. */

.nav__burger {
  display: grid; gap: 5px;
  width: 2.75rem; height: 2.75rem;
  place-content: center;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast), transform 0.09s var(--ease-soft);
}
.nav__burger:hover { border-color: var(--ink); background: var(--surface); }
.nav__burger:active { transform: scale(0.94); }
.nav__burger span {
  display: block; width: 1.15rem; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--base), opacity var(--fast);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1100px) { .nav__burger { display: none; } }

@media (max-width: 1279px) {
  .nav__links > .nav__phone { display: none; }
}

@media (max-width: 1099px) {
  /* Der Knopf im Kopf entfällt: die feste Leiste am unteren Rand
     trägt denselben Aufruf und ist mit dem Daumen erreichbar. */
  .site-header .btn-sm { display: none; }

  .nav__links[data-offen] {
    display: flex;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s4) var(--gutter) var(--s5);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shade);
    font-size: var(--t-base);
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav__links[data-offen] > a,
  .nav__links[data-offen] .nav__dropdown-toggle { padding-block: var(--s3); }
  .nav__links[data-offen] > a::after { display: none; }
  .nav__links[data-offen] .nav__dropdown { width: 100%; }
  .nav__links[data-offen] .nav__dropdown-toggle { width: 100%; justify-content: space-between; }
  .nav__links[data-offen] .nav__dropdown-panel {
    position: static; transform: none; min-width: 0;
    box-shadow: none; background: var(--surface-2);
    margin-block: var(--s2);
    max-height: none;
    overflow: visible;
  }
  .nav__links[data-offen] .nav__phone { margin-top: var(--s3); font-weight: var(--w-bold); color: var(--accent); }
}

body.nav-open { overflow: hidden; }

@media (max-width: 600px) {
  body.has-mobile-cta {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
  }
  .nav__links[data-offen] {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }
  /* Unter 600px: Für wen + Mehr. Die drei Direktlinks sitzen in Mehr. */
  .nav__desk { display: none; }
  .nav__links[data-offen] .nav__dropdown-panel a.nav__pocket { display: grid; }
}

.nav__pocket { display: none; }
.nav__dropdown-panel a.nav__pocket { display: none; }

.nav__links > a, .nav__dropdown-toggle { white-space: nowrap; position: relative; }

/* Punkt 3: Unterstrich wächst aus der Mitte statt hart zu erscheinen */
.nav__links > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.35rem;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transition: transform var(--fast);
}
.nav__links > a:hover::after,
.nav__links > a[aria-current="page"]::after { transform: scaleX(1); }

.nav__phone {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: var(--w-black); color: var(--ink); white-space: nowrap;
}
.nav__phone svg { width: 1rem; height: 1rem; color: var(--accent); }

.nav__dropdown { position: relative; }
.nav__dropdown-toggle {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0; border: 0; background: none;
  font-weight: var(--w-semi); cursor: pointer;
}
.nav__dropdown-toggle svg { width: 0.75rem; height: 0.75rem; transition: transform var(--fast); }
.nav__dropdown-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__dropdown-panel {
  position: absolute; top: calc(100% + 1rem); left: 50%;
  transform: translateX(-50%);
  min-width: 330px; padding: var(--s2);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r);
  /* Entweder Kante oder Erhebung, nicht beides — die Kombination aus
     Haarlinie und weitem Schatten liest sich wie generierte Oberfläche. */
  box-shadow: var(--shade-lg);
  z-index: 320;
  max-height: calc(100svh - var(--header-h) - 1.25rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav__dropdown--end .nav__dropdown-panel {
  left: auto;
  right: 0;
  transform: none;
}
.nav__dropdown-panel[hidden] { display: none; }
.nav__dropdown-panel a {
  display: grid;
  gap: 0.1rem;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  color: var(--ink);
}
.nav__dropdown-panel a:hover { background: var(--accent-soft); color: var(--ink); }
.nav__dropdown-panel strong { font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--ink); }
.nav__dropdown-panel span { font-size: var(--t-xs); color: var(--ink-2); }

/* Punkt 4: Umschalter für den Modus */
.theme-toggle {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--fast), background var(--fast), transform var(--fast);
}
.theme-toggle:hover { border-color: var(--ink); background: var(--surface); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { width: 1.1rem; height: 1.1rem; }
.theme-toggle .icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-dark { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; }
}

.nav-audience {
  display: none;
}

/* ————————————————————————————————————————————— Hero */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  min-height: min(42rem, calc(100svh - 5.25rem));
  background: var(--deep);
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  width: min(48vw, 380px);
  height: min(48vw, 380px);
  right: -10%;
  top: 8%;
  background: url("../img/brand/BG-EBS-Loewe.webp") center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.hero__copy {
  display: grid;
  align-content: center;
  padding: clamp(2.5rem, 6vw, 5.25rem) var(--gutter);
  color: var(--on-deep);
  position: relative;
  z-index: 1;
}

@media (max-width: 959px) {
  .hero {
    min-height: 0;
  }
  .hero__scene {
    grid-area: 1 / 1;
    min-height: min(70svh, 34rem);
  }
  .hero__copy {
    grid-area: 1 / 1;
    align-content: end;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--deep) 8%, transparent) 0%,
      color-mix(in srgb, var(--deep) 42%, transparent) 36%,
      var(--deep) 78%
    );
    padding-top: 6.5rem;
  }
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(22rem, 0.9fr) minmax(0, 1.1fr);
  }
  .hero__copy,
  .hero__scene { grid-area: auto; }
  .hero__copy { background: var(--deep); }
  .hero::after {
    top: auto;
    bottom: -14%;
    left: 52%;
    right: auto;
    opacity: 0.07;
  }
}
.hero__copy-inner { max-width: 34rem; }
.hero h1 {
  max-width: 12ch;
  font-size: var(--t-4xl);
  line-height: 1.02;
  color: var(--on-deep);
  letter-spacing: -0.028em;
}
.hero__sub {
  margin-top: var(--s5);
  max-width: 32ch;
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--on-deep-2);
}
.hero .btns { margin-top: var(--s6); }
.hero .btn-outline,
.hero .btn--outline {
  border-color: var(--deep-line);
  color: var(--on-deep);
}
.hero .btn-outline:hover,
.hero .btn--outline:hover {
  background: color-mix(in srgb, var(--on-deep) 10%, transparent);
  border-color: var(--on-deep);
}

.hero__assur {
  display: flex; flex-wrap: wrap; gap: var(--s5);
  margin-top: var(--s5);
  font-size: var(--t-sm); color: var(--on-deep-2);
}
.hero__assur span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero__assur svg { width: 1rem; height: 1rem; color: var(--accent-on-deep); }

.hero__blob { display: none; } /* Löwe sitzt als ::after auf .hero */
.hero__quote { display: none; }

.hero__scene {
  position: relative;
  margin: 0;
  min-height: 22rem;
  overflow: hidden;
  background: var(--brand-mid);
}
.hero__scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 40%;
  position: absolute;
  inset: 0;
  border-radius: 0;
  box-shadow: none;
}
.hero__scene figcaption {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__scene img { animation: none; }
  .price-meter__seg { transform: none; }
}

/* Unterlagen legen sich: Foto schärft ein, Rechnung setzt auf.
   Kein Dauerloop, keine Linie, kein Einblenden jeder Sektion. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes scene-settle {
    from { transform: scale(1.07); filter: saturate(0.88); }
    to { transform: scale(1); filter: none; }
  }
  @keyframes paper-down {
    from { opacity: 0; transform: translate3d(0, -14px, 0) rotate(-2.4deg); }
    to { opacity: 1; transform: none; }
  }
  @keyframes panel-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  .hero__scene img,
  .ss-hero__bg img {
    animation: scene-settle 1.05s var(--ease) both;
  }
  .hero__scene figcaption {
    animation: paper-down 0.55s var(--ease) 0.4s both;
  }
  .ss-hero__bill,
  .hero__bill,
  .invoice-stage .bill {
    transform-origin: 12% 0;
    animation: paper-down 0.7s var(--ease) 0.22s both;
  }
  .price-meter__seg--beschaffung { transition-delay: 0s; }
  .price-meter__seg--netz { transition-delay: 0.12s; }
  .price-meter__seg--steuer { transition-delay: 0.24s; }

  @keyframes panel-in-end {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }

  @media (min-width: 1100px) {
    .nav__dropdown-panel:not([hidden]) {
      animation: panel-in 0.22s var(--ease);
    }
    .nav__dropdown--end .nav__dropdown-panel:not([hidden]) {
      animation: panel-in-end 0.22s var(--ease);
    }
  }
}

.hero__media { position: relative; margin: 0; }
.hero__media img {
  width: 100%;
  border-radius: var(--r);
  box-shadow: var(--shade);
}
.hero__media figcaption {
  margin-top: var(--s3);
  font-size: var(--t-sm);
  color: var(--ink-3);
}

/* ————————————————————————————————————————————— Aktenkopf */

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5) var(--s6);
  padding-block: var(--s7);
  border-block: 1px solid var(--line);
}
@media (min-width: 860px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.facts dt {
  font-size: var(--t-lg);
  font-weight: var(--w-black);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.facts dd {
  margin: 0.35rem 0 0;
  font-size: var(--t-sm);
  color: var(--ink-3);
  line-height: 1.4;
}
.assur-strip { display: none; }

/* ————————————————————————————————————————————— Zielgruppen
   Punkt 1 in kleiner Form: Der Besucher ordnet sich selbst zu.
   Die Wahl wird gemerkt und färbt später passende Stellen ein. */

.routes { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.chooser {
  display: grid;
  gap: var(--s5);
}
@media (min-width: 900px) {
  .chooser {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: stretch;
  }
}
.chooser__stack {
  display: grid;
  gap: var(--s5);
}
.tools-strip {
  margin-top: var(--s7);
  text-align: left;
  font-size: var(--t-sm);
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--s3) var(--s5);
}
.tools-strip a { color: var(--accent); font-weight: var(--w-semi); text-decoration: underline; text-underline-offset: 3px; }

.route {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: none;
  transition: transform var(--base), border-color var(--base);
}
.route:hover { transform: translateY(-2px); border-color: var(--line-strong); }

.route__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); margin: 0; }
.route__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.route[data-audience="hausverwaltung"] .route__media img { object-position: center 35%; }

.route--industrie .route__media { position: relative; background: var(--brand-deep); }

.route__body { display: flex; flex-direction: column; flex: 1; padding: var(--s5); }
.route__who { font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--accent); margin-bottom: var(--s2); }
.route__body h3 { margin-bottom: var(--s3); }
.route__body p { color: var(--ink-2); font-size: var(--t-sm); flex: 1; }
.route__body .go { margin-top: var(--s4); }

.route--lead { min-height: 100%; color: var(--on-deep); position: relative; }
.route--lead .route__media { aspect-ratio: 5 / 4; flex: 1; }
@media (min-width: 900px) {
  .route--lead {
    min-height: 100%;
    isolation: isolate;
  }
  .route--lead .route__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    flex: none;
  }
  .route--lead .route__body {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: var(--s6);
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--deep) 88%, transparent) 42%, var(--deep) 100%);
    color: var(--on-deep);
  }
  .route--lead .route__who { color: var(--accent-on-deep); }
  .route--lead .route__body h3 { color: var(--on-deep); }
  .route--lead .route__body p { color: var(--on-deep-2); }
  .route--lead .go { color: var(--accent-on-deep); }
}

@media (min-width: 640px) {
  .chooser__stack .route {
    flex-direction: row;
    min-height: 0;
  }
  .chooser__stack .route__media {
    width: 42%;
    aspect-ratio: auto;
    min-height: 100%;
    flex-shrink: 0;
  }
  .chooser__stack .route__body {
    padding: var(--s4) var(--s5);
  }
  .chooser__stack .route__body h3 { font-size: var(--t-md); }
}

/* ————————————————————————————————————————————— Strompreis (drei Blöcke)
   Eigenes Layout: gestapelter Meter + wechselnde Ebenen — bewusst
   anders als Zielgruppen-Karten oder Prozess-Schritte. */

.band--price-stack {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
}

.price-meter {
  max-width: 52rem;
  margin: 0 0 var(--s8);
}

.price-meter__track {
  display: flex;
  height: clamp(3rem, 6vw, 4.25rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 25%, transparent),
    0 12px 40px -12px color-mix(in srgb, var(--ink) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.price-meter__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  color: var(--on-accent);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 0 0.5rem;
  transform-origin: left;
}
.price-meter.is-visible .price-meter__seg { transform: none; }

.price-meter__seg--beschaffung { flex: 45; background: var(--accent); }
.price-meter__seg--netz {
  flex: 30;
  background: color-mix(in srgb, var(--brand-mid) 72%, #8ec4d8);
  color: #fff;
}
.price-meter__seg--steuer {
  flex: 25;
  background: color-mix(in srgb, var(--brand-deep) 58%, #c5d4da);
  color: var(--deep);
}

.price-meter__keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--s4) var(--s6);
  margin-top: var(--s4);
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.price-meter__keys li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.price-meter__dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.price-meter__dot--beschaffung { background: var(--accent); }
.price-meter__dot--netz { background: color-mix(in srgb, var(--brand-mid) 72%, #8ec4d8); }
.price-meter__dot--steuer { background: color-mix(in srgb, var(--brand-deep) 58%, #c5d4da); }

.price-cols {
  display: grid;
  gap: var(--s6) var(--s7);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .price-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.price-col h3 { margin-bottom: var(--s3); }
.price-col p { color: var(--ink-2); font-size: var(--t-sm); }
.price-col .go { margin-top: var(--s4); display: inline-block; }
.price-col__pct {
  margin: 0 0 var(--s3);
  font-size: var(--t-2xl);
  font-weight: var(--w-black);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.price-col__pct small {
  font-size: 0.45em;
  margin-left: 0.08em;
}
.price-col[data-layer="netz"] .price-col__pct,
.price-col[data-layer="steuer"] .price-col__pct {
  color: var(--ink);
}

.price-layers {
  display: grid;
  gap: clamp(var(--s5), 3vw, var(--s7));
}

.price-layer {
  display: grid;
  gap: clamp(var(--s5), 4vw, var(--s7));
  align-items: center;
  padding: 0;
  border-radius: 0;
  background: none;
  border: 0;
  box-shadow: none;
  position: relative;
}

@media (min-width: 900px) {
  .price-layer { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .price-layer--flip .price-layer__visual { order: 2; }
  .price-layer--flip .price-layer__body { order: 1; }
}

.price-layer--lead {
  border: 0;
  box-shadow: none;
}

.price-layer__visual {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-3);
}

.price-layer__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.price-layer__badge {
  position: absolute;
  top: var(--s4);
  left: var(--s4);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
}

.price-layer__body { display: grid; gap: var(--s3); }

.price-layer h3 { font-size: var(--t-xl); max-width: 18ch; }
.price-layer p { color: var(--ink-2); font-size: var(--t-sm); max-width: 52ch; }
.price-layer .go { margin-top: var(--s2); }

.price-layer p.price-layer__pct {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  max-width: none;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: var(--w-black);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.price-layer p.price-layer__pct small {
  font-size: 0.55em;
  font-weight: var(--w-bold);
  color: var(--accent);
  letter-spacing: 0;
}

@media (max-width: 899px) {
  .price-meter__seg {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
  .price-meter__seg span { font-size: 0.68rem; }
}

/* Legacy Kostenblöcke — falls noch referenziert */
.split-cost { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }

.cost {
  padding: 0;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shade);
  overflow: hidden;
}
.cost__visual { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-3); }
.cost__visual img { width: 100%; height: 100%; object-fit: cover; }
.cost__num,
.cost__bar,
.cost h3,
.cost p,
.cost .go { margin-left: var(--s6); margin-right: var(--s6); }
.cost__num { margin-top: var(--s5); }
.cost p { margin-bottom: var(--s6); padding-bottom: var(--s6); }
.cost__num {
  display: flex; align-items: baseline; gap: 0.3rem;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: var(--w-black); line-height: 1;
  letter-spacing: -0.05em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cost__num small { font-size: var(--t-sm); font-weight: var(--w-semi); color: var(--ink-3); letter-spacing: 0; }

/* Punkt 3: Der Balken wächst, sobald der Abschnitt sichtbar wird */
.cost__bar { height: 7px; margin: var(--s4) 0 var(--s5); border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.cost__bar i {
  display: block; height: 100%; border-radius: inherit;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease);
}
.is-visible .cost__bar i, .cost.is-visible .cost__bar i { transform: scaleX(1); }
.cost:nth-child(2) .cost__bar i { background: color-mix(in srgb, var(--accent) 70%, var(--brand-mid)); }
.cost:nth-child(3) .cost__bar i { background: var(--brand-mid); }

.cost h3 { margin-bottom: var(--s3); }
.cost p { color: var(--ink-2); font-size: var(--t-sm); }
.cost .go { margin-top: var(--s4); }

/* ————————————————————————————————————————————— Ablauf (visuell) */

.process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s6) var(--s7);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative;
}
.process::before { display: none; }
.process__step {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 0;
}
.process__icon { display: none; }
.process__card {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}
.process__step:hover .process__card {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}
.process__num {
  display: block;
  margin-bottom: var(--s3);
  font-size: var(--t-2xl);
  font-weight: var(--w-black);
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.process__card h3,
.process__step h3 { margin-bottom: var(--s3); font-size: var(--t-lg); }
.process__card p,
.process__step > p { color: var(--ink-2); font-size: var(--t-sm); flex: 1; }
.process__time {
  display: inline-block;
  margin-top: var(--s4);
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  color: var(--ink-3);
  width: fit-content;
}
.process__time::before { display: none; }

@media (max-width: 1100px) {
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .process { grid-template-columns: minmax(0, 1fr); }
  .process__step { flex-direction: column; align-items: stretch; text-align: left; }
}

.process--flow {
  counter-reset: none;
}
@media (min-width: 1101px) {
  .process--flow {
    gap: 0 var(--s6);
    align-items: start;
  }
  .process--flow .process__step {
    position: relative;
    padding-top: 0;
    padding-inline: 0 var(--s5);
  }
  .process--flow .process__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0.85rem;
    left: 4.25rem;
    right: 0;
    height: 1px;
    background: var(--line);
  }
}

.tease-row {
  display: grid;
  gap: var(--s5);
}
@media (min-width: 800px) {
  .tease-row { grid-template-columns: 1fr 1fr; }
}
.tease {
  display: grid;
  gap: var(--s3);
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--base), transform var(--base);
}
.tease:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.tease__who {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  color: var(--accent);
}
.tease h2 {
  margin: 0;
  max-width: 16ch;
  font-size: var(--t-xl);
}
.tease p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-sm);
  max-width: 38ch;
}
.tease .go { margin-top: var(--s2); }

.proof-video {
  margin-top: var(--s7);
  max-width: 42rem;
}
.proof-video--feature {
  max-width: min(56rem, 100%);
  margin: 0 auto var(--s8);
}
.proof-video--feature .video {
  box-shadow: var(--shade-lg);
}

/* Legacy flow — falls noch irgendwo referenziert */
.flow { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: n; }
.flow__step { counter-increment: n; position: relative; padding-top: var(--s6); }
.flow__step::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-size: var(--t-lg); font-weight: var(--w-black);
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.flow__step::after {
  content: ""; position: absolute; top: 0.65em; left: 2.6rem; right: 0;
  height: 2px; background: var(--line);
}
.flow__step:last-child::after { display: none; }
.flow__step h3 { margin-bottom: var(--s2); }
.flow__step p { color: var(--ink-2); font-size: var(--t-sm); }
.flow__step time { display: inline-block; margin-top: var(--s3); font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--ink-3); }

/* ————————————————————————————————————————————— Zahlen */

.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6) var(--s7);
  text-align: left;
  padding-block: var(--s2);
  border-block: 1px solid var(--line);
}
@media (min-width: 860px) {
  .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.figures dt {
  font-size: clamp(1.75rem, 2.8vw, 2.45rem);
  text-wrap: balance;
  font-weight: var(--w-black); line-height: 1.08;
  letter-spacing: -0.038em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.figures > div:first-child dt { color: var(--accent); }
.figures dd { margin: var(--s3) 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.on-deep .figures dt { color: var(--accent-on-deep); }
.on-deep .figures dd { color: var(--on-deep-2); }

/* ————————————————————————————————————————————— Unterschied */

.feature-split { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 940px) {
  .feature-split { grid-template-columns: 1.15fr 0.85fr; }
  .feature-split--flip > :first-child { order: 2; }
  .feature-split__copy { padding-left: var(--s6); }
}
.feature-split__media { position: relative; }
.feature-split__media img,
.feature-split img {
  width: 100%;
  border-radius: var(--r);
  box-shadow: var(--shade-lg);
}
.feature-split__copy {
  display: grid;
  gap: var(--s5);
  max-width: 38rem;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.feature-split__copy .section-label {
  margin-bottom: var(--s2);
}
.feature-split__copy h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  max-width: 16ch;
}
.feature-split p { color: var(--ink-2); max-width: none; line-height: 1.65; }
.feature-split p + p { margin-top: 0; }
.feature-split .ticks { margin-top: var(--s2); }
.feature-split .callout { margin-top: var(--s2); }
.feature-split .btns { margin-top: var(--s2); }

.ticks { display: grid; gap: var(--s3); margin-top: var(--s5); }
.ticks li { display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--s3); font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; }
.ticks li::before {
  content: "";
  width: 1.4rem; height: 1.4rem; margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6b46' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}

:root[data-theme="dark"] .ticks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236fd3a0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ticks li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236fd3a0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }
}

.callout {
  margin-top: var(--s6);
  padding: var(--s5);
  background: var(--accent-soft);
  border-radius: var(--r);
  border: 1px solid var(--accent-line);
}
.callout strong { display: block; margin-bottom: var(--s2); }
.callout p { font-size: var(--t-sm); }

.case-file {
  position: relative;
  padding: var(--s7) var(--s6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shade);
  overflow: hidden;
}
.case-file__who {
  position: relative;
  margin: 0 0 var(--s3);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--accent);
}
.case-file h2 {
  position: relative;
  margin: 0;
  max-width: 16ch;
}
.case-file dl {
  position: relative;
  display: grid;
  gap: var(--s5);
  margin: var(--s6) 0 0;
}
@media (min-width: 760px) {
  .case-file dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
}
.case-file dt {
  margin: 0 0 var(--s2);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--ink);
}
.case-file dd {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.5;
}
.case-file .go { margin-top: var(--s6); }
.case-file p {
  position: relative;
  margin-top: var(--s4);
  max-width: 58ch;
  color: var(--ink-2);
  font-size: var(--t-md);
  line-height: 1.55;
}
.voices + .case-file { margin-top: var(--s8); }
.case-file + .proof-video { margin-top: var(--s7); }
/* Industrie-Einstieg: Dossier + Lastgang, nicht noch eine Glas-Karte. */
.icp-open {
  background: var(--deep);
  color: var(--on-deep);
  padding: clamp(4.5rem, 10vw, 7rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}
.icp-open__sheet {
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.icp-open h1 {
  max-width: 16ch;
  color: var(--on-deep);
}
.icp-open .lead {
  max-width: 42ch;
  color: var(--on-deep-2);
}
.icp-open__meta {
  margin: var(--s4) 0 var(--s6);
  max-width: 48ch;
  font-size: var(--t-sm);
  color: var(--on-deep-2);
}
.icp-open .btn-row { flex-wrap: wrap; }
.icp-open .btn-outline {
  border-color: color-mix(in srgb, #fff 42%, transparent);
  color: var(--on-deep);
}
.icp-open .btn-outline:hover {
  background: color-mix(in srgb, #fff 10%, transparent);
}
.icp-open__curve {
  width: min(var(--wrap), 100%);
  margin: var(--s8) auto 0;
  padding-inline: var(--gutter);
  color: var(--accent-on-deep);
}
.icp-open__curve .lastgang { display: block; width: 100%; height: auto; }
.icp-open .lastgang-line {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}
.icp-open__curve figcaption {
  margin-top: var(--s3);
  font-size: var(--t-sm);
  color: var(--on-deep-2);
}

/* Stromsteuer: Rechner ist die erste Fläche, kein Glas-Hero. */
.tax-open .stromsteuer-calc {
  max-width: 42rem;
  margin: var(--s2) 0 0;
}
.tax-open .btn-row {
  margin-top: var(--s6);
}

/* Leistungen: die drei Preisblöcke sind die Öffnung, kein Glas-Foto. */
.meter-open .price-meter {
  max-width: none;
  margin: var(--s6) 0 0;
}
.meter-open .price-meter__track {
  height: clamp(3.25rem, 7vw, 4.5rem);
}
.meter-open .price-meter__seg {
  transform: none;
}
.meter-open .price-meter__seg--steuer {
  background: color-mix(in srgb, #fff 22%, var(--brand-deep));
}
.meter-open .tools-strip {
  margin-top: var(--s5);
  color: var(--on-deep-2);
}
.meter-open .tools-strip a { color: var(--accent-on-deep); }
.meter-open .btn-row { margin-top: var(--s6); }

/* Über uns: Gesichter zuerst, kein Beratungsfoto hinter Glas. */
.faces-open .faces {
  margin-top: var(--s2);
  max-width: 48rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.faces-open .faces img {
  border-color: color-mix(in srgb, var(--on-deep) 22%, transparent);
  max-width: 6.75rem;
}
.faces-open .faces span { color: var(--on-deep); }
.faces-open .btn-row { margin-top: var(--s6); }

.case-file--compact {
  padding: var(--s6);
}
.case-file--compact dl { grid-template-columns: 1fr; }

/* ————————————————————————————————————————————— Kundenstimmen */

.voices { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
.voice { display: flex; flex-direction: column; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.stars { display: flex; gap: 0.1rem; margin-bottom: var(--s4); color: #b57a14; }
:root[data-theme="dark"] .stars { color: #f0b95c; }
.stars svg { width: 1.05rem; height: 1.05rem; }
.voice blockquote { flex: 1; font-size: var(--t-md); line-height: 1.55; font-weight: var(--w-mid); }
.voice figcaption { margin-top: var(--s4); font-size: var(--t-sm); }
.voice figcaption strong { display: block; font-weight: var(--w-bold); }
.voice figcaption span { color: var(--ink-3); }
.voice--lead blockquote { font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.35; font-weight: var(--w-semi); max-width: 22ch; }
.voices__more { margin-top: var(--s7); font-size: var(--t-sm); }
.voices--compact { max-width: none; margin-inline: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.voices--compact .voice { padding: 0; }
@media (min-width: 900px) {
  .voices--compact { grid-template-columns: repeat(3, 1fr); }
  .voices:not(.voices--compact) {
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-rows: auto auto;
    gap: var(--s6) var(--s8);
    align-items: start;
  }
  .voice--lead { grid-row: 1 / span 2; }
}

/* Referenzen — Case-Panels */
.ref-cases {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .ref-cases { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1180px) {
  .ref-cases { grid-template-columns: 1fr 1fr 1fr; }
}
.ref-case {
  display: grid;
  gap: var(--s5);
  align-content: start;
}
.ref-case__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--deep);
}
.ref-case__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ref-case__media .video {
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}
.ref-case__who {
  margin: 0 0 var(--s2);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--accent);
}
.ref-case__body h3 { margin: 0 0 var(--s3); }
.ref-case__body p { color: var(--ink-2); margin: 0 0 var(--s4); }

.ref-open {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background: var(--surface);
}
.ref-open__head { max-width: 46ch; margin-bottom: var(--s8); }
.ref-open__head h1 { max-width: 12ch; margin: 0; }
.ref-open__head .lead {
  margin-top: var(--s5);
  color: var(--ink-2);
}

/* ————————————————————————————————————————————— Video */

.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--deep); box-shadow: var(--shade-lg); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
.video iframe[hidden] { display: none !important; }
.video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.video__poster[hidden] { display: none !important; }
.video-consent {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; gap: var(--s4);
  padding: var(--s6); text-align: center;
  background: var(--deep); color: var(--on-deep);
}
.video:has(.video__poster) .video-consent {
  background: color-mix(in srgb, var(--deep) 52%, transparent);
}
.video-consent[hidden] { display: none !important; }
.video-consent p { font-size: var(--t-sm); color: var(--on-deep-2); max-width: 44ch; margin-inline: auto; }
.video-consent a { text-decoration: underline; }

.ref-follow { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.ref-follow .go,
.chapter-photo__slab .go,
.ref-inline-quote + .go {
  display: inline-block;
  margin-top: var(--s4);
}
.ref-media {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
}
.ref-inline-quote {
  margin: var(--s5) 0 var(--s4);
}
.ref-inline-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.ref-inline-quote figcaption {
  margin-top: var(--s3);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.ref-wiese {
  max-width: 46ch;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}

/* ————————————————————————————————————————————— Fragen */

.faq { display: grid; gap: 0; max-width: 62ch; margin-inline: 0; }
.faq--start { max-width: 68ch; }
.faq details {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
}
.faq details[open] { border-color: var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) 0;
  font-size: var(--t-md); font-weight: var(--w-bold);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 1.4rem; height: 1.4rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  color: var(--accent);
  transition: transform var(--fast);
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq-body { padding: 0 0 var(--s5); color: var(--ink-2); font-size: var(--t-md); line-height: 1.55; }
.faq-body a { color: var(--accent); font-weight: var(--w-semi); text-decoration: underline; }

.faq-open .faq-feature {
  margin-top: var(--s6);
  max-width: 46ch;
}
.faq-open .faq-feature h2 {
  margin: 0;
  max-width: 18ch;
  color: var(--on-deep);
  font-size: clamp(1.65rem, 3.4vw, 2.35rem);
}
.faq-open .faq-feature p {
  margin-top: var(--s5);
  color: var(--on-deep-2);
  font-size: var(--t-md);
  line-height: 1.55;
}
.faq-open .btn-row { margin-top: var(--s6); }
.faq-group {
  max-width: 62ch;
  margin-bottom: var(--s9);
}
.faq-group:last-child { margin-bottom: 0; }
.faq-group h2 {
  margin: 0 0 var(--s4);
  font-size: var(--t-xl);
}
.faq-group .faq { max-width: none; }

/* ————————————————————————————————————————————— Abschluss */

.closing {
  text-align: center;
  position: relative;
  overflow: hidden;
}
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--deep) 82%, transparent), var(--deep)),
    url("../img/hero/hero-vor-ort.webp?ver=3.32.5") center / cover no-repeat;
  pointer-events: none;
}
.closing::after {
  content: "";
  position: absolute;
  width: min(46vw, 360px);
  height: min(46vw, 360px);
  right: -8%;
  bottom: -16%;
  background: url("../img/brand/BG-EBS-Loewe.webp") center / contain no-repeat;
  opacity: 0.1;
  pointer-events: none;
}
.closing .wrap { position: relative; z-index: 1; }
.closing h2 { max-width: 20ch; margin-inline: auto; }
.closing p { margin: var(--s4) auto 0; max-width: 50ch; font-size: var(--t-md); color: var(--on-deep-2); }
.closing .btns { margin-top: var(--s6); justify-content: center; }
.closing__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s5); margin-top: var(--s6); font-size: var(--t-sm); color: var(--on-deep-2); }

/* ————————————————————————————————————————————— Fußbereich */

.site-footer { background: var(--surface-2); border-top: 1px solid var(--line); padding-block: var(--s9) var(--s6); font-size: var(--t-sm); }
.footer-grid { display: grid; gap: var(--s7); grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 980px) { .footer-grid { grid-template-columns: 1.5fr repeat(4, 1fr); } }
.footer-grid strong { display: block; margin-bottom: var(--s4); font-weight: var(--w-bold); }
.footer-grid p { color: var(--ink-2); }
.footer-grid p + p { margin-top: var(--s2); }
.footer-grid a:hover { color: var(--accent); }
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
}
.footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  background: var(--surface);
}
.footer-social__link:hover,
.footer-social__link:focus-visible {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.footer-social__link svg {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: space-between;
  align-items: center;
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--ink-3);
}
.footer-bottom button { border: 0; background: none; color: inherit; cursor: pointer; text-decoration: underline; padding: 0; }
.footer-bottom button:hover { color: var(--accent); }

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
}

.employer-seal {
  display: inline-block;
  line-height: 0;
  flex-shrink: 0;
}
.employer-seal img {
  display: block;
  width: 6.25rem;
  height: auto;
}
.employer-seal-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--s5);
}

.footer-google {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.footer-google:hover,
.footer-google:focus-visible {
  border-color: var(--accent);
  color: var(--ink);
}
.footer-google__mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.footer-google__copy {
  display: grid;
  gap: 0.12rem;
}
.footer-google__copy strong {
  margin: 0;
  font-size: 0.82rem;
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
}
.footer-google__copy span {
  font-size: 0.72rem;
  color: var(--ink-3);
  font-weight: 400;
}

.ebs-floating-siegel {
  display: none !important;
}

.band.faces-band {
  padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.faces-band .employer-seal-wrap {
  margin-top: var(--s4);
}
.faces-band .faces-band__more {
  margin-top: var(--s3);
}

/* ————————————————————————————————————————————— Schwebendes */

.mobile-cta-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  display: flex; gap: var(--s3);
  padding: var(--s3) var(--s4);
  padding-bottom: max(var(--s3), env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--base);
}
.mobile-cta-bar.is-visible { transform: none; }
.mobile-cta-bar .btn { flex: 1; padding-block: 0.85rem; }
@media (min-width: 601px) { .mobile-cta-bar { display: none; } }

.btn--light {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn--light:hover { background: var(--surface-2); border-color: var(--ink-3); }

/* Schwebendes Kontakt-Widget (Telefon + Mail) — Styles fehlten zuvor,
   deshalb wirkten die SVG-Icons wie riesige Grafiken unter dem Footer. */
.advisor-widget {
  position: fixed;
  bottom: calc(var(--s5) + env(safe-area-inset-bottom));
  right: var(--s5);
  z-index: 250;
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4);
  padding-right: 3.1rem;
  max-width: min(24rem, calc(100vw - 2rem));
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shade-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem) scale(0.96);
  pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
.advisor-widget.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.advisor-widget[data-dismissed="true"] {
  display: none !important;
}
@media (max-width: 759px) {
  .advisor-widget { display: none; }
}
.advisor-widget__copy { flex: 1; min-width: 0; overflow: hidden; }
.advisor-widget__copy strong {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  line-height: 1.35;
  color: var(--ink);
}
.advisor-widget__copy span {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--ink-3);
}
.advisor-widget__actions {
  display: flex;
  gap: var(--s2);
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.advisor-widget__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--deep);
  color: var(--on-deep);
  cursor: pointer;
  transition: background var(--fast), color var(--fast), transform 0.09s var(--ease-soft);
}
.advisor-widget__btn:hover {
  background: var(--accent);
  color: var(--on-accent);
}
.advisor-widget__btn svg,
.advisor-widget__close svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  pointer-events: none;
}
.advisor-widget__close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.advisor-widget__close:hover,
.advisor-widget__close:focus-visible {
  background: var(--surface-2);
  color: var(--ink);
}
@media (max-width: 759px) {
  .advisor-widget {
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
    right: var(--s4);
    left: var(--s4);
    max-width: none;
  }
}
@media (min-width: 760px) {
  .advisor-widget { bottom: var(--s5); }
}

/* ————————————————————————————————————————————— Unterseiten */

.page-head { padding-block: clamp(2.5rem, 5vw, 4rem); position: relative; overflow: hidden; }
.page-head h1 { font-size: var(--t-2xl); max-width: 24ch; }
.page-head .lead { margin-top: var(--s4); }

.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s8); margin-bottom: var(--s4); font-size: var(--t-xl); }
.prose h3 { margin-top: var(--s6); margin-bottom: var(--s3); }
.prose p, .prose ul, .prose ol, .prose table { margin-bottom: var(--s4); }
.prose ul, .prose ol { padding-left: 1.4rem; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--s2); }
.prose a { color: var(--accent); font-weight: var(--w-semi); text-decoration: underline; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.prose th { background: var(--surface-2); font-weight: var(--w-bold); }


/* ————————————————————————————————————————————— Einblenden */

.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 1; transform: none; transition: none; }
html.js .reveal.is-visible { opacity: 1; transform: none; }

.center { text-align: center; }
.container--narrow { max-width: 800px; }
.prose-narrow { max-width: 62ch; }
.split-grid { display: grid; gap: var(--s7); align-items: start; }
.split-grid--center { align-items: center; }
.split-grid--center img { width: 100%; height: auto; display: block; }
@media (min-width: 940px) {
  .split-grid { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
  .split-grid--wide-left { grid-template-columns: 1.05fr 0.95fr; }
}
.ss-lines--flush { margin-top: 0; }
.note-below { margin-top: var(--s6); max-width: 62ch; font-size: var(--t-md); line-height: 1.55; }
.note-below--center { margin-inline: auto; text-align: center; }
.text-note { margin: var(--s7) auto 0; max-width: 60ch; text-align: center; font-size: var(--t-md); line-height: 1.5; }
.img-rounded { border-radius: var(--r-lg); }
.review-links--spaced { margin-top: var(--s6); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }

/* ————————————————————————————————————————————— Bewegung aus
   Punkt 2 und 7: Wer Bewegung abbestellt hat, bekommt keine. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .kinetic > span > span { transform: none; opacity: 1; font-variation-settings: "wght" 800; }
  .mark::after { transform: scaleX(1); }
  .hero__sub, .hero .btns, .hero__assur { opacity: 1; }
  .hero__scene img, .ss-hero__bg img { animation: none; transform: none; filter: none; }
  .ss-hero__bill, .hero__bill, .invoice-stage .bill, .hero__scene figcaption {
    animation: none; opacity: 1; transform: none;
  }
  .reveal { opacity: 1; transform: none; }
  .cost__bar i { transform: scaleX(1); }
}

/* ============================================================
   UNTERSEITEN — Übersetzung des älteren Klassenbestands

   Startseite und Kopfbereich sind im neuen Vokabular gebaut
   (.wrap, .band, .head, .btn-*). Die Unterseiten tragen noch das
   ältere (.container, .section, .page-hero, .btn--primary). Statt
   neun Textdateien anzufassen — bei Rechtstexten ein unnötiges
   Risiko — bekommt jede alte Klasse hier eine Entsprechung im
   neuen System. Gleiche Größen, gleiche Farben, gleiche Formen.
   ============================================================ */

.container { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: var(--band); position: relative; }
.section--white { background: var(--surface); }
.section--soft,
.section--cream { background: var(--surface-2); }
.section--deep {
  background: var(--deep);
  color: var(--on-deep);
}
.section--deep .section-head p,
.section--deep .section-head h2 { color: var(--on-deep); }
.section--deep .section-head p { color: var(--on-deep-2); }
.section--deep .section-label { color: var(--accent-on-deep); }

/* Abschnitts-Dichte — gegen „plumpe“ Abstände (Apple: visuelle Hierarchie) */
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--cta {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--surface-2);
}
.section--cta .subpage-cta { margin: 0; }
.section--white + .section--cta,
.section--soft + .section--cta,
.section--cream + .section--cta {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
main > .section--cta:last-child {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.section--stack .service-detail-card { margin-bottom: var(--s7); }
.section--stack .service-detail-card:last-child { margin-bottom: 0; }
.section__cta { margin-top: var(--s7); }

.page-hero {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
  background: var(--surface-2);
}
.page-hero .section-label { margin-bottom: var(--s4); }
.page-hero .container > h1 { max-width: 20ch; margin: 0; }
.page-hero .lead { margin-top: var(--s6); max-width: 58ch; }

.section-label,
.section-head__label {
  display: none;
}

.section-head { max-width: 46ch; margin-bottom: var(--s8); }
.section-head h2 { max-width: 22ch; margin: 0; }
.section-head--center { margin-inline: 0; text-align: left; }
.section-head--center h2 { margin-inline: 0; }
.section-head .section-label { margin-bottom: var(--s4); }
.section-head p { margin-top: var(--s4); font-size: var(--t-md); color: var(--ink-2); line-height: 1.55; }
.section-head--center p { margin-inline: 0; max-width: 42ch; }

/* Schaltflächen: das ältere Vokabular zeigt auf dieselben Regeln */
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--outline { border-color: var(--line-strong); color: var(--ink); }
.btn--outline:hover { border-color: var(--ink); background: var(--surface); }
.btn--ghost-light { border-color: var(--deep-line); color: var(--on-deep); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--on-deep); }
.btn--lg { padding: 1.2rem 2.4rem; font-size: var(--t-md); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s6); }

/* Fließtext auf Text- und Rechtsseiten */
.legal-content,
.subpage-text { max-width: 68ch; }
.legal-content h2,
.subpage-text h2 { margin-top: var(--s8); margin-bottom: var(--s4); font-size: var(--t-xl); }
.legal-content h3,
.subpage-text h3 { margin-top: var(--s6); margin-bottom: var(--s3); }
.legal-content p,
.legal-content li,
.subpage-text p,
.subpage-text li { color: var(--ink-2); }
.legal-content p + p,
.subpage-text p + p { margin-top: var(--s4); }
.legal-content ul,
.legal-content ol,
.subpage-text ul,
.subpage-text ol { display: grid; gap: var(--s3); margin: var(--s4) 0 var(--s4) var(--s5); list-style: disc; }
.legal-content a,
.subpage-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal-meta { margin-bottom: var(--s6); font-size: var(--t-sm); color: var(--ink-3); }
.legal-content .table-wrap {
  margin: var(--s5) 0;
  overflow-x: auto;
}
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.legal-content th,
.legal-content td {
  padding: 0.65rem 0.75rem 0.65rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.legal-content th { color: var(--ink); font-weight: var(--w-bold); }
.legal-content td { color: var(--ink-2); }

.card {
  padding: var(--s6);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shade);
}
.grid-3 { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 .card {
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.card h3 { margin: 0 0 var(--s3); font-size: var(--t-lg); line-height: 1.25; }
.card p { margin: 0; font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); }
.emph { font-weight: var(--w-bold); color: var(--ink); }

/* Leistungen — abwechselnd gesetzte Blöcke */
.service-detail-card { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: var(--s9); }
@media (min-width: 940px) {
  .service-detail-card { grid-template-columns: 1fr 1fr; }
  .service-detail-card--flip > :first-child { order: 2; }
}
.service-detail-card > div { min-width: 0; }
.service-detail-card__num {
  display: block; margin-bottom: var(--s3);
  font-size: var(--t-lg); font-weight: var(--w-black);
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.service-detail-card .section-label { margin-bottom: var(--s3); }
.service-detail-card h2 {
  margin: 0;
  max-width: 22ch;
}
.service-detail-card h2 + p,
.service-detail-card .muted {
  margin-top: var(--s5);
  max-width: 58ch;
  color: var(--ink-2);
  line-height: 1.55;
}
.service-detail-card ul {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s5);
  padding: 0;
  list-style: none;
}
.service-detail-card li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.service-detail-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
}
/* Das Bild kommt als background-image aus dem Markup — der Rahmen braucht
   deshalb eine eigene Höhe, sonst bleibt die Spalte leer. */
.service-detail-card__visual {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: var(--r-lg);
  box-shadow: var(--shade);
}
.service-detail-card__visual img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shade); }
.service-detail-card p { max-width: 58ch; color: var(--ink-2); }
.service-detail-card .go { margin-top: var(--s5); }

/* Über uns — Team und Standorte */
.team-page-grid {
  display: grid;
  gap: var(--s6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.region-grid { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.region-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.team-page-card,
.region-card {
  padding: var(--s6);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shade);
}
.team-page-card img { width: 100%; border-radius: var(--r); margin-bottom: var(--s4); aspect-ratio: 4 / 3; object-fit: cover; object-position: center 15%; }
.team-page-card figcaption strong { display: block; font-size: var(--t-md); margin-bottom: var(--s1); }
.team-page-card figcaption span { display: block; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.4; }
.team-page-card--role .team-page-card__avatar {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--s4);
  border-radius: var(--r);
  background: linear-gradient(145deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--w-black);
  color: var(--accent);
  letter-spacing: 0.04em;
}
.team-page-grid--extended { margin-top: var(--s7); padding-top: var(--s7); border-top: 1px solid var(--line); }
.team-page-grid__label {
  grid-column: 1 / -1;
  margin: 0 0 var(--s2);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.section--about-locations .split-grid--center { margin-bottom: var(--s8); }
.section--about-locations .region-grid { margin-bottom: var(--s8); }

/* Stat-Strip — leichte Alternative zu region-grid (Zahlen statt Kartenwand) */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--s4);
  padding: var(--s5) var(--s6);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.stat-strip__item {
  text-align: center;
  padding: var(--s2) var(--s3);
}
.stat-strip__value {
  display: block;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: var(--w-black);
  color: var(--accent);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.stat-strip__label {
  display: block;
  margin-top: var(--s2);
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.45;
}

/* ICP-Pain — Probleme der Entscheider, vor Benefits/Features */
.icp-pains {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-top: var(--s7);
}
.icp-pain {
  display: grid;
  gap: var(--s3);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.icp-pain__num { display: none; }
.icp-pain h3 {
  margin: 0;
  font-size: var(--t-lg);
  line-height: 1.25;
  max-width: 18ch;
}
.icp-pain p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-md);
  line-height: 1.55;
  max-width: 36ch;
}

/* Feature-Liste — zweispaltig, ohne Schatten-Karten */
.feature-list {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.feature-list__item {
  display: grid;
  gap: var(--s3);
  padding: var(--s5) 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.feature-list__num { display: none; }
.feature-list__item h3 {
  font-size: var(--t-md);
  margin: 0 0 var(--s2);
}
.feature-list__item p {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.55;
}

/* Team — Waben: gleiche Kachelgröße, Reihen zentriert, ohne Foto-über-Foto. */
.team-honeycomb {
  --hex: clamp(10.5rem, 16vw, 14.5rem);
  --hex-gap: clamp(0.7rem, 1.4vw, 1.1rem);
  --hex-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 76rem;
  margin-inline: auto;
  overflow: visible;
}
.team-honeycomb--extended {
  margin-top: var(--s9);
  padding-top: var(--s8);
  border-top: 1px solid var(--line);
}
.team-honeycomb--home {
  --hex: clamp(8.25rem, 14vw, 12rem);
}
.team-honeycomb--circle {
  --hex: clamp(7rem, 11.5vw, 10.75rem);
  --hex-gap: clamp(0.45rem, 1vw, 0.85rem);
}
.team-honeycomb--circle.team-honeycomb--home {
  --hex: clamp(6.5rem, 11vw, 9.75rem);
}
.team-honeycomb__label {
  width: 100%;
  margin: 0 0 var(--s6);
  text-align: center;
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.team-honeycomb__row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--hex-gap);
  width: 100%;
  position: relative;
}
.team-honeycomb__row:has(.team-hex--lead) {
  z-index: 2;
}
.team-hex {
  position: relative;
  z-index: 1;
  width: var(--hex);
  flex: 0 0 var(--hex);
  margin: 0;
  text-align: center;
}
.team-hex--lead {
  z-index: 3;
}
.team-hex--lead::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: calc(100% + 10px);
  aspect-ratio: 1 / 1.1547;
  transform: translateX(-50%);
  background: var(--accent);
  clip-path: var(--hex-clip);
  z-index: 0;
  pointer-events: none;
}
.team-hex img,
.team-hex__avatar {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.1547;
  object-fit: cover;
  object-position: center 18%;
  clip-path: var(--hex-clip);
  background: var(--surface-2);
  border: 0;
}
.team-hex__avatar {
  display: grid;
  place-items: center;
  font-size: clamp(1rem, calc(var(--hex) * 0.24), 1.65rem);
  font-weight: var(--w-black);
  color: var(--accent);
  letter-spacing: 0.03em;
}
.team-hex::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 1 / 1.1547;
  z-index: 2;
  pointer-events: none;
  clip-path: var(--hex-clip);
  background: linear-gradient(to top, rgb(18 48 63 / 0.78) 0%, rgb(18 48 63 / 0.2) 42%, transparent 58%);
}
.team-hex figcaption {
  position: absolute;
  left: 50%;
  bottom: 18%;
  z-index: 4;
  width: 82%;
  margin: 0;
  transform: translateX(-50%);
  font-size: var(--t-sm);
  line-height: 1.25;
  color: #fff;
}
.team-hex figcaption strong {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(0.92rem, calc(var(--hex) * 0.095), 1.2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.team-hex figcaption span {
  display: block;
  color: rgb(255 255 255 / 0.82);
  font-size: 0.68rem;
  font-weight: var(--w-semi);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-top: 0.12rem;
}
.team-honeycomb--circle .team-hex figcaption strong {
  font-size: clamp(0.78rem, calc(var(--hex) * 0.092), 1.05rem);
}
.team-honeycomb--circle .team-hex figcaption span {
  font-size: 0.58rem;
}

@media (min-width: 800px) {
  .team-honeycomb__row + .team-honeycomb__row {
    /* Weniger als die Spitze (0,29), damit Fotos und Namen nicht überdecken. */
    margin-top: calc(var(--hex) * -0.18);
  }
  .team-honeycomb--circle .team-honeycomb__row + .team-honeycomb__row {
    margin-top: calc(var(--hex) * -0.2);
  }
}

.region-card__badge {
  display: inline-block; margin-bottom: var(--s4);
  padding: 0.2rem 0.7rem; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--t-xs); font-weight: var(--w-bold);
}
.region-card h3 { margin: 0 0 var(--s3); font-size: var(--t-lg); }
.region-card p { margin: 0; font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); }

/* Glossar */
.glossar { max-width: 68ch; }
/* Der Titel einer Begriffsgruppe braucht Luft nach oben, sonst liest er
   sich als Fortsetzung der Gruppe darüber. */
.glossar h2 { margin-top: var(--s9); margin-bottom: var(--s5); }
.glossar:first-of-type h2 { margin-top: 0; }
.glossar dt { margin-top: var(--s6); font-weight: var(--w-bold); color: var(--ink); }
.glossar dd { margin: var(--s2) 0 0; color: var(--ink-2); }
.glossar-nav { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s7); }
.glossar-nav a {
  padding: 0.65rem 1rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  background: var(--surface-2); font-size: var(--t-sm); font-weight: var(--w-bold);
}
.glossar-nav a:hover { background: var(--accent-soft); color: var(--accent); }

/* Kontakt */
.contact-trust { display: grid; gap: var(--s4); margin-top: var(--s6); }
.review-links { display: grid; gap: var(--s3); }
.review-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  color: var(--ink);
  text-decoration: none;
}
.review-link:hover { color: var(--accent); }
.review-link svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* Stromsteuer-Seite */
.ss-section { padding-block: var(--band); }
.ss-section--soft { background: var(--surface-2); }
.ss-hero {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  padding-inline: var(--gutter);
  background: var(--surface-2);
}
/* Content zentrieren — Hintergrundbild (.ss-hero__bg) ausnehmen, sonst kein Full-Bleed. */
.ss-hero > *:not(.ss-hero__bg) { width: min(var(--wrap), 100%); margin-inline: auto; }
.ss-hero__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 940px) { .ss-hero__inner { grid-template-columns: 1.05fr 0.95fr; } }
@media (min-width: 940px) { .ss-hero--glass .ss-hero__inner { display: block; grid-template-columns: none; } }
.ss-hero__copy { display: grid; gap: var(--s5); }
.ss-hero__copy > p { max-width: 62ch; }
.ss-hero__meta { font-size: var(--t-sm); color: var(--ink-3); }
.ss-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s4); }
.ss-hero__visual img,
.ss-hero__img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shade); }

/* Unterseiten-Einstieg: kantenbündig, Foto oder eigene Grafik als eigene Fläche. */
.ss-hero--glass {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  min-height: 0;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
  background: var(--bg);
  overflow: hidden;
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 2.75rem);
}
.ss-hero--glass .ss-hero__inner { order: 1; }
.ss-hero--glass .ss-hero__bg { order: 2; }
.ss-hero__bg {
  position: relative;
  height: min(46vh, 24rem);
  min-height: 14rem;
  z-index: 0;
  width: auto;
  max-width: none;
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shade);
}
.ss-hero__bg img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 40%;
}
.ss-hero__bg-overlay { display: none; }
.ss-hero--glass > *:not(.ss-hero__bg) {
  width: 100%;
  margin-inline: 0;
}
.ss-hero__glass {
  max-width: 38rem;
  padding: 0;
  border-radius: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ink);
  display: grid;
  gap: var(--s5);
}
.ss-hero__glass h1 {
  color: var(--ink);
  max-width: 14ch;
  line-height: 1.04;
}
.ss-hero__glass h1 .emph { color: var(--accent); }
.ss-hero__glass .lead,
.ss-hero__glass .ss-hero__meta { color: var(--ink-2); }
.ss-hero__glass .lead { max-width: 42ch; }
.ss-hero__glass .btn-on-deep,
.ss-hero__glass .btn--ghost-light,
.ss-hero__glass .btn-outline,
.ss-hero__glass .btn--outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.ss-hero__glass .btn-on-deep:hover,
.ss-hero__glass .btn--ghost-light:hover,
.ss-hero__glass .btn-outline:hover,
.ss-hero__glass .btn--outline:hover {
  background: var(--surface);
  border-color: var(--ink);
}
@media (min-width: 960px) {
  .ss-hero--glass {
    grid-template-columns: 1fr;
    min-height: min(34rem, calc(100svh - 5.25rem));
    padding: 0;
    gap: 0;
  }
  .ss-hero__bg {
    order: 2;
    height: auto;
    min-height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .ss-hero--glass .ss-hero__inner {
    order: 1;
    display: grid;
    align-content: center;
    padding: clamp(2.75rem, 6vw, 5.25rem) var(--gutter);
  }
}

/* Über uns: Teammosaik statt eines wiederholten Beratungsfotos. */
.ss-hero__mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 3px;
  height: min(42vh, 22rem);
  background: var(--brand-deep);
  box-shadow: none;
}
.ss-hero__mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
@media (min-width: 960px) {
  .ss-hero__mosaic {
    height: auto;
    min-height: 100%;
  }
}

.ss-hero--deep { background: var(--deep); }
.ss-hero--deep.ss-hero--glass { background: var(--deep); }

/* Leistungen: Meter statt Foto. Die drei Blöcke sind die Öffnung. */
.ss-hero--blocks {
  display: block;
  min-height: 0;
  padding: clamp(3rem, 7vw, 5.75rem) var(--gutter) clamp(2.25rem, 4vw, 3.5rem);
  background: var(--surface);
}
.ss-hero--blocks .ss-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s7);
  align-items: start;
}
.ss-hero--blocks .ss-hero__glass { max-width: 42rem; }
.ss-hero--blocks .ss-hero__glass h1 { max-width: 16ch; }
.ss-hero--blocks .price-meter { margin: 0; max-width: none; }
.ss-hero--blocks .tools-strip { margin-top: 0; }

.ss-hero--desk .ss-hero__bg {
  min-height: 18rem;
  height: min(52vh, 28rem);
}
@media (min-width: 960px) {
  .ss-hero--desk .ss-hero__bg { height: auto; min-height: 100%; }
}

/* Gewerbe: Rechnungsschein auf dem Foto, analog Lastgang bei Industrie. */
.ss-hero__bill {
  position: absolute;
  left: var(--s4);
  right: var(--s4);
  bottom: var(--s4);
  z-index: 2;
  width: auto;
  max-width: 20rem;
  padding: var(--s4);
  text-decoration: none;
  color: inherit;
}
@media (min-width: 960px) {
  .ss-hero__bill {
    left: var(--s5);
    right: auto;
    bottom: var(--s5);
    width: min(22rem, calc(100% - 2.5rem));
  }
}
.ss-hero__bill:hover { background: #fff; }
.ss-hero__bill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.bill--slip dl { margin: 0; display: grid; }
.bill--slip dl div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
}
.bill--slip dt { color: var(--ink-2); }
.bill--slip dd { margin: 0; font-weight: var(--w-bold); color: var(--ink); }
.bill--slip .bill__foot { margin-top: var(--s4); color: var(--accent); font-weight: var(--w-bold); }

.beschaff-chart {
  margin: var(--s7) auto 0;
  max-width: min(68rem, 100%);
  text-align: center;
}
.beschaff-chart__frame {
  margin-inline: auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shade-lg);
  background: #eef2f4;
}
.beschaff-chart__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
.beschaff-chart figcaption {
  margin-top: var(--s5);
  font-size: var(--t-sm);
  max-width: 52ch;
  margin-inline: auto;
}

/* Beschaffungsmodelle — Kartenraster */
.model-grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-top: var(--s7);
}
@media (min-width: 900px) {
  .model-grid { grid-template-columns: repeat(2, 1fr); }
}
.model-card {
  padding: var(--s6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shade);
  display: grid;
  gap: var(--s4);
  border-top: 4px solid var(--accent);
}
.model-card--stable { border-top-color: #1d4a5f; }
.model-card--balanced { border-top-color: var(--accent); }
.model-card--active { border-top-color: #3d8b5f; }
.model-card--spot { border-top-color: #7c5cbf; }
.model-card__badge {
  display: inline-block;
  width: fit-content;
  padding: 0.2rem 0.65rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.model-card h3 { font-size: var(--t-lg); }
.model-card p { color: var(--ink-2); font-size: var(--t-sm); }
.model-card__meta {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
}
.model-card__meta div { display: grid; gap: 0.15rem; }
.model-card__meta dt {
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.model-card__meta dd { margin: 0; color: var(--ink); font-weight: var(--w-bold); }


.load-desk {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .load-desk { grid-template-columns: 0.85fr 1.15fr; }
}
.load-desk__copy h2 { max-width: 16ch; }
.load-desk__copy p {
  margin-top: var(--s4);
  margin-bottom: var(--s5);
  color: var(--ink-2);
  max-width: 40ch;
  font-size: var(--t-md);
}
.load-chart { margin: 0; }
.load-chart svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s4);
}
.load-chart__grid { stroke: var(--line); stroke-width: 1.5; }
.load-chart__industrie {
  stroke: var(--brand-mid);
  stroke-width: 3.5;
}
.load-chart__gewerbe {
  stroke: var(--accent);
  stroke-width: 3.5;
}
.load-chart__labels text {
  font-size: 12px;
  fill: var(--ink-3);
  font-weight: 600;
}
.load-chart figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
  margin-top: var(--s4);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.load-chart__key { display: inline-flex; align-items: center; gap: 0.45rem; }
.load-chart__key::before {
  content: "";
  width: 1.35rem;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.load-chart__key--industrie::before { background: var(--brand-mid); }

.faces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .faces { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s5); }
}
.faces li { display: grid; gap: var(--s2); justify-items: center; text-align: center; }
.faces img {
  width: 100%;
  max-width: 6.5rem;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 18%;
  border-radius: var(--r);
  box-shadow: none;
  border: 1px solid var(--line);
}
.faces span {
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  color: var(--ink-2);
}

.wrap--video { width: min(52rem, 100% - var(--gutter) * 2); }

.process--compact::before { display: none; }
.process--compact .process__step { flex-direction: column; text-align: left; }
.process--compact .process__time {
  position: static;
  margin-bottom: var(--s3);
  color: var(--accent);
  font-size: var(--t-sm);
  font-weight: var(--w-black);
}

@media (min-width: 940px) {
  .ss-hero .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
}
.ss-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  width: 100%;
  max-width: none;
}
.ss-lines li {
  display: grid;
  grid-template-columns: minmax(6.5rem, 8.5rem) minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-md);
  color: var(--ink-2);
  line-height: 1.55;
}
.ss-lines li:first-child { border-top: 1px solid var(--line); }
.ss-lines span {
  font-weight: var(--w-bold);
  color: var(--accent);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.35;
}
@media (max-width: 639px) {
  .ss-lines li { grid-template-columns: 1fr; gap: var(--s2); }
}
.ss-steps-list { display: grid; gap: var(--s5); counter-reset: schritt; }
.ss-steps-list > li { display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--s4); }
.ss-steps-list > li::before {
  counter-increment: schritt; content: counter(schritt, decimal-leading-zero);
  font-weight: var(--w-black); color: var(--accent); font-variant-numeric: tabular-nums;
}

/* PPA-Schritte auf Industriekunden */
.ppa-steps {
  display: grid;
  gap: var(--s5);
  margin: var(--s6) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: ppa;
}
.ppa-step {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--s2) var(--s4);
  align-items: start;
}
.ppa-step::before {
  counter-increment: ppa;
  content: counter(ppa, decimal-leading-zero);
  font-weight: var(--w-black);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.ppa-step__title {
  margin: 0;
  grid-column: 2;
  grid-row: 1;
  font-weight: var(--w-bold);
  color: var(--ink);
}
.ppa-step__text {
  margin: 0;
  grid-column: 2;
  grid-row: 2;
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.ss-topic-row { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tabelle-scroll { overflow-x: auto; }
.ss-tabelle { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.ss-tabelle th,
.ss-tabelle td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--line); }
.ss-tabelle th { font-weight: var(--w-bold); color: var(--ink); }
.ss-tabelle td { color: var(--ink-2); }
.ss-cta {
  padding-block: var(--band);
  padding-inline: var(--gutter);
  background: var(--deep); color: var(--on-deep); text-align: center;
}
/* Auch dieser Abschnitt trägt keinen eigenen Rahmen im Markup. */
.ss-cta > * { width: min(var(--wrap), 100%); margin-inline: auto; }
.ss-cta .lead { margin-inline: auto; }
.ss-cta__meta { margin-top: var(--s4); font-size: var(--t-sm); color: var(--on-deep-2); }

.subpage-cta {
  padding: clamp(2.5rem, 6vw, 4rem);
  border-radius: var(--r-lg);
  background: var(--deep);
  color: var(--on-deep);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.subpage-cta h2 { color: var(--on-deep); margin-bottom: var(--s4); }
.subpage-cta p { color: var(--on-deep-2); max-width: 58ch; margin-inline: auto; font-size: var(--t-md); line-height: 1.5; }
.subpage-cta .btn-row { justify-content: center; margin-top: var(--s6); }
.subpage-cta .btn-on-deep,
.subpage-cta .btn--ghost-light {
  border-color: var(--deep-line);
  color: var(--on-deep);
}
.subpage-cta .btn-on-deep:hover,
.subpage-cta .btn--ghost-light:hover {
  background: color-mix(in srgb, var(--on-deep) 12%, transparent);
  border-color: var(--on-deep);
}

/* ICP-Schnelleinstieg (Home) — Stripe/HubSpot „Solutions for…“ */
.icp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: center;
  max-width: 52rem;
  margin-inline: auto;
}
.icp-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
  padding: var(--s4) var(--s5);
  min-height: 2.75rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shade);
  font-weight: var(--w-bold);
  font-size: var(--t-md);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.icp-pill:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  transform: translateY(-2px);
}
.icp-pill__hint {
  font-weight: var(--w-normal);
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.35;
}
.icp-pill:hover .icp-pill__hint { color: var(--ink); }

/* Vergleich — EBS hervorgehoben, Alternativen zurückgenommen */
.compare-board {
  display: grid;
  gap: var(--s5);
  margin-top: var(--s7);
}
@media (min-width: 900px) {
  .compare-board {
    grid-template-columns: 1.15fr 0.925fr 0.925fr;
    align-items: stretch;
  }
}
.compare-col {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--s5);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.compare-col--ebs {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--accent) 14%, var(--surface)) 0%,
      var(--surface) 48%
    );
  box-shadow: var(--shade-lg);
}
.compare-col__head {
  display: grid;
  gap: var(--s2);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.compare-col__eyebrow { display: none; }
.compare-col__head h3 {
  margin: 0;
  font-size: var(--t-xl);
  line-height: 1.15;
}
.compare-col__head p {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.45;
}
.compare-col__list {
  display: grid;
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.compare-col__list li {
  display: grid;
  gap: 0.2rem;
}
.compare-col__list strong {
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--ink);
}
.compare-col__list span {
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.45;
}
.compare-col--muted .compare-col__list strong { color: var(--ink-2); }
.compare-col--muted .compare-col__list span { color: var(--ink-3); }
.compare-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.compare-mark::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink-3);
}
.compare-col--ebs .compare-mark::before { background: var(--accent); }

/* Legacy table kept for older partials if any */
.compare-table-wrap {
  overflow-x: auto;
  margin-top: var(--s7);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shade);
}
.compare-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.compare-table th,
.compare-table td {
  padding: var(--s4) var(--s5);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare-table thead th {
  font-size: var(--t-md);
  background: var(--surface-2);
}
.compare-table th:first-child,
.compare-table td:first-child {
  font-weight: var(--w-bold);
  color: var(--ink);
  min-width: 10rem;
}
.compare-table th:nth-child(2) {
  color: var(--accent);
}
.compare-table td { color: var(--ink-2); line-height: 1.5; }
.compare-table tr:last-child td,
.compare-table tr:last-child th { border-bottom: 0; }
.compare-yes { color: var(--accent); font-weight: var(--w-bold); }
.compare-no { color: var(--ink-3); }

.section--cta .related-pages {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  margin-bottom: var(--s7);
}
.related-pages {
  margin-top: var(--s8);
  padding-top: var(--s8);
  border-top: 1px solid var(--line);
}
.related-pages__label {
  margin: 0 0 var(--s5);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.related-pages__grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.related-pages__link {
  display: block;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, background 0.2s;
}
.related-pages__link:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.related-pages__link strong {
  display: block;
  margin-bottom: var(--s2);
  color: var(--ink);
  font-size: var(--t-md);
}
.related-pages__link span {
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.45;
}


@media (max-width: 799px) {
  .team-honeycomb { --hex: clamp(8.5rem, 38vw, 11rem); }
  .team-honeycomb--home { --hex: clamp(7.75rem, 36vw, 10rem); }
  .team-honeycomb__row {
    flex-wrap: wrap;
    row-gap: var(--s6);
  }
  .team-honeycomb__row + .team-honeycomb__row { margin-top: var(--s5); }
  .team-honeycomb--circle { --hex: clamp(5.5rem, 26vw, 7.75rem); }
  .team-honeycomb--circle.team-honeycomb--home { --hex: clamp(5.35rem, 25vw, 7.5rem); }
  .team-honeycomb--circle .team-honeycomb__row {
    flex-wrap: nowrap;
    row-gap: 0;
  }
  .team-honeycomb--circle .team-honeycomb__row + .team-honeycomb__row {
    margin-top: calc(var(--hex) * -0.18);
  }
}
@media (max-width: 640px) {
  .article__body { font-size: var(--t-sm); }
  .ss-hero--glass { min-height: 0; align-items: stretch; }
  .article__body table { display: block; overflow-x: auto; }
  .article__author { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}


/* ============================================================
   Rhythmus — Layout nach Inhaltstyp, nicht nach gleichem Raster.
   Zahlen = Navy-Band. Stimmen = Satzspiegel. Ablauf = Liste.
   FAQ = Kopf links, Fragen rechts. Modelle = Tranchen zuerst.
   ============================================================ */

.facts-band {
  position: relative;
  overflow: hidden;
  padding-block: var(--s7);
}
.facts-band.on-deep::after {
  content: "";
  position: absolute;
  width: min(36vw, 280px);
  height: min(36vw, 280px);
  right: -6%;
  top: 50%;
  translate: 0 -50%;
  background: url("../img/brand/BG-EBS-Loewe.webp") center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
.facts-band .wrap { position: relative; z-index: 1; }
.facts-band .facts {
  border-block: 0;
  padding-block: 0;
}
.facts-band .facts dt { color: var(--on-deep); }
.facts-band .facts dd { color: var(--on-deep-2); }
@media (min-width: 860px) {
  .facts-band .facts {
    grid-template-columns: 1.45fr 1fr 1fr 1fr;
    align-items: end;
  }
  .facts-band .facts > div:first-child dt {
    font-size: clamp(1.85rem, 3.4vw, 3rem);
  }
}

@media (min-width: 960px) {
  .proof-spread {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--s8);
    align-items: start;
  }
  .proof-spread .voices { margin: 0; }
  .proof-spread .case-file { margin-top: 0; }
  .proof-spread__more { grid-column: 1 / -1; }
}
.voices.voices--spread {
  grid-template-columns: 1fr;
}
.voices--spread .voice--lead { grid-row: auto; }
.voices--spread .voice--lead blockquote {
  font-size: clamp(1.4rem, 2.4vw, 2.05rem);
  max-width: 16ch;
}

.proof-stage { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.proof-stage .video {
  max-width: min(64rem, 100%);
  margin-inline: auto;
}

.process.process--ledger {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 58rem;
}
.process--ledger .process__step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  grid-template-areas:
    "num title"
    "num body"
    "num time";
  column-gap: var(--s6);
  row-gap: var(--s2);
  align-items: baseline;
  padding-block: var(--s6);
  padding-inline: 0;
  border-top: 1px solid var(--line);
}
.process--ledger .process__num {
  grid-area: num;
  margin-bottom: 0;
  font-size: var(--t-xl);
}
.process--ledger .process__step h3 {
  grid-area: title;
  margin: 0;
}
.process--ledger .process__step > p {
  grid-area: body;
  max-width: none;
}
.process--ledger .process__time {
  grid-area: time;
  margin-top: 0;
}
@media (min-width: 800px) {
  .process--ledger .process__step {
    grid-template-columns: 4.5rem minmax(11rem, 0.36fr) minmax(0, 1fr) 10rem;
    grid-template-areas: "num title body time";
  }
}

@media (min-width: 900px) {
  .faq-split {
    display: grid;
    grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
    gap: var(--s8);
    align-items: start;
  }
  .faq-split .head,
  .faq-split .section-head {
    margin-bottom: 0;
    position: sticky;
    top: 6.5rem;
  }
  .faq-split .faq { max-width: none; }
}
.service-detail-card + .faq-split { margin-top: var(--s9); }

.icp-pains--stack {
  grid-template-columns: 1fr;
  max-width: 54rem;
  margin-inline: 0;
}
.icp-pains--stack .icp-pain__num {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.icp-pains--stack .icp-pain {
  grid-template-columns: 3.25rem 1fr;
  grid-template-areas:
    "num title"
    "num body";
  column-gap: var(--s5);
  row-gap: var(--s2);
  padding-block: var(--s6);
  border-top: 1px solid var(--line);
}
.icp-pains--stack .icp-pain__num { grid-area: num; }
.icp-pains--stack .icp-pain h3 {
  grid-area: title;
  max-width: none;
  margin: 0;
}
.icp-pains--stack .icp-pain p {
  grid-area: body;
  max-width: none;
}
@media (min-width: 860px) {
  .icp-pains--stack .icp-pain {
    grid-template-columns: 3.25rem minmax(14rem, 0.42fr) 1fr;
    grid-template-areas: "num title body";
    align-items: baseline;
    column-gap: var(--s6);
  }
}

@media (min-width: 900px) {
  .model-grid--lead {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .model-grid--lead .model-card--lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--s5) var(--s8);
    align-items: start;
  }
  .model-grid--lead .model-card--lead h3 {
    font-size: clamp(1.55rem, 2.4vw, 2.05rem);
    max-width: 14ch;
  }
  .model-grid--lead .model-card--lead p {
    font-size: var(--t-md);
    max-width: 48ch;
  }
  .model-grid--lead .model-card--lead .model-card__meta {
    align-self: end;
  }
}

.feature-list--strip .feature-list__num {
  display: block;
  margin-bottom: var(--s3);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.section--deep .feature-list--strip {
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .section--deep .feature-list--strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s6);
  }
  .section--deep .feature-list--strip .feature-list__item {
    padding: var(--s5) 0 0;
    border-top: 1px solid var(--deep-line);
  }
}
.section--deep .feature-list--strip h3 { color: var(--on-deep); }
.section--deep .feature-list--strip p { color: var(--on-deep-2); }

.voice--pull {
  max-width: 38rem;
  margin-top: var(--s5);
}
.voice--pull blockquote {
  font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  line-height: 1.2;
  font-weight: var(--w-semi);
  max-width: 16ch;
}
#stimmen > .container > h2 {
  max-width: 16ch;
  margin: 0;
}
#stimmen .section-head {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .process-spread {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--s8);
    align-items: start;
  }
  .process-spread .process { max-width: none; }
}
.process-spread__media { margin: 0; }
.process-spread__media img {
  width: 100%;
  border-radius: var(--r);
  object-fit: cover;
  aspect-ratio: 16 / 11;
}
@media (min-width: 900px) {
  .process-spread__media img { aspect-ratio: 4 / 5; }
}

@media (min-width: 900px) {
  .pain-spread {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--s8);
    align-items: start;
  }
  .pain-spread .section-head { margin-bottom: var(--s6); }
}
.pain-spread__media { margin: 0; }
.pain-spread__media img {
  width: 100%;
  border-radius: var(--r);
  object-fit: cover;
  aspect-ratio: 16 / 11;
}
@media (min-width: 900px) {
  .pain-spread__media img { aspect-ratio: 4 / 5; }
}