/* ==========================================================================
   Studio Sonnenaufgang – Design-Tokens
   Palette aus Logo + Illustrationen, Typo self-hosted (Young Serif / Hanken Grotesk / Kalam)
   ========================================================================== */
@font-face{font-family:"Young Serif";src:url("/assets/fonts/young-serif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block;}
@font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/hanken-grotesk-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block;}
@font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/hanken-grotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:block;}
@font-face{font-family:"Yellowtail";src:url("/assets/fonts/yellowtail-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}   /* Pinselschwung wie das Logo-Lettering – nur für den Claim */
/* Metrik-Fallbacks gegen Layout-Shift beim Font-Swap */
@font-face{font-family:"Young Serif Fallback";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos");size-adjust:114.4%;ascent-override:91.4%;descent-override:32%;line-gap-override:0%;}
@font-face{font-family:"Hanken Grotesk Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica"),local("Arimo");size-adjust:92.3%;ascent-override:108.4%;descent-override:32.8%;line-gap-override:0%;}
@font-face{font-family:"Kalam Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:91%;ascent-override:116.8%;descent-override:58.4%;line-gap-override:0%;}

:root{
  --sonne:#F0A830;  --strahl:#F0D854;  --lichtgelb:#FCE478;
  --rinde:#60300C;  --tief:#3C180C;    --tusche:#483C30;
  --sand:#F0E4D8;   --innen:#FBF7F1;
  --holz:#E8D3AE;   --holz-kante:#C9A672;
  --altrosa:#B4786C;--oliv:#9C9078;    --wasser:#48606C;
  --linie:rgba(72,60,48,.28);
  --display:"Young Serif","Young Serif Fallback",Georgia,serif;
  --body:"Hanken Grotesk","Hanken Grotesk Fallback",system-ui,sans-serif;
  --hand:"Kalam","Kalam Fallback",cursive;
  --claim:"Yellowtail",cursive;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --rb:26px;
  --main-oben:clamp(18px,3vw,36px);            /* oberes Padding von main (Kopf rechnet damit) */
  --rolle:168px;                               /* Breite der Menü-Rolle */                                   /* Rahmenbreite (Holz) */
  --pad:clamp(20px,4.6vw,64px);                /* Innenabstand der Content-Box */
  --abschnitt:clamp(64px,9vw,120px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--sand);color:var(--tusche);font:400 1.0625rem/1.65 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
html.intro body{overflow:hidden}
html.intro .rahmen,html.intro .kopf-fix,html.intro .sticky-cta{visibility:hidden}
html.intro.uebergang .rahmen{visibility:visible}   /* unter der Intro-Ebene: nicht malen, keine zählbaren Shifts */
img,video{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--rinde);margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,1.2rem + 3.2vw,3.6rem);line-height:1.08;letter-spacing:-.005em}
h2{font-size:clamp(1.75rem,1.1rem + 2.2vw,2.7rem);line-height:1.12;display:flex;align-items:flex-start;gap:.45em}
h3{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);line-height:1.15}
p{margin:0}
a{color:var(--rinde);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--tief)}
:focus-visible{outline:3px solid var(--wasser);outline-offset:3px;border-radius:4px}
ul{margin:0;padding:0;list-style:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--innen);color:var(--rinde);padding:10px 16px;border:1.5px solid var(--rinde);border-radius:999px;font-weight:700}
.skip:focus{top:12px}

.label{font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--wasser);margin:0 0 .9rem}
.lead{font-size:clamp(1.08rem,1rem + .4vw,1.25rem);line-height:1.5;color:var(--tusche);max-width:38em}
.lead--schmal{max-width:34em;margin-top:.6rem}
.klein{font-size:.92rem;line-height:1.55;color:var(--wasser)}

/* Sonnenstrahlen-Kapitelmarke (Motiv des Logos) */
.sonne-marke{flex:none;width:.95em;height:.6em;margin-top:.26em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cg stroke='%23F0A830' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M32 4v9M14 11l5 7M50 11l-5 7M5 26h9M59 26h-9M22 6l3 8M42 6l-3 8'/%3E%3C/g%3E%3Cpath d='M12 38a20 20 0 0 1 40 0z' fill='%23F0C048' stroke='%23483C30' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}

/* Buttons – Sonnenorange ist NUR für die Buchen-Aktion reserviert */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--body);font-weight:700;font-size:1rem;line-height:1.2;padding:.85em 1.45em;border-radius:999px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background-color .25s var(--ease-out)}
.btn--sonne{background:var(--sonne);color:var(--tief);border-color:rgba(60,24,12,.4);box-shadow:0 2px 0 rgba(60,24,12,.28)}
.btn--sonne:hover{background:#F3B441;color:var(--tief);transform:translateY(-1px);box-shadow:0 4px 10px -2px rgba(60,24,12,.35)}
.btn--sonne:active{transform:translateY(1px);box-shadow:0 0 0 rgba(0,0,0,0)}
.btn--linie{background:transparent;color:var(--rinde);border-color:var(--rinde)}
.btn--linie:hover{background:rgba(96,48,12,.07);color:var(--tief)}
.btn--whatsapp{background:#3FE07E;color:var(--tief);border-color:rgba(16,96,52,.35);box-shadow:0 2px 0 rgba(16,96,52,.3)}
.btn--whatsapp svg{width:1.25em;height:1.25em;flex:none}
.btn--whatsapp:hover{background:#5BE893;color:var(--tief);transform:translateY(-1px);box-shadow:0 4px 10px -2px rgba(16,96,52,.35)}
.btn--whatsapp:active{transform:translateY(1px);box-shadow:0 0 0 rgba(0,0,0,0)}
.btn--gross{font-size:1.1rem;padding:1em 1.7em}
.btn--klein{font-size:.95rem;padding:.6em 1.15em}
/* Runder Hörer-Knopf: hell, neben dem Sonnen-Button – Hero, feste Kopfleiste, Sticky-Leiste */
.btn-hoerer{flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:var(--rinde);background:var(--innen);border:1.5px solid rgba(60,24,12,.4);box-shadow:0 2px 0 rgba(60,24,12,.28);text-decoration:none;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background-color .25s var(--ease-out)}
.btn-hoerer svg{width:46%;height:46%}
.btn-hoerer:hover{background:#fff;color:var(--tief);transform:translateY(-1px);box-shadow:0 4px 10px -2px rgba(60,24,12,.35)}
.btn-hoerer:active{transform:translateY(1px);box-shadow:0 0 0 rgba(0,0,0,0)}
.btn-hoerer--gross{width:56px;height:56px}
.btn-hoerer--klein{width:40px;height:40px}
.link-pfeil{font-weight:700;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:1px}
.link-pfeil::after{content:" ↓";font-weight:400}
.link-pfeil:hover{border-bottom-width:2px}

/* ==========================================================================
   Der Holzrahmen – die Content-Box
   ========================================================================== */
.rahmen{position:relative;max-width:1320px;margin:96px auto 48px;padding:var(--rb);isolation:isolate;
  box-shadow:0 34px 40px -8px rgba(60,24,12,.24),0 4px 6px rgba(60,24,12,.14)}
.rahmen__holz{position:absolute;inset:0;z-index:2;pointer-events:none}
.holz{position:absolute;display:block;background:var(--holz) url("/assets/img/holz-h-1400.webp") center/1400px auto repeat}
.holz::after{content:"";position:absolute;inset:0}
.holz--o{top:0;left:0;right:0;height:var(--rb);clip-path:polygon(0 0,100% 0,calc(100% - var(--rb)) 100%,var(--rb) 100%)}
.holz--u{bottom:0;left:0;right:0;height:var(--rb);clip-path:polygon(var(--rb) 0,calc(100% - var(--rb)) 0,100% 100%,0 100%)}
.holz--l{top:0;bottom:0;left:0;width:var(--rb);background-image:url("/assets/img/holz-v-800.webp");background-size:auto 1433px;clip-path:polygon(0 0,100% var(--rb),100% calc(100% - var(--rb)),0 100%)}
.holz--r{top:0;bottom:0;right:0;width:var(--rb);background-image:url("/assets/img/holz-v-800.webp");background-size:auto 1433px;clip-path:polygon(0 var(--rb),100% 0,100% 100%,0 calc(100% - var(--rb)))}
/* Bevel: Licht von oben links, weiche Kante innen */
.holz--o::after{background:linear-gradient(to bottom,rgba(255,255,255,.42),rgba(255,255,255,0) 32%,rgba(72,60,48,0) 68%,rgba(72,60,48,.16))}
.holz--u::after{background:linear-gradient(to top,rgba(72,60,48,.22),rgba(72,60,48,0) 32%,rgba(255,255,255,0) 68%,rgba(255,255,255,.28))}
.holz--l::after{background:linear-gradient(to right,rgba(255,255,255,.34),rgba(255,255,255,0) 32%,rgba(72,60,48,0) 68%,rgba(72,60,48,.14))}
.holz--r::after{background:linear-gradient(to left,rgba(72,60,48,.2),rgba(72,60,48,0) 32%,rgba(255,255,255,0) 68%,rgba(255,255,255,.26))}
/* Tuschekante außen + innen (wie in den Grafiken) */
.rahmen::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border:1.5px solid rgba(72,60,48,.6);border-radius:2px}
.rahmen__innen{position:relative;z-index:1;background:var(--innen);box-shadow:0 0 0 1.5px rgba(72,60,48,.5),inset 0 3px 10px rgba(72,60,48,.10)}
main{padding:var(--main-oben) var(--pad) var(--pad)}

/* Die Frau mit Dutt späht über die obere Rahmenkante */
.fig{pointer-events:none;user-select:none}
.fig--frau{display:none}   /* Kundenwunsch 26.08.: Figur über dem Rahmen aus (Markup bleibt) */

/* ==========================================================================
   Kopf + Hero
   ========================================================================== */
.kopf{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:12px}

.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center;padding-top:clamp(12px,2vw,28px)}
.hero .label{margin-bottom:1rem}
.hero .lead{margin-top:1.1rem}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:1.6rem}
.fakten{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:1.6rem;font-size:.92rem;color:var(--wasser);font-weight:700}
.fakten li{display:flex;align-items:center;gap:8px}
.fakten li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sonne);border:1.5px solid var(--tusche);flex:none}
.hero__bild{margin:0;aspect-ratio:784/437}
.hero__bild picture{display:block;height:100%}
.hero__bild img{width:100%;height:100%;object-fit:cover;border:1.5px solid rgba(72,60,48,.55);border-radius:4px;background:var(--sand);box-shadow:inset 0 0 0 4px rgba(255,255,255,.35),0 12px 30px -16px rgba(60,24,12,.35)}

/* ==========================================================================
   Abschnitte
   ========================================================================== */
section{margin-top:var(--abschnitt)}
.hero{margin-top:0}

/* Kurse als Bilderbuch-Szenen auf Sandgrund-Bändern */
.szene{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(36px,5vw,64px)}
.szene + .szene::before{content:"";position:absolute;left:50%;top:calc(-1 * clamp(36px,5vw,64px));height:clamp(36px,5vw,64px);width:2px;background:linear-gradient(var(--tusche) 45%,transparent 0) top/2px 9px repeat-y;opacity:.45}
.szene__bild{margin:0;background:var(--band,#F3EBE1);border-radius:6px;border:1.5px solid rgba(72,60,48,.35);overflow:hidden}
.szene__bild img{width:100%;height:auto}
.szene--yoga{--band:#F3F3ED}
.szene--gespraech .szene__bild,.szene--schach .szene__bild{--band:#F3EBE1}
.szene--gespraech .szene__text{order:-1}
.szene__text{position:relative}
.szene__text h3{margin-bottom:.7rem}
.szene__text .klein{max-width:29em}
.szene__text p + p{margin-top:.8rem}
.szene__text .btn{margin-top:1.4rem}
.fig--herr,.fig--mann{position:absolute;right:-8px;bottom:-18px;width:clamp(96px,10vw,140px);height:auto;z-index:2}

/* Preise als Häufigkeits-Skala: einmal — regelmäßig — jeden Monat */
.skala{position:relative;display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:clamp(16px,3vw,40px);margin-top:clamp(36px,5vw,56px);align-items:start}
.skala::before{content:"";position:absolute;left:6%;right:6%;top:9px;height:2px;background:linear-gradient(to right,var(--tusche) 45%,transparent 0) left/9px 2px repeat-x;opacity:.5}
.stufe{position:relative;padding:32px 0 0}
.stufe__wann{position:relative;font-weight:700;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--wasser);margin:0 0 1rem}
.stufe__wann::before{content:"";position:absolute;left:0;top:-31px;width:18px;height:18px;border-radius:50%;background:var(--sonne);border:2px solid var(--tusche);box-shadow:0 0 0 4px var(--innen)}
.stufe--anker .stufe__wann::before{background:var(--strahl);width:22px;height:22px;top:-33px;left:-2px}
.stufe--anker{background:var(--innen);border:1.5px solid rgba(72,60,48,.55);border-radius:8px;padding:32px 24px 24px;margin-top:-14px;box-shadow:0 18px 36px -24px rgba(60,24,12,.4)}
.stufe--anker .stufe__wann::before{left:22px}
.preis{display:flex;flex-direction:column;margin:.6rem 0 1rem}
.preis strong{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,1.6rem + 2vw,3rem);line-height:1;color:var(--rinde)}
.preis span{font-size:.92rem;color:var(--wasser);margin-top:.35rem}
.stufe ul li{display:flex;gap:10px;align-items:baseline;padding:.3rem 0}
.stufe ul li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sonne);border:1.5px solid var(--tusche);flex:none;transform:translateY(-2px)}
.notiz{position:absolute;top:-16px;right:18px;font-family:var(--hand);font-size:1.2rem;color:var(--rinde);background:var(--strahl);padding:2px 12px;border-radius:3px;transform:rotate(-3deg);box-shadow:0 2px 0 rgba(72,60,48,.25)}
.teetasse{position:absolute;right:-22px;bottom:-26px;width:92px;height:auto;pointer-events:none}
.preise__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px 32px;margin-top:clamp(28px,4vw,44px);padding-top:24px;border-top:1.5px solid var(--linie)}   /* 27.08.: nur noch der Button, mittig */
.preise__fuss .klein{max-width:44em}

/* Team */
.personen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,48px);margin-top:clamp(20px,3vw,32px)}
.person{display:block}
.person__bild{--fb:11px;--pp:8px;width:min(100%,220px)}
.person__bild img{aspect-ratio:3/4;object-fit:cover}
.person__text{margin-top:clamp(18px,2.5vw,26px)}
.person .label{margin:.35rem 0 .8rem}
.person__text p:not(.label){font-size:.98rem}
.person__mehr{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out)}   /* „Mehr über …“: Langtext klappt auf, Karten bleiben gleich hoch */
.person__mehr > div{overflow:hidden;visibility:hidden;transition:visibility 0s .45s}
.person__mehr.offen{grid-template-rows:1fr}
.person__mehr.offen > div{visibility:visible;transition:none}
.person__mehr-knopf{display:inline-block;margin-top:.55rem;padding:2px 0;border:0;border-bottom:1.5px solid var(--rinde);background:none;font:700 .95rem/1.3 var(--body);color:var(--rinde);cursor:pointer}
.person__mehr-knopf:hover{color:var(--tief);border-bottom-color:var(--tief)}
.person__mehr-knopf::after{content:" ↓";font-weight:400}
.person__mehr-knopf[aria-expanded="true"]::after{content:" ↑"}
.team__jobs{margin-top:clamp(28px,4vw,40px);padding-top:20px;border-top:1.5px solid var(--linie);max-width:48em}

/* Stimmen: drei Zettel, an die Rahmenkante geheftet */
.stimmen{margin-top:calc(var(--abschnitt) + 16px)}
.zettel-reihe{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin:0 calc(-1 * (var(--pad) + var(--rb) * .55))}
.zettel{position:relative;flex:1 1 0;max-width:340px;background:#F7EAA5;padding:30px 26px 22px;font-family:var(--hand);font-size:1.25rem;line-height:1.35;color:var(--tief);box-shadow:0 10px 24px -12px rgba(60,24,12,.5),0 1px 0 rgba(255,255,255,.5) inset;transform:rotate(-2.2deg)}
.zettel:nth-child(2){transform:rotate(1.6deg) translateY(18px)}
.zettel:nth-child(3){transform:rotate(-1.2deg)}
.zettel::before{content:"";position:absolute;left:50%;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--altrosa);border:2px solid var(--tusche);transform:translateX(-50%);box-shadow:0 3px 4px rgba(60,24,12,.35)}
.zettel blockquote{margin:0}
.zettel footer{margin-top:.6rem;font-size:1.05rem;color:var(--rinde)}

/* Studio & Anfahrt */
.kontakt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.kontakt .lead{margin-top:.6rem}
.adresse{font-style:normal;margin-top:1.6rem;line-height:1.55}
.adresse strong{font-family:var(--display);font-weight:400;font-size:1.25rem;color:var(--rinde)}
/* Kontaktwege als Knöpfe: Anrufen gefüllt (der schnellste Weg), der Rest als Linie */
.kontakt__aktionen{margin-top:1.4rem;display:grid;gap:10px;max-width:360px}
.kontakt__aktionen .btn{font-size:.95rem;padding:.7em 1.2em .7em 1em;justify-content:flex-start;gap:.6em}
.kontakt__aktionen .btn svg{width:1.25em;height:1.25em;flex:none}
.kontakt .klein{margin-top:1.3rem}
.kontakt__foto{margin:0}
.kontakt__foto img{width:100%;height:auto;border-radius:6px;border:1.5px solid rgba(72,60,48,.45)}
.kontakt__foto figcaption{margin-top:.6rem;font-size:.9rem;color:var(--wasser)}

/* FAQ */
.faq details{border-top:1.5px solid var(--linie)}
.faq details:last-of-type{border-bottom:1.5px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-weight:700;font-size:1.05rem;color:var(--rinde)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--tusche),var(--tusche)) center/100% 2px no-repeat,linear-gradient(var(--tusche),var(--tusche)) center/2px 100% no-repeat;transition:transform .3s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;max-width:60em}
.faq{max-width:820px;margin-left:auto;margin-right:auto}   /* Kundenwunsch 27.08.: FAQ mittig */
.faq h2{margin-bottom:12px;justify-content:center;text-align:center}

/* Footer */
/* Footer unter dem Holzrahmen: Signatur wie unter einem gerahmten Bild, darunter das Kleingedruckte auf dem Sandgrund */
.fuss{max-width:1320px;margin:0 auto;padding:6px var(--pad) 64px;display:grid;justify-items:center;text-align:center;gap:16px}
.fuss__claim{margin:0;font-family:var(--claim);font-size:clamp(1.75rem,1.4rem + 1.3vw,2.4rem);line-height:1.2;color:var(--rinde)}
.fuss__marke{width:36px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cg stroke='%23F0A830' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M32 4v9M14 11l5 7M50 11l-5 7M5 26h9M59 26h-9M22 6l3 8M42 6l-3 8'/%3E%3C/g%3E%3Cpath d='M12 34a20 20 0 0 1 40 0z' fill='%23F0A830' stroke='%23483C30' stroke-width='2.5'/%3E%3Cpath d='M4 34h56' stroke='%23483C30' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.9}
.fuss__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;font-weight:700;font-size:.95rem;letter-spacing:.03em}
.fuss__nav a{color:var(--rinde);text-decoration:none;border-bottom:1.5px solid transparent;transition:border-color .2s var(--ease-out)}
.fuss__nav a:hover{border-bottom-color:var(--sonne)}
.fuss__klein{margin:0;font-size:.85rem;line-height:1.6;color:var(--wasser);max-width:64em;text-wrap:balance}

/* Ruhiger Kopf beim Scrollen (Desktop) und Sticky-CTA (Mobil) */
.kopf-fix{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px clamp(16px,4vw,40px);background:rgba(251,247,241,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1.5px solid rgba(72,60,48,.3);transform:translateY(-105%);transition:transform .45s var(--ease-out)}
.kopf-fix.sichtbar{transform:translateY(0)}
.kopf-fix__marke{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--display);font-size:1.05rem;color:var(--rinde)}
.kopf-fix__marke img{height:34px;width:auto}
.kopf-fix__aktionen{display:flex;align-items:center;gap:10px}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(251,247,241,.95);border-top:1.5px solid rgba(72,60,48,.3);transform:translateY(110%);transition:transform .45s var(--ease-out)}
.sticky-cta.sichtbar{transform:translateY(0)}
.sticky-cta .btn{flex:1 1 auto}
.sticky-cta .btn-hoerer{width:50px;height:50px}

/* ==========================================================================
   Intro-Bühne
   ========================================================================== */
#intro{display:none;position:fixed;inset:0;z-index:100;background:var(--sand);overflow:hidden}
html.intro #intro{display:block}
.intro__stage{position:absolute;inset:0;overflow:hidden;transform-origin:50% 50%}
.plate{position:absolute;inset:0 0 2px 0;width:100%;height:calc(100% - 2px);object-fit:cover;object-position:50% 50%}   /* 2 px unter Vollbild: sonst ignoriert Chrome das Bild als „Hintergrund“ und misst LCP erst am Video */
.intro__stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0}
.glas{position:absolute;object-fit:cover;transform-origin:50% 100%}
.licht{position:absolute;background:var(--strahl);opacity:.45;mix-blend-mode:multiply;filter:blur(1px)}
.marker{position:absolute;pointer-events:none;visibility:hidden}
.wortfetzen{position:absolute;inset:0;font-family:var(--display);color:var(--tusche);overflow:hidden;pointer-events:none}
.wort{position:absolute;white-space:nowrap;opacity:0;font-size:clamp(1.15rem,3.6vw,3.2rem);line-height:1;text-shadow:0 0 14px var(--sand),0 0 3px var(--sand);transform:rotate(var(--rot,0deg));animation:wort-zittert .32s steps(3) infinite}
@keyframes wort-zittert{0%{transform:translate(0,0) rotate(var(--rot,0deg))}33%{transform:translate(6px,-4px) rotate(var(--rot,0deg))}66%{transform:translate(-5px,4px) rotate(var(--rot,0deg))}100%{transform:translate(3px,5px) rotate(var(--rot,0deg))}}
.stage--zittert{animation:kamera-zittert .5s steps(4) infinite}
@keyframes kamera-zittert{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(4px,-3px) rotate(.3deg)}50%{transform:translate(-4px,2px) rotate(-.25deg)}75%{transform:translate(2px,4px) rotate(.2deg)}100%{transform:translate(-3px,-2px) rotate(-.3deg)}}
.wort--hell{color:var(--innen);text-shadow:0 1px 0 var(--tusche),0 0 12px var(--tusche)}
.wort--klein{font-size:clamp(.9rem,2.4vw,1.8rem)}
.vignette{position:absolute;inset:-4%;background:radial-gradient(ellipse 62% 58% at 50% 50%,rgba(31,22,16,0) 55%,rgba(31,22,16,.92) 100%);opacity:0;pointer-events:none}
.lid{position:absolute;left:-14%;right:-14%;background:#22180F;pointer-events:none;filter:blur(9px)}
.lid--oben{top:-3%;height:74%;border-radius:0 0 50% 50% / 0 0 36% 36%;transform:translateY(-115%)}
.lid--unten{bottom:-3%;height:46%;border-radius:50% 50% 0 0 / 30% 30% 0 0;transform:translateY(115%)}
.dunkel{position:absolute;inset:0;background:#22180F;opacity:0;pointer-events:none}
.ausatmen{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-family:var(--display);font-size:clamp(1.9rem,5vw,3.8rem);color:var(--sand);opacity:0;letter-spacing:.01em;pointer-events:none}
.intro__ui{position:absolute;top:max(14px,env(safe-area-inset-top));left:14px;right:14px;display:flex;justify-content:space-between;z-index:9}
.intro__knopf{display:inline-flex;align-items:center;gap:8px;background:rgba(251,247,241,.88);color:var(--tusche);border:1.5px solid var(--tusche);border-radius:999px;padding:8px 14px;font:700 .9rem/1 var(--body);cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.intro__knopf:hover{background:var(--innen)}
.intro__knopf[aria-pressed="true"] .ton__welle{stroke:var(--sonne)}
.holz--statisch{right:auto;bottom:auto;box-shadow:0 0 0 1.5px rgba(72,60,48,.55)}
.geist-strip{position:fixed;z-index:6;box-shadow:0 0 0 1.5px rgba(72,60,48,.55);will-change:transform}
.geist-innen{position:fixed;z-index:5;background:var(--innen);opacity:0;will-change:transform;box-shadow:0 0 0 1.5px rgba(72,60,48,.5),inset 0 3px 10px rgba(72,60,48,.1)}
.geist-bild{position:fixed;z-index:7;will-change:transform;object-fit:cover;border:1.5px solid rgba(72,60,48,.55);border-radius:4px;background:var(--sand)}
.geist-logo{position:fixed;z-index:8;height:auto;will-change:transform}

/* ==========================================================================
   Gerahmte Fotos: kleine Holzrahmen aus derselben Esche wie der große Rahmen (border-image mit Gehrung + Bevel,
   Textur aus _work/fotos.py), Passepartout in Innen-Weiß, Tuschekanten.
   „haengt“ = an Nagel und Bilderschnur (Team, Kunstdruck, Fensterbild) · „steht“ = lehnt auf der Bilderleiste (Yoga-Arten)
   ========================================================================== */
.bild{--fb:13px;--pp:clamp(8px,1.2vw,12px);position:relative;margin:0;border:var(--fb) solid transparent;border-image:url("/assets/img/foto/rahmen-klein.webp") 40 / var(--fb) stretch;padding:var(--pp);background:var(--innen);background-clip:padding-box;box-shadow:0 0 0 1.5px rgba(72,60,48,.55),0 22px 34px -20px rgba(60,24,12,.55),0 3px 6px -2px rgba(60,24,12,.22);transform:rotate(var(--tilt,0deg))}
.bild::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(72,60,48,.35),inset 0 3px 8px rgba(72,60,48,.16)}
.bild picture{display:block}
.bild img{width:100%;height:auto;display:block;border:0;border-radius:0;box-shadow:0 0 0 1px rgba(72,60,48,.5)}
.bild figcaption{padding:10px 0 2px;text-align:center;font:700 .72rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--wasser)}
.bild--haengt{margin-top:40px;transform-origin:50% calc(-1 * var(--fb) - 32px)}
.bild--haengt::before{content:"";position:absolute;left:50%;top:calc(-1 * var(--fb) - 36px);width:min(64%,220px);height:36px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(circle at 50% 5px,#3C180C 2.4px,rgba(60,24,12,.5) 3px,transparent 4.2px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 32' preserveAspectRatio='none'%3E%3Cpath d='M2 32L100 3 198 32' fill='none' stroke='%23483C30' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 50% 100%/100% calc(100% - 4px)}
.bild--steht{transform:perspective(1200px) rotateX(4deg);transform-origin:50% 100%}

/* Yoga-Arten: drei Bilder auf einer Bilderleiste, darunter Schild + Ergebnis */
.stile__wand{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;column-gap:clamp(24px,4vw,56px);margin-top:clamp(44px,6vw,72px)}
.stile__wand::before{content:"";grid-column:1/-1;grid-row:1;align-self:end;height:12px;margin:0 calc(-1 * clamp(10px,1.6vw,22px));transform:translateY(100%);background:linear-gradient(to bottom,rgba(255,255,255,.38),rgba(255,255,255,0) 40%,rgba(72,60,48,.14)),var(--holz) url("/assets/img/holz-h-1400.webp") center/1400px auto repeat;box-shadow:0 0 0 1.5px rgba(72,60,48,.5),0 10px 14px -6px rgba(60,24,12,.42);border-radius:1px}
.stil{display:grid;grid-row:1/3;grid-template-rows:subgrid;align-items:end}
.stil:nth-child(1){grid-column:1}
.stil:nth-child(2){grid-column:2}
.stil:nth-child(3){grid-column:3}
.stil__bild{grid-row:1;align-self:end;width:100%}
.stil__text{grid-row:2;align-self:start;padding-top:clamp(30px,3.5vw,46px)}
.stil__text h3{margin:0 0 .7rem;font-size:clamp(1.3rem,1.05rem + .8vw,1.6rem)}
.stil__text p + p{margin-top:.7rem}
.stil::after{content:"";display:none}
.schild{position:relative;display:inline-block;font:700 .72rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--rinde);background:var(--innen);border:1.5px solid rgba(72,60,48,.55);border-radius:2px;padding:7px 15px;margin:0 0 .9rem;box-shadow:0 1.5px 0 rgba(72,60,48,.22)}
.schild::before,.schild::after{content:"";position:absolute;top:50%;width:4px;height:4px;border-radius:50%;background:var(--tusche);opacity:.5;transform:translateY(-50%)}
.schild::before{left:4px}
.schild::after{right:4px}
.stile__level{display:grid;grid-template-columns:1fr 1fr minmax(180px,220px);grid-template-rows:auto auto;gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(44px,6vw,80px);padding-top:clamp(28px,4vw,40px);border-top:1.5px solid var(--linie)}
.stile__level h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.55rem);margin-bottom:.6rem}
.stile__level-text p{max-width:30em}
.stile__fenster{--fb:11px;--pp:8px;--tilt:-2deg;grid-column:3;grid-row:1/3;justify-self:end;align-self:center;width:min(100%,220px);margin-top:44px}
.stile__cta{grid-column:1/3;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(4px,1vw,12px)}
.link-pfeil--weiter::after{content:" →"}

/* Anfahrt: Google-Karte im Holzrahmen (per Filter in die Sandpalette gezogen) + Wegweiser mit Tuschefaden */
.anfahrt__raster{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(28px,4vw,44px)}
.karte{width:100%;margin-top:44px}
.karte__glas{position:relative;aspect-ratio:4/3;background:var(--sand);box-shadow:0 0 0 1px rgba(72,60,48,.5);overflow:hidden}
.karte__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;filter:sepia(.5) saturate(.72) hue-rotate(-8deg) brightness(1.03) contrast(.92)}
.karte__glas::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(72,60,48,.35),inset 0 0 40px rgba(96,48,12,.10)}
.karte figcaption{letter-spacing:.1em}
/* Maus-Geräte: Karte erst nach Klick bewegbar, sonst frisst sie das Mausrad beim Scrollen */
.karte__deckel{display:none}
@media (hover:hover) and (pointer:fine){
  .karte__deckel{display:flex;align-items:flex-end;justify-content:center;position:absolute;inset:0;z-index:2;padding:0 0 46px;border:0;background:transparent;cursor:pointer;font:700 .8rem/1 var(--body);color:var(--tusche);transition:opacity .3s var(--ease-out)}
  .karte__deckel span{background:rgba(251,247,241,.92);border:1.5px solid rgba(72,60,48,.5);border-radius:999px;padding:8px 14px;box-shadow:0 2px 6px rgba(60,24,12,.18)}
  .karte__deckel:hover span{background:var(--innen)}
  .karte__glas.aktiv .karte__deckel{opacity:0;pointer-events:none}
}
.weg{position:relative;display:grid;gap:clamp(18px,2.5vw,26px);margin:0;padding:0 0 0 34px;list-style:none}
.weg::before{content:"";position:absolute;left:8px;top:10px;bottom:14px;width:2px;background:linear-gradient(var(--tusche) 45%,transparent 0) top/2px 9px repeat-y;opacity:.5}
.weg__halt{position:relative}
.weg__halt::before{content:"";position:absolute;left:-34px;top:6px;width:18px;height:18px;border-radius:50%;background:var(--innen);border:2px solid var(--tusche);box-shadow:0 0 0 4px var(--innen)}
.weg__halt--ziel::before{background:var(--sonne)}
.weg__linien{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.45rem}
.linie{display:inline-block;font:700 .74rem/1 var(--body);letter-spacing:.06em;padding:5px 9px;border-radius:4px;border:1.5px solid rgba(72,60,48,.55);white-space:nowrap}
.linie--tram{background:var(--wasser);color:var(--innen)}
.linie--s{background:var(--rinde);color:var(--sand)}
.linie--bus{background:var(--strahl);color:var(--tief)}
.linie--ziel{background:var(--sonne);color:var(--tief)}
.weg__name{font-family:var(--display);font-size:clamp(1.15rem,1rem + .5vw,1.35rem);line-height:1.2;color:var(--rinde)}
.weg__halt .klein{margin-top:.25rem}
.anfahrt__weg .btn{margin-top:clamp(24px,3vw,32px)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .szene,.szene--gespraech{grid-template-columns:1fr}
  .szene--gespraech .szene__text{order:0}
  .kontakt{grid-template-columns:1fr}
  .personen{grid-template-columns:1fr;gap:36px}
  .person{display:grid;grid-template-columns:170px 1fr;gap:clamp(16px,3vw,28px);align-items:start}
  .person__bild{width:100%}
  .person__text{margin-top:0}
  /* Yoga-Arten: untereinander, jedes Bild auf seiner eigenen Leiste */
  .stile__wand{grid-template-columns:1fr;grid-template-rows:none;row-gap:44px}
  .stile__wand::before{display:none}
  .stile__wand .stil{grid-row:auto;grid-column:1;grid-template-rows:auto auto;justify-items:center}
  .stil__bild{width:min(100%,280px);grid-column:1}
  .stil::after{display:block;grid-row:1;grid-column:1;align-self:end;justify-self:center;width:min(100%,312px);height:11px;transform:translateY(100%);background:linear-gradient(to bottom,rgba(255,255,255,.38),rgba(255,255,255,0) 40%,rgba(72,60,48,.14)),var(--holz) url("/assets/img/holz-h-1400.webp") center/1400px auto repeat;box-shadow:0 0 0 1.5px rgba(72,60,48,.5),0 10px 14px -6px rgba(60,24,12,.42)}
  .stil__text{width:100%;max-width:38em;padding-top:30px}
  .stile__level{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:28px}
  .stile__cta{grid-column:1/-1;grid-row:auto}
  .stile__fenster{grid-column:1/-1;grid-row:auto;justify-self:center;width:200px;margin-top:48px}
  .anfahrt__raster{grid-template-columns:1fr;gap:36px}
  .karte__glas{aspect-ratio:4/5}
}
@media (max-width:720px){
  :root{--rb:13px;--main-oben:14px;--rolle:134px}
  .rahmen{margin:54px 8px 22px;box-shadow:0 18px 24px -6px rgba(60,24,12,.24)}
  main{padding:var(--main-oben) var(--pad) 28px}
  .kopf{padding-bottom:6px}
  .hero{grid-template-columns:1fr;gap:20px;padding-top:6px}
  .hero .label{margin-bottom:.6rem;font-size:.7rem;letter-spacing:.06em}
  h1{font-size:clamp(1.85rem,6.4vw,2.4rem)}
  .hero .lead{margin-top:.7rem;font-size:1.02rem}
  .hero__cta{margin-top:1.1rem;gap:14px 20px}
  .btn--gross{font-size:1.02rem;padding:.9em 1.4em}
  .fakten{margin-top:1rem;gap:6px 14px;font-size:.85rem}
  .hero__bild{max-width:min(100%,250px);margin:8px auto 0;aspect-ratio:409/707}
  .szene__bild{margin:0 calc(-1 * var(--pad));border-radius:0;border-left:0;border-right:0}
  .fig--herr,.fig--mann{width:88px;right:-6px;bottom:-10px}
  .skala{grid-template-columns:1fr;gap:28px;margin-left:10px}
  .skala::before{left:8px;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(var(--tusche) 45%,transparent 0) top/2px 9px repeat-y}
  .stufe{padding:0 0 0 34px}
  .stufe__wann::before{left:-34px;top:0}
  .stufe--anker{margin-top:0;padding:24px 20px 22px 34px}
  .stufe--anker .stufe__wann::before{left:-36px;top:-2px}
  .notiz{top:-14px;right:12px;font-size:1.05rem}
  .teetasse{width:66px;right:-14px;bottom:-18px}
  .person{grid-template-columns:1fr}
  .person__bild{width:min(100%,200px)}
  .person__text{margin-top:16px}
  .stile__level{grid-template-columns:1fr}
  .stile__cta .btn{width:100%}
  .anfahrt__weg .btn{width:100%}
  .karte figcaption{font-size:.66rem;letter-spacing:.08em}
  .karte{margin-left:calc(-1 * var(--pad) + 12px);margin-right:calc(-1 * var(--pad) + 12px);width:auto}
  .bild{--fb:11px}
  .zettel-reihe{flex-direction:column;align-items:center;margin:0}
  .zettel{max-width:100%;width:100%;transform:rotate(-1.5deg)}
  .zettel:nth-child(2){transform:rotate(1.2deg)}
  .zettel:nth-child(3){transform:rotate(-.8deg)}
  .sticky-cta{display:flex}
  .kopf-fix{display:none}
  .kontakt__aktionen{max-width:none}
  .kontakt__aktionen .btn{white-space:normal;text-align:left;word-break:break-word}
  body:has(.sticky-cta) .fuss{padding-bottom:calc(96px + env(safe-area-inset-bottom))}   /* nur wo die Sticky-Leiste liegt */
  .fuss__nav{gap:8px 18px;font-size:.9rem}
  .intro__knopf{padding:9px 13px;font-size:.85rem}
}
@media (max-width:400px){
  .hero__cta{flex-wrap:nowrap;gap:12px}
  .hero__cta .btn--gross{flex:1 1 auto;width:auto;min-width:0;padding:.9em 1em;font-size:clamp(.9rem,4vw,1.02rem)}
  .hero__cta .btn-hoerer--gross{width:46px;height:46px}
  .preise__fuss .btn{width:100%}
}

/* Reduced Motion: kein Intro, keine Bewegung außer Opacity */
@media (prefers-reduced-motion:reduce){
  #intro{display:none!important}
  html.intro body{overflow:auto}
  .kopf-fix,.sticky-cta,.btn,.btn-hoerer,.faq summary::after,.person__mehr,.person__mehr > div{transition:none}
  .btn--sonne:hover,.btn--whatsapp:hover{transform:none}
}

/* ==========================================================================
   Holz-Logo: die obere Rahmenleiste umschlingt das Logo (Varianten a/b/c per html[data-logo])
   Maße in Einheiten der Rahmenbreite --rb, aus _work/gen/logo-holz-*.json
   ========================================================================== */
html[data-logo="a"]{--hl-breite:22.7143;--hl-oben:5.4603;--hl-unten:5.8413;--hl-lx:31.474%;--hl-ly:13.871%;--hl-lw:36.911%}
html[data-logo="b"]{--hl-breite:23.5969;--hl-oben:5.9767;--hl-unten:6.4961;--hl-lx:28.548%;--hl-ly:11.623%;--hl-lw:42.970%}
html[data-logo="c"]{--hl-breite:14.5909;--hl-oben:4.6932;--hl-unten:4.7273;--hl-lx:30.779%;--hl-ly:22.039%;--hl-lw:37.664%}
html[data-logo="e"]{--hl-breite:14.5909;--hl-oben:4.6932;--hl-unten:4.7273;--hl-lx:30.779%;--hl-ly:22.039%;--hl-lw:37.664%}
html[data-logo="f"]{--hl-breite:22.2479;--hl-oben:7.9421;--hl-unten:6.3802;--hl-lx:35.832%;--hl-ly:31.478%;--hl-lw:28.269%}
html[data-logo] .holzlogo{display:block;position:absolute;z-index:4;left:50%;top:calc(-1 * var(--rb) * var(--hl-oben));width:calc(var(--rb) * var(--hl-breite));transform:translateX(-50%);pointer-events:none}
.holzlogo__holz{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 5px rgba(72,60,48,.14))}
.holzlogo #logo{position:absolute;left:var(--hl-lx);top:var(--hl-ly);width:var(--hl-lw);height:auto;pointer-events:auto;filter:drop-shadow(0 1px 1px rgba(60,24,12,.14))}
.holzlogo:focus-visible{outline:none}
.holzlogo:focus-visible #logo{outline:3px solid var(--sonne);outline-offset:6px;border-radius:8px}

html[data-logo] .rahmen{margin-top:calc(var(--rb) * var(--hl-oben) + 30px)}
html[data-logo] .kopf{justify-content:center;align-items:center;min-height:0;padding-top:calc(var(--rb) * var(--hl-unten) - var(--main-oben) - 5px)}   /* Menü-Rolle mittig, 5px auf die Logo-Unterkante geschoben */
html:not([data-logo]) .holzlogo{display:none}
@media (max-width:720px){
  html[data-logo]{--rb:16px}
  html[data-logo="c"],html[data-logo="e"]{--rb:20px}
  html[data-logo] .rahmen{margin-top:calc(var(--rb) * var(--hl-oben) + 14px)}
}
.holzlogo__bild{display:none}
html[data-logo="a"] .holzlogo__bild--a,html[data-logo="b"] .holzlogo__bild--b,html[data-logo="c"] .holzlogo__bild--c,html[data-logo="e"] .holzlogo__bild--e,html[data-logo="f"] .holzlogo__bild--f{display:block}

/* ==========================================================================
   Yogamatten-Menü (alle Breiten): die eingerollte Matte unter dem Logo wird angehoben und rollt über den Hero ab.
   Bewegung = Frame-Sequenz auf Canvas (seite.js); hier nur Lage, Schatten, Text auf der Matte.
   ========================================================================== */
.kopf__rechts{display:flex;flex-direction:column;align-items:center}
.matte-knopf{display:block;position:relative;width:var(--rolle);padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px}
.matte-knopf img{width:100%;height:auto;filter:drop-shadow(0 2px 2px rgba(60,24,12,.25))}
.matte-knopf span{position:absolute;inset:0;display:grid;place-items:center;padding-left:.24em;font-family:var(--display);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sand);text-shadow:0 1px 0 rgba(0,0,0,.35)}
.matte-knopf.unsichtbar{visibility:hidden}
html.matte-offen body{overflow:hidden}
.matte{display:block;position:fixed;inset:0;z-index:80}
.matte__grund{position:absolute;inset:0;background:rgba(72,60,48,.45);opacity:0}
.matte__lage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.matte__schatten{position:absolute;border-radius:8px;box-shadow:0 22px 44px -12px rgba(60,24,12,.6),0 6px 14px -4px rgba(60,24,12,.35);opacity:0;pointer-events:none}
.matte__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.matte__rolle{position:absolute;left:0;right:0;top:0;height:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.matte__nav{position:absolute;left:8.6%;right:8.6%;top:2.3%;bottom:13.5%;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(18px,7%,34px) clamp(16px,8%,30px) 0;clip-path:inset(0 0 100% 0)}
.matte__nav > a:not(.btn){font-family:var(--display);font-size:clamp(1.6rem,8.4vw,2rem);line-height:1.15;color:var(--sand);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.matte__nav > a:not(.btn):active{color:var(--strahl)}
.matte__nav .btn{margin-top:auto;font-size:1.02rem;padding:.8em 1.4em}
.matte__nav > a.matte__tel{font-family:var(--body);font-weight:700;font-size:.95rem;color:var(--sand);opacity:.85;text-decoration:none;margin-top:4px;padding:0;border:0}
.matte__zu{position:absolute;top:8px;right:0;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--sand);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:50%}
/* Desktop-Matte ist höher → nach Viewport-Höhe gestaffelt: ab 740px größere Punkte + Formate-Block, ab 860px zusätzlich Studio-Block; darunter wie mobil */
.matte__mehr{display:none;flex-direction:column;align-items:flex-start;gap:5px;margin-top:22px;font-family:var(--body);font-size:1rem;color:var(--sand)}
.matte__mehr + .matte__mehr{margin-top:20px}
.matte__label{font-weight:700;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--strahl);margin-bottom:3px}
.matte__mehr a{color:var(--sand);text-decoration:none;border-bottom:1.5px solid transparent}
.matte__mehr a:hover{border-bottom-color:var(--strahl)}
@media (min-width:721px){
  .matte__nav > a:not(.btn):hover{color:var(--strahl)}
}
@media (min-width:721px) and (min-height:740px){
  .matte__nav{gap:12px}
  .matte__nav > a:not(.btn):not(.matte__tel){font-size:2.4rem}
  .matte__nav .btn{font-size:1.08rem}
  .matte__mehr--formate{display:flex}
}
@media (min-width:721px) and (min-height:860px){
  .matte__mehr--studio{display:flex}
}
.matte:focus{outline:none}
.matte :focus-visible{outline-color:var(--strahl)}

/* ==========================================================================
   Hintergrundmuster auf dem Sandgrund (Varianten a/b/c per html[data-muster]): gezeichnete Motive in Rindenbraun, sehr leicht
   ========================================================================== */
html[data-muster] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-repeat:repeat;opacity:.085}
html[data-muster="a"] body::before{background-image:url(/assets/img/muster/lotus-2x.webp);background-size:160px 150px}
html[data-muster="b"] body::before{background-image:url(/assets/img/muster/mandala-2x.webp);background-size:220px 220px;opacity:.07}
html[data-muster="c"] body::before{background-image:url(/assets/img/muster/sonne-2x.webp);background-size:170px 150px}