/* =====================================================================================================================
   base.css – Startvorlage Kunden-Website (Matrix Marketing)
   Teil 1 TOKENS: je Kunde aus gestaltungsplan.txt (A5 Schrift, A6 Farben, A7 Raster) ersetzen – NUR hier.
   Kein roher Farbwert, keine Einzelgrösse und kein Einzelabstand weiter unten (design-regelwerk.txt B5, B1, B3).
   Teil 2 Grundlagen · Teil 3 Bauteile (Kopf, Menü, Fuss, Knopf, Formular, Rechtstexte) · Teil 4 Musterabschnitte
   (die Abschnitte der Musterseiten – je Kunde umbauen oder ersetzen, die Idee trägt bis zum Fuss).
   Bau-Vertrag (nicht umbenennen): [data-reveal] → .is-sichtbar nur unter html.js · .sr · .skip · .menue · .bild-fehlt
   ===================================================================================================================== */

/* ---- Schriften (lokal, SIL OFL; geschrieben von tools/fetch_fonts.py: Poppins:wght@400;600) ---- */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-normal-400-latin-ext.woff2?v=854e6f9653') 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-normal-400-latin.woff2?v=ac6d71b4d5') 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: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-normal-600-latin-ext.woff2?v=cdc90db0ec') 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-normal-600-latin.woff2?v=179f97ec02') 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;
}
/* ---- Ende Schriften ---- */

/* ------------------------------------------------------------------------------------------------ 1 TOKENS */
:root {
  /* Farben als Rollen (A6). Werte als #hex: build_images.py liest --grund, --tinte, --akzent, --auf-akzent für
     Favicon und Vorschaubild. Kontrast: Text ≥ 4,5:1, grosse Schrift und Bedienelemente ≥ 3:1. */
  --grund: #ffffff;           /* Seitengrund: Weiss aus dem Logo (Be Clean, gestaltungsplan A6) */
  --flaeche: #f4f3f3;         /* eine Tonstufe vom Grund, neutral aus der Logo-Tinte abgeleitet */
  --tinte: #231f20;           /* Logo-Tinte */
  --tinte-2: #5c5657;         /* gedämpfter Text, 7:1 auf Weiss */
  --akzent: #da291c;          /* Be-Clean-Rot (Logo); trägt erster Bildschirm, Seitenköpfe und Fuss */
  --auf-akzent: #ffffff;      /* Weiss auf Rot 4,9:1 */
  --linie: #e2dfdf;           /* Trennlinie in Listen und Feldern */
  --fehler: #a3161b;          /* Fehlermeldungen im Formular (≥ 4,5:1) */
  --fokus: #231f20;           /* Fokusring */

  /* Schriften (A5): Poppins ist die Hausschrift der neuen CI (Logo-Redesign 23.10.2026) – bewusster Entscheid. */
  --schrift-titel: 'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-text: 'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif;
  --gewicht-titel: 600;
  --gewicht-text: 400;
  --gewicht-stark: 600;
  --breite-titel: normal;     /* bei Schriften mit Breitenachse z. B. 75% (schmal) oder 125% (breit) */

  /* Schriftgrössen (B1): höchstens 5 Stufen, jeder Schritt ≥ 1,25×, Titel ≥ 4× Text am Computer */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);     /* 13–14 px */
  --step-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);     /* 17–19 px */
  --step-lead: clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem);       /* 20–26 px */
  --step-head: clamp(2rem, 1.45rem + 2.3vw, 4rem);               /* 32–64 px */
  --step-display: clamp(2rem, 1.2rem + 4.4vw, 5.75rem);      /* 38–92 px: Poppins läuft breit */

  /* Satz (B2) */
  --zeile-text: 1.55;
  --zeile-lead: 1.5;             /* Poppins: hohe Ober-/Unterlängen + Umlaute (kontakt.py) */
  --zeile-titel: 1.2;
  --lauf-titel: -0.022em;
  --lauf-display: -0.034em;
  --lauf-versal: 0.04em;
  --textmass: 64ch;

  /* Abstände (B3): Grundeinheit 4 px, keine Einzelwerte */
  --a-1: 0.25rem;  --a-2: 0.5rem;  --a-3: 0.75rem;  --a-4: 1rem;  --a-5: 1.5rem;  --a-6: 2rem;
  --a-7: 3rem;  --a-8: 4rem;  --a-9: 6rem;  --a-10: 8rem;  --a-11: 12rem;
  --abschnitt: clamp(4.5rem, 2.6rem + 7vw, 11rem);              /* zwischen Abschnitten: Handy ~72, Computer ~140 px */

  /* Raster (A7, B4): 12 Spalten, ein Randpaar, Deckel für sehr breite Bildschirme */
  --rand: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --spalt: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --max: 1760px;

  /* Ecken einmal entscheiden: eckig (0) ODER ganz rund (999px) – nicht 12 px auf allem (B6) */
  --ecke: 0;

  /* Bewegung (C3, C4): nur diese Kurven */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dauer-druck: 140ms;
  --dauer-hover: 180ms;
  --dauer-menue: 220ms;
  --dauer-abschnitt: 700ms;
  --staffel: 70ms;

  --kopf-hoehe: 4.5rem;
  color-scheme: light;
}

/* ------------------------------------------------------------------------------------------------ 2 GRUNDLAGEN */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-weight: var(--gewicht-text);
  font-size: var(--step-body);
  line-height: var(--zeile-text);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
:where(ul[class], ol[class], .kopf ul, .menue ul, .fuss ul) { list-style: none; padding: 0; margin: 0; }
h1, h2, h3 {
  font-family: var(--schrift-titel); font-stretch: var(--breite-titel);
  font-weight: var(--gewicht-titel);
  line-height: var(--zeile-titel);
  letter-spacing: var(--lauf-titel);
  text-wrap: balance;
  hyphens: none;
}
h3 { font-size: var(--step-lead); line-height: var(--zeile-lead); letter-spacing: 0; }
p, li, dd { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
strong, b { font-weight: var(--gewicht-stark); }
::selection { background: var(--akzent); color: var(--auf-akzent); }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
:target { scroll-margin-top: calc(var(--kopf-hoehe) + var(--a-5)); }
input, textarea, select, button { font: inherit; color: inherit; }
input, textarea, select { accent-color: var(--akzent); }
.zahl, table { font-variant-numeric: tabular-nums; }

/* Hilfsklassen (Bau-Vertrag) */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--rand); top: var(--a-2); z-index: 100; padding: var(--a-3) var(--a-4); background: var(--tinte); color: var(--grund); transform: translateY(-200%); }
.skip:focus { transform: none; }
.nw { white-space: nowrap; }
.bild-fehlt { background: var(--flaeche); }

/* Raster */
.rahmen { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--rand); }
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); }
.abschnitt { padding-block: var(--abschnitt); }
/* Zwei Abschnitte auf demselben Grund: nur EIN Abstand dazwischen (sonst doppelt so viel Luft wie geplant) */
.abschnitt:not(.flaeche) + .abschnitt:not(.flaeche) { padding-top: 0; }
.textmass { max-width: var(--textmass); }
.flaeche { background: var(--flaeche); }

/* Typografische Rollen */
.titel-display { font-size: var(--step-display); letter-spacing: var(--lauf-display); line-height: 1; }
.titel { font-size: var(--step-head); }
.lead { font-size: var(--step-lead); line-height: var(--zeile-lead); }
.klein { font-size: var(--step-small); }
.gedaempft { color: var(--tinte-2); }
.titel + .lead, .titel-display + .lead { margin-top: var(--a-5); }
.textfluss > * + * { margin-top: var(--a-4); }
.textfluss > h2, .textfluss > h3 { margin-top: var(--a-7); }

/* Einblenden (C2, C7, C8): Startzustand nur unter html.js; ohne JavaScript ist alles sichtbar. Im ersten Bildschirm setzt
   main.js die Klasse sofort. Das Titelbild (LCP) bekommt nie data-reveal. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translateY(16px); }
  html.js [data-reveal].is-sichtbar {
    opacity: 1; transform: none;
    transition: opacity var(--dauer-abschnitt) var(--ease-out), transform var(--dauer-abschnitt) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--staffel));
  }
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 0; }
  html.js [data-reveal].is-sichtbar { opacity: 1; transition: opacity 400ms ease; }
}

/* ------------------------------------------------------------------------------------------------ 3 BAUTEILE */
/* Knopf: flach, eine Füllfarbe; Druck-Rückmeldung 140 ms (C5) */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a-2);
  min-height: 3rem; padding: var(--a-3) var(--a-5);
  border: 1px solid var(--akzent); border-radius: var(--ecke);
  background: var(--akzent); color: var(--auf-akzent);
  font-family: var(--schrift-text); font-weight: var(--gewicht-stark); font-size: var(--step-body); line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dauer-hover) ease, color var(--dauer-hover) ease, transform var(--dauer-druck) var(--ease-out);
}
.knopf:active { transform: scale(0.97); }
.knopf--zweit { background: transparent; color: var(--tinte); border-color: var(--tinte); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: var(--tinte); border-color: var(--tinte); color: var(--grund); }
  .knopf--zweit:hover { background: var(--tinte); color: var(--grund); }
}
.textlink { font-weight: var(--gewicht-stark); }

/* Kopf: Wortmarke, 3–5 Textlinks, eine Handlung; auf dem Handy eine Zeile (B4) */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--grund); }
.kopf__innen { display: flex; align-items: center; gap: var(--a-5); min-height: var(--kopf-hoehe); }
.kopf__marke {
  display: inline-flex; align-items: center; min-height: 2.75rem; margin-right: auto;
  font-family: var(--schrift-titel); font-stretch: var(--breite-titel); font-weight: var(--gewicht-titel); font-size: var(--step-lead); letter-spacing: var(--lauf-titel);
  line-height: 1.1; text-decoration: none;
}
.kopf__marke img { width: auto; height: 2.5rem; }
.kopf__nav ul { display: flex; gap: var(--a-5); }
.kopf__nav a, .kopf__tel {
  display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; white-space: nowrap;
}
.kopf__nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) { .kopf__nav a:hover, .kopf__tel:hover { text-decoration: underline; } }
.kopf__tel { font-variant-numeric: tabular-nums; }
.kopf__tel-kurz { display: none; }
.kopf__menue-knopf {
  display: none; min-height: 2.75rem; min-width: 2.75rem; padding: 0 var(--a-3);
  border: 1px solid var(--tinte); border-radius: var(--ecke); background: transparent; cursor: pointer;
}
@media (max-width: 63.99em) {
  .kopf__nav, .kopf__handlung { display: none; }
  .kopf__menue-knopf { display: inline-flex; align-items: center; }
  .kopf__innen { gap: var(--a-4); }
}
@media (max-width: 34.99em) {
  .kopf__tel-lang { display: none; }
  .kopf__tel-kurz { display: inline; }
}

/* Menü (Handy/Tablet): Dialog vom Auslöser oben rechts (C5) */
.menue {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--a-7);
  background: var(--grund); padding-bottom: var(--a-7);
}
.menue[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .menue { transform-origin: top right; animation: menue-auf var(--dauer-menue) var(--ease-out); }
  @keyframes menue-auf { from { opacity: 0; transform: scale(0.98); } }
}
.menue__kopf { display: flex; align-items: center; justify-content: space-between; min-height: var(--kopf-hoehe); }
.menue__zu { min-height: 2.75rem; padding: 0 var(--a-3); border: 1px solid var(--tinte); border-radius: var(--ecke); background: transparent; cursor: pointer; }
.menue__nav a {
  display: flex; align-items: center; min-height: 3.5rem;
  font-family: var(--schrift-titel); font-stretch: var(--breite-titel); font-weight: var(--gewicht-titel); font-size: var(--step-head); letter-spacing: var(--lauf-titel);
  line-height: 1.1; text-decoration: none;
}
.menue__nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }
.menue__fuss { display: grid; gap: var(--a-4); justify-items: start; }
.menue__fuss a:not(.knopf) { display: inline-flex; align-items: center; min-height: 2.75rem; }
html.menue-offen { overflow: hidden; }

/* Fuss als Schluss-Szene: Name gross, Kontakt als Titel (B4) – nicht als Linkspalten-Wüste */
.fuss { background: var(--tinte); color: var(--grund); padding-top: var(--abschnitt); }
.fuss a { color: inherit; }
.fuss :focus-visible { outline-color: var(--grund); }
.fuss__innen { display: grid; gap: var(--a-7) var(--spalt); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.fuss__name {
  grid-column: 1 / -1; font-family: var(--schrift-titel); font-stretch: var(--breite-titel); font-weight: var(--gewicht-titel);
  font-size: var(--step-display); letter-spacing: var(--lauf-display); line-height: 1; text-wrap: balance;
}
.fuss__kontakt { grid-column: 1 / span 6; display: grid; gap: var(--a-2); justify-items: start; }
.fuss__tel {
  font-family: var(--schrift-titel); font-stretch: var(--breite-titel); font-weight: var(--gewicht-titel); font-size: var(--step-head);
  letter-spacing: var(--lauf-titel); line-height: 1.1; text-decoration: none; font-variant-numeric: tabular-nums;
}
.fuss__kontakt a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fuss__adresse { grid-column: 7 / span 3; font-style: normal; }
.fuss__zeiten { grid-column: 10 / span 3; }
.fuss__kopf { font-weight: var(--gewicht-stark); margin-bottom: var(--a-2); }
.fuss__zeiten dl { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--a-4); font-variant-numeric: tabular-nums; }
.fuss__zeiten dd { margin: 0; }
.fuss__zeiten p + p { margin-top: var(--a-2); }
.fuss__social { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 var(--a-5); }
.fuss__social a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fuss__leiste {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--a-2) var(--a-5);
  margin-top: var(--a-8); padding-block: var(--a-5); font-size: var(--step-small);
  border-top: 1px solid color-mix(in srgb, var(--grund) 22%, transparent);
}
.fuss__leiste ul { display: flex; gap: var(--a-5); }
.fuss__leiste a { display: inline-block; padding-block: var(--a-3); }
@media (max-width: 63.99em) {
  .fuss__kontakt { grid-column: 1 / -1; }
  .fuss__adresse { grid-column: 1 / span 6; }
  .fuss__zeiten { grid-column: 7 / span 6; }
}
@media (max-width: 39.99em) {
  .fuss__adresse, .fuss__zeiten { grid-column: 1 / -1; }
}

/* Anfrageformular: öffnet WhatsApp oder E-Mail (main.js); ohne JavaScript nur die Ausweichlinks (noscript) */
.anfrage { display: grid; gap: var(--a-5); }
html:not(.js) .anfrage > :not(noscript) { display: none; }
.anfrage__felder { display: grid; gap: var(--a-5) var(--spalt); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feld { display: grid; gap: var(--a-2); align-content: start; }
.feld--breit { grid-column: 1 / -1; }
@media (max-width: 39.99em) { .anfrage__felder { grid-template-columns: minmax(0, 1fr); } }
.feld label { font-weight: var(--gewicht-stark); }
.feld input, .feld textarea, .feld select {
  width: 100%; min-height: 3rem; padding: var(--a-3) var(--a-4);
  border: 1px solid var(--tinte-2); border-radius: var(--ecke); background: var(--grund);
  transition: border-color var(--dauer-hover) ease;
}
.feld textarea { resize: vertical; min-height: 8rem; }
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible { outline-offset: 1px; border-color: var(--fokus); }
.feld__hinweis { font-size: var(--step-small); color: var(--tinte-2); }
.feld__fehler { font-size: var(--step-small); color: var(--fehler); font-weight: var(--gewicht-stark); }
.feld__fehler:empty { display: none; }
.feld.is-fehler input, .feld.is-fehler textarea, .feld.is-fehler select { border-color: var(--fehler); border-width: 2px; }
.anfrage__knoepfe { display: flex; flex-wrap: wrap; gap: var(--a-3); }
.anfrage__hinweis { font-size: var(--step-small); color: var(--tinte-2); max-width: var(--textmass); }
.anfrage__status:empty { display: none; }
.anfrage__status { font-weight: var(--gewicht-stark); }
.anfrage__ausweg { display: grid; gap: var(--a-3); justify-items: start; padding: var(--a-4); background: var(--flaeche); }
.anfrage__ausweg[hidden] { display: none; }
.anfrage__kopieren { min-height: 2.75rem; padding: 0 var(--a-4); border: 1px solid var(--tinte); border-radius: var(--ecke); background: transparent; cursor: pointer; }
.anfrage__kopie { width: 100%; min-height: 8rem; padding: var(--a-3); border: 1px solid var(--tinte-2); }

/* Rechtstexte: lesbar, ruhig, Textschrift */
.recht { padding-block: var(--a-8) var(--abschnitt); }
.recht h1 { font-size: var(--step-head); margin-bottom: var(--a-7); }
.recht h2 { font-size: var(--step-lead); line-height: var(--zeile-lead); letter-spacing: 0; margin: var(--a-7) 0 var(--a-3); }
.recht p, .recht ul { max-width: var(--textmass); }
.recht p + p { margin-top: var(--a-3); }
.recht__stand { color: var(--tinte-2); }

/* ------------------------------------------------------------------------------------------------ 4 MUSTERABSCHNITTE
   Je Kunde umbauen: benachbarte Abschnitte nie gleich aufgebaut, eine Anordnung höchstens 2× pro Seite (B4). */

/* Erster Bildschirm: Titel an der linken Ankerlinie, Leitbild bis an den rechten Rand */
.start { padding-block: var(--a-6) 0; }
.start__raster { align-items: end; row-gap: var(--a-7); }
.start__text { grid-column: 1 / span 6; padding-bottom: var(--a-4); }
.start__handlung { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3) var(--a-5); margin-top: var(--a-7); }
.start__handlung a:not(.knopf) { display: inline-flex; align-items: center; min-height: 2.75rem; }
.start__bild { grid-column: 7 / -1; margin-right: calc(var(--rand) * -1); overflow: clip; }
.start__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--fokus-titel, 50% 30%); max-height: calc(100svh - var(--kopf-hoehe) - var(--a-6)); }
@media (max-width: 63.99em) {
  .start__text, .start__bild { grid-column: 1 / -1; }
  .start__bild { margin-left: calc(var(--rand) * -1); }
  .start__bild img { aspect-ratio: 4 / 3; max-height: none; }
}

/* Liste statt Kachelreihe: Leistung, ein Satz, Preis – Zeilen wie ein Lieferschein */
.liste__kopf { grid-column: 1 / span 4; }
/* Titel bleibt nur am Computer stehen; einspaltig würde er über die Zeilen rutschen (Be Clean 23.10.2026) */
@media (min-width: 64em) { .liste__kopf .titel { position: sticky; top: calc(var(--kopf-hoehe) + var(--a-5)); } }
.liste__zeilen { grid-column: 6 / -1; border-top: 1px solid var(--linie); }
.liste__zeilen li { border-bottom: 1px solid var(--linie); }
.liste__zeilen a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a-2) var(--a-5);
  padding-block: var(--a-5); text-decoration: none;
}
.liste__name { font-family: var(--schrift-titel); font-stretch: var(--breite-titel); font-weight: var(--gewicht-titel); font-size: var(--step-lead); line-height: var(--zeile-lead); }
.liste__satz { grid-column: 1 / -1; color: var(--tinte-2); max-width: 52ch; hyphens: auto; }
.liste__preis { grid-column: 2; grid-row: 1; align-self: baseline; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .liste__zeilen a:hover .liste__name { text-decoration: underline; text-decoration-thickness: 2px; } }
@media (max-width: 63.99em) {
  .liste__kopf, .liste__zeilen { grid-column: 1 / -1; }
  .liste__kopf { margin-bottom: var(--a-6); }
}

/* Bild und Text: Bild links gross, Text rechts unten an der Ankerlinie – die Umkehr des ersten Bildschirms */
.bildtext__raster { align-items: end; row-gap: var(--a-6); }
.bildtext__bild { grid-column: 1 / span 7; margin-left: calc(var(--rand) * -1); overflow: clip; }
.bildtext__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.bildtext__text { grid-column: 9 / -1; }
.bildtext__legende { margin-top: var(--a-3); padding-inline: var(--rand); font-size: var(--step-small); color: var(--tinte-2); }
@media (max-width: 63.99em) {
  .bildtext__bild, .bildtext__text { grid-column: 1 / -1; }
  .bildtext__bild { margin-right: calc(var(--rand) * -1); }
}

/* Ablauf: echte Reihenfolge, darum Nummern (D3.5 erlaubt) – auf einer Fläche eine Tonstufe vom Grund */
.ablauf .titel { max-width: 18ch; }
.ablauf__schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--a-7) var(--spalt); margin-top: var(--a-8); counter-reset: schritt; }
.ablauf__schritte li { counter-increment: schritt; display: grid; gap: var(--a-3); align-content: start; }
.ablauf__schritte li::before {
  content: counter(schritt); font-family: var(--schrift-titel); font-stretch: var(--breite-titel); font-weight: var(--gewicht-titel);
  font-size: var(--step-head); line-height: 1; font-variant-numeric: tabular-nums;
}

/* Seitenkopf der Unterseiten */
.seitenkopf { padding-block: var(--a-8) var(--a-8); }
.seitenkopf__text { grid-column: 1 / span 8; }
.seitenkopf__bild { grid-column: 1 / -1; margin-top: var(--a-8); margin-inline: calc(var(--rand) * -1); overflow: clip; }
.seitenkopf__bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; max-height: 78svh; }
@media (max-width: 63.99em) { .seitenkopf__text { grid-column: 1 / -1; } .seitenkopf__bild img { aspect-ratio: 4 / 3; } }

/* Zwei Spalten: Titel links, Inhalt rechts */
.zweispaltig__kopf { grid-column: 1 / span 4; }
.zweispaltig__inhalt { grid-column: 6 / -1; }
@media (max-width: 63.99em) { .zweispaltig__kopf, .zweispaltig__inhalt { grid-column: 1 / -1; } .zweispaltig__kopf { margin-bottom: var(--a-6); } }
.punkte { display: grid; gap: var(--a-4); }
.punkte li { padding-left: var(--a-5); position: relative; max-width: var(--textmass); }
.punkte li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.5em; height: 2px; background: currentColor; }

/* Preise: tabellarische Ziffern, rechtsbündig */
.preise { width: 100%; border-collapse: collapse; }
.preise caption { text-align: left; font-size: var(--step-small); color: var(--tinte-2); caption-side: bottom; padding-top: var(--a-4); }
.preise th, .preise td { padding: var(--a-4) 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: baseline; font-weight: var(--gewicht-text); }
.preise td { text-align: right; white-space: nowrap; padding-left: var(--a-5); }

/* Fragen: Akkordeon mit details (ohne JavaScript bedienbar) */
.fragen { border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--a-4);
  min-height: 3.5rem; padding-block: var(--a-4); cursor: pointer; list-style: none;
  font-weight: var(--gewicht-stark); font-size: var(--step-body);
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; font-size: var(--step-lead); line-height: 1; transition: transform var(--dauer-hover) var(--ease-out); }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details > div { padding-bottom: var(--a-5); max-width: var(--textmass); }

/* Kontaktseite */
.kontakt__formular { grid-column: 1 / span 7; }
.kontakt__daten { grid-column: 9 / -1; display: grid; gap: var(--a-6); align-content: start; }
.kontakt__daten h2 { font-size: var(--step-lead); line-height: var(--zeile-lead); letter-spacing: 0; margin-bottom: var(--a-2); }
.kontakt__daten a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.kontakt__daten address { font-style: normal; }
.kontakt__daten dl { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--a-4); font-variant-numeric: tabular-nums; }
.kontakt__daten dd { margin: 0; }
@media (max-width: 63.99em) { .kontakt__formular, .kontakt__daten { grid-column: 1 / -1; } .kontakt__daten { margin-top: var(--a-8); } }

/* Abschnitt mit Formular am Seitenende */
.anfrage-abschnitt__kopf { grid-column: 1 / span 4; }
.anfrage-abschnitt__formular { grid-column: 6 / -1; }
@media (max-width: 63.99em) { .anfrage-abschnitt__kopf, .anfrage-abschnitt__formular { grid-column: 1 / -1; } .anfrage-abschnitt__kopf { margin-bottom: var(--a-6); } }

/* Fehlerseite */
.fehlerseite__links { display: flex; flex-wrap: wrap; gap: var(--a-3) var(--a-5); margin-top: var(--a-7); }
.fehlerseite__links a:not(.knopf) { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ------------------------------------------------------------------------------------------------ 5 BE CLEAN
   Idee (gestaltungsplan A4): Das Haus im b aus dem Logo ist der saubere Raum. Erster Bildschirm = rotes Feld mit dem
   grossen weissen b-Haus; die Leistungsliste ist ein Abnahmeprotokoll, jede Zeile wird mit einem roten Haus abgenommen
   (Hauptmoment: die Häuser füllen sich von unten, eins nach dem anderen). Rot rahmt die Seite: Kopf der Seite und Fuss. */

/* Rotes Feld: Startseite und Seitenköpfe */
.start, .seitenkopf { background: var(--akzent); color: var(--auf-akzent); position: relative; overflow: clip; }
.start ::selection, .seitenkopf ::selection { background: var(--auf-akzent); color: var(--akzent); }
.start :focus-visible, .seitenkopf :focus-visible { outline-color: var(--auf-akzent); }
.start { padding-block: var(--a-9) var(--a-10); min-height: min(46rem, calc(100svh - var(--kopf-hoehe))); display: flex; align-items: center; }
.start > .rahmen { position: relative; z-index: 1; }
.start__text { grid-column: 1 / span 7; padding-bottom: 0; }
.start .titel-display { max-width: 13ch; }
.start .lead { max-width: 34ch; }
@media (max-width: 63.99em) {
  .start { padding-block: var(--a-8); align-items: start; }
  .start__text { grid-column: 1 / -1; }
}
/* Knöpfe auf Rot: Weiss mit roter Schrift */
.start .knopf, .seitenkopf .knopf { background: var(--auf-akzent); border-color: var(--auf-akzent); color: var(--akzent); }
@media (hover: hover) and (pointer: fine) { .start .knopf:hover, .seitenkopf .knopf:hover { background: var(--tinte); border-color: var(--tinte); color: var(--auf-akzent); } }
.start .textlink, .seitenkopf .textlink { color: var(--auf-akzent); }

.seitenkopf { padding-block: var(--a-9); }
.seitenkopf::after {
  content: ""; position: absolute; right: var(--rand); bottom: -1px; width: clamp(4.5rem, 8vw, 7.5rem); aspect-ratio: 25 / 27;
  background: url("/assets/img/haus.svg?v=5ae11fca2c") no-repeat center / contain; filter: brightness(0) invert(1);
}
.seitenkopf .lead { max-width: 40ch; }

/* Abnahmeprotokoll: jede Leistung eine Zeile, vorne ein rotes Haus, das sich füllt */
.liste__zeilen li { position: relative; padding-left: calc(1.6rem + var(--a-5)); }
.liste__zeilen li:not(:has(a)) {           /* Zeile ohne eigene Seite: gleicher Aufbau wie mit Link */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a-2) var(--a-5); padding-block: var(--a-5);
}
.liste__zeilen li::before, .liste__zeilen li::after {
  content: ""; position: absolute; left: 0; top: calc(var(--a-5) + 0.15em); width: 1.6rem; aspect-ratio: 25 / 27;
  background: url("/assets/img/haus.svg?v=5ae11fca2c") no-repeat center / contain;
}
.liste__zeilen li::before { opacity: 0.18; }
.liste__name { font-size: var(--step-lead); }
.liste__preis { font-weight: var(--gewicht-stark); }
@media (prefers-reduced-motion: no-preference) {
  html.js .liste__zeilen li[data-reveal] { transform: none; }
  html.js .liste__zeilen li::after { clip-path: inset(100% 0 0 0); }
  html.js .liste__zeilen li.is-sichtbar::after {
    clip-path: inset(0 0 0 0);
    transition: clip-path 650ms var(--ease-out) calc(250ms + var(--i, 0) * 160ms);
  }
}

/* Ablauf: die vier festen Schritte, Nummern in Rot */
.ablauf__schritte li::before { color: var(--akzent); }
.ablauf__schritte h3 { font-size: var(--step-lead); }

/* Wer dahinter steht / Einsatzgebiet: ruhig, Textmass */
.zweispaltig__inhalt.textfluss p { max-width: 52ch; }

/* Fuss: das rote Feld schliesst die Seite */
.fuss { background: var(--akzent); color: var(--auf-akzent); }
.fuss__leiste { border-top-color: color-mix(in srgb, var(--auf-akzent) 35%, transparent); }

/* Kopf: Wortmarke als Bild; fünf Menüpunkte + Telefon + Knopf brauchen Platz → Menü-Knopf bis 80em */
.kopf__marke { flex-shrink: 0; }
.kopf__marke img { height: 1.9rem; width: auto; }
@media (max-width: 89.99em) {
  .kopf__nav, .kopf__handlung { display: none; }
  .kopf__menue-knopf { display: inline-flex; align-items: center; }
}
@media (max-width: 34.99em) { .kopf__marke img { height: 1.55rem; } }

/* Intro (nur Startseite, intro.js): nasse Scheibe → Abzieher zieht eine Bahn → Logo in der Spiegelung → Flug in den Kopf */
.intro { display: none; }
html.js:not(.intro-gesehen) .intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; overflow: hidden;
  background: var(--akzent); cursor: pointer;
}
html.intro-laeuft { overflow: hidden; }
html.intro-laeuft .kopf__marke img { opacity: 0; }
html.intro-gesehen .kopf__marke img { transition: opacity 200ms ease; }
.intro__scheibe { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__abzieher {
  position: absolute; left: 0; top: 0; width: 1000px; height: 420px; max-width: none; z-index: 3;
  transform-origin: 0 0; opacity: 0; pointer-events: none;
}
.intro__marke, .intro__spiegel { position: relative; z-index: 2; width: min(72vw, 600px); transform-origin: 0 0; opacity: 0; }
.intro__marke svg, .intro__spiegel svg { display: block; width: 100%; height: auto; overflow: visible; }
.intro__marke path, .intro__marke rect, .intro__spiegel path, .intro__spiegel rect { fill: var(--auf-akzent); transition: fill 450ms ease; }
.intro__marke--rot path, .intro__marke--rot rect { fill: var(--akzent); }
/* Spiegelung im nassen Glas: dieselbe Wortmarke kopfüber unter der Grundlinie, läuft nach unten aus */
.intro__spiegel {
  position: absolute; left: 50%; top: calc(50% + min(8.16vw, 68px) + 0.35rem); translate: -50% 0;
  transform: scaleY(-1); transform-origin: 50% 50%; filter: blur(1px);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 70%); mask-image: linear-gradient(to top, #000, transparent 70%);
}
.intro__knoepfe { position: absolute; z-index: 4; right: var(--rand); bottom: max(var(--a-5), env(safe-area-inset-bottom)); display: flex; gap: var(--a-3); }
.intro__knopf {
  min-height: 2.75rem; padding: 0 var(--a-4); border: 2px solid var(--auf-akzent); background: transparent; color: var(--auf-akzent);
  font: inherit; font-size: var(--step-small); font-weight: var(--gewicht-stark); cursor: pointer;
  transition: background-color var(--dauer-hover) ease, color var(--dauer-hover) ease;
}
.intro__knopf:focus-visible { outline: 2px solid var(--auf-akzent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .intro__knopf:hover { background: var(--auf-akzent); color: var(--akzent); } }

/* Startbild zum Freiwischen (wischen.js): das grosse weisse b, im Haus-Fenster die Wohnung. Ohne JS, bei «weniger
   Bewegung» und für Prüfwerkzeuge ist sie sauber und das Preisschild steht da; mit JS liegt Schmutz darüber (Canvas). */
.start__raster { align-items: center; }
.start__bild { grid-column: 8 / -1; justify-self: end; position: relative; width: min(100%, 29rem, calc((100svh - var(--kopf-hoehe) - 6rem) * 0.7257)); margin: 0; }
.wisch__b { position: relative; aspect-ratio: 41.143 / 56.693; }
.wisch__signet { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.wisch__fenster {
  position: absolute; z-index: 1; left: 16.3%; top: 38.5%; width: 61.5%; height: 47.9%; overflow: hidden;
  clip-path: polygon(50% 0, 100% 32.7%, 100% 100%, 0 100%, 0 32.7%); background: var(--grund);
}
.wisch.ist-schmutzig .wisch__fenster { touch-action: none; cursor: none; }
.wisch__sauber { display: block; width: 100%; height: 100%; object-fit: cover; }
.wisch__schmutz { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 800ms var(--ease-out); }
.wisch__schmutz.ist-weg { opacity: 0; }
.wisch .wisch__abzieher, .scheibe .scheibe__abzieher {
  position: absolute; left: 0; top: 0; z-index: 3; width: 26%; height: auto; max-width: none; pointer-events: none;
  opacity: 0; transition: opacity 200ms ease;
}
.wisch .wisch__abzieher.ist-da, .scheibe .scheibe__abzieher.ist-da { opacity: 1; }
/* Preisschild: hängt unten rechts am Haus; kommt erst hervor, wenn die Wohnung sauber ist */
.wisch__schild {
  position: absolute; z-index: 4; right: -3%; bottom: 2%; width: min(18rem, 74%); padding: var(--a-5);
  background: var(--grund); color: var(--tinte); box-shadow: 0 1.25rem 2.5rem rgba(70, 10, 4, 0.3);
}
.wisch__schild::before {                     /* kleines rotes Haus als Aufhänger */
  content: ""; position: absolute; left: var(--a-5); top: -0.9rem; width: 1.6rem; aspect-ratio: 25 / 27;
  background: url("/assets/img/haus.svg?v=5ae11fca2c") no-repeat center / contain;
}
.wisch__leistung { font-weight: var(--gewicht-stark); line-height: 1.3; }
.wisch__preis { font-size: clamp(1.6rem, 1.1rem + 1.3vw, 2.4rem); font-weight: var(--gewicht-titel); line-height: 1.1; letter-spacing: var(--lauf-titel); margin-top: var(--a-1); }
.wisch__klein { font-size: var(--step-small); color: var(--tinte-2); margin-top: var(--a-2); }
.start .wisch__schild .knopf { margin-top: var(--a-4); background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
@media (hover: hover) and (pointer: fine) { .start .wisch__schild .knopf:hover { background: var(--tinte); border-color: var(--tinte); } }
.wisch.ist-schmutzig .wisch__schild { opacity: 0; visibility: hidden; transform: translateY(1rem) scale(0.96); }
.wisch.wird-sauber .wisch__schild { transition: opacity 500ms var(--ease-out) 450ms, transform 650ms var(--ease-out) 450ms, visibility 0s 450ms; }
/* Leiste unter dem b: Hinweis und Knopf solange schmutzig, danach ein Satz */
.wisch__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2) var(--a-4); min-height: 2.75rem; margin-top: var(--a-4); font-size: var(--step-small); }
.wisch__hinweis, .wisch__auto { display: none; }
.wisch.ist-schmutzig .wisch__hinweis, .wisch.ist-schmutzig .wisch__auto { display: inline-flex; }
.wisch__auto {
  align-items: center; min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--auf-akzent); font: inherit;
  font-weight: var(--gewicht-stark); text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer;
}
.wisch__fertig:empty { display: none; }
.wisch__fertig { font-weight: var(--gewicht-stark); }
@media (prefers-reduced-motion: no-preference) {
  .wisch.zeigt-hinweis .wisch__hinweis { animation: hinweis 1.6s var(--ease-in-out) 2; }
  @keyframes hinweis { 50% { transform: translateX(0.4rem); } }
  /* Glanz, wenn die Wohnung sauber ist: zwei Funken im Fenster */
  .wisch__glanz { position: absolute; z-index: 3; left: 16.3%; top: 38.5%; width: 61.5%; height: 47.9%; pointer-events: none; }
  .wisch__glanz::before, .wisch__glanz::after {
    content: ""; position: absolute; width: 14%; aspect-ratio: 1; background: #fff; opacity: 0; transform: scale(0.2) rotate(0deg);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  }
  .wisch__glanz::before { left: 22%; top: 46%; }
  .wisch__glanz::after { left: 64%; top: 30%; width: 9%; }
  .wisch.wird-sauber .wisch__glanz::before { animation: funke 900ms var(--ease-out) 200ms both; }
  .wisch.wird-sauber .wisch__glanz::after { animation: funke 900ms var(--ease-out) 420ms both; }
  @keyframes funke { 40% { opacity: 1; transform: scale(1) rotate(45deg); } 100% { opacity: 0; transform: scale(0.6) rotate(90deg); } }
}
@media (min-width: 48em) and (max-width: 63.99em) {      /* Tablet: Text und b nebeneinander wie am Computer */
  .start__text { grid-column: 1 / span 7; }
  .start__bild { grid-column: 8 / -1; }
  .wisch__schild { right: 0; width: 88%; padding: var(--a-4); }
  .wisch__preis { font-size: var(--step-lead); }
}
@media (max-width: 47.99em) {
  .start__bild { grid-column: 1 / -1; justify-self: start; width: min(46vw, 19rem); margin-top: var(--a-6); }
  /* Handy und Tablet: das b links, daneben erst der Hinweis, nach dem Putzen das Preisschild – beides im ersten Bildschirm */
  .wisch__schild, .wisch__leiste {
    position: absolute; left: calc(100% + var(--a-4)); right: auto; bottom: 6%; margin: 0;
    width: min(17rem, calc(100vw - 2 * var(--rand) - 100% - var(--a-4)));
  }
  .wisch__schild { padding: var(--a-4); }
  .wisch__leiste { flex-direction: column; align-items: flex-start; }
  .wisch__fertig { display: none; }
}
@media (max-width: 47.99em) {
  .start { padding-block: var(--a-6) var(--a-7); }
  .start .lead { font-size: var(--step-body); }
  .start__handlung { margin-top: var(--a-4); }
  /* das b rechts; sein Schaft steigt neben der Telefonnummer hoch, Hinweis und Preisschild stehen links daneben */
  .start__bild { width: 47vw; justify-self: end; margin-top: calc(-2.75rem - var(--a-3)); }
  .wisch__schild, .wisch__leiste { left: auto; right: calc(100% + var(--a-4)); }
  .wisch__preis { font-size: var(--step-lead); }
  .wisch__klein { font-size: var(--step-small); }
  .wisch__schild { padding: var(--a-3); bottom: 4%; }
  .start .wisch__schild .knopf { min-height: 2.75rem; padding: var(--a-2) var(--a-3); font-size: var(--step-small); line-height: 1.25; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Ablauf: die Schritte stehen in roten Häusern, eine Linie verbindet sie beim Scrollen */
  @supports (animation-timeline: view()) {
    .ablauf__schritte { position: relative; }
    .ablauf__schritte::before {
      content: ""; position: absolute; left: 0; right: 0; top: 1.75rem; height: 3px; background: var(--akzent);
      transform-origin: 0 50%; transform: scaleX(0);
      animation: linie linear both; animation-timeline: view(); animation-range: entry 20% cover 45%;
    }
    @keyframes linie { to { transform: scaleX(1); } }
    @media (max-width: 63.99em) { .ablauf__schritte::before { display: none; } }
  }
}
/* Schrittnummern in einem roten Haus (Haus aus dem Logo) */
.ablauf__schritte li { position: relative; z-index: 1; }
.ablauf__schritte li::before {
  display: grid; place-items: end center; width: 3.5rem; height: 3.8rem; padding-bottom: 0.35rem;
  background: url("/assets/img/haus.svg?v=5ae11fca2c") no-repeat center / contain; color: var(--auf-akzent);
  font-size: var(--step-lead);
}

/* Fuss: die grosse Wortmarke statt des Namens in Schrift (Text bleibt für Vorleseprogramme) */
.fuss__name {
  color: transparent; height: clamp(3.25rem, 2rem + 6vw, 8.5rem); max-width: 100%;
  background: url("/assets/img/logo-negativ-wort.svg?v=a32de16182") no-repeat left center / contain; overflow: hidden;
}

/* Poppins braucht Luft zwischen Titelzeilen; lange Wörter (Unterhaltsreinigung) am Handy trennen */
.titel-display { line-height: 1.2; }
@media (max-width: 39.99em) { .titel-display, .titel { hyphens: auto; -webkit-hyphens: auto; } }
/* Handy: Preis unter dem Namen statt daneben (sonst überlappen lange Leistungsnamen) */
@media (max-width: 47.99em) {
  .liste__zeilen a, .liste__zeilen li:not(:has(a)) { grid-template-columns: minmax(0, 1fr); }
  .liste__preis { grid-column: 1; grid-row: auto; }
  .liste__name { hyphens: auto; -webkit-hyphens: auto; }
}

/* Preisrechner Endreinigung: Grösse wählen → Preis gross, das Haus wächst mit der Wohnung */
.rechner__hinweis { margin-top: var(--a-5); color: var(--tinte-2); max-width: 30ch; }
.rechner__form { display: grid; gap: var(--a-7); }
.rechner__wahl { display: flex; flex-wrap: wrap; gap: var(--a-3); border: 0; margin: 0; padding: 0; }
.rechner__wahl legend { font-weight: var(--gewicht-stark); margin-bottom: var(--a-4); padding: 0; }
.rechner__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rechner__option span {
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0 var(--a-5); cursor: pointer;
  border: 2px solid var(--tinte); background: var(--grund); font-weight: var(--gewicht-stark);
  transition: background-color var(--dauer-hover) ease, color var(--dauer-hover) ease, border-color var(--dauer-hover) ease;
}
.rechner__option input:checked + span { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.rechner__option input:focus-visible + span { outline: 2px solid var(--fokus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .rechner__option span:hover { border-color: var(--akzent); } }
.rechner__ergebnis { display: flex; align-items: flex-end; gap: var(--a-6); min-height: 8rem; }
.rechner__haus {
  flex: none; width: 3.2rem; aspect-ratio: 25 / 27; background: url("/assets/img/haus.svg?v=5ae11fca2c") no-repeat bottom / contain;
  transition: width 500ms var(--ease-out);
}
.rechner__preis { font-size: var(--step-display); font-weight: var(--gewicht-titel); line-height: 1; letter-spacing: var(--lauf-display); }
.rechner__preis span { display: none; }
.rechner__form:has(input[value="1.5–2.5 Zimmer"]:checked) [data-fuer="1.5–2.5 Zimmer"],
.rechner__form:has(input[value="3.5 Zimmer"]:checked) [data-fuer="3.5 Zimmer"],
.rechner__form:has(input[value="4.5 Zimmer"]:checked) [data-fuer="4.5 Zimmer"],
.rechner__form:has(input[value="Haus"]:checked) [data-fuer="Haus"] { display: inline; }
.rechner__form:has(input[value="3.5 Zimmer"]:checked) .rechner__haus { width: 4.4rem; }
.rechner__form:has(input[value="4.5 Zimmer"]:checked) .rechner__haus { width: 5.6rem; }
.rechner__form:has(input[value="Haus"]:checked) .rechner__haus { width: 6.8rem; }
.rechner__datum { max-width: 20rem; }
.rechner__knopf { justify-self: start; }
@media (max-width: 39.99em) { .rechner__preis { font-size: var(--step-head); } .rechner__ergebnis { min-height: 6rem; } }

/* Szene «Von der Anfrage bis zur Abgabe» (Startseite, szene.js): die gezeichnete Wohnung wird beim Scrollen sauber */
.szene { padding-block: var(--abschnitt); background: var(--grund); }
.szene__raster { align-items: center; row-gap: var(--a-7); }
.szene__text { grid-column: 1 / span 5; }
.szene__bild { grid-column: 6 / -1; position: relative; }
.szene__bild img, .szene__bild svg { display: block; width: 100%; height: auto; }
.szene__schritte { display: grid; gap: var(--a-5); margin-top: var(--a-7); counter-reset: schritt; }
.szene__schritte li { counter-increment: schritt; position: relative; padding-left: 4.25rem; min-height: 3.6rem; }
.szene__schritte li::before {
  content: attr(data-nr); position: absolute; left: 0; top: 0; width: 3.1rem; height: 3.35rem;
  display: grid; place-items: end center; padding-bottom: 0.3rem; color: var(--auf-akzent); font-weight: var(--gewicht-titel);
  background: url("/assets/img/haus.svg?v=5ae11fca2c") no-repeat center / contain;
}
.szene__schritte h3 { font-size: var(--step-lead); }
.szene__schritte p { color: var(--tinte-2); max-width: 36ch; margin-top: var(--a-1); }
@media (max-width: 63.99em) { .szene__text, .szene__bild { grid-column: 1 / -1; } .szene__bild { order: -1; } }

/* Mit JavaScript: hoher Abschnitt, die Bühne bleibt stehen, Schritte und Bild laufen mit */
.szene--aktiv { height: 330vh; padding-block: 0; }
.szene--aktiv .szene__buehne {
  position: sticky; top: var(--kopf-hoehe); height: calc(100svh - var(--kopf-hoehe)); display: flex; align-items: center; overflow: clip;
}
.szene--aktiv .szene__buehne > .rahmen { width: 100%; }
/* nicht aktive Schritte: blassere Schrift mit genügend Kontrast (Lighthouse), das Haus davor wird blass */
.szene--aktiv .szene__schritte li h3, .szene--aktiv .szene__schritte li p { color: var(--tinte-2); transition: color 400ms var(--ease-out); }
.szene--aktiv .szene__schritte li::before { opacity: 0.3; transition: opacity 400ms var(--ease-out); }
.szene--aktiv .szene__schritte li.is-aktiv h3 { color: var(--tinte); }
.szene--aktiv .szene__schritte li.is-aktiv::before, .szene--aktiv .szene__schritte li.is-erledigt::before { opacity: 1; }
.szene--aktiv .szene__schritte li.is-erledigt::before { content: "✓"; }
.szene--aktiv .szene__bild svg .fleck { transition: opacity 300ms linear; }
.szene--kueche.szene--aktiv .szene__bild svg #glanz, .szene--kueche.szene--aktiv .szene__bild svg #schluessel, .szene--kueche.szene--aktiv .szene__bild svg #protokoll { opacity: 0; }
/* Besichtigen: ein roter Suchrahmen wandert über die Wohnung */
.szene--kueche.szene--aktiv .szene__bild::after {
  content: ""; position: absolute; top: 34%; width: 22%; aspect-ratio: 1; border: 4px solid var(--akzent); border-radius: 50%;
  left: calc(8% + var(--suche, 0) * 62%); opacity: 0; transition: opacity 300ms ease; pointer-events: none;
}
.szene--kueche.szene--aktiv[data-schritt="1"] .szene__bild::after { opacity: 1; }
@media (max-width: 63.99em) {
  .szene--aktiv { height: 300vh; }
  .szene--aktiv .szene__raster { row-gap: var(--a-5); }
  .szene--aktiv .szene__schritte { margin-top: var(--a-4); }
  .szene--aktiv .szene__schritte li:not(.is-aktiv) { display: none; }
  .szene--aktiv .szene__schritte li { opacity: 1; }

}

/* Seitenköpfe der Leistungen: eigene Zeichnung (weiss auf Rot) statt kleinem Haus */
.seitenkopf:has(.seitenkopf__zeichnung)::after { display: none; }
.seitenkopf .raster { align-items: end; }
.seitenkopf__text { grid-column: 1 / span 7; }
.seitenkopf__zeichnung { grid-column: 9 / -1; margin-bottom: calc(var(--a-9) * -1); }
.seitenkopf__zeichnung img { width: 100%; max-width: 26rem; height: auto; margin-left: auto; }
@media (max-width: 63.99em) {
  .seitenkopf__text, .seitenkopf__zeichnung { grid-column: 1 / -1; }
  .seitenkopf__zeichnung { margin-top: var(--a-7); }
  .seitenkopf__zeichnung img { max-width: 18rem; margin-inline: 0 auto; }
}

/* Abwechslung statt fünfmal «Titel links, Text rechts» (Gutachten 23.10.2026, G8/D3.4): je Abschnittsart ein eigenes Layout */
.abschnitt--text .zweispaltig__kopf, .abschnitt--text .zweispaltig__inhalt { grid-column: 1 / span 9; }
.abschnitt--text .zweispaltig__kopf { margin-bottom: var(--a-6); }
.abschnitt--text .zweispaltig__inhalt p { font-size: var(--step-lead); line-height: var(--zeile-lead); max-width: 44ch; }
.abschnitt--punkte .zweispaltig__kopf { grid-column: 1 / -1; margin-bottom: var(--a-6); }
.abschnitt--punkte .zweispaltig__inhalt { grid-column: 1 / -1; }
.abschnitt--punkte .punkte { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--a-5) var(--spalt); margin-top: var(--a-5); }
.abschnitt--punkte .punkte li { padding: var(--a-5) var(--a-5) var(--a-5) calc(1.6rem + var(--a-5)); border-top: 3px solid var(--akzent); font-weight: var(--gewicht-stark); }
.abschnitt--punkte .punkte li::before { width: 1.25rem; height: 1.35rem; top: var(--a-5); left: 0; background: url("/assets/img/haus.svg?v=5ae11fca2c") no-repeat center / contain; }
.seitenkopf .start__handlung { margin-top: var(--a-6); }

/* Gutachten 2 (23.10.2026) */
/* Feld nach dem Absenden nicht unter der festen Kopfleiste */
.anfrage input, .anfrage select, .anfrage textarea { scroll-margin-top: calc(var(--kopf-hoehe) + var(--a-7)); }
/* Handy und kleines Tablet: in der festen Leiste die Haupthandlung statt «Anrufen» */
@media (max-width: 47.99em) {
  .kopf__tel { display: none; }
  .kopf__handlung { display: inline-flex; min-height: 2.75rem; padding: 0 var(--a-3); font-size: 0; }
  .kopf__handlung::after { content: "WhatsApp"; font-size: var(--step-small); }   /* Name bleibt «Offerte per WhatsApp» */
  .kopf__innen { gap: var(--a-3); }
  .kopf__menue-knopf { padding: 0 var(--a-2); }
}
/* Listentitel kürzer umbrechen */
.liste__kopf { grid-column: 1 / span 5; }

@media (max-width: 63.99em) { .liste__kopf { grid-column: 1 / -1; } }
/* Textspalten am Handy die volle Breite nutzen */
@media (max-width: 47.99em) { .abschnitt--text .zweispaltig__inhalt p, .szene__schritte p, .rechner__hinweis { max-width: none; } }
@media (max-width: 23.99em) { .kopf__marke img { height: 1.3rem; } .kopf__handlung { padding: 0 var(--a-2); } }

/* ================================================================== Fassung 2 (23.10.2026): Szenen je Leistung, Übergabe, Karte, Scheibe */
/* Szenen: Zeichnung gross, Schritte schmal (szenen.js) */
.szene__bild svg { border-radius: 0; }
.szene--buero, .szene--hauswartung { background: var(--flaeche); }

/* Endreinigung: Preisrechner als Abnahmeprotokoll auf dem Klemmbrett, daneben die Wohnung, die mit der Zimmerzahl wächst */
.uebergabe__raster { align-items: center; row-gap: var(--a-7); }
.uebergabe__protokoll {
  grid-column: 1 / span 6; position: relative; gap: var(--a-5); padding: var(--a-7) var(--a-6) var(--a-6);
  background: var(--grund); box-shadow: 0 1.5rem 3rem rgba(35, 31, 32, 0.12);
}
.uebergabe__protokoll::before {               /* Klammer des Klemmbretts */
  content: ""; position: absolute; top: -0.9rem; left: 50%; width: 7rem; height: 1.8rem; translate: -50% 0;
  background: var(--tinte); border-radius: 0.5rem 0.5rem 0.2rem 0.2rem;
}
.uebergabe__protokoll .rechner__hinweis { margin-top: 0; max-width: none; }
.uebergabe__bild { grid-column: 7 / -1; margin: 0; }
.uebergabe__svg { display: block; width: 100%; height: auto; }
.uebergabe__svg #wohnung-2, .uebergabe__svg #wohnung-3, .uebergabe__svg #wohnung-4, .uebergabe__svg #haus { transition: opacity 450ms var(--ease-out); }
.uebergabe:has(input[value="3.5 Zimmer"]:checked) #wohnung-3,
.uebergabe:has(input[value="4.5 Zimmer"]:checked) #wohnung-4,
.uebergabe:has(input[value="Haus"]:checked) #haus { opacity: 1; }
.uebergabe:has(input[value="3.5 Zimmer"]:checked) #wohnung-2,
.uebergabe:has(input[value="4.5 Zimmer"]:checked) #wohnung-2,
.uebergabe:has(input[value="Haus"]:checked) #wohnung-2 { opacity: 0; }
.uebergabe__datum { fill: var(--tinte); font-family: var(--schrift-titel); font-weight: 600; }
.rechner__nach { margin-top: var(--a-3); color: var(--tinte-2); font-size: var(--step-small); max-width: 42ch; }
.rechner__nach-haus, .rechner__form:has(input[value="Haus"]:checked) .rechner__nach-wohnung { display: none; }
.rechner__form:has(input[value="Haus"]:checked) .rechner__nach-haus { display: inline; }
.uebergabe .rechner__ergebnis { min-height: 0; display: block; }
@media (prefers-reduced-motion: no-preference) {
  html.js .uebergabe__bild[data-reveal] { transform: none; }
  .uebergabe__svg #schluessel, .uebergabe__svg .schluessel { transform-box: fill-box; transform-origin: 50% 0; }
  .uebergabe__bild.is-sichtbar #schluessel, .uebergabe__bild.is-sichtbar .schluessel { animation: schwingen 1.6s var(--ease-out) 500ms both; }
  .uebergabe__bild.is-sichtbar #glanz { animation: aufleuchten 1.2s var(--ease-out) 900ms both; }
  @keyframes schwingen { 0% { transform: rotate(0); } 20% { transform: rotate(16deg); } 45% { transform: rotate(-10deg); } 70% { transform: rotate(4deg); } 100% { transform: rotate(0); } }
  @keyframes aufleuchten { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }
}
@media (max-width: 63.99em) {
  .uebergabe__protokoll, .uebergabe__bild { grid-column: 1 / -1; }
  .uebergabe__bild { order: -1; }
  .uebergabe__protokoll { padding: var(--a-6) var(--a-5) var(--a-5); }
}

/* Startseite: wer und wo – Text neben der gezeichneten Karte */
.karte__raster { align-items: center; row-gap: var(--a-6); }
.karte__text { grid-column: 1 / span 5; }
.karte__text p { margin-top: var(--a-4); max-width: 40ch; }
.karte__bild { grid-column: 6 / -1; position: relative; margin: 0; }
.karte__bild img { display: block; width: 100%; height: auto; }
.karte__orte { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.karte__ort {
  position: absolute; translate: -50% 0.85rem; padding: 0.1rem 0.45rem; white-space: nowrap;
  background: rgba(255, 255, 255, 0.88); font-size: var(--step-small); font-weight: var(--gewicht-stark); line-height: 1.4;
}
.karte__ort--niederuzwil { background: var(--akzent); color: var(--auf-akzent); translate: -50% 1.3rem; }
.karte__ort--wil { left: 12.5%; top: 35.9%; }
.karte__ort--zuzwil { left: 35.3%; top: 25.8%; }
.karte__ort--henau { left: 38.1%; top: 40.1%; }
.karte__ort--niederuzwil { left: 47.0%; top: 47.6%; }
.karte__ort--uzwil { left: 44.0%; top: 55.5%; }
.karte__ort--oberuzwil { left: 39.6%; top: 59.9%; }
.karte__ort--flawil { left: 61.7%; top: 74.2%; }
.karte__ort--gossau { left: 87.5%; top: 72.6%; }
@media (max-width: 63.99em) { .karte__text, .karte__bild { grid-column: 1 / -1; } }
@media (max-width: 39.99em) { .karte__ort { font-size: 0.6875rem; padding: 0 0.3rem; translate: -50% 0.55rem; } .karte__ort--niederuzwil { translate: -50% 0.8rem; } }

/* Fenster & Bau: die ganze Seite hinter einer schmutzigen Scheibe (wischen.js); der Kopf der Seite bleibt sauber */
.scheibe { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.scheibe[hidden] { display: none; }
.scheibe__schmutz { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; transition: opacity 900ms var(--ease-out); }
.scheibe__schmutz.ist-weg { opacity: 0; }
.scheibe .scheibe__abzieher { width: 150px; }
@media (max-width: 43.74em) { .scheibe .scheibe__abzieher { width: 96px; } }
.scheibe__leiste {
  position: fixed; z-index: 4; left: 50%; bottom: max(var(--a-4), env(safe-area-inset-bottom)); translate: -50% 0; pointer-events: auto;
  display: flex; align-items: center; gap: var(--a-2) var(--a-4); width: max-content; max-width: calc(100vw - 2 * var(--rand));
  padding: var(--a-2) var(--a-2) var(--a-2) var(--a-5); background: var(--tinte); color: var(--auf-akzent);
  box-shadow: 0 1rem 2rem rgba(35, 31, 32, 0.3); transition: opacity 500ms ease, translate 500ms var(--ease-out);
}
.scheibe__hinweis { font-size: var(--step-small); font-weight: var(--gewicht-stark); }
.scheibe__knopf { flex: none; }
.scheibe__fertig:empty { display: none; }
.scheibe__fertig { font-size: var(--step-small); font-weight: var(--gewicht-stark); padding-block: var(--a-3); padding-right: var(--a-4); }
.scheibe.ist-sauber .scheibe__hinweis, .scheibe.ist-sauber .scheibe__knopf { display: none; }
.scheibe.ist-weg .scheibe__leiste { opacity: 0; translate: -50% 1rem; pointer-events: none; }
@media (max-width: 29.99em) { .scheibe__leiste { flex-wrap: wrap; padding: var(--a-3) var(--a-4); } }
/* Szene: Titel und vier Schritte passen auch auf niedrige Bildschirme (nur der aktive Schritt zeigt seinen Satz) */
@media (min-width: 64em) and (max-height: 58em) {
  .szene--aktiv .szene__schritte { gap: var(--a-3); margin-top: var(--a-5); }
  .szene--aktiv .szene__schritte li:not(.is-aktiv) p { display: none; }
  .szene--aktiv .szene__schritte li { min-height: 3.1rem; }
}
.uebergabe .rechner__preis { font-size: var(--step-head); white-space: nowrap; }
/* Text-Abschnitte der Leistungsseiten: als ruhige Aussage in der Mitte statt links mit leerer rechter Hälfte */
@media (min-width: 64em) {
  .abschnitt--text .zweispaltig__kopf, .abschnitt--text .zweispaltig__inhalt { grid-column: 3 / span 8; }
  .abschnitt--text .zweispaltig__inhalt p { max-width: none; }
}
/* 404: weisser Abstand zwischen rotem Kopf und rotem Fuss */
main:has(> .seitenkopf:only-child) { padding-bottom: var(--abschnitt); }
/* Preisschild: Knopf und Preis bleiben im Schild (Inhaber 23.10.2026: Knopf ragte hinaus) */
.wisch__schild { box-sizing: border-box; }
.wisch__preis { white-space: nowrap; font-size: var(--step-lead); }
.start .wisch__schild .knopf {
  display: flex; width: 100%; box-sizing: border-box; justify-content: center; text-align: center;
  white-space: normal; padding-inline: var(--a-3); line-height: 1.25;
}
@media (max-width: 47.99em) {
  .wisch__klein { display: none; }                 /* Handy: Schild kurz halten, damit es nicht in die Knöpfe ragt */
  .wisch__leistung { font-size: var(--step-small); }
}
/* lange Wörter (Büroreinigung, Abgabetermin) in schmalen Spalten trennen statt überstehen */
.titel { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 22.49em) { .wisch__preis { white-space: normal; } .wisch__leistung { hyphens: auto; } }
.karte__ort--uzwil { translate: 0.7rem -0.7rem; }   /* Uzwil rechts neben den Punkt, sonst stösst es an Oberuzwil */
@media (max-width: 39.99em) { .karte__ort--uzwil { translate: 0.4rem -0.45rem; } }

/* ================================================================== Gutachten F2-1 (23.10.2026) */
/* Startbild: Preisschild nicht mehr abgeschnitten (Vorlage setzt overflow: clip auf .start__bild) */
.start__bild.wisch { overflow: visible; margin-right: 0; }
/* Titel der Startseite am Computer auf zwei Zeilen; das b bleibt der eine Blickfang */
@media (min-width: 64em) { .start .titel-display { max-width: 17ch; } }
/* Tablet und kleiner Computer: Preisschild unter dem b statt über der Wohnung */
@media (min-width: 48em) and (max-width: 79.99em) {
  .wisch__schild { position: relative; right: auto; bottom: auto; width: 100%; margin-top: var(--a-5); }
  .wisch__leiste { margin-top: var(--a-3); }
}
/* Kopfleiste: WhatsApp-Knopf auf allen Breiten (bisher fehlte er zwischen Handy und grossem Computer) */
@media (min-width: 48em) and (max-width: 89.99em) { .kopf__handlung { display: inline-flex; } }
/* Textblöcke am Handy und Tablet über die ganze Breite */
@media (max-width: 63.99em) { .abschnitt--text .zweispaltig__kopf, .abschnitt--text .zweispaltig__inhalt { grid-column: 1 / -1; } }
/* Tippflächen der Links in Listen ≥ 44 px */
.punkte li a { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* Rot nur für Handlung und das Haus-Zeichen: Linien über den Listenpunkten in Tinte */
.abschnitt--punkte .punkte li { border-top-color: var(--tinte); border-top-width: 2px; }
/* Nach einer Szene kein doppelter Weissraum */
.szene--aktiv + script + .abschnitt, .szene--aktiv + .abschnitt { padding-top: var(--a-7); }
.szene--buero, .szene--hauswartung { background: var(--grund); }
/* Jahreszeiten sind keine Reihenfolge: Häuser ohne Nummer und ohne Haken */
.szene--hauswartung .szene__schritte li::before, .szene--hauswartung.szene--aktiv .szene__schritte li.is-erledigt::before { content: ""; }
/* Tablet: Zeichnung im Seitenkopf rechts neben dem Text wie am Computer */
@media (min-width: 48em) and (max-width: 63.99em) {
  .seitenkopf__text { grid-column: 1 / span 7; }
  .seitenkopf__zeichnung { grid-column: 8 / -1; margin-top: 0; margin-bottom: calc(var(--a-9) * -1); }
  .seitenkopf__zeichnung img { max-width: 100%; margin-inline: auto 0; }
}
/* Fragen: Titel oben, Fragen in zwei Spalten (anders gebaut als das Formular darunter) */
@media (min-width: 64em) {
  .abschnitt--fragen .zweispaltig__kopf, .abschnitt--fragen .zweispaltig__inhalt { grid-column: 1 / -1; }
  .abschnitt--fragen .zweispaltig__kopf { margin-bottom: var(--a-6); }
  .abschnitt--fragen .fragen { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--spalt); align-items: start; border-top: 0; }
  .abschnitt--fragen .fragen details { border-top: 1px solid var(--linie); }
}
/* Startseite: Leistungen als Protokoll mit Bild – Titel oben, je Zeile die farbige Zeichnung der Leistung */
.start ~ .abschnitt--liste .liste__kopf { grid-column: 1 / -1; margin-bottom: var(--a-6); }
.start ~ .abschnitt--liste .liste__zeilen { grid-column: 1 / -1; }
.start ~ .abschnitt--liste .liste__zeilen li { padding-left: calc(clamp(4.5rem, 3rem + 4vw, 7rem) + var(--a-5)); min-height: calc(clamp(4.5rem, 3rem + 4vw, 7rem) + var(--a-6)); }
.start ~ .abschnitt--liste .liste__zeilen li::after { display: none; }
.start ~ .abschnitt--liste .liste__zeilen li::before {
  opacity: 1; top: var(--a-4); width: clamp(4.5rem, 3rem + 4vw, 7rem); aspect-ratio: 1; background: var(--akzent) no-repeat center bottom / 88%;
}
.start ~ .abschnitt--liste li:has(a[href="/endreinigung"])::before { background-image: url("/assets/img/farbig/kopf-endreinigung.svg?v=44a06c5f26"); }
.start ~ .abschnitt--liste li:has(a[href="/bueroreinigung"])::before { background-image: url("/assets/img/farbig/kopf-buero.svg?v=cbf7ec0d86"); }
.start ~ .abschnitt--liste li:has(a[href="/hauswartung"])::before { background-image: url("/assets/img/farbig/kopf-hauswartung.svg?v=60ebba65db"); }
.start ~ .abschnitt--liste li:has(a[href="/fenster-und-baureinigung"])::before { background-image: url("/assets/img/farbig/kopf-fenster.svg?v=6a04167916"); }
/* Karte: Niederuzwil rechts neben dem Sitz, Uzwil links neben dem Punkt – nichts liegt übereinander */
.karte__ort--niederuzwil { translate: 1.6rem -0.9rem; }
.karte__ort--uzwil { translate: calc(-100% - 0.6rem) -0.55rem; }
@media (max-width: 39.99em) { .karte__ort--niederuzwil { translate: 1rem -0.7rem; } .karte__ort--uzwil { translate: calc(-100% - 0.4rem) -0.45rem; } }
/* Hinweis unter dem Knopf: was danach passiert */
.handlung__hinweis { flex-basis: 100%; font-size: var(--step-small); opacity: 0.92; margin-top: calc(var(--a-2) * -1); }
/* Vertrauenszeichen auf den Leistungsseiten */
.signal { padding-block: var(--a-8); }
.signal__raster { align-items: center; row-gap: var(--a-5); }
.signal__bild { grid-column: 1 / span 2; margin: 0; max-width: 12rem; }
.signal__bild img { display: block; width: 100%; height: auto; }
.signal__text { grid-column: 3 / span 9; }
.signal__text p { font-size: var(--step-lead); line-height: var(--zeile-lead); margin-top: var(--a-3); max-width: 46ch; }
@media (max-width: 47.99em) { .signal__bild { grid-column: 1 / -1; max-width: 8rem; } .signal__text { grid-column: 1 / -1; } }
.signal__bild { background: var(--akzent); }
.wisch__link {
  display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: var(--a-2); color: var(--tinte);
  font-weight: var(--gewicht-stark); text-decoration: underline; text-decoration-color: var(--akzent); text-underline-offset: 0.25em; text-decoration-thickness: 2px;
}
.abschnitt--fragen + .signal { padding-top: 0; }
/* Kontakt: Handy mit Vorschau der Nachricht (vorschau.js) */
.vorschau { margin: 0; justify-self: center; width: min(100%, 19rem); }
.vorschau__handy {
  display: grid; grid-template-rows: auto 1fr auto; height: 34rem; overflow: hidden;
  border: 0.6rem solid var(--tinte); border-radius: 2.2rem; background: #efe6da;
  box-shadow: 0 1.5rem 3rem rgba(35, 31, 32, 0.18);
}
.vorschau__kopf { display: flex; align-items: center; gap: var(--a-3); padding: var(--a-4) var(--a-4) var(--a-3); background: var(--akzent); color: var(--auf-akzent); font-weight: var(--gewicht-stark); }
.vorschau__bild { width: 2.25rem; aspect-ratio: 1; border-radius: 50%; background: var(--auf-akzent) url("/favicon.svg?v=5b8742d690") no-repeat center / 62%; }
.vorschau__verlauf { display: flex; flex-direction: column; justify-content: flex-end; padding: var(--a-4); overflow: hidden; }
.vorschau__blase {
  position: relative; align-self: flex-end; max-width: 92%; margin: 0; padding: var(--a-3) var(--a-3) var(--a-5);
  background: var(--grund); border-radius: 0.9rem 0.9rem 0.2rem 0.9rem; box-shadow: 0 1px 1px rgba(35, 31, 32, 0.12);
  font-size: var(--step-small); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.vorschau__blase::after { content: attr(data-zeit) " ✓✓"; position: absolute; right: var(--a-3); bottom: var(--a-1); font-size: 0.6875rem; color: var(--tinte-2); }
.vorschau.ist-leer .vorschau__blase { color: var(--tinte-2); }
.vorschau__eingabe { padding: var(--a-3) var(--a-4) var(--a-4); }
.vorschau__eingabe span { display: block; height: 2.5rem; border-radius: 1.25rem; background: var(--grund); }
.vorschau__legende { margin-top: var(--a-4); text-align: center; font-size: var(--step-small); color: var(--tinte-2); }
@media (max-width: 63.99em) { .vorschau { display: none; } }
/* Prüfstrasse nach F2-1 */
.handlung__hinweis { opacity: 1; }
@media (max-width: 47.99em) { .wisch__preis { font-size: var(--step-body); } }
@media (max-width: 24.49em) { .wisch__preis { white-space: normal; } }
@media (max-width: 29.99em) {
  .start ~ .abschnitt--liste .liste__zeilen li { padding-left: calc(3.5rem + var(--a-4)); min-height: calc(3.5rem + var(--a-5)); }
  .start ~ .abschnitt--liste .liste__zeilen li::before { width: 3.5rem; }
  .liste__preis { white-space: normal; }
}
@media (min-width: 48em) and (max-width: 63.99em) { .seitenkopf .titel-display { font-size: clamp(1.9rem, 0.5rem + 3.6vw, 2.9rem); } }
/* Startbild ohne grosses b (Inhaber 23.10.2026: «das B sieht … komisch aus»): nur das Haus aus dem Logo als Fenster mit
   weissem Rahmen und weichem Schatten; darin die Wohnung zum Freiwischen */
.wisch__b { aspect-ratio: 1000 / 1070; filter: drop-shadow(0 1.5rem 2.25rem rgba(70, 10, 4, 0.32)); }
.wisch__b::before {
  content: ""; position: absolute; inset: 0; background: var(--auf-akzent);
  clip-path: polygon(50% 0, 100% 32.7%, 100% 100%, 0 100%, 0 32.7%);
}
.wisch__fenster, .wisch__glanz { left: 5%; top: 7%; width: 90%; height: 88%; }
.wisch__fenster { clip-path: polygon(50% 0, 100% 34.5%, 100% 100%, 0 100%, 0 34.5%); }
.start__bild.wisch { width: min(100%, 27rem, calc((100svh - var(--kopf-hoehe) - 9rem) * 0.935)); align-self: center; }
@media (min-width: 64em) { .wisch__schild { right: 0; bottom: -6%; } }
@media (max-width: 47.99em) { .start__bild.wisch { width: 48vw; margin-top: var(--a-6); } }
/* Seitenköpfe neu (Inhaber 23.10.2026): grosses Bild rechts bis an den Rand, links weich auslaufend; beim Laden freigewischt */
.seitenkopf:has(.seitenkopf__zeichnung) { min-height: min(40rem, calc(100svh - var(--kopf-hoehe))); display: flex; align-items: center; }
.seitenkopf:has(.seitenkopf__zeichnung) > .rahmen { position: static; width: 100%; }   /* Bild hängt am ganzen roten Feld, nicht am Raster */
.seitenkopf:has(.seitenkopf__zeichnung) .seitenkopf__text { position: relative; z-index: 2; }
.seitenkopf__text { grid-column: 1 / span 6; }
.seitenkopf .seitenkopf__zeichnung {
  position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 52%; margin: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%); mask-image: linear-gradient(90deg, transparent, #000 16%);
}
.seitenkopf .seitenkopf__zeichnung img, .seitenkopf__svg { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; margin: 0; }
html.js .seitenkopf__zeichnung.wird-frei { clip-path: inset(0 0 0 100%); }
html.js .seitenkopf__zeichnung.wird-frei.ist-frei { clip-path: inset(0 0 0 0); transition: clip-path 1170ms cubic-bezier(0.77, 0, 0.175, 1) 200ms; }
.seitenkopf__abzieher { position: absolute; max-width: none; height: auto; pointer-events: none; z-index: 3; opacity: 0; }
@media (max-width: 63.99em) {
  .seitenkopf:has(.seitenkopf__zeichnung) { display: block; min-height: 0; padding-bottom: 0; }
  .seitenkopf__text { grid-column: 1 / -1; }
  .seitenkopf .seitenkopf__zeichnung {
    position: relative; width: auto; height: min(70vw, 26rem); margin: var(--a-7) calc(var(--rand) * -1) 0;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%); mask-image: linear-gradient(180deg, transparent, #000 18%);
  }
}
@media (min-width: 48em) and (max-width: 63.99em) { .seitenkopf__text { grid-column: 1 / -1; } }

/* ================================================================== Gutachten F2-2 (23.10.2026) */
/* Startbild: der Satz nach dem Putzen nur für Vorleseprogramme – sichtbar ist das Preisschild */
.wisch__fertig { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Rechner: Grössen als ruhiges 2×2-Raster statt unregelmässigem Umbruch */
.rechner__wahl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-3); }
.rechner__wahl legend { grid-column: 1 / -1; }
.rechner__option span { width: 100%; justify-content: center; }
.uebergabe__raster { align-items: start; }
.uebergabe__bild { align-self: center; }
/* Rot nur für Handlung und Szenen-Häuser: Ablauf-Nummern, Listen- und Punkt-Zeichen in Tinte */
.ablauf__schritte li::before { background: none; color: var(--tinte); width: auto; height: auto; padding: 0; place-items: start;
  font-size: var(--step-head); font-weight: var(--gewicht-titel); line-height: 1; }
.ablauf__schritte::before { background: var(--tinte) !important; height: 2px !important; top: calc(var(--step-head) + var(--a-3)) !important; }
.liste__zeilen li::before, .liste__zeilen li::after, .abschnitt--punkte .punkte li::before {
  background: var(--tinte) !important; -webkit-mask: url("/assets/img/haus.svg?v=5ae11fca2c") no-repeat center / contain; mask: url("/assets/img/haus.svg?v=5ae11fca2c") no-repeat center / contain;
}
.start ~ .abschnitt--liste .liste__zeilen li::before { background: var(--akzent) no-repeat center bottom / 88% !important; -webkit-mask: none; mask: none; }
.start ~ .abschnitt--liste li:has(a[href="/endreinigung"])::before { background-image: url("/assets/img/farbig/kopf-endreinigung.svg?v=44a06c5f26") !important; }
.start ~ .abschnitt--liste li:has(a[href="/bueroreinigung"])::before { background-image: url("/assets/img/farbig/kopf-buero.svg?v=cbf7ec0d86") !important; }
.start ~ .abschnitt--liste li:has(a[href="/hauswartung"])::before { background-image: url("/assets/img/farbig/kopf-hauswartung.svg?v=60ebba65db") !important; }
.start ~ .abschnitt--liste li:has(a[href="/fenster-und-baureinigung"])::before { background-image: url("/assets/img/farbig/kopf-fenster.svg?v=6a04167916") !important; }
/* Textkanten: Aussage-Abschnitte links an der Hauptlinie statt mittig */
@media (min-width: 64em) { .abschnitt--text .zweispaltig__kopf, .abschnitt--text .zweispaltig__inhalt { grid-column: 1 / span 8; } }
/* Vertrauensblock: Bild links grösser, Text an der zweiten Linie (wie die Inhalte der übrigen Abschnitte) */
@media (min-width: 48em) {
  .signal__bild { grid-column: 1 / span 4; max-width: none; }
  .signal__text { grid-column: 7 / -1; }
}
/* Handy 320: «Menü» stösst nicht an */
@media (max-width: 23.99em) { .kopf__menue-knopf { padding: 0 var(--a-3); min-width: 3.4rem; justify-content: center; } }
/* Links im Fliesstext: grössere Tippfläche ohne Zeilensprung */
main p a:not(.knopf), .recht a { display: inline-block; padding-block: 0.55rem; margin-block: -0.55rem; }
/* Leitidee bis zum Schluss: das Formular liegt hinter Beschlag und wird beim Hinsehen einmal freigewischt (kopf.js) */
.abschnitt--anfrage { position: relative; }
html.js:not(.pruefen) .abschnitt--anfrage.wird-frei::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(236, 230, 222, 0.88));
  clip-path: inset(0 0 0 0); transition: clip-path 1200ms cubic-bezier(0.77, 0, 0.175, 1);
}
html.js:not(.pruefen) .abschnitt--anfrage.wird-frei.ist-frei::after { clip-path: inset(0 100% 0 0); }
.anfrage__abzieher { position: absolute; z-index: 4; top: 50%; left: 0; width: 22rem; max-width: none; height: auto; pointer-events: none; opacity: 0; }
@media (min-width: 64em) { .seitenkopf:has(.seitenkopf__zeichnung) .titel-display { font-size: clamp(2.5rem, 1.2rem + 3.2vw, 4.25rem); } }
/* Prüfstrasse nach F2-2: kleinste Handys */
@media (max-width: 24.49em) {
  .rechner__wahl { grid-template-columns: 1fr; }
  .uebergabe__protokoll { padding-inline: var(--a-4); }
}
@media (max-width: 21.24em) { .wisch__schild { padding: var(--a-2); } }

/* Logo Fassung 4 (Inhaber 23.10.2026): Querfassung im Kopf, Emblem gross im Fuss */
.kopf__marke img { height: 2.25rem; }
@media (max-width: 34.99em) { .kopf__marke img { height: 1.9rem; } }
@media (max-width: 23.99em) { .kopf__marke img { height: 1.6rem; } }
.fuss__name { height: clamp(6rem, 3rem + 9vw, 11rem); background-image: url("/assets/img/logo-emblem-negativ.svg?v=d441093396"); }

/* ================================================================== Gutachten F2-3 (eindeutige Fehler) */
/* Tablet: Kopfbild über die ganze Breite unter dem Text, keine leere rote Fläche */
@media (max-width: 63.99em) { .seitenkopf .seitenkopf__zeichnung { grid-column: 1 / -1; margin-bottom: 0; } .seitenkopf .seitenkopf__zeichnung img { max-width: none; margin: 0; } }
/* Rechner: kein Klemmbrett-Balken (wirkte wie ein Platzhalter); die Wohnung begleitet das Formular */
.uebergabe__protokoll::before { content: none; }
@media (min-width: 64em) { .uebergabe__bild { align-self: start; position: sticky; top: calc(var(--kopf-hoehe) + var(--a-7)); } }
/* nichts ragt über den Rand (Abzieher beim Formular, Szenenbilder) */
.szene, .abschnitt--anfrage, .seitenkopf { overflow-x: clip; }
/* Vertrauensblock ohne Bild: Text an der Hauptlinie, gross */
.signal__text { grid-column: 1 / span 9; }