/* ══════════════════════════════════════════════════════════════════════
   MaDe Bauservice GmbH · made-bauservice.de
   socialimpactx · Aufbau auf dem Grundgerüst

   Gestaltungsidee "Fluchtlinie": Das Logo ist eine Bauzeichnung — dünne
   schwarze Linien, ein roter Strich. Genau das ist die Sprache der Seite.
   Haarlinien statt Kästen, viel Weißraum, und das Rot streng rationiert:
   Anruf, Leitlinie, Ziffern. Sonst nirgends.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Design-Variablen ────────────────────────────────────────────────── */
:root {
  /* Schwarz und Rot kommen exakt aus der Logodatei. */
  --farbe-text:        #14161a;   /* Anthrazit, nicht Reinschwarz — liest ruhiger */
  --farbe-text-leise:  #6b675f;   /* warmes Grau, passend zum Beige */
  --farbe-hintergrund: #ffffff;   /* Das Logo lebt von Weißraum */
  --farbe-flaeche:     #f7f3ec;   /* Platzhalter hinter Bildern, Kartenfeld */
  --farbe-akzent:      #e30613;   /* Logo-Rot */
  --farbe-akzent-text: #ffffff;
  --farbe-linie:       #ddd5c8;

  /* Seit September 2026 gibt es keine schwarzen Flächen mehr, Wunsch der
     Kundin. Wo vorher Anthrazit stand, steht jetzt Beige; die Abschnitte
     wechseln zwischen Weiß und Beige, damit sich keine zwei gleichen
     Flächen berühren. Die Reihenfolge steht in der CLAUDE.md. */
  --farbe-beige:       #f1ebe1;
  --farbe-beige-tief:  #e6ddcd;   /* Laufband und Fuß */
  --farbe-text-mittel: #4f4b45;   /* Fließtext auf Beige, etwas kräftiger */

  --schrift-display: 'Jost', system-ui, sans-serif;
  --schrift-text:    'IBM Plex Sans', system-ui, sans-serif;

  --breite:      1240px;
  --breite-text: 680px;
  --radius:      3px;
  --abstand:     clamp(4rem, 9vw, 8rem);
}

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--schrift-text);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  line-height: 1.65;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--schrift-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4rem); }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1rem + 0.55vw, 1.35rem); font-weight: 500; }
p  { text-wrap: pretty; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 3px;
}

/* ─── Bausteine, die überall wiederkehren ────────────────────────────── */

/* Kleine Versalzeile über jeder Überschrift — die Tracking-Sprache des Logos */
.augenbraue {
  font-family: var(--schrift-display);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--farbe-text-leise);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.augenbraue::before {
  content: "";
  width: 28px; height: 1px; flex: none;
  background: var(--farbe-akzent);
}

/* Volle Rasterbreite, damit der Kopf links am Raster steht.
   Begrenzt wird die Zeilenlänge, nicht der Block. */
.abschnitt-kopf { max-width: var(--breite); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.abschnitt-kopf h2 { max-width: 46rem; }
.abschnitt-vorspann {
  margin-top: 1.25rem;
  color: var(--farbe-text-leise);
  font-size: 1.0625rem;
  max-width: var(--breite-text);
}
.klein { font-size: .85rem; color: var(--farbe-text-leise); line-height: 1.55; }
.betont { color: var(--farbe-text); display: inline-block; }


/* ─── Ladevorhang ─────────────────────────────────────────────────────
   Der Vorhang liegt über allem und zeichnet das Logo nach — dieselbe
   Bewegung, mit der die Linie im Hero entsteht.

   Wichtig: Das Wegblenden hängt NICHT an JavaScript. Die CSS-Animation
   "vorhang-weg" räumt ihn nach 4,5 s in jedem Fall weg. Das Skript nimmt
   ihn früher raus, sobald die Seite geladen ist — aber nie vor 2,1 s,
   sonst blitzt das Logo nur kurz auf.
   ───────────────────────────────────────────────────────────────────── */
.vorhang {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; gap: 0;
  background: var(--farbe-hintergrund);
  /* Notausgang, falls das Skript nicht läuft. Liegt bewusst hinter der
     regulären Zeit von 2,5 s, damit er im Normalfall nie greift. */
  animation: vorhang-weg .01s linear 4.5s forwards;
}
/* Beim Weiterklicken, Neuladen und Zurückgehen gibt es keinen Vorhang.
   Die Klasse setzt ein kleines Skript im Kopf, bevor etwas gezeichnet wird. */
.ohne-vorhang .vorhang { display: none !important; }
.vorhang.weg {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .55s ease, visibility .55s;
}
@keyframes vorhang-weg {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.vorhang-marke { display: grid; place-items: center; gap: 1.25rem; }

/* Das Logo aus der Kopfzeile, nur größer. Es kommt ruhig herein statt sich
   zu zeichnen: bei 2,5 s Standzeit bliebe für eine Strichanimation und den
   Schriftzug danach zu wenig Luft, und das Bild ist ohnehin fertig. */
.vorhang-logo {
  /* Nur wenig größer als das Logo in der Kopfzeile: 230 gegen 190 px bei
     1440 px Fensterbreite. Vorher waren es 320 px, das wirkte im leeren
     Vorhang erschlagend. */
  width: clamp(160px, 26vw, 230px);
  height: auto;
  opacity: 0;
  transform: translateY(10px);
  animation: logo-auf .9s cubic-bezier(.22,.61,.36,1) .15s forwards;
}
@keyframes logo-auf { to { opacity: 1; transform: none; } }
@keyframes wort-auf { to { opacity: 1; } }

.vorhang-claim {
  margin-top: .2rem;
  font-family: var(--schrift-display);
  font-weight: 500; font-size: .68rem;
  letter-spacing: .28em; text-indent: .28em;
  text-transform: uppercase;
  color: var(--farbe-text-leise);
  opacity: 0;
  animation: wort-auf .7s ease .95s forwards;
}
.vorhang-claim .punkt { color: var(--farbe-akzent); margin-left: -.28em; }

.vorhang-balken {
  position: absolute; left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--farbe-akzent);
  animation: balken-voll 2.5s cubic-bezier(.35,0,.25,1) forwards;
}
@keyframes balken-voll {
  0%   { width: 0; }
  62%  { width: 74%; }
  100% { width: 100%; }
}

/* Wer Bewegung reduziert hat, sieht das fertige Logo und einen kurzen Halt */
@media (prefers-reduced-motion: reduce) {
  .vorhang { animation-delay: 1.2s; }
  .vorhang-logo { opacity: 1; transform: none; animation: none; }
  .vorhang-claim { opacity: 1; animation: none; }
  .vorhang-balken { display: none; }
}


/* ─── Claim ───────────────────────────────────────────────────────────
   "Präzision, die bleibt." steht so auch auf dem Fahrzeug. Damit er als
   Wiedererkennung funktioniert, sieht er überall gleich aus: gesperrte
   Versalien der Display-Schrift, roter Punkt am Ende.
   ───────────────────────────────────────────────────────────────────── */
.claim {
  font-family: var(--schrift-display);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--farbe-text);
  margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: .9rem;
}
.claim::before {
  content: "";
  width: 28px; height: 1px; flex: none;
  background: var(--farbe-akzent);
}
/* Die Sperrung setzt hinter jedem Zeichen Luft — vor dem Punkt muss die
   wieder raus, sonst steht er frei in der Zeile. */
.claim .punkt { color: var(--farbe-akzent); margin-left: -.22em; }
/* Der Text sitzt in einem eigenen span, damit der Flex-Abstand nur
   zwischen rotem Strich und Wortmarke greift und nicht vor dem Punkt. */
.claim > span { display: inline-block; }

.hero .claim { color: var(--farbe-text); }
.claim-fuss {
  color: #57534c;
  margin: -.35rem 0 1.15rem;
  font-size: .74rem;
}

/* ─── Zugänglichkeit ──────────────────────────────────────────────────── */
.skip {
  position: absolute; left: -9999px;
  background: var(--farbe-akzent); color: var(--farbe-akzent-text);
  padding: .75rem 1.25rem; z-index: 999;
}
.skip:focus { left: 0; top: 0; }

/* ─── Kopf ────────────────────────────────────────────────────────────── */
.kopf {
  position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; gap: 2rem;
  padding: .9rem clamp(1.25rem, 4vw, 2.5rem);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--farbe-linie);
}
.logo { display: block; flex: none; line-height: 0; }
.logo img { width: clamp(148px, 17vw, 190px); height: auto; }

.menue { display: flex; gap: clamp(1rem, 2.2vw, 2rem); margin-left: auto; }
.menue a {
  text-decoration: none;
  font-size: .9rem;
  padding: .35rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color .18s;
}
.menue a:hover { border-bottom-color: var(--farbe-akzent); }
.menue-tel { display: none; }

.kopf-tel {
  display: inline-flex; align-items: center; gap: .55rem;
  flex: none;
  background: var(--farbe-akzent); color: var(--farbe-akzent-text);
  padding: .7rem 1.15rem;
  border-radius: var(--radius);
  font-family: var(--schrift-display);
  font-weight: 500; font-size: .95rem;
  letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  transition: background .18s;
}
.kopf-tel:hover { background: #c1050f; }
.kopf-tel svg { width: 17px; height: 17px; fill: currentColor; flex: none; }

.zurueck { margin-left: auto; text-decoration: none; font-size: .9rem; }
.zurueck:hover { color: var(--farbe-akzent); }

.menue-schalter {
  display: none; margin-left: auto;
  background: none; border: 0; cursor: pointer;
  /* 44 x 44 ist das Mindestmaß, das ein Daumen sicher trifft */
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  padding: 0; gap: 5px; flex-direction: column;
}
.menue-schalter span {
  display: block; width: 24px; height: 1.5px; background: var(--farbe-text);
  transition: transform .2s, opacity .2s;
}
.menue-schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menue-schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── Grundraster der Abschnitte ─────────────────────────────────────── */
main > section {
  padding: var(--abstand) clamp(1.25rem, 4vw, 2.5rem);
}
/* Der Kopf klebt — ohne das verschwindet die Überschrift beim Sprung
   über einen Menülink dahinter. */
main > section[id] { scroll-margin-top: 6rem; }
main > section > * { max-width: var(--breite); margin-inline: auto; }

/* ─── Hero ────────────────────────────────────────────────────────────
   Vollbreite beige Fläche. Der Grund ist die Bauzeichnung unter einem
   dichten Beige-Schleier, sie bleibt als feine Struktur sichtbar, ohne die
   Schrift zu stören. Fehlt die Bilddatei, bleibt die Fläche einfach beige.
   ───────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(4.5rem, 11vw, 9rem) clamp(1.25rem, 4vw, 2.5rem) 0 !important;
  background: var(--farbe-beige);
  color: var(--farbe-text);
  overflow: hidden;
}
.hero > * { max-width: none; margin-inline: 0; }

.hero-grund {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    /* Verlauf zuerst — er liegt über der Zeichnung */
    linear-gradient(105deg, rgba(241,235,225,.95) 0%, rgba(241,235,225,.92) 45%, rgba(241,235,225,.8) 100%),
    url("../images/hero-bauzeichnung.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-color: var(--farbe-beige);
}
/* Zusätzlicher gleichmäßiger Schleier. Auf schmalen Geräten läuft die
   Schrift über die volle Breite und trifft dadurch auch die helle Seite
   des Verlaufs — hier wird gleichmäßig nachgedunkelt. */
.hero-grund::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(241,235,225,0);
}
/* Die rote Fluchtlinie aus dem Logo. Sie sitzt in einem eigenen, rechts
   beschnittenen Feld — so kreuzt sie nie die Schrift, egal wie lang die
   Überschrift umbricht. Beim Laden zieht sie sich einmal von oben ein,
   im Winkel des roten Strichs im Logo. */
.hero-linie {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: 40%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-linie::before {
  content: "";
  position: absolute; top: -14%; left: 92%;
  width: 2px; height: 145%;
  background: var(--farbe-akzent);
  transform-origin: top center;
  transform: rotate(32deg) scaleY(1);
}
@keyframes linie-ziehen {
  from { transform: rotate(32deg) scaleY(0); }
  to   { transform: rotate(32deg) scaleY(1); }
}

.hero-inhalt {
  position: relative; z-index: 1;
  max-width: var(--breite);
  margin-inline: auto;
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}
.hero .augenbraue { color: var(--farbe-text-leise); }
.hero h1 { color: var(--farbe-text); margin-bottom: 1.5rem; max-width: 18ch; }

/* Der Claim ist die Hauptaussage der Marke — entsprechend groß gesetzt,
   in gesperrten Versalien wie auf dem Fahrzeug, mit rotem Punkt. */
/* Die H1 besteht aus der Versalzeile mit dem Suchbegriff und dem Claim */
.hero .hero-titel { margin-bottom: 0; max-width: none; }
.claim-gross {
  display: block;
  font-size: clamp(2.6rem, 1.4rem + 5vw, 5.6rem) !important;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
  max-width: none !important;
}
.claim-gross .punkt { color: var(--farbe-akzent); }

/* Maßlinie wie auf einer Bauzeichnung: eine Haarlinie über die Breite der
   längsten Claim-Zeile, rote Endmarken links und rechts. Sie macht aus dem
   Wort Präzision ein Bild. Die Überschrift ist dafür nur so breit wie ihr
   Text, damit die Linie genau an den Buchstaben endet. */
.claim-gross {
  position: relative;
  width: fit-content;
  margin-bottom: calc(.42em + 14px) !important;
}
.claim-gross::after {
  content: "";
  position: absolute; left: 0; right: .12em;
  bottom: calc(-.2em - 12px);
  height: 13px;
  background:
    linear-gradient(var(--farbe-akzent), var(--farbe-akzent)) left center / 2px 100% no-repeat,
    linear-gradient(var(--farbe-akzent), var(--farbe-akzent)) right center / 2px 100% no-repeat,
    linear-gradient(rgba(20,22,26,.38), rgba(20,22,26,.38)) center / 100% 1px no-repeat;
}
.hero-vorspann {
  font-size: clamp(1.1rem, 1rem + .55vw, 1.45rem) !important;
  color: var(--farbe-text) !important;
  max-width: 30rem;
  margin-bottom: 1.1rem;
  border-left: 2px solid var(--farbe-akzent);
  padding-left: 1.1rem;
}
.hero h1 .betont {
  color: var(--farbe-text);
  border-bottom: 2px solid var(--farbe-akzent);
  padding-bottom: .12em;
}
.hero-unterzeile {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem);
  color: var(--farbe-text-mittel);
  /* Bewusst schmaler als der Hero: so bleibt zwischen Text und Diagonale
     auch bei knapp 1130 px noch Luft. */
  max-width: 34rem;
}
/* Google-Note gleich im ersten Bild, verlinkt auf den Bewertungsblock */
.hero-bewertung { margin-top: 1.6rem; }
.hero-bewertung a {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem .7rem;
  padding: .3rem 0;
  font-size: .9rem; color: var(--farbe-text-mittel);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.hero-bewertung a:hover { border-bottom-color: var(--farbe-akzent); }
.hero-bewertung strong { font-weight: 600; color: var(--farbe-text); }
.hero-bewertung .sterne svg { width: 15px; height: 15px; }
.hero-fussnote {
  margin-top: .6rem;
  font-size: .85rem;
  color: var(--farbe-text-leise);
  display: flex; align-items: center; gap: .6rem;
}
.hero-fussnote::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #46c46a; flex: none;
}
.knopfreihe { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.25rem; }

/* ─── Fakten ──────────────────────────────────────────────────────────── */
.fakten { padding-block: 0 !important; }
.fakten dl {
  max-width: var(--breite); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--farbe-linie);
  border-bottom: 1px solid var(--farbe-linie);
}
.fakten dl > div {
  padding: 2rem 1.75rem;
  border-left: 1px solid var(--farbe-linie);
}
.fakten dl > div:first-child { border-left: 0; padding-left: 0; }
.fakten dt {
  font-family: var(--schrift-display);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
}
.fakten dt span { font-size: .5em; color: var(--farbe-text-leise); }
.fakten dd {
  margin-top: .6rem;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--farbe-text-leise);
  max-width: 15rem;
}


/* ─── Laufband ────────────────────────────────────────────────────────
   Die sechs Gewerke laufen als Endlosband durch. Die Spur enthält die
   Liste zweimal und wird um genau die halbe Breite verschoben — dadurch
   steht am Ende wieder derselbe Zustand wie am Anfang, die Schleife
   springt nicht.
   ───────────────────────────────────────────────────────────────────── */
.laufband {
  padding: 0 !important;
  background: var(--farbe-beige-tief);
  overflow: hidden;
  border-block: 1px solid var(--farbe-linie);
}
.laufband > * { max-width: none; margin-inline: 0; }

.laufband-spur {
  display: flex;
  width: max-content;
  animation: laufen 34s linear infinite;
}
.laufband-spur span {
  display: flex; align-items: center;
  padding: 1.15rem clamp(1.5rem, 3vw, 2.75rem);
  font-family: var(--schrift-display);
  font-size: clamp(.78rem, .72rem + .2vw, .92rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--farbe-text-mittel);
  white-space: nowrap;
}
/* Trennzeichen im Winkel des Logostrichs */
.laufband-spur span::after {
  content: "";
  width: 12px; height: 14px;
  margin-left: clamp(1.5rem, 3vw, 2.75rem);
  background: var(--farbe-akzent);
  clip-path: polygon(78% 0, 100% 0, 22% 100%, 0 100%);
  flex: none;
}
@keyframes laufen {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.laufband:hover .laufband-spur { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .laufband-spur { animation: none; }
}

/* ─── Leistungen ──────────────────────────────────────────────────────
   Keine Sinnbilder. Sechs durchnummerierte Felder in der Schrift des
   Logos — das ist die Sprache eines Leistungsverzeichnisses, nicht die
   eines Icon-Sets.
   ───────────────────────────────────────────────────────────────────── */
.raster {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--farbe-linie);
  border-left: 1px solid var(--farbe-linie);
}
.karte {
  position: relative;
  padding: 2.25rem clamp(1.5rem, 2.2vw, 2.25rem) 2.5rem;
  border-right: 1px solid var(--farbe-linie);
  border-bottom: 1px solid var(--farbe-linie);
  background: var(--farbe-hintergrund);
  transition: background .25s;
}
/* Beim Überfahren wandert nur eine feine rote Kante an den linken Rand */
.karte::before {
  content: "";
  position: absolute; left: -1px; top: 0; bottom: 0;
  width: 2px; background: var(--farbe-akzent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.karte:hover::before, .karte:focus-within::before,
.karte-schwerpunkt::before { transform: scaleY(1); }
.karte:hover { background: #fcfaf6; }
/* Renovierung und Sanierung sind das Spezialgebiet, Wunsch der Kundin.
   Kleine Versalzeile in Rot statt einer eigenen Kachel oder Plakette. */
.schwerpunkt {
  display: block;
  margin: -.55rem 0 .55rem;
  font-family: var(--schrift-display);
  font-weight: 500; font-size: .7rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--farbe-akzent);
}

.ziffer {
  display: block;
  font-family: var(--schrift-display);
  font-weight: 300;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--farbe-linie);
  margin-bottom: 1.4rem;
  transition: color .25s;
}
.karte:hover .ziffer { color: var(--farbe-akzent); }
.karte h3 { margin-bottom: .65rem; }
.karte p { font-size: .93rem; color: var(--farbe-text-leise); }


/* ─── Küchen nach Maß ─────────────────────────────────────────────────
   Heller Abschnitt. Die Küche ist seit September 2026 ausdrücklich
   Nebenpunkt, nicht Spezialgebiet, und hebt sich deshalb auch farblich
   nicht mehr heraus. Die Bilder liegen als background-image — fehlt eine
   Datei, bleibt eine ruhige Fläche.
   ───────────────────────────────────────────────────────────────────── */
.kuechen {
  position: relative;
  isolation: isolate;
  background: var(--farbe-hintergrund);
  color: var(--farbe-text);
  overflow: hidden;
}
.kuechen-grund { display: none; }
.kuechen-inhalt { position: relative; max-width: var(--breite); margin-inline: auto; }
.kuechen .augenbraue { color: var(--farbe-text-leise); }
.kuechen h2 { color: var(--farbe-text); }
.kuechen .abschnitt-vorspann { color: var(--farbe-text-leise); }

.kuechen-bild {
  margin: 0; padding: 0;
  border: 0;
  background: var(--farbe-flaeche) center / cover no-repeat;
  border-radius: var(--radius);
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.kuechen-bild:hover { transform: scale(1.012); }
/* Lupenzeichen, damit erkennbar ist, dass man das Bild öffnen kann */
.kuechen-bild::after {
  content: "";
  position: absolute; right: .75rem; bottom: .75rem;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(16,18,22,.62) center / 17px 17px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
  opacity: .9;
  transition: opacity .2s, background-color .2s;
}
.kuechen-bild:hover::after { opacity: 1; background-color: var(--farbe-akzent); }

/* Die drei Vorzüge als Liste mit rotem Haken. Auf breiten Fenstern
   nebeneinander: über die volle Breite wären die Zeilen zu lang, und der
   Abschnitt soll auf einen Blick erfassbar bleiben. */
.haken {
  list-style: none; padding: 0;
  display: grid; gap: 1.5rem clamp(1.5rem, 3vw, 2.75rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.haken li { position: relative; padding-left: 2.1rem; }
.haken li::before {
  content: "";
  position: absolute; left: 0; top: .3rem;
  width: 1.1rem; height: .6rem;
  border-left: 2px solid var(--farbe-akzent);
  border-bottom: 2px solid var(--farbe-akzent);
  transform: rotate(-45deg);
}
.haken h3 { color: var(--farbe-text); margin-bottom: .35rem; font-size: 1.05rem; }
.haken p { color: var(--farbe-text-leise); font-size: .94rem; }
/* Der Haken hängt links außerhalb, der Text beginnt 2,1 rem weiter innen.
   Der Knopf muss auf dieselbe Textkante, sonst steht er allein vor. */
.kuechen-cta { margin-top: 2rem; padding-left: 2.1rem; }

/* Beide Fotos nebeneinander, im selben 4/3-Rahmen wie die Projektbilder.
   Gleiche Proportion und gleiche Höhe: sonst liest sich das eine als
   Hauptbild und das andere als Anhängsel. 4/3 halbiert nebeneinander
   ergibt rund 460 px Höhe, der Abschnitt bleibt damit auf einen Blick
   erfassbar. Die Vollansicht im Lichtkasten zeigt beide ungeschnitten. */
.kuechen-raster {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.kuechen-raster .kuechen-bild { aspect-ratio: 4 / 3; }
/* Beide Quellen sind hochformatig beziehungsweise 4/3. Der Bildausschnitt
   wird über background-position gesetzt, nicht über einen Zuschnitt der
   Datei — so bleibt die Datei für den Lichtkasten vollständig. */
.bild-insel {
  background-image: url("../images/kueche-gross.jpg");
  background-position: center 46%;
}
.bild-zeile {
  background-image: url("../images/kueche-zeile.jpg");
  background-position: center 52%;
}

.kuechen-fuss {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  font-size: .9rem; color: var(--farbe-text-leise);
  max-width: 46rem;
}

@media (max-width: 900px) {
  /* Drei Textspalten sind hier zu schmal, die Überschriften brechen sonst
     nach jedem Wort um. */
  .haken { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  /* Zwei Bilder nebeneinander wären auf dem Handy briefmarkengroß. */
  .kuechen-raster { grid-template-columns: 1fr; }
}


/* ─── Lichtkasten ─────────────────────────────────────────────────────
   Vollbild über allem. Das Foto wird eingepasst statt beschnitten — genau
   dafür ist die Ansicht ja da. Die Bedienknöpfe sind 48 px groß und
   berücksichtigen die Safe Area, damit sie auf dem iPhone nicht unter der
   Home-Leiste liegen.
   ───────────────────────────────────────────────────────────────────── */
.lupe {
  position: fixed; inset: 0; z-index: 9998;
  display: grid; place-items: center;
  /* Deckend, nicht durchscheinend — sonst liest man den Seitentext
     hinter der Bildunterschrift mit. */
  background: #0a0b0d;
  padding: clamp(.75rem, 3vw, 2rem);
  padding-top: calc(clamp(.75rem, 3vw, 2rem) + env(safe-area-inset-top));
  padding-bottom: calc(clamp(.75rem, 3vw, 2rem) + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.lupe[hidden] { display: none; }

.lupe-buehne {
  margin: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: .9rem;
  max-width: 100%;
  max-height: 100%;
}
.lupe-buehne img {
  max-width: 100%;
  max-height: calc(100dvh - 11rem);
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  background: #16181c;
}
.lupe-buehne figcaption {
  text-align: center;
  color: rgba(255,255,255,.82);
  font-size: .9rem; line-height: 1.45;
  max-width: 44rem;
}
.lupe-zaehler {
  display: block;
  margin-top: .3rem;
  font-family: var(--schrift-display);
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

.lupe-zu, .lupe-pfeil {
  position: absolute;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.lupe-zu:hover, .lupe-pfeil:hover {
  background: var(--farbe-akzent); border-color: var(--farbe-akzent);
}
.lupe-zu svg, .lupe-pfeil svg { width: 22px; height: 22px; }
.lupe-zu {
  top: calc(.9rem + env(safe-area-inset-top));
  right: calc(.9rem + env(safe-area-inset-right));
}
.lupe-pfeil { top: 50%; transform: translateY(-50%); }
.lupe-pfeil.zurueck { left: calc(.9rem + env(safe-area-inset-left)); }
.lupe-pfeil.vor     { right: calc(.9rem + env(safe-area-inset-right)); }

/* Auf schmalen Geräten stören die Pfeile am Bildrand — sie wandern nach
   unten neben die Bildunterschrift, das Wischen bleibt der Hauptweg. */
@media (max-width: 640px) {
  .lupe-buehne img { max-height: calc(100dvh - 13rem); }
  .lupe-pfeil {
    top: auto; transform: none;
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  .lupe-pfeil.zurueck { left: calc(1.25rem + env(safe-area-inset-left)); }
  .lupe-pfeil.vor     { right: calc(1.25rem + env(safe-area-inset-right)); }
  .lupe-buehne { padding-bottom: 3.5rem; }
  .lupe-buehne figcaption { font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kuechen-bild:hover { transform: none; }
}


/* ─── Einbauschränke ──────────────────────────────────────────────────
   Typografisch aufgebaut statt als Bilderstrecke: eine große Aussage,
   darunter eine Tafel aus Haarlinien mit Schlagwort und Erklärung.
   Dieselbe Sprache wie die Faktenleiste und das Leistungsraster, nur
   waagerecht gelesen. Die Fotos bleiben klein und dienen als Beleg.
   ───────────────────────────────────────────────────────────────────── */
.schraenke { background: var(--farbe-beige); }
/* Ein gemeinsamer Rahmen für den ganzen Abschnitt. Ohne den zentriert das
   Grundraster jedes Kind einzeln: Der Abschnittskopf säße bei breiten
   Fenstern in der Mitte, die Aussage klebte am Seitenrand. So beginnt
   alles an derselben Kante. */
.schraenke-inhalt { max-width: var(--breite); margin-inline: auto; }
.schraenke-inhalt > * { max-width: none; }
.schraenke .abschnitt-kopf { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
/* Die Überschrift ist hier nur noch das Etikett, tragen soll die Aussage
   darunter. Deshalb bewusst kleiner als die übrigen H2 der Seite. */
.schraenke .abschnitt-kopf h2 {
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem);
  letter-spacing: .01em;
}

/* Die große Aussage trägt den Abschnitt. Erster Satz kräftig, der Rest
   leiser — das erzeugt Rhythmus ohne zusätzliche Auszeichnung. */
.schraenke-aussage {
  font-family: var(--schrift-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.05rem + 2vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -.015em;
  max-width: 30ch !important;
  margin-inline: 0;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-wrap: balance;
}
.schraenke-aussage span {
  display: block;
  margin-top: .5em;
  font-size: .52em;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--farbe-text-leise);
  max-width: 34ch;
}

/* ─── Tafel ───────────────────────────────────────────────────────────
   Schlagwort links, Erklärung rechts, dazwischen nichts als eine
   Haarlinie. Unter 780 px steht das Schlagwort über dem Text.
   ───────────────────────────────────────────────────────────────────── */
.tafel { border-top: 1px solid var(--farbe-linie); }
.tafel > div {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.1rem, 2vw, 1.6rem) 0;
  border-bottom: 1px solid var(--farbe-linie);
}
.tafel dt {
  font-family: var(--schrift-display);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--farbe-text);
  display: flex; align-items: baseline; gap: .85rem;
}
.tafel dt::before {
  content: "";
  width: 22px; height: 1px; flex: none;
  background: var(--farbe-akzent);
  transform: translateY(-.35em);
}
.tafel dd {
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: .97rem;
  max-width: 46rem;
}

.schrank-bild {
  margin: 0; padding: 0; border: 0;
  background: var(--farbe-flaeche) center / cover no-repeat;
  border-radius: var(--radius);
  aspect-ratio: 3 / 4;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.schrank-bild:hover { transform: scale(1.012); }
.schrank-bild::after {
  content: "";
  position: absolute; right: .7rem; bottom: .7rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(16,18,22,.62) center / 16px 16px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
  opacity: .9;
  transition: opacity .2s, background-color .2s;
}
.schrank-bild:hover::after { opacity: 1; background-color: var(--farbe-akzent); }

.bild-nische     { background-image: url("../images/schrank-nische.jpg"); }
.bild-wand       { background-image: url("../images/schrank-wand.jpg"); }
.bild-waschtisch { background-image: url("../images/schrank-waschtisch.jpg"); }

.schraenke-raster {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.7rem, 1.2vw, 1rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 780px !important;
  margin-inline: 0;
}
.schraenke-cta { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

@media (max-width: 780px) {
  /* Schlagwort über den Text, sonst bleibt für beides zu wenig Breite */
  .tafel > div { grid-template-columns: 1fr; gap: .5rem; }
  .tafel dt { font-size: .78rem; }
}
@media (max-width: 620px) {
  .schraenke-raster { grid-template-columns: 1fr; max-width: 420px !important; }
  .schrank-bild { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .schrank-bild:hover { transform: none; }
}

/* ─── Alles aus einer Hand ────────────────────────────────────────────
   Echtes Objektfoto statt Schemazeichnung. Die Punkte sitzen prozentual
   (--x/--y im HTML), skalieren also korrekt mit dem Bild mit.
   ───────────────────────────────────────────────────────────────────── */
.haus { background: var(--farbe-hintergrund); }
.haus-buehne {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.haus-bild {
  position: relative; margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(20,22,26,.14);
}
.haus-bild img { width: 100%; height: auto; display: block; }

.marke {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--farbe-text);
  font-family: var(--schrift-display);
  font-weight: 500; font-size: .95rem;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20,22,26,.35);
  transition: background .2s, color .2s, transform .2s;
}
/* Ruhiger Puls, damit erkennbar ist, dass die Punkte bedienbar sind */
.marke::before {
  content: "";
  position: absolute; inset: -6px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .2s;
}
.marke:hover, .marke:focus-visible { transform: translate(-50%, -50%) scale(1.12); }
.marke.an {
  background: var(--farbe-akzent); color: #fff;
  transform: translate(-50%, -50%) scale(1.12);
}
.marke.an::before { opacity: 1; }

.zonenwahl {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 2rem;
}
.zonenwahl button {
  background: transparent;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: .5rem .9rem;
  font-size: .85rem; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.zonenwahl button:hover { border-color: var(--farbe-text); }
.zonenwahl button[aria-pressed="true"] {
  background: var(--farbe-text); border-color: var(--farbe-text); color: #fff;
}

.zonentext {
  border-left: 2px solid var(--farbe-akzent);
  padding-left: 1.5rem;
  min-height: 13rem;
}
.zonen-nummer {
  font-family: var(--schrift-display);
  font-weight: 300; font-size: 2.2rem; line-height: 1;
  color: var(--farbe-akzent);
  margin-bottom: .5rem;
}
.zonentext h3 { margin-bottom: .75rem; }
.zonentext p { color: var(--farbe-text-mittel); font-size: .97rem; }
.zonen-gewerk { margin-top: 1.25rem; }
.zonen-gewerk span {
  display: inline-block;
  font-family: var(--schrift-display);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--farbe-text);
  border: 1px solid var(--farbe-text);
  padding: .35rem .75rem;
}

@media (max-width: 900px) {
  .haus-buehne { grid-template-columns: 1fr; }
  /* 36 px ist hier das Maximum: bei 40 stoßen die Punkte 2, 3 und 4 auf
     dem kleinen Foto aneinander. Das eigentliche Bedienelement auf dem
     Handy ist ohnehin die Knopfreihe darunter — die hat volle Größe. */
  .marke { width: 36px; height: 36px; font-size: .88rem; }
}

/* ─── Projekte ────────────────────────────────────────────────────────── */
/* Acht Bilder, vier Spalten, zwei volle Reihen; unter 1120 px zwei Spalten,
   vier volle Reihen. Alle im selben 4/3-Rahmen, Wunsch der Kundin. Wer ein
   Bild ergänzt oder streicht, muss auf ein Vielfaches von vier kommen, sonst
   bleibt in der letzten Reihe eine Lücke. */
.projekte { background: var(--farbe-beige); }
.galerie {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}
.galerie figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); }
.galerie img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.galerie figure:hover img { transform: scale(1.04); }
.galerie figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.5rem 1.25rem 1.1rem;
  background: linear-gradient(transparent, rgba(10,11,13,.82));
  color: #fff; font-size: .9rem; line-height: 1.4;
}
.galerie figcaption span {
  display: block;
  font-family: var(--schrift-display);
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: #fff; opacity: .82;
  margin-bottom: .3rem;
}
.galerie figcaption span::after {
  content: ""; display: inline-block;
  width: 18px; height: 1px; background: var(--farbe-akzent);
  vertical-align: middle; margin-left: .5rem;
}

@media (max-width: 1120px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
}


/* ─── Vorher / Nachher ────────────────────────────────────────────────
   Zwei Fotos aus demselben Blickwinkel, übereinandergelegt. Das obere
   wird von --pos beschnitten. Bedienbar mit Maus, Finger und Tastatur.
   ───────────────────────────────────────────────────────────────────── */
.vergleich { background: var(--farbe-beige); }
.vergleichswahl {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.vergleichswahl button {
  background: transparent;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: .55rem 1.1rem;
  font-family: var(--schrift-display);
  font-size: .9rem; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.vergleichswahl button:hover { border-color: var(--farbe-text); }
.vergleichswahl button[aria-pressed="true"] {
  background: var(--farbe-text); border-color: var(--farbe-text); color: #fff;
}

.vergleich-buehne {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.schieber {
  position: relative;
  /* Verhältnis des Paares, das zuerst gezeigt wird (Haus im Bestand).
     Das Skript schreibt es beim Umschalten selbst neu; dieser Wert gilt
     nur bis zum ersten Skriptlauf. Wer die Reihenfolge der Knöpfe ändert,
     muss ihn mitziehen, sonst springt der Rahmen beim Laden. */
  aspect-ratio: 900 / 660;
  border-radius: var(--radius);
  overflow: hidden;
  /* pan-y heißt: senkrechtes Wischen scrollt die Seite wie gewohnt,
     waagerechtes Ziehen gehört dem Regler. Ohne das würde der Browser
     die Quergeste abfangen und der Schnitt ruckelt. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}
.schieber img {
  width: 100%; height: auto; display: block;
  pointer-events: none;
}
.schieber-oben {
  position: absolute; inset: 0;
  width: var(--pos);
  overflow: hidden;
}
/* Höhe koppeln, damit das obere Bild beim Beschneiden nicht mitschrumpft */
.schieber-oben img {
  position: absolute; top: 0; left: 0;
  height: 100%; width: auto; max-width: none;
}
.schieber-linie {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  touch-action: none;
  width: 2px; background: var(--farbe-akzent);
  transform: translateX(-1px);
  pointer-events: none;
}
/* Der Griff sitzt auf der Linie */
.schieber-linie::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--farbe-akzent);
  background: rgba(255,255,255,.9);
  border-radius: 50%;
}
.schieber-linie::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 22px; height: 12px;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M8 1 2 6l6 5z' fill='%23e30613'/%3E%3Cpath d='M14 1l6 5-6 5z' fill='%23e30613'/%3E%3C/svg%3E") center / contain no-repeat;
}

.schieber-marke {
  position: absolute; bottom: .9rem;
  font-family: var(--schrift-display);
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: #fff;
  background: rgba(10,11,13,.62);
  padding: .35rem .7rem;
  pointer-events: none;
}
.schieber-marke.links  { left: .9rem; }
.schieber-marke.rechts { right: .9rem; }

/* Der Regler liegt unsichtbar über dem Bild und trägt die Bedienung */
.schieber-regler {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  background: transparent;
  appearance: none; -webkit-appearance: none;
  cursor: ew-resize;
  touch-action: pan-y;
}
.schieber-regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 48px; height: 100%;
  background: transparent; cursor: ew-resize;
}
.schieber-regler::-moz-range-thumb {
  width: 48px; height: 999px;
  border: 0; background: transparent; cursor: ew-resize;
}
.schieber-regler:focus-visible { outline: 3px solid var(--farbe-akzent); outline-offset: 3px; }

.vergleich-text h3 { margin-bottom: .9rem; }
.vergleich-text p { color: var(--farbe-text-leise); margin-bottom: 1rem; max-width: 34rem; }
.vergleich-text .augenbraue { margin-bottom: .9rem; }
.vergleich-hinweis {
  border-top: 1px solid var(--farbe-linie);
  padding-top: 1rem; margin-top: 1.5rem;
  font-size: .92rem;
}
.vergleich-cta { margin-top: 1.75rem; }

@media (max-width: 900px) {
  .vergleichswahl {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.vergleichswahl button {
  background: transparent;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: .55rem 1.1rem;
  font-family: var(--schrift-display);
  font-size: .9rem; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.vergleichswahl button:hover { border-color: var(--farbe-text); }
.vergleichswahl button[aria-pressed="true"] {
  background: var(--farbe-text); border-color: var(--farbe-text); color: #fff;
}

.vergleich-buehne { grid-template-columns: 1fr; }
  .schieber { max-width: 420px; margin-inline: auto; }
}


/* ─── Google-Bewertungen ──────────────────────────────────────────────
   Weißer Abschnitt direkt vor dem Kontakt. Er soll sich abheben, ohne
   Kacheln oder Schatten: eine rote Oberkante über die volle Rasterbreite,
   links die Note groß in Light, rechts die Stimmen mit großem roten
   Anführungszeichen, dazwischen eine senkrechte Haarlinie.
   ───────────────────────────────────────────────────────────────────── */
.bewertungen {
  position: relative;
  isolation: isolate;
  background: var(--farbe-hintergrund);
  color: var(--farbe-text);
  overflow: hidden;
  padding-block: clamp(3.5rem, 6vw, 5.5rem) !important;
}
/* Grund: das M aus dem Logo, riesig und sehr blass am rechten Rand, dazu
   ein weicher Lichtschein von oben links. Steckt als data-URI im CSS. */
.bewertungen-grund {
  position: absolute; inset: 0; z-index: -1;
  background-color: var(--farbe-hintergrund);
  background-image:
    radial-gradient(130% 100% at 12% 0%, rgba(241,235,225,.75) 0%, transparent 62%);
}
.bewertungen-grund::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 285 361'%3E%3Cg fill='none' stroke-width='6' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath stroke='%2314161a' d='M9 45V306'/%3E%3Cpath stroke='%2314161a' d='M9 45 128 241 276 6'/%3E%3Cpath stroke='%23e30613' d='M83 352 239 96V306'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -70px center;
  background-size: auto 165%;
  /* Auf Weiß wirkt dieselbe Deckkraft viel stärker als früher auf Anthrazit;
     darüber lief das M sichtbar quer durch die Zitate. */
  opacity: .028;
}
.bewertungen-inhalt {
  position: relative;
  max-width: var(--breite); margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding-top: clamp(2rem, 3.5vw, 2.75rem);
}
/* Rote Oberkante über beide Spalten */
.bewertungen-inhalt::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--farbe-akzent);
  transform-origin: left center;
}

/* ─── Urteil (linke Spalte) ───────────────────────────────────────────── */
.urteil .augenbraue { margin-bottom: .9rem; }
.urteil h2 {
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.85rem);
  max-width: 16em;
}
.urteil-note {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: .75rem 1.4rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.5rem, 3vw, 2rem);
}
.note-zahl {
  font-family: var(--schrift-display);
  font-weight: 300;
  font-size: clamp(4.2rem, 2.6rem + 4.6vw, 7rem);
  line-height: .78;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  color: var(--farbe-text);
}
.urteil-daten { padding-bottom: .2rem; }
.sterne { display: flex; gap: .15rem; }
.sterne svg { width: 15px; height: 15px; fill: #f5a623; }
.urteil .sterne svg { width: 21px; height: 21px; }
.sterne.klein-stern svg { width: 13px; height: 13px; }
.note-anzahl {
  margin-top: .55rem;
  font-size: .9rem; line-height: 1.35;
  color: var(--farbe-text-mittel);
}
.note-anzahl small {
  display: block; margin-top: .15rem;
  font-size: .75rem; color: var(--farbe-text-leise);
}

/* Der Google-Schriftzug in seinen Farben, aus reinem Text gebaut */
.google-wort {
  font-family: var(--schrift-display);
  font-weight: 500; font-size: 1rem; letter-spacing: .01em;
}
.google-wort b { font-weight: 500; }
.google-wort b:nth-child(1) { color: #4285f4; }
.google-wort b:nth-child(2) { color: #ea4335; }
.google-wort b:nth-child(3) { color: #fbbc05; }
.google-wort b:nth-child(4) { color: #4285f4; }
.google-wort b:nth-child(5) { color: #34a853; }
.google-wort b:nth-child(6) { color: #ea4335; }
.nur-vorleser {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ─── Stimmen (rechte Spalte) ─────────────────────────────────────────── */
.stimmen {
  border-left: 1px solid var(--farbe-linie);
  padding-left: clamp(1.75rem, 3.5vw, 3.5rem);
}
.stimme {
  position: relative;
  margin: 0;
  padding: 0 0 clamp(1.4rem, 2.4vw, 1.9rem) clamp(2.6rem, 3.6vw, 3.4rem);
}
.stimme + .stimme {
  padding-top: clamp(1.4rem, 2.4vw, 1.9rem);
  border-top: 1px solid var(--farbe-linie);
}
/* Großes Anführungszeichen, hängt links vor dem Text */
.stimme::before {
  content: "„";
  position: absolute; left: -.04em; top: -.62em;
  font-family: var(--schrift-display);
  font-weight: 300;
  font-size: clamp(3.4rem, 2.8rem + 1.8vw, 4.6rem);
  line-height: 1;
  color: var(--farbe-akzent);
  pointer-events: none;
}
.stimme + .stimme::before { top: calc(clamp(1.4rem, 2.4vw, 1.9rem) - .62em); }
.stimme .sterne { margin-bottom: .6rem; }
.stimme > p:not(.sterne) {
  font-size: clamp(.98rem, .94rem + .22vw, 1.1rem);
  line-height: 1.6;
  color: var(--farbe-text-mittel);
  max-width: 62ch;
}
.stimme footer {
  margin-top: .85rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem;
}
.stimme cite {
  font-style: normal; font-weight: 600; font-size: .9rem;
  color: var(--farbe-text);
  display: inline-flex; align-items: center; gap: .6rem;
}
.stimme cite::before {
  content: ""; width: 18px; height: 1px; background: var(--farbe-akzent); flex: none;
}
.stimme footer span { font-size: .76rem; color: var(--farbe-text-leise); }

.bewertungen-fuss {
  margin-top: .25rem;
  padding-left: clamp(2.6rem, 3.6vw, 3.4rem);
  font-size: .8rem; color: var(--farbe-text-leise);
  max-width: 48rem;
}
.bewertungen-fuss a { color: var(--farbe-text); }

@media (max-width: 900px) {
  .bewertungen-inhalt { grid-template-columns: 1fr; }
  .stimmen {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--farbe-linie);
    padding-top: clamp(2.25rem, 6vw, 2.75rem);
  }
}
@media (max-width: 780px) {
  .bewertungen-grund::after {
    background-position: right -110px top 8%;
    background-size: auto 62%;
    opacity: .028;
  }
}

/* ─── Ablauf ──────────────────────────────────────────────────────────── */
.ablauf { background: var(--farbe-hintergrund); color: var(--farbe-text); }
.ablauf .augenbraue { color: var(--farbe-text-leise); }
.ablauf h2 { color: var(--farbe-text); }

.schritte {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
/* Die rote Leitlinie verbindet die vier Schritte */
.schritte::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 13px;
  height: 1px; background: var(--farbe-linie);
}
.schritte li {
  position: relative;
  padding: 3.25rem 1.75rem 0 0;
}
.schritte li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 11px; height: 11px;
  background: var(--farbe-akzent);
  border-radius: 50%;
}
.nummer {
  display: block;
  font-family: var(--schrift-display);
  font-size: .78rem; letter-spacing: .22em;
  color: var(--farbe-akzent);
  margin-bottom: .85rem;
}
.schritte h3 { color: var(--farbe-text); margin-bottom: .6rem; }
.schritte p { color: var(--farbe-text-leise); font-size: .92rem; }

.ablauf-cta { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ─── Häufige Fragen ──────────────────────────────────────────────────
   Aufklappbar mit <details>, funktioniert also auch ohne Skript. Nur
   Haarlinien und ein rotes Plus, das sich beim Öffnen zum Kreuz dreht.
   ───────────────────────────────────────────────────────────────────── */
.fragen {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--farbe-linie);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.fragen-kopf h3 {
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.85rem);
  font-weight: 400;
  max-width: 16em;
}
.fragen-kopf > p:not(.augenbraue) {
  margin-top: 1rem;
  font-size: .95rem; color: var(--farbe-text-leise);
}
.fragen-kopf a {
  color: var(--farbe-text); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid var(--farbe-akzent);
}
.frage { border-bottom: 1px solid var(--farbe-linie); }
.frage:first-child { border-top: 1px solid var(--farbe-linie); }
.frage summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem 0;
  cursor: pointer;
  font-family: var(--schrift-display);
  font-weight: 500;
  font-size: clamp(1rem, .96rem + .22vw, 1.12rem);
  line-height: 1.35;
  transition: color .2s;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--farbe-akzent); }
.frage summary::after {
  content: "";
  flex: none;
  width: 14px; height: 14px;
  background:
    linear-gradient(var(--farbe-akzent), var(--farbe-akzent)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--farbe-akzent), var(--farbe-akzent)) center / 1.5px 14px no-repeat;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.frage[open] summary::after { transform: rotate(45deg); }
.antwort { padding: 0 2.5rem 1.35rem 0; }
.antwort p { color: var(--farbe-text-mittel); font-size: .97rem; max-width: 68ch; }
.antwort p + p { margin-top: .7rem; }

@media (max-width: 900px) {
  .fragen { grid-template-columns: 1fr; }
  .antwort { padding-right: 0; }
}

/* ─── Einzugsgebiet ───────────────────────────────────────────────────── */
.gebiet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  max-width: var(--breite); margin-inline: auto;
  /* Der Abschnitt selbst ist auf Rasterbreite begrenzt. Damit das Beige
     trotzdem bis an den Fensterrand reicht, zieht ein Schatten die Fläche
     nach außen und clip-path schneidet sie oben und unten wieder bündig. */
  background: var(--farbe-beige);
  box-shadow: 0 0 0 100vmax var(--farbe-beige);
  clip-path: inset(0 -100vmax);
}
.gebiet > * { max-width: none; margin-inline: 0; }
.gebiet h2 { margin-bottom: 1.25rem; }
.gebiet p { color: var(--farbe-text-leise); }

.orte {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .1rem 1.5rem;
  margin: 1.75rem 0 1.5rem;
}
.orte li {
  padding: .5rem 0;
  border-bottom: 1px solid var(--farbe-linie);
  font-size: .93rem;
  display: flex; align-items: center; gap: .65rem;
}
.orte li::before {
  content: ""; width: 10px; height: 1px; background: var(--farbe-akzent); flex: none;
}

.kartenfeld {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.kartenfeld iframe { width: 100%; height: 100%; border: 0; display: block; }
.kartenfeld-schutz {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: .9rem; padding: clamp(1.5rem, 4vw, 2.75rem);
  text-align: left;
}
.kartenfeld-schutz h3 { font-size: 1.1rem; }
.kartenfeld-schutz p { font-size: .9rem; color: var(--farbe-text-leise); max-width: 30rem; }
.kartenfeld-schutz .knopf { align-self: flex-start; margin-top: .35rem; }

/* ─── Kontakt ─────────────────────────────────────────────────────────── */
.kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2.5rem, 5vw, 5rem);
  background: var(--farbe-beige); color: var(--farbe-text);
  max-width: none !important;
}
.kontakt > * { max-width: none; margin-inline: 0; }
.kontakt { padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.kontakt { padding-bottom: clamp(4rem, 8vw, 7rem); }
.kontakt-spalte:first-child { padding-left: max(0px, calc((100vw - var(--breite)) / 2)); }
.kontakt .augenbraue { color: var(--farbe-text-leise); }
.kontakt h2 { color: var(--farbe-text); margin-bottom: 1.25rem; }
.kontakt-vorspann { color: var(--farbe-text-mittel); max-width: 32rem; }

.grosse-nummer {
  display: inline-flex; align-items: center; gap: .85rem;
  margin: 1.75rem 0 2rem;
  font-family: var(--schrift-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
  font-weight: 400; letter-spacing: -.01em;
  color: var(--farbe-text); text-decoration: none;
  border-bottom: 2px solid var(--farbe-akzent);
  padding-bottom: .15em;
  transition: color .2s;
}
.grosse-nummer:hover { color: var(--farbe-akzent); }
.grosse-nummer svg { width: .8em; height: .8em; fill: var(--farbe-akzent); flex: none; }

.kontaktdaten { display: grid; gap: 1.15rem; }
.kontaktdaten dt {
  font-family: var(--schrift-display);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--farbe-text-leise);
  margin-bottom: .35rem;
}
.kontaktdaten dd { margin: 0; font-size: .97rem; line-height: 1.6; }
.kontaktdaten a {
  display: inline-block; padding: .5rem 0;
  text-decoration: none; border-bottom: 1px solid rgba(20,22,26,.28);
}
.kontaktdaten a:hover { border-bottom-color: var(--farbe-akzent); }

/* ─── Formular ────────────────────────────────────────────────────────
   Zweispaltig, damit der Kontaktblock auf dem Desktop nicht länger wird
   als der Text daneben. Auf schmalen Geräten fällt alles untereinander.
   ───────────────────────────────────────────────────────────────────── */
.formular {
  background: #fff; color: var(--farbe-text);
  border: 1px solid var(--farbe-linie);
  padding: clamp(1.35rem, 2.4vw, 2rem);
  border-radius: var(--radius);
  max-width: 34rem;
}
.formular h3 { margin-bottom: 1.1rem; }

.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.feld { margin: 0 0 .75rem; }
.feldpaar .feld { margin-bottom: .75rem; }

.formular label {
  display: block;
  font-weight: 500; font-size: .8rem;
  margin-bottom: .3rem;
}
.formular input, .formular textarea, .formular select {
  width: 100%; padding: .6rem .75rem;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: #fcfaf6;
  font-size: .95rem;
  transition: border-color .18s, background .18s;
}
.formular textarea { resize: vertical; min-height: 5rem; }
.formular input:focus, .formular textarea:focus, .formular select:focus {
  background: #fff; border-color: var(--farbe-text); outline: none;
}
.formular .knopf { margin-top: 1rem; width: 100%; justify-content: center; }
.formular .klein { margin-top: .6rem; }

.einwilligung {
  display: flex; gap: .55rem; align-items: flex-start;
  margin: .35rem 0 0; font-size: .78rem; line-height: 1.45;
  color: var(--farbe-text-leise);
}
.einwilligung input {
  width: 20px; height: 20px;
  margin-top: .1rem; flex: none;
  accent-color: var(--farbe-akzent);
  cursor: pointer;
}
.einwilligung label { cursor: pointer; }
.einwilligung label { display: inline; font-weight: 400; font-size: inherit; margin: 0; }
.einwilligung a { color: var(--farbe-text); }

.falle { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ─── Knöpfe ──────────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--farbe-akzent); color: var(--farbe-akzent-text);
  padding: .95rem 1.6rem; border: 1px solid var(--farbe-akzent);
  border-radius: var(--radius);
  font-family: var(--schrift-display);
  font-weight: 500; font-size: 1rem; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  min-height: 48px;
  transition: background .18s, border-color .18s, color .18s;
}
.knopf:hover { background: #c1050f; border-color: #c1050f; }
.knopf svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

.knopf-linie {
  background: transparent; color: var(--farbe-text);
  border-color: var(--farbe-linie);
}
.knopf-linie:hover { background: transparent; border-color: var(--farbe-text); color: var(--farbe-text); }

.knopf-hell {
  background: #fff; color: var(--farbe-text); border-color: #fff;
}
.knopf-hell:hover { background: var(--farbe-akzent); border-color: var(--farbe-akzent); color: #fff; }

/* Heller Umriss-Knopf für dunkle Flächen */
.knopf-hell-linie {
  background: transparent; color: #fff;
  border-color: rgba(255,255,255,.34);
}
.knopf-hell-linie:hover {
  background: rgba(255,255,255,.09); border-color: #fff; color: #fff;
}

/* ─── Rechtstexte ─────────────────────────────────────────────────────── */
.rechtstext {
  max-width: var(--breite-text);
  margin: 3.5rem auto 6rem; padding: 0 1.25rem;
}
.rechtstext h1 { margin-bottom: 2rem; }
.rechtstext h2 { margin: 2.75rem 0 .75rem; font-size: 1.3rem; font-weight: 500; }
.rechtstext h3 { margin: 1.75rem 0 .5rem; font-size: 1.05rem; }
.rechtstext p, .rechtstext ul { margin-bottom: 1rem; }
.rechtstext ul { padding-left: 1.25rem; }
.rechtstext li { margin-bottom: .35rem; }
.rechtstext a { color: var(--farbe-text); }
/* Knöpfe im Rechtstext behalten ihre eigene Schriftfarbe */
.rechtstext a.knopf { color: var(--farbe-akzent-text); }
.rechtstext a.knopf-linie { color: var(--farbe-text); }
.stand { margin-top: 3rem; color: var(--farbe-text-leise); font-size: .9rem; }

/* ─── Fuß ─────────────────────────────────────────────────────────────
   Ein Ton tiefer als das Beige des Kontaktblocks darüber und mit roter
   Oberkante, sonst laufen beide Flächen zu einem Block zusammen und der
   Fuß liest sich wie eine weitere Section.
   ───────────────────────────────────────────────────────────────────── */
.fuss {
  background: var(--farbe-beige-tief);
  color: #57534c;
  border-top: 3px solid var(--farbe-akzent);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2.5rem) 1.75rem;
  font-size: .85rem;
}
.fuss-raster {
  max-width: var(--breite); margin-inline: auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  padding-bottom: 2.25rem;
}
.fuss-marke img { width: 165px; margin-bottom: 1.15rem; }
.fuss-marke p { max-width: 26rem; }
.fuss-titel {
  font-family: var(--schrift-display);
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--farbe-text); font-weight: 500; margin-bottom: 1.1rem;
}
.fuss ul { list-style: none; padding: 0; display: grid; gap: 0; }
.fuss li { line-height: 1.5; }
/* Polsterung gehört auf den Link selbst — sonst ist die Zeile hoch,
   das Tippziel aber weiterhin nur so groß wie die Schrift. */
.fuss li a { display: inline-block; padding: .6rem 0; }
.fuss li:not(:has(a)) { padding: .6rem 0; }
.fuss a { text-decoration: none; transition: color .18s; }
.fuss a:hover { color: var(--farbe-akzent); }

.fuss-zeile {
  max-width: var(--breite); margin-inline: auto;
  border-top: 1px solid rgba(20,22,26,.12);
  padding-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: center; justify-content: space-between;
  font-size: .85rem;
}
.fuss-zeile nav { display: flex; gap: 1.5rem; }
.fuss-zeile nav a { padding: .55rem 0; }
.fuss-zeile { font-size: .8rem; color: #57534c; }

/* Fuß auf den Rechtsseiten — dort steht nur die schlichte Linkzeile */
.fuss > a { color: inherit; text-decoration: none; margin-right: 1.5rem; }

/* ─── Handyleiste ─────────────────────────────────────────────────────── */
.handyleiste { display: none; }

/* ─── Mobil ───────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .raster { grid-template-columns: repeat(2, 1fr); }
  .schritte { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .schritte::before { display: none; }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .fuss-marke { grid-column: span 2; }
}

@media (max-width: 900px) {
  /* Auf schmalen Geräten läuft die Schrift über die volle Breite —
     dann hätte die Diagonale keinen Platz mehr, ohne sie zu kreuzen. */
  .hero-linie { display: none; }
  .hero-grund::after { background: rgba(241,235,225,.55); }
  .gebiet { grid-template-columns: 1fr; }
  .kontakt { grid-template-columns: 1fr; }
  .kontakt-spalte:first-child { padding-left: 0; }
  .formular { max-width: none; }
}

/* Sieben Menüpunkte plus Logo plus Telefonknopf brauchen rund 1100 px.
   Darunter geht die Kopfzeile ins Mobilmenü, sonst bricht sie um. */
@media (max-width: 1120px) {
  /* backdrop-filter macht den Kopf zum Bezugsrahmen für alles, was darin
     position:fixed ist. Das Mobilmenü wäre dadurch nur kopfhoch statt
     bildschirmfüllend. Deshalb hier ohne Weichzeichner. */
  .kopf { background: var(--farbe-hintergrund); backdrop-filter: none; z-index: 100; }

  /* Der Schalter muss über dem geöffneten Menü liegen, sonst kommt man
     nicht mehr heraus, ohne einen Menüpunkt anzutippen. */
  .menue-schalter { display: flex; position: relative; z-index: 110; }
  .menue {
    position: fixed; inset: 0; z-index: 100;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 1.6rem; font-size: 1.35rem;
    background: var(--farbe-hintergrund);
    transform: translateX(100%); transition: transform .25s ease;
    padding: 2rem;
  }
  .menue.offen { transform: translateX(0); }
  .menue a { font-family: var(--schrift-display); font-size: 1.4rem; }
  .menue a.menue-tel {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 1rem; min-height: 48px;
    background: var(--farbe-akzent); color: #fff;
    padding: .85rem 1.75rem; border-radius: var(--radius);
    border-bottom-color: transparent;
  }
  .kopf-tel { display: none; }

  /* Feste Anrufleiste am unteren Rand — der wichtigste Hebel auf dem Handy */
  .handyleiste {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--farbe-linie);
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    gap: .6rem;
  }
  .handyleiste a {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px; border-radius: var(--radius);
    font-family: var(--schrift-display); font-weight: 500; font-size: .95rem;
    text-decoration: none;
  }
  .handyleiste-anruf { background: var(--farbe-akzent); color: #fff; }
  .handyleiste-anruf svg { width: 17px; height: 17px; fill: currentColor; }
  .handyleiste-anfrage { border: 1px solid var(--farbe-linie); color: var(--farbe-text); }
  body { padding-bottom: 4.75rem; }
}

@media (max-width: 560px) {
  .feldpaar { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 620px) {
  .raster { grid-template-columns: 1fr; }
  .schritte { grid-template-columns: 1fr; }
  .orte { grid-template-columns: 1fr; }
  .knopfreihe .knopf { width: 100%; justify-content: center; }
  .fuss-raster { grid-template-columns: 1fr; }
  .fuss-marke { grid-column: auto; }
  .galerie { grid-template-columns: 1fr; }
}


/* ─── Reihenfolge auf dem Handy ───────────────────────────────────────
   Wunsch des Kunden: nach dem Hero sofort der Block „Alles aus einer
   Hand", dann die Faktenleiste, dann erst die Leistungen. Auf dem Desktop
   bleibt die Reihenfolge des HTML. Umgestellt wird nur optisch über
   "order"; im HTML und damit für Suchmaschinen und Vorleseprogramme
   bleibt die ursprüngliche Reihenfolge.

   width: 100% ist Pflicht: Abschnitte mit eigener max-width und
   margin-inline: auto (etwa das Einzugsgebiet) würden in einer Flexbox
   sonst auf ihre Inhaltsbreite zusammenschrumpfen.

   Weil „Aus einer Hand" und die Leistungen beide weiß sind, bekommt die
   Faktenleiste dazwischen hier einen beigen Grund, sonst liefen drei
   weiße Flächen ineinander.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
  main { display: flex; flex-direction: column; }
  main > section { width: 100%; order: 5; }
  main > .hero       { order: 1; }
  main > .haus       { order: 2; }
  main > .fakten     { order: 3; }
  main > .leistungen { order: 4; }
  .fakten { background: var(--farbe-beige); padding-block: .5rem !important; }
  .fakten dl { border-block: 0; }
}

/* Drei Fakten nebeneinander brauchen Platz: „9:00–16:00" ist in der großen
   Ziffernschrift allein rund 170 px breit. Darunter untereinander. */
@media (max-width: 780px) {
  .fakten dl { grid-template-columns: 1fr; }
  .fakten dl > div {
    border-left: 0; padding: 1.5rem 0;
    border-bottom: 1px solid var(--farbe-linie);
  }
  .fakten dl > div:last-child { border-bottom: 0; }
  .fakten dd { max-width: none; }
}

/* ─── Lesbarkeit auf kleinen Geräten ──────────────────────────────────
   Auf dem Desktop dürfen die Mikro-Auszeichnungen klein sein, dort liest
   man aus 60 cm. Auf dem Handy landen dieselben Grade unter 11 px und
   werden mühsam — hier werden sie angehoben. Betrifft nur Beschriftungen,
   der Fließtext war nie betroffen.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
  .galerie figcaption { font-size: .92rem; }
  .galerie figcaption span { font-size: .72rem; letter-spacing: .16em; }
  .schieber-marke { font-size: .75rem; padding: .4rem .75rem; }
  .note-anzahl small { font-size: .8rem; }
  .stimme footer span { font-size: .78rem; }
  .klein { font-size: .88rem; }
  .augenbraue, .claim { font-size: .78rem; letter-spacing: .18em; }
  .kontaktdaten dt { font-size: .78rem; }
  .zonen-gewerk span { font-size: .76rem; }
  .hero-fussnote { font-size: .88rem; }
  .einwilligung { font-size: .84rem; }
  .formular select { padding-block: .72rem; }
  .fuss { font-size: .9rem; }
  .fuss-titel { font-size: .74rem; }
  .fuss-zeile { font-size: .85rem; }
  .bewertungen-fuss { font-size: .85rem; }
  .laufband-spur span { font-size: .8rem; }
}

/* ─── Effekte beim Laden und Scrollen ─────────────────────────────────
   Alles hier greift nur, wenn das Skript die Klasse "effekte" an <html>
   gesetzt hat. Ohne Skript und bei reduzierter Bewegung steht die Seite
   einfach fertig da, nichts bleibt versteckt.

   "bereit" kommt dazu, sobald der Ladevorhang weg ist. Erst dann läuft
   der Hero an, sonst spielte die Bewegung unsichtbar hinter dem Vorhang.
   "auftritt" bekommt jedes Element, das beim Hereinscrollen erscheint,
   "da" den Moment, in dem es sichtbar wird. Nach dem Auftritt nimmt das
   Skript beide Klassen wieder weg, damit Hover-Effekte ohne Verzögerung
   laufen.
   ───────────────────────────────────────────────────────────────────── */
@keyframes auftauchen {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mass-ziehen {
  from { clip-path: inset(0 50% 0 50%); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes grund-atmen {
  from { transform: scale(1); }
  to   { transform: scale(1.07) translate(-1%, .8%); }
}

/* Hero: nacheinander herein, dann zieht sich die Maßlinie auf */
.effekte:not(.bereit) .hero-inhalt > * { opacity: 0; }
.bereit .hero-inhalt > * { animation: auftauchen .9s cubic-bezier(.22,.61,.36,1) both; }
.bereit .hero-inhalt > :nth-child(1) { animation-delay: .05s; }
.bereit .hero-inhalt > :nth-child(2) { animation-delay: .18s; }
.bereit .hero-inhalt > :nth-child(3) { animation-delay: .34s; }
.bereit .hero-inhalt > :nth-child(4) { animation-delay: .46s; }
.bereit .hero-inhalt > :nth-child(5) { animation-delay: .58s; }
.bereit .hero-inhalt > :nth-child(6) { animation-delay: .7s; }
.effekte:not(.bereit) .claim-gross::after { clip-path: inset(0 50% 0 50%); }
.bereit .claim-gross::after { animation: mass-ziehen 1.1s cubic-bezier(.65,0,.35,1) 1.05s both; }
.effekte:not(.bereit) .hero-linie::before { transform: rotate(32deg) scaleY(0); }
.bereit .hero-linie::before { animation: linie-ziehen 1.4s cubic-bezier(.22,.61,.36,1) .3s both; }
/* Die Bauzeichnung im Grund bewegt sich kaum merklich, wie ein atmender Plan */
.effekte .hero-grund {
  transform-origin: 70% 40%;
  animation: grund-atmen 36s ease-in-out infinite alternate;
  will-change: transform;
}

/* Grundmuster: leicht von unten herein */
.effekte .auftritt {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1) var(--verzug, 0s),
    transform .95s cubic-bezier(.22,.61,.36,1) var(--verzug, 0s);
}
.effekte .auftritt.da { opacity: 1; transform: none; }

/* Die rote Marke vor jeder Versalzeile zieht sich auf */
.effekte .auftritt .augenbraue::before {
  width: 0;
  transition: width .7s cubic-bezier(.65,0,.35,1) calc(var(--verzug, 0s) + .3s);
}
.effekte .auftritt.da .augenbraue::before { width: 28px; }

/* Spezialgebiet-Karten: die rote Kante zieht sich von oben herab */
.effekte .karte-schwerpunkt.auftritt::before {
  transform: scaleY(0);
  transition: transform .9s cubic-bezier(.65,0,.35,1) calc(var(--verzug, 0s) + .45s);
}
.effekte .karte-schwerpunkt.auftritt.da::before { transform: scaleY(1); }

/* Projektbilder decken sich von unten auf, das Foto setzt sich dabei.
   Aufgedeckt wird über eine beige Abdeckung, die sich nach oben zurückzieht,
   nicht über clip-path am Bild selbst: Ein vollständig abgeschnittenes
   Element gilt für den Scroll-Beobachter als unsichtbar, der Auftritt
   würde dann nie ausgelöst. */
.effekte .galerie figure.auftritt { opacity: 1; transform: none; }
.effekte .galerie figure.auftritt::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: var(--farbe-beige);
  transform-origin: top center;
  transition: transform 1.05s cubic-bezier(.65,0,.35,1) var(--verzug, 0s);
}
.effekte .galerie figure.auftritt.da::after { transform: scaleY(0); }
.effekte .galerie figure.auftritt img {
  transform: scale(1.14);
  transition: transform 1.6s cubic-bezier(.22,.61,.36,1) var(--verzug, 0s);
}
.effekte .galerie figure.auftritt.da img { transform: none; }

/* Ablauf: Leitlinie zieht sich, die Punkte setzen nacheinander auf */
.effekte .schritte.auftritt { opacity: 1; transform: none; }
.effekte .schritte.auftritt::before {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.5s cubic-bezier(.65,0,.35,1) .1s;
}
.effekte .schritte.auftritt.da::before { transform: scaleX(1); }
.effekte .schritte.auftritt li::before {
  transform: scale(0);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.effekte .schritte.auftritt li > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.effekte .schritte.auftritt.da li::before { transform: none; }
.effekte .schritte.auftritt.da li > * { opacity: 1; transform: none; }
.effekte .schritte.auftritt li:nth-child(1)::before, .effekte .schritte.auftritt li:nth-child(1) > * { transition-delay: .15s; }
.effekte .schritte.auftritt li:nth-child(2)::before, .effekte .schritte.auftritt li:nth-child(2) > * { transition-delay: .5s; }
.effekte .schritte.auftritt li:nth-child(3)::before, .effekte .schritte.auftritt li:nth-child(3) > * { transition-delay: .85s; }
.effekte .schritte.auftritt li:nth-child(4)::before, .effekte .schritte.auftritt li:nth-child(4) > * { transition-delay: 1.2s; }

/* Bewertungen: Oberkante zieht sich, Sterne füllen sich, Zeichen setzen auf */
.effekte .bewertungen-inhalt.auftritt { opacity: 1; transform: none; }
.effekte .bewertungen-inhalt.auftritt::before {
  transform: scaleX(0);
  transition: transform 1.3s cubic-bezier(.65,0,.35,1) .1s;
}
.effekte .bewertungen-inhalt.auftritt.da::before { transform: scaleX(1); }
.effekte .urteil.auftritt .sterne svg {
  opacity: .15; transform: scale(.55);
  transition: opacity .35s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
}
.effekte .urteil.auftritt.da .sterne svg { opacity: 1; transform: none; }
.effekte .urteil.auftritt .sterne svg:nth-child(1) { transition-delay: .75s; }
.effekte .urteil.auftritt .sterne svg:nth-child(2) { transition-delay: .87s; }
.effekte .urteil.auftritt .sterne svg:nth-child(3) { transition-delay: .99s; }
.effekte .urteil.auftritt .sterne svg:nth-child(4) { transition-delay: 1.11s; }
.effekte .urteil.auftritt .sterne svg:nth-child(5) { transition-delay: 1.23s; }
.effekte .stimme.auftritt::before {
  opacity: 0; transform: translateY(-10px) scale(.7);
  transition: opacity .6s ease calc(var(--verzug, 0s) + .35s),
              transform .8s cubic-bezier(.34,1.56,.64,1) calc(var(--verzug, 0s) + .35s);
}
.effekte .stimme.auftritt.da::before { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .effekte .hero-grund { animation: none; }
}
@media print {
  .effekte .auftritt, .effekte .hero-inhalt > * {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
}

/* ─── Eingabefelder auf Tippgeräten ───────────────────────────────────
   iOS Safari zoomt beim Antippen in jedes Eingabefeld hinein, dessen
   Schrift kleiner als 16 px ist. Danach steht die Seite verschoben da und
   der Besucher muss von Hand herauszoomen. Das gilt auch auf dem iPad,
   also nicht an der Fensterbreite festmachen, sondern am Eingabegerät.
   ───────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  .formular input, .formular select, .formular textarea { font-size: 16px; }
  .formular select { padding-block: .72rem; }
}

/* ─── Bewegung sparsam ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ─── Druck ───────────────────────────────────────────────────────────── */
@media print {
  .kopf, .fuss nav, .menue-schalter, .knopf, .handyleiste, .kartenfeld { display: none; }
  body { color: #000; background: #fff; padding-bottom: 0; }
  .ablauf, .kontakt, .fuss { background: #fff; color: #000; }
}