/* ==========================================================================
   Taxi Strube – Sangerhausen
   Stylesheet der Web-Visitenkarte
   Zielgruppe 50+: große Grundschrift, hoher Kontrast, große Klickflächen
   ========================================================================== */

/* ---------- Schriften (lokal eingebunden, keine Verbindung zu Google) ---------- */
/* Überschriften: Archivo – fette, kursive Grotesk angelehnt an den Schriftzug im Logo */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-v25-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-v25-latin-800italic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-v25-latin-900italic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-v19-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-v19-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-v19-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Farben & Maße ---------- */
:root {
  --gelb: #fecc00;          /* Taxi-Gelb */
  --gelb-dunkel: #c99f00;
  --gelb-hell: #fff4c7;
  --nacht: #14161a;         /* dunkle Flächen */
  --nacht-2: #1d2026;
  --nacht-3: #2a2e36;
  --creme: #faf7f0;         /* helle Flächen */
  --weiss: #ffffff;
  --text: #1c1e22;
  --text-hell: #e9e6df;
  --text-grau: #50545c;
  --text-grau-hell: #b4b1aa;
  --linie: #e4dfd3;
  --linie-dunkel: #343842;

  --display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --sans: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  --breite: 1180px;
  --radius: 14px;
  --radius-gross: 22px;
  --schatten: 0 10px 30px rgba(20, 22, 26, .08);
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.1875rem;       /* 19px – angenehm lesbar für 50+ */
  line-height: 1.65;
  color: var(--text);
  background: var(--creme);
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  line-height: 1.1;
  margin: 0 0 .5em;
  letter-spacing: -.015em;
}
h1, h2 { font-style: italic; word-spacing: .08em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); font-weight: 900; }
h2 { font-size: clamp(1.85rem, 3.5vw, 2.8rem); font-weight: 800; }
h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.005em; }

p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 20px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--gelb); color: var(--nacht); padding: 10px 16px;
  border-radius: 8px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 3px solid var(--gelb);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Platzhalter deutlich sichtbar markieren – vor Livegang entfernen */
.ph {
  background: rgba(254, 204, 0, .28);
  outline: 1px dashed var(--gelb-dunkel);
  border-radius: 4px;
  padding: 0 .2em;
}

/* ---------- Knöpfe ----------
   Schräge Form im Stil des Logos (kursiver Schriftzug, dicke Kontur):
   Die Fläche liegt in ::before und wird geneigt – der Text bleibt gerade und scharf. */
.btn {
  --btn-flaeche: transparent;
  --btn-rand: transparent;
  --btn-schatten: transparent;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 58px;
  padding: .75em 1.7em;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  background: none;          /* Browser-Standard von <button> entfernen */
  border: 0;
  transition: color .15s, transform .15s;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: skewX(-12deg);
  background: var(--btn-flaeche);
  border: 2px solid var(--btn-rand);
  border-radius: 5px;
  box-shadow: 5px 5px 0 var(--btn-schatten);
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { transform: translate(-2px, -2px); }
.btn:hover::before { box-shadow: 7px 7px 0 var(--btn-schatten); }
.btn:active { transform: translate(3px, 3px); }
.btn:active::before { box-shadow: 1px 1px 0 var(--btn-schatten); }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }

/* Gelb mit dunkler „Logo-Kontur“ als versetztem Schatten */
.btn-gelb { color: var(--nacht); --btn-flaeche: var(--gelb); --btn-rand: var(--gelb); --btn-schatten: #0a0b0d; }
.btn-gelb:hover { --btn-flaeche: #ffd83d; }
/* auf dunklem Grund wäre ein schwarzer Schatten unsichtbar → dunkles Gelb */
.kopf .btn-gelb,
.hero .btn-gelb,
.abschnitt-dunkel .btn-gelb,
.kontakt-box .btn-gelb { --btn-schatten: #8a6d00; }

.btn-rahmen-hell { color: var(--weiss); --btn-rand: rgba(255, 255, 255, .7); --btn-schatten: rgba(254, 204, 0, .55); }
.btn-rahmen-hell:hover { color: var(--gelb); --btn-rand: var(--gelb); }

.btn-rahmen-dunkel { color: var(--nacht); --btn-flaeche: var(--weiss); --btn-rand: var(--nacht); --btn-schatten: var(--gelb); }
.btn-rahmen-dunkel:hover { --btn-flaeche: var(--gelb-hell); }

.btn-gruppe { display: flex; flex-wrap: wrap; gap: 18px 22px; }

/* ---------- Kopfzeile (bewusst ohne Menü – nur Logo + Telefon) ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20, 22, 26, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.kopf .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--weiss);
  text-decoration: none;
}
.logo-bild { width: auto; height: 58px; }
.logo-ort {
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, .18);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-grau-hell);
}

.kopf .btn { min-height: 48px; padding: .5em 1.4em; font-size: 1.125rem; }

/* ---------- Startbereich ---------- */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--weiss);
  background-color: var(--nacht);
  /* Hintergrundbild: links abgedunkelt für gut lesbaren Text, rechts bleibt das Porträt sichtbar */
  background-image:
    linear-gradient(90deg, rgba(14,16,20,.88) 0%, rgba(14,16,20,.66) 36%, rgba(14,16,20,.18) 60%, rgba(14,16,20,0) 74%),
    linear-gradient(180deg, rgba(14,16,20,.35) 0%, rgba(14,16,20,0) 30%),
    url("../img/hero-sangerhausen.jpg");
  background-size: cover;
  background-position: center, center, 60% center;
  background-repeat: no-repeat;
}
.hero .container {
  position: relative;
  z-index: 2;
  padding-top: clamp(64px, 10vw, 120px);
  padding-bottom: clamp(64px, 9vw, 110px);
  min-height: min(82vh, 800px);
  display: flex;
  align-items: center;
}
.hero-inhalt { max-width: 640px; }
.hero h1,
.hero-text { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }


.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);                 /* auf hellen Flächen: dunkle Schrift … */
  margin-bottom: 1.2em;
}
.kicker::before {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--gelb);            /* … mit gelbem Strich */
}

.hero h1 .gelb { color: var(--gelb); }
.hero-text {
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  color: var(--text-hell);
  max-width: 640px;
  margin-bottom: 1.8em;
}

.vorteile-leiste {
  list-style: none;
  margin: 2.4em 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  color: var(--text-hell);
  font-weight: 600;
}
.vorteile-leiste li { display: flex; align-items: center; gap: .55em; }
.vorteile-leiste svg { width: 22px; height: 22px; color: var(--gelb); flex: none; }


/* ---------- Abschnitte allgemein ---------- */
.abschnitt { padding: clamp(72px, 9vw, 120px) 0; }
.abschnitt-dunkel { background: var(--nacht); color: var(--text-hell); }
.abschnitt-dunkel h2,
.abschnitt-dunkel h3 { color: var(--weiss); }
.abschnitt-weiss { background: var(--weiss); }

.abschnitt-kopf { max-width: 760px; margin-bottom: 3em; }
.abschnitt-kopf.mitte { margin-left: auto; margin-right: auto; text-align: center; }
.abschnitt-kopf.mitte .kicker { justify-content: center; }
.abschnitt-kopf p { font-size: 1.25rem; color: var(--text-grau); }
.abschnitt-dunkel .abschnitt-kopf p { color: var(--text-grau-hell); }
/* Kicker überall gleich groß – auch in Abschnittsköpfen (dort gilt sonst die Absatz-Regel oben) */
.abschnitt-kopf p.kicker { font-size: .9rem; color: var(--text); }
/* Auf dunklen Flächen: gelbe Schrift */
.hero p.kicker,
.abschnitt-dunkel p.kicker,
.abschnitt-dunkel .abschnitt-kopf p.kicker,
.kontakt-box p.kicker { color: var(--gelb); }

.zwei-spalten {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

/* ---------- Krankenfahrten ---------- */
.haken-liste { list-style: none; margin: 0 0 2em; padding: 0; }
.haken-liste li {
  position: relative;
  padding: .55em 0 .55em 2.4em;
  border-bottom: 1px solid var(--linie);
  font-weight: 600;
}
.haken-liste li:last-child { border-bottom: 0; }
.haken-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .75em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--gelb) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314161a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.haken-liste li span { display: block; font-weight: 400; color: var(--text-grau); }

/* Foto Krankenfahrt mit überlappendem Zitatkasten */
.kf-medien { position: relative; }
.kf-bild { margin: 0; }
.kf-bild img {
  width: 100%;
  aspect-ratio: 1000 / 752;
  object-fit: cover;
  border-radius: var(--radius-gross);
  box-shadow: 8px 8px 0 var(--gelb);   /* harter Versatz wie bei den Knöpfen */
}
.kf-medien .zitat-karte {
  margin: -72px 28px 0 -28px;          /* ragt leicht über das Foto */
  position: relative;
}

.zitat-karte {
  background: var(--nacht);
  color: var(--text-hell);
  border-radius: var(--radius-gross);
  padding: clamp(32px, 4vw, 48px);
  box-shadow: var(--schatten);
  position: relative;
}
.zitat-karte::before {
  content: "„";
  position: absolute;
  top: -.62em;               /* „ sitzt auf der Grundlinie – nach oben ziehen */
  left: .35em;
  font-family: var(--display);
  font-size: 7rem;
  line-height: 1;
  color: var(--gelb);
  font-weight: 900;
  font-style: italic;
}
.zitat-karte p.gross {
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  line-height: 1.35;
  color: var(--weiss);
  margin-top: .8em;
  font-weight: 800;
  font-style: italic;
}
.zitat-karte .fakten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 2em;
  padding-top: 1.6em;
  border-top: 1px solid var(--linie-dunkel);
}
.fakten strong {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  color: var(--gelb);
  line-height: 1.1;
  font-weight: 900;
  font-style: italic;
}
.fakten span { font-size: .95rem; color: var(--text-grau-hell); }

/* ---------- Ratgeber: Wie komme ich zur Krankenfahrt? ---------- */
.schritte {
  list-style: none;
  margin: 0 0 3.5em;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: schritt;
}
.schritte li {
  counter-increment: schritt;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 28px 24px;
  position: relative;
}
.schritte li::before {
  content: counter(schritt);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--nacht);
  color: var(--gelb);
  font-family: var(--display);
  font-size: 1.5rem;
  margin-bottom: 18px;
  font-weight: 900;
  font-style: italic;
}
.schritte h3 { font-size: 1.3rem; margin-bottom: .4em; }
.schritte p { margin: 0; color: var(--text-grau); font-size: 1.0625rem; }

.ratgeber-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.info-karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(28px, 3.5vw, 40px);
}
.info-karte h3 {
  display: flex;
  align-items: center;
  gap: .55em;
  font-size: 1.55rem;
}
.info-karte h3 svg { width: 30px; height: 30px; color: var(--gelb-dunkel); flex: none; }
.info-karte ul { margin: 0 0 1em; padding-left: 1.2em; }
.info-karte li { margin-bottom: .45em; }
.info-karte li::marker { color: var(--gelb-dunkel); }

.info-karte.betont {
  background: var(--nacht);
  color: var(--text-hell);
  border-color: var(--nacht);
}
.info-karte.betont h3 { color: var(--weiss); }
.info-karte.betont h3 svg { color: var(--gelb); }

.kosten-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: .4em 0 1.2em;
  font-size: 1.0625rem;
}
.kosten-tabelle th,
.kosten-tabelle td {
  text-align: left;
  padding: .75em .5em;
  border-bottom: 1px solid var(--linie-dunkel);
  vertical-align: top;
}
.kosten-tabelle th { color: var(--gelb); font-weight: 700; width: 46%; }

.hinweis-box {
  margin-top: 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--gelb-hell);
  border: 1px solid #f1dc8a;
  border-radius: var(--radius);
  padding: 22px 26px;
}
.hinweis-box svg { width: 30px; height: 30px; flex: none; color: var(--gelb-dunkel); margin-top: 2px; }
.hinweis-box p { margin: 0; }
.klein { font-size: .95rem; color: var(--text-grau); }
.abschnitt-dunkel .klein,
.betont .klein { color: var(--text-grau-hell); }

/* ---------- Generationswechsel ---------- */
.personen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.person figure { margin: 0; }
.foto-platzhalter {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-gross);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 14px, transparent 14px 28px),
    var(--nacht-3);
  border: 2px dashed #4a4f5a;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--text-grau-hell);
  font-size: .95rem;
  padding: 20px;
}
.foto-platzhalter svg { width: 56px; height: 56px; margin: 0 auto 10px; opacity: .6; }
.person figcaption { margin-top: 14px; }
.person figcaption strong {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--weiss);
  font-weight: 700;
}
.person figcaption span {
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gelb);
  font-weight: 700;
}
.person:nth-child(2) { margin-top: 48px; }

.zeitleiste {
  list-style: none;
  margin: 2em 0;
  padding: 0;
  border-left: 2px solid var(--linie-dunkel);
}
.zeitleiste li { position: relative; padding: 0 0 1.2em 1.6em; }
.zeitleiste li::before {
  content: "";
  position: absolute;
  left: -8px;
  top: .45em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gelb);
  box-shadow: 0 0 0 4px var(--nacht);
}
.zeitleiste strong { color: var(--gelb); display: block; font-size: 1.05rem; }

/* ---------- Leistungen ---------- */
.karten-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 32px 28px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten);
  border-color: var(--gelb);
}
.karte-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--gelb-hell);
  color: var(--nacht);
  margin-bottom: 22px;
}
.karte-icon svg { width: 30px; height: 30px; }
.karte p { color: var(--text-grau); margin: 0; }
.karte.hervor { background: var(--nacht); border-color: var(--nacht); color: var(--text-hell); }
.karte.hervor h3 { color: var(--weiss); }
.karte.hervor p { color: var(--text-grau-hell); }
.karte.hervor .karte-icon { background: var(--gelb); }
.etikett {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nacht);
  background: var(--gelb);
  border-radius: 999px;
  padding: .2em .8em;
  margin-bottom: .8em;
}

/* ---------- Leistungen: Umschaltung der Varianten ---------- */
#leistungen[data-variante="a"] .variante-b,
#leistungen[data-variante="b"] .variante-a { display: none; }

/* ---------- Leistungen Variante B: Schwerpunkt-Fläche + nummerierte Liste ---------- */
.leistungen-kopf {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px 64px;
  align-items: end;
  margin-bottom: 3em;
}
.leistungen-kopf h2 { margin-bottom: 0; }
.leistungen-kopf > p {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-grau);
  border-left: 3px solid var(--gelb);
  padding-left: 20px;
}

.leistungen-bento {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.schwerpunkt {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(420px 260px at 100% 100%, rgba(254, 204, 0, .14), transparent 70%),
    var(--nacht);
  color: var(--text-hell);
  border-radius: var(--radius-gross);
  padding: 56px clamp(26px, 3.5vw, 44px) clamp(28px, 3.5vw, 44px);
}
/* Taxi-Karoband am oberen Rand */
.karoband {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: repeating-conic-gradient(var(--gelb) 0 25%, var(--nacht) 0 50%) 0 0 / 20px 20px;
}
.schwerpunkt h3 {
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  font-weight: 800;
  font-style: italic;
  color: var(--weiss);
  margin: .35em 0 .3em;
}
.schwerpunkt > p { color: var(--text-grau-hell); }
.schwerpunkt-liste {
  list-style: none;
  margin: 1.4em 0 2em;
  padding: 0;
}
.schwerpunkt-liste li {
  position: relative;
  padding: .6em 0 .6em 1.8em;
  border-top: 1px solid var(--linie-dunkel);
  font-weight: 600;
  color: var(--weiss);
}
.schwerpunkt-liste li::before {          /* kleiner schräger Balken wie die Knöpfe */
  content: "";
  position: absolute;
  left: 2px;
  top: 1.05em;
  width: 12px;
  height: 12px;
  background: var(--gelb);
  transform: skewX(-12deg);
}
.schwerpunkt .btn-gruppe { align-items: center; }
.schwerpunkt-link {
  color: var(--gelb);
  font-weight: 700;
  text-underline-offset: 4px;
}

.leistungen-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.leistungen-liste li {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 18px;
  align-items: start;
  padding: 26px 0;
  border-top: 2px solid var(--nacht);
  transition: background-color .2s;
}
.leistungen-liste li:last-child { border-bottom: 2px solid var(--nacht); }
.leistungen-liste .piktogramm {
  width: 64px;
  height: 64px;
  color: var(--nacht);
  filter: drop-shadow(3px 3px 0 var(--gelb));   /* gelber Versatz wie Logo-Kontur & Knöpfe */
  transition: transform .2s;
}
.leistungen-liste li:hover .piktogramm { transform: translate(-2px, -2px) rotate(-4deg); }
.leistungen-liste h3 { margin: 0 0 .25em; font-size: 1.4rem; }
.leistungen-liste p { margin: 0; color: var(--text-grau); }

/* ---------- Warum wir ---------- */
.gruende {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.grund {
  border-top: 3px solid var(--gelb);
  padding-top: 22px;
}
.grund svg { width: 38px; height: 38px; color: var(--gelb); margin-bottom: 14px; }
.grund h3 { font-size: 1.3rem; }
.grund p { color: var(--text-grau-hell); margin: 0; }

/* ---------- Bewertungen ---------- */
.bewertungen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.bewertung {
  margin: 0;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
}
.sterne { color: var(--gelb-dunkel); font-size: 1.3rem; letter-spacing: .1em; margin-bottom: .6em; }
.bewertung blockquote { margin: 0 0 1.2em; font-size: 1.125rem; flex: 1; }
.bewertung figcaption { font-weight: 700; }
.bewertung figcaption span { display: block; font-weight: 400; font-size: .95rem; color: var(--text-grau); }
.mitte-text { text-align: center; margin-top: 2.2em; }

/* ---------- Häufige Fragen ---------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq details {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 64px 22px 26px;
  font-weight: 700;
  font-size: 1.2rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gelb-hell);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; background: var(--gelb); }
.faq details[open] summary { border-bottom: 1px solid var(--linie); }
.faq .antwort { padding: 20px 26px 8px; color: var(--text-grau); }

/* ---------- Abschluss / Kontakt ---------- */
.kontakt-box {
  background:
    radial-gradient(700px 300px at 100% 0%, rgba(254, 204, 0, .18), transparent 60%),
    var(--nacht-2);
  border-radius: 28px;
  padding: clamp(36px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: center;
  color: var(--text-hell);
}
.kontakt-box h2 { color: var(--weiss); }
.telefon-gross {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  color: var(--gelb);
  text-decoration: none;
  line-height: 1.1;
  margin: .2em 0 .4em;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.01em;
}
.telefon-gross:hover { text-decoration: underline; text-underline-offset: 6px; }
.kontakt-daten { list-style: none; margin: 0; padding: 0; }
.kontakt-daten li {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linie-dunkel);
}
.kontakt-daten li:last-child { border-bottom: 0; }
.kontakt-daten svg { width: 26px; height: 26px; color: var(--gelb); flex: none; margin-top: 2px; }
.kontakt-daten strong { display: block; color: var(--weiss); }
.kontakt-daten a { color: var(--text-hell); }

/* ---------- Kontaktformular ---------- */
.anfrage-raster {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.anfrage-intro .hinweis-box { margin: 1.4em 0; }
.anfrage-intro .hinweis-box a { font-weight: 700; white-space: nowrap; }

.formular {
  background: var(--creme);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(24px, 4vw, 44px);
}
.formular-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 20px;
}
.feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feld-breit { grid-column: 1 / -1; }
.feld label { font-weight: 700; }
.pflicht { color: #b3261e; }
.optional { font-weight: 400; color: var(--text-grau); font-size: .95rem; }

.feld input[type="text"],
.feld input[type="tel"],
.feld input[type="email"],
.feld select,
.feld textarea {
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  font: inherit;
  font-size: 1.125rem;
  color: var(--text);
  background: var(--weiss);
  border: 2px solid #cfc8b8;
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.feld textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.feld select {
  appearance: none;
  background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314161a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 22px no-repeat;
  padding-right: 48px;
}
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--nacht);
  box-shadow: 4px 4px 0 var(--gelb);
}
.feld [aria-invalid] { border-color: #b3261e; background-color: #fff6f5; }

.feld-fehler {
  margin: 0;
  color: #b3261e;
  font-weight: 600;
  font-size: 1rem;
}
.feld-fehler::before { content: "⚠ "; }

.checkbox {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-weight: 400 !important;
  cursor: pointer;
}
.checkbox input {
  flex: none;
  width: 28px;
  height: 28px;
  margin: 1px 0 0;
  accent-color: var(--nacht);
  cursor: pointer;
}

/* Honigtopf: für Menschen unsichtbar */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ALTCHA-Widget im Stil der Seite */
altcha-widget {
  --altcha-max-width: 100%;
  --altcha-border-width: 2px;
  --altcha-border-color: #cfc8b8;
  --altcha-border-radius: 10px;
  --altcha-color-base: var(--weiss);
  --altcha-color-base-content: var(--text);
  --altcha-color-primary: var(--nacht);
  --altcha-color-success: #1f7a3a;
  --altcha-color-error: #b3261e;
  --altcha-checkbox-size: 28px;
  font-size: 1.125rem;
}

.formular-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
}
.formular-fuss .klein { margin: 0; }
.btn[disabled] { opacity: .7; cursor: wait; }

.formular-status {
  margin-top: 22px;
  padding: 18px 22px;
  border-radius: var(--radius);
  font-weight: 600;
}
.formular-status.erfolg { background: #e8f5ec; border: 2px solid #1f7a3a; color: #14502a; }
.formular-status.fehler { background: #fff1f0; border: 2px solid #b3261e; color: #8c1d17; }

/* ---------- Fußzeile ---------- */
.fuss {
  background: #0f1114;
  color: var(--text-grau-hell);
  padding: 40px 0 110px;
  font-size: 1rem;
}
.fuss .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
}
.fuss nav { display: flex; gap: 24px; flex-wrap: wrap; }
.fuss a { color: var(--text-hell); }

/* ---------- Anruf-Leiste für Smartphones ---------- */
.anruf-leiste { display: none; }

/* ---------- Unterseiten (Impressum / Datenschutz) ---------- */
.rechtstext { max-width: 820px; }
.rechtstext h1 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); }
.rechtstext h2 { font-size: 1.6rem; margin-top: 1.8em; }

/* ---------- Responsiv ---------- */
@media (max-width: 1024px) {
  .schritte { grid-template-columns: 1fr 1fr; }
  .gruende { grid-template-columns: 1fr 1fr; gap: 36px 22px; }
  .karten-raster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .zwei-spalten,
  .ratgeber-raster,
  .kontakt-box { grid-template-columns: 1fr; }
  .bewertungen { grid-template-columns: 1fr; }
  .leistungen-kopf,
  .leistungen-bento { grid-template-columns: 1fr; }
  .anfrage-raster { grid-template-columns: 1fr; }
  .reihenfolge-tausch > :first-child { order: 2; }
  /* Handy/Tablet: ganzes Bild als Streifen oben (Kirche, Taxi, Porträt sichtbar),
     läuft nach unten ins Dunkle aus – Text steht darunter */
  .hero {
    background-image:
      linear-gradient(180deg, rgba(14,16,20,0) 0, rgba(14,16,20,0) 32vw, var(--nacht) 56.3vw),
      url("../img/hero-sangerhausen-1200.jpg");
    background-size: 100% 100%, 100% auto;
    background-position: top center, top center;
  }
  .hero .container { min-height: 0; padding-top: 44vw; }
}

@media (max-width: 640px) {
  body { font-size: 1.125rem; }
  .kopf .container { min-height: 68px; }
  .logo-bild { height: 48px; }
  .logo-ort { display: none; }
  .hero .kicker { font-size: .75rem; letter-spacing: .12em; }
  .kopf .btn-text { display: none; }
  .kopf .btn { width: 56px; padding: 0; }

  .btn-gruppe .btn { width: calc(100% - 12px); margin-left: 6px; padding-left: .8em; padding-right: .8em; }  /* Platz für die Schräge */
  .schritte,
  .karten-raster,
  .gruende { grid-template-columns: 1fr; }
  .personen { gap: 14px; }
  .person:nth-child(2) { margin-top: 28px; }
  .zitat-karte .fakten { grid-template-columns: 1fr 1fr 1fr; }
  .fakten strong { font-size: 1.45rem; white-space: nowrap; }
  .kosten-tabelle th,
  .kosten-tabelle td { display: block; width: 100%; padding: .2em 0; border: 0; }
  .kosten-tabelle tr { display: block; padding: .7em 0; border-bottom: 1px solid var(--linie-dunkel); }
  .hinweis-box { flex-direction: column; gap: 10px; }
  .kf-medien .zitat-karte { margin: -40px 10px 0; }
  .kf-bild img { box-shadow: 6px 6px 0 var(--gelb); }
  .formular-raster { grid-template-columns: 1fr; }
  .leistungen-liste li { grid-template-columns: 64px 1fr; gap: 12px; }
  .schwerpunkt { padding-left: 20px; padding-right: 20px; }
  .schwerpunkt .btn { font-size: 1rem; white-space: nowrap; }
  .leistungen-liste .piktogramm { width: 52px; height: 52px; }
  .formular-fuss .btn { width: calc(100% - 12px); margin-left: 6px; }

  .anruf-leiste {
    display: flex;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 60;
  }
  .anruf-leiste .btn { width: calc(100% - 12px); margin-left: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}