/* ============================================================
   Klarblick Fensterreinigung - Stylesheet
   ------------------------------------------------------------
   Klarblick ist ein Arbeitstitel. Der endgueltige Firmenname steht
   noch nicht fest und muss vor einem Livegang ersetzt werden.

   Aufbau dieser Datei
   1. Farben, Masse, Schriftgroessen (Tokens)
   2. Grundlagen
   3. Bausteine (Knoepfe, Karten, Symbole)
   4. Abschnitte der Startseite, in der Reihenfolge der Seite
   5. Rechtsseiten
   6. Kleine Bildschirme
   ============================================================ */

/* ============================================================
   1. Tokens
   ------------------------------------------------------------
   Farbgedanke: kuehle, klare Toene, die an Glas und Wasser erinnern,
   dazu ein warmer Akzent, damit die Seite nicht klinisch wirkt.

   Der warme Ton --licht erreicht auf hellem Grund nur 3,6:1. Er wird
   deshalb nie fuer Fliesstext benutzt, sondern nur grafisch: Linien,
   Flaechen, Symbole. Wo der warme Ton als Text erscheint, steht
   --licht-text mit 6,4:1.
   ============================================================ */
:root {
  /* Grundflaechen */
  --papier:        #FFFFFF;
  --grund:         #FBFCFC;
  --grund-kuehl:   #F2F7F8;

  /* Tiefe Toene: die dunkle Kante einer Glasscheibe */
  --tinte:         #0B2B33;   /* 14,5:1 auf --grund */
  --text:          #17323A;   /* 13,2:1 auf --grund */
  --leise:         #4E6B73;   /*  5,6:1 auf --grund */

  /* Wasser: der kuehle Leitton */
  --wasser:        #0E6E86;   /*  5,7:1 auf --grund */
  --wasser-tief:   #0A5A6E;
  --wasser-blass:  #E4F1F4;
  --wasser-hauch:  #F3F9FA;

  /* Licht: der warme Gegenpol, Sonne durch eine saubere Scheibe */
  --licht:         #C2711C;   /* nur grafisch */
  --licht-text:    #8A4E10;   /*  6,4:1 auf --grund */
  --licht-blass:   #FBF1E3;
  --licht-hauch:   #FDF8F1;

  /* Linien */
  --linie:         #DDE7E9;
  --linie-stark:   #C3D5D9;

  /* Masse. Vierer-Raster. */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 80px;  --s10: 128px;

  /* Schriftgroessen.
     Die Zielgruppe ist ueberwiegend zwischen 45 und 70. Der Grundtext
     startet deshalb bei 17px statt der ueblichen 16 und waechst auf
     dem Rechner auf 18. */
  --t-grund:  17px;
  --t-klein:  15px;
  --t-mini:   13px;
  --t-lead:   clamp(1.06rem, 1rem + 0.35vw, 1.28rem);
  --t-h1:     clamp(2.05rem, 1.35rem + 3.1vw, 3.85rem);
  --t-h2:     clamp(1.62rem, 1.25rem + 1.7vw, 2.5rem);
  --t-h3:     clamp(1.17rem, 1.08rem + 0.42vw, 1.42rem);

  /* Breiten.
     Der Inhalt lief bei 1200 px, auf einem 1440er Bildschirm blieben
     links und rechts je 120 px ungenutzt und die Seite wirkte leer.
     Karten, Bilder und das Preisraster nutzen jetzt 1360 px.
     Fliesstext bleibt bei --lesebreite, weil lange Zeilen sonst
     schwer zu verfolgen sind. */
  --breit:      1360px;
  --schmal:     72ch;
  --lesebreite: 720px;
  /* Seitenrand der Bahnen. Waechst mit dem Fenster, faellt aber nie
     unter 20 px und steigt nie ueber 40 px. Ohne Untergrenze stiesse
     der Inhalt auf einem 1265 px breiten Fenster fast an die Kante,
     seit die Inhaltsbreite auf 1360 px steht. */
  --rand:       clamp(20px, 3vw, 40px);

  /* Luft oben und unten in einer Abschnittsbahn. Eigene Tokens statt
     der Groessenskala, weil --s8 und --s9 auch anderswo hangen.
     Vorher 80 px, dadurch trafen zwischen zwei Abschnitten bis zu
     160 px Leerraum aufeinander. */
  --bahn-luft:     48px;
  --bahn-luft-eng: 40px;
  /* Der Hero braucht oben weniger, sonst steht unter der Kopfzeile
     eine leere Flaeche. Zwischen Bahnkante und H1 liegt noch der
     Kicker, deshalb sind es hier nur 20 px. */
  --hero-oben:     20px;

  /* Rundungen und Schatten */
  --r-klein:  6px;
  --r:        12px;
  --r-gross:  20px;
  --schatten:       0 1px 2px rgba(11,43,51,.05), 0 4px 14px rgba(11,43,51,.05);
  --schatten-hoch:  0 2px 6px rgba(11,43,51,.07), 0 14px 38px rgba(11,43,51,.10);

  --takt: 180ms cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   2. Grundlagen
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: 'Grotesk', 'Grotesk Ersatz', system-ui, sans-serif;
  font-size: var(--t-grund);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 900px) { body { font-size: 18px; } }

h1, h2, h3, h4 {
  font-family: 'Serife', 'Serife Ersatz', Georgia, serif;
  color: var(--tinte);
  line-height: 1.14;
  letter-spacing: -.018em;
  margin: 0 0 var(--s4);
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: -.028em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: var(--wasser); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--wasser-tief); }

img { max-width: 100%; height: auto; display: block; }

/* Die Kopfzeile klebt oben. Ohne diesen Abstand landet ein Sprung
   ueber das Menue genau hinter der Kopfzeile und die Ueberschrift
   des Ziels ist verdeckt. */
:target, section[id], #oben { scroll-margin-top: 88px; }

:focus-visible {
  outline: 3px solid var(--wasser);
  outline-offset: 3px;
  border-radius: var(--r-klein);
}

.zum-inhalt {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tinte); color: #fff; padding: var(--s3) var(--s5);
  border-radius: 0 0 var(--r) 0; font-weight: 600; text-decoration: none;
}
.zum-inhalt:focus { left: 0; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Aeussere Bahn und innerer Inhalt */
.bahn { padding: var(--bahn-luft) var(--rand); }
.bahn-eng { padding: var(--bahn-luft-eng) var(--rand); }
.mitte { max-width: var(--breit); margin: 0 auto; }
.mitte-schmal { max-width: var(--schmal); margin: 0 auto; }

.bahn-kuehl { background: var(--grund-kuehl); }
.bahn-blass { background: var(--wasser-hauch); }
.bahn-warm  { background: var(--licht-hauch); }
.bahn-tief  { background: var(--tinte); color: #DCE8EB; }
.bahn-tief h2, .bahn-tief h3 { color: #FFFFFF; }

/* Kleine Ueberschrift ueber der Ueberschrift */
.kicker {
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--licht-text);
  margin: 0 0 var(--s3);
  /* Bewusst kein Flex-Container. Als Flex wuerde jedes Textstueck neben
     einem span zu einem eigenen Element und bekaeme den Abstand der
     Luecke zusaetzlich zum Wortzwischenraum. Der Strich laeuft deshalb
     als Inline-Element im Text mit und bricht sauber um. */
  display: block;
  line-height: 1.5;
  text-wrap: balance;
}
.kicker::before {
  content: "";
  display: inline-block; vertical-align: middle;
  width: 26px; height: 2px; background: var(--licht);
  margin: -2px 12px 0 0;
}
.bahn-tief .kicker { color: #F0C58A; }
.bahn-tief .kicker::before { background: #F0C58A; }

/* Haelt eine Wortgruppe zusammen, damit Zeilen nicht mit einem
   einzelnen Wort enden. */
.zusammen { white-space: nowrap; }

.lead { font-size: var(--t-lead); color: var(--leise); line-height: 1.6; }
.bahn-tief .lead { color: #B4CBD1; }

/* Abstand vom Abschnittskopf zum Inhalt. Lag bei 48 px und war
   damit die groesste Luecke im Seitenfluss. */
.kopf-block { max-width: 60ch; margin-bottom: 36px; }
.kopf-block-mitte { max-width: 62ch; margin: 0 auto 36px; text-align: center; }
.kopf-block-mitte .kicker { text-align: center; }

/* ============================================================
   3. Bausteine
   ============================================================ */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: inherit; font-size: 1rem; font-weight: 650;
  padding: 15px var(--s6);
  border-radius: var(--r);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--takt), color var(--takt), border-color var(--takt),
              transform var(--takt), box-shadow var(--takt);
  min-height: 54px;
  line-height: 1.2;
  text-align: center;
}
.knopf svg { width: 19px; height: 19px; flex: none; }

.knopf-voll {
  background: var(--wasser-tief); color: #FFFFFF;   /* 7,0:1 */
  box-shadow: var(--schatten);
}
.knopf-voll:hover { background: var(--tinte); color: #fff; transform: translateY(-1px); box-shadow: var(--schatten-hoch); }

.knopf-rand {
  background: var(--papier); color: var(--tinte); border-color: var(--linie-stark);
}
.knopf-rand:hover { border-color: var(--wasser); color: var(--wasser-tief); background: var(--wasser-hauch); }

.bahn-tief .knopf-rand { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.4); }
.bahn-tief .knopf-rand:hover { background: rgba(255,255,255,.1); color: #FFFFFF; border-color: #FFFFFF; }

/* Warmer Knopf: fuer den WhatsApp-Weg, damit er sich vom Hauptknopf
   unterscheidet, ohne mit ihm zu konkurrieren. */
.knopf-warm {
  background: var(--licht-blass); color: var(--licht-text);   /* 5,9:1 */
  border-color: #EBD5B4;
}
.knopf-warm:hover { background: #F6E6CE; color: #6F3E0C; border-color: #DFC299; }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  padding: var(--s6);
  transition: border-color var(--takt), box-shadow var(--takt), transform var(--takt);
}
.karte-hebt:hover { border-color: var(--linie-stark); box-shadow: var(--schatten-hoch); transform: translateY(-2px); }

.raster { display: grid; gap: var(--s5); }
.raster-3 { grid-template-columns: repeat(3, 1fr); }
.raster-2 { grid-template-columns: repeat(2, 1fr); }
.raster-4 { grid-template-columns: repeat(4, 1fr); }

/* Symbolflaeche */
.symbol {
  width: 54px; height: 54px; border-radius: 15px;
  display: grid; place-items: center;
  background: var(--wasser-blass);
  color: var(--wasser-tief);
  margin-bottom: var(--s5);
  flex: none;
}
.symbol svg { width: 28px; height: 28px; }
.symbol-warm { background: var(--licht-blass); color: var(--licht-text); }

/* ============================================================
   4. Abschnitte der Startseite
   ============================================================ */

/* ---------- Kopfzeile ---------- */
.kopfzeile {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251,252,252,.9);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--takt), box-shadow var(--takt);
}
.kopfzeile.geschoben { border-bottom-color: var(--linie); box-shadow: 0 1px 12px rgba(11,43,51,.05); }
.kopfzeile-innen {
  max-width: var(--breit); margin: 0 auto;
  padding: var(--s3) var(--rand);
  display: flex; align-items: center; gap: var(--s5);
}

.marke { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--tinte); flex: none; }
.marke-zeichen { width: 30px; height: 30px; color: var(--wasser-tief); flex: none; }
.marke-text { display: flex; flex-direction: column; line-height: 1.08; }
.marke-text strong {
  font-family: 'Serife', 'Serife Ersatz', Georgia, serif;
  font-size: 1.24rem; font-weight: 600; letter-spacing: -.02em;
}
.marke-text span { font-size: 11.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--leise); font-weight: 600; }
.marke-hell { color: #FFFFFF; }
.marke-hell .marke-zeichen { color: #7FB6C4; }
.marke-hell .marke-text span { color: #9FBCC3; }

.hauptmenue { margin-left: auto; display: flex; align-items: center; gap: var(--s6); }
.hauptmenue a { color: var(--text); text-decoration: none; font-weight: 550; font-size: 16px; }
.hauptmenue a:hover { color: var(--wasser-tief); text-decoration: underline; text-underline-offset: 5px; }
/* Der Anrufknopf ist ein Knopf, kein Menuepunkt. Ohne diese Zeile
   gewinnt die Regel darueber nach Spezifitaet und der Knopf haette
   dunklen Text auf dunklem Grund, gemessen 1,74:1. */
.hauptmenue a.knopf-voll { color: #FFFFFF; }
.hauptmenue a.knopf-voll:hover { color: #FFFFFF; text-decoration: none; }
.kopf-anruf { font-size: 15px; padding: 11px var(--s5); min-height: 46px; }
.kopf-anruf:hover { text-decoration: none; color: #fff; }

.menue-knopf {
  display: none; margin-left: auto;
  width: 48px; height: 48px; border-radius: var(--r);
  background: var(--papier); border: 1px solid var(--linie-stark);
  color: var(--tinte); cursor: pointer;
}
.menue-knopf svg { width: 24px; height: 24px; margin: 0 auto; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(228,241,244,.85) 0%, rgba(251,252,252,0) 62%),
    linear-gradient(180deg, var(--wasser-hauch) 0%, var(--grund) 78%);
  padding: var(--hero-oben) 0 var(--bahn-luft-eng);
  overflow: hidden;
}
.hero-innen {
  display: grid;
  grid-template-columns: minmax(0, 545px) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 76px);
  /* Nicht zentriert: das Bild ist hoeher als der Text, zentriert
     entstuende ueber der Ueberschrift eine leere Flaeche unter der
     Kopfzeile. Gemessen waren das 83 px statt der erlaubten 48. */
  align-items: start;
  padding-left: max(var(--rand), calc((100vw - var(--breit)) / 2));
}
.hero-text { max-width: 545px; }
/* Enger als sonst: der Abstand Kopfzeile zu H1 soll unter 48 px
   bleiben, und dazwischen steht noch der Kicker. */
.hero .kicker { margin-bottom: 6px; }
.hero h1 { margin-bottom: var(--s5); }
.hero-lead { margin-bottom: var(--s6); max-width: 34ch; }
.hero-knoepfe { margin-bottom: var(--s6); }

.hero-punkte {
  list-style: none; margin: 0; padding: var(--s5) 0 0;
  border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
}
.hero-punkte li {
  font-size: var(--t-klein); color: var(--leise); font-weight: 550;
  display: flex; align-items: center; gap: var(--s2);
}
.hero-punkte li::before {
  content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%;
  background: var(--licht-blass);
  box-shadow: inset 0 0 0 1.5px var(--licht);
}

.hero-bild { position: relative; }
.hero-bild img {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  max-height: 590px;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: var(--r-gross) 0 0 var(--r-gross);
  box-shadow: -8px 0 40px rgba(11,43,51,.10);
}

/* ---------- Drei Sorgen ---------- */
.sorgen .karte { padding: var(--s6) var(--s6) var(--s7); }
.sorgen h3 { margin-bottom: var(--s3); }
.sorgen p { color: var(--leise); font-size: 16.5px; margin: 0; }

/* ---------- Leistungen ---------- */
.leistung-gross {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: var(--s7);
  align-items: center;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  overflow: hidden;
  margin-bottom: var(--s5);
}
.leistung-gross-bild { align-self: stretch; }
.leistung-gross-bild img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.leistung-gross-text { padding: var(--s7) var(--s7) var(--s7) 0; }
.leistung-gross-text h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); margin-bottom: var(--s4); }
.leistung-gross-text p { color: var(--leise); font-size: 16.5px; max-width: var(--lesebreite); }

.haken { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s2); }
.haken li { position: relative; padding-left: 30px; font-size: 16px; color: var(--text); font-weight: 500; }
.haken li::before {
  content: ""; position: absolute; left: 0; top: .4em;
  width: 16px; height: 8px;
  border-left: 2.4px solid var(--licht); border-bottom: 2.4px solid var(--licht);
  transform: rotate(-45deg);
}

.karte-bild { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.karte-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.karte-inhalt { padding: var(--s5); flex: 1; }
.karte-inhalt h3 { font-size: 1.18rem; margin-bottom: var(--s2); }
.karte-inhalt p { color: var(--leise); font-size: 15.5px; line-height: 1.55; margin: 0; }

/* ---------- Ablauf ---------- */
.schritte {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5);
}
.schritte li { position: relative; padding-top: 74px; }
.schritte li::after {
  content: ""; position: absolute; left: 60px; top: 27px; right: calc(var(--s5) * -1);
  height: 1px; background: #EBD9BE;
}
.schritte li:last-child::after { display: none; }
.schritt-zahl {
  position: absolute; top: 0; left: 0; z-index: 1;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--papier); border: 1.5px solid #E3CBA6;
  color: var(--licht-text);
  font-family: 'Serife', 'Serife Ersatz', Georgia, serif;
  font-size: 1.5rem; font-weight: 600;
}
.schritte h3 { margin: 0 0 var(--s2); font-size: 1.15rem; }
.schritte p { color: var(--leise); font-size: 15.5px; line-height: 1.55; margin: 0; }

/* ---------- Preise ---------- */
.preis-feld {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  overflow: hidden;
}
.preis-karten { gap: 0; }
.preis-karte { padding: var(--s7); }
.preis-karte + .preis-karte { border-left: 1px solid var(--linie); }
.preis-fall {
  font-size: var(--t-mini); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--leise); margin-bottom: var(--s3);
}
.preis-karte h3 { font-size: 1.5rem; margin-bottom: var(--s2); }
.preis-menge { color: var(--leise); font-size: 16px; margin-bottom: var(--s5); }
.preis-zahl {
  font-family: 'Serife', 'Serife Ersatz', Georgia, serif;
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.7rem);
  font-weight: 600; color: var(--wasser-tief); letter-spacing: -.02em;
  line-height: 1.1; margin: 0;
}

.preis-hinweis { background: var(--licht-hauch); border-top: 1px solid #F0E2CC; padding: var(--s6) var(--s7); }
.preis-marke {
  display: inline-block; margin-bottom: var(--s3);
  background: var(--licht-blass); color: var(--licht-text);
  border: 1px solid #EBD5B4; border-radius: 999px;
  padding: 5px 14px; font-size: var(--t-mini); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.preis-hinweis p { color: var(--text); font-size: 16.5px; max-width: var(--lesebreite); }
.preis-klein { color: var(--leise); font-size: var(--t-klein); margin-top: var(--s4); }

/* ---------- Warum eine Person ---------- */
.person-innen {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  gap: clamp(32px, 5vw, 72px); align-items: stretch;
}
.person-text p { color: #C6DADF; font-size: 16.5px; max-width: var(--lesebreite); }
.person-text .lead { color: #DCE8EB; }
/* Das Bild fuellt die Hoehe der Textspalte. Zentriert blieben unten
   66 px tote Flaeche stehen, gemessen mit _pruefung/luecken.py. */
.person-bild { display: flex; }
.person-bild img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  border-radius: var(--r-gross); box-shadow: 0 18px 44px rgba(0,0,0,.3);
}

/* Ersetzt die frueher hier stehende Stichpunktliste. Die las sich wie
   ein Datenblatt. Als Absatz mit warmer Kante bleibt der Block visuell
   ein eigener Halt, spricht aber in ganzen Saetzen. */
.gegenrede {
  margin: var(--s6) 0 0;
  padding: var(--s4) 0 var(--s4) var(--s5);
  border-left: 3px solid #F0C58A;
  font-size: 1.06rem;
  line-height: 1.6;
  color: #DCE8EB;
  max-width: var(--lesebreite);
}
.person-text .gegenrede { color: #DCE8EB; }

/* ---------- Einzugsgebiet ---------- */
.gebiet-innen {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: clamp(32px, 5vw, 72px); align-items: stretch;
}
/* Das Bild fuellt die Hoehe der Ortsliste daneben aus. Sonst steht
   rechts unter dem Bild ein leerer Streifen. */
.gebiet-bild { display: flex; }
.gebiet-bild img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
  border-radius: var(--r-gross); box-shadow: var(--schatten);
}
.orte { margin-top: var(--s6); }
.orte-titel {
  font-size: var(--t-mini); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--leise); margin-bottom: var(--s3);
}
.orte-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.orte-liste li {
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: 999px; padding: 5px 14px; font-size: var(--t-klein); color: var(--text);
}
.orte-nah li { background: var(--wasser-blass); border-color: #C5DFE6; color: var(--tinte); font-weight: 600; }

/* ---------- Ueber mich ---------- */
.ueber { text-align: center; }
.ueber .kicker { text-align: center; }
.ueber-gross { font-size: var(--t-lead); color: var(--text); line-height: 1.55; margin-bottom: var(--s4); }
.ueber p:last-child { color: var(--leise); font-size: 16.5px; }

/* ---------- Haeufige Fragen ---------- */
.fragen { border-top: 1px solid var(--linie-stark); }
.fragen details { border-bottom: 1px solid var(--linie-stark); }
.fragen summary {
  list-style: none; cursor: pointer;
  padding: var(--s5) 44px var(--s5) 0;
  font-family: 'Serife', 'Serife Ersatz', Georgia, serif;
  font-size: 1.12rem; font-weight: 600; color: var(--tinte);
  position: relative; line-height: 1.35;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; position: absolute; right: 10px; top: 50%;
  width: 12px; height: 12px; margin-top: -8px;
  border-right: 2.2px solid var(--wasser); border-bottom: 2.2px solid var(--wasser);
  transform: rotate(45deg); transition: transform var(--takt);
}
.fragen details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.fragen summary:hover { color: var(--wasser-tief); }
.frage-inhalt { padding: 0 var(--s6) var(--s5) 0; }
.frage-inhalt p { color: var(--leise); font-size: 16.5px; margin: 0; }

/* ---------- Kontakt ---------- */
.kontakt-innen {
  display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.kontakt-wege { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; gap: var(--s4); }
.kontakt-wege li { display: flex; gap: var(--s4); align-items: center; }
.kontakt-symbol {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  background: var(--wasser-blass); color: var(--wasser-tief);
  display: grid; place-items: center;
}
.kontakt-symbol svg { width: 22px; height: 22px; }
.kontakt-wege strong {
  display: block; font-size: var(--t-mini); letter-spacing: .1em;
  text-transform: uppercase; color: var(--leise); font-weight: 700;
}
.kontakt-wege a { font-size: 1.06rem; font-weight: 600; color: var(--tinte); text-decoration: none; }
.kontakt-wege a:hover { color: var(--wasser-tief); text-decoration: underline; text-underline-offset: 4px; }

.formular {
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--r-gross); padding: var(--s7);
  box-shadow: var(--schatten);
}
.formular-titel {
  font-family: 'Serife', 'Serife Ersatz', Georgia, serif;
  font-size: 1.3rem; font-weight: 600; color: var(--tinte); margin-bottom: var(--s5);
}
.feld { margin-bottom: var(--s4); }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.feld label, .feld-haken label { display: block; font-size: var(--t-klein); font-weight: 650; color: var(--text); margin-bottom: 6px; }
.feld input, .feld select, .feld textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--text);
  background: var(--grund); border: 1.5px solid var(--linie-stark);
  border-radius: var(--r); padding: 12px 14px; min-height: 48px;
  transition: border-color var(--takt), box-shadow var(--takt);
}
.feld textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--wasser); box-shadow: 0 0 0 3px rgba(14,110,134,.18);
}
.feld input[type="file"] { padding: 9px 12px; background: var(--wasser-hauch); }
.feld-hilfe { font-size: 14px; color: var(--leise); margin: 6px 0 0; }

.feld-haken { display: flex; gap: var(--s3); align-items: flex-start; margin: var(--s5) 0; }
.feld-haken input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--wasser-tief); }
.feld-haken label { font-size: 14.5px; font-weight: 400; color: var(--leise); line-height: 1.5; margin: 0; }

.formular-knopf { width: 100%; }
.formular-meldung {
  margin: var(--s4) 0 0; padding: var(--s4) var(--s5);
  background: var(--wasser-blass); border: 1px solid #A9CEd8;
  border-radius: var(--r); color: var(--tinte); font-size: 16px; font-weight: 550;
}
.formular-fuss { font-size: 14px; color: var(--leise); margin: var(--s4) 0 0; text-align: center; }

/* ---------- Fusszeile ---------- */
.fusszeile { background: var(--tinte); color: #B4CBD1; padding: var(--s8) var(--rand) var(--s6); }
.fusszeile-innen {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--s7); padding-bottom: var(--s7);
  border-bottom: 1px solid rgba(255,255,255,.13);
  max-width: var(--breit); margin: 0 auto;
}
.fusszeile p { font-size: var(--t-klein); line-height: 1.75; }
.fuss-satz { margin-top: var(--s4); max-width: 34ch; color: #9FBCC3; }
.fuss-titel {
  font-size: var(--t-mini); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #FFFFFF; margin-bottom: var(--s3);
}
.fusszeile a { color: #DCE8EB; text-decoration: none; }
.fusszeile a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
.fuss-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--t-klein); }
.fuss-unten {
  padding-top: var(--s5); max-width: var(--breit); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); justify-content: space-between;
}
.fuss-unten p { margin: 0; font-size: 14px; color: #9FBCC3; }
.fuss-vorschau { color: #F0C58A; }

/* ---------- Feste Anrufleiste, nur Handy ---------- */
.anrufleiste { display: none; }

/* ============================================================
   5. Rechtsseiten
   ============================================================ */
.rechtsseite { padding: var(--s8) var(--rand) var(--s9); }
.rechtsseite-innen { max-width: 70ch; margin: 0 auto; }
.brotkrume { font-size: var(--t-klein); color: var(--leise); margin-bottom: var(--s6); }
.brotkrume a { color: var(--text); }
.rechtsseite h1 { font-size: clamp(1.9rem, 1.5rem + 2vw, 2.8rem); margin-bottom: var(--s3); }
.rechtsseite .stand { color: var(--leise); font-size: var(--t-klein); margin-bottom: var(--s7); }
.rechtsseite h2 {
  font-size: 1.42rem; margin: var(--s7) 0 var(--s4);
  padding-top: var(--s6); border-top: 1px solid var(--linie);
}
.rechtsseite h2:first-of-type { border-top: none; padding-top: 0; margin-top: var(--s6); }
.rechtsseite h3 { font-size: 1.12rem; margin: var(--s5) 0 var(--s3); }
.rechtsseite p, .rechtsseite li { font-size: 16.5px; color: var(--text); line-height: 1.72; }
.rechtsseite ul { padding-left: 20px; }
.rechtsseite li { margin-bottom: var(--s2); }
.rechtsseite .anschrift {
  background: var(--wasser-hauch); border: 1px solid var(--linie);
  border-radius: var(--r); padding: var(--s5); margin-bottom: var(--s4);
}
.rechtsseite .anschrift p { margin: 0; }
.platzhalter {
  background: var(--licht-blass); border: 1px solid #EBD5B4;
  border-left: 4px solid var(--licht);
  border-radius: var(--r-klein); padding: var(--s4) var(--s5); margin: var(--s4) 0;
}
.platzhalter p { margin: 0; font-size: 15.5px; color: var(--licht-text); }
.platzhalter strong { color: #6F3E0C; }

/* ============================================================
   6. Kleine Bildschirme
   ------------------------------------------------------------
   Mobil zuerst gedacht, hier nur die Abweichungen nach unten.
   Diese Zielgruppe sucht sowohl am Handy als auch am Rechner,
   die Handyfassung ist deshalb keine Sparfassung.
   ============================================================ */

@media (max-width: 1100px) {
  .raster-4 { grid-template-columns: repeat(2, 1fr); }
  .fusszeile-innen { grid-template-columns: 1.4fr 1fr 1fr; }
  .fuss-marke { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  :root { --bahn-luft-mobil: 32px; }
  .bahn, .bahn-eng { padding: var(--bahn-luft-mobil) var(--rand); }

  /* Hero stapelt: Ueberschrift, Versprechen, Knoepfe, Belege, Bild */
  .hero { padding: 16px 0 var(--bahn-luft-mobil); }
  .hero-innen { grid-template-columns: 1fr; gap: var(--s6); padding-left: var(--rand); }
  /* Nur das Bild laeuft ueber die rechte Kante. Der Text bekommt
     seinen Rand zurueck, sonst klebt er am Bildschirmrand. */
  .hero-text { max-width: 100%; padding-right: var(--rand); }
  .hero-lead { max-width: 46ch; }
  .hero-bild img { aspect-ratio: 4 / 3; max-height: 420px; object-position: 45% 45%; }

  /* Grosse Leistungskarte stapelt */
  .leistung-gross { grid-template-columns: 1fr; gap: 0; }
  .leistung-gross-bild img { min-height: 0; aspect-ratio: 16 / 9; }
  .leistung-gross-text { padding: var(--s6); }

  .person-innen, .gebiet-innen, .kontakt-innen { grid-template-columns: 1fr; }
  .person-bild, .gebiet-bild { order: -1; }
  .person-bild img, .gebiet-bild img { max-height: 300px; height: auto; object-fit: cover; }

  .schritte { grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s5); }
  .schritte li:nth-child(2)::after { display: none; }

  .preis-karte + .preis-karte { border-left: none; border-top: 1px solid var(--linie); }
  .preis-karten { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* Menue klappt auf */
  .menue-knopf { display: grid; place-items: center; }
  .hauptmenue {
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 14px 30px rgba(11,43,51,.10);
    padding: var(--s3) var(--s5) var(--s5);
    display: none;
  }
  .hauptmenue.offen { display: flex; }
  .hauptmenue a { padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--linie); }
  .hauptmenue a:last-child { border-bottom: none; }
  .kopf-anruf { margin-top: var(--s4); justify-content: center; font-size: 16px; }

  /* Feste Anrufleiste unten */
  .anrufleiste {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(251,252,252,.96);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--linie-stark);
    padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
  }
  .anrufleiste-knopf {
    display: flex; align-items: center; justify-content: center; gap: var(--s2);
    min-height: 52px; border-radius: var(--r);
    font-size: 16px; font-weight: 650; text-decoration: none;
  }
  .anrufleiste-knopf svg { width: 19px; height: 19px; }
  .anrufleiste-haupt { background: var(--wasser-tief); color: #FFFFFF; }
  .anrufleiste-zweit {
    background: var(--licht-blass); color: var(--licht-text);
    box-shadow: inset 0 0 0 1.5px #EBD5B4;
  }
  /* Platz, damit die Leiste die Fusszeile nicht verdeckt */
  body { padding-bottom: 76px; }
}

@media (max-width: 700px) {
  :root { --s9: 64px; --s8: 48px; --bahn-luft-mobil: 32px; }
  .raster-3, .raster-4 { grid-template-columns: 1fr; }
  .fusszeile-innen { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .kopf-block { margin-bottom: var(--s6); }
  .formular { padding: var(--s5); }
  .schritte { grid-template-columns: 1fr; gap: var(--s5); }
  .schritte li { padding-top: 0; padding-left: 70px; min-height: 54px; }
  .schritte li::after { display: none; }
  .schritte h3 { margin-top: 4px; }
  .preis-karte, .preis-hinweis { padding: var(--s5); }
  /* Die Richtwert-Marke bricht auf schmalen Bildschirmen in zwei Zeilen.
     Als voll gerundete Pille wirkt sie dann aufgeblasen, als Schild nicht. */
  .preis-marke { border-radius: 10px; }
  .frage-inhalt { padding-right: 0; }
  .fragen summary { font-size: 1.06rem; padding-right: 36px; }
}

@media (max-width: 520px) {
  .feld-paar { grid-template-columns: 1fr; gap: 0; }
  .knopf { width: 100%; }
  .knopf-reihe { gap: var(--s2); }
  .hero-knoepfe .knopf { width: 100%; }
  .marke-text strong { font-size: 1.12rem; }
  .marke-text span { font-size: 10.5px; letter-spacing: .14em; }
  .fusszeile-innen { grid-template-columns: 1fr; }
  .hero-punkte { gap: var(--s2) var(--s4); }
}

/* Druckfassung: Kopfzeile, Leiste und Formular fallen weg */
@media print {
  .kopfzeile, .anrufleiste, .formular, .zum-inhalt { display: none !important; }
  body { font-size: 11pt; }
  .bahn, .bahn-eng { padding: 12pt 0; }
  a { color: #000; text-decoration: underline; }
}

@media (max-width: 700px) {
  /* Auf schmalen Bildschirmen wird der Kicker zweizeilig. Kleiner
     gesetzt und enger gesperrt passt er meist doch in eine Zeile. */
  /* Kleiner gesetzt, damit der Kicker in eine Zeile passt. Zweizeilig
     schoebe er die Ueberschrift unter die 48-px-Grenze zur Kopfzeile. */
  .kicker { font-size: 11.5px; letter-spacing: .08em; line-height: 1.4; }
  .kicker::before { margin: -2px 10px 0 0; width: 20px; }
}

/* Kleiner Merkzettel in der Kontaktspalte. Fuellt nicht nur die
   Flaeche, sondern nimmt die Frage vorweg, was ich ueberhaupt
   brauche, um einen Preis nennen zu koennen. */
.merkzettel {
  margin-top: var(--s7);
  background: var(--wasser-hauch);
  border: 1px solid #D3E6EB;
  border-radius: var(--r-gross);
  padding: var(--s5) var(--s6) var(--s6);
}
.merkzettel h3 { font-size: 1.12rem; margin-bottom: var(--s3); }
.merkzettel ul { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s2); }
.merkzettel li { position: relative; padding-left: 26px; font-size: 16px; }
.merkzettel li::before {
  content: ""; position: absolute; left: 0; top: .4em;
  width: 14px; height: 7px;
  border-left: 2.2px solid var(--wasser); border-bottom: 2.2px solid var(--wasser);
  transform: rotate(-45deg);
}
.merkzettel p { font-size: var(--t-klein); color: var(--leise); margin: 0; }

/* Rechtsseiten haben kein Klappmenue. Der Anrufknopf steht dort
   direkt in der Kopfzeile und darf nicht in die Regeln des
   Hauptmenues fallen, sonst waere er auf dem Handy unsichtbar. */
.kopf-rechts { margin-left: auto; }

/* ============================================================
   7. Nachtrag: Vertrauen, Person, Steuer
   ------------------------------------------------------------
   Ergaenzt nach der Messung, dass die Seite leer und unpersoenlich
   wirkte: kein Wort zur Absicherung, kein Gesicht, das staerkste
   Preisargument versteckt in einer Rechtsbox.
   ============================================================ */

/* ---------- Vertrauensbalken ----------
   Vier Fakten, kein Fliesstext. Bewusst schmal und ruhig gesetzt,
   damit er wie ein Siegelstreifen wirkt und nicht wie Werbung. */
.siegel {
  background: var(--grund-kuehl);
  border-top: 1px solid var(--linie);
  padding: var(--s5) var(--rand);
}
.siegel-innen {
  max-width: var(--breit); margin: 0 auto;
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.siegel-innen li {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: var(--s3) var(--s4);
  font-size: var(--t-klein); font-weight: 600; color: var(--tinte);
  text-align: left; line-height: 1.35;
}
.siegel-innen li + li { border-left: 1px solid var(--linie-stark); }
.siegel-innen svg { width: 20px; height: 20px; flex: none; color: var(--wasser-tief); }

/* ---------- Ueber mich, zweispaltig ----------
   Vorher stand hier zentrierter Text ohne Bild. Das war die
   unpersoenlichste Stelle der Seite, obwohl sie die persoenlichste
   sein sollte. */
.ueber-innen {
  display: grid;
  grid-template-columns: minmax(0, .58fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 68px);
  align-items: center;
}
.ueber-bild img {
  width: 100%; height: auto;
  aspect-ratio: 5 / 6;
  max-height: 480px;
  object-fit: cover;
  object-position: 50% 22%;
  /* Weiche Ecken statt harter Passfoto-Optik */
  border-radius: 26px;
  box-shadow: var(--schatten-hoch);
}
.ueber-text { max-width: var(--lesebreite); }
.ueber-text .ueber-gross { font-size: var(--t-lead); color: var(--text); line-height: 1.55; margin-bottom: var(--s4); }
.ueber-text > p:not(.ueber-gross):not(.ueber-hinweis) { color: var(--leise); font-size: 16.5px; }

/* Der Gegensatz zu den Bilddatenbank-Fotos auf der uebrigen Seite */
.ueber-hinweis {
  margin-top: var(--s5);
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-klein); font-weight: 650; color: var(--licht-text);
  background: var(--licht-blass); border: 1px solid #EBD5B4;
  border-radius: 999px; padding: 7px 16px;
}
.ueber-hinweis::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--licht); flex: none;
}

/* ---------- Steuerargument im Preisabschnitt ----------
   Stand vorher als letzter Satz in der Rechtsbox, also dort, wo
   niemand ein Verkaufsargument sucht. Jetzt eigener Block direkt
   unter den Zahlen. Die Rechtsbox darunter bleibt unveraendert. */
.steuer {
  padding: var(--s6) var(--s7);
  border-top: 1px solid var(--linie);
  background: var(--papier);
}
.steuer h3 {
  font-size: 1.28rem;
  margin-bottom: var(--s3);
  display: flex; align-items: baseline; gap: var(--s3);
}
.steuer h3::before {
  content: "§ 19";
  flex: none;
  font-family: 'Grotesk', 'Grotesk Ersatz', system-ui, sans-serif;
  font-size: var(--t-mini); font-weight: 700; letter-spacing: .04em;
  color: var(--wasser-tief); background: var(--wasser-blass);
  border-radius: 6px; padding: 4px 9px;
  transform: translateY(-2px);
}
.steuer p { color: var(--text); font-size: 16.5px; max-width: var(--lesebreite); margin: 0; }

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 960px) {
  .ueber-innen { grid-template-columns: 1fr; gap: var(--s6); }
  .ueber-bild { order: -1; max-width: 340px; }
  .ueber-bild img { max-height: 400px; }
  .steuer { padding: var(--s5); }
}

@media (max-width: 860px) {
  .siegel-innen { grid-template-columns: repeat(2, 1fr); }
  /* Bei zwei Spalten trennt die Linie nur noch senkrecht in der
     Mitte, die waagerechte Trennung uebernimmt der Zeilenabstand. */
  .siegel-innen li + li { border-left: none; }
  .siegel-innen li:nth-child(even) { border-left: 1px solid var(--linie-stark); }
  .siegel-innen li:nth-child(n+3) { border-top: 1px solid var(--linie-stark); }
  .siegel-innen li { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .siegel-innen { grid-template-columns: 1fr; }
  .siegel-innen li:nth-child(even) { border-left: none; }
  .siegel-innen li + li { border-top: 1px solid var(--linie-stark); }
  .ueber-bild { max-width: 100%; }
}