/* ═══ RESET & BASE ════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{background:#000;height:auto;overflow-x:hidden}
html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:#000;color:#fff;margin:0;padding:0;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{display:none}

/* ═══ FILM GRAIN ══════════════════════════════════════════════ */
#grain{position:fixed;inset:0;z-index:9994;pointer-events:none;opacity:.025;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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");background-size:180px}
/* Touch: Film-Grain deaktivieren (mix-blend-mode:overlay ist extrem repaint-teuer auf Safari/iPad) */
@media(pointer:coarse){#grain{display:none!important}}

/* ═══ STANDARD CURSOR ════════════════════════════════════════ */
body{cursor:auto}
a,button,[role="button"]{cursor:pointer}
input,textarea,select{cursor:text}

/* ═══ INTERSECTION OBSERVER REVEALS ══════════════════════════ */
/* .ru: Fade-in-up */
.ru{opacity:0;transform:translateY(2.5rem);will-change:transform,opacity;
transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.ru.visible{opacity:1;transform:translateY(0);will-change:auto}
/* .hw: Handwriting clip-path wipe */
.hw{clip-path:inset(-20% 100% -20% -5%);-webkit-clip-path:inset(-20% 100% -20% -5%);opacity:.15;
will-change:clip-path,opacity;
transition:clip-path 1.5s cubic-bezier(.4,0,.2,1),-webkit-clip-path 1.5s cubic-bezier(.4,0,.2,1),opacity 1.2s ease}
.hw.visible{clip-path:inset(-20% -15% -20% -5%);-webkit-clip-path:inset(-20% -15% -20% -5%);opacity:1;will-change:auto}
/* .sd: Polygon wipe */
.sd{clip-path:polygon(-10% -200%,-10% -200%,-10% 600%,-10% 600%);-webkit-clip-path:polygon(-10% -200%,-10% -200%,-10% 600%,-10% 600%);
will-change:clip-path;
transition:clip-path 2s cubic-bezier(.33,1,.68,1),-webkit-clip-path 2s cubic-bezier(.33,1,.68,1)}
.sd.visible{clip-path:polygon(-10% -200%,175% -200%,175% 600%,-10% 600%);-webkit-clip-path:polygon(-10% -200%,175% -200%,175% 600%,-10% 600%);will-change:auto}
/* Touch: schnellere Transitions */
@media(pointer:coarse){
.ru{transition-duration:.5s}
.hw{transition-duration:1s}
.sd{transition-duration:1.4s}
}
/* Reduced motion */
@media(prefers-reduced-motion:reduce){.ru,.hw,.sd{transition-duration:.01ms!important;opacity:1!important;transform:none!important;clip-path:none!important}}

/* ═══ LIQUID GOLD (Mobile-safe) ═════════════════════════════════════
   Chromium Android + Safari iOS repainten animated background-position
   auf background-clip:text nur, wenn will-change gesetzt UND Keyframe
   explizit from/to Werte nennt. */
.lg{
  background:linear-gradient(110deg,#7A5510 0%,#F8EDCA 20%,#D4AF37 44%,#FDF4D2 65%,#B8911A 84%,#7A5510 100%);
  background-size:220% auto;background-position:0% center;
  color:transparent;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gs 5.5s cubic-bezier(.25,.1,.25,1) infinite;
  filter:drop-shadow(0 5px 18px rgba(212,175,55,.28));
  will-change:background-position,filter;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
@keyframes gs{
  from{background-position:0% center}
  to  {background-position:220% center}
}
/* Mobile — background-clip:text + animated background-position wird auf
   iOS-Safari & Chromium-Android NICHT zuverlässig re-gepaintet.
   Fix: zusätzliche Brightness/Saturate-Oszillation läuft GPU-sicher
   parallel und erzeugt sichtbares Shimmer selbst wenn Position festhängt. */
@keyframes gsShimmer{
  0%,100%{filter:drop-shadow(0 5px 18px rgba(212,175,55,.28)) brightness(1) saturate(1)}
  50%    {filter:drop-shadow(0 6px 22px rgba(253,244,210,.5)) brightness(1.3) saturate(1.28)}
}
@media(pointer:coarse){
  .lg{
    animation: gs 5.5s linear infinite, gsShimmer 2.8s ease-in-out infinite !important;
    background-size: 240% auto !important;
  }
}
html.is-touch .lg{
  animation: gs 5.5s linear infinite, gsShimmer 2.8s ease-in-out infinite !important;
  background-size: 240% auto !important;
  opacity: 1 !important;
}
/* iOS speziell: background-position-Animation auf text-clip ist defekt →
   statischer Gradient + rein Brightness-Shimmer (immer sichtbar). */
html.is-ios .lg{
  animation: gsShimmer 2.2s ease-in-out infinite !important;
  background-size: 100% auto !important;
  background-position: 50% center !important;
}

/* ═══ NAVBAR ══════════════════════════════════════════════════ */
#nav{transition:padding .75s cubic-bezier(.16,1,.3,1)}
#nav>div{transition:all .75s cubic-bezier(.16,1,.3,1);border:1px solid transparent;border-radius:100px}
.ns{padding-top:1.1rem!important}
.ns>div{max-width:760px!important;background:rgba(5,5,5,.68)!important;border:1px solid rgba(255,255,255,.07)!important;
backdrop-filter:saturate(180%) blur(44px)!important;-webkit-backdrop-filter:saturate(180%) blur(44px)!important;
box-shadow:0 20px 55px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05)!important;
padding-left:1.4rem!important;padding-right:1.4rem!important}
.lt, .nl { transition: all .5s cubic-bezier(.16,1,.3,1); overflow: hidden; white-space: nowrap; opacity: 1; }
/* Wenn gescrollt wird, blenden wir sie dezent aus statt sie komplett zu löschen */
.ns .lt, .ns .nl { 
    opacity: 0; 
    max-width: 0; 
    padding: 0; 
    margin: 0; 
    pointer-events: none; 
    transition: all .5s ease;
}

/* ═══ VIDEO MASK (unused – hero is now clean) ════════════════ */

/* ═══ GALLERY PANELS ══════════════════════════════════════════ */
/* KEY: panels have NO overflow:hidden — only .gpi has it */
.gp{position:absolute;inset:0}
.gpi{position:absolute;inset:0;overflow:hidden}
.wl{position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(212,175,55,.55) 25%,rgba(253,244,210,1) 50%,rgba(212,175,55,.55) 75%,transparent);
z-index:50;opacity:0;transform:scaleX(0);transform-origin:left}

/* ═══ GALLERY MOBILE/TABLET: Pin + Clip-Path-Reveal bleibt aktiv (vereinfachte Timeline) ═══ */
@media (max-width: 1023px) {
  /* Bild-Scale reduzieren (weniger Paint-Last) — Panels bleiben absolute */
  #vpin .gp img { transform: scale(1.04) !important; }
  /* Seitliche Dots ausblenden, Progressbar bleibt */
  #gd { display: none !important; }
  /* Texte ohne GSAP-Blur/Y-Offset auf Mobile (Timeline animiert nur clip-path) */
  #vpin .gs1,#vpin .gs2,#vpin .gs3,
  #vpin .gm1,#vpin .gm2,#vpin .gm3 { filter: none !important; }
}

/* ═══ HERO SVG ════════════════════════════════════════════════ */
.pp{stroke-dasharray:5200;stroke-dashoffset:5200;fill:transparent;stroke:url(#gg);stroke-width:1.5px;will-change:stroke-dashoffset}
.fp{fill:url(#gg);opacity:0;will-change:opacity}
/* Hero elements animated by GSAP */
.ie{will-change:transform,opacity}
#ht{will-change:transform,opacity}
/* Mobile: thicker stroke so handwriting effect is visible */
@media(max-width:767px){.pp{stroke-width:3px}}

/* ═══ HERO VIDEO ═════════════════════════════════════════════ */
#hero-vid video{will-change:transform}

/* ═══ REVEAL WIPE ═════════════════════════════════════════════ */
/* outer = rotation only, inner = clip-path only */
.rw{display:inline-block;transform:rotate(-2.5deg);transform-origin:left center;overflow:visible;line-height:1.1}
.rp{display:inline-block;clip-path:polygon(-10% -200%,-10% -200%,-10% 600%,-10% 600%);-webkit-clip-path:polygon(-10% -200%,-10% -200%,-10% 600%,-10% 600%);
will-change:clip-path;padding:.25em 2.5em .35em 2.5em;margin:-.25em -2.5em -.35em -2.5em}

/* ═══ HORIZONTAL SCROLL ═══════════════════════════════════════ */
.ht{display:flex;flex-wrap:nowrap;width:300vw}
.hp{width:100vw;height:100vh;flex-shrink:0;position:relative;overflow:visible}

/* ═══ CARDS ═══════════════════════════════════════════════════ */
/* Kurs-Cards: Titel darf umbrechen */
#kurse h3{word-break:break-word;overflow-wrap:break-word;hyphens:auto}
/* slow zoom removed (video hero gone) */
.pc{background:#040404;border:1px solid rgba(212,175,55,.32);position:relative;overflow:hidden;
box-shadow:0 0 0 1px rgba(212,175,55,.07),0 40px 110px rgba(212,175,55,.09)}
@keyframes sw{0%{left:-150%}22%{left:260%}100%{left:260%}}
.ps{position:absolute;top:0;left:-100%;width:55%;height:100%;
background:linear-gradient(to right,transparent,rgba(255,255,255,.13),transparent);
transform:skewX(-25deg);animation:sw 7s infinite ease-in-out;pointer-events:none;mix-blend-mode:overlay}
.tg{text-shadow:0 6px 26px rgba(0,0,0,.95)}
.bm{position:relative}.bm::after{content:'';position:absolute;inset:-4px;border-radius:inherit;
background:inherit;filter:blur(18px);opacity:0;z-index:-1;transition:opacity .5s cubic-bezier(.16,1,.3,1)}
.bm:hover::after{opacity:.6}
.ga{position:absolute;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(212,175,55,.16) 0%,transparent 70%);filter:blur(75px);z-index:0}
/* Touch: Filter-blur auf Radial-Gradient-Glows ersatzlos streichen (extrem paint-teuer) */
@media(pointer:coarse){.ga{filter:none!important;background:radial-gradient(circle,rgba(212,175,55,.10) 0%,transparent 62%)!important}}

/* ═══ TOUCH PERFORMANCE: backdrop-filter reduzieren & Schatten abspecken ═══ */
@media(pointer:coarse){
  /* Navbar Scroll-State: blur(44px) ist auf Safari ein Frame-Killer → blur(16px) */
  .ns>div{backdrop-filter:saturate(150%) blur(16px)!important;-webkit-backdrop-filter:saturate(150%) blur(16px)!important}
  /* Nav-Menü & Logo-Hintergrund */
  .nl,#logo-link>div{backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
  /* Mobile-Menü Overlay: blur(32px) → 14px */
  #mob-menu{backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
  /* Cookie-Banner */
  #cookie-banner{backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
  /* Kontakt-Hero-CTA & Instagram-Button backdrop-blur deaktivieren */
  #hero .bm,#einblicke .bm{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  /* Magnetic-Button Glow (::after blur 18px) deaktivieren */
  .bm::after{display:none!important}
}

/* ═══ AMBIENT DUST CANVAS ════════════════════════════════════ */
#sc{position:fixed;inset:0;z-index:9993;pointer-events:none;will-change:auto}

/* ═══ HAMBURGER ══════════════════════════════════════════════ */
#hbtn{position:relative;z-index:9999}
#hbtn span{display:block;height:1px;background:rgba(255,255,255,.85);
  transition:all .38s cubic-bezier(.16,1,.3,1);transform-origin:center;border-radius:1px}
#hbtn.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg);background:#fff}
#hbtn.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
#hbtn.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);width:100%!important;background:#fff}

/* ═══ MOBILE MENU ════════════════════════════════════════════ */
#mob-menu {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #000; /* Tiefschwarzer Hintergrund für das Handy-Menü */
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .42s cubic-bezier(.16,1,.3,1);
  padding: 5rem 2rem 2.5rem;
}
#mob-menu.open{opacity:1}
#mob-menu::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,rgba(212,175,55,.22),transparent)
}

/* ═══ MOBILE & RESPONSIVE ════════════════════════════════════ */
/* Global overflow containment */
main,section,footer{overflow-x:hidden}

/* Better touch targets */
@media(max-width:640px){
  #nav{padding-left:.75rem!important;padding-right:.75rem!important}
  .hp{padding-left:1.25rem!important;padding-right:1.25rem!important}
}

/* ── Mobile comprehensive (< 768px) ── */
@media(max-width:767px){
  /* Hero: dynamic viewport height, prevent cutoff */
  #hero{height:100svh!important}

  /* Reveal wipe: reduce horizontal overshoot to prevent ghost overflow */
  .rp{padding-left:1.2em!important;padding-right:1.2em!important;
      margin-left:-1.2em!important;margin-right:-1.2em!important}

  /* ── AGGRESSIVE MOBILE TYPOGRAPHY ── */
  /* Section gold labels */
  .text-gold.font-bold.uppercase{font-size:.8rem!important;letter-spacing:.8em!important}

  /* Body paragraphs everywhere */
  section p,footer p{font-size:1rem!important;line-height:1.85!important}

  /* Serif italic paragraphs (Vibra/Latina descriptions) */
  .font-serif.italic{font-size:1.05rem!important;line-height:1.6!important}

  /* Quotes */
  #ueber-uns .font-serif.italic.tg{font-size:1.35rem!important;line-height:1.3!important}

  /* Card feature list items */
  #kurse .flex.items-start>span:last-child{font-size:.82rem!important;letter-spacing:.25em!important}

  /* Course card titles */
  #kurse h3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.2 !important;
}

  /* Level / sublabels */
  .text-white\/30.font-bold,.text-white\/38.font-bold{font-size:.72rem!important}

  /* Buttons & CTAs */
  a[href="#kontakt"]:not(.mob-link){font-size:.82rem!important;letter-spacing:.5em!important}
  #kurse a{font-size:.8rem!important;letter-spacing:.5em!important}

  /* Form: prevent iOS zoom, generous sizing */
  form input,form textarea{font-size:1.05rem!important;letter-spacing:.15em!important;padding:1em 1.3em!important}
  form button[type="submit"]{font-size:.9rem!important;letter-spacing:.4em!important;padding:1.1em!important}

  /* Course cards: comfortable mobile padding */
  #kurse .grid>div{padding:2rem!important}

  /* instructor section: portrait height + visible name */
  #instructor .group {
    height: clamp(55vw, 40vw, 70vh) !important;
    min-height: 320px !important;
    max-height: 550px !important;
}
  #instructor h4{font-size:1.8rem!important}
  #instructor p.text-gold{font-size:.72rem!important}

  /* Community statement: stack and bigger */
  .font-serif.italic[style*="color:rgba(255,255,255,.55)"]{font-size:1rem!important}

  /* Footer: more readable */
  footer h5{font-size:.78rem!important}
  footer ul li a{font-size:.78rem!important}
  footer p{font-size:.82rem!important}
  footer .font-serif.italic.lg{font-size:2rem!important}

  /* Cookie banner */
  #cookie-banner p{font-size:.78rem!important}
  #cookie-banner button{font-size:.72rem!important}

  /* Gallery dots: pull in from edge */
  #gd{right:6px!important}

  /* (Philosophie-Regeln → ausgelagert in @media(max-width:1023px) Block unten) */

  /* GPU-Hint nur für aktiv animierte Elemente */
  #hero-vid, .gp { backface-visibility: hidden; -webkit-backface-visibility: hidden; }

  /* Buchungen placeholder */
  #buchungen .font-script.lg{font-size:2.5rem!important}
  #buchungen p{font-size:.85rem!important}

  /* Instagram / Einblicke */
  #einblicke h2{font-size:2.5rem!important}
  #ig{gap:.5rem!important}
  #ig a{border-radius:.8rem!important}
  /* Instagram CTA button: Text muss ins Button passen */
  #einblicke>div>.text-center a{font-size:.6rem!important;letter-spacing:.15em!important;padding:.8em 1.2em!important;white-space:normal!important;word-break:break-all!important;max-width:100%!important;text-align:center!important}

  /* Cookie banner mobile */
  #cookie-banner{padding:.6rem!important}
  #cookie-main p,#cookie-settings p{font-size:.72rem!important;line-height:1.7!important;letter-spacing:.02em!important;text-transform:none!important}
  #cookie-banner button{font-size:.68rem!important;letter-spacing:.15em!important;padding:.55em .9em!important}
  #cookie-settings span{font-size:.68rem!important;text-transform:none!important}
  #cookie-reopen{bottom:.6rem!important;left:.6rem!important;width:2rem!important;height:2rem!important}
  /* Cookie buttons: stack vertically on very small screens */
  #cookie-main>div:last-child{flex-direction:column!important;width:100%!important}
  #cookie-main>div:last-child button{width:100%!important;text-align:center!important}

  /* ── HERO MOBILE: bigger title, smaller buttons ── */
  #hero #ht{font-size:clamp(4.5rem,20vw,6.5rem)!important}
  #hero .text-gold.font-bold{font-size:.68rem!important;letter-spacing:.5em!important}
  #hero .text-white\/40{font-size:.7rem!important;letter-spacing:.4em!important}

  /* Hero CTA: smaller, prevent overflow */
  #hero a.magnetic{font-size:.65rem!important;letter-spacing:.2em!important;padding:1em 1.4em!important;max-width:100%!important;white-space:normal!important;text-align:center!important;line-height:1.5!important}

  /* Hero feature bullets */
  #hero .flex.flex-wrap span{font-size:.7rem!important}
  #hero .flex.flex-wrap{gap:.3rem .8rem!important}

  /* ── ALL BUTTONS: prevent overflow ── */
  a[href="#kontakt"],#kurse a,.bm{max-width:100%!important;box-sizing:border-box!important}
  #buchungen a[href="#kontakt"]{font-size:.7rem!important;letter-spacing:.4em!important;padding:.8em 1.5em!important}

  /* Kontakt section headline "Ihre" */
  #kontakt h2.font-serif{font-size:4rem!important}
  #kontakt .font-script{font-size:3.8rem!important}
  #kontakt .text-white\/28{font-size:.78rem!important;letter-spacing:.2em!important}
  #kontakt .text-gold.font-bold.uppercase{font-size:.68rem!important}

  /* Über-uns: prevent overflow from giant script fonts */
  #ueber-uns{overflow:hidden!important}
  #ueber-uns h2{font-size:3.5rem!important}

  /* Footer: fully static, no animations, no jumping */
  footer{position:relative!important;transform:none!important}
  footer *{transform:none!important;opacity:1!important;clip-path:none!important;-webkit-clip-path:none!important}
  #kurse h2{font-size:3rem!important}
  #buchungen h2{font-size:3rem!important}
  #instructor h2{font-size:2.8rem!important}

  /* Pricing cards */
  #buchungen .font-serif.font-light:not(h2){font-size:3rem!important}

  /* Form submit btn */
  #form-btn{font-size:.78rem!important;letter-spacing:.3em!important}

  /* Mobile menu Kontakt button */
  .mob-link.font-bold{font-size:.7rem!important;letter-spacing:.6em!important;padding:.8em 1.8em!important}

  /* Instagram embed iframes */
  #ig>div{border-radius:.8rem!important}

  /* Footer mobile */
  footer .font-script{font-size:2.2rem!important}
  footer ul li{font-size:.78rem!important}
  footer h5{font-size:.65rem!important}

  /* Stats section */
  [data-count]{font-size:2.2rem!important}
}

/* ═══ PHILOSOPHIE: Mobile + Tablet → Desktop-Style Pin (vertikal scrollen → horizontal bewegen) ═══ */
/* Keine CSS-Scroll-Snap-Geschichte mehr. GSAP pin auch auf Touch aktiv, Typo nur angepasst. */
@media(max-width:1023px){
  #philosophie{overflow:hidden!important}
  .hp h2{font-size:clamp(2rem,8vw,4rem)!important;line-height:1.05!important}
  .hp .font-script{font-size:clamp(2.8rem,12vw,5.5rem)!important}
  .hp .font-serif.italic.text-white\/90{font-size:clamp(1.1rem,4.5vw,1.8rem)!important;line-height:1.3!important}
  /* Slide 2 Bild auf Touch kompakter */
  .hp .w-full.md\:w-\[46\%\]{height:clamp(180px,38vw,320px)!important;max-height:320px!important}
}

/* Kontakt section: keep margin-top on mobile for "Einladung" overlap */
@media(max-width:1023px){
  #kontakt p.text-white\/28{margin-top:clamp(4rem,14vw,7rem)!important}
}

/* Duplikat-Block entfernt — Regeln oben konsolidiert */

/* Smooth scroll — nur auf Desktop, nicht auf Touch (kollidiert mit GSAP-Pins) */
@media(pointer:fine){html{scroll-behavior:smooth}}
/* Offset anchors for fixed navbar */
section[id],footer[id]{scroll-margin-top:5rem}

/* ═══ PREMIUM POLISH ═════════════════════════════════════════ */
/* Smoother image loading */
img{transition:opacity .4s ease}
/* Better focus styles for accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:1px solid rgba(212,175,55,.5);outline-offset:2px}
/* Cookie reopen button */
#cookie-reopen{display:flex}
/* Section border refinement */
section.border-t{border-image:linear-gradient(to right,transparent,rgba(255,255,255,.06),transparent) 1}

/* Reduced motion bereits in IO-Reveals-Block abgedeckt */

/* ═══ NAVBAR RESPONSIVE — Logo/Menu Kollision verhindern ═══ */
/* iPad-Portrait / kleiner Tablet (768-1023px): Nav noch unsichtbar → Logotext frei */
@media (min-width: 768px) and (max-width: 1023px) {
    .lt h1 {
        letter-spacing: 0.25em !important;
        font-size: 0.6rem !important;
    }
}
/* Tablet & kleine Laptops (1024–1279px):
   Logotext „Vibra Latina Grafenau" SICHTBAR + zentrale Nav kompakt sichtbar.
   Sehr kleine Schrift + enges Spacing, damit beides ohne Overlap reinpasst. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .lt { display: block !important; }
    /* Logo-Text etwas kleiner machen, damit Platz ist */
    .lt h1 { font-size: .5rem !important; letter-spacing: .15em !important; }
    
    /* Desktop-Links SIND sichtbar, aber kompakt, damit sie reinpassen */
    .nl { 
        display: flex !important; 
        gap: 0.6rem !important; 
        padding: 0.55em 1.2em !important; 
        font-size: 0.5rem !important; 
        letter-spacing: 0.12em !important; 
    }
    
    /* Hamburger-Menü hier definitiv ausblenden */
    #hbtn { display: none !important; }
}
/* Mid-Desktop (1280–1535px): Nav sichtbar, Logotext kompakt — hat hier Platz */
@media (min-width: 1280px) and (max-width: 1535px) {
    .lt { display: block !important; }
    .lt h1 { font-size: .55rem !important; letter-spacing: .18em !important; }
    .nl { gap: .85rem !important; padding: .65em 1.3em !important; font-size: .54rem !important; letter-spacing: .14em !important; }
}
@media (min-width: 1536px) {
    .lt { display: block !important; }
}
@media (max-width: 640px) {
    .lt h1 { font-size: .5rem !important; letter-spacing: .18em !important; }
}

/* ═══ NEUERÖFFNUNG-BUTTON: immer ÜBER der Navbar ════════════════════
   Samsung-Tablet-Fix: Button saß hinter Nav und war kaum klickbar. */
.pulse-opening { position: relative; z-index: 500 !important; }
/* Hero-Badge-Container ebenfalls über allem außer dem Modal-Mobile-Menu */
#hero > .relative > .ie:first-of-type { position: relative; z-index: 500; }
/* Navbar darf Neueröffnung-Button nicht überdecken */
#nav { z-index: 100; }
/* Zusatzabstand oben im Hero auf Tablet, damit Button nicht in Nav kollidiert.
   Mehrfach erhöht — Neueröffnung-Badge soll komplett FREI unter Nav stehen. */
@media (min-width: 768px) and (max-width: 1279px) {
    #hero > div.relative.z-20 { padding-top: clamp(190px, 22vh, 240px) !important; }
    #hero .pulse-opening { z-index: 1000 !important; }
}
@media (min-width: 600px) and (max-width: 767px) {
    #hero > div.relative.z-20 { padding-top: clamp(170px, 20vh, 210px) !important; }
}
/* Badge-Stacking-Context GARANTIEREN: .ie:first-of-type als eigenständiger Layer */
#hero .ie:first-of-type { isolation: isolate; position: relative; z-index: 150; }

/* Konzept-Karten: overflow-visible erzwingen, damit .hw clip-path nicht abgeschnitten wird */
#ueber-uns .grid>div{overflow:visible!important}
#ueber-uns{overflow:visible}
/* Desktop: Section overflow-x separat steuern — Y visible lassen für clip-path */
@media(min-width:768px){#ueber-uns{overflow-x:hidden;overflow-y:visible}}

/* Konzept-Überschriften VIBRA/LATINA — defensiver CSS-Fallback (IO kann in 2-Col-Grid racen) */
#ueber-uns .hw{animation:uebHwShow 1.6s cubic-bezier(.4,0,.2,1) .7s forwards}
@keyframes uebHwShow{
  to{clip-path:inset(-20% -15% -20% -5%);-webkit-clip-path:inset(-20% -15% -20% -5%);opacity:1}
}
/* Falls IO-Klasse .visible früher greift, dominiert sie (keine Konflikte) */
#ueber-uns .hw.visible{animation:none}

/* ═══ TOUCH-DEVICE PERFORMANCE (iPad/Tablet/Phone) ═══════════════
   Aktiviert via html.is-touch (JS setzt Klasse über _isTouch-Detection).
   Ergänzt @media(pointer:coarse) — greift auch bei iPad Desktop-Mode
   und Browsern, die pointer:coarse falsch reporten. */
html.is-touch #grain{display:none!important}
/* WICHTIG: Canvas-Glitzer MUSS auch auf Touch laufen (Kundin-Anforderung) */
html.is-touch canvas#sc{display:block!important;opacity:.85!important}
html.is-touch .ga{filter:none!important;background:radial-gradient(circle,rgba(212,175,55,.14) 0%,transparent 62%)!important}
html.is-touch #nav>div,html.is-touch #logo-link>div,html.is-touch .nl{
  backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;
}
/* Nav Navbar-Scrolled: weniger teuer */
html.is-touch .ns #nav>div{backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important}
/* Deaktiviere mix-blend-mode auf Touch — extrem teuer beim Repaint */
html.is-touch *{mix-blend-mode:normal!important}
/* Hero-Image: will-change nur auf Non-Touch, sonst static */
html.is-touch #hero-vid img{will-change:auto!important;transform:none!important}
/* Text-drop-shadows begrenzen */
html.is-touch .drop-shadow-2xl{filter:none!important}
/* Vermeide teure clip-path auf .sd (polygon) — einfache opacity-Einblendung reicht */
html.is-touch .sd{clip-path:none!important;-webkit-clip-path:none!important;transform:translateY(2rem);opacity:0;transition:opacity .5s ease-out,transform .5s ease-out}
html.is-touch .sd.visible{transform:none;opacity:1}

/* ═══ ANIMATION-FALLBACK: Sicher sichtbar auf Touch-Tablets ════════
   Samsung Tablet-Bug: IO feuert manchmal nicht für spätere .hw.
   Wenn die Klasse .visible nicht rechtzeitig landet, animiert CSS selbst. */
html.is-touch .hw{animation:touchHwShow 1.4s cubic-bezier(.4,0,.2,1) .4s forwards}
html.is-touch .hw.visible{animation:none}
@keyframes touchHwShow{
  to{clip-path:inset(-20% -15% -20% -5%);-webkit-clip-path:inset(-20% -15% -20% -5%);opacity:1}
}
/* Neueröffnung-Badge Puls */
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.55);opacity:.55}}
.pulse-opening{animation:pulseOp 3s ease-in-out infinite;transition:transform .35s ease}
.pulse-opening:hover{transform:scale(1.04)}
@keyframes pulseOp{
  0%,100%{box-shadow:0 6px 36px rgba(212,175,55,.45),inset 0 0 0 1px rgba(255,255,255,.35)}
  50%{box-shadow:0 10px 48px rgba(212,175,55,.7),inset 0 0 0 1px rgba(255,255,255,.55)}
}

/* ═══ PRICING — Launch-Banner, Student-Rows, Footnote ══════════════ */
.pp-launch{
  background:linear-gradient(135deg,rgba(212,175,55,.13) 0%,rgba(212,175,55,.04) 55%,rgba(255,255,255,.02) 100%)!important;
  border-color:rgba(212,175,55,.42)!important;
  box-shadow:0 30px 80px rgba(212,175,55,.08)!important;
}
.pp-launch .pp-badge{
  background:linear-gradient(110deg,#B38728,#D4AF37,#FDF4D2,#D4AF37,#B38728);background-size:200%;
  color:#0a0a0a;border-color:transparent;font-weight:800;
}
.pp-rowstudent{
  margin-top:.65rem;padding-top:.55rem;border-top:1px dashed rgba(212,175,55,.18);
  color:rgba(255,255,255,.42);font-size:clamp(.62rem,.8vw,.68rem);letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;line-height:1.5;
}
.pp-stu-price{color:#D4AF37;font-family:'Playfair Display',serif;font-weight:400;font-size:1.15em;letter-spacing:-.01em;margin-left:.4em;white-space:nowrap}
.pp-stu-per{color:rgba(255,255,255,.3);font-weight:600;letter-spacing:.1em;display:inline-block;margin-left:.1em}
.pp-stu-tag{
  display:inline-block;color:rgba(212,175,55,.85);font-family:'Inter',sans-serif;
  font-size:.5em;letter-spacing:.25em;text-transform:uppercase;font-weight:700;
  vertical-align:middle;margin-left:.6em;padding:.25em .7em;
  border:1px solid rgba(212,175,55,.28);border-radius:100px;
}
.pp-groupnote{
  color:rgba(255,255,255,.35);font-size:clamp(.72rem,1vw,.82rem);font-style:italic;
  font-family:'Playfair Display',serif;text-align:center;
  margin:0 auto clamp(.8rem,2vw,1.2rem);max-width:520px;line-height:1.6;
}
.pp-footnote{
  margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.2rem,2.5vw,1.8rem);
  border-top:1px solid rgba(255,255,255,.05);
  color:rgba(255,255,255,.28);font-size:clamp(.62rem,.85vw,.72rem);
  letter-spacing:.08em;line-height:1.8;text-align:center;font-weight:500;
}

/* Mobile: Student-Info stapelt */
@media(max-width:640px){
  .pp-rowstudent{font-size:.58rem;letter-spacing:.1em}
  .pp-stu-price{font-size:1.05em}
  .pp-stu-tag{display:block;margin:.4em 0 0 0;width:fit-content}
  .pp-launch .pp-title{font-size:clamp(1.8rem,8vw,2.6rem)}
}

/* "Einladung" — z-index fix, kein transform-Override (GSAP übernimmt den clip-path wipe) */
#kontakt .hw {
    position: relative;
    z-index: 80;
}

/* ═══ PRICING — Premium Responsive ══════════════════════════════ */
.pricing-wrap{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.6rem)}
.pp-card{
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.008));
  border:1px solid rgba(255,255,255,.06);
  border-radius:clamp(1.1rem,2vw,1.6rem);
  padding:clamp(1.4rem,3vw,2.2rem);
  transition:border-color .4s ease, transform .4s ease, box-shadow .4s ease;
  position:relative;overflow:hidden;
}
.pp-card::before{
  content:'';position:absolute;top:0;left:clamp(1.5rem,4vw,2.5rem);right:clamp(1.5rem,4vw,2.5rem);height:1px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.08),transparent);
}
.pp-card:hover{border-color:rgba(212,175,55,.22);box-shadow:0 20px 55px rgba(0,0,0,.55)}

/* Hero Einzelkarte */
.pp-hero{background:linear-gradient(135deg,rgba(212,175,55,.05) 0%,rgba(255,255,255,.02) 60%);border-color:rgba(212,175,55,.18)}
.pp-hero::before{background:linear-gradient(to right,transparent,rgba(212,175,55,.45),transparent)}
.pp-hero-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:clamp(1rem,3vw,2rem)}
.pp-hero-left{flex:1 1 260px;min-width:0}
.pp-badge{
  display:inline-block;padding:.45em 1.2em;border:1px solid rgba(212,175,55,.35);border-radius:100px;
  font-size:clamp(.58rem,.85vw,.65rem);letter-spacing:.45em;text-transform:uppercase;font-weight:700;color:#D4AF37;
  margin-bottom:clamp(.8rem,2vw,1.2rem);
}
.pp-title{
  font-family:'Playfair Display',serif;font-weight:300;font-style:italic;color:#fff;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1;letter-spacing:-.01em;
}
.pp-sub{
  color:rgba(255,255,255,.42);font-size:clamp(.85rem,1.2vw,.98rem);line-height:1.6;margin-top:.7rem;
  max-width:34ch;
}
.pp-hero-price{
  flex-shrink:0;display:flex;align-items:baseline;gap:.15em;flex-wrap:nowrap;justify-content:flex-end;
  padding-left:clamp(0rem,2vw,1.2rem);white-space:nowrap;
}
.pp-amount{
  font-family:'Playfair Display',serif;font-weight:300;color:#D4AF37;
  font-size:clamp(2.8rem,7vw,4.8rem);line-height:1;letter-spacing:-.02em;
  text-shadow:0 2px 30px rgba(212,175,55,.2);white-space:nowrap;
}
.pp-cur{
  font-family:'Playfair Display',serif;font-weight:300;color:#D4AF37;
  font-size:clamp(1.3rem,3vw,2rem);align-self:flex-start;margin-top:.35em;opacity:.8;
}
.pp-per{
  flex-basis:100%;text-align:right;color:rgba(255,255,255,.3);
  font-size:clamp(.6rem,.8vw,.68rem);letter-spacing:.4em;text-transform:uppercase;font-weight:700;margin-top:.5rem;
}

/* Group labels */
.pp-group-label{
  display:flex;align-items:center;gap:1rem;margin:clamp(1.2rem,3vw,2rem) 0 clamp(.2rem,1vw,.6rem);
  padding:0 clamp(.5rem,2vw,1rem);
}
.pp-group-label::before,.pp-group-label::after{
  content:'';flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.08),transparent);
}
.pp-group-label span{
  color:rgba(255,255,255,.35);font-size:clamp(.6rem,.85vw,.68rem);letter-spacing:.5em;text-transform:uppercase;
  font-weight:700;white-space:nowrap;
}
.pp-group-gold span{color:#D4AF37}
.pp-group-gold::before,.pp-group-gold::after{background:linear-gradient(to right,transparent,rgba(212,175,55,.3),transparent)}

/* Grids */
.pp-grid{display:grid;gap:clamp(.8rem,1.8vw,1.2rem)}
.pp-grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pp-grid-3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* Standard row cards */
.pp-std,.pp-gold,.pp-stu{padding:clamp(1.2rem,2.5vw,1.8rem) clamp(1.4rem,3vw,2rem)}
.pp-gold{background:linear-gradient(180deg,rgba(212,175,55,.04),rgba(212,175,55,.015));border-color:rgba(212,175,55,.18);position:relative}
.pp-gold::before{background:linear-gradient(to right,transparent,rgba(212,175,55,.35),transparent)}
.pp-badge-rabatt{
  position:absolute;top:clamp(.9rem,1.8vw,1.2rem);right:clamp(1rem,2.2vw,1.4rem);
  display:inline-block;padding:.38em 1em;border-radius:100px;
  background:linear-gradient(110deg,#B38728,#D4AF37,#FDF4D2,#D4AF37,#B38728);background-size:200%;
  color:#000;font-weight:900;text-transform:uppercase;
  font-size:clamp(.55rem,.8vw,.62rem);letter-spacing:.25em;
  box-shadow:0 4px 18px rgba(212,175,55,.3);z-index:2;
}
.pp-stu{padding:clamp(1rem,2vw,1.4rem) clamp(1.2rem,2.5vw,1.7rem);background:rgba(255,255,255,.012)}

.pp-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.pp-rowtitle{
  font-family:'Playfair Display',serif;font-weight:400;color:#fff;
  font-size:clamp(1.05rem,1.8vw,1.4rem);line-height:1.1;
}
.pp-rowtitle-sm{
  font-family:'Inter',sans-serif;font-weight:600;color:rgba(255,255,255,.65);
  font-size:clamp(.78rem,1vw,.88rem);letter-spacing:.15em;text-transform:uppercase;
}
.pp-rowsub{
  color:rgba(255,255,255,.32);font-size:clamp(.62rem,.82vw,.7rem);letter-spacing:.15em;
  text-transform:uppercase;font-weight:700;margin-top:.45rem;line-height:1.5;
}
.pp-rowprice{display:flex;align-items:baseline;gap:.1em;flex-shrink:0;white-space:nowrap}
.pp-amount-sm{
  font-family:'Playfair Display',serif;font-weight:400;color:#D4AF37;
  font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1;letter-spacing:-.01em;white-space:nowrap;
}
.pp-cur-sm{font-family:'Playfair Display',serif;color:#D4AF37;font-size:clamp(.9rem,1.4vw,1.1rem);opacity:.8}

/* Mobile tuning */
@media(max-width:640px){
  .pp-hero-inner{flex-direction:column;align-items:flex-start}
  .pp-hero-price{align-self:stretch;justify-content:flex-start;padding-left:0;border-top:1px solid rgba(212,175,55,.12);padding-top:1.2rem;margin-top:.5rem}
  .pp-per{text-align:left}
  .pp-row{flex-wrap:nowrap}
  .pp-rowsub{letter-spacing:.08em;font-size:.6rem}
  .pp-gold{padding-top:clamp(2.4rem,7vw,3rem)}
  .pp-badge-rabatt{top:.9rem;right:1rem;font-size:.52rem;letter-spacing:.18em;padding:.35em .85em}
}

/* ═══ GLOBALE HELLIGKEIT — AGGRESSIV (Desktop + Mobile + Tablet) ═══
   Kundin-Anforderung: „Graue Schrift überall heller, vor allem im Header". */
#hero-vid img { filter: brightness(.85) contrast(1.08) saturate(.92) !important; }
#gi1, #gi2, #gi3 { filter: brightness(.65) contrast(1.12) !important; }

/* Hero-Overlay sehr leicht — Bild darf durchscheinen */
#hero > div[style*="linear-gradient(to bottom,rgba(0,0,0,.42)"] {
  background: linear-gradient(to bottom,rgba(0,0,0,.18) 0%,rgba(0,0,0,.02) 45%,rgba(0,0,0,.38) 100%) !important;
}

/* Hero-Texte alle deutlich heller */
#hero .text-white\/40 { color: rgba(255,255,255,.82) !important; }
#hero .text-white\/45 { color: rgba(255,255,255,.85) !important; }
#hero .text-white\/50 { color: rgba(255,255,255,.9) !important; }
#hero .text-white\/70 { color: rgba(255,255,255,.95) !important; }
#hero .text-white\/80 { color: rgba(255,255,255,1) !important; }

/* Faded text global DEUTLICH heller — dritte Stufe (Kundin-Wunsch „überall heller") */
.text-white\/40 { color: rgba(255,255,255,.96) !important; }
.text-white\/35 { color: rgba(255,255,255,.94) !important; }
.text-white\/32 { color: rgba(255,255,255,.92) !important; }
.text-white\/30 { color: rgba(255,255,255,.9) !important; }
.text-white\/28 { color: rgba(255,255,255,.88) !important; }
.text-white\/25 { color: rgba(255,255,255,.86) !important; }
.text-white\/22 { color: rgba(255,255,255,.85) !important; }
.text-white\/20 { color: rgba(255,255,255,.84) !important; }
.text-white\/18 { color: rgba(255,255,255,.82) !important; }
.text-white\/15 { color: rgba(255,255,255,.8) !important; }
.text-white\/12 { color: rgba(255,255,255,.78) !important; }
.text-white\/10 { color: rgba(255,255,255,.75) !important; }
.text-white\/8  { color: rgba(255,255,255,.7) !important; }
.text-white\/6  { color: rgba(255,255,255,.66) !important; }
.text-white\/5  { color: rgba(255,255,255,.62) !important; }
/* Tailwind-arbitrary-Varianten mit Punkten (z.B. text-white/[.35]) ebenfalls */
[class*="text-white/"] { color: rgba(255,255,255,.82); }

/* Gold heller */
.text-gold\/80 { color: rgba(212,175,55,1) !important; }
.text-gold\/70 { color: rgba(212,175,55,.98) !important; }
.text-gold\/50 { color: rgba(212,175,55,.95) !important; }
.text-gold\/40 { color: rgba(212,175,55,.9) !important; }
.text-gold\/30 { color: rgba(212,175,55,.82) !important; }

/* Inline-rgba Pfade auch brutal aufhellen (Team-Beschreibungen etc.) */
[style*="color:rgba(255,255,255,.6"] { color: rgba(255,255,255,.96) !important; }
[style*="color:rgba(255,255,255,.5"] { color: rgba(255,255,255,.92) !important; }
[style*="color:rgba(255,255,255,.45"] { color: rgba(255,255,255,.9) !important; }
[style*="color:rgba(255,255,255,.4"] { color: rgba(255,255,255,.88) !important; }
[style*="color:rgba(255,255,255,.35"] { color: rgba(255,255,255,.86) !important; }
[style*="color:rgba(255,255,255,.3"] { color: rgba(255,255,255,.84) !important; }
[style*="color:rgba(255,255,255,.28"] { color: rgba(255,255,255,.82) !important; }
[style*="color:rgba(255,255,255,.25"] { color: rgba(255,255,255,.8) !important; }
[style*="color:rgba(255,255,255,.22"] { color: rgba(255,255,255,.78) !important; }
[style*="color:rgba(255,255,255,.2"] { color: rgba(255,255,255,.76) !important; }
[style*="color:rgba(255,255,255,.18"] { color: rgba(255,255,255,.72) !important; }
[style*="color:rgba(255,255,255,.15"] { color: rgba(255,255,255,.7) !important; }
[style*="color:rgba(255,255,255,.14"] { color: rgba(255,255,255,.68) !important; }
[style*="color:rgba(255,255,255,.12"] { color: rgba(255,255,255,.65) !important; }
[style*="color:rgba(255,255,255,.1"] { color: rgba(255,255,255,.6) !important; }

/* Footer komplett heller */
footer * { color: inherit; }
footer h5 { color: rgba(212,175,55,1) !important; }
footer ul, footer li, footer li a, footer p, footer span { color: rgba(255,255,255,.92) !important; }
footer li a:hover { color: rgba(253,244,210,1) !important; }
footer .text-white\/12,
footer .text-white\/18,
footer .text-white\/20,
footer .text-white\/22,
footer .text-white\/25,
footer .text-white\/28,
footer .text-white\/30,
footer .text-white\/35,
footer .text-white\/40 { color: rgba(255,255,255,.9) !important; }
footer [style*="rgba(255,255,255"] { color: rgba(255,255,255,.9) !important; }
footer .text-gold\/50 { color: rgba(212,175,55,1) !important; }

/* ═══ PERFORMANTER CSS-GLITZER (Mobile + Tablet sichtbar) ══════════
   Reines CSS, GPU-billig: 3 radial-gradients die pulsieren.
   Wird ausschließlich dort aktiviert, wo das Canvas-Glitter ausgeblendet ist. */
@media(pointer:coarse), (max-width:1023px) {
  html.is-touch body::before,
  body.css-glitter::before {
    content:'';position:fixed;inset:0;z-index:9992;pointer-events:none;
    background:
      radial-gradient(1.5px 1.5px at 20% 30%, rgba(253,244,210,.85), transparent 50%),
      radial-gradient(1.5px 1.5px at 75% 15%, rgba(212,175,55,.75), transparent 50%),
      radial-gradient(2px 2px at 60% 75%, rgba(253,244,210,.9), transparent 50%),
      radial-gradient(1px 1px at 35% 85%, rgba(212,175,55,.8), transparent 50%),
      radial-gradient(1.5px 1.5px at 85% 55%, rgba(255,255,255,.85), transparent 50%),
      radial-gradient(1px 1px at 15% 65%, rgba(253,244,210,.7), transparent 50%),
      radial-gradient(2px 2px at 50% 40%, rgba(212,175,55,.65), transparent 50%),
      radial-gradient(1px 1px at 90% 85%, rgba(253,244,210,.7), transparent 50%);
    background-size: 100% 100%;
    animation: glitterTwinkle 6s ease-in-out infinite;
    mix-blend-mode: screen; opacity: .7;
  }
  html.is-touch body::after {
    content:'';position:fixed;inset:0;z-index:9992;pointer-events:none;
    background:
      radial-gradient(1px 1px at 45% 20%, rgba(253,244,210,.8), transparent 50%),
      radial-gradient(1.5px 1.5px at 10% 40%, rgba(212,175,55,.75), transparent 50%),
      radial-gradient(2px 2px at 80% 35%, rgba(255,255,255,.8), transparent 50%),
      radial-gradient(1px 1px at 25% 90%, rgba(253,244,210,.7), transparent 50%),
      radial-gradient(1.5px 1.5px at 70% 60%, rgba(212,175,55,.8), transparent 50%);
    animation: glitterTwinkle 4.5s ease-in-out .8s infinite reverse;
    mix-blend-mode: screen; opacity: .5;
  }
}
@keyframes glitterTwinkle {
  0%,100% { opacity: .3; transform: translateY(0); }
  50%     { opacity: .8; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  html.is-touch body::before, html.is-touch body::after { animation: none !important; }
}

/* ═══ GALLERY: Touch-Performance (iPad Ruckeln) ═════════════════ */
html.is-touch #gi1,
html.is-touch #gi2,
html.is-touch #gi3 {
  transform: none !important;
  will-change: auto !important;
}
html.is-touch .wl { display: none !important; }
/* Animationen laufen auf Touch wieder — .tg/.lg/.pp/.fp Opacity nicht mehr blockieren.
   Goldene Schriften + Header-Animationen sollen sichtbar laufen (Kundin-Anforderung). */

/* ═══ FOOTER MOBILE FIX (Name abgeschnitten) ═══════════════════ */
@media (max-width: 640px) {
  footer { overflow: visible !important; }
  footer .font-script.lg { font-size: clamp(2.2rem,10vw,3.2rem) !important; padding: 0 .5rem; }
  footer p[style*="letter-spacing:1.5em"],
  footer p[style*="letter-spacing: 1.5em"] { letter-spacing: .6em !important; font-size: .55rem !important; }
}

/* ═══ TEAM-BILDER: Gesichter nicht abschneiden ═══════════════════
   Container-Höhe erhöhen + object-position:center top, sodass
   die Köpfe immer vollständig im Bild bleiben. */
#team .group {
  height: clamp(75vw, 55vw, 80vh) !important;
  min-height: 380px !important;
}
#team .group img {
  object-fit: cover !important;
  object-position: 50% 20% !important;
}
@media (max-width: 767px) {
  #team .group { height: auto !important; aspect-ratio: 3/4; min-height: 440px !important; }
  #team .group img { object-position: 50% 15% !important; }
}

/* ═══ RABATT-BADGE: nicht über Titel legen ════════════════════════
   Karte bekommt Top-Padding für Badge-Platz, Badge bleibt absolut. */
.pp-card .pp-badge-rabatt + .pp-row,
.pp-card:has(.pp-badge-rabatt) { padding-top: clamp(2.6rem, 5vw, 3.2rem) !important; }
.pp-badge-rabatt {
  top: clamp(.7rem, 1.4vw, 1rem) !important;
  right: clamp(.8rem, 1.8vw, 1.2rem) !important;
}

/* ═══ PRICING-SECTION: Scroll-Performance Mobile ═══════════════════
   Kundin: „Bei Preise ruckelt alles beim Scrollen". Ursache:
   many backdrop-filter + transitions auf .pp-card. Auf Touch killen. */
html.is-touch #buchungen .pp-card,
html.is-touch .pricing-wrap .pp-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
  box-shadow: none !important;
  will-change: auto !important;
}
html.is-touch #buchungen .pp-card:hover,
html.is-touch .pricing-wrap .pp-card:hover {
  transform: none !important; box-shadow: none !important;
}
html.is-touch #buchungen { contain: content; }

/* ════════════════════════════════════════════════════════════════════
   iOS / iPad EXTREME PERFORMANCE PACKAGE
   Kundin: „Apple Tablet ruckelt EXTREM — Website unbrauchbar".
   Andere Geräte laufen flüssig → iPad Safari-spezifisch rigoros entschärfen.
   ════════════════════════════════════════════════════════════════════ */
/* 1) Canvas-Glitter auf iOS komplett AUS — zieht GPU & Main-Thread massiv */

/* 2) ALLE backdrop-filter auf iOS durch solid rgba — iOS-Safari repaintet
      backdrop-filter bei jedem Scroll-Frame → extremes Ruckeln */
html.is-ios #nav>div,
html.is-ios .ns>div,
html.is-ios .nl,
html.is-ios #logo-link>div,
html.is-ios #mob-menu,
html.is-ios .pp-card,
html.is-ios [style*="backdrop-filter"],
html.is-ios [class*="backdrop-blur"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(10,10,10,.88) !important;
}
html.is-ios #hero-vid + div,
html.is-ios .ga { filter: none !important; }
/* 3) Alle box-shadow + drop-shadow auf iOS sehr reduzieren */
html.is-ios *,
html.is-ios *::before,
html.is-ios *::after {
  box-shadow: none !important;
}
html.is-ios .pulse-opening,
html.is-ios .bm,
html.is-ios a.magnetic {
  box-shadow: 0 4px 14px rgba(0,0,0,.4) !important;
}
/* 4) Hero-Image: Filter auf iOS billig halten */
html.is-ios #hero-vid img {
  filter: brightness(.9) !important;
}
/* 5) Gallery-Pin auf iOS weicher — scrub=true wird in JS auf 0 gesetzt */
html.is-ios #vpin .gp img { transform: none !important; }
html.is-ios .wl { display: none !important; }
/* 6) CSS-Glitzer (body::before/::after) auf iOS AUS — extrem teuer wegen mix-blend */
/* 7) Filter-Animationen auf iOS vereinfachen — nur die .lg Shimmer bleibt */
html.is-ios .ga { animation: none !important; }
html.is-ios #grain { display: none !important; }
/* 8) Smooth-scroll auf iOS: native momentum statt Lenis (bereits aus JS) */
html.is-ios { -webkit-overflow-scrolling: touch; }
/* 9) Magnetic-Hover aus auf iOS — tracking Mouse rauchen bei Touch */
html.is-ios .magnetic { transform: none !important; transition: none !important; }
/* --- IPAD BUGFIX: Clip-Path & Schatten deaktivieren --- */

/* 1. Goldene Schriften (.hw): Wisch-Effekt abschalten, stattdessen weich einblenden */
html.is-ios .hw {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    opacity: 0 !important;
    transform: translateY(15px) !important;
    transition: opacity 1s ease-out, transform 1s ease-out !important;
    animation: none !important;
}
html.is-ios .hw.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 2. Poesie-Sektion: Harte Box-Schatten killen die iPad GPU beim horizontalen Scrollen */
html.is-ios #philosophie div[class*="shadow-"] {
    box-shadow: none !important;
    border: 1px solid rgba(255,255,255,.15) !important;
}

/* 3. Liquid Gold Effekt abspecken (Drop-Shadow blockiert iOS) */
html.is-ios .lg {
    filter: none !important;
}
/* 10) Text-Animationen auf iOS reduzieren — nur die .lg Shimmer bleibt */
html.is-ios .pp, html.is-ios .fp { transition: none !important; }

/* ════════════════════════════════════════════════════════════════════
   PRICING — Eröffnungspreise PROMINENT hervorheben (vor allem Mobile)
   ════════════════════════════════════════════════════════════════════ */
/* Die Launch-Karte bekommt einen deutlich sichtbaren Rahmen, Glow und Badge-Effekt */
.pp-launch{
  background: linear-gradient(135deg, rgba(212,175,55,.22) 0%, rgba(212,175,55,.08) 55%, rgba(253,244,210,.04) 100%) !important;
  border: 2px solid rgba(212,175,55,.75) !important;
  box-shadow:
    0 0 0 1px rgba(212,175,55,.35) inset,
    0 30px 80px rgba(212,175,55,.18),
    0 0 60px rgba(212,175,55,.12) !important;
  position: relative;
}
/* Pulsierender Gold-Glow (Desktop: stärker, iOS: aus — Performance) */
.pp-launch::after{
  content:'';
  position:absolute; inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: 0 0 0 0 rgba(212,175,55,.35);
  animation: launchPulse 2.6s ease-in-out infinite;
  z-index: 0;
}
@keyframes launchPulse{
  0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,.4); }
  50%     { box-shadow: 0 0 0 12px rgba(212,175,55,0); }
}
html.is-ios .pp-launch::after { animation: none !important; box-shadow: none !important; }

/* Gold-Gruppenlabel DEUTLICH größer & auffälliger */
.pp-group-gold span{
  color:#fff !important;
  background: linear-gradient(110deg,#B38728,#D4AF37,#FDF4D2,#D4AF37,#B38728);
  background-size:200%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent !important;
  font-weight:900 !important;
  font-size:clamp(.78rem, 1.3vw, 1rem) !important;
  letter-spacing:.35em !important;
  padding: .3em .6em;
  animation: gs 5.5s linear infinite;
}
.pp-group-gold::before, .pp-group-gold::after{
  background: linear-gradient(to right, transparent, rgba(212,175,55,.7), transparent) !important;
  height: 2px !important;
}

/* ════════════════════════════════════════════════════════════════════
   PRICING — Alle Texte DEUTLICH heller (wie restliche Website)
   ════════════════════════════════════════════════════════════════════ */
#buchungen .pp-sub,
.pricing-wrap .pp-sub { color: rgba(255,255,255,.9) !important; }
#buchungen .pp-rowsub,
.pricing-wrap .pp-rowsub { color: rgba(255,255,255,.88) !important; }
#buchungen .pp-per,
.pricing-wrap .pp-per { color: rgba(255,255,255,.82) !important; }
#buchungen .pp-rowtitle-sm,
.pricing-wrap .pp-rowtitle-sm { color: rgba(255,255,255,.95) !important; }
#buchungen .pp-group-label:not(.pp-group-gold) span,
.pricing-wrap .pp-group-label:not(.pp-group-gold) span { color: rgba(255,255,255,.88) !important; }
#buchungen .pp-groupnote,
.pricing-wrap .pp-groupnote { color: rgba(255,255,255,.82) !important; }
#buchungen .pp-footnote,
.pricing-wrap .pp-footnote { color: rgba(255,255,255,.8) !important; }
#buchungen .pp-stu-per,
.pricing-wrap .pp-stu-per { color: rgba(255,255,255,.82) !important; }
#buchungen .pp-rowstudent,
.pricing-wrap .pp-rowstudent { color: rgba(255,255,255,.88) !important; }
#buchungen .pp-stu-tag,
.pricing-wrap .pp-stu-tag { color: rgba(212,175,55,1) !important; border-color: rgba(212,175,55,.55) !important; }
/* Group-label Trennlinien heller */
#buchungen .pp-group-label:not(.pp-group-gold)::before,
#buchungen .pp-group-label:not(.pp-group-gold)::after {
  background: linear-gradient(to right, transparent, rgba(255,255,255,.25), transparent) !important;
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE: „Schüler & Studenten (Nachweis nötig)" geht über Rand
   Ursache: white-space:nowrap + seitliche Trennlinien drücken Text raus.
   Fix: Label auf Mobile mehrzeilig + kleiner + ohne seitliche Lines.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .pp-group-label{
    flex-direction: column !important;
    gap: .5rem !important;
    padding: 0 !important;
    margin: clamp(1.2rem,4vw,2rem) 0 clamp(.4rem,1.5vw,.8rem) !important;
  }
  .pp-group-label::before,
  .pp-group-label::after{
    display: none !important;
  }
  .pp-group-label span{
    white-space: normal !important;
    text-align: center !important;
    letter-spacing: .22em !important;
    font-size: .68rem !important;
    line-height: 1.5 !important;
    padding: 0 .5rem !important;
    max-width: 100%;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .pp-group-gold span{
    font-size: .82rem !important;
    letter-spacing: .2em !important;
  }
  /* Launch-Glow auf Mobile etwas kompakter */
  .pp-launch{
    border-width: 2px !important;
    box-shadow:
      0 0 0 1px rgba(212,175,55,.4) inset,
      0 18px 50px rgba(212,175,55,.2) !important;
  }
}

/* Noch engerer Screen (kleine iPhones): harte Silben-Trennung */
@media (max-width: 380px) {
  .pp-group-label span{
    font-size: .62rem !important;
    letter-spacing: .16em !important;
  }
  .pp-group-gold span{
    font-size: .75rem !important;
    letter-spacing: .15em !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   ERÖFFNUNGSPREISE ≠ STUDENT-KARTEN
   Design klar differenzieren:
   - Launch-Karten: SATTES Gold, Gold-Gradient-Rahmen, Edelglanz, große Preise
   - Student-Karten: subtil/neutral, dezenter Gold-Akzent nur als Highlight
   ════════════════════════════════════════════════════════════════════ */

/* ── EDEL: Launch-Karten (.pp-gold) komplett überschreiben ─────────── */
#buchungen .pp-card.pp-gold{
  background: linear-gradient(135deg,
      rgba(212,175,55,.28) 0%,
      rgba(179,135,40,.18) 45%,
      rgba(122,85,16,.12) 100%) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box;
  box-shadow:
      0 0 0 1px rgba(212,175,55,.45) inset,
      0 20px 55px rgba(212,175,55,.22),
      0 8px 24px rgba(0,0,0,.5) !important;
  position: relative;
  overflow: visible !important;
}
/* Gold-Gradient-Rahmen per ::before */
#buchungen .pp-card.pp-gold::before{
  content:'';
  position:absolute; inset:-2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg,#FDF4D2 0%,#D4AF37 30%,#B38728 55%,#D4AF37 80%,#FDF4D2 100%);
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: goldBorder 6s linear infinite;
  pointer-events: none;
  z-index: 1;
  height: auto; top:-2px; left:-2px; right:-2px; bottom:-2px;
}
@keyframes goldBorder{
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
html.is-ios #buchungen .pp-card.pp-gold::before{ animation: none !important; }

/* Launch-Karte Inhalte über dem Border-Layer */
#buchungen .pp-card.pp-gold > * { position: relative; z-index: 2; }

/* Launch-Titel: edel in Creme-Weiß */
#buchungen .pp-card.pp-gold .pp-rowtitle{
  color: #FDF4D2 !important;
  font-weight: 500 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
/* Launch-Subtext: warmes Gold-Beige statt grau */
#buchungen .pp-card.pp-gold .pp-rowsub{
  color: rgba(253,244,210,.9) !important;
}
/* Launch-Preis: voll gold shimmernd */
#buchungen .pp-card.pp-gold .pp-amount-sm,
#buchungen .pp-card.pp-gold .pp-cur-sm{
  background: linear-gradient(110deg,#FDF4D2,#D4AF37,#FDF4D2,#D4AF37);
  background-size: 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gs 5.5s linear infinite;
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  text-shadow: none;
  filter: drop-shadow(0 2px 8px rgba(212,175,55,.4));
}

/* „SPAR"-Badge oben rechts für bezahlte Launch-Karten (nicht Schnupperabend) */
#buchungen .pp-card.pp-gold:not(:first-of-type)::after{
  content: 'LIMITIERT';
  position: absolute;
  top: -10px; right: clamp(1rem, 3vw, 1.8rem);
  padding: .35em 1em;
  border-radius: 100px;
  background: linear-gradient(110deg,#B38728,#D4AF37,#FDF4D2,#D4AF37,#B38728);
  background-size: 200%;
  color: #0a0a0a;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(.52rem, .75vw, .6rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(212,175,55,.45), 0 0 0 1px rgba(255,255,255,.4) inset;
  z-index: 3;
  white-space: nowrap;
  animation: gs 3.5s linear infinite;
}

/* ── DEZENT: Student-Karten (.pp-stu) neutralisieren ──────────────── */
#buchungen .pp-card.pp-stu{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: none !important;
}
#buchungen .pp-card.pp-stu::before{
  background: linear-gradient(to right, transparent, rgba(255,255,255,.1), transparent) !important;
}
/* Student-Titel: weiß, kein Gold */
#buchungen .pp-card.pp-stu .pp-rowtitle{
  color: rgba(255,255,255,.95) !important;
}
#buchungen .pp-card.pp-stu .pp-rowsub{
  color: rgba(255,255,255,.85) !important;
}
/* Student-Preis: dezentes gedämpftes Gold (nicht leuchtend) */
#buchungen .pp-card.pp-stu .pp-amount-sm,
#buchungen .pp-card.pp-stu .pp-cur-sm{
  color: rgba(212,175,55,.85) !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
/* Student-Gold-Accent-Linie oben ausblenden */
#buchungen .pp-card.pp-stu::before{
  display: none;
}

/* Schnupperabend-Karte (erste Launch-Karte): Badge „GRATIS" statt „LIMITIERT" */
#buchungen .pp-card.pp-gold:first-of-type::after{
  content: 'GRATIS · EINSTIEG';
  position: absolute;
  top: -10px; right: clamp(1rem, 3vw, 1.8rem);
  padding: .35em 1em;
  border-radius: 100px;
  background: linear-gradient(110deg,#FDF4D2,#D4AF37,#B38728,#D4AF37,#FDF4D2);
  background-size: 200%;
  color: #0a0a0a;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(.52rem, .75vw, .6rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(212,175,55,.5), 0 0 0 1px rgba(255,255,255,.4) inset;
  z-index: 3;
  white-space: nowrap;
  animation: gs 3.5s linear infinite;
}

/* Mobile: Badge etwas kleiner, damit Text nicht abgeschnitten wird */
@media (max-width: 640px) {
  #buchungen .pp-card.pp-gold::after,
  #buchungen .pp-card.pp-gold:first-of-type::after,
  #buchungen .pp-card.pp-gold:not(:first-of-type)::after{
    font-size: .5rem !important;
    letter-spacing: .22em !important;
    padding: .3em .8em !important;
    top: -8px !important;
    right: .8rem !important;
  }
  #buchungen .pp-card.pp-gold{
    padding-top: clamp(1.6rem, 4.5vw, 2rem) !important;
  }
  #buchungen .pp-card.pp-gold .pp-amount-sm{
    font-size: 1.4rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PRICING — Sinnvoller Textumbruch (keine Waisenwörter, keine
   Zahlen+Einheit-Trennungen wie „6 / Monate").
   ════════════════════════════════════════════════════════════════════ */
#buchungen .pp-rowsub,
#buchungen .pp-rowtitle,
#buchungen .pp-sub,
#buchungen .pp-groupnote,
#buchungen .pp-footnote{
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: pretty;
}
/* Preiszeilen nie trennen (z.B. „12,00" + „€") */
#buchungen .pp-rowprice,
#buchungen .pp-hero-price,
#buchungen .pp-amount-sm,
#buchungen .pp-cur-sm,
#buchungen .pp-amount,
#buchungen .pp-cur{
  white-space: nowrap !important;
}
/* Preis-Spalte bekommt garantierten Platz + sichtbares €-Zeichen */
#buchungen .pp-rowprice{
  flex-shrink: 0 !important;
  min-width: max-content !important;
  padding-left: .5rem;
}
#buchungen .pp-cur-sm{
  display: inline-block !important;
  opacity: 1 !important;
  margin-left: .1em;
  flex-shrink: 0;
}
/* Flex-Zeile: Textblock darf schrumpfen, Preis nicht */
#buchungen .pp-card.flex > div:not(.pp-rowprice){
  min-width: 0;
  flex: 1 1 auto;
}
/* Mobile: Titel + Preis stapeln falls wirklich zu eng (unter 420px),
   damit €-Symbol nie abgeschnitten wird */
@media (max-width: 420px) {
  #buchungen .pp-card.flex{
    flex-wrap: wrap !important;
    gap: .4rem !important;
  }
  #buchungen .pp-rowprice{
    width: 100%;
    justify-content: flex-start !important;
    padding-left: 0;
    padding-top: .6rem;
    border-top: 1px solid rgba(212,175,55,.15);
  }
}
/* Inline-Styles aus HTML aushebeln (border-color/background) */
#buchungen .pp-card.pp-gold[style]{
  background-image: linear-gradient(135deg,
      rgba(212,175,55,.28) 0%,
      rgba(179,135,40,.18) 45%,
      rgba(122,85,16,.12) 100%) !important;
}
#buchungen .pp-card.pp-stu[style]{
  background-image: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
  background-color: transparent !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* ════════════════════════════════════════════════════════════════════
   COURSE-INFO MODAL (Mehr Infos → Popup)
   ════════════════════════════════════════════════════════════════════ */
.course-modal{
    position:fixed; inset:0; z-index:10000;
    display:none; align-items:center; justify-content:center;
    padding:clamp(1rem,3vw,2rem);
    opacity:0; transition:opacity .35s cubic-bezier(.16,1,.3,1);
}
.course-modal.is-open{ display:flex; opacity:1; }
.course-modal-backdrop{
    position:absolute; inset:0;
    background:rgba(0,0,0,.78);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.course-modal-box{
    position:relative;
    width:100%; max-width:680px;
    max-height:88vh;
    overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    background:linear-gradient(160deg, rgba(22,18,12,.98) 0%, rgba(8,8,8,.98) 100%);
    border:1px solid rgba(212,175,55,.22);
    border-radius:clamp(1.2rem,2.4vw,1.8rem);
    padding:clamp(1.8rem,4vw,3rem) clamp(1.5rem,4vw,3rem);
    box-shadow:0 30px 90px rgba(0,0,0,.85), inset 0 1px 0 rgba(212,175,55,.12);
    color:#fff;
    transform:translateY(20px) scale(.98);
    transition:transform .4s cubic-bezier(.16,1,.3,1);
}
/* Custom scrollbar für Desktop — sichtbar machen, damit User weiß: scrollbar */
.course-modal-box::-webkit-scrollbar{ display:block; width:8px; }
.course-modal-box::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); border-radius:100px; margin:1rem 0; }
.course-modal-box::-webkit-scrollbar-thumb{ background:rgba(212,175,55,.4); border-radius:100px; }
.course-modal-box::-webkit-scrollbar-thumb:hover{ background:rgba(212,175,55,.7); }
.course-modal-box{ scrollbar-width:thin; scrollbar-color:rgba(212,175,55,.4) rgba(255,255,255,.04); }
.course-modal.is-open .course-modal-box{ transform:translateY(0) scale(1); }
.course-modal-close{
    position:absolute; top:1rem; right:1rem;
    width:2.4rem; height:2.4rem; border-radius:50%;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(0,0,0,.4);
    color:rgba(255,255,255,.85);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all .3s ease;
}
.course-modal-close:hover{ border-color:rgba(212,175,55,.6); color:#D4AF37; transform:rotate(90deg); }
.course-modal-eyebrow{
    display:block; color:#D4AF37;
    font-size:clamp(.62rem,.9vw,.7rem); letter-spacing:.4em;
    font-weight:700; text-transform:uppercase;
    margin-bottom:.6rem; padding-right:3rem;
}
.course-modal-title{
    font-family:'Playfair Display',serif; font-style:italic; font-weight:300;
    font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.1;
    margin:0 0 1.4rem 0; color:#fff;
}
.course-modal-body{ color:rgba(255,255,255,.9); line-height:1.65; font-size:clamp(.88rem,1.05vw,.98rem); }
.course-modal-body p{ margin:0 0 1rem 0; }
.course-modal-body h4{
    color:#D4AF37; font-weight:700; text-transform:uppercase;
    font-size:clamp(.7rem,.95vw,.78rem); letter-spacing:.25em;
    margin:1.6rem 0 .8rem 0;
}
.course-modal-body ul{
    list-style:none; padding:0; margin:0 0 1.2rem 0;
    display:flex; flex-direction:column; gap:.7rem;
}
.course-modal-body li{
    position:relative; padding-left:1.4rem;
    color:rgba(255,255,255,.88);
}
.course-modal-body li::before{
    content:''; position:absolute; left:0; top:.65em;
    width:.7rem; height:1px; background:rgba(212,175,55,.7);
}
.course-modal-body li strong{ color:#fff; font-weight:700; }
.course-modal-body .cm-outro{
    margin-top:1.4rem; padding-top:1.2rem;
    border-top:1px solid rgba(212,175,55,.15);
    font-style:italic; color:rgba(253,244,210,.95);
}
@media (max-width: 640px) {
    .course-modal-box{ padding:2rem 1.4rem; max-height:92vh; }
    .course-modal-close{ top:.7rem; right:.7rem; }
}
/* iOS: Backdrop-Blur würde ruckeln */
html.is-ios .course-modal-backdrop{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    background:rgba(0,0,0,.92);
}

/* ═══════════════════════════════════════════════════════════════
   HERO VIEWPORT-FIT — kompletter Header passt auf jeden Screen
   (Mobile, Tablet, Desktop, Landscape) ohne Scrollen
   ═══════════════════════════════════════════════════════════════ */

/* Hero: feste Viewport-Höhe statt min-height + Overflow clippen */
#hero{
    height:100vh !important;
    height:100svh !important;
    height:100dvh !important;
    min-height:0 !important;
    max-height:100dvh !important;
    overflow:hidden !important;
}

/* Content-Wrapper: kompaktere vertikale Abstände */
#hero > div.relative.z-20{
    padding-top:clamp(88px, 12vh, 130px) !important;
    padding-bottom:clamp(.5rem, 2vh, 1.2rem) !important;
}

/* H1 "Die Kunst" skaliert mit BREITE UND HÖHE gleichzeitig */
#hero #ht{
    font-size:clamp(2.6rem, min(11vw, 14vh), 8rem) !important;
    line-height:.88 !important;
}

/* SVG "der Verbindung" — Höhe begrenzen damit nicht überläuft */
#hero svg{
    max-height:22vh;
}
#hero .relative.flex.justify-center{
    margin-top:clamp(-2rem, -3vw, -2.8rem) !important;
    max-height:24vh;
}

/* Badges/Pills & Tagline: engere Abstände */
#hero .ie.mb-5{ margin-bottom:clamp(.6rem, 1.5vh, 1.2rem) !important; }
#hero .ie.mb-6{ margin-bottom:clamp(.7rem, 1.8vh, 1.4rem) !important; }
#hero .ie.mt-4{ margin-top:clamp(.5rem, 1.5vh, 1.2rem) !important; }
#hero .ie.mt-6{ margin-top:clamp(.6rem, 1.8vh, 1.5rem) !important; }
#hero .ie.mt-8{ margin-top:clamp(.8rem, 2.2vh, 1.8rem) !important; }

/* Scroll-Indicator: kompakter */
#hero > div.z-20.pb-4{ padding-bottom:clamp(.4rem, 1.2vh, 1rem) !important; }
#hero > div.z-20.pb-4 > div[style*="width:1px"]{
    height:clamp(1rem, 2.5vh, 2rem) !important;
}

/* Mobile (<768px): H1 kleiner halten damit SVG + Stats + Scroll passen */
@media (max-width:767px){
    #hero #ht{ font-size:clamp(3.2rem, min(15vw, 11vh), 5.2rem) !important; }
    #hero > div.relative.z-20{
        padding-top:clamp(80px, 11vh, 110px) !important;
    }
    #hero svg{ max-height:18vh; }
    #hero .relative.flex.justify-center{ max-height:20vh; margin-top:-1.6rem !important; }
}

/* Sehr schmale Mobile (≤360px) */
@media (max-width:360px){
    #hero #ht{ font-size:clamp(2.8rem, 14vw, 4.4rem) !important; }
    #hero > div.relative.z-20{ padding-top:clamp(78px, 10.5vh, 100px) !important; }
}

/* Tablet (768-1279): Navbar + Logotext höher → mehr padding-top nötig */
@media (min-width:768px) and (max-width:1279px){
    #hero > div.relative.z-20{
        padding-top:clamp(130px, 16vh, 180px) !important;
    }
    #hero #ht{ font-size:clamp(3.2rem, min(10vw, 13vh), 7rem) !important; }
    #hero svg{ max-height:20vh; }
}

/* Niedrige Höhe (<700px) auf Desktop/Tablet */
@media (max-height:700px) and (min-width:768px){
    #hero > div.relative.z-20{
        padding-top:clamp(100px, 13vh, 140px) !important;
    }
    #hero #ht{ font-size:clamp(2.6rem, min(9vw, 12vh), 5.5rem) !important; }
    #hero svg{ max-height:17vh; }
    #hero .relative.flex.justify-center{ max-height:19vh; margin-top:-1.4rem !important; }
}

/* Mobile Landscape / extrem kurze Höhe */
@media (max-height:500px) and (orientation:landscape){
    #hero > div.relative.z-20{
        padding-top:clamp(64px, 9vh, 90px) !important;
        padding-bottom:.3rem !important;
    }
    #hero #ht{ font-size:clamp(1.9rem, 10vh, 3.4rem) !important; }
    #hero svg{ max-height:14vh; }
    #hero .relative.flex.justify-center{ max-height:16vh; margin-top:-1rem !important; }
    #hero .ie.mb-5, #hero .ie.mb-6{ margin-bottom:.3rem !important; }
    #hero .ie.mt-4, #hero .ie.mt-6, #hero .ie.mt-8{ margin-top:.35rem !important; }
    /* Auf sehr schmaler Höhe: Stats + Scroll-Hint ausblenden */
    #hero .flex.flex-wrap.justify-center.gap-x-6{ display:none !important; }
    #hero > div.z-20.pb-4{ display:none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO-BILD startet unterhalb der Navbar (nicht mehr dahinter)
   ═══════════════════════════════════════════════════════════════ */
#hero-vid{
    top: clamp(72px, 9vh, 110px) !important;
}
/* Dark-Gradient-Overlay direkt unter #hero-vid mitziehen */
#hero > div.absolute.inset-0.z-\[1\]{
    top: clamp(72px, 9vh, 110px) !important;
}
/* Tablet (768-1279): Navbar + Logotext "Vibra Latina Grafenau" höher */
@media (min-width: 768px) and (max-width: 1279px){
    #hero-vid,
    #hero > div.absolute.inset-0.z-\[1\]{
        top: clamp(130px, 16vh, 180px) !important;
    }
}
/* Kleine Mobile-Screens: kompaktere Navbar */
@media (max-width: 480px){
    #hero-vid,
    #hero > div.absolute.inset-0.z-\[1\]{
        top: clamp(64px, 8vh, 88px) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PRICING: col-span-2 Fallback (Tailwind JIT greift hier nicht)
   Macht die erste Karte jedes Blocks (Schnupperabend / Einzelkarte)
   über beide Spalten breit, mittig oben.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    #buchungen .grid.md\:grid-cols-2 > .md\:col-span-2 {
        grid-column: span 2 / span 2 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PRICING: Ersparnis-Pill — elegant in Gold, passend zur Website
   ═══════════════════════════════════════════════════════════════ */
.pp-bonus-row{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin-top:.7rem;
    align-items:center;
}
.pp-bonus{
    display:inline-flex;
    align-items:baseline;
    gap:.55em;
    padding:.42em 1em;
    border-radius:999px;
    font-size:clamp(.62rem,.88vw,.74rem);
    letter-spacing:.04em;
    white-space:nowrap;
    line-height:1.2;
}
.pp-bonus-lbl{
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:.22em;
    font-size:.74em;
    opacity:.85;
}
.pp-bonus-val{
    font-weight:900;
    font-size:1.08em;
    letter-spacing:.01em;
    font-family:'Playfair Display',serif;
}
/* Ersparnis-Pill — animierter Gold-Gradient, edel */
.pp-bonus-save{
    background:linear-gradient(110deg,
        rgba(179,135,40,.18) 0%,
        rgba(212,175,55,.28) 40%,
        rgba(253,244,210,.18) 60%,
        rgba(212,175,55,.28) 80%,
        rgba(179,135,40,.18) 100%);
    background-size:220% 100%;
    animation: ppBonusShine 5.5s ease-in-out infinite;
    border:1px solid rgba(212,175,55,.55);
    color:#FDF4D2;
    box-shadow:
        0 2px 14px rgba(212,175,55,.18),
        inset 0 0 0 1px rgba(253,244,210,.08);
}
.pp-bonus-save .pp-bonus-lbl{ color:rgba(253,244,210,.78); }
.pp-bonus-save .pp-bonus-val{ color:#FDF4D2; }
@keyframes ppBonusShine{
    0%,100%{ background-position: 0% 50%; }
    50%    { background-position: 100% 50%; }
}
/* Reduced-Motion + iOS: Animation aus */
@media (prefers-reduced-motion: reduce){
    .pp-bonus-save{ animation: none !important; }
}
html.is-ios .pp-bonus-save{ animation: none !important; }

/* Mobile: Pills kompakter */
@media (max-width: 480px){
    .pp-bonus-row{ gap:.4rem; margin-top:.55rem; }
    .pp-bonus{ padding:.38em .85em; font-size:.66rem; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE-REORDER: Eröffnungspreise
   Desktop bleibt: Schnupperabend / 5er Normal | 5er Student / 10er Normal | 10er Student
   Mobile neu:    Schnupperabend → 5er Normal → 10er Normal → 5er Student → 10er Student
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px){
    /* Der erste Pricing-Grid-Block ist der Eröffnungspreise-Block */
    #buchungen .pp-group-label.pp-group-gold + .grid > .pp-card:nth-child(1){ order: 1; } /* Schnupperabend */
    #buchungen .pp-group-label.pp-group-gold + .grid > .pp-card:nth-child(2){ order: 2; } /* 5er Normal */
    #buchungen .pp-group-label.pp-group-gold + .grid > .pp-card:nth-child(3){ order: 4; } /* 5er Student */
    #buchungen .pp-group-label.pp-group-gold + .grid > .pp-card:nth-child(4){ order: 3; } /* 10er Normal */
    #buchungen .pp-group-label.pp-group-gold + .grid > .pp-card:nth-child(5){ order: 5; } /* 10er Student */
    #buchungen .pp-group-label.pp-group-gold + .grid{ display: flex; flex-direction: column; gap: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   AUDIT-FIXES (Pre-Launch)
   ═══════════════════════════════════════════════════════════════ */
/* W18: Instagram-CTA sauberer Zeilenumbruch */
#einblicke > div > .text-center a{
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}
/* B4: iOS – CSS-Glitter Pseudo-Elemente abschalten (Performance) */
html.is-ios body::before,
html.is-ios body::after{
    display: none !important;
}