/*
Theme Name: Selbstregulation
Theme URI: https://selbst-regulation.de
Author: Tobias Lippold
Description: Custom Theme für die Praxis von Kristin Seidenzahl, Selbstregulationsbegleiterin in Erfurt. Ruhiges, sicheres Design ohne aggressive Aufrufe zum Handeln oder Reizspitzen.
Version: 1.0
Requires PHP: 7.4
Text Domain: selbst-regulation
*/

/* ---------------------------------------------
   Design tokens
--------------------------------------------- */
:root{
  --sand:#F1EADD;
  --creme:#FAF7F0;
  --tinte:#756F60;
  --ink:#3A342A;

  --sage:#6F8F76;
  --sage-deep:#4F6A58;
  --sage-subtle:#EEF2EA;

  --amber:#CF9F47;
  --amber-deep:#A87D2F;
  --amber-subtle:#F6EEDB;

  --blue:#7D94A3;
  --blue-deep:#5A6F7D;
  --blue-subtle:#E9EDF0;

  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"DM Sans",system-ui,sans-serif;
  --wrap:1180px;
}

/* ---------------------------------------------
   Base
--------------------------------------------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth; font-size:106.25%;} /* Grundgröße 17px statt 16px → alle rem-Werte wachsen mit */
body{
  margin:0; background:var(--sand); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:1.06rem; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif); font-weight:400; line-height:1.18; margin:0;}
p{margin:0 0 1.1em;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px;}
:focus-visible{outline:2px solid var(--sage-deep); outline-offset:3px; border-radius:4px;}
.screen-reader-text{position:absolute; left:-9999px;}

/* Signature element: three polyvagal dots */
.sr-dots{display:inline-flex; gap:9px; align-items:center;}
.sr-dot{width:9px; height:9px; border-radius:50%; display:block;}
.sr-dot--sage{background:var(--sage);}
.sr-dot--amber{background:var(--amber);}
.sr-dot--blue{background:var(--blue);}

.eyebrow{
  font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--sage-deep); margin:0 0 1.1rem;
  display:flex; align-items:center; gap:14px;
}
.eyebrow::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,var(--sage),transparent); opacity:.4;}
.eyebrow.center{justify-content:center;}
.eyebrow.center::after,.eyebrow.center::before{content:""; height:1px; width:46px; background:var(--sage); opacity:.4; flex:none;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6em; font-family:var(--sans);
  font-weight:500; font-size:.95rem; letter-spacing:.01em; padding:15px 30px;
  border-radius:999px; cursor:pointer; transition:transform .4s ease, background .4s ease, color .4s ease, box-shadow .4s ease;
  border:1px solid transparent;
}
.btn-primary{background:var(--sage); color:var(--creme); box-shadow:0 6px 22px -12px rgba(79,106,88,.7);}
.btn-primary:hover{background:var(--sage-deep); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--sage-deep); border-color:var(--sage);}
.btn-ghost:hover{background:var(--sage-subtle);}

/* ---------------------------------------------
   Topbar + Header
--------------------------------------------- */
.topbar{background:var(--sand); font-size:.8rem; color:var(--tinte); border-bottom:1px solid rgba(117,111,96,.12);}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding-top:9px; padding-bottom:9px; gap:18px;}
.topbar a{color:var(--tinte); transition:color .3s;}
.topbar a:hover{color:var(--sage-deep);}
.topbar .left{display:flex; gap:22px; flex-wrap:wrap;}
.topbar .social{display:flex; gap:14px;}

.site-header{position:sticky; top:0; z-index:50; background:rgba(250,247,240,.86); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid rgba(117,111,96,.1);}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px;}
.brand img{height:46px; width:auto;}
.brand{font-family:var(--serif); font-size:1.6rem; color:var(--ink);}

nav.main{display:flex; align-items:center; gap:6px;}
nav.main > ul{display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0;}
nav.main a, .has-sub > button{
  font-family:var(--sans); font-size:.92rem; font-weight:500; color:var(--ink);
  padding:10px 16px; border-radius:999px; background:none; border:none; cursor:pointer;
  letter-spacing:.01em; transition:background .3s,color .3s; display:inline-flex; align-items:center; gap:6px;
}
nav.main > ul > li > a:hover, .has-sub:hover > button{background:var(--sage-subtle); color:var(--sage-deep);}
nav.main a.active, nav.main .current-menu-item > a{color:var(--sage-deep);}
.has-sub{position:relative;}
.has-sub > button svg{transition:transform .3s;}
.has-sub:hover > button svg, .has-sub.is-open > button svg{transform:rotate(180deg);}
.submenu{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--creme); border:1px solid rgba(117,111,96,.14); border-radius:18px;
  padding:10px; min-width:262px; box-shadow:0 24px 50px -28px rgba(58,52,42,.45);
  opacity:0; visibility:hidden; transition:opacity .32s ease, transform .32s ease;
  list-style:none; margin:0;
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu, .has-sub.is-open .submenu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.submenu a{display:flex; gap:13px; align-items:center; padding:12px 14px; border-radius:12px; transition:background .25s;}
.submenu a:hover{background:var(--sage-subtle);}
.submenu .ic{width:38px; height:38px; flex:none; border-radius:50%; background:var(--sand); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.submenu .ic img{width:30px; height:30px; object-fit:contain;}
.submenu .t{font-family:var(--sans); font-weight:500; font-size:.9rem; color:var(--ink); line-height:1.3;}
.submenu .t small{display:block; font-weight:400; color:var(--tinte); font-size:.78rem;}

.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}

/* ---------------------------------------------
   Hero
--------------------------------------------- */
.hero{position:relative; overflow:hidden; background:linear-gradient(180deg,var(--creme) 0%,var(--sand) 100%);}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; padding-top:84px; padding-bottom:96px;}
.hero-copy .kicker{font-family:var(--sans); font-weight:500; letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; color:var(--amber-deep); margin-bottom:1.8rem; display:block;}
.hero h1{font-size:clamp(2.6rem,5vw,4.15rem); font-weight:300; letter-spacing:.01em; color:var(--ink);}
.hero h1 em{font-style:italic; color:var(--sage-deep);}
.hero .lead{font-size:1.12rem; color:var(--tinte); max-width:34ch; margin-top:1.6rem;}
.hero .cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:2.4rem;}
.hero .statedots{margin-top:3rem; display:flex; align-items:center; gap:16px; color:var(--tinte); font-size:.82rem; letter-spacing:.04em;}
.hero-figure{position:relative;}
.hero-figure .frame{border-radius:26px; overflow:hidden; box-shadow:0 36px 72px -42px rgba(58,52,42,.42);}
.hero-figure img{width:100%; height:100%; object-fit:cover;}
.hero-figure .halo{position:absolute; inset:-8% -8% auto auto; width:70%; aspect-ratio:1; background:radial-gradient(circle,var(--amber-subtle),transparent 68%); z-index:-1; border-radius:50%;}

.wave{display:block; width:100%; height:60px;}

/* ---------------------------------------------
   Intro
--------------------------------------------- */
.intro{background:var(--creme); text-align:center;}
.intro .wrap{padding-top:96px; padding-bottom:96px; max-width:880px;}
.intro p.big{font-family:var(--serif); font-weight:300; font-size:clamp(1.5rem,2.9vw,2.15rem); line-height:1.5; color:var(--ink);}
.intro .sig{font-family:var(--serif); font-style:italic; font-size:1.35rem; color:var(--sage-deep); margin-top:1.4rem;}

/* ---------------------------------------------
   Fragen
--------------------------------------------- */
.questions{background:var(--sage-subtle);}
.questions .wrap{padding-top:92px; padding-bottom:92px; max-width:920px; text-align:center;}
.questions h2{font-size:clamp(1.9rem,3.6vw,2.7rem); color:var(--sage-deep); font-weight:400; margin-bottom:2.6rem;}
.qlist{display:flex; flex-direction:column; gap:18px; text-align:left;}
.qitem{background:var(--creme); border-radius:18px; padding:24px 30px; font-family:var(--serif); font-size:1.32rem; font-style:italic; color:var(--ink); line-height:1.45; border-left:3px solid var(--sage); box-shadow:0 18px 40px -34px rgba(58,52,42,.5);}
.questions .after{margin-top:2.8rem; color:var(--tinte); font-size:1.05rem;}

/* ---------------------------------------------
   Atem-Anker
--------------------------------------------- */
.breath{position:relative; overflow:hidden; padding:100px 24px 108px; text-align:center;}
.breath .bg{position:absolute; inset:0; background-size:cover; background-position:center; background-attachment:fixed;}
.breath .veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(250,247,240,.82), rgba(233,237,240,.70) 50%, rgba(250,247,240,.86));}
.breath .inner{position:relative; max-width:600px; margin:0 auto;}
.breath h2{font-size:clamp(1.9rem,4vw,2.7rem); font-weight:400; color:var(--ink); margin:0 0 .8rem;}
.breath .lead{color:var(--ink); opacity:.8; font-size:1.05rem; line-height:1.65; max-width:40ch; margin:0 auto 2.4rem;}
.stage-wrap{position:relative; width:340px; height:340px; margin:0 auto 1rem; display:flex; align-items:center; justify-content:center;}
.rings{position:relative; width:280px; height:280px; display:flex; align-items:center; justify-content:center; transform:scale(.58); transition:transform 6000ms cubic-bezier(.37,0,.63,1);}
.ring{position:absolute; border-radius:50%; border:3px solid;}
.ring.r1{inset:0; border-color:var(--blue); opacity:.55;}
.ring.r2{inset:38px; border-color:var(--amber); opacity:.6;}
.ring.r3{inset:76px; border-color:var(--sage); opacity:.7;}
.core{position:absolute; inset:104px; border-radius:50%; background:radial-gradient(circle at 50% 42%, #fff, var(--sage-subtle) 55%, var(--sage) 130%); box-shadow:0 0 60px -8px rgba(111,143,118,.6), inset 0 0 30px rgba(111,143,118,.2);}
.word{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; font-family:var(--serif); font-style:italic; font-size:1.7rem; color:var(--sage-deep); white-space:nowrap; text-shadow:0 0 16px var(--creme), 0 0 6px rgba(250,247,240,.95); transition:opacity .6s ease;}
.count{display:block; font-family:var(--sans); font-style:normal; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tinte); margin-top:6px; opacity:.75;}
.breath .hint{margin-top:1.4rem; font-size:.86rem; color:var(--tinte); min-height:1.4em; transition:opacity .5s; opacity:0;}
.breath .hint.show{opacity:1;}

/* ---------------------------------------------
   Angebote
--------------------------------------------- */
.offerings{background:var(--sand);}
.offerings .wrap{padding-top:100px; padding-bottom:100px;}
.offerings .head{text-align:center; max-width:680px; margin:0 auto 3.4rem;}
.offerings h2{font-size:clamp(2rem,3.8vw,2.85rem); font-weight:400; color:var(--ink);}
.offerings .head p{color:var(--tinte); margin-top:1rem;}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.card{background:var(--creme); border-radius:22px; padding:34px 26px 30px; text-align:center; border:1px solid rgba(117,111,96,.09); transition:transform .45s ease, box-shadow .45s ease; display:flex; flex-direction:column; scroll-margin-top:112px;}
.card:hover{transform:translateY(-6px); box-shadow:0 30px 60px -36px rgba(58,52,42,.5);}
.card .ic{width:104px; height:104px; margin:0 auto 22px; border-radius:50%; background:var(--sand); overflow:hidden; display:flex; align-items:center; justify-content:center;}
.card .ic img{width:100%; height:100%; object-fit:cover;}
/* Polyvagal-Farbcodierung als Ring um den Icon-Badge (Bild füllt den Kreis, daher Ring statt Hintergrund) */
.card .ic--sage{box-shadow:0 0 0 3px var(--creme), 0 0 0 6px var(--sage);}
.card .ic--amber{box-shadow:0 0 0 3px var(--creme), 0 0 0 6px var(--amber);}
.card .ic--blue{box-shadow:0 0 0 3px var(--creme), 0 0 0 6px var(--blue);}
.card h3{font-size:1.42rem; color:var(--sage-deep); margin-bottom:.6rem;}
.card p{font-size:.92rem; color:var(--tinte); line-height:1.6; margin-bottom:1.4rem;}
.card .more{margin-top:auto; font-family:var(--sans); font-weight:500; font-size:.85rem; color:var(--sage-deep); letter-spacing:.03em; display:inline-flex; gap:7px; align-items:center; justify-content:center;}
.card .more svg{transition:transform .3s;}
.card:hover .more svg{transform:translateX(4px);}
/* Von einer Unterseite zurückgesprungene Karte sichtbar machen + kurz hervorheben */
.card.sr-flash{opacity:1; transform:none; animation:sr-card-highlight 2.6s ease;}
@keyframes sr-card-highlight{0%,100%{box-shadow:0 0 0 0 rgba(111,143,118,0);} 22%{box-shadow:0 0 0 4px rgba(111,143,118,.4);} 70%{box-shadow:0 0 0 4px rgba(111,143,118,0);}}
/* „Zur Übersicht"-Link unten auf den Angebotsseiten */
.backlink-wrap{text-align:center; padding:0 0 76px;}
.backlink{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:500; font-size:.9rem; letter-spacing:.03em; color:var(--sage-deep); text-decoration:none;}
.backlink svg{transition:transform .3s ease;}
.backlink:hover svg{transform:translateX(-4px);}

/* ---------------------------------------------
   Atmosphäre (Mohnblume)
--------------------------------------------- */
.atmo{position:relative; min-height:440px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;}
.atmo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.atmo .veil{position:absolute; inset:0; background:linear-gradient(180deg,rgba(232,226,213,.55),rgba(238,242,234,.78));}
.atmo .inner{position:relative; max-width:680px; padding:80px 28px;}
.atmo blockquote{font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.4; color:var(--ink); margin:0;}
.atmo .src{margin-top:1.6rem; font-family:var(--sans); letter-spacing:.04em; color:var(--sage-deep); font-size:.9rem;}

/* ---------------------------------------------
   Kontakt + Newsletter
--------------------------------------------- */
.contact{background:var(--creme);}
.contact .wrap{padding-top:96px; padding-bottom:96px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.contact h2{font-size:clamp(2rem,3.6vw,2.7rem); font-weight:400; color:var(--ink); margin-bottom:1.4rem;}
.contact .lead{color:var(--tinte);}
.contact .reassure{margin-top:2rem; padding:22px 26px; background:var(--blue-subtle); border-radius:16px; font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--blue-deep); line-height:1.5;}
.newsletter-note{font-size:.82rem; color:var(--tinte); margin-top:16px; text-align:center;}

/* Newsletter-Abschnitt (Kontaktseite) */
.newsletter{background:var(--sage-subtle);}
.newsletter .wrap{padding-top:84px; padding-bottom:88px; max-width:640px; text-align:center;}
.newsletter .eyebrow{justify-content:center;}
.newsletter h2{font-size:clamp(1.8rem,3.4vw,2.4rem); font-weight:400; color:var(--ink); margin-bottom:1rem;}
.newsletter .lead{color:var(--tinte); max-width:52ch; margin-left:auto; margin-right:auto;}
.newsletter .nl-form{margin-top:2.2rem; text-align:left;}

/* WPForms palette */
.wpforms-container{background:var(--sand); border:1px solid rgba(117,111,96,.12); border-radius:24px; padding:34px;}
.wpforms-field{margin-bottom:18px;}
.wpforms-field-label{display:block; font-family:var(--sans); font-weight:500; font-size:.82rem; color:var(--ink); margin-bottom:7px; letter-spacing:.02em;}
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field textarea,
.wpforms-field select{
  width:100%; font-family:var(--sans); font-size:.95rem; color:var(--ink); background:var(--creme);
  border:1px solid rgba(117,111,96,.22); border-radius:12px; padding:13px 15px;
  transition:border .3s, box-shadow .3s;
}
.wpforms-field input:focus, .wpforms-field textarea:focus, .wpforms-field select:focus{
  outline:none; border-color:var(--sage); box-shadow:0 0 0 3px var(--sage-subtle);
}
.wpforms-field textarea{resize:vertical; min-height:120px;}
.wpforms-field-checkbox label, .wpforms-field-gdpr-checkbox label{
  display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color:var(--tinte);
}
.wpforms-submit-container .wpforms-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--sans); font-weight:500; font-size:.95rem; letter-spacing:.01em;
  padding:15px 30px; border-radius:999px; cursor:pointer; width:100%;
  background:var(--sage); color:var(--creme); border:none;
  transition:transform .4s ease, background .4s ease;
}
.wpforms-submit-container .wpforms-submit:hover{background:var(--sage-deep); transform:translateY(-2px);}

/* ---------------------------------------------
   Footer
--------------------------------------------- */
footer.site-footer{background:var(--sage-deep); color:#E5EBE4;}
footer.site-footer .wrap{padding-top:64px; padding-bottom:36px;}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.18);}
.foot-brand{font-family:var(--serif); font-size:1.5rem; color:var(--creme); margin-bottom:1rem; display:flex; align-items:center; gap:12px;}
.foot-brand .sr-dot{width:8px;height:8px;}
footer.site-footer p{color:#CCD6CB; font-size:.92rem; line-height:1.7;}
footer.site-footer h4{font-family:var(--sans); font-weight:500; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:#AEC0AD; margin:0 0 1.1rem;}
footer.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
footer.site-footer ul a{color:#DCE3DB; font-size:.92rem; transition:color .3s;}
footer.site-footer ul a:hover{color:var(--creme);}
.foot-bottom{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:26px; font-size:.82rem; color:#A6B6A5;}

/* ---------------------------------------------
   Blog / Gutenberg basics (page.php, single.php, archive.php)
--------------------------------------------- */
.site-content{background:var(--creme);}
.site-content .wrap{padding-top:72px; padding-bottom:96px;}
.entry-content{max-width:760px; margin:0 auto;}
.entry-content h2{font-size:1.9rem; color:var(--ink); margin:2.2rem 0 1rem;}
.entry-content h3{font-size:1.45rem; color:var(--sage-deep); margin:1.8rem 0 .8rem;}
.entry-content p{color:var(--ink); font-size:1.02rem;}
.entry-content ul, .entry-content ol{color:var(--ink); padding-left:1.4em; margin:0 0 1.1em;}
.entry-content li{margin-bottom:.4em;}
.entry-content a{color:var(--sage-deep); text-decoration:underline; text-decoration-color:rgba(111,143,118,.4);}
.entry-content blockquote{
  border-left:3px solid var(--sage); margin:1.8rem 0; padding:.4rem 0 .4rem 1.6rem;
  font-family:var(--serif); font-style:italic; font-size:1.25rem; color:var(--sage-deep);
}
.entry-content img{border-radius:16px; margin:1.6rem 0;}
.entry-title{font-size:clamp(2rem,4vw,2.9rem); color:var(--ink); text-align:center; margin-bottom:.6rem;}
.entry-meta{text-align:center; color:var(--tinte); font-size:.85rem; margin-bottom:2.6rem; letter-spacing:.03em;}

/* Blog card (template-parts/content-card.php) */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:var(--wrap); margin:0 auto;}
.blog-card{background:var(--sand); border-radius:20px; overflow:hidden; transition:transform .4s ease, box-shadow .4s ease;}
.blog-card:hover{transform:translateY(-5px); box-shadow:0 26px 50px -32px rgba(58,52,42,.45);}
.blog-card .thumb{aspect-ratio:4/3; overflow:hidden;}
.blog-card .thumb img{width:100%; height:100%; object-fit:cover;}
.blog-card .body{padding:22px 24px 26px;}
.blog-card .cat{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-deep); font-weight:500;}
.blog-card h3{font-size:1.3rem; color:var(--ink); margin:.6rem 0 .5rem;}
.blog-card p{font-size:.9rem; color:var(--tinte); margin-bottom:0;}

/* Startseite: dezenter Blog-Teaser */
.blogteaser{background:var(--sage-subtle);}
.blogteaser .wrap{padding-top:84px; padding-bottom:88px;}
.blogteaser .head{text-align:center; max-width:600px; margin:0 auto 2.8rem;}
.blogteaser .head .eyebrow{justify-content:center;}
.blogteaser .bt-lead{color:var(--tinte); margin:0;}
.blogteaser .bt-more{text-align:center; margin-top:2.6rem;}

/* Sanfter Mail-Einstieg (Mini-Impulse) — ersetzt den früheren Blog-Teaser */
.minimail{background:var(--sage-subtle);}
.minimail .wrap{padding-top:84px; padding-bottom:88px; max-width:660px; text-align:center;}
.minimail h2{font-size:clamp(1.8rem,3.4vw,2.4rem); font-weight:400; color:var(--ink); margin-bottom:1rem;}
.minimail .lead{color:var(--tinte); max-width:54ch; margin:0 auto;}
.mm-facts{list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:14px 36px; margin:2.4rem 0 0; padding:0;}
.mm-facts li{display:flex; flex-direction:column; gap:1px; font-size:.86rem; color:var(--tinte);}
.mm-facts li strong{font-family:var(--sans); font-weight:600; font-size:1.04rem; color:var(--sage-deep); letter-spacing:.01em;}
.mm-form{margin-top:2.3rem;}
.mm-placeholder{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.mm-placeholder input[type=email]{flex:1 1 280px; max-width:340px; padding:14px 18px; border:1px solid rgba(117,111,96,.28); border-radius:14px; background:var(--creme); font-family:var(--sans); font-size:1rem; color:var(--ink);}
.mm-placeholder input[type=email]::placeholder{color:var(--tinte); opacity:.8;}
.mm-placeholder input[type=email]:focus{outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(111,143,118,.25);}
.mm-note{font-size:.82rem; color:var(--tinte); margin-top:16px;}
.mm-blog{margin-top:2.6rem; font-size:.95rem; color:var(--tinte);}
.mm-blog a{display:inline-block; margin-top:8px; color:var(--sage-deep); font-weight:500; text-decoration:none; border-bottom:1px solid var(--sage); padding-bottom:1px;}
.mm-blog a:hover{color:var(--ink);}

/* Blog-Listenansicht (Kategorie-Icon · Titel · Kategorie · Datum · Lesezeit) */
.blog-list{max-width:760px; margin:0 auto; border-top:1px solid rgba(117,111,96,.16);}
.blog-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; padding:20px 6px; border-bottom:1px solid rgba(117,111,96,.16); text-decoration:none; transition:background .25s ease;}
.blog-row:hover{background:var(--sage-subtle);}
.br-icon{flex:none; width:36px; height:36px; border-radius:50%; background:var(--sand); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.br-icon img{flex:none; width:64px; height:64px; max-width:none; object-fit:contain;}
.br-icon.ic--sage{box-shadow:0 0 0 2px var(--sage);}
.br-icon.ic--amber{box-shadow:0 0 0 2px var(--amber);}
.br-icon.ic--blue{box-shadow:0 0 0 2px var(--blue);}
.br-title{flex:1 1 240px; font-family:var(--serif); font-size:1.3rem; font-weight:400; line-height:1.3; color:var(--ink); transition:color .25s ease;}
.blog-row:hover .br-title{color:var(--sage-deep);}
.br-meta{display:inline-flex; flex-wrap:wrap; align-items:center; margin-left:auto; font-family:var(--sans); font-size:.82rem; color:var(--tinte); white-space:nowrap;}
.br-meta span{display:inline-flex; align-items:center;}
.br-meta span:not(:first-child)::before{content:"·"; margin:0 10px; color:rgba(117,111,96,.45);}
.br-cat{color:var(--sage-deep); font-weight:600; letter-spacing:.01em;}
@media (max-width:560px){
	.br-title{font-size:1.16rem;}
	.br-meta{flex-basis:100%; margin-left:58px; font-size:.78rem;}
}

.pagination{display:flex; justify-content:center; gap:10px; margin-top:3rem;}
.pagination a, .pagination span{
  display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px;
  border-radius:999px; background:var(--sand); color:var(--ink); font-size:.9rem;
}
.pagination .current{background:var(--sage); color:var(--creme);}

.page-404{text-align:center; padding-top:140px; padding-bottom:140px;}
.page-404 h1{font-size:clamp(2.4rem,6vw,4rem); color:var(--sage-deep);}
.page-404 p{color:var(--tinte); max-width:46ch; margin:1rem auto 2rem;}

/* ---------------------------------------------
   Feste Seiten-Templates (Angebote, Über mich, Kontakt)
--------------------------------------------- */
/* Page-Hero mit themenpassendem Farbverlauf */
.page-hero{position:relative; overflow:hidden; text-align:center;}
.page-hero .wrap{padding-top:92px; padding-bottom:84px; max-width:840px;}
.page-hero--sage{background:linear-gradient(180deg,var(--sage-subtle) 0%,var(--creme) 100%);}
.page-hero--amber{background:linear-gradient(180deg,var(--amber-subtle) 0%,var(--creme) 100%);}
.page-hero--blue{background:linear-gradient(180deg,var(--blue-subtle) 0%,var(--creme) 100%);}
.page-hero .ic{width:132px; height:132px; margin:0 auto 24px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.page-hero .ic img{width:96px; height:96px; object-fit:contain;}
.page-hero .kicker{font-family:var(--sans); font-weight:500; letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; margin-bottom:1.2rem; display:block;}
.page-hero--sage .kicker{color:var(--sage-deep);}
.page-hero--amber .kicker{color:var(--amber-deep);}
.page-hero--blue .kicker{color:var(--blue-deep);}
.page-hero h1{font-size:clamp(2.3rem,4.8vw,3.5rem); font-weight:300; color:var(--ink); letter-spacing:.01em;}
.page-hero h1 em{font-style:italic; color:var(--sage-deep);}
.page-hero .lead{font-size:1.12rem; color:var(--tinte); margin:1.5rem auto 0; max-width:48ch; line-height:1.7;}
.page-hero .statedots{margin-top:2.4rem; display:inline-flex; align-items:center; gap:14px; color:var(--tinte); font-size:.8rem; letter-spacing:.04em;}

/* Erklärung / Fließtext-Sektion */
.prose{background:var(--creme);}
.prose .wrap{padding-top:88px; padding-bottom:88px; max-width:760px;}
.prose .eyebrow{justify-content:center;}
.prose h2{font-size:clamp(1.8rem,3.4vw,2.5rem); font-weight:400; color:var(--ink); margin-bottom:1.2rem; text-align:center;}
.prose .body{margin-top:1.6rem;}
.prose .body p{color:var(--ink); font-size:1.04rem;}
.prose .body p + p{margin-top:1.1em;}
.prose .body h3{font-size:1.4rem; color:var(--sage-deep); margin:2rem 0 .8rem;}

/* Themenspezifische Karten-/Schritt-Sektionen */
.feature{background:var(--sand);}
.feature.alt{background:var(--sage-subtle);}
.feature .wrap{padding-top:88px; padding-bottom:88px;}
.feature .head{text-align:center; max-width:680px; margin:0 auto 3rem;}
.feature .head .eyebrow{justify-content:center;}
.feature .head h2{font-size:clamp(1.8rem,3.4vw,2.5rem); font-weight:400; color:var(--ink);}
.feature .head p{color:var(--tinte); margin-top:1rem;}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.feature-grid.two{grid-template-columns:repeat(2,1fr); max-width:880px; margin:0 auto;}
.feature-card{background:var(--creme); border-radius:20px; padding:30px 28px; border:1px solid rgba(117,111,96,.09); border-top:3px solid var(--sage);}
.feature-card.amber{border-top-color:var(--amber);}
.feature-card.blue{border-top-color:var(--blue);}
.feature-card h3{font-size:1.28rem; color:var(--sage-deep); margin-bottom:.6rem;}
.feature-card.amber h3{color:var(--amber-deep);}
.feature-card.blue h3{color:var(--blue-deep);}
.feature-card p{color:var(--tinte); font-size:.95rem; line-height:1.65; margin-bottom:0;}

/* Nummerierter Ablauf */
.steps{display:flex; flex-direction:column; gap:16px; max-width:760px; margin:0 auto;}
.step{display:flex; gap:22px; align-items:flex-start; background:var(--creme); border-radius:18px; padding:24px 28px; border:1px solid rgba(117,111,96,.08);}
.step .num{flex:none; width:46px; height:46px; border-radius:50%; background:var(--sage-subtle); color:var(--sage-deep); font-family:var(--serif); font-size:1.4rem; display:flex; align-items:center; justify-content:center;}
.step h3{font-size:1.2rem; color:var(--ink); margin-bottom:.35rem;}
.step p{color:var(--tinte); font-size:.95rem; line-height:1.6; margin:0;}

/* Schilf-Zitat-Band mit CTA */
.reed{position:relative; overflow:hidden; text-align:center;}
.reed .bg{position:absolute; inset:0; background-size:cover; background-position:center; background-attachment:fixed;}
.reed .veil{position:absolute; inset:0; background:linear-gradient(180deg,rgba(79,106,88,.84),rgba(90,111,125,.82));}
.reed .inner{position:relative; max-width:660px; margin:0 auto; padding:96px 28px;}
.reed blockquote{font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(1.6rem,3.2vw,2.3rem); line-height:1.42; color:var(--creme); margin:0 0 2.2rem;}
.reed .btn-light{background:var(--creme); color:var(--sage-deep); box-shadow:0 8px 26px -14px rgba(0,0,0,.4);}
.reed .btn-light:hover{background:#fff; transform:translateY(-2px);}

/* Wichtig zu wissen */
.notice{background:var(--creme);}
.notice .wrap{padding-top:80px; padding-bottom:96px; max-width:760px;}
.notice .box{background:var(--blue-subtle); border-radius:20px; padding:32px 38px; border-left:3px solid var(--blue);}
.notice .box h2{font-size:1.5rem; color:var(--blue-deep); font-weight:400; margin-bottom:1rem;}
.notice .box p{color:var(--ink); font-size:1rem; line-height:1.7; margin-bottom:0;}
.notice .box p + p{margin-top:1rem;}

/* Kontaktseite: Info-Spalte */
.contact-info{display:flex; flex-direction:column; gap:14px; margin-top:2rem;}
.contact-info a, .contact-info span{display:flex; gap:12px; align-items:center; color:var(--ink); font-size:1rem;}
.contact-info .lbl{flex:none; width:34px; height:34px; border-radius:50%; background:var(--sage-subtle); color:var(--sage-deep); display:flex; align-items:center; justify-content:center; font-size:.8rem;}

/* Gerahmtes Foto-Band (z. B. Neurofeedback-Gerät) */
.media-band{background:var(--creme);}
.media-band .wrap{padding-top:88px; padding-bottom:0; max-width:920px;}
.media-band figure{margin:0;}
.media-band .frame{max-width:860px; margin:0 auto; border-radius:22px; overflow:hidden; box-shadow:0 28px 60px -36px rgba(58,52,42,.42);}
.media-band .frame img{width:100%; height:auto; display:block;}
.media-band figcaption{text-align:center; font-size:.82rem; color:var(--tinte); margin-top:.9rem; font-style:italic;}

/* Text + Bild nebeneinander (z. B. „Sicherheit kommt zuerst") */
.split{background:var(--creme);}
.split .wrap{padding-top:88px; padding-bottom:88px; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.split-copy h2{font-size:clamp(1.8rem,3.4vw,2.5rem); font-weight:400; color:var(--ink); margin:.4rem 0 1.2rem;}
.split-copy p{color:var(--ink); font-size:1.04rem;}
.split-copy p + p{margin-top:1.1em;}
.split-figure{margin:0; max-width:440px; justify-self:center;}
.split-figure .frame{border-radius:22px; overflow:hidden; box-shadow:0 28px 60px -36px rgba(58,52,42,.42);}
.split-figure .frame img{width:100%; height:auto; display:block;}
.split-figure figcaption{text-align:center; font-size:.82rem; color:var(--tinte); margin-top:.9rem; font-style:italic;}
@media (max-width:920px){
  .split .wrap{grid-template-columns:1fr; gap:34px;}
  .split-figure{max-width:420px; justify-self:start;}
}

/* Über-mich: zentrales Bild in voller Breite */
.about-photo{background:var(--creme);}
.about-photo img{display:block; width:100%; height:clamp(460px,62vw,840px); object-fit:cover; object-position:center 42%;}

/* Haltungs-Chips (greifen die Polyvagal-Punkte auf) */
.value-chips{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:2.6rem;}
.value-chips .chip{display:inline-flex; align-items:center; gap:10px; background:var(--creme); border:1px solid rgba(117,111,96,.16); color:var(--ink); border-radius:999px; padding:10px 20px; font-family:var(--sans); font-weight:500; font-size:.9rem;}

/* Fortbildungen — Timeline */
.timeline{background:var(--sand);}
.timeline .wrap{padding-top:88px; padding-bottom:88px;}
.timeline .head{text-align:center; max-width:680px; margin:0 auto 3rem;}
.timeline .head .eyebrow{justify-content:center;}
.timeline .head h2{font-size:clamp(1.8rem,3.4vw,2.5rem); font-weight:400; color:var(--ink);}
.timeline .head p{color:var(--tinte); margin-top:1rem;}
.timeline-list{position:relative; max-width:760px; margin:0 auto; padding-left:40px;}
.timeline-list::before{content:""; position:absolute; left:8px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--sage),var(--sage-subtle));}
.tl-item{position:relative; padding-bottom:34px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:""; position:absolute; left:-39px; top:3px; width:18px; height:18px; border-radius:50%; background:var(--creme); border:3px solid var(--sage); box-shadow:0 0 0 4px var(--sand);}
.tl-date{font-family:var(--sans); font-weight:600; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sage-deep);}
.tl-item h3{font-size:1.18rem; color:var(--ink); margin:.35rem 0 .15rem; line-height:1.35;}
.tl-course{font-family:var(--serif); color:var(--ink); font-size:1.02rem; line-height:1.45; margin:.05rem 0 .3rem;}
.tl-ref{font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--tinte); margin:0 0 .6rem;}
.tl-item .tl-p{color:var(--tinte); font-size:.95rem; line-height:1.65; margin:0 0 .7rem;}
.tl-item .tl-p:last-of-type{margin-bottom:0;}
.tl-links{font-size:.9rem; line-height:1.6; color:var(--tinte); margin:.7rem 0 0;}
.tl-links-label{color:var(--sage-deep); font-weight:600;}
.tl-links a{color:var(--sage-deep); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;}
.tl-links a:hover{color:var(--ink);}

/* FAQ — Aufklapp-Fragen (native details/summary) */
.faq{background:var(--creme);}
.faq .wrap{padding-top:88px; padding-bottom:88px; max-width:780px;}
.faq-list{display:flex; flex-direction:column; gap:14px;}
.faq-item{background:var(--sand); border:1px solid rgba(117,111,96,.1); border-radius:16px; overflow:hidden;}
.faq-item summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 26px; font-family:var(--serif); font-size:1.22rem; color:var(--ink); line-height:1.35;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary svg{flex:none; color:var(--sage-deep); transition:transform .3s ease;}
.faq-item[open] summary svg{transform:rotate(180deg);}
.faq-item summary:hover{color:var(--sage-deep);}
.faq-answer{padding:0 26px 24px;}
.faq-answer p{color:var(--tinte); font-size:1rem; line-height:1.7; margin:0;}

/* ---------------------------------------------
   Reveal animation
--------------------------------------------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease;}
.reveal.in{opacity:1; transform:none;}

/* ---------------------------------------------
   Responsive
--------------------------------------------- */
@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr; gap:40px; padding-top:54px; padding-bottom:64px;}
  .hero-figure{max-width:420px; margin:0 auto;}
  .contact .wrap{grid-template-columns:1fr; gap:40px;}
  .cards{grid-template-columns:repeat(2,1fr);}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .foot-top{grid-template-columns:1fr 1fr;}
  nav.main{display:none;}
  .menu-toggle{display:block;}
  .topbar .left .addr{display:none;}
  nav.main.is-open{
    display:flex; position:absolute; top:100%; left:0; right:0; background:var(--creme);
    flex-direction:column; padding:14px; border-bottom:1px solid rgba(117,111,96,.12);
  }
  nav.main.is-open > ul{flex-direction:column; width:100%; align-items:stretch;}
  .submenu{position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; display:none;}
  .has-sub.is-open .submenu{display:block;}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .feature-grid, .feature-grid.two{grid-template-columns:1fr;}
  .foot-top{grid-template-columns:1fr;}
  .step{flex-direction:column; gap:14px;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important; scroll-behavior:auto!important;}
  .reveal{opacity:1; transform:none;}
  .rings{transition:none;}
  .breath .bg, .reed .bg{background-attachment:scroll;}
}