/* ═══════════════════════════════════════════════════════════════════════════
   SCHRIFTEN — lokal eingebunden, bewusst NICHT von Google geladen.
   Ein Remote-Import der Google-Schrift-Server würde beim Seitenaufruf die
   IP-Adresse jedes Besuchers in die USA senden (DSGVO, LG München I 3 O 17493/20).
   Die .woff2-Dateien liegen in fonts/ und werden von dieser Seite
   selbst ausgeliefert. Quelle: google-webfonts-helper (gwfh.mranftl.com).
   Averia Serif Libre hat KEIN 900 — 700 ist das schwerste Gewicht.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{
  font-family:"Averia Serif Libre"; font-style:normal; font-weight:400;
  font-display:swap;
  src:url("fonts/averia-serif-libre-v19-latin-regular.woff2") format("woff2");
}
@font-face{
  font-family:"Averia Serif Libre"; font-style:normal; font-weight:700;
  font-display:swap;
  src:url("fonts/averia-serif-libre-v19-latin-700.woff2") format("woff2");
}
@font-face{
  font-family:"Open Sans"; font-style:normal; font-weight:400;
  font-display:swap;
  src:url("fonts/open-sans-v44-latin-regular.woff2") format("woff2");
}
@font-face{
  font-family:"Open Sans"; font-style:normal; font-weight:600;
  font-display:swap;
  src:url("fonts/open-sans-v44-latin-600.woff2") format("woff2");
}
@font-face{
  font-family:"Open Sans"; font-style:normal; font-weight:700;
  font-display:swap;
  src:url("fonts/open-sans-v44-latin-700.woff2") format("woff2");
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — unverändert übernommen aus Designsystem/index.html (:root-Block).
   Keine Werte erfunden, keine Hex-Codes geändert.
   Kein Terrakotta: Akzent ist Tannengrün #3C5648, Zweitakzent Messinggold
   #AE8944 (nur Linie/Icon auf Creme, nie als Text).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{

  /* ── Flächen: die vier Row-Styles ─────────────────────────────────────── */
  --dw-cream:              #FBF6F1;   /* light  — Hauptfläche, Header        */
  --dw-sand:               #F2E5DC;   /* spare  — zweite Fläche             */
  --dw-accent:             #3C5648;   /* accent — Tannengrün aus dem Logo   */
  --dw-warmgrey:           #6C6965;   /* dark   — Footer, Fließtext         */

  /* ── Akzente ──────────────────────────────────────────────────────────── */
  --dw-accent-hover:       #2F4539;   /* Grünfläche im Hover                */
  --dw-accent-deep:        #2B3E34;   /* Linie AUF der Grünfläche           */
  --dw-accent-2:           #AE8944;   /* Messinggold — Linie/Icon, NIE Text */
  --dw-accent-2-hover:     #96742F;
  --dw-accent-on-dark:     #FBF6F1;   /* auf #6C6965 ist Creme der Akzent   */

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --dw-ink:                #6C6965;   /* Standard — 5,08:1 auf Creme        */
  --dw-ink-strong:         #272727;   /* lange Textstrecken                 */
  --dw-ink-muted:          rgba(108,105,101,.75); /* Nav ruhend, Meta       */
  --dw-ink-on-dark:        #FBF6F1;   /* auf accent/dark/Foto — 5,34:1      */

  /* ── Zustände ─────────────────────────────────────────────────────────── */
  --dw-warmgrey-hover:     #615F5B;
  --dw-cream-hover:        #F6ECE1;

  /* ── Linien, Felder, Meldungen (warme Neutrale, unverändert original) ─── */
  --dw-border-cream:       #F0DDC9;
  --dw-border-sand:        #E4C9B7;
  --dw-border-dark:        #86837E;
  --dw-field-cream:        #F3E4D5;
  --dw-field-sand:         #E8D2C2;
  --dw-field-border:       #EBD2B9;
  --dw-notice-cream:       #F5E9DD;
  --dw-notice-sand:        #EBD7C9;
  --dw-notice-dark:        #797671;
  --dw-mute:               #D4C8C1;
  --dw-error:              #D73A30;

  /* ── Typografie ───────────────────────────────────────────────────────── */
  --dw-font-display: "Averia Serif Libre", Georgia, serif;
  --dw-font-body:    "Open Sans", -apple-system, "Segoe UI", sans-serif;

  --dw-fs-h1:    clamp(2.011rem, 2.778vw + 1.456rem, 3.713rem);  /* 32→59px */
  --dw-fs-h2:    clamp(1.749rem, 1.808vw + 1.388rem, 2.856rem);  /* 28→46px */
  --dw-fs-h3:    clamp(1.521rem, 1.104vw + 1.300rem, 2.197rem);  /* 24→35px */
  --dw-fs-h4:    clamp(1.322rem, 0.600vw + 1.202rem, 1.690rem);  /* 21→27px */
  --dw-fs-h5:    clamp(0.920rem, 0.196vw + 0.881rem, 1.040rem);  /* Overline */
  --dw-fs-lead:  1.25rem;      /* 21,25px — ≤900px auf 1.0625rem            */
  --dw-fs-body:  1.0625rem;    /* 17px                                      */
  --dw-fs-small: 0.875rem;     /* 14px — Nav, Label                         */
  --dw-fs-btn:   0.85rem;      /* 13,6px                                    */
  --dw-fs-micro: 0.795rem;     /* 12,7px — Topbar, Badge                    */

  /* Schaugröße für Statement-Bänder (abgeleitet aus H1, eine Stufe darüber) */
  --dw-fs-display: clamp(2.4rem, 5vw + 1rem, 5.2rem);

  --dw-fw-body: 400;
  --dw-fw-semibold: 600;
  --dw-fw-display: 700;        /* Averia hat KEIN 900 — 900 löst zu 700 auf */

  --dw-lh-body:    1.85;       /* Signatur des Systems                      */
  --dw-lh-lead:    1.6;
  --dw-lh-display: 1.1;        /* H1/H2 · H3 1.2 · H4 1.3 · H5 1.5          */
  --dw-ls-display: -1px;       /* Signatur: negative Laufweite in Serif     */
  --dw-ls-caps:    1px;        /* Signatur: gesperrte Versalien             */

  /* ── Abstände (Raster 8px) ────────────────────────────────────────────── */
  --dw-space-1: 8px;
  --dw-space-2: 16px;
  --dw-space-3: 24px;
  --dw-space-4: 40px;
  --dw-space-5: 80px;
  --dw-space-6: 120px;

  --dw-section-y:       80px;  /* Desktop                                   */
  --dw-section-y-thin:  25px;

  --dw-container:    1300px;   /* Breite 90%                                */
  --dw-container-md: 1024px;
  --dw-container-sm:  860px;

  /* ── Radien ───────────────────────────────────────────────────────────── */
  --dw-radius:         0;      /* alles kantig                              */
  --dw-radius-control: 4px;
  --dw-radius-pill:    50%;

  /* ── Schatten — warm getönt, nicht neutral schwarz ────────────────────── */
  --dw-shadow-card:   0 4px 16px rgba(108,105,101,.10);
  --dw-shadow-raised: 0 8px 30px rgba(108,105,101,.10);

  /* ── Bewegung ─────────────────────────────────────────────────────────── */
  --dw-transition:      .25s;
  --dw-transition-slow: .3s;
  --dw-ease:            cubic-bezier(.22,.61,.36,1);
  --dw-header-h:        120px; /* für scroll-margin der Sprungziele          */
  --dw-logo-h:          96px;  /* Logo im Kopf, ruhend                       */
  --dw-logo-h-stuck:    68px;  /* Logo im Kopf, sobald gescrollt wird        */
}

/* Mobil-Verhalten laut Designsystem: ab 900px stapeln,
   ab 700px Luft und Schrift reduzieren. */
@media (max-width:900px){
  :root{ --dw-section-y:56px; --dw-fs-lead:1.0625rem; --dw-fs-body:1.0375rem;
         --dw-header-h:104px; --dw-logo-h:80px; --dw-logo-h-stuck:60px; }
}
@media (max-width:700px){
  :root{ --dw-section-y:44px; --dw-fs-body:0.969rem;
         --dw-header-h:92px; --dw-logo-h:70px; --dw-logo-h-stuck:52px; }
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0; background:var(--dw-cream); color:var(--dw-ink);
  font:var(--dw-fw-body) var(--dw-fs-body)/var(--dw-lh-body) var(--dw-font-body);
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;                 /* Sicherheitsnetz gegen Querscrollen */
}

h1,h2,h3,h4{
  font-family:var(--dw-font-display); font-weight:var(--dw-fw-display);
  letter-spacing:var(--dw-ls-display); margin:0 0 var(--dw-space-2);
}
h1{ font-size:var(--dw-fs-h1); line-height:1.1; }
h2{ font-size:var(--dw-fs-h2); line-height:1.1; }
h3{ font-size:var(--dw-fs-h3); line-height:1.2; }
h4{ font-size:var(--dw-fs-h4); line-height:1.3; }

.dw-overline{
  font-family:var(--dw-font-display); font-weight:var(--dw-fw-display);
  font-size:var(--dw-fs-h5); line-height:1.5;
  letter-spacing:var(--dw-ls-caps); text-transform:uppercase;
  margin:0 0 var(--dw-space-2);
}
/* Overline mit vorangestelltem Strich — gibt Sektionen einen sichtbaren Anfang */
.dw-overline--rule{ display:flex; align-items:center; gap:var(--dw-space-2); }
.dw-overline--rule::before{
  content:""; width:48px; height:1px; background:var(--dw-accent-2); flex:none;
}
.dw-on-accent .dw-overline--rule::before,
.dw-on-dark   .dw-overline--rule::before{ background:var(--dw-ink-on-dark); }
.dw-center .dw-overline--rule{ justify-content:center; }

p{ margin:0 0 var(--dw-space-2); }
p:last-child{ margin-bottom:0; }

.dw-lead{ font-size:var(--dw-fs-lead); line-height:var(--dw-lh-lead); }
.dw-micro{ font-size:var(--dw-fs-micro); letter-spacing:var(--dw-ls-caps); }

a{ color:var(--dw-ink); text-decoration:underline; text-underline-offset:3px;
   transition:color var(--dw-transition); }
a:hover{ color:var(--dw-accent); }
a:active{ color:var(--dw-accent-hover); }
a:focus-visible{ outline:2px solid var(--dw-accent); outline-offset:3px; }

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

/* ═══════════════════════════════════════════════════════════════════════════
   FLÄCHEN — die vier Row-Styles
   ═══════════════════════════════════════════════════════════════════════════ */
.dw-on-cream { background:var(--dw-cream);    color:var(--dw-ink); }
.dw-on-sand  { background:var(--dw-sand);     color:var(--dw-ink); }
.dw-on-accent{ background:var(--dw-accent);   color:var(--dw-ink-on-dark); }
.dw-on-dark  { background:var(--dw-warmgrey); color:var(--dw-ink-on-dark); }
.dw-on-accent h1,.dw-on-accent h2,.dw-on-accent h3,.dw-on-accent h4,
.dw-on-dark   h1,.dw-on-dark   h2,.dw-on-dark   h3,.dw-on-dark   h4{
  color:var(--dw-ink-on-dark); }
.dw-on-accent a,.dw-on-dark a{ color:var(--dw-ink-on-dark); }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */
.dw-section{ padding:var(--dw-section-y) 0; position:relative; }
.dw-section--thin{ padding:var(--dw-section-y-thin) 0; }
.dw-section--tall{ padding:calc(var(--dw-section-y) * 1.5) 0; }
.dw-container{ width:90%; max-width:var(--dw-container-md); margin:0 auto; }
.dw-container--wide{ max-width:var(--dw-container); }
.dw-container--sm{ max-width:var(--dw-container-sm); }
.dw-grid{ display:grid; gap:var(--dw-space-4); }
.dw-grid--2{ grid-template-columns:repeat(2,1fr); }
.dw-grid--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){
  .dw-grid--2,.dw-grid--3{ grid-template-columns:1fr; }
}

.dw-center{ text-align:center; }
.dw-center .dw-lead{ max-width:60ch; margin-inline:auto; }
/* Textspalten nie breiter als ~70 Zeichen — bei Zeilenhöhe 1.85 sonst unruhig */
.dw-measure{ max-width:70ch; }
.dw-center .dw-measure{ margin-inline:auto; }

/* Sprungziele bekommen Luft für den mitlaufenden Header */
[id]{ scroll-margin-top:calc(var(--dw-header-h) + var(--dw-space-3)); }

/* ═══════════════════════════════════════════════════════════════════════════
   BEWEGUNG · Einblenden beim Scrollen
   Alles hier ist rein dekorativ. Ohne JavaScript bleibt jeder Inhalt sichtbar
   (.dw-reveal wird erst per Skript auf unsichtbar gesetzt), und wer im System
   „weniger Bewegung" eingestellt hat, sieht gar keine Animation.
   ═══════════════════════════════════════════════════════════════════════════ */
.js .dw-reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--dw-ease), transform .7s var(--dw-ease);
  transition-delay:var(--dw-delay,0ms);
}
.js .dw-reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .dw-reveal{ opacity:1 !important; transform:none !important; }
  .dw-marquee__track{ animation:none !important; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Lesefortschritt — feine Goldlinie ganz oben. Gold trägt hier keinen Text. */
.dw-progress{
  position:fixed; inset:0 auto auto 0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:var(--dw-accent-2); z-index:60; pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KOMPONENTE · BUTTON
   Signatur: 2px Rahmen + zweiter Rahmen als ::before (Doppelklammer)
   ═══════════════════════════════════════════════════════════════════════════ */
.dw-btn{
  display:inline-block; position:relative; margin-top:10px;
  background:var(--dw-accent); border:2px solid var(--dw-accent);
  border-radius:var(--dw-radius); padding:.75rem 1.5rem;
  color:var(--dw-cream); text-decoration:none; cursor:pointer;
  font:var(--dw-fw-semibold) var(--dw-fs-btn)/1.3 var(--dw-font-body);
  letter-spacing:var(--dw-ls-caps); text-transform:uppercase;
  text-align:center;
  transition:background var(--dw-transition), border-color var(--dw-transition),
             transform var(--dw-transition);
}
.dw-btn::before{
  content:""; position:absolute; pointer-events:none;
  top:-10px; left:6px; right:6px; height:calc(100% + 20px);
  border:2px solid; border-color:inherit;
  transition:var(--dw-transition);
}
/* Der ::before-Rahmen erbt border-color — er folgt jedem Zustand automatisch. */
.dw-btn:hover{ background:var(--dw-accent-hover);
               border-color:var(--dw-accent-hover);
               transform:translateY(-2px); }
.dw-btn:active{ background:var(--dw-accent-deep);
                border-color:var(--dw-accent-deep);
                transform:translateY(0); }   /* gedrückt */
.dw-btn:focus-visible{ outline:2px solid var(--dw-accent); outline-offset:6px; }

/* auf Grün, auf Dunkel und auf Foto: Creme gefüllt, Text in Grün.
   Grün auf Warmgrau wäre 1,47:1 — unsichtbar, deshalb kehrt sich der
   Button dort um. Grün auf Creme: 7,47:1. */
.dw-on-accent .dw-btn,.dw-on-dark .dw-btn,.dw-hero--photo .dw-btn{
  background:var(--dw-cream); border-color:var(--dw-cream);
  color:var(--dw-accent); }
.dw-on-accent .dw-btn:hover,.dw-on-dark .dw-btn:hover,.dw-hero--photo .dw-btn:hover{
  background:var(--dw-cream-hover); border-color:var(--dw-cream-hover);
  color:var(--dw-accent); }
.dw-on-accent .dw-btn:focus-visible,.dw-on-dark .dw-btn:focus-visible,
.dw-hero--photo .dw-btn:focus-visible{ outline-color:var(--dw-cream); }

/* Die Doppelklammer braucht Luft nach oben und unten */
.dw-btn-wrap{ margin-top:var(--dw-space-3); padding:10px 0; }

/* Textlink mit wanderndem Pfeil — leiser Zweit-CTA in den Karten */
.dw-link{
  display:inline-flex; align-items:center; gap:.5em;
  font:var(--dw-fw-semibold) var(--dw-fs-small)/1.3 var(--dw-font-body);
  letter-spacing:var(--dw-ls-caps); text-transform:uppercase;
  color:var(--dw-accent); text-decoration:none;
  border-bottom:1px solid var(--dw-accent-2); padding-bottom:4px;
}
.dw-link span{ transition:transform var(--dw-transition) var(--dw-ease); }
.dw-link:hover{ color:var(--dw-accent-hover); }
.dw-link:hover span{ transform:translateX(5px); }

/* ═══════════════════════════════════════════════════════════════════════════
   KOMPONENTE · HEADER (mitlaufend)
   ═══════════════════════════════════════════════════════════════════════════ */
.dw-header{
  position:sticky; top:0; z-index:50;
  background:var(--dw-cream);
  border-bottom:1px solid transparent;
  transition:border-color var(--dw-transition), box-shadow var(--dw-transition);
}
.dw-header.is-stuck{
  border-bottom-color:var(--dw-border-cream);
  box-shadow:var(--dw-shadow-card);
}
.dw-header .dw-container{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--dw-space-3);
  min-height:var(--dw-header-h);
  padding-block:var(--dw-space-1);
}
.dw-header__logo{ display:block; flex:none; line-height:0; }
.dw-header__logo img{
  height:var(--dw-logo-h); width:auto; display:block;
  transition:height var(--dw-transition) var(--dw-ease);
}
.dw-header.is-stuck .dw-header__logo img{ height:var(--dw-logo-h-stuck); }

.dw-header nav{ display:flex; align-items:center; gap:var(--dw-space-3); }
.dw-nav{ display:flex; gap:var(--dw-space-1); list-style:none; margin:0; padding:0; }
.dw-nav a{
  position:relative; display:block; padding:8px 10px; text-decoration:none;
  color:var(--dw-ink-muted);
  font:var(--dw-fw-semibold) var(--dw-fs-small)/1 var(--dw-font-body);
  letter-spacing:var(--dw-ls-caps); text-transform:uppercase;
  transition:color var(--dw-transition);
}
/* Unterstreichung wächst aus der Mitte — die Bewegung in der Navigation */
.dw-nav a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:2px; height:1px;
  background:var(--dw-accent-2); transform:scaleX(0);
  transition:transform var(--dw-transition) var(--dw-ease);
}
.dw-nav a:hover{ color:var(--dw-ink); }
.dw-nav a:hover::after,.dw-nav a.is-active::after{ transform:scaleX(1); }
.dw-nav a.is-active{ color:var(--dw-accent); }
.dw-header .dw-btn{ margin-top:0; }
.dw-header .dw-btn::before{ display:none; }  /* im Kopf zu eng für die Klammer */

/* Menüknopf — erst unter 900px sichtbar */
.dw-burger{
  display:none; flex:none; width:44px; height:44px; padding:0;
  background:none; border:2px solid var(--dw-accent); cursor:pointer;
}
.dw-burger span{
  display:block; width:20px; height:2px; margin:4px auto;
  background:var(--dw-accent);
  transition:transform var(--dw-transition), opacity var(--dw-transition);
}
.dw-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.dw-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.dw-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:900px){
  .dw-burger{ display:block; }
  .dw-header nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--dw-cream); border-bottom:1px solid var(--dw-border-cream);
    padding:var(--dw-space-2) 5% var(--dw-space-4);
    box-shadow:var(--dw-shadow-card);
    display:none;
  }
  .dw-header nav.is-open{ display:flex; }
  .dw-nav{ flex-direction:column; gap:0; }
  .dw-nav a{ padding:14px 0; border-bottom:1px solid var(--dw-border-cream); }
  .dw-nav a::after{ display:none; }
  .dw-header .dw-btn{ margin-top:var(--dw-space-3); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KOMPONENTE · HERO — zweispaltig, Text links, Foto rechts
   ═══════════════════════════════════════════════════════════════════════════ */
.dw-hero{ padding:calc(var(--dw-section-y) * 1.2) 0 var(--dw-section-y); }
.dw-hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:var(--dw-space-5); align-items:center;
}
/* Die Zeilen der Hauptzeile stehen einzeln — Rhythmus statt Textblock */
.dw-hero h1{ margin:0 0 var(--dw-space-3); }
.dw-hero h1 span{ display:block; }
.dw-hero h1 .dw-hero__accent{ color:var(--dw-accent); }
.dw-hero .dw-lead{ max-width:46ch; }

/* Bildrahmen: das Foto sitzt versetzt in einer goldenen Haarlinie */
.dw-frame{ position:relative; }
.dw-frame::before{
  content:""; position:absolute; z-index:0;
  inset:var(--dw-space-3) calc(var(--dw-space-3) * -1) calc(var(--dw-space-3) * -1) var(--dw-space-3);
  border:1px solid var(--dw-accent-2);
}
.dw-frame img{ position:relative; z-index:1; width:100%; display:block; }
.dw-frame--sand::before{ border-color:var(--dw-accent); }

/* Vertrauenszeile direkt unter dem Hero — normale Gross-/Kleinschreibung,
   keine gesperrten Versalien: es ist ein Satz, keine Logo-Leiste. */
.dw-trust{
  margin:var(--dw-space-4) 0 0; padding:var(--dw-space-3) 0 0;
  border-top:1px solid var(--dw-border-cream);
  max-width:52ch;
}
.dw-trust span{
  display:block; margin-bottom:6px;
  font-family:var(--dw-font-body); font-weight:var(--dw-fw-body);
  font-size:var(--dw-fs-micro); letter-spacing:var(--dw-ls-caps);
  text-transform:uppercase; color:var(--dw-ink-muted);
}
.dw-trust strong{
  font-family:var(--dw-font-display); font-weight:var(--dw-fw-display);
  font-size:var(--dw-fs-h5); line-height:1.5; letter-spacing:0;
  color:var(--dw-ink);
}

@media (max-width:900px){
  .dw-hero__grid{ grid-template-columns:1fr; gap:var(--dw-space-4); }
  .dw-hero__media{ order:-1; }
  .dw-frame::before{ inset:var(--dw-space-2) calc(var(--dw-space-2) * -1) calc(var(--dw-space-2) * -1) var(--dw-space-2); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KOMPONENTE · LAUFBAND
   Ein schmales Band mit den Haltungsworten. Rein dekorativ, aria-hidden.
   ═══════════════════════════════════════════════════════════════════════════ */
.dw-marquee{
  overflow:hidden; padding:var(--dw-space-2) 0;
  background:var(--dw-accent); color:var(--dw-ink-on-dark);
  border-block:1px solid var(--dw-accent-deep);
}
.dw-marquee__track{
  display:flex; width:max-content;
  animation:dw-marquee 38s linear infinite;
}
.dw-marquee:hover .dw-marquee__track{ animation-play-state:paused; }
.dw-marquee__group{
  display:flex; gap:var(--dw-space-4); padding-right:var(--dw-space-4);
  font-family:var(--dw-font-display); font-weight:var(--dw-fw-display);
  font-size:var(--dw-fs-h5); letter-spacing:var(--dw-ls-caps);
  text-transform:uppercase; white-space:nowrap;
}
.dw-marquee__group i{ font-style:normal; opacity:.55; }
@keyframes dw-marquee{ to{ transform:translateX(-50%); } }

/* ═══════════════════════════════════════════════════════════════════════════
   KOMPONENTE · KARTE
   ═══════════════════════════════════════════════════════════════════════════ */
.dw-card{
  background:var(--dw-cream); border-radius:var(--dw-radius);
  box-shadow:var(--dw-shadow-card); overflow:hidden;
  display:flex; flex-direction:column;
  transition:box-shadow var(--dw-transition), transform var(--dw-transition) var(--dw-ease);
}
.dw-card:hover{ box-shadow:var(--dw-shadow-raised); transform:translateY(-4px); }
.dw-card__media{ overflow:hidden; }
.dw-card__img{
  aspect-ratio:3/2; width:100%; object-fit:cover; display:block;
  transition:transform .6s var(--dw-ease);
}
.dw-card:hover .dw-card__img{ transform:scale(1.05); }
.dw-card__body{ padding:var(--dw-space-4); display:flex; flex-direction:column; flex:1; }
.dw-card__body h3{ margin-bottom:var(--dw-space-2); }
.dw-card__body .dw-link{ margin-top:auto; align-self:flex-start; padding-top:var(--dw-space-3); }
.dw-card .dw-overline{ color:var(--dw-accent); }
@media (max-width:700px){
  .dw-card__body{ padding:var(--dw-space-3); }
}

/* Merkmalsliste in der Karte — Häkchen in Grün */
.dw-ticks{ list-style:none; margin:0 0 var(--dw-space-2); padding:0; }
.dw-ticks li{
  position:relative; padding-left:28px; margin-bottom:var(--dw-space-1);
  line-height:1.6;
}
.dw-ticks li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:12px; height:7px; border-left:2px solid var(--dw-accent);
  border-bottom:2px solid var(--dw-accent); transform:rotate(-45deg);
}
.dw-on-accent .dw-ticks li::before,.dw-on-dark .dw-ticks li::before{
  border-color:var(--dw-ink-on-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   KOMPONENTE · ZITAT
   Goldene Haarlinie — der eine Glanzpunkt der Seite. Gold trägt hier keinen
   Text (nur Linie, 3,03:1 auf Creme — für Nicht-Text erlaubt).
   ═══════════════════════════════════════════════════════════════════════════ */
.dw-quote{
  margin:0; padding:var(--dw-space-4) 0 0;
  border-top:1px solid var(--dw-accent-2);
  max-width:70ch;
}
.dw-quote p{ font-size:var(--dw-fs-lead); line-height:var(--dw-lh-lead); }
.dw-quote footer{
  margin-top:var(--dw-space-2);
  font-size:var(--dw-fs-micro); letter-spacing:var(--dw-ls-caps);
  color:var(--dw-ink-muted);
}
/* Zitat als Karte auf Sand — steht neben dem Fließtext */
.dw-quote--card{
  background:var(--dw-sand); padding:var(--dw-space-4);
  border-top:3px solid var(--dw-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   KOMPONENTE · GEGENÜBERSTELLUNG (Heute / In drei Monaten)
   ═══════════════════════════════════════════════════════════════════════════ */
.dw-versus{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.dw-versus__col{ padding:var(--dw-space-5) var(--dw-space-4); }
.dw-versus__col--a{ background:var(--dw-sand); }
.dw-versus__col--b{ background:var(--dw-accent); color:var(--dw-ink-on-dark); }
.dw-versus__col--b h2,.dw-versus__col--b h3{ color:var(--dw-ink-on-dark); }
.dw-versus__time{
  font-family:var(--dw-font-body); font-weight:var(--dw-fw-semibold);
  font-size:var(--dw-fs-micro); letter-spacing:var(--dw-ls-caps);
  text-transform:uppercase; margin-bottom:var(--dw-space-2);
  display:inline-block; padding:4px 10px; border:1px solid currentColor;
}
.dw-versus__col--a .dw-versus__time{ color:var(--dw-ink); }
@media (max-width:900px){
  .dw-versus{ grid-template-columns:1fr; }
  .dw-versus__col{ padding:var(--dw-section-y) 5%; }
}

/* Schmerzpunkte — Liste mit Minus-Marke, klar von den Häkchen unterschieden */
.dw-pains{ list-style:none; margin:var(--dw-space-3) 0 0; padding:0; }
.dw-pains li{
  position:relative; padding-left:28px; margin-bottom:var(--dw-space-2);
  line-height:1.7;
}
.dw-pains li::before{
  content:""; position:absolute; left:0; top:.85em;
  width:14px; height:2px; background:var(--dw-ink-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   KOMPONENTE · STATEMENT-BAND
   Ein einziger Satz, gross gesetzt, Zeile für Zeile. Der Ruhepunkt der Seite.
   ═══════════════════════════════════════════════════════════════════════════ */
.dw-statement{ text-align:center; }
.dw-statement p{
  font-family:var(--dw-font-display); font-weight:var(--dw-fw-display);
  font-size:var(--dw-fs-display); line-height:1.05;
  letter-spacing:var(--dw-ls-display); margin:0;
  color:var(--dw-accent);            /* Grün auf Creme: 7,47:1 */
}
.dw-statement p span{ display:block; }
.dw-statement__sub{
  margin-top:var(--dw-space-3) !important;
  font:var(--dw-fw-body) var(--dw-fs-lead)/var(--dw-lh-lead) var(--dw-font-body) !important;
  letter-spacing:0 !important; max-width:52ch; margin-inline:auto;
  color:var(--dw-ink) !important;
}
/* eine feine Goldlinie über und unter dem Satz rahmt ihn ein */
.dw-statement::before,.dw-statement::after{
  content:""; display:block; width:64px; height:1px;
  background:var(--dw-accent-2); margin:0 auto var(--dw-space-4);
}
.dw-statement::after{ margin:var(--dw-space-4) auto 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   KOMPONENTE · ZAHLEN
   ═══════════════════════════════════════════════════════════════════════════ */
.dw-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--dw-space-4);
  list-style:none; margin:0; padding:0;
}
.dw-stat{ border-top:1px solid var(--dw-accent-2); padding-top:var(--dw-space-3); }
.dw-stat b{
  display:block; font-family:var(--dw-font-display); font-weight:var(--dw-fw-display);
  font-size:var(--dw-fs-h2); line-height:1.1; letter-spacing:var(--dw-ls-display);
  color:var(--dw-accent); margin-bottom:var(--dw-space-1);
}
.dw-stat span{ display:block; font-size:var(--dw-fs-small); line-height:1.6; }
@media (max-width:700px){ .dw-stats{ grid-template-columns:1fr; gap:var(--dw-space-3); } }

/* ═══════════════════════════════════════════════════════════════════════════
   KOMPONENTE · SCHRITTE — grosse Ziffer, durchlaufende Linie
   ═══════════════════════════════════════════════════════════════════════════ */
.dw-steps{ position:relative; }
.dw-steps::before{                    /* die Linie, die die drei verbindet */
  content:""; position:absolute; left:0; right:0; top:34px; height:1px;
  background:var(--dw-accent-2);
}
.dw-step{ position:relative; padding-top:0; border:0; }
.dw-step__num{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:68px; height:68px; margin-bottom:var(--dw-space-3);
  background:var(--dw-accent); color:var(--dw-ink-on-dark);
  font-family:var(--dw-font-display); font-weight:var(--dw-fw-display);
  font-size:var(--dw-fs-h3); line-height:1; letter-spacing:0;
  transition:transform var(--dw-transition) var(--dw-ease);
}
.dw-step:hover .dw-step__num{ transform:translateY(-4px); }
@media (max-width:900px){
  .dw-steps::before{ left:34px; right:auto; top:0; bottom:0; width:1px; height:auto; }
  .dw-step{ padding-left:100px; }
  .dw-step__num{ position:absolute; left:0; top:0; margin:0; }
}
@media (max-width:700px){
  .dw-steps::before{ left:26px; }
  .dw-step{ padding-left:76px; }
  .dw-step__num{ width:52px; height:52px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KOMPONENTE · ZWEISPALTER MIT BILD
   ═══════════════════════════════════════════════════════════════════════════ */
.dw-split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--dw-space-5); align-items:start; }
.dw-split--narrow-media{ grid-template-columns:1.15fr .85fr; }
.dw-split img{ width:100%; display:block; }
.dw-split__sticky{ position:sticky; top:calc(var(--dw-header-h) + var(--dw-space-4)); }
@media (max-width:900px){
  .dw-split,.dw-split--narrow-media{ grid-template-columns:1fr; gap:var(--dw-space-4); }
  .dw-split__sticky{ position:static; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KOMPONENTE · FAQ als Aufklapper
   ═══════════════════════════════════════════════════════════════════════════ */
.dw-faq{ max-width:70ch; }
.dw-acc{ border-top:1px solid var(--dw-border-sand); }
.dw-acc:last-of-type{ border-bottom:1px solid var(--dw-border-sand); }
.dw-acc summary{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--dw-space-3); cursor:pointer; list-style:none;
  padding:var(--dw-space-3) 0;
  font-family:var(--dw-font-display); font-weight:var(--dw-fw-display);
  font-size:var(--dw-fs-h4); line-height:1.3; letter-spacing:var(--dw-ls-display);
  transition:color var(--dw-transition);
}
.dw-acc summary::-webkit-details-marker{ display:none; }
.dw-acc summary:hover{ color:var(--dw-accent); }
.dw-acc summary:focus-visible{ outline:2px solid var(--dw-accent); outline-offset:4px; }
.dw-acc__icon{
  flex:none; position:relative; width:20px; height:20px; margin-top:.35em;
}
.dw-acc__icon::before,.dw-acc__icon::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--dw-accent);
  transform:translate(-50%,-50%); transition:transform var(--dw-transition) var(--dw-ease);
}
.dw-acc__icon::before{ width:16px; height:2px; }
.dw-acc__icon::after{ width:2px; height:16px; }
.dw-acc[open] .dw-acc__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.dw-acc__body{ padding:0 0 var(--dw-space-3); max-width:66ch; }

/* ═══════════════════════════════════════════════════════════════════════════
   KOMPONENTE · FORMULAR (Tally-Einbettung)
   Der Rahmen ist links ausgerichtet und bekommt Mindesthöhe, damit der
   Absenden-Knopf auch dann sichtbar ist, wenn das Skript von Tally noch lädt.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Kein eigener Hintergrund und kein Rahmen: der eingebettete Rahmen malt
   seinen Hintergrund selbst — die Farbe stellst du in Tally ein. So passt es
   automatisch, egal ob du dort Weiss oder das Creme #FBF6F1 wählst. */
.dw-form{ text-align:left; margin-top:var(--dw-space-4); }
.dw-form iframe{
  display:block; width:100%; min-height:760px; border:0;
}
.dw-form noscript p{ margin-top:var(--dw-space-2); }
@media (max-width:700px){
  .dw-form iframe{ min-height:820px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLATZHALTER — kommen in den nächsten Kursschritten weg
   Bewusst auffällig, damit sie nicht versehentlich online gehen.
   ═══════════════════════════════════════════════════════════════════════════ */
.dw-placeholder{
  border:2px dashed var(--dw-accent);
  background:var(--dw-notice-cream);
  padding:var(--dw-space-4) var(--dw-space-3);
  text-align:center; color:var(--dw-ink);
  max-width:var(--dw-container-sm); margin:0 auto;
}
.dw-placeholder .dw-overline{ color:var(--dw-accent); margin-bottom:var(--dw-space-1); }
.dw-placeholder p:last-child{ margin-bottom:0; }
.dw-placeholder-inline{
  border:1px dashed var(--dw-cream);
  padding:2px 8px; display:inline-block;
  font-size:var(--dw-fs-micro); letter-spacing:var(--dw-ls-caps);
}

/* ═══════════════════════════════════════════════════════════════════════════
   KOMPONENTE · FOOTER
   Auf Creme wie der Kopf der Seite — das Logo ist transparent und braucht
   diese helle Fläche, um mit Grün und Gold sichtbar zu bleiben. Auf dem
   warmen Grau erreichten beide nur 1,47:1 bzw. 1,68:1.
   Die Seite schliesst damit so, wie sie beginnt.
   ═══════════════════════════════════════════════════════════════════════════ */
.dw-footer{ background:var(--dw-cream); color:var(--dw-ink);
            border-top:1px solid var(--dw-border-cream);
            padding:var(--dw-section-y) 0 var(--dw-section-y-thin); }
.dw-footer__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--dw-space-4);
  align-items:start;
}
.dw-footer .dw-overline{ margin-bottom:var(--dw-space-2); color:var(--dw-accent); }
.dw-footer ul{ list-style:none; margin:0; padding:0; }
.dw-footer li{ margin-bottom:var(--dw-space-1); }
.dw-footer a{ color:var(--dw-ink); text-decoration:none; }
.dw-footer a:hover{ color:var(--dw-accent); text-decoration:underline; }
.dw-footer img{
  height:200px; width:auto; display:block; margin-bottom:var(--dw-space-3);
}
.dw-footer__bottom{
  border-top:1px solid var(--dw-border-cream);
  margin-top:var(--dw-space-4); padding-top:var(--dw-space-2);
  color:var(--dw-ink-muted);
}
/* Der Platzhalter-Rahmen war auf Grau gedacht — auf Creme braucht er Grün. */
.dw-footer .dw-placeholder-inline{ border-color:var(--dw-accent); }
@media (max-width:900px){
  .dw-footer__grid{ grid-template-columns:1fr 1fr; }
  .dw-footer img{ height:160px; }
}
@media (max-width:700px){
  .dw-footer__grid{ grid-template-columns:1fr; }
  .dw-footer img{ height:140px; }
}