/*
Theme Name: Daniela Schär - DS Design (Astra Child)
Theme URI: https://danielaschaer.com
Description: Child-Theme fuer Astra. Enthaelt das komplette DS-Designsystem
  (Farben, Schriften, goldener Faden, Bewegung) und die Block-Vorlagen fuer
  Startseite, Angebote und Unterseiten. Quelle der Regeln: Projekte\DESIGN_DS.md.
Author: Daniela Schär
Template: astra
Version: 1.0.11
Text Domain: ds-design
*/

/* =========================================================================
   DS-DESIGNSYSTEM
   Alle Klassen tragen das Praefix ds-, damit nichts mit Astra kollidiert.
   Aenderungen hier wirken auf ALLE Seiten, die die Bausteine nutzen.
   ========================================================================= */

:root{
  /* Markenpalette DS, verbindlich. Keine weiteren Farbtoene. */
  --ds-forest:#0e4647;      /* Waldgruen, Primaer */
  --ds-petrol:#205455;      /* Petrol, Sekundaer */
  --ds-forest-deep:#0b3536; /* Nachtgruen, dunkelste Flaechen */
  --ds-footer:#092f30;
  --ds-gold:#c99227;        /* Gold, Akzent auf hell */
  --ds-blitz:#e9c884;       /* helles Gold, Akzent auf dunkel */
  --ds-gold-soft:#d8c9a3;
  --ds-sand:#f5f0e8;
  --ds-cream:#fdfbf7;
  --ds-ink:#20201e;
  --ds-muted:#5d6763;
  --ds-ink-body:#3b4744;
  --ds-cream-text:#f3ede1;  /* Text auf dunkel, NIE reines Weiss */
  --ds-line:#d8d2c7;
  --ds-line-dark:rgba(245,240,232,.16);
  --ds-white:#ffffff;
  --ds-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ds-sans:"Nunito Sans",Arial,Helvetica,sans-serif;
  --ds-radius:2px;
  --ds-bezier:cubic-bezier(.32,.72,0,1);
  --ds-header-h:76px; /* wird per JS an Astras echte Kopfhoehe angepasst */
}

/* ---------- Grundlagen ---------- */
.ds-seite{
  font-family:var(--ds-sans);
  color:var(--ds-ink);
  font-size:1.02rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.ds-seite h1,.ds-seite h2,.ds-seite h3{
  font-family:var(--ds-serif);font-weight:500;line-height:1.14;margin:0;
}
.ds-seite p{margin:0 0 1em}
.ds-seite img{max-width:100%;height:auto;display:block}

/* Feine Koernung ueber der ganzen Seite. Signatur der DS-Welt. */
.ds-seite::after{
  content:"";position:fixed;inset:0;z-index:70;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05;
}

/* Innenbreite aller DS-Abschnitte */
.ds-innen{width:min(1140px,calc(100% - 48px));margin-inline:auto}
@media (max-width:600px){.ds-innen{width:calc(100% - 36px)}}

/* Abstands-Reset in DS-Bereichen.
   WordPress schiebt zwischen Bloecke einen Standardabstand, Astra
   setzt eigene Ueberschriften-Margen. Beides zusammen zerstoert den
   Rhythmus der Vorlage. :where() haelt die Spezifitaet niedrig, damit
   die weiter unten definierten Baustein-Abstaende gewinnen. */
.entry-content :where(.ds-oben,.ds-abschnitt,.ds-vollbild) :where(h1,h2,h3){
  margin:0;
}
.entry-content :where(.ds-oben,.ds-abschnitt,.ds-vollbild) :where(p){
  margin:0 0 1em;
}
.entry-content :where(.ds-oben,.ds-abschnitt,.ds-vollbild)
  :where(.wp-block-group,.wp-block-column) > :where(*){
  margin-block-start:0;margin-block-end:0;
}
.entry-content :where(.ds-oben,.ds-abschnitt,.ds-vollbild) :where(.wp-block-columns){
  margin:0;
}
.entry-content :where(.ds-abschnitt) :where(.wp-block-buttons){
  margin-top:8px;
}
/* Die bewussten Abstaende der Vorlage danach wieder herstellen. */
.entry-content .ds-schmerz{margin-top:48px}
.entry-content .ds-hero__gold{margin-bottom:26px}
.entry-content .ds-hero__sub{margin:14px 0 22px}
.entry-content .ds-hero .ds-notiz,.entry-content .ds-abschluss .ds-notiz{margin-top:16px}
.entry-content .ds-kette{margin-top:56px}
.entry-content .ds-blitz{margin-top:76px}
.entry-content .ds-tueren{margin-top:52px}
.entry-content .ds-tueren + p{margin-top:40px}
.entry-content .ds-schritte{margin-top:52px}
.entry-content .ds-stimmen{margin-top:48px}
.entry-content .ds-kacheln{margin-top:60px}
.entry-content .ds-faden{margin-top:56px;margin-bottom:0}
.entry-content .ds-abschnitt h2 + p,
.entry-content .ds-abschnitt h2 + .wp-block-columns{margin-top:24px}
.entry-content .ds-abschluss h2 + .ds-frage{margin-top:24px}
.entry-content .ds-leistungen{margin-top:24px}
.entry-content .ds-blog.wp-block-latest-posts{margin:48px 0 32px}

/* Abschnitts-Grundabstand und Flaechenfarben */
.ds-abschnitt{padding:112px 0}
.ds-flaeche-creme{background:var(--ds-cream)}
.ds-flaeche-sand{background:var(--ds-sand)}
.ds-flaeche-weiss{background:var(--ds-white)}
.ds-flaeche-gruen{background:var(--ds-forest);color:var(--ds-cream-text)}
.ds-flaeche-tief{background:var(--ds-forest-deep);color:var(--ds-cream-text)}
.ds-flaeche-gruen h2,.ds-flaeche-gruen h3,
.ds-flaeche-tief h2,.ds-flaeche-tief h3{color:var(--ds-cream-text)}
@media (max-width:960px){.ds-abschnitt{padding:76px 0}}

/* Goldener Balken vor Ueberschriften. Der eine Akzent. */
.ds-balken::before{
  content:"";display:block;width:44px;height:2px;background:var(--ds-gold);
  margin-bottom:22px;
}
.ds-mitte{text-align:center}
.ds-mitte .ds-balken::before{margin-inline:auto}

/* Zweifarbige Ueberschriften: die Kursive traegt die zweite Stimme.
   Im Editor einfach das Wort kursiv setzen. */
.ds-seite h1 em,.ds-seite h2 em{font-style:italic;color:var(--ds-gold)}
.ds-flaeche-gruen h2 em,.ds-flaeche-tief h2 em,
.ds-hero h1 em,.ds-schwelle em{color:var(--ds-blitz)}

/* ---------- Knoepfe ---------- */
.ds-seite .ds-knopf,
.ds-seite .wp-block-button.ds-knopf .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 28px;border-radius:var(--ds-radius);border:0;
  font-family:var(--ds-sans);font-weight:700;font-size:.95rem;
  text-decoration:none;cursor:pointer;
  transition:transform .5s var(--ds-bezier),filter .5s var(--ds-bezier);
}
.ds-seite .wp-block-button.ds-knopf .wp-block-button__link{
  background:var(--ds-gold);color:#16120b;
}
.ds-seite .wp-block-button.ds-knopf .wp-block-button__link:hover{
  transform:translateY(-2px);filter:brightness(1.06);
}
.ds-seite .wp-block-button.ds-knopf-hell .wp-block-button__link{
  background:transparent;border:1px solid rgba(245,240,232,.75);
  color:var(--ds-cream-text);
}
.ds-seite .wp-block-button.ds-knopf-hell .wp-block-button__link:hover{
  background:rgba(245,240,232,.08);transform:translateY(-2px);
}
.ds-seite .wp-block-button.ds-knopf-dunkel .wp-block-button__link{
  background:transparent;border:1px solid var(--ds-forest);color:var(--ds-forest);
}
.ds-notiz{font-size:.86rem;opacity:.72;margin:16px 0 0}

/* ---------- Vollbild-Abschnitte mit gewoehnlichem Bild-Block ----------
   Statt des Cover-Blocks (dessen internes Markup WordPress sehr streng
   prueft) nutzen die Bausteine einen normalen Bild-Block, den dieses
   CSS zum Hintergrund macht. Robust, und das Bild bleibt im Editor
   ganz normal austauschbar. */
/* Robust: JEDES Bild, das direkt im Vollbild-Abschnitt liegt, wird zum
   Hintergrund - auch wenn WordPress die Klasse des Bild-Blocks beim
   Einsetzen verwirft. */
.ds-hero .ds-hero__bild,
.ds-vollbild .ds-vollbild__bild,
.entry-content .ds-hero > .wp-block-image,
.entry-content .ds-vollbild > .wp-block-image,
.entry-content .ds-hero > figure,
.entry-content .ds-vollbild > figure{
  position:absolute !important;inset:0 !important;margin:0 !important;
  z-index:0;max-width:none !important;width:auto;
}
.ds-hero .ds-hero__bild img,
.ds-vollbild .ds-vollbild__bild img,
.entry-content .ds-hero > .wp-block-image img,
.entry-content .ds-vollbild > .wp-block-image img,
.entry-content .ds-hero > figure img,
.entry-content .ds-vollbild > figure img{
  width:100% !important;height:100% !important;object-fit:cover;display:block;
}
.ds-hero .ds-hero__schleier,
.ds-vollbild .ds-vollbild__schleier{
  position:absolute;inset:0;z-index:1;pointer-events:none;
}
.ds-hero > .ds-innen,
.ds-vollbild > .ds-innen,
.ds-hero .ds-hero__inhalt,
.ds-vollbild .ds-vollbild__inhalt{position:relative;z-index:2}
.ds-vollbild{position:relative;overflow:hidden}
.ds-vollbild .ds-vollbild__schleier{background:rgba(9,40,41,.55)}
.ds-kompass-bild .ds-vollbild__schleier{background:transparent}

/* ---------- Erster Bildschirm: Hero und Vertrauensleiste als Einheit ----
   Beide zusammen fuellen genau eine Bildschirmhoehe, damit die Leiste
   beim Laden sichtbar ist. Siehe DESIGN_DS.md Kapitel 4. */
.ds-oben{
  min-height:min(calc(100dvh - var(--ds-header-h)),920px);
  display:flex;flex-direction:column;
}
.ds-hero{
  position:relative;flex:1 1 auto;min-height:0;
  display:flex;align-items:flex-end;
  background:var(--ds-forest-deep);color:var(--ds-cream-text);
  overflow:hidden;
}
/* Der Verlauf liegt NUR auf der Textseite. Auf Daniela liegt keine Farbe. */
.ds-hero.wp-block-cover .wp-block-cover__background,
.ds-hero .ds-hero__schleier{
  background:linear-gradient(97deg,
    rgba(9,40,41,.94) 0%, rgba(9,40,41,.88) 32%,
    rgba(9,40,41,.62) 50%, rgba(9,40,41,.2) 66%,
    rgba(9,40,41,0) 76%) !important;
  opacity:1 !important;
}
/* Zweiter Schutz fuer die Lesbarkeit: weicher Schatten hinter dem Text,
   falls der Text auf einem Bildschirm doch in die helle Zone reicht. */
.entry-content .ds-hero h1,
.entry-content .ds-hero .ds-hero__gold,
.entry-content .ds-hero .ds-hero__sub,
.entry-content .ds-hero .ds-notiz{
  text-shadow:0 1px 18px rgba(9,40,41,.55);
}
/* Bildausschnitt wie v10: senkrecht niedrig (18%), damit ueber dem Kopf
   Luft bleibt und nichts abgeschnitten wird. Gilt fuer JEDES Bild direkt
   im Hero, egal wie WordPress den Block auszeichnet.
   FEINJUSTIERUNG: Der erste Wert schiebt waagerecht (74% = Daniela
   sitzt rechts), der zweite senkrecht ("top" = oberer Bildrand,
   groessere Prozente ruecken den Ausschnitt nach unten). */
.ds-hero .ds-hero__bild img,
.entry-content .ds-hero > .wp-block-image img,
.entry-content .ds-hero > figure img{
  object-position:74% 18% !important;
}
.ds-hero .wp-block-cover__inner-container,
.ds-hero .ds-innen{
  width:min(1140px,calc(100% - 48px));margin-inline:auto;
  padding:clamp(40px,6vh,96px) 0 clamp(36px,5vh,80px);
}
.ds-hero__inhalt{max-width:600px}
.ds-hero h1{
  font-size:clamp(2.2rem,min(5vw,7.4vh),3.8rem);
  max-width:22ch;color:var(--ds-cream-text);margin-bottom:10px;
}
.ds-hero h1::before{
  content:"";display:block;width:52px;height:2px;background:var(--ds-gold);
  margin-bottom:clamp(16px,2.6vh,28px);
}
.ds-hero h1 em{display:block;font-style:italic}
.ds-hero__gold{
  font-family:var(--ds-serif);font-size:clamp(1.14rem,1.9vw,1.4rem);
  color:var(--ds-blitz);max-width:38ch;margin:0 0 26px;line-height:1.4;
}
.ds-hero__sub{max-width:52ch;font-size:1.12rem;color:rgba(243,237,225,.9);margin:14px 0 0}
.ds-hero .ds-notiz{color:rgba(243,237,225,.62)}

/* Flache Fenster: enger stellen, damit die Leiste sichtbar bleibt. */
@media (min-width:961px) and (max-height:790px){
  .ds-hero .wp-block-cover__inner-container,
  .ds-hero .ds-innen{padding:26px 0 22px}
  .ds-hero h1{font-size:clamp(1.9rem,min(4.2vw,6.4vh),2.9rem)}
  .ds-hero h1::before{margin-bottom:14px}
  .ds-hero__sub{font-size:1rem;margin-top:10px}
  .ds-hero__gold{font-size:1.14rem;margin-bottom:18px}
  .ds-vertrauen__punkt{padding:15px 16px;font-size:.84rem}
  .ds-vertrauen__punkt strong{font-size:.92rem}
}

/* ---------- Vertrauensleiste ---------- */
.ds-vertrauen{background:var(--ds-forest);flex:0 0 auto}
.ds-vertrauen__raster{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--ds-line-dark);
}
.ds-vertrauen__punkt{
  background:var(--ds-forest);padding:22px 18px;text-align:center;
  font-size:.88rem;line-height:1.45;color:rgba(243,237,225,.74);
}
.ds-vertrauen__punkt strong{
  display:block;color:var(--ds-cream-text);font-size:.96rem;
  margin-bottom:3px;font-weight:700;
}
@media (max-width:960px){
  .ds-vertrauen__raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  /* Bewusst zweispaltig bleiben, sonst ist beim Laden nur EIN Beleg sichtbar. */
  .ds-vertrauen__punkt{padding:18px 12px;font-size:.8rem}
  .ds-vertrauen__punkt strong{font-size:.88rem}
}

/* ---------- Schmerzliste (StoryBrand-Pain-Muster) ---------- */
.ds-schmerz{list-style:none;padding:0;margin:48px 0 0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 64px}
.ds-schmerz li{
  position:relative;padding:16px 0;border-top:1px solid var(--ds-line);
  font-family:var(--ds-serif);font-size:clamp(1.08rem,1.7vw,1.3rem);
  line-height:1.5;color:#33403b;
}
.ds-schmerz b{color:var(--ds-forest);font-weight:600}
@media (max-width:960px){.ds-schmerz{grid-template-columns:1fr;gap:0}}

/* ---------- Goldener Faden ---------- */
.ds-faden{width:2px;height:76px;background:var(--ds-gold);margin:56px auto 0}

/* ---------- Schwelle: Vollbild-Moment mit einem Satz ---------- */
.ds-schwelle{
  position:relative;min-height:92vh;display:flex;align-items:center;
  justify-content:center;text-align:center;color:var(--ds-cream-text);
  background:var(--ds-forest-deep);overflow:hidden;
}
/* Auf der Angebote-Seite ist die Schwelle bewusst flacher. */
.ds-schwelle--flach{min-height:52vh}
.ds-schwelle .wp-block-cover__inner-container{position:relative;z-index:2}
.ds-schwelle p{
  margin:0;padding:0 24px;font-family:var(--ds-serif);
  font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.35;max-width:26ch;
  margin-inline:auto;color:var(--ds-cream-text);
}
.ds-schwelle__faden-oben,.ds-schwelle__faden-unten{
  position:absolute;left:50%;transform:translateX(-1px);width:2px;
  background:var(--ds-gold);z-index:3;
}
.ds-schwelle__faden-oben{top:0;height:80px}
.ds-schwelle__faden-unten{bottom:0;height:80px}
@media (max-width:960px){
  .ds-schwelle{min-height:72vh}
  .ds-schwelle--flach{min-height:44vh}
}

/* ---------- Kette: Layout als Argument (untereinander, nicht nebeneinander) */
.ds-kette{max-width:760px;margin:56px auto 0;position:relative}
.ds-kette::before{
  content:"";position:absolute;left:26px;top:18px;bottom:18px;width:2px;
  background:linear-gradient(180deg,var(--ds-gold),rgba(201,146,39,.25));
}
.ds-kette__glied{display:grid;grid-template-columns:54px 1fr;gap:22px;padding:20px 0}
.ds-kette__punkt{
  width:14px;height:14px;border-radius:50%;background:var(--ds-gold);
  margin:9px 0 0 20px;position:relative;z-index:2;
  box-shadow:0 0 0 6px var(--ds-forest);
}
.ds-kette__glied h3{font-size:1.3rem;margin-bottom:6px}
.ds-kette__glied p{margin:0;color:rgba(243,237,225,.82)}

/* ---------- Blitz-Flaeche: Schluesselsatz auf zwei Zeilen ---------- */
.ds-blitz{
  margin:76px auto 0;max-width:880px;text-align:center;
  border-top:1px solid var(--ds-line-dark);
  border-bottom:1px solid var(--ds-line-dark);padding:38px 10px;
}
.ds-blitz p{
  margin:0;font-family:var(--ds-serif);font-style:italic;
  font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.3;
}
.ds-flaeche-creme .ds-blitz,.ds-flaeche-sand .ds-blitz,
.ds-flaeche-weiss .ds-blitz{border-color:var(--ds-line)}
.ds-flaeche-creme .ds-blitz p,.ds-flaeche-sand .ds-blitz p,
.ds-flaeche-weiss .ds-blitz p{color:var(--ds-forest)}

/* ---------- Zwei Wege: die Tueren ---------- */
.ds-tueren{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.ds-tuer{
  background:var(--ds-white);border:1px solid var(--ds-line);
  border-top:2px solid var(--ds-gold);border-radius:var(--ds-radius);
  padding:38px 34px 32px;display:flex;flex-direction:column;
  transition:transform .5s var(--ds-bezier),box-shadow .5s var(--ds-bezier);
}
.ds-tuer:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(5,26,27,.1)}
/* Die Business-Tuer traegt Petrol, die persoenliche Tuer bleibt hell. */
.ds-tuer--business{background:var(--ds-petrol);border-color:rgba(245,240,232,.2);color:var(--ds-cream-text)}
.ds-tuer__wo{
  display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--ds-gold);margin-bottom:14px;
}
.ds-tuer--business .ds-tuer__wo{color:var(--ds-blitz)}
.ds-tuer h3{font-size:1.5rem;color:var(--ds-forest);margin-bottom:12px}
.ds-tuer--business h3{color:var(--ds-cream-text)}
.ds-tuer p{font-size:1rem;color:var(--ds-ink-body)}
.ds-tuer--business p{color:rgba(243,237,225,.86)}
.ds-tuer ul{list-style:none;padding:0;margin:6px 0 28px}
.ds-tuer li{padding:9px 0;border-top:1px solid var(--ds-line);font-size:.94rem;color:var(--ds-forest);font-weight:700}
.ds-tuer--business li{border-top-color:var(--ds-line-dark);color:var(--ds-cream-text)}
.ds-tuer__weiter{
  margin-top:auto;align-self:flex-start;font-weight:700;font-size:.92rem;
  color:var(--ds-forest);border-bottom:1px solid var(--ds-gold);padding-bottom:2px;
  text-decoration:none;
}
.ds-tuer--business .ds-tuer__weiter{color:var(--ds-blitz);border-bottom-color:rgba(233,200,132,.5)}
@media (max-width:960px){
  .ds-tueren{grid-template-columns:1fr;gap:18px}
  .ds-tuer{padding:30px 26px 28px}
}

/* ---------- Angebots-Panel mit Ergebnisliste ---------- */
.ds-panel{
  background:var(--ds-white);color:var(--ds-ink);border-radius:var(--ds-radius);
  box-shadow:0 34px 90px rgba(5,26,27,.28);
  padding:48px 46px 42px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:48px;
  margin-top:24px;position:relative;
}
.ds-panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ds-gold)}
.ds-panel h3{font-size:2rem;color:var(--ds-forest);margin-bottom:10px}
.ds-panel p{color:var(--ds-ink-body)}
.ds-kicker{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ds-gold);font-weight:700;margin-bottom:12px;
}
.ds-ergebnisse{list-style:none;padding:0;margin:0}
.ds-ergebnisse li{padding:10px 0;border-top:1px solid var(--ds-line);font-size:.96rem;color:var(--ds-ink-body)}
.ds-ergebnisse li:first-child{font-weight:700;color:var(--ds-forest)}
.ds-preis{border-top:1px solid var(--ds-line);margin-top:24px;padding-top:18px}
.ds-preis__gross{font-family:var(--ds-serif);font-size:1.9rem;color:var(--ds-forest);line-height:1.1}
.ds-preis small{display:block;color:var(--ds-muted);font-size:.84rem;margin-top:8px;line-height:1.5}
.ds-garantie{
  background:var(--ds-sand);border-left:2px solid var(--ds-gold);
  padding:16px 20px;margin-top:20px;font-size:.9rem;color:var(--ds-ink-body);
}
@media (max-width:960px){.ds-panel{grid-template-columns:1fr;padding:36px 26px 32px;gap:32px}}

/* ---------- Karten (Angebote, Blog) ---------- */
.ds-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ds-karten--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.ds-karte{
  background:var(--ds-white);border:1px solid var(--ds-line);
  border-top:2px solid var(--ds-gold);border-radius:var(--ds-radius);
  padding:34px 30px;display:flex;flex-direction:column;
}
.ds-karte h3{font-size:1.4rem;color:var(--ds-forest);margin-bottom:8px}
.ds-karte p{font-size:.96rem;color:var(--ds-muted)}
.ds-karte__preis{display:block;font-weight:700;color:var(--ds-forest);margin:auto 0 6px;padding-top:16px}
.ds-karte__preis small{display:block;font-weight:400;color:var(--ds-muted);font-size:.8rem;margin-top:4px}
.ds-mehr{
  font-weight:700;font-size:.9rem;color:var(--ds-forest);
  border-bottom:1px solid var(--ds-gold);padding-bottom:2px;
  align-self:flex-start;text-decoration:none;margin-top:16px;
}
@media (max-width:960px){.ds-karten,.ds-karten--zwei{grid-template-columns:1fr}}

/* ---------- Drei Schritte (Plan) ---------- */
.ds-schritte{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;
  border-top:1px solid var(--ds-line);padding-top:44px;margin-top:52px;
}
.ds-flaeche-gruen .ds-schritte,.ds-flaeche-tief .ds-schritte{border-top-color:var(--ds-line-dark)}
.ds-schritte__nr{
  display:block;font-family:var(--ds-serif);font-size:2.6rem;line-height:1;
  color:var(--ds-gold);margin-bottom:16px;
}
.ds-schritte h3{font-size:1.4rem;color:var(--ds-forest);margin-bottom:8px}
.ds-flaeche-gruen .ds-schritte h3,.ds-flaeche-tief .ds-schritte h3{color:var(--ds-cream-text)}
.ds-schritte p{margin:0;color:var(--ds-muted)}
.ds-flaeche-gruen .ds-schritte p,.ds-flaeche-tief .ds-schritte p{color:rgba(243,237,225,.78)}
@media (max-width:960px){.ds-schritte{grid-template-columns:1fr;gap:36px}}

/* ---------- Bild-Kacheln (Ergebnisbild) ---------- */
.ds-kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:60px}
.ds-kachel__bild{
  position:relative;height:220px;overflow:hidden;
  border-radius:var(--ds-radius);background:var(--ds-sand);margin-bottom:22px;
}
.ds-kachel__bild img{width:100%;height:100%;object-fit:cover}
.ds-kachel h3{font-size:1.4rem;color:var(--ds-forest);margin-bottom:10px}
.ds-kachel p{font-size:.98rem;color:var(--ds-muted);margin:0;max-width:34ch}
@media (max-width:960px){.ds-kacheln{grid-template-columns:1fr;gap:40px}}

/* ---------- Stimmen ---------- */
.ds-stimmen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ds-stimme{background:var(--ds-white);border:1px solid var(--ds-line);padding:34px 30px;border-radius:var(--ds-radius)}
.ds-stimme blockquote{margin:0 0 20px;font-family:var(--ds-serif);font-style:italic;font-size:1.18rem;line-height:1.45;color:#33403b}
.ds-stimme cite{font-style:normal;font-size:.85rem;color:var(--ds-muted)}
.ds-stimme cite strong{color:var(--ds-forest)}
@media (max-width:960px){.ds-stimmen{grid-template-columns:1fr}}

/* ---------- Zitatflaeche ---------- */
.ds-zitat{
  background:var(--ds-white);border-radius:var(--ds-radius);
  padding:30px 34px;margin:0 0 36px;position:relative;max-width:62ch;
}
.ds-zitat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ds-gold)}
.ds-zitat p{margin:0;font-family:var(--ds-serif);font-style:italic;font-size:clamp(1.16rem,2vw,1.42rem);line-height:1.4;color:var(--ds-petrol)}

/* ---------- Schnupper-Streifen (kleinster Einstieg, bewusst keine Karte) */
.ds-schnupper{
  margin-top:26px;background:var(--ds-white);
  border:1px solid var(--ds-line);border-left:2px solid var(--ds-gold);
  border-radius:var(--ds-radius);padding:26px 32px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.ds-schnupper p{margin:0;font-size:.98rem;color:var(--ds-ink-body);max-width:60ch}
.ds-schnupper em{font-family:var(--ds-serif);font-style:italic;font-size:1.2rem;color:var(--ds-forest);margin-right:8px}
@media (max-width:960px){.ds-schnupper{flex-direction:column;align-items:flex-start}}

/* ---------- FAQ ---------- */
.ds-faq{max-width:820px;margin:0 auto}
.ds-faq details{border-bottom:1px solid var(--ds-line)}
.ds-faq summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-weight:700;color:var(--ds-forest);font-size:1.02rem;
}
.ds-faq summary::-webkit-details-marker{display:none}
.ds-faq summary::after{
  content:"+";position:absolute;right:6px;top:19px;font-family:var(--ds-serif);
  font-size:1.6rem;color:var(--ds-gold);line-height:1;
}
/* Minuszeichen U+2212, ausdruecklich KEIN Gedankenstrich. */
.ds-faq details[open] summary::after{content:"\2212"}
.ds-faq .ds-faq__antwort{padding:0 40px 24px 0;color:var(--ds-muted)}

/* ---------- Abschluss mit Bild ---------- */
.ds-abschluss{
  position:relative;color:var(--ds-cream-text);background:var(--ds-forest-deep);
  text-align:center;overflow:hidden;padding:140px 0;
}
.ds-abschluss h2{font-size:clamp(2rem,3.8vw,3.1rem);max-width:34ch;margin:0 auto 24px}
.ds-abschluss .ds-frage{
  font-family:var(--ds-serif);font-style:italic;
  font-size:clamp(1.2rem,2vw,1.5rem);color:rgba(243,237,225,.85);
  max-width:36ch;margin:0 auto 32px;
}
@media (max-width:960px){.ds-abschluss{padding:96px 0}}

/* ---------- Sticky-CTA, nur kleine Viewports ---------- */
.ds-sticky{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:58;
  background:rgba(9,47,48,.97);border-top:1px solid rgba(201,146,39,.4);
  padding:10px 4vw;align-items:center;justify-content:space-between;gap:12px;
  transform:translateY(110%);transition:transform .4s var(--ds-bezier);
}
.ds-sticky.ist-da{transform:none}
.ds-sticky a{text-decoration:none}
.ds-sticky a.ds-knopf{
  background:var(--ds-gold);color:#16120b;
  min-height:44px;padding:0 18px;font-size:.8rem;
}
.ds-sticky__zweit{color:var(--ds-gold-soft);font-size:.82rem;border-bottom:1px solid rgba(216,201,163,.5);white-space:nowrap}
@media (max-width:959px){
  .ds-sticky{display:flex}
  body.ds-hat-sticky{padding-bottom:66px}
}

/* ---------- Bewegung ---------- */
.ds-reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .ds-js .ds-reveal{
    opacity:0;transform:translateY(26px);filter:blur(6px);
    transition:opacity .9s var(--ds-bezier),transform .9s var(--ds-bezier),filter .9s var(--ds-bezier);
  }
  .ds-js .ds-reveal.ist-da{opacity:1;transform:none;filter:blur(0)}
  /* Hero-Auftritt beim Laden, gestaffelt */
  .ds-js .ds-hero h1,.ds-js .ds-hero__sub,.ds-js .ds-hero__gold,
  .ds-js .ds-hero .wp-block-buttons,.ds-js .ds-hero .ds-notiz{
    opacity:0;transform:translateY(22px);
    animation:dsAuftritt 1s var(--ds-bezier) forwards;
  }
  .ds-js .ds-hero h1{animation-delay:.15s}
  .ds-js .ds-hero__gold{animation-delay:.32s}
  .ds-js .ds-hero__sub{animation-delay:.48s}
  .ds-js .ds-hero .wp-block-buttons{animation-delay:.64s}
  .ds-js .ds-hero .ds-notiz{animation-delay:.8s}
  /* Der goldene Faden waechst, statt nur zu erscheinen */
  .ds-js .ds-faden.ds-reveal{
    opacity:1;filter:none;transform:scaleY(0);transform-origin:top;
    transition:transform 1.4s var(--ds-bezier);
  }
  .ds-js .ds-faden.ds-reveal.ist-da{transform:scaleY(1)}
  /* Gestaffelte Raster */
  .ds-js .ds-tueren .ds-reveal:nth-child(2),
  .ds-js .ds-kacheln .ds-reveal:nth-child(2),
  .ds-js .ds-stimmen .ds-reveal:nth-child(2),
  .ds-js .ds-schritte .ds-reveal:nth-child(2){transition-delay:.15s}
  .ds-js .ds-kacheln .ds-reveal:nth-child(3),
  .ds-js .ds-stimmen .ds-reveal:nth-child(3),
  .ds-js .ds-schritte .ds-reveal:nth-child(3){transition-delay:.3s}
}
@keyframes dsAuftritt{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ds-sticky{transition:none}}

/* =========================================================================
   KORREKTUREN GEGEN ASTRA (3.8.2026, nach erster Vorschau)
   Zwei Dinge, die Astra sonst kaputt macht.
   ========================================================================= */

/* 0) Astras Kasten-Layout aufheben.
   Astra legt den Seiteninhalt je nach Einstellung in einen weissen
   Kasten mit Innenabstand (Klasse ast-separate-container). Auf
   DS-Seiten erzeugt das die weissen Raender rund um Hero und
   Vertrauensleiste. Hier wird der Kasten fuer alle Seiten mit
   DS-Bausteinen vollstaendig neutralisiert. */
body.ast-separate-container:has(.ds-oben) .ast-article-single,
body.ast-separate-container:has(.ds-abschnitt) .ast-article-single,
body.ast-separate-container.ds-vollbreite .ast-article-single{
  background:transparent;padding:0;margin:0;border:0;box-shadow:none;
}
body:has(.ds-oben) .site-content,
body:has(.ds-abschnitt) .site-content{padding-top:0;padding-bottom:0}
body:has(.ds-oben) #primary,
body:has(.ds-abschnitt) #primary{padding:0;margin:0}
body:has(.ds-oben) .site-main,
body:has(.ds-abschnitt) .site-main{padding:0}

/* 1) Volle Breite erzwingen.
   Die Huelle .ds-oben haelt Hero und Vertrauensleiste zusammen. Aus ihr
   heraus greift WordPress' "Volle Breite" nicht mehr, deshalb brechen wir
   hier per negativem Aussenabstand aus dem Astra-Container aus.
   Ist der Container ohnehin schon voll breit, ergibt die Rechnung null,
   die Regel schadet dann nicht. */
.ds-oben,
.entry-content > .ds-abschnitt,
.entry-content > .ds-schwelle,
.entry-content > .ds-abschluss,
.entry-content > .ds-seiten-hero,
.entry-content > .ds-kompass-bild{
  margin-inline:calc(50% - 50vw);
}
/* Kein waagerechtes Scrollen durch die Ausbruch-Regel. */
.ds-seite{overflow-x:clip}

/* 2) Textfarben auf dunklen Flaechen gegen Astra durchsetzen.
   Astra faerbt Absaetze global ein, das ergibt sonst dunklen Text auf
   dunkelgruenem Grund. Die .entry-content-Vorsilbe hebt die Spezifitaet
   ueber Astras eigene Regel. */
.entry-content .ds-hero p,
.entry-content .ds-hero li,
.entry-content .ds-schwelle p,
.entry-content .ds-abschluss p,
.entry-content .ds-seiten-hero p,
.entry-content .ds-flaeche-gruen p,
.entry-content .ds-flaeche-gruen li,
.entry-content .ds-flaeche-tief p,
.entry-content .ds-flaeche-tief li{
  color:rgba(243,237,225,.86);
}
.entry-content .ds-hero h1,
.entry-content .ds-seiten-hero h1,
.entry-content .ds-schwelle p,
.entry-content .ds-abschluss h2,
.entry-content .ds-flaeche-gruen h2,
.entry-content .ds-flaeche-gruen h3,
.entry-content .ds-flaeche-tief h2,
.entry-content .ds-flaeche-tief h3,
.entry-content .ds-blitz p{
  color:var(--ds-cream-text);
}
/* Die goldenen Akzente behalten ihre Farbe. */
.entry-content .ds-hero .ds-hero__gold{color:var(--ds-blitz)}
.entry-content .ds-hero .ds-hero__sub{color:rgba(243,237,225,.9)}
.entry-content .ds-vertrauen__punkt{color:rgba(243,237,225,.74)}
.entry-content .ds-vertrauen__punkt strong{color:var(--ds-cream-text)}
.entry-content .ds-hero h1 em,
.entry-content .ds-seiten-hero h1 em,
.entry-content .ds-schwelle em,
.entry-content .ds-abschluss h2 em,
.entry-content .ds-flaeche-gruen h2 em,
.entry-content .ds-flaeche-tief h2 em,
.entry-content .ds-blitz em{color:var(--ds-blitz)}
.entry-content .ds-flaeche-gruen .ds-tuer h3,
.entry-content .ds-flaeche-gruen .ds-tuer p,
.entry-content .ds-flaeche-gruen .ds-panel h3,
.entry-content .ds-flaeche-gruen .ds-panel p,
.entry-content .ds-flaeche-gruen .ds-panel li{color:var(--ds-ink-body)}
.entry-content .ds-flaeche-gruen .ds-tuer--business h3{color:var(--ds-cream-text)}
.entry-content .ds-flaeche-gruen .ds-tuer--business p{color:rgba(243,237,225,.86)}
.entry-content .ds-flaeche-gruen .ds-panel h3{color:var(--ds-forest)}

/* Lesbarkeit auf hellen Flaechen ebenfalls absichern. */
.entry-content .ds-flaeche-weiss p,
.entry-content .ds-flaeche-creme p,
.entry-content .ds-flaeche-sand p{color:var(--ds-ink-body)}
.entry-content .ds-schmerz li{color:#33403b}
.entry-content .ds-flaeche-weiss h2,
.entry-content .ds-flaeche-creme h2,
.entry-content .ds-flaeche-sand h2,
.entry-content .ds-flaeche-weiss h3,
.entry-content .ds-flaeche-creme h3,
.entry-content .ds-flaeche-sand h3{color:var(--ds-forest)}

/* 3) Solange ein Bild fehlt, zeigt der Bildstreifen eine ruhige Sandflaeche
   statt eines leeren weissen Lochs. Nach dem Einsetzen greift das Bild. */
.ds-kompass-bild:not(:has(img)){background:var(--ds-sand);min-height:34vh}
.ds-hero:not(:has(img)){min-height:min(62vh,600px)}

/* ---------- Ergaenzungen fuer die fertigen Seiten ---------- */

/* Kompakter Kopf der Unterseiten (Angebote, Programmseiten) */
.ds-seiten-hero{color:var(--ds-cream-text)}
.ds-seiten-hero h1{
  font-size:clamp(2.2rem,4.6vw,3.5rem);max-width:22ch;color:var(--ds-cream-text);
}
.ds-seiten-hero h1::before{
  content:"";display:block;width:52px;height:2px;background:var(--ds-gold);margin-bottom:26px;
}
.ds-seiten-hero h1 em{display:block;font-style:italic;color:var(--ds-blitz)}

/* Portrait in "Ueber mich": Passepartout wie im Galerierahmen */
.ds-portrait{border:1px solid var(--ds-line);padding:14px;background:var(--ds-white)}
.ds-portrait img{width:100%;height:auto;display:block}
.ds-kursiv{font-family:var(--ds-serif);font-size:1.26rem;color:var(--ds-petrol)}

/* Bildband vor dem Kompass, hellste Stelle der Seite.
   Die Hoehe MUSS hier stehen: das Bild liegt absolut im Band und gibt
   selbst keine Hoehe - ohne diese Zeile faellt das Band nach dem
   Einsetzen des Bildes auf null zusammen. Wert wie v10 .kompass-media. */
.ds-kompass-bild{background:var(--ds-sand);height:clamp(320px,48vw,560px)}

/* Karte auf dunklem Grund (Aussen-Weg) */
.ds-karte--auf-dunkel{
  background:rgba(245,240,232,.05);border-color:var(--ds-line-dark);
}
.ds-karte--auf-dunkel h3{color:var(--ds-cream-text)}
.ds-karte--auf-dunkel p{color:rgba(243,237,225,.8)}
.ds-karte--auf-dunkel .ds-karte__preis{color:var(--ds-cream-text)}
.ds-karte--auf-dunkel .ds-karte__preis small{color:var(--ds-gold-soft)}
.ds-karte--auf-dunkel .ds-mehr{color:var(--ds-blitz);border-bottom-color:rgba(233,200,132,.5)}
.ds-flaeche-gruen .ds-kicker,.ds-flaeche-tief .ds-kicker{color:var(--ds-blitz)}

/* Blitz-Zeile in der Innen-Gruppe */
.ds-innen-blitz{
  font-family:var(--ds-serif);font-size:clamp(1.3rem,2.2vw,1.7rem);
  color:var(--ds-petrol);margin:0 0 18px;
}

/* Bild-Kacheln, wenn sie als Spalten gebaut sind */
.ds-kacheln.wp-block-columns{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:60px;
}
.ds-kacheln .wp-block-column{flex-basis:auto !important}
.ds-kachel .wp-block-image{margin:0 0 22px}
.ds-kachel .wp-block-image img{
  width:100%;height:220px;object-fit:cover;border-radius:var(--ds-radius);
}
@media (max-width:960px){
  .ds-kacheln.wp-block-columns{grid-template-columns:1fr;gap:40px}
}

/* ---------- Ueber mich, wie in der Vorlage ---------- */
.entry-content #ueber-mich .wp-block-columns{
  display:flex;gap:64px;align-items:center;
}
/* Passepartout wie in der Vorlage: fester Rahmen, Bild dahinter
   beschnitten, feste Hoehe. */
.entry-content .ds-portrait{
  border:1px solid var(--ds-line);padding:14px;background:var(--ds-white);
  margin:0;position:relative;min-height:480px;overflow:hidden;
}
.entry-content .ds-portrait img{
  position:absolute;inset:14px;
  width:calc(100% - 28px) !important;height:calc(100% - 28px) !important;
  object-fit:cover;display:block;
}
@media (max-width:960px){
  .entry-content .ds-portrait{min-height:360px}
}
.entry-content .ds-kursiv{
  font-family:var(--ds-serif);font-size:1.26rem;color:var(--ds-petrol);
  margin:16px 0 22px;
}
@media (max-width:960px){
  .entry-content #ueber-mich .wp-block-columns{gap:36px}
}

/* ---------- Leistungs-Chips (Ueber mich) ---------- */
.entry-content .ds-leistungen,
.ds-leistungen{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px;padding:0;list-style:none}
.entry-content .ds-leistungen li,
.ds-leistungen li{
  border:1px solid var(--ds-line);background:var(--ds-white);
  padding:8px 14px;border-radius:var(--ds-radius);
  font-size:.83rem;color:var(--ds-muted);margin:0;
}
.ds-leistungen li::marker{content:""}

/* ---------- Leise Zeile unter einem CTA ---------- */
.ds-leise{margin-top:22px;font-size:.92rem;color:var(--ds-muted)}
.ds-leise a{color:var(--ds-forest);border-bottom:1px solid var(--ds-gold);padding-bottom:2px;text-decoration:none}

/* ---------- PDF-Mockup: sichtbarer Gegenstand fuer den Lead-Magnet ---------- */
.ds-pdf{
  width:100%;max-width:210px;aspect-ratio:1/1.414;background:var(--ds-white);
  border:1px solid var(--ds-line);border-radius:var(--ds-radius);
  box-shadow:0 24px 50px rgba(5,26,27,.22);
  overflow:hidden;transform:rotate(-2deg);margin:6px auto 0;
}
.ds-pdf__kopf{background:var(--ds-forest);padding:16px 16px 13px;border-bottom:2px solid var(--ds-gold)}
.ds-pdf__kopf span{display:block;font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ds-blitz);font-weight:700}
.ds-pdf__kopf b{display:block;font-family:var(--ds-serif);font-size:.86rem;color:var(--ds-cream-text);margin-top:5px;letter-spacing:.06em}
.ds-pdf__inhalt{padding:20px 18px}
.ds-pdf__inhalt h3{font-family:var(--ds-serif);font-size:1.02rem;color:var(--ds-forest);line-height:1.22;margin:0 0 14px}
.ds-pdf__linie{height:1px;background:var(--ds-line);margin:9px 0}
.ds-pdf__linie--kurz{width:58%}
.ds-pdf__nr{font-family:var(--ds-serif);font-size:.72rem;color:var(--ds-gold);letter-spacing:.14em;margin-top:16px;display:block}
@media (max-width:960px){.ds-pdf{max-width:190px;transform:none}}

/* ---------- Blog-Teaser (Neueste-Beitraege-Block) ----------
   Zieht automatisch die drei neuesten Seelenblog-Beitraege. */
.ds-blog.wp-block-latest-posts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;margin:48px 0 32px;padding:0;list-style:none;
}
/* Karten wie v10 .blog-karte: weisse Textkarte OHNE Bild, Reihenfolge
   Datum -> Titel -> Auszug (WordPress liefert Titel vor Datum, deshalb
   die order-Werte). */
.ds-blog li{
  background:var(--ds-white);border:1px solid var(--ds-line);
  border-radius:var(--ds-radius);padding:30px 28px;margin:0;
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .5s var(--ds-bezier),box-shadow .5s var(--ds-bezier);
}
.ds-blog li:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(5,26,27,.12)}
.ds-blog .wp-block-latest-posts__featured-image{display:none !important}
.ds-blog .wp-block-latest-posts__post-date{
  order:1;display:block;padding:0;margin:0 0 12px;
  font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ds-forest);font-weight:700;
}
.ds-blog li > a{
  order:2;display:block;padding:0;font-family:var(--ds-serif);
  font-size:1.2rem;line-height:1.3;color:var(--ds-forest);text-decoration:none;
  margin-bottom:10px;
}
.ds-blog li > a:hover{color:var(--ds-petrol)}
.ds-blog .wp-block-latest-posts__post-excerpt{
  order:3;padding:0;font-size:.92rem;color:var(--ds-muted);margin:0;
}
@media (max-width:960px){
  .ds-blog.wp-block-latest-posts{grid-template-columns:1fr}
}

/* ---------- Kopfzeile in Waldgruen ----------
   Astras Kopfzeile bekommt den dunklen Grund, damit sie den Hero
   fortsetzt statt ihn abzuschneiden. Gilt auf allen Seiten, damit die
   Navigation ueberall gleich aussieht. */
.site-header,
.ast-primary-header-bar,
.main-header-bar,
.ast-header-break-point .main-header-bar{
  background-color:var(--ds-forest) !important;
  border-bottom:1px solid rgba(245,240,232,.12) !important;
}
.site-header .site-title,
.site-header .site-title a,
.site-header .site-description,
.ast-site-identity .site-title a{
  color:var(--ds-cream-text) !important;
  font-family:var(--ds-serif);
}
.site-header .site-description{color:var(--ds-gold-soft) !important;letter-spacing:.16em;text-transform:uppercase;font-family:var(--ds-sans)}
.main-header-menu > li > a,
.main-navigation ul li a,
.ast-header-break-point .main-header-menu a{
  color:rgba(243,237,225,.88) !important;
}
.main-header-menu > li > a:hover,
.main-navigation ul li a:hover,
.main-header-menu .current-menu-item > a{
  color:var(--ds-blitz) !important;
}
/* Untermenues bleiben dunkel, damit nichts aufblitzt */
.main-header-menu .sub-menu{
  background-color:var(--ds-forest-deep) !important;
  border-color:rgba(245,240,232,.12) !important;
}
/* Burger-Symbol und mobiles Menue */
.ast-mobile-menu-buttons .menu-toggle,
.ast-button-wrap .menu-toggle.ast-mobile-menu-trigger-minimal{
  background:transparent !important;color:var(--ds-cream-text) !important;
}
.ast-mobile-menu-buttons svg,
.menu-toggle .ast-mobile-svg{fill:var(--ds-cream-text) !important}
.ast-header-break-point .ast-mobile-header-wrap .main-header-bar,
.ast-mobile-popup-drawer .ast-mobile-popup-inner{
  background-color:var(--ds-forest) !important;
}
/* Ein Knopf im Menue bleibt Gold */
.main-header-menu .ast-menu-toggle,
.main-header-menu li.ds-menue-knopf > a{
  background:var(--ds-gold) !important;color:#16120b !important;
  border-radius:var(--ds-radius);padding:11px 20px !important;font-weight:700;
}
.main-header-menu li.ds-menue-knopf > a:hover{filter:brightness(1.06)}

/* ---------- Sprachumschalter (TranslatePress) ----------
   Damit DE und EN im DS-Ton erscheinen und nicht wie ein Fremdkoerper. */
.trp-language-switcher-container,
#trp-floater-ls{font-family:var(--ds-sans)}
.trp-language-switcher>div{
  background:transparent;border:1px solid var(--ds-line);
  border-radius:var(--ds-radius);padding:6px 12px;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ds-forest);
}
.ds-flaeche-gruen .trp-language-switcher>div,
.ds-flaeche-tief .trp-language-switcher>div,
.ds-hero .trp-language-switcher>div{
  border-color:var(--ds-line-dark);color:var(--ds-cream-text);
}
.trp-language-switcher .trp-ls-shortcode-language a{color:inherit;text-decoration:none}
.trp-language-switcher .trp-ls-shortcode-language a:hover{color:var(--ds-gold)}

/* =========================================================================
   SCHRIFT- UND FARB-DURCHSETZUNG (ganz am Ende, gewinnt die Kaskade)
   Astra druckt sein Customizer-CSS NACH diesem Stylesheet und wuerde
   sonst Schriften und Farben der DS-Bereiche ueberschreiben. Diese
   Schicht setzt die Vorlage verbindlich durch, begrenzt auf DS-Bereiche.
   ========================================================================= */

/* Grundschrift: Nunito Sans fuer alles in DS-Bereichen */
body.ds-seite :is(.ds-oben,.ds-abschnitt,.ds-vollbild,.ds-sticky) :is(p,li,a,cite,span,small,strong,b,input,button){
  font-family:var(--ds-sans) !important;
}
/* Ueberschriften: Cormorant Garamond, in den Groessen der Vorlage.
   Ohne die !important-Groessen wuerde Astras Customizer (36px/30px)
   den Massstab der Vorlage ueberschreiben. */
body.ds-seite :is(.ds-oben,.ds-abschnitt,.ds-vollbild) :is(h1,h2,h3){
  font-family:var(--ds-serif) !important;
  font-weight:500 !important;
  line-height:1.14 !important;
}
body.ds-seite .ds-hero h1{
  font-size:clamp(2.2rem,min(5vw,7.4vh),3.8rem) !important;
}
/* Ueberschriften-Skala EXAKT nach startseite-v10.html - die Groessen
   sind dort bewusst je Abschnitt verschieden. */
body.ds-seite .ds-abschnitt h2{
  font-size:clamp(2rem,3.4vw,3rem) !important;
  max-width:26ch;
}
/* Ergebnis-Kacheln-Abschnitt: etwas kleiner (v10: .ergebnis h2) */
body.ds-seite .ds-abschnitt:has(.ds-kacheln) h2{
  font-size:clamp(1.9rem,3.3vw,2.8rem) !important;max-width:26ch;
}
/* Kompass-Text: groesser (v10: .kompass-text h2), 30ch zentriert.
   Nicht fuer die dunkle Stakes-Sektion. */
body.ds-seite .ds-abschnitt.ds-mitte:not(:has(.ds-kacheln)):not(.ds-flaeche-tief) h2{
  font-size:clamp(2.1rem,3.8vw,3.2rem) !important;max-width:30ch;
}
/* Stakes (dunkelste Flaeche): Absatz in Serif (v10 .stakes) */
body.ds-seite .ds-flaeche-tief.ds-mitte p{
  font-family:var(--ds-serif) !important;
  font-size:clamp(1.2rem,2vw,1.5rem) !important;
  line-height:1.45 !important;max-width:46ch;margin-inline:auto;
}
/* Lead-Magnet: deutlich kleiner (v10: .impulse-panel h2) */
body.ds-seite #impulse h2{
  font-size:clamp(1.7rem,2.8vw,2.3rem) !important;max-width:22ch;
}
/* Blog-Abschnitt: v10 .blog h2 */
body.ds-seite .ds-abschnitt:has(.ds-blog) h2{
  font-size:clamp(1.8rem,3vw,2.5rem) !important;
}
body.ds-seite .ds-mitte h2,
body.ds-seite .ds-abschnitt .ds-mitte h2,
body.ds-seite .ds-abschnitt h2.has-text-align-center{
  margin-inline:auto;
}
/* Zentrierte Abschnitte: Absaetze wie v10 auf Lesebreite begrenzen */
body.ds-seite .ds-abschnitt.ds-mitte > .ds-innen > p,
body.ds-seite .ds-mitte .ds-blitz + .wp-block-buttons + p{
  max-width:56ch;margin-inline:auto;
}
/* Schwelle der Startseite: v10 .schwelle .satz */
body.ds-seite .ds-schwelle p{
  font-size:clamp(1.9rem,4.2vw,3.2rem) !important;line-height:1.3 !important;
  max-width:24ch;margin-inline:auto;
}
body.ds-seite .ds-schwelle--flach p{
  font-size:clamp(1.6rem,3.4vw,2.6rem) !important;line-height:1.35 !important;
}
body.ds-seite .ds-abschluss h2{
  font-size:clamp(2rem,3.8vw,3.1rem) !important;max-width:34ch;
}
body.ds-seite .ds-abschnitt h3{font-size:1.3rem !important}
body.ds-seite .ds-tuer h3{font-size:1.5rem !important}
body.ds-seite :is(.ds-schritte,.ds-kachel) h3{font-size:1.4rem !important}
body.ds-seite .ds-blitz p{
  font-size:clamp(1.7rem,3.2vw,2.5rem) !important;line-height:1.3 !important;
}
body.ds-seite .ds-hero__gold{
  font-size:clamp(1.14rem,1.9vw,1.4rem) !important;line-height:1.4 !important;
}
/* Abschnittsabstand wie v10 (124px statt Astra-Standard) */
body.ds-seite .ds-abschnitt{padding-top:124px;padding-bottom:124px}
@media (max-width:960px){
  body.ds-seite .ds-abschnitt{padding-top:76px;padding-bottom:76px}
}
/* Serif-Momente im Fliesstext bleiben Serif */
body.ds-seite .ds-hero__gold,
body.ds-seite .ds-schmerz li,
body.ds-seite .ds-blitz p,
body.ds-seite .ds-stimme blockquote,
body.ds-seite .ds-frage,
body.ds-seite .ds-kursiv,
body.ds-seite .ds-innen-blitz,
body.ds-seite .ds-schwelle p,
body.ds-seite .ds-schritte__nr,
body.ds-seite .ds-pdf__inhalt h3,
body.ds-seite .ds-pdf__kopf b,
body.ds-seite .ds-pdf__nr,
body.ds-seite .ds-preis__gross,
body.ds-seite .ds-blog li > a{
  font-family:var(--ds-serif) !important;
}
/* Kursive Akzentteile der Ueberschriften: Farbe verbindlich */
body.ds-seite :is(.ds-abschnitt,.ds-vollbild,.ds-oben) :is(h1,h2) em{
  font-style:italic !important;
}
body.ds-seite :is(.ds-flaeche-weiss,.ds-flaeche-creme,.ds-flaeche-sand) :is(h1,h2) em{color:var(--ds-gold) !important}
body.ds-seite :is(.ds-hero,.ds-flaeche-gruen,.ds-flaeche-tief,.ds-schwelle,.ds-abschluss) :is(h1,h2) em,
body.ds-seite .ds-schwelle p em{color:var(--ds-blitz) !important}
/* Textfarben auf dunklen Flaechen */
body.ds-seite :is(.ds-hero,.ds-schwelle,.ds-abschluss,.ds-flaeche-gruen,.ds-flaeche-tief) :is(h1,h2,h3){
  color:var(--ds-cream-text) !important;
}
body.ds-seite :is(.ds-hero,.ds-schwelle,.ds-abschluss,.ds-flaeche-gruen,.ds-flaeche-tief) :is(p,li){
  color:rgba(243,237,225,.86) !important;
}
body.ds-seite .ds-hero__gold{color:var(--ds-blitz) !important}
body.ds-seite .ds-hero__sub{color:rgba(243,237,225,.9) !important}
body.ds-seite .ds-schwelle p{color:var(--ds-cream-text) !important}
body.ds-seite .ds-blitz p{color:var(--ds-cream-text) !important}
body.ds-seite .ds-vertrauen__punkt{color:rgba(243,237,225,.74) !important}
body.ds-seite .ds-vertrauen__punkt strong{color:var(--ds-cream-text) !important}
/* Astras Absatz-Marge (1em unter jedem p) reisst sonst Luecken ins
   Vertrauens-Raster, in denen der helle Haarlinien-Grund als Bloecke
   durchscheint. Die Haarlinien entstehen allein aus gap:1px. */
body.ds-seite p.ds-vertrauen__punkt{margin:0 !important}
/* Weisse Karten und Panels auf dunklen Flaechen bleiben dunkel beschriftet */
body.ds-seite :is(.ds-flaeche-gruen,.ds-flaeche-tief) :is(.ds-tuer:not(.ds-tuer--business),.ds-panel,.ds-pdf) :is(h3,p,li){
  color:var(--ds-ink-body) !important;
}
body.ds-seite :is(.ds-flaeche-gruen,.ds-flaeche-tief) :is(.ds-tuer:not(.ds-tuer--business),.ds-panel) h3{color:var(--ds-forest) !important}
body.ds-seite .ds-pdf__inhalt h3{color:var(--ds-forest) !important}
/* Textfarben auf hellen Flaechen */
body.ds-seite :is(.ds-flaeche-weiss,.ds-flaeche-creme,.ds-flaeche-sand) :is(h1,h2,h3){
  color:var(--ds-forest) !important;
}
body.ds-seite :is(.ds-flaeche-weiss,.ds-flaeche-creme,.ds-flaeche-sand) p{
  color:var(--ds-ink-body) !important;
}
body.ds-seite .ds-schmerz li{color:#33403b !important}
body.ds-seite .ds-schmerz b{color:var(--ds-forest) !important}
body.ds-seite .ds-kursiv{color:var(--ds-petrol) !important}
body.ds-seite .ds-frage{color:rgba(243,237,225,.85) !important}
body.ds-seite :is(.ds-flaeche-weiss,.ds-flaeche-creme,.ds-flaeche-sand) .ds-blitz p{color:var(--ds-forest) !important}
/* Knoepfe: Gold, dunkle Schrift, kein Astra-Blau */
body.ds-seite .wp-block-button.ds-knopf .wp-block-button__link,
body.ds-seite .ds-sticky a.ds-knopf{
  background:var(--ds-gold) !important;color:#16120b !important;
  border-radius:var(--ds-radius) !important;border:0 !important;
  font-family:var(--ds-sans) !important;font-weight:700 !important;
}
body.ds-seite .wp-block-button.ds-knopf-hell .wp-block-button__link{
  background:transparent !important;color:var(--ds-cream-text) !important;
  border:1px solid rgba(245,240,232,.75) !important;
}
body.ds-seite .wp-block-button.ds-knopf-dunkel .wp-block-button__link{
  background:transparent !important;color:var(--ds-forest) !important;
  border:1px solid var(--ds-forest) !important;
}

/* =========================================================================
   FEINABGLEICH GEGEN v10 (nach maschinellem Messvergleich, 3.8.2026)
   Steht bewusst NACH der Durchsetzungs-Schicht und gewinnt deren
   Element-Regeln, wo v10 Ausnahmen vorsieht.
   ========================================================================= */

/* Serif-Ausnahmen, die die generische Sans-Regel sonst verschluckt */
body.ds-seite p.ds-hero__gold{
  font-family:var(--ds-serif) !important;color:var(--ds-blitz) !important;
  font-size:clamp(1.14rem,1.9vw,1.4rem) !important;line-height:1.4 !important;
}
body.ds-seite p.ds-hero__sub{color:rgba(243,237,225,.9) !important}
body.ds-seite p.ds-kursiv{
  font-family:var(--ds-serif) !important;color:var(--ds-petrol) !important;
  font-size:1.26rem !important;font-style:italic;
}
body.ds-seite p.ds-frage{
  font-family:var(--ds-serif) !important;color:rgba(243,237,225,.85) !important;
  font-style:italic;
}
body.ds-seite .ds-flaeche-tief.ds-mitte p{color:rgba(243,237,225,.88) !important}
body.ds-seite .ds-stimme blockquote{
  font-family:var(--ds-serif) !important;font-style:italic;
  font-size:1.22rem !important;line-height:1.45 !important;color:#33403b !important;
}
body.ds-seite .ds-schritte h3{font-size:1.45rem !important}
body.ds-seite span.ds-schritte__nr{
  font-family:var(--ds-serif) !important;font-size:2.6rem !important;
  color:var(--ds-gold) !important;
}
body.ds-seite .ds-tuer h3{font-size:1.6rem !important}

/* Hero-Reihenfolge wie v10: Desktop h1 -> Subline -> goldene Zeile,
   mobil h1 -> goldene Zeile -> Subline. */
.ds-hero__inhalt{display:flex;flex-direction:column;max-width:600px}
.ds-hero__inhalt h1{order:1}
.ds-hero__inhalt .ds-hero__sub{order:2;margin:0 0 26px}
.ds-hero__inhalt .ds-hero__gold{order:3;margin:0 0 26px}
.ds-hero__inhalt .wp-block-buttons{order:4}
.ds-hero__inhalt .ds-notiz{order:5}

/* Startseiten-Tueren wie v10: BEIDE Karten Creme, schwebend auf Gruen */
body.ds-seite .ds-flaeche-gruen .ds-tuer{
  background:var(--ds-cream) !important;border:0 !important;
  border-radius:var(--ds-radius);
  box-shadow:0 34px 90px rgba(5,26,27,.4);
  padding:46px 44px 40px;
}
body.ds-seite .ds-flaeche-gruen .ds-tuer h3{color:var(--ds-forest) !important}
body.ds-seite .ds-flaeche-gruen .ds-tuer p{color:var(--ds-ink-body) !important}
body.ds-seite .ds-flaeche-gruen .ds-tuer li{
  border-top-color:var(--ds-line) !important;color:var(--ds-forest) !important;
}
body.ds-seite .ds-flaeche-gruen .ds-tuer .ds-tuer__wo{color:var(--ds-gold) !important}
body.ds-seite .ds-flaeche-gruen .ds-tuer .ds-tuer__weiter{
  color:var(--ds-forest) !important;border-bottom-color:var(--ds-gold) !important;
}

/* Lead-Magnet wie v10: Creme-Panel schwebt auf der gruenen Welt */
body.ds-seite .ds-impulse-panel{
  background:var(--ds-cream);border-radius:var(--ds-radius);
  box-shadow:0 34px 90px rgba(5,26,27,.4);
  padding:64px;
}
body.ds-seite .ds-impulse-panel :is(h2,h3){color:var(--ds-forest) !important}
body.ds-seite .ds-impulse-panel p{color:var(--ds-muted) !important}
body.ds-seite .ds-impulse-panel p strong{color:var(--ds-forest)}
@media (max-width:960px){
  body.ds-seite .ds-impulse-panel{padding:44px 32px}
}

/* Mobile Hero-Anordnung aus v10: Foto oben, Text darunter im Dunkel */
@media (max-width:960px){
  body.ds-seite .ds-hero{display:block}
  body.ds-seite .ds-hero .ds-hero__bild,
  body.ds-seite .entry-content .ds-hero > figure{
    inset:0 0 auto 0 !important;height:66vw;max-height:470px;
  }
  body.ds-seite .ds-hero .ds-hero__bild img,
  body.ds-seite .entry-content .ds-hero > figure img{
    object-position:72% 8% !important;
  }
  body.ds-seite .ds-hero .ds-hero__schleier{
    background:linear-gradient(180deg,
      rgba(9,40,41,0) 0%, rgba(9,40,41,0) 34%,
      rgba(9,40,41,.66) 48%, rgba(9,40,41,.96) 56%,
      var(--ds-forest-deep) 64%) !important;
  }
  body.ds-seite .ds-hero .ds-innen{padding:calc(66vw - 72px) 0 32px}
  body.ds-seite .ds-hero h1{font-size:2rem !important;max-width:none}
  body.ds-seite .ds-hero h1::before{margin-bottom:16px}
  body.ds-seite .ds-hero__inhalt .ds-hero__gold{order:2;font-size:1.08rem !important;margin:0 0 14px}
  body.ds-seite .ds-hero__inhalt .ds-hero__sub{order:3;font-size:.98rem !important;margin:0 0 22px}
  body.ds-seite .ds-hero .wp-block-buttons{flex-wrap:nowrap;gap:10px}
  body.ds-seite .ds-hero .wp-block-button{flex:1 1 0}
  body.ds-seite .ds-hero .wp-block-button__link{width:100%;justify-content:center;padding:0 8px !important;font-size:.8rem !important;min-height:48px}
  body.ds-seite .ds-hero .ds-notiz{font-size:.78rem !important;line-height:1.45 !important}
}

/* ---------- Astra-Anpassungen fuer DS-Seiten ----------
   Greift auf ZWEI Wegen, damit beides funktioniert:
   1. Seiten mit der Vorlage "DS Vollbreite" (Klasse .ds-vollbreite)
   2. Seiten, bei denen in den Astra-Einstellungen "Volle Breite /
      Gedehnt" gewaehlt wurde (Astra setzt .ast-page-builder-template)
   Wenn eine Seite mit DS-Bausteinen zu schmal wirkt, ist einer dieser
   beiden Schalter nicht gesetzt. */
.ds-vollbreite .site-content .ast-container,
.ast-page-builder-template .site-content .ast-container,
.ds-vollbreite .site-content > .ast-container,
body:has(.ds-oben) .site-content .ast-container{
  max-width:none;padding-left:0;padding-right:0;
}
.ds-vollbreite .entry-content > *,
.ast-page-builder-template .entry-content > *,
body:has(.ds-oben) .entry-content > *{margin-block:0}
.ds-vollbreite .entry-header,
.ds-vollbreite .entry-title,
body:has(.ds-oben) .entry-header,
body:has(.ds-oben) .entry-title{display:none}
/* Astras Standardabstand unter dem Inhalt wegnehmen, sonst entsteht
   unter dem Abschlussbild ein heller Streifen. */
.ds-vollbreite .site-content,
.ast-page-builder-template .site-content,
body:has(.ds-oben) .site-content{padding-bottom:0}

/* =========================================================================
   ASTRA-BLOCK-PADDING (Rahmen-Fix, 4.8.2026)
   Astra gibt jedem Block direkt unter .entry-content ein Standard-Padding
   (2.62em oben/unten, 1.74em seitlich). Dadurch hingen die DS-Abschnitte
   als Kaesten im hellen Seitenhintergrund ("Hellgruen-Rahmen") und die
   Innenbreiten stimmten nicht mit v10 ueberein. Die DS-Abschnitte setzen
   ihre Abstaende selbst - Astras Werte hier verbindlich auf null.
   ========================================================================= */
body.ds-seite .entry-content > :is(.wp-block-group,.wp-block-cover,.wp-block-columns){
  --wp--custom--ast-default-block-top-padding:0;
  --wp--custom--ast-default-block-right-padding:0;
  --wp--custom--ast-default-block-bottom-padding:0;
  --wp--custom--ast-default-block-left-padding:0;
  padding:0;
}
/* Eigene Abstaende der Abschnitte danach wieder verbindlich herstellen. */
body.ds-seite .entry-content > .ds-abschnitt{padding:124px 0 !important}
body.ds-seite .entry-content > .ds-abschluss{padding:140px 0 !important}
@media (max-width:960px){
  body.ds-seite .entry-content > .ds-abschnitt{padding:76px 0 !important}
  body.ds-seite .entry-content > .ds-abschluss{padding:96px 0 !important}
}

/* Blog-Teaser: WordPress liefert je nach Beitrag lange Auszuege - auf
   vier Zeilen begrenzen, damit die drei Karten gleich ruhig stehen. */
body.ds-seite .ds-blog .wp-block-latest-posts__post-excerpt{
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* =========================================================================
   WORDPRESS-BLOCKABSTAND UND BLOG-RASTER (Fixes 4.8.2026, Runde 2)
   ========================================================================= */
/* WordPress schiebt zwischen Geschwister-Bloecke 24px Abstand. Zwischen
   den Direktkindern der DS-Wrapper reisst das Luecken auf, in denen der
   helle Seitenhintergrund durchscheint (Zeile zwischen Hero und
   Vertrauensleiste), und schiebt absolute Ebenen nach unten (gruene
   Ueberlagerung der Schwelle begann 24px zu tief). */
body.ds-seite :is(.ds-oben,.ds-hero,.ds-vertrauen,.ds-schwelle,.ds-vollbild,.ds-abschluss) > *{
  margin-block:0 !important;
}
/* WordPress' eigenes Blog-Raster (width:33% je Eintrag) verengt die
   Karten INNERHALB der DS-Rasterspalten zu schmalen Streifen. Die
   Spaltenbreite regelt allein das DS-Raster. */
body.ds-seite .ds-blog li{
  width:auto !important;max-width:none !important;margin:0 !important;
}

/* CTA-Abstaende der Vorlage. Frueher als style="margin-top" im Markup -
   das meldet WordPress als "ungueltigen Inhalt", weil das Attribut nicht
   im Block-Kopf deklariert ist. Deshalb gehoeren diese Abstaende hierher. */
body.ds-seite .ds-innen > .ds-schritte + .wp-block-buttons{margin-top:52px !important}
body.ds-seite .ds-innen > .ds-blitz + .wp-block-buttons{margin-top:48px !important}

/* Seiten-Hero der Unterseiten als Vollbild-Gruppe (ersetzt den frueheren
   Cover-Block, gleiche Mechanik wie Schwelle und Abschluss). */
.ds-seiten-hero{
  min-height:58vh;display:flex;align-items:center;
  background:var(--ds-forest-deep);
}
.ds-seiten-hero .ds-vollbild__schleier{background:rgba(9,40,41,.75)}
.ds-seiten-hero .ds-vollbild__inhalt{width:100%}
body.ds-seite .entry-content > .ds-seiten-hero{padding:72px 0 !important}

/* =========================================================================
   ASTRA-RESTSTILE (Voll-Audit 4.8.2026)
   Astra bringt eigene Stile fuer Listen, Zitate, Links und h3 mit, die
   die DS-Bausteine ueberstimmen. Hier verbindlich abgeschaltet.
   ========================================================================= */
/* Listen der DS-Bausteine: keine Punkte, kein Einzug. */
body.ds-seite :is(ul.ds-schmerz,ul.ds-leistungen,ul.ds-ergebnisse,.ds-tuer ul,ul.ds-blog){
  list-style:none !important;margin:0 !important;padding-left:0 !important;
}
body.ds-seite ul.ds-schmerz{margin-top:52px !important}
body.ds-seite ul.ds-leistungen{margin-top:24px !important}
body.ds-seite .ds-tuer ul{margin:6px 0 28px !important}
body.ds-seite ul.ds-blog{margin:48px 0 32px !important}
body.ds-seite :is(.ds-schmerz,.ds-leistungen,.ds-ergebnisse,.ds-tuer ul) li{margin:0 !important}
body.ds-seite :is(.ds-schmerz,.ds-leistungen,.ds-ergebnisse,.ds-tuer ul,.ds-blog) li::marker{content:none}

/* Stimmen: Astras Zitatstreifen und Grauflaeche weg, v10-Stil gilt. */
body.ds-seite .ds-stimme blockquote{
  border:0 !important;background:transparent !important;
  padding:0 !important;margin:0 0 20px !important;color:#33403b !important;
}
body.ds-seite .ds-flaeche-gruen .ds-stimme blockquote,
body.ds-seite .ds-flaeche-tief .ds-stimme blockquote{color:var(--ds-cream-text) !important}
body.ds-seite .ds-stimme cite{font-style:normal !important;color:var(--ds-muted) !important}

/* Links in DS-Bereichen: nie unterstrichen, die Goldlinie kommt aus den
   eigenen Klassen (ds-mehr, ds-leise). */
body.ds-seite :is(.ds-oben,.ds-abschnitt,.ds-vollbild) a{text-decoration:none !important}

/* h3 in HTML-Bausteinen: Astras Ueberschriften-Margen raus. */
body.ds-seite .ds-schritte h3{margin:0 0 8px !important}
body.ds-seite .ds-kette h3{margin:0 0 6px !important}
body.ds-seite :is(.ds-tuer,.ds-karte,.ds-panel,.ds-stimme,.ds-pdf) h3{margin:0 0 10px !important}
body.ds-seite .ds-faq details{margin:0 !important}