/* Archivo liegt auf dem eigenen Server. Ueber Google Fonts wuerde bei jedem
   Besuch die IP-Adresse an Google gehen, das ist abmahnfaehig (LG Muenchen I,
   Urteil vom 20.01.2022). Lizenz: SIL Open Font License 1.1. */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('schrift/archivo-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('schrift/archivo-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('schrift/archivo-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('schrift/archivo-800.woff2') format('woff2');
}

/* =========================================================================
   Paderstrahl · Professionelle Solarreinigung
   Farben und Typografie nach Stilkacheln.pdf
   ========================================================================= */

:root {
  /* Markenfarben */
  --sonnenblau: #1B4FA0;
  --tiefblau:   #10243F;
  --sonnengelb: #F5B01E;
  --anthrazit:  #1F2733;
  --himmelgrau: #E3EDF8;

  /* Abgeleitete Töne */
  --blau-hell:  #2C67C4;
  --blau-tief:  #0B1A2E;
  --gelb-tief:  #D9950A;
  --text-weich: #56677E;
  --linie:      #D3E0F2;
  --weiss:      #FFFFFF;

  /* Typografie */
  --schrift: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Raster */
  --breite: 1320px;
  --luft: clamp(64px, 9vw, 112px);
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.6;
  color: var(--anthrazit);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.12;
  color: var(--tiefblau);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 5.4vw, 58px); }
h2 { font-size: clamp(28px, 3.8vw, 42px); }
h3 { font-size: clamp(19px, 2.1vw, 23px); line-height: 1.25; }

p { margin: 0; }
a { color: var(--sonnenblau); }

.bahn {
  width: min(var(--breite), 100% - 40px);
  margin-inline: auto;
}

section { padding-block: var(--luft); }

/* Fokus – durchgehend sichtbar, nie entfernt */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sonnengelb);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================================
   Logo
   ========================================================================= */
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.logo svg { width: 40px; height: 32px; flex: none; display: block; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-name {
  font-weight: 800; font-size: 20px; letter-spacing: .055em;
  color: var(--tiefblau);
}
.logo-zusatz {
  font-weight: 600; font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sonnenblau); margin-top: 3px;
}
.auf-dunkel .logo-name { color: var(--weiss); }
.auf-dunkel .logo-zusatz { color: var(--sonnengelb); }

/* =========================================================================
   Kopfzeile
   ========================================================================= */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopf-inhalt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-block: 13px;
}
.kopf-inhalt > .knopf { flex: none; }
/* Unter 720px uebernimmt die feste Anrufleiste am unteren Rand;
   der Knopf im Kopf waere doppelt und sprengt dort die Zeilenbreite. */
@media (max-width: 720px) {
  .kopf-inhalt > .knopf { display: none; }
}
.navi { display: flex; align-items: center; gap: 28px; }
.navi a {
  font-size: 15px; font-weight: 600; color: var(--anthrazit);
  text-decoration: none; padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color .16s ease, color .16s ease;
}
.navi a:hover { color: var(--sonnenblau); border-bottom-color: var(--sonnenblau); }
@media (max-width: 900px) { .navi { display: none; } }

/* =========================================================================
   Schaltflächen
   ========================================================================= */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-size: 16px; font-weight: 700;
  padding: 13px 22px; border-radius: 10px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.knopf svg { width: 18px; height: 18px; flex: none; }

.knopf-gelb   { background: var(--sonnengelb); color: var(--anthrazit); }
.knopf-gelb:hover { background: var(--gelb-tief); }

.knopf-blau   { background: var(--sonnenblau); color: var(--weiss); }
.knopf-blau:hover { background: var(--blau-hell); }

.knopf-rand   { background: transparent; color: var(--tiefblau); border-color: var(--linie); }
.knopf-rand:hover { border-color: var(--sonnenblau); color: var(--sonnenblau); }

.knopf-hell   { background: rgba(255,255,255,.12); color: var(--weiss); border-color: rgba(255,255,255,.4); }
.knopf-hell:hover { background: rgba(255,255,255,.22); }

.knopf-gruen  { background: #25A65B; color: var(--weiss); }
.knopf-gruen:hover { background: #1F8E4E; }

/* =========================================================================
   Zellraster – das Leitmotiv aus der Bildmarke
   ========================================================================= */
.zellraster { position: relative; overflow: hidden; }
.zellraster::before {
  content: ''; position: absolute; inset: -2px; pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,  rgba(255,255,255,.11) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.11) 0 1px, transparent 1px 46px);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  background: var(--tiefblau);
  color: var(--weiss);
  padding-block: clamp(52px, 7vw, 88px) clamp(60px, 8vw, 96px);
}
.hero h1 { color: var(--weiss); }
.hero-gitter {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 60px); align-items: center;
}
@media (max-width: 940px) { .hero-gitter { grid-template-columns: 1fr; } }

.hero-text > * + * { margin-top: 22px; }
.hero p.vorspann {
  font-size: clamp(17px, 2.1vw, 19px);
  color: #BDD0E8; max-width: 46ch; line-height: 1.62;
}
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-merkmale {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 14.5px; color: #9FB6D4; padding-top: 6px;
}
.hero-merkmale span { display: inline-flex; align-items: center; gap: 7px; }
.hero-merkmale svg { width: 15px; height: 15px; color: var(--sonnengelb); }

/* =========================================================================
   Vorher/Nachher-Regler
   ========================================================================= */
.ba-rahmen { position: relative; }
.ba {
  position: relative; width: 100%; aspect-ratio: 900/443;
  border-radius: var(--radius); overflow: hidden;
  user-select: none; touch-action: none; cursor: ew-resize;
  background: var(--blau-tief);
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.65);
}
/* picture muss selbst die volle Flaeche einnehmen - als Inline-Element
   haette es eine 0x0-Box, und ein clip-path darauf wuerde den Inhalt
   vollstaendig wegschneiden. */
.ba picture {
  position: absolute; inset: 0; display: block;
}
.ba img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none;
}
.ba .nachher { clip-path: inset(0 0 0 var(--pos, 50%)); }

.ba-marke {
  position: absolute; top: 13px; z-index: 3;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
}
.ba-marke.links  { left: 13px;  background: rgba(16,26,46,.85); color: #fff; }
.ba-marke.rechts { right: 13px; background: var(--sonnengelb); color: var(--anthrazit); }

.ba-griff {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 3px; margin-left: -1.5px; background: #fff; z-index: 4;
}
.ba-knopf {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 3px solid var(--sonnenblau);
  display: flex; align-items: center; justify-content: center; gap: 3px;
  box-shadow: 0 5px 16px rgba(0,0,0,.4);
}
.ba-knopf i {
  width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.ba-knopf i:first-child { border-right: 7px solid var(--sonnenblau); }
.ba-knopf i:last-child  { border-left:  7px solid var(--sonnenblau); }
.ba:focus-visible { outline: 3px solid var(--sonnengelb); outline-offset: 4px; }

.ba-fuss {
  margin-top: 11px; font-size: 12.5px; color: #8FA8C8; line-height: 1.5;
}

/* =========================================================================
   Vorteile – bewusst keine gleichförmigen Karten, sondern eine Liste
   ========================================================================= */
/* Abschnittskopf: Überschrift und Vorspann stehen nebeneinander statt
   untereinander am linken Rand. Nutzt die Blattbreite, ohne die Zeilenlänge
   des Vorspanns über das Lesemaß zu treiben. */
.abschnitt-kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  /* start: beide Spalten beginnen oben auf derselben Höhe. Der Ausgleich am
     Absatz gleicht aus, dass eine 17-px-Zeile mehr Leading über den Buchstaben
     hat als eine große Überschriftenzeile. */
  align-items: start;
}
.abschnitt-kopf h2 { max-width: 21ch; }
.abschnitt-kopf p { color: var(--text-weich); font-size: 18px; max-width: 52ch; margin-top: -5px; }
@media (max-width: 820px) {
  .abschnitt-kopf { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .abschnitt-kopf p { padding-top: 0; }
  .abschnitt-kopf h2 { max-width: none; }
}

.vorteil-liste { margin-top: 46px; display: grid; gap: 0; }
/* Registerartige Zeile: Zeichen | Aussage | Erläuterung.
   Die drei Spalten nutzen die Blattbreite und trennen Behauptung von Beleg. */
.vorteil {
  display: grid; grid-template-columns: 56px minmax(0, 24ch) minmax(0, 1fr);
  gap: 22px 30px;
  padding-block: 26px; border-top: 1px solid var(--linie);
  align-items: start;
}
@media (max-width: 960px) {
  /* Zweispaltig: Zeichen links, Überschrift und Text rechts untereinander.
     Ohne die feste Spaltenzuweisung landet der Absatz in der schmalen
     Zeichenspalte und bricht nach jedem Wort um. */
  .vorteil { grid-template-columns: 56px minmax(0, 1fr); gap: 6px 20px; }
  .vorteil h3 { grid-column: 2; }
  .vorteil p { grid-column: 2; }
}
.vorteil:last-child { border-bottom: 1px solid var(--linie); }
.vorteil-zeichen {
  width: 56px; height: 56px; border-radius: 12px;
  background: var(--himmelgrau); color: var(--sonnenblau);
  display: grid; place-items: center;
}
.vorteil-zeichen svg { width: 26px; height: 26px; }
.vorteil h3 { margin-bottom: 6px; }
.vorteil p { color: var(--text-weich); max-width: 72ch; }
@media (max-width: 620px) {
  .vorteil { grid-template-columns: 44px 1fr; gap: 16px; }
  .vorteil-zeichen { width: 44px; height: 44px; border-radius: 10px; }
  .vorteil-zeichen svg { width: 21px; height: 21px; }
}

/* =========================================================================
   Rechner – der eine mutige Moment
   ========================================================================= */
.rechner-abschnitt { background: var(--himmelgrau); }
.rechner-kopf { margin-bottom: 40px; }

.rechner {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 52px);
  background: var(--weiss); border-radius: 18px; padding: clamp(24px, 3.4vw, 40px);
  box-shadow: 0 20px 46px -24px rgba(16,36,63,.4);
}
@media (max-width: 900px) { .rechner { grid-template-columns: 1fr; } }

.regler-titel {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.regler-titel label { font-weight: 700; font-size: 16px; color: var(--tiefblau); }
.regler-wert {
  font-size: 30px; font-weight: 800; color: var(--sonnenblau);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.regler-wert small { font-size: 16px; font-weight: 700; }

/* Die Modulfläche: Zellen füllen sich beim Ziehen.
   Spaltenweiser Fluss, damit die Fläche nach rechts wächst statt
   zeilenweise umzubrechen - sie soll wie ein Modulfeld wirken, nicht wie ein Balken. */
.modulflaeche {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  padding: 9px; background: var(--himmelgrau); border-radius: 10px;
  margin-bottom: 4px;
}
.zelle {
  aspect-ratio: 1; border-radius: 2px; background: #C8D7EC;
  transition: background-color .18s ease;
}
.zelle.an { background: var(--sonnenblau); }

input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 34px; background: transparent; cursor: pointer; margin: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: #C8D7EC;
}
input[type=range]::-moz-range-track {
  height: 6px; border-radius: 999px; background: #C8D7EC;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%; margin-top: -10px;
  background: var(--weiss); border: 3px solid var(--sonnenblau);
  box-shadow: 0 2px 8px rgba(16,36,63,.3);
}
input[type=range]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--weiss); border: 3px solid var(--sonnenblau);
  box-shadow: 0 2px 8px rgba(16,36,63,.3);
}
.regler-skala {
  display: flex; justify-content: space-between;
  font-size: 12.5px; color: var(--text-weich); font-weight: 600;
}

.rechner-hinweis {
  margin-top: 24px; font-size: 13px; color: var(--text-weich);
  line-height: 1.55; border-top: 1px solid var(--linie); padding-top: 16px;
}

/* Ergebnisseite */
.ergebnis { display: flex; flex-direction: column; gap: 18px; }
.ring-feld { display: flex; align-items: center; gap: 20px; }
.ring { width: 128px; height: 128px; flex: none; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-mitte {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.ring-mitte b {
  display: block; font-size: 28px; font-weight: 800; color: var(--sonnenblau);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.ring-mitte span { font-size: 11px; font-weight: 600; color: var(--text-weich); }

.ring-text b { display: block; font-size: 19px; color: var(--tiefblau); line-height: 1.3; }
.ring-text span { font-size: 14.5px; color: var(--text-weich); }

.werte { display: grid; gap: 1px; background: var(--linie); border-radius: 12px; overflow: hidden; }
.wert {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  background: var(--weiss); padding: 14px 16px;
}
.wert dt { font-size: 14.5px; color: var(--text-weich); }
.wert dd {
  margin: 0; font-size: 20px; font-weight: 800; color: var(--tiefblau);
  font-variant-numeric: tabular-nums; letter-spacing: -.015em;
}
.wert.hervor { background: #FEF6E4; }
.wert.hervor dd { color: var(--gelb-tief); }

/* =========================================================================
   Betriebsband
   ========================================================================= */
.band { background: var(--sonnenblau); color: var(--weiss); padding-block: 30px; }
.band-gitter {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center;
}
.band-punkt b {
  display: block; font-size: clamp(21px, 2.6vw, 27px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.15;
}
.band-punkt span { font-size: 13.5px; color: #C3D6F0; }
@media (max-width: 720px) { .band-gitter { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; } }

/* =========================================================================
   Ablauf – echte Sequenz, darum nummeriert
   ========================================================================= */
.ablauf-kopf { margin-bottom: 44px; }
/* Zeilen über alle drei Schritte hinweg ausrichten: bricht eine Überschrift
   doch einmal um, rutscht der Text der Nachbarn nicht mit nach unten. */
.schritte {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  grid-template-rows: auto auto auto auto;
}
.schritt {
  display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 0;
  align-content: start;
}
.schritt picture { display: block; margin-bottom: 16px; }
.schritt img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4/3; object-fit: cover; border-radius: 14px;
}
@supports not (grid-template-rows: subgrid) {
  .schritt { display: block; }
  .schritt h3 { min-height: 2.5em; }
}
.schritt-nr { margin-bottom: 6px; }
@media (max-width: 800px) {
  .schritte { grid-template-columns: 1fr; gap: 26px; grid-template-rows: none; }
  .schritt { display: block; grid-row: auto; }
  .schritt h3 { min-height: 0; }
}
.schritt-nr {
  font-size: 13px; font-weight: 700; color: var(--sonnenblau);
  font-variant-numeric: tabular-nums; margin-bottom: 8px;
}
.schritt h3 { margin-bottom: 7px; }
.schritt p { color: var(--text-weich); font-size: 15.5px; }

/* =========================================================================
   Bildband
   ========================================================================= */
.bildband { position: relative; }
.bildband img {
  width: 100%; height: clamp(280px, 38vw, 440px); object-fit: cover; display: block;
}
.bildband-text {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(24px, 4vw, 44px) 0;
  background: linear-gradient(to top, rgba(11,26,46,.92), rgba(11,26,46,.55) 55%, transparent);
  color: var(--weiss);
}
.bildband-text h2 { color: var(--weiss); max-width: 20ch; }
.bildband-text p { margin-top: 12px; color: #D6E4F5; max-width: 52ch; font-size: 17px; }

/* =========================================================================
   Preise
   ========================================================================= */
.preis-abschnitt { background: var(--sonnengelb); }
.preis-gitter {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  gap: clamp(28px, 5vw, 60px); align-items: center;
}
@media (max-width: 860px) { .preis-gitter { grid-template-columns: 1fr; } }
.preis-abschnitt h2 { color: var(--anthrazit); }
.preis-zeilen { display: flex; gap: clamp(24px, 4vw, 46px); margin-top: 26px; flex-wrap: wrap; }
.preis-posten b {
  display: block; font-size: clamp(34px, 4.6vw, 46px); font-weight: 800;
  color: var(--anthrazit); letter-spacing: -.03em; line-height: 1;
}
.preis-posten span { font-size: 14.5px; font-weight: 700; color: #4A3A08; }
.preis-fuss { margin-top: 26px; font-size: 14.5px; color: #4A3A08; max-width: 68ch; line-height: 1.6; }

.beispiel {
  background: var(--anthrazit); color: var(--weiss);
  border-radius: 16px; padding: 26px 30px; min-width: 260px;
}
.beispiel-titel { font-size: 13px; font-weight: 700; color: var(--sonnengelb); margin-bottom: 14px; }
.beispiel dl { margin: 0; display: grid; gap: 9px; }
.beispiel .zeile { display: flex; justify-content: space-between; gap: 20px; font-size: 15px; }
.beispiel .zeile dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.beispiel .summe {
  border-top: 1px solid rgba(255,255,255,.22); margin-top: 6px; padding-top: 12px;
}
.beispiel .summe dd { font-size: 26px; font-weight: 800; color: var(--sonnengelb); }

/* =========================================================================
   Fragen
   ========================================================================= */
/* Überschrift steht über der Liste: nebeneinander gelesen trennt das Auge
   Frage und Überschrift schlecht voneinander. */
.fragen-gitter { display: block; }
.fragen { margin-top: 34px; max-width: 900px; }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
  font-weight: 700; font-size: 17.5px; color: var(--tiefblau); line-height: 1.35;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ''; position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2.5px solid var(--sonnenblau); border-bottom: 2.5px solid var(--sonnenblau);
  transform: rotate(45deg); transition: transform .2s ease;
}
.frage[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.frage p { padding-bottom: 20px; color: var(--text-weich); max-width: 68ch; }

/* =========================================================================
   Kontakt
   ========================================================================= */
.kontakt { background: var(--tiefblau); color: var(--weiss); }
.kontakt-gitter {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 64px);
}
@media (max-width: 880px) { .kontakt-gitter { grid-template-columns: 1fr; } }
.kontakt h2 { color: var(--weiss); }
.kontakt-vorspann { margin-top: 15px; color: #BDD0E8; max-width: 44ch; font-size: 17.5px; }

.telefon {
  display: inline-block; margin-top: 28px; text-decoration: none;
  font-size: clamp(30px, 4.4vw, 42px); font-weight: 800; color: var(--weiss);
  letter-spacing: -.02em; line-height: 1.1;
}
.telefon:hover { color: var(--sonnengelb); }
.telefon-zusatz { margin-top: 8px; font-size: 14.5px; color: #9FB6D4; }
.kontakt-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Formular */
.formular {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px; padding: clamp(22px, 3vw, 30px);
}
.formular h3 { color: var(--weiss); font-size: 20px; }
.formular > p { margin-top: 8px; font-size: 14.5px; color: #9FB6D4; }
.feld { margin-top: 18px; }
.feld label {
  display: block; font-size: 14px; font-weight: 600; color: #D6E4F5; margin-bottom: 7px;
}
.feld input, .feld textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--weiss);
  background: rgba(11,26,46,.55); border: 1px solid rgba(255,255,255,.22);
  border-radius: 9px; padding: 12px 14px;
}
.feld input::placeholder, .feld textarea::placeholder { color: #7C93B4; }
.feld input:focus, .feld textarea:focus {
  outline: 3px solid var(--sonnengelb); outline-offset: 2px; border-color: transparent;
}
.feld textarea { resize: vertical; min-height: 84px; }
.formular button { width: 100%; margin-top: 20px; }
.formular-fuss { margin-top: 14px; font-size: 12.5px; color: #8FA8C8; line-height: 1.5; }
.formular-fuss a { color: #BDD0E8; }
.melde {
  margin-top: 14px; font-size: 14.5px; font-weight: 600;
  padding: 12px 14px; border-radius: 9px; display: none;
}
.melde.gut  { display: block; background: rgba(37,166,91,.18); color: #7BE0A6; }
.melde.warn { display: block; background: rgba(245,176,30,.16); color: var(--sonnengelb); }

/* =========================================================================
   Fußzeile
   ========================================================================= */
.fuss { background: var(--blau-tief); color: #8FA8C8; padding-block: 34px; font-size: 14.5px; }
.fuss-gitter {
  display: flex; flex-wrap: wrap; gap: 20px 34px;
  align-items: center; justify-content: space-between;
}
.fuss-links { display: flex; flex-wrap: wrap; gap: 20px; }
.fuss a { color: #BDD0E8; text-decoration: none; }
.fuss a:hover { color: var(--weiss); text-decoration: underline; }

/* Anruf-Leiste auf kleinen Geräten */
.anrufleiste { display: none; }
@media (max-width: 720px) {
  /* Dauerhaft sichtbar: Anrufen und WhatsApp sollen jederzeit erreichbar sein,
     ohne dass erst gescrollt werden muss. Schwebend statt volle Leiste, damit
     sie auffällt, aber wenig Fläche kostet und den Inhalt durchscheinen lässt. */
  .anrufleiste {
    display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  }
  .anrufleiste a {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 15px 10px; font-weight: 700; font-size: 16px; text-decoration: none;
    border-radius: 12px; box-shadow: 0 6px 20px rgba(16,36,63,.3);
  }
  .anrufleiste svg { width: 19px; height: 19px; }
  /* Platz freihalten: sonst liegt die Leiste auf der Fusszeile und deren
     Links sind nicht mehr antippbar. */
  body { padding-bottom: 88px; }
}

/* Platzhalter, die vor dem Livegang ersetzt werden müssen */
/* Kein nowrap: die Hinweise sind teils ganze Saetze und wuerden die Seite
   sonst seitlich aufziehen. */
.platzhalter {
  background: #FFF3CD; color: #7A5A00; padding: 1px 6px;
  border-radius: 4px; font-weight: 700;
}

/* =========================================================================
   Verwertung des Mehrertrags: selbst verbrauchen oder einspeisen
   ========================================================================= */
.nutzung {
  margin-top: 24px; padding: 18px 20px 16px;
  border: 1px solid var(--linie); border-radius: 12px;
}
/* legend als Blockelement fuehren: mehrzeilig wuerde es sonst nur die
   erste Zeile aus dem Rahmen schneiden und der Rahmen liefe durch den Text. */
.nutzung legend {
  float: left; width: 100%; padding: 0; margin-bottom: 13px;
  font-weight: 700; font-size: 15.5px; color: var(--tiefblau);
}
.nutzung .waehler { clear: both; }
.waehler { display: flex; flex-wrap: wrap; gap: 10px; }
.waehler label { flex: 1 1 180px; cursor: pointer; }
.waehler input { position: absolute; opacity: 0; pointer-events: none; }
.waehler span {
  display: block; text-align: center;
  padding: 11px 14px; border-radius: 9px;
  border: 2px solid var(--linie); background: var(--weiss);
  font-size: 15px; font-weight: 600; color: var(--text-weich);
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.waehler label:hover span { border-color: #A9C4E6; }
.waehler input:checked + span {
  border-color: var(--sonnenblau); background: var(--himmelgrau); color: var(--tiefblau);
}
.waehler input:focus-visible + span {
  outline: 3px solid var(--sonnengelb); outline-offset: 2px;
}

.preisfeld {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 16px;
}
.preisfeld label { font-size: 15px; font-weight: 600; color: var(--tiefblau); }
.preiseingabe { display: flex; align-items: center; gap: 9px; }
.preiseingabe input {
  width: 88px; font-family: inherit; font-size: 17px; font-weight: 700;
  color: var(--tiefblau); text-align: right;
  padding: 9px 11px; border: 2px solid var(--linie); border-radius: 8px;
  background: var(--weiss); font-variant-numeric: tabular-nums;
}
.preiseingabe input:focus {
  outline: 3px solid var(--sonnengelb); outline-offset: 2px; border-color: var(--sonnenblau);
}
.preiseingabe span { font-size: 14.5px; color: var(--text-weich); }
.preis-erklaerung {
  margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--text-weich);
}

/* Wert im ersten Jahr negativ: keine Erfolgsfarbe, sondern neutraler Hinweis */
.wert.hervor.minus { background: var(--himmelgrau); }
.wert.hervor.minus dd { color: var(--text-weich); }

/* =========================================================================
   Ratgeber-Seiten
   ========================================================================= */
.ratgeber-kopf { background: var(--tiefblau); color: var(--weiss); padding-block: clamp(44px, 6vw, 72px); }
.ratgeber-kopf h1 { color: var(--weiss); max-width: 20ch; }
.ratgeber-kopf .vorspann {
  margin-top: 18px; font-size: clamp(17px, 2vw, 19.5px);
  color: #BDD0E8; max-width: 58ch; line-height: 1.6;
}
.brotkrume { font-size: 14px; color: #9FB6D4; margin-bottom: 18px; }
.brotkrume a { color: #BDD0E8; text-decoration: none; }
.brotkrume a:hover { color: var(--weiss); text-decoration: underline; }

.beitrag {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
/* erste Zeile von Text und Randspalte auf gleicher Höhe beginnen lassen */
.beitrag > .text > :first-child { margin-top: 0; }
@media (max-width: 900px) { .beitrag { grid-template-columns: minmax(0, 1fr); } }

.text h2 { font-size: clamp(24px, 3vw, 31px); margin-top: 46px; }
.text h2:first-child { margin-top: 0; }
.text h3 { margin-top: 30px; }
.text p, .text ul, .text ol { margin-top: 15px; color: var(--text-weich); max-width: 68ch; }
.text ul, .text ol { padding-left: 22px; }
.text li { margin-top: 8px; }
.text li::marker { color: var(--sonnenblau); }
.text strong { color: var(--anthrazit); }
.text a { color: var(--sonnenblau); }

.merksatz {
  margin-top: 26px; padding: 20px 24px;
  background: var(--himmelgrau); border-radius: 12px;
  border-left: 4px solid var(--sonnenblau);
}
.merksatz p { margin-top: 0; color: var(--tiefblau); font-weight: 600; max-width: 62ch; }

.tabelle { margin-top: 26px; overflow-x: auto; }
.tabelle table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15.5px; }
.tabelle th, .tabelle td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linie); }
.tabelle th { font-weight: 700; color: var(--tiefblau); background: var(--himmelgrau); }
.tabelle td { color: var(--text-weich); }
.tabelle tr:last-child td { border-bottom: none; }
.tabelle td strong { color: var(--anthrazit); }

.quellen { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--linie); }
.quellen h2 { font-size: 17px; margin-top: 0; }
.quellen ol { font-size: 14px; }
.quellen li { color: var(--text-weich); }

/* Randspalte */
.randspalte { position: sticky; top: 88px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (max-width: 900px) { .randspalte { position: static; } }

.aufruf {
  background: var(--tiefblau); color: var(--weiss);
  border-radius: 16px; padding: 24px;
}
.aufruf h3 { color: var(--weiss); font-size: 19px; }
.aufruf p { margin-top: 10px; font-size: 14.5px; color: #BDD0E8; }
.aufruf .telefon-klein {
  display: block; margin-top: 16px; font-size: 26px; font-weight: 800;
  color: var(--weiss); text-decoration: none; letter-spacing: -.02em;
}
.aufruf .telefon-klein:hover { color: var(--sonnengelb); }
.aufruf .knopf { width: 100%; margin-top: 14px; }
.aufruf small { display: block; margin-top: 12px; font-size: 12.5px; color: #8FA8C8; }

.weiterlesen {
  border: 1px solid var(--linie); border-radius: 16px; padding: 22px 24px;
}
.weiterlesen h3 { font-size: 16px; }
.weiterlesen ul { list-style: none; padding: 0; margin: 14px 0 0; }
.weiterlesen li { margin-top: 12px; }
.weiterlesen a {
  color: var(--tiefblau); text-decoration: none; font-weight: 600; font-size: 15px;
  line-height: 1.35; display: block;
}
.weiterlesen a:hover { color: var(--sonnenblau); text-decoration: underline; }

.orte {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding: 0; list-style: none;
}
.orte li {
  margin: 0; padding: 7px 13px; border-radius: 999px;
  background: var(--himmelgrau); color: var(--tiefblau);
  font-size: 14.5px; font-weight: 600;
}

/* =========================================================================
   Verweise auf die Ratgeber-Seiten
   ========================================================================= */
.ratgeber-liste {
  margin-top: 42px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px;
}
.ratgeber-karte {
  display: block; text-decoration: none;
  border: 1px solid var(--linie); border-radius: 14px;
  padding: 24px 24px 26px;
  transition: border-color .16s ease, background-color .16s ease;
}
.ratgeber-karte:hover { border-color: var(--sonnenblau); background: var(--himmelgrau); }
.ratgeber-karte h3 { font-size: 18.5px; }
.ratgeber-karte p { margin-top: 10px; font-size: 15px; color: var(--text-weich); }

/* Ratgeber-Seiten laufen auf schmalerer Bahn: so füllen Textspalte und
   Randspalte die Breite aus, ohne die Zeilenlänge über das Lesemaß zu treiben. */
body.ratgeber { --breite: 1120px; }
body.ratgeber .text p,
body.ratgeber .text ul,
body.ratgeber .text ol { max-width: 72ch; }

/* Ankersprünge: Abstand für die stehende Kopfzeile, sonst verdeckt sie
   die ersten Zeilen des angesprungenen Abschnitts. */
section[id], div[id] { scroll-margin-top: 78px; }

/* Einzugsgebiet auf der Startseite */
.gebiet-fuss { margin-top: 22px; color: var(--text-weich); max-width: 62ch; }

/* =========================================================================
   Klappmenü für schmale Bildschirme
   ========================================================================= */
.menue-knopf {
  display: none; align-items: center; gap: 8px;
  font-family: inherit; font-size: 15px; font-weight: 700; color: var(--tiefblau);
  background: transparent; border: 2px solid var(--linie); border-radius: 10px;
  padding: 9px 14px; cursor: pointer;
}
.menue-knopf svg { width: 20px; height: 20px; }
.menue-knopf[aria-expanded="true"] { border-color: var(--sonnenblau); color: var(--sonnenblau); }

@media (max-width: 900px) {
  .menue-knopf { display: inline-flex; order: 3; }
  .kopf-inhalt { flex-wrap: wrap; }

  /* Navigation klappt unter der Kopfzeile auf, statt ganz zu verschwinden */
  .navi {
    display: none; order: 4; flex-basis: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--linie); margin-top: 12px; padding-top: 6px;
  }
  .navi.offen { display: flex; }
  .navi a {
    padding: 13px 2px; border-bottom: 1px solid var(--linie);
    border-top: none; font-size: 16.5px;
  }
  .navi a:last-child { border-bottom: none; }
  .navi a:hover { border-bottom-color: var(--linie); }
}

/* Auf schmalen Geräten weicht die Zusatzzeile des Logos, damit Wortmarke
   und Menüknopf in eine Zeile passen. */
@media (max-width: 520px) {
  .logo-zusatz { display: none; }
  .logo-name { font-size: 18px; }
  .menue-knopf { padding: 9px 12px; }
}

/* =========================================================================
   Einzugsgebiet: Karte und Anfahrtszonen
   ========================================================================= */
.gebiet-gitter {
  margin-top: 40px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: clamp(24px, 3.5vw, 44px); align-items: stretch;
}
@media (max-width: 900px) { .gebiet-gitter { grid-template-columns: 1fr; } }

.karte-feld {
  background: var(--himmelgrau); border-radius: 16px; padding: 14px;
  display: flex; align-items: center; justify-content: center;
}
.karte { width: 100%; height: auto; display: block; }
.karte text { font-family: var(--schrift); }
.k-ring { font-size: 12px; font-weight: 700; fill: #7C9AC4; }
.k-heim { fill: var(--sonnengelb); stroke: var(--tiefblau); stroke-width: 2.5; }
.k-heimtext {
  font-size: 17px; font-weight: 800; fill: var(--tiefblau);
  text-anchor: middle; letter-spacing: -.01em;
}
.k-ort { stroke: #fff; stroke-width: 1.2; }
.k-z1 { fill: var(--sonnenblau); }
.k-z2 { fill: #5385CE; }
.k-z3 { fill: #9BB8DF; }
.k-ortstext { font-size: 12.5px; font-weight: 600; fill: #46586F; }
.k-ortstext.k-links { text-anchor: end; }

/* Zonen: drei gleich hohe Blöcke, damit die Spalte neben der Karte aufgeht */
.zonen { display: grid; grid-template-rows: repeat(3, 1fr); gap: 14px; }
.zone {
  border: 1px solid var(--linie); border-radius: 14px;
  padding: 18px 20px; display: flex; flex-direction: column;
}
.zone-1 { border-color: var(--sonnenblau); background: var(--himmelgrau); }

.zone-kopf { display: flex; align-items: flex-start; gap: 12px; }
.zone-punkt {
  width: 14px; height: 14px; border-radius: 50%; flex: none; margin-top: 5px;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(16,36,63,.15);
}
.zone-1 .zone-punkt { background: var(--sonnenblau); }
.zone-2 .zone-punkt { background: #5385CE; }
.zone-3 .zone-punkt { background: #9BB8DF; }

.zone-kopf b {
  display: block; font-size: 17.5px; font-weight: 800; color: var(--tiefblau);
  letter-spacing: -.015em; line-height: 1.2;
}
.zone-kopf span { font-size: 14.5px; font-weight: 600; color: var(--sonnenblau); }
.zone-orte {
  margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--anthrazit);
}
.zone-zusatz {
  margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--text-weich);
}
.k-ringgrund { fill: #EEF4FC; }
.k-ring { text-anchor: middle; }

/* Auf schmalen Bildschirmen schrumpft das SVG so stark, dass die Ortsnamen
   unlesbar würden. Dort bleibt die Karte eine reine Zonengrafik, die Namen
   stehen in der Liste darunter. */
@media (max-width: 700px) {
  /* Nicht alle Namen verschwinden: einige weit auseinander liegende Orte
     bleiben als Orientierung stehen, vergrößert und damit lesbar. */
  .karte .k-ortstext { display: none; }
  .karte .k-ortstext.k-anker { display: block; font-size: 21px; fill: #35485F; }
  .karte .k-heimtext { font-size: 27px; }
  .karte .k-ring { font-size: 19px; }
  .karte .k-ringgrund { width: 70px; height: 28px; }
  .karte .k-ort { r: 5; }
  .karte .k-ankerpunkt { r: 7; }
}

/* =========================================================================
   Wissen: Übersicht der Beiträge
   ========================================================================= */
.beitrag-liste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;
}
.beitrag-karte {
  display: flex; flex-direction: column; text-decoration: none;
  border: 1px solid var(--linie); border-radius: 16px; padding: 26px 28px 30px;
  transition: border-color .16s ease, background-color .16s ease;
}
.beitrag-karte:hover { border-color: var(--sonnenblau); background: var(--himmelgrau); }
.karte-marke {
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sonnenblau); margin-bottom: 12px;
}
.beitrag-karte h2 { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.2; }
.beitrag-karte p { margin-top: 12px; font-size: 15.5px; color: var(--text-weich); }

/* =========================================================================
   Anlagentypen
   ========================================================================= */
.typen {
  margin-top: 36px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px;
  background: var(--linie); border: 1px solid var(--linie); border-radius: 16px;
  overflow: hidden;
}
.typ { background: var(--weiss); padding: 22px 24px 24px; }
.typ h3 { margin-bottom: 8px; font-size: clamp(17px, 1.8vw, 19px); }
.typ p { color: var(--text-weich); font-size: 15px; }

/* Zusatzzeile in der Hauptüberschrift: nennt Leistung und Ort, ohne der
   Kernaussage die Wirkung zu nehmen. */
.h1-akzent { color: #7FB0F0; }
.h1-zusatz {
  display: block; margin-top: 14px;
  font-size: clamp(16px, 1.9vw, 20px); font-weight: 600;
  letter-spacing: .01em; color: #9FB6D4;
}

/* Überschrift in Randspalten und Formularen: sieht aus wie eine Überschrift,
   steht aber nicht in der Gliederung der Seite. */
.rand-titel {
  font-weight: 800; font-size: 19px; color: var(--tiefblau);
  letter-spacing: -.015em; line-height: 1.25;
}
.aufruf .rand-titel { color: var(--weiss); }
.weiterlesen .rand-titel { font-size: 16px; }

/* Fragen: Überschrift beginnt auf Höhe der ersten Frage */
.fragen .frage:first-child summary { padding-top: 0; }

/* =========================================================================
   Bilder vom Reinigungsprozess
   ========================================================================= */
.prozess-bilder {
  margin-top: 42px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px;
}
.prozess-bilder figure { margin: 0; }
.prozess-bilder img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; aspect-ratio: 620/729; object-fit: cover;
}
.prozess-bilder figcaption {
  margin-top: 13px; font-size: 14.5px; line-height: 1.5; color: var(--text-weich);
}

/* =========================================================================
   Handy: Lesbarkeit und Bedienbarkeit
   Kleine Schriften anheben, Tippziele auf mindestens 44 px, Abstände straffen.
   ========================================================================= */
@media (max-width: 700px) {

  /* Fließtext: unter 14px wird auf Armlänge mühsam */
  .ba-fuss,
  .rechner-hinweis,
  .preis-erklaerung,
  .zone-zusatz,
  .prozess-bilder figcaption,
  .band-punkt span,
  .formular-fuss,
  .gebiet-fuss { font-size: 14.5px; line-height: 1.55; }

  .zone-orte { font-size: 15px; }
  .schritt p, .typ p, .vorteil p { font-size: 16px; }
  .abschnitt-kopf p { font-size: 17px; }

  /* Tippziele */
  .menue-knopf { padding: 12px 14px; }
  .knopf { padding: 15px 22px; font-size: 16.5px; }
  .feld input, .feld textarea { padding: 14px; font-size: 16px; }
  .preiseingabe input { padding: 13px 12px; width: 96px; }
  .waehler span { padding: 14px; }
  .frage summary { padding: 18px 40px 18px 0; }

  /* Schieberegler: größerer Griff, damit er sicher zu treffen ist */
  input[type=range] { height: 46px; }
  input[type=range]::-webkit-slider-thumb { width: 34px; height: 34px; margin-top: -14px; }
  input[type=range]::-moz-range-thumb { width: 34px; height: 34px; }
  input[type=range]::-webkit-slider-runnable-track { height: 8px; }
  input[type=range]::-moz-range-track { height: 8px; }

  /* Abstände straffen: auf dem Handy wird sonst zu viel gescrollt */
  :root { --luft: 52px; }
  .vorteil { padding-block: 20px; }
  .rechner { padding: 20px 18px 24px; }
  .zonen { gap: 12px; }
  .zone { padding: 16px 18px; }

  /* Der Regler braucht auf dem Handy mehr Höhe, sonst ist der Griff winzig */
  .ba { aspect-ratio: 4/3; }
  .ba-knopf { width: 52px; height: 52px; }
  .ba-marke { font-size: 11px; padding: 7px 12px; }

  /* Prozessbilder: zwei nebeneinander statt drei lange Spalten untereinander */
  .prozess-bilder { grid-template-columns: 1fr; gap: 26px; }
  .prozess-bilder img { aspect-ratio: 4/3; }

  /* Werte im Rechner größer, sie sind die Kernaussage */
  .wert dd { font-size: 21px; }
  .ring-mitte b { font-size: 30px; }
}

/* Sehr schmale Geräte */
@media (max-width: 380px) {
  .hero-knoepfe .knopf { width: 100%; }
  .preis-zeilen { gap: 20px; }
  .beispiel { padding: 20px 22px; }
}

/* Verweis auf den Wissensbereich unter den Fragen */
.fragen-mehr {
  margin-top: 26px; font-size: 15.5px; color: var(--text-weich); max-width: 62ch;
}

/* =========================================================================
   Einklappbare Nebeninhalte
   Lange Erläuterungen bleiben verfügbar, kosten aber keine Bildschirmhöhe.
   ========================================================================= */
.annahmen, .zone-orte-klapp { margin-top: 16px; }
.annahmen summary, .zone-orte-klapp summary {
  cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 700; color: var(--sonnenblau);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 0;
}
.annahmen summary::-webkit-details-marker,
.zone-orte-klapp summary::-webkit-details-marker { display: none; }
.annahmen summary::after, .zone-orte-klapp summary::after {
  content: ''; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-top: -4px; transition: transform .2s ease;
}
.annahmen[open] summary::after, .zone-orte-klapp[open] summary::after {
  transform: rotate(-135deg); margin-top: 2px;
}
.annahmen p {
  margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--text-weich);
  border-top: 1px solid var(--linie); padding-top: 12px;
}
.zone-orte-klapp p {
  margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--anthrazit);
}
@media (max-width: 700px) {
  .annahmen p { font-size: 14.5px; }
  /* Bilder im Ablauf flacher, damit die Schritte nicht zu hoch werden */
  .schritt img { aspect-ratio: 16/10; }
}

@media (max-width: 700px) {
  /* Karte kompakter: die Zonen darunter tragen die Aussage */
  .karte-feld { padding: 10px; }
  .gebiet-gitter { gap: 18px; }
  /* Kontakt straffen */
  .telefon { margin-top: 20px; }
  .formular { padding: 20px 18px 22px; }
  .feld { margin-top: 14px; }
  .feld textarea { min-height: 68px; }
}

/* Zusatzzeile der Hauptüberschrift braucht Luft nach oben, sonst klebt sie */
@media (max-width: 700px) {
  .h1-zusatz { margin-top: 16px; line-height: 1.35; }
  .hero-text > * + * { margin-top: 18px; }
  .hero p.vorspann { font-size: 17px; }
}

/* =========================================================================
   Tippflächen auf dem Handy
   Alles, was bedient wird, ist mindestens 44 px hoch, sonst trifft man es mit
   dem Daumen nicht zuverlässig. Steht bewusst am Dateiende, weil die
   Grundregeln der einzelnen Bausteine sonst dagegen gewinnen würden.
   Links mitten im Fließtext bleiben ausgenommen: zusätzliche Höhe würde dort
   den Zeilenfall auseinanderreißen.
   ========================================================================= */
@media (max-width: 720px) {
  .logo { min-height: 44px; }
  .telefon { padding: 6px 0; }
  .annahmen summary, .zone-orte-klapp summary { padding: 13px 0; }
  .frage summary { min-height: 44px; }
  .fuss-links { gap: 2px 22px; }
  .fuss-links a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Ratgeber-Seiten: Randspalte und ihre Bedienelemente */
  .aufruf .telefon-klein { min-height: 44px; display: flex; align-items: center; }
  /* Knopftext darf hier umbrechen. Mit nowrap bliebe er breiter als die
     Spalte und wuerde seitlich herausstehen. */
  .aufruf .knopf { white-space: normal; text-align: center; }
  .weiterlesen ul { display: grid; }
  .weiterlesen li a { display: flex; align-items: center; min-height: 44px; }

  /* Deutsche Komposita wie "Photovoltaikreinigung" passen in einer grossen
     Ueberschrift nicht in 335 px und schieben die Seite seitlich auf.
     Getrennt wird nur an den im HTML gesetzten ­-Stellen: die automatische
     Trennung des Browsers macht daraus "Photovolta-ikreinigung".
     overflow-wrap ist die Rueckfalloption fuer alles andere. */
  h1, h2, h3 { hyphens: manual; overflow-wrap: break-word; }
}

/* Sehr schmale Handys (320 bis 360 px): die Wortmarke PADERSTRAHL ist sonst
   so breit, dass der Menueknopf in eine zweite Zeile rutscht. */
@media (max-width: 360px) {
  .logo { gap: 8px; }
  .logo svg { width: 34px; height: 28px; }
  .logo-name { font-size: 15.5px; }
  .kopf-inhalt { flex-wrap: nowrap; gap: 10px; }
  .menue-knopf { padding-inline: 12px; }
}