/* katharina.yoga – Website
   Layout: nah an der bisherigen Seite. Großes Kopffoto, dunkle Navigationsleiste,
   weiße Inhaltsfläche, zentrierte Überschriften in Lato Light, dunkle Fußzeile.
   Bewusst nur ein (heller) Look. */

@font-face{font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/lato-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/lato-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/lato-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans Pro";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/source-sans-pro-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans Pro";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/source-sans-pro-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Source Sans Pro";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/source-sans-pro-latin-700-normal.woff2") format("woff2")}

:root{
  --bg:#FFFFFF;          /* Inhaltsfläche */
  --nav:#222222;         /* Navigationsleiste */
  --nav-link:#9D9E9E;
  --nav-active:#FFFFFF;
  --ink:#282828;         /* Überschriften, Links, Buttons */
  --text:#666666;        /* Fließtext */
  --foot:#333333;        /* Fußzeile */
  --line:#282828;
  --soft:#F2F2F2;
  --accent:#64877A;      /* Salbeigrün aus der Marke, sparsam */
  --alert:#B03A2E;       /* "ausgebucht" */

  --f-head:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:"Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --wrap:1100px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-underline-offset:.15em;transition:color .3s ease-out}
a:hover{color:#0F0F0F}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--f-head);font-weight:300;color:var(--ink);margin:0;text-wrap:balance}
h1{font-size:clamp(2.2rem,1.4rem + 3.4vw,4rem);line-height:1.05;text-align:center;text-transform:uppercase;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
h2{font-size:clamp(1.7rem,1.4rem + 1.2vw,2.25rem);line-height:1.25}
h3{font-size:1.5rem;line-height:1.25}
p{margin:0}
strong,b{color:var(--ink);font-weight:600}
ul{margin:0;padding-left:1.25em}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.content{padding-block:clamp(48px,7vw,80px)}
.center{text-align:center}
.stack>*+*{margin-top:1em}

/* Kopffoto */
.cover{position:relative;height:clamp(260px,45vh,450px);background:#555;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover}
.cover--home{height:calc(100vh - 52px);height:calc(100svh - 52px);min-height:420px;max-height:980px}

/* Navigation */
.nav{background:var(--nav);position:sticky;top:env(safe-area-inset-top,0px);z-index:30}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--nav);z-index:31}
.nav .wrap{display:flex;justify-content:center}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center}
.nav a{display:block;font-family:var(--f-body);font-size:14px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;color:var(--nav-link);padding:14px 15px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--nav-active)}
.nav a[aria-current="page"]{font-weight:600}
.menu{display:none}
@media (max-width:900px){
  .nav ul.main{display:none}
  .nav .wrap{justify-content:space-between;align-items:center;min-height:52px}
  .nav .home{font-family:var(--f-head);font-weight:300;font-size:1.15rem;letter-spacing:.06em;color:#F2F2F2;text-decoration:none}
  .menu{display:block}
  .menu summary{list-style:none;cursor:pointer;color:#F2F2F2;padding:10px 4px;display:flex;align-items:center;gap:.6rem;font-size:14px;letter-spacing:2px;text-transform:uppercase}
  .menu summary::-webkit-details-marker{display:none}
  .menu summary span{display:block;width:26px;height:2px;background:currentColor;box-shadow:0 -8px 0 currentColor,0 8px 0 currentColor}
  .menu ul{position:absolute;left:0;right:0;top:100%;display:block;background:var(--nav);padding:8px 0 16px;max-height:calc(100vh - 60px);overflow:auto}
  .menu ul a{padding:12px max(24px,env(safe-area-inset-left,0px));border-bottom:1px solid rgba(255,255,255,.06)}
}
@media (min-width:901px){.nav .home{display:none}}

/* Startseite */
.intro{max-width:46rem;margin:1.5rem auto 0;text-align:center}
.photos{display:grid;grid-template-columns:1fr 2fr 1fr 1.3fr;gap:6px;margin-top:clamp(28px,4vw,44px)}
.photos img{width:100%;height:clamp(150px,22vw,250px);object-fit:cover}
.photos--b{grid-template-columns:2fr 1fr 2fr 1.6fr}
@media (max-width:700px){.photos,.photos--b{grid-template-columns:1fr 1fr}.photos img{height:38vw}}

.topics{list-style:none;padding:0;margin:clamp(28px,4vw,40px) auto 0;max-width:34rem;display:grid;gap:2px}
.topics a{display:block;text-align:center;padding:.55rem 1rem;font-family:var(--f-head);font-weight:300;font-size:clamp(1.2rem,1rem + .7vw,1.5rem);color:var(--ink);text-decoration:none;border-bottom:1px solid #E6E6E6}
.topics li:first-child a{border-top:1px solid #E6E6E6}
.topics a:hover{background:var(--soft)}

/* Buttons */
.btn{display:inline-block;font-family:var(--f-body);font-size:16px;line-height:1.4;text-decoration:none;padding:10px 20px;border-radius:50px;border:2px solid var(--ink);background:var(--ink);color:#FFF;transition:background .2s,color .2s}
.btn:hover{background:#FFF;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#FFF}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}

/* Abschnitte auf Unterseiten */
.lead{max-width:46rem;margin:1.5rem auto 0;text-align:center}
.lead strong{display:block}
hr{border:0;border-top:1px solid var(--line);margin:clamp(40px,6vw,64px) 0}
.year{margin-top:clamp(40px,6vw,64px)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:start;margin-top:24px}
.split--flip>figure{order:2}
.split figure{margin:0}
.split figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split .text{min-width:0}
.split .text>*+*{margin-top:.9em}
.split ul li+li{margin-top:.15em}
.kicker{font-weight:700;color:var(--ink);text-transform:uppercase;font-size:.95rem;letter-spacing:.02em}
.date{font-weight:700;color:var(--ink)}
.flag{font-weight:700;color:var(--alert)}
.flag--new{color:var(--accent)}
@media (max-width:760px){.split{grid-template-columns:1fr}.split--flip>figure{order:0}}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:6px;margin-top:40px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}

.facts{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.5rem;margin-top:1rem}
.facts dt{font-weight:700;color:var(--ink)}
.facts dd{margin:0}
@media (max-width:520px){.facts{grid-template-columns:1fr}.facts dd{margin-bottom:.4rem}}

.schedule{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:40px}
.schedule figure{margin:0 0 1rem}
.schedule figure img{width:100%;aspect-ratio:1;object-fit:cover}
.schedule h2{text-align:center;text-transform:uppercase;font-size:1.6rem;margin-bottom:.8rem}
.schedule .slot{text-align:center;padding:.9rem 0;border-top:1px solid #E6E6E6}
.schedule .slot time{display:block;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:860px){.schedule{grid-template-columns:1fr}.schedule figure img{aspect-ratio:3/2}}

/* Fußzeile */
.foot{background:var(--foot);color:#CFCFCF;padding-block:60px 40px}
.foot a{color:#FFF}
.newsletter{background:#FFF;color:var(--text);padding:28px;max-width:46rem;margin-inline:auto}
.newsletter h2{font-family:var(--f-body);font-weight:700;font-size:1.3rem;color:var(--ink)}
.newsletter form{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.newsletter label{flex-basis:100%;font-weight:600;color:var(--ink);font-size:.95rem}
.newsletter input[type=email]{flex:1 1 16rem;min-width:0;font:inherit;padding:10px 12px;border:1px solid #BDBDBD;border-radius:0}
.newsletter button{font:inherit;cursor:pointer;padding:10px 22px;border-radius:50px;border:2px solid var(--ink);background:var(--ink);color:#FFF}
.newsletter button:hover{background:#FFF;color:var(--ink)}
.newsletter small{display:block;margin-top:10px;color:#888}
.legal{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:center;margin-top:40px;font-size:.92rem}
.legal a{color:#E6E6E6}
.copy{text-align:center;margin-top:16px;font-size:.85rem;color:#9D9E9E}
.hp{position:absolute;left:-5000px}

/* Videos (erst nach Klick von YouTube geladen) */
.videos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:36px}
.video{margin:0;min-width:0}
.video__load,.video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;margin:0;background:#222;position:relative;cursor:pointer;overflow:hidden}
.video__load img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:opacity .2s}
.video__load:hover img{opacity:1}
.video__play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(40,40,40,.85);box-shadow:0 0 0 2px rgba(255,255,255,.8)}
.video__play::after{content:"";position:absolute;left:31px;top:24px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff}
.video figcaption{margin-top:12px}
.video figcaption small{color:#888;line-height:1.4;display:block;margin-top:4px}
@media (max-width:760px){.videos{grid-template-columns:1fr}}

/* 404 */
.notfound{text-align:center}
h1,h2,[id]{scroll-margin-top:110px}

/* Hochformat-Fotos neben langen Texten: Bild in voller Höhe, bleibt beim Scrollen stehen */
.split--tall figure img{aspect-ratio:auto;height:auto}
@media (min-width:761px){.split--tall figure{position:sticky;top:120px}}
.foot-logo{display:block;width:200px;margin:0 auto 36px}.foot-logo img{width:200px;height:auto;opacity:.92}

/* Logo unten rechts im Kopffoto */
.foot-logo{display:none}
.cover-logo{position:absolute;right:max(24px,env(safe-area-inset-right,0px));bottom:20px;width:clamp(120px,14vw,200px);filter:drop-shadow(0 0 2px rgba(0,0,0,.55)) drop-shadow(0 2px 10px rgba(0,0,0,.45))}
.cover-logo img{width:100%;height:auto}