/* Fux Sanitaer- und Heizungs-Notdienst – Stylesheet
   Mobile-first; Breakpoints 768px (Tablet) und 1025px (Desktop, wie Elementor im Original).
   Alle Farben nur ueber die Tokens in :root. Messwerte: referenz/abh-zusatzmessungen.md */

/* ===== Schriften (selbst gehostet, latin) ===== */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-kursiv.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/poppins-800.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/roboto-variabel.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/courier-prime-400.woff2") format("woff2"); }
/* Hansbasel (Hausschrift der Schwestermarke, User 03.11.2026: „du sollst diese aber auch für fux nehmen“): eine Familie aus zwei Schnitten –
   bis Stärke 500 der Text-Schnitt, ab 600 der Heading-Schnitt (fett). Kein künstliches Fett, keine Kursive (wird schräg gestellt).
   Fehlende Zeichen (~ § © ó → ≥) kommen aus Poppins (nächste Schrift im Stapel) */
@font-face { font-family: "Hansbasel"; font-style: normal; font-weight: 100 500; font-display: swap; src: url("../fonts/hansbasel-text.woff2") format("woff2"); }
@font-face { font-family: "Hansbasel"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("../fonts/hansbasel-heading.woff2") format("woff2"); }

/* ===== Design-Tokens ===== */
:root {
  --farbe-primaer: #163be1;
  --farbe-such-knopf: #1839de;
  --farbe-sektion: #1a73e8; /* nicht aufhellen: Weiss darauf hat genau 4,50:1 (WCAG AA), jede hellere Stufe faellt darunter */
  --farbe-dunkel: #1e293b;
  --farbe-dunkel-2: #1a1a2e;
  --farbe-text: #666666;
  --farbe-text-2: #555555;
  --farbe-text-3: #333333;
  --farbe-grau: #757575; /* Original #7a7a7a (4,29:1 auf Weiss); jetzt 4,61:1 (WCAG AA) */
  --farbe-eingabe-text: #475569;
  --farbe-eingabe-rand: #949494; /* Original #cccccc (1,6:1 auf Weiss); jetzt 3,03:1 (WCAG 1.4.11 Bedienelemente) */
  --farbe-hell: #f8faff;
  --farbe-rot: #e31e23; /* Original #e63946 (weisse Schrift 4,17:1); jetzt 4,69:1 (WCAG AA); auch als Textfarbe auf Weiss */
  --farbe-rot-rahmen: #ff0000;
  --farbe-gruen: #22c55e;
  --farbe-punkt-live: #008000;
  --farbe-whatsapp: #25d366;
  --farbe-stern: #fcbf02; /* Gold der Sterne im Elfsight-Widget (gemessen 01.11.2026) */
  --farbe-header-rand: #6ec1e4;
  --farbe-karten-rand: #e2e8f0;
  --farbe-trenner: #dbdbdb;
  --farbe-warn-hg: #fff0f0;
  --farbe-warn-text: #d62230; /* Gas-Warntext auf --farbe-warn-hg: Original #e63946 (3,77:1); jetzt 4,59:1 (WCAG AA) */
  --farbe-warn-rand: #f87171;
  --farbe-faq-linie: #eeeeee;
  --farbe-faq-icon: #0000ff;
  --farbe-weiss: #ffffff;
  --schatten-weich: rgba(198, 211, 206, 0.4);
  --schatten-karte: rgba(0, 0, 0, 0.06);
  --schatten-eingabe: rgba(0, 0, 0, 0.05);
  --schatten-schwebend: rgba(0, 0, 0, 0.15);
  --schrift-poppins: "Poppins", system-ui, sans-serif; /* nur noch CTA-Knöpfe (User 03.11.2026: „Bei den CTAs passt es“) */
  --schrift-hansbasel: "Hansbasel", "Poppins", system-ui, sans-serif;
  --schrift-roboto: "Roboto", system-ui, sans-serif;
  --schrift-code: "Courier Prime", "Courier New", monospace;
  --schrift-system: system-ui, -apple-system, "Segoe UI", sans-serif;
  --inhalt-breite: 1280px;
}

/* ===== Basis ===== */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding: Sprungziele (#faq usw.) landen unter der klebenden Sofort-Hilfe-Leiste statt dahinter */
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; font-family: var(--schrift-system); font-size: 16px; line-height: 1.5; color: var(--farbe-dunkel); background: var(--farbe-weiss); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--farbe-primaer); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprung-link { position: absolute; left: 10px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--farbe-primaer); color: var(--farbe-weiss); font-family: var(--schrift-roboto); }
.sprung-link:focus { top: 10px; }

/* ===== Gemeinsame Bausteine ===== */

/* Blaue Anruf-Pille „Anrufen. Der Meister fährt los." (User 01.11.2026, beide Pillen; vorher „Jetzt mit einem SHK-Profi sprechen") */
.anruf-pille { display: block; width: 100%; max-width: 500px; margin: 0 auto; padding: 15px 10px; border-radius: 50px; background: var(--farbe-sektion); color: var(--farbe-weiss); text-align: center; text-decoration: none; }
.anruf-pille__text { display: block; }
/* Schrift aller CTA-Knoepfe wie „Direkt zum Notdienst“ (User 01.11.2026: „ALLE CTAs sollen von der Schriftart so sein“, „die Nummer … etwas
   größer“): Text 18 px normal (ab 1025 px 16 px), ohne Sperrung und Unterstreichung; Nummer eigene Zeile, 22 px halbfett, nie umbrochen */
.anruf-pille__text, .hersteller__knopf, .plz-ergebnis__text { font-family: var(--schrift-poppins); font-size: 18px; font-weight: 400; line-height: 1.25; letter-spacing: normal; word-spacing: normal; text-decoration: none; }
.anruf-pille__nummer, .hersteller__nummer, .plz-ergebnis__nummer { display: block; white-space: nowrap; font-size: 22px; font-weight: 600; line-height: 28px; }
/* Puls an allen CTA-Pillen und Fehlercode-Knoepfen (User 01.11.2026: „0,5x schneller“ = alle 2,7 s statt 4 s; „alle CTAs“ = blaue und rote
   Pillen + Fehlercode-Knoepfe, nicht Kopf-Knopf, rote Leiste, WhatsApp): Ring in der Knopffarbe + leichtes Anheben, endlos;
   reduzierte Bewegung: global aus. Ohne color-mix() bleibt nur das Anheben */
.anruf-pille, .notdienst-pille, .hersteller__knopf, .plz-ergebnis__knopf { animation: cta-puls 2.7s ease-out infinite; }
.anruf-pille { --puls-farbe: var(--farbe-sektion); }
.plz-ergebnis__knopf { --puls-farbe: var(--farbe-such-knopf); }
.notdienst-pille, .hersteller__knopf { --puls-farbe: var(--farbe-rot); }
@keyframes cta-puls {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--puls-farbe) 55%, transparent); transform: scale(1); }
  12% { transform: scale(1.03); }
  30% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--puls-farbe) 0%, transparent); transform: scale(1); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--puls-farbe) 0%, transparent); transform: scale(1); }
}

/* Rote Pille „Direkt zum Notdienst" (mobil). Container, damit die Nummer ihre Schrift nach der Innenbreite der Pille waehlt (cqw) */
.notdienst-pille { container-type: inline-size; display: flex; align-items: center; justify-content: center; gap: 0; width: calc(100% - 20px); max-width: 500px; margin: 0 auto; padding: 15px 20px; border-radius: 100px; background: var(--farbe-rot); color: var(--farbe-weiss); text-decoration: none; }
/* Icon samt je 22 px Luft als eine 88-px-Box (Bild 44 px, mittig). Die Box darf bis 54 px schrumpfen: bei schmalem Handy oder langer Nummer
   wird die Luft kleiner, statt dass der Text umbricht. Bei 375 px mit kurzer Nummer ist nichts zu schrumpfen, die Masse bleiben wie in der Vorlage. */
.notdienst-pille__icon { flex: 0 1 88px; min-width: 54px; height: 44px; object-fit: contain; }
.notdienst-pille__text { flex-shrink: 0; font-family: var(--schrift-poppins); font-size: 18px; font-weight: 400; line-height: 1.25; color: var(--farbe-weiss); text-align: center; }
/* Die Nummer bricht nie um. Schrift 22 px; auf schmaler Pille so klein, dass auch eine lange DACH-Nummer (+49 (0) und zehn Ziffern, 10,7 em)
   neben dem Icon (mind. 54 px) in die Innenbreite passt. Ohne Container-Einheiten bleibt es bei 22 px. */
.notdienst-pille__nummer { display: block; white-space: nowrap; font-size: 22px; font-size: min(22px, calc((100cqw - 54px) / 10.7)); font-weight: 600; line-height: 28px; }

/* Haekchen-Liste (Hero, Vorteile) – Abstaende wie Elementor-Icon-Liste: Icon, 5 px Icon-Polster, 5 px Text-Polster */
.haken-liste { display: flex; flex-direction: column; gap: 15px; }
.haken-liste__punkt { display: flex; align-items: flex-start; gap: 10px; font-family: var(--schrift-hansbasel); font-size: 14px; line-height: 28px; letter-spacing: 1px; word-spacing: 4px; color: var(--farbe-dunkel); }
.haken-liste__icon { flex: 0 0 17px; width: 17px; height: 17px; margin: 10px 2px 0; fill: var(--farbe-gruen); }
.haken-liste--fett .haken-liste__punkt { gap: 5px; font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: 0; word-spacing: 0; color: var(--farbe-dunkel-2); }
.haken-liste--fett .haken-liste__icon { margin: 6px 4px 0 0; }

/* „Jetzt verfuegbar …" mit gruenem Punkt. Zeilen unter den CTAs auf allen Breiten 14 px kursiv wie auf den Vorbild-Seiten des Users
   (User 01.11.2026); Desktop behaelt seine Zeilenhoehe 34 px */
/* Zeilen unter den CTAs: mobil 11 px kursiv, 4 px unter dem CTA (User 01.11.2026: mobil „Noch zu groß/zu weit weg“); ab 768 px 12 px, 8 px
   („wie auf Bild 4 nur näher am CTA“; 12 px Poppins entspricht optisch den 14 px der Vorbild-Seiten, x-Hoehe 8 zu 7 px).
   Die Eltern (.hero, .vorteile) haben gap 20 px -> margin-top -16 px bzw. -12 px */
/* Wortabstand mobil 2 px (Hansbasel seit 03.11.2026 breiter als Poppins: bei 4 px brach „Jetzt verfügbar …“ bei 390 px um), ab 768 px 4 px */
.verfuegbar { margin-top: -16px; font-family: var(--schrift-hansbasel); font-size: 11px; font-style: italic; line-height: 15.4px; letter-spacing: 0.5px; word-spacing: 2px; color: var(--farbe-dunkel); text-align: center; }
.verfuegbar::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--farbe-punkt-live); }

/* Logo-Reihe */
.logo-reihe { display: flex; align-items: center; justify-content: center; gap: 10px; }
.logo-reihe__bild { width: 107px; min-width: 0; height: 101px; object-fit: contain; }
/* ProvenExpert-Siegel (User 31.10.2026): nur mobil, statisch ohne Link; schrumpfen unter 360 px mit */
/* ProvenExpert-Siegel ueber der H1 (User 01.11.2026): Tablet 60 px. Mobil fuellt die Reihe 80 % der Breite, am Desktop ist sie so breit
   wie die erste H1-Zeile (zweite Runde 01.11.2026, Regeln beim Hero) */
.siegel-reihe { display: flex; align-items: center; justify-content: center; gap: 10px; }
.siegel-reihe__bild { width: 60px; min-width: 0; height: auto; }

/* Tablet: 10 px zwischen den Listenpunkten (Original-Tablet-CSS; Mobil und Desktop 15 px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .haken-liste { gap: 10px; }
}
/* Tablet und Desktop: Haekchen-Listen mit 34 px Zeilenhoehe und 22-px-Haken (Original-Tablet-CSS, Elementor max-width 1024px: 16 px / 34 px) */
@media (min-width: 768px) {
  .haken-liste__punkt { font-size: 16px; line-height: 34px; }
  .haken-liste__icon { flex-basis: 22px; width: 22px; height: 22px; margin: 8px 5.5px 0 0; }
  .haken-liste--fett .haken-liste__punkt { font-size: 16px; line-height: 34px; letter-spacing: 1px; word-spacing: 4px; }
  .haken-liste--fett .haken-liste__icon { margin: 8px 5.5px 0 0; }
  .verfuegbar { margin-top: -12px; font-size: 12px; line-height: 16.8px; word-spacing: 4px; }
}
@media (min-width: 1025px) {
  .anruf-pille { padding: 10px; }
  .anruf-pille__text, .hersteller__knopf, .plz-ergebnis__text { font-size: 16px; }
  .notdienst-pille { gap: 20px; }
  .notdienst-pille__icon { flex: 0 0 auto; width: 46px; min-width: 0; height: 46px; }
  .notdienst-pille__text { font-size: 16px; text-align: start; }
  .haken-liste--fett .haken-liste__punkt { font-size: 18px; }
  .verfuegbar { letter-spacing: 0.6px; }
  .logo-reihe__bild { width: 150px; height: 150px; }
}

/* ===== Kopf + Menue ===== */
/* Rahmen nur am Desktop-Kopf (der mobile Kopf des Originals hat keinen) */
.kopf { background: var(--farbe-weiss); }
.kopf__innen { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: var(--inhalt-breite); min-height: 60px; margin: 0 auto; padding: 10px; }
/* mit JS bleibt der Kopf einzeilig (das Menue ist absolut positioniert); auf schmalen Bildschirmen schrumpft die Marke statt umzubrechen */
.js .kopf__innen { flex-wrap: nowrap; }
.kopf__logo { display: flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto; text-decoration: none; }
.kopf__schild { width: auto; height: 40px; }
.kopf__marke { display: flex; flex-direction: column; line-height: 1; }
.kopf__name { font-family: var(--schrift-hansbasel); font-size: 22px; font-weight: 800; letter-spacing: 2px; color: var(--farbe-primaer); }
.kopf__unterzeile { margin-top: 3px; font-family: var(--schrift-hansbasel); font-size: 9px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--farbe-dunkel); }
.kopf__anruf { padding: 10px; border-radius: 6px; background: var(--farbe-primaer); color: var(--farbe-weiss); font-family: var(--schrift-roboto); font-size: 14px; font-weight: 600; line-height: 19.6px; letter-spacing: 1px; text-decoration: none; white-space: nowrap; }
.kopf__menue-knopf { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; border: 0; background: none; color: var(--farbe-primaer); cursor: pointer; }
.js .kopf__menue-knopf { display: flex; }
.kopf__menue-knopf svg { width: 24px; height: 24px; fill: currentColor; }
.kopf__icon-zu { display: none; }
.kopf__menue-knopf[aria-expanded="true"] .kopf__icon-auf { display: none; }
.kopf__menue-knopf[aria-expanded="true"] .kopf__icon-zu { display: block; }

/* ohne JS steht das Menue als Zeile unter dem Kopf; mit JS klappt es auf */
.menue { flex-basis: 100%; }
.js .menue { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50; border: 1px solid var(--farbe-header-rand); border-top: 0; background: var(--farbe-weiss); }
.js .menue.menue--offen { display: block; }
.menue__link { display: block; padding: 12px 20px; border-top: 1px solid var(--farbe-karten-rand); font-family: var(--schrift-hansbasel); font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 1px; color: var(--farbe-grau); text-decoration: none; }
.menue__link:hover, .menue__link:focus-visible { color: var(--farbe-primaer); }

/* ===== Sofort-Hilfe-Leiste ===== */
/* Klebt beim Scrollen oben (User 31.10.2026); unter Menue (50), schwebenden Knoepfen (40) und Banner (60) */
.sofort-leiste { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 10px; background: var(--farbe-rot); color: var(--farbe-weiss); text-decoration: none; }
.sofort-leiste__icon { font-size: 24px; line-height: 31.2px; }
.sofort-leiste__text { font-family: var(--schrift-hansbasel); font-size: 14px; font-weight: 600; line-height: 34px; letter-spacing: 1px; word-spacing: 4px; text-align: center; }
.sofort-leiste__nummer { text-decoration: underline; white-space: nowrap; } /* Nummer nie in sich umbrechen (320 px: ganze Nummer in Zeile 2) */

/* ===== Hero ===== */
.hero { display: flex; flex-direction: column; gap: 20px; max-width: var(--inhalt-breite); margin: 0 auto; padding: 60px 10px; }
/* Mobil (User 31.10.2026): Titel dicht unter der roten Leiste; CTA und Fachpartner-Leiste vor dem ersten Scrollen, Foto erst darunter
   (Variante A), 300 x 195 px zugeschnitten. Hakenliste und Verbands-Logos des Hero mobil aus: auf das Foto folgen die Google-Bewertungen und die
   Vorteile, die Logos stehen nach deren CTA. Nur Anzeige-Reihenfolge: dazwischen ist nichts fokussierbar */
@media (max-width: 767px) {
  .hero { padding-top: 10px; padding-bottom: 20px; }
  .hero > .hero__reihe { order: 1; }
  .hero > .logo-reihe, .hero__reihe > .haken-liste { display: none; }
  .hero__foto { max-width: 300px; height: 195px; margin: 0 auto; object-fit: cover; object-position: 50% 25%; }
  /* Dreizeilige Unterzeile (User 01.11.2026): damit die CTA-Pille beim Erstbesuch ueber dem kompakten Banner bleibt (390x664, 375x667,
     360x640), CTA 8 statt 20 px unter der Unterzeile, Unterzeile enger (Regel nach der Grundregel weiter unten) */
  .hero > .anruf-pille { margin-top: -12px; }
}
/* Kopf-Block: Siegel-Reihe + H1 (8 px Abstand wie vorher Hero-Abstand 20 px minus 12 px).
   Mobil (User 01.11.2026: Siegel „zu 80 % den oberen Platz ausfüllen“): damit CTA und Fachpartner-Leiste bei 375x667/390x664 im ersten
   Bildschirm bleiben, entfallen das Titel-Polster (2 x 10 px) und 4 px des Abstands.
   Desktop („so groß wie die erste Zeile der H1“): Block so breit wie sein breitester Inhalt = erste H1-Zeile (Zeilenumbruch per <br>);
   die Siegel tragen mit width: 0 nichts zur Breite bei und teilen sich danach die Reihe.
   Danach (User 01.11.2026): Siegel „bei beiden 20% kleiner“ -> jedes Siegel 0,8 x so breit. Reihe = 3 Siegel + 2 x 10 px Abstand:
   0,8 x (B - 20 px) + 20 px = 0,8 B + 4 px; mobil ist B = 80 % der Breite -> 64 % + 4 px */
.hero__kopf { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 767px) {
  .hero__kopf { gap: 4px; }
  .hero__kopf > .siegel-reihe { align-self: center; width: calc(64% + 4px); }
  .hero__kopf .siegel-reihe__bild { flex: 1 1 0; width: 0; }
  .hero__kopf > .hero__titel { padding: 0; }
}
@media (min-width: 1025px) {
  .hero__kopf { width: max-content; max-width: 100%; margin: 0 auto; }
  .hero__kopf > .siegel-reihe { align-self: center; width: calc(80% + 4px); }
  .hero__kopf .siegel-reihe__bild { flex: 1 1 0; width: 0; }
}
.hero__am-stueck { white-space: nowrap; } /* „Heizung kalt.“ nie getrennt (User 31.10.2026) */
.hero__titel { padding: 10px 0; font-family: var(--schrift-hansbasel); font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: 1px; word-spacing: 4px; color: var(--farbe-dunkel); text-align: center; }
/* Unterzeile auf allen Breiten kursiv und unterstrichen (User 31.10./01.11.2026), seit 01.11.2026 als H2 („als H2 markieren“) */
.hero__unterzeile { font-family: var(--schrift-hansbasel); font-size: 15px; font-weight: 400; font-style: italic; line-height: 27px; text-decoration: underline; text-underline-offset: 4px; color: var(--farbe-dunkel); text-align: center; }
/* Mobil (User 01.11.2026: „etwas näher an der H1 und kleiner“): 14 statt 15 px, Zeilenhoehe 21 px, 12 statt 20 px unter der H1 */
@media (max-width: 767px) {
  .hero__unterzeile { margin-top: -8px; font-size: 14px; line-height: 21px; }
}
.hero__reihe { display: flex; flex-direction: column; gap: 30px; }
.hero__foto { width: 100%; border-radius: 8px; }
/* Tablet: die Bilddatei ist 738 px breit, breiter wuerde sie unscharf hochskaliert (sonst bis 1004 px); zentriert */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero__foto { max-width: 738px; margin: 0 auto; }
}

/* Fachpartner-Leiste (User 31.10.2026): Hersteller-Logos in weissen Kapseln. Stehend am Desktop, ohne JS und bei reduzierter Bewegung;
   bis 1024 px mit JS als Laufband; Pause-Knopf nur Tablet 768-1024 px (User 31.10.2026: mobil ohne Knopf) */
.fachpartner { display: flex; flex-direction: column; gap: 10px; }
.fachpartner__kopf { display: flex; align-items: center; justify-content: center; gap: 10px; }
.fachpartner__titel { font-family: var(--schrift-hansbasel); font-size: 14px; font-weight: 600; line-height: 24px; letter-spacing: 1px; color: var(--farbe-dunkel); text-align: center; }
/* Hervorhebung (User 31.10.2026): kursiv, unterstrichen. Der Puls ist seit 01.11.2026 am ersten CTA (siehe .anruf-pille) */
.fachpartner__hervor { display: inline-block; font-style: italic; text-decoration: underline; text-decoration-color: var(--farbe-primaer); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fachpartner__pause { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--farbe-eingabe-rand); border-radius: 50%; background: var(--farbe-weiss); color: var(--farbe-dunkel); cursor: pointer; }
.fachpartner__icon { width: 12px; height: 12px; fill: currentColor; }
.fachpartner__icon--start, .fachpartner__pause[aria-pressed="true"] .fachpartner__icon--pause { display: none; }
.fachpartner__pause[aria-pressed="true"] .fachpartner__icon--start { display: block; }
.fachpartner__fenster { padding: 4px 0; } /* Platz fuer den Kapsel-Schatten */
.fachpartner__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.fachpartner__liste--kopie { display: none; }
.fachpartner__kapsel { display: flex; flex: 0 0 auto; align-items: center; height: 44px; padding: 0 14px; border: 1px solid var(--farbe-karten-rand); border-radius: 50px; background: var(--farbe-weiss); box-shadow: 0 1px 4px var(--schatten-karte); }
.fachpartner__logo { width: auto; max-width: none; height: 20px; }
/* Laufband: Liste und Kopie stehen nebeneinander, das Band laeuft um genau eine Runde (-50 %) und beginnt dann nahtlos von vorn.
   Das Fenster reicht bis an den Bildschirmrand (Hero-Polster 10 px) */
@media (min-width: 768px) and (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .js .fachpartner__pause { display: flex; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .js .fachpartner__fenster { overflow: hidden; margin: 0 -10px; }
  .js .fachpartner__band { display: flex; width: max-content; animation: fachpartner-lauf 32s linear infinite; }
  .js .fachpartner__liste { flex-wrap: nowrap; padding-right: 10px; }
  .js .fachpartner__liste--kopie { display: flex; }
  /* Nur der Pause-Knopf (Tablet) haelt an; Antippen oder Maus darueber nicht (User 31.10.2026: soll endlos weiterlaufen) */
  .fachpartner--pause .fachpartner__band { animation-play-state: paused; }
}
@keyframes fachpartner-lauf { to { transform: translateX(-50%); } }
/* Desktop: alle 8 Kapseln in einer Reihe auch bei 1025 px (970 px Innenbreite) */
@media (min-width: 1025px) {
  .fachpartner__liste { gap: 8px; }
  .fachpartner__kapsel { padding: 0 12px; }
}

/* ===== Vorteile ===== */
.vorteile { display: flex; flex-direction: column; gap: 20px; max-width: var(--inhalt-breite); margin: 0 auto; padding: 0 10px 30px; }
/* ProvenExpert-Bewertungen vorne auf allen Breiten (User 03.11.2026, vorher Google/Elfsight). Mobil (User 31.10.2026): Verbands-Logos nach dem CTA, zweiter Satzteil der Punkte kursiv */
@media (max-width: 767px) {
  .haken-liste__zusatz { font-style: italic; }
}
@media (min-width: 768px) {
  .vorteile > .logo-reihe { display: none; }
}
/* ProvenExpert-Widget (#pewl, User 03.11.2026): sein CSS rechnet mit den Browser-Grundwerten. Unsere Basis-Regeln (border-box, Bilder als Block)
   gelten darin nicht, sonst schrumpft es am Desktop und das Logo ueberdeckt die Note (gemessen 03.11.2026 gegen eine leere Seite) */
.pe-bewertungen *, .pe-bewertungen *::before, .pe-bewertungen *::after { box-sizing: content-box; }
.pe-bewertungen img { display: inline; max-width: none; }
/* Platz fuer das spaeter geladene Widget freihalten (kein Springen der Seite). Hoehen und Stufen gemessen 03.11.2026; die Stufen sind die
   Umbrueche im CSS des Widgets (bis 400 px, bis 991 px, ab 992 px). Ohne JS bleibt der Kasten leer und ohne Hoehe */
.js .pe-bewertungen { min-height: 217px; }
@media (min-width: 401px) {
  .js .pe-bewertungen { min-height: 202px; }
}
@media (min-width: 992px) {
  .js .pe-bewertungen { min-height: 235px; }
}
/* Lesbarkeit (User 04.11.2026): mobil Abschnittsueberschriften 24 px, Unterueberschriften 18 px, Fliesstext 16 px (Zeilenhoehe 1,6),
   Warnboxen 15 px; ab 1025 px Fliesstext 18/28 px und Textspalten hoechstens 720 px breit */
/* ===== Google-Bewertungen ===== */
/* Seit 03.11.2026 eigener Abschnitt hinter dem Einsatzgebiet (vorher erstes Element der Vorteile): Breite und Seitenrand wie die Vorteile.
   Ueberschrift mit goldenen Sternen darunter ueber dem Widget (User 01.11.2026); Sternfarbe = Sterne im Elfsight-Widget */
.bewertungen { display: flex; flex-direction: column; gap: 6px; max-width: var(--inhalt-breite); margin: 0 auto; padding: 0 10px 40px; }
.bewertungen__titel { font-family: var(--schrift-hansbasel); font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; color: var(--farbe-dunkel); text-align: center; }
.bewertungen__sterne { display: flex; justify-content: center; gap: 4px; margin-bottom: 10px; }
.bewertungen__stern { width: 26px; height: 26px; fill: var(--farbe-stern); }
/* Zweiter Block hinter den Einsaetzen (User 03.11.2026): gleiche Optik, aber eigener Abstand oben, weil davor die Einsaetze-Flaeche endet */
.bewertungen--mehr { padding-top: 40px; }
/* Blaue Anruf-Pille nach dem Widget (User 03.11.2026: „nach dem 2ten Google Widget ein normaler CTA“): 30 px Luft wie bei den Pillen zwischen den Einsaetzen */
.bewertungen--mehr > .anruf-pille { margin-top: 24px; }
@media (min-width: 1025px) {
  .bewertungen__titel { font-size: 30px; }
  .bewertungen__stern { width: 30px; height: 30px; }
  .bewertungen--mehr { padding-top: 70px; }
}

/* ===== Einsaetze ===== */
/* 6 echte Faelle (User 03.11.2026, Mockup abgenommen): Karte weiss mit Kartenrand, Medien 3:4 hochkant mit Ort-Plakette, Kurzfassung +
   aufklappbare ganze Geschichte (<details>). Auf allen Breiten untereinander in einer Spalte (User 03.11.2026: „die ganzen Fälle untereinander
   anordnen wie Shorts“; vorher Tablet 2 Spalten, Desktop 3 x 2), nach Fall 3 und Fall 6 die rote Notdienst-Pille */
.einsaetze { padding: 40px 0 50px; background: var(--farbe-hell); }
.einsaetze__titel { padding: 0 10px; font-family: var(--schrift-hansbasel); font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; color: var(--farbe-dunkel); text-align: center; }
.einsaetze__unterzeile { margin: 8px 10px 22px; font-family: var(--schrift-hansbasel); font-size: 16px; line-height: 1.5; color: var(--farbe-text-3); text-align: center; }
.einsaetze__reihe { display: grid; gap: 20px; max-width: 480px; margin: 0 auto; padding: 4px 16px 0; }
.einsatz { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--farbe-karten-rand); border-radius: 7px; background: var(--farbe-weiss); box-shadow: 1px 1px 5px 0 var(--schatten-weich); }
/* Standbild und Clip liegen uebereinander; der Clip blendet erst ein, wenn er laeuft (Klasse .laeuft aus js/main.js) */
.einsatz__medien { position: relative; aspect-ratio: 3 / 4; background: var(--farbe-dunkel); }
.einsatz__bild, .einsatz__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.einsatz__video { opacity: 0; transition: opacity 0.3s; }
.einsatz__video.laeuft { opacity: 1; }
.einsatz__ort { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 7px; border-radius: 999px; background: var(--farbe-weiss); box-shadow: 0 1px 4px var(--schatten-schwebend); font-family: var(--schrift-hansbasel); font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--farbe-dunkel); }
.einsatz__ort svg { width: 15px; height: 15px; fill: var(--farbe-rot); }
/* Anhalten/Abspielen (Knopf aus js/main.js): Pause-Striche, gedrueckt ein Dreieck */
.einsatz__pause { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--farbe-weiss); box-shadow: 0 1px 4px var(--schatten-schwebend); cursor: pointer; }
.einsatz__pause::before { content: ""; width: 10px; height: 12px; border-inline: 3px solid var(--farbe-dunkel); box-sizing: border-box; }
.einsatz__pause[aria-pressed="true"]::before { width: 0; height: 0; border-inline: 0; border-block: 7px solid transparent; border-left: 11px solid var(--farbe-dunkel); margin-left: 3px; }
.einsatz__text { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.einsatz__zeit { font-family: var(--schrift-hansbasel); font-size: 13px; line-height: 1.4; color: var(--farbe-grau); }
.einsatz__zeit strong { font-weight: 600; color: var(--farbe-primaer); }
.einsatz__zitat { font-family: var(--schrift-hansbasel); font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--farbe-dunkel); }
.einsatz__kurz, .einsatz__ganz p { font-family: var(--schrift-hansbasel); font-size: 16px; line-height: 1.6; color: var(--farbe-text-3); }
.einsatz__ende { display: flex; gap: 8px; font-family: var(--schrift-hansbasel); font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--farbe-dunkel); }
/* Ergebnis hinter dem grünen Haken unterstrichen (User 04.11.2026) */
.einsatz__ende span { text-decoration: underline; text-underline-offset: 3px; }
.einsatz__ende svg { flex: none; width: 16px; height: 16px; margin-top: 3px; fill: var(--farbe-punkt-live); }
.einsatz__mehr { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-family: var(--schrift-hansbasel); font-size: 14px; font-weight: 600; color: var(--farbe-primaer); text-decoration: underline; text-underline-offset: 3px; }
.einsatz__mehr::-webkit-details-marker { display: none; }
.einsatz__mehr::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s; }
.einsatz__ganz[open] .einsatz__mehr::after { transform: translateY(2px) rotate(-135deg); }
.einsatz__mehr-auf, .einsatz__ganz[open] .einsatz__mehr-zu { display: none; }
.einsatz__ganz[open] .einsatz__mehr-auf { display: inline; }
.einsatz__ganz p { margin-top: 8px; }
/* Aufgeklappt: Kurzfassung weg, die ganze Geschichte enthaelt dieselben Saetze (ohne :has() bleiben beide stehen) */
.einsatz:has(.einsatz__ganz[open]) :is(.einsatz__kurz, .einsatz__ende) { display: none; }
/* Notdienst-Pillen zwischen den Karten: so breit wie die Karten (sonst 12 px schmaler als die anderen Pillen, die Nummer schrumpft dann
   bei 375 px auf 21,4 px), 10 px mehr Luft als der Kartenabstand */
.einsaetze__reihe > .notdienst-pille { width: 100%; margin: 10px 0; }
@media (min-width: 1025px) {
  .einsaetze { padding: 70px 20px 80px; }
  .einsaetze__titel { font-size: 30px; }
  .einsaetze__unterzeile { margin-bottom: 36px; font-size: 18px; }
  /* Fliesstext 18 px (Lesbarkeit 04.11.2026); das Zitat bleibt groesser als der Text darunter */
  .einsatz__zitat { font-size: 20px; }
  .einsatz__kurz, .einsatz__ganz p { font-size: 18px; line-height: 28px; }
  .einsatz__ende { font-size: 18px; }
}
/* Reduzierte Bewegung: nur Standbilder (js/main.js entfernt die Clips zusaetzlich, dann laedt keiner) */
@media (prefers-reduced-motion: reduce) {
  .einsatz__video, .einsatz__pause { display: none; }
}

@media (min-width: 1025px) {
  .kopf { border: 1px solid var(--farbe-header-rand); }
  .kopf__innen { flex-wrap: nowrap; min-height: 80px; padding: 10px 0; }
  .kopf__schild { height: 60px; }
  .kopf__name { font-size: 28px; }
  .kopf__unterzeile { font-size: 11px; }
  .kopf__anruf, .js .kopf__menue-knopf { display: none; }
  .menue, .js .menue { display: block; position: static; flex-basis: auto; border: 0; background: none; }
  .menue__liste { display: flex; }
  .menue__link { padding: 13px 14px; border: 0; font-size: 16px; line-height: 34px; word-spacing: 4px; color: var(--farbe-dunkel); }
  .sofort-leiste { min-height: 55px; }
  .sofort-leiste__text { font-size: 22px; }
  /* Desktop (User 01.11.2026): oben 24 statt 80 px; CTA wie mobil direkt unter der Unterzeile, Fachpartner-Leiste bleibt direkt darunter,
     Foto + Hakenliste und Verbands-Logos folgen (nur Anzeige-Reihenfolge, dazwischen nichts fokussierbar) */
  .hero { padding: 24px 0 80px; }
  .hero > .hero__reihe { order: 1; }
  .hero > .logo-reihe { order: 2; }
  .hero__titel { font-size: 54px; line-height: 65px; }
  .hero__unterzeile { font-size: 18px; line-height: 30px; }
  .hero__reihe { flex-direction: row; align-items: center; gap: 30px; padding: 10px; }
  .hero__foto { flex: 0 0 369px; width: 369px; border-radius: 0; }
  /* Elementor-Zwischencontainer (je 10 px Polster) als Abstaende nachgebildet; Logo-Spalten 243 px breit, Mitten 313 px auseinander */
  .hero > .anruf-pille { margin-top: 10px; }
  .hero > .logo-reihe { gap: 163px; margin: 50px 0 10px; }
  .vorteile { padding: 10px 10px 20px; }
  .vorteile > .anruf-pille { margin-top: 10px; }
}

/* 6 Menuepunkte (seit 04.11.2026 mit „Fehlercodes“) passen mit 14 px Polster und 1 px Buchstabenabstand erst ab ca. 1135 px
   (mit Scrollleiste) einzeilig neben das Logo; darunter enger, sonst bricht „Unser Einsatzgebiet“ um und der Kopf wird 116 statt 82 px hoch */
@media (min-width: 1025px) and (max-width: 1139px) {
  .menue__link { padding-left: 9px; padding-right: 9px; letter-spacing: 0; }
}

/* ===== Einsatzgebiet + PLZ-Checker ===== */
.gebiet { max-width: var(--inhalt-breite); margin: 0 auto; padding: 40px 10px; }
.gebiet__rahmen { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px 10px; border: 2px solid var(--farbe-primaer); border-radius: 8px; box-shadow: 1px 1px 41px 0 var(--schatten-weich); text-align: center; }
.gebiet__titel { padding-bottom: 20px; font-family: var(--schrift-hansbasel); font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0.5px; word-spacing: 4px; color: var(--farbe-sektion); }
/* Karte (js/einsatzkarte.js): Leaflet + OpenStreetMap-Kacheln, Gebiet als blaue Flaeche. z-index 0 = eigener Stapelkontext:
   die Ebenen von Leaflet (z-index bis 1000) bleiben unter der klebenden roten Leiste. Ohne JS kein leerer Kasten. */
.gebiet__karte { position: relative; z-index: 0; width: 100%; max-width: 770px; aspect-ratio: 1; border-radius: 8px; background: var(--farbe-hell); }
html:not(.js) .gebiet__karte { display: none; }
.gebiet-flaeche { fill: var(--farbe-primaer); fill-opacity: 0.28; stroke: var(--farbe-primaer); stroke-width: 2; stroke-opacity: 0.9; }
.gebiet__karte .leaflet-control-attribution { font-size: 11px; }
/* Zoom-Knoepfe als <button> im Aussehen der Leaflet-Knoepfe (Touch-Groesse 30 px) */
.gebiet__zoom-knopf { display: block; width: 30px; height: 30px; padding: 0; border: 0; border-bottom: 1px solid var(--farbe-trenner); background: var(--farbe-weiss); color: var(--farbe-dunkel); font-family: var(--schrift-system); font-size: 22px; font-weight: 700; line-height: 30px; text-align: center; cursor: pointer; }
.gebiet__zoom-knopf:first-child { border-radius: 2px 2px 0 0; }
.gebiet__zoom-knopf:last-child { border-bottom: 0; border-radius: 0 0 2px 2px; }
.gebiet__zoom-knopf:hover { background: var(--farbe-hell); }
.gebiet__zoom-knopf[aria-disabled="true"] { background: var(--farbe-hell); color: var(--farbe-eingabe-rand); cursor: default; }
.gebiet__frage { font-family: var(--schrift-hansbasel); font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: 0.5px; word-spacing: 4px; color: var(--farbe-dunkel); }
.gebiet__trenner { width: 100%; margin: 15px 0; border: 0; border-top: 1px solid var(--farbe-trenner); }
/* Text mobil linksbuendig ueber die ganze Rahmenbreite, ab Tablet zentriert; Untertitel immer zentriert (User 02.11.2026) */
.gebiet__untertitel { align-self: stretch; font-family: var(--schrift-hansbasel); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; text-align: center; text-transform: uppercase; color: var(--farbe-sektion); }
.gebiet__text { align-self: stretch; font-family: var(--schrift-hansbasel); font-size: 16px; line-height: 1.6; text-align: start; color: var(--farbe-text); }

.plz-checker { width: 100%; }
/* Eingabe und Knopf wie im Original: 10 px Rand rechts an der Eingabe, mobil je 20 px Abstand nach oben */
.plz-checker__zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 4px; }
.plz-checker__eingabe { width: 250px; height: 40px; margin: 20px 10px 0 0; padding: 10px; border: 1px solid var(--farbe-eingabe-rand); border-radius: 5px; box-shadow: 0 1px 2px 0 var(--schatten-eingabe); font-family: var(--schrift-system); font-size: 18px; color: var(--farbe-eingabe-text); }
.plz-checker__knopf { margin-top: 20px; padding: 10px 40px; border: 0; border-radius: 50px; background: var(--farbe-such-knopf); box-shadow: 0 1px 2px 0 var(--schatten-eingabe); color: var(--farbe-weiss); font-family: var(--schrift-system); font-size: 22px; font-weight: 500; line-height: 33px; cursor: pointer; }
.plz-checker__ohne-js { margin-top: 20px; font-family: var(--schrift-hansbasel); font-size: 15px; line-height: 24px; color: var(--farbe-dunkel); }
.plz-checker__ohne-js a { color: var(--farbe-primaer); font-weight: 600; }
.plz-checker__ergebnis:not(:empty) { max-width: 560px; margin: 20px auto 0; padding: 20px; border: 1px solid var(--farbe-karten-rand); border-radius: 8px; font-family: var(--schrift-hansbasel); font-size: 15px; line-height: 24px; color: var(--farbe-dunkel); }
.plz-ergebnis__titel { font-weight: 700; color: var(--farbe-primaer); }
.plz-ergebnis__plz, .plz-ergebnis__orte { margin-bottom: 8px; }
.plz-ergebnis__info { margin-top: 8px; }
.plz-ergebnis__info a { color: var(--farbe-primaer); font-weight: 600; }
.plz-ergebnis__keiner { font-weight: 600; color: var(--farbe-rot); }
.plz-ergebnis__badge { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 50px; background: var(--farbe-gruen); color: var(--farbe-dunkel); font-size: 13px; font-weight: 600; }
.plz-ergebnis__knopf { display: table; margin: 14px auto 0; padding: 10px 30px; border-radius: 50px; background: var(--farbe-such-knopf); color: var(--farbe-weiss); font-weight: 600; text-align: center; text-decoration: none; }

/* ===== Welches Problem haben Sie? ===== */
.probleme { padding: 40px 10px 50px; background: var(--farbe-sektion); }
/* ohne die 4 px Wortabstand des Originals: dort steht eine schmalere Ersatzschrift (die Originalschrift laedt nicht), mit Poppins bricht die Zeile mobil sonst um */
.probleme__titel { font-family: var(--schrift-hansbasel); font-size: 24px; font-weight: 700; line-height: 38px; letter-spacing: 1px; color: var(--farbe-weiss); text-align: center; }
.probleme__karten { display: grid; gap: 20px; max-width: var(--inhalt-breite); margin: 20px auto 30px; }
/* Fokusring auf dem blauen Grund: der blaue Standard-Ring waere dort kaum sichtbar (1,7:1) */
.probleme :focus-visible { outline-color: var(--farbe-weiss); }
/* Feste Mindesthoehe: das Original koppelt sie an die Fensterhoehe (mobil 43vh, Desktop 44vh), das waere auf hohen Monitoren zu leer. Die Werte sind 43vh bei 812 px bzw. 44vh bei 800 px Fensterhoehe; Tablet 388 px wie im Original */
.karte { display: flex; flex-direction: column; align-items: center; gap: 20px; min-height: 349px; padding: 0 10px; border: 3px solid var(--farbe-rot-rahmen); border-radius: 7px; background: var(--farbe-weiss); box-shadow: 1px 1px 5px 0 var(--schatten-weich); text-align: center; }
.karte__bild { width: auto; height: 100px; margin-top: 20px; }
.karte__titel { font-family: var(--schrift-hansbasel); font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--farbe-primaer); }
.karte__titel--leicht { font-weight: 600; }
.karte__text { font-family: var(--schrift-hansbasel); font-size: 16px; line-height: 1.6; letter-spacing: 1px; word-spacing: 4px; color: var(--farbe-dunkel); }

@media (min-width: 768px) {
  .gebiet__karte { aspect-ratio: 6 / 5; }
  .gebiet__untertitel, .gebiet__text { align-self: center; text-align: center; }
  .probleme__karten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .karte { min-height: 388px; }
}
@media (min-width: 1025px) {
  .gebiet { padding: 80px 20px; }
  .gebiet__rahmen { padding: 80px 100px; }
  .gebiet__titel { font-size: 40px; line-height: 48px; letter-spacing: 1px; }
  .gebiet__frage { font-size: 22px; line-height: 28px; letter-spacing: 1px; }
  .gebiet__untertitel { font-size: 20px; letter-spacing: 0; }
  .gebiet__text { max-width: 720px; font-size: 18px; line-height: 28px; }
  .plz-checker__eingabe { margin: 0 10px 0 0; font-size: 22px; }
  .plz-checker__knopf { margin-top: 0; }
  .probleme { padding: 130px 10px 140px; }
  .probleme__titel { font-size: 40px; }
  /* Karten unterschiedlich hoch und vertikal zentriert wie im Original (Text mit -26 px Rand unten) */
  .probleme__karten { align-items: center; padding: 10px; }
  /* Container fuer die Titelschrift (cqw statt vw: eine Scrollleiste verkleinert die Karten, 100vw rechnet sie mit) */
  .karte { container-type: inline-size; --karte-polster: 30px; min-height: 352px; padding: 40px var(--karte-polster); border-radius: 8px; }
  .karte__bild { margin-top: 0; }
  /* 34 px, solange „Heizungsnotdienst" (9,35 em, laengster Titel) innerhalb des 3-px-Rahmens Platz hat (ab ca. 1052 px Fensterbreite); darunter
     schrumpft die Schrift mit der Karte. Der Titel darf ins Seitenpolster ragen (+ 2 x Polster), nur der Rahmen bleibt frei. */
  .karte__titel { font-size: 34px; font-size: min(34px, calc((100cqw + 2 * var(--karte-polster)) / 9.35)); line-height: 44.2px; letter-spacing: -0.02em; }
  .karte__text { margin-bottom: -26px; font-size: 18px; line-height: 34px; }
}

/* ===== So funktioniert's ===== */
.ablauf { display: flex; flex-direction: column; gap: 20px; max-width: var(--inhalt-breite); margin: 0 auto; padding: 60px 10px; text-align: center; }
.ablauf__titel { font-family: var(--schrift-hansbasel); font-size: 24px; font-weight: 700; line-height: 39.6px; letter-spacing: 0.5px; word-spacing: 4px; color: var(--farbe-dunkel-2); }
.ablauf__text { font-family: var(--schrift-hansbasel); font-size: 16px; line-height: 1.6; color: var(--farbe-text); }
/* wie im Original zwei 1fr-Zeilen: mobil sind Schritt 1 und 2 gleich hoch, Desktop beide Reihen */
.ablauf__raster { display: grid; grid-template-rows: repeat(2, 1fr); gap: 20px; padding: 40px 0; }
.schritt { display: flex; flex-direction: column; gap: 20px; }
/* mobil wie im Original: Nummer in einer 20-%-Spalte, Bild linksbuendig in einer 70-%-Spalte, beide zusammen zentriert */
.schritt__bilder { display: flex; align-items: center; justify-content: center; gap: 10px; }
.schritt__nummer { flex: 0 0 auto; width: 50px; height: 50px; margin: 0 calc(10% - 25px); }
.schritt__bild { flex: 0 0 auto; width: 149px; height: 149px; margin-right: calc(70% - 149px); }
.schritt__inhalt { text-align: start; }
/* Titel auf allen Breiten mittig (User 04.11.2026), Text darunter mobil weiter linksbuendig */
.schritt__titel { font-family: var(--schrift-hansbasel); font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--farbe-dunkel-2); text-align: center; }
.schritt__text { margin-top: 10px; font-family: var(--schrift-hansbasel); font-size: 16px; line-height: 1.6; color: var(--farbe-text-2); }

@media (min-width: 768px) {
  .schritt__inhalt { text-align: center; }
  .ablauf__raster { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1025px) {
  .ablauf { padding: 80px 0; }
  .ablauf__titel { font-size: 40px; line-height: 48px; letter-spacing: 1px; }
  .ablauf__text { max-width: 720px; margin-left: auto; margin-right: auto; font-size: 18px; line-height: 28px; }
  .schritt { padding: 20px; }
  /* Bild mittig im Platz rechts neben der Nummer (nicht in der ganzen Zeile) */
  .schritt__bilder { display: grid; grid-template-columns: 102px 1fr; align-items: start; gap: 20px; }
  .schritt__nummer { width: 102px; height: 102px; margin: 0; }
  .schritt__bild { justify-self: center; width: 210px; height: 210px; margin: 0; }
  .schritt__titel { font-size: 20px; line-height: 24px; }
  .schritt__text { font-size: 18px; line-height: 28px; }
}

/* ===== Fehlercodes ===== */
.fehlercodes { padding: 60px 10px; background: var(--farbe-hell); }
.fehlercodes__kopf { max-width: var(--inhalt-breite); margin: 0 auto 20px; text-align: center; }
.fehlercodes__titel { padding-bottom: 20px; font-family: var(--schrift-hansbasel); font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: 0.5px; word-spacing: 4px; color: var(--farbe-dunkel); }
.fehlercodes__text { font-family: var(--schrift-hansbasel); font-size: 16px; line-height: 1.6; color: var(--farbe-text); }
/* Sprungleiste je Hersteller (Audit P2-3, User 04.11.2026) */
.sprungleiste { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: var(--inhalt-breite); margin: 0 auto 24px; }
.sprungleiste__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--farbe-karten-rand); border-radius: 22px; background: var(--farbe-weiss); font-family: var(--schrift-hansbasel); font-size: 15px; font-weight: 600; color: var(--farbe-primaer); text-decoration: none; }
.sprungleiste__link:hover, .sprungleiste__link:focus-visible { border-color: var(--farbe-primaer); }
.fehlercodes__liste { display: flex; flex-direction: column; gap: 20px; max-width: var(--inhalt-breite); margin: 0 auto; }
/* Karte ohne eigene Flaeche: der helle Abschnittsgrund scheint durch wie im Original */
.hersteller { display: flex; flex-direction: column; gap: 20px; padding-bottom: 40px; border: 1px solid var(--farbe-karten-rand); border-radius: 20px; box-shadow: 0 2px 8px 0 var(--schatten-karte); }
.hersteller__kopf { display: flex; flex-direction: column; gap: 10px; padding: 20px 10px; border-radius: 20px 20px 0 0; background: var(--farbe-sektion); text-align: start; }
.hersteller__titel { font-family: var(--schrift-hansbasel); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: 0.3px; color: var(--farbe-weiss); }
.hersteller__modelle { font-family: var(--schrift-hansbasel); font-size: 12px; line-height: 18px; color: var(--farbe-weiss); }
/* Zeilen nach Inhalt mit festem Abstand 40 px (das Original streckt die ersten beiden Zeilen mit zwei 1fr-Zeilen auf gleiche Hoehe: dort bis zu 466 px Hoehe, davon 320 px leer) */
.hersteller__codes { display: grid; gap: 40px 20px; padding: 40px 10px; }
/* Code-Spalte 25 % (Desktop 15 %), Text 71 % (Desktop 85 %), 10 px dazwischen */
.code { display: grid; grid-template-columns: minmax(max-content, 25%) minmax(0, 71%); align-items: start; column-gap: 10px; }
.code__badge { justify-self: start; padding: 10px 20px; border-radius: 6px; background: var(--farbe-dunkel-2); color: var(--farbe-weiss); font-family: var(--schrift-code); font-size: 15px; font-weight: 500; line-height: 15px; }
.code__inhalt { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.code__titel { font-family: var(--schrift-hansbasel); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--farbe-dunkel-2); }
.code__text { font-family: var(--schrift-hansbasel); font-size: 16px; line-height: 1.6; color: var(--farbe-dunkel-2); }
.warnung { display: flex; align-items: flex-start; gap: 15px; padding: 20px; border: 1px solid var(--farbe-warn-rand); border-radius: 10px; background: var(--farbe-warn-hg); }
.warnung__icon { flex: 0 0 auto; width: 40px; height: 40px; }
.warnung__text { font-family: var(--schrift-hansbasel); font-size: 15px; line-height: 24px; color: var(--farbe-warn-text); }
/* Schrift, Nummer und Puls: siehe Anruf-Pille (gemeinsame CTA-Regeln) */
.hersteller__knopf { align-self: center; max-width: calc(100% - 20px); padding: 15px 60px; border-radius: 50px; background: var(--farbe-rot); color: var(--farbe-weiss); text-align: center; }
/* Warnboxen mobil ueber die ganze Kartenbreite (User 04.11.2026, Mockup abgenommen): in der Textspalte blieben nur ca. 150 px Text.
   .code__inhalt loest sich auf, Titel und Text bleiben rechts neben dem Code-Kaestchen (es reicht ueber beide Zeilen, Abstand dazwischen
   wie vorher 20 px), die Warnbox laeuft unter beiden Spalten. width 0 + min-width 100 %: zaehlt nicht in die Spaltenbreiten
   (sonst wird die Code-Spalte so breit wie der ganze Warntext), fuellt dann aber beide Spalten */
@media (max-width: 767px) {
  .code { row-gap: 20px; }
  .code__inhalt { display: contents; }
  .code__badge { grid-row: span 2; }
  .code__titel, .code__text { grid-column: 2; }
  .warnung { grid-column: 1 / -1; width: 0; min-width: 100%; }
}

@media (min-width: 768px) {
  .hersteller__kopf { text-align: center; }
  .hersteller__codes { grid-template-columns: 1fr 1fr; }
  /* Code-Spalte mindestens so breit wie das Code-Kaestchen (bei 768 px waeren 15 % zu schmal) */
  .code { grid-template-columns: minmax(max-content, 15fr) minmax(0, 85fr); }
  .code__badge { border-radius: 10px; }
}
@media (min-width: 1025px) {
  .fehlercodes { padding: 80px 0; }
  .fehlercodes__titel { font-size: 40px; line-height: 48px; letter-spacing: 1px; }
  .fehlercodes__text { max-width: 720px; margin-left: auto; margin-right: auto; font-size: 18px; line-height: 28px; }
  .hersteller__kopf { padding: 20px 0; }
  .hersteller__titel { font-size: 34px; line-height: 44.2px; letter-spacing: -0.02em; }
  .hersteller__modelle { font-size: 16px; line-height: 24px; }
  .hersteller__codes { padding: 40px 20px; }
  .code__titel { font-size: 20px; }
  .code__text { font-size: 18px; line-height: 28px; }
  .warnung__text { font-size: 18px; line-height: 28px; }
}

/* ===== FAQ ===== */
.faq { display: flex; flex-direction: column; gap: 20px; max-width: var(--inhalt-breite); margin: 0 auto; padding: 60px 10px; }
/* Groessen 04.11.2026 (User: Fragen und Ueberschrift „viel zu klein“): mobil Titel 24, Einleitung 15 (seit Lesbarkeit 16), Fragen 18, Antworten 16 px;
   Desktop Titel 40 wie die anderen H2, Fragen 22, Antworten 18 px wie der Fliesstext der anderen Abschnitte */
.faq__titel { font-family: var(--schrift-hansbasel); font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0.5px; word-spacing: 4px; color: var(--farbe-primaer); text-align: center; }
.faq__text { font-family: var(--schrift-hansbasel); font-size: 16px; font-style: italic; line-height: 1.6; color: var(--farbe-text); text-align: center; }
/* Akkordeon wie im Original: 20 px Containerpolster plus 10 px Polster des Akkordeons */
.faq__liste { display: flex; flex-direction: column; gap: 10px; padding: 30px 10px 10px; }
.faq__eintrag { border-bottom: 1px solid var(--farbe-faq-linie); }
/* index.html: alle Eintraege offen, Frage als h3 (User 04.11.2026: „nicht geschlossen und dann manuell öffnen“).
   Aufklappen per <details>/<summary> und das „+“ nutzt nur noch das Duplikat entwurf.html */
.faq__frage { display: flex; align-items: flex-start; justify-content: space-between; gap: 0; padding-bottom: 10px; font-family: var(--schrift-hansbasel); font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--farbe-dunkel-2); }
summary.faq__frage { cursor: pointer; list-style: none; }
.faq__frage::-webkit-details-marker { display: none; }
.faq__icon { flex: 0 0 auto; font-size: 28px; line-height: 1em; color: var(--farbe-faq-icon); transition: transform 0.2s linear; }
.faq__eintrag[open] .faq__icon { transform: rotate(45deg); }
.faq__antwort { margin-top: 10px; padding: 12px 0 10px; font-family: var(--schrift-hansbasel); font-size: 16px; line-height: 1.6; color: var(--farbe-text-2); }
.faq__antwort strong { font-weight: 600; }
/* Antworten in Absaetzen (User 04.11.2026: „besser lesbar … mit absätzen“) */
.faq__antwort p + p { margin-top: 12px; }
.faq__pillen-zeile { padding: 10px 0 30px; }

/* ===== Wer steckt hinter Fux? ===== */
.ueber { padding: 40px 20px; background: var(--farbe-hell); text-align: start; }
.ueber > * { max-width: var(--inhalt-breite); margin-left: auto; margin-right: auto; }
.ueber__titel { font-family: var(--schrift-hansbasel); font-size: 24px; font-weight: 700; line-height: 39.6px; letter-spacing: 0.5px; word-spacing: 4px; color: var(--farbe-dunkel); }
.ueber__einstieg { margin-top: 20px; font-family: var(--schrift-hansbasel); font-size: 16px; font-weight: 600; line-height: 1.6; color: var(--farbe-primaer); }
.ueber__text { margin-top: 20px; font-family: var(--schrift-hansbasel); font-size: 16px; line-height: 1.6; color: var(--farbe-text); }
/* mobil 2 x 2 mit gleich hohen Zeilen, Desktop 4 x 1 */
.ueber__zaehler-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 20px; margin-top: 20px; padding: 20px 0; }
.zaehler { display: flex; flex-direction: column; gap: 20px; padding: 20px; text-align: center; border: 1px solid var(--farbe-karten-rand); border-radius: 16px; background: var(--farbe-weiss); }
.zaehler__wert { font-family: var(--schrift-hansbasel); font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--farbe-primaer); font-variant-numeric: tabular-nums; }
.zaehler__text { font-family: var(--schrift-hansbasel); font-size: 12px; line-height: 16.8px; color: var(--farbe-text); }

/* ===== Fusszeile (unten Platz fuer die schwebenden Knoepfe: 15 px Rand + 72 px WhatsApp + 15 px Luft) ===== */
.fuss { padding: 20px 10px 102px; }
.fuss__innen { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: var(--inhalt-breite); margin: 0 auto; text-align: center; }
.fuss__copy { font-family: var(--schrift-roboto); font-size: 14px; font-weight: 400; line-height: 38px; letter-spacing: 1px; word-spacing: 4px; color: var(--farbe-grau); }
.fuss__menue { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }
.fuss__link { padding: 0; border: 0; background: none; font-family: var(--schrift-roboto); font-size: 15px; font-weight: 300; line-height: 38px; letter-spacing: 1px; word-spacing: 4px; color: var(--farbe-grau); text-decoration: none; cursor: pointer; }
.fuss__link:hover, .fuss__link:focus-visible { color: var(--farbe-primaer); }

/* ===== Schwebende Knoepfe ===== */
/* WhatsApp 72 px (vorher 60 px, User 01.11.2026: „generell größer“) */
.whatsapp { position: fixed; right: 15px; bottom: 15px; z-index: 40; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; padding: 0; border-radius: 50%; background: var(--farbe-whatsapp); box-shadow: 0 2px 8px var(--schatten-schwebend); }
.whatsapp__icon { width: 34px; height: 34px; fill: var(--farbe-weiss); }
.nach-oben { position: fixed; right: 27px; bottom: 102px; z-index: 40; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--farbe-dunkel); cursor: pointer; }
.nach-oben[hidden] { display: none; }
.nach-oben__icon { width: 18px; height: 12px; fill: var(--farbe-weiss); transform: rotate(180deg); }

@media (min-width: 768px) {
  .ueber { text-align: center; }
  /* FAQ-Fragen ab Tablet 20 px (bis 04.11.2026 18 px wie im Original, User: „viel zu klein“) */
  .faq__frage { font-size: 20px; line-height: 1.4; }
}
@media (min-width: 769px) {
  .zaehler__wert { font-size: 40px; line-height: 40px; letter-spacing: -0.02em; }
}
@media (min-width: 1025px) {
  .faq { padding: 80px 0; }
  .faq__titel { font-size: 40px; line-height: 48px; letter-spacing: 1px; }
  .faq__text { max-width: 720px; margin-left: auto; margin-right: auto; font-size: 18px; line-height: 28px; }
  /* Textspalte 720 px (10 px Polster je Seite) */
  .faq__liste { width: 100%; max-width: 740px; margin-left: auto; margin-right: auto; }
  .faq__frage { font-size: 22px; }
  .faq__antwort { padding: 0 0 10px; font-size: 18px; line-height: 28px; }
  .ueber { padding: 80px 0; }
  .ueber__titel { font-size: 40px; line-height: 48px; letter-spacing: 1px; }
  .ueber__einstieg, .ueber__text { max-width: 720px; font-size: 18px; line-height: 28px; }
  .ueber__zaehler-raster { grid-template-columns: repeat(4, minmax(0, 305px)); grid-template-rows: none; justify-content: center; }
  .zaehler__text { font-size: 18px; line-height: 27px; }
  .fuss { padding: 20px 0 102px; }
  .fuss__link { font-size: 14px; }
  .fuss__innen { flex-direction: row; justify-content: center; gap: 40px; }
}

/* Ab 1025 px bis zur Layoutbreite 1279 px: 20 px seitlicher Abstand, sonst klebt der Inhalt am Fensterrand (die Abschnitte haben ab 1025 px kein
   Seitenpolster mehr). Ab einer Layoutbreite von 1280 px unveraendert (0 px, der Inhalt ist dort hoechstens 1280 px breit).
   Gerechnet wird mit der Layoutbreite statt der Fensterbreite: Prozentwerte im Polster beziehen sich auf die Breite des umgebenden Blocks, also
   die Breite OHNE Scrollleiste (ein 1280-px-Fenster mit Scrollleiste hat nur 1263 px). Eine Media-Query kaeme hier nicht weiter, sie rechnet die
   Scrollleiste mit. (1280px - 100%) ist ab 1280 px null oder negativ, darunter positiv; mal 1000 wird daraus schon bei 1 px weniger ein grosser Wert,
   den clamp() auf 20 px kappt: eine Stufe statt eines gleitenden Uebergangs. Der Kopf hat 1 px Rahmen je Seite, sein Block ist 2 px schmaler (Grenze 1278 px).
   Die Vorteile-Liste (10 px Polster) rueckt um dieselben 20 px ein und bleibt damit buendig mit der Hero-Reihe (10 px Polster im Hero).
   - 1280px ist --inhalt-breite, hier bewusst als Zahl geschrieben: mit var() wuerde ein Browser ohne clamp() die Deklaration erst beim
     Berechnen verwerfen (dann gilt der Anfangswert statt des alten Werts); mit der Zahl verwirft er sie schon beim Einlesen.
   - Ohne clamp()-Unterstuetzung entfaellt die Deklaration, es bleibt der alte Wert (0 px seitlich, bei .vorteile 10 px).
   - Der Block muss nach allen Abschnitts-Regeln ab 1025 px stehen (gleiche Spezifitaet, die spaetere gewinnt). */
@media (min-width: 1025px) {
  .hero, .ablauf, .fehlercodes, .faq, .ueber, .fuss { padding-left: clamp(0px, (1280px - 100%) * 1000, 20px); padding-right: clamp(0px, (1280px - 100%) * 1000, 20px); }
  .kopf__innen { padding-left: clamp(0px, (1278px - 100%) * 1000, 20px); padding-right: clamp(0px, (1278px - 100%) * 1000, 20px); }
  .vorteile { padding-left: clamp(10px, (1280px - 100%) * 1000, 30px); padding-right: clamp(10px, (1280px - 100%) * 1000, 30px); }
}

/* ===== Cookie-Banner (beide Knoepfe gleichwertig) ===== */
.cookie-banner { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60; display: flex; flex-direction: column; gap: 12px; max-width: 960px; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; margin: 0 auto; padding: 16px 20px; border: 1px solid var(--farbe-karten-rand); border-radius: 12px; background: var(--farbe-weiss); box-shadow: 0 4px 24px var(--schatten-schwebend); font-family: var(--schrift-hansbasel); }
/* Hoechstens fensterhoch: In sehr niedrigen Fenstern (z. B. 320x360) ist der Banner seit dem Elfsight-Hinweis sonst hoeher als das Fenster und oben abgeschnitten */
.cookie-banner[hidden] { display: none; }
.cookie-banner__text { font-size: 14px; line-height: 21px; color: var(--farbe-dunkel); }
.cookie-banner__text a { color: var(--farbe-primaer); }
.cookie-banner__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cookie-banner__knopf { padding: 12px 16px; border: 2px solid var(--farbe-primaer); border-radius: 50px; background: var(--farbe-primaer); color: var(--farbe-weiss); font-family: var(--schrift-roboto); font-size: 15px; font-weight: 600; cursor: pointer; }
/* Mobil kompakt (User 01.11.2026): kurzer Text in ca. 4 Zeilen, Knoepfe nebeneinander, weniger Polster -> verdeckt beim Erstbesuch weniger vom Hero */
@media (max-width: 767px) {
  .cookie-banner { gap: 8px; padding: 10px 14px; }
  .cookie-banner__text { font-size: 12px; line-height: 17px; }
  .cookie-banner__knopf { padding: 8px 10px; font-size: 14px; }
}

@media (min-width: 768px) {
  .cookie-banner { flex-direction: row; align-items: center; }
  .cookie-banner__knoepfe { flex: 0 0 auto; grid-template-columns: 180px 180px; }
}

/* Offener Banner und schwebende Knoepfe: WhatsApp ist ausgeblendet, solange der Banner offen ist (User 01.11.2026; lag mobil sonst ueber der H1).
   cookie-consent.js setzt die Klasse .cookie-offen und --cookie-oberkante (Abstand der Banner-Oberkante zum unteren Fensterrand, folgt
   Hoehenaenderungen). Der Banner (unten fixiert, hoechstens 960 px, mittig, z-index 60 gegen 40) reicht bis etwa 1110 px Breite unter den
   Nach-oben-Knopf; bis 1154 px setzt der sich deshalb an den freien WhatsApp-Platz ueber dem Banner (5 px Rueckfall + 10 px = 15 px Ausgangswert).
   Darueber bleibt er an seinem Platz: 960 px Banner + 2 x 87 px (Knopf 72 px + 15 px Rand) = 1134 px Layoutbreite, dazu Luft fuer eine Scrollleiste. */
.cookie-offen .whatsapp { display: none; }
@media (max-width: 1154px) {
  .cookie-offen .nach-oben { bottom: calc(var(--cookie-oberkante, 5px) + 10px); }
}
/* Niedriges Fenster (z. B. kleines Handy quer, 568x320): ueber dem offenen Banner passt der Nach-oben-Knopf nicht mehr ins Bild.
   cookie-consent.js setzt dann .cookie-eng, der Knopf ist bis zur Cookie-Wahl ausgeblendet. */
.cookie-offen.cookie-eng .nach-oben { display: none; }

/* ===== Rechtstexte (Impressum, Datenschutz) ===== */
.rechtstext { max-width: 760px; margin: 0 auto; padding: 60px 20px; font-family: var(--schrift-hansbasel); color: var(--farbe-text-2); }
.rechtstext__titel { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--farbe-dunkel); }
.rechtstext h2 { margin-top: 36px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--farbe-dunkel); }
.rechtstext p { margin-top: 12px; font-size: 16px; line-height: 1.7; }
.rechtstext a { color: var(--farbe-primaer); overflow-wrap: anywhere; }
/* Unterseiten (Modifikator an der Fusszeile): die 102 px unter der Fusszeile sind Platz fuer WhatsApp- und Nach-oben-Knopf, die es hier nicht gibt.
   Muss nach den .fuss-Regeln stehen (gleiche Spezifitaet, auch nach der Desktop-Regel mit padding: 20px 0 102px). */
.fuss--kompakt { padding-bottom: 20px; }

@media (min-width: 1025px) {
  .rechtstext { padding: 80px 20px; }
  .rechtstext__titel { font-size: 40px; line-height: 48px; }
}

/* Schmale Handys: die lange Ein-Wort-Ueberschrift "Datenschutzerklaerung" passt bei 28 px sonst nicht in den Text-Kasten */
@media (max-width: 389px) {
  .rechtstext__titel { font-size: 22px; }
}