/* ============================================================
   ANLIVIA LLC — 030-Web-01 — Haupt-Stylesheet
   CSS Custom Properties + BEM. Fluid Typography via clamp().
   Bewegungs-Vokabular: ruhig, atmend, würdevoll (siehe 02_Design/bewegungs-vokabular.md)
   ============================================================ */

@font-face{ font-family:"Fraunces"; src:url("../fonts/fraunces-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Fraunces"; src:url("../fonts/fraunces-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Karla"; src:url("../fonts/karla-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Karla"; src:url("../fonts/karla-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root{
  /* Farben — Schema C "Aubergine & Rosé" (WCAG 2.1 AA geprüft, siehe 02_Design/farbschemata/GEWAEHLT.md) */
  --color-primary: #5A3346;
  --color-primary-dark: #3F2432;
  --color-accent: #96574A;
  --color-accent-on-dark: #C88E80;
  --color-bg: #F6EEEA;
  --color-bg-dark: #2A1F27;
  --color-heading: #33212C;
  --color-body: #453541;
  --color-muted: #75636C;
  --color-on-dark: #F6EEEA;
  --color-on-dark-muted: #E4D6D0;
  --color-success: #4F7A5A;
  --color-warning: #8A5A16;
  --color-error: #A63A38;
  --color-border: #E3D6CF;
  --color-border-dark: #4A3A46;

  /* Typografie */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Karla", system-ui, sans-serif;

  /* Spacing */
  --space-xs: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --space-sm: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --space-md: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  --space-lg: clamp(3rem, 2.2rem + 3vw, 5rem);
  --space-xl: clamp(4.5rem, 3.2rem + 5vw, 8rem);

  /* Bewegung */
  --ease-calm: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-reveal: 800ms;
  --duration-hover: 320ms;

  --radius: 14px;
  --max-content: 1180px;
  --measure: 65ch;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  /* Durchgehendes Punktraster-Muster auf der Grundfläche — trägt alle hellen
     Sektionen nahtlos; dunkle Sektionen + Kontakt-Foto überdecken es. */
  background-color: var(--color-bg);
  background-image: radial-gradient(circle, rgba(90, 51, 70, 0.112) 1.7px, transparent 2px);
  background-size: 22px 22px;
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }

h1, h2, h3{
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
  font-weight: 600;
}
h1{ font-size: clamp(2.6rem, 1.9rem + 3.2vw, 4.6rem); }
h2{ font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.8rem); }
h3{ font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); }

p{ margin: 0 0 var(--space-sm); max-width: var(--measure); }
.section__intro p{ max-width: var(--measure); }

.container{
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

/* ---------- Skip-Link ---------- */
.skip-link{
  position: absolute;
  left: -9999px;
  top: auto;
  background: var(--color-primary);
  color: #fff;
  padding: 0.8rem 1.4rem;
  border-radius: 0 0 8px 0;
  z-index: 1000;
  font-family: var(--font-body);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus{
  left: 0;
  top: 0;
}

/* ---------- Focus-Stil (A11y-Pflicht) ---------- */
:focus-visible{
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 2px;
}
.section--dark :focus-visible{
  outline-color: var(--color-accent-on-dark);
}

/* ---------- Header / Navigation ---------- */
.site-header{
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--duration-hover) var(--ease-calm),
              border-color var(--duration-hover) var(--ease-calm),
              background-color var(--duration-hover) var(--ease-calm);
}
/* Beim Scrollen: dezente Abgrenzung zum Inhalt darunter */
.site-header.is-scrolled{
  border-bottom-color: var(--color-border);
  box-shadow: 0 6px 24px rgba(51, 33, 44, 0.07);
  background: rgba(246, 238, 234, 0.92);
  backdrop-filter: saturate(1.1) blur(8px);
}
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-xs);
}
.wordmark{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
}
.main-nav__list{
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav__list a{
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-body);
  transition: color var(--duration-hover) var(--ease-calm);
}
.main-nav__list a:hover{ color: var(--color-primary); }

.nav-toggle{
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.nav-toggle__bar{
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-heading);
  margin: 5px 0;
  transition: transform var(--duration-hover) var(--ease-calm), opacity var(--duration-hover) var(--ease-calm);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-radius: 999px;
  padding: 0.9rem 1.8rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--duration-hover) var(--ease-calm), box-shadow var(--duration-hover) var(--ease-calm);
}
.btn--primary{ background: var(--color-primary); color: #fff; }
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(90, 51, 70, 0.28); }
.btn--ghost{ background: transparent; border: 2px solid var(--color-accent); color: var(--color-accent); }
.btn--ghost:hover{ background: var(--color-accent); color: #fff; }
.section--dark .btn--ghost{ border-color: var(--color-accent-on-dark); color: var(--color-accent-on-dark); }
.section--dark .btn--ghost:hover{ background: var(--color-accent-on-dark); color: var(--color-bg-dark); }

/* ---------- Sections ---------- */
.section{
  padding-block: var(--space-xl);
}
.section--dark{
  background: var(--color-bg-dark);
  color: var(--color-on-dark-muted);
}
/* Leitgedanke: Kerzenlicht-Hintergrund unter Aubergine-Overlay */
.section--dark[aria-labelledby="leitgedanke-heading"]{
  background:
    linear-gradient(rgba(42,31,39,.82), rgba(42,31,39,.88)),
    url("../img/leitgedanke.webp") center / cover no-repeat;
}
.section--dark h1, .section--dark h2, .section--dark h3{ color: var(--color-on-dark); }
.section__kicker{
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}
.section--dark .section__kicker{ color: var(--color-accent-on-dark); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background-color: var(--color-bg-dark);
  background-image: url("../img/hero-mobile.webp");
  background-size: cover;
  background-position: center;
  padding-block: calc(var(--space-xl) + 3rem) var(--space-xl);
}
@media (min-width: 641px){
  .hero{ background-image: url("../img/hero.webp"); }
}
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(42,31,39,0.88) 0%, rgba(42,31,39,0.62) 42%, rgba(42,31,39,0.22) 75%);
}
.hero__grid{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-content);
  margin-inline: 0;
  padding-left: clamp(2rem, 5vw, 5rem);
}
.hero__grid > *{ max-width: 40rem; }
.hero .section__kicker{ color: var(--color-accent-on-dark); }
.hero h1{ color: var(--color-on-dark); }
.hero__accent-line{
  width: 84px;
  height: 3px;
  background: var(--color-accent-on-dark);
  border-radius: 2px;
  margin-block: var(--space-sm);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe{
  0%, 100% { opacity: 0.55; width: 64px; }
  50% { opacity: 1; width: 96px; }
}
.hero__lead{
  font-size: 1.15rem;
  color: var(--color-on-dark-muted);
  max-width: 42ch;
}
.hero :focus-visible{ outline-color: var(--color-accent-on-dark); }

/* ---------- Cards (Angebote) ---------- */
.offer-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.offer-card{
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  transition: transform var(--duration-hover) var(--ease-calm), box-shadow var(--duration-hover) var(--ease-calm);
}
.offer-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(90, 51, 70, 0.14);
}
.offer-card__step{
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--color-accent);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.offer-card p{ color: var(--color-muted); font-size: 0.95rem; }

/* Retreat-Karte: dunkel & atmosphärisch, wie im Design-Konzept vereinbart */
.offer-card--featured{
  background: var(--color-bg-dark);
  border-color: var(--color-border-dark);
}
.offer-card--featured h3{ color: var(--color-on-dark); }
.offer-card--featured p{ color: var(--color-on-dark-muted); }
.offer-card--featured .offer-card__step{ color: var(--color-accent-on-dark); }

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

/* ---------- FAQ ---------- */
.faq-list{ margin-top: var(--space-md); border-top: 1px solid var(--color-border); }
.faq-item{ border-bottom: 1px solid var(--color-border); }
.faq-item__q{
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--space-sm) 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-heading);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-item__icon{ transition: transform var(--duration-hover) var(--ease-calm); flex-shrink: 0; }
.faq-item__q[aria-expanded="true"] .faq-item__icon{ transform: rotate(45deg); }
.faq-item__a{
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--duration-reveal) var(--ease-calm);
}
.faq-item__a[data-open="true"]{ max-height: 400px; }
.faq-item__a p{ padding-bottom: var(--space-sm); color: var(--color-muted); }

/* ---------- Formular ---------- */
.form{ max-width: 560px; margin-top: var(--space-md); }
.field{ margin-bottom: var(--space-sm); }
.field label{
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--color-heading);
}
.section--dark .field label{ color: var(--color-on-dark); }
.field input, .field textarea{
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: #fff;
  color: var(--color-body);
}
.field input:focus, .field textarea:focus{
  border-color: var(--color-primary);
}
.field--hp{ display: none; }
.form__note{ font-size: 0.82rem; color: var(--color-muted); }
.form__status{ font-weight: 700; }
.form__status[data-state="success"]{ color: var(--color-success); }
.form__status[data-state="error"]{ color: var(--color-error); }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--color-bg-dark);
  color: var(--color-on-dark-muted);
  padding-block: var(--space-lg);
}
.site-footer a{ color: var(--color-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__grid{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.site-footer__legal{
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.email::before{ content: attr(data-name) "\0040" attr(data-domain); unicode-bidi: bidi-override; }

/* ---------- Scroll-Reveal ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-reveal) var(--ease-calm), transform var(--duration-reveal) var(--ease-calm);
}
[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Cookie-Consent Theme-Override (Schema C) ---------- */
:root{
  --cc-bg: #FFFFFF;
  --cc-primary-color: var(--color-body);
  --cc-secondary-color: var(--color-muted);
  --cc-font-family: var(--font-body);
  --cc-modal-border-radius: 14px;
  --cc-btn-primary-bg: var(--color-primary);
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: var(--color-primary);
  --cc-btn-primary-hover-bg: var(--color-primary-dark);
  --cc-btn-primary-hover-border-color: var(--color-primary-dark);
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--color-accent);
  --cc-btn-secondary-border-color: var(--color-accent);
  --cc-btn-secondary-hover-bg: var(--color-accent);
  --cc-btn-secondary-hover-color: #fff;
  --cc-toggle-on-bg: var(--color-primary);
  --cc-link-color: var(--color-accent);
  --cc-overlay-bg: rgba(42, 31, 39, 0.45);
}
#cc-main .cm__title, #cc-main .pm__title{ font-family: var(--font-display); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .hero__grid{ grid-template-columns: 1fr; }
  .offer-grid{ grid-template-columns: 1fr; }
  .main-nav{
    position: fixed;
    inset: 0;
    top: 64px;
    background: var(--color-bg);
    padding: var(--space-md);
    transform: translateX(100%);
    transition: transform var(--duration-reveal) var(--ease-calm);
  }
  .main-nav[data-open="true"]{ transform: translateX(0); }
  .main-nav__list{ flex-direction: column; gap: var(--space-md); }
  .nav-toggle{ display: block; }
  /* Wichtig: auf Mobil KEIN backdrop-filter am Header — sonst wird das fixierte
     Menü-Panel auf Header-Höhe geclippt (nur der erste Punkt läge auf Creme,
     die restlichen wären transparent). Header bleibt solide Creme. */
  .site-header.is-scrolled{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--color-bg);
  }
}
@media (max-width: 640px){
  .container{ padding-inline: var(--space-sm); }
  h1{ font-size: clamp(2.1rem, 1.7rem + 5vw, 3rem); }
}

/* ---------- A11y: reduced motion (Pflicht, keine Ausnahme) ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal]{ opacity: 1; transform: none; }
  .hero__accent-line{ animation: none; opacity: 0.8; }
}

/* ============================================================
   Redaktionelles Layout — links-bündig + asymmetrisch 2-spaltig (2026-07-14)
   ============================================================ */

/* Kicker mit dezentem Akzent-Strich darunter (premium Section-Intro) */
.section .section__kicker::after{
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: currentColor;
  opacity: 0.5;
  border-radius: 2px;
  margin-top: 0.85rem;
}

/* Text-Sektionen asymmetrisch: Kicker + Überschrift links, Fliesstext rechts */
@media (min-width: 880px){
  .section--split .container{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: var(--space-lg);
    align-items: start;
  }
  .section--split .section__head{ margin: 0; }
  .section--split .section__head .section__kicker{ margin-bottom: var(--space-sm); }
  .section--split .section__head h2{ margin-bottom: 0; max-width: 14ch; }
  .section--split .container > p:not(.section__kicker){ max-width: 48ch; }
}

/* Zentrierte Sektion (z. B. Kontakt) */
.section--center .container{ text-align: center; }
.section--center .section__kicker::after{ margin-inline: auto; }
.section--center h2,
.section--center .container > p:not(.section__kicker){ margin-inline: auto; }
.section--center .form{ margin-inline: auto; }
.section--center .field input,
.section--center .field textarea{ text-align: left; }

/* Bild-Text-Sektion (Text + Bild nebeneinander) */
.section--media .section__media{ margin: 0; }
.section--media .section__media img{
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  box-shadow: 0 24px 48px rgba(90, 51, 70, 0.14);
}
@media (min-width: 880px){
  .section--media .container{
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
    column-gap: var(--space-xl);
    align-items: center;
  }
  .section--media .section__body p:not(.section__kicker){ max-width: 46ch; }
}

/* ============================================================
   Premium-Feinschliff (2026-07-15)
   ============================================================ */

/* #4 Typografie: engeres Tracking, ausbalancierte Umbrüche, Ligaturen/Kerning */
h1, h2, h3{ letter-spacing: -0.015em; text-wrap: balance; }
body{ font-feature-settings: "kern" 1, "liga" 1, "calt" 1; }

/* #3 Angebots-Karten: Icons + ruhigerer, edlerer Hover */
.offer-card{ transition: transform .3s var(--ease-calm), box-shadow .3s var(--ease-calm), border-color .3s var(--ease-calm); }
.offer-card:hover{ transform: translateY(-3px); border-color: var(--color-accent); box-shadow: 0 12px 28px rgba(90, 51, 70, 0.10); }
.offer-card--featured:hover{ border-color: var(--color-accent-on-dark); }
.offer-card__icon{ width: 32px; height: 32px; color: var(--color-accent); margin-bottom: var(--space-sm); }
.offer-card__icon svg{ width: 100%; height: 100%; display: block; }
.offer-card--featured .offer-card__icon{ color: var(--color-accent-on-dark); }

/* #6 Gestaffelte Reveals der Karten */
.offer-grid > [data-reveal]:nth-child(2){ transition-delay: 120ms; }
.offer-grid > [data-reveal]:nth-child(3){ transition-delay: 240ms; }

/* #5 Weiche Übergänge an dunklen Sektionskanten (Fade zur hellen Fläche) */
.section--dark, .site-footer{ position: relative; }
.section--dark > .container, .site-footer > .container{ position: relative; z-index: 1; }
.section--dark::after,
.section--dark[aria-labelledby="leitgedanke-heading"]::before,
.site-footer::before{
  content: "";
  position: absolute; left: 0; right: 0;
  height: 12px;
  pointer-events: none; z-index: 0;
}
.section--dark::after{ bottom: 0; background: linear-gradient(transparent, var(--color-bg)); }
.section--dark[aria-labelledby="leitgedanke-heading"]::before,
.site-footer::before{ top: 0; background: linear-gradient(var(--color-bg), transparent); }

/* ============================================================
   Prüfstand-Angleich an ALF-Muster (2026-07-15)
   ============================================================ */

/* Zitat-Band (Leitgedanke) — zentriert, mit Akzentwort + Subline */
.band{ text-align: center; }
.band .container{ display: flex; flex-direction: column; align-items: center; }
.band__quote{
  margin: 0;
  max-width: 24ch;
}
.band__quote p{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  line-height: 1.25;
  color: var(--color-on-dark);
  max-width: none;
  margin: 0;
}
.band__quote .accent{ color: var(--color-accent-on-dark); font-style: italic; }
.band__sub{
  margin-top: var(--space-sm);
  max-width: 42ch;
  color: var(--color-on-dark-muted);
  font-size: 1.02rem;
}

/* Footer-Klassen (ersetzen ehemalige Inline-Styles) */
.wordmark--footer{ color: var(--color-on-dark); }
.site-footer__tagline{ margin-top: .75rem; max-width: 40ch; }

/* Empathie: Body-Spalte + stille Stützpunkte (kein Häkchen-Task-Look) */
.section--split .section__body p{ max-width: 48ch; }
.still-points{
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.still-points li{
  position: relative;
  padding-left: 1.6rem;
  max-width: 46ch;
  color: var(--color-on-dark-muted);
}
.still-points li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent-on-dark);
}

/* „Für wen" — nummerierte Facetten (01/02/03) */
.audience{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.audience__item{ padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.audience__num{
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-accent);
  opacity: 0.85;
  margin-bottom: var(--space-xs);
}
.audience__item h3{ margin-bottom: var(--space-xs); }
.audience__item p{ color: var(--color-muted); font-size: 0.96rem; max-width: 34ch; }

/* „So beginnen wir" — 3 ruhige Schritte */
.steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.step{ position: relative; }
.step__num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}
.step h3{ margin-bottom: var(--space-xs); }
.step p{ color: var(--color-muted); font-size: 0.96rem; max-width: 34ch; }

/* Gestaffelte Reveals für Audience + Steps (wie Angebots-Karten) */
.audience > [data-reveal]:nth-child(2),
.steps > [data-reveal]:nth-child(2){ transition-delay: 120ms; }
.audience > [data-reveal]:nth-child(3),
.steps > [data-reveal]:nth-child(3){ transition-delay: 240ms; }

@media (max-width: 880px){
  .audience, .steps{ grid-template-columns: 1fr; gap: var(--space-md); }
}

/* Engere Übergänge (Wunsch Marco 2026-07-15) */
#fuer-wen{ padding-block-end: var(--space-lg); }
#wege{ padding-block: var(--space-lg); }
#methode{ padding-block: var(--space-lg); }
#ueber{ padding-block-start: var(--space-lg); }
#faq{ padding-block-end: var(--space-lg); }
#ablauf{ padding-block-start: var(--space-lg); }


/* Kontakt-Sektion: markeneigenes Higgsfield-Hintergrundbild unter hellem Creme-Overlay
   (nano_banana_2, 2026-07-15 — Fenster, Vorhang, Pflanze, Leinen, weiches Morgenlicht).
   Overlay hält die Sektion hell → Formular + Text bleiben gut lesbar. */
#kontakt{
  position: relative;
  background:
    linear-gradient(rgba(246, 238, 234, 0.82), rgba(246, 238, 234, 0.90)),
    url("../img/kontakt.webp") center / cover no-repeat;
}
#kontakt > .container{ position: relative; z-index: 1; }

/* Deine Wege — Intro (kein Stufenplan) + ergänzender Buch/Workbook-Hinweis (Silke-Feedback 2026-08-11) */
.wege-intro{ max-width: 54ch; color: var(--color-muted); margin-top: var(--space-xs); }
.wege-note{ margin-top: var(--space-md); color: var(--color-muted); font-size: 0.95rem; max-width: 54ch; }