/* ============================================================
   Stadt Land Frau – Startseite V2 (ruhiges, editoriales Redesign)
   ------------------------------------------------------------
   Gekapselt unter body.slf-v3 – lädt NACH site.css und verfeinert
   ausschließlich die Sektionen der Startseite. Header, Footer,
   Navigation, Farben, Schriften, Bilder und Icons bleiben exakt
   wie im Bestand (alle Werte kommen aus den Tokens in
   shared/design.css).

   Gestaltungsprinzipien: viel Weißraum, klare Typografie,
   Hairlines statt Effekte, keine Verläufe, keine Chips.
   ============================================================ */

body.slf-v3 {
  --v3-radius: 18px;
  --v3-shadow-soft: 0 1px 2px rgba(111, 42, 33, 0.04), 0 10px 28px rgba(111, 42, 33, 0.06);
  --v3-line: rgba(111, 42, 33, 0.12);
}

/* ---------- Sehr dezentes Einblenden beim Scrollen ---------- */

body.slf-v3 .v3-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
body.slf-v3 .v3-reveal.is-in { opacity: 1; transform: none; }
/* Ohne JS oder mit reduzierter Bewegung: alles sofort sichtbar */
body.slf-v3.no-observer .v3-reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  body.slf-v3 .v3-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Sektions-Rhythmus & Köpfe ---------- */

body.slf-v3 .slf-section { padding: 5.5rem 0; }

body.slf-v3 .slf-section__head { max-width: 680px; margin-bottom: 3.2rem; }
body.slf-v3 .slf-section__head h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  letter-spacing: -0.015em;
}

/* ---------- Hero: zweispaltig, Bild pur ohne Überlagerung ---------- */

/* Die --bg-Variante wird im V2 nicht genutzt; falls die Klasse doch
   gesetzt ist, neutralisieren wir sie vollständig. */
body.slf-v3 .slf-hero--bg {
  min-height: 0;
  display: block;
  background-image: none;
  overflow: visible;
}
body.slf-v3 .slf-hero--bg::before { content: none; }
body.slf-v3 .slf-hero--bg .slf-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
body.slf-v3 .slf-hero--bg .slf-hero__text { max-width: none; }
body.slf-v3 .slf-hero--bg .slf-hero__media { display: block; }
@media (min-width: 768px) {
  body.slf-v3 .slf-hero--bg .slf-hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3.5rem;
  }
}

body.slf-v3 .slf-hero { padding: 4.5rem 0 5rem; }

body.slf-v3 .slf-hero h1 {
  font-size: clamp(2.2rem, 5.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
}
body.slf-v3 .slf-hero__subline {
  font-size: clamp(1rem, 2vw, 1.14rem);
  line-height: 1.75;
  margin-bottom: 2.2rem;
}
body.slf-v3 .slf-hero__actions { gap: 0.9rem; }
body.slf-v3 .slf-hero__photo {
  border-radius: var(--v3-radius);
  box-shadow: var(--v3-shadow-soft);
}

/* ---------- Hero-Alternative: zentriert mit Logo statt Foto ---------- */

body.slf-v3 .slf-hero--logo { padding: 5rem 0 5.5rem; }
body.slf-v3 .slf-hero--logo .slf-hero__inner {
  display: block;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
body.slf-v3 .slf-hero--logo .slf-hero__media { display: none; }
body.slf-v3 .slf-hero--logo .slf-hero__logo {
  display: block;
  width: clamp(110px, 16vw, 160px);
  height: auto;
  margin: 0 auto 2rem;
}
body.slf-v3 .slf-hero--logo h1 { margin-inline: auto; max-width: 18ch; }
body.slf-v3 .slf-hero--logo .slf-hero__subline { margin-inline: auto; max-width: 52ch; }
body.slf-v3 .slf-hero--logo .slf-hero__actions { justify-content: center; }
/* Die Badge-Zeile entfällt in dieser Variante – das Logo trägt die Marke. */
body.slf-v3 .slf-hero--logo .slf-badge { display: none; }
@media (max-width: 640px) {
  body.slf-v3 .slf-hero--logo { padding: 3.2rem 0 3.6rem; }
}

/* ---------- Hero-Alternative: nur Typografie ---------- */

body.slf-v3 .slf-hero--typo { padding: 6rem 0 6.5rem; }
body.slf-v3 .slf-hero--typo .slf-hero__inner { display: block; }
body.slf-v3 .slf-hero--typo .slf-hero__media { display: none; }
body.slf-v3 .slf-hero--typo .slf-badge {
  /* schlichte Vorzeile in Versalien – kein Chip */
  display: block;
  margin-bottom: 1.4rem;
}
body.slf-v3 .slf-hero--typo h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 16ch;
  margin-bottom: 1.6rem;
}
body.slf-v3 .slf-hero--typo .slf-hero__subline {
  font-size: clamp(1.05rem, 2.1vw, 1.2rem);
  line-height: 1.75;
  max-width: 56ch;
  margin-bottom: 2.6rem;
}
@media (max-width: 640px) {
  body.slf-v3 .slf-hero--typo { padding: 3.6rem 0 4rem; }
}

/* ---------- Zielgruppen („Für wen“) ---------- */

body.slf-v3 .slf-cards { gap: 1.75rem; }
body.slf-v3 .slf-card {
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius);
  box-shadow: none;
  transition: box-shadow 0.2s ease;
}
body.slf-v3 .slf-card:hover { box-shadow: var(--v3-shadow-soft); }
body.slf-v3 .slf-card__body { padding: 1.4rem 1.5rem 1.7rem; }
body.slf-v3 .slf-card__body h3 { font-size: 1.18rem; margin-bottom: 0.45rem; }

/* ---------- Was dich erwartet: Hairlines statt Kacheln ---------- */

body.slf-v3 .slf-features { background: var(--surface); }
body.slf-v3 .slf-features__grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0;
  border-top: 1px solid var(--v3-line);
}
body.slf-v3 .slf-feature {
  flex-direction: column;
  gap: 1.1rem;
  padding: 2rem 1.6rem 2.2rem;
  border-bottom: 1px solid var(--v3-line);
}
body.slf-v3 .slf-feature__text h3 { font-size: 1.1rem; }
/* Vertikale Hairlines zwischen den Spalten (über Außenabstand gelöst) */
@media (min-width: 768px) {
  body.slf-v3 .slf-features__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  body.slf-v3 .slf-feature { border-right: 1px solid var(--v3-line); }
  body.slf-v3 .slf-feature:nth-child(4n) { border-right: none; }
}
@media (min-width: 480px) and (max-width: 767px) {
  body.slf-v3 .slf-features__grid { grid-template-columns: repeat(2, 1fr); }
  body.slf-v3 .slf-feature { border-right: 1px solid var(--v3-line); }
  body.slf-v3 .slf-feature:nth-child(2n) { border-right: none; }
}

/* ---------- Zitat / CTA-Band ---------- */

body.slf-v3 .slf-quoteband { padding: 5.5rem 0; }
body.slf-v3 .slf-quoteband__quote {
  font-size: clamp(1.2rem, 2.4vw, 1.4rem);
  line-height: 1.55;
  padding-left: 1.1rem;
  border-left: 3px solid var(--brand-orange);
}

/* ---------- Blog-Teaser ---------- */

body.slf-v3 .slf-blog__band { padding: 26px 0; }
body.slf-v3 .slf-post {
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius);
  box-shadow: var(--shadow-sm);
}
body.slf-v3 .slf-post:hover {
  transform: translateY(-2px);
  box-shadow: var(--v3-shadow-soft);
}
body.slf-v3 .slf-post__body { padding: 1.3rem 1.5rem 1.6rem; }
body.slf-v3 .slf-post__body h3 { font-size: 1.16rem; }
body.slf-v3 .slf-blog__more { margin-top: 2.6rem; }

/* ---------- Kontakt: dezent, ohne weiße Formularkarte ---------- */

body.slf-v3 .slf-contact { background: var(--accent-soft); }
body.slf-v3 .slf-contact__form {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
/* Felder dezent in den Hintergrund eingebettet – kein Weiß */
body.slf-v3 .slf-field input,
body.slf-v3 .slf-field textarea {
  background: rgba(111, 42, 33, 0.05);
  border: 1px solid rgba(111, 42, 33, 0.14);
  border-radius: var(--radius);
  padding: 0.75rem 0.95rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
body.slf-v3 .slf-field input:focus,
body.slf-v3 .slf-field textarea:focus {
  outline: none;
  background: rgba(111, 42, 33, 0.03);
  border-color: var(--brand-orange);
  box-shadow: none;
}

/* ---------- Mobil: kompaktere Abstände ---------- */

@media (max-width: 640px) {
  body.slf-v3 .slf-section { padding: 3.6rem 0; }
  body.slf-v3 .slf-hero { padding: 3rem 0 3.4rem; }
  body.slf-v3 .slf-quoteband { padding: 4rem 0; }
}