/*
 Theme Name:   Ordnungsfex Child
 Theme URI:    https://ordnungsfex.at
 Description:  Schlankes Child-Theme für ordnungsfex.at. Dient als Container für das handgemachte Design (CSS plus SVG). Basiert auf Astra und trägt allein das Aussehen, die Inhalte liegen in Block-Patterns.
 Author:       Dr. Norma Burow
 Template:     astra
 Version:      1.0.42
 Text Domain:  ordnungsfex-child
*/

/* ============================================================
   ORDNUNGSFEX, DESIGN-FUNDAMENT
   Grundlage für Farben, Typografie, Layout und alle Sektionen
   der Startseite. Die Unterseiten folgen weiter unten.
   Die Schriften (Spectral, Inter) und das Blatt-SVG kommen aus
   functions.php, nicht aus dieser Datei.
   ============================================================ */

/* ============================================================
   SCHRIFTEN, LOKAL GEHOSTET (DSGVO)
   Die woff2-Dateien liegen im Child unter /fonts/, die Pfade
   sind relativ zu dieser Datei. Es wird nichts von außen geladen.
   Bleiben Kästchen statt Buchstaben stehen, fehlt eine Datei
   oder ein Dateiname weicht ab.
   ============================================================ */
@font-face{font-family:'Spectral';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/spectral-300.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/spectral-400.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/spectral-500.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/spectral-600.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/spectral-400-italic.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/spectral-500-italic.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2')}

/* ---------- Design-Tokens (:root) ---------- */
:root{
  /* Palette, deutsche Namen */
  --creme:#FBF7EE;       /* Grund */
  --waldgruen:#3E6B2E;   /* Headlines, dunkle Flächen, Buttons */
  --blattgruen:#6E9F3E;  /* Akzent */
  --moos:#5E7D3A;        /* Sekundärakzent */
  --sand:#E7DDCB;        /* sanfte Sektionswechsel */
  --tiefgruen:#1E2B22;   /* Text */
  --blau:#1A5DC8;        /* Blau, Fokus */
  --blau-link:#0A4FA8;   /* Links, dunkler für Kontrast */

  --waldgruen-dunkel:#2C4D20;
  --text-weich:#46584b;          /* gedämpfter Fließtext, AA auf Creme */
  --text-weich-creme:rgba(251,247,238,.84);
  --linie:#E2D8C5;
  --weiss:#fffdf8;

  --display:'Spectral', Georgia, serif;
  --body:'Inter', system-ui, -apple-system, sans-serif;

  --raster:1180px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --spalt:clamp(1.25rem,2.4vw,2rem);

  /* weiche, abgerundete Formen */
  --r-s:14px;
  --r-m:22px;
  --r-l:30px;
  --r-xl:40px;
  --r-pille:999px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --schatten-karte:0 22px 44px -34px rgba(30,43,34,.42);
  --schatten-soft:0 14px 30px -22px rgba(30,43,34,.34);
}

/* ---------- Reset und Normalisierung ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* ---------- Basis, Grundtypografie und Elemente ---------- */
body{
  font-family:var(--body);
  background:var(--creme);
  color:var(--tiefgruen);
  line-height:1.68;
  font-size:clamp(1rem,.96rem + .25vw,1.1rem);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"liga" 1,"calt" 1;
  overflow-x:clip; /* clip statt hidden, damit die klebende Kopfzeile (position:sticky) nicht ausgehebelt wird */
}

h1,h2,h3,h4{font-family:var(--display);font-weight:500 !important;letter-spacing:.002em;color:var(--waldgruen);line-height:1.14}
h1{font-size:clamp(2.45rem,1.9rem + 3vw,4.1rem);line-height:1.08 !important;letter-spacing:-.01em}
h2{font-size:clamp(1.85rem,1.4rem + 2vw,2.8rem);line-height:1.14 !important}
h3{font-size:clamp(1.18rem,1.05rem + .55vw,1.4rem)}
p{max-width:62ch}
a{color:var(--blau-link)}
img{display:block;max-width:100%;height:auto}

/* ---------- Fokus, WCAG ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--blau);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- Layout, Raster- und Container-Helfer ---------- */
.wrap{max-width:var(--raster);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(4.25rem,3rem + 5.5vw,7.5rem) !important;position:relative}
/* Sektions-Hintergründe für einen ruhigen, klar erkennbaren Wechsel (kein Nachbarpaar gleich) */
.bg-sand{background:var(--sand)}
.bg-creme{background:var(--creme)}

/* ---------- Wiederkehrende Textbausteine ---------- */
.eyebrow{
  font-family:var(--body);
  font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--moos);
  display:flex;align-items:center;gap:.85rem;
  margin-bottom:1.3rem;
}
.eyebrow::before{content:"";width:1.85rem;height:2px;border-radius:var(--r-pille);background:var(--blattgruen);display:inline-block;flex-shrink:0}
.lead{font-size:clamp(1.1rem,1rem + .5vw,1.28rem);color:var(--text-weich);max-width:56ch}

/* ---------- Buttons, weich und pillenförmig ---------- */
.btn{
  font-family:var(--body);font-weight:600;font-size:1rem;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.95rem 1.85rem;border-radius:var(--r-pille);
  text-decoration:none !important;cursor:pointer;border:1.5px solid transparent;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.btn-primary{background:var(--waldgruen);color:var(--creme);box-shadow:0 12px 26px -14px rgba(30,43,34,.55)}
.btn-primary:hover{background:var(--waldgruen-dunkel);transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(30,43,34,.6)}
.btn-ghost{background:transparent;color:var(--waldgruen);border-color:rgba(62,107,46,.4)}
.btn-ghost:hover{background:rgba(62,107,46,.08);border-color:var(--waldgruen);transform:translateY(-2px)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
/* Buttons, die Links sind: Astra setzt Linkfarben (auch fuer :visited, :focus und
   :active) als dynamisches CSS und uebersteuert damit .btn-primary. Ohne Gegenwehr
   steht gruene Schrift auf gruenem Grund, sobald der Knopf angeklickt ist. Deshalb
   alle Link-Zustaende ausdruecklich festhalten, wie beim Menue-Knopf nav-cta. */
a.btn-primary,a.btn-primary:link,a.btn-primary:visited,
a.btn-primary:hover,a.btn-primary:focus,a.btn-primary:active{color:var(--creme) !important}
a.btn-ghost,a.btn-ghost:link,a.btn-ghost:visited,
a.btn-ghost:hover,a.btn-ghost:focus,a.btn-ghost:active{color:var(--waldgruen) !important}

.textlink{font-weight:600;text-decoration:none;color:var(--blau-link);display:inline-flex;align-items:center;gap:.45rem;text-underline-offset:3px}
.textlink:hover{text-decoration:underline}
.textlink .arr{transition:transform .25s var(--ease)}
.textlink:hover .arr{transform:translateX(3px)}

/* ---------- Kopfzeile und Navigation (auf Astras Header-Builder-Markup) ----------
   Astra rendert den Kopf mit eigenen Klassen: .ast-primary-header-bar (Leiste),
   .site-title (Brand), .main-header-menu / .menu-item / a.menu-link (Navigation).
   Farben mit !important, weil Astra Grund- und Linkfarben als dynamisches CSS setzt. */
#masthead.site-header{position:sticky;top:0;z-index:99}
/* Eingeloggt schiebt die WordPress-Adminleiste die Seite nach unten. Ohne diese
   Regel wandert der klebende Kopf beim ersten Scrollen um deren Höhe (32px, mobil
   46px) mit. Nur für Eingeloggte (Body-Klasse admin-bar), Besucher sehen es nicht. */
body.admin-bar #masthead.site-header{top:32px}
@media (max-width:782px){body.admin-bar #masthead.site-header{top:46px}}
.site-header .ast-primary-header-bar{
  background:rgba(251,247,238,.88) !important;
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--linie);
}
.site-header .site-primary-header-wrap{min-height:4.7rem}

/* Brand „Ordnungsfex" mit grünem, organisch gerundetem Punkt davor */
.site-title{margin:0;line-height:1}
.site-title a{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--display);font-size:1.4rem;font-weight:600;letter-spacing:-.01em;
  color:var(--waldgruen) !important;text-decoration:none;
}
.site-title a::before{
  content:"";flex:0 0 auto;width:13px;height:13px;
  background:var(--blattgruen);border-radius:60% 40% 55% 45%;transform:rotate(12deg);
}

/* Navigation: Schrift, Farben, Abstände */
.main-header-menu.ast-nav-menu{align-items:center}
.main-header-menu .menu-item > a.menu-link{
  font-family:var(--body) !important;font-size:.94rem !important;font-weight:500 !important;
  color:var(--tiefgruen) !important;text-decoration:none;
}
.main-header-menu .menu-item > a.menu-link:hover{color:var(--waldgruen) !important}
.main-header-menu > .menu-item{margin-inline:.95rem}

/* Kontakt als grüne Pille, die Klasse nav-cta sitzt am <li>. Astra streckt Menü-Links
   auf volle Kopfhöhe und setzt großes vertikales Padding, das mit border-radius:999px
   sonst einen Kreis ergibt. Daher Padding per !important flach halten und den Link im
   Menüpunkt vertikal zentrieren statt strecken. */
.main-header-menu .menu-item.nav-cta{display:flex;align-items:center}
.main-header-menu .menu-item.nav-cta > a.menu-link{
  color:var(--creme) !important;background:var(--waldgruen);
  padding:.5rem 1.3rem !important;border-radius:var(--r-pille);line-height:1.45;
}
.main-header-menu .menu-item.nav-cta > a.menu-link:hover{
  background:var(--waldgruen-dunkel);color:var(--creme) !important;
}

/* WordPress markiert Onepage-Anker als current-menu-item. Im Kopf bewusst ohne
   aktiv-Deko, sonst gälten mehrere Ankerlinks gleichzeitig als aktiv. */
.main-header-menu .menu-item.current-menu-item > a.menu-link{color:var(--tiefgruen) !important}
.main-header-menu .menu-item.nav-cta.current-menu-item > a.menu-link{color:var(--creme) !important}

/* Kopf-Umbruchpunkt auf 980, in zwei Teilen: Der Filter astra_header_break_point
   (functions.php) stellt Astras Aufklapp-Skript auf 980, sonst klappte das Menü
   zwischen 922 und 980 nicht auf. Und diese Regel blendet bis 980 den Desktop-Kopf
   aus, weil Astra das von sich aus erst bei 921 tut, sonst lägen beide Köpfe
   übereinander (gestapeltes Desktop-Menü plus mobiler Burger). */
@media (max-width:980px){
  #ast-desktop-header{display:none !important}
}

/* Mobiles Ausklapp-Menü: Astras bläuliche Hervorhebung der aktiven Punkte (aus
   der blauen Linkfarbe) entfernen, alle Einträge einheitlich. Kontakt behält die
   grüne Pille. */
#ast-mobile-header .menu-item,
#ast-mobile-header .menu-item > .menu-link{background:transparent !important}
#ast-mobile-header .menu-item.nav-cta > .menu-link{background:var(--waldgruen) !important}
/* Astras Registrieren-Button steckt auch im mobilen Ausklapp-Menü und erscheint
   als andersfarbiger Block unter Kontakt. Ausblenden (nativ war er dort nicht
   greifbar). */
#ast-mobile-header .ast-header-button-1{display:none !important}
/* Mehr Luft unter dem letzten Eintrag (Kontakt) im ausgeklappten Menü. */
.ast-mobile-header-content{padding-bottom:2.5rem !important}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(3rem,2rem + 5vw,5.5rem)}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.hero .claim{
  font-family:var(--display);font-style:italic;font-size:1.2rem;color:var(--moos);
  display:inline-block;border-left:2px solid var(--blattgruen);padding-left:.9rem;margin-bottom:1.4rem;
}
.hero h1{margin-bottom:1.4rem}
.hero h1 em{font-style:italic;color:var(--blattgruen)}
.hero .lead{margin-bottom:0}
.hero-cta{margin-top:2.3rem;display:flex;gap:1rem;flex-wrap:wrap}
.hero-figure{position:relative}
.hero-figure img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 20%;
  border-radius:var(--r-xl);
  box-shadow:0 34px 64px -38px rgba(30,43,34,.55);
}
/* weiche organische Blattform hinter dem Porträt, reines CSS */
.hero-figure::before{
  content:"";position:absolute;z-index:-1;
  width:108%;height:108%;left:-9%;top:-6%;
  background:radial-gradient(60% 60% at 35% 30%, rgba(110,159,62,.22), transparent 70%),
             var(--sand);
  border-radius:58% 42% 48% 52% / 46% 50% 50% 54%;
}
.hero-cap{
  position:absolute;left:1.1rem;bottom:1.1rem;
  display:flex;align-items:center;gap:.7rem;
  background:rgba(251,247,238,.92);backdrop-filter:blur(6px);
  color:var(--tiefgruen);
  font-size:.84rem;
  padding:.5rem .95rem .5rem .5rem;border-radius:var(--r-pille);
  box-shadow:var(--schatten-soft);
}
.hero-cap .pin{width:34px;height:34px;border-radius:50%;background:var(--waldgruen);color:var(--creme);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--display);font-size:1rem}

/* ---------- Feine Trennlinie als Ordnungs-Motiv, weich auslaufend ---------- */
.ruler{height:1px;background:linear-gradient(90deg,transparent,var(--linie) 18%,var(--linie) 82%,transparent);max-width:var(--raster);margin-inline:auto}

/* ---------- Vollbreite Abschnittsköpfe, Desktop links, mobil zentriert ---------- */
.head-wide{max-width:none;text-align:left}
.head-wide h2,.head-wide .lead{max-width:none}
@media (max-width:760px){
  .head-wide{text-align:center}
  .head-wide .lead{margin-inline:auto}
  .head-wide .eyebrow{justify-content:center}
}

/* ---------- Sektion: Kennst du das (Pain-Karten) ---------- */
.pain-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spalt);margin-top:3rem;
}
.pain{
  background:var(--weiss);border:1px solid var(--linie);
  padding:1.9rem 1.6rem;border-radius:var(--r-l);
  display:flex;flex-direction:column;gap:.7rem;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.pain::before{content:"";position:absolute;top:-34px;right:-34px;width:110px;height:110px;background:radial-gradient(circle at 32% 32%, rgba(110,159,62,.16), transparent 70%);border-radius:50%}
.pain:hover{transform:translateY(-4px);box-shadow:var(--schatten-karte);border-color:rgba(110,159,62,.5)}
.pain .num{font-family:var(--display);font-style:italic;font-size:1.15rem;color:var(--blattgruen);margin-bottom:-.35rem}
.pain h3{font-size:1.12rem !important;line-height:1.32;color:var(--tiefgruen)}
.pain p{font-size:.96rem;color:var(--text-weich);max-width:none}

/* ---------- Sektion: Was anders ist ---------- */
.anders{background:var(--creme)}
.anders .anders-head{margin-bottom:clamp(1.8rem,1rem + 2.4vw,2.8rem)}
.anders .anders-wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.anders-list{display:grid;gap:0;border-top:1px solid var(--linie)}
/* rechte Spalte am Desktop etwas tiefer setzen, damit sie mit dem Intro-Text stimmig auf gleicher Höhe startet */
@media (min-width:981px){
  .anders-list{margin-top:.5rem}
}
.anders-item{padding:1.55rem 0;border-bottom:1px solid var(--linie);display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:start}
.anders-item .chip{
  width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:var(--r-pille);
  background:var(--sand);border:1.5px solid var(--blattgruen);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-style:italic;color:var(--waldgruen);font-size:1.1rem;
}
.anders-item h3{font-size:1.18rem !important;margin-bottom:.25rem;color:var(--tiefgruen)}
.anders-item p{font-size:.98rem;color:var(--text-weich);max-width:46ch}
/* Überschrift und Text der Karte eng koppeln, das rechte Textfeld ist ein eigener Flow-Block */
.anders-item > div{display:flex;flex-direction:column;gap:.25rem}
/* Grün betonte Sätze im Anders-Intro. */
.anders-intro strong{color:var(--waldgruen);font-weight:600}

/* ---------- Sektion: Wer dich begleitet ---------- */
.begleit-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.begleit-figure{position:relative}
.begleit-figure img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 18%;border-radius:var(--r-xl);box-shadow:0 28px 52px -36px rgba(30,43,34,.5)}
.begleit-figure .badge{
  position:absolute;bottom:-18px;right:-12px;
  background:var(--creme);border:1.5px solid var(--blattgruen);
  border-radius:var(--r-pille);
  padding:.7rem 1.15rem;display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.05;
  box-shadow:var(--schatten-soft);
}
.begleit-figure .badge b{font-family:var(--display);font-size:1.5rem;color:var(--waldgruen)}
.begleit-figure .badge small{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--moos);margin-top:1px}
.begleit-text h2{margin-bottom:.2rem}
.begleit-text p{margin-top:1rem;color:var(--text-weich)}
.begleit-text .sig{font-family:var(--display);font-style:italic;color:var(--moos);font-size:1.18rem;margin:1.4rem 0 1.6rem;max-width:none}

/* ---------- Sektion: So arbeiten wir (Schritte, dunkle Fläche) ---------- */
.schritte{background:var(--waldgruen);color:var(--creme)}
.schritte h2,.schritte h3{color:var(--creme)}
.schritte .eyebrow{color:#cfe7ad}
.schritte .eyebrow::before{background:#cfe7ad}
.schritte .leitsatz{font-family:var(--display);font-style:italic;font-size:1.3rem;color:#dff0c8;margin-top:1.1rem}
.schritte-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spalt);margin-top:3rem}
.schritt{
  background:rgba(251,247,238,.07);border:1px solid rgba(251,247,238,.2);
  border-radius:var(--r-l);padding:1.9rem 1.6rem;
  display:flex;flex-direction:column;gap:.65rem;
  transition:transform .35s var(--ease),background .35s var(--ease)}
.schritt:hover{transform:translateY(-4px);background:rgba(251,247,238,.11)}
.schritt .step-num{width:2.6rem;height:2.6rem;border-radius:var(--r-pille);background:var(--blattgruen);color:var(--waldgruen-dunkel);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.25rem;font-weight:600;margin-bottom:.3rem}
.schritt h3{font-size:1.14rem !important}
.schritt p{font-size:.95rem;color:var(--text-weich-creme);max-width:none}

/* ---------- Sektion: Angebote (Karten) ---------- */
.row-label{font-family:var(--display);font-style:italic;color:var(--moos);font-size:1.12rem;margin:2.6rem 0 1.1rem;display:flex;align-items:center;gap:.8rem}
.row-label::after{content:"";flex:1;height:1px;background:var(--linie)}
.ang-row{display:grid;gap:var(--spalt)}
.ang-row.two{grid-template-columns:repeat(2,1fr)}
.ang-row.three{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);padding:2.1rem 1.9rem;
  display:flex;flex-direction:column;gap:.55rem;position:relative;overflow:hidden;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.card:hover{border-color:var(--blattgruen);box-shadow:var(--schatten-karte);transform:translateY(-4px)}
.card .kicker{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--moos);margin-bottom:.3rem}
.card h3{margin-bottom:.15rem}
/* Nur der Fließtext darf wachsen, damit der Preis unten sitzt. Der Kicker ist im
   Muster ebenfalls ein <p>. Dehnt er sich mit, schiebt er die Überschrift je Karte
   unterschiedlich weit nach unten und die Karten stehen schief. */
.card p{font-size:.96rem;color:var(--text-weich);max-width:none}
.card p:not(.kicker){flex-grow:1}
.card .ade{font-family:var(--display);font-style:italic;color:var(--moos)}
.card .preis{font-family:var(--display);font-size:1.5rem;color:var(--waldgruen);margin-top:.7rem}
.card .preis small{display:block;font-family:var(--body);font-size:.8rem;color:var(--text-weich);font-weight:400;letter-spacing:.01em;margin-top:.15rem;line-height:1.45}
.card.feature{background:linear-gradient(125deg,#f3efe1,var(--creme) 60%);border-color:var(--blattgruen)}
.card.feature::after{content:"";position:absolute;top:-40px;right:-40px;width:130px;height:130px;background:radial-gradient(circle at 35% 35%, rgba(110,159,62,.18), transparent 70%);border-radius:50%}

/* Karten einer Reihe zeilenweise ausrichten: Kicker, Überschrift, Text und Preis
   sollen über alle Karten auf gleicher Höhe sitzen, auch wenn eine Überschrift oder
   ein Kicker umbricht. Dafür teilen sich die Karten die Zeilen der äußeren Reihe
   (subgrid). Der Karten-Gap bleibt bewusst unangetastet, sonst rutscht die ganze
   Innentypografie enger zusammen.
   Nur solange die Karten nebeneinander stehen, gestapelt bringt es nichts.
   Ohne subgrid greift weiter das Flex-Layout von .card, dann sitzt wenigstens der
   Preis unten. */
@supports (grid-template-rows:subgrid){
  @media (min-width:981px){
    .ang-row.three{grid-template-rows:auto auto 1fr auto;row-gap:.55rem;column-gap:var(--spalt)}
    .ang-row.three > .card{display:grid;grid-template-rows:subgrid;grid-row:span 4}
  }
  @media (min-width:601px){
    .ang-row.two{grid-template-rows:auto auto 1fr auto;row-gap:.55rem;column-gap:var(--spalt)}
    .ang-row.two > .card{display:grid;grid-template-rows:subgrid;grid-row:span 4}
  }
}

/* ---------- Sektion: Newsletter, helle Sand-Fläche mit grünen Akzenten ---------- */
.news{background:var(--sand);color:var(--tiefgruen)}
.news h2{color:var(--waldgruen)}
.news h2 em{font-style:italic;color:var(--moos)}
.news .eyebrow{color:var(--moos)}
.news .eyebrow::before{background:var(--blattgruen)}
.news-card{
  background:var(--creme);border:1px solid var(--linie);
  border-radius:var(--r-xl);padding:clamp(2rem,4vw,3.2rem);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  box-shadow:var(--schatten-soft);
}
.news p{color:var(--text-weich);max-width:46ch}
/* Ein einziges Newsletter-Formular fuer alle Stellen (.nl-form). Das Aussehen
   je Stelle steuert die umgebende Sektion, siehe weiter unten bei .abschluss.
   So bleibt in MC4WP nur ein Formular zu pflegen. */
.nl-form{display:flex;gap:.7rem;flex-wrap:wrap}
.nl-form input{
  flex:1;min-width:220px;padding:.95rem 1.3rem;border:1.5px solid var(--linie);
  background:var(--weiss);color:var(--tiefgruen);border-radius:var(--r-pille);font-family:inherit;font-size:1rem;
}
.nl-form input::placeholder{color:#9aa593}
.nl-form .btn{background:var(--waldgruen);color:var(--creme)}
.nl-form .btn:hover{background:var(--waldgruen-dunkel);color:var(--creme);transform:translateY(-2px)}
/* Abstand nach oben sitzt am aeusseren Element, damit er auch dann stimmt, wenn
   MC4WP sein eigenes <form> darum legt. */
.news .nl-form,.news .mc4wp-form{margin-top:1.7rem}
.news small{display:block;margin-top:1rem;color:var(--text-weich);font-size:.82rem}
.news-aside{text-align:center}
/* weiche CSS-Briefform statt Foto */
.news-mark{
  width:clamp(120px,40%,170px);aspect-ratio:1/1;margin:0 auto;
  border-radius:54% 46% 50% 50% / 48% 52% 48% 52%;
  background:radial-gradient(circle at 38% 32%, rgba(251,247,238,.28), transparent 62%), var(--waldgruen);
  border:1.5px solid rgba(251,247,238,.32);
  display:flex;align-items:center;justify-content:center;
}
.news-mark svg{width:46%;height:46%;color:#dff0c8}
/* Bild in der news-aside. Rahmen und Rundung liegen fest, damit die Sektion
   gleich wirkt, egal welches Motiv drinsteht. */
.news-figure{margin:0}
.news-figure img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-xl);
  border:1px solid var(--linie);
  box-shadow:var(--schatten-soft);
}

/* ---------- Sektion: FAQ ---------- */
.faq-list{display:grid;gap:var(--spalt);margin-top:3rem}
/* FAQ als native Aufklapp-Elemente (details/summary), ohne JavaScript. Selektoren
   greifen auf jedes Details im faq-list, damit neu eingefügte Fragen
   automatisch das Design bekommen. */
.faq-list .wp-block-details{
  background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--r-l);padding:1.35rem 1.8rem;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.faq-list .wp-block-details:hover{border-color:rgba(110,159,62,.5)}
.faq-list .wp-block-details[open]{border-color:rgba(110,159,62,.5);box-shadow:var(--schatten-soft)}
.faq-list summary{
  cursor:pointer;list-style:none;position:relative;padding-right:2.2rem;
  font-family:var(--display);font-size:1.14rem;font-weight:500;color:var(--tiefgruen);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"";position:absolute;right:.15rem;top:.32em;width:.62rem;height:.62rem;
  border-right:2px solid var(--blattgruen);border-bottom:2px solid var(--blattgruen);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq-list .wp-block-details[open] summary::after{transform:rotate(-135deg)}
.faq-list .wp-block-details p{font-size:.98rem;color:var(--text-weich);max-width:60ch;margin:.85rem 0 0}

/* ---------- Sektion: Kontakt ---------- */
.kontakt-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.kontakt-info p{color:var(--text-weich)}
.kontakt-info .info-line{display:flex;align-items:center;gap:.85rem;padding:1.05rem 0;border-bottom:1px solid var(--linie)}
.kontakt-info .info-line:first-of-type{border-top:1px solid var(--linie);margin-top:1.7rem}
.kontakt-info .ic{width:2.5rem;height:2.5rem;border-radius:var(--r-pille);background:var(--sand);color:var(--waldgruen);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kontakt-info .info-line a,.kontakt-info .info-line span{font-size:1.02rem;color:var(--tiefgruen);text-decoration:none}
.kontakt-info .info-line a:hover{color:var(--blau-link);text-decoration:underline}
form.kontakt{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-xl);padding:clamp(1.75rem,3vw,2.6rem);display:grid;gap:1.1rem;box-shadow:var(--schatten-soft)}
form.kontakt label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.45rem;color:var(--moos)}
form.kontakt input,form.kontakt select,form.kontakt textarea{
  width:100%;padding:.85rem 1.1rem;border:1.5px solid var(--linie);background:var(--creme);border-radius:var(--r-s);
  font-family:inherit;font-size:1rem;color:var(--tiefgruen);
}
form.kontakt input::placeholder,form.kontakt textarea::placeholder{color:#9aa593}
form.kontakt textarea{resize:vertical;min-height:130px}
form.kontakt .btn-primary{justify-content:center;margin-top:.2rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}

/* ---------- Footer ---------- */
/* Footer auf Astras Wrapper (.site-footer) gemünzt. Der Inhalt kommt per Hook
   aus functions.php (.foot-grid etc.), der dunkelgrüne Grund liegt auf Astras
   Footer, darum hier mit !important gegen Astras eigenen Footer-Hintergrund. */
.site-footer{background:var(--tiefgruen) !important;color:rgba(251,247,238,.78)}
.site-footer a{color:rgba(251,247,238,.86);text-decoration:none}
.site-footer a:hover{color:var(--creme);text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:2.5rem;padding-block:clamp(3rem,2rem + 3vw,4.5rem)}
.foot-brand{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-size:1.5rem;color:var(--creme);margin-bottom:.5rem}
.foot-brand .dot{width:12px;height:12px;background:var(--blattgruen);border-radius:60% 40% 55% 45%}
.foot-claim{font-family:var(--display);font-style:italic;color:#cfe7ad;margin-bottom:.9rem}
.foot-grid p,.foot-grid li{color:rgba(251,247,238,.78);font-size:.93rem;max-width:42ch}
.foot-grid h4{font-family:var(--body);font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,247,238,.62);margin-bottom:1rem}
.foot-grid ul{list-style:none;display:grid;gap:.6rem}
/* Footer-Menü-Links bündig unter die Überschrift. Astra hängt den Links die
   Klasse menu-link mit seitlichem Padding an und der Liste einen Einzug, beides
   hier raus, damit die Links links an der Spaltenkante starten. */
.foot-grid .foot-menu{margin:0;padding:0}
.foot-grid .foot-menu li{margin:0;padding:0}
.foot-grid .foot-menu a{padding:0 !important}
.foot-bottom{border-top:1px solid rgba(251,247,238,.18);padding-block:1.4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.85rem;color:rgba(251,247,238,.6)}

/* Copyright-Zeile: Astras Below-Footer auf die Optik von .foot-bottom gebracht.
   Astra bringt eigenen Hintergrund, eigene Text- und Linkfarbe plus Schriftgröße
   mit, darum die eigenen Werte hier mit !important durchgesetzt. */
.site-below-footer-wrap{
  background:var(--tiefgruen) !important;
  border-top:0 !important;   /* Astras helle, volle-Breite-Trennlinie entfernen */
  padding-block:0 !important;
}
/* Feine Trennlinie plus Innenabstand auf den 1180er-Inhaltswrap, damit die Linie
   bündig mit den vier Spalten läuft, genau wie bei .foot-bottom, und nicht
   über die ganze Breite. */
.site-below-footer-inner-wrap{
  max-width:var(--raster) !important;margin-inline:auto !important;
  padding:1.4rem var(--gutter) !important;
  border-top:1px solid rgba(251,247,238,.18);
}
.ast-footer-copyright p{color:rgba(251,247,238,.6) !important;font-size:.85rem !important;margin:0}
.site-below-footer-wrap a{color:rgba(251,247,238,.86) !important;text-decoration:none}
.site-below-footer-wrap a:hover{color:var(--creme) !important;text-decoration:underline}

/* ---------- Sanftes Einblenden beim Scrollen (Reveal) ----------
   Alle Regeln hängen bewusst an .js-reveal am html-Element. Diese Klasse setzt
   allein assets/reveal.js, und zwar erst, wenn es die Elemente auch beobachtet.
   Ohne JavaScript (aus, Fehler, blockiert) greift hier nichts und der Inhalt
   bleibt sichtbar. Ohne diese Kopplung wäre eine versehentlich gesetzte
   reveal-Klasse dauerhaft unsichtbar. */
.js-reveal .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-reveal .reveal.in{opacity:1;transform:none}
.js-reveal .reveal.d1{transition-delay:.08s}
.js-reveal .reveal.d2{transition-delay:.16s}
.js-reveal .reveal.d3{transition-delay:.24s}
.js-reveal .reveal.d4{transition-delay:.32s}

/* ---------- Skip-Link ---------- */
.skip{position:absolute;left:-999px;top:0;background:var(--waldgruen);color:var(--creme);padding:.7rem 1.1rem;z-index:200;border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}

/* ---------- Responsiv ---------- */
@media (max-width:980px){
  .hero-grid,.anders .anders-wrap,.begleit-grid,.kontakt-grid,.news-card{grid-template-columns:1fr}
  .hero-figure{order:-1;max-width:440px;margin-inline:auto}
  .pain-grid,.schritte-grid{grid-template-columns:repeat(2,1fr)}
  .ang-row.three{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .news-aside{display:none}
  nav.main{display:none}
  nav.main.open{display:flex;position:absolute;top:4.7rem;left:0;right:0;flex-direction:column;background:var(--creme);border-bottom:1px solid var(--linie);padding:1.2rem var(--gutter);gap:1.1rem;align-items:flex-start}
  nav.main.open a.nav-cta{align-self:flex-start}
  .menu-toggle{display:block}
}
@media (max-width:600px){
  .pain-grid,.schritte-grid,.ang-row.two,.field-row,.foot-grid{grid-template-columns:1fr}
  .begleit-figure{max-width:360px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js-reveal .reveal{opacity:1;transform:none}
}

/* ---------- Sanftes Hintergrund-Blatt (Position) ----------
   Das SVG selbst wird global über functions.php (wp_body_open) auf jeder
   Seite eingefügt, hier stehen nur die Positions- und Optik-Regeln.
   Rundes Ende oben rechts (ragt über den oberen rechten Rand hinaus),
   Stiel-Ende nach unten links, leicht nach rechts geneigt. SVG-Ursprung:
   Spitze oben, rundes Ende unten. Der rotate-Wert steuert die Neigung. */
.blatt-deko{
  position:fixed;z-index:1;pointer-events:none;
  top:-9vh;right:-8vw;transform:rotate(200deg);transform-origin:center;
  width:clamp(420px,52vw,760px);max-width:none;
  opacity:.06;
  color:var(--blattgruen);
}
.blatt-deko svg{width:100%;height:auto;display:block}
@media (max-width:760px){
  .blatt-deko{top:-7vh;right:-14vw;width:clamp(320px,78vw,540px);opacity:.06;transform:rotate(200deg);transform-origin:center}
}

/* ---------- Astra-Verträglichkeit (defensiv, sparsam) ----------
   Die eigentlichen Weichen stehen im Astra-Customizer. Diese wenigen Regeln
   sichern nur ab, dass die vollbreiten Sektionen (.bg-sand, .schritte, .news,
   footer.site) randlos von Kante zu Kante laufen, falls ein Astra-Standardwert
   für den Container die Breite doch einkastelt.
   Bewusst nur auf den Inhaltsbereich begrenzt, damit Astra-Kopf und -Fuß
   unberührt bleiben. */
.site-content .ast-container{max-width:none;padding-inline:0}
/* Astra legt im Page-Builder-Template einen seitlichen Innenabstand um den Artikel
   selbst (padding-left/right 20px). Der drückt die vollbreiten Sektionen von der
   Kante weg, sichtbar als schmaler creme Streifen links und rechts. Hier entfernt,
   der vertikale Abstand oben (padding-top) bleibt für den Hero erhalten. */
.ast-article-single{padding-inline:0 !important}
/* Gutenberg-Inhaltsfluss ohne Zusatzpolster, die Abstände kommen aus
   .section und .wrap. Volle Breite steuert der Block-Align
   (alignfull) plus die eigene .wrap. */
.site-content .entry-content{margin-block:0}

/* ---------- Gutenberg-Brücke (native Block-Wrapper an das Design anpassen) ----------
   Kleine Anpassungen, damit native Gutenberg-Blöcke in den Mustern exakt am
   vorgesehenen Platz sitzen. Wächst mit den Sektionen. */
.hero-figure .wp-block-image, .begleit-figure .wp-block-image{margin:0;width:100%}

/* Unsere Layout-Container (Raster und Flex-Reihen) steuern Abstände über gap.
   Gutenberg spendiert Folge-Kindern zusätzlich einen oberen Außenabstand
   (is-layout-flow), der die Kacheln gegeneinander verschiebt (z. B. erste
   Karte sitzt scheinbar zu hoch). In unseren Containern die Block-Ränder
   deshalb zurücksetzen, gap übernimmt die Abstände. */
.hero-grid > *, .pain-grid > *, .pain > *, .anders-wrap > *, .begleit-grid > *,
.schritte-grid > *, .schritt > *, .ang-row > *, .card > *, .kontakt-grid > *,
.news-card > *, .foot-grid > *, .field-row > *,
.faq-list > *, .faq-item > *, .anders-list > *, .anders-item > *, .anders-item > div > *, .pain > *{margin-block:0}

/* ---------- Astra-Override, Breite und Überschriftengrößen ----------
   Astra gibt eigene Inhaltsbreiten und Überschriftengrößen als dynamisches CSS
   aus, die unsere Vorgaben überschreiben (Inhalt zu breit, H1 zu klein).
   .wrap ist unsere eigene Klasse und die Überschriftengrößen sind feste
   Design-Werte, daher hier gezielt mit !important durchgesetzt. h4 bleibt
   ausgenommen, der Footer hat eine eigene kleine Größe. */
.wrap{max-width:var(--raster) !important;margin-inline:auto !important;padding-inline:var(--gutter) !important}
h1{font-size:clamp(2.45rem,1.9rem + 3vw,4.1rem) !important}
h2{font-size:clamp(1.85rem,1.4rem + 2vw,2.8rem) !important}
h3{font-size:clamp(1.18rem,1.05rem + .55vw,1.4rem) !important}

/* ============================================================
   UNTERSEITEN (Über mich, Newsletter, Impressum, Datenschutz)
   Die abweichenden Hero-Regeln von Über mich und Newsletter sind
   per Body-Klasse (.page-ueber-mich / .page-newsletter, gesetzt in
   functions.php) gescopet, damit sie den Startseiten-Hero nicht
   überschreiben. Sektions-Klassen sind eindeutig und bleiben global.
   Karten-h3 und Rechtstext-Überschriften mit !important, weil der
   globale h3-!important-Override sie sonst übersteuert.
   ============================================================ */

/* ---------- Gemeinsam ---------- */
.hero-back{display:inline-flex;align-items:center;gap:.45rem;margin-top:2rem;font-size:.95rem}
.claim-gross{font-family:var(--display);font-style:italic;font-size:clamp(1.6rem,1.3rem + 1.6vw,2.4rem)}

/* ---------- Rechtstexte (Impressum, Datenschutz) ----------
   Diese Seiten kommen ohne umschliessende Gruppe aus. Traeger des Layouts ist
   der Inhaltsbereich der Seite selbst, angesprochen ueber die Body-Klasse.
   Vorteil: alle Bloecke liegen auf der obersten Ebene und lassen sich im
   Editor an jeder Stelle ergaenzen. Die Klasse rechts-inhalt bleibt in jedem
   Selektor stehen, damit aeltere Seiten mit Huelle unveraendert weiterlaufen. */
.page-impressum .entry-content,.page-datenschutz .entry-content{
  padding-block:clamp(4.25rem,3rem + 5.5vw,7.5rem);
  padding-inline:var(--gutter);
  /* !important entspricht der .wrap-Regel: die Spalte ist 1180 breit, die
     Absaetze begrenzen sich einzeln auf 68ch. Ohne das Ausrufezeichen wuerde
     die 68ch-Regel weiter unten den ganzen Container verengen. */
  max-width:var(--raster) !important;margin-inline:auto;position:relative;
}
.rechts-back{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:2rem;font-size:.95rem}
.rechts-inhalt,.page-impressum .entry-content,.page-datenschutz .entry-content{max-width:68ch}
.rechts-inhalt h1,.page-impressum .entry-content h1,.page-datenschutz .entry-content h1{margin-bottom:2rem}
.rechts-inhalt h2,.page-impressum .entry-content h2,.page-datenschutz .entry-content h2{font-size:clamp(1.4rem,1.2rem + 1vw,1.85rem) !important;margin-top:2.6rem;margin-bottom:1rem}
.rechts-inhalt h2:first-of-type,.page-impressum .entry-content h2:first-of-type,.page-datenschutz .entry-content h2:first-of-type{margin-top:0}
.rechts-inhalt h3,.page-impressum .entry-content h3,.page-datenschutz .entry-content h3{font-size:1.15rem !important;margin-top:1.8rem;margin-bottom:.7rem;color:var(--tiefgruen)}
.rechts-inhalt p,.page-impressum .entry-content p,.page-datenschutz .entry-content p{color:var(--text-weich);margin-bottom:1.1rem;max-width:68ch}
.rechts-inhalt ul,.page-impressum .entry-content ul,.page-datenschutz .entry-content ul{color:var(--text-weich);margin:0 0 1.1rem 1.3rem;display:grid;gap:.4rem}
.rechts-inhalt strong,.page-impressum .entry-content strong,.page-datenschutz .entry-content strong{color:var(--tiefgruen);font-weight:600}
.rechts-inhalt a,.page-impressum .entry-content a,.page-datenschutz .entry-content a{text-decoration:underline;text-underline-offset:2px}
.rechts-inhalt address,.page-impressum .entry-content address,.page-datenschutz .entry-content address{font-style:normal;color:var(--text-weich)}
/* Auf den flachen Seiten sind die Absaetze direkte Kinder des Inhaltsbereichs.
   Damit greifen zwei Astra-Regeln auf .entry-content > *, die vorher an der
   umschliessenden Gruppe haengengeblieben sind:
   1. max-width:none, mit hoeherer Spezifitaet als unsere Regel. Ohne Gegenwehr
      liefe der Rechtstext ueber die volle Breite statt auf Lesebreite.
   2. margin-inline:auto. Das zentriert jeden Absatz, der schmaler ist als der
      Container, der Text ruecke also von links ein. Deshalb ausdruecklich 0.
   Nur Absaetze brauchen das: Ueberschriften und Adressen laufen ohnehin ueber
   die volle Breite, Listen behalten ihren Einzug aus der ul-Regel darueber. */
.page-impressum .entry-content > p,.page-datenschutz .entry-content > p{
  max-width:68ch !important;margin-inline:0;
}
/* WKO-Signet im Impressum, feste Groesse 340x48, schrumpft auf schmalen
   Bildschirmen mit. Die Klasse ecg-signet sitzt am Bild-Block (figure), nicht
   am img selbst: dort steht schon die Mediathek-Klasse aus
   ordnungsfex_bild_klasse(). So greifen die Regeln gleichermassen im Muster
   und auf der veroeffentlichten Seite, wo die Klasse im Editor unter
   Erweitert, Zusaetzliche CSS-Klassen steht. */
.ecg-signet{margin-top:1.2rem}
.ecg-signet img{max-width:340px;width:100%;height:auto;display:block}
.ecg-signet a{display:inline-block;text-decoration:none}
/* Wird das Signet statt als HTML-Block als nativer Bild-Block eingesetzt, fehlt
   die Klasse ecg-signet. Dann zentriert das Blocksystem das Bild in seiner
   figure, auf einer reinen Textseite sieht das nach Versehen aus. Diese Regel
   haelt jedes Bild auf den beiden Rechtstexten linksbuendig, ohne die Breite
   anzutasten, die das Bild selbst mitbringt. Das Ausrufezeichen ist noetig,
   weil Astras eigene Regel vier Klassen tief greift und sonst gewinnt. */
.page-impressum .entry-content > .wp-block-image img,
.page-datenschutz .entry-content > .wp-block-image img{margin-inline:0 !important}

/* ============================================================
   ÜBER MICH (Hero seiten-spezifisch gescopet)
   ============================================================ */
.page-ueber-mich .hero{padding-block:clamp(3rem,2rem + 5vw,5.75rem);overflow:visible}
.page-ueber-mich .hero-grid{grid-template-columns:.92fr 1.08fr}
.page-ueber-mich .hero-text{position:relative;z-index:2}
.page-ueber-mich .hero-figure{isolation:isolate}
.page-ueber-mich .hero-figure img{
	position:relative;z-index:1;
	aspect-ratio:5/6;object-position:center top;
	border-radius:var(--r-xl) var(--r-xl) 46% 44% / var(--r-xl) var(--r-xl) 40% 42%;
	box-shadow:0 40px 72px -40px rgba(30,43,34,.6);
	transform:rotate(-1.4deg);transition:transform .5s var(--ease);
}
.page-ueber-mich .hero-figure:hover img{transform:rotate(0deg)}
.page-ueber-mich .hero-figure::before{
	z-index:0;width:116%;height:112%;left:auto;right:-14%;top:-7%;
	background:radial-gradient(58% 55% at 62% 32%, rgba(110,159,62,.28), transparent 70%),var(--sand);
	border-radius:62% 38% 44% 56% / 52% 46% 54% 48%;transform:rotate(4deg);
}
.page-ueber-mich .hero-figure::after{
	content:"";position:absolute;z-index:0;
	width:8.5rem;height:8.5rem;left:-2.6rem;bottom:2.2rem;
	background:radial-gradient(circle at 40% 35%, var(--blattgruen), var(--moos));
	border-radius:64% 36% 52% 48% / 58% 42% 58% 42%;opacity:.9;box-shadow:var(--schatten-soft);
}
/* Die Bildunterschrift braucht einen ausdruecklichen z-index, sonst liegt sie
   hinter dem Portraet. Grund: .hero-figure bildet hier mit isolation:isolate
   einen eigenen Stapelraum, darin hat das Bild z-index:1, die Unterschrift
   aber gar keinen. Positionierte Elemente ohne z-index liegen auf Stufe 0 und
   damit unter dem Bild. Zusaetzlich steht das gruene Blatt als ::after weiter
   hinten im Baum und malt sich sonst ebenfalls darueber. z-index:2 hebt die
   Unterschrift ueber beide, bleibt aber unter der Notiz "mittendrin" mit
   z-index:3. */
.page-ueber-mich .hero-cap{
	z-index:2;
	left:-1.4rem;bottom:2.6rem;font-size:.86rem;line-height:1.25;
	padding:.55rem 1.05rem .55rem .55rem;border-radius:var(--r-pille);
	box-shadow:0 18px 34px -20px rgba(30,43,34,.5);transform:rotate(-2deg);
}
.page-ueber-mich .hero-cap b{font-weight:600;color:var(--waldgruen)}
.page-ueber-mich .hero-cap .pin{width:36px;height:36px}
.page-ueber-mich .hero-note{
	position:absolute;z-index:3;top:-.6rem;right:-.4rem;
	background:var(--waldgruen);color:var(--creme);
	font-family:var(--display);font-style:italic;font-size:.98rem;
	padding:.5rem 1.05rem;border-radius:var(--r-pille);
	box-shadow:0 16px 30px -18px rgba(30,43,34,.6);transform:rotate(5deg);
}

/* Berufung */
.berufung-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:2.4rem}
.berufung-text p{color:var(--text-weich)}
.berufung-text p + p{margin-top:1.1rem}
.berufung-text strong{color:var(--waldgruen);font-weight:600}
.berufung-media{display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2rem)}
.zitat-karte{background:var(--weiss);border:2px solid rgba(110,159,62,.55);border-radius:var(--r-l);padding:clamp(1.75rem,3vw,2.4rem);box-shadow:var(--schatten-soft);position:relative}
.zitat-karte .marke{font-family:var(--display);font-style:italic;font-size:3.4rem;line-height:.6;color:var(--blattgruen);opacity:.5}
.zitat-karte blockquote{font-family:var(--display);font-style:italic;font-size:clamp(1.25rem,1.05rem + .8vw,1.55rem);color:var(--waldgruen);line-height:1.35;margin:.6rem 0 0;max-width:none}
.zitat-karte .quelle{margin-top:1.2rem;font-size:.9rem;color:var(--moos);font-weight:600;letter-spacing:.02em}

/* Weg (Zeitachse) */
.weg-list{margin-top:3rem;display:grid;gap:0;border-top:1px solid var(--linie)}
.weg-item{padding:1.7rem 0;border-bottom:1px solid var(--linie);display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start}
.weg-item .chip{min-width:5.6rem;text-align:center;flex-shrink:0;padding:.5rem .9rem;border-radius:var(--r-pille);background:var(--sand);border:1.5px solid var(--blattgruen);font-family:var(--display);font-style:italic;color:var(--waldgruen);font-size:1rem;line-height:1.2}
.weg-item h3{font-size:1.18rem !important;margin-bottom:.3rem;color:var(--tiefgruen)}
.weg-item p{font-size:.99rem;color:var(--text-weich);max-width:60ch}

/* Werte (dunkelgrüne Sektion) */
.werte{background:var(--waldgruen);color:var(--creme)}
.werte h2,.werte h3{color:var(--creme)}
.werte .eyebrow{color:#cfe7ad}
.werte .eyebrow::before{background:#cfe7ad}
.werte .leitsatz{font-family:var(--display);font-style:italic;font-size:1.3rem;color:#dff0c8;margin-top:1.1rem}
.werte-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2.2rem,4vw,3.4rem) clamp(2.4rem,5vw,4rem);margin-top:3.4rem}
.wert{display:flex;flex-direction:column;gap:.7rem}
.wert h3{font-size:1.22rem !important;font-weight:600;color:var(--creme);padding-top:1rem;position:relative}
.wert h3::before{content:"";position:absolute;top:0;left:0;width:2.4rem;height:2px;border-radius:var(--r-pille);background:var(--blattgruen)}
.wert p{font-size:.97rem;color:var(--text-weich-creme);max-width:38ch}

/* Das Persönliche (mit Waldbild) */
.persoenlich-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center;margin-top:2.2rem}
.persoenlich-text{display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.2rem)}
.persoenlich-wrap p{color:var(--text-weich)}
.persoenlich-figure{margin:0}
.persoenlich-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center;border-radius:var(--r-l);box-shadow:var(--schatten-soft);border:2px solid rgba(110,159,62,.35)}
.persoenlich-figure figcaption{margin-top:.7rem;font-size:.86rem;color:var(--moos);font-style:italic;font-family:var(--display)}
.persoenlich-wrap .betont{font-family:var(--display);font-style:italic;font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem);color:var(--waldgruen);line-height:1.35;max-width:none;border-left:2px solid var(--blattgruen);padding-left:1.1rem}

/* Einladung (dunkelgrüne Abschluss-Sektion) */
.einladung{background:var(--waldgruen);color:var(--creme);text-align:center}
.einladung h2{color:var(--creme)}
.einladung .eyebrow{color:#cfe7ad;justify-content:center}
.einladung .eyebrow::before{background:#cfe7ad}
.einladung p{color:var(--text-weich-creme);max-width:52ch;margin-inline:auto;margin-top:1.1rem}
.einladung .claim-gross{color:#dff0c8;margin-top:1.5rem}
.einladung-cta{margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
/* Buttons auf dunkelgruenem Grund. Hier drehen sich die Farben um, deshalb
   braucht es dieselbe !important-Stufe wie oben bei a.btn-primary und
   a.btn-ghost (Astra-Ueberschreibung). Ohne diese Regeln gewinnt die globale
   Farbe und beide Beschriftungen verschwinden: creme auf creme beim hellen
   Button, waldgruen auf waldgruen beim Geister-Button. Der Hover gehoert
   ausdruecklich dazu, sonst kippt der helle Button beim Ueberfahren zurueck
   auf dunkles Gruen und ist wieder unlesbar. */
.einladung .btn-primary{background:var(--creme);box-shadow:0 12px 26px -14px rgba(0,0,0,.45)}
.einladung .btn-primary:hover{background:#fff}
.einladung a.btn-primary,.einladung a.btn-primary:link,.einladung a.btn-primary:visited,
.einladung a.btn-primary:hover,.einladung a.btn-primary:focus,.einladung a.btn-primary:active{color:var(--waldgruen) !important}
.einladung .btn-ghost{border-color:rgba(251,247,238,.5)}
.einladung .btn-ghost:hover{background:rgba(251,247,238,.1);border-color:var(--creme)}
.einladung a.btn-ghost,.einladung a.btn-ghost:link,.einladung a.btn-ghost:visited,
.einladung a.btn-ghost:hover,.einladung a.btn-ghost:focus,.einladung a.btn-ghost:active{color:var(--creme) !important}

/* ============================================================
   NEWSLETTER (Hero seiten-spezifisch gescopet, nur Abweichungen)
   ============================================================ */
.page-newsletter .hero-grid{grid-template-columns:1.02fr .98fr}
.page-newsletter .hero-figure img{object-position:center center}
.page-newsletter .hero-cap{right:1.1rem;line-height:1.4;border-radius:var(--r-l)}

/* Anmelde-Karte im Hero */
.anmelde-karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-xl);padding:clamp(1.5rem,3vw,2.1rem);box-shadow:var(--schatten-soft);margin-top:2rem}
.anmelde-karte .karte-label{font-family:var(--display);font-style:italic;color:var(--moos);font-size:1.1rem;margin-bottom:.9rem}
/* Im Hero steht kein zweites Formular, sondern ein Knopf, der zum Formular in
   der Abschluss-Sektion springt. */
.anmelde-karte .btn{margin-top:.2rem}
.anmelde-hinweis{display:block;margin-top:1.05rem;color:var(--text-weich);font-size:.85rem;max-width:52ch;line-height:1.55}

/* Was dich erwartet (Kacheln mit Haarlinie) */
.erwartet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spalt);margin-top:3rem}
.erwartet{background:var(--weiss);border:1px solid var(--linie);padding:1.9rem 1.6rem;border-radius:var(--r-l);display:flex;flex-direction:column;gap:.7rem;position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.erwartet:hover{transform:translateY(-4px);box-shadow:var(--schatten-karte);border-color:rgba(110,159,62,.5)}
.erwartet h3{font-size:1.14rem !important;line-height:1.32;color:var(--tiefgruen);padding-top:1rem;position:relative}
.erwartet h3::before{content:"";position:absolute;top:0;left:0;width:2.4rem;height:2px;border-radius:var(--r-pille);background:var(--blattgruen)}
.erwartet p{font-size:.96rem;color:var(--text-weich);max-width:none}

/* Vertrauen (dunkelgrüne Sektion) */
.vertrauen{background:var(--waldgruen);color:var(--creme);text-align:center}
.vertrauen h2{color:var(--creme)}
.vertrauen .eyebrow{color:#cfe7ad;justify-content:center}
.vertrauen .eyebrow::before{background:#cfe7ad}
.vertrauen p{color:var(--text-weich-creme);max-width:54ch;margin-inline:auto;margin-top:1.1rem}
.vertrauen .sig{font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem);color:#dff0c8;margin:1.5rem auto 0;max-width:none}
.vertrauen-cta{margin-top:2rem;display:flex;justify-content:center}
.vertrauen .textlink{color:#dff0c8}
.vertrauen .textlink:hover{color:var(--creme)}

/* Abschluss (Sand-Sektion mit Anmeldeformular) */
.abschluss{background:var(--sand);color:var(--tiefgruen)}
.abschluss h2{color:var(--waldgruen)}
.abschluss h2 em{font-style:italic;color:var(--moos)}
.abschluss .eyebrow{color:var(--moos)}
.abschluss .eyebrow::before{background:var(--blattgruen)}
.abschluss-card{background:var(--creme);border:1px solid var(--linie);border-radius:var(--r-xl);padding:clamp(2rem,4vw,3.2rem);box-shadow:var(--schatten-soft);max-width:760px;margin-inline:auto;text-align:center}
.abschluss-card .eyebrow{justify-content:center}
.abschluss-card p{color:var(--text-weich);max-width:52ch;margin-inline:auto;margin-top:1.1rem}
.abschluss-card .claim-gross{color:var(--waldgruen);margin-top:1.4rem}
/* Abschluss-Sektion: dasselbe .nl-form, hier nur mittig und schmaler. */
.abschluss .nl-form,.abschluss .mc4wp-form{margin-top:1.9rem}
.abschluss .nl-form{justify-content:center}
.abschluss .nl-form input{max-width:360px}
.abschluss .mc4wp-response{text-align:center}
.abschluss-hinweis{display:block;margin-top:1rem;color:var(--text-weich);font-size:.85rem}
/* Der Verweis auf die Datenschutzerklaerung steht in den Hinweiszeilen unter
   den Anmeldeformularen. Unterstrichen, damit er als Link erkennbar bleibt,
   obwohl die Zeile selbst gedaempft gesetzt ist. */
.anmelde-hinweis a,.abschluss-hinweis a,.nl-karte small a,.news-card small a{
  color:var(--blau-link);text-decoration:underline;text-underline-offset:2px;
}

/* ---------- Gutenberg-Brücke für die neuen Raster und Flex-Reihen ---------- */
.berufung-wrap > *, .berufung-media > *, .weg-list > *, .weg-item > *,
.werte-grid > *, .wert > *, .persoenlich-wrap > *, .persoenlich-text > *,
.einladung-cta > *, .erwartet-grid > *, .erwartet > *, .vertrauen-cta > *,
.nl-form > *{margin-block:0}

/* ---------- Responsive (Unterseiten) ---------- */
@media (max-width:980px){
	.page-ueber-mich .hero-grid,.page-newsletter .hero-grid{grid-template-columns:1fr}
	.berufung-wrap,.persoenlich-wrap{grid-template-columns:1fr}
	.werte-grid{grid-template-columns:repeat(2,1fr)}
	.erwartet-grid{grid-template-columns:1fr}
	.page-ueber-mich .hero-note{right:.4rem;top:-.4rem}
	.page-ueber-mich .hero-figure::after{width:6rem;height:6rem;left:-1rem;bottom:1.4rem}
}
@media (max-width:600px){
	.werte-grid{grid-template-columns:1fr}
	.weg-item{grid-template-columns:1fr;gap:.7rem}
	.weg-item .chip{justify-self:start}
}
@media (prefers-reduced-motion:reduce){
	.page-ueber-mich .hero-figure img,.page-ueber-mich .hero-cap,.page-ueber-mich .hero-note,.page-ueber-mich .hero-figure::before{transform:none !important}
}

/* ---------- Brücke für das Anfrageformular aus dem Plugin ----------
   Fluent Forms bringt eigenes Markup mit. Wir greifen deshalb über unsere
   Hüllen-Klasse .kontakt-formular auf die Elemente selbst zu, nicht über die
   Klassennamen des Plugins. Das hält auch, wenn das Plugin seine Interna
   ändert. Alle Design-Werte sind dieselben wie bei form.kontakt weiter oben,
   nur breiter angewandt.
   !important, weil Plugin-CSS nach dem Child-CSS geladen wird. */
.kontakt-formular{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-xl);
  padding:clamp(1.75rem,3vw,2.6rem);box-shadow:var(--schatten-soft);
}
.kontakt-formular form{display:grid;gap:1.1rem}
.kontakt-formular label{
  display:block;font-size:.78rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:.45rem;color:var(--moos);
}
.kontakt-formular input[type=text],.kontakt-formular input[type=email],
.kontakt-formular input[type=tel],.kontakt-formular select,.kontakt-formular textarea{
  width:100% !important;padding:.85rem 1.1rem !important;
  border:1.5px solid var(--linie) !important;background:var(--creme) !important;
  border-radius:var(--r-s) !important;font-family:inherit !important;
  font-size:1rem !important;color:var(--tiefgruen) !important;
}
.kontakt-formular input::placeholder,.kontakt-formular textarea::placeholder{color:#9aa593 !important}
.kontakt-formular textarea{resize:vertical;min-height:130px !important}
/* Einwilligung: normaler Satz statt Versalien, Kästchen in Normalgröße.
   Das Feld bekommt im Plugin die Klasse einwilligung. */
.kontakt-formular .einwilligung label{
  text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:400;
  color:var(--text-weich);display:flex;gap:.6rem;align-items:flex-start;
}
.kontakt-formular input[type=checkbox]{
  width:auto !important;margin-top:.2rem;accent-color:var(--waldgruen);
}
/* Absenden-Knopf. Die Klassen btn und btn-primary aus den Formular-Einstellungen
   genuegen hier nicht. Fluent Forms bringt eigene Klassen mit (ff-btn,
   ff-btn-submit, ff-btn-md, ff_btn_style) und schreibt die Knopf-Farben je nach
   Einstellung zusaetzlich direkt ins style-Attribut. Beides schlaegt btn-primary,
   der Knopf faellt dann in Farbe und Form aus der Reihe. Hier deshalb alle Werte
   ausdruecklich, dieselben wie in .btn und .btn-primary weiter oben. */
.kontakt-formular .ff-btn-submit,
.kontakt-formular button[type=submit]{
  font-family:var(--body) !important;font-weight:600 !important;
  font-size:1rem !important;line-height:inherit !important; /* erbt die 1.68 vom body, sonst waere der Knopf 7px flacher als die uebrigen */
  text-transform:none !important;letter-spacing:0 !important;
  display:inline-flex !important;align-items:center;justify-content:center;gap:.55rem;
  width:auto !important;
  padding:.95rem 1.85rem !important;
  border-radius:var(--r-pille) !important;
  border:1.5px solid transparent !important;
  background:var(--waldgruen) !important;
  color:var(--creme) !important;
  box-shadow:0 12px 26px -14px rgba(30,43,34,.55) !important;
  text-decoration:none !important;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.kontakt-formular .ff-btn-submit:hover,.kontakt-formular .ff-btn-submit:focus,
.kontakt-formular button[type=submit]:hover,.kontakt-formular button[type=submit]:focus{
  background:var(--waldgruen-dunkel) !important;color:var(--creme) !important;
  transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(30,43,34,.6) !important;
}
/* Der Knopf soll nicht ueber die volle Breite laufen, sondern links stehen
   wie alle anderen Knoepfe. Fluent Forms setzt die Ausrichtung am Wrapper. */
.kontakt-formular .ff_submit_btn_wrapper{text-align:left !important}

/* ---------- Newsletter-Formulare (MC4WP) ----------
   MC4WP legt um unser Formular-HTML noch ein eigenes <form> und ein
   <div class="mc4wp-form-fields">. Beide sollen unsichtbar bleiben und
   nichts am Abstand verschieben. Die Gestaltung der Felder kommt weiter
   oben aus .nl-form, die Klasse steht im Formular-HTML des Plugins.
   Dazu kommt die Rückmeldung nach dem Absenden. */
.mc4wp-form,.mc4wp-form-fields{margin:0}
.mc4wp-form > *,.mc4wp-form-fields > *{margin-block:0}
/* Das Wegwerf-Feld gegen Bots liegt im Plugin in einem sichtbaren Wrapper,
   je nach Fassung mit oder ohne inline-Style. Sicherheitshalber ausblenden. */
.mc4wp-form [name="_mc4wp_honeypot"]{position:absolute;left:-9999px}

.mc4wp-response{margin-top:1rem}
.mc4wp-alert{
  border-radius:var(--r-s);padding:.85rem 1.1rem;
  font-size:.9rem;line-height:1.5;
}
.mc4wp-alert p{margin:0;color:inherit;font-size:inherit}
.mc4wp-alert p + p{margin-top:.4rem}
.mc4wp-success{background:rgba(110,159,62,.14);border:1px solid rgba(110,159,62,.55);color:var(--waldgruen-dunkel)}
.mc4wp-error,.mc4wp-notice{background:var(--weiss);border:1px solid var(--linie);color:var(--text-weich)}
/* Auf der Sand-Fläche der Startseite sitzt die Meldung in der Creme-Karte,
   dort wirkt Weiß als Grund zu hart. */
.news .mc4wp-error,.news .mc4wp-notice{background:rgba(255,255,255,.6)}