/* ============================================================
   BASE — Reset + Struktur-Utilities. KEINE Designmeinung.
   Alle Werte kommen aus tokens.css. Diese Datei wird nie pro
   Projekt angepasst — Anpassung passiert NUR in tokens.css.
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--schrift-text);
  font-size: var(--text-m);
  line-height: var(--zeilenhoehe-text);
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  line-height: var(--zeilenhoehe-eng);
  font-weight: var(--display-gewicht, 600);
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-l); }

a { color: var(--farbe-akzent); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 2px;
}

/* --- Layout-Utilities --- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--raum-2);
}
.sektion { padding-block: var(--raum-sektion); }
.textspalte { max-width: var(--textspalte); }

.raster { display: grid; gap: var(--raum-3); }
.raster-2 { grid-template-columns: repeat(2, 1fr); }
.raster-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .raster-2, .raster-3 { grid-template-columns: 1fr; }
}

.stapel > * + * { margin-block-start: var(--raum-2); }
.stapel-gross > * + * { margin-block-start: var(--raum-3); }

/* --- Komponenten-Grundformen (Charakter kommt aus Tokens) --- */
.knopf {
  display: inline-block;
  font-family: var(--schrift-display);
  font-size: var(--text-m);
  padding: 0.75em 1.5em;
  border-radius: var(--radius);
  border: var(--linie);
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  text-decoration: none;
  cursor: pointer;
}
.knopf--sekundaer { background: transparent; color: var(--farbe-text); }

.karte {
  border: var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-flach);
  padding: var(--raum-3);
  background: var(--farbe-flaeche);
}

.linie-oben { border-top: var(--linie); padding-top: var(--raum-2); }

blockquote {
  border-left: 3px solid var(--farbe-akzent);
  padding-left: var(--raum-2);
  font-size: var(--text-l);
}

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--raum-1) var(--raum-2); border-bottom: var(--linie); }
th { font-family: var(--schrift-display); }

label { display: block; font-size: var(--text-s); margin-bottom: var(--raum-1); }
input, textarea, select {
  font: inherit;
  width: 100%;
  padding: 0.6em 0.8em;
  border: var(--linie);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
}

/* --- Prose: langer Fließtext (Blog!) — von Anfang an dabei --- */
.prose { max-width: var(--textspalte); }
.prose > * + * { margin-block-start: var(--raum-2); }
.prose h2 { margin-block-start: var(--raum-4); }
.prose h3 { margin-block-start: var(--raum-3); }
.prose figcaption { font-size: var(--text-s); color: var(--farbe-text-gedimmt); margin-top: var(--raum-1); }
.prose ul, .prose ol { padding-left: 1.2em; }

.meta { font-size: var(--text-s); color: var(--farbe-text-gedimmt); }

/* ============================================================
   JOURNEY-KOMPONENTEN — Struktur für die Sektionen aus
   journey/02-sektionen.md. Weiter ohne Designmeinung: alle
   Werte aus Tokens, Charakter entsteht in tokens.css.
   ============================================================ */

/* Volle Breite (Alt-Fläche, Akzentband). Innen immer ein .container. */
.band { padding-block: var(--raum-sektion); }
.band--alt { background: var(--farbe-flaeche-alt); }
.band--akzent { background: var(--farbe-akzent); color: var(--farbe-auf-akzent); }
.band--akzent a, .band--akzent h2 { color: inherit; }
.band--akzent .knopf { background: var(--farbe-auf-akzent); color: var(--farbe-akzent); }

/* Hero: Text links, optional Medium rechts. Asymmetrie über --split. */
.hero { padding-block: var(--raum-4) var(--raum-sektion); }
.hero__ergebnis { font-size: var(--text-l); max-width: 45ch; }

/* Zwei Spalten, absichtlich ungleich (Archetyp-abhängig via --split) */
.split { display: grid; gap: var(--raum-3); grid-template-columns: var(--split, 3fr 2fr); align-items: start; }
.split--umgekehrt { grid-template-columns: var(--split-um, 2fr 3fr); }
@media (max-width: 860px) { .split, .split--umgekehrt { grid-template-columns: 1fr; } }

/* CTA-Gruppe: primär + sekundär (Telefon) nebeneinander */
.cta-gruppe { display: flex; flex-wrap: wrap; gap: var(--raum-2); align-items: center; }
.cta-gruppe .meta { flex-basis: 100%; }   /* "Was danach passiert" unter den Knöpfen */

/* Vertrauensleiste: harte Fakten, keine Icons (journey/02-sektionen.md) */
.fakten { display: flex; flex-wrap: wrap; gap: var(--raum-3); list-style: none; padding: 0; }
.fakten > li { flex: 1 1 12ch; }
.fakten strong { display: block; font-family: var(--schrift-display); font-size: var(--text-l); }

/* Kennzahl als Beweiselement — Zahlen sind Inhalt, nicht Deko */
.kennzahl { font-family: var(--schrift-display); font-size: var(--text-display); line-height: var(--zeilenhoehe-eng); }

/* Ablauf: nummerierte Schritte mit Zeitangabe */
.schritte { list-style: none; padding: 0; counter-reset: schritt; }
.schritte > li { counter-increment: schritt; display: grid; grid-template-columns: 3ch 1fr; gap: var(--raum-2); padding-block: var(--raum-2); border-top: var(--linie); }
.schritte > li::before { content: counter(schritt); font-family: var(--schrift-display); font-size: var(--text-l); }
.schritte .meta { grid-column: 2; }

/* Kundenstimme: Zitat + Zuordnung mit Ort */
.stimme { margin: 0; }
.stimme blockquote { margin: 0; }
.stimme figcaption { font-size: var(--text-s); margin-top: var(--raum-2); }
.stimme img { width: 3.5rem; height: 3.5rem; border-radius: var(--radius); object-fit: cover; }

/* Angebotstreppe / Pakete — die empfohlene Stufe ist erkennbar */
.pakete { display: grid; gap: var(--raum-3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.paket { border: var(--linie); border-radius: var(--radius); padding: var(--raum-3); display: flex; flex-direction: column; gap: var(--raum-2); }
.paket--empfohlen { border-color: var(--farbe-akzent); border-width: 2px; }
.paket__preis { font-family: var(--schrift-display); font-size: var(--text-xl); }
.paket ul { list-style: none; padding: 0; }
.paket li + li { margin-top: var(--raum-1); }
.paket .knopf { margin-top: auto; text-align: center; }

/* FAQ: funktioniert ohne JS, Text ist immer im DOM (GEO!) */
.faq-liste > details { border-top: var(--linie); padding-block: var(--raum-2); }
.faq-liste summary { font-family: var(--schrift-display); font-size: var(--text-l); cursor: pointer; }
.faq-liste summary::marker { color: var(--farbe-akzent); }
.faq-liste > details > *:not(summary) { margin-top: var(--raum-2); max-width: var(--textspalte); }

/* Vorher/Nachher: zwei Bilder, ohne JS vollständig nutzbar */
.vergleich { display: grid; gap: var(--raum-2); grid-template-columns: 1fr 1fr; }
.vergleich figcaption { font-size: var(--text-s); color: var(--farbe-text-gedimmt); margin-top: var(--raum-1); }
@media (max-width: 560px) { .vergleich { grid-template-columns: 1fr; } }

/* Risikoumkehr: ein Satz, groß, direkt vor dem Abschluss-CTA */
.zusage { font-family: var(--schrift-display); font-size: var(--text-xl); max-width: 45ch; }

/* Einsatzgebiet: echte Orte, kein Keyword-Teppich */
.orte { display: flex; flex-wrap: wrap; gap: var(--raum-1) var(--raum-2); list-style: none; padding: 0; }

/* Sticky-Kontaktleiste — NUR mobil, NUR wenn journey.yaml sticky-mobil: true */
.sticky-kontakt { display: none; }
@media (max-width: 720px) {
  .sticky-kontakt {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 10;
    border-top: var(--linie); background: var(--farbe-flaeche);
  }
  .sticky-kontakt > * { flex: 1; text-align: center; padding: var(--raum-2); text-decoration: none; }
  .sticky-kontakt > * + * { border-left: var(--linie); }
  body:has(.sticky-kontakt) { padding-bottom: 4.5rem; }
}

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.sprunglink { position: absolute; left: -9999px; }
.sprunglink:focus { left: var(--raum-2); top: var(--raum-2); z-index: 20; background: var(--farbe-flaeche); padding: var(--raum-1) var(--raum-2); }

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