/* =========================================================================
   Yoga in Scheyern — Sabrina Prause
   Stylesheet (ausgelagert aus der Design-Vorlage, selbst gehostete Fonts,
   behutsamer Design-Feinschliff). Keine externen Abhängigkeiten.
   ========================================================================= */

/* ---- Selbst gehostete Fonts (lokal, woff2, latin-Subset) ----
   Raleway & Yanone Kaffeesatz sind variable Fonts — eine Datei deckt den
   gesamten Gewichtsbereich ab. Great Vibes (Script) ist single-weight (400). */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300 700;            /* variabel: nutzt 300–700 */
  font-display: swap;
  src: url('fonts/raleway-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 300 600;            /* variabel: nutzt 300–600 */
  font-display: swap;
  src: url('fonts/yanone-kaffeesatz-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/greatvibes-400.woff2') format('woff2');
}

:root{
  /* Brand palette — original */
  --cream:      #F5F2EC;
  --paper:      #FBF9F5;
  --cream-deep: #ECE5D8;
  --cream-3:    #E3DAC4;
  --sage:       #84944A;
  --sage-deep:  #6B7A3A;
  --sage-light: #A8B772;
  --steel:      #475A6E;
  --steel-deep: #2D3D50;
  --steel-darker:#1F2D3E;
  --skyblue:    #ABCFDA;
  --terra:      #A9623D;
  --terra-deep: #8A4A28;
  --sand:       #E3C87F;
  --anthracite: #3D3D3D;

  --ink:        var(--steel);
  --ink-body:   var(--anthracite);
  --ink-soft:   #5E6E81;               /* etwas dunkler → besserer Kontrast */
  --line:       rgba(61,61,61,.14);
  --line-light: rgba(245,242,236,.2);
  --shadow:     0 1px 2px rgba(61,61,61,.05), 0 14px 44px -14px rgba(61,61,61,.18);
  --shadow-strong: 0 30px 80px -20px rgba(45,61,80,.45);

  /* Einheitliche Transition-Kurve für Hover/Mikrointeraktionen */
  --ease:       cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* Anker-Sprünge nicht unter der 76px hohen Sticky-Nav verstecken */
  scroll-padding-top:76px;
}
/* Wenn GSAP ScrollSmoother aktiv ist, übernimmt es das Scrollen –
   natives CSS-Smooth/Scroll-Padding würde sich sonst überlagern. */
html.has-smooth-scroll{ scroll-behavior:auto; scroll-padding-top:0; }
html,body{margin:0;padding:0}
/* #top liegt am absoluten Seitenanfang → Logo-Klick scrollt ganz nach oben */
#top{position:absolute; top:0; left:0; width:0; height:0;}

/* ScrollSmoother-Wrapper: KEINE statischen overflow/position-Styles setzen!
   ScrollSmoother setzt diese erst bei erfolgreicher Initialisierung selbst.
   Ohne JS / bei reduced-motion bleibt damit der normale Scroll-Fluss erhalten. */
body{
  font-family:'Raleway', system-ui, sans-serif;
  color:var(--ink-body);
  background:var(--cream);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4{
  font-family:'Yanone Kaffeesatz', 'Raleway', sans-serif;
  font-weight:400;
  color:var(--steel);
  margin:0;
  letter-spacing:.005em;
  line-height:1.05;
}
h1{font-weight:300}
.script{
  font-family:'Great Vibes', cursive;
  font-weight:400; color:var(--sage); letter-spacing:.01em;
}

/* Brand pattern */
.muster{
  background-image: url('assets/brand/muster-weiss.png');
  background-size: 320px 320px;
  background-repeat: repeat;
  opacity: .55;
  pointer-events:none;
}

/* Layout helpers */
.wrap{max-width:1140px; margin:0 auto; padding:0 28px}
.narrow{max-width:780px; margin:0 auto; padding:0 28px}
@media (max-width: 640px){ .wrap, .narrow{padding:0 20px} }

/* Buttons — stronger contrast */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:999px;
  background:var(--steel-deep); color:var(--cream);
  font-weight:500; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  border:1.5px solid var(--steel-deep);
  text-decoration:none; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{background:transparent; color:var(--steel-deep); transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--sage-deep); outline-offset:3px}
.btn.ghost{background:transparent; color:var(--steel-deep)}
.btn.ghost:hover{background:var(--steel-deep); color:var(--cream)}
.btn.sage{background:var(--sage); border-color:var(--sage); color:#fff}
.btn.sage:hover{background:var(--sage-deep); border-color:var(--sage-deep); color:#fff}
.btn.cream{background:var(--cream); color:var(--steel-deep); border-color:var(--cream)}
.btn.cream:hover{background:transparent; color:var(--cream); border-color:var(--cream)}

/* Chip */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  background:rgba(71,90,110,.08); color:var(--steel);
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
}
.chip .dot{width:6px; height:6px; border-radius:50%; background:var(--sage)}

/* Nav */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(245,242,236,.88);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:76px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.brand .logo-mark{
  width:40px; height:40px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.brand .logo-mark img{width:100%; height:100%; object-fit:contain; display:block}
.brand .logo-text{display:flex; flex-direction:column; align-items:flex-start; line-height:1}
.brand .logo-name{
  font-family:'Great Vibes', cursive;
  font-size:34px; color:var(--sage); line-height:.85; margin-bottom:2px; letter-spacing:.005em;
}
.brand .logo-desc{
  font-family:'Yanone Kaffeesatz', sans-serif;
  font-size:13px; letter-spacing:.32em;
  text-transform:uppercase; font-weight:500;
  color:var(--steel-deep); padding-left:2px;
}
.nav-links{display:flex; gap:30px}
.nav-links a{
  text-decoration:none; color:var(--steel-deep); font-family:'Yanone Kaffeesatz', sans-serif;
  font-size:16px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:500;
  transition: color .2s var(--ease), border-color .2s var(--ease);
  border-bottom: 1.5px solid transparent;
  padding-bottom: 3px;
}
.nav-links a:hover{color:var(--sage); border-bottom-color:var(--sage)}
.nav-links a:focus-visible{outline:2px solid var(--sage-deep); outline-offset:3px; border-radius:2px}
/* Kompakter Anmeldung-Button in der Nav (kleiner als Standard-.btn) */
.nav-cta{padding:10px 20px; font-size:13px}

/* Burger-Button — nur auf Mobile sichtbar */
.nav-toggle{
  display:none;
  width:46px; height:46px;
  align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer;
  border-radius:12px; padding:0;
  -webkit-tap-highlight-color:transparent;
  transition: background .2s var(--ease);
}
.nav-toggle:hover{ background:rgba(71,90,110,.08) }
.nav-toggle:focus-visible{ outline:2px solid var(--sage-deep); outline-offset:2px }
.nav-toggle-bars{
  position:relative; display:block; width:24px; height:16px;
}
.nav-toggle-bars span{
  position:absolute; left:0; height:2px; width:100%;
  background:var(--steel-deep); border-radius:2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease);
}
.nav-toggle-bars span:nth-child(1){ top:0 }
.nav-toggle-bars span:nth-child(2){ top:7px }
.nav-toggle-bars span:nth-child(3){ top:14px }
/* offener Zustand → X */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){ top:7px; transform:rotate(45deg) }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){ opacity:0 }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){ top:7px; transform:rotate(-45deg) }

/* Mobiles Menü-Panel */
.mobile-menu{
  position:fixed; top:76px; left:0; right:0; z-index:49;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  box-shadow: 0 24px 48px -24px rgba(45,61,80,.35);
  display:flex; flex-direction:column;
  padding:14px 24px 26px;
  gap:2px;
  /* Animations-Ausgangszustand */
  transform: translateY(-12px);
  opacity:0;
  /* Geschlossen (opacity:0) darf das Panel keine Klicks fangen – unabhängig davon,
     ob das transitionend-gesteuerte hidden-Toggle in close() rechtzeitig greift. */
  pointer-events:none;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.mobile-menu:not([hidden]){ display:flex }
.mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto }
.mobile-menu a:not(.btn){
  font-family:'Yanone Kaffeesatz', sans-serif;
  text-transform:uppercase; letter-spacing:.12em; font-weight:500;
  font-size:19px; color:var(--steel-deep);
  text-decoration:none;
  padding:15px 4px;
  border-bottom:1px solid var(--line);
  transition: color .2s var(--ease);
}
.mobile-menu a:not(.btn):hover{ color:var(--sage-deep) }
.mobile-menu a:not(.btn):focus-visible{ outline:2px solid var(--sage-deep); outline-offset:2px; border-radius:2px }
.mobile-menu-cta{ margin-top:18px; justify-content:center }
.mobile-menu-backdrop{
  position:fixed; inset:76px 0 0 0; z-index:48;
  background:rgba(31,45,62,.35);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.mobile-menu-backdrop:not([hidden]){ display:block }
.mobile-menu-backdrop.open{ opacity:1; pointer-events:auto }

@media (max-width: 820px){
  .nav-links{ display:none }
  .nav-cta{ display:none }          /* Anmeldung-Button steckt im Panel */
  .nav-toggle{ display:inline-flex }

  /* Firefox Android rendert position:sticky + backdrop-filter beim Scrollen
     fehlerhaft (Header wird abgeschnitten / verschiebt sich, wenn die
     Adressleiste ein-/ausblendet). Auf Mobile daher den Blur weglassen und
     einen (fast) deckenden Hintergrund nutzen – optisch praktisch identisch,
     aber ohne den Sticky-Compositing-Bug. Desktop behält den Glas-Effekt. */
  .nav{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(245,242,236,.97);
  }
}
/* Mobiles Menü auf Desktop nie zeigen (Sicherheit, falls JS-Klassen bleiben) */
@media (min-width: 821px){
  .mobile-menu, .mobile-menu-backdrop{ display:none !important }
}

/* Sicherheitsnetz gegen horizontalen Overflow auf Mobil.
   Bewusst NICHT auf html/body (würde position:sticky der Nav brechen) und nur im
   Mobile-Bereich (≤920px): dort ist ScrollSmoother deaktiviert, #smooth-content ist
   ein normaler statischer Block – overflow-x:hidden ist hier gefahrlos und kappt
   künftige Deko-Überstände, ohne Desktop-Smoother/Sticky zu berühren. */
@media (max-width: 920px){
  #smooth-content{ overflow-x:hidden }
}

/* HERO — strong sage block behind photo */
.hero{
  position:relative;
  /* oben Platz für die 76px-Sticky-Nav + Atemraum, damit die Headline nicht
     angeschnitten wird (Hero beginnt im ScrollSmoother-Content bei top:0) */
  padding: 124px 0 104px;
  background: var(--cream);
  overflow:hidden;
}
@media (max-width: 640px){ .hero{ padding: 104px 0 80px; } }
.hero::before{
  content:""; position:absolute;
  top: 0; right: 0; bottom: 0;
  width: 44%;
  background: var(--sage);
  z-index: 0;
}
/* Brand-Muster über dem Sage-Block (wie im Zitat-Band) – deckungsgleich mit ::before */
.hero::after{
  content:""; position:absolute;
  top: 0; right: 0; bottom: 0;
  width: 44%;
  background-image: url('assets/brand/muster-weiss.png');
  background-size: 360px 360px;
  opacity: .12;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 920px){
  .hero::before,
  .hero::after{
    top: auto; bottom: 0; right: 0; left: 0;
    width: 100%; height: 38%;
  }
}
.hero-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap:56px;
  align-items:center;
  position: relative; z-index: 2;
}
@media (max-width: 920px){ .hero-grid{grid-template-columns:1fr; gap:36px} }
@media (max-width: 920px){ .hero-photo-wrap{ margin-top:32px } }
@media (max-width: 640px){ .hero-grid{gap:36px} .hero-photo-wrap{ margin-top:56px } }

.hero h1{
  font-family:'Yanone Kaffeesatz', sans-serif;
  font-size: clamp(52px, 7.2vw, 104px);
  font-weight:300;
  letter-spacing:.002em;
  color:var(--steel-deep);
  line-height: 1;
}
/* "kräftigt" – gleiche Headline-Schrift (Yanone, geerbt), nur Farbakzent */
.hero h1 em{
  font-style:normal;
  color:var(--sage);
}
/* Headline-Zeilen (ersetzen den früheren <br/>) */
.hero-title .hl-line{ display:block; }
/* Zeilenweiser Reveal: nur aktiv, wenn JS die Animation übernimmt.
   Ohne JS / ohne ScrollSmoother bleiben die Zeilen normal sichtbar. */
.js-hero-anim .hero-title .hl-line{
  opacity:0;
  transform:translateY(24px);
  will-change:opacity, transform;
}
.hero p.lede{
  font-size:18px; color:var(--anthracite); max-width:520px; margin:22px 0 28px;
  line-height:1.7;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center}

.hero-photo-wrap{position:relative}
.hero-photo{
  aspect-ratio: 4/5;
  background:#ddd center/cover no-repeat;
  background-image: url('assets/sabrina-portrait.webp');
  background-position: center 22%;
  /* weicherer, harmonischerer Bogen oben statt extremer Pillenform */
  border-radius: 200px 200px 28px 28px;
  overflow:hidden;
  position:relative; z-index: 2;
  box-shadow: var(--shadow-strong);
  border: 6px solid var(--cream);
}
/* Kreis-Akzent ruhiger hinter das Foto gelegt (weniger Überstand) */
.hero-kreis{
  position:absolute; z-index:1;
  width:320px; height:320px;
  top:-36px; right:-40px;
}
.hero-kreis img{width:100%; height:100%; opacity:.9}
/* Ginkgo dezenter, knapp an der Foto-Ecke statt weit ausladend */
.hero-ginkgo{
  position:absolute; z-index:3; pointer-events:none;
  width:190px; height:190px;
  bottom:-44px; left:-48px;
  transform: rotate(-22deg);
  opacity:.92;
}
.hero-ginkgo img{width:100%; height:100%}

.hero-meta{
  display:flex; flex-wrap:wrap; gap:18px 36px;
  margin-top:42px; padding-top:30px;
  border-top: 1.5px solid var(--steel-deep);
  font-size:13.5px; letter-spacing:.04em;
  position: relative; z-index: 2;
  max-width: 580px;
}
.hero-meta div{display:flex; flex-direction:column; gap:4px}
.hero-meta div .k{
  font-family:'Yanone Kaffeesatz', sans-serif;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sage-deep); font-weight:600;
}
.hero-meta div .v{color:var(--steel-deep); font-weight:600; font-size:15px}

/* KEYWORDS BAND — full dark steel */
.keywords-band{
  background: var(--steel-deep);
  color: var(--cream);
  padding: 28px 0;
  position: relative;
  overflow: hidden;
}
.keywords-band::before{
  content:""; position:absolute; inset:0;
  background-image: url('assets/brand/muster-weiss.png');
  background-size: 320px 320px;
  opacity: .07;
  pointer-events: none;
}
.keywords{
  display:flex; flex-wrap:wrap; gap:14px 36px;
  justify-content:center; align-items:center;
  font-family:'Yanone Kaffeesatz', sans-serif;
  font-size:20px; letter-spacing:.36em;
  text-transform:uppercase;
  color: var(--sand);
  font-weight: 500;
  position: relative; z-index: 2;
}
.keywords span{display:inline-flex; align-items:center; gap:36px}
.keywords span::after{
  content:""; display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background:var(--sage-light); opacity:.85;
}
.keywords span:last-child::after{display:none}
@media (max-width: 720px){
  .keywords{font-size:16px}
  .keywords span{gap:14px}
}

/* Section structure */
.section{padding: 104px 0; position:relative}
@media (max-width:640px){ .section{padding:72px 0} }
.section.cream{background: var(--cream)}
.section.cream-deep{background: var(--cream-deep)}
.section.cream-3{background: var(--cream-3)}
.section.sage{background: var(--sage); color: var(--cream)}
.section.sage h2, .section.sage h3, .section.sage h4{color: var(--cream)}
.section.steel{background: var(--steel-deep); color: var(--cream)}
.section.steel h2, .section.steel h3, .section.steel h4{color: var(--cream)}

.section-head{text-align:center; margin-bottom:60px; position: relative}
.section-head .script{
  display:block; font-size:48px; margin-bottom:0; line-height:1;
  color: var(--sage-deep);
}
.section.sage .section-head .script, .section.steel .section-head .script{
  color: var(--sand);
}
.section-head h2{
  font-size: clamp(42px, 5.6vw, 72px); font-weight:300; margin-top:8px;
  color: var(--steel-deep);
}
.section.sage .section-head h2, .section.steel .section-head h2{color: var(--cream)}
.section-head p{
  color:var(--anthracite); max-width:580px; margin:18px auto 0; font-size:16.5px;
}
/* Hervorhebung im Section-Head-Text (z. B. „kostenlose Probestunde“) – im Marken-Sage */
.section-head p strong{color:var(--sage-deep); font-weight:600}
.section.sage .section-head p, .section.steel .section-head p{color: rgba(245,242,236,.85)}

.divider{
  display:flex; align-items:center; gap:14px;
  color:var(--sage-deep); justify-content:center; margin: 16px 0 10px;
}
.divider .line{height:1px; width:60px; background:currentColor; opacity:.6}
.divider .sym{font-family:'Great Vibes', cursive; font-size:24px}
.section.sage .divider, .section.steel .divider{color: var(--sand)}

/* Courses — strong cards */
.courses{display:grid; grid-template-columns: repeat(2, 1fr); gap:32px}
@media (max-width: 820px){ .courses{grid-template-columns:1fr} }
.course{
  background:var(--paper);
  border:1px solid var(--line);                 /* dezente, weiche Umrandung */
  border-radius:22px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow: 0 1px 2px rgba(45,61,80,.04), 0 18px 40px -24px rgba(45,61,80,.28);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.course:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
  border-color: rgba(132,148,74,.35);           /* beim Hover leicht in Sage */
}
.course .cover{
  aspect-ratio: 16/10;
  background:#ddd;                               /* Fallback hinter dem Bild-Layer */
  position:relative;
  overflow:hidden;
}
/* Bild-Layer trägt das Motiv (cover → randlos) und zoomt beim Hover sanft.
   background-image wird vom Inline-Style des .cover geerbt. */
.course .cover::before{
  content:""; position:absolute; inset:0;
  background-image: inherit;
  background-size: cover;
  background-position: inherit;
  background-repeat: no-repeat;
  transition: transform .6s var(--ease);
}
.course:hover .cover::before{ transform: scale(1.06); }
.course .cover::after{          /* sanfter Verlauf, damit Badge & Motiv ruhiger wirken */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(45,61,80,.18) 0%, rgba(45,61,80,0) 38%);
  pointer-events:none;
}
.course .cover .badge{
  position:absolute; top:14px; left:14px; z-index:2;
  background:var(--steel-deep);
  color:var(--cream);
  padding:8px 16px; border-radius:999px;
  font-family:'Yanone Kaffeesatz', sans-serif;
  font-size:14px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
.course .cover .badge.sage{background:var(--sage); color:#fff}
.course .cover .badge.terra{background:var(--terra); color:var(--cream)}
.course .cover .badge.sky{background:var(--skyblue); color:var(--steel-deep)}
.course .body{padding:30px 30px 30px}
.course h3{font-size:36px; font-weight:300; margin-bottom:2px; line-height:1.05; color: var(--steel-deep)}
.course .sub{
  font-family:'Great Vibes', cursive; font-size:26px; color:var(--sage-deep);
  margin-bottom:14px; line-height:1.05;
}
.course p{color:var(--anthracite); font-size:15px; margin:0 0 18px}
.course dl{
  display:grid; grid-template-columns: auto 1fr; gap:8px 18px;
  margin:0 0 20px; font-size:14px;
  padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.course dt{color:var(--sage-deep); font-weight:600; font-size:13px; letter-spacing:.1em; text-transform:uppercase}
.course dd{margin:0; color:var(--steel-deep); font-weight:500}
.course .cta{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--steel-deep); text-decoration:none; font-size:14px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding-top:14px; cursor:pointer;
}
.course .cta:hover{color:var(--sage-deep)}
.course .cta .arrow{transition:transform .25s var(--ease)}
.course:hover .cta .arrow{transform:translateX(4px)}

/* About — strong photo treatment */
.about-grid{display:grid; grid-template-columns: .85fr 1.15fr; gap:64px; align-items:center}
@media (max-width:920px){
  .about-grid{grid-template-columns:1fr; gap:40px}
  /* Mobil ist das Foto fast bildschirmbreit – die dekorativen Kreise (negativer
     Offset ±40px) würden sonst über den Viewport ragen und einen horizontalen
     Scrollbalken erzeugen. An der Foto-Kante clippen (wirken weiter als Akzent). */
  .about-photo-wrap{ overflow:hidden }
}
.about-photo-wrap{position:relative}
.about-photo{
  aspect-ratio: 4/5;
  background:#ddd center/cover no-repeat;
  background-image: url('assets/sabrina-meditiert.webp');
  background-position: center 30%;
  border-radius: 20px;
  box-shadow: var(--shadow-strong);
  position:relative; z-index: 2;
  border: 6px solid var(--cream);
}
.about-kreis-1{
  position:absolute; z-index: 1;
  width:200px; height:200px;
  bottom:-40px; right:-40px;
}
.about-kreis-1 img{width:100%; height:100%; opacity: .95}
.about-kreis-2{
  position:absolute; z-index: 3;
  width:140px; height:140px;
  top:-40px; left:-40px;
}
.about-kreis-2 img{width:100%; height:100%}
.about-text h3{font-size:44px; font-weight:300; margin-bottom:18px; line-height:1.1; color: var(--steel-deep)}
.about-text p{font-size:16.5px; color:var(--anthracite); margin:0 0 18px; line-height: 1.75}
.signature{
  font-family:'Great Vibes', cursive;
  font-size:46px; color:var(--sage-deep); margin-top:24px; line-height:1;
}
/* Script-Überschrift im "Über Sabrina"-Block (etwas kleiner als die Section-Heads) */
.about-script{font-size:44px}

/* Adress-Zeile unter dem Raum-Section-Head + Map-Link */
.address-line{margin-top:8px; font-size:14px; letter-spacing:.04em}
.address-link{
  color:var(--sage-deep); text-decoration:none;
  border-bottom:1.5px solid currentColor; padding-bottom:1px; font-weight:500;
}

/* QUOTE BAND — full sage */
.quote-band{
  text-align:center; padding: 120px 0 116px;
  background: var(--sage);
  color: var(--cream);
  position:relative; overflow:hidden;
}
.quote-band .muster-bg{
  position:absolute; inset:0;
  background-image: url('assets/brand/muster-weiss.png');
  background-size: 360px 360px;
  opacity: .12;
  pointer-events:none;
}
.quote-band .ginkgo-left{
  position:absolute; left:-60px; bottom:-40px;
  width:240px; height: 240px; opacity:.4; transform: rotate(-22deg);
}
.quote-band .ginkgo-right{
  position:absolute; right:-60px; top:-40px;
  width:240px; height: 240px; opacity:.4; transform: rotate(160deg);
}
.quote-band .ginkgo-left img, .quote-band .ginkgo-right img{width:100%; height:100%}
.quote-band .quote{
  font-family:'Great Vibes', cursive;
  font-size: clamp(40px, 6vw, 80px);
  color: var(--cream);
  max-width: 900px; margin: 0 auto; padding: 0 28px;
  line-height: 1.15;
  position:relative;
  text-shadow: 0 2px 20px rgba(45,61,80,.15);
}
.quote-band .credit{
  font-family:'Yanone Kaffeesatz', sans-serif;
  text-transform:uppercase; letter-spacing:.36em;
  font-size:13px; color: var(--sand); margin-top:24px;
  position:relative; font-weight: 500;
}

/* Room gallery */
.gallery{
  display:grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap:16px;
  height:680px;
}
/* Mobil: horizontaler Swiper (CSS scroll-snap, keine Library) ----------- */
@media (max-width: 820px){
  .gallery{
    display:flex;
    grid-template-columns:none;
    grid-template-rows:none;
    height:auto;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;       /* weiches Trägheits-Scrollen iOS */
    scroll-padding: 0 24px;
    /* etwas „Rand“ links/rechts, damit das nächste Bild leicht hervorlugt */
    padding: 4px 24px 14px;
    margin: 0 -24px;                          /* Rand bündig zum Sektions-Innenrand */
    scrollbar-width: none;                    /* Firefox: Scrollbar ausblenden */
  }
  .gallery::-webkit-scrollbar{ display:none; }/* WebKit: Scrollbar ausblenden */
  .gallery > div{
    flex: 0 0 82%;                            /* eine Karte ~Vollbreite, nächste lugt hervor */
    height: 300px;
    scroll-snap-align: center;
    box-shadow: 0 14px 36px -18px rgba(45,61,80,.32);
  }
  /* Hover-Zoom auf Touch unnötig → ruhiger lassen */
  .gallery > div:hover{ transform:none; }
  .gallery > div:hover::before{ transform:none; }
}
.gallery > div{
  position:relative;
  border-radius:16px;
  box-shadow: 0 14px 40px -16px rgba(45,61,80,.3);
  border: 4px solid var(--cream);
  overflow:hidden;                /* Zoom-Layer wird beschnitten */
  background-color:#ddd;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* inneres Bild-Layer trägt das Motiv und wird beim Hover sanft gezoomt
   (background-image kommt per Inline-Style am .gallery > div und wird geerbt) */
.gallery > div::before{
  content:""; position:absolute; inset:0;
  background-image: inherit;
  background-size: cover;
  background-position: inherit;
  background-repeat: no-repeat;
  transition: transform .6s var(--ease);
}
.gallery > div:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 54px -18px rgba(45,61,80,.42);
}
.gallery > div:hover::before{ transform: scale(1.07); }

/* INFO SECTION — dark steel with cream cards */
.section.info-dark{
  background: var(--steel-deep);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.section.info-dark::before{
  content:""; position:absolute; inset:0;
  background-image: url('assets/brand/muster-weiss.png');
  background-size: 360px 360px;
  opacity: .05; pointer-events:none;
}
.section.info-dark .section-head h2{color: var(--cream)}
.section.info-dark .section-head .script{color: var(--sand)}
.section.info-dark .section-head p{color: rgba(245,242,236,.8)}
.section.info-dark .divider{color: var(--sand)}

.info-grid{display:grid; grid-template-columns: 1fr 1fr; gap:36px; align-items:start}
@media (max-width: 820px){ .info-grid{grid-template-columns:1fr} }
.info-card{
  background: var(--cream);
  border-radius:20px;
  padding:40px 36px;
  box-shadow: var(--shadow-strong);
  position: relative;
}
.info-card h4{
  font-size:32px; font-weight:300; margin-bottom:22px;
  color:var(--steel-deep);
}
.info-card ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:14px;
}
.info-card li{
  position:relative; padding-left:30px;
  font-size:15.5px; line-height:1.6;
  color: var(--anthracite);
}
.info-card li::before{
  content:""; position:absolute; left:0; top:9px;
  width:12px; height:12px; border-radius:50%;
  background:var(--sage); opacity:.95;
}

/* Schedule */
.schedule{
  background: var(--cream);
  border: 2px solid var(--steel-deep);
  border-radius:24px;
  overflow:hidden;
  box-shadow: var(--shadow-strong);
}
.schedule-head{
  display:grid;
  grid-template-columns: 1.1fr .9fr 2.4fr auto;
  gap:24px;
  padding: 20px 32px;
  background: var(--steel-deep);
  color: var(--sand);
  font-family:'Yanone Kaffeesatz', sans-serif;
  font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:500;
}
.schedule-row{
  display:grid;
  grid-template-columns: 1.1fr .9fr 2.4fr auto;
  gap:24px;
  align-items:center;
  padding: 28px 32px;
  border-top:1px solid var(--line);
  transition: background .25s var(--ease);
}
.schedule-row:hover{ background: rgba(132,148,74,.08) }
.schedule-row:first-of-type{border-top: 0}

.sched-day{display:flex; flex-direction:column; gap:2px}
.sched-day-name{
  font-family:'Yanone Kaffeesatz', sans-serif;
  font-size:24px; color:var(--steel-deep); font-weight:500; letter-spacing:.01em;
}
.sched-duration{
  font-size:13px; color:var(--sage-deep);
  letter-spacing:.06em; font-weight: 500;
}
.sched-time{
  font-family:'Yanone Kaffeesatz', sans-serif;
  font-size:38px; font-weight:300; color:var(--sage-deep); letter-spacing:.01em;
  line-height:1;
}
.sched-course{display:flex; align-items:center; gap:16px}
.sched-dot{
  width:12px; height:12px; border-radius:50%;
  background: var(--ink-soft); flex-shrink:0;
}
.sched-dot.sage{background: var(--sage)}
.sched-dot.terra{background: var(--terra)}
.sched-dot.sky{background: var(--skyblue)}
.sched-title{
  font-family:'Yanone Kaffeesatz', sans-serif;
  font-size:26px; color:var(--steel-deep); font-weight:400; line-height:1.1;
  margin-bottom:2px;
}
.sched-sub{font-size:13.5px; color:var(--anthracite); line-height:1.45}
.sched-action{display:flex; justify-content:flex-end}
.sched-btn{
  padding: 11px 20px; font-size:13px;
  letter-spacing:.08em;
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
}
.sched-btn:hover{
  background: var(--sage-deep); border-color: var(--sage-deep); color:#fff;
}
/* WhatsApp-Icon in den Anmelden-Buttons – erbt die Buttonfarbe */
.wa-icon{
  width:17px; height:17px; flex-shrink:0;
  fill:currentColor; display:inline-block;
  margin-right:-2px;   /* optisch näher an den Text, da .btn schon gap hat */
}

.schedule-foot{
  text-align:center; margin-top:36px;
  font-size:15px; color:var(--anthracite);
}
.schedule-foot a{color:var(--sage-deep); text-decoration:none; border-bottom:1.5px solid currentColor; padding-bottom:1px; font-weight: 500}

@media (max-width: 820px){
  .schedule-head{display:none}
  .schedule-row{
    grid-template-columns: 1fr;
    gap:14px;
    padding: 24px 22px;
  }
  .sched-day{order:1; display:flex; flex-direction:row; gap:12px; align-items:baseline}
  .sched-time{order:0; font-size:44px; color:var(--sage-deep)}
  .sched-course{order:2}
  .sched-action{order:3; justify-content:flex-start; margin-top:4px}
}

/* FOOTER — deep steel */
footer{
  padding: 70px 0 32px;
  background: var(--steel-darker);
  color: var(--cream);
  position:relative; overflow:hidden;
}
footer .footer-ginkgo{
  position:absolute; right:-50px; top:-50px;
  width:240px; height: 240px; opacity:.18; transform:rotate(15deg);
}
footer .footer-kreis{
  position:absolute; left:-30px; bottom:30px;
  width:150px; height: 150px; opacity:.25;
}
footer .footer-ginkgo img, footer .footer-kreis img{width:100%; height:100%}
.foot{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap:36px; align-items:start;
  position:relative; z-index: 2;
}
@media (max-width:820px){ .foot{grid-template-columns:1fr; gap:28px} }
.foot h5{
  font-family:'Yanone Kaffeesatz', sans-serif;
  font-size:14px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--sand);
  margin:0 0 14px; font-weight:500;
}
.foot p, .foot a{
  font-size:14.5px;
  color: var(--cream);
  text-decoration:none; line-height:1.7; margin:0;
}
.foot a:hover{color: var(--sand)}
.foot .brand .logo-name{color: var(--cream); font-size: 32px}
.foot .brand .logo-desc{color: var(--sand)}
.footer-brand{margin-bottom:18px}
.footer-intro{max-width:360px; color:rgba(245,242,236,.7)}
.footer-address{margin-top:12px}
.footer-address-detail{color:rgba(245,242,236,.55)}
.copy{
  margin-top:48px; padding-top:22px;
  border-top:1px solid var(--line-light);
  font-size:13px;
  color: rgba(245,242,236,.55);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  letter-spacing:.04em;
  position:relative; z-index: 2;
}

/* Reveal — sanftes Einblenden beim Scrollen, mit leichtem Stagger */
.reveal{opacity:0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1; transform:none}
/* Stagger: aufeinanderfolgende Karten in einem Grid leicht versetzt einblenden */
.courses .reveal:nth-child(2){transition-delay:.08s}
.courses .reveal:nth-child(3){transition-delay:.16s}
.courses .reveal:nth-child(4){transition-delay:.24s}
.info-grid .reveal:nth-child(2){transition-delay:.1s}

/* Bewegung reduzieren, wenn vom System gewünscht */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1; transform:none; transition:none}
}

/* =========================================================================
   Rechtstext-Seiten (Impressum / Datenschutz)
   ========================================================================= */
.legal{ padding: 72px 0 96px; background: var(--cream); }
.legal .legal-head{ text-align:center; margin-bottom:48px; }
.legal .legal-head .script{
  display:block; font-size:40px; line-height:1; color:var(--sage-deep); margin-bottom:6px;
}
.legal .legal-head h1{
  font-size: clamp(40px, 6vw, 64px); font-weight:300; color:var(--steel-deep);
}
.legal-body{ max-width:780px; margin:0 auto; }
.legal-body h2{
  font-size:32px; font-weight:300; color:var(--steel-deep);
  margin: 48px 0 6px; line-height:1.1;
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{
  font-family:'Yanone Kaffeesatz', sans-serif;
  font-size:23px; font-weight:500; color:var(--sage-deep);
  letter-spacing:.01em; margin: 34px 0 6px;
}
.legal-body h4{
  font-size:17px; font-weight:600; color:var(--steel-deep);
  margin: 22px 0 4px; font-family:'Raleway', sans-serif;
}
.legal-body p{ color:var(--anthracite); font-size:16px; line-height:1.75; margin:0 0 14px; }
.legal-body address{
  font-style:normal; color:var(--steel-deep); font-weight:500;
  line-height:1.7; margin:0 0 14px;
}
.legal-body a{ color:var(--sage-deep); text-decoration:none; border-bottom:1px solid currentColor; }
.legal-body a:hover{ color:var(--steel-deep); }
.legal-body ol, .legal-body ul{ color:var(--anthracite); font-size:16px; line-height:1.75; padding-left:22px; margin:0 0 14px; }
.legal-body li{ margin:0 0 8px; }
.legal-body .divider{ margin:40px 0; }
.legal-back{
  display:inline-flex; align-items:center; gap:8px; margin-top:8px;
  font-family:'Yanone Kaffeesatz', sans-serif; text-transform:uppercase;
  letter-spacing:.1em; font-weight:500; font-size:14px;
  color:var(--steel-deep); text-decoration:none; border:none;
}
.legal-back:hover{ color:var(--sage-deep); }
.legal-updated{ font-size:13.5px; color:var(--ink-soft); margin-top:40px; }