/* =============================================================================
   Pietät Tron — Landingpage
   Reihenfolge: Tokens · Basis · Layout · Typografie · Elemente · Sektionen von
   oben nach unten · feste Leisten · Schalter · Responsive · Bewegung
   ========================================================================== */

/* ============================== 1. Tokens ================================= */

:root {
  /* Flächen */
  --dunkel: #1b1b1b;
  --papier: #f4f2ef;   /* warmer Ton, nur im Start-Modul */
  --flaeche: #f2f2f2;
  --kartenflaeche: #f7f7f7;
  --weiss: #ffffff;

  /* Akzent */
  --akzent: #7d2b35;
  --akzent-hover: #5f2028;
  --akzent-label: #f1c8ca;  /* Label auf bordeauxfarbener Fläche */

  /* Text */
  --text: #222222;
  --text-2: #555555;
  --text-3: #6b6b6b;        /* leisester Ton auf hellen Flaechen; #8a8a8a lag mit
                               3,1:1 unter dem WCAG-Minimum von 4,5:1 (Lighthouse 08.09.2026) */
  --text-hell-1: #cfcfcf;   /* auf dunkler Fläche */
  --text-hell-2: #bdbdbd;
  --text-hell-3: #9e9e9e;

  /* Linien */
  --linie: #e5e5e5;
  --linie-karte: #e0e0e0;
  --linie-karte-innen: #e8e8e8;
  --linie-kraeftig: #dddddd;
  --linie-feld: #d5d5d5;
  --linie-dunkel: #333333;

  /* Signal */
  --stern: #f5b301;
  --fehler: #a4262c;

  /* Maße */
  --behaelter: 1184px;
  --behaelter-hero: 1280px;
  --sektion-x: 48px;
  --sektion-y: 60px;
}

/* ============================== 2. Basis ================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--akzent); text-decoration: none; }
a:hover { color: var(--akzent-hover); }

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

/* Sichtbarer Fokus überall — auch dort, wo eigene Farben gesetzt sind. */
:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 2px;
}
.sektion--dunkel :focus-visible,
.kopf :focus-visible,
.topbar :focus-visible,
.fuss :focus-visible,
.kkarte--voll:focus-visible,
.knopf--primaer:focus-visible,
.anrufleiste__knopf--primaer:focus-visible {
  outline-color: var(--weiss);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--weiss);
  color: var(--akzent);
  font-weight: 700;
  padding: 12px 18px;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* ============================== 3. Layout ================================= */

.behaelter {
  max-width: var(--behaelter);
  margin: 0 auto;
}

.sektion {
  padding: var(--sektion-y) var(--sektion-x);
}
.sektion--grau { background: var(--flaeche); }
.sektion--dunkel { background: var(--dunkel); color: var(--weiss); }
/* Das Siegel-Band gehört optisch zu den Kundenstimmen darüber. */
.sektion--ohne-oben { padding-top: 0; }

/* ============================ 4. Typografie =============================== */

.h2 {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
}
.h2--hell { color: var(--weiss); line-height: 1.15; margin-bottom: 18px; }

.unterzeile {
  margin: 0 0 34px;
  font-size: 18px;
  color: var(--text-2);
  max-width: 720px;
}
.unterzeile--breit { max-width: 800px; }

.kicker {
  margin: 0 0 16px;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-hell-3);
}

.wortmarke {
  margin: 0;
  color: var(--weiss);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 0;
}

/* Die Wortmarke liegt als Bild vor (247x41, weiss auf transparent) und sitzt
   deshalb nur auf den dunklen Flaechen von Kopf und Fuss. Die Anzeigebreite
   bleibt bewusst unter der Dateibreite, damit die Kanten auf Retina-Displays
   sauber bleiben. */
.wortmarke__bild {
  display: block;
  width: 152px;
  height: auto;
}

.sterne { color: var(--stern); font-size: 17px; letter-spacing: 2px; }
.ziffer { color: var(--akzent); font-weight: 800; }
.stark { font-weight: 700; }

/* ========================== 5. Knöpfe und Links =========================== */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 6px;
  padding: 16px 30px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
}
.knopf--primaer { background: var(--akzent); color: var(--weiss); }
.knopf--primaer:hover { background: var(--akzent-hover); color: var(--weiss); }
.knopf--sekundaer {
  background: transparent;
  border: 1.5px solid var(--dunkel);
  color: var(--dunkel);
}
.knopf--sekundaer:hover { background: rgba(0, 0, 0, .06); color: var(--dunkel); }
.knopf--klein { padding: 11px 18px; font-size: 15px; border-radius: 5px; }

.knopf-pille {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--akzent);
  color: var(--weiss);
  border-radius: 999px;
  padding: 13px 24px;
  font-size: 17px;
  font-weight: 800;
}
.knopf-pille:hover { background: var(--akzent-hover); color: var(--weiss); }

.plus {
  font-size: 28px;
  font-weight: 400;
  color: var(--text-3);
  line-height: 1;
  transition: transform .2s;
}
details[open] > summary .plus { transform: rotate(45deg); }

/* <summary> soll wie eine eigene Zeile aussehen, nicht wie ein Listenpunkt. */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* ============================== 6. Topbar ================================= */

.topbar {
  background: var(--dunkel);
  color: var(--weiss);
  border-bottom: 1px solid var(--akzent);
}
.topbar__inner {
  max-width: var(--behaelter);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  text-align: center;
  flex-wrap: wrap;
}
.topbar__tel { color: var(--weiss); font-weight: 800; }
.topbar__tel:hover { color: var(--weiss); text-decoration: underline; }

/* ============================== 7. Header ================================= */

.kopf { background: var(--dunkel); padding: 16px var(--sektion-x); }
.kopf__inner {
  max-width: var(--behaelter);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.kopf__rechts { display: flex; align-items: center; gap: 24px; }
.kopf__adresse { margin: 0; text-align: right; color: var(--text-hell-2); }
.kopf__adresse-klein { display: block; font-size: 14px; }
.kopf__adresse-gross { display: block; font-size: 16px; font-weight: 700; color: var(--weiss); }

/* ============================ 8. Start-Modul ============================== */

.hero { background: var(--papier); }
.hero__inner {
  max-width: var(--behaelter-hero);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
}
.hero__text {
  padding: 70px var(--sektion-x) 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__zitat {
  margin: 0 0 16px;
  font-family: 'Great Vibes', 'Segoe Script', cursive;
  font-size: 30px;
  line-height: 1.3;
  color: var(--akzent);
}
.hero__h1 {
  margin: 0;
  font-size: 46px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--dunkel);
}
.hero__lead {
  margin: 20px 0 0;
  font-size: 19px;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 560px;
}
.hero__punkte {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
  max-width: 560px;
  font-size: 16px;
  color: var(--text-2);
}
.hero__punkte li { display: flex; gap: 10px; align-items: baseline; }
.hero__punkte li::before {
  content: "✓";
  color: var(--akzent);
  font-weight: 800;
}
.hero__knoepfe { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero__hinweis { margin: 14px 0 0; font-size: 15px; color: var(--text-3); }
.hero__hinweis-tel { font-weight: 700; }
.hero__bewertung {
  margin: 28px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 16px;
  color: var(--text-2);
}
.hero__bild {
  padding: 40px var(--sektion-x) 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.hero__bild img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.hero__bildtext { margin: 0; }
.hero__bildtext-klein { display: block; font-size: 14px; color: var(--text-3); }
.hero__bildtext-gross { display: block; font-size: 17px; font-weight: 700; color: var(--dunkel); }

/* =========================== 9. Erste Schritte ============================ */

.schritte {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
/* Bewusst ohne Karten: nur senkrechte Trennlinien. */
.schritt { padding: 0 34px 0 0; }
.schritt + .schritt { padding: 0 34px; border-left: 1px solid var(--linie-kraeftig); }
.schritt__titel { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.schritt__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }

/* ========================= 10. Bestattungsarten =========================== */

.arten {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}
.art {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--linie);
}
/* Die letzte Reihe (zwei Spalten) bekommt keine Trennlinie mehr. */
.art:nth-last-child(-n+2) { border-bottom: 0; }
.art__icon { flex: none; margin-top: 2px; color: var(--text); }
.art__titel { margin: 0; font-size: 19px; font-weight: 700; }
.art__text { margin: 3px 0 0; font-size: 16px; line-height: 1.55; color: var(--text-2); }

/* ======================== 11. Bestattungskosten =========================== */

/* Preise sind geschlossen voreingestellt: das Thema soll sich niemandem
   aufdrängen, aber jederzeit erreichbar sein. */
.preise {
  border: 1px solid var(--linie-karte);
  border-radius: 6px;
  background: var(--weiss);
}
.preise__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
  font-size: 19px;
  font-weight: 700;
}
.preise__summary-zusatz { font-weight: 400; color: var(--text-3); }
.preise__inhalt { padding: 4px 28px 28px; }
.preise__hinweis { margin: 0 0 16px; font-size: 15px; color: var(--text-3); }
.preise__fussnote { margin: 24px 0 0; font-size: 15px; color: var(--text-3); }

.preiskarten {
  display: grid;
  /* Drei Spalten, solange jede Karte mindestens 280 px breit sein kann — das
     ist die Breite, unterhalb derer Bezeichnung und Betrag in einer
     Positionszeile nicht mehr nebeneinander passen. Darunter bricht das Raster
     von selbst auf zwei bzw. eine Spalte um. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.preiskarte {
  background: var(--kartenflaeche);
  border: 1px solid var(--linie-karte-innen);
  border-radius: 6px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
}
.preiskarte__titel { margin: 0; font-size: 20px; font-weight: 700; }
.preiskarte__text { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--text-2); }

.posten {
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  color: var(--text-2);
}
.posten__zeile { display: flex; justify-content: space-between; gap: 12px; }
.posten__zeile dt { flex: 1; }
.posten__zeile dd { margin: 0; font-weight: 600; color: var(--text); white-space: nowrap; }

.summe {
  /* margin-top:auto hält die Summenzeile bei ungleich langen Karten unten. */
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.summe__label { font-size: 15px; color: var(--text-3); }
.summe__wert { font-size: 25px; font-weight: 800; color: var(--akzent); white-space: nowrap; }

/* =========================== 12. Über uns ================================= */

.ueber {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.ueber__text { margin: 0; font-size: 18px; line-height: 1.65; color: var(--text-hell-1); }
.kennzahlen {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}
.kennzahl__wert { display: block; font-size: 26px; font-weight: 800; color: var(--weiss); }
.kennzahl__label { display: block; font-size: 15px; color: var(--text-hell-3); }
.ueber__bilder { display: flex; flex-direction: column; gap: 14px; }
.ueber__bilder img { width: 100%; border-radius: 6px; }
.ueber__bilder-paar { display: flex; gap: 14px; }
.ueber__bilder-paar picture { width: calc(50% - 7px); }

/* ========================= 13. Kundenstimmen ============================== */

.stimmen__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.stimmen__steuerung { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.stimmen__link { font-size: 17px; font-weight: 700; }
.stimmen__pfeile { display: flex; gap: 8px; align-items: center; }

.pfeil {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--linie-kraeftig);
  background: var(--weiss);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.pfeil:hover:not(:disabled) { border-color: var(--akzent); color: var(--akzent); }
/* An den Enden klemmt der Slider — das muss man auch sehen. */
.pfeil:disabled { opacity: .35; cursor: default; }

.stimmen__fenster { overflow: hidden; }
.stimmen__track {
  /* -1px, damit die Trennlinie der ersten sichtbaren Karte im Rand verschwindet. */
  margin: 0 0 0 -1px;
  padding: 0;
  list-style: none;
  display: flex;
  transition: transform .45s ease;
}
.stimme {
  flex: 0 0 33.333%;
  padding: 4px 34px;
  border-left: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
}
.stimme__sterne { margin: 0 0 12px; color: var(--stern); font-size: 15px; letter-spacing: 2px; }
.stimme__zitat {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
}
.stimme__wer { margin: auto 0 0; padding-top: 18px; font-size: 15px; color: var(--text-3); }

/* ============================= 14. Siegel ================================= */

.siegel {
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 26px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.siegel__text { margin: 0; font-size: 17px; color: var(--text-2); max-width: 420px; }
.siegel__text strong { color: var(--text); }
.siegel__logos { display: flex; gap: 36px; align-items: center; flex-wrap: wrap; }
.siegel__logo { height: 86px; width: auto; }
.siegel__logo--klein { height: 74px; }

/* =========================== 15. Checkliste =============================== */

.checkliste {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--linie-kraeftig);
}
.ck { border-bottom: 1px solid var(--linie-kraeftig); }
.ck:last-child { border-bottom: 0; }
.ck__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
}
.ck__titel { margin: 0; font-size: 19px; font-weight: 700; }
.ck__text {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-2);
  max-width: 820px;
}

/* ============================= 16. Kontakt ================================ */

.kontakt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.kontaktwege { display: flex; flex-direction: column; gap: 16px; }

.kkarte {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--linie-karte);
  border-radius: 6px;
  padding: 18px 22px;
  color: var(--text);
}
.kkarte:hover { border-color: var(--akzent); color: var(--text); }
.kkarte--voll { background: var(--akzent); border-color: var(--akzent); }
.kkarte--voll:hover { background: var(--akzent-hover); border-color: var(--akzent-hover); }
.kkarte__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kkarte--voll .kkarte__icon { background: rgba(255, 255, 255, .18); color: var(--weiss); }
.kkarte__label { display: block; font-size: 15px; color: var(--text-3); }
.kkarte--voll .kkarte__label { color: var(--akzent-label); }
.kkarte__wert { display: block; font-size: 20px; font-weight: 700; }
.kkarte--voll .kkarte__wert { color: var(--weiss); }
.kkarte__route { display: block; margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--akzent); }

/* ---- Standort-Block Offenbach-Bieber (seit 12.10.2026) ----
   main.js setzt hidden an Adresszeile und Routen-Link, wenn in config.js
   keine Straße steht. Die Regel mit [hidden] sichert das ab, weil eine
   Komponenten-Regel mit display das UA-Default für [hidden] sonst
   überschreiben würde. */
.standort {
  margin-top: 24px;
  padding: 22px 22px 20px;
  border-left: 3px solid var(--akzent);
  background: var(--kartenflaeche);
  border-radius: 0 6px 6px 0;
}
.standort__kicker {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--akzent);
}
.standort__titel { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.standort__text { margin: 0 0 10px; font-size: 16px; line-height: 1.65; color: var(--text-2); }
.standort__adresse { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--text); }
.standort__zeile { margin: 0 0 4px; font-size: 15px; color: var(--text-2); }
.standort__tel { font-weight: 700; }
.standort__hinweis { margin: 0; font-size: 15px; color: var(--text-3); }
.standort__route { display: inline-block; margin-top: 8px; font-size: 15px; font-weight: 700; }
[data-standort-nur-mit-strasse][hidden] { display: none !important; }

/* Hauptsitz-Karte: kein Link als Ganzes (sie enthält Telefon- und
   Routen-Link), deshalb ohne Hover-Rahmen. */
.kkarte--hauptsitz { margin-top: 16px; align-items: flex-start; }
.kkarte--hauptsitz:hover { border-color: var(--linie-karte); }
.kkarte__info { display: block; margin-top: 2px; font-size: 15px; color: var(--text-2); }
.kkarte__info a { font-weight: 700; }

/* ---- Formular ---- */

.formularkarte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 32px 34px;
}
.formularkarte__titel { margin: 0 0 6px; font-size: 21px; font-weight: 700; }
.formularkarte__unterzeile { margin: 0 0 22px; font-size: 16px; color: var(--text-2); }

.formular { display: flex; flex-direction: column; gap: 14px; }
.feld__label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.feld__eingabe {
  width: 100%;
  border: 1px solid var(--linie-feld);
  border-radius: 5px;
  background: var(--weiss);
  padding: 14px 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
}
.feld__eingabe--gross { resize: vertical; min-height: 96px; line-height: 1.5; }
.feld__eingabe::placeholder { color: var(--text-hell-3); }
.feld__eingabe[aria-invalid="true"] { border-color: var(--fehler); }
.feld__fehler { margin: 6px 0 0; font-size: 14px; color: var(--fehler); }

.knopf--absenden {
  width: 100%;
  background: var(--akzent);
  color: var(--weiss);
  border-radius: 5px;
  padding: 15px;
  font-size: 17px;
  font-weight: 800;
}
.knopf--absenden:hover:not(:disabled) { background: var(--akzent-hover); }
.knopf--absenden:disabled { opacity: .6; cursor: progress; }

.formular__status { margin: 0; font-size: 15px; line-height: 1.5; }
.formular__status[data-art="erfolg"] { color: #1e6b3a; font-weight: 600; }
.formular__status[data-art="fehler"] { color: var(--fehler); font-weight: 600; }
/* Leerer Status soll keinen Abstand erzeugen. */
.formular__status:empty { display: none; }

.formular__datenschutz { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-3); }
/* Links im Fliesstext muessen sich nicht nur durch Farbe abheben (WCAG 1.4.1). */
.formular__datenschutz a,
.consent__text a { text-decoration: underline; text-underline-offset: 2px; }

/* Honigtopf: aus dem Blickfeld, aber nicht display:none — manche Bots
   ignorieren ausgeblendete Felder. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================== 17. Footer ================================ */

.fuss {
  background: var(--dunkel);
  color: var(--text-hell-2);
  padding: 44px var(--sektion-x);
}
.wortmarke--fuss { font-size: 22px; margin-bottom: 10px; }
.wortmarke--fuss .wortmarke__bild { width: 132px; }
.fuss__oben { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.fuss__rechts { text-align: right; }
.fuss__adresse { margin: 0; font-size: 15px; line-height: 1.8; }
.fuss__hell { color: var(--weiss); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; }
.fuss__hell:hover { color: var(--weiss); text-decoration-color: var(--weiss); }
.kicker--fuss { margin-bottom: 10px; letter-spacing: .1em; color: var(--text-hell-3); } /* dunkle Flaeche: heller Ton */

.fuss__unten {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--linie-dunkel);
  margin-top: 32px;
  padding-top: 20px;
  font-size: 14px;
}
.fuss__links { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.fuss__links a { color: var(--text-hell-2); }
.fuss__links a:hover { color: var(--weiss); }
.fuss__knopf {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-hell-2);
  cursor: pointer;
}
.fuss__knopf:hover { color: var(--weiss); }
.fuss__copy { margin: 0; }
.fuss__copy a { color: var(--text-hell-2); }
.fuss__copy a:hover { color: var(--weiss); }

/* ========================= 18. Mobile Anrufleiste ========================= */

/* Nur unterhalb des Umbruchpunkts sichtbar (siehe Media Query weiter unten). */
.anrufleiste {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--dunkel);
  border-top: 1px solid var(--akzent);
  transition: transform .25s ease;
}
.anrufleiste__knopf {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 6px;
  padding: 12px 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--weiss);
  background: rgba(255, 255, 255, .10);
}
.anrufleiste__knopf:hover { color: var(--weiss); background: rgba(255, 255, 255, .18); }
.anrufleiste__knopf--primaer { background: var(--akzent); }
.anrufleiste__knopf--primaer:hover { background: var(--akzent-hover); }

/* Anrufleiste und Einwilligungs-Banner sitzen beide unten. Solange das Banner
   offen ist, tritt die Leiste zurück; nach jeder Entscheidung kommt sie sofort
   wieder. */
body.banner-offen .anrufleiste {
  transform: translateY(110%);
  visibility: hidden;
}

/* ====================== 19. Einwilligungs-Dialog ========================== */

/* Zentriertes Modal: .consent ist der Schleier ueber der ganzen Seite,
   .consent__box die Karte in der Mitte. Die Seite dahinter ist gesperrt
   (html.consent-offen unten), bis eine der beiden Entscheidungen getroffen ist.
   Umgestellt am 08.09.2026 vom Banner unten links, auf das bei Steinmetz Krieg
   nur etwa ein Drittel der Besucher reagiert hat. */
.consent {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;              /* ueber allem, auch ueber Skip-Link und Anrufleiste */
  padding: 16px;
  background: rgba(27, 27, 27, .62);
  align-items: center;
  justify-content: center;
}
.consent--offen { display: flex; animation: consent-schleier .25s ease-out; }
.consent__box {
  width: min(520px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--weiss);
  border-radius: 8px;
  padding: 26px 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  animation: consent-karte .25s ease-out;
}
/* Der Dialog selbst bekommt beim Oeffnen den Fokus (tabindex=-1) — ohne
   Rahmen, der Schleier macht die Situation eindeutig. */
.consent__box:focus { outline: none; }
@keyframes consent-schleier { from { opacity: 0; } to { opacity: 1; } }
@keyframes consent-karte {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
/* Seite hinter dem offenen Dialog: kein Scrollen. */
html.consent-offen,
html.consent-offen body { overflow: hidden; }

.consent__titel { margin: 0 0 8px; font-size: 20px; font-weight: 800; }
.consent__text { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.consent__details { margin-bottom: 14px; }
.consent__summary { font-size: 14px; font-weight: 700; color: var(--akzent); padding: 4px 0; }
.consent__schalter { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 2px; }

.schalter { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.schalter input { margin-top: 3px; flex: none; }
.schalter__titel { display: block; font-weight: 600; }
.schalter__info { display: block; color: var(--text-3); font-size: 13px; }

/* Beide Wege gleich gross nebeneinander. „Auswahl speichern" erscheint erst,
   wenn die Einstellungen aufgeklappt sind — sonst stuenden drei Optionen da,
   wo zwei gemeint sind. */
.consent__knoepfe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.consent__knoepfe .knopf { flex: 1 1 calc(50% - 5px); justify-content: center; text-align: center; }
.consent__knoepfe .consent__speichern { flex-basis: 100%; text-align: center; }
.consent__details:not([open]) + .consent__knoepfe .consent__speichern { display: none; }
.consent__speichern {
  border: 0;
  background: none;
  padding: 4px 2px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: underline;
  cursor: pointer;
}
.consent__speichern:hover { color: var(--akzent); }

/* ======================== 20. Schalter (Flags) ============================ */

/* Einziger Einsatz von !important: die Regel muss das display der jeweiligen
   Komponente (flex/grid) und die Media Query der Anrufleiste sicher
   überschreiben, egal an welchem Element der Schalter hängt. */
[data-flag-aus] { display: none !important; }

/* =========================== 21. Responsive ==============================
   Zwischenschritt bei 1240 px: der 1184-px-Behälter soll nicht am Fensterrand
   kleben. Hauptumbruch bei 900 px wie in der Designvorgabe.
   ======================================================================== */

@media (max-width: 1240px) {
  :root { --sektion-x: 28px; }
}

@media (max-width: 899.98px) {
  :root {
    --sektion-x: 20px;
    --sektion-y: 44px;
  }

  /* Platz für die feste Anrufleiste am unteren Rand. */
  body { padding-bottom: 76px; }

  .h2 { font-size: 26px; }
  .unterzeile { font-size: 17px; margin-bottom: 26px; }

  .kopf__inner { flex-wrap: wrap; gap: 14px; }
  .kopf__rechts { gap: 10px 14px; flex-wrap: wrap; }
  .kopf__adresse { text-align: left; }
  /* Die Nummer darf nie umbrechen — sie ist die wichtigste Handlung der Seite
     und soll als eine Zeile lesbar bleiben. */
  .knopf-pille { padding: 11px 16px; font-size: 15px; white-space: nowrap; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__text { padding: 44px var(--sektion-x) 32px; }
  .hero__zitat { font-size: 26px; }
  .hero__h1 { font-size: 34px; }
  .hero__lead { font-size: 17px; }
  .hero__punkte { grid-template-columns: 1fr; }
  .hero__knoepfe { gap: 10px; }
  .hero__knoepfe .knopf { flex: 1 1 220px; }
  .hero__bild { padding: 0 var(--sektion-x) 44px; }

  .schritte { grid-template-columns: 1fr; }
  /* Einspaltig trennt eine Linie oben statt links. */
  .schritt { padding: 0 0 20px; }
  .schritt + .schritt {
    padding: 20px 0;
    border-left: 0;
    border-top: 1px solid var(--linie-kraeftig);
  }
  .schritt:last-child { padding-bottom: 0; }

  .arten { grid-template-columns: 1fr; }
  /* Einspaltig braucht nur der letzte Eintrag keine Linie mehr. */
  .art:nth-last-child(2) { border-bottom: 1px solid var(--linie); }

  .preise__summary { padding: 18px 20px; font-size: 17px; flex-wrap: wrap; }
  .preise__inhalt { padding: 4px 20px 22px; }
  .preiskarte { padding: 22px 20px; }

  .ueber { grid-template-columns: 1fr; gap: 32px; }
  .kennzahlen { gap: 24px; }

  .stimmen__kopf { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
  .stimmen__steuerung { width: 100%; }
  /* Der Google-Link bricht schmal um; die Pfeile bleiben rechts. */
  .stimmen__pfeile { margin-left: auto; }
  /* Eine Karte je Ansicht — main.js rechnet mit demselben Umbruchpunkt. */
  .stimme { flex: 0 0 100%; padding: 4px 0 4px 20px; }

  .siegel { padding: 20px; gap: 20px; }
  .siegel__logos { gap: 24px; }
  .siegel__logo { height: 66px; }
  .siegel__logo--klein { height: 58px; }

  .kontakt { grid-template-columns: 1fr; gap: 32px; }
  .kkarte { padding: 16px 18px; gap: 12px; }
  .kkarte__wert { font-size: 18px; }
  .formularkarte { padding: 24px 20px; }

  .fuss { padding: 36px var(--sektion-x) 36px; }
  .fuss__rechts { text-align: left; }

  .anrufleiste { display: flex; }

  .consent { padding: 12px; }
  .consent__box { padding: 22px 20px; max-height: calc(100dvh - 24px); }
  /* Untereinander, beide volle Breite — nebeneinander wuerde „Alle akzeptieren"
     auf 375 px umbrechen. */
  .consent__knoepfe .knopf { flex-basis: 100%; }
}

/* Sehr schmale Geräte (iPhone SE und Ähnliches): Icon plus Beschriftung passen
   in der Anrufleiste nicht mehr nebeneinander. Die Beschriftung ist wichtiger,
   die Icons sind rein dekorativ. */
@media (max-width: 359.98px) {
  .anrufleiste { gap: 6px; padding-left: 6px; padding-right: 6px; }
  .anrufleiste__knopf { font-size: 14px; padding: 12px 4px; }
  .anrufleiste__knopf svg { display: none; }
}

/* ======================= 22. Reduzierte Bewegung ========================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stimmen__track,
  .anrufleiste,
  .plus {
    transition: none;
  }
  .consent--offen,
  .consent__box { animation: none; }
}

/* Design & Umsetzung: SION Design — siondesign.de */