/* ============================================================
   FIX30 — Vollbild-Konfigurator
   Kein Seiten-Scroll: Screens füllen den Viewport, Wechsel per
   sanfter Transition. Sichtbares Chrome: nur Progress-Bar oben
   und die Karten. Farben & Schrift von mda-consult.at
   (Schwarz #131313, Gelb #fcc50d, Manrope).
   ============================================================ */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #131313;
  --yellow: #fcc50d;
  --body-c: #55555c;
  --muted: #9a9aa2;
  --line: #e7e7ea;
  --bg: #ffffff;
  --tint: #f5f5f7; /* identisch zum Illustrations-Hintergrund */
  --radius: 16px;
  --font: "Manrope", -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--body-c);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, strong { color: var(--ink); font-weight: 800; letter-spacing: -0.02em; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ------------------------------------------------------------
   App-Shell: Viewport fix, kein Scroll
   ------------------------------------------------------------ */
body.app-body { overflow: hidden; height: 100dvh; }

.app { position: fixed; inset: 0; }

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-y: auto;
  padding: 84px 24px 32px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}
.screen.aktiv {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.4s ease 0.08s, transform 0.4s ease 0.08s, visibility 0s;
}
.screen-inner {
  margin: auto;               /* vertikal + horizontal zentriert */
  width: 100%;
  max-width: 1280px;
  text-align: center;
}
.screen-inner.schmal { max-width: 640px; }

/* ------------------------------------------------------------
   Topbar
   ------------------------------------------------------------ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px 12px;
  pointer-events: none;
  /* Weicher Verlauf: scrollende Screens (Termin) laufen sonst sichtbar
     durch das Logo */
  background: linear-gradient(to bottom, var(--bg) 78%, rgba(255, 255, 255, 0));
}

/* Dock-Nav oben mittig: Pill mit Blur, Flip beim Hover (ohne Farb-Gradients) */
.dock {
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.6rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
}
.dock-item {
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.18s ease;
}
.dock-item:hover { background: var(--tint); }
.dock-face {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  font: 700 0.88rem var(--font);
  color: var(--ink);
}
.dock-face svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.topbar > * { pointer-events: auto; }
.fix30-logo {
  background: none;
  border: none;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 0;
}
/* Logo-Pfeil als gezeichnetes SVG statt Schriftzeichen: das Manrope-→
   ist gedrungen und wirkt im Wortbild klobig. Hier eine duenne Linie
   mit offener, runder Spitze — skaliert in em mit der Schriftgroesse,
   Farbe bewusst fest auf CI-Gelb (gilt auch auf dunklen Leisten). */
.pfeil {
  width: 0.63em; height: 0.5em;
  margin: 0 0.09em;
  fill: none; stroke: var(--yellow);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
/* Ausserhalb von Flex-Containern haengt das SVG auf der Grundlinie —
   anheben auf die optische Mitte der Versalhoehe. */
.fix30-logo .pfeil { vertical-align: 0.09em; }
/* Auf dem Hero sitzt das Logo zentral im Screen — Topbar-Logo ausblenden */
/* Auf dem Hero traegt der Screen selbst das FIX30-Zeichen — das in der
   Leiste waere doppelt. Nur ausgeblendet, nicht aus dem Fluss genommen:
   es haelt seinen Platz links, der Absender rechts haengt ohnehin an
   margin-left:auto. */
.topbar.auf-hero .fix30-logo { opacity: 0; pointer-events: none; }

/* Burger (nur mobil sichtbar) */
.dock-burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 11px 10px;
  flex-direction: column; justify-content: space-between;
}
.dock-burger span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
.dock-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.dock-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dock-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ------------------------------------------------------------
   Buttons & Links
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0.85rem 1.9rem;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-gross {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
  font-size: 1.05rem;
  padding: 1.05rem 2.6rem;
}
.btn-gross:hover { background: #ffd23d; border-color: #ffd23d; }
.btn-riesig {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  padding: 1.25rem 3.4rem;
}
.btn-riesig:hover { background: #ffd23d; border-color: #ffd23d; }
.btn-pfeil { display: inline-block; margin-left: 0.45rem; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.btn:hover .btn-pfeil { transform: translateX(4px); }

/* Slide-Through: Pfeil verlässt rechts, ein neuer kommt links rein.
   Feste Pfeil-„Blende“ hinter dem Label — der Abstand Label↔Pfeil bleibt
   konstant, nur der Zwei-Pfeil-Streifen schiebt sich durch. */
.btn-slide { display: inline-flex; align-items: center; gap: 0.5rem; }
.bs-label { display: inline-block; }
.bs-arrowbox { position: relative; display: inline-block; width: 1.25em; height: 1.05em; overflow: hidden; }
.bs-a {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: grid; place-items: center; line-height: 1;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.2, 1);
}
.bs-a:nth-child(1) { transform: translateX(0); }          /* Ausgangs-Pfeil (Home) */
.bs-a:nth-child(2) { transform: translateX(-135%); }      /* wartet links außerhalb */
.btn-slide:hover .bs-a:nth-child(1) { transform: translateX(135%); }  /* raus nach rechts */
.btn-slide:hover .bs-a:nth-child(2) { transform: translateX(0); }     /* rein von links */
.btn-sekundaer { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-sekundaer:hover { border-color: var(--ink); }

.link-neben {
  background: none;
  border: none;
  color: var(--body-c);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line);
  transition: color 0.18s ease;
}
.link-neben:hover { color: var(--ink); text-decoration-color: var(--yellow); }

/* ------------------------------------------------------------
   Screen: Hero
   ------------------------------------------------------------ */
.hero-inner {
  max-width: 960px; /* breiter für die längere Headline */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Gegenstueck zu den 84px Kopfleisten-Abstand des Screens: seit der
     Landing-Inhalt darunter haengt, hat der Screen unten kein Polster
     mehr — ohne diesen Ausgleich zentriert der Hero 42px zu tief. */
  padding-bottom: 84px;
}
/* margin-auto oben UND unten zentriert den Inhalt. Der untere Teil sass
   frueher an der Hero-Fusszeile — seit die in die Kopfleiste gewandert
   ist, braucht das letzte Element das Gegenstueck, sonst rutscht alles
   nach unten. */
.hero-inner .hero-logo { margin-top: auto; }
.hero-inner .hero-aktionen { margin-bottom: auto; }
.hero-logo {
  display: inline-flex;
  align-items: center;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.55rem 1.1rem;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1rem;
}
/* .hero-logo ist inline-flex, align-items:center richtet das SVG aus */
/* Pill über der Headline */
.hero-pill {
  display: inline-block;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 0.45rem 1.15rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.hero-inner h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  line-height: 1.1;
  margin-bottom: 0.9rem;
}
/* Rotierende Claim-Zeile unter der Headline: fixes "Alles fix:", Wort
   wechselt im gelben Kasten mit Buchstaben-Stagger */
.rot-zeile {
  display: block;
  white-space: nowrap;
  font-size: clamp(1.6rem, 3.8vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 2.7rem;
}
.rot-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: bottom;
  background: var(--yellow);
  color: var(--ink);
  border-radius: 0.22em;
  padding: 0.11em 0.2em 0.09em;
  overflow: hidden;
  line-height: 1.32; /* etwas höher, damit Unterlängen/Umlaute (Qualität) reinpassen */
  transition: width 0.55s cubic-bezier(0.34, 1.25, 0.64, 1); /* federnd */
}
.rot-wort2 { display: inline-flex; white-space: pre; }
.rot-wort2.abs { position: absolute; left: 0.2em; top: 0; bottom: 0.05em; align-items: center; }
.rot-ch {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.5s cubic-bezier(0.34, 1.25, 0.64, 1);
}
.rot-ch.drin { transform: none; }
.rot-ch.raus { transform: translateY(-115%); }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.hero-aktionen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.hero-aktionen .link-neben { margin-top: 0.4rem; }
/* Einsatzgebiet: dezente Zeile unter den Aktionen */
.hero-gebiet {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
.hero-gebiet svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Absender rechts oben, neben dem Menueknopf. pointer-events wieder
   einschalten: die Topbar selbst laesst Klicks durch. */
/* margin-left:auto statt space-between-Vertrauen: auf dem Hero ist das
   Logo absolut positioniert, dann waere topbar-rechts das einzige
   Flusskind und stuende ploetzlich links. */
.topbar-rechts { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
/* Auf dem Hero uebernimmt die mitscrollende Kopie im Inhalt */
.topbar.auf-hero .marke-mda { display: none; }
.marke-mda-oben {
  position: absolute; top: 22px; right: 28px;
  /* ueber dem weissen Topbar-Verlauf (z 50), unter dem Dock (z 60) —
     sonst verdeckt die fixe Leiste den Absender am Hero */
  z-index: 55;
}
.marke-mda {
  display: inline-flex; align-items: center; gap: 0.35rem;
  pointer-events: auto; text-decoration: none;
  font-size: 0.72rem; font-weight: 600; color: var(--muted);
  letter-spacing: 0.01em;
}
.marke-mda img { display: block; opacity: 0.9; }
.marke-mda:hover { color: var(--ink); }
@media (max-width: 720px) {
  /* Am Telefon ist die Zeile neben dem Burger zu lang — nur das Zeichen */
  .marke-mda { font-size: 0; gap: 0; }
  .marke-mda img { width: 34px; height: 12px; }
}
}
.hero-fuss-mda { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; }
.hero-fuss-mda:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Flache Browserfenster: Hero kompakter, damit die Fussnote sichtbar bleibt */
@media (max-height: 780px) {
  .hero-logo { margin-bottom: 0.6rem; }
  .hero-inner h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
  .rot-zeile { font-size: clamp(1.4rem, 3.2vw, 2rem); margin-bottom: 1.6rem; }
  .btn-riesig { padding: 1.05rem 2.9rem; }
  .hero-fuss { padding-top: 1rem; }
}
.hero-fuss {
  margin-top: auto;           /* schiebt die Zeile ganz nach unten */
  padding-top: 2rem;
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0.15rem;
}
.hero-fuss a { color: var(--muted); text-underline-offset: 3px; }
.hero-fuss a:hover { color: var(--ink); }
.hero-fuss-logo {
  display: inline-block;
  height: 20px; width: auto;
  vertical-align: -5px;
  border-radius: 3px;
  margin-right: 0.25rem;
}
.hero-fuss { color: var(--body-c); }

/* ------------------------------------------------------------
   Screen: Fragen-Flow
   ------------------------------------------------------------ */
/* Weicher Übergang zwischen den Fragen:
   raus beschleunigend (kurz), rein entschleunigend (expo-out, laenger),
   Karten gestaffelt nacheinander */
.wz-schritt { animation: schrittRein 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.wz-schritt.weg {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.22s cubic-bezier(0.4, 0, 1, 1), transform 0.22s cubic-bezier(0.4, 0, 1, 1);
  pointer-events: none;
}
@keyframes schrittRein {
  from { opacity: 0; transform: translateY(24px); }
}
.wz-schritt .wz-kachel { animation: kachelRein 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.wz-kacheln .wz-kachel:nth-child(1) { animation-delay: 0.06s; }
.wz-kacheln .wz-kachel:nth-child(2) { animation-delay: 0.12s; }
.wz-kacheln .wz-kachel:nth-child(3) { animation-delay: 0.18s; }
@keyframes kachelRein {
  from { opacity: 0; transform: translateY(20px); }
}

.wz-kopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: clamp(1.2rem, 3.5vh, 2.4rem);
}
.wz-progress {
  width: min(240px, 55%);
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.wz-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--yellow);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Rueckgriff auf die vorige Antwort in der Frage — gelbe Markierung
   wie im Hero, damit klar ist, worueber gerade entschieden wird. */
.frage-echo {
  background: linear-gradient(var(--yellow), var(--yellow)) 0 88% / 100% 0.16em no-repeat;
  white-space: nowrap;
}

.wz-schritt h2 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); margin-bottom: clamp(1.4rem, 3.5vh, 2.4rem); }
.wz-sub { max-width: 36em; margin: 0 auto 2.4rem; font-size: 1rem; }
/* Im Flow sitzt die (seltene) Unterzeile direkt unter der großen Frage */
.wz-schritt .wz-sub { margin-top: -1.6rem; }
.screen-inner.schmal h2 { margin-bottom: 0.6rem; }

.kat-chip {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
}

/* Karten — sehr groß, randlos mit weichem Schatten */
.wz-kacheln {
  display: grid;
  gap: 1.4rem;
  justify-content: center;
  grid-template-columns: repeat(3, minmax(0, 500px));
}
.wz-kacheln.kacheln-2 { grid-template-columns: repeat(2, minmax(0, 440px)); }
.wz-kacheln.kacheln-4 { grid-template-columns: repeat(4, minmax(0, 290px)); gap: 1rem; }

.wz-kachel {
  position: relative;
  background: var(--bg);
  border: 1.5px solid var(--line); /* ruhender Rahmen wie bei shadcn-Cards */
  border-radius: 28px;
  overflow: hidden;
  text-align: left;
  padding: 0.9rem 0.9rem 1.15rem; /* Bild sitzt als Inset in der Karte */
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0 1px 3px rgba(19, 19, 19, 0.06), 0 10px 30px rgba(19, 19, 19, 0.06);
  /* Border blendet beim Hover weich zu Schwarz */
  transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease, box-shadow 0.2s ease;
}
/* Hover bewusst ruhig: Foto-Parallax + Pfeilkreis + schwarzer Rahmen (kein Lift) */
.wz-kachel:hover { border-color: var(--ink); }
.wz-kachel.gewaehlt { border-color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
/* Pfeil als runder Button rechts unten — beim Hover fuellt sich der Kreis
   weich schwarz, der Pfeil wird weiss; sonst keine Bewegung */
.wz-pfeil {
  position: absolute;
  right: 1.15rem;
  bottom: 1.05rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  pointer-events: none;
  transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wz-kachel:hover .wz-pfeil { background: var(--ink); color: #fff; }
.wz-kachel.gewaehlt .wz-pfeil { display: none; } /* Overlay übernimmt die Karte */
.wz-kachel-bild { position: relative; /* Anker fuer die Pill auf Fotos */ display: block; aspect-ratio: 3 / 2; max-height: clamp(180px, 32vh, 320px); width: 100%; background: var(--tint); border-radius: 18px; overflow: hidden; }
.wz-kachel-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
/* Parallax-Zoom: Bild waechst langsam ins Inset, Karte bleibt ruhig */
.wz-kachel:hover .wz-kachel-bild img { transform: scale(1.06); }
.wz-kachel-bild.ikon {
  aspect-ratio: auto;
  height: clamp(160px, 24vh, 216px);
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--tint); /* gleiches Grau wie Illustrationen & Pfeilkreis */
}
.wz-kachel-bild.ikon > svg { /* nur die Illustration selbst, nicht Chip-Icons */
  width: min(64%, 260px);
  height: auto;
  max-height: 82%;
}
/* Sobald Fotos und Symbole in einem Schritt nebeneinander stehen, bekommen
   die Symbol-Panels dasselbe 3:2 wie die Fotos. Vorher hing das an der
   Kartenzahl (4 oder 5) und griff deshalb beim Bad mit drei Karten nicht:
   „Belassen" stand dort sichtbar niedriger als die zwei Fotos daneben.
   Reine Symbolschritte behalten die kompakte Hoehe der Grundregel. */
.kacheln-gemischt .wz-kachel-bild.ikon {
  aspect-ratio: 3 / 2;
  height: auto;
  max-height: clamp(180px, 32vh, 320px);
}
/* Generierte Illustrations-Bilder füllen das Panel, Badge oben rechts */
.wz-kachel-bild.ikon.illu { display: block; position: relative; }
/* Illustrationen vollstaendig zeigen statt beschneiden — der Bild-Hintergrund
   ist exakt --tint, dadurch sind die Raender unsichtbar */
.wz-kachel-bild.ikon.illu img { width: 100%; height: 100%; object-fit: contain; }
/* Neu/Sanieren als beschrifteter Farb-Chip auf dem Bild:
   Neu = gelb gefuellt, Sanieren = weiss mit Ink-Rand, Belassen = ohne */
.illu-chip {
  position: absolute;
  top: 10px; right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.illu-chip em { font-style: normal; }
.illu-chip svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.illu-chip.neu { background: var(--yellow); }
.illu-chip.san { background: var(--bg); border: 1.5px solid var(--ink); }
/* Blitz: gelb wie "Neu" — es wird ja eine neue Heizung gesetzt */
.illu-chip.blitz { background: var(--yellow); }
.illu-chip.blitz svg { width: 11px; height: 11px; stroke: none; }
/* rechts Platz lassen, damit kein Text unter den Pfeilkreis läuft;
   min-height reserviert Platz für Unterfrage-Chips — Karte wächst beim
   Einblenden nicht mehr (ruhige Animation) */
.wz-kachel-text { display: block; padding: 1.15rem 4.4rem 2.4rem 0.75rem; min-height: 9.7rem; }
.wz-kachel-text strong { display: block; font-size: 1.35rem; letter-spacing: -0.01em; }
.wz-kachel-text em { display: block; font-style: normal; font-size: 0.95rem; color: var(--muted); margin-top: 0.3rem; }
.wz-kachel.ohne-bild .wz-kachel-text { padding: 3.2rem 1.9rem; text-align: center; }
.wz-kachel.ohne-bild .wz-kachel-text strong { font-size: 1.35rem; }

/* Unterfrage ersetzt den Kartentext: Titel gleitet raus, Frage + Chips rein.
   Bild/Icon der Karte bleiben stehen, Kartengröße bleibt konstant. */
.wz-kachel-text {
  transition: opacity 0.26s cubic-bezier(0.4, 0, 1, 1),
              transform 0.26s cubic-bezier(0.4, 0, 1, 1),
              filter 0.26s cubic-bezier(0.4, 0, 1, 1);
}
.wz-kachel-text.weg { opacity: 0; transform: translateY(-8px); filter: blur(2px); }
.wz-kachel-text.frage-drin {
  padding-bottom: 1.2rem; /* gleicht die höhere Frage-Zeile aus — Karte bleibt gleich groß */
}
/* Frage und Chips gleiten gestaffelt rein (backwards = unsichtbar bis zum Start),
   expo-out: schnell da, weich gelandet */
.wz-kachel-text.frage-drin .wz-unter-frage,
.wz-kachel-text.frage-drin .wz-chip {
  animation: unterAuf 0.65s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.wz-kachel-text.frage-drin .wz-chip:nth-child(1) { animation-delay: 0.08s; }
.wz-kachel-text.frage-drin .wz-chip:nth-child(2) { animation-delay: 0.16s; }
.wz-kachel-text.frage-drin .wz-chip:nth-child(3) { animation-delay: 0.24s; }
.wz-kachel-text.frage-drin .wz-chip:nth-child(4) { animation-delay: 0.32s; }
@keyframes unterAuf {
  from { opacity: 0; transform: translateY(10px); filter: blur(2px); }
  to { filter: blur(0); }
}
/* Auf dem Handy ohne Weichzeichner: einen animierten blur muss das Geraet
   fuer jedes Einzelbild neu rechnen — auf dem iPhone sichtbar ruckelig,
   und das viermal versetzt fuer jeden Chip. Opacity und transform laufen
   dagegen auf der Grafikeinheit. Die Variante war schon vorhanden, wurde
   aber nirgends verwendet. */
@keyframes unterAufMobil {
  from { opacity: 0; transform: translateY(6px); }
}

.wz-unter-frage {
  display: block;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  margin-bottom: 0.7rem;
}
/* Zusatz unter der Unterfrage (z. B. Fluegeltueren zaehlen als 2).
   Sitzt bewusst zwischen Frage und Chips: dort wird er im Moment der
   Eingabe gelesen, nicht vorher ueberblaettert. */
.wz-unter-hinweis {
  display: block;
  margin: -0.45rem 0 0.65rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}
/* Farbvarianten direkt auf der Karte. Bewusst keine Unterfrage: der
   Kunde soll beide Toene sehen koennen, ohne sich vorher fuer die Linie
   entschieden zu haben — der Punkt tauscht nur das Foto. */
.wz-farben { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.wz-farbe {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.62rem 0.28rem 0.32rem;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font: 600 0.74rem/1 var(--font);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.wz-farbe i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ton);
  /* Innenkante statt Rahmen: helle Toene verschwinden sonst auf Weiss */
  box-shadow: inset 0 0 0 1px rgba(19, 19, 19, 0.16);
}
.wz-farbe:hover { border-color: var(--ink); color: var(--ink); }
.wz-farbe.aktiv { border-color: var(--ink); color: var(--ink); }

/* "i" hinter dem Kurzhinweis. Gleiche gelbe Sprache wie in der
   Zusammenfassung, damit "gelbes i" ueberall "hier steht mehr" heisst. */
.wz-info {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-left: 0.35rem;
  border: 0;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font: 700 0.62rem/1 var(--font);
  cursor: pointer;
  vertical-align: 1px;
}
.wz-info:hover { background: var(--ink); color: #fff; }

/* Chip mit Symbol (Freieingabe): Kreis-Plus statt drei Punkten */
.wz-chip-ikon { display: inline-flex; align-items: center; gap: 0.32rem; }
.chip-ikon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.wz-unter-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.wz-kachel.ohne-bild .wz-unter-chips { justify-content: center; }
/* Chips in der Karte kompakter, damit auch 4 Optionen einzeilig passen */
.wz-unter-chips .wz-chip { padding: 0.42rem 0.7rem; font-size: 0.82rem; }
/* Freie Stückzahl-Eingabe (Chip "mehr …") */
.wz-anzahl { display: flex; align-items: center; gap: 0.4rem; }
.wz-anzahl-feld {
  width: 4.2rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  font: 700 0.88rem var(--font);
  color: var(--ink);
  text-align: center;
}
.wz-anzahl-feld:focus { outline: none; border-color: var(--ink); }
/* Native Spinner-Pfeile ausblenden — zu viel UI in der kleinen Karte */
.wz-anzahl-feld::-webkit-outer-spin-button,
.wz-anzahl-feld::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wz-anzahl-feld { -moz-appearance: textfield; appearance: textfield; }
/* Kleiner Zurück-Pfeil: vom Zahlenfeld zurück zu den Chips */
.wz-anzahl-zurueck {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: none;
  color: var(--muted);
  font-size: 0.85rem; line-height: 1;
  display: grid; place-items: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.wz-anzahl-zurueck:hover { border-color: var(--ink); color: var(--ink); }
.wz-anzahl-einheit { font: 700 0.8rem var(--font); color: var(--muted); margin-left: -0.15rem; }
.wz-anzahl-ok { background: var(--ink); color: #fff; border-color: var(--ink); }
.wz-anzahl-ok:hover { background: #000; }
/* Zahlen-Chips (z. B. Fensteranzahl): schmal und gleich breit */
.wz-unter-chips .wz-chip-num {
  min-width: 2.1rem;
  padding-left: 0.3rem; padding-right: 0.3rem;
  text-align: center;
}
.wz-chip {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.wz-chip:hover { border-color: var(--ink); background: var(--tint); }

/* "Weiß nicht" als dezenter Textlink */
/* "Weiß ich nicht" war ein unterstrichener Textlink und ging neben den
   grossen Kacheln unter — dabei ist es fuer Unsichere die wichtigste
   Option. Jetzt eine eigene Pille mit Rahmen: sichtbar als Auswahl,
   durch den fehlenden Fuellton weiterhin klar zweitrangig. */
.wz-skip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.8rem 0 0.8rem; /* mehr Luft — klebt nicht am unteren Rand */
  padding: 0.7rem 1.2rem 0.7rem 0.85rem;
  max-width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.wz-skip::before {
  content: '?';
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink);
  font: 700 0.72rem/1 var(--font);
  transition: background 0.18s ease;
}
.wz-skip:hover { border-color: var(--ink); color: var(--ink); }
.wz-skip:hover::before { background: var(--yellow); }
.wz-skip-zusatz { font-style: normal; }
@media (max-width: 560px) { .wz-skip-zusatz { display: none; } }

.wz-zurueck {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.wz-zurueck:hover { border-color: var(--ink); color: var(--ink); }

/* m²-Eingabe — ruhig: große Zahl, ein Slider, schwarzer Weiter-Button */
.wz-zahl { max-width: 440px; margin: 0 auto; display: grid; gap: 2.4rem; justify-items: center; }
.wz-zahl-wert { display: flex; align-items: baseline; gap: 0.5rem; }
.wz-zahl-wert input {
  width: 4.2ch;
  border: none;
  font: 800 3.8rem var(--font);
  color: var(--ink);
  text-align: center;
  background: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.wz-zahl-wert input::-webkit-outer-spin-button,
.wz-zahl-wert input::-webkit-inner-spin-button { -webkit-appearance: none; }
.wz-zahl-wert input:focus { outline: none; }
.wz-zahl-wert span { font-size: 1.4rem; font-weight: 700; color: var(--muted); }
.wz-zahl input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: var(--line); /* Füllstand setzt JS per Gradient */
  outline: none;
}
.wz-zahl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 0 2px 10px rgba(19, 19, 19, 0.15);
  cursor: pointer;
}
.wz-zahl input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 0 2px 10px rgba(19, 19, 19, 0.15);
  cursor: pointer;
}

/* Kontakt-Formular */
.wz-kontakt {
  max-width: 460px;
  margin: 0 auto;
  display: grid;
  gap: 0.65rem;
  text-align: left;
}
.wz-kontakt label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
}
.wz-kontakt input, .termin-kontakt input {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  width: 100%;
}
.wz-kontakt input:focus, .termin-kontakt input:focus {
  outline: none;
  border-color: var(--ink);
}
.wz-kontakt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.wz-kontakt .btn-gross { margin-top: 0.6rem; }

/* ------------------------------------------------------------
   Screen: Ergebnis — Layout wie Ursprungs-Mockup:
   dunkle Preiskarte links, Auswahl-Karte rechts
   ------------------------------------------------------------ */
.erg-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.6rem;
  align-items: stretch; /* beide Karten gleich hoch */
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
}
.erg-preiskarte {
  background: var(--tint);
  color: var(--ink);
  border-radius: 24px;
  padding: 1.5rem 1.7rem;
}
.erg-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--yellow);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 0.8rem;
}
/* Badge und Preisumschalter in einer Zeile. Der Badge hatte den
   Abstand nach unten selbst; jetzt traegt ihn die Zeile, sonst sitzt
   der Schalter auf einer anderen Grundlinie als der Badge. */
.erg-kopfzeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 0.8rem;
}
.erg-kopfzeile .erg-badge { margin-bottom: 0; }
/* Segmentschalter netto/brutto. Bewusst klein und ruhig: er soll
   erreichbar sein, aber dem Preis nicht die Aufmerksamkeit nehmen. */
.preis-schalter {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 2px;
}
.preis-schalter button {
  border: 0; cursor: pointer;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease;
}
.preis-schalter button[aria-pressed="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.preis-schalter button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .preis-schalter button { transition: none; } }

.erg-preis { font-size: clamp(2.1rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
/* Quadratmeterpreis auf der Grundlinie des Gesamtpreises. Umbruch
   erlaubt (lange Betraege passen auf schmalen Schirmen sonst nicht),
   der Wert selbst bricht dank nowrap nie mittendrin. */
.erg-preis-zeile { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.15rem 0.7rem; }
.erg-klein { font-size: 0.82rem; color: var(--muted); margin-top: 0.35rem; }
.erg-dauer {
  display: flex; align-items: center; gap: 1rem;
  background: var(--bg);
  border-radius: 14px;
  padding: 0.65rem 1.1rem;
  margin: 1.45rem 0;
}
/* "30 Tage" gehoert zusammen — die Zahl allein gross und die Einheit
   klein liess die Aussage auseinanderfallen. Geschuetztes Leerzeichen
   im Markup, damit die beiden nie auf zwei Zeilen geraten. */
.erg-dauer strong { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.erg-dauer span { font-size: 0.85rem; font-weight: 700; }
.erg-dauer em { font-style: normal; font-weight: 400; font-size: 0.75rem; color: var(--muted); }
/* Drei Leistungen untereinander, je mit eigenem Symbol. Die Werte
   ("✓ inklusive") sind entfallen — sie sagten dreimal dasselbe, und dass
   die Punkte dabei sind, ergibt sich daraus, dass sie hier stehen. */
.erg-inkl {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 1.4rem 0 0.35rem;
  border-top: 1px solid var(--line);
  list-style: none;
}
.erg-inkl li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
}
.erg-inkl svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.erg-buttons { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.4rem; }
.btn-ikon {
  width: 17px; height: 17px; margin-right: 0.5rem;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.erg-pdfnote {
  display: flex; align-items: center; gap: 0.45rem;
  margin-top: 0.65rem;
  font-size: 0.76rem; font-weight: 600; color: var(--body-c);
}
.erg-pdfnote-ikon {
  width: 15px; height: 15px; flex-shrink: 0;
  fill: none; stroke: var(--ink); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.erg-stern { font-size: 0.7rem; color: var(--muted); margin-top: 0.55rem; line-height: 1.45; }
.btn-hell {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-hell:hover { background: rgba(19, 19, 19, 0.06); }
.erg-auswahl {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 1px 3px rgba(19, 19, 19, 0.06), 0 10px 30px rgba(19, 19, 19, 0.06);
  padding: 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.erg-auswahl h3 { margin-bottom: 0.5rem; font-size: 1rem; }
/* Jede Zeile ist ein Button: klickt man sie, landet man genau bei dieser
   Frage und kommt danach direkt zum Angebot zurück. */
.erg-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  font-size: 0.84rem;
  font-family: var(--font);
  color: var(--body-c);
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--tint);
  border-radius: 6px;
  padding: 0.34rem 0.4rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.erg-zeile:hover { background: var(--tint); color: var(--ink); }
.erg-zeile:last-child { border-bottom: none; } /* keine Linie direkt über dem Button */
/* Fester Mindestabstand zum Button — margin-top:auto allein reicht nicht,
   sobald die Karte voll ist und keine freie Fläche mehr bleibt */
#ergAuswahl { margin-bottom: 1.1rem; }
.erg-zeile strong { font-weight: 700; text-align: right; margin-left: auto; }
.erg-stift {
  width: 13px; height: 13px; flex-shrink: 0;
  fill: none; stroke: var(--muted);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transition: opacity 0.15s ease;
}
.erg-zeile:hover .erg-stift, .erg-zeile:focus-visible .erg-stift { opacity: 1; stroke: var(--ink); }
/* Ohne Hover (Touch) bzw. auf schmalen Screens den Stift dauerhaft zeigen */
@media (hover: none), (max-width: 860px) { .erg-stift { opacity: 0.45; } }

/* Sichtbar, aber zurückhaltend — Neustart ist die Nebenaktion,
   die Hauptsache sind die einzeln änderbaren Zeilen darüber */
.erg-anpassen {
  margin-top: auto; /* haftet am Kartenboden */
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  font: 700 0.82rem var(--font); color: var(--body-c);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.erg-anpassen:hover { border-color: var(--muted); background: var(--tint); color: var(--ink); }
.erg-anpassen svg {
  width: 14px; height: 14px; flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.erg-zeile span:first-child { display: inline-flex; align-items: center; gap: 0.55rem; }
.erg-ikon {
  width: 15px; height: 15px;
  fill: none; stroke: var(--muted);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.erg-anpassen:hover { color: var(--ink); }
.erg-fussnote { font-size: 0.72rem; color: var(--muted); max-width: 46em; margin: 0.9rem auto 0; text-align: center; }
.erg-anfrage-link {
  background: none; border: none; cursor: pointer; padding: 0;
  font: 600 0.75rem var(--font); color: var(--muted); text-decoration: underline;
}
.erg-anfrage-link:hover { color: var(--ink); }

.aktionen-reihe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
}

/* ------------------------------------------------------------
   Screen: Termin — Layout wie Ursprungs-Mockup:
   Intro mit Vorteilen links, Formular-Karte rechts
   ------------------------------------------------------------ */
.termin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
}
.termin-intro h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 0.8rem; }
.termin-intro .wz-sub { margin-bottom: 1.2rem; }
.termin-liste { list-style: none; display: grid; gap: 0.55rem; margin-bottom: 1.4rem; }
.termin-liste li { padding-left: 1.6rem; position: relative; font-size: 0.95rem; font-weight: 600; }
.termin-liste li::before { content: "✓"; position: absolute; left: 0; color: var(--ink); font-weight: 800; }
/* Cal.com-Buchung (nur aktiv, wenn CAL_LINK gesetzt ist) */
/* Kein eigener Rahmen: die Buchungsseite zeichnet innen bereits einen —
   sonst Kasten im Kasten. */
.termin-cal { -webkit-overflow-scrolling: touch; }
.termin-cal[hidden] { display: none; }
/* .termin-karte hat display:grid — das schlaegt das hidden-Attribut,
   deshalb hier explizit ausblenden */
.termin-karte[hidden] { display: none; }
/* Feste Hoehe ist Pflicht: ein normales iframe kennt die Inhaltshoehe nicht
   und faellt sonst auf 150px zurueck. Bookings scrollt innen selbst weiter. */
.termin-cal iframe {
  border: 0;
  width: 100%;
  height: min(82vh, 900px);
  display: block;
  border-radius: 14px;
}
.bookings-knopf { margin: 0 auto; display: inline-flex; }
.bookings-ausweich {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.9rem;
  text-align: center;
}
.bookings-ausweich a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Bei aktiver Buchung bekommt der Kalender den ganzen Screen: einspaltig,
   Text oben, Kalender darunter. Cal klappt ab ~900px Breite in seine
   Drei-Spalten-Ansicht auf (Details | Kalender | Uhrzeiten).
   Der Termin-Screen ist als einziger scrollbar — Cals Kalender braucht mehr
   Hoehe als uebrig ist, und den Text darueber zusammenzuquetschen, damit
   alles auf einen Blick passt, ist der schlechtere Tausch.
   margin: 0 auto statt auto: bei ueberlangem Inhalt wuerde die vertikale
   Zentrierung im Flex-Container den oberen Rand abschneiden. */
#s-termin.cal-aktiv .screen-inner { margin: 0 auto; }
#s-termin.cal-aktiv .termin-intro { text-align: center; }
#s-termin.cal-aktiv .termin-intro .wz-sub { margin-bottom: 1.4rem; }
#s-termin.cal-aktiv .termin-intro h2 { margin-bottom: 0.9rem; }
/* Eigene Zeile statt neben dem Zurueck-Button. :not([hidden]) ist Absicht:
   ein blankes display:block waere spezifischer als .termin-gross[hidden]
   und wuerde den Hinweis wieder dauerhaft einblenden. */
#s-termin.cal-aktiv .termin-gross:not([hidden]) {
  display: block;
  max-width: 620px;
  margin: 0 auto 1.2rem;
}
/* Haken untereinander, Block als Ganzes zentriert, Text darin linksbuendig
   — sonst tanzen die Zeilenanfaenge. */
#s-termin.cal-aktiv .termin-liste {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 1.5rem;
  text-align: left;
  gap: 0.7rem;
}
#s-termin.cal-aktiv .link-neben { margin-top: 0; }
#s-termin.cal-aktiv .termin-grid {
  /* minmax(0,1fr) statt 1fr: das Cal-Embed hat eine eigene Mindestbreite und
     wuerde sonst die Spalte (und alle Texte darin) ueber den Viewport druecken */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.7rem;
  max-width: 1060px;
  align-items: start;
}
#s-termin.cal-aktiv .termin-grid > * { min-width: 0; }
/* Abstand als margin, nicht als padding am Screen: in Scroll-Containern
   wird das untere padding beim Scrollen verschluckt. */
#s-termin.cal-aktiv .termin-cal {
  height: auto;
  max-height: none;
  overflow: visible;
  margin-bottom: 3rem;
}

.termin-karte {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 1px 3px rgba(19, 19, 19, 0.06), 0 10px 30px rgba(19, 19, 19, 0.06);
  padding: 1.3rem 1.5rem 1.25rem;
  text-align: left;
  display: grid;
  gap: 0.45rem;
}
/* Der Zurueck-Knopf ist ein eigenes Gitterkind. Am Desktop gehoert er
   unter den Einleitungstext (linke Spalte), am Telefon ans Ende, damit
   man ihn nicht vor dem Kalender liest. */
.termin-zurueck { grid-column: 1; justify-self: start; margin-top: -0.6rem; }
@media (max-width: 860px) {
  .termin-grid { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .termin-grid > * { min-width: 0; }
  .termin-zurueck { order: 9; justify-self: center; margin-top: 0; }
  .termin-karte { max-width: 480px; }
  /* Ergebnis mobil: gestapelt (Preiskarte oben, Auswahl unten), scrollbar */
  .erg-grid { grid-template-columns: 1fr; max-width: 480px; }
  #s-ergebnis { align-items: flex-start; }
  #s-ergebnis .screen-inner { margin: 0 auto; }
  /* Buttons mobil: volle Breite, einzeilig — kein 2-3-Zeilen-Umbruch */
  .erg-buttons { flex-direction: column; align-items: stretch; }
  .erg-buttons .btn { width: 100%; white-space: nowrap; font-size: 0.88rem; padding: 0.75rem 0.9rem; }
}
/* display: inline-block schlaegt das hidden-Attribut — ohne diese Zeile
   stand der 120-m²-Hinweis immer da, egal was die Logik sagt. */
.termin-gross[hidden] { display: none; }
.termin-gross {
  display: inline-block;
  background: #fdf3d0;
  border-radius: 10px;
  padding: 0.6rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1rem;
  max-width: 34em;
}
.termin-schritt {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-top: 0.15rem;
}
.termin-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* Tage in EINER Reihe: bei drei Wochen kommen bis zu neun Termine
   zusammen, im Raster waeren das drei Zeilen und die Karte zu hoch.
   Gewischt wird direkt, die Pfeile sind fuer Maus und Tastatur. */
/* Pfeile liegen UEBER den Raendern der Spur, nicht daneben — sonst
   beginnen die Tageskacheln eingerueckt und fluchten nicht mit dem
   uebrigen Inhalt der Karte. */
/* min-width:0 ist Pflicht: .termin-karte ist ein Grid, dessen Elemente
   per Vorgabe min-width:auto haben. Eine Rolle mit nowrap waechst dann
   auf ihre Inhaltsbreite, statt zu scrollen — der Behaelter war 1025px
   breit und die Pfeile hielten sich fuer ueberfluessig. */
.tage-leiste { position: relative; min-width: 0; }
.termin-chips.tage {
  display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth;
  /* kein scroll-snap: bei 74px-Kacheln bringt es nichts und verhindert,
     dass das Ende exakt erreicht wird — dann bliebe der Pfeil stehen */
  scrollbar-width: none; -ms-overflow-style: none;
}
.termin-chips.tage::-webkit-scrollbar { display: none; }
.termin-chips.tage .termin-chip { flex: 0 0 74px; }
.tage-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 30px; height: 100%; padding: 0;
  border: none; cursor: pointer;
  color: var(--ink); font-size: 1.4rem; line-height: 1;
  transition: opacity 0.15s ease;
}
/* Der Verlauf haengt an der KLASSE, nicht an der ID: mit #tageVor bekamen
   die Zeit-Pfeile keinen, und die Kacheln scrollten sichtbar darunter
   durch — die beiden Leisten sahen unterschiedlich aus. */
.tage-pfeil.links  { left: 0;  background: linear-gradient(90deg, var(--bg) 55%, transparent); }
.tage-pfeil.rechts { right: 0; background: linear-gradient(270deg, var(--bg) 55%, transparent); }
.tage-pfeil:hover { opacity: 0.6; }
.tage-pfeil.aus { visibility: hidden; pointer-events: none; }
/* Auf Touch-Geraeten wird gewischt — dort wuerden die Pfeile nur Kacheln verdecken */
@media (hover: none) { .tage-pfeil { display: none; } }
@media (prefers-reduced-motion: reduce) { .termin-chips.tage { scroll-behavior: auto; } }
/* Der Zeiten-Container traegt .termin-chips und war damit Flex — die
   Ueberschriften und Raster wurden dadurch nebeneinander gelegt und
   das Raster auf Chip-Breite gequetscht. Hier gilt Block, das Raster
   uebernimmt die Anordnung. */
#terminZeiten { display: block; }
/* Uhrzeiten wie die Tage in einer Rolle: mit halben Stunden waeren es
   sonst bis zu 16 Kacheln und die Karte wieder zu hoch. */
#terminZeiten {
  display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth;
  gap: 0.35rem; scrollbar-width: none; -ms-overflow-style: none;
}
#terminZeiten::-webkit-scrollbar { display: none; }
#terminZeiten .termin-chip { flex: 0 0 68px; }
#terminZeiten .chip-skelett { flex: 0 0 68px; }
/* Auch die Tages-Platzhalter brauchen eine feste Breite: ohne sie
   schrumpfen die leeren Bloecke im Flex-Container auf 0 — die Zeile
   war beim Laden schlicht unsichtbar, und die Karte wirkte eingefroren. */
#terminTage .chip-skelett { flex: 0 0 86px; }
@media (prefers-reduced-motion: reduce) { #terminZeiten { scroll-behavior: auto; } }
/* Ladezustand: gleiche Groesse wie die spaeteren Kacheln, damit nichts springt */
.chip-skelett {
  display: block; height: 58px; border-radius: 12px;
  background: linear-gradient(90deg, var(--tint) 25%, var(--line) 50%, var(--tint) 75%);
  background-size: 200% 100%;
  /* linear, nicht ease-in-out: der Verlauf legt pro Runde genau eine
     Kachelbreite zurueck und schliesst damit nahtlos an. Mit weicher
     Beschleunigung bremste er zum Rundenende ab und wirkte wie ein
     Ruckler statt wie eine Bewegung. */
  animation: skelett 1.4s linear infinite;
}
.chip-skelett.klein { height: 36px; }
@keyframes skelett {
  from { background-position: 0 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) { .chip-skelett { animation: none; } }
/* :empty, damit die leere Zeile im Normalfall keinen Platz einnimmt */
.termin-mini { font-size: 0.7rem; color: var(--muted); margin-top: -0.05rem; }
.termin-mini:empty { display: none; }
.termin-chip {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 0.4rem 0.9rem;
  display: grid;
  justify-items: center;
  gap: 0.02rem;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.termin-chip em { font-style: normal; font-size: 0.66rem; color: var(--muted); letter-spacing: 0.06em; }
.termin-chip strong { font-size: 1.05rem; line-height: 1.1; }
.termin-chip span { font-size: 0.68rem; color: var(--muted); }
.termin-chip.zeit { padding: 0.45rem 0.5rem; font-size: 0.88rem; font-variant-numeric: tabular-nums; }

.termin-chip:hover { border-color: var(--ink); }
/* Auswahl schwarz statt vollflaechig gelb: Gelb ist der Akzent, der pro
   Bildschirm auf EINE Sache zeigt (Fortschrittsbalken, Logo-Pfeil). Eine
   von fuenfzehn Kacheln in Vollgelb nimmt ihm diese Bedeutung. Schwarz
   sagt "gewaehlt" und entspricht btn-dark und dem Pfeilkreis beim Hover. */
.termin-chip.aktiv { border-color: var(--ink); background: var(--ink); color: #fff; }
/* strong steht in Zeile 47 global auf var(--ink) — das geerbte Weiss greift
   dort nicht, die Datumszahl waere schwarz auf schwarz. Deshalb explizit. */
.termin-chip.aktiv strong { color: #fff; }
.termin-chip.aktiv em, .termin-chip.aktiv span { color: rgba(255, 255, 255, 0.72); }
.termin-kontakt { display: grid; gap: 0.45rem; }
/* Vor- und Nachname nebeneinander: getrennte Felder kosten so keine
   zusaetzliche Zeile im Formular. Am Telefon untereinander, sonst wird
   jedes der beiden zu schmal zum Lesen des Platzhalters. */
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
/* OHNE DIESE ZEILE LAEUFT DAS ZWEITE FELD AUS DER KARTE. Rasterelemente
   haben min-width: auto und schrumpfen nicht unter ihre Inhaltsbreite —
   ein Eingabefeld bringt seine eigene Mindestbreite mit, und zwei davon
   passen dann nicht in eine Spalte, die schmaler ist als ihre Summe. */
.feld-paar > .feld, .feld-paar input { min-width: 0; }
/* Das zweite Feld traegt kein Symbol — dasselbe Zeichen zweimal
   nebeneinander sieht nach Fehler aus. Ohne Symbolspalte braucht die
   Eingabe links denselben Innenabstand, den sonst das Symbol erzeugt.

   DOPPELTE KLASSE, NICHT NUR EINE. ".feld-ohne-symbol" allein hat
   dieselbe Spezifitaet wie ".feld" — und ".feld" steht weiter unten in
   dieser Datei, gewinnt also. Genau so ist es beim ersten Versuch
   passiert: die Symbolspalte blieb stehen, das Nachnamensfeld hat aber
   kein Symbol, also rutschte die Eingabe in die 34 Pixel schmale erste
   Spalte und vom Platzhalter "Nachname" war nur noch "N" zu sehen.
   Derselbe Fehler wie seinerzeit bei .doc-liste-2sp. */
.feld.feld-ohne-symbol { grid-template-columns: 1fr; }
@media (max-width: 520px) {
  .feld-paar { grid-template-columns: 1fr; }
}
/* Icon liegt IM Feld, das Label traegt den Rahmen — so wandert der
   Fokusrahmen um beides und der Klick aufs Symbol trifft die Eingabe. */
.feld {
  display: grid; grid-template-columns: 34px 1fr; align-items: center;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px;
  transition: border-color 0.15s ease;
}
.feld:focus-within { border-color: var(--ink); }
.feld svg {
  width: 17px; height: 17px; justify-self: center;
  fill: none; stroke: var(--muted); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.15s ease;
}
.feld:focus-within svg { stroke: var(--ink); }
.termin-kontakt input {
  padding: 0.6rem 0.9rem 0.6rem 0;
  background: none; border: none; border-radius: 0; width: 100%;
}
.termin-kontakt input:focus { outline: none; box-shadow: none; }
/* Hier und nicht oben bei .feld-ohne-symbol: die Basisregel
   ".termin-kontakt input" hat dieselbe Spezifitaet und stuende sonst
   weiter unten — sie wuerde gewinnen. Reihenfolge statt !important. */
.termin-kontakt .feld-ohne-symbol input { padding-left: 0.9rem; }
.termin-karte .btn { margin-top: 0.55rem; justify-self: stretch; }
#s-termin .link-neben { margin-top: 0.9rem; }
/* Etwas Luft zur Topbar — der Screen scrollt, der Platz ist da. */
#s-termin .kat-chip { margin-top: 1.4rem; margin-bottom: 0.7rem; }

/* ------------------------------------------------------------
   Screens: Referenzen (Platzhalter) & Kontakt
   ------------------------------------------------------------ */
/* Referenzen: Kopf mit Stats + Nav, darunter horizontaler Karten-Slider */
#s-referenzen .screen-inner { max-width: 1180px; }
.ref-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  text-align: left;
  margin-bottom: 1.4rem;
}
.ref-kopf-text h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-top: 0.5rem; }
.ref-kopf-stats { display: flex; gap: clamp(0.9rem, 2.5vw, 2rem); margin-left: auto; }
.ref-kopf-stats div { display: grid; gap: 0.05rem; }
.ref-kopf-stats strong { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.ref-kopf-stats span { font-size: 0.72rem; color: var(--muted); }
.ref-nav { display: flex; gap: 0.5rem; }
.ref-pfeil {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 1.1rem;
  display: grid; place-items: center;
  transition: border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
.ref-pfeil:hover { border-color: var(--ink); }
.ref-pfeil:disabled { opacity: 0.35; cursor: default; }

.ref-slider {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.ref-slider::-webkit-scrollbar { display: none; }
.ref-card {
  flex: 0 0 clamp(240px, 26vw, 300px);
  scroll-snap-align: start;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(19, 19, 19, 0.05), 0 10px 26px rgba(19, 19, 19, 0.06);
  text-align: left;
}
.ref-card-bild { position: relative; aspect-ratio: 4 / 3; background: var(--tint); }
.ref-card-bild > img { width: 100%; height: 100%; object-fit: cover; }
/* Vorher/Nachher-Vergleich: Nachher-Bild als Basis, Vorher darüber vom
   rechten Rand her zugeschnitten; Trenner folgt dem Cursor (--pos) */
.ba { overflow: hidden; }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
/* Beschriftungs-Ebenen: werden exakt wie ihr Bild beschnitten, damit die
   Pill hinter dem anderen Foto verschwindet, sobald der Regler drüberzieht */
.ba-lage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ba-lage-v { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba-lage-n { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba-before, .ba-griff, .ba-lage { transition: clip-path 0.15s ease-out, left 0.15s ease-out; }
.ba.ba--live .ba-before, .ba.ba--live .ba-griff, .ba.ba--live .ba-lage { transition: none; }
/* Griff: breite, transparente Greif-Zone mit zentrierter Linie + Knopf;
   nur hierueber laesst sich der Vergleich ziehen */
.ba-griff {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 40px; transform: translateX(-20px);
  display: flex; align-items: center; justify-content: center;
  cursor: ew-resize; touch-action: none;
}
.ba-griff::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; transform: translateX(-1px);
  background: #fff; box-shadow: 0 0 0 1px rgba(19, 19, 19, 0.12);
}
.ba-knopf {
  position: relative; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 8px rgba(19, 19, 19, 0.25);
  display: grid; place-items: center;
  transition: transform 0.12s ease;
}
.ba-griff:active .ba-knopf { transform: scale(0.92); }
.ba-knopf svg {
  width: 18px; height: 18px;
  fill: none; stroke: var(--ink); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ba-tag {
  position: absolute; bottom: 10px; z-index: 2;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 999px;
  background: rgba(19, 19, 19, 0.6); color: #fff;
  pointer-events: none;
}
.ba-tag-v { left: 10px; }
.ba-tag-n { right: 10px; }
.ref-card-body { padding: 1rem 1.15rem 1.15rem; }
.ref-card-body h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
.ref-card-ort { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.ref-card-stats {
  display: flex; align-items: center; gap: 0.55rem;
  margin-top: 0.8rem;
  font-size: 0.82rem; color: var(--body-c);
}
.ref-card-stats span { display: inline-flex; align-items: baseline; gap: 0.2rem; }
.ref-card-stats strong { font-weight: 800; color: var(--ink); }
.ref-card-typ {
  margin-left: auto;
  background: var(--tint);
  color: var(--ink);
  font-weight: 700; font-size: 0.72rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
}
/* CTA unter dem Slider */
.ref-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 1.3rem;
  padding: 1rem 1.3rem;
  background: var(--tint);
  border-radius: 18px;
  text-align: left;
}
.ref-cta p { font-size: 0.95rem; color: var(--body-c); }
.ref-cta p strong { color: var(--ink); }
@media (max-width: 720px) {
  .ref-kopf-stats { display: none; } /* mobil: Fokus auf die Karten */
  .ref-card { flex-basis: 78vw; }
  .ref-cta { flex-direction: column; align-items: stretch; text-align: center; }
  /* Nav mobil: Burger statt Dock-Pille — kein Überlappen mit dem Logo */
  .dock-burger { display: flex; pointer-events: auto; }
  .dock {
    top: 60px; left: auto; right: 14px; transform: none;
    flex-direction: column; align-items: stretch; gap: 0.15rem;
    padding: 0.45rem; min-width: 190px;
    background: var(--bg); /* solide statt durchscheinender Pill */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 16px;
    border: 1px solid var(--line);
    box-shadow: 0 14px 38px rgba(19, 19, 19, 0.16);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .dock-item { border-radius: 10px; }
  .dock.dock--open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.2s ease, transform 0.2s ease; }
  .dock-item { width: 100%; }
  .dock-face { justify-content: flex-start; }
  .dock.dock--open .dock-face span { display: inline; } /* Labels im offenen Menü zeigen */
}
.kontakt-form {
  display: grid;
  gap: 0.6rem;
  max-width: 480px;
  margin: 1.6rem auto 0.8rem;
  text-align: left;
}
.kontakt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.kontakt-form input, .kontakt-form textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.95rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  transition: border-color 0.15s ease;
}
.kontakt-form textarea { resize: vertical; min-height: 90px; }
.kontakt-form input:focus, .kontakt-form textarea:focus { outline: none; border-color: var(--ink); }
.kontakt-form .btn { justify-self: stretch; margin-top: 0.2rem; }
.kontakt-direkt { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; }
.kontakt-direkt a { color: var(--ink); text-underline-offset: 3px; white-space: nowrap; }
.kontakt-ikon {
  width: 14px; height: 14px; vertical-align: -2px; margin-right: 0.28rem;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Termin: Wunschtermin-Zeile über dem Button (statt im Button) */
.termin-info {
  /* flex-start statt center: bei zweizeiligem Datum sass das Zeichen
     sonst auf halber Hoehe zwischen den Zeilen. */
  display: flex; align-items: flex-start; gap: 0.4rem;
  font-size: 0.82rem; color: var(--body-c);
  margin-top: 0.2rem;
}
.termin-info > span { min-width: 0; }
.termin-info:empty { display: none; }
.termin-info svg {
  width: 15px; height: 15px; flex-shrink: 0; margin-top: 0.12em;
  fill: none; stroke: var(--ink); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.termin-info strong { color: var(--ink); }
@media (max-width: 560px) { .kontakt-row { grid-template-columns: 1fr; } }
.kontakt-aktionen {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.8rem 0 0.8rem;
}
#s-referenzen .link-neben, #s-kontakt .link-neben { margin-top: 1.2rem; }
@media (max-width: 640px) {
  .ref-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------
   Responsive & Motion
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .screen { padding: 68px 18px 24px; }
  .hero-inner h1 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .rot-zeile { font-size: 0.93em; } /* längste Zeile passt einzeilig */
  /* Karten quer (Bild links, Text rechts) — so passen alle Fragen ohne Scroll */
  .wz-kacheln, .wz-kacheln.kacheln-2, .wz-kacheln.kacheln-4,
  .wz-kacheln.kacheln-5 { grid-template-columns: minmax(0, 460px); gap: 0.7rem; }
  /* 4-Karten-Schritt (Boden) etwas flacher, damit er ohne Scroll passt */
  .wz-kacheln.kacheln-4, .wz-kacheln.kacheln-5 { gap: 0.35rem; }
  .wz-kacheln.kacheln-4 .wz-kachel, .wz-kacheln.kacheln-5 .wz-kachel { padding: 0.45rem; }
  .erg-inkl { gap: 0.55rem; padding-bottom: 0; }
  .erg-inkl li { font-size: 0.86rem; }
  .erg-inkl svg { width: 19px; height: 19px; }
  .wz-farben { gap: 0.3rem; margin-top: 0.45rem; }
  .wz-farbe { padding: 0.24rem 0.5rem 0.24rem 0.26rem; font-size: 0.7rem; }
  .wz-farbe i { width: 13px; height: 13px; }
  .wz-kacheln.kacheln-4 .wz-kachel-bild,
  .wz-kacheln.kacheln-4 .wz-kachel-bild.ikon { min-height: 76px; width: 116px; }
  .wz-kachel { display: flex; flex-wrap: wrap; align-items: center; padding: 0.55rem; border-radius: 22px; }
  /* Panel schmaler + weniger Pfeil-Reserve: die Textspalte muss auch das
     laengste Ein-Wort-Label ("Fußbodenheizung") fassen, sonst wirft der
     Flex-Umbruch den Text unters Bild.
     Hoehe waechst mit der Karte statt fest zu sein: sobald Text und
     Farbpunkte mehrzeilig werden, stand ueber und unter dem Bild sonst
     ein breiter Streifen Weissraum (bei drei Farbpunkten ueber 100 px).
     min-height haelt die bisherige Groesse als Untergrenze, max-height
     verhindert, dass aus dem Querformat ein hoher schmaler Streifen wird. */
  .wz-kachel-bild,
  .wz-kachel-bild.ikon {
    width: 110px; flex-shrink: 0;
    align-self: stretch;
    min-height: 94px;
    /* height:auto schlaegt die Desktop-Hoehe der Symbolpanels
       (clamp 160-216px) — sonst sind reine Symbolschritte wie die
       Grundrissfrage sichtbar hoeher als Foto-Schritte */
    height: auto;
    aspect-ratio: auto; max-height: 148px; border-radius: 14px;
  }
  .wz-kachel-bild.ikon > svg { width: 58px; height: auto; max-height: 62%; }
  .wz-kachel-text { flex: 1; padding: 0.85rem 2.3rem 0.85rem 0.95rem; align-content: center; min-height: 0; }
  .wz-kachel-text strong { font-size: 1rem; -webkit-hyphens: auto; hyphens: auto; }
  .wz-pfeil { width: 34px; height: 34px; font-size: 0.95rem; right: 0.85rem; bottom: 0.85rem; }
  .wz-kachel.ohne-bild .wz-kachel-text { padding: 1.1rem 1.2rem; }
  .wz-kachel.ohne-bild .wz-kachel-text strong { font-size: 1.05rem; }
  /* Unterfrage mobil: Karte waechst mit derselben Kurve, mit der der
     Frageblock einblendet — sonst springt sie hart auf Endhoehe, waehrend
     der Text noch faded. Statt Chip-Stagger animiert der ganze Textblock
     einmal weich rein (nur transform/opacity -> GPU). */
  .wz-kachel {
    /* Startwert MUSS numerisch sein: von min-height:auto kann der Browser
       nicht interpolieren — die Karte wuerde hart auf Endhoehe springen.
       94px = Hoehe des Bild-/Icon-Panels, also unter der natuerlichen
       Kartenhoehe und damit optisch wirkungslos. */
    min-height: 94px;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  }
  /* frage-offen statt gewaehlt: die Klasse faellt erst beim Textwechsel,
     nicht schon beim Klick. Sonst aendert sich das Layout zweimal — einmal
     wenn das Bild weicht, einmal wenn die Frage kommt. Die Hoehe dazwischen
     ueberblendet hoeheUeberblenden() in fix30.js. */
  .wz-kachel.frage-offen { min-height: 200px; } /* reicht auch für 3 Chip-Zeilen (Fensteranzahl) */
  /* Pfeil ist bei gewählter Karte ausgeblendet -> Platz für die Chips nutzen */
  .wz-kachel-text.frage-drin {
    padding-right: 0.9rem;
    /* unterAufMobil statt unterAuf: letzteres enthaelt filter: blur(2px),
       und den muss das Geraet fuer JEDES Einzelbild ueber den gesamten
       Block samt vier Chips neu rechnen — auf dem iPhone sichtbar ruckelig.
       Der Kommentar oben versprach schon "nur transform/opacity", die
       Regel loeste es nur nicht ein. */
    animation: unterAufMobil 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
  }
  .wz-kachel-text.frage-drin .wz-unter-frage,
  .wz-kachel-text.frage-drin .wz-chip { animation: none; }
  /* Ausblenden ebenfalls ohne Weichzeichner */
  .wz-kachel-text.weg { filter: none; transform: translateY(-6px); }
  /* Fusszeile einzeilig: kleiner + engere Trenner */
  .hero-fuss { font-size: 0.63rem; white-space: nowrap; }
  .hero-fuss-logo { height: 14px; vertical-align: -3px; margin-right: 0.15rem; }
  .wz-unter-frage { font-size: 0.88rem; margin-bottom: 0.5rem; }
  .wz-unter-chips .wz-chip { font-size: 0.78rem; padding: 0.4rem 0.85rem; }
  /* Gewählte Karte: Frage übernimmt die VOLLE Kartenbreite (Bild/Icon weicht),
     Chips als gleichmäßiges 2er-Raster statt unruhigem Flatterumbruch */
  .wz-kachel.frage-offen .wz-kachel-bild { display: none; }
  .wz-kachel.frage-offen .wz-kachel-text { flex: 1 1 100%; width: 100%; text-align: center; padding: 0.7rem 0.9rem; }
  .wz-kachel.frage-offen .wz-unter-frage { font-size: 0.95rem; margin-bottom: 0.65rem; }
  .wz-kachel.frage-offen .wz-unter-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }
  .wz-kachel.frage-offen .wz-unter-chips .wz-chip {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    padding: 0.55rem 0.4rem;
    font-size: 0.82rem;
  }
  /* Zahlen-Chips (Fensteranzahl) bleiben als zentrierte Reihe — die sind
     uniform schmal und brechen sauber um */
  .wz-kachel.frage-offen .wz-unter-chips:has(.wz-chip-num) { display: flex; justify-content: center; }
  .wz-kachel.frage-offen .wz-unter-chips:has(.wz-chip-num) .wz-chip { width: auto; }
  .wz-kachel.frage-offen .wz-anzahl { justify-content: center; }
  /* iOS Safari zoomt beim Fokus in jedes Feld, das kleiner als 16px rendert.
     Deshalb hier exakt 16px (kleiner NICHT erlaubt), Breite entsprechend. */
  .wz-anzahl-feld { font-size: 16px; width: 4.7rem; }
  /* Hero-CTA einzeilig halten (kein 2-Zeilen-Umbruch) */
  .btn-riesig { font-size: 1.02rem; padding: 0.95rem 1.7rem; }
  .btn-slide .bs-label { white-space: nowrap; }
  .erg-fakten { flex-wrap: wrap; }
  .wz-kontakt-row { grid-template-columns: 1fr; }
  .topbar { padding: 14px 18px 0; }
  .topbar-hinweis { font-size: 0.62rem; }
  /* (alte Icon-Pill-Regeln entfernt — mobil übernimmt das Burger-Dropdown) */
  /* Kontakt-Formular kompakt, damit auch dieser Schritt ohne Scroll passt */
  .wz-schritt .wz-sub { margin-top: -1.1rem; margin-bottom: 1.1rem; font-size: 0.85rem; }
  .wz-schritt .wz-kopf { margin-bottom: 1.1rem; }
  .wz-kontakt { gap: 0.45rem; }
  .wz-kontakt label { gap: 0.15rem; font-size: 0.74rem; }
  .wz-kontakt input, .termin-kontakt input { padding: 0.55rem 0.9rem; }
  .wz-kontakt .btn-gross { margin-top: 0.25rem; padding: 0.85rem 2.2rem; }
  .wz-skip { margin-top: 0.9rem; font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .screen, .screen.aktiv, .wz-progress span, .btn, .wz-kachel, .rot-ch, .rot-box,
  .wz-kachel-text, .wz-kachel-bild img, .wz-pfeil, .dock-face { transition: none; }
  .wz-schritt, .wz-schritt .wz-kachel,
  .wz-kachel-text.frage-drin .wz-unter-frage,
  .wz-kachel-text.frage-drin .wz-chip { animation: none; }
}

/* ============================================================
   ANGEBOTS-ANSICHT (angebot.html) — Screen + Print (A4)
   ============================================================ */
.doc-body { background: #f0f0ee; }
.doc-leiste {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 1.4rem;
}
.doc-leiste p { font-size: 0.85rem; }
.doc-leiste .btn { background: #fff; color: var(--ink); border-color: #fff; }
/* Der Umschalter sitzt auf der dunklen Leiste, braucht also die
   umgekehrten Farben des Schalters auf der Ergebnisseite. */
.preis-schalter-doc { background: rgba(255, 255, 255, 0.16); }
.preis-schalter-doc button { color: rgba(255, 255, 255, 0.7); }
.preis-schalter-doc button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.doc-leiste .fix30-logo { color: #fff; }
/* ------------------------------------------------------------
   SATZSPIEGEL — sechs Stufen, mehr braucht das Dokument nicht.

   Vorher standen zwoelf verschiedene Groessen zwischen 6,2 und 15 pt
   im Blatt, die meisten davon entstanden im Kampf um Platz (7,6 hier,
   7,5 dort, 7,3 in der Liste). Unterschiede von einem Zehntelpunkt
   sieht niemand als Absicht — sie wirken nur unruhig.

   Wer eine Groesse aendert, aendert sie HIER. Neue Zwischenstufen
   bitte nicht: passt etwas nicht auf die Seite, ist die Zeilenhoehe
   oder der Abstand das Mittel, nicht eine dreizehnte Schriftgroesse.

   Ausserhalb der Skala stehen bewusst nur zwei Sonderfaelle:
   der Preis (30pt) und das Wasserzeichen (46pt). Beides sind keine
   Textgroessen, sondern Grafik.
   ------------------------------------------------------------ */
.doc-seite {
  --d-titel: 15pt;    /* Dokumenttitel im Kopf */
  --d-h:     10.5pt;  /* Abschnittsueberschriften */
  --d-text:  9.5pt;   /* Fliesstext, Tabellen, Listen */
  --d-klein: 8.5pt;   /* Labels, Tabellenkoepfe, Hinweise */
  --d-fein:  7.5pt;   /* Kleingedrucktes: Bedingungen, LV, Sternchen */
  --d-mikro: 6.5pt;   /* Detailzeile unter einer LV-Position */

  position: relative;
  background: #fff;
  width: 210mm;
  min-height: 296mm;
  margin: 1.2rem auto;
  padding: 18mm 16mm;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  font-size: var(--d-text);
  color: #222;
  /* Das rotierte Wasserzeichen ragt sonst links und rechts UEBER das
     Blatt hinaus (gemessen: -2.9 bis 210.6mm). Der Druck verkleinert
     dann die ganze Seite auf ~95%, um es einzupassen — DAS war der
     Grund, warum die Fusszeile im PDF nie unten ankam. */
  overflow: hidden;
  /* Flex-Spalte: Fußzeile klebt unten, fließt aber bei langem Inhalt
     einfach danach — kann nie überlappt werden */
  display: flex;
  flex-direction: column;
}
.doc-seite > * { flex-shrink: 0; }
.doc-seite::before {
  content: "ENTWURF – UNVERBINDLICH";
  position: absolute;
  top: 45%; left: 50%;
  transform: translate(-50%, -50%) rotate(-32deg);
  font-size: 46pt;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(120, 120, 120, 0.09);
  white-space: nowrap;
  pointer-events: none;
}
.doc-kopf { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 3mm; }
.doc-kopf .fix30-logo { font-size: 1.85rem; }
.doc-titel { text-align: right; }
.doc-titel h1 { font-size: var(--d-titel); letter-spacing: 0.18em; }
.doc-titel p { font-size: var(--d-klein); color: #777; }
.doc-abschnitt { margin: 2.5mm 0 1.5mm; font-size: var(--d-h); font-weight: 800; color: #111;
  border-bottom: 1.5px solid #111; padding-bottom: 1.5mm; }
.doc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; }
/* Preisblock im vereinfachten Richtangebot */
.doc-preisblock {
  background: #f5f5f4;
  color: var(--ink);
  border-radius: 4mm;
  padding: 5mm 6mm;
  /* fuellt die Hoehe des linken Blocks aus, Inhalt gleichmaessig verteilt */
  display: flex;
  flex-direction: column;
}
.doc-preisblock h3 { color: #8a8a86; }
/* Selektor bewusst mit .doc-preisblock davor: ".doc-block p" ist
   spezifischer als eine einzelne Klasse und hat den Preis sonst auf 10pt
   zurueckgesetzt. */
.doc-preisblock .doc-preis { font-size: 30pt; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 1.5mm 0 2mm; }
.doc-preisblock .doc-preis-klein { font-size: var(--d-klein); color: #6f6f6b; line-height: 1.5; }
.doc-preisblock .doc-preis-stern { font-size: var(--d-fein); color: #8a8a86; margin-top: 3mm; line-height: 1.4; }
/* Kernzusagen als Haken-Liste — fuellt den Block und wiederholt das
   Leistungsversprechen genau dort, wo der Preis gelesen wird */
.doc-inkl {
  margin: auto 0 0;          /* schiebt sich an den unteren Rand */
  padding: 3.5mm 0 0;
  border-top: 0.5px solid #dcdcd8;
  list-style: none;
  font-size: var(--d-klein);
  line-height: 1.45;
}
.doc-inkl li { position: relative; padding-left: 5mm; margin-top: 1.8mm; }
.doc-inkl li::before {
  content: "✓";
  position: absolute; left: 0;
  font-weight: 800;
  color: #111;
}
.doc-preis-stern { font-size: var(--d-fein); color: #8a8a86; margin-top: 3mm; line-height: 1.4; }
.doc-tab-2sp td:last-child { font-weight: 700; }
.doc-block h3 { font-size: var(--d-klein); letter-spacing: 0.12em; text-transform: uppercase; color: #999; margin-bottom: 2mm; }
.doc-block p { font-size: var(--d-text); line-height: 1.5; }
.doc-tab { width: 100%; border-collapse: collapse; font-size: var(--d-text); }
/* Zeilenhoehe knapp halten: bei ~40 Tabellenzeilen im Dokument entscheidet
   das darueber, ob ein Abschnitt auf seine Seite passt (A4 nutzbar 265mm). */
.doc-tab th, .doc-tab td { text-align: left; padding: 1.2mm 2mm; vertical-align: top; }
/* Angaben zweispaltig: Spalten oben ausrichten, Abstand schmaler als im Kopf */
.doc-angaben { gap: 6mm; align-items: start; }
/* Bedingungsseite: A, B und C sollen zusammen auf EINE Seite — deshalb
   kleinere Schrift und engere Abschnittsabstaende als im restlichen Dokument. */
/* Enger gesetzt: mit den Vorbehalten aus der zweiten Runde waere die Seite
   sonst um rund 68 mm zu lang und der Abschnitt auf eine vierte Seite
   gerutscht. Gemessen, nicht geschaetzt. */
/* Zeilenhoehe statt Schriftgroesse ist auf dieser Seite das Mittel der
   Wahl: A, B und C sollen zusammen auf EIN Blatt, und bei rund 70 Zeilen
   Kleingedrucktem bringt jedes Hundertstel hier mehr als eine weitere
   Sondergroesse — die hatten wir lange genug. */
.doc-seite-bedingungen .doc-tab { font-size: var(--d-fein); line-height: 1.3; }
.doc-seite-bedingungen .doc-tab td { padding: 0.42mm 2mm; }
.doc-seite-bedingungen .doc-abschnitt { margin: 3mm 0 1.5mm; }
.doc-seite-bedingungen .doc-hinweis { margin-top: 2mm; }
/* Leistungsverzeichnis: 14 zweizeilige Positionen — etwas enger, damit die
   Tabelle mit den nicht enthaltenen Leistungen auf eine Seite geht. */
/* 8,5pt wie auf der Bedingungsseite: die Leistungstexte sind seit Daniels
   Ergaenzungen zwei- bis dreizeilig, sonst passt das LV nicht auf eine Seite. */
/* Seite 2 lief um 43 mm ueber, seit im Bad die Produkte mit im
   Leistungstext stehen und drei Ausschluesse dazukamen. Ohne diese Enge
   waere das Leistungsverzeichnis auf eine vierte Seite gerutscht,
   waehrend die Fusszeile weiter "Seite 2 von 3" behauptet. */
/* Auch hier beide Klassen: die Tabelle traegt "doc-tab doc-lv-tab".
   Es funktionierte bisher nur, weil diese Regel zufaellig weiter unten
   steht als .doc-tab — beim Umsortieren waere es still gekippt. */
.doc-tab.doc-lv-tab { font-size: var(--d-fein); }
.doc-lv-tab td { padding: 0.15mm 2mm; }
.doc-lv-tab .doc-lv-desc { font-size: var(--d-mikro); line-height: 1.16; }
/* Nicht enthaltene Leistungen zweispaltig — als einspaltige Liste kostet sie
   ein Drittel der Seite, obwohl es kurze Stichpunkte sind. */
/* Kleiner gesetzt: die Liste war Daniel zu gross, und sie ist um drei
   Punkte gewachsen — sonst draengt sie die Seite auseinander. */
/* Dreispaltig statt zweispaltig: die Liste ist auf acht Eintraege
   gewachsen und brauchte als Zweispalter vier Zeilen. */
/* Selektor bewusst mit BEIDEN Klassen: die Liste traegt "doc-liste
   doc-liste-2sp", und .doc-liste steht weiter unten im Stylesheet. Bei
   gleicher Spezifitaet gewann deshalb die spaetere Regel — die
   Groessenangabe hier war wirkungslos, die Stichpunkte kamen mit der
   vollen Fliesstextgroesse heraus, waehrend die LV-Positionen daneben
   klein gesetzt waren (Daniel, 27.08.2026). */
.doc-liste.doc-liste-2sp { column-count: 3; column-gap: 5mm; font-size: var(--d-fein); line-height: 1.28; }
.doc-liste-2sp li { break-inside: avoid; page-break-inside: avoid; }
.doc-tab thead th { border-bottom: 1.2px solid #111; font-size: var(--d-klein); letter-spacing: 0.06em; text-transform: uppercase; }
.doc-tab tbody td { border-bottom: 0.5px solid #ddd; }
.doc-tab .num { text-align: right; white-space: nowrap; }
.doc-tab .summe td { border-top: 1.2px solid #111; border-bottom: none; font-weight: 800; }
.doc-hinweis { font-size: var(--d-klein); color: #888; margin-top: 3mm; line-height: 1.5; }
/* Detailzeile in der Ausstattungslinie (Seite 1). Stand als Inline-Stil
   im Markup und lief mit 6,8pt an der Skala vorbei. */
.doc-lv-desc.doc-lv-desc-linie {
  display: block;
  margin-top: 0.4mm;
  font-size: var(--d-mikro);
  line-height: 1.25;
}
.doc-lv-desc { font-size: var(--d-fein); color: #8a8a86; line-height: 1.4; }
.doc-fuss {
  margin-top: auto;   /* ans Seitenende, aber im normalen Fluss */
  padding-top: 3.5mm;
  border-top: 0.5px solid #ccc;
  font-size: 7.5pt; color: #999;
  line-height: 1.5;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 6mm;
}
.doc-fuss-links strong { font-size: var(--d-fein); color: #666; font-weight: 700; }
.doc-fuss-rechts { white-space: nowrap; }
.doc-unterschriften { display: grid; grid-template-columns: 1fr 1fr; gap: 14mm; margin-top: 22mm; }
.doc-unterschriften > div { border-top: 0.8px solid #333; padding-top: 2mm; font-size: var(--d-klein); }
.doc-liste { font-size: var(--d-text); line-height: 1.65; padding-left: 4mm; }
.doc-liste li { list-style: none; position: relative; padding-left: 4mm; margin-bottom: 1mm; }
.doc-liste-2sp li { margin-bottom: 0.4mm; }
.doc-liste li::before { content: "–"; position: absolute; left: 0; }

/* Nur Bildschirm — beim Drucken gilt A4, und A4 ist rund 794 px breit,
   würde diese Regel sonst ebenfalls auslösen und das PDF zerlegen */
/* Das Blatt bleibt IMMER A4. Frueher brach es auf schmalen Schirmen um —
   eine Spalte, kleinere Schrift, scrollende Tabellen. Dann zeigt die
   Vorschau aber etwas anderes als der Druck, und genau das soll sie nicht.
   Auf kleinen Schirmen wird das Blatt stattdessen maszstaeblich
   verkleinert: gleiche Umbrueche, gleiche Proportionen, nur kleiner.
   zoom statt transform, weil zoom auch die Layoutbox verkleinert und
   darunter kein leerer Raum stehen bleibt. Faktor kommt aus angebot.html. */
.doc-seite { zoom: var(--doc-zoom, 1); }
@media screen and (max-width: 840px) {
  .doc-leiste { flex-direction: column; text-align: center; }
  .doc-leiste .btn { white-space: nowrap; font-size: 0.88rem; padding: 0.7rem 1.1rem; }
}

@media print {
  /* Das Handy layoutet die Seite im schmalen Viewport (375-430 px);
     beim Drucken bleibt diese Breite sonst stehen und das 210-mm-Blatt
     wird rechts abgeschnitten. html/body explizit auf Blattbreite
     setzen loest das, am Desktop aendert es nichts. */
  html, body { width: 210mm; }
  .doc-body { background: #fff; }
  .doc-leiste { display: none; }
  /* Chrome verwirft Hintergrundfarben beim Drucken, solange der Nutzer
     "Hintergrundgrafiken" nicht anhakt — der graue Preisblock und der
     gelbe Logo-Pfeil verschwanden deshalb im PDF, obwohl sie am Schirm
     da waren. exact erzwingt beides ohne Zutun des Kunden. */
  .doc-seite, .doc-preisblock, .fix30-logo .pfeil, .doc-tab th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .doc-seite {
    /* Der Seitenrand aus @page, jetzt als Innenabstand — siehe dort.
       Oben 13 statt 16: Firefox setzt Text ein paar Millimeter hoeher
       als Chrome/Safari — die Differenz kippte Blaetter auf Leerseiten. */
    padding: 13mm 16mm;
    /* zoom zuruecksetzen, sonst schrumpft das Blatt auch auf dem Papier.
       !important ist hier kein Schmuck: der Faktor kommt aus einer
       Variablen, die angebot.html am <html>-Element setzt. Ohne !important
       haengt es an der Reihenfolge im Stylesheet, ob Bildschirm oder Druck
       gewinnt — auf dem Handy gewann der Bildschirm und das PDF kam
       verkleinert heraus. */
    zoom: 1 !important;
    width: auto;
    /* Volle Blatthoehe statt 0. Ohne sie ist das Blatt nur so hoch wie sein
       Inhalt, und die Fusszeile kann nicht ans Seitenende ruecken — sie
       klebte im PDF mitten auf der Seite am Text.
       275 statt 296: iOS-Safari reserviert beim Teilen-als-PDF rund
       2 cm fuer die eigene Kopf-/Fusszeile — mit 296 kippte deshalb
       JEDES Blatt ein paar Millimeter auf eine leere Folgeseite
       (Handy-PDF hatte 6 Seiten statt 3). Die Reserve kostet am
       Desktop nur etwas Leerraum ueber der Fusszeile. */
    min-height: 275mm;
    /* Unten mehr Luft als oben: darunter liegt die absolut gesetzte
       Fusszeile (siehe unten). So kann Inhalt nie in sie hineinlaufen. */
    /* 20 statt 28: zusammen mit min-height 275 muss das ganze Blatt
       unter ~277mm bleiben, sonst kippt es in iOS' verkleinertem
       Druckbereich auf eine Leerseite (der Rest von Safaris eigener
       Kopf-/Fusszeile, die sich per CSS nicht abschalten laesst). */
    padding-bottom: 13mm;
    margin: 0;
    box-shadow: none;
    page-break-after: always;
  }
  .doc-seite:last-child { page-break-after: auto; }
  /* Am Schirm schiebt margin-top:auto die Fusszeile ans Blattende. Im
     Druck tut es das nicht: Chrome rechnet den freien Platz in einer
     umbrechenden Flex-Spalte anders und setzte die Zeile rund 12 mm zu
     hoch — auf jeder Seite gleich falsch, deshalb faellt es erst im PDF
     auf. Hier deshalb hart ans Blatt geheftet. Absolut, nicht fixiert:
     fixiert wuerde sie auf jeder Seite wiederholt und in den Text
     gedruckt. Bezugspunkt ist .doc-seite (position: relative), und weil
     ein Blatt genau eine Seite ist, ist "unten am Blatt" auch "unten auf
     der Seite". */
  .doc-fuss {
    position: absolute;
    left: 16mm; right: 16mm; bottom: 6mm;
    margin-top: 0;
    padding-top: 3.5mm;
  }
  /* Nichts darf mitten durch Zeilen/Blöcke umbrechen */
  .doc-tab tr, .doc-hinweis, .doc-liste li, .doc-grid2, .doc-preisblock,
  .doc-kopf, .doc-abschnitt { break-inside: avoid; page-break-inside: avoid; }
  .doc-abschnitt { break-after: avoid; } /* Überschrift nie allein am Seitenende */
  .doc-tab thead { display: table-header-group; } /* LV-Kopf wiederholt sich */
}
/* Rand NULL, nicht 16mm — und der Rand wandert als Innenabstand ins
   Blatt (siehe .doc-seite im Druckblock). Grund: Browser drucken ihre
   eigene Kopf- und Fusszeile (Seitentitel, Adresse, Datum, Seitenzahl)
   nur dann, wenn der Seitenrand Platz dafuer laesst. Bei margin 0 fallen
   sie weg, ohne dass der Kunde etwas im Druckdialog abhaken muss.
   Der bedruckte Bereich bleibt derselbe: 210 - 32 = 178 mm breit. */
@page { size: A4; margin: 0; }

/* ------------------------------------------------------------
   Terminbestaetigung — ersetzt das Formular nach dem Buchen
   ------------------------------------------------------------ */
.best-kopf { text-align: center; padding: 0.4rem 0 1.2rem; }
/* Der SICHTBARE Zustand steht im Grundstil, die Animation blendet nur ein.
   Umgekehrt (sichtbar erst am Animationsende, fill-mode "both") saehe der
   Kunde einen geschrumpften Kreis ohne Haken, sobald die Animation nicht
   laeuft — abgeschaltete Bewegung, Hintergrund-Tab, sparsamer Browser. */
.best-haken {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 0.8rem;
  background: var(--yellow); display: grid; place-items: center;
  animation: haken-auf 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.best-haken svg {
  width: 28px; height: 28px; fill: none; stroke: var(--ink);
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 0;
  animation: haken-zeichnen 0.4s ease-out 0.25s backwards;
}
@keyframes haken-auf { from { transform: scale(0.4); opacity: 0; } }
@keyframes haken-zeichnen { from { stroke-dashoffset: 26; } }
@media (prefers-reduced-motion: reduce) {
  .best-haken, .best-haken svg { animation: none; }
}
.best-titel { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; }
.best-mini { font-size: 0.88rem; color: var(--muted); margin-top: 0.25rem; }

/* Beleg: je Zeile ein Symbol, darunter Beschriftung und Wert */
.best-daten { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.1rem; }
.best-daten li {
  display: grid; grid-template-columns: 34px 1fr; align-items: start; gap: 0.2rem;
  padding: 0.65rem 0; border-bottom: 1px solid var(--line);
}
.best-daten li:first-child { border-top: 1px solid var(--line); }
.best-daten svg {
  width: 17px; height: 17px; justify-self: center; margin-top: 0.75rem;
  fill: none; stroke: var(--muted); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.best-daten span {
  display: block; font-size: 0.72rem; color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.1rem;
}
.best-daten div { font-size: 0.92rem; line-height: 1.4; }
.best-daten strong { font-weight: 700; }
.best-daten a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.best-fuss {
  display: grid; grid-template-columns: 20px 1fr; gap: 0.5rem; align-items: start;
  font-size: 0.78rem; color: var(--muted); margin-top: 0.9rem; line-height: 1.5;
}
.best-fuss svg {
  width: 15px; height: 15px; margin-top: 0.15rem;
  fill: none; stroke: var(--muted); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Preis je Quadratmeter unter dem Gesamtpreis — die Zahl, mit der
   Kunden Angebote vergleichen */
.erg-jem2 {
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

/* Kleines "i" neben einer Zeile der Zusammenfassung */
.erg-info {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; margin-left: 0.4rem;
  border-radius: 50%; background: var(--yellow); color: var(--ink);
  font: 700 0.66rem/1 var(--font); cursor: pointer; vertical-align: 1px;
}
.erg-info:hover { background: var(--ink); color: #fff; }

/* Hinweisfenster. Eigenes Element statt title=, weil Browser auf dem
   Handy title gar nicht anzeigen — und dort wird am meisten geklickt. */
.hinweis-box {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(19, 19, 19, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  animation: hinweisAuf 0.18s ease-out;
}
/* Text und Knopf in einer Karte. Als zwei Rasterkinder driften sie
   auseinander, weil die Zeilen den Bildschirm fuellen. */
.hinweis-karte {
  background: var(--bg); border-radius: 20px; padding: 1.5rem;
  max-width: 25rem; box-shadow: 0 18px 50px rgba(19, 19, 19, 0.25);
}
/* Symbol links oben ueber dem Text: zeigt sofort, wovon die Rede ist,
   bevor man den ersten Satz gelesen hat. */
.hinweis-ikon {
  display: block;
  width: 42px;
  height: 42px;
  margin-bottom: 0.9rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hinweis-karte p {
  font-size: 0.95rem; line-height: 1.5; color: var(--ink); margin: 0 0 1.1rem;
}
.hinweis-karte button {
  background: var(--ink); color: #fff; border: 0; border-radius: 999px;
  padding: 0.6rem 1.6rem; font: 700 0.9rem var(--font); cursor: pointer;
}
@keyframes hinweisAuf { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hinweis-box { animation: none; } }

/* Nullsumme: kleinere Schrift, damit "Nichts zu tun" nicht in der
   Preisgroesse steht und wie ein kaputter Betrag wirkt */
.erg-preis.erg-preis-leer { font-size: clamp(1.6rem, 5vw, 2.4rem); }


/* ============================================================
   LANDINGPAGE UNTER DEM KONFIGURATOR

   Der Hero bleibt unveraendert und fuellt weiter genau eine
   Bildschirmhoehe. Dafuer muss der Landing-Screen von der Grundregel
   (display:flex, Zeile) auf eine Spalte umgestellt werden — sonst
   staenden Hero und Inhalt nebeneinander.
   ============================================================ */
#s-hero { flex-direction: column; padding-bottom: 0; overflow-x: hidden; }
#s-hero > .hero-inner { flex-shrink: 0; }

.lp {
  width: 100%; margin: 0 auto; text-align: left; color: var(--ink);
  --lp-breit: 1080px; --lp-schmal: 760px;
}
.lp section { max-width: var(--lp-breit); margin: 0 auto; padding: 6.5rem 0 0; }
.lp h2 {
  font-size: clamp(1.85rem, 4vw, 2.9rem); line-height: 1.08;
  letter-spacing: -0.035em; margin: 0 0 0.9rem;
}
.lp h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 0.35rem; }
.lp p { font-size: 1rem; line-height: 1.65; color: #4a4a47; margin: 0; }
.lp .lp-tonlos { color: #b3b3ae; }

/* Kleine Pille ueber jeder Sektion */
/* Sektions-Vorzeile als Kapsel wie auf der MDA-Startseite (.badge):
   weiss, feiner Rand, Haken-Icon. */
.lp-pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(19, 19, 19, 0.05);
  color: var(--ink); font-size: 0.85rem; font-weight: 600;
  padding: 0.45rem 1rem; border-radius: 999px;
  margin-bottom: 1.2rem;
}
.lp-pill svg { color: var(--dark, #444); }
/* Kopfzeile: Ueberschrift links, Beitext rechts daneben (Powder-Muster) */
.lp-warum-kopf {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2.5rem;
  align-items: end; margin-bottom: 3rem;
}
.lp-warum-kopf h2 { margin: 0; }
.lp-warum-kopf p { padding-bottom: 0.4rem; }

/* ---------- 1 · So laeuft es ab (Zeitlinie + Karten) ----------
   Links klebt die Ueberschrift, rechts laeuft eine vertikale Linie durch
   drei grosse Kreise. Die Fuellung der Linie folgt dem Scrollfortschritt
   (landing.js), die Kreise schalten auf gelb, sobald die Fuellung ihre
   Mitte passiert hat. */
.lp-prozess {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 4rem;
  align-items: start; padding-top: 9rem !important;
}
/* Der Textblock klebt knapp unter der Kopfleiste, die Zeitlinie rechts
   beginnt auf derselben Hoehe. top:0 ist richtig, nicht 84px: der
   Scroll-Container #s-hero traegt selbst 84px Innenabstand oben, und
   sticky rechnet vom Scrollport — 84px hier addieren sich also zu 168. */
.lp-prozess-links { position: sticky; top: 0; }
.lp-prozess-links h2 { margin-bottom: 1rem; }
.lp-prozess-links p { margin-bottom: 1.8rem; }
.lp-prozess-rechts {
  position: relative; display: grid; gap: 4.5rem;
  padding-left: 5.5rem;
}
/* Linie: vertikal durch die Kreismitten (Kreis 4.5rem, Mitte 2.25rem).
   Sie beginnt an der Mitte des ersten Kreises und endet an der des
   letzten. */
.lp-zeitlinie {
  position: absolute; left: 2.25rem; top: 2.25rem; bottom: 2.25rem;
  width: 2px; margin-left: -1px; background: var(--line);
  overflow: hidden; border-radius: 2px;
}
.lp-zeitlinie i {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  background: var(--yellow);
  transform: scaleY(0); transform-origin: top;
  /* KEINE Transition: die Fuellung folgt dem Finger. Eine Glaettung
     hier laesst die Linie dem Scrollstand sichtbar hinterherlaufen. */
}
.lp-meile { position: relative; }
.lp-meile-kreis {
  position: absolute; left: -5.5rem; top: 0;
  display: grid; place-items: center;
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--line);
  font-weight: 800; font-size: 1.35rem; color: #c9c9c3;
  z-index: 1;
  transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease,
              transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.5s ease;
}
.lp-meile.aktiv .lp-meile-kreis {
  background: var(--yellow); border-color: var(--yellow); color: var(--ink);
  transform: scale(1.07); box-shadow: 0 8px 24px rgba(252, 197, 13, 0.28);
}
/* Karten nach dem Salix-Vorbild: Titel und kurzer Satz stehen FREI auf
   der Seite, darunter die grosse graue Flaeche. Sie ist bewusst leer —
   die Einlagen kommen spaeter. */
/* Die Zeitspanne ist das eigentliche Versprechen jeder Etappe — sie
   steht deshalb als gelbes Etikett VOR dem Titel, in einer Reihe mit
   der Ziffer im Kreis. Der Titel darunter ist die reine Handlung. */
.lp-zeit {
  display: inline-flex; align-items: center;
  height: 2.1rem; padding: 0 0.85rem;
  /* Ruhezustand: schwarze Kontur. Gelb wird das Etikett erst, wenn die
     Zeitlinie seine Etappe erreicht — im selben Moment wie der Kreis
     (beide haengen an .lp-meile.aktiv). */
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 0.86rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin: 1.2rem 0 0.8rem;   /* 1.2rem rueckt das Etikett auf Kreismitte */
  transition: background 0.5s ease, border-color 0.5s ease;
}
.lp-meile.aktiv .lp-zeit { background: var(--yellow); border-color: var(--yellow); }
.lp-meile-inhalt h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -0.025em; line-height: 1.15;
}
.lp-meile-box {
  margin-top: 1.3rem;
  background: var(--tint); border: 1px solid var(--line);
  border-radius: 20px; aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 2.2rem 0 0 2.2rem;
}
.lp-meile-box img {
  display: block; width: 100%; max-width: none; height: auto;
  background: #fff;
  border: 1px solid var(--line); border-right: none; border-bottom: none;
  border-top-left-radius: 12px;
  box-shadow: 0 8px 30px rgba(19, 19, 19, 0.07);
}

/* "Persoenlich. Direkt. Vor Ort." bleibt eine Zeile — nur am
   Telefon darf es umbrechen, sonst wuerde es ueberlaufen */
@media (min-width: 721px) {
  .zeile-fest { white-space: nowrap; }
}

/* Scroll-Hinweis unten im Hero: kleiner Kreis, sanftes Nicken */
.hero-weiter {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: grid; place-items: center; cursor: pointer;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  animation: lp-auftauchen 0.6s 0.5s backwards, hero-nicken 2.6s 1.4s ease-in-out infinite;
  transition: border-color 0.2s ease;
}
.hero-weiter:hover { border-color: var(--ink); }
.hero-weiter svg {
  width: 17px; height: 17px; fill: none; stroke: var(--ink);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
@keyframes hero-nicken {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}
@media (prefers-reduced-motion: reduce) { .hero-weiter { animation: none; } }

/* ---------- Meilenstein-Kompositionen: echte Elemente statt
   flacher Bilder. Masse in cqw (1 cqw = 1 % der Kastenbreite), damit
   alles mit dem Kasten skaliert. Vor der Aktivierung liegen die Teile
   gerade und eng beieinander; wird der Meilenstein aktiv, kippen und
   faechern sie auseinander. ---------- */
.lp-kompo {
  container-type: inline-size;
  position: relative;
  background: #fff;
  padding: 0;
}
.lp-kompo .k-el, .lp-kompo .k-muster {
  position: absolute;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
/* Faecher: laenger und weicher als die Dokument-Karten, die Seiten
   folgen der Mitte mit leichtem Versatz */
.lp-kompo .k-muster { transition: transform 1.15s cubic-bezier(0.3, 1, 0.32, 1); }
.lp-kompo .k-m1 { transition-delay: 0.06s; }
.lp-kompo .k-m3 { transition-delay: 0.12s; }
/* Passepartout-Bildregel (.lp-meile-box img) neutralisieren */
.lp-kompo img {
  width: auto; max-width: none; background: none;
  border: none; border-radius: 0; box-shadow: none;
}
.lp-kompo .k-el {
  height: auto; box-shadow: 0 1.4cqw 3.4cqw rgba(19, 19, 19, 0.17);
  outline: 1px solid #e1e1e4; outline-offset: -1px;
}
/* Termin + Angebot */
.lp-kompo .k-blatt { width: 39cqw; left: 42.5cqw; top: 3.5cqw; border-radius: 0.9cqw; transform: translate(-2cqw, 6cqw) rotate(0deg); }
.lp-kompo .k-termin { width: 38cqw; left: 20cqw; top: 12cqw; border-radius: 1.8cqw; transform: translate(2cqw, 10cqw) rotate(0deg); z-index: 2; transition-delay: 0.09s; }
.lp-meile.gezeigt .k-blatt { transform: translate(0, 0) rotate(0deg); }
.lp-meile.gezeigt .k-termin { transform: translate(0, 0) rotate(0deg); }
/* Uebergabe: Protokoll + Foto */
.lp-kompo .k-proto { width: 40cqw; left: 50cqw; top: 3.5cqw; border-radius: 0.9cqw; transform: translate(-16cqw, 3cqw) rotate(0deg) scale(0.96); }
.lp-kompo .k-foto { width: 44cqw; left: 12cqw; top: 15cqw; border-radius: 1.7cqw; transform: scale(0.93) rotate(0deg); z-index: 2; }
.lp-meile.gezeigt .k-proto { transform: translate(0, 0) rotate(0deg) scale(1); transition-delay: 0.1s; }
.lp-meile.gezeigt .k-foto { transform: scale(1) rotate(0deg); }
/* Muster-Faecher */
.k-muster {
  width: 30cqw; left: 35cqw; top: 8.5cqw;
  margin: 0; background: #fff;
  border: 1px solid #e7e7ea; border-radius: 1.5cqw;
  padding: 0.85cqw 0.85cqw 1.1cqw;
  box-shadow: 0 1.4cqw 3.4cqw rgba(19, 19, 19, 0.16);
  transform-origin: 50% 210%;
  transform: rotate(0deg) translateX(0);
}
.k-m2 { z-index: 2; }
.k-m3 { z-index: 3; }
.lp-meile.gezeigt .k-m1 { transform: rotate(-16deg) translateX(-29%); }
.lp-meile.gezeigt .k-m3 { transform: rotate(16deg) translateX(29%); }
.lp-kompo .k-muster img, .k-muster .k-flaeche {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border: none; box-shadow: none;
  border-radius: 0.85cqw;
}
.k-muster figcaption, .k-muster .k-text {
  margin-top: 0.95cqw; text-align: center;
  font-size: 1.35cqw; font-weight: 600;
}
.lp-kompo .k-muster .k-flaeche { background: #f4f4f2; display: grid; justify-items: center; align-content: center; gap: 0.6cqw; }
.k-flaeche em { font-style: normal; font-size: 1.35cqw; font-weight: 800; letter-spacing: 0.14em; color: var(--muted); }
.k-flaeche strong { font-size: 6.2cqw; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.k-flaeche i {
  font-style: normal; margin-top: 0.8cqw; padding: 0.7cqw 1.4cqw; border-radius: 999px;
  background: var(--yellow); font-size: 1.25cqw; font-weight: 800;
}
/* Konfigurator-Schuss (Meilenstein 1): leises Aufrichten */
.lp-meile-box:not(.lp-kompo) img { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); transform: scale(0.98) translateY(0.8cqw); }
.lp-meile.gezeigt .lp-meile-box:not(.lp-kompo) img { transform: scale(1) translateY(0); }

/* ---------- 2 · Aussage + Garantien ---------- */
.lp-statement {
  max-width: var(--lp-schmal) !important;
  /* Der Satz ist die Atempause zwischen Ablauf und Argumenten —
     er braucht Leere um sich, sonst ist er nur ein Absatz. */
  padding: 15rem 0 8rem !important;
  text-align: center;
}
.lp-gross {
  font-size: clamp(1.8rem, 4.2vw, 3rem) !important;
  line-height: 1.25 !important; letter-spacing: -0.028em;
  font-weight: 700; margin-bottom: 0 !important;
}
/* Gelber Faden vom Problem zur Antwort: waechst erst, wenn der Satz
   fertig eingefaerbt ist (satz-fertig kommt aus landing.js) */
.lp-strich {
  width: 2px; height: 54px; border-radius: 2px;
  background: var(--yellow);
  margin: 2.4rem auto 2.4rem !important;
  /* !important: die Staffel-Einblendung (.lp-auf.sichtbar > *) wuerde
     transform/opacity sonst sofort freigeben */
  transform: scaleY(0) !important; transform-origin: top;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.satz-fertig .lp-strich { transform: scaleY(1) !important; }
/* Auch die Antwortzeile wartet auf den Satz */
.lp-statement .lp-loesung {
  opacity: 0 !important; transform: translateY(10px) !important;
  transition: opacity 0.5s ease 0.25s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.satz-fertig .lp-loesung { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .lp-strich { transform: none !important; transition: none; }
  .lp-statement .lp-loesung { opacity: 1 !important; transform: none !important; transition: none; }
}
/* Aufloesung unter dem Problem-Satz: das Wortzeichen antwortet */
.lp-loesung {
  margin-top: 0 !important;
  font-size: 1.25rem !important; font-weight: 700;
  color: var(--ink) !important;
  /* Kaertchen und Text exakt auf einer Mittellinie */
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
}
.lp-loesung-logo {
  display: inline-flex; align-items: center;
  font-weight: 800; letter-spacing: -0.02em;
  background: var(--tint); border: 1px solid var(--line);
  border-radius: 14px; padding: 0.45rem 0.95rem;
}
.lp-loesung-logo i { font-style: normal; color: var(--yellow); padding: 0 0.06em; }

/* Woerter starten blass und schalten beim Scrollen auf volle Farbe */
.lp-gross span { color: #dcdcd6; transition: color 0.35s ease; }
.lp-gross span.an { color: var(--ink); }
/* Die Zusagen als EIN gelbes Band mit Trennern (Plumbzo-Muster).
   Es bricht aus der schmalen Statement-Spalte auf Seitenbreite aus. */
.lp-kpis-band {
  width: min(var(--lp-breit), calc(100vw - 48px));
  margin-left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--yellow); border-radius: 22px;
  padding: 2rem 1rem;
}
.lp-kpi { text-align: center; padding: 0.4rem 1rem; }
.lp-kpi + .lp-kpi { border-left: 1px solid rgba(19, 19, 19, 0.18); }
.lp-kpi strong {
  display: block; font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.45rem; color: var(--ink);
}
.lp-kpi span { font-size: 0.88rem; font-weight: 600; color: rgba(19, 19, 19, 0.72); }

/* ---------- 3 · Warum (Karten) ---------- */

/* ---------- Vergleich: ueblicher Weg vs. FIX30 ----------
   Drei Spalten: Kriterium, ueblicher Weg (gedaempft), FIX30 als
   durchgehende weisse Karte mit Ink-Kopf. Die Karte entsteht aus den
   Zellen der fix-Spalte: Seitenraender ueberall, Radius oben/unten. */
/* Zentrierter Kopf ueber der Tabelle */
.lp-vergleich { text-align: center; }
.lp-vergleich .lp-pill { margin-left: auto; margin-right: auto; }
.lp-vgl-kopf { max-width: 40rem; margin: 0 auto 3rem; }
.lp-vgl-kopf h2 { margin-bottom: 0.7rem; }

/* ---------- Vergleich als EINE helle Karte, FIX30 als dunkle darueber —
   Aufbau wie die FinVault-Vorlage: Kriterien und "ueblich"-Spalte bilden
   gemeinsam die weisse Karte (Rundung an den vier Aussenecken der
   Rumpfzeilen), die FIX30-Spalte liegt als durchgehende Ink-Karte in der
   Mitte und ragt oben und unten heraus. ---------- */
.lp-vgl { max-width: 800px; margin: 0.5rem auto 0; padding-bottom: 18px; text-align: left; }
.lp-vgl-zeile {
  display: grid; grid-template-columns: 0.95fr 1.1fr 1.1fr;
  align-items: stretch;
}
.lp-vgl-zeile > div { padding: 1.35rem 1.3rem; font-size: 0.95rem; }
.lp-vgl-kopfzeile > div {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: flex-end; justify-content: center;
}
/* Rumpf: weisse Karte */
.lp-vgl-zeile .krit {
  font-weight: 700; color: var(--ink);
  background: #fff; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 0.6rem;
}
.lp-vgl-zeile .krit svg {
  flex-shrink: 0; width: 17px; height: 17px;
  fill: none; stroke: var(--muted); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}
.lp-vgl-zeile .alt {
  color: #8d8d88;
  background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.lp-vgl-zeile:nth-child(2) .krit { border-top: 1px solid var(--line); border-top-left-radius: 20px; }
.lp-vgl-zeile:nth-child(2) .alt  { border-top: 1px solid var(--line); border-top-right-radius: 20px; }
.lp-vgl-zeile:last-child .krit { border-bottom-left-radius: 20px; }
.lp-vgl-zeile:last-child .alt  { border-bottom-right-radius: 20px; }
/* Zelle als Zeile: Zeichen fix links, Text als eigener Block daneben */
.lp-vgl-zeile .alt, .lp-vgl-zeile .fix {
  display: flex; align-items: flex-start; gap: 0.6rem;
}
/* Zeichen exakt auf der Mitte der ERSTEN Textzeile: Textzeilenhoehe
   1.5 x 0.95rem = 1.425rem, das Zeichen ist 1.25rem hoch — der Versatz
   ist die halbe Differenz. line-height 1 verhindert, dass die eigene
   Zeilenhoehe des Zeichens die Rechnung verschiebt. */
.lp-vgl-zeile .alt i, .lp-vgl-zeile .fix i {
  font-style: normal; font-weight: 800; flex-shrink: 0;
  line-height: 1; margin-top: calc((1.425rem - 1.25rem) / 2);
}
.lp-vgl-zeile > div { line-height: 1.5; }
.lp-vgl-zeile .alt i {
  color: #c4c4be; display: inline-grid; place-items: center;
  width: 1.25rem; height: 1.25rem; font-size: 0.8rem;
}
/* FIX30-Spalte: hell wie die Basiskarte, aber mit kraeftigem schwarzen
   Rahmen — das pure Schwarz der ganzen Spalte war zu dominant. */
.lp-vgl-zeile .fix {
  background: #fff; color: var(--ink); font-weight: 600;
  border-left: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.lp-vgl-zeile .fix i {
  color: var(--ink); background: var(--yellow); border-radius: 50%;
  display: inline-grid; place-items: center;
  width: 1.25rem; height: 1.25rem; font-size: 0.7rem;
}
.lp-vgl-kopfzeile .fix {
  background: var(--ink); color: #fff;
  border: 1.5px solid var(--ink); border-bottom: none;
  border-radius: 20px 20px 0 0; font-size: 1.1rem; text-transform: none;
  letter-spacing: -0.01em; font-weight: 800;
  margin-top: -18px; padding-top: calc(1.05rem + 18px); padding-bottom: 1.05rem;
  align-items: center;
  box-shadow: 0 16px 40px rgba(19, 19, 19, 0.12);
}
.lp-vgl-pfeil { color: var(--yellow); padding: 0 0.05em; }
.lp-vgl-zeile:last-child .fix {
  border-bottom: 1.5px solid var(--ink); border-radius: 0 0 20px 20px;
  margin-bottom: -18px; padding-bottom: calc(1.35rem + 18px);
}

/* ---------- 5 · Ausstattung ---------- */
.lp-aus-tabs { display: inline-flex; gap: 0.3rem; padding: 0.3rem; background: var(--tint); border: 1px solid var(--line); border-radius: 999px; margin-bottom: 1.8rem; }
.lp-aus-tabs button {
  border: none; background: none; cursor: pointer;
  padding: 0.55rem 1.3rem; border-radius: 999px;
  font: inherit; font-size: 0.92rem; font-weight: 700; color: var(--muted);
  transition: background 0.25s ease, color 0.25s ease, transform 0.16s ease;
}
.lp-aus-tabs button.aktiv { background: var(--ink); color: #fff; }
.lp-aus-buehne { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
.lp-aus-bild { margin: 0; border-radius: 22px; overflow: hidden; background: var(--tint); border: 1px solid var(--line); position: relative; }
/* Kreuzblende: das alte Bild liegt kurz als Deckschicht ueber dem neuen
   und blendet aus — kein Abdunkeln, kein Aufblitzen */
.lp-aus-decke {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: opacity 0.45s ease;
}
.lp-aus-decke.weg { opacity: 0; }
/* Fliesen-Kaertchen unten rechts im Bild (finest-Muster): echte
   Produkt-Textur mit Label, weisses Kaertchen mit weichem Schatten */
.lp-aus-fliesen {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: flex; gap: 8px;
  transition: opacity 0.19s ease, transform 0.19s ease, filter 0.19s ease;
}
.lp-aus-fliesen.wechselt { opacity: 0; transform: translateY(6px); filter: blur(2px); }
.lp-aus-fliese {
  margin: 0; width: 84px;
  background: #fff; border-radius: 9px;
  padding: 3px 3px 4px;
  box-shadow: 0 3px 14px rgba(19, 19, 19, 0.18);
}
/* staerkerer Selektor: die spaetere ".lp-aus-bild img"-Regel (3:2)
   wuerde die Kaertchen sonst mit uebersteuern */
.lp-aus-bild .lp-aus-fliese img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover; border-radius: 7px;
}
.lp-aus-fliese figcaption {
  margin-top: 4px; text-align: center;
  font-size: 0.68rem; font-weight: 600; line-height: 1.3;
  letter-spacing: 0;
  color: var(--ink);
}
.lp-aus-bild img {
  display: block; width: 100%; height: auto; object-fit: cover;
  /* volle Spaltenbreite; 3:2 statt 16:9 — mehr Raumhoehe im Bild */
  aspect-ratio: 3 / 2;
}
.lp-aus-panel {
  display: grid; grid-template-columns: 1fr 0.7fr 1.1fr;
  gap: 1.6rem 2.5rem; align-items: start;
  min-height: 300px;
}
.lp-aus-linien { display: grid; gap: 0.5rem; }
.lp-aus-linie {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 0.85rem 1.1rem; border-radius: 14px;
  background: #fff; border: 1px solid var(--line); font: inherit;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.16s ease;
}
.lp-aus-linie strong { display: block; font-size: 0.98rem; font-weight: 800; }
.lp-aus-linie em { font-style: normal; font-size: 0.84rem; color: var(--muted); }
.lp-aus-linie.aktiv { border-color: var(--ink); background: var(--tint); }
.lp-aus-toene { display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.5rem; }
.lp-aus-tonlabel { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); width: 100%; }
.lp-aus-ton {
  display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer;
  padding: 0.5rem 1rem 0.5rem 0.55rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); font: inherit;
  font-size: 0.92rem; font-weight: 600; color: var(--muted);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.16s ease;
}
.lp-aus-ton i { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--ton); border: 1px solid rgba(0,0,0,0.1); }
.lp-aus-ton.aktiv { border-color: var(--ink); color: var(--ink); }
.lp-aus-ton.allein { pointer-events: none; }
.lp-aus-daten { margin: 0; display: grid; gap: 0.7rem; padding-top: 0.3rem; }
.lp-aus-daten > div { display: grid; gap: 0.1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.lp-aus-daten dt { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.lp-aus-daten dd { margin: 0; font-size: 0.92rem; line-height: 1.45; }
.lp-aus-fuss { font-size: 0.84rem !important; color: var(--muted) !important; grid-column: 1 / -1; margin-top: -0.4rem !important; }

/* ---------- 5b · Fuer wen: grosse Wechselkarte (Powder-Muster) ----------
   Eine Karte, darunter runde Pfeile aussen und Fortschrittsbalken in
   der Mitte. Der Inhalt wechselt per JS mit kurzer Blende. */
/* Schiene: alle Karten nebeneinander, die Pfeile schieben die Spur.
   overflow bleibt sichtbar — die Nachbarkarte lugt im Seitenrand
   herein und wird erst an der Fensterkante beschnitten. */
.lp-fw-schiene { margin-top: 1rem; }
.lp-fw-spur {
  display: flex; gap: 1.5rem;
  transition: transform 0.55s cubic-bezier(0.25, 1, 0.35, 1);
  /* horizontal gehoert der Spur (Wischen), vertikal weiter der Seite */
  touch-action: pan-y;
}
.lp-fw-karte { user-select: none; -webkit-user-select: none; }
.lp-fw-karte {
  /* Kartenmass der Vorlage: ~416x562, Hochformat, Radius 24 — die
     Karten laufen ueber den Spaltenrand hinaus, die Pfeile schieben */
  flex: 0 0 320px;
  background: #fff; border: 1px solid var(--line); border-radius: 24px;
  overflow: hidden;
  /* leichter Rand zwischen Bild und Kartenkante */
  padding: 0.55rem 0.55rem 0;
}
/* Icon-Flaeche statt Foto: die Zielgruppe ist ein Begriff, kein Raum */
.lp-fw-icon {
  border-radius: 18px; background: var(--tint);
  display: grid; place-items: center; height: 172px;
}
.lp-fw-icon span {
  display: grid; place-items: center;
  width: 92px; height: 92px; border-radius: 50%; background: var(--yellow);
}
.lp-fw-icon svg {
  width: 42px; height: 42px;
  fill: none; stroke: var(--ink); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.lp-fw-text { padding: 1.6rem 1.8rem 1.9rem; }
.lp-fw-text .lp-ref-tag { margin-bottom: 0.55rem; }
.lp-fw-text h3 { font-size: 1.08rem; letter-spacing: -0.015em; line-height: 1.3; margin-bottom: 0.4rem; }
.lp-fw-text p { font-size: 0.88rem; color: var(--muted); line-height: 1.55; }
.lp-fw-leiste {
  /* Drei Karten stehen am Desktop komplett im Blick — Pfeile und
     Balken braucht nur das Telefon, wo die Schiene schiebt */
  display: none;
  align-items: center; justify-content: space-between;
  margin-top: 1.4rem;
}
.lp-fw-pfeil {
  display: grid; place-items: center; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%;
  background: none; border: 1px solid var(--line);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lp-fw-pfeil:hover { border-color: var(--ink); background: #fff; }
.lp-fw-pfeil.aus { opacity: 0.35; pointer-events: none; }
.lp-fw-pfeil svg {
  width: 18px; height: 18px; fill: none; stroke: var(--ink);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.lp-fw-punkte { display: flex; gap: 0.45rem; }
.lp-fw-punkte i {
  width: 28px; height: 2px; border-radius: 2px; background: var(--line);
  transition: background 0.3s ease, width 0.3s ease;
}
.lp-fw-punkte i.an { width: 52px; background: var(--ink); }

/* ---------- 6 · Referenzen als laufendes Band ----------
   Endlos-Marquee nach dem Premium-Reviews-Muster: die Spur enthaelt
   den Kartensatz doppelt und faehrt um genau 50 % — nahtlose Schleife.
   Pause bei Hover; bei reduzierter Bewegung steht das Band und wird
   von Hand scrollbar. */
.lp-stimmen { text-align: center; padding: 11rem 0 5rem !important; }
.lp-stimmen .lp-pill { margin-left: auto; margin-right: auto; }
.lp-stimmen-kopf { max-width: 44rem; margin: 0 auto 2.6rem; }
/* Das Band bricht auf die volle Fensterbreite aus; der Kartensatz
   selbst bleibt linksbuendig, nur der Rahmen ist randlos. */
.lp-marquee {
  overflow: hidden; margin-top: 0.5rem; text-align: left;
  width: 100vw; margin-left: 50%; transform: translateX(-50%);
  cursor: grab; touch-action: pan-y;
}
.lp-marquee.zieht { cursor: grabbing; }
.lp-marquee.zieht .lp-ref-karte { pointer-events: none; }
.lp-marquee img { -webkit-user-drag: none; user-select: none; }
.lp-marquee-spur {
  display: flex; gap: 1.1rem; width: max-content;
  animation: lp-marquee 55s linear infinite;
}
@keyframes lp-marquee { to { transform: translateX(calc(-50% - 0.55rem)); } }
@media (prefers-reduced-motion: reduce) {
  .lp-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .lp-marquee-spur { animation: none; }
}
/* Im Schnitt der Auswahl-Karten des Konfigurators (.wz-kachel):
   helle Karte, 28er-Radius, weicher Doppelschatten, Bild als Inset
   mit eigenem 18er-Radius. */
.lp-ref-karte {
  width: 368px; flex-shrink: 0;
  background: var(--bg); border: 1.5px solid var(--line);
  border-radius: 28px;
  /* Bild sitzt knapp am Rand — schmaler Rahmen oben und seitlich */
  padding: 0.55rem 0.55rem 1.15rem;
  box-shadow: 0 1px 3px rgba(19, 19, 19, 0.06), 0 10px 30px rgba(19, 19, 19, 0.06);
}
.lp-ref-karte img {
  /* height:auto ist Pflicht: das height-Attribut im HTML wuerde sonst
     die aspect-ratio aushebeln und 660px hohe Streifen erzeugen */
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 23px; background: var(--tint);
}
.lp-ref-karte > div { padding: 1.2rem 0.85rem 0.5rem; }
.lp-ref-tag {
  display: inline-block; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 0.6rem;
}
.lp-ref-karte strong { display: block; font-size: 1.14rem; letter-spacing: -0.015em; line-height: 1.3; margin-bottom: 0.5rem; }
.lp-ref-ort {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.85rem; font-weight: 600; color: var(--ink);
  margin-bottom: 0.4rem;
}
.lp-ref-ort svg {
  width: 14px; height: 14px; flex-shrink: 0;
  fill: none; stroke: var(--muted); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.lp-ref-karte p { font-size: 0.82rem; color: var(--muted); }
/* CTA-Karte am Ende des Satzes */
.lp-ref-cta { background: var(--ink); border-color: var(--ink); display: grid; padding: 0; }
.lp-ref-cta button {
  all: unset; cursor: pointer; display: grid; align-content: center;
  justify-items: center; gap: 0.9rem; padding: 1.6rem 1.4rem;
  text-align: center; height: 100%; box-sizing: border-box;
}
.lp-ref-cta strong { color: #fff; font-size: 1.3rem; margin: 0; }
.lp-ref-cta-btn {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  margin-top: 0.2rem; padding: 0.8rem 1.5rem;
  background: var(--yellow); color: var(--ink);
  border-radius: 999px; font-weight: 800; font-size: 0.9rem;
  transition: transform 0.2s ease;
}
.lp-ref-cta button:hover .lp-ref-cta-btn { transform: translateY(-2px); }

/* Die ganze Sektion sitzt auf einer leisen grauen Flaeche — die weissen
   Gewerke-Pillen und die dunkle Nabe heben sich darauf ab. Aussenabstand
   kommt als margin, damit die Flaeche selbst kompakt bleibt. */
/* ".lp section" traegt max-width und margin:auto mit hoeherer
   Spezifitaet — der Ausbruch braucht denselben Vorbau im Selektor */
.lp section.lp-netz {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 32px;
  /* Die Flaeche laeuft fast bis an den Fensterrand, der Inhalt bleibt
     ueber die padding-Formel auf der normalen Spaltenbreite */
  max-width: none; width: calc(100vw - 40px);
  margin: 6.5rem 0 0 50%; transform: translateX(-50%);
  padding: 3.5rem max(3.5rem, calc((100% - var(--lp-breit)) / 2)) 5.5rem !important;
}
/* ---------- Aus einer Hand: FIX30 als Nabe ----------
   Satelliten sitzen per Prozent-Koordinaten auf einem Kreis, die
   SVG-Linien nutzen dasselbe 100er-Raster — Karte und Linienende
   treffen sich daher immer, egal wie breit der Kasten ist. Auf den
   Strahlen laeuft ein kurzer gelber Strich von der Mitte zu jedem
   Gewerk: die Koordination geht vom Baumeister aus. */
.lp-hub {
  position: relative; max-width: 880px; aspect-ratio: 2 / 1;
  /* unten Platz fuer die Nabe, die auf der Grundlinie sitzt und zur
     Haelfte darueber hinausragt */
  margin: 3rem auto 8.5rem;
}
.lp-hub-linien { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-hub-linien line, .lp-hub-linien path {
  fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke;
}
.lp-hub-linien .lp-hub-strahl {
  stroke: var(--yellow); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 10 90; stroke-dashoffset: 100;
  animation: lp-strahl 6.4s linear infinite;
}
@keyframes lp-strahl { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) { .lp-hub-linien .lp-hub-strahl { display: none; } }
.lp-hub-karte {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 0.55rem;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.6rem 1.05rem;
  box-shadow: 0 2px 10px rgba(19, 19, 19, 0.05);
  white-space: nowrap;
}
.lp-hub-karte svg {
  width: 19px; height: 19px; flex-shrink: 0;
  fill: none; stroke: var(--ink); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.lp-hub-karte span { font-size: 0.88rem; font-weight: 700; }
.lp-hub-mitte {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 0.35rem;
  background: var(--ink); color: #fff;
  border-radius: 20px; padding: 1.3rem 1.8rem;
  box-shadow: 0 14px 40px rgba(19, 19, 19, 0.22);
  text-align: center;
}
.lp-hub-logo { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.lp-hub-logo i { font-style: normal; color: var(--yellow); padding: 0 0.06em; }
.lp-hub-mitte em { font-style: normal; font-size: 0.78rem; color: rgba(255, 255, 255, 0.72); }

.lp-netz-usp {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  margin-top: 2.5rem;
}
.lp-netz-usp > div {
  display: flex; flex-direction: column;
  padding: 1.6rem 1.5rem 1.1rem;
  border-left: 1px solid var(--line);
}
.lp-netz-usp > div:first-child { border-left: none; padding-left: 0.2rem; }
.lp-netz-usp h3 { font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.lp-netz-usp p { font-size: 0.88rem; line-height: 1.55; color: var(--muted); margin-bottom: 1.3rem; }
.lp-netz-usp svg {
  width: 20px; height: 20px; margin-top: auto;
  fill: none; stroke: var(--ink); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- 7 · Fragen — Aufbau und Optik der MDA-Startseite ----------
   Links Intro mit Kapsel und Knopf, rechts die Fragen als getoente
   Karten; offen = weiss, das Plus dreht sich zum x. */
.lp-faq-grid { display: grid; grid-template-columns: 0.8fr 1.6fr; gap: 3.5rem; align-items: start; }
.lp-faq-intro h2 { margin-bottom: 0.5rem; }
.lp-faq-intro p { margin-bottom: 1.4rem; }
.lp-faq-liste { display: flex; flex-direction: column; gap: 0.9rem; }
.lp-faq-liste details {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.15rem 1.4rem;
}
.lp-faq-liste summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-weight: 600; font-size: 1.02rem; color: var(--ink);
}
.lp-faq-liste summary::-webkit-details-marker { display: none; }
.lp-faq-icon { font-size: 1.4rem; font-weight: 400; color: #444; transition: transform 0.3s; line-height: 1; }
.lp-faq-liste details[open] { background: #fff; }
.lp-faq-liste details[open] .lp-faq-icon { transform: rotate(45deg); }
.lp-faq-liste details p { margin-top: 0.8rem; font-size: 0.95rem; padding: 0; }

/* ---------- 8 · Abschluss + Fuss ---------- */
/* ".lp section" traegt das padding mit hoeherer Spezifitaet */
.lp section.lp-schluss { text-align: center; padding: 10rem 0 7rem; }
/* Kasten nach dem cta-with-rectangle-Muster: feiner Rahmen, gelber
   Schein, der von der Unterkante heraufsteigt */
.lp-schluss-kasten {
  background: var(--ink);
  border: 1px solid var(--ink); border-radius: 32px;
  padding: 5.5rem 2rem 6.5rem;
}
.lp-schluss-kasten h2 { color: #fff; }
.lp-schluss-kasten > p { color: rgba(255, 255, 255, 0.72) !important; }
/* Pille und leiser Knopf in der dunklen Flaeche */
.lp-schluss-kasten .lp-pill {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}
.lp-schluss-kasten .lp-pill svg { color: var(--yellow); }
.lp-schluss-kasten .lp-btn-leise { color: rgba(255, 255, 255, 0.65); }
.lp-schluss-kasten .lp-btn-leise:hover { color: #fff; }
.lp-schluss .lp-pill { margin-bottom: 1.6rem; }
.lp-schluss h2 { margin-bottom: 0.7rem; }
.lp-schluss p { max-width: 34rem; margin: 0 auto 2rem; }
.lp-schluss .btn { margin-bottom: 0.9rem; }
.lp-btn {
  display: inline-block; cursor: pointer; font: inherit; font-weight: 700;
  border-radius: 999px; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.lp-btn-hell {
  padding: 0.8rem 1.5rem; background: var(--ink); color: #fff; border: 1px solid var(--ink);
  font-size: 0.95rem;
}
.lp-btn-hell:hover {
  background: var(--yellow); border-color: var(--yellow); color: var(--ink);
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(19, 19, 19, 0.14);
}
.lp-btn-leise {
  display: block; margin: 0 auto; padding: 0.5rem 0.9rem;
  background: none; border: none; color: var(--muted); font-size: 0.93rem;
}
.lp-btn-leise:hover { color: var(--ink); }

.lp-fuss {
  max-width: var(--lp-breit); margin: 6rem auto 0; padding: 2.2rem 0 3rem;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem 1.5rem;
}
.lp-fuss img { display: block; opacity: 0.85; }
.lp-fuss p { font-size: 0.84rem !important; color: var(--muted) !important; flex: 1 1 20rem; }
.lp-fuss a { color: inherit; text-decoration: none; }
.lp-fuss p a:hover { color: var(--ink); text-decoration: underline; }
.lp-fuss-links { display: flex; gap: 1.2rem; font-size: 0.84rem; }
.lp-fuss-links a { color: var(--muted); }
.lp-fuss-links a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Einblenden: gestaffelt statt als Block ----------
   Nicht die Sektion faehrt herein, sondern ihre Kinder nacheinander
   (Vorzeile, Ueberschrift, Inhalt) — dieselbe Bewegung, mehr Tiefe.
   AUSNAHME: Elemente, die selbst per transform zentriert sind
   (KPI-Band, Referenzband), duerfen nur blenden, sonst wuerde die
   Staffel ihre Zentrierung ueberschreiben. */
.lp-auf > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.lp-auf > .lp-kpis-band, .lp-auf > .lp-marquee {
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.55s ease;
}
.lp-auf.sichtbar > * { opacity: 1; transform: none; }
.lp-auf.sichtbar > .lp-kpis-band, .lp-auf.sichtbar > .lp-marquee { transform: translateX(-50%); }
.lp-auf.sichtbar > *:nth-child(2) { transition-delay: 0.07s; }
.lp-auf.sichtbar > *:nth-child(3) { transition-delay: 0.14s; }
.lp-auf.sichtbar > *:nth-child(4) { transition-delay: 0.21s; }
.lp-auf.sichtbar > *:nth-child(n+5) { transition-delay: 0.28s; }

/* ---------- Hero-Auftritt beim Laden (reines CSS, laeuft ohne JS) ---------- */
@keyframes lp-auftauchen {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.hero-inner .hero-logo   { animation: lp-auftauchen 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s backwards; }
.hero-inner h1           { animation: lp-auftauchen 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.14s backwards; }
.hero-inner .rot-zeile   { animation: lp-auftauchen 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.23s backwards; }
.hero-inner .hero-aktionen { animation: lp-auftauchen 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.32s backwards; }

/* ---------- Leise Reaktionen auf den Zeiger ---------- */
/* Im laufenden Band wirkt jede Bewegung unruhig — der Hover zeichnet
   nur den Rand nach und vertieft den Schatten leicht */
.lp-ref-karte { transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.lp-ref-karte:hover {
  border-color: #d4d4ce;
  box-shadow: 0 1px 3px rgba(19, 19, 19, 0.06), 0 14px 36px rgba(19, 19, 19, 0.09);
}
.lp-hub-karte { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.lp-hub-karte:hover { transform: translate(-50%, -50%) translateY(-2px); box-shadow: 0 6px 18px rgba(19, 19, 19, 0.09); }
.lp-faq-liste details { transition: border-color 0.25s ease, background 0.25s ease; }
.lp-faq-liste details:hover { border-color: #d8d8d2; }
.lp-kpi strong { transition: transform 0.3s ease; }
.lp-kpi:hover strong { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .lp-auf > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lp-auf > .lp-kpis-band, .lp-auf > .lp-marquee { transform: translateX(-50%) !important; }
  .hero-inner .hero-logo, .hero-inner h1, .hero-inner .rot-zeile, .hero-inner .hero-aktionen { animation: none; }
  .lp-ref-karte, .lp-hub-karte, .lp-kpi strong, .lp-btn { transition: none; }
  .lp-btn-hell:hover { transform: none; box-shadow: none; }
  .lp-gross span { color: var(--ink); }
}

/* "Drag"-Abzeichen am Zeiger ueber dem Referenzband — Muster der
   MDA-Seite: aeusseres Element traegt NUR die JS-Position, das innere
   blendet und skaliert, sonst springt das Abzeichen beim Erscheinen. */
.lp-drag-badge { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 60; }
.lp-drag-badge-inner {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%;
  background: rgba(19, 19, 19, 0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25); color: #fff;
  opacity: 0; transform: scale(0.5);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lp-drag-badge-inner > span { font-size: 1rem; line-height: 1; opacity: 0.85; }
.lp-drag-badge em {
  font-style: normal; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.lp-drag-badge.an .lp-drag-badge-inner { opacity: 1; transform: scale(1); }
.lp-drag-badge.greift .lp-drag-badge-inner { transform: scale(0.85); }

/* Druckgefuehl: jedes klickbare Element bestaetigt den Druck mit
   einem minimalen Schrumpfen — 140ms, kaum sichtbar, deutlich spuerbar */
.btn, .lp-btn, .lp-fw-pfeil, .lp-aus-tabs button, .lp-aus-linie,
.lp-aus-ton, .dock-item, .hero-weiter, .lp-ref-cta button {
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .lp-btn:active, .lp-fw-pfeil:active,
.lp-aus-tabs button:active, .lp-aus-linie:active, .lp-aus-ton:active,
.dock-item:active, .hero-weiter:active, .lp-ref-cta button:active {
  transform: scale(0.97);
  transition-duration: 0.14s;
}

/* ---------- Schmale Schirme ---------- */
@media (max-width: 900px) {
  .lp section { padding-top: 4.5rem; }
  .lp-warum-kopf { grid-template-columns: 1fr; gap: 1rem; align-items: start; }
  .lp-prozess { grid-template-columns: 1fr; gap: 2.2rem; padding-top: 5rem !important; }
  .lp-prozess-links { position: static; }
  .lp-prozess-rechts { padding-left: 3.6rem; gap: 3rem; }
  .lp-meile-inhalt h3 { min-height: 3rem; }
  .lp-statement { padding: 7rem 0 4rem !important; }
  .lp-kpis-band { grid-template-columns: 1fr 1fr; gap: 1.2rem 0; padding: 1.6rem 0.5rem; }
  .lp-kpi:nth-child(3) { border-left: none; }
  /* Vergleich am Telefon: je Kriterium eine kleine Karte —
     oben das Kriterium, darunter FIX30 (fett) und der uebliche Weg */
  .lp-vgl { padding-bottom: 0; }
  .lp-vgl-zeile.lp-vgl-kopfzeile { display: none !important; }
  .lp-vgl-zeile {
    display: block;
    background: #fff; border: 1px solid var(--line) !important;
    border-radius: 16px; padding: 1rem 1.15rem 1.05rem;
  }
  .lp-vgl-zeile + .lp-vgl-zeile { margin-top: 0.75rem; }
  .lp-vgl-zeile > div {
    padding: 0 !important; margin: 0 !important;
    border: none !important; background: none !important;
    border-radius: 0 !important; box-shadow: none !important;
  }
  .lp-vgl-zeile .krit { padding-bottom: 0.65rem !important; }
  /* Absender sichtbar machen: FIX30 als gelb getoente Zeile mit
     Label, der uebliche Weg mit eigener kleiner Ueberschrift */
  /* Haengender Einzug: Zeichen in der ersten Spalte, Text daneben —
     umbrechende Zeilen bleiben buendig unter dem Textanfang */
  .lp-vgl-zeile .fix, .lp-vgl-zeile .alt {
    display: grid !important;
    grid-template-columns: auto 1fr;
    column-gap: 0.5rem; align-items: start;
  }
  .lp-vgl-zeile .fix::before, .lp-vgl-zeile .alt::before { grid-column: 1 / -1; }
  .lp-vgl-zeile .fix {
    color: var(--ink); font-weight: 700;
    background: rgba(252, 197, 13, 0.14) !important;
    border-radius: 10px !important;
    padding: 0.55rem 0.75rem 0.95rem !important;
    margin-bottom: 0.6rem !important;
  }
  .lp-vgl-zeile .alt { padding: 0 0.75rem 0.15rem !important; }
  .lp-vgl-zeile .fix::before, .lp-vgl-zeile .alt::before {
    display: block; font-size: 0.64rem; font-weight: 800;
    letter-spacing: 0.09em; margin-bottom: 3px;
  }
  .lp-vgl-zeile .fix::before { content: "FIX30"; color: var(--ink); }
  .lp-vgl-zeile .fix i, .lp-vgl-zeile .alt i { margin-top: 1px; }
  .lp-vgl-zeile .alt::before { content: "ÜBLICHE SANIERUNG"; color: #a5a5a0; }
  .lp-faq-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .lp-stimmen { padding: 6rem 0 3rem !important; }
  .lp section.lp-netz { width: auto; max-width: var(--lp-breit); margin: 4.5rem auto 0; transform: none; padding: 2rem 1.2rem 1.6rem !important; border-radius: 24px; }
  /* Hub am Telefon: Halbkreis bleibt (Powder-Muster) — die Gewerke
     werden zu runden Icon-Chips ohne Text, die Nabe kompakter */
  .lp-hub { margin: 1.5rem auto 2.2rem; }
  .lp-hub-karte {
    padding: 0; width: 42px; height: 42px;
    justify-content: center; border-radius: 50%;
  }
  .lp-hub-karte span { display: none; }
  .lp-hub-karte svg { width: 17px; height: 17px; }
  .lp-hub-mitte { padding: 0.7rem 1rem; border-radius: 14px; gap: 0.15rem; }
  .lp-hub-logo { font-size: 1.05rem; }
  .lp-hub-mitte em { font-size: 0.62rem; }
  .lp-netz-usp { grid-template-columns: 1fr; margin-top: 2rem; }
  .lp-netz-usp > div { border-left: none; border-top: 1px solid var(--line); padding: 1.3rem 0.2rem 1.1rem; }
  .lp-netz-usp > div:first-child { border-top: none; }
  .lp-zeitlinie { left: 1.5rem; top: 1.5rem; bottom: 1.5rem; }
  .lp-meile-kreis { left: -3.6rem; width: 3rem; height: 3rem; font-size: 1.05rem; }
    .lp-ablauf30 { grid-template-columns: 1fr; gap: 2rem; }
  .lp-ablauf30-links { position: static; }
  .lp-aus-buehne { grid-template-columns: 1fr; }
  .lp-aus-panel { grid-template-columns: 1fr; gap: 1.2rem; min-height: 0; }
  .lp-aus-bild img { aspect-ratio: 4 / 3; }
  .lp-aus-fliese { width: 62px; }
    .lp-fuss { margin-top: 4rem; }
  .lp-drag-badge { display: none; }
  .lp-fw-karte { flex: 0 0 86%; }
  .lp-fw-leiste { display: flex; }

  .lp section.lp-schluss { padding: 5rem 0 3rem; }
  .lp-schluss-kasten { padding: 3rem 1.1rem 4rem; border-radius: 24px; }
}

/* Weiche Uebergaenge der Ausstattung: Buehne (Reiterwechsel) und
   Datenblatt (Linienwechsel) blenden kurz aus, waehrend der Inhalt
   getauscht wird. */
@media (max-width: 560px) {
  /* Halbkreis hoeher ziehen (Ellipse), damit die Chips Luft haben —
     Karten und Linien teilen sich Prozentkoordinaten, sie treffen
     sich also auch verzerrt exakt */
  /* Grafik nutzt die volle Kartenbreite: sie blutet in das
     Innenpolster der grauen Flaeche hinein */
  /* 1.7:1 statt 1.4:1 — bei 1.4 wurden die Kreisboegen sichtbar zu
     Hochkant-Ellipsen gestaucht. 1.7 ist nah genug am echten Kreis,
     die Chips behalten trotzdem ihre Luft. */
  .lp-hub { aspect-ratio: 1.7 / 1; margin: 1rem -0.9rem 1.4rem; }
  .lp-hub-karte { width: 40px; height: 40px; }
  .lp-hub-karte svg { width: 16px; height: 16px; }
  .lp-hub-mitte { padding: 0.5rem 0.85rem; border-radius: 12px; }
  .lp-hub-mitte em { display: none; }
  .lp-hub-logo { font-size: 0.95rem; }
}

.lp-aus-buehne, .lp-aus-daten { transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), filter 0.24s ease; }
/* Der leichte Blur verschmilzt alten und neuen Zustand zu EINER
   Verwandlung — ohne ihn sieht man zwei Bilder uebereinander */
.lp-aus-buehne.wechselt, .lp-aus-daten.wechselt { opacity: 0; transform: translateY(6px); filter: blur(3px); }
@media (prefers-reduced-motion: reduce) {
  .lp-aus-buehne, .lp-aus-daten, .lp-fw-spur, .lp-aus-fliesen, .lp-aus-chip { transition: none; }
  .lp-kompo .k-el, .lp-kompo .k-muster, .lp-meile-box img { transition: none; }
}
/* Beschriftung der aktuellen Wahl im Bild */
.lp-aus-bild { position: relative; }
.lp-aus-chip {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(255, 255, 255, 0.92); color: var(--ink);
  padding: 0.45rem 0.9rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em;
  box-shadow: 0 2px 10px rgba(19, 19, 19, 0.12);
  transition: opacity 0.19s ease, transform 0.19s ease;
}
.lp-aus-chip.wechselt { opacity: 0; transform: translateY(4px); }
/* Auswahlpunkt in den Linien-Knoepfen: leerer Ring, aktiv gelb gefuellt */
.lp-aus-linie { display: flex; align-items: center; gap: 0.75rem; }
.lp-aus-punkt {
  flex-shrink: 0; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.lp-aus-linie.aktiv .lp-aus-punkt {
  border-color: var(--ink); background: var(--yellow);
  box-shadow: inset 0 0 0 2.5px #fff;
}


/* Honigtopf-Feld der Terminbuchung: aus dem sichtbaren Bereich geschoben
   statt display:none. Bots, die auf versteckte Felder pruefen, sehen es
   als normales Eingabefeld und fuellen es aus — genau das wollen wir. */
.hp-feld {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ------------------------------------------------------------
   QUADRATGITTER IM HINTERGRUND (Experiment, August 2026)

   Zwei feste Ebenen VOR dem .app-Container im DOM, dadurch liegen
   sie unter allem Inhalt, ohne z-index-Spiele:
     .gitter       ganz dezente graue Linien ueber die volle Flaeche
     .gitter-glut  dieselben Linien in Gelb plus zarte Zellfuellung,
                   per Radialmaske auf einen Kreis um den Mauszeiger
                   beschnitten (Position kommt aus landing.js)
   Alles haengt an body.mit-gitter — Klasse entfernen schaltet ab.
   ------------------------------------------------------------ */
.gitter { display: none; }
body.mit-gitter .gitter {
  display: block;
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(19, 19, 19, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(19, 19, 19, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  /* Oben ausblenden (angeschnittene Zellen unter der Topbar wirkten
     unruhig), unten zum Falz hin auslaufen lassen: das Gitter gehoert
     nur zum Hero und soll vor der naechsten Sektion verschwunden sein.
     Zusaetzlich blendet landing.js die ganze Ebene beim Scrollen aus. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 120px, black 58%, transparent 92%);
          mask-image: linear-gradient(to bottom, transparent 0, black 120px, black 58%, transparent 92%);
  opacity: var(--gitter-o, 1);
}
body.mit-gitter .gitter-glut {
  position: absolute; inset: 0; display: block;
  /* Volles CI-Gelb (--yellow, #fcc50d): halbtransparent kippte es auf
     Weiss ins Blasse und sah nach fremder Farbe aus. Die Daempfung zum
     Rand uebernimmt allein die Radialmaske. */
  background-image:
    linear-gradient(to right,  var(--yellow) 1px, transparent 1px),
    linear-gradient(to bottom, var(--yellow) 1px, transparent 1px),
    linear-gradient(rgba(252, 197, 13, 0.05), rgba(252, 197, 13, 0.05));
  background-size: 56px 56px, 56px 56px, auto;
  opacity: 0;
  transition: opacity 0.4s ease;
  -webkit-mask-image: radial-gradient(150px circle at var(--gx, -500px) var(--gy, -500px), black, transparent 72%);
          mask-image: radial-gradient(150px circle at var(--gx, -500px) var(--gy, -500px), black, transparent 72%);
}
body.mit-gitter.gitter-wach .gitter-glut { opacity: 1; }
/* Ohne Mauszeiger (Telefon, Tablet) gibt es nichts zu verfolgen */
@media (hover: none) { body.mit-gitter .gitter-glut { display: none; } }
@media (prefers-reduced-motion: reduce) {
  body.mit-gitter .gitter-glut { transition: none; }
}

/* Quadratgitter nur auf der Startseite — im Konfigurator ausgeblendet */
body.ohne-gitter .gitter { display: none; }

/* Erfolgs-Moment am Richtangebot: Preis setzt mit kurzem Puls auf,
   die drei Zusagen darunter ticken nacheinander ein. Zeiten so gelegt,
   dass die Liste einsetzt, wenn der Zaehler (0,9 s) gelandet ist. */
.erg-preis { font-variant-numeric: tabular-nums; }
.erg-preis.erg-landet { animation: erg-settle 0.34s cubic-bezier(0.32, 1.2, 0.4, 1); }
/* Buehne fuer das Konfetti — fix ueber dem ganzen Bildschirm, unter dem
   Dock (z 60), laesst Klicks durch */
.erg-konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 58; overflow: hidden; }
.erg-konfetti i { position: absolute; display: block; border-radius: 1px; }

.erg-preiskarte.erg-animiert .erg-inkl li {
  animation: erg-tick 0.38s ease-out backwards;
}
.erg-preiskarte.erg-animiert .erg-inkl li:nth-child(1) { animation-delay: 1.55s; }
.erg-preiskarte.erg-animiert .erg-inkl li:nth-child(2) { animation-delay: 1.67s; }
.erg-preiskarte.erg-animiert .erg-inkl li:nth-child(3) { animation-delay: 1.79s; }
@keyframes erg-tick {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .erg-preis.erg-landet,
  .erg-preiskarte.erg-animiert .erg-inkl li { animation: none; }
}

/* Haken im Badge zeichnet sich beim Erscheinen des Richtangebots selbst —
   der klassische Bestaetigungs-Moment, in CI-Dunkel auf dem gelben Pill. */
.erg-badge-haken {
  width: 13px; height: 13px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}
.erg-badge-haken path { stroke-dasharray: 22; }
.erg-preiskarte.erg-animiert .erg-badge-haken path {
  animation: erg-haken 0.45s ease-out 0.15s backwards;
}
@keyframes erg-haken {
  from { stroke-dashoffset: 22; }
  to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .erg-preiskarte.erg-animiert .erg-badge-haken path { animation: none; }
}

/* Odometer: jede Ziffer eine Walze mit exakt 1em hohen Zellen — die
   translateY-Schritte des Bandes rechnen in em, deshalb ist die Hoehe
   hier nicht verhandelbar. Flex statt Inline: ueberlaufende Walzen
   wuerden als Inline-Bloecke auf der Grundlinie verrutschen. */
.erg-preis.erg-rollt { display: flex; align-items: center; line-height: 1; }
.erg-fix { white-space: pre; }
.erg-walze { display: block; height: 1em; overflow: hidden; }
.erg-band {
  display: block;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.35, 0, 0.12, 1);
  will-change: transform;
}
.erg-band span { display: block; height: 1em; line-height: 1; }


/* ============================================================
   RECHTSSEITEN (impressum.html, datenschutz.html)

   KLASSENNAME MIT BEDACHT: hier stand zuerst schlicht ".rechtsseite" — und
   das traf die Pfeile der Terminauswahl mit, die seit jeher
   class="tage-pfeil rechts" tragen. Deren Breite (30px) und Hoehe
   (100%) wurden vom Innenabstand dieser Regel ueberschrieben, weil ein
   Element bei box-sizing: border-box nicht schmaler werden kann als
   sein Padding: aus 30x69 wurde 45x128. Der Knopf ragte damit aus
   seiner Leiste und legte seinen weissen Verlauf ueber die Ecke des
   darunterliegenden Eingabefeldes.

   Deshalb "rechtsseite": ein Wort, das im Projekt nur einmal vorkommt.
   Ein Richtungswort als Klassenname ist in einer Oberflaeche mit
   Pfeilen, Spalten und Ausrichtungen eine Kollision auf Zeit.

   Eigene Klassen, KEINE doc-*. Die doc-Klassen gehoeren zum
   Angebotsblatt: sie erzwingen 210 mm Blattbreite und legen ueber
   jede .doc-seite das Wasserzeichen "ENTWURF – UNVERBINDLICH".
   Auf einem Impressum waere beides falsch — auf dem Handy ein
   Blatt, das nicht ins Fenster passt, und ueber den Pflichtangaben
   das Wort "unverbindlich".
   ============================================================ */
.rechtsseite {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3.5rem 1.4rem 4.5rem;
  color: var(--body-c);
}
.rechtsseite-marke {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: 2.4rem;
  font-size: 0.82rem; color: var(--muted); text-decoration: none;
}
.rechtsseite-marke .fix30-logo { font-size: 1.15rem; }
.rechtsseite-marke:hover { color: var(--ink); }
.rechtsseite h1 {
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  letter-spacing: -0.03em; color: var(--ink);
}
.rechtsseite-sub { margin: 0.6rem 0 2.4rem; color: var(--muted); font-size: 0.9rem; }
.rechtsseite h2 {
  font-size: 1.1rem; letter-spacing: -0.02em; color: var(--ink);
  margin: 2.4rem 0 0.7rem;
}
.rechtsseite p { margin-bottom: 0.9rem; font-size: 0.95rem; line-height: 1.65; }
.rechtsseite strong { color: var(--ink); }
.rechtsseite a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Die Markenzeile ist ein Link, soll aber kein unterstrichener Satz sein —
   .rechtsseite a greift sonst mit gleicher Spezifitaet und liegt weiter unten. */
.rechtsseite a.rechtsseite-marke { text-decoration: none; }
.rechtsseite-zurueck {
  display: inline-block; margin-top: 2.8rem;
  padding-top: 1.6rem; border-top: 1px solid var(--line);
  font-size: 0.9rem;
}