/* Ergänzungen zum Vorschau-Design (anna-schoppa.de). Nur Bausteine, die es in den
   Vorschauen nicht gab. Farben und Radien kommen aus den Variablen der Vorschau. */

.skip-link{position:absolute;left:-9999px;top:8px;z-index:300;background:var(--ink);color:var(--white);padding:10px 16px;border-radius:var(--r-sm)}
.skip-link:focus{left:12px;color:var(--white)}
:focus-visible{outline:3px solid var(--yellow-accent);outline-offset:3px}
img{max-width:100%;height:auto}

/* --- Kopfzeile: aktive Seite + Mobilmenü (Menü liegt AUSSERHALB des Headers,
       weil backdrop-filter am Header position:fixed-Kinder einsperren würde) --- */
.nav-links a.active{color:var(--green-primary);font-weight:600}
.nav-links a.active::after{width:100%;left:0}
.logo img{height:42px}
.burger{width:44px;height:44px;border-radius:50%;line-height:1}
@media (max-width:1180px){
  .nav-links{display:none}
  .burger{display:inline-grid;place-items:center}
  .nav-phone{display:none!important}
}
.mobile-nav{position:fixed;inset:0;z-index:120;background:var(--cream);padding:88px 28px 40px;overflow-y:auto;
  display:flex;flex-direction:column;gap:6px;transform:translateY(-100%);visibility:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),visibility 0s .35s}
.mobile-nav.open{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.mobile-nav a{font-family:'Fraunces',serif;font-size:1.45rem;color:var(--ink);padding:10px 0;border-bottom:1px solid var(--line)}
.mobile-nav a.sub{font-family:'Manrope',sans-serif;font-size:1rem;color:var(--ink-soft);padding:8px 0 8px 18px;border-bottom:0}
.mobile-nav .btn{margin-top:22px;justify-content:center;font-family:'Manrope',sans-serif;font-size:1rem}
.mobile-nav .mn-contact{margin-top:18px;font-size:.95rem;color:var(--ink-soft);border:0}
.mobile-nav-close{position:absolute;top:18px;right:20px;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--white);font-size:1.6rem;cursor:pointer;color:var(--ink)}
body.menu-open{overflow:hidden}
body.menu-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none}

/* --- Brotkrumen auch auf Seiten mit Startseiten-Stylesheet --- */
.tpl-home .crumb-bar{background:var(--green-soft);padding:14px 0;font-size:.85rem;color:var(--ink-soft)}
.tpl-home .crumb-bar a{color:var(--green-deep);font-weight:500}
.tpl-home .crumb-bar .sep{margin:0 8px;color:var(--muted)}

/* --- Unterseiten-Hero: Bild als <img> statt Hintergrund (LCP, Alt-Text) --- */
.hero-visual.has-img{background:none}
.hero-visual.has-img img,.about-visual.has-img img,.out-visual.has-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.about-visual.has-img,.out-visual.has-img{background:none;overflow:hidden}
.hero-visual .hero-badge,.hero-visual .hero-floating-card,.hero-visual .hero-tag{z-index:2}
.hero-visual.has-img::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg, rgba(31,43,20,0) 45%, rgba(31,43,20,.35) 100%);pointer-events:none}

/* --- Buchungsbox (ersetzt den eingebetteten eTermin-Kalender der Vorschau) --- */
.book-card{max-width:920px;margin:0 auto;background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);border:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);overflow:hidden}
.book-services{list-style:none;margin:0;padding:36px 40px}
.book-services li{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.book-services li:last-child{border-bottom:0}
.book-services .svc{font-weight:600;color:var(--ink)}
.book-services .svc small{display:block;font-weight:400;color:var(--ink-soft);font-size:.86rem;margin-top:2px}
.book-services .price{font-family:'Fraunces',serif;font-size:1.25rem;color:var(--green-deep);white-space:nowrap}
.book-services .price.free{color:var(--green-primary)}
.book-action{background:linear-gradient(160deg,var(--green-soft),var(--yellow-soft));padding:36px 34px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.book-action h3{margin:0;font-size:1.45rem}
.book-action p{margin:0;color:var(--ink-soft);font-size:.95rem}
.book-action .btn{justify-content:center}
.book-action .alt{font-size:.92rem;color:var(--ink-soft)}
.book-action .alt a{font-weight:700}
.book-note{text-align:center;font-size:.82rem;color:var(--muted);margin-top:18px}
@media (max-width:780px){.book-card{grid-template-columns:minmax(0,1fr)}.book-services{padding:24px 22px}.book-action{padding:28px 22px}}

/* --- Bewertung (echte Zahl aus eTermin) --- */
.rating-line{display:inline-flex;align-items:center;gap:10px;font-size:.92rem;color:var(--ink-soft)}
.rating-line .stars{margin:0}
.rating-line a{font-weight:600}

/* --- Fließtext-Seiten (Rechtstexte, Methoden, Seminare) --- */
.prose-section{padding:72px 0 96px}
.prose{max-width:780px;margin:0 auto;font-size:1.02rem}
.prose h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-top:1.6em}
.prose h3{font-size:1.3rem;margin-top:1.4em}
.prose ul{padding-left:1.2em}
.prose li{margin:.35em 0}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose .lead{font-size:1.18rem;color:var(--ink-soft)}
.legal-note{background:var(--yellow-soft);border-radius:var(--r-md);padding:18px 22px;font-size:.95rem;margin-bottom:2em}

/* --- Inhaltsblöcke für Themen-/Seminarseiten --- */
.split{padding:110px 0}
.split.alt{background:var(--sand)}
.split-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.split-grid.rev > :first-child{order:2}
.split-media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3}
.split-media img{width:100%;height:100%;object-fit:cover;display:block}
.split-media.tall{aspect-ratio:4/5}
.check-list{list-style:none;padding:0;margin:0 0 1.6em}
.check-list li{position:relative;padding:8px 0 8px 32px;color:var(--ink-soft)}
.check-list li::before{content:"✓";position:absolute;left:0;top:8px;width:22px;height:22px;border-radius:50%;background:var(--green-soft);color:var(--green-deep);display:grid;place-items:center;font-size:.75rem;font-weight:700}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 1.6em}
.fact{background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 16px;font-size:.88rem;font-weight:600;color:var(--green-deep)}
@media (max-width:980px){.split{padding:80px 0}.split-grid{grid-template-columns:minmax(0,1fr);gap:40px}.split-grid.rev > :first-child{order:0}}

/* --- Angebotskacheln mit Links (Startseiten-.card) --- */
.card-body .card-cta{align-self:flex-start}
.card-image{background-color:var(--green-soft)}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.cards.two,.cards.four{grid-template-columns:minmax(0,1fr)}}

/* --- Methoden --- */
.method a{font-weight:600}
.method-detail{scroll-margin-top:110px}

/* --- Galerie Praxis --- */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gallery figure{margin:0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:4/3}
.gallery figure.tall{grid-row:span 2;aspect-ratio:auto}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:780px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery figure.tall{grid-row:auto;aspect-ratio:4/3}}

/* --- Kontakt --- */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.contact-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px}
.contact-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:.98rem}
.contact-card dt{font-weight:600;color:var(--green-deep)}
.contact-card dd{margin:0}
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;display:grid;gap:16px}
.form label{font-weight:600;font-size:.92rem;display:grid;gap:6px}
.form input,.form textarea,.form select{font:inherit;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--cream);color:var(--ink)}
.form input:focus,.form textarea:focus{border-color:var(--green-mid);outline:none;background:var(--white)}
.form .consent{font-weight:400;font-size:.88rem;display:flex;gap:10px;align-items:flex-start}
.form .consent input{margin-top:4px}
.form .hp{position:absolute;left:-9999px}
.form-status{font-weight:600;min-height:1.4em}
.form-status.ok{color:var(--green-deep)}
.form-status.err{color:var(--error-red,#b3261e)}
@media (max-width:980px){.contact-grid{grid-template-columns:minmax(0,1fr)}}

/* --- Hinweis Coaching/Therapie --- */
.disclaimer{font-size:.85rem;color:var(--muted);max-width:780px;margin:28px auto 0;text-align:center}

/* --- Querverweis zur zweiten Website --- */
.cross{padding:72px 0;background:var(--white);border-top:1px solid var(--line)}
.cross-card{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;max-width:980px;margin:0 auto}
.cross-card p{margin:0;color:var(--ink-soft);max-width:620px}
.cross-card h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:.3em}

/* --- Fußzeile --- */
.footer-bottom a{color:rgba(251,248,240,.6)}
.footer-bottom a:hover{color:var(--yellow-accent)}
.footer-legal{display:flex;gap:18px;flex-wrap:wrap}

/* Mobil: Vorschau nutzte 1fr-Spalten -> lange Wörter sprengen die Breite */
@media (max-width:680px){
  .hero-grid,.about-grid,.audience-grid,.cards,.methods-grid,.steps,.promises-grid,.testi-grid,.footer-grid,.out-grid,.approach-grid,.pain-grid{grid-template-columns:minmax(0,1fr)!important}
  .hero-grid > *,.about-grid > *{min-width:0}
  h1{overflow-wrap:break-word;hyphens:auto}
  .container{padding:0 20px}
}

/* Korrekturen an Fehlern, die schon in der Vorschau steckten:
   1) Schwebekarte ragte rechts aus dem Bild und wurde abgeschnitten
   2) Akzentwort als inline-block -> Satzzeichen danach rutschte allein in die nächste Zeile.
      Unterstreichung jetzt als Hintergrund (läuft über Zeilenumbrüche mit). */
.hero-floating-card{right:16px}
.section-head h2 em.accent,.outcomes-head h2 em.accent,.pain-head h2 em.accent{display:inline;
  background:linear-gradient(var(--yellow-accent),var(--yellow-accent)) no-repeat 0 100%/0 3px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:2px;transition:background-size 1s cubic-bezier(.16,1,.3,1)}
.section-head h2 em.accent::after,.outcomes-head h2 em.accent::after,.pain-head h2 em.accent::after{display:none}
.section-head.in h2 em.accent,.outcomes-head.in h2 em.accent,.pain-head.in h2 em.accent{background-size:70% 3px}
@media (prefers-reduced-motion:reduce){.section-head h2 em.accent,.outcomes-head h2 em.accent,.pain-head h2 em.accent{background-size:100% 3px}}

/* Handy: Kopfzeile einzeilig, Schwebekarte nicht über dem Abzeichen (Vorschau-Fehler) */
.logo span{white-space:nowrap}
@media (max-width:520px){.nav-cta .btn{display:none}}
@media (max-width:680px){.hero-floating-card{top:16px;left:16px;right:auto;bottom:auto}}

/* Zierelemente der Vorschau ragten mobil 2–5 px über den Rand (gemessen) */
main{overflow-x:clip}

/* Autorenbox (E-E-A-T): wer schreibt, Qualifikation, Aktualität */
.author-box{padding:56px 0;border-top:1px solid var(--line)}
.ab-card{max-width:860px;margin:0 auto;display:flex;gap:26px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 30px}
.ab-card img{width:110px;height:110px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:0 0 auto}
.ab-card .eyebrow{margin-bottom:.6em}
.ab-name{font-size:1.25rem;margin:0 0 .3em}
.ab-card p{margin:0 0 .4em;font-size:.95rem;color:var(--ink-soft)}
.ab-meta{font-size:.85rem!important;color:var(--muted)!important}
.ab-meta a{font-weight:600}
@media (max-width:600px){.ab-card{flex-direction:column;text-align:center;padding:24px 20px}}
.ab-name{font-family:"Fraunces",serif}

/* Barrierefreiheit (WCAG AA, gemessen mit axe-core): Vorschau-Grün #719430 erreicht als Schrift/Knopf nur 3,0–3,5:1.
   Flächen behalten #719430, Schrift und Knöpfe nutzen das minimal dunklere #557222 (≥4,5:1). */
:root{--green-text:#557222;--muted:#626e56}
.btn-primary,.mobile-nav .btn{background:var(--green-text)}
.btn-primary:hover{background:var(--green-deep)}
.eyebrow,.audience-card .arrow,.audience-card .who,.credential .num,.hero-ctas .reassure strong,.method-num,.step-meta,
.nav-links a.active,.nav-links a:hover,.book-services .price.free,a:hover{color:var(--green-text)}
.process .section-head h2 em.accent,.outcomes h2 em.accent,.mid-cta em.accent{color:var(--green-text)}
/* Links im Fließtext erkennbar ohne Farbe allein */
.faq-body a,.consent a,main p a:not(.btn),.prose a,.ab-meta a{text-decoration:underline;text-underline-offset:3px}