/* =====================================================================
   Yogingi – Signatur-Styles (1:1 aus der statischen Seite portiert)
   Original: c:/xampp/htdocs/yogingi/styles.css
   Anpassungen für Gutenberg-Blöcke sind am Ende markiert.
   ===================================================================== */

  @import url('https://fonts.bunny.net/css?family=playfair-display:400,500,600,400i,500i,600i|lora:400,500,600,400i|questrial:400');

  :root{
    --green:#9fc7aa;
    --green-deep:#7fae8d;
    --green-soft:#e4efe6;
    --cream:#f5f5ef;
    --ink:#304543;
    --plum:#6141ac;
    --white:#ffffff;
    --font-display:'Playfair Display', Georgia, serif;
    --font-body:'Lora', Georgia, 'Iowan Old Style', serif;
    --font-brand:'Questrial', 'Futura', sans-serif;
    --shadow:0 18px 40px rgba(48,69,67,0.10);
    --ring:1px solid rgba(48,69,67,0.14);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation:none !important; transition:none !important;}
  }

  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  img{max-width:100%; display:block;}
  a{color:inherit;}

  .wrap{max-width:1080px; margin:0 auto; padding:0 28px;}

  /* ---------- reveal on scroll (nur Frontend, siehe body.yogingi-anim) ---------- */
  .yogingi-anim .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
  .yogingi-anim .reveal.is-visible{opacity:1; transform:translateY(0);}

  /* ---------- ring motif (signature element) ---------- */
  .ring-motif{display:flex; justify-content:center; align-items:center; gap:0; margin:0 auto;}
  .ring-motif svg{display:block;}

  /* ---------- topbar ---------- */
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 28px; max-width:1080px; margin:0 auto;
  }
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
  .brand img{width:46px; height:46px; border-radius:50%; object-fit:contain;}
  .brand .name{
    font-family:var(--font-brand);
    color:var(--plum);
    font-size:1.2rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
  }
  .topbar nav{display:flex; gap:26px; align-items:center; font-size:0.92rem; letter-spacing:0.04em;}
  .topbar nav > *{margin:0;}
  .topbar nav a{text-decoration:none; color:var(--ink); border-bottom:1px solid transparent; padding-bottom:3px; transition:border-color .2s ease, color .2s ease;}
  .topbar nav a:hover, .topbar nav a:focus-visible{color:var(--plum); border-color:var(--plum);}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    background:var(--green);
    overflow:hidden;
    padding:46px 0 64px;
  }
  .hero::before{
    content:"";
    position:absolute; top:-90px; left:-90px;
    width:280px; height:280px;
    border:1px solid rgba(245,245,239,0.55);
    border-radius:50%;
  }
  .hero::after{
    content:"";
    position:absolute; top:-30px; left:-30px;
    width:200px; height:200px;
    border:1px solid rgba(245,245,239,0.4);
    border-radius:50%;
  }
  .hero-grid{
    position:relative; z-index:1;
    display:grid; grid-template-columns:1.15fr 0.85fr;
    gap:48px; align-items:center;
    max-width:1080px; margin:0 auto; padding:30px 28px 0;
  }
  .eyebrow{
    display:inline-block;
    font-size:0.74rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--ink); opacity:0.75; margin-bottom:14px;
  }
  /* Spezifität 0,2,0 schlägt die Editor-Regel .wp-block{margin:0} (0,1,0),
     damit der 14px-Abstand eyebrow→Überschrift auch im Editor greift. */
  .eyebrow.eyebrow{margin-bottom:14px;}
  .hero h1{
    font-family:var(--font-display);
    font-weight:400;
    font-size:clamp(2.3rem, 4.6vw, 3.4rem);
    line-height:1.15;
    margin:0 0 18px;
    color:var(--ink);
  }
  .hero h1 .accent{
    color:var(--plum);
    font-size:1.18em;
    font-style:italic;
  }
  .hero .lead{
    font-size:1.18rem;
    max-width:30ch;
    margin:0 0 28px;
    color:var(--ink);
  }
  .cta{
    display:inline-block;
    background:var(--plum);
    color:var(--cream);
    text-decoration:none;
    font-size:0.95rem;
    letter-spacing:0.03em;
    padding:14px 30px;
    border-radius:999px;
    box-shadow:var(--shadow);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .cta:hover, .cta:focus-visible{transform:translateY(-2px); box-shadow:0 22px 40px rgba(97,65,172,0.28);}

  .hero-mark{position:relative; justify-self:center; text-align:center;}
  .mark-halo{
    position:relative;
    width:min(270px, 70vw); height:min(270px, 70vw);
    margin:0 auto;
    display:flex; align-items:center; justify-content:center;
  }
  .mark-halo img{
    position:relative; z-index:1;
    width:84%; height:84%; object-fit:contain;
    filter:drop-shadow(0 14px 26px rgba(48,69,67,0.18));
  }

  /* ---------- section shells ---------- */
  section.block{padding:78px 0;}
  .block .wrap{max-width:1080px;}
  /* Abstand section-head→columns/callout/substatement: jetzt via .wrap blockGap (46px). */
  .section-head{text-align:center; max-width:620px; margin:0 auto;}
  .section-head .eyebrow{display:block;}
  /* Eyebrow ist im Block-Markup ein <p> → gegen .section-head p (1.05rem, margin:0)
     absichern: Original-Werte (0.74rem, margin-bottom:14px) wiederherstellen. */
  .section-head p.eyebrow{font-size:0.74rem; margin-bottom:14px;}
  .section-head h2{
    font-family:var(--font-display);
    font-weight:400;
    font-size:clamp(1.9rem, 3.4vw, 2.5rem);
    margin:0 0 14px;
    color:var(--ink);
  }
  .section-head p{margin:0; font-size:1.05rem; opacity:0.85;}

  /* ---------- ernaehrung ---------- */
  .columns{
    display:grid; grid-template-columns:1fr 1fr; gap:26px;
  }
  .card{
    background:var(--white);
    border:var(--ring);
    border-radius:20px;
    padding:32px 30px;
    box-shadow:var(--shadow);
  }
  .card.benefit{background:var(--green-soft);}
  .pill{
    display:inline-block;
    background:var(--green);
    color:var(--ink);
    font-size:0.78rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    padding:7px 18px; border-radius:999px;
    /* Abstand pill→Liste: jetzt via .card blockGap (18px). */
  }
  /* margin NICHT auf 0 setzen – die Liste ist 2. Kind der Karte und erhält
     ihren 18px-Abstand via .card blockGap (margin-block-start). */
  .card ul{list-style:none; padding:0;}
  .card li{
    position:relative;
    padding-left:24px;
    margin-bottom:13px;
    font-size:1.02rem;
  }
  .card li:last-child{margin-bottom:0;}
  .card.challenge li::before{
    content:"";
    position:absolute; left:0; top:0.55em;
    width:8px; height:8px; border-radius:50%;
    background:var(--plum); opacity:0.55;
  }
  .card.benefit li::before{
    content:"";
    position:absolute; left:0; top:0.5em;
    width:9px; height:9px;
    border:1.5px solid var(--plum);
    border-radius:50%;
    background:transparent;
  }

  .callout{
    margin-inline:auto;   /* nur horizontal zentrieren – margin-block-start bleibt für block-gap frei */
    max-width:680px;
    background:var(--green);
    border-radius:22px;
    padding:36px 42px;
    text-align:center;
  }
  .callout p{
    font-family:var(--font-display);
    color:var(--plum);
    font-size:clamp(1.25rem, 2.4vw, 1.55rem);
    font-weight:400;
    line-height:1.35;
    margin:0;
  }

  /* Abstand callout→substatement: jetzt via .wrap blockGap (46px). */
  .substatement{text-align:center; max-width:560px; margin-inline:auto;}
  .substatement h3{
    font-family:var(--font-display);
    color:var(--ink);
    font-size:1.5rem;
    font-weight:400;
    margin:0 0 10px;
  }
  .substatement p{margin:0; opacity:0.8;}

  /* ---------- yoga ---------- */
  .block.yoga{background:var(--green-soft);}
  .offerings{
    list-style:none;
    margin-inline:auto;
    padding:38px 44px;
    max-width:580px;
    background:var(--white);
    border-radius:20px;
    box-shadow:var(--shadow);
  }
  .offerings li{
    position:relative;
    padding-left:28px;
    margin-bottom:16px;
    text-align:left;
    font-size:1.04rem;
  }
  .offerings li:last-child{margin-bottom:0;}
  .offerings li::before{
    content:"✦";
    position:absolute; left:0; top:0.05em;
    color:var(--plum);
    font-family:var(--font-display);
    font-size:0.95rem;
  }

  /* ---------- footer / kontakt ---------- */
  footer{
    background:var(--green);
    padding:64px 0 64px;
    text-align:center;
  }
  .footer-badge{
    width:128px; height:128px; border-radius:50%;
    background:var(--white);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 26px;
    box-shadow:var(--shadow);
    overflow:hidden;
    border:3px solid var(--green-deep);
  }
  .footer-badge img{width:100%; height:100%; object-fit:cover;}
  footer .tagline{
    font-family:var(--font-display);
    color:var(--plum);
    font-size:1.3rem;
    max-width:480px;
    margin:0 auto 28px;
  }
  .contact-name{font-weight:700; font-size:1.08rem; margin-bottom:4px;}
  footer p{margin:0 0 6px; color:var(--ink);}
  footer a{text-decoration:none; border-bottom:1px solid rgba(48,69,67,0.35);}
  footer a:hover, footer a:focus-visible{color:var(--plum); border-color:var(--plum);}
  .copyright{margin-top:30px; font-size:0.78rem; opacity:0.65;}
  /* Footer-Impressum-Link: nativer, zentrierter Absatz (Klasse am <p>, Link innen).
     Zentriert sich selbst per has-text-align-center – unabhängig vom footer{}-Wrapper,
     damit es auch im (isolierten) Template-Part-Editor korrekt aussieht. */
  .legal-link{margin-top:10px; text-align:center;}
  .legal-link a{
    display:inline-block;
    font-family:var(--font-body);
    font-size:0.78rem;
    color:var(--ink);
    opacity:0.7;
    text-decoration:underline;
    border-bottom:none;
  }
  .legal-link a:hover, .legal-link a:focus-visible{opacity:1; color:var(--plum); border-bottom:none;}

  /* Footer-Abstände: der Editor lädt .wp-block{margin:0} (0,1,0) und nullt damit
     Ein-Klassen-Margins. Diese Regeln (Spezifität 0,2,0 bzw. 0,1,1) schlagen das
     und gelten in Editor UND Frontend gleich → footer 1:1 im Editor. */
  .footer-badge.footer-badge{margin-bottom:26px;}
  .contact .contact-name{margin-bottom:4px;}
  .contact p{margin-bottom:6px;}
  .copyright.copyright{margin-top:30px;}
  .legal-link.legal-link{margin-top:10px;}

  /* ---------- responsive ---------- */
  @media (max-width:760px){
    .topbar{flex-direction:column; gap:14px; text-align:center; align-items:center;}
    .topbar .brand{justify-content:center;}
    .topbar nav{gap:18px; flex-wrap:wrap; justify-content:center;}
    .hero-grid{grid-template-columns:1fr; text-align:center;}
    .hero .lead{margin-left:auto; margin-right:auto;}
    .hero-mark{order:-1; margin-top:0; margin-bottom:2px;}
    .mark-halo{width:250px; height:250px;}
    .columns{grid-template-columns:1fr;}
    .offerings{padding:30px 28px;}
    .callout{padding:28px 24px;}
    .legal-content{text-align:center;}
  }
  @media (max-width:480px){
    .offerings{padding:26px 22px;}
    .offerings li{font-size:0.96rem;}
  }

  :focus-visible{outline:2px solid var(--plum); outline-offset:3px;}

  /* ---------- back to top ---------- */
  .to-top{
    position:fixed;
    right:24px; bottom:28px;
    z-index:50;
    width:50px; height:50px;
    border-radius:50%;
    background:var(--plum);
    color:var(--cream);
    border:none;
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow);
    cursor:pointer;
    opacity:0; visibility:hidden;
    transform:translateY(10px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
  }
  .to-top.is-visible{opacity:1; visibility:visible; transform:translateY(0);}
  .to-top:hover, .to-top:focus-visible{background:var(--ink);}
  .to-top svg{width:20px; height:20px;}
  @media (max-width:480px){
    .to-top{right:16px; bottom:18px; width:44px; height:44px;}
  }

  /* =====================================================================
     Anpassungen für Gutenberg-Block-Markup
     ===================================================================== */

  /* blockGap ist in theme.json deaktiviert – Core injiziert keine 24px-Abstände mehr.
     Damit greifen aber die Browser-Standardmargins (1em) auf p, h1-h4 und Listen wieder.
     Dieser 0-Spezifitäts-Reset nullt sie; alle expliziten .class-Margins oben
     (Spezifität >= 0,1,0) gewinnen und setzen die Original-Abstände 1:1. */
  /* (block-gap-Fallback des Editors wird oben per :root :where(.is-layout-flow) neutralisiert.) */

  /* Nicht auf .wp-site-blocks scopen – dieser Wrapper fehlt im Editor-iframe,
     sonst kämen dort die UA-Margins zurück (Header/Marke verrutscht). */
  :where(p),
  :where(h1),
  :where(h2),
  :where(h3),
  :where(h4),
  :where(ul),
  :where(ol),
  :where(figure){margin:0;}

  /* Header-Marke vertikal exakt mittig, Site-Logo im Link-Wrapper */
  .topbar .brand{align-items:center;}
  .brand .wp-block-site-logo{margin:0; line-height:0;}
  .brand .custom-logo-link{display:flex; align-items:center; line-height:0; margin:0;}
  .topbar nav p{margin:0;}
  .topbar nav a{display:inline-block;}

  /* Hero-Mark: Site-Logo exakt wie Original (84% des 270px-Halos, object-fit contain).
     Überschreibt die Breiten-Vorgabe des Site-Logo-Blocks. */
  .mark-halo .wp-block-site-logo{width:84% !important; height:84%; margin:0; display:flex; align-items:center; justify-content:center;}
  .mark-halo .custom-logo-link{width:100%; height:100%; margin:0; display:flex; align-items:center; justify-content:center;}
  .mark-halo .custom-logo{width:100% !important; height:100% !important; object-fit:contain;
    filter:drop-shadow(0 14px 26px rgba(48,69,67,0.18));}

  /* Kacheln gleich hoch (CSS-Grid streckt beide auf Zeilenhöhe) */
  .columns{align-items:stretch;}
  .columns > .card{height:100%;}

  /* CTA als Button-Block: die Klasse .cta sitzt am WRAPPER (.wp-block-button.cta),
     dort darf NICHT die geerbte .cta-Pill-Optik landen (sonst doppelte, größere Pille).
     Wrapper neutralisieren, Pill-Optik nur auf den inneren Link legen. */
  .wp-block-buttons{margin:0;}
  .wp-block-button.cta{
    margin:0; padding:0; background:transparent; border-radius:0; box-shadow:none;
  }
  .wp-block-button.cta:hover, .wp-block-button.cta:focus-visible{transform:none; box-shadow:none;}
  .wp-block-button.cta .wp-block-button__link{
    display:inline-block;
    background:var(--plum); color:var(--cream);
    text-decoration:none;
    font-size:0.95rem; letter-spacing:0.03em; line-height:1.6;
    padding:14px 30px; border-radius:999px; border:none;
    box-shadow:var(--shadow);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .wp-block-button.cta .wp-block-button__link:hover,
  .wp-block-button.cta .wp-block-button__link:focus-visible{
    transform:translateY(-2px); box-shadow:0 22px 40px rgba(97,65,172,0.28);
  }

  /* Image-Block (Footer-Portrait) sitzt in <figure> – Abstände/Größe angleichen.
     Höhere Spezifität als Core-.wp-block-image-img (height:auto). */
  .footer-badge .wp-block-image,
  .footer-badge .wp-block-image figure,
  .footer-badge figure{margin:0; width:100%; height:100%; display:block;}
  .footer-badge .wp-block-image img{width:100%; height:100%; object-fit:cover;}

  /* Listen kommen als .wp-block-list (ul) – erben die .card/.offerings Regeln,
     Core-Padding zurücksetzen */
  .card .wp-block-list,
  .offerings.wp-block-list{padding-left:0;}
  .offerings.wp-block-list{padding:38px 44px;}
  @media (max-width:760px){ .offerings.wp-block-list{padding:30px 28px;} }
  @media (max-width:480px){ .offerings.wp-block-list{padding:26px 22px;} }

  /* =====================================================================
     Impressum / Legal-Seite (1:1 aus styles.css v2)
     ===================================================================== */
  .legal-page{ background:var(--cream); min-height:100vh; }
  .legal-hero{
    background:var(--green);
    padding:54px 0 44px;
    text-align:center;
  }
  .legal-hero .mark-halo{
    width:104px; height:104px;
    margin:0 auto 0;
  }
  .legal-hero h1{
    font-family:var(--font-display);
    font-weight:400;
    color:var(--ink);
    font-size:clamp(1.8rem, 4vw, 2.3rem);
    margin:18px 0 0;
  }
  .legal-content{
    max-width:640px;
    margin:0 auto;
    padding:56px 28px 70px;
  }
  .legal-content h2{
    font-family:var(--font-display);
    color:var(--plum);
    font-size:1.5rem;
    font-weight:400;
    margin:0 0 14px;
  }
  .legal-content h2:not(:first-child){margin-top:38px;}
  .legal-content p{margin:0 0 6px; line-height:1.65; font-size:1rem;}
  .legal-content a{color:var(--plum); text-decoration:none; border-bottom:1px solid rgba(97,65,172,0.32);}
  .legal-content a:hover, .legal-content a:focus-visible{border-color:var(--plum);}
  .legal-content .legal-source{margin-top:30px; font-size:0.82rem; opacity:0.7;}
  .legal-back{
    display:inline-block;
    margin-top:46px;
    font-size:0.92rem;
    color:var(--ink);
    text-decoration:none;
    border-bottom:1px solid rgba(48,69,67,0.35);
  }
  .legal-back:hover, .legal-back:focus-visible{color:var(--plum); border-color:var(--plum);}
  /* 0,2,0 schlägt .wp-block{margin:0} im Editor (siehe Footer-Kommentar). */
  .legal-back.legal-back{margin-top:46px;}
  @media (max-width:480px){
    .legal-content{padding:44px 22px 56px;}
  }

  /* Legal-Hero nutzt das Site-Logo als Marke (104px, ohne Halo-Schatten wie Original) */
  .legal-hero .mark-halo .wp-block-site-logo{width:100% !important; height:100%; margin:0; display:flex; align-items:center; justify-content:center;}
  .legal-hero .mark-halo .custom-logo{width:100% !important; height:100% !important; object-fit:contain;}

  /* =====================================================================
     NUR im Block-Editor (WYSIWYG-Angleich)
     Der Editor injiziert einen hartkodierten block-gap `:root :where(.is-layout-flow) > *
     { margin-block-start: 24px }` (0,1,0), den das Frontend via theme.json blockGap:null
     NICHT hat → im Editor rutschen Marke/2. Kachel/etc. 24px nach unten.
     `.editor-styles-wrapper` doppelt = Spezifität (0,2,0) schlägt die Editor-Regel und
     greift NUR im Editor (die Klasse existiert im Frontend nicht → 0 Nebenwirkung).
     Danach die wenigen bewusst gesetzten oberen Abstände wieder herstellen (== Frontend).
     ===================================================================== */
  /* (Der frühere .editor-styles-wrapper-„zero+restore"-Block ist entfernt:
     Abstände laufen jetzt über block-gap – identisch in Editor UND Frontend,
     siehe theme.json + per-Gruppe blockGap in den Templates.) */