/* ============================================================
   Yoga by Maike — Corporate Design Stylesheet
   Fonts: Playfair Display (primary) · Panchang (sender font)
   ============================================================ */

/* ---------- 0. Self-hosted webfonts (GDPR-safe, no third party) ------- */
/* Playfair Display — SIL Open Font License, files from fonts.google.com   */
@font-face{font-family:"Playfair Display"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/playfair-display-v40-latin-regular.woff2") format("woff2");}
@font-face{font-family:"Playfair Display"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/playfair-display-v40-latin-700.woff2") format("woff2");}
@font-face{font-family:"Playfair Display"; font-style:italic; font-weight:400; font-display:swap;
  src:url("fonts/playfair-display-v40-latin-italic.woff2") format("woff2");}
@font-face{font-family:"Playfair Display"; font-style:italic; font-weight:500; font-display:swap;
  src:url("fonts/playfair-display-v40-latin-500italic.woff2") format("woff2");}
@font-face{font-family:"Playfair Display"; font-style:italic; font-weight:600; font-display:swap;
  src:url("fonts/playfair-display-v40-latin-600italic.woff2") format("woff2");}
@font-face{font-family:"Playfair Display"; font-style:italic; font-weight:700; font-display:swap;
  src:url("fonts/playfair-display-v40-latin-700italic.woff2") format("woff2");}
@font-face{font-family:"Playfair Display"; font-style:italic; font-weight:800; font-display:swap;
  src:url("fonts/playfair-display-v40-latin-800italic.woff2") format("woff2");}

/* Panchang — one variable file covers Extralight 200 to Bold 700         */
@font-face{font-family:"Panchang"; font-style:normal; font-weight:200 700; font-display:swap;
  src:url("fonts/Panchang-Variable.woff2") format("woff2");}

/* ---------- 1. Design tokens ---------------------------------- */
:root{
  /* Earth — Sthira (steadiness) */
  --erde-900:#251D1A;
  --erde-800:#2E2420;
  --erde-700:#3B2E28;
  --erde-600:#5A463C;
  --erde-500:#8A7365;
  --erde-400:#C2AE9D;
  --erde-300:#D8CCC0;
  --erde-200:#E7DFD6;
  --erde-100:#F5F1EC;

  /* Sky — Sukha (ease) */
  --himmel-600:#2C79D6;
  --himmel-500:#4995EB;
  --himmel-300:#8FBDF3;
  --himmel-100:#C8DAF2;
  --indigo-800:#2E3A5C;
  --indigo-600:#4B6099;
  --indigo-400:#8794BC;

  /* Neutral */
  --nebel:#D9D9D9;
  --nebel-hell:#ECECEC;
  --weiss:#FFFFFF;

  /* Semantic */
  --bg:var(--weiss);
  --bg-soft:var(--nebel);
  --text:var(--erde-900);
  --text-muted:var(--erde-600);
  --line:rgba(37,29,26,.16);
  --accent:var(--himmel-500);

  /* Type */
  --font-display:"Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-sender:"Panchang", "Futura", "Avenir Next", system-ui, sans-serif;

  /* Rhythm */
  --bar-h:74px;
  --gutter:clamp(20px, 6vw, 88px);
  --section-y:clamp(72px, 12vh, 152px);
  --measure:62ch;
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (max-width:760px){ :root{ --bar-h:68px; --brand-w:76px; } }

/* ---------- 2. Base ------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  color-scheme:light;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-display);
  font-size:clamp(16px,.62vw + 14px,19px);
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

/* Headlines are always italic; emphasis comes from weight, never colour */
h1,h2,h3{
  font-style:italic;
  font-weight:600;
  line-height:1.12; letter-spacing:-.012em; margin:0; text-wrap:balance;
}
h1 strong,h2 strong,h3 strong{font-weight:800; font-style:italic; color:inherit}
h1 em,h2 em,h3 em{font-style:italic; font-weight:800; color:inherit}
h1{font-size:clamp(2.6rem,7.4vw,4.6rem)}
h2{font-size:clamp(2rem,4.6vw,3.3rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.9rem); font-weight:500}
h3 strong,h3 em{font-weight:700}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
em{font-style:italic}

/* Sender font — labels, eyebrows, buttons, navigation */
.sender,.eyebrow,.btn,.footer-nav a,.legal-nav a,label,.tag{
  font-family:var(--font-sender);
  font-weight:400;
  font-style:normal;          /* Panchang has no italic — never inherit one */
  text-transform:uppercase;
  letter-spacing:.24em;
}

.eyebrow{
  display:block;
  font-size:.87rem;
  color:var(--erde-500);
  margin:0 0 1.4rem;
}
.eyebrow--light{color:rgba(255,255,255,.62)}

/* ---------- 3. Layout helpers --------------------------------- */
.wrap{width:100%; max-width:1320px; margin-inline:auto; padding-inline:var(--gutter)}
.wrap--narrow{max-width:820px}
.section{padding-block:var(--section-y)}
section[id]{scroll-margin-top:calc(var(--bar-h) + 24px)}
.center{text-align:center}
.measure{max-width:var(--measure); margin-inline:auto}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--erde-900); color:#fff; padding:12px 20px;
}
.skip-link:focus{left:12px; top:12px}

/* ---------- 4. Header / logo ---------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--bar-h);
  padding-top:env(safe-area-inset-top, 0px);
  box-sizing:content-box;
  display:flex; align-items:center; justify-content:center;
  background:rgba(37,29,26,var(--bar-alpha,0));
  transition:background .45s var(--ease), box-shadow .45s var(--ease);
  pointer-events:none;
}
.site-header.is-solid{box-shadow:0 1px 0 rgba(255,255,255,.07)}

.brand{
  pointer-events:auto;
  display:block; color:#fff; line-height:0;
  transform-origin:top center;
  transform:translateY(var(--brand-y,0px)) scale(var(--brand-s,1));
  transition:transform .12s linear;
  will-change:transform;
}
.brand svg{width:var(--brand-w,88px); height:auto; display:block}
.brand:focus-visible{outline:2px solid #fff; outline-offset:8px}

/* Inner pages: static solid bar, no hero transition */
.site-header--static{background:var(--erde-900)}
.site-header--static .brand{transform:none}

/* ---------- 5. Hero ------------------------------------------- */
.hero{position:relative; background:var(--erde-900)}
.hero img{
  width:100%;
  height:clamp(460px,82vh,940px);
  object-fit:cover; object-position:center 42%;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(37,29,26,.42) 0%, rgba(37,29,26,0) 34%);
  pointer-events:none;
}

/* ---------- 6. Intro ------------------------------------------ */
.intro{
  background:var(--nebel);
  padding-block:clamp(56px,10vw,120px);
  text-align:center;
}
.intro h1{margin-bottom:clamp(28px,5vw,52px)}
.intro h1 strong{display:block}
.intro p{
  text-wrap:balance;
  font-size:clamp(1.28rem,2.1vw,1.75rem);
  line-height:1.55;
  max-width:32ch; margin-inline:auto;
}
.intro p + p{margin-top:1.8em}

/* ---------- 7. Alternating blocks ----------------------------- */
.block{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  gap:clamp(32px,5vw,84px);
}
.block__text{max-width:52ch}
.block--flip .block__media{order:2}
.block--flip .block__text{order:1}

@media (max-width:860px){
  .block{grid-template-columns:1fr; gap:clamp(28px,7vw,48px)}
  .block--flip .block__media,.block--flip .block__text{order:initial}
}

.block h2{margin-bottom:.6em}


/* ---------- 8. Image placeholders ----------------------------- */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(135deg, rgba(37,29,26,.028) 0 2px, transparent 2px 9px),
    var(--erde-200);
  border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem; text-align:center; padding:2rem;
  color:var(--erde-600);
}
.ph--45{aspect-ratio:4/5}
.ph--11{aspect-ratio:1/1}
.ph--169{aspect-ratio:16/9}
.ph--32{aspect-ratio:3/2}
.ph__num{
  font-family:var(--font-sender); font-weight:400;
  font-size:.83rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--erde-500);
}
.ph__label{font-size:1.05rem; font-style:italic; color:var(--erde-600); max-width:26ch; line-height:1.5}
.ph__mark{width:26px; height:26px; border:1px solid var(--erde-400); border-radius:50%}
.ph--dark{background:var(--erde-800); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.7)}
.ph--dark .ph__num{color:rgba(255,255,255,.5)}
.ph--dark .ph__label{color:rgba(255,255,255,.7)}
.ph--dark .ph__mark{border-color:rgba(255,255,255,.35)}

/* ---------- 9. Buttons ---------------------------------------- */
.btn{
  display:inline-block;
  font-size:.85rem;
  padding:1.05em 2.4em;
  border:1px solid currentColor;
  text-decoration:none;
  background:transparent;
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn--dark{color:var(--erde-900)}
.btn--dark:hover,.btn--dark:focus-visible{background:var(--erde-900); color:#fff}
.btn--light{color:#fff}
.btn--light:hover,.btn--light:focus-visible{background:#fff; color:var(--erde-900)}
.btn--solid{background:var(--erde-900); color:#fff; border-color:var(--erde-900)}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--himmel-500); border-color:var(--himmel-500)}
.btn-row{margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.8rem}

/* Der Weg zurück, am Fuß jeder Unterseite. Leiser als ein Button im Text:
   er beschließt die Seite, er ruft nicht. */
.backhome{padding:0 0 clamp(56px,8vw,104px)}
.backhome .btn{
  color:var(--erde-500); border-color:var(--erde-300);
  padding:.9em 1.9em; font-size:.8rem;
}
.backhome .btn:hover,.backhome .btn:focus-visible{
  color:var(--erde-900); border-color:var(--erde-900);
}
.backhome .btn span{margin-right:.5em; opacity:.75}

/* ---------- 10. Quote band ------------------------------------ */
.band{
  background:var(--erde-900); color:#fff;
  padding-block:clamp(88px,16vh,180px);
  text-align:center;
}
.band--sky{background:var(--indigo-600)}
.band--himmel{background:var(--himmel-500)}
.band__quote{
  text-wrap:balance;
  font-size:clamp(1.9rem,4.4vw,3.2rem);
  font-style:italic; line-height:1.24;
  max-width:18ch; margin-inline:auto;
}
.band__quote strong{font-weight:700; font-style:italic}
.band__sub{
  margin-top:1.6em; font-size:clamp(1rem,1.5vw,1.2rem);
  color:rgba(255,255,255,.78); max-width:44ch; margin-inline:auto; font-style:italic;
}

/* ---------- 11. Footer ---------------------------------------- */
.site-footer{
  background:var(--erde-900); color:rgba(255,255,255,.76);
  padding-block:clamp(62px,9vw,104px) 0;
  font-size:.95rem;
}
.site-footer a{color:rgba(255,255,255,.76); text-decoration:none; transition:color .3s var(--ease)}
.site-footer a:hover,.site-footer a:focus-visible{color:#fff}
.footer-grid{
  display:grid; gap:clamp(36px,5vw,64px);
  grid-template-columns:1.4fr 1fr 1fr;
}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1/-1} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr} }

.footer-brand svg{width:94px; color:#fff}
.footer-brand p{margin-top:1.6rem; max-width:34ch; font-style:italic; color:rgba(255,255,255,.6)}
.footer-col h4{
  font-family:var(--font-sender); font-weight:400; font-size:.83rem;
  letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin:0 0 1.3rem;
}
.footer-nav{list-style:none; margin:0; padding:0; display:grid; gap:.85rem}
.footer-nav a{
  font-family:var(--font-sender); font-weight:400;
  font-size:.85rem; letter-spacing:.2em; text-transform:uppercase;
}
.footer-bottom{
  margin-top:clamp(48px,7vw,84px);
  border-top:1px solid rgba(255,255,255,.14);
  padding-block:1.6rem 2rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-family:var(--font-sender); font-weight:400;
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.42);
}

/* ---------- 12. Back to top ----------------------------------- */
.to-top{
  position:fixed; right:clamp(16px,3vw,34px); bottom:clamp(16px,3vw,34px);
  z-index:70;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--erde-900); color:#fff;
  border:1px solid rgba(255,255,255,.18);
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, background .3s;
}
.to-top.is-visible{opacity:1; visibility:visible; transform:none}
.to-top:hover,.to-top:focus-visible{background:var(--himmel-500)}
.to-top svg{width:15px; height:15px}

/* ---------- 13. Inner pages ----------------------------------- */
.page-head{
  background:var(--nebel);
  padding-top:calc(var(--bar-h) + clamp(56px,9vw,104px));
  padding-bottom:clamp(44px,7vw,80px);
  text-align:center;
}
.page-head h1{font-size:clamp(2.2rem,5.4vw,3.6rem)}
.page-head h1 em{font-style:italic}
.page-head p{margin-top:1.4rem; max-width:44ch; margin-inline:auto; color:var(--erde-600)}

.prose{max-width:74ch; margin-inline:auto}
.prose h2{font-size:clamp(1.4rem,2.6vw,2rem); margin:2.6em 0 .7em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.15rem; margin:2em 0 .5em}
.prose p,.prose li{font-size:1rem; line-height:1.85}
.prose ul{padding-left:1.2em; margin:0 0 1.2em}
.prose li{margin-bottom:.5em}
.prose a{color:var(--himmel-600)}
.todo{
  background:var(--himmel-100);
  border-left:3px solid var(--himmel-500);
  padding:1rem 1.2rem; margin:1.5rem 0;
  font-size:.92rem; font-style:italic; color:var(--indigo-800);
}
.todo strong{font-style:normal}

/* ---------- 14. Form ------------------------------------------ */
.form{max-width:640px; margin-inline:auto; display:grid; gap:1.6rem}
.field{display:grid; gap:.55rem}
label{font-size:.83rem; color:var(--erde-500)}
input,textarea,select{
  font-family:var(--font-display); font-size:1rem; color:var(--text);
  background:transparent;
  border:0; border-bottom:1px solid var(--line);
  padding:.7rem .1rem; width:100%;
  transition:border-color .3s var(--ease);
}
input:focus,textarea:focus,select:focus{outline:none; border-bottom-color:var(--himmel-500)}
textarea{resize:vertical; min-height:150px; line-height:1.7}
.check{display:flex; gap:.8rem; align-items:flex-start; font-size:.88rem; line-height:1.6}
.check input{width:auto; margin-top:.35rem}
/* A consent box is a sentence, and Panchang never sets a sentence (04 in the
   guide). The <label> around it carries the label font, so the words beside
   the box are handed back to Playfair — upright, small, quiet. */
.check span,.fine{
  font-family:var(--font-display); font-style:normal; font-weight:400;
  text-transform:none; letter-spacing:0;
  font-size:.84rem; line-height:1.75; color:var(--erde-600);
}
.check span a,.fine a{color:var(--himmel-600); text-decoration:underline; text-underline-offset:2px}
.check span a:hover,.fine a:hover{color:var(--erde-900)}
.form .btn{justify-self:start; margin-top:.6rem}
.contact-aside{
  margin-top:clamp(56px,8vw,92px); padding-top:clamp(40px,6vw,60px);
  border-top:1px solid var(--line);
  display:grid; gap:2.4rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  text-align:center;
}
.contact-aside h4{
  font-family:var(--font-sender); font-weight:400; font-size:.83rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--erde-500);
  margin:0 0 .7rem;
}
.contact-aside p{font-size:1rem}

/* ---------- 15. Reveal on scroll ------------------------------ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .brand{transition:none}
}

/* ---------- 16. Spam-safe mail ---------------------------------- */
.mail{white-space:nowrap}
.mail a{text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px}
.mail a:hover,.mail a:focus-visible{border-bottom-color:transparent}