/* Luca Leon Meier Fensterreinigung – Gestaltung nach den Apple-Designregeln (Skill „apple-design“).
   Systemschrift mit größenabhängiger Laufweite, viel Weißraum, transluzente Navigation,
   sofortiges Feedback beim Drücken, Rücksicht auf „Bewegung/Transparenz reduzieren“.
   Der eine auffällige Moment: der Abzieher im Startbild. Alles andere bleibt ruhig. */

:root {
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --line: rgba(0, 0, 0, 0.09);
  --fill: rgba(118, 118, 128, 0.12);
  --accent: #4E7D5E;          /* Grün wie Rechnungen und Visitenkarten */
  --accent-hover: #426E52;
  --accent-text: #3E6B4F;
  --accent-tint: rgba(78, 125, 94, 0.10);
  --stage: #1F3A2B;           /* dunkles Grün für die Bühne des Preisrechners */
  --glass: #dce9f2;
  --star: #F2B01E;
  --r-xl: 28px;
  --r-l: 18px;
  --r-m: 12px;
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --nav-h: 52px;
  --w: 1040px;
  interpolate-size: allow-keywords;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.47;
  letter-spacing: -0.01em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; }
a { color: var(--accent-text); }
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }

.wrap { width: min(100% - 2.5rem, var(--w)); margin-inline: auto; }
.block { padding-block: clamp(4.5rem, 10vw, 7.5rem); }
.alt { background: var(--bg-2); }
.center { text-align: center; }

/* Typografie */
.display { font-size: clamp(2.6rem, 7.4vw, 5rem); line-height: 1.04; letter-spacing: -0.028em; font-weight: 700; text-wrap: balance; }
.title { font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.022em; font-weight: 700; text-wrap: balance; }
.lead { font-size: clamp(1.1875rem, 2.1vw, 1.4375rem); line-height: 1.42; letter-spacing: -0.012em; color: var(--text-2); text-wrap: pretty; }
.fine { font-size: 0.8125rem; line-height: 1.45; letter-spacing: 0.003em; color: var(--text-2); }
.section-head { max-width: 44rem; margin-inline: auto; }
.section-head .lead { margin-top: 1rem; }

/* Navigation */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
  background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
  opacity: 0; transition: opacity 200ms ease; pointer-events: none;
}
.nav.scrolled::after { opacity: 1; }
.nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--text); min-height: 44px; }
.brand-name { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.15; }
.brand-sub { display: block; font-size: 0.75rem; color: var(--text-2); font-weight: 400; letter-spacing: 0; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; font-size: 0.875rem; letter-spacing: -0.005em; }
.nav-links a:not(.btn) { color: var(--text); opacity: 0.8; text-decoration: none; padding-block: 0.75rem; }
.nav-links a:not(.btn):hover { opacity: 1; }
@media (max-width: 880px) { .nav-links .opt { display: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav { background: rgba(255, 255, 255, 0.97); } }
@media (prefers-reduced-transparency: reduce) { .nav { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.75rem 1.375rem; border: 0; border-radius: 980px;
  font-size: 1.0625rem; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease, transform 100ms ease-out;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-secondary { background: var(--accent-tint); color: var(--accent-text); }
.btn-secondary:hover { background: rgba(78, 125, 94, 0.16); }
.btn-small { min-height: 32px; padding: 0.375rem 0.9375rem; font-size: 0.875rem; }
.btn-block { width: 100%; }
.link-btn { border: 0; background: none; padding: 0.25rem 0; color: var(--accent-text); font-size: 0.875rem; font-weight: 500; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid rgba(78, 125, 94, 0.55); outline-offset: 2px; border-radius: 6px; }

/* Hero: Text und Startbild sind eine Szene. Sie bleibt stehen, solange der Abzieher putzt (position: sticky,
   top und Höhe der Bühne setzt seite.js), danach scrollt die Seite normal weiter. */
.hero { text-align: center; }
.hero-szene { padding: clamp(1.5rem, 4.5vh, 3.25rem) 0 clamp(0.75rem, 2.2vh, 1.5rem); }
.hero-szene.pin { position: sticky; }
.hero .display { font-size: clamp(2.3rem, min(7vw, 8.6vh), 4.5rem); }
.hero .lead { max-width: 40rem; margin: clamp(0.625rem, 1.6vh, 1.125rem) auto 0; }
.cta-row { margin-top: clamp(1rem, 2.6vh, 1.75rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; }
@media (max-width: 560px) { .nur-breit { display: none; } }

/* Startbild: ein Fenster mit Rahmen in Anthrazit, dahinter Essen im Abendlicht */
.fenster {
  --rahmen: clamp(10px, 1.3vw, 17px);
  position: relative; width: fit-content; margin: clamp(1.25rem, 3vh, 2.25rem) auto 0;
  padding: var(--rahmen); border-radius: 12px;
  background: linear-gradient(180deg, #4e565c 0%, #3a4146 38%, #2b3135 100%);
  box-shadow: 0 36px 72px -34px rgba(18, 22, 26, 0.55), 0 3px 10px rgba(18, 22, 26, 0.16),
              inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}
/* Fuge zwischen Blendrahmen und Flügel */
.fenster::before {
  content: ""; position: absolute; inset: calc(var(--rahmen) * 0.45); border-radius: 8px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.wipe {
  position: relative; isolation: isolate; overflow: hidden;
  width: min(100vw - 2.5rem - 2 * var(--rahmen), 1120px);
  aspect-ratio: 16 / 9; border-radius: 4px; background: linear-gradient(#477ab4, #f1bc96);
  box-shadow: 0 0 0 2px #14181b;
}
@media (max-width: 900px) { .wipe { aspect-ratio: 4 / 3; } }
@media (max-width: 560px) { .fenster { border-radius: 10px; } .wipe { aspect-ratio: 4 / 5; border-radius: 3px; } }
/* Schatten, den der Rahmen auf das Glas wirft */
.wipe::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.36), inset 0 0 2px rgba(0, 0, 0, 0.55);
}
.wipe-view, .wipe-dirt { position: absolute; inset: 0; }
.wipe-view picture { position: absolute; inset: 0; }
.wipe-view img { width: 100%; height: 100%; object-fit: cover; }
/* Leichte Spiegelung auf dem Glas, wandert beim Putzen ein wenig mit */
.spiegel {
  position: absolute; inset: -10% -25%; z-index: 1; pointer-events: none; will-change: transform;
  background:
    linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, 0.1) 41%, rgba(255, 255, 255, 0.035) 47%, transparent 55%),
    linear-gradient(112deg, transparent 58%, rgba(255, 255, 255, 0.055) 62%, transparent 66%);
}
/* Ausschnitt (Förderturm im Bild) und Größe setzt seite.js für Szene und Schmutzbild gleich, damit beide deckungsgleich sind */
/* Schmutzige Scheibe: ein fertiges Bild derselben Szene (weichgezeichnet, blasser, mit Staub, Laufspuren und Kalkflecken),
   genau deckungsgleich über der scharfen Szene. Bis es geladen ist, zeigt ein heller Schleier die schmutzige Scheibe. */
.wipe-dirt { background: rgba(236, 233, 226, 0.42); will-change: clip-path, opacity; }
.wipe-dirt picture { position: absolute; inset: 0; }
.wipe-dirt img { width: 100%; height: 100%; object-fit: cover; }
/* Wasserkante, die der Abzieher am unteren Rand jeder Bahn stehen lässt (leicht wellig, mit Tropfen) */
.wl {
  position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 14px; opacity: 0; pointer-events: none; will-change: transform, clip-path;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='14' viewBox='0 0 1200 14'%3E%3Cdefs%3E%3CradialGradient id='p' cx='0.36' cy='0.32' r='0.72'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0.95'/%3E%3Cstop offset='0.38' stop-color='%23fff' stop-opacity='0.3'/%3E%3Cstop offset='0.82' stop-color='%23a3b3bf' stop-opacity='0.3'/%3E%3Cstop offset='1' stop-color='%234a5a66' stop-opacity='0.6'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0 7.2 L10 7.3 L20 7.4 L30 7.2 L40 7.4 L50 6.6 L60 7.0 L70 7.4 L80 7.1 L90 7.4 L100 6.7 L110 7.0 L120 6.8 L130 7.0 L140 7.1 L150 6.6 L160 6.7 L170 6.8 L180 7.4 L190 7.2 M200 7.1 L210 6.7 L220 6.6 L230 7.3 L240 6.7 L250 6.7 L260 7.4 L270 7.3 L280 6.8 L290 7.4 L300 7.0 L310 7.2 M320 7.4 L330 6.8 L340 6.9 L350 6.7 L360 6.7 L370 6.6 L380 6.8 L390 7.1 L400 6.6 L410 7.2 L420 6.9 L430 6.8 L440 7.3 L450 7.0 L460 6.8 L470 7.0 L480 7.2 L490 6.6 L500 7.4 L510 6.6 L520 7.2 L530 7.3 L540 6.6 L550 7.3 L560 6.9 L570 7.1 M580 7.1 L590 7.4 L600 6.7 L610 6.8 L620 7.3 L630 7.0 L640 7.0 L650 7.4 L660 6.8 L670 7.0 L680 7.1 L690 7.3 L700 6.9 L710 6.8 L720 6.9 L730 7.4 L740 6.7 L750 7.0 L760 6.9 L770 6.7 L780 6.8 L790 7.2 M800 7.3 L810 7.1 L820 7.2 L830 6.8 L840 7.0 L850 7.2 L860 6.6 L870 7.1 L880 7.4 L890 6.6 L900 7.2 L910 6.9 L920 6.8 L930 7.1 L940 6.7 M950 6.9 L960 6.7 L970 7.4 L980 7.1 L990 6.7 L1000 7.4 L1010 6.9 L1020 6.7 L1030 6.9 L1040 6.6 L1050 6.9 L1060 6.7 L1070 7.4 L1080 7.1 L1090 6.7 L1100 7.0 L1110 7.4 L1120 7.2 L1130 6.8 L1140 6.8 L1150 7.0 L1160 7.4 L1170 6.7 M1180 7.0 L1190 6.9' transform='translate(0 0.9)' stroke='%233a4e5c' stroke-opacity='0.2' stroke-width='1.3' fill='none'/%3E%3Cpath d='M0 7.2 L10 7.3 L20 7.4 L30 7.2 L40 7.4 L50 6.6 L60 7.0 L70 7.4 L80 7.1 L90 7.4 L100 6.7 L110 7.0 L120 6.8 L130 7.0 L140 7.1 L150 6.6 L160 6.7 L170 6.8 L180 7.4 L190 7.2 M200 7.1 L210 6.7 L220 6.6 L230 7.3 L240 6.7 L250 6.7 L260 7.4 L270 7.3 L280 6.8 L290 7.4 L300 7.0 L310 7.2 M320 7.4 L330 6.8 L340 6.9 L350 6.7 L360 6.7 L370 6.6 L380 6.8 L390 7.1 L400 6.6 L410 7.2 L420 6.9 L430 6.8 L440 7.3 L450 7.0 L460 6.8 L470 7.0 L480 7.2 L490 6.6 L500 7.4 L510 6.6 L520 7.2 L530 7.3 L540 6.6 L550 7.3 L560 6.9 L570 7.1 M580 7.1 L590 7.4 L600 6.7 L610 6.8 L620 7.3 L630 7.0 L640 7.0 L650 7.4 L660 6.8 L670 7.0 L680 7.1 L690 7.3 L700 6.9 L710 6.8 L720 6.9 L730 7.4 L740 6.7 L750 7.0 L760 6.9 L770 6.7 L780 6.8 L790 7.2 M800 7.3 L810 7.1 L820 7.2 L830 6.8 L840 7.0 L850 7.2 L860 6.6 L870 7.1 L880 7.4 L890 6.6 L900 7.2 L910 6.9 L920 6.8 L930 7.1 L940 6.7 M950 6.9 L960 6.7 L970 7.4 L980 7.1 L990 6.7 L1000 7.4 L1010 6.9 L1020 6.7 L1030 6.9 L1040 6.6 L1050 6.9 L1060 6.7 L1070 7.4 L1080 7.1 L1090 6.7 L1100 7.0 L1110 7.4 L1120 7.2 L1130 6.8 L1140 6.8 L1150 7.0 L1160 7.4 L1170 6.7 M1180 7.0 L1190 6.9' stroke='%23fff' stroke-opacity='0.72' stroke-width='0.9' fill='none'/%3E%3Ccircle cx='7.2' cy='7.2' r='1.1' fill='url(%23p)'/%3E%3Ccircle cx='16.1' cy='6.8' r='1.4' fill='url(%23p)'/%3E%3Ccircle cx='24.2' cy='7.3' r='0.8' fill='url(%23p)'/%3E%3Ccircle cx='51.9' cy='6.6' r='1.4' fill='url(%23p)'/%3E%3Cellipse cx='81.1' cy='7.7' rx='2.3' ry='3.1' fill='url(%23p)'/%3E%3Ccircle cx='114.5' cy='7.8' r='1.1' fill='url(%23p)'/%3E%3Ccircle cx='131.6' cy='6.6' r='0.8' fill='url(%23p)'/%3E%3Ccircle cx='154.1' cy='6.8' r='1.1' fill='url(%23p)'/%3E%3Ccircle cx='169.6' cy='8.2' r='0.8' fill='url(%23p)'/%3E%3Ccircle cx='189.3' cy='6.3' r='1.8' fill='url(%23p)'/%3E%3Ccircle cx='210.2' cy='6.7' r='0.8' fill='url(%23p)'/%3E%3Ccircle cx='221.6' cy='6.4' r='2.3' fill='url(%23p)'/%3E%3Ccircle cx='255.1' cy='6.1' r='0.8' fill='url(%23p)'/%3E%3Ccircle cx='282.9' cy='7.4' r='0.8' fill='url(%23p)'/%3E%3Ccircle cx='318.9' cy='8.2' r='1.1' fill='url(%23p)'/%3E%3Ccircle cx='335.3' cy='8.1' r='1.1' fill='url(%23p)'/%3E%3Ccircle cx='350.7' cy='6.4' r='2.3' fill='url(%23p)'/%3E%3Ccircle cx='377.0' cy='7.8' r='0.6' fill='url(%23p)'/%3E%3Ccircle cx='389.6' cy='8.4' r='1.4' fill='url(%23p)'/%3E%3Ccircle cx='401.7' cy='6.2' r='1.8' fill='url(%23p)'/%3E%3Ccircle cx='423.7' cy='6.9' r='1.1' fill='url(%23p)'/%3E%3Ccircle cx='441.6' cy='6.1' r='1.1' fill='url(%23p)'/%3E%3Ccircle cx='454.9' cy='6.8' r='1.4' fill='url(%23p)'/%3E%3Ccircle cx='491.4' cy='8.1' r='1.8' fill='url(%23p)'/%3E%3Cellipse cx='515.4' cy='8.2' rx='2.3' ry='3.1' fill='url(%23p)'/%3E%3Ccircle cx='531.6' cy='8.3' r='1.1' fill='url(%23p)'/%3E%3Ccircle cx='547.6' cy='6.2' r='0.8' fill='url(%23p)'/%3E%3Ccircle cx='567.3' cy='7.2' r='1.1' fill='url(%23p)'/%3E%3Ccircle cx='588.8' cy='6.9' r='0.6' fill='url(%23p)'/%3E%3Ccircle cx='610.6' cy='6.2' r='0.6' fill='url(%23p)'/%3E%3Ccircle cx='620.4' cy='7.6' r='1.4' fill='url(%23p)'/%3E%3Cellipse cx='637.5' cy='8.0' rx='1.8' ry='2.4' fill='url(%23p)'/%3E%3Ccircle cx='671.7' cy='7.0' r='1.1' fill='url(%23p)'/%3E%3Ccircle cx='709.0' cy='7.1' r='1.1' fill='url(%23p)'/%3E%3Ccircle cx='737.9' cy='8.0' r='0.8' fill='url(%23p)'/%3E%3Ccircle cx='749.9' cy='7.8' r='1.1' fill='url(%23p)'/%3E%3Ccircle cx='766.2' cy='5.9' r='0.8' fill='url(%23p)'/%3E%3Ccircle cx='802.5' cy='8.2' r='0.8' fill='url(%23p)'/%3E%3Ccircle cx='813.9' cy='7.6' r='0.6' fill='url(%23p)'/%3E%3Ccircle cx='850.7' cy='6.0' r='0.8' fill='url(%23p)'/%3E%3Ccircle cx='862.0' cy='7.1' r='0.8' fill='url(%23p)'/%3E%3Ccircle cx='886.3' cy='7.1' r='0.8' fill='url(%23p)'/%3E%3Ccircle cx='894.5' cy='8.0' r='1.1' fill='url(%23p)'/%3E%3Ccircle cx='923.8' cy='7.1' r='0.8' fill='url(%23p)'/%3E%3Ccircle cx='961.6' cy='8.1' r='1.1' fill='url(%23p)'/%3E%3Cellipse cx='995.9' cy='6.7' rx='1.8' ry='2.4' fill='url(%23p)'/%3E%3Ccircle cx='1011.7' cy='7.4' r='1.4' fill='url(%23p)'/%3E%3Ccircle cx='1019.5' cy='7.6' r='0.8' fill='url(%23p)'/%3E%3Ccircle cx='1051.7' cy='5.9' r='0.6' fill='url(%23p)'/%3E%3Ccircle cx='1075.8' cy='6.2' r='1.4' fill='url(%23p)'/%3E%3Ccircle cx='1088.7' cy='7.9' r='0.8' fill='url(%23p)'/%3E%3Ccircle cx='1114.2' cy='8.3' r='1.4' fill='url(%23p)'/%3E%3Ccircle cx='1147.8' cy='7.1' r='1.4' fill='url(%23p)'/%3E%3Ccircle cx='1177.1' cy='7.1' r='1.8' fill='url(%23p)'/%3E%3Ccircle cx='1193.5' cy='7.8' r='0.6' fill='url(%23p)'/%3E%3C/svg%3E") repeat-x 0 0 / 1200px 14px;
}
/* Abzieher: zwei Ebenen, Wasser und Werkzeug. Der Schatten ist eine eigene, fest weichgezeichnete Ebene,
   die nur verschoben wird: so bleibt die Bewegung flüssig und der Schatten fällt immer nach unten rechts. */
.sq-schatten { position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.sq-schatten svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0.3; }
.squeegee { position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.squeegee svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.squeegee .perle-b { opacity: 0; }
.wipe-hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  padding: 0.5rem 0.95rem; border-radius: 980px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.78); color: var(--text);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0; transition: opacity 250ms ease; z-index: 5;
}
.wipe::after {
  content: ""; position: absolute; inset: -10% -40%; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 250, 240, 0.32) 50%, transparent 60%);
  transform: translateX(-45%);
}
.wipe.shine::after { animation: shine 1100ms var(--ease-out) forwards; }
@keyframes shine { 0% { opacity: 1; transform: translateX(-45%); } 100% { opacity: 1; transform: translateX(45%); } }

/* Ablauf: echte Reihenfolge, deshalb Zahlen */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: left; }
@media (max-width: 760px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } }
.step { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.step-no { font-size: 2.75rem; line-height: 1; font-weight: 700; letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.step h3 { margin-top: 0.875rem; font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.016em; }
.step p { margin-top: 0.375rem; color: var(--text-2); }

/* Preisrechner-Bühne */
.stage { background: var(--stage); color: #fff; }
.stage .title { color: #fff; }
.stage .lead { color: rgba(255, 255, 255, 0.74); }
.calc { width: min(100% - 2.5rem, 1120px); margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; color: var(--text); }
@media (max-width: 940px) { .calc { grid-template-columns: minmax(0, 1fr); } }
.panel { background: #fff; border-radius: var(--r-xl); padding: clamp(1.25rem, 3vw, 2rem); }
.q + .q { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.q-head { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; }
.q-no { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-text); font-size: 0.8125rem; font-weight: 600; display: grid; place-items: center; letter-spacing: 0; }
.q-title { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.016em; line-height: 1.25; }
.q-hint { margin-top: 0.75rem; }
.q-note { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin: -0.5rem 0 1rem; }

/* Segment-Auswahl */
.seg { --n: 3; position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding: 3px; border-radius: var(--r-m); background: var(--fill); }
.seg-4 { --n: 4; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  min-height: 44px; padding: 0.625rem 0.375rem; border-radius: 9px; cursor: pointer; user-select: none; text-align: center;
  font-size: 0.9375rem; font-weight: 500; line-height: 1.2; -webkit-tap-highlight-color: transparent;
  transition: transform 100ms ease-out;
}
.seg-4 label { font-size: 0.8125rem; padding: 0.5rem 0.25rem; }
.seg label:active { transform: scale(0.97); }
.seg label svg { width: 28px; height: 28px; }
.seg input:checked + label { font-weight: 600; }
.seg input:focus-visible + label { outline: 3px solid rgba(78, 125, 94, 0.55); outline-offset: 1px; }
.seg-thumb {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n));
  border-radius: 9px; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.04);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 320ms var(--ease-out);
}

/* Zähler */
.total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.625rem 0.625rem 0.625rem 1.125rem; border-radius: 16px; background: var(--bg-2); }
.total-label { font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 0.375rem; }
.stepper button {
  width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); -webkit-tap-highlight-color: transparent;
  transition: transform 100ms ease-out, opacity 150ms ease;
}
.stepper button:active { transform: scale(0.9); }
.stepper button:disabled { opacity: 0.35; cursor: default; transform: none; }
.stepper svg { width: 16px; height: 16px; }
.count { min-width: 2.25ch; text-align: center; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.total input {
  width: 3.25ch; border: 0; background: transparent; text-align: center; padding: 0.25rem 0;
  font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.total input::-webkit-outer-spin-button, .total input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Schalter wie bei iOS */
.switch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.75rem 0.75rem 1.125rem; border-radius: 16px; background: var(--bg-2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.switch-text strong { display: block; font-weight: 600; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-ui { flex: none; position: relative; width: 51px; height: 31px; border-radius: 31px; background: rgba(120, 120, 128, 0.32); transition: background-color 200ms ease; }
.switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06); transition: transform 300ms var(--ease-out); }
.switch input:checked + .switch-ui { background: var(--accent); }
.switch input:checked + .switch-ui::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-ui { outline: 3px solid rgba(78, 125, 94, 0.55); outline-offset: 2px; }
.switch + .seg, .seg + .switch { margin-top: 0.75rem; }

/* Fenstertypen */
.types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr)); gap: 0.625rem; }
.type {
  display: flex; flex-direction: column; justify-content: space-between; gap: 0.875rem;
  padding: 0.875rem; border-radius: var(--r-l); background: var(--bg-2);
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow 150ms ease, background-color 150ms ease;
}
.type.active { background: rgba(78, 125, 94, 0.07); box-shadow: inset 0 0 0 2px var(--accent); }
.type-top { display: flex; align-items: center; gap: 0.75rem; }
.type-top > svg { flex: none; width: 40px; height: 40px; color: var(--accent-text); }
.type-text { min-width: 0; }
.type-name { font-size: 0.9375rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.012em; }
.type-sub { font-size: 0.8125rem; line-height: 1.35; color: var(--text-2); letter-spacing: 0; }
.type .stepper { justify-content: space-between; }
.help {
  position: relative; flex: none; align-self: flex-start; margin-left: auto;
  width: 24px; height: 24px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.06); color: var(--text-2); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0;
  -webkit-tap-highlight-color: transparent; transition: transform 100ms ease-out, background-color 150ms ease;
}
.help::before { content: ""; position: absolute; inset: -10px; } /* größere Trefferfläche */
.help:hover { background: rgba(0, 0, 0, 0.1); color: var(--text); }
.help:active { transform: scale(0.9); }

/* Ergebnis */
.result { position: sticky; top: calc(var(--nav-h) + 1rem); }
.result-title { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.016em; }
.result-summary { margin-top: 0.25rem; font-size: 0.9375rem; color: var(--text-2); }
.price { margin-top: 1.25rem; }
.price-label { font-size: 0.9375rem; color: var(--text-2); }
.price-value { font-size: clamp(2.5rem, 5vw, 3.25rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.028em; font-variant-numeric: tabular-nums; margin-top: 0.125rem; }
.price-next { margin-top: 0.625rem; font-size: 1rem; }
.price-next strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.breakdown { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); display: grid; gap: 0.5rem; font-size: 0.9375rem; }
.row { display: flex; justify-content: space-between; gap: 1rem; }
.row span:first-child { color: var(--text-2); }
.row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.result .btn { margin-top: 1.5rem; }
.result .fine { margin-top: 1rem; }
.tip { margin-top: 1rem; padding: 0.875rem 1rem; border-radius: 14px; background: var(--accent-tint); font-size: 0.875rem; line-height: 1.45; letter-spacing: 0; }
.tip strong { font-weight: 600; }

.mobile-bar { display: none; }
@media (max-width: 940px) {
  .result { position: static; }
  .mobile-bar {
    position: sticky; bottom: 12px; z-index: 20; margin-top: 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.625rem 0.625rem 0.625rem 1.125rem; border-radius: 980px; color: #fff;
    background: rgba(29, 29, 31, 0.88);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }
  .mobile-bar .mb-label { font-size: 0.75rem; opacity: 0.75; display: block; letter-spacing: 0; }
  .mobile-bar .mb-value { font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; }
  .mobile-bar .btn { background: #fff; color: var(--text); }
}

/* Erklär-Fenster an den Fragezeichen */
.sheet {
  border: 0; padding: 0; width: min(92vw, 440px); max-height: 90vh; overflow: auto;
  border-radius: var(--r-xl); background: #fff; color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
  opacity: 0; transform: scale(0.92);
  transition: opacity 200ms ease, transform 320ms var(--ease-out);
}
.sheet.open { opacity: 1; transform: none; }
.sheet::backdrop { background: rgba(0, 0, 0, 0); transition: background-color 220ms ease; }
.sheet.open::backdrop { background: rgba(0, 0, 0, 0.38); }
.sheet-illu { background: var(--bg-2); }
.sheet-illu svg { width: 100%; height: auto; }
.sheet-body { padding: 1.25rem 1.5rem 0; }
.sheet-body h3 { font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.016em; }
.sheet-body p { margin-top: 0.5rem; color: var(--text-2); }
.sheet-body .fine { margin-top: 0.75rem; }
.sheet-actions { padding: 1.25rem 1.5rem 1.5rem; }
@media (max-width: 560px) {
  .sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(100%); opacity: 1; }
  .sheet.open { transform: none; }
  .sheet-actions { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}

/* Bewertungen */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (max-width: 860px) {
  .reviews { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 340px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; scrollbar-width: none; }
  .reviews::-webkit-scrollbar { display: none; }
}
.review { scroll-snap-align: start; background: var(--bg-2); border-radius: 22px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.875rem; margin: 0; }
.stars { display: flex; gap: 2px; color: var(--star); }
.stars svg { width: 18px; height: 18px; }
.review blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.45; }
.review figcaption { margin-top: auto; font-size: 0.875rem; color: var(--text-2); }
.badge { align-self: flex-start; font-size: 0.75rem; font-weight: 600; letter-spacing: 0; color: var(--accent-text); background: var(--accent-tint); padding: 0.2rem 0.55rem; border-radius: 980px; }
.reviews-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.25rem; }

/* Leistungen */
.services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (max-width: 900px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .services { grid-template-columns: minmax(0, 1fr); } }
.service svg { width: 44px; height: 44px; color: var(--accent-text); }
.service h3 { margin-top: 1rem; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.016em; }
.service p { margin-top: 0.375rem; color: var(--text-2); }

/* Über uns */
.about { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 820px) { .about { grid-template-columns: minmax(0, 1fr); } }
.about-art { background: #fff; border-radius: var(--r-xl); overflow: hidden; }
.about-art svg, .about-art img { width: 100%; height: auto; }
.about-text p { margin-top: 1rem; color: var(--text-2); font-size: 1.1875rem; line-height: 1.5; }
.about-text p strong { color: var(--text); font-weight: 600; }

/* Häufige Fragen */
.faq { max-width: 760px; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; cursor: pointer; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.014em; -webkit-tap-highlight-color: transparent; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 18px; height: 18px; color: var(--text-2); transition: transform 300ms var(--ease-out); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .answer { padding: 0 2.5rem 1.375rem 0; color: var(--text-2); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 320ms var(--ease-out), content-visibility 320ms allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* Kontakt */
.contact-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.contact-mail { margin-top: 1.25rem; }
.contact-mail a { text-decoration: none; }
.contact-mail a:hover { text-decoration: underline; }
.qr-box { margin: 2.5rem auto 0; display: inline-flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem 1rem 1rem; border-radius: var(--r-l); background: var(--bg-2); text-align: left; }
.qr-box svg { background: #fff; padding: 8px; border-radius: 10px; }
@media (hover: none) and (pointer: coarse) { .qr-box { display: none; } }

/* Footer */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); font-size: 0.75rem; color: var(--text-2); letter-spacing: 0; }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; padding-block: 1.25rem; }
.footer a { color: var(--text-2); text-decoration: none; padding-block: 0.5rem; }
.footer a:hover { color: var(--text); text-decoration: underline; }
.footer nav { display: flex; gap: 1.25rem; }

/* Rechtstexte */
.legal { padding-block: clamp(3rem, 7vw, 5rem); }
.legal .wrap { max-width: 720px; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.1; letter-spacing: -0.022em; margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.1875rem; letter-spacing: -0.016em; margin: 2rem 0 0.5rem; }
.legal p { color: #333336; }
.legal p + p { margin-top: 0.75rem; }

.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; }
[hidden] { display: none !important; }

/* Bewegung reduzieren: Überblenden statt Bewegen */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .seg-thumb, .switch-ui::after, .faq summary svg { transition: none; }
  .btn, .seg label, .stepper button, .help { transition: background-color 150ms ease, opacity 150ms ease; }
  .btn:active, .seg label:active, .stepper button:active, .help:active { transform: none; }
  .squeegee, .sq-schatten, .wl, .wipe::after { display: none; }
  .sheet, .sheet.open { transform: none; transition: opacity 200ms ease; }
  .faq details::details-content { transition: none; }
}
@media (prefers-contrast: more) {
  :root { --text-2: #3a3a3c; --line: rgba(0, 0, 0, 0.3); }
  .type, .panel, .review { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
}

ol.steps { list-style: none; padding: 0; margin-bottom: 0; }
.q-note .fine { flex: 1 1 240px; }
.q-hint strong { font-weight: 700; color: var(--text); }