*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--fb);background:var(--surf);color:var(--on);line-height:1.7;overflow-x:hidden}
/* Noise texture overlay for depth */
body::before{content:'';position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme="light"] body::before{opacity:.012}
/* Emotionally aware tint overlay */
body::after{content:'';position:fixed;inset:0;z-index:998;pointer-events:none;
  background:var(--surf-tint,transparent);transition:background 2s ease}
a{color:var(--pri-lt);text-decoration:none;transition:color .2s}
a:hover{color:var(--sec)}
img{max-width:100%;height:auto}
/* Custom scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--s1)}
::-webkit-scrollbar-thumb{background:var(--ol);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--pri)}
html{scrollbar-color:var(--ol) var(--s1);scrollbar-width:thin}
/* View Transitions */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:cubic-bezier(.25,.8,.25,1)}

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:2px;z-index:101;
  background:linear-gradient(90deg,var(--pri),var(--sec),var(--pri));
  background-size:200% 100%;animation:shimmer 3s ease infinite;
  width:0;transition:none;pointer-events:none}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Nav
 * 3-Column-Flex-Pattern (Issue #462, 2026-04-29):
 *   [LOGO links | nav-links centered | toggle/acts right]
 *   - .pnav-in: max-width 1280px (war 1100px → zu eng für 10+ Pills auf glug),
 *     min-width:0 damit flex-children korrekt shrinken können.
 *   - .pnav-brand: flex:0 0 auto + margin-right:auto (Logo bleibt 58px fixed,
 *     pusht nav-links zur Mitte).
 *   - .pnav-links: flex:1 1 auto + justify-content:center → links eingemittet,
 *     min-width:0 erlaubt shrink, gap:clamp gegen overflow.
 *   - .pnav-acts: flex:0 0 auto + margin-left:auto + z-index:5 → toggle
 *     IMMER rechts oben, kein overlap mit nav-links.
 *   Vorher: pnav-links hatte margin-left:auto + pnav-acts margin-left:12px →
 *   bei vielen Pills überlappte das Toggle visuell die letzten Nav-Buttons. */
.pnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(13,13,26,.88);
  backdrop-filter:blur(20px) saturate(1.5);border-bottom:1px solid var(--ol2);transition:all .3s}
.pnav.scrolled{box-shadow:0 4px 30px rgba(0,0,0,.3)}
.pnav-in{max-width:none;margin:0;padding:0 clamp(16px,2vw,32px);display:flex;align-items:center;height:68px;min-width:0;width:100%;gap:8px}
.pnav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--on);min-width:0;flex:0 0 auto;margin-right:auto}
.pnav-brand .li{width:36px;height:36px;background:linear-gradient(135deg,var(--pri),var(--sec));
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;
  box-shadow:0 0 16px rgba(123,97,255,.3);transition:box-shadow .3s;flex-shrink:0}
.pnav-brand:hover .li{box-shadow:0 0 24px rgba(123,97,255,.5)}
.pnav-brand span{font-family:var(--fd);font-size:1.15rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:clip}
.pnav-links{display:flex;flex:1 1 auto;justify-content:center;gap:clamp(3px,0.4vw,6px);list-style:none;margin:0;padding:0;min-width:0;flex-wrap:nowrap}
.pnav-links a{color:var(--on2);padding:clamp(4px,0.6vw,8px) clamp(7px,1vw,14px);border-radius:var(--r);font-size:clamp(.72rem,0.95vw,.88rem);font-weight:500;
  transition:all .2s;position:relative;white-space:nowrap;display:inline-flex;align-items:center;gap:clamp(3px,0.4vw,6px);line-height:1.2}
.pnav-links a::after{content:'';position:absolute;bottom:2px;left:50%;width:0;height:2px;
  background:linear-gradient(90deg,var(--pri),var(--sec));border-radius:1px;
  transition:width .3s cubic-bezier(.25,.8,.25,1),left .3s cubic-bezier(.25,.8,.25,1)}
.pnav-links a:hover::after,.pnav-links a.act::after{width:60%;left:20%}
.pnav-links a:hover,.pnav-links a.act{color:var(--pri-lt);background:rgba(123,97,255,.06)}
.pnav-cta{background:var(--pri)!important;color:#fff!important;font-weight:600!important}
.pnav-cta:hover{background:var(--pri-lt)!important}
.pnav-toggle{display:none;background:none;border:none;color:var(--on);font-size:28px;cursor:pointer;flex:0 0 auto;z-index:5;position:relative}
/* Medium-Desktop (901-1600px): bei vielen Pills (z.B. 10 auf glug, 1339px
 * full-label benötigt) Labels ausblenden, nur Icons zeigen — verhindert
 * overflow in toggle/brand (Issue #462). Erst ab >1600px Vollbild-Desktop
 * passen Labels neben Brand+Acts ohne Überlappung. */
@media(min-width:901px) and (max-width:1600px){
  .pnav-links a .pnav-label{display:none}
  .pnav-links a{padding:6px 10px}
  .pnav-links a > .material-symbols-outlined{font-size:20px!important;vertical-align:middle!important}
}
@media(max-width:900px){
  .pnav-toggle{display:block}
  .pnav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--s2);
    flex-direction:column;padding:16px;border-bottom:1px solid var(--ol2);justify-content:flex-start}
  .pnav-links.open{display:flex}
}

/* ── Nav-Style Variants — visible look-changes via data-nav body attr ── */
[data-nav="glass"] .pnav{background:color-mix(in srgb, var(--surf) 70%, transparent);
  backdrop-filter:blur(24px) saturate(1.6);border-bottom:1px solid color-mix(in srgb, var(--ol) 50%, transparent)}
[data-nav="solid"] .pnav{background:var(--surf);backdrop-filter:none;border-bottom:1px solid var(--ol2)}
[data-nav="minimal"] .pnav{background:transparent;backdrop-filter:none;border-bottom:none;
  position:absolute;height:auto;padding:14px 0}
[data-nav="minimal"] .pnav-in{height:auto;padding:0 32px}
[data-nav="minimal"] .pnav-links a{padding:6px 12px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
[data-nav="minimal"] .pnav-links a::after{display:none}
[data-nav="underline"] .pnav{background:var(--surf);border-bottom:none;
  box-shadow:inset 0 -2px 0 var(--pri)}
[data-nav="underline"] .pnav-links a:hover,[data-nav="underline"] .pnav-links a.act{
  background:transparent;border-bottom:2px solid var(--pri);border-radius:0;color:var(--pri)}
[data-nav="underline"] .pnav-links a::after{display:none}
[data-nav="transparent"] .pnav{background:transparent;backdrop-filter:none;border-bottom:none;
  position:absolute}
[data-nav="transparent"] .pnav-links a{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4)}
body.nav-scrolled[data-nav="transparent"] .pnav,body.nav-scrolled[data-nav="minimal"] .pnav{
  background:color-mix(in srgb, var(--surf) 92%, transparent);
  backdrop-filter:blur(16px);position:fixed;border-bottom:1px solid var(--ol2)}

/* ── Hero-Style Variants ── */
[data-hero="cosmic"] .hero{background:radial-gradient(ellipse at top,
  color-mix(in srgb, var(--pri) 8%, transparent) 0%, var(--surf) 60%)}
[data-hero="split"] .hero{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
[data-hero="centered"] .hero{text-align:center;display:flex;flex-direction:column;
  align-items:center;justify-content:center;min-height:80vh}
[data-hero="minimal"] .hero{padding:120px 24px 80px;background:var(--surf)}
[data-hero="minimal"] .hero h1{font-size:clamp(var(--ts-2xl),4vw,var(--ts-3xl));font-weight:300;letter-spacing:-.02em}
[data-hero="fullscreen"] .hero{min-height:100vh;display:flex;align-items:center}
[data-hero="wellness"] .hero{background:linear-gradient(180deg,
  color-mix(in srgb, var(--s1) 60%, transparent) 0%, var(--surf) 100%)}

/* ── Logo-Größe pro Template (per setting `logo_size_<tid>`) — Default 58px ── */
.pnav-logo{transition:width .25s,height .25s,opacity .25s}
[data-nav="minimal"] .pnav-logo{width:42px;height:42px}
[data-nav="transparent"] .pnav-logo{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}

/* Sections — generous whitespace */
.psec{position:relative;z-index:1;padding:var(--sp-4xl) var(--sp-lg);max-width:1100px;margin:0 auto}
.psec-label{display:inline-flex;align-items:center;gap:var(--sp-sm);font-size:var(--ts-xs);font-weight:600;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--sec);margin-bottom:var(--sp-md);opacity:.9}
.psec-title{font-family:var(--fd);font-size:clamp(var(--ts-2xl),4vw,var(--ts-3xl));font-weight:600;
  color:var(--on);margin-bottom:var(--sp-md);line-height:1.15;letter-spacing:-.02em}
.psec-sub{font-size:var(--ts-md);color:var(--on2);max-width:540px;margin-bottom:var(--sp-2xl);line-height:1.75}

/* Hero */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding-top:68px;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  pointer-events:none;transition:opacity .5s;opacity:.55;filter:brightness(.7) saturate(.85)}
[data-theme="light"] .hero-bg{opacity:.5;filter:brightness(.65) saturate(.75)}
/* Dark gradient overlay for text readability */
.hero::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.2) 60%,rgba(0,0,0,.35) 100%);
  pointer-events:none}
/* Cosmic template: ethereal glow look with greyscale image */
[data-template="cosmic"] .hero-bg{opacity:.3;filter:brightness(.7) saturate(0) contrast(1.1);mix-blend-mode:luminosity}
[data-template="cosmic"][data-theme="light"] .hero-bg{opacity:.25;filter:brightness(.6) saturate(0) contrast(1.1);mix-blend-mode:multiply}
.hero>*:not(.hero-bg):not(.hero-glow){position:relative;z-index:2}
.hero-glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:.25;pointer-events:none;
  animation:fl 12s ease-in-out infinite;z-index:0}
.hg1{background:var(--pri);width:500px;height:500px;top:10%;left:20%}
.hg2{background:var(--sec);width:350px;height:350px;bottom:10%;right:15%;animation-delay:-4s}
@keyframes fl{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.05)}66%{transform:translate(-20px,15px) scale(.95)}}
.hero h1{font-family:var(--fd);font-size:clamp(2.4rem,5.5vw,var(--ts-4xl));font-weight:600;line-height:1.08;
  margin-bottom:var(--sp-lg);letter-spacing:-.03em;color:var(--on);
  text-shadow:0 2px 20px rgba(0,0,0,.4);
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.5))}
@keyframes grad-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
[data-theme="light"] .hero h1{filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));text-shadow:0 2px 16px rgba(0,0,0,.35)}
.hero p{font-size:var(--ts-md);color:var(--on);opacity:.95;max-width:520px;margin-bottom:var(--sp-2xl);line-height:1.8;text-shadow:0 1px 8px rgba(0,0,0,.5),0 0 24px rgba(0,0,0,.35);
  text-shadow:0 1px 8px rgba(0,0,0,.3);
  animation:fade-up .8s cubic-bezier(.16,1,.3,1) .2s both}
[data-theme="light"] .hero p{text-shadow:0 1px 8px rgba(0,0,0,.25);color:var(--on)}
.hero-acts{display:flex;gap:var(--sp-md);flex-wrap:wrap;justify-content:center;
  animation:fade-up .8s cubic-bezier(.16,1,.3,1) .4s both}
@keyframes fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:var(--sp-sm);padding:14px 32px;border-radius:var(--r);
  font-family:var(--fb);font-size:var(--ts-sm);font-weight:600;text-decoration:none;cursor:pointer;
  border:none;transition:all .35s cubic-bezier(.25,.8,.25,1);letter-spacing:.3px}
.btn-p{background:var(--pri);color:var(--on-pri,#fff);box-shadow:0 2px 12px rgba(123,97,255,.25);position:relative;overflow:hidden}
.btn-p::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);
  transform:rotate(45deg);transition:none;animation:none;pointer-events:none}
.btn-p:hover::after{animation:btn-shimmer .6s ease}
.btn-p:hover{background:var(--pri-lt);transform:translateY(-2px);color:var(--on-pri,#fff)}
@keyframes btn-shimmer{from{transform:translateX(-100%) rotate(45deg)}to{transform:translateX(100%) rotate(45deg)}}
.btn-o{background:rgba(11,11,24,.5);backdrop-filter:blur(8px);color:var(--on);
  border:1.5px solid var(--ol)}
.btn-o:hover{border-color:var(--pri);background:rgba(123,97,255,.15);color:#fff}
[data-theme="light"] .btn-o{background:rgba(255,255,255,.6);color:var(--on);border-color:var(--ol)}
[data-theme="light"] .btn-o:hover{background:rgba(123,97,255,.1);border-color:var(--pri);color:var(--pri)}

/* Cards */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:var(--sp-lg)}
.scard{background:var(--s2);border-radius:var(--r);padding:var(--sp-xl);border:1px solid var(--ol2);
  transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;
  transform-style:preserve-3d;will-change:transform}
.scard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--pri),var(--sec));opacity:0;transition:opacity .4s}
.scard::after{content:'';position:absolute;inset:-1px;border-radius:var(--r);z-index:-1;opacity:0;
  background:conic-gradient(from var(--angle,0deg),var(--pri),var(--sec),var(--tert),var(--pri));
  transition:opacity .5s}
@keyframes card-glow{to{--angle:360deg}}
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.scard:hover{border-color:transparent;
  transform:translateY(-3px) perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  box-shadow:0 16px 48px rgba(0,0,0,.15)}
.scard:hover::before{opacity:1}
.scard:hover::after{opacity:.4;animation:card-glow 4s linear infinite}
.scard-icon{width:48px;height:48px;border-radius:var(--rm);display:flex;align-items:center;
  justify-content:center;font-size:24px;margin-bottom:var(--sp-lg);background:rgba(123,97,255,.08);color:var(--pri-lt)}
.scard h3{font-family:var(--fd);font-size:var(--ts-lg);margin-bottom:var(--sp-sm);color:var(--on);letter-spacing:-.01em}
.scard p{color:var(--on2);font-size:var(--ts-sm);line-height:1.7}
.scard-tag{display:inline-block;margin-top:var(--sp-md);padding:6px 16px;border-radius:var(--r);
  font-size:var(--ts-xs);font-weight:600;background:rgba(123,97,255,.08);color:var(--pri-lt)}

/* Course cards */
.ccard{background:var(--s2);border-radius:var(--r);overflow:hidden;border:1px solid var(--ol2);
  transition:all .4s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}
.ccard:hover{border-color:var(--sec);transform:translateY(-3px);box-shadow:0 16px 48px rgba(0,0,0,.12)}
.ccard-head{padding:var(--sp-lg) var(--sp-xl);background:linear-gradient(135deg,var(--s3),var(--s4))}
.ccard-head .cat{font-size:var(--ts-xs);color:var(--sec);font-weight:600;text-transform:uppercase;letter-spacing:2px;margin-bottom:4px}
.ccard-head h3{font-family:var(--fd);font-size:var(--ts-md);color:var(--on);letter-spacing:-.01em}
.ccard-body{padding:var(--sp-lg) var(--sp-xl);flex:1;display:flex;flex-direction:column;gap:var(--sp-md)}
.ccard-desc{color:var(--on2);font-size:var(--ts-sm);line-height:1.7;flex:1}
.ccard-meta{display:flex;align-items:center;gap:var(--sp-md);flex-wrap:wrap;font-size:var(--ts-xs);color:var(--on2)}
.ccard-foot{margin-top:auto;padding-top:var(--sp-sm);border-top:1px solid var(--ol2)}
.ccard-price{display:inline-flex;align-items:baseline;gap:4px;padding:8px 20px;
  border-radius:var(--r);background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.15)}
.ccard-price .amt{font-size:var(--ts-xl);font-weight:700;color:var(--sec)}
.ccard-price .cur{font-size:var(--ts-xs);color:var(--on2)}

/* Pricing */
.ptable{background:var(--s2);border-radius:var(--r);overflow:hidden;border:1px solid var(--ol2)}
.prow{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-lg) var(--sp-xl);
  border-bottom:1px solid var(--ol2);transition:all .3s cubic-bezier(.16,1,.3,1)}
.prow:last-child{border-bottom:none}
.prow:hover{background:var(--s3);padding-left:var(--sp-xl)}
.prow .sn{font-weight:500;color:var(--on);font-size:var(--ts-base)}
.prow .pt{font-size:var(--ts-md);font-weight:700;color:var(--sec);white-space:nowrap}
.pnote{text-align:center;padding:var(--sp-lg);color:var(--on2);font-size:var(--ts-sm);background:var(--s3)}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
@media(max-width:800px){.about-grid{grid-template-columns:1fr;gap:28px}}
.about-card{background:linear-gradient(145deg,var(--s2),var(--s3));border-radius:40px;padding:40px;
  border:1px solid var(--ol2);text-align:center;backdrop-filter:blur(8px);
  background:rgba(30,30,54,.6);transition:transform .4s,box-shadow .4s}
.about-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.2)}
[data-theme="light"] .about-card{background:rgba(255,255,255,.7)}
.about-av{width:140px;height:140px;border-radius:50%;background:linear-gradient(135deg,var(--pri),var(--sec));
  margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-size:56px;color:#fff}
.about-card h3{font-family:var(--fd);font-size:1.4rem;color:var(--on);margin-bottom:6px}
.about-card .sub{color:var(--sec);font-size:.88rem;font-weight:600}
.about-text h2{font-family:var(--fd);font-size:2rem;margin-bottom:20px;color:var(--on)}
.about-text p{color:var(--on2);font-size:1rem;line-height:1.8;margin-bottom:14px}
.val-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
@media(max-width:600px){.val-grid{grid-template-columns:1fr}}
.val-chip{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(30,30,54,.5);
  backdrop-filter:blur(6px);border-radius:var(--rm);border:1px solid var(--ol2);font-size:.88rem;
  color:var(--on);transition:all .3s}
.val-chip:hover{border-color:var(--pri);transform:translateX(4px)}
[data-theme="light"] .val-chip{background:rgba(255,255,255,.6)}

/* Contact */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:800px){.cgrid{grid-template-columns:1fr}}
.cform{background:var(--s2);border-radius:var(--r);padding:var(--sp-xl);border:1px solid var(--ol2)}
.cform h3{font-family:var(--fd);font-size:var(--ts-xl);margin-bottom:var(--sp-xl);letter-spacing:-.01em}
.ff{margin-bottom:var(--sp-lg);position:relative}
.ff label{display:block;font-size:var(--ts-xs);font-weight:500;color:var(--on2);margin-bottom:var(--sp-xs);
  letter-spacing:.5px;text-transform:uppercase}
.ff input,.ff textarea,.ff select{width:100%;padding:14px 16px;background:var(--s3);
  border:1.5px solid var(--ol2);border-radius:var(--rm);color:var(--on);font-family:var(--fb);
  font-size:var(--ts-base);transition:all .25s cubic-bezier(.16,1,.3,1);outline:none}
.ff input:focus,.ff textarea:focus,.ff select:focus{border-color:var(--pri);
  box-shadow:0 0 0 4px rgba(123,97,255,.1);background:var(--s2)}
.ff input::placeholder,.ff textarea::placeholder{color:var(--on2);opacity:.5}
.ff textarea{min-height:120px;resize:vertical}
.ff select option{background:var(--s2);color:var(--on)}

.cinfo{display:flex;flex-direction:column;gap:var(--sp-md)}
.iblock{background:rgba(27,27,50,.5);backdrop-filter:blur(10px);border-radius:var(--r);padding:var(--sp-lg);
  border:1px solid var(--ol2);display:flex;gap:var(--sp-md);align-items:flex-start;
  transition:all .35s cubic-bezier(.16,1,.3,1)}
.iblock:hover{border-color:var(--pri);background:rgba(36,36,64,.65);transform:translateX(3px)}
[data-theme="light"] .iblock{background:rgba(255,255,255,.6);backdrop-filter:blur(12px)}
[data-theme="light"] .iblock:hover{background:rgba(255,255,255,.85)}
.iblock .iw{width:44px;height:44px;border-radius:var(--rm);background:rgba(123,97,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--pri-lt);flex-shrink:0}
.iblock h4{font-size:var(--ts-xs);color:var(--on2);font-weight:500;margin-bottom:4px;letter-spacing:.3px;text-transform:uppercase}
.iblock .iv{font-size:var(--ts-base);color:var(--on);font-weight:500}
.iblock .note{font-size:var(--ts-xs);color:var(--on2);margin-top:4px}
.conf-badge{background:linear-gradient(135deg,var(--s3),var(--s4));border-radius:var(--r);
  padding:var(--sp-lg) var(--sp-xl);border:1px solid var(--ol2);display:flex;align-items:center;gap:var(--sp-md);margin-top:var(--sp-sm)}
.conf-badge p{color:var(--on2);font-size:var(--ts-sm);line-height:1.6}

/* Footer */
.pfooter{position:relative;z-index:1;padding:var(--sp-3xl) var(--sp-lg);text-align:center;
  border-top:1px solid var(--ol2);background:var(--s1)}
.pfooter::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--pri),var(--sec),var(--pri),transparent)}
.pfooter-in{max-width:1100px;margin:0 auto}
.pfooter-brand{font-family:var(--fd);font-size:var(--ts-lg);color:var(--on);margin-bottom:var(--sp-lg);display:inline-block}
/* Brand-Logo size-cap (User-Direktive 2026-04-28: "logo im footer viel zu gross").
   Wirkt template-übergreifend — yoga_global hat den selben cap für cmoments. */
.pfooter-brand img{max-width:200px;max-height:64px;width:auto;height:auto;object-fit:contain;display:block;opacity:.9;transition:opacity .2s}
.pfooter-brand:hover img{opacity:1}
.pnav-brand img{max-width:160px;max-height:44px;width:auto;height:auto;object-fit:contain}
.pfooter-links{display:flex;justify-content:center;gap:var(--sp-lg);flex-wrap:wrap;margin-bottom:var(--sp-lg)}
.pfooter-links a{color:var(--on2);font-size:var(--ts-sm)}
.pfooter-copy{font-size:var(--ts-xs);color:var(--on2);opacity:.5}
/* Social media icons */
.pfooter-social{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.pfooter-social-link{display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--ol2);
  color:var(--on2);transition:all .3s var(--ease-2,ease);text-decoration:none}
.pfooter-social-link svg{width:18px;height:18px}
.pfooter-social-link:hover{color:var(--pri);border-color:var(--pri);
  transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
[data-theme="light"] .pfooter-social-link:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}

/* Detail page */
/* DEPRECATED: use render_public_hero() instead (#143) */
.detail-hero{padding:140px var(--sp-lg) var(--sp-3xl);text-align:center;position:relative;z-index:1}
.detail-hero h1{font-family:var(--fd);font-size:clamp(var(--ts-2xl),4vw,var(--ts-3xl));color:var(--on);
  margin-bottom:var(--sp-lg);letter-spacing:-.02em}
.detail-content{max-width:680px;margin:0 auto;padding:0 var(--sp-lg) var(--sp-4xl);position:relative;z-index:1}
.detail-content p{color:var(--on2);font-size:var(--ts-base);line-height:1.85;margin-bottom:var(--sp-lg)}
.detail-price{display:inline-flex;align-items:baseline;gap:6px;padding:12px var(--sp-xl);
  border-radius:var(--r);background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.12);margin-bottom:var(--sp-xl)}
.detail-price .amt{font-size:var(--ts-xl);font-weight:700;color:var(--sec)}
.detail-price .cur{font-size:var(--ts-sm);color:var(--on2)}

/* Flash */
.flash{max-width:600px;margin:16px auto;padding:14px 20px;border-radius:var(--rm);text-align:center;font-size:.92rem}
.flash-ok{background:rgba(0,212,170,.12);color:var(--tert);border:1px solid rgba(0,212,170,.25)}
.flash-err{background:rgba(255,107,107,.12);color:var(--err);border:1px solid rgba(255,107,107,.25)}

/* Responsive */
@media(max-width:900px){
  .hero h1{font-size:clamp(1.8rem,5vw,3rem)}
  .hero p{font-size:1rem;padding:0 16px}
  /* Hero-Acts: auf Mobile IMMER mittig, unabhängig vom Template-acts_justify */
  .hero-acts{flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:10px}
  .hero-acts .btn{width:100%;max-width:300px;justify-content:center}
  /* Hero-Body auf Mobile mittig, auch wenn Template align:left hat */
  .hero{text-align:center!important;align-items:center!important}
  .hero h1,.hero p{margin-left:auto!important;margin-right:auto!important;text-align:center!important}
  /* Rotierte Hero-p-Karten (psychologie etc.) auf Mobile nicht rotieren */
  .hero p{transform:none!important}
  .pnav-in{padding:0 16px}
  .about-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:600px){
  .psec{padding:50px 16px}
  .sgrid{grid-template-columns:1fr;gap:28px}
  .cgrid{grid-template-columns:1fr;gap:28px}
  /* Template-Card-Rotations auf Mobile neutralisieren (sah angeklebt aus) */
  .sgrid .scard,.sgrid .ccard,.cgrid .ccard,.sgrid .rv,.cgrid .rv{transform:none!important}
  .sgrid .scard:hover,.sgrid .ccard:hover,.cgrid .ccard:hover{transform:translateY(-3px)!important}
  .about-grid{grid-template-columns:1fr}
  .prow{flex-direction:column;gap:6px;text-align:center}
  .scard{padding:22px}
  .val-grid{grid-template-columns:1fr}
  .cform{padding:24px}
  .book-grid{grid-template-columns:1fr}
  /* DEPRECATED: use render_public_hero() instead (#143) */
.detail-hero{padding:100px 16px 40px}
  .detail-content{padding:0 16px 60px}
  /* User-Direktive 2026-04-28: footer mobile zu hoch — links nebeneinander
     statt vertikaler Stack. flex-wrap:wrap erlaubt umbruch in 2-3 Reihen. */
  .pfooter-links{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px 12px;font-size:.76em;margin-bottom:10px}
  .pfooter-links a{padding:3px 6px}
  /* User-Direktive 2026-04-28 (Iteration 2): footer immer noch zu gross.
     Mobile: kompakteres Padding + kleinere Logo-Hoehe + tighter section-gaps. */
  .pfooter{padding:24px 12px 18px}
  .pfooter-brand{margin-bottom:10px}
  .pfooter-brand img{max-height:42px;max-width:140px}
  .pfooter-social{margin:8px 0;gap:10px}
  .pfooter-social-link{width:32px;height:32px}
  .pfooter-social-link svg{width:14px;height:14px}
  .pfooter-addr{margin:4px 0!important;font-size:.78em!important}
  .pfooter-copy{font-size:.7em;margin-top:6px}
  .pnav-brand span{font-size:.95rem;letter-spacing:.2px}
  .pnav-links{gap:0}
  /* User-Direktive 2026-04-28 (Iteration 3): Mobile-Menü — icon + text in
     EINER LINIE (vertikal zentriert), Mitte-Buchstabe = Mitte-Icon.
     flex statt grid: garantiert single-row mit align-items:center. */
  .pnav-links a{
    display:flex!important;flex-direction:row-reverse;align-items:center;
    justify-content:flex-start;gap:12px;padding:14px 24px;
    font-size:.95rem;min-height:44px;line-height:1;text-align:right
  }
  .pnav-links a > .material-symbols-outlined{
    width:22px;flex-shrink:0;text-align:center;
    font-size:20px!important;line-height:1!important;
    vertical-align:middle!important;opacity:.75
  }
}
/* Sehr schmale Viewports: Brand-Text ausblenden (nur Icon bleibt) */
@media(max-width:380px){
  .pnav-brand span{display:none}
}
/* Mobile Hero: bessere Lesbarkeit bei komplexen Hintergründen (Brand-Truncation-Fix) */
@media(max-width:900px){
  .hero p{text-shadow:0 1px 10px rgba(0,0,0,.7),0 0 24px rgba(0,0,0,.45);opacity:1!important}
  .hero{background-color:rgba(0,0,0,.1)}
}

/* Scroll reveal with stagger */
.rv{opacity:0;transform:translateY(30px);transition:all .7s cubic-bezier(.16,1,.3,1)}
.rv.vis{opacity:1;transform:translateY(0)}
.sgrid .rv:nth-child(1){transition-delay:.0s}
.sgrid .rv:nth-child(2){transition-delay:.08s}
.sgrid .rv:nth-child(3){transition-delay:.16s}
.sgrid .rv:nth-child(4){transition-delay:.24s}
.sgrid .rv:nth-child(5){transition-delay:.32s}
.sgrid .rv:nth-child(6){transition-delay:.40s}

/* Divider - animated gradient */
.cdiv{width:100%;max-width:180px;height:2px;
  background:linear-gradient(90deg,transparent,var(--pri),var(--sec),var(--pri),transparent);
  background-size:200% 100%;animation:shimmer 3s ease infinite;
  margin:0 auto 40px;border-radius:1px}

/* Skip link (a11y) */
.skip-link{position:absolute;top:-60px;left:16px;background:var(--pri);color:#fff;padding:10px 20px;
  border-radius:var(--rs);font-weight:600;z-index:200;transition:top .3s;text-decoration:none}
.skip-link:focus{top:8px;outline:3px solid var(--sec);outline-offset:2px}

/* Focus visible (a11y) */
:focus-visible{outline:2px solid var(--pri-lt);outline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--pri-lt);outline-offset:2px}

/* Light mode overrides */
[data-theme="light"] .pnav{background:rgba(250,248,255,.92)}
[data-theme="light"] .hero-glow{opacity:.08}
[data-theme="light"] #starfield{opacity:0;pointer-events:none}
[data-theme="light"] .scard{box-shadow:0 2px 8px rgba(100,80,160,.06)}
[data-theme="light"] .scard:hover{box-shadow:0 8px 24px rgba(100,80,160,.12)}
[data-theme="light"] .ccard{box-shadow:0 2px 8px rgba(100,80,160,.06)}
[data-theme="light"] .ccard:hover{box-shadow:0 8px 24px rgba(100,80,160,.12)}
[data-theme="light"] /* DEPRECATED: use render_public_hero() instead (#143) */
.detail-hero{background-image:linear-gradient(rgba(243,240,251,.8),rgba(250,248,255,.92)),var(--_bg)!important}
[data-theme="light"] .detail-hero h1{color:var(--on)}
[data-theme="light"] .detail-hero .scard-icon{color:var(--pri)}
[data-theme="light"] .detail-hero .detail-price .amt{color:var(--sec)}
[data-theme="light"] .detail-hero .detail-price .cur{color:var(--on2)}
[data-theme="light"] .pfooter{border-top-color:var(--ol2)}
[data-theme="light"] .pfooter-copy{color:#4A475E}
/* btn-o light overrides are inline with the button definition */
[data-theme="light"] .iblock{box-shadow:0 2px 8px rgba(100,80,160,.06)}
[data-theme="light"] .cform{box-shadow:0 2px 12px rgba(100,80,160,.08)}
[data-theme="light"] .ptable{box-shadow:0 2px 12px rgba(100,80,160,.08)}
[data-theme="light"] .about-card{box-shadow:0 4px 16px rgba(100,80,160,.08)}

/* Spinner for loading states */
@keyframes spin{to{transform:rotate(360deg)}}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero-glow,.hero p,.hero-acts,.cdiv,.scroll-progress,.scard::after{animation:none!important}
  .hero h1{animation:none!important}
  .scard,.ccard,.btn,.iblock,.theme-toggle,.val-chip,.about-card,.prow{transition:none}
  #starfield{display:none}
  body::before{display:none}
}

/* Button active states */
.btn-p:active{transform:translateY(0);box-shadow:0 2px 8px rgba(123,97,255,.3)}
.btn-o:active{background:rgba(123,97,255,.15);transform:scale(.98)}

/* Card clickable affordance */
.scard{position:relative}
.scard h3 a{color:var(--on);text-decoration:none;transition:color .2s}
.scard h3 a:hover{color:var(--pri-lt)}
.scard h3 a::after{content:'';position:absolute;inset:0;z-index:1}

/* Card resting shadows (dark) */
.scard{box-shadow:0 2px 8px rgba(0,0,0,.12)}
.ccard{box-shadow:0 2px 8px rgba(0,0,0,.12)}

/* Card description clamp */
.scard p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Footer hover */
.pfooter-links a{transition:color .2s}
.pfooter-links a:hover{color:var(--pri-lt);text-decoration:underline;text-underline-offset:3px}

/* Form validation */
.ff input:user-invalid,.ff textarea:user-invalid{border-color:var(--err);box-shadow:0 0 0 3px rgba(255,107,107,.15)}

/* Theme toggle + nav actions — 3-col flex right-spalte (Issue #462) */
.pnav-acts{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;z-index:5;position:relative}
.theme-toggle{background:none;border:2px solid var(--ol);border-radius:50%;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--on2);
  transition:all .25s;flex:0 0 auto;z-index:5;position:relative}
.theme-toggle:hover{border-color:var(--pri);color:var(--pri-lt);background:rgba(123,97,255,.08)}
.theme-toggle .material-symbols-outlined{font-size:20px}

/* Mobile UX */
@media(max-width:900px){
  .pnav-acts{margin-left:auto}
  .pnav-brand span{max-width:calc(100vw - 180px);overflow:hidden;text-overflow:clip;white-space:nowrap}
  .pnav-links{max-height:calc(100vh - 68px);overflow-y:auto}
  .pnav-links a{padding:14px 16px;min-height:48px;display:flex;align-items:center}
  /* Template-Card-Rotations auch auf Tablet neutralisieren */
  .sgrid .scard,.sgrid .ccard,.cgrid .ccard{transform:none!important}
}
@media(max-width:800px){
  .cgrid{display:flex;flex-direction:column-reverse}
}
@media(max-width:900px){
  .psec{padding:var(--sp-3xl) var(--sp-lg)}
}
@media(max-width:600px){
  .psec{padding:var(--sp-2xl) var(--sp-md)}
  .prow{align-items:flex-start;text-align:left}
  .sgrid{gap:var(--sp-md)}
  .pfooter{padding:var(--sp-2xl) var(--sp-md)}
  .pfooter-links{gap:var(--sp-sm)}
  /* DEPRECATED: use render_public_hero() instead (#143) */
.detail-hero{padding:100px var(--sp-md) var(--sp-2xl)}
  .detail-content{padding:0 var(--sp-md) var(--sp-3xl)}
}
/* Print */
@media print{
  .pnav,.pfooter,#starfield,.hero-glow,.skip-link,.pnav-acts,.scroll-progress{display:none!important}
  body,body::before,body::after{background:#fff!important;color:#000!important}
  .scard,.ccard,.ptable,.cform,.iblock,.conf-badge{border:1px solid #ccc;box-shadow:none;background:#fff}
  .psec{padding:24px 0}
  a{color:#333}
}
/* ── Utility classes (Tailwind-inspired, using our tokens) ── */
.flex{display:flex}.flex-col{display:flex;flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
.gap-xs{gap:var(--sp-xs)}.gap-sm{gap:var(--sp-sm)}.gap-md{gap:var(--sp-md)}.gap-lg{gap:var(--sp-lg)}.gap-xl{gap:var(--sp-xl)}
.grid{display:grid}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.text-xs{font-size:var(--ts-xs)}.text-sm{font-size:var(--ts-sm)}.text-base{font-size:var(--ts-base)}.text-md{font-size:var(--ts-md)}.text-lg{font-size:var(--ts-lg)}.text-xl{font-size:var(--ts-xl)}.text-2xl{font-size:var(--ts-2xl)}
.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}
.font-display{font-family:var(--fd)}.font-body{font-family:var(--fb)}
.font-light{font-weight:300}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.text-on{color:var(--on)}.text-on2{color:var(--on2)}.text-pri{color:var(--pri-lt)}.text-sec{color:var(--sec)}.text-err{color:var(--err)}.text-tert{color:var(--tert)}
.bg-surf{background:var(--surf)}.bg-s1{background:var(--s1)}.bg-s2{background:var(--s2)}.bg-s3{background:var(--s3)}
.rounded{border-radius:var(--r)}.rounded-sm{border-radius:var(--rs)}.rounded-md{border-radius:var(--rm)}.rounded-full{border-radius:9999px}
.border{border:1px solid var(--ol2)}.border-pri{border-color:var(--pri)}.border-sec{border-color:var(--sec)}
.p-sm{padding:var(--sp-sm)}.p-md{padding:var(--sp-md)}.p-lg{padding:var(--sp-lg)}.p-xl{padding:var(--sp-xl)}
.m-0{margin:0}.mt-md{margin-top:var(--sp-md)}.mt-lg{margin-top:var(--sp-lg)}.mt-xl{margin-top:var(--sp-xl)}.mb-md{margin-bottom:var(--sp-md)}.mb-lg{margin-bottom:var(--sp-lg)}
.w-full{width:100%}.max-w-sm{max-width:480px}.max-w-md{max-width:680px}.max-w-lg{max-width:900px}.max-w-xl{max-width:1100px}
.mx-auto{margin-left:auto;margin-right:auto}
.hidden{display:none}.block{display:block}.inline-flex{display:inline-flex}
.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opacity-50{opacity:.5}.opacity-75{opacity:.75}
.transition{transition:all .3s cubic-bezier(.16,1,.3,1)}.hover\:scale:hover{transform:scale(1.02)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* Glass card variant */
.glass{background:rgba(27,27,50,.5);backdrop-filter:blur(12px);border:1px solid var(--ol2)}
[data-theme="light"] .glass{background:rgba(255,255,255,.6);backdrop-filter:blur(12px)}
/* Badge */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:var(--r);font-size:var(--ts-xs);font-weight:600}
.badge-pri{background:rgba(123,97,255,.12);color:var(--pri-lt)}
.badge-sec{background:rgba(212,175,55,.12);color:var(--sec)}
.badge-tert{background:rgba(0,212,170,.12);color:var(--tert)}
.badge-err{background:rgba(255,107,107,.12);color:var(--err)}
/* Prose (for markdown content) */
.prose{color:var(--on2);font-size:var(--ts-base);line-height:1.85}
.prose h1,.prose h2,.prose h3{font-family:var(--fd);color:var(--on);margin:var(--sp-xl) 0 var(--sp-md)}
.prose h1{font-size:var(--ts-3xl)}.prose h2{font-size:var(--ts-2xl)}.prose h3{font-size:var(--ts-xl)}
.prose p{margin-bottom:var(--sp-md)}.prose ul,.prose ol{margin:0 0 var(--sp-md) var(--sp-lg)}
.prose li{margin-bottom:var(--sp-xs)}.prose a{color:var(--pri-lt);text-decoration:underline;text-underline-offset:2px}
.prose blockquote{border-left:3px solid var(--pri);padding:var(--sp-sm) var(--sp-lg);margin:var(--sp-lg) 0;background:var(--s2);border-radius:0 var(--rs) var(--rs) 0}
.prose img{border-radius:var(--rm);margin:var(--sp-lg) 0}
.prose code{background:var(--s3);padding:2px 6px;border-radius:4px;font-size:.9em}
.prose hr{border:none;height:1px;background:var(--ol2);margin:var(--sp-xl) 0}
/* Aspect ratio containers */
.aspect-video{aspect-ratio:16/9}.aspect-square{aspect-ratio:1/1}.aspect-3\/4{aspect-ratio:3/4}.aspect-4\/3{aspect-ratio:4/3}

/* ══════════════════════════════════════════════════════════════
   2026 MODERN CSS TOOLKIT
   Inspired by: Open Props, Pico.css, Tailwind, Beer CSS
   Features: Container Queries, :has(), Scroll Animations,
   color-mix(), text-wrap, Logical Props, Subgrid, @layer
   ══════════════════════════════════════════════════════════════ */

/* ── CONTAINER QUERIES ──────────────────────────────────────── */
.container{container-type:inline-size}
.container-name{container-type:inline-size;container-name:card}
@container (max-width:600px){
  .c\:grid-1{grid-template-columns:1fr}
  .c\:hide{display:none}
  .c\:stack{flex-direction:column}
}
@container (max-width:400px){
  .c\:text-sm{font-size:var(--ts-sm)}
  .c\:pad-sm{padding:var(--sp-sm)}
}
@container (min-width:600px){
  .c\:grid-2{grid-template-columns:1fr 1fr}
  .c\:flex-row{flex-direction:row}
}
@container (min-width:900px){
  .c\:grid-3{grid-template-columns:repeat(3,1fr)}
}

/* ── :has() PARENT SELECTORS ────────────────────────────────── */
/* Card with image gets tighter text */
.scard:has(img){padding-top:0}
.scard:has(img) h3{margin-top:var(--sp-md)}
/* Form group with invalid input gets error styling */
.ff:has(:user-invalid) label{color:var(--err)}
/* Section with no children hides */
.psec:has(> :only-child:empty){display:none}
/* Nav link active state lifts logo */
.pnav:has(.act) .pnav-brand .li{border-color:var(--pri)}

/* ── TEXT WRAP: BALANCE & PRETTY ────────────────────────────── */
.hero h1,.psec-title,.detail-hero h1,.cform h3{text-wrap:balance}
.hero p,.psec-sub,.scard p,.ccard p,.prose p{text-wrap:pretty}

/* ── color-mix() DYNAMIC HOVER STATES ───────────────────────── */
.hover-lift:hover{background:color-mix(in oklch,var(--pri) 10%,var(--surf))}
.hover-accent:hover{color:color-mix(in oklch,var(--pri) 80%,var(--on))}
.hover-dim:hover{background:color-mix(in oklch,var(--on) 5%,var(--surf))}
/* Subtle card hover using color-mix */
.scard:hover .scard-icon{background:color-mix(in oklch,var(--pri) 15%,transparent)}
/* Dynamic disabled state */
.btn:disabled,.btn[aria-disabled="true"]{
  background:color-mix(in oklch,var(--surf) 80%,var(--on));
  color:color-mix(in oklch,var(--on) 40%,transparent);cursor:not-allowed;pointer-events:none}

/* ── SCROLL-DRIVEN ANIMATIONS ───────────────────────────────── */
@supports(animation-timeline:scroll()){
  /* Reveal cards on scroll into view */
  .rv-scroll{animation:scroll-reveal linear both;animation-timeline:view();
    animation-range:entry 0% entry 30%}
  @keyframes scroll-reveal{from{opacity:0;transform:translateY(32px) scale(.97)}to{opacity:1;transform:none}}

  /* Parallax hero background */
  .hero-bg{animation:parallax-bg linear;animation-timeline:scroll();animation-range:0% 50%}
  @keyframes parallax-bg{from{transform:translateY(0) scale(1.05)}to{transform:translateY(-8%) scale(1.05)}}

  /* Section label slide-in from left */
  .psec-label{animation:label-slide linear both;animation-timeline:view();animation-range:entry 0% entry 25%}
  @keyframes label-slide{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}

  /* Fade-in for cards in grid */
  .sgrid .scard,.cgrid .ccard{animation:card-scroll-in linear both;animation-timeline:view();
    animation-range:entry 0% entry 35%}
  @keyframes card-scroll-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

  /* Progress bar follows scroll natively */
  .scroll-progress{animation:scroll-fill linear;animation-timeline:scroll(root);width:100%!important}
  @keyframes scroll-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .scroll-progress{transform-origin:left}
}

/* ── SUBGRID ────────────────────────────────────────────────── */
@supports(grid-template-rows:subgrid){
  .sgrid{display:grid}
  .scard{display:grid;grid-template-rows:subgrid;grid-row:span 4}
}

/* ── LOGICAL PROPERTIES UTILITIES ───────────────────────────── */
.mi-auto{margin-inline:auto}
.pi-md{padding-inline:var(--sp-md)}.pi-lg{padding-inline:var(--sp-lg)}
.pb-md{padding-block:var(--sp-md)}.pb-lg{padding-block:var(--sp-lg)}.pb-xl{padding-block:var(--sp-xl)}
.bs-top{border-block-start:1px solid var(--ol2)}.bs-bottom{border-block-end:1px solid var(--ol2)}
.is-start{inset-inline-start:0}.ie-end{inset-inline-end:0}
.gap-sm{gap:var(--sp-sm)}.gap-md{gap:var(--sp-md)}.gap-lg{gap:var(--sp-lg)}.gap-xl{gap:var(--sp-xl)}

/* ── SCROLL SNAP ────────────────────────────────────────────── */
.snap-x{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none}
.snap-x::-webkit-scrollbar{display:none}
.snap-item{scroll-snap-align:start;flex-shrink:0}
.snap-center{scroll-snap-align:center}

/* ── MODERN EASING (Open Props inspired) ────────────────────── */
:root{
  --ease-1:cubic-bezier(.25,0,.5,1);
  --ease-2:cubic-bezier(.25,0,.4,1);
  --ease-3:cubic-bezier(.25,0,.3,1);
  --ease-elastic:cubic-bezier(.5,1.25,.75,1.25);
  --ease-bounce:cubic-bezier(.5,1.75,.75,.75);
  --ease-spring:cubic-bezier(.2,1.3,.7,1);
  --ease-in-out-5:cubic-bezier(.9,0,.1,1);
}

/* ── INTERPOLATE-SIZE (animate to auto) ─────────────────────── */
@supports(interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .accordion-body{height:0;overflow:hidden;transition:height .4s var(--ease-3)}
  .accordion-body.open{height:auto}
}

/* ── @supports PROGRESSIVE ENHANCEMENT ──────────────────────── */
@supports(backdrop-filter:blur(1px)){
  .glass{background:color-mix(in oklch,var(--surf) 70%,transparent);
    backdrop-filter:blur(16px) saturate(1.4);border:1px solid color-mix(in oklch,var(--on) 8%,transparent)}
}
@supports not (backdrop-filter:blur(1px)){
  .glass{background:var(--s2);border:1px solid var(--ol2)}
}

/* ── POPOVER READY ──────────────────────────────────────────── */
[popover]{background:var(--s2);color:var(--on);border:1px solid var(--ol2);border-radius:var(--rm,8px);
  padding:var(--sp-md);box-shadow:var(--elevate2,0 4px 16px rgba(0,0,0,.15));max-width:min(90vw,400px)}
[popover]::backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(4px)}

/* ── FOCUS VISIBLE (modern keyboard focus) ──────────────────── */
:focus-visible{outline:2px solid var(--pri);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}

/* ── VIEW TRANSITION CLASSES (for template-specific transitions) */
.vt-slide{view-transition-name:slide}
.vt-hero{view-transition-name:hero}
.vt-card{view-transition-name:card}

/* ── MODERN LAYOUT UTILITIES ────────────────────────────────── */
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--sp-lg)}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-col{display:flex;flex-direction:column}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ── COLOR SCHEME UTILITIES (template helpers) ──────────────── */
.text-pri{color:var(--pri)}.text-sec{color:var(--sec)}.text-tert{color:var(--tert)}.text-muted{color:var(--on2)}
.bg-s1{background:var(--s1)}.bg-s2{background:var(--s2)}.bg-s3{background:var(--s3)}
.bg-pri-soft{background:color-mix(in oklch,var(--pri) 10%,var(--surf))}
.bg-sec-soft{background:color-mix(in oklch,var(--sec) 10%,var(--surf))}
.border-subtle{border:1px solid var(--ol2)}.border-accent{border:1px solid var(--pri)}

/* ── ANIMATED GRADIENT BORDERS (for fancy templates) ────────── */
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.glow-border{position:relative;overflow:hidden}
.glow-border::before{content:'';position:absolute;inset:-2px;z-index:-1;
  background:conic-gradient(from var(--angle),var(--pri),var(--sec),var(--tert),var(--pri));
  animation:glow-spin 4s linear infinite;border-radius:inherit}
@keyframes glow-spin{to{--angle:360deg}}

/* ── SKELETON LOADING ───────────────────────────────────────── */
.skeleton{background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 50%,var(--s2) 75%);
  background-size:200% 100%;animation:skeleton-pulse 1.5s ease infinite;border-radius:var(--rs,4px)}
@keyframes skeleton-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── MOTION PREFERENCES SAFE DEFAULTS ───────────────────────── */
@media(prefers-reduced-motion:reduce){
  .rv-scroll,.hero-bg,.psec-label,.sgrid .scard,.cgrid .ccard{animation:none!important;
    opacity:1!important;transform:none!important}
  .scroll-progress{animation:none!important;transform:none!important}
  .glow-border::before{animation:none!important}
  .skeleton{animation:none!important}
}

/* ── PRINT STYLESHEET ───────────────────────────────────────── */
@media print{
  /* Hide non-essential elements */
  .pnav,.pfooter,.scroll-progress,.hero-glow,.hero-bg,.hero::before,.hero::after,
  .theme-toggle,.pnav-cta,.hero-acts,.btn,.ink-ticker,.brut-marquee,
  #starfield,body::before,body::after,.cdiv,.hero-deco,.parallax-layer{display:none!important}

  /* Reset backgrounds and colors for ink saving */
  body,html{background:#fff!important;color:#000!important}
  .hero{min-height:auto!important;background:#fff!important;padding:40px 0!important;text-align:left!important}
  .hero h1{color:#000!important;-webkit-text-stroke:0!important;font-size:2rem!important;
    text-shadow:none!important;filter:none!important}
  .hero p{color:#333!important;opacity:1!important;text-shadow:none!important}

  /* Clean sections */
  .psec{padding:20px 0!important;max-width:100%!important;page-break-inside:avoid}
  .psec::before{display:none!important}
  .psec-label{color:#666!important;background:none!important;border:none!important;box-shadow:none!important}
  .psec-title{color:#000!important;font-size:1.5rem!important}
  .psec-sub{color:#444!important;opacity:1!important}

  /* Cards as clean list items */
  .sgrid,.cgrid{display:block!important}
  .scard,.ccard{border:1px solid #ccc!important;border-radius:0!important;background:#fff!important;
    box-shadow:none!important;margin-bottom:12px!important;padding:16px!important;
    page-break-inside:avoid;backdrop-filter:none!important;animation:none!important;transform:none!important}
  .scard::before,.scard::after,.ccard::before{display:none!important}
  .scard h3,.ccard h3{color:#000!important;font-size:1.1rem!important}
  .scard p{color:#333!important;opacity:1!important;-webkit-line-clamp:unset!important}
  .scard .scard-icon{border:1px solid #ccc!important;background:#f5f5f5!important;color:#333!important;
    box-shadow:none!important}
  .scard .scard-tag{border:1px solid #999!important;background:#f5f5f5!important;color:#333!important}

  /* Price table clean */
  .ptable{border:1px solid #ccc!important;background:#fff!important;box-shadow:none!important;
    backdrop-filter:none!important}
  .prow{border-bottom:1px solid #ddd!important}
  .prow .pt,.prow .pp{color:#000!important}
  .pnote{background:#f5f5f5!important;color:#333!important}

  /* About section */
  .about-card{border:1px solid #ccc!important;background:#fff!important;box-shadow:none!important;
    backdrop-filter:none!important}
  .about-av{border:1px solid #ccc!important}
  .val-chip{border:1px solid #999!important;background:#f5f5f5!important;color:#333!important}

  /* Contact form */
  .cform{border:1px solid #ccc!important;background:#fff!important;box-shadow:none!important;
    backdrop-filter:none!important}
  .cform h3{color:#000!important}
  .iblock{border:1px solid #ccc!important;background:#fff!important;backdrop-filter:none!important}

  /* Footer info - show as text */
  .pfooter{display:block!important;border:none!important;background:#fff!important;
    padding:20px 0!important;color:#000!important}
  .pfooter-brand{color:#000!important}
  .pfooter-links a{color:#333!important}
  .pfooter-copy{color:#666!important;opacity:1!important}

  /* Links: show URL */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#666;font-weight:normal}
  a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:.8em;color:#666}
  a[href^="tel"]::after{content:" (" attr(href) ")";font-size:.8em;color:#666}

  /* Page setup */
  @page{margin:2cm}

  /* Animations off */
  *{animation:none!important;transition:none!important}
}

/* ── CSS CUSTOM HIGHLIGHTS API ──────────────────────────────── */
::highlight(search-result){background:color-mix(in oklch,var(--pri) 25%,transparent);color:var(--on)}
::highlight(search-active){background:var(--pri);color:var(--surf)}
::highlight(quote){background:color-mix(in oklch,var(--sec) 15%,transparent);border-bottom:2px solid var(--sec)}
::highlight(emphasis){background:color-mix(in oklch,var(--tert) 20%,transparent)}

/* ══════════════════════════════════════════════════════════════
   2026 EFFECTS TOOLKIT — Activated per template via data-template
   ══════════════════════════════════════════════════════════════ */

/* ── 1. ANIMATED GRADIENT TEXT (hero headlines) ─────────────── */
.gradient-text{background:linear-gradient(90deg,var(--pri),var(--sec),var(--tert,var(--pri-lt)),var(--pri));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:gradient-flow 6s linear infinite}
@keyframes gradient-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ── 2. AURORA BACKGROUND (behind hero) ─────────────────────── */
.aurora{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.aurora-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.15;
  mix-blend-mode:screen;animation:aurora-drift 15s ease-in-out infinite alternate}
.aurora-blob:nth-child(1){width:40vw;height:40vw;background:var(--pri);top:-10%;left:-5%;animation-delay:0s}
.aurora-blob:nth-child(2){width:35vw;height:35vw;background:var(--sec);top:20%;right:-10%;animation-delay:-5s;animation-duration:18s}
.aurora-blob:nth-child(3){width:30vw;height:30vw;background:var(--tert,var(--pri-lt));bottom:-5%;left:30%;animation-delay:-10s;animation-duration:20s}
@keyframes aurora-drift{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(5vw,3vh) scale(1.1)}
  66%{transform:translate(-3vw,5vh) scale(.95)}
  100%{transform:translate(2vw,-2vh) scale(1.05)}}
[data-theme="light"] .aurora-blob{opacity:.08;mix-blend-mode:multiply}

/* ── 3. 3D TILT CARDS (activated by JS, styled here) ────────── */
.tilt-card{transform-style:preserve-3d;perspective:800px;will-change:transform}
.tilt-card>*{transform:translateZ(0);transition:transform .15s ease-out}
.tilt-card:hover>h3,.tilt-card:hover>.scard-icon{transform:translateZ(20px)}

/* ── 4. MAGNETIC BUTTONS (JS adds transform, CSS defines transition) */
.magnetic-btn{transition:transform .3s var(--ease-spring,cubic-bezier(.2,1.3,.7,1))!important}

/* ── 5. SPOTLIGHT CURSOR (radial gradient follows mouse) ────── */
.spotlight-card{position:relative;overflow:hidden}
.spotlight-card::before{content:'';position:absolute;width:200px;height:200px;
  border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,color-mix(in oklch,var(--pri) 8%,transparent),transparent 70%);
  transform:translate(var(--mouse-x,-200px),var(--mouse-y,-200px));
  transition:opacity .3s;opacity:0}
.spotlight-card:hover::before{opacity:1}

/* ── 6. MORPHING BLOB SHAPES ───────────────────────────────── */
.morph{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;animation:morph-shape 8s ease-in-out infinite;
  transition:border-radius .5s}
@keyframes morph-shape{
  0%{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%}
  25%{border-radius:30% 60% 70% 40% / 50% 60% 30% 60%}
  50%{border-radius:50% 60% 30% 60% / 40% 70% 60% 30%}
  75%{border-radius:40% 30% 60% 50% / 70% 40% 50% 60%}
  100%{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%}}

/* ── 7. ANIMATED CSS COUNTERS (numbers count up via @property) ─ */
@property --num{syntax:'<integer>';initial-value:0;inherits:false}
.count-up{animation:count-up 2s var(--ease-2,ease) forwards;
  counter-reset:num var(--num);animation-timeline:view();animation-range:entry 0% entry 50%}
.count-up::after{content:counter(num)}
@keyframes count-up{from{--num:0}to{--num:var(--target,100)}}

/* ── 8. BENTO GRID ──────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:16px}
.bento>.span-2{grid-column:span 2}.bento>.span-3{grid-column:span 3}
.bento>.tall{grid-row:span 2}.bento>.wide{grid-column:span 2;grid-row:span 2}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}
  .bento>.span-3{grid-column:span 2}}
@media(max-width:600px){.bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .bento>.span-2,.bento>.span-3,.bento>.tall,.bento>.wide{grid-column:span 1;grid-row:span 1}}

/* ── 9. TEXT REVEAL ON SCROLL (words appear one by one) ─────── */
@supports(animation-timeline:view()){
  .text-reveal{animation:text-reveal-in linear both;animation-timeline:view();
    animation-range:entry 0% entry 40%}
  @keyframes text-reveal-in{from{opacity:0;filter:blur(4px);transform:translateY(8px)}
    to{opacity:1;filter:blur(0);transform:none}}
}

/* ── 10. CIRCLE WIPE THEME TRANSITION ───────────────────────── */
.theme-wipe{position:fixed;inset:0;z-index:9999;pointer-events:none;
  clip-path:circle(0% at var(--wipe-x,50%) var(--wipe-y,50%));
  transition:clip-path .6s cubic-bezier(.4,0,.2,1);will-change:clip-path}
.theme-wipe.active{clip-path:circle(150% at var(--wipe-x,50%) var(--wipe-y,50%))}

/* ── 11. LAYERED GLASSMORPHISM ──────────────────────────────── */
.glass-layer-1{background:color-mix(in oklch,var(--surf) 60%,transparent);
  backdrop-filter:blur(8px) saturate(1.2);border:1px solid color-mix(in oklch,var(--on) 6%,transparent)}
.glass-layer-2{background:color-mix(in oklch,var(--surf) 40%,transparent);
  backdrop-filter:blur(16px) saturate(1.5);border:1px solid color-mix(in oklch,var(--on) 8%,transparent)}
.glass-layer-3{background:color-mix(in oklch,var(--surf) 20%,transparent);
  backdrop-filter:blur(32px) saturate(1.8);border:1px solid color-mix(in oklch,var(--on) 10%,transparent)}

/* ── 12. CUSTOM CURSORS PER TEMPLATE ────────────────────────── */
[data-template="brutalist"]{cursor:crosshair}
[data-template="brutalist"] a,[data-template="brutalist"] button{cursor:crosshair}
[data-template="tattoo"] .hero{cursor:crosshair}
[data-template="retro"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23FF6B35' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23FF6B35'/%3E%3C/svg%3E") 12 12,auto}

/* ── 13. KINETIC HERO TYPE (letters stagger in) ─────────────── */
@supports(animation-timeline:view()){
  .kinetic-letter{display:inline-block;animation:kinetic-in .5s var(--ease-spring,ease) both;
    animation-timeline:view();animation-range:entry 0% entry 30%}
  .kinetic-letter:nth-child(2){animation-delay:.03s}
  .kinetic-letter:nth-child(3){animation-delay:.06s}
  .kinetic-letter:nth-child(4){animation-delay:.09s}
  .kinetic-letter:nth-child(5){animation-delay:.12s}
  .kinetic-letter:nth-child(6){animation-delay:.15s}
  .kinetic-letter:nth-child(7){animation-delay:.18s}
  .kinetic-letter:nth-child(8){animation-delay:.21s}
  @keyframes kinetic-in{from{opacity:0;transform:translateY(40px) rotateX(90deg);filter:blur(4px)}
    to{opacity:1;transform:none;filter:blur(0)}}
}

/* ── 14. HORIZONTAL SCROLL SECTION ──────────────────────────── */
.hscroll-section{overflow-x:auto;display:flex;gap:24px;scroll-snap-type:x mandatory;
  padding:24px 0;scrollbar-width:none;-ms-overflow-style:none}
.hscroll-section::-webkit-scrollbar{display:none}
.hscroll-section>*{scroll-snap-align:start;flex-shrink:0}

/* ── 15. NOISE DISPLACEMENT (subtle organic movement) ────────── */
.noise-displace{filter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='2' seed='1' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='3' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/svg%3E#d")}

/* ── EFFECT ACTIVATION VIA BODY CLASSES (fx-*) ─────────────── */
/* Controlled by admin per template. Body gets classes like fx-gradient_text, fx-spotlight, etc.
   Selectors cover BOTH astrologie-classes (.hero h1, .scard, .about-av, .hero-acts .btn) and
   yoga-classes (.yhero-h1, .ccard/.scard, .yabout-img, .yhero-cta .btn) so effects greifen
   überall durch. */

/* Gradient text on hero — astrologie + yoga heroes + section titles */
.fx-gradient_text .hero h1,
.fx-gradient_text .yhero-h1,
.fx-gradient_text .ykurse-hero h1,
.fx-gradient_text .psec-title em,
.fx-gradient_text .yhero-greet{
  background:linear-gradient(90deg,var(--pri),var(--sec-lt,var(--sec)),var(--tert,var(--pri-lt)),var(--pri));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:gradient-flow 6s linear infinite}

/* Text reveal on scroll for section + hero titles */
@supports(animation-timeline:view()){
.fx-text_reveal .psec-title,
.fx-text_reveal .yhero-h1,
.fx-text_reveal .ysec-head h2{
  animation:text-reveal-in linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
}

/* Morphing blob on about avatar (astrologie) + yoga's about/hero images */
.fx-morph_blob .about-av,
.fx-morph_blob .yabout-img,
.fx-morph_blob .yhero-wrap::before{
  border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;animation:morph-shape 8s ease-in-out infinite}

/* Spotlight cards — both card types */
.fx-spotlight .scard,
.fx-spotlight .ccard,
.fx-spotlight .yhome-class-card,
.fx-spotlight .yhome-event-card,
.fx-spotlight .yev-card{position:relative;overflow:hidden}
.fx-spotlight .scard::after,
.fx-spotlight .ccard::after,
.fx-spotlight .yhome-class-card::after,
.fx-spotlight .yhome-event-card::after,
.fx-spotlight .yev-card::after{
  content:'';position:absolute;width:300px;height:300px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,color-mix(in oklch,var(--pri) 18%,transparent),transparent 70%);
  transform:translate(var(--mouse-x,-300px),var(--mouse-y,-300px));
  transition:opacity .3s;opacity:0}
.fx-spotlight .scard:hover::after,
.fx-spotlight .ccard:hover::after,
.fx-spotlight .yhome-class-card:hover::after,
.fx-spotlight .yhome-event-card:hover::after,
.fx-spotlight .yev-card:hover::after{opacity:1}

/* Magnetic buttons — astrologie + yoga hero CTAs */
.fx-magnetic_btns .hero-acts .btn,
.fx-magnetic_btns .yhero-cta .btn,
.fx-magnetic_btns .yhero-cta .btn-primary,
.fx-magnetic_btns .pnav-cta{
  transition:transform .3s cubic-bezier(.2,1.3,.7,1)}

/* Tilt cards — beide Card-Typen */
.fx-tilt_cards .scard,
.fx-tilt_cards .ccard,
.fx-tilt_cards .yhome-class-card,
.fx-tilt_cards .yev-card{
  transform-style:preserve-3d;perspective:800px;transition:transform .3s ease}

/* Reduced motion: kill ALL new effects */
@media(prefers-reduced-motion:reduce){
  .gradient-text,.morph,.aurora-blob,.count-up,.kinetic-letter,
  .fx-gradient_text .hero h1,.fx-gradient_text .yhero-h1,.fx-gradient_text .psec-title em,
  .fx-text_reveal .psec-title,.fx-text_reveal .yhero-h1,
  .fx-morph_blob .about-av,.fx-morph_blob .yabout-img{
    animation:none!important;-webkit-text-fill-color:unset!important;color:inherit!important;
    background-clip:unset!important;-webkit-background-clip:unset!important;
    border-radius:revert!important;filter:none!important;transform:none!important}
}

/* ── NEW: Aurora-Blobs (langsam morphende Farb-Wolken im Hintergrund) ── */
.fx-aurora{position:relative;isolation:isolate}
.fx-aurora::before,.fx-aurora::after{
  content:'';position:fixed;width:60vmax;height:60vmax;border-radius:50%;
  pointer-events:none;z-index:-1;opacity:.35;filter:blur(80px);
  animation:aurora-drift 28s ease-in-out infinite}
.fx-aurora::before{
  top:-20vmax;left:-15vmax;
  background:radial-gradient(circle, var(--pri) 0%, transparent 60%);
  animation-delay:0s}
.fx-aurora::after{
  bottom:-20vmax;right:-10vmax;
  background:radial-gradient(circle, var(--sec, var(--pri-lt)) 0%, transparent 60%);
  animation-delay:-14s}
@keyframes aurora-drift{
  0%,100%{transform:translate(0,0) scale(1) rotate(0deg)}
  33%{transform:translate(8vmax,-5vmax) scale(1.15) rotate(120deg)}
  66%{transform:translate(-6vmax,4vmax) scale(.9) rotate(240deg)}
}

/* ── NEW: Constellation lines (animierte Linien-Map mit blinkenden Knoten) ── */
.fx-constellations{position:relative}
.fx-constellations::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, var(--pri) 50%, transparent),
    radial-gradient(1px 1px at 28% 42%, var(--sec,var(--pri-lt)) 50%, transparent),
    radial-gradient(1.5px 1.5px at 53% 25%, var(--pri-lt) 50%, transparent),
    radial-gradient(1px 1px at 78% 67%, var(--sec,var(--pri-lt)) 50%, transparent),
    radial-gradient(1.5px 1.5px at 88% 33%, var(--pri) 50%, transparent),
    radial-gradient(1px 1px at 38% 78%, var(--pri-lt) 50%, transparent),
    radial-gradient(1px 1px at 65% 88%, var(--sec,var(--pri-lt)) 50%, transparent);
  opacity:.7;animation:constellation-twinkle 6s ease-in-out infinite}
@keyframes constellation-twinkle{
  0%,100%{opacity:.5}
  50%{opacity:.85}
}

/* ── NEW: Mesh-Gradient (animierter Multi-Color-Flow) ── */
.fx-mesh-gradient{position:relative;isolation:isolate}
.fx-mesh-gradient::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(at 17% 25%, var(--pri) 0px, transparent 35%),
    radial-gradient(at 82% 23%, var(--sec, var(--pri-lt)) 0px, transparent 35%),
    radial-gradient(at 47% 76%, var(--tert, var(--sec-lt)) 0px, transparent 40%),
    radial-gradient(at 12% 84%, var(--pri-lt) 0px, transparent 30%),
    radial-gradient(at 90% 90%, var(--pri) 0px, transparent 30%);
  opacity:.18;filter:blur(40px);animation:mesh-shift 30s ease-in-out infinite}
@keyframes mesh-shift{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-3%,2%) scale(1.05)}
}

/* ── NEW: Scanlines (CRT/Synthwave Overlay) ── */
.fx-scanlines{position:relative}
.fx-scanlines::after{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,
    transparent 1px,transparent 3px);
  mix-blend-mode:overlay}

/* Floating contact button */
.float-contact{position:fixed;bottom:24px;right:24px;z-index:90;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:8px}
.float-contact-toggle{width:56px;height:56px;border-radius:50%;border:none;
  background:var(--pri);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,.25);transition:all .3s var(--ease-2,ease);z-index:2}
.float-contact-toggle:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(0,0,0,.3)}
.fc-icon-close{display:none}
.float-contact.open .fc-icon-open{display:none}
.float-contact.open .fc-icon-close{display:block}
.float-contact-menu{display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(10px) scale(.9);
  transition:all .3s var(--ease-2,ease);pointer-events:none;padding-bottom:8px}
.float-contact.open .float-contact-menu{opacity:1;transform:none;pointer-events:auto}
.fc-item{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;
  background:var(--s2);border:1px solid var(--ol2);border-radius:28px;color:var(--on);
  text-decoration:none;font-size:.85rem;font-weight:500;white-space:nowrap;
  box-shadow:0 2px 12px rgba(0,0,0,.15);transition:all .2s}
.fc-item:hover{background:var(--pri);color:#fff;border-color:var(--pri)}
.fc-item .material-symbols-outlined{font-size:20px}
@media(max-width:600px){.float-contact{bottom:16px;right:16px}
  .float-contact-toggle{width:48px;height:48px}}
@media print{.float-contact{display:none!important}}

/* Back to top button */
.back-to-top{position:fixed;bottom:24px;right:92px;z-index:89;width:44px;height:44px;
  border-radius:50%;border:1px solid var(--ol2);background:var(--s2);color:var(--on2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(12px);transition:all .3s var(--ease-2,ease);pointer-events:none;
  box-shadow:0 2px 12px rgba(0,0,0,.1)}
.back-to-top.visible{opacity:1;transform:none;pointer-events:auto}
.back-to-top:hover{background:var(--pri);color:#fff;border-color:var(--pri)}
.back-to-top .material-symbols-outlined{font-size:20px}
@media(max-width:600px){.back-to-top{bottom:16px;right:76px;width:40px;height:40px}}
@media print{.back-to-top{display:none!important}}

/* Sticky mobile CTA */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:88;padding:12px 16px;
  background:var(--s2);border-top:1px solid var(--ol2);
  backdrop-filter:blur(16px);transform:translateY(100%);transition:transform .3s var(--ease-2,ease);
  display:none;text-align:center}
.sticky-cta.visible{transform:none}
.sticky-cta a{display:block;padding:14px;background:var(--pri);color:#fff;border-radius:8px;
  font-weight:600;text-decoration:none;font-size:.9rem;
  box-shadow:0 4px 16px rgba(0,0,0,.2);transition:all .2s}
.sticky-cta a:hover{opacity:.9}
@media(max-width:900px){.sticky-cta{display:block}}
@media(min-width:901px){.sticky-cta{display:none!important}}
/* Adjust floating contact and back-to-top when sticky CTA is visible */
@media(max-width:900px){
  .float-contact{bottom:76px}
  .back-to-top{bottom:76px}
}
@media print{.sticky-cta{display:none!important}}

/* Toast notifications */
.toast-container{position:fixed;top:80px;right:24px;z-index:9997;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{padding:14px 20px;border-radius:8px;color:#fff;font-size:.9rem;font-weight:500;
  pointer-events:auto;display:flex;align-items:center;gap:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.2);transform:translateX(120%);
  transition:all .4s var(--ease-spring,ease);max-width:380px;cursor:pointer}
.toast.show{transform:none}
.toast.success{background:#2e7d32}
.toast.error{background:#c62828}
.toast.info{background:var(--pri)}
.toast .material-symbols-outlined{font-size:20px;flex-shrink:0}
@media(max-width:600px){.toast-container{right:12px;left:12px}.toast{max-width:100%}}
@media print{.toast-container{display:none!important}}

/* Share button */
.share-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;
  border:1px solid var(--ol2);border-radius:20px;background:transparent;color:var(--on2);
  cursor:pointer;font-size:.8rem;font-family:inherit;transition:all .2s}
.share-btn:hover{border-color:var(--pri);color:var(--pri)}
.share-btn .material-symbols-outlined{font-size:16px}

/* Breadcrumbs */
.breadcrumbs{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--on2);
  padding:var(--sp-sm) 0;flex-wrap:wrap}
.breadcrumbs a{color:var(--on2);text-decoration:none;transition:color .2s}
.breadcrumbs a:hover{color:var(--pri)}
.breadcrumbs .bc-sep{font-size:.6rem;opacity:.5}
.breadcrumbs .bc-current{color:var(--on);font-weight:500}

/* Image Lightbox */
.lightbox-overlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.92);
  backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease-2,ease);cursor:zoom-out;padding:24px}
.lightbox-overlay.active{opacity:1;pointer-events:auto}
.lightbox-overlay img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:4px;
  transform:scale(.9);transition:transform .3s var(--ease-spring,ease);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-overlay.active img{transform:scale(1)}
.lightbox-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.5);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;font-size:0}
.lightbox-close:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4)}
.lightbox-close .material-symbols-outlined{font-size:22px}
@media print{.lightbox-overlay{display:none!important}}

/* FAQ Accordion */
.faq-section{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--ol2);overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:20px 0;
  cursor:pointer;font-weight:600;font-size:var(--ts-md,1.125rem);color:var(--on);
  background:none;border:none;width:100%;text-align:left;font-family:inherit;
  transition:color .2s}
.faq-q:hover{color:var(--pri)}
.faq-q .material-symbols-outlined{transition:transform .3s var(--ease-2,ease);font-size:20px;color:var(--on2);flex-shrink:0}
.faq-item.open .faq-q .material-symbols-outlined{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-2,ease),padding .4s;
  color:var(--on2);line-height:1.8;font-size:var(--ts-base,1rem)}
.faq-item.open .faq-a{max-height:500px;padding:0 0 20px}
@media print{.faq-a{max-height:none!important;padding:0 0 12px!important}}

/* Testimonials */
.testimonial-scroll{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px 0 16px;scrollbar-width:none;-ms-overflow-style:none}
.testimonial-scroll::-webkit-scrollbar{display:none}
.testimonial-card{min-width:min(320px,85vw);max-width:380px;flex-shrink:0;scroll-snap-align:start;
  padding:28px;border:1px solid var(--ol2);border-radius:var(--r,12px);background:var(--s2);
  display:flex;flex-direction:column;gap:12px}
.tc-stars{color:var(--sec);font-size:1.1rem;letter-spacing:2px}
.tc-text{color:var(--on);font-style:italic;line-height:1.7;flex:1}
.tc-name{color:var(--on2);font-size:.85rem;font-weight:600}

/* Stats section */
.stats-grid{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;text-align:center;padding:var(--sp-xl) 0}
.stat-card{min-width:120px}
.stat-num{font-family:var(--fd);font-size:clamp(2rem,5vw,3.5rem);font-weight:300;color:var(--pri);line-height:1}
.stat-label{font-size:.8rem;color:var(--on2);text-transform:uppercase;letter-spacing:2px;margin-top:8px}
@media(max-width:600px){.stats-grid{gap:32px}}

/* Countdown */
.countdown{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.cd-unit{display:flex;flex-direction:column;align-items:center;min-width:70px}
.cd-num{font-family:var(--fd);font-size:clamp(2rem,5vw,3.5rem);font-weight:300;color:var(--on);line-height:1}
.cd-label{font-size:.7rem;color:var(--on2);text-transform:uppercase;letter-spacing:2px;margin-top:4px}

/* ── SEASONAL TINT ─────────────────────────────────────────── */
:root{--season-tint:var(--pri)}
/* Very subtle seasonal tint on body overlay */
body::after{background:color-mix(in oklch,var(--season-tint,transparent) 3%,transparent)!important}

/* ── FLOATING HERO DECORATIONS ─────────────────────────────── */
.hero-deco{position:absolute;z-index:1;pointer-events:none;opacity:.12}
.hero-deco svg{width:100%;height:100%}
.hero-deco.float-1{top:15%;right:10%;width:60px;height:60px;animation:hero-float 12s ease-in-out infinite}
.hero-deco.float-2{bottom:25%;left:8%;width:40px;height:40px;animation:hero-float 15s ease-in-out infinite reverse}
.hero-deco.float-3{top:40%;right:25%;width:30px;height:30px;animation:hero-float 18s ease-in-out infinite 3s}
@keyframes hero-float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(15deg)}}
@media(prefers-reduced-motion:reduce){.hero-deco{animation:none!important;display:none}}
@media(max-width:600px){.hero-deco{display:none}}

/* ── MULTI-LAYER PARALLAX UTILITIES ────────────────────────── */
.parallax-layer{position:absolute;inset:0;pointer-events:none;will-change:transform}
@supports(animation-timeline:scroll()){
  .parallax-slow{animation:para-slow linear;animation-timeline:scroll();animation-range:0% 60%}
  .parallax-medium{animation:para-med linear;animation-timeline:scroll();animation-range:0% 50%}
  .parallax-fast{animation:para-fast linear;animation-timeline:scroll();animation-range:0% 40%}
  @keyframes para-slow{from{transform:translateY(0)}to{transform:translateY(-5%)}}
  @keyframes para-med{from{transform:translateY(0)}to{transform:translateY(-10%)}}
  @keyframes para-fast{from{transform:translateY(0)}to{transform:translateY(-15%)}}
}