/* ============================================================
   VitaMel's Fensterreinigung - Stylesheet
   ------------------------------------------------------------
   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 */
  /* Gedaempfter Text. Vorher #4E6B73 mit 5,3:1 auf den Bahnen, fuer
     eine Zielgruppe von 45 bis 70 zu schwach, zumal rund 70 Prozent
     aller Saetze in dieser Farbe stehen. Gleicher Farbeindruck,
     dunkler abgemischt. */
  --leise:         #3A555C;   /*  7,4: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 */
  /* Warmer Text fuer Kicker, Marken und Pillen. Vorher #8A4E10 mit
     6,4:1, nach dem Audit auf ueber 7:1 gezogen. */
  --licht-text:    #6F3E0C;   /*  8,6:1 auf --grund, 7,9:1 auf --licht-blass */
  --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; }

/* Textlinks in --wasser-tief statt --wasser: 7,6:1 statt 5,7:1 auf
   dem Seitengrund. Der hellere Ton bleibt fuer Symbole und Linien. */
a { color: var(--wasser-tief); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tinte); }

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: #5A320A; 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 ----------
   Seit dem elften Umbau ohne Foto. Damit faellt die Bildspalte weg,
   der Hero wird einspaltig und mittig und traegt allein ueber
   Typografie.

   Der Hintergrund ist eine ruhige Vollflaeche. Drei Fassungen wurden
   gebaut, fotografiert und an den Bildpunkten gemessen, auf denen die
   Schrift tatsaechlich liegt, siehe _pruefung/hero_kontrast.py:

     A1  Lichtreflex, weiche Kante    7,78:1 Rechner / 6,86:1 Handy
     A2  Lichtreflex, harte Kante     7,06:1 Rechner / 6,39:1 Handy
     B   Vollflaeche, ohne Effekt     7,50:1 Rechner / 7,50:1 Handy

   B ist die einzige Fassung, die die Hausmarke von 7:1 auf beiden
   Geraeten haelt. Auf dem Rechner ist A1 unter der Schrift sogar
   besser als B, aber nur, weil der helle Streifen dort hinter der
   Textspalte liegt: innerhalb eines Absatzes schwankt der Grund bei
   A1 auf dem Rechner um 1,01:1, der sichtbare Teil des Verlaufs
   liegt vollstaendig in den leeren Seitenraendern. Auf dem Handy ist
   die Spalte so breit wie der Bildschirm, die kuehle Flanke wandert
   unter die Schrift, und in einer einzigen Zeile schwankt der Grund
   um 1,16:1.

   Nachbessern geht nicht: der helle Pol liegt bereits auf reinem
   Weiss, jede sichtbare Spanne muss also aus der dunklen Seite
   kommen, und auf dem Handy gibt es keinen schriftfreien Rand mehr,
   in den sie ausweichen koennte. Hellt man die Flanke auf, bis 7:1
   wieder steht, faellt die Spanne auf etwa 1,04:1. Das ist B, nur mit
   zusaetzlichem Stylesheet. */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--hero-oben) 0 var(--bahn-luft-eng);
  background: var(--wasser-hauch);
  /* Der folgende Abschnitt steht auf --grund und ist nur eine Spur
     heller. Ohne diese Linie franst der Kopfbereich nach unten aus. */
  border-bottom: 1px solid var(--linie);
}

/* Die Spalte ist 720 px breit, wie im Auftrag vorgegeben. Bei dieser
   Breite laeuft die H1 auf zwei bis drei Zeilen. Breiter wuerde sie
   einzeilig und riesig, schmaler zerfiele sie in vier kurze Stummel. */
.hero-innen {
  position: relative; z-index: 1;
  max-width: calc(720px + 2 * var(--rand));
  margin: 0 auto;
  padding: var(--s5) var(--rand) 0;
  text-align: center;
}
.hero-text { max-width: 100%; }
.hero .kicker { margin-bottom: var(--s3); }

/* Zweimal zurueckgenommen. Bei der freien Skala von 3,85 rem stand
   die Ueberschrift in der 720 px breiten Spalte auf vier Zeilen. Bei
   3,35 rem, also 53,6 px, war sie zweizeilig, aber ohne Bild daneben
   das einzige grosse Element und dadurch erdrueckend. Jetzt 2,875 rem,
   also 46 px, und weiterhin zweizeilig. */
.hero h1 {
  font-size: clamp(2.05rem, 1.5rem + 1.9vw, 2.875rem);
  margin-bottom: var(--s4);
}
.hero-lead { margin: 0 auto var(--s5); max-width: 56ch; text-wrap: balance; }
.hero-knoepfe { justify-content: center; margin-bottom: var(--s4); }

/* Vier Merkmale, zwei feste Spalten. Als umbrechender Flexkasten
   standen sie je nach Fensterbreite mal zu dritt, mal zu viert in
   einer Reihe. Zwei Spalten sind bei jeder Breite zwei volle Reihen.

   Die Spalten sind gleich breit und jeder Eintrag steht mittig in
   seiner Spalte. Vorher richteten sich die Spalten nach ihrem
   laengsten Eintrag, 229 px gegen 270 px, und jeder Eintrag stand
   linksbuendig darin. Der Kasten sass damit auf der Mittelachse, der
   sichtbare Text aber 159 px daneben. Gemessen mit
   _pruefung/hero_achse.py.

   Die Trennlinie darueber ist die Oberkante dieses Kastens. Mit
   560 px statt der vollen Textbreite von 720 px bindet sie die vier
   Merkmale zusammen, statt den ganzen Hero zu unterteilen. */
.hero-punkte {
  list-style: none;
  width: 100%; max-width: 560px;
  margin: var(--s5) auto 0;
  padding: var(--s5) 0 0;
  border-top: 1px solid var(--linie);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s3) var(--s4);
}
/* Unter 620 px untereinander. Zweispaltig blieben je Spalte 150 px,
   und "Anfahrt im Festpreis enthalten" stand dort auf drei Zeilen
   neben einem Nachbarn mit zwei.

   Der Block schrumpft dabei auf seinen Inhalt und steht als Ganzes
   auf der Achse. Ueber die volle Breite gezogen stuende die
   Trennlinie darueber quer durch den Bildschirm. */
@media (max-width: 620px) {
  .hero-punkte {
    grid-template-columns: 1fr; gap: var(--s3);
    width: fit-content; max-width: 100%;
  }
}
/* Die Eintraege behalten eine gemeinsame linke Kante je Spalte. Die
   Alternative, jeden Eintrag fuer sich in seiner Zelle zu zentrieren,
   ist gebaut und fotografiert worden und war schlechter, in beiden
   Hinsichten: die vier Punkte standen an vier verschiedenen Stellen
   statt in zwei senkrechten Reihen, und der sichtbare Block lag
   10,2 px neben der Mittelachse statt 0,9 px. Der Grund ist, dass die
   Zellen gleich breit sind, ihr laengster Eintrag aber nicht:
   229 px links gegen 270 px rechts. Fotos in
   _pruefung/tafel-w12-merkmale-*.jpg */
.hero-punkte li {
  font-size: var(--t-klein); color: var(--leise); font-weight: 550;
  display: flex; align-items: center; justify-content: flex-start;
  gap: var(--s2); text-align: left;
}
.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);
}

/* ---------- Leistungen ---------- */
/* Die grosse Karte hat seit dem elften Umbau kein Bild mehr. Ohne
   Bild waere sie eine einzige Spalte Fliesstext ueber 1360 px, also
   Zeilen von 160 Zeichen. Deshalb zwei Spalten mit verschiedenen
   Aufgaben: links steht, was ueberflogen wird, rechts, was gelesen
   wird. Beide enden dadurch etwa gleich tief. */
.leistung-gross {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: var(--s5) var(--s7);
  align-items: start;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  padding: var(--s6) var(--s7);
  margin-bottom: var(--s5);
}
.leistung-gross-marke { border-left: 3px solid var(--wasser-blass); padding-left: var(--s5); }
.leistung-gross-text { min-width: 0; }
.leistung-gross-text h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); margin-bottom: var(--s4); }
.leistung-gross-marke h3 { font-size: clamp(1.32rem, 1.14rem + .7vw, 1.68rem); margin-bottom: var(--s5); }
/* 72ch statt der freien Spaltenbreite. Ohne Begrenzung lief die
   laengste Zeile auf 96 Zeichen. Enger ginge auch, dann braeuchte
   der erste Absatz aber eine vierte Zeile und die Karte waeche
   ueber 400 px. */
.leistung-gross-text p { color: var(--leise); font-size: 16.5px; max-width: 72ch; }
.leistung-gross-marke .haken { margin-top: 0; }

/* Die zweite Fassung, Kopfzeile ueber beiden Spalten und Haekchen
   rechts, ist verworfen: die Textspalte wurde dadurch hoeher als die
   Haekchenspalte, rechts unten blieb ein leeres Feld, und die Karte
   stand bei 709 px statt 392 px. Fotos in _screenshots/leistung-*. */

.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); }
/* Vier Karten in zwei Reihen. Die Trennlinien folgen dem Raster:
   rechte Karten bekommen eine linke Linie, untere eine obere. */
.preis-karte:nth-child(2n) { border-left: 1px solid var(--linie); }
.preis-karte:nth-child(n+3) { border-top: 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 ----------
   Ohne Bild seit dem elften Umbau, dadurch eine Spalte ueber die
   volle Breite. Die Ortsliste gewinnt dabei am meisten: bei 1360 px
   passen elf Orte in eine Reihe statt vier. */
.gebiet-innen { display: block; }
.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; }

/* Die beiden Gruppen stehen nebeneinander. Untereinander ueber die
   volle Breite lag "Senden" als einziger Ort allein auf der letzten
   Zeile, und der Abschnitt war 41 px hoeher. Nebeneinander bekommt
   jede Gruppe zwei bis drei volle Reihen und eine eigene Spalte.
   Fotos in _screenshots/gebiet-*. */
.orte-paar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s7); align-items: start;
}
.orte-paar .orte { margin-top: var(--s6); }

/* ---------- 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; }
/* Antworten haben seit dem fuenften Umbau meist zwei Absaetze: die
   Antwort im ersten, die Begruendung im zweiten. Ohne Abstand
   klebten sie aneinander. */
.frage-inhalt p { color: var(--leise); font-size: 16.5px; margin: 0; }
.frage-inhalt p + p { margin-top: var(--s3); }

/* ---------- Kontakt ---------- */
.kontakt-innen {
  display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
/* Die drei Kontaktwege als Karten. Vorher stand die Nummer als
   20 px hoher Text ohne Linkfarbe da, auf dem Handy war nicht zu
   erkennen, dass sie antippbar ist. Jetzt wie der Anrufknopf in
   der Mobilnavigation: Rahmen, Akzentfarbe, Pfeil, volle Breite. */
.kontakt-wege { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s3); }
.kontakt-karte {
  display: flex; align-items: center; gap: var(--s4);
  min-height: 62px; padding: 8px var(--s4) 8px 8px;
  background: var(--papier);
  border: 1.5px solid var(--linie-stark); border-radius: var(--r);
  text-decoration: none; color: var(--wasser-tief);
  transition: border-color var(--takt), box-shadow var(--takt), transform var(--takt);
}
.kontakt-karte:hover { border-color: var(--wasser); box-shadow: var(--schatten); transform: translateY(-1px); }
.kontakt-symbol {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  background: var(--wasser-blass); color: var(--wasser-tief);
  display: grid; place-items: center;
}
.kontakt-symbol svg { width: 22px; height: 22px; }
.kontakt-karte-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.kontakt-karte-text strong {
  font-size: var(--t-mini); letter-spacing: .1em;
  text-transform: uppercase; color: var(--leise); font-weight: 700;
}
.kontakt-karte-text span {
  font-size: 1.06rem; font-weight: 650; color: var(--wasser-tief);   /* 7,8:1 auf Weiss */
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.kontakt-pfeil { width: 22px; height: 22px; flex: none; color: var(--wasser-tief); }

.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.6fr 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: 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); }

  /* Der Hero ist ohnehin einspaltig, hier faellt nur die Luft weg. */
  .hero { padding: 16px 0 var(--bahn-luft-mobil); }
  .hero-innen { padding-top: var(--s4); }
  .hero-lead { max-width: 46ch; }

  /* Grosse Leistungskarte stapelt: erst der Text, dann die Marke.
     Umgekehrt stuenden vier Haekchen vor der Erklaerung, auf die sie
     sich beziehen. */
  .leistung-gross { grid-template-columns: 1fr; gap: var(--s6); padding: var(--s6); }
  .leistung-gross-marke { order: 2; }
  .leistung-gross-text { order: 1; }

  .person-innen, .kontakt-innen { grid-template-columns: 1fr; }
  /* Zwei Spalten Ortspillen waeren auf 390 px je 155 px breit.
     "Oer-Erkenschwick" braucht allein 150 px. */
  .orte-paar { grid-template-columns: 1fr; gap: 0; }
  .person-bild { order: -1; }
  .person-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:nth-child(2n) { border-left: none; }
  .preis-karte + .preis-karte { 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; }
  /* Das offene Menue fuellt den ganzen Bildschirm unter der Kopfzeile.
     Vorher endete es mitten im Bild, die Seite scrollte dahinter weiter
     und die Anrufleiste schaute halbiert darunter hervor. Die Hoehe der
     Kopfzeile misst das Skript beim Oeffnen und legt sie in --kopf-hoehe. */
  .hauptmenue {
    position: fixed; left: 0; right: 0;
    top: var(--kopf-hoehe, 72px); bottom: 0;
    margin: 0; overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier);
    padding: var(--s3) var(--rand) var(--s7);
    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 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: 56px; 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; }
  /* Die Fusszeile bleibt zweispaltig. Einspaltig wurde sie mit den
     44 px hohen Linkzeilen zu einem Turm von ueber 1100 px. */
  .fusszeile-innen { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); }
  .hero-punkte { gap: var(--s2) var(--s5); }
}

/* 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: 13px; letter-spacing: .07em; 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. */
/* Das Portrait war 475 x 480 px und damit ein Drittel der Inhalts-
   breite. Es dominierte den Abschnitt, obwohl der Text die Arbeit
   leisten soll. Jetzt 200 px rund, links neben dem Text. */
.ueber-innen {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 48px);
  align-items: center;
}
.ueber-bild img {
  width: 240px; height: 240px;
  object-fit: cover;
  object-position: 50% 14%;
  /* Weich abgerundet wie die uebrigen Bilder, nicht rund. Runde
     Portraits lesen als Profilbild aus einem sozialen Netzwerk,
     nicht als Handwerker. */
  border-radius: 24px;
  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; }


/* ---------- 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) {
  /* Auf dem Handy steht das Bild ueber dem Text und mittig. 200 px
     nehmen dort ein knappes Fuenftel der Bildschirmhoehe ein, das
     traegt ohne zu dominieren. */
  .ueber-innen { grid-template-columns: 1fr; gap: var(--s5); justify-items: center; }
  .ueber-bild { order: -1; }
  /* Bild, Kicker und Ueberschrift mittig, die Absaetze aber linksbuendig:
     vier zentrierte Fliesstextzeilen sind deutlich schwerer zu lesen als
     linksbuendige. */
  .ueber-text { text-align: left; }
  .ueber-text .kicker, .ueber-text h2 { text-align: center; }
  .ueber-hinweis { margin-left: auto; margin-right: auto; }
  .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); }
}

/* ============================================================
   8. Nachtrag: Audit und Nutzertest
   ------------------------------------------------------------
   Preisanker in allen Leistungen, die Preiszeile im Hero, die
   Kontaktwege als Karten, der umgeleitete Formularhinweis, das
   deutsche Datei-Feld und das Klappmenue mit Abdunklung.
   ============================================================ */

/* Die Regeln fuer .hero-preis sind mit der Zeile selbst im zwoelften
   Umbau entfallen. */

/* ---------- Was die Spanne bestimmt ---------- */
.preis-spanne {
  margin: var(--s3) 0 0;
  font-size: 14.5px; line-height: 1.5;
  color: var(--leise);
}

/* ---------- Preisanker in den Leistungskarten ---------- */
.karte-preis {
  margin: var(--s3) 0 0 !important;
  padding-top: var(--s3);
  border-top: 1px dashed var(--linie-stark);
  font-size: 14.5px !important; line-height: 1.45 !important;
  color: var(--tinte) !important; font-weight: 600;
}
.karte-preis span {
  display: inline-block; margin-right: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--licht-text); background: var(--licht-blass);
  border-radius: 5px; padding: 2px 7px; vertical-align: 1px;
}
.leistung-richtwert {
  margin: var(--s5) 0 0;
  font-size: var(--t-klein); color: var(--leise);
  max-width: var(--lesebreite);
}

/* ---------- Gewerbe-Satz in der Hauptleistung ----------
   Vorher stand der einzige Satz zu Ladenlokalen zugeklappt in der
   achten Frage. Jetzt sichtbar, mit warmer Kante wie die Gegenrede. */
.gewerbe-satz {
  margin: var(--s5) 0 0 !important;
  padding: var(--s3) 0 var(--s3) var(--s4);
  border-left: 3px solid var(--licht);
  color: var(--text) !important; font-weight: 500;
}

/* ---------- Anfahrt im Einzugsgebiet ---------- */
.anfahrt { color: var(--text); font-size: 16.5px; max-width: var(--lesebreite); }

/* ---------- Formularhinweis, der zum Anruf leitet ----------
   Ersetzt den Satz "Das Formular versendet noch nichts", der laut
   Nutzertest alle Formularanfragen kostete. Bleibt stehen, solange
   nichts versendet wird, leitet aber weiter statt abzubrechen. */
.formular-hinweis {
  margin-top: var(--s5);
  padding: var(--s5);
  background: var(--licht-hauch);
  border: 1px solid #EBD5B4; border-left: 4px solid var(--licht);
  border-radius: var(--r);
}
.formular-hinweis p { font-size: 16px; color: var(--text); margin: 0 0 var(--s4); }
.formular-hinweis .knopf-reihe .knopf { flex: 1 1 200px; }

/* ---------- Fehlermeldung im Formular ---------- */
.feld-fehler {
  margin: -6px 0 var(--s4); padding: 10px 14px;
  background: #FBEAEA; border: 1px solid #E5B4B4; border-radius: var(--r-klein);
  color: #8B1E1E;   /* 7,6:1 auf dem hellen Rot */
  font-size: 14.5px; font-weight: 600; line-height: 1.45;
}
.feld input[aria-invalid="true"] { border-color: #B33A3A; }

/* ---------- Datei-Feld auf Deutsch ----------
   Das native Feld zeigte in Chrome "Choose Files / No file chosen".
   Das Eingabefeld bleibt fuer Tastatur und Vorleser da, ist aber
   unsichtbar; sichtbar sind Knopf und Stand daneben. */
.datei-feld {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3);
  min-height: 48px; padding: 8px 12px;
  background: var(--wasser-hauch);
  border: 1.5px dashed var(--linie-stark); border-radius: var(--r);
  transition: border-color var(--takt), box-shadow var(--takt);
}
.datei-feld:focus-within { border-color: var(--wasser); box-shadow: 0 0 0 3px rgba(14,110,134,.18); }
.datei-feld input[type="file"] {
  position: absolute; width: 1px; height: 1px; min-height: 0;
  opacity: 0; overflow: hidden; padding: 0; margin: 0; border: 0;
}
.feld .datei-knopf {
  display: inline-flex; align-items: center;
  min-height: 34px; margin: 0; padding: 5px 14px;
  background: var(--papier); border: 1.5px solid var(--linie-stark); border-radius: 8px;
  font-size: 15px; font-weight: 650; color: var(--wasser-tief);
  cursor: pointer;
}
.feld .datei-knopf:hover { border-color: var(--wasser); }
.datei-stand { font-size: 14.5px; color: var(--leise); overflow-wrap: anywhere; }

/* ---------- Klappmenue: Abdunklung und Sperre ---------- */
.menue-schleier {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(11,43,51,.5);
}
.menue-schleier[hidden] { display: none; }
body.menue-offen { overflow: hidden; }
/* Die feste Anrufleiste liegt sonst ueber dem offenen Menue. */
body.menue-offen .anrufleiste { display: none; }
/* backdrop-filter macht die Kopfzeile zum Bezugsrahmen fuer fixierte
   Nachfahren. Das Menue mass dann seine Hoehe an der 73 px hohen
   Kopfzeile statt am Fenster und endete bei 133 px. Solange es offen
   ist, faellt der Filter weg; die Flaeche ist ohnehin fast deckend. */
body.menue-offen .kopfzeile { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--grund); }

/* ---------- Sechs Menuepunkte auf dem Rechner ---------- */
@media (min-width: 861px) and (max-width: 1200px) {
  .hauptmenue { gap: var(--s5); }
  .hauptmenue a { font-size: 15px; }
}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 520px) {
  .formular-hinweis .knopf-reihe .knopf { flex-basis: 100%; }
  .kontakt-karte { min-height: 60px; }
}

/* ============================================================
   9. Nachtrag: Reihenfolge, Belege, Klickflaechen
   ------------------------------------------------------------
   Der Ueber-mich-Abschnitt steht jetzt vor den Preisen, der
   Wiederholungsabschnitt unter dem Hero ist weg, dazu ein
   Belegblock und groessere Klickflaechen auf dem Handy.
   ============================================================ */

.hero-lead { color: var(--leise); }

/* ---------- Belegblock ----------
   Die Platzhalter sollen nicht wie unfertige graue Kaesten wirken.
   Deshalb dieselbe Kartenform wie im Rest der Seite, nur mit
   gestrichelter Kante und ohne Schatten: erkennbar vorbereitet,
   nicht kaputt. */
.belege { align-items: stretch; }
.beleg {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  padding: var(--s6);
}
.beleg-leer {
  background: transparent;
  border: 1.5px dashed var(--linie-stark);
  display: flex; flex-direction: column; gap: var(--s3);
}
.beleg-art {
  font-size: var(--t-mini); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--licht-text);
  margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.beleg-art::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--licht-blass); box-shadow: inset 0 0 0 2px var(--licht);
}
.beleg-text { font-size: 16px; color: var(--leise); line-height: 1.55; margin: 0; }

.beleg-hinweis {
  margin: var(--s5) 0 0;
  font-size: var(--t-klein); color: var(--leise);
  display: flex; align-items: center; gap: var(--s3);
}
.beleg-hinweis::before {
  content: ""; width: 26px; height: 2px; background: var(--linie-stark); flex: none;
}

/* Fuer die spaeter befuellten Karten, damit das Einsetzen ohne
   weitere Stilarbeit geht. */
.beleg-stimme blockquote { margin: 0 0 var(--s5); }
.beleg-stimme blockquote p {
  font-family: 'Serife', 'Serife Ersatz', Georgia, serif;
  font-size: 1.15rem; line-height: 1.45; color: var(--tinte); margin: 0;
}
.beleg-stimme blockquote p::before { content: "\201E"; }
.beleg-stimme blockquote p::after { content: "\201C"; }
.beleg figcaption { display: flex; flex-direction: column; gap: 2px; }
.beleg-wer { font-weight: 700; color: var(--tinte); font-size: var(--t-klein); }
.beleg-wo, .beleg-anlass { font-size: 14px; color: var(--leise); }
.beleg-bild { padding: 0; overflow: hidden; }
.beleg-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.beleg-paar img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.beleg-bild figcaption { padding: var(--s5); }

/* ---------- Erreichbarkeit ----------
   Zwei Testpersonen ueber 70 wollten anrufen und wussten nicht, ob
   sie stoeren. Steht direkt unter den Kontaktkarten. */
.erreichbar {
  margin: var(--s4) 0 0;
  padding: var(--s3) var(--s4);
  background: var(--wasser-hauch);
  border-radius: var(--r);
  font-size: var(--t-klein);
  color: var(--text);
  display: flex; align-items: flex-start; gap: 10px;
}
.erreichbar::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px;
  background: var(--wasser-tief);
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.2 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.2 2'/%3E%3C/svg%3E");
}

/* ---------- Anrufkarte hervorheben ----------
   Die Telefonnummer war eine Textzeile. Jetzt ist sie der Knopf,
   der sie sein sollte. */
.kontakt-karte-haupt {
  background: var(--wasser-tief);
  border-color: var(--wasser-tief);
}
.kontakt-karte-haupt:hover { background: var(--tinte); border-color: var(--tinte); }
.kontakt-karte-haupt .kontakt-symbol { background: rgba(255,255,255,.16); color: #FFFFFF; }
/* Auch die kleine Beschriftung in Weiss: jeder abgesetzte Ton auf
   diesem Grund bleibt unter 7:1, gemessen kam #BBD6DD auf 5,1:1.
   Die Hierarchie traegt hier die Groesse und die Sperrung, nicht
   die Farbe. */
.kontakt-karte-haupt .kontakt-karte-text strong { color: #FFFFFF; }        /* 7,8:1 */
.kontakt-karte-haupt .kontakt-karte-text span { color: #FFFFFF; }          /* 7,8:1 */
.kontakt-karte-haupt .kontakt-pfeil { color: #FFFFFF; }

/* ---------- Portrait im Kontaktbereich ----------
   Fuellt die frueher leere linke Spalte auf dem Rechner und zeigt
   das Gesicht noch einmal dort, wo entschieden wird. */
.kontakt-person {
  margin-top: var(--s6);
  display: flex; align-items: center; gap: var(--s5);
}
.kontakt-person img {
  width: 96px; height: 96px; flex: none;
  border-radius: 14px; object-fit: cover; object-position: 50% 18%;
  box-shadow: var(--schatten);
}
.kontakt-person p {
  margin: 0; font-size: var(--t-klein); color: var(--leise); line-height: 1.55;
}
.kontakt-person strong {
  display: block;
  font-family: 'Serife', 'Serife Ersatz', Georgia, serif;
  font-size: 1.12rem; font-weight: 600; color: var(--tinte);
  margin-bottom: 2px;
}

/* ============================================================
   Klickflaechen auf dem Handy
   ------------------------------------------------------------
   Gemessen waren 22 Ziele unter 44 px, das kleinste 18 px hoch.
   Fliesstextlinks bekommen ihre Flaeche ueber padding-block: bei
   einem Inline-Element vergroessert das die Trefferflaeche, ohne
   die Zeilenhoehe zu veraendern, der Umbruch bleibt also gleich.
   ============================================================ */
@media (max-width: 860px) {
  /* Wortmarke in Kopf- und Fusszeile */
  .marke { min-height: 44px; }

  /* Listenlinks in der Fusszeile */
  .fuss-liste { gap: 0; }
  .fuss-liste a {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .fuss-unten a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Links mitten im Fliesstext */
  .leistung-richtwert a,
  .feld-haken label a,
  .rechtsseite p a,
  .rechtsseite li a,
  .brotkrume a {
    padding-block: 13px;
    margin-block: -13px;
  }

  /* Beschriftungen im Formular. Der zusaetzliche Platz liegt oben,
     also zwischen zwei Feldern, wo er ohnehin gut tut. Dafuer
     ruecken die Felder selbst enger zusammen. */
  .feld { margin-bottom: 6px; }
  .feld label { padding: 13px 0 6px; margin-bottom: 0; min-height: 44px; }
  .feld .datei-knopf { min-height: 44px; padding: 8px 16px; }

  .fragen summary { padding-block: var(--s5); }
}

/* Das Haekchen wird selbst gezeichnet: als natives Kaestchen ist es
   20 px gross und laesst sich nicht vergroessern, ohne die Grafik zu
   verzerren. So bleibt das sichtbare Kaestchen bei 24 px, die
   Trefferflaeche wird 44 px. */
.feld-haken input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 44px; height: 44px; flex: none;
  margin: -10px 0 0 -10px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer;
}
.feld-haken input[type="checkbox"]::before {
  content: ""; grid-area: 1 / 1; box-sizing: border-box;
  width: 24px; height: 24px; border-radius: 6px;
  border: 2px solid var(--linie-stark); background: var(--papier);
  transition: background var(--takt), border-color var(--takt);
}
.feld-haken input[type="checkbox"]:checked::before {
  background: var(--wasser-tief); border-color: var(--wasser-tief);
}
.feld-haken input[type="checkbox"]::after {
  content: ""; grid-area: 1 / 1;
  width: 12px; height: 7px; margin-top: -3px;
  border-left: 2.5px solid #FFFFFF; border-bottom: 2.5px solid #FFFFFF;
  transform: rotate(-45deg) scale(0);
  transition: transform var(--takt);
}
.feld-haken input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
.feld-haken input[type="checkbox"]:focus-visible { outline-offset: -8px; }

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 960px) {
  .kontakt-person { margin-top: var(--s5); }
}

@media (max-width: 900px) {
  .belege.raster-3 { grid-template-columns: 1fr; }
}

/* Das zweite Portrait im Kontaktbereich fuellt eine Luecke, die nur
   auf dem Rechner entsteht: dort ist die Formularspalte hoeher als die
   Textspalte daneben. Auf dem Handy steht ohnehin alles untereinander,
   es gaebe keine Luecke, und das Gesicht kam sechs Bildschirme vorher
   schon einmal. */
@media (max-width: 960px) {
  .kontakt-person { display: none; }

  /* Die vier kleinen Leistungsbilder zeigen alle liegende Motive:
     Dachrinne, Fassade, Balkongang, Wintergarten. Auf dem Handy ist
     16:9 dort der passendere Zuschnitt als 3:2, und die vier Karten
     werden zusammen 144 px kuerzer. */
  .karte-bild img { aspect-ratio: 16 / 9; }
}

/* ============================================================
   10. Nachtrag: Formularversand
   ============================================================ */

/* Die Falle fuer Bots. Nicht display:none: manche Bots erkennen das
   und lassen das Feld dann in Ruhe. Weit aus dem Sichtfeld geschoben
   wirkt es fuer sie wie ein normales Feld. */
.falle {
  position: absolute;
  left: -9999px; top: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Rueckmeldung nach dem Absenden */
.formular-meldung-gut {
  background: #E8F3EC; border-color: #A8CDB6; color: #1C5233;   /* 7,6:1 */
}
.formular-meldung-schlecht {
  background: #FBEAEA; border-color: #E5B4B4; color: #8B1E1E;   /* 7,8:1 */
}
.formular-knopf[disabled] { opacity: .7; cursor: progress; }

/* Fussnote unter der Steuerantwort */
.frage-fussnote {
  margin-top: var(--s3) !important;
  padding-top: var(--s3);
  border-top: 1px solid var(--linie);
  font-size: var(--t-klein) !important;
}

/* Der Satz zum Aufwand des Kunden, unter den vier Ablaufschritten */
.ablauf-hinweis {
  margin: var(--s6) 0 0;
  padding: var(--s4) var(--s5);
  background: var(--papier);
  border: 1px solid #EBD5B4;
  border-left: 3px solid var(--licht);
  border-radius: var(--r);
  font-size: 16.5px;
  color: var(--text);
  max-width: var(--lesebreite);
}

/* ---------- Vorher und nachher am Falz ----------
   Steht noch als Kommentar in der Hauptleistungskarte. Die Stile sind
   fertig, damit das Bild nur noch eingesetzt werden muss. Zwei
   Aufnahmen nebeneinander, mit einer Fuge dazwischen statt einer
   Linie: der Unterschied soll aus den Bildern kommen, nicht aus der
   Gestaltung. */
.falz-beleg {
  margin: var(--s5) 0 0;
  max-width: var(--lesebreite);
}
.falz-paar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  border-radius: var(--r); overflow: hidden;
}
.falz-paar img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.falz-beleg figcaption {
  margin-top: var(--s3);
  font-size: var(--t-klein); color: var(--leise);
}

/* ============================================================
   11. Nachtrag: ohne Preise, mit Haltung
   ============================================================ */

/* ---------- Woran der Preis haengt ----------
   Fuenf Faktoren statt vier Preisfaellen. Karten wie sonst, aber mit
   Ziffer, damit die Reihenfolge (zuerst die Anzahl) sichtbar bleibt. */
.faktoren {
  list-style: none; margin: 0; padding: 0;
  /* Vier Karten in zwei vollen Reihen. Bei drei Spalten stuende die
     vierte allein in der zweiten Zeile, bei vier nebeneinander bliebe
     neben der Ziffer zu wenig Textbreite. */
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5);
  counter-reset: faktor;
}
.faktor {
  counter-increment: faktor;
  position: relative;
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--r-gross); padding: var(--s6) var(--s6) var(--s6) 78px;
}
.faktor::before {
  content: counter(faktor);
  position: absolute; left: var(--s6); top: var(--s6);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--licht-blass); color: var(--licht-text);
  font-family: 'Serife', 'Serife Ersatz', Georgia, serif;
  font-size: 1.1rem; font-weight: 600;
}
.faktor h3 { font-size: 1.15rem; margin-bottom: var(--s2); }
.faktor p { color: var(--leise); font-size: 16px; line-height: 1.55; margin: 0; }

.preis-schluss {
  margin-top: var(--s6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5) var(--s7);
  padding: var(--s5) var(--s6);
  background: var(--wasser-hauch); border: 1px solid #D3E6EB; border-radius: var(--r-gross);
}
.preis-schluss p { flex: 1 1 420px; margin: 0; color: var(--text); font-size: 16.5px; }
.preis-schluss .knopf { flex: none; }


/* ---------- Haltung ---------- */
.haltung-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s7);
}
.haltung-liste li {
  padding: var(--s5) 0 var(--s5) var(--s6);
  border-left: 3px solid var(--licht);
}
.haltung-liste h3 { font-size: 1.15rem; margin-bottom: var(--s2); }
.haltung-liste p { color: var(--leise); font-size: 16.5px; margin: 0; }
.haltung-schluss {
  margin: var(--s6) 0 0;
  font-family: 'Serife', 'Serife Ersatz', Georgia, serif;
  font-size: 1.28rem; color: var(--tinte); max-width: var(--lesebreite);
}

/* ---------- Mittlerer Knopf der Anrufleiste ----------
   Kein WhatsApp-Gruen: die Farben der Seite, sonst zieht das fremde
   Gruen alle Aufmerksamkeit und wirkt wie ein Fremdkoerper. */
@media (max-width: 860px) {
  .anrufleiste-knopf { font-size: 15px; padding: 0 6px; white-space: nowrap; }
  .anrufleiste-knopf svg { width: 18px; height: 18px; }
  .anrufleiste-mitte {
    background: var(--wasser-blass); color: var(--wasser-tief);
    box-shadow: inset 0 0 0 1.5px #C5DFE6;
  }
}

@media (max-width: 960px) {
  .haltung-liste { grid-template-columns: 1fr; gap: var(--s3); }
  .preis-schluss .knopf { flex: 1 1 100%; }
}
@media (max-width: 700px) {
  .faktoren { grid-template-columns: 1fr; }
  .faktor { padding: var(--s5) var(--s5) var(--s5) 70px; }
  .faktor::before { left: var(--s5); top: var(--s5); }
}
@media (max-width: 400px) {
  .anrufleiste-knopf { font-size: 14px; gap: 5px; }
}

/* ---------- Warum Festpreis statt Stunden ----------
   Eigener Block mit warmer Kante wie die Gegenrede im dunklen
   Abschnitt: er erklaert nicht, wovon der Preis abhaengt, sondern
   warum er ueberhaupt fest ist. Zwei verschiedene Gedanken, deshalb
   optisch getrennt von den Faktorkarten. */
.festpreis {
  margin-top: var(--s6);
  padding: var(--s5) 0 var(--s5) var(--s6);
  border-left: 3px solid var(--licht);
  max-width: var(--lesebreite);
}
.festpreis h3 { font-size: 1.15rem; margin-bottom: var(--s3); }
.festpreis p { color: var(--leise); font-size: 16.5px; }
.festpreis p + p { margin-top: var(--s3); }