/* sonavo.de – mobile first. Schrift (Nunito) wird vom eigenen Server geladen, keine externen Ressourcen. */

@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --wald: #12372a;
  --wald-hell: #1d4d3a;
  --gruen: #77d27f;          /* Logofarbe */
  --gruen-dunkel: #5dbe67;
  --mint: #eaf6ec;
  --papier: #fafcfa;
  --gelb: #ffd84a;
  --tinte: #17261f;
  --stahl: #3f5e52;
  --linie: #c5dccb;
  --display: "Nunito", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --sans: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  padding-bottom: 76px; /* Platz für die feste Leiste am Handy */
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 450;
  color: var(--tinte);
  background: var(--papier);
}

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

a { color: #1b6a43; text-underline-offset: 0.15em; }
a:hover { color: var(--wald); }

:focus-visible {
  outline: 3px solid var(--wald);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.85rem, 6.2vw, 2.9rem); }
h2 { font-size: clamp(1.6rem, 4.6vw, 2.35rem); color: var(--wald); }
h3 { font-size: 1.3rem; font-weight: 700; color: var(--wald); }

p { margin: 0 0 1em; }

.wrap {
  width: min(100% - 40px, 1120px);
  margin-inline: auto;
}

.prose { max-width: 62ch; }

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

.skip {
  position: absolute;
  left: 12px; top: -60px;
  background: var(--gruen);
  color: var(--tinte);
  padding: 10px 16px;
  z-index: 100;
  font-weight: 600;
}
.skip:focus { top: 12px; }

/* ---------- Kopfzeile ---------- */

.kopf {
  background: var(--wald);
  color: #fff;
}

.kopf .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.wortmarke { display: inline-flex; align-items: center; }
.wortmarke img { height: 30px; width: auto; }

.kopf nav ul {
  display: none;
  list-style: none;
  margin: 0; padding: 0;
  gap: 28px;
}
.kopf nav a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}
.kopf nav a:hover { text-decoration: underline; }

.kopf-kontakt {
  color: var(--wald);
  background: var(--gruen);
  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;
  padding: 9px 16px;
  border-radius: 6px;
}
.kopf-kontakt:hover { background: var(--gruen-dunkel); color: var(--wald); }

/* ---------- Schaltflächen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 6px;
  border: 2px solid transparent;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.btn-gruen { background: var(--gruen); color: var(--wald); }
.btn-gruen:hover { background: var(--gruen-dunkel); color: var(--wald); }
.btn-rand { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.btn-rand:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn-wald { background: var(--wald); color: #fff; }
.btn-wald:hover { background: var(--wald-hell); color: #fff; }

.btn-reihe { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }

/* ---------- Abschnitte ---------- */

.abschnitt { padding: 56px 0; }
.band-mint { background: var(--mint); }
.band-wald { background: var(--wald); color: #fff; }
.band-wald h2, .band-wald h3 { color: #fff; }

/* ---------- Einstieg ---------- */

.einstieg { background: var(--wald); color: #fff; padding: 44px 0 56px; }
.einstieg h1 { color: #fff; }
.einstieg p { color: rgba(255, 255, 255, 0.9); }
.einstieg .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }

.einstieg-bild {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--wald-hell);
}

/* ---------- Person ---------- */

.person { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.person-bild {
  width: min(100%, 340px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  background: var(--mint);
}

/* ---------- Eigenleistung ---------- */

.varianten { display: grid; gap: 20px; margin: 28px 0; }
.variante {
  padding: 24px;
  background: var(--papier);
  border-left: 5px solid var(--wald);
  border-radius: 0 6px 6px 0;
}
.variante h3 { margin-bottom: 0.4em; }
.variante p:last-child { margin-bottom: 0; }

.hinweise { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 62ch; }
.hinweise li { padding-left: 20px; position: relative; }
.hinweise li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gruen-dunkel);
}

/* ---------- Leistungen ---------- */

.leistungen { margin-top: 28px; }
.leistung { border-top: 1px solid var(--linie); padding: 24px 0; }
.leistung h3 { margin-bottom: 0.3em; }
.leistung p { margin: 0; max-width: 62ch; }
.leistung:last-child { border-bottom: 1px solid var(--linie); }

/* ---------- Ablauf (echte Reihenfolge, daher nummeriert) ---------- */

.schritte { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 28px; }
.schritt { display: grid; grid-template-columns: 52px 1fr; gap: 8px 16px; }
.schritt::before {
  counter-increment: schritt;
  content: counter(schritt);
  font-family: var(--display);
  font-size: 2.8rem;
  line-height: 1;
  font-weight: 800;
  color: var(--wald);
}
.schritte { counter-reset: schritt; }
.schritt h3 { margin-bottom: 0.3em; }
.schritt p { margin: 0; }

/* ---------- Raster für Vorteile, Prüfung ---------- */

.raster { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; }
.raster li { border-top: 1px solid var(--linie); padding: 22px 0; }
.raster h3 { margin-bottom: 0.3em; }
.raster p { margin: 0; }

/* ---------- Wer macht was ---------- */

.tabelle-hinweis { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 20px 0 0; font-size: 1rem; }
.marke { display: inline-flex; align-items: center; gap: 8px; }
.marke::before { content: ""; width: 14px; height: 14px; border-radius: 3px; flex: none; }
.marke-sonavo::before { background: var(--gruen); }
.marke-betrieb::before { background: var(--wald); }

.wmw { width: 100%; border-collapse: collapse; margin-top: 20px; }
.wmw thead {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);
}
.wmw tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.wmw tr:first-child { border-top: 1px solid var(--linie); }
.wmw th[scope="row"] { display: block; text-align: left; font-weight: 700; margin-bottom: 8px; }
.wmw td { display: block; padding: 2px 0 2px 24px; position: relative; }
.wmw td::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 14px; height: 14px; border-radius: 3px;
}
.wmw td[data-wer="sonavo"]::before { background: var(--gruen); }
.wmw td[data-wer="betrieb"]::before { background: var(--wald); }
.wmw td:empty { display: none; }

/* ---------- Grundsätze ---------- */

.grundsaetze { list-style: none; margin: 28px 0 0; padding: 0; max-width: 70ch; }
.grundsaetze li { padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.grundsaetze li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.grundsaetze strong { color: var(--gruen); font-weight: 800; }

/* ---------- AngebotsCheck ---------- */

.optionen { display: grid; gap: 20px; margin-top: 28px; }
.option {
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 24px;
  background: #fff;
}
.option-frei { background: var(--mint); border-top: 5px solid var(--gruen); }
.option h3 { margin-bottom: 0.2em; }
.preis { font-family: var(--display); font-size: 1.9rem; font-weight: 800; color: var(--wald); margin: 0 0 0.6em; }
.option-klein { font-size: 1rem; color: var(--stahl); margin: 0; }

/* ---------- Referenzen, Empfehlung ---------- */

/* ---------- Empfehlungsprämie (bewusst auffällig) ---------- */

.empfehlung { background: var(--gelb); color: var(--tinte); padding: 56px 0; }
.empfehlung .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.empfehlung h2 { color: var(--wald); }
.empfehlung strong { color: var(--wald); }

.siegel {
  justify-self: center;
  width: 210px;
  height: 210px;
  margin: 14px;
  border-radius: 50%;
  background: var(--wald);
  color: var(--gelb);
  display: grid;
  place-content: center;
  text-align: center;
  transform: rotate(-6deg);
  box-shadow: 0 0 0 8px var(--gelb), 0 0 0 12px var(--wald);
}
.siegel-betrag { font-family: var(--display); font-weight: 800; font-size: 3.6rem; line-height: 1; letter-spacing: -0.02em; }
.siegel-text { font-weight: 800; font-size: 1.05rem; margin-top: 6px; color: #fff; }

/* ---------- Kontakt ---------- */

.kontakt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.telefon {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 800;
  color: var(--wald);
  text-decoration: none;
  border-bottom: 3px solid var(--gruen);
  margin: 4px 0 20px;
}

.formular {
  background: var(--mint);
  border-radius: 6px;
  padding: 24px;
  display: grid;
  gap: 18px;
}
.feld { display: grid; gap: 6px; }
.feld-paar { display: grid; gap: 18px; }
.formular label, .formular legend { font-weight: 700; font-size: 1rem; }
.formular .optional { font-weight: 400; color: var(--stahl); }

.formular input[type="text"],
.formular input[type="email"],
.formular input[type="tel"],
.formular select,
.formular textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem; /* mindestens 16px, damit iPhones nicht zoomen */
  color: var(--tinte);
  background: #fff;
  border: 1.5px solid #7f9d88;
  border-radius: 6px;
}
.formular textarea { min-height: 140px; resize: vertical; }

.auswahl { border: 0; padding: 0; margin: 0; min-width: 0; }
.auswahl legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 1rem; }
.auswahl-liste { display: grid; gap: 10px; }
.formular .haken {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 14px;
  background: #fff;
  border: 1.5px solid #7f9d88;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
.haken input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--wald); }
.haken:has(input:checked) { border-color: var(--wald); background: #f1faf2; box-shadow: inset 0 0 0 1px var(--wald); }

.zustimmung { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-size: 1rem; }
.zustimmung input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--wald); }
.zustimmung label { font-weight: 400; }

.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Fuß ---------- */

.fuss { background: var(--tinte); color: #d8e2e0; padding: 32px 0; font-size: 1rem; }
.fuss a { color: #fff; }
.fuss .wrap { display: grid; gap: 12px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }

/* ---------- Feste Leiste am Handy ---------- */

.mobilleiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--wald);
  border-top: 3px solid var(--gruen);
}
.mobilleiste .btn { min-height: 48px; padding: 8px 12px; }

/* ---------- Rechtstexte und Rückmeldeseite ---------- */

.recht { padding: 40px 0 64px; }
.recht h1 { color: var(--wald); font-size: clamp(1.8rem, 5.5vw, 2.6rem); }
.recht h2 { font-size: 1.5rem; margin-top: 2em; }
.recht h3 { font-size: 1.15rem; margin-top: 1.6em; }
.recht p, .recht li { max-width: 70ch; }
.rueckmeldung { padding: 56px 0 72px; }
.rueckmeldung ul { padding-left: 1.2em; }

/* ---------- Ab Tablet ---------- */

@media (min-width: 700px) {
  .btn-reihe { flex-direction: row; flex-wrap: wrap; }
  .varianten { grid-template-columns: 1fr 1fr; }
  .raster { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .optionen { grid-template-columns: repeat(3, 1fr); }
  .feld-paar { grid-template-columns: 1fr 1fr; }

  .wmw thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .wmw tr { display: table-row; padding: 0; }
  .wmw tr:first-child { border-top: 0; }
  .wmw th, .wmw td { padding: 14px 16px; vertical-align: top; text-align: left; }
  .wmw thead th { border-bottom: 3px solid var(--wald); font-weight: 600; }
  .wmw thead th.sp-sonavo { border-bottom-color: var(--gruen); }
  .wmw th[scope="row"] { display: table-cell; margin: 0; width: 38%; }
  .wmw td { display: table-cell; position: static; }
  .wmw td::before { content: none; }
  .wmw td:empty { display: table-cell; }
  .wmw td:empty::after { content: "–"; color: #7f9d88; }
  .tabelle-hinweis { display: none; }
}

/* ---------- Ab Desktop ---------- */

@media (min-width: 900px) {
  body { font-size: 1.1875rem; padding-bottom: 0; }
  .mobilleiste { display: none; }

  .wrap { width: min(100% - 64px, 1120px); }
  .abschnitt { padding: 96px 0; }

  .kopf .wrap { min-height: 76px; }
  .kopf nav ul { display: flex; }
  .kopf-kontakt { display: none; }

  .einstieg { padding: 72px 0 88px; }
  .einstieg .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; align-items: center; }
  .einstieg-bild { aspect-ratio: 5 / 4; }

  .person { grid-template-columns: 340px minmax(0, 1fr); gap: 56px; }
  .person-bild { width: 340px; }

  .leistung { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: baseline; }
  .leistung h3 { margin: 0; }

  .schritte { grid-template-columns: repeat(2, 1fr); gap: 40px 56px; }

  .raster { grid-template-columns: repeat(3, 1fr); }

  .empfehlung { padding: 80px 0; }
  .empfehlung .wrap { grid-template-columns: minmax(0, 1fr) auto; gap: 72px; }
  .siegel { width: 250px; height: 250px; }
  .siegel-betrag { font-size: 4.4rem; }
  .wortmarke img { height: 36px; }
  .kontakt { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .formular { padding: 32px; }

  .fuss .wrap { grid-template-columns: 1fr auto; align-items: center; }
}

/* ---------- Angebotsformulare (Mehrschritt) ---------- */

.angebot-kopf { padding: 40px 0 8px; }
.angebot-kopf h1 { color: var(--wald); }
.angebot-kopf .vorteile { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 700; color: var(--wald); }
.angebot-kopf .vorteile li::before { content: "✓ "; color: #1b6a43; }
.angebot { padding: 24px 0 64px; }
.angebot .wrap { max-width: 760px; }

.reiter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; }
.reiter button {
  min-height: 52px;
  font: inherit;
  font-weight: 800;
  color: var(--wald);
  background: #fff;
  border: 2px solid var(--wald);
  border-radius: 6px;
  cursor: pointer;
}
.reiter button[aria-selected="true"] { background: var(--wald); color: #fff; }

.fortschritt { margin: 0 0 4px; }
.fortschritt p { margin: 0 0 8px; font-size: 1rem; color: var(--stahl); font-weight: 700; }
.fortschritt .leiste { height: 8px; background: #fff; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
.fortschritt .leiste i { display: block; height: 100%; background: var(--gruen-dunkel); transition: width 0.25s; }

.frage { border: 0; margin: 0; padding: 0; min-width: 0; }
.frage legend { padding: 0; margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.25; color: var(--wald); }
.frage .hinweis { margin: 0 0 14px; font-size: 1rem; color: var(--stahl); }
.frage .haken { align-items: flex-start; padding: 12px 14px; }
.frage .haken input { margin-top: 2px; }
.frage .haken small { display: block; font-weight: 400; color: var(--stahl); font-size: 0.95rem; line-height: 1.4; margin-top: 2px; }

.formular .navi { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; }
.formular .navi .btn { min-width: 120px; }
.formular .navi .btn:only-child { margin-left: auto; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-hell { background: #fff; color: var(--wald); border-color: var(--wald); }
.btn-hell:hover { background: #f1faf2; color: var(--wald); }

.fehler { color: #a3261c; font-weight: 700; font-size: 1rem; margin: 0; }
.fehler:empty { display: none; }

.formular .feld-drei { display: grid; gap: 18px; }
.angebot-fertig h2 { margin-bottom: 0.4em; }
.angebot-alt { margin: 22px 0 0; font-size: 1rem; color: var(--stahl); }
.angebot-alt a { font-weight: 700; }

@media (min-width: 700px) {
  .formular .feld-drei { grid-template-columns: 160px 1fr; }
  .angebot .formular { padding: 32px 36px; }
}