/* ==========================================================================
   FolienMaxx – Landingpage Sonnenschutzfolie B2B
   1 Reset · 2 Basis · 3 Layout · 4 Buttons · 5 Header · 6 Hero
   7 Trust/KPI · 8 Vorteile · 9 Technik · 10 Sommer/Winter · 11 Folienvergleich
   12 Anwendung · 13 Ablauf · 14 Referenzen · 15 Garantie · 16 FAQ
   17 Kontakt · 18 Footer · 19 Consent · 20 Motion · 21 Print
   ========================================================================== */

/* 1 — Reset ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

/* Das hidden-Attribut muss jede Layoutregel schlagen. Ohne diese Zeile setzt
   schon eine Klasse mit `display: grid` oder `flex` die Browser-Grundregel
   `[hidden] { display: none }` außer Kraft – ein per hidden abgeschaltetes
   Element bleibt dann als leerer Kasten stehen. Genau das passierte mit dem
   Zitatblock unter den Objektwelten, nachdem das Zitat entfernt wurde. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
/* Ankersprünge dürfen nicht unter der Kopfzeile landen. `:target` allein reicht
   nicht: Es greift nur für das Element, auf das die Adresszeile gerade zeigt,
   und nicht bei Sprüngen über die Verlaufsnavigation. */
[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
:target { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* 2 — Basis ================================================================ */
body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  overflow-x: hidden;
}

.pb-1{
	padding-bottom:var(--sp-1);
}
.pb-2{
	padding-bottom:var(--sp-2);
}


h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 700; line-height: var(--lh-snug); }

.h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-hero); }
.h2 { font-size: var(--fs-h2);   line-height: 1.05;          letter-spacing: var(--ls-h2); }
.h3 { font-size: var(--fs-h3);   letter-spacing: -0.015em; }

.lead   { font-size: var(--fs-lead); color: var(--c-text-mute); line-height: 1.6; }
.mute   { color: var(--c-text-mute); }
.dim    { color: var(--c-text-dim); }
.small  { font-size: var(--fs-small); }
.micro  { font-size: var(--fs-micro); }
.nowrap { white-space: nowrap; }
.tnum   { font-variant-numeric: tabular-nums; }
.accent { color: var(--c-accent-text); }
.in-middle{  display: flex;
	  gap: 5px;
	  flex-direction: row;
	  justify-content: center;
	  align-items: center;
	  align-content: stretch;
  } 

.overline {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-accent-text);
}
.overline::before {
  content: ""; width: 28px; height: 1px;
  background: var(--c-accent); opacity: .7;
}

.measure { max-width: 62ch; }

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; padding: var(--sp-3) var(--sp-5);
  background: var(--c-accent-fill); color: var(--c-accent-ink);
  font-weight: 600; border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: transform var(--t-base) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-accent-fill);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 3 — Layout =============================================================== */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--slim { max-width: var(--wrap-slim); }

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--c-bg-alt); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section__head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section__head > * + * { margin-top: var(--sp-4); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .overline { justify-content: center; }

.grid { display: grid; gap: var(--sp-5); }
.hairline { height: 1px; background: var(--c-line); border: 0; }

/* 4 — Buttons ============================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 54px; padding-inline: var(--sp-6);
  border-radius: var(--r-sm);
  font-weight: 600; font-size: 1rem; letter-spacing: -0.01em;
  text-align: center;
  transition: transform var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
/* Kein Anheben beim Überfahren. Der Zustandswechsel liegt vollständig in der
   Folie und der Farbumkehr – eine zusätzliche Bewegung liest sich als Springen,
   besonders wenn mehrere Buttons nebeneinander stehen. */
.btn:active { transform: scale(.985); }

.btn--primary { background: var(--c-accent-fill); color: var(--c-accent-ink); }
.btn--primary:hover { background: var(--c-accent-hover); }

.btn--ghost { border: 1px solid var(--c-line); color: var(--c-text); }
.btn--ghost:hover { border-color: var(--c-accent-line); background: var(--c-accent-soft); }

.btn--sm { min-height: 44px; padding-inline: var(--sp-4); font-size: var(--fs-small); }
.btn--block { width: 100%; }

.btn__icon { flex: none; width: 18px; height: 18px; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.textlink {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--c-accent-text); font-weight: 600;
  border-bottom: 1px solid var(--c-accent-line);
  padding-bottom: 2px;
  transition: border-color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
.textlink:hover { border-color: var(--c-accent); gap: var(--sp-3); }

/* 5 — Header =============================================================== */
.progress {
  position: fixed; inset: 0 auto auto 0; z-index: 120;
  height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--c-accent-fill), var(--c-accent));
}

.header {
  position: fixed; inset: 0 0 auto 0; z-index: 110;
  height: var(--header-h);
  display: flex; align-items: center;
  /* Glasoptik durchgehend, nicht erst nach dem ersten Scrollen. Die Sättigung
     ist der Teil, der das Milchglas lebendig macht: Ohne sie wirkt eine reine
     Weichzeichnung grau und tot. */
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(16, 23, 25, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.header.is-stuck {
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.80));
  border-bottom-color: rgba(16, 23, 25, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 12px -4px rgba(16, 23, 25, .14);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); width: 100%; }

.brand { display: flex; align-items: center; flex: none; }
/* 1.2 Das Logo trägt die Subline „Individuelle Sonnenschutzfolien nach Maß"
   im selben SVG. Sie ist dort rund ein Achtel der Wortmarkenhöhe – bei 172px
   Logobreite also etwa 5px hoch und damit unlesbar. Deshalb deutlich grösser
   und die Kopfzeile entsprechend höher. */
.brand img { width: clamp(190px, 19vw, 244px); height: auto; }

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
}
/* 1.3 Grössere Schrift und Klickfläche, deutlich sichtbare Zustände. */
.nav a {
  font-size: 1rem; font-weight: 500;
  color: var(--c-text-mute);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  position: relative;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  line-height: 1.2;
}
.nav a:hover, .nav a.is-active { color: var(--c-text); }
.nav a.is-active { font-weight: 600; }

.header__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

.burger {
  display: grid; place-items: center;
  width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: var(--r-sm);
}
@media (min-width: 1024px) { .burger { display: none; } }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--c-text); transition: transform var(--t-base) var(--ease), opacity var(--t-fast); }
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 105;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(20px);
  display: grid; align-content: center; justify-items: start;
  padding: var(--sp-9) var(--gutter);
  gap: var(--sp-2);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer a {
  font-family: var(--ff-display); font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 700; letter-spacing: -0.03em; padding-block: var(--sp-2);
}
.drawer .btn { margin-top: var(--sp-5); }

/* 6 — Hero ================================================================= */
/* Der Hero ist nur noch Positionierungsrahmen. Alles Sichtbare liegt in
   .hero__stage, die per sticky stehen bleibt, während .hero__track darunter
   weiterscrollt – daraus entsteht der Scrub-Weg. Ohne aktiven Scrub ist der
   Track genauso hoch wie die Bühne, sticky bleibt dann wirkungslos und die
   Sektion verhält sich exakt wie vorher. */
.hero { position: relative; }

.hero__track { position: relative; }

.hero__stage {
  position: sticky; top: 0;
  min-height: min(100svh, 900px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--header-h) + var(--sp-8));
  padding-bottom: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--e-10); }
.hero__media-stage { position: absolute; inset: 0; transform: scale(1.06); will-change: transform; }
.hero__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__frame--end { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero__frame--end {
    opacity: 0;
    animation: hero-film-reveal 3.2s cubic-bezier(.16, 1, .3, 1) 1.35s forwards;
    will-change: opacity;
  }
}
@keyframes hero-film-reveal {
  to { opacity: 1; }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.30) 45%, rgba(247,250,250,.92) 88%, var(--c-bg) 100%);
}
.hero__inner { display: grid; gap: clamp(2rem, 4vw, 3.5rem); width: 100%; }
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); align-items: end; }
}
.hero__copy > * + * { margin-top: var(--sp-5); }
/* 2.2 Die Zeilen laufen beim Auftritt aus einem overflow:hidden heraus. Ohne
   Innenabstand schneidet dieser Rahmen Unterlängen und Umlautpunkte ab. */
.hero__title { max-width: 15ch; text-wrap: balance; hyphens: manual; font-size: var(--fs-hero) !important; }
.hero__title .line {
  display: block; overflow: hidden;
  padding-bottom: .08em; margin-bottom: -.08em; line-height:120%;
}
.hero__title .line > span { display: block; }
@media (max-width: 560px) { .hero__title { max-width: 100%; } }
.hero__sub { max-width: 52ch; }

.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-small); color: var(--c-text-mute);
}
.hero__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--c-accent-fill); flex: none; }

/* Preis-Karte */
.pricecard {
  background: linear-gradient(160deg, rgba(26, 34, 37, .94), rgba(12, 16, 18, .94));
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
}
.pricecard__label {
  font-family: var(--ff-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-accent);
}
.pricecard__value {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-3);
  font-family: var(--ff-display); letter-spacing: -0.04em; line-height: 1;
}
.pricecard__prefix { font-size: 1.1rem; font-weight: 500; color: var(--c-text-mute); letter-spacing: 0; }
.pricecard__num { font-size: clamp(3rem, 6vw, 4.25rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.pricecard__unit { font-size: 1.35rem; font-weight: 600; color: var(--c-accent-text); }
.pricecard__incl { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--c-text); font-weight: 600; }
.pricecard__note { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); font-size: var(--fs-micro); line-height: 1.55; color: var(--c-text-dim); }


  .pricecard__num .digit {
  display: inline-block;
  height: 1lh;
  overflow: hidden;
  vertical-align: top;
}

.pricecard__num .digit > span {
  display: block;
  width: 1ch;
  translate: 0 calc(var(--d) * -1lh);
  transition: translate .8s linear(0, 1.2 50%, .95 75%, 1);
}

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

@media (prefers-reduced-motion: reduce) {
  .pricecard__num .digit > span {
    transition: none;
  }
}

.scrollcue {
  position: absolute; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
  display: grid; justify-items: center; gap: var(--sp-2);
  font-family: var(--ff-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-text-dim);
}
.scrollcue__line { width: 1px; height: 42px; background: linear-gradient(180deg, var(--c-accent-fill), transparent); }
@media (max-width: 1023px) { .scrollcue { display: none; } }

/* 7 — Trustbar & KPI ======================================================= */
.trustbar { border-block: 1px solid var(--c-line); background: var(--c-bg-alt); }
.trustbar__list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-4) 0;
  padding-block: var(--sp-5);
}
.trustbar__item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-inline: clamp(1rem, 2.5vw, 2rem);
  font-size: var(--fs-small); color: var(--c-text-mute);
}
.trustbar__item + .trustbar__item { border-left: 1px solid var(--c-line); }
.trustbar__item svg { width: 16px; height: 16px; color: var(--c-accent-text); flex: none; }
@media (max-width: 800px) {
  .trustbar__item { flex: 1 1 45%; justify-content: center; }
  .trustbar__item + .trustbar__item { border-left: 0; }
}

.kpis { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.kpi { text-align: center; padding-block: var(--sp-4); }
.kpi__pre {
	font-size: .36em;
	font-weight: 600;
	letter-spacing: 0;
	vertical-align: .55em;
	margin-right: .14em;
	color: var(--c-text-mute);
	-webkit-text-fill-color: var(--c-text-mute);
}
.kpi__value {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.25rem); line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--c-text) 35%, #3B4D54);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kpi__unit { color: var(--c-accent-text); -webkit-text-fill-color: var(--c-accent-text); }
.kpi__label { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--c-text-mute); }

/* 8 — Vorteile ============================================================= */
.cards { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 900px) { .cards--2x2 { grid-template-columns: repeat(2, 1fr); } }

.card {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 60% at 0% 0%, var(--c-accent-soft), transparent 65%);
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.card:hover { border-color: var(--c-accent-line); }
.card:hover::after { opacity: 1; }
.card > * { position: relative; z-index: 1; }
/* 3.1 Icon und Überschrift in einer gemeinsamen Kopfzeile – vorher lagen sie
   untereinander und die Lücke dazwischen sah aus, als fehle ein Element. */
.card__kopf {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  padding-right: 3rem;
  min-height: 48px;
}
.card__icon {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--c-accent-line); border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  color: var(--c-accent-text);
}
.card__icon svg { width: 24px; height: 24px; }
.card__title { margin-bottom: 0; }
.card__text { color: var(--c-text-mute); }
.card__num {
  position: absolute; top: var(--sp-5); right: var(--sp-5);
  font-family: var(--ff-mono); font-size: var(--fs-micro);
  color: var(--c-text-dim); letter-spacing: var(--ls-label);
}

/* 9 — Technik-Scrollytelling =============================================== */
.tech { background: var(--c-bg-alt); border-block: 1px solid var(--c-line); }
.tech__track { position: relative; }
.tech__sticky {
  position: sticky; top: 0; min-height: 100svh;
  display: grid; align-items: center;
  padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-6);
  overflow: hidden;
}
.tech__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 1024px) { .tech__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }

/* Alle Schritte liegen deckungsgleich übereinander – auch der erste. Vorher
   stand der erste im Fluss und die übrigen absolut bei inset:0, wodurch sie
   die Überzeile überlagert haben. Die Mindesthöhe fängt den längsten Text. */
.tech__steps { position: relative; min-height: clamp(17rem, 25vw, 22rem); }
/* 4.2 Genau ein Zustand ist sichtbar. visibility und pointer-events sorgen
   dafür, dass ein verlassener Zustand nicht als halbtransparenter Vorgänger
   stehen bleibt – das war beim schnellen Zurückscrollen sichtbar. Die
   Übergangszeit ist kurz, damit sich bei Richtungswechsel nichts überlagert. */
.tech__step {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(14px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out),
              visibility 0s linear 220ms;
}
.tech__step.is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out),
              visibility 0s linear 0s;
}
.tech__step h3 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); letter-spacing: -0.03em; margin-bottom: var(--sp-4); }
.tech__step p { color: var(--c-text-mute); max-width: 42ch; }

.tech__counter {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(3.5rem, 9vw, 7rem); line-height: 1;
  letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
  color: var(--c-accent-text); margin-bottom: var(--sp-4);
}
.tech__counter sup { font-size: .38em; vertical-align: super; margin-left: .1em; }

.tech__stage { position: relative; width: 100%; }
.tech__stage svg { width: 100%; height: auto; }

.tech__dots { display: flex; gap: var(--sp-2); margin-top: var(--sp-6); }
.tech__dots span {
  width: 26px; height: 2px; background: var(--c-line); border-radius: var(--r-pill);
  transition: background-color var(--t-base) var(--ease);
}
.tech__dots span.is-on { background: var(--c-accent-fill); }

/* Fallback ohne Sticky-Scrollytelling (Mobil / reduced motion) */
/* 4.3 Ohne Scrolleffekt werden die vier Zustände zu eigenständigen Blöcken:
   je Aussage eine eigene Karte mit eigener Grafik. Vorher standen alle Texte
   übereinander gestapelt neben derselben Grafik – das sah nach einem Fehler
   aus und ordnete keinen Wert seiner Erklärung zu. */
.tech--static .tech__sticky { position: static; min-height: 0; padding-block: 0; }
.tech--static .tech__grid { display: block; }
.tech--static .tech__steps {
  min-height: 0;
  display: grid; gap: var(--sp-5);
  margin-top: var(--sp-6);
}
@media (min-width: 620px) { .tech--static .tech__steps { grid-template-columns: 1fr 1fr; } }
.tech--static .tech__step {
  position: static !important;
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  transform: none !important;
  margin-bottom: 0;
  background: #FFFFFF;
  border: var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}
.tech--static .tech__counter { font-size: clamp(2.2rem, 8vw, 3rem); margin-bottom: var(--sp-2); }
.tech--static .tech__step h3 { font-size: clamp(1.15rem, 4vw, 1.4rem); margin-bottom: var(--sp-3); }
.tech--static .tech__step p { font-size: var(--fs-small); max-width: none; }
.tech--static .tech__dots { display: none; }
/* Die Grafik steht einmal oben, nicht viermal daneben. */
.tech--static .tech__stage { max-width: 34rem; margin-inline: auto; }

/* 10 — Sommer/Winter ======================================================= */
.compare { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 1024px) { .compare { grid-template-columns: 1.1fr .9fr; } }

.ba {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  border: var(--border); aspect-ratio: 4 / 3; background: var(--c-surface);
  touch-action: pan-y;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 2px; background: var(--c-accent-fill); transform: translateX(-1px);
  pointer-events: none;
}
.ba__knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--c-accent-fill); color: var(--c-accent-ink);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  box-shadow: var(--shadow-md);
}
.ba__tag {
  position: absolute; bottom: var(--sp-4);
  font-family: var(--ff-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  background: rgba(255, 255, 255, .90); backdrop-filter: blur(8px);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-xs);
  border: 1px solid var(--c-line); box-shadow: var(--shadow-sm);
}
.ba__tag--l { left: var(--sp-4); }
.ba__tag--r { right: var(--sp-4); color: var(--c-accent-text); border-color: var(--c-accent-line); }
.ba__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
}

.sunchart { width: 100%; height: auto; margin-top: var(--sp-6); }
.compare__copy > * + * { margin-top: var(--sp-4); }

/* 11 — Folienvergleich ===================================================== */
.films { border: var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--c-surface); }
.films table { font-size: var(--fs-small); }
.films thead th {
  text-align: left; padding: var(--sp-4) var(--sp-5);
  font-family: var(--ff-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-text-dim); font-weight: 500;
  background: var(--c-bg-alt); border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}
.films tbody tr { border-bottom: 1px solid var(--c-line); transition: background-color var(--t-fast) var(--ease); }
.films tbody tr:last-child { border-bottom: 0; }
.films tbody tr:hover, .films tbody tr.is-active { background: var(--c-accent-soft); }
.films td { padding: var(--sp-4) var(--sp-5); vertical-align: middle; }
.films__name { font-weight: 600; font-size: 1rem; color: var(--c-text); white-space: nowrap; }
.films__badge {
  display: inline-block; margin-left: var(--sp-3);
  padding: 2px var(--sp-2); border-radius: var(--r-pill);
  background: var(--c-accent-fill); color: var(--c-accent-ink);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  vertical-align: middle;
}
.films__bar { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--c-line); overflow: hidden; min-width: 88px; }
.films__bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; transition: width 900ms var(--ease-out); }
.films__bar--light i { background: linear-gradient(90deg, var(--c-cool), #A9DCF5); }
.films__bar--heat  i { background: linear-gradient(90deg, var(--brand-teal-deep), var(--c-accent-hi)); }
.films__val { display: block; margin-bottom: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }

.films__cards { display: none; }
@media (max-width: 860px) {
  .films { border: 0; background: none; overflow: visible; }
  .films__table-wrap { display: none; }
  .films__cards {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 78%);
    gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-4); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .films__cards::-webkit-scrollbar { display: none; }
  .filmcard { scroll-snap-align: start; background: var(--c-surface); border: var(--border); border-radius: var(--r-md); padding: var(--sp-5); }
  .filmcard h3 { font-size: 1.1rem; margin-bottom: var(--sp-4); }
  .filmcard dl { display: grid; gap: var(--sp-3); }
  .filmcard .row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); font-size: var(--fs-small); }
  .filmcard dt { color: var(--c-text-mute); }
  .filmcard dd { font-weight: 600; font-variant-numeric: tabular-nums; }
}

.footnotes { margin-top: var(--sp-5); display: grid; gap: var(--sp-2); }
.footnotes li { font-size: var(--fs-micro); color: var(--c-text-dim); line-height: 1.6; padding-left: 1.25em; text-indent: -1.25em; }

.glossary { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
@media (min-width: 720px) { .glossary { grid-template-columns: 1fr 1fr; } }
.glossary div { padding: var(--sp-4) var(--sp-5); border-left: 2px solid var(--c-accent-line); background: var(--c-surface); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.glossary dt { font-weight: 600; margin-bottom: var(--sp-2); }
.glossary dd { font-size: var(--fs-small); color: var(--c-text-mute); }

/* 12 — Anwendungsfälle ===================================================== */
.tabs__list {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  border-bottom: 1px solid var(--c-line); margin-bottom: clamp(2rem, 4vw, 3rem);
}
.tabs__tab {
  padding: var(--sp-4) var(--sp-5); margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--c-text-mute); font-weight: 600; font-size: var(--fs-small);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.tabs__tab:hover { color: var(--c-text); }
.tabs__tab[aria-selected="true"] { color: var(--c-text); border-bottom-color: var(--c-accent-fill); }

.tabs__panel[hidden] { display: none; }
.tabs__panel { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .tabs__panel { grid-template-columns: 1fr 1fr; } }
.tabs__panel img { border-radius: var(--r-md); border: var(--border); width: 100%; }
.tabs__body > * + * { margin-top: var(--sp-5); }

.ticks { display: grid; gap: var(--sp-4); }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-3); align-items: start; color: var(--c-text-mute); }
.ticks svg { width: 20px; height: 20px; color: var(--c-accent-text); margin-top: 3px; }
.ticks b { color: var(--c-text); font-weight: 600; }

/* 13 — Ablauf ============================================================== */
.flow__track { position: relative; }
.flow__sticky {
  position: sticky; top: 0; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;
  overflow: hidden;
  padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-7);
}
.flow__rail { display: flex; gap: var(--sp-5); will-change: transform; padding-inline: var(--gutter); }
.flow__step {
  flex: 0 0 clamp(260px, 30vw, 400px);
  background: var(--c-surface); border: var(--border); border-radius: var(--r-md);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  opacity: .32; transition: opacity var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.flow__step.is-on { opacity: 1; border-color: var(--c-accent-line); }
.flow__idx {
  font-family: var(--ff-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-label); color: var(--c-accent-text); margin-bottom: var(--sp-5);
  display: block;
}
.flow__step h3 { margin-bottom: var(--sp-3); }
.flow__step p { color: var(--c-text-mute); font-size: var(--fs-small); }
.flow__bar { height: 2px; background: var(--c-line); margin-top: clamp(2rem, 4vw, 3rem); margin-inline: var(--gutter); border-radius: var(--r-pill); overflow: hidden; }
.flow__bar i { display: block; height: 100%; width: 0; background: var(--c-accent-fill); border-radius: inherit; }

.flow--static .flow__sticky { position: static; min-height: 0; }
.flow--static .flow__rail { flex-direction: column; transform: none !important; padding-inline: 0; }
.flow--static .flow__step { flex: 1 1 auto; opacity: 1; }
.flow--static .flow__bar { display: none; }

/* 14 — Referenzen ========================================================== */
.refs { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ref {
  border: var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--c-surface);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.ref:hover { border-color: var(--c-accent-line); }
.ref img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ref__body { padding: var(--sp-5); }
.ref__type { font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-accent-text); }
.ref__title { margin: var(--sp-3) 0; font-size: 1.15rem; }
.ref__facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-micro); color: var(--c-text-dim); padding-top: var(--sp-4); margin-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.ref__facts b { color: var(--c-text-mute); font-weight: 600; }
.ref__text { color: var(--c-text-mute); font-size: var(--fs-small); }

.quote {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(2rem, 4vw, 3.5rem);
  background: linear-gradient(150deg, var(--c-surface), var(--c-bg-alt));
  border: 1px solid var(--c-accent-line); border-radius: var(--r-lg);
  display: grid; gap: var(--sp-5); justify-items: start;
}
.quote blockquote { font-family: var(--ff-display); font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.35; letter-spacing: -0.02em; max-width: 30ch; }
.quote figcaption { font-size: var(--fs-small); color: var(--c-text-mute); }
.quote figcaption b { color: var(--c-text); display: block; font-weight: 600; }
.quote__mark { font-family: var(--ff-display); font-size: 4rem; line-height: .6; color: var(--c-accent-text); }

/* 15 — Garantie ============================================================ */
.pledges { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.pledge { display: grid; gap: var(--sp-3); padding: var(--sp-5) 0; border-top: 2px solid var(--c-accent-fill); }
.pledge dt { font-family: var(--ff-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.03em; }
.pledge dd { font-size: var(--fs-small); color: var(--c-text-mute); }

/* 16 — FAQ ================================================================= */
.faq { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding-block: var(--sp-5);
  font-family: var(--ff-display); font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 600; letter-spacing: -0.015em;
  transition: color var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--c-accent-text); }
.faq__sign { flex: none; width: 24px; height: 24px; position: relative; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--c-accent-text);
  transform: translate(-50%, -50%); transition: transform var(--t-base) var(--ease);
}
.faq__sign::before { width: 14px; height: 1.5px; }
.faq__sign::after  { width: 1.5px; height: 14px; }
.faq details[open] .faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__answer { padding-bottom: var(--sp-6); color: var(--c-text-mute); max-width: 68ch; }
.faq__answer > * + * { margin-top: var(--sp-3); }

/* 17 — Kontakt ============================================================= */
.contact { position: relative; overflow: hidden; }
.contact::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 10% 0%, var(--c-accent-soft), transparent 60%);
}
.contact__grid { position: relative; display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 1000px) { .contact__grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.contact__copy > * + * { margin-top: var(--sp-5); }

.phone {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  font-family: var(--ff-display); font-size: clamp(1.6rem, 2.5vw, 2.6rem);
  font-weight: 700; letter-spacing: -0.03em; color: var(--c-text);
  transition: color var(--t-fast) var(--ease);
}
.phone:hover { color: var(--c-accent-text); }
/* Höhe explizit setzen: Ein inline-SVG ohne viewBox und ohne Grössenattribute
   fällt bei height:auto auf die Ersatzgrösse 300x150 zurück – das Icon wurde
   dadurch zu einem 28x150 Streifen gedehnt und blähte die Zeile auf 150px auf. */
.phone svg {
  width: clamp(28px, 4vw, 40px);
  height: clamp(28px, 4vw, 40px);
  color: var(--c-accent-text);
  flex: none;
}

.person { display: flex; align-items: center; gap: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
.person img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 1px solid var(--c-accent-line); flex: none; }
.person b { display: block; font-weight: 600; }
.person span { font-size: var(--fs-small); color: var(--c-text-mute); }

.form {
  background: var(--c-surface); border: var(--border); border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  display: grid; gap: var(--sp-5);
}
.form input[disabled]{
 transition: all 0.5s ease;
	background: #fff;
	color: #ccc;
	border-color: #ccc;
	box-shadow: none;
	

}
.field { display: grid; gap: var(--sp-2); }
.field label { font-size: var(--fs-small); font-weight: 600; }
.field .req { color: var(--c-accent-text); }
.field input, .field select {
  width: 100%; min-height: 52px; padding: 0 var(--sp-4);
  background: #FFFFFF; border: 1px solid var(--c-line-input); border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.field select { appearance: none; padding-right: var(--sp-8); background-image: linear-gradient(45deg, transparent 50%, var(--c-accent) 50%), linear-gradient(135deg, var(--c-accent) 50%, transparent 50%); background-position: calc(100% - 22px) 24px, calc(100% - 16px) 24px; background-size: 6px 6px; background-repeat: no-repeat; }
.field input:hover, .field select:hover { border-color: var(--c-text-mute); }
.field input:focus, .field select:focus { border-color: var(--c-accent-fill); outline: none; background: #FFFFFF; box-shadow: 0 0 0 3px var(--c-accent-soft); }
.field input[aria-invalid="true"] { border-color: var(--c-danger); }
.field__error { font-size: var(--fs-micro); color: var(--c-danger); min-height: 1em; }
.field--row { display: grid; gap: var(--sp-4); }
@media (min-width: 560px) { .field--row { grid-template-columns: 1fr 1fr; } }

.check { display: flex;  font-size: var(--fs-micro); color: var(--c-text-mute); line-height: 1.6; }
.check label{display:flex !important;align-items: center !important;}
.check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--c-accent); margin-top: 1px; padding: 0; }
.check a { color: var(--c-accent-text); text-decoration: underline; text-underline-offset: 2px; }

.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form__status { font-size: var(--fs-small); }
.form__status[data-state="ok"] { color: var(--c-accent-text); }
.form__status[data-state="err"] { color: var(--c-danger); }

.form__done { display: grid; gap: var(--sp-4); place-items: start; }
.form__done h3 { font-size: 1.4rem; }
.form__done .badge {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-accent-soft); border: 1px solid var(--c-accent-line); color: var(--c-accent-text);
}

/* 18 — Footer ============================================================== */
.footer { border-top: 1px solid var(--c-line); background: var(--c-bg-alt); padding-block: var(--sp-8) var(--sp-6); }
.footer__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 860px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__brand img { width: 168px; margin-bottom: var(--sp-4); }
.footer h4 { font-size: var(--fs-micro); font-family: var(--ff-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-text-dim); margin-bottom: var(--sp-4); font-weight: 500; }
.footer ul { display: grid; gap: var(--sp-3); font-size: var(--fs-small); }
.footer a { color: var(--c-text-mute); transition: color var(--t-fast) var(--ease); }
.footer a:hover { color: var(--c-accent-text); }
.footer__bottom {
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--c-line);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: space-between;
  font-size: var(--fs-micro); color: var(--c-text-dim);
}
.footer__legal .menu{ display: flex; flex-wrap: wrap; gap: var(--sp-5); }

/* 19 — Consent ============================================================= */
.consent {
  position: fixed; inset: auto var(--gutter) var(--gutter) auto; z-index: 130;
  max-width: 420px; width: calc(100% - var(--gutter) * 2);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: var(--sp-5); display: grid; gap: var(--sp-4);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95);
  transform: translateY(140%); transition: transform var(--t-slow) var(--ease-out);
}
.consent.is-on { transform: none; }
.consent p { font-size: var(--fs-small); color: var(--c-text-mute); }
.consent a { color: var(--c-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.consent__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 1023px) { .consent { bottom: calc(var(--gutter) + 74px); } }

/* 20 — Motion ============================================================== */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  /* Grundverzögerung von 120 ms: Das Element ist bereits im Bild, bevor es
     sich zu bewegen beginnt. Ohne diese Pause wirkt der Auftritt gehetzt,
     weil er exakt mit der Scrollbewegung zusammenfällt. --d staffelt
     Geschwister zusätzlich. */
  transition-delay: calc(120ms + var(--d, 0ms));
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__media-stage { transform: none !important; }
  .tech__step { opacity: 1 !important; transform: none !important; }
}

/* 21 — Print =============================================================== */
@media print {
  .header, .fab, .consent, .progress, .scrollcue, .drawer { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}

/* 22 — Header auf schmalen Displays =======================================
   Bei 375px passen Logo + Telefonnummer + Burger nicht nebeneinander; der
   Burger wurde abgeschnitten. Unter 560px zeigt der Telefon-Button daher nur
   noch das Icon – die Nummer bleibt über aria-label und die Callbar erreichbar. */
@media (max-width: 559px) {
  .brand img { width: 118px; }
  .header__actions .btn--sm { padding-inline: 0; width: 44px; min-height: 44px; }
  .header__actions .btn--sm .btn__label > span { display: none; }
  .header__inner { gap: var(--sp-3); }
}

/* ==========================================================================
   23 — SEKTIONSFARBEN & VEREDELUNG (helles Thema)
   --------------------------------------------------------------------------
   Dieselbe Rhythmus-Idee wie im dunklen Entwurf, nur andersherum: Weiß ist
   die höchste Ebene, leicht getönte Flächen liegen tiefer. Die Farbwäschen
   sind auf etwa die Hälfte reduziert – auf hellem Grund wirken sie ungefähr
   dreimal so stark und kippen sonst ins Bunte.
   ========================================================================== */

/* --- 23.1 Grundflächen je Sektion --------------------------------------- */

.hero {
  background:
    radial-gradient(105% 75% at 12% 8%,  var(--wash-teal), transparent 62%),
    radial-gradient(85% 65% at 92% 95%,  var(--wash-warm), transparent 62%),
    var(--e-00);
}

.trustbar {
  background: var(--e-15);
  border-block: 1px solid var(--c-line);
  box-shadow: none;
}

#kpis      { background: var(--e-00); }

#vorteile {
  color: #F4FBFB;
  background:
    radial-gradient(90% 70% at 5% 0%, rgba(84, 202, 196, .24), transparent 62%),
    radial-gradient(75% 85% at 100% 100%, rgba(0, 119, 113, .22), transparent 66%),
    linear-gradient(135deg, #085450 0%, #0B6B66 54%, #00625E 100%);
}
#vorteile::before { background: rgba(255, 255, 255, .2); }
#vorteile .h2,
#vorteile .card__title { color: #F4FBFB; }
#vorteile .lead { color: #F4FCFC; }
#vorteile .overline { color: #F4FCFC; }
#vorteile .overline::before { background: #8DDFDB; opacity: 1; }
#vorteile .card {
  background: #F7FBFB;
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 18px 45px rgba(3, 45, 43, .2);
}
#vorteile .card__title { color: #123735; }
#vorteile .card__text { color: #466362; }
#vorteile .card__num { color: #557573; }   /* 3,55:1 war zu hell – jetzt 4,88:1 */
#vorteile .card__icon {
  color: #00625E;
  background: #DDF3F2;
  border-color: #B7DDDB;
}
#vorteile .card::after {
  background: radial-gradient(90% 60% at 0% 0%, rgba(0, 119, 113, .11), transparent 65%);
}
#vorteile .card:hover { border-color: #8DCECB; }

/* Technik war im dunklen Entwurf die tiefste Sektion. Hell übernimmt das
   getönte Band diese Rolle: es setzt sich ab, ohne schwer zu wirken.       */
.tech {
  background:
    radial-gradient(75% 85% at 88% 45%, var(--wash-teal), transparent 65%),
    var(--e-teal);
  border-block: 1px solid var(--c-line);
}

/* Sommer/Winter: warmes Sonnenlicht von rechts. */
#sommerwinter {
  background:
    radial-gradient(72% 80% at 96% 20%, var(--wash-warm), transparent 62%),
    var(--e-00);
}

/* Folienvergleich ist die Datensektion – kühles Glas-Blau. */
#folien {
  background:
    radial-gradient(85% 70% at 4% 12%, var(--wash-cool), transparent 64%),
    var(--e-10);
}

#anwendung { background: var(--e-00); }

#ablauf {
  background:
    radial-gradient(110% 70% at 50% 100%, var(--wash-teal-2), transparent 65%),
    var(--e-10);
  border-block: 1px solid var(--c-line);
}

#referenzen { background: var(--e-00); }

/* Garantie bleibt das markenfarbene Band als visuelle Zäsur. */
#garantie {
  background: var(--e-teal);
  border-block: 1px solid var(--c-line);
}

#faq { background: var(--e-05); }

/* Kontakt trägt den stärksten Markenanteil – hier wird konvertiert. */
.contact {
  background:
    radial-gradient(90% 80% at 8% 0%,    var(--wash-teal), transparent 62%),
    radial-gradient(70% 60% at 100% 90%, var(--wash-warm), transparent 62%),
    var(--e-10);
}
.contact::before { content: none; }

.footer {
  background: var(--e-15);
  border-top: 1px solid var(--c-line);
}

.section--alt { background: none; }

/* --- 23.2 Sektionskanten -------------------------------------------------
   Auf hellem Grund reicht eine ruhige Haarlinie. Ein aufleuchtender
   Farbverlauf wie im dunklen Entwurf würde hier billig wirken.             */
#vorteile, #sommerwinter, #folien, #anwendung, #referenzen, #faq, .contact {
  position: relative;
}
#vorteile::before, #sommerwinter::before, #folien::before,
#anwendung::before, #referenzen::before, #faq::before, .contact::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--c-line);
  pointer-events: none;
}

/* --- 23.3 Papierkorn -----------------------------------------------------
   Auf Weiß muss das Rauschen sehr viel schwächer sein als auf Schwarz,
   sonst liest es sich als Schmutz statt als Textur.                        */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* --- 23.4 Karten: Schatten statt Kantenlicht ---------------------------- */
.card, .ref, .form, .filmcard, .films, .glossary div, .consent {
  background-color: var(--c-surface);
  background-image: none;
  border-color: var(--c-line);
  box-shadow: var(--shadow-sm);
}
.card:hover, .ref:hover {
  border-color: var(--c-accent-line);
  box-shadow: var(--shadow-md);
}

/* --- 23.5 Hero: heller Schleier über dem Bild --------------------------- */
.hero__scrim {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .58) 0%,
      rgba(255, 255, 255, .28) 42%,
      rgba(255, 255, 255, .82) 82%,
      var(--e-00) 100%),
    linear-gradient(100deg,
      rgba(255, 255, 255, .72) 0%,
      rgba(255, 255, 255, .34) 42%,
      transparent 68%);
}

/* --- 23.6 Preis-Karte: das teuerste Element der Seite ------------------- */
.pricecard {
  background: #FFFFFF;
  border: 1px solid var(--c-accent-line);
  box-shadow: var(--shadow-lg), var(--shadow-teal);
}
.pricecard__num {
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--c-text);
}
.pricecard__unit { color: var(--c-accent-text); }
.pricecard__label { color: var(--c-accent-text); }

/* --- 23.7 Buttons: Materialität ----------------------------------------- */
.btn--primary {
  background-image: none;
  box-shadow: var(--shadow-teal);
}
.btn--primary:hover { box-shadow: 0 18px 34px -16px rgba(0, 98, 94, .55); }
.btn--ghost {
  background-color: #FFFFFF;
  background-image: none;
  border-color: var(--c-line-input);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { border-color: var(--c-accent-fill); background-color: var(--c-accent-soft); }

/* --- 23.8 Folientabelle: Zebra und aktive Zeile ------------------------- */
.films tbody tr:nth-child(even) { background-color: rgba(16, 23, 25, .022); }
.films tbody tr { position: relative; }
.films tbody tr:hover, .films tbody tr.is-active {
  background-color: var(--c-accent-soft);
  box-shadow: inset 3px 0 0 var(--c-accent-fill);
}
.films thead th { background-color: var(--e-15); color: var(--c-text-mute); }

/* --- 23.9 Zitat: mehr Präsenz ------------------------------------------- */
.quote {
  background: var(--e-teal);
  border: 1px solid var(--c-accent-line);
  box-shadow: var(--shadow-sm);
}

/* --- 23.10 Typografischer Feinschliff ----------------------------------- */
h1, h2, h3, .h1, .h2, .h3 { text-wrap: balance; }
p, .lead { text-wrap: pretty; }
.h2 { margin-bottom: 0; }
.films td, .kpi__value, .pricecard__num, .filmcard dd { font-variant-numeric: tabular-nums; }

/* --- 23.11 Bewegungsarmer Modus ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}

/* Pflichtangaben zum Preis lesbar halten. */
.pricecard__note { color: var(--c-text-mute); }

/* ==========================================================================
   24 — MÖGLICHKEITEN: Variantenraster mit Filter
   ========================================================================== */

.filters {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.filters button {
  padding: var(--sp-2) var(--sp-4);
  min-height: 44px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: var(--fs-small); font-weight: 600;
  color: var(--c-text-mute);
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.filters button:hover { color: var(--c-text); border-color: var(--c-line-input); }
.filters button[aria-pressed="true"] {
  background: var(--c-accent-fill);
  border-color: var(--c-accent-fill);
  color: var(--c-accent-ink);
}
.filters .count { opacity: .65; font-variant-numeric: tabular-nums; margin-left: .35em; }

.vargrid {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.varcard {
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.varcard:hover { border-color: var(--c-accent-line); box-shadow: var(--shadow-md); }
.varcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--e-10); }
.varcard__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.varcard__name { font-size: 1.1rem; }
.varcard__text { font-size: var(--fs-small); color: var(--c-text-mute); flex: 1; }

.varcard__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }
.varcard__tags li {
  font-size: var(--fs-micro); font-weight: 600;
  color: var(--c-accent-text);
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-pill);
  padding: 3px var(--sp-3);
}

/* Zwei Karten heben sich ab: die Kernvariante dieser Seite und die
   Logo-Bedruckung – das eine ist das Produkt, das andere der Unterschied
   zum Wettbewerb. */
.varcard--kern    { border-color: var(--c-line-input); }
.varcard--hervor  { border-color: var(--c-accent-fill); box-shadow: var(--shadow-md), 0 0 0 1px var(--c-accent-fill); }
.varcard__flag {
  position: absolute; top: var(--sp-4); left: var(--sp-4);
  font-family: var(--ff-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--c-accent-fill); color: var(--c-accent-ink);
  padding: 4px var(--sp-3); border-radius: var(--r-pill);
}
.varcard__media { position: relative; }

.varnote {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--e-teal);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-lg);
  display: grid; gap: var(--sp-5); align-items: center;
}
@media (min-width: 860px) {
  .varnote { grid-template-columns: 1fr auto; gap: var(--sp-7); }
}
.varnote h3 { margin-bottom: var(--sp-3); }
.varnote p { max-width: 62ch; }
.varnote .btn { white-space: nowrap; }

.vargrid:empty::after {
  content: "Keine Variante in dieser Auswahl.";
  color: var(--c-text-mute); font-size: var(--fs-small);
}

/* Auf schmalen Displays brechen sieben Filter-Chips auf vier Zeilen um und
   schieben das Raster rund 180 px nach unten. Als wischbare Leiste bleibt
   der Inhalt sichtbar; der Verlauf rechts zeigt an, dass es weitergeht. */
@media (max-width: 720px) {
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--sp-2);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: none; scroll-snap-align: start; }
}

/* ==========================================================================
   25 — KURZE FENSTER
   --------------------------------------------------------------------------
   Die gepinnten Sektionen sind 100svh hoch, tragen aber rund 150 px vertikale
   Polsterung. Unter etwa 760 px Fensterhöhe wächst der Container dadurch über
   den Viewport hinaus und sein unteres Ende – beim Ablauf der Fortschritts-
   balken – liegt dauerhaft unter der Falz. Betrifft Notebooks mit flachen
   Bildschirmen und jedes verkleinerte Browserfenster.
   ========================================================================== */

.section__head--flow { margin-bottom: clamp(2rem, 4vw, 3rem); }

@media (min-width: 1024px) and (max-height: 780px) {
  .tech__sticky,
  .flow__sticky { padding-block: calc(var(--header-h) + var(--sp-3)) var(--sp-4); }

  .tech__grid { gap: clamp(1.5rem, 3vw, 2.5rem); }
  .tech__steps { min-height: clamp(12rem, 19vw, 16rem); }
  .tech__counter { font-size: clamp(2.6rem, 6vw, 4.5rem); margin-bottom: var(--sp-3); }
  .tech__step h3 { font-size: clamp(1.35rem, 2.6vw, 2rem); margin-bottom: var(--sp-3); }
  .tech__dots { margin-top: var(--sp-4); }

  .section__head--flow { margin-bottom: var(--sp-5); }
  .flow__step { padding: var(--sp-5); }
  .flow__idx { margin-bottom: var(--sp-4); }
  .flow__bar { margin-top: var(--sp-5); }
}

/* Sehr flache Fenster: Die Bühne der Technik-Sektion darf schrumpfen, damit
   Text und Grafik nebeneinander vollständig sichtbar bleiben. */
@media (min-width: 1024px) and (max-height: 660px) {
  .tech__stage svg { max-height: 62svh; width: auto; margin-inline: auto; }
  .tech__steps { min-height: 11rem; }
}

/* ==========================================================================
   26 — HERO: SCROLLGESTEUERTES VIDEO
   --------------------------------------------------------------------------
   Beim Scrollen wandert die Folie über die Fassade. Das Video wird nicht
   abgespielt, sondern über currentTime an den Scrollfortschritt gekoppelt.
   Aktiv nur auf Zeigegeräten und ohne "Bewegung reduzieren"; sonst bleibt
   der bisherige Standbild-Crossfade stehen.
   ========================================================================== */

.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
  pointer-events: none;
  /* Eigene Compositor-Ebene: der Sprung im Video zeichnet dann nur diese
     Ebene neu statt der gesamten Bühne. */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Erst wenn genug gepuffert ist, legt sich das Video über die Standbilder.
   Bis dahin trägt das Startbild den LCP – das Video darf ihn nicht ausbremsen.

   Die Standbilder werden bewusst NICHT ausgeblendet: Jeder Sprung im Video
   erzeugt eine kurze Dekodierlücke. Lag darunter der dunkle Kasten der
   Medienfläche, blitzte auf der hellen Seite ein schwarzes Rechteck auf – das
   war das Flackern. Jetzt liegt darunter dasselbe Motiv als Standbild, eine
   Lücke fällt damit nicht mehr auf. */
/* Das Video wird nicht mehr direkt angezeigt – siehe §27. Es bleibt im
   Dokument und dekodiert weiter, liefert seine Bilder aber an die Leinwand. */

/* Beim Scrub übernimmt das Video die Bewegung – der Zoom der Standbilder
   würde dagegenarbeiten. */
.hero--scrub .hero__media-stage { transform: none; will-change: auto; }
.hero--scrub .hero__frame--end { animation: none; }

/* Zustandsanzeige: benennt, was gerade zu sehen ist. */
.hero__state {
  position: absolute; z-index: 2;
  top: calc(var(--header-h) + var(--sp-5));
  right: var(--gutter);
  display: none; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  /* Kein backdrop-filter: Eine Weichzeichnung über einem Video, das bei jedem
     Scrollschritt neu zeichnet, muss pro Frame den Untergrund neu filtern –
     genau dort entstand sichtbares Flimmern. Deckende Fläche ist billiger und
     ruhiger. */
  background: #FFFFFF;
  border: 0;
  border-left: 3px solid var(--c-text-dim);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  box-shadow: none;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.hero--scrub .hero__state { display: inline-flex; }
.hero__state-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-warm);
  transition: background-color 400ms var(--ease);
  flex: none;
}
.hero__state[data-zustand="mit"] .hero__state-dot { background: var(--c-accent-fill); }
.hero__state[data-zustand="mit"] { color: var(--c-accent-text); border-left-color: var(--c-accent-fill); }
.hero__state-dot { width: 7px; height: 7px; }

/* Der Scrollhinweis blendet aus, sobald der Scrub beginnt. */
.hero--scrub .scrollcue { transition: opacity 300ms var(--ease); }
.hero--scrub.is-scrubbing .scrollcue { opacity: 0; }

@media (max-width: 900px) { .hero__state { top: auto; bottom: var(--sp-5); right: var(--gutter); } }

/* ==========================================================================
   27 — HERO-VIDEO: LEINWAND STATT DIREKTER VIDEOAUSGABE
   --------------------------------------------------------------------------
   Ein pausiertes Video zeichnet während eines Sprungs kurz nichts – auf einer
   hellen Seite blitzt das als leere Fläche auf. Das war das Flackern.
   Deshalb bleibt das Video unsichtbar und dient nur noch als Bildquelle: Nach
   jedem abgeschlossenen Sprung wird sein aktuelles Bild einmal auf die
   Leinwand gezeichnet. Die Leinwand behält dieses Bild, solange der nächste
   Sprung läuft – es gibt keinen leeren Moment mehr.
   ========================================================================== */

.hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
  pointer-events: none;
}
.hero--scrub .hero__canvas.is-ready { opacity: 1; }

/* Das Video bleibt im Dokument (sonst hört es auf zu dekodieren), wird aber
   nicht mehr angezeigt, sobald die Leinwand übernommen hat. */
.hero--scrub .hero__video { opacity: 0; }

/* ==========================================================================
   28 — BUTTONS: HANDLUNGSFARBE UND FOLIENEFFEKT
   --------------------------------------------------------------------------
   Beim Überfahren wird eine Folie über den Button gezogen – seitlich, mit dem
   Rakel, so wie am Fenster gearbeitet wird. Der Button dreht dabei in sein
   eigenes Negativ.

   Bewusst kein Rollo mehr: Ein Rollo kommt von oben, hat Lamellen und eine
   Saumleiste. Eine Folie kommt von der Seite, hat eine helle Nasskante vor der
   Rakelkante und danach Glanz statt Stoff.
   ========================================================================== */

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;   /* hält das z-index:-1 der Folie im Button */
}

/* --- 28.1 Die Folienbahn ------------------------------------------------
   Die Bahn ragt 16px über die rechte Kante hinaus. Dadurch wandert die
   Nasskante am Ende aus dem Button heraus, statt als heller Strich stehen
   zu bleiben – der Rakel verlässt die Scheibe. */
.btn--primary::before,
.btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0 -16px 0 0;
  z-index: -1;
  transform: translateX(-100%);
  transition: transform 460ms cubic-bezier(.33, .78, .38, 1);
  background-color: var(--folie-flaeche);
  background-image:
    /* Nasskante unmittelbar vor der Rakelkante. Die Farbe kommt aus der
       Variante: Auf der weissen Folie des Primärbuttons muss sie dunkel sein,
       auf der dunklen Folie des sekundären hell – sonst ist sie unsichtbar. */
    linear-gradient(90deg,
      transparent calc(100% - 20px),
      var(--folie-kante-weich) calc(100% - 14px),
      var(--folie-kante) calc(100% - 3px),
      var(--folie-kante-weich) 100%),
    /* Glanz, der schräg über die aufgezogene Folie läuft */
    linear-gradient(112deg,
      transparent 26%,
      var(--folie-glanz) 44%,
      transparent 68%);
}
.btn--primary:hover::before, .btn--primary:focus-visible::before,
.btn--ghost:hover::before,   .btn--ghost:focus-visible::before { transform: translateX(0); }

/* --- 28.2 Ruhe- und Überfahrzustand -------------------------------------
   Beim Überfahren kehren sich die Farben um: Aus der Schriftfarbe wird die
   Fläche und aus der Fläche die Schrift. Weil ein Kontrastverhältnis
   symmetrisch ist, bleibt der Wert dabei exakt gleich. */
.btn--primary {
  --folie-flaeche: var(--c-cta-ink);          /* weiss */
  --folie-schrift: var(--c-cta);              /* Graphit */
  --folie-kante:       rgba(28, 42, 40, .55);
  --folie-kante-weich: rgba(28, 42, 40, .16);
  --folie-glanz:       rgba(28, 42, 40, .07);
  background: var(--c-cta);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 58%);
  border: 1px solid var(--c-cta-edge);
  color: var(--c-cta-ink);
  box-shadow: var(--shadow-cta);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--c-cta);
  box-shadow: 0 18px 34px -16px rgba(16, 23, 25, .30);
}

.btn--ghost {
  --folie-flaeche: var(--c-text);
  --folie-schrift: #FFFFFF;
  --folie-kante:       rgba(255, 255, 255, .92);
  --folie-kante-weich: rgba(255, 255, 255, .16);
  --folie-glanz:       rgba(255, 255, 255, .13);
  background: #FFFFFF;
  background-image: none;
  border: 1px solid var(--c-line-input);
  color: var(--c-text);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: #FFFFFF;
  border-color: var(--c-text);
}

/* --- 28.3 Beschriftung: der Farbwechsel wandert mit der Folienkante ------
   Zwei deckungsgleiche Beschriftungen. Die untere trägt die Ruhefarbe, die
   obere die Folienschrift-Farbe und wird synchron zur Folie freigeschnitten.
   Die Schrift wechselt dadurch genau dort die Farbe, wo die Kante steht –
   statt nach einer Verzögerung komplett umzuspringen. */
.btn__label {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
}
.btn__label--on {
  position: absolute; inset: 0;
  padding-inline: var(--sp-6);
  color: var(--folie-schrift);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 460ms cubic-bezier(.33, .78, .38, 1);
  pointer-events: none;
}
.btn--sm .btn__label--on { padding-inline: var(--sp-4); }

.btn--primary:hover .btn__label--on, .btn--primary:focus-visible .btn__label--on,
.btn--ghost:hover   .btn__label--on, .btn--ghost:focus-visible   .btn__label--on {
  clip-path: inset(0 0 0 0);
}

/* --- 28.4 Bewegungsarmer Modus ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .btn--primary::before, .btn--ghost::before,
  .btn__label--on { transition: none; }
}

/* ==========================================================================
   29 — KONTAKTSPALTE KOMPAKTER
   --------------------------------------------------------------------------
   Der Block trug durchgehend 24px zwischen allen Elementen. Zusammen mit dem
   grossen Telefonlink zog das die Spalte unnötig auseinander. Die Abstände
   staffeln jetzt: eng innerhalb zusammengehöriger Angaben, mehr Luft nur dort,
   wo eine neue Informationsebene beginnt.
   ========================================================================== */

.contact__copy > * + * { margin-top: var(--sp-4); }

/* Die Telefonnummer bekommt als Hauptangabe etwas mehr Vorlauf … */
.contact__copy .phone { margin-top: var(--sp-5); }
/* … und Öffnungszeiten plus E-Mail hängen eng darunter, sie gehören dazu. */
.contact__copy .phone + .small { margin-top: var(--sp-2); }

.person { padding-top: var(--sp-4); gap: var(--sp-3); }
.person img { width: 52px; height: 52px; }

/* Die Zeile aus Zeit und E-Mail darf umbrechen, ohne Lücken zu reissen. */
.contact__copy .small { line-height: 1.5; }

/* Der Telefonlink ist auf dem Handy das wichtigste Ziel der Seite. Bei kleiner
   Schrift kam die Zeile auf 43px – knapp unter der Empfehlung von 44px. */
.phone { min-height: 44px; }

/* ==========================================================================
   30 — FLOATING-CTA  (Briefing 1.4)
   --------------------------------------------------------------------------
   Ersetzt den Telefon-Button in der Kopfzeile und die frühere Callbar. Drei
   Aktionen, erscheint erst nach etwas Scrollweg, keine Dauerbewegung.
   Auf dem Desktop rechts als schmale Leiste mit ausfahrender Beschriftung,
   auf schmalen Geräten unten als flache Leiste mit sichtbarer Beschriftung.
   ========================================================================== */

.fab {
  position: fixed; z-index: 95;
  display: flex; gap: var(--sp-3);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base),
              transform var(--t-base) var(--ease);
}
.fab.is-on { opacity: 1; visibility: visible; transform: none; }

/* --- Desktop: rechte Kante, senkrecht ----------------------------------- */
@media (min-width: 1024px) {
  .fab {
    right: var(--sp-5); top: 50%;
    flex-direction: column;
    transform: translate(12px, -50%);
  }
  .fab.is-on { transform: translate(0, -50%); align-items: end;}
  .fab__btn {
    display: flex; align-items: center; gap: 0;
    height: 52px; width: 52px; padding: 0;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: #FFFFFF;
    border: 1px solid var(--c-line);
    box-shadow: var(--shadow-md);
    color: var(--c-text);
    transition: width var(--t-base) var(--ease), gap var(--t-base) var(--ease),
                background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
	
  }
  .fab__btn:hover, .fab__btn:focus-visible {
    width: auto; gap: var(--sp-3); padding-right: var(--sp-5);
    background: var(--c-cta); border-color: var(--c-cta); color: var(--c-cta-ink);
	padding-left: var(--sp-5);
  }
  .fab__btn:hover .fab__icon, .fab__btn:focus-visible .fab__icon { margin:0; }
  .fab__text {
    max-width: 0; opacity: 0; white-space: nowrap;
    transition: max-width var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
  }
  .fab__btn:hover .fab__text, .fab__btn:focus-visible .fab__text { max-width: 14rem; opacity: 1; }
}

/* --- Schmale Geräte: untere Leiste, Beschriftung immer sichtbar ---------- */
@media (max-width: 1023px) {
  .fab {
    left: 0; right: 0; bottom: 0;
    padding: var(--sp-3) var(--gutter);
    padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--c-line);
    box-shadow: 0 -8px 24px -14px rgba(16, 23, 25, .3);
    transform: translateY(100%);
  }
  .fab.is-on { transform: none; }
  .fab__btn {
    flex: 1 1 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: 48px; padding-inline: var(--sp-4);
    border-radius: var(--r-sm);
    background: #FFFFFF; border: 1px solid var(--c-line-input); color: var(--c-text);
    font-size: var(--fs-small); font-weight: 600;
  }
  .fab__btn--call { background: var(--c-cta); border-color: var(--c-cta); color: var(--c-cta-ink); }
  /* Nach oben braucht auf schmalen Geräten keine Beschriftung. */
  .fab__btn--top { flex: 0 0 48px; padding-inline: 0; }
  .fab__btn--top .fab__text { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; }
}

.fab__icon { width: 20px; height: 20px; flex: none; margin:0 auto;}

.fab__btn:focus-visible { outline: 2px solid var(--c-cta); outline-offset: 3px; }

/* Der Floating-CTA darf den Inhalt nicht verdecken: unten Platz schaffen. */
@media (max-width: 1023px) { body { padding-bottom: 76px; } }

@media (prefers-reduced-motion: reduce) {
  .fab, .fab__btn, .fab__text { transition: none; }
}

/* ==========================================================================
   31 — BILDVERGLEICH  (Briefing 5.1, 5.2)
   --------------------------------------------------------------------------
   Vorher war nur an der Position der Trennlinie erkennbar, welcher Zustand
   gerade überwiegt, und die Beschriftungen waren gleich stark. Jetzt tritt die
   aktive Seite hervor, die inaktive nimmt sich zurück, und unter dem Bild steht
   der Stand zusätzlich als Text – lesbar auch ohne Farbwahrnehmung.
   ========================================================================== */

.ba__tag {
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              opacity var(--t-base) var(--ease);
  opacity: .55;
}
.ba[data-seite="ohne"] .ba__tag--l,
.ba[data-seite="mit"]  .ba__tag--r { opacity: 1; font-weight: 700; }
.ba[data-seite="mit"]  .ba__tag--r { color: var(--c-accent-text); border-color: var(--c-accent-fill); }
.ba[data-seite="ohne"] .ba__tag--l { color: var(--c-text); border-color: var(--c-text); }

/* Der Griff ist ein echtes Bedienelement und muss auch per Tastatur sichtbar sein. */
.ba__range:focus-visible { outline: none; }
.ba:has(.ba__range:focus-visible) .ba__handle { box-shadow: 0 0 0 3px var(--c-accent-soft); }
.ba:has(.ba__range:focus-visible) .ba__knob { outline: 2px solid var(--c-cta); outline-offset: 3px; }

.ba__hinweis {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  align-items: baseline; justify-content: space-between;
  margin-top: var(--sp-3);
  font-size: var(--fs-small); color: var(--c-text-mute);
}
.ba__stand { font-weight: 600; color: var(--c-text); font-variant-numeric: tabular-nums; }
@media (hover: none) { .ba__hinweis-txt::before { content: "Schieber tippen und ziehen. "; }
  .ba__hinweis-txt { font-size: 0; }
  .ba__hinweis-txt::before { font-size: var(--fs-small); } }

/* ==========================================================================
   32 — FOLIENAUSWAHL  (Briefing 6.1, 6.3)
   --------------------------------------------------------------------------
   Zeilen sind auswählbar, nicht nur überfahrbar. Klick, Tipp und Tastatur
   erzeugen denselben bleibenden Zustand; der Hover ist nur noch eine leichte
   Vorschau darauf. Nach der Auswahl erscheinen die Folgeaktionen.
   ========================================================================== */

.film-select { width: 100%; text-align: left; font-weight: inherit; }
.film-select:focus-visible { outline-offset: 4px; }
.films tbody tr { cursor: default; }
.films tbody tr:hover { background-color: rgba(0, 119, 113, .05); }
.films tbody tr.is-active {
  background-color: var(--c-accent-soft);
  box-shadow: inset 4px 0 0 var(--c-accent-fill);
}
/* Auf Touchgeräten gibt es keinen Hover – dort zählt allein die Auswahl. */
@media (hover: none) {
  .films tbody tr:hover { background-color: transparent; }
  .films tbody tr.is-active { background-color: var(--c-accent-soft); }
}

.filmcard { position: relative; cursor: pointer; }
.filmcard__select {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; border-radius: inherit;
}
.filmcard.is-active {
  border-color: var(--c-accent-fill);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--c-accent-fill);
}
.filmcard:has(.filmcard__select:focus-visible) { outline: 2px solid var(--c-cta); outline-offset: 2px; }

.filmwahl {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--e-teal);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-md);
}
.filmwahl__text { font-size: var(--fs-small); color: var(--c-text-mute); margin: 0; }
.filmwahl__text b { color: var(--c-text); }
.filmwahl__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.filmwahl__hinweis { font-size: var(--fs-micro); color: var(--c-text-mute); }

/* ==========================================================================
   33 — MÖGLICHKEITEN: Filter und Karten  (Briefing 7.1–7.3)
   --------------------------------------------------------------------------
   Filterknöpfe und Eigenschafts-Chips sahen fast gleich aus. Jetzt sind die
   Filter klar als Steuerung erkennbar und die Chips nehmen sich zurück; die
   Karten geben sich nicht mehr als klickbar aus, weil es keine Detailansicht
   gibt.
   ========================================================================== */

.filterzeile { margin-bottom: clamp(2rem, 4vw, 3rem); }
.filterzeile__label {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-small); font-weight: 600; color: var(--c-text);
}
.filterzeile .filters { margin-bottom: 0; }

/* 7.1 Filter deutlich als Bedienelement: kräftigerer Rahmen, Anzahl im Knopf. */
.filters button {
  border-color: var(--c-line-input);
  color: var(--c-text);
  background: #FFFFFF;
  box-shadow: var(--shadow-sm);
}
.filters button:hover { border-color: var(--c-cta); background: var(--e-10); }
.filters button[aria-pressed="true"] {
  background: var(--c-cta); border-color: var(--c-cta); color: var(--c-cta-ink);
  box-shadow: var(--shadow-md);
}
.filters .count {
  display: inline-block; margin-left: var(--sp-2);
  padding: 1px 7px; border-radius: var(--r-pill);
  background: rgba(16, 23, 25, .09);
  font-size: 11px; font-variant-numeric: tabular-nums; opacity: 1;
}
.filters button[aria-pressed="true"] .count { background: rgba(255, 255, 255, .22); }

/* 7.1 Eigenschafts-Chips: klar Beschreibung, nicht Bedienung. */
.varcard__tags li {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--c-accent-line);
  border-radius: 0;
  padding: 0 0 0 var(--sp-2);
  color: var(--c-text-mute);
  font-weight: 500;
}

/* 7.2 Die Karten sind reine Information – keine vorgetäuschte Klickbarkeit. */
.varcard { cursor: default; }
.varcard:hover { transform: none; border-color: var(--c-line); box-shadow: var(--shadow-sm); }

/* 7.3 Gleiche Höhen je Rasterzeile, bündige Textanfänge. */
.vargrid { grid-auto-rows: 1fr; }
.varcard__body { display: flex; flex-direction: column; }
.varcard__name { min-height: 2.6em; display: flex; align-items: flex-start; }
.varcard__text { flex: 1; }

/* ==========================================================================
   34 — REFERENZKARTEN  (Briefing 9.1)
   ========================================================================== */
.refs { grid-auto-rows: 1fr; }
.ref { display: flex; flex-direction: column; }
.ref__body { display: flex; flex-direction: column; flex: 1; }
.ref__title { min-height: 2.8em; }
.ref__text { flex: 1; }
.ref__facts { margin-top: auto; }

/* ==========================================================================
   35 — ABLAUF  (Briefing 8.1, 8.2)
   --------------------------------------------------------------------------
   Inaktive Schritte waren bei 32 % Deckkraft kaum noch lesbar und wirkten im
   Zusammenspiel mit dem Berechnungsfehler wie verschwunden. Sie bleiben jetzt
   deutlich erkennbar, der aktive Schritt hebt sich über Rahmen und Schatten ab
   statt über das Verblassen der anderen.
   ========================================================================== */

.flow__step {
  opacity: .68;
  background: #FFFFFF;
  border-color: var(--c-line);
  box-shadow: var(--shadow-sm);
  transition: opacity var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.flow__step.is-on {
  opacity: 1;
  border-color: var(--c-accent-fill);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--c-accent-fill);
}
/* Sicherheitsnetz: Ein Schritt darf nie unsichtbar werden, egal welchen Wert
   eine Animation liefert. */
.flow__step:not(.is-on) { opacity: .68 !important; }

/* Die Schiene bleibt in ihrem Rahmen; die Seite bekommt davon keinen Überlauf. */
.flow__sticky { contain: paint; }

/* Touch-Geraete (insbesondere iPadOS/Safari) muessen bei jedem Scrollbild den
   Inhalt hinter fixierten Blur-Flaechen neu filtern. Die nahezu deckenden
   Ersatzflaechen erhalten die Glas-Anmutung, vermeiden aber diese dauernde
   Rasterisierung. Das Hero-Video wird in motion.js parallel auf den bereits
   vorhandenen Standbild-Crossfade zurueckgestellt. */
@media (hover: none), (pointer: coarse) {
  .header {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .drawer,
  .pricecard,
  .ba__tag,
  .fab {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .hero__media-stage,
  .flow__rail {
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow__step, .flow__step.is-on { opacity: 1 !important; transition: none; }
}

/* ==========================================================================
   36 — FAQ  (Briefing 10.1)
   --------------------------------------------------------------------------
   Die zentrierte Überschrift und die Abstände sprangen bei Breitenwechsel.
   Feste Maximalbreiten und gleichmässige Abstände beruhigen die Sektion.
   ========================================================================== */

#faq .wrap--slim { max-width: 52rem; }
#faq .section__head { margin-bottom: clamp(2rem, 3.5vw, 3rem); }
#faq .section__head .h2 { max-width: 22ch; margin-inline: auto; }
.faq summary { padding-block: clamp(1rem, 2vw, 1.35rem); gap: var(--sp-4); }
.faq__answer { padding-bottom: clamp(1.1rem, 2.2vw, 1.6rem); }

/* ==========================================================================
   37 — FORMULAR  (Briefing 11.1, 11.2)
   --------------------------------------------------------------------------
   Einheitliche Höhe, Innenabstand, Schrift und Fokus für alle Felder. Das
   Autofill der Browser darf Farben und Layout nicht überschreiben.
   ========================================================================== */

.field input, .field select {
  height: 52px; min-height: 52px;
  padding: 0 var(--sp-4);
  font-size: 1rem; line-height: 1.2;
  font-family: var(--ff-body);
  box-sizing: border-box;
}
.field select { padding-right: var(--sp-8); }
.field label { line-height: 1.35; min-height: 1.35em; }
.field__error { line-height: 1.35; }

/* Zweispaltige Zeilen exakt ausrichten, auf Mobil einspaltig. */
.field--row { align-items: start; }
.field--row > .field { min-width: 0; }

/* Autofill: Chrome und Safari überschreiben sonst Hintergrund und Schriftfarbe. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--c-text);
  -webkit-box-shadow: 0 0 0 40px #FFFFFF inset;
  box-shadow: 0 0 0 40px #FFFFFF inset;
  caret-color: var(--c-text);
}

.pflichtnote {
  font-size: var(--fs-micro); color: var(--c-text-mute);
  margin-top: calc(var(--sp-2) * -1);
}
.pflichtnote .req { color: var(--c-accent-text); font-weight: 700; }

/* Testbetrieb sichtbar kennzeichnen, solange kein Versandziel hinterlegt ist. */
.form__demo {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4);
  background: #FFF6E5;
  border: 1px solid #E0A94A;
  border-radius: var(--r-sm);
  font-size: var(--fs-small); color: #5A3E06;
}
.form__demo b { color: #4A3205; }

/* Zwischen 1024 und 1149 px reichen Logo und Navigation zusammen exakt 7 px
   über die Zeile hinaus. Statt den Burger bis 1150 hochzuziehen und damit die
   grössere Navigation wieder aufzugeben, wird sie hier nur enger gesetzt –
   Schriftgrösse und Klickhöhe bleiben unverändert. */
@media (min-width: 1024px) and (max-width: 1149px) {
  .brand img { width: 178px; }
  .nav { gap: 2px; }
  .nav a { padding-inline: 10px; }
}

/* ==========================================================================
   38 — NAVIGATION: GLEITENDE PILLE
   --------------------------------------------------------------------------
   Statt jeden Punkt einzeln einzufärben, wandert EIN Element hinter den
   Links. Es folgt dem Zeiger und kehrt beim Verlassen zum aktiven Abschnitt
   zurück. Das ist der Kern des Effekts: Der Nutzer verfolgt eine durchgehende
   Bewegung statt vieler An- und Ausschaltvorgänge.

   Die Pille liegt HINTER den Links (z-index) und wird per transform bewegt –
   nicht über left/width, das würde bei jedem Frame ein neues Layout auslösen.
   ========================================================================== */

.nav { position: relative; isolation: isolate; }

.nav__pille {
  position: absolute; z-index: -1;
  left: 0; top: 50%;
  height: calc(100% - 8px);
  width: var(--pille-w, 0px);
  transform: translate(var(--pille-x, 0px), -50%) scaleX(var(--pille-s, 1));
  transform-origin: left center;
  border-radius: var(--r-pill);
  background: rgba(16, 23, 25, .065);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 420ms cubic-bezier(.22, 1, .36, 1),
    width     420ms cubic-bezier(.22, 1, .36, 1),
    opacity   200ms var(--ease),
    background-color 260ms var(--ease);
}
.nav__pille.is-da { opacity: 1; }

/* Liegt die Pille auf dem aktiven Abschnitt, färbt sie sich markenfarben. */
.nav__pille.is-aktiv { background: var(--c-accent-soft); }

/* Beim Wechsel zieht sich die Pille leicht in die Länge – der Eindruck von
   Trägheit, den weiche Bewegungen brauchen. */
.nav__pille.is-flug { --pille-s: 1.06; }

.nav a {
  z-index: 1;
  transition: color 220ms var(--ease), transform 260ms cubic-bezier(.22, 1, .36, 1);
}
.nav a:active { transform: scale(.97); }

/* Der Fokusrahmen bleibt eigenständig sichtbar, unabhängig von der Pille. */
.nav a:focus-visible { outline: 2px solid var(--c-cta); outline-offset: -3px; border-radius: var(--r-pill); }

@media (prefers-reduced-motion: reduce) {
  .nav__pille { transition: opacity 120ms linear; }
  .nav a { transition: color 120ms linear; }
  .nav a:active { transform: none; }
}

/* ==========================================================================
   39 — ANGLEICHUNG AN DIE LOGOFARBE
   --------------------------------------------------------------------------
   Die Seite wirkte durchgehend dunkler als das Logo. Zwei Ursachen:

   1. Die Vorteile-Sektion lag 14 Grad neben dem Farbton des Logos – das war
      ein Waldgrün, kein dunkles Türkis. Farbton korrigiert, Helligkeit und
      Sättigung unverändert gelassen.

   2. Flächen wurden abgedunkelt, damit weisse Schrift darauf 4,5:1 erreicht.
      Genau das war der Fehler: Mit DUNKLER Schrift trägt die Logofarbe selbst
      5,10:1. Auszeichnungen und grosse Zahlen bekommen deshalb jetzt exakt
      #007771. Nur kleine Schrift muss noch nachgedunkelt werden, und dort
      steht jetzt der hellstmögliche Wert (5,00:1 statt vorher 6,11:1).
   ========================================================================== */

/* Auszeichnungen: Logofarbe mit dunkler Schrift statt abgedunkelter Fläche. */
.films__badge,
.varcard__flag {
  background: var(--c-accent);
  color: var(--c-accent-auf);
}

/* Grosse Zahlen und Hervorhebungen: ab 24px reichen 3:1, also Logofarbe. */
.kpi__unit {
  color: var(--c-accent-gross);
  -webkit-text-fill-color: var(--c-accent-gross);
}
.hero__title .accent { color: var(--c-accent-gross); }
.tech__counter { color: var(--c-accent-gross); }
.pricecard__num + .pricecard__unit,
.pricecard__unit { color: var(--c-accent-text); }

/* Der Ring um die Icons darf kräftiger sein – er ist Fläche, kein Text. */
.card__icon { border-color: var(--c-accent); color: var(--c-accent-text); }

/* ==========================================================================
   40 — GRÜNTÖNE DURCHGÄNGIG AN DAS LOGO ANGEGLICHEN
   --------------------------------------------------------------------------
   Alle verbliebenen Flächen, Regler und Bänder liegen jetzt auf dem Farbton
   des Logos (177°). Wo Schrift darauf steht, entscheidet deren Farbe über die
   maximale Helligkeit:

     ohne Schrift          → #007771, exakt die Logofarbe
     mit weisser Schrift   → höchstens #007771 (4,51:1)
     mit dunkler Schrift   → #007771 möglich (5,10:1)
   ========================================================================== */

/* --- Auszeichnungen: weisse Schrift, deshalb eine Stufe unter dem Logo ---- */
.films__badge,
.varcard__flag {
  background: var(--c-accent-fill);
  color: #FFFFFF;
}

/* --- Reine Flächen ohne Schrift: exakt die Logofarbe ---------------------- */
.progress { background: linear-gradient(90deg, var(--c-accent), var(--brand-teal-bright)); }
.flow__bar i        { background: var(--c-accent); }
.tech__dots span.is-on { background: var(--c-accent); }
.pledge             { border-top-color: var(--c-accent); }
.ba__handle         { background: var(--c-accent); }
.overline::before   { background: var(--c-accent); opacity: 1; }
.faq__sign::before, .faq__sign::after { background: var(--c-accent); }
.hero__state-dot    { background: var(--c-accent); }
.hero__meta .dot    { background: var(--c-accent); }
.scrollcue__line    { background: linear-gradient(180deg, var(--c-accent), transparent); }

/* --- Regler-Griff trägt ein Zeichen, also eine Stufe dunkler -------------- */
.ba__knob { background: var(--c-accent-fill); color: #FFFFFF; }

/* --- Dunkle Vorteile-Sektion: so hell wie möglich bei weisser Schrift ----- */
#vorteile {
  background:
    radial-gradient(95% 70% at 5% 0%, rgba(0, 156, 148, .20), transparent 62%),
    radial-gradient(75% 85% at 100% 100%, rgba(0, 119, 113, .26), transparent 66%),
    linear-gradient(135deg, #004F4B 0%, #00625E 54%, #007771 100%);
}
#vorteile .card__icon { border-color: rgba(0, 119, 113, .5); background: #E1F4F3; color: #004F4B; }
#vorteile .overline::before { background: #66C9C2; opacity: 1; }
/* Die Sektion ist jetzt heller, deshalb müssen Überzeile und Lead näher an
   Weiss rücken. #F4FCFC ist der dunkelste Ton, der gegen den hellsten
   Verlaufsstopp (#007771) noch 4,56:1 hält. */
#vorteile .overline { color: #F4FCFC; }
#vorteile .lead { color: #F4FCFC; }

/* --- Auswahl- und Aktivflächen ------------------------------------------- */
.films tbody tr.is-active,
.films tbody tr.is-active { box-shadow: inset 4px 0 0 var(--c-accent); }
.filmcard.is-active { border-color: var(--c-accent); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--c-accent); }
.flow__step.is-on { border-color: var(--c-accent); box-shadow: var(--shadow-md), inset 0 0 0 1px var(--c-accent); }
.nav__pille.is-aktiv { background: rgba(0, 119, 113, .16); }

/* ==========================================================================
   41 — PLATZABHÄNGIGE, ZUGÄNGLICHE NAVIGATION
   --------------------------------------------------------------------------
   JavaScript misst den tatsächlich verfügbaren Platz statt einen Geräte-
   Breakpoint zu erraten. Die Klassen gelten für den statischen Header, das
   WordPress-Menü und einen Header aus einem Reusable Block gleichermaßen.
   ========================================================================== */
.header.fm-nav-ready { position: fixed; }
.header.fm-nav-ready .fm-nav-toggle[hidden] { display: none !important; }
.header.fm-nav-measuring .nav__pille { display: none !important; }

.header.fm-nav-desktop .nav,
.header.fm-nav-desktop .widget_nav_menu { display: flex; align-items: center; }
.header.fm-nav-desktop .nav > ul,
.header.fm-nav-desktop .widget_nav_menu > div > ul,
.header.fm-nav-desktop .widget_nav_menu > ul {
  display: flex; align-items: center; flex-wrap: nowrap; justify-content: flex-end;
  gap: clamp(.5rem, 1.4vw, 1.5rem); margin: 0; padding: 0;
}
.header.fm-nav-desktop .fm-nav-source > ul > li,
.header.fm-nav-desktop .fm-nav-source > div > ul > li {
  position: relative; display: flex; align-items: center; flex: none;
}
.header.fm-nav-desktop .fm-nav-source > ul > li > a,
.header.fm-nav-desktop .fm-nav-source > div > ul > li > a,
.header.fm-nav-desktop .nav > a { display: flex; align-items: center; min-height: 44px; white-space: nowrap; }

.fm-submenu-toggle {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  color: var(--c-text-mute); border-radius: var(--r-sm);
}
.fm-submenu-toggle > span {
  width: .55rem; height: .55rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}
.fm-submenu-toggle[aria-expanded="true"] > span { transform: translateY(2px) rotate(225deg); }
.fm-submenu-toggle:hover { color: var(--c-text); background: var(--c-accent-soft); }

.header.fm-nav-desktop .fm-nav-source ul.sub-menu {
  display: block;
  position: absolute; z-index: 4; top: calc(100% + .35rem); left: 0;
  min-width: min(20rem, calc(100vw - 2 * var(--gutter)));
  max-width: min(28rem, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - var(--fm-nav-top, var(--header-h)) - 1rem);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: .45rem; margin: 0;
  background: rgba(255,255,255,.98); border: 1px solid var(--c-line);
  border-radius: var(--r-sm); box-shadow: var(--shadow-md);
}
.header.fm-nav-desktop .sub-menu.fm-submenu-align-end { left: auto; right: 0; }
.header.fm-nav-desktop .fm-nav-source .sub-menu .sub-menu {
  grid-column: 1 / -1;
  position: static; min-width: 0; max-width: none; max-height: none;
  margin: .25rem 0 .4rem .85rem; padding: 0 0 0 .5rem;
  overflow: visible; border: 0; border-left: 2px solid var(--c-accent-line);
  border-radius: 0; box-shadow: none;
}
.header.fm-nav-desktop .sub-menu li {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) 44px; align-items: center;
}
.header.fm-nav-desktop .sub-menu a {
  display: block; flex: 1 1 auto; min-width: 0; min-height: 44px;
  padding: .7rem .85rem; white-space: normal; overflow-wrap: anywhere;
}

.header.fm-nav-mobile { height: var(--header-h); }
.header.fm-nav-mobile .header__inner { min-height: var(--header-h); }
.header.fm-nav-mobile .header__inner--reusable { position: relative; padding-right: calc(var(--gutter) + 56px); }
.header.fm-nav-mobile .fm-header-block { display: block; }
.header.fm-nav-mobile .fm-nav-actions { position: absolute; top: 50%; right: var(--gutter); transform: translateY(-50%); z-index: 2; }
.header.fm-nav-mobile .fm-nav-toggle { display: grid; }
.fm-nav-panel.fm-nav-mobile {
  display: block;
  position: fixed; z-index: 105;
  inset: var(--fm-nav-top, var(--header-h)) 0 auto 0;
  width: 100%; max-width: none;
  max-height: calc(100dvh - var(--fm-nav-top, var(--header-h)));
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: max(var(--sp-4), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) max(var(--sp-6), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background: rgba(255,255,255,.98); border-bottom: 1px solid var(--c-line);
  box-shadow: 0 16px 32px -24px rgba(16,23,25,.45);
  opacity: 0; visibility: hidden;
  transform: translateY(-.5rem);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.fm-nav-panel.fm-nav-mobile.is-open { opacity: 1; visibility: visible; transform: none; }
.fm-nav-panel.fm-nav-mobile > ul,
.fm-nav-panel.fm-nav-mobile > div > ul {
  display: block; width: min(100%, var(--wrap)); margin: 0 auto; padding: 0;
}
.fm-nav-panel.fm-nav-mobile li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; margin: 0; }
.fm-nav-panel.fm-nav-mobile a {
  display: flex; align-items: center; min-width: 0; min-height: 44px;
  padding: .7rem .25rem; font-size: clamp(1rem, 3.5vw, 1.25rem);
  line-height: 1.35; white-space: normal; overflow-wrap: anywhere;
}
.fm-nav-panel.fm-nav-mobile > a {
  width: min(100%, var(--wrap)); margin-inline: auto;
  font-family: var(--ff-display); font-weight: 700;
}
.fm-nav-panel.fm-nav-mobile > .btn { margin-top: var(--sp-3); justify-content: center; }
.fm-nav-panel.fm-nav-mobile .sub-menu { grid-column: 1 / -1; width: 100%; padding-left: clamp(.75rem, 4vw, 1.75rem); border-left: 2px solid var(--c-accent-line); }
.fm-nav-panel.fm-nav-mobile .sub-menu a { font-size: 1rem; }
.fm-nav-panel.fm-nav-mobile .nav__pille { display: none; }

.fm-nav-source .current-menu-item > a,
.fm-nav-source .current_page_item > a,
.fm-nav-source .current-menu-ancestor > a,
.fm-nav-source a[aria-current],
.fm-nav-panel a[aria-current] { color: var(--c-text); font-weight: 600; /*background: var(--c-accent-soft);*/ }

.burger { position: relative; }
.burger span,
.burger span + span {
  position: absolute; top: 50%; left: 50%; margin: 0;
  transform: translate(-50%, -6px);
}
.burger span:nth-child(2) { transform: translate(-50%, 0); }
.burger span:nth-child(3) { transform: translate(-50%, 6px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); }

@media (max-width: 420px) {
  .header.fm-nav-mobile .brand img,
  .header.fm-nav-mobile .fm-header-logo img { width: min(190px, calc(100vw - 7rem)); }
}
@media (prefers-reduced-motion: reduce) {
  .fm-nav-panel.fm-nav-mobile,
  .fm-submenu-toggle > span,
  .burger span { transition: none; }
}