/* SeMa – safety first · Stylesheet
   Hell und warm statt Eventbranchen-Schwarz. Systemschriften, keine externen Ressourcen.
   Überschriften in der Serifenschrift des Systems (auf Apple-Geräten „New York“). */

:root{
  --paper:#fbfaf7;      /* Grundton: warmes Weiß */
  --paper-2:#f3f0ea;    /* abgesetzte Flächen */
  --card:#ffffff;
  --ink:#1d1d1f; --ink-2:#6b6b70; --line:rgba(29,29,31,.09);
  --accent:#6c47ea;     /* SeMa-Violett aus dem Logo */
  --accent-soft:#efeafd;
  --radius:26px; --wrap:1180px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --serif:ui-serif,"New York","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.55;letter-spacing:-.008em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;line-height:1.1}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.02em}
h2{font-size:clamp(2.2rem,4.8vw,3.6rem)}
h3{font-weight:600;font-size:1.2rem;letter-spacing:-.012em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:#fff;color:#000;padding:10px 16px;border-radius:10px}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.center{text-align:center}
.muted{color:var(--ink-2)}
.grad{color:var(--accent);font-style:italic}
.eyebrow{font-size:.9rem;font-weight:600;letter-spacing:.02em;color:var(--ink-2);margin:0 0 14px}
.eyebrow--accent{color:var(--accent)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.4em;padding:.75em 1.35em;border-radius:980px;font-size:1.02rem;font-weight:500;transition:transform .3s var(--ease),background-color .3s,color .3s;white-space:nowrap}
.btn:hover{text-decoration:none;transform:scale(1.03)}
.btn:active{transform:scale(.98)}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:#5a37d6}
.btn--ghost{color:var(--accent);border:1px solid rgba(108,71,234,.35)}
.btn--ghost:hover{background:var(--accent-soft)}

/* Navigation: helles Glas */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:54px;background:rgba(251,250,247,.78);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid transparent;transition:transform .45s var(--ease),border-color .3s}
.nav.is-solid{border-bottom-color:var(--line)}
.nav.is-hidden{transform:translateY(-100%)}
.nav__inner{max-width:var(--wrap);margin:0 auto;height:100%;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.nav__logo img{height:19px;width:auto}
.nav__menu{display:flex;gap:30px;align-items:center}
.nav__menu a{color:var(--ink);opacity:.8;font-size:.85rem;transition:opacity .2s}
.nav__menu a:hover{opacity:1;text-decoration:none}
.nav__menu .nav__cta{opacity:1;background:var(--accent);color:#fff;padding:.36em 1em;border-radius:980px}
.nav__toggle{display:none;background:none;border:0;width:44px;height:44px;position:relative;cursor:pointer}
.nav__toggle span:not(.sr){position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease)}
.nav__toggle span:nth-child(1){top:18px}.nav__toggle span:nth-child(2){top:25px}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* Willkommen: Text auf hellem Grund, darunter die große Bildbühne */
.hero{padding:clamp(110px,14vh,150px) 0 clamp(40px,6vw,70px)}
.hero__content{text-align:center;margin-bottom:clamp(34px,5vw,56px)}
.hero h1{font-size:clamp(2.7rem,7vw,5.6rem);line-height:1.03;margin-bottom:22px}
.hero__lead{font-size:clamp(1.1rem,1.7vw,1.35rem);color:var(--ink-2);max-width:640px;margin:0 auto 28px;line-height:1.45}
.hero__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero__content > *{animation:rise 1.1s var(--ease-out) both}
.hero__content > *:nth-child(2){animation-delay:.1s}.hero__content > *:nth-child(3){animation-delay:.2s}.hero__content > *:nth-child(4){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero__stage{position:relative;width:min(1400px,96vw);margin:0 auto;aspect-ratio:16/8;max-height:78vh;border-radius:var(--radius);overflow:hidden;background:var(--paper-2);animation:rise 1.3s .35s var(--ease-out) both}
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.6s var(--ease)}
.hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 9s linear}
.hero__slide.is-active{opacity:1}
.hero__slide.is-active img{transform:scale(1)}
.hero__slide figcaption{position:absolute;left:24px;bottom:22px;font-size:.8rem;font-weight:500;color:#fff;background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:6px 12px;border-radius:99px;opacity:0;transition:opacity .8s .6s}
.hero__slide.is-active figcaption{opacity:1}
.hero__controls{position:absolute;z-index:3;right:20px;bottom:18px;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:9px 12px;border-radius:980px}
.hero__dots{display:flex;gap:7px}
.hero__dot{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:rgba(29,29,31,.25);cursor:pointer;overflow:hidden;position:relative;transition:width .5s var(--ease)}
.hero__dot.is-active{width:40px}
.hero__dot.is-active::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;animation:fill var(--dur,6.5s) linear forwards}
.hero.is-paused .hero__dot.is-active::after{animation-play-state:paused}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero__pause{width:26px;height:26px;border-radius:50%;border:0;background:rgba(29,29,31,.08);cursor:pointer;display:grid;place-items:center}
.i-pause{width:8px;height:10px;border-left:3px solid var(--ink);border-right:3px solid var(--ink)}
.hero.is-paused .i-pause{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--ink);margin-left:3px}

/* Intro & Zahlen */
.intro{padding:clamp(70px,10vw,130px) 0}
.intro__text{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.25;letter-spacing:-.015em;max-width:980px;margin:0 0 clamp(50px,7vw,80px)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;border-top:1px solid var(--line);padding-top:36px}
.stat__num{display:block;font-family:var(--serif);font-size:clamp(2.1rem,4vw,3.1rem);color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.1}
.stat__label{display:block;color:var(--ink-2);margin-top:8px;font-size:.95rem;max-width:220px}

/* Sektionen */
.section{padding:clamp(80px,11vw,140px) 0}
.section--alt{background:var(--paper-2)}
.sec-head{max-width:780px;margin-bottom:clamp(36px,5vw,60px)}
.sec-head__lead{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--ink-2);margin-top:18px;line-height:1.5}

/* Leistungen */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(60,40,120,.35)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.card:hover img{transform:scale(1.04)}
.card__body{padding:22px 24px 26px}
.card__body p{color:var(--ink-2);margin:8px 0 0}
.card--xl{grid-column:span 3;flex-direction:row}
.card--xl img{width:56%;aspect-ratio:auto;min-height:360px;object-fit:contain;background:#fff;padding:12px}
.card--xl .card__body{align-self:center;padding:44px}
.card--xl h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,3vw,2.5rem);letter-spacing:-.02em}
.card--xl .card__body p:last-child{font-size:1.1rem;margin-top:14px}
.card--xl .eyebrow{margin-bottom:10px}
.more{margin-top:34px}
.more h3{font-size:1rem;color:var(--ink-2);font-weight:600;margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:8px 16px;font-size:.95rem}

/* Klassik: Bild öffnet sich beim Scrollen */
.zoom{height:170vh;position:relative}
.zoom__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.zoom__frame{width:calc(52vw + var(--zp,0) * 48vw);height:calc(52vh + var(--zp,0) * 48vh);border-radius:calc(var(--radius) * (1 - var(--zp,0)));overflow:hidden}
.zoom__frame img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.2 - var(--zp,0) * .2))}
.zoom__text{position:absolute;inset:auto 0 12vh 0;text-align:center;color:#fff;opacity:var(--zt,0);transform:translateY(calc((1 - var(--zt,0)) * 30px))}
.zoom__text h2{font-size:clamp(3.4rem,10vw,8rem);font-style:italic;text-shadow:0 8px 40px rgba(0,0,0,.45)}
.zoom__text .eyebrow{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* Erfahrung */
.prose .big{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.25;letter-spacing:-.015em;margin-bottom:1em}
.prose p{color:var(--ink-2);font-size:1.15rem}

/* Aufklapp-Bereiche (wie „Mehr erfahren“ bei Apple) */
.acc{margin-top:44px;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font-size:1.15rem;font-weight:600;position:relative}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-9px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .35s var(--ease)}
.acc details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.acc summary:hover{color:var(--accent)}
.acc details > *:not(summary){animation:open .5s var(--ease-out)}
.acc details > p{color:var(--ink-2);max-width:68ch}
@keyframes open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.milestones{padding-bottom:24px}
.milestones li{display:grid;grid-template-columns:80px 1fr;gap:20px;padding:14px 0}
.milestones span{font-family:var(--serif);font-size:1.5rem;color:var(--accent);line-height:1.2}
.milestones h3{font-size:1.05rem;margin-bottom:4px}
.milestones p{color:var(--ink-2);margin:0}
.orchestras{columns:2;column-gap:30px;padding-bottom:24px}
.orchestras li{padding:9px 0;border-top:1px solid var(--line);break-inside:avoid}
.projects{padding-bottom:24px}
.projects li{display:flex;gap:24px;padding:12px 0;border-top:1px solid var(--line)}
.projects li span{color:var(--accent);font-weight:600;min-width:46px;font-variant-numeric:tabular-nums}

/* Referenzen */
.partners{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.partner{background:var(--card);border-radius:var(--radius);padding:28px 24px;transition:transform .5s var(--ease-out)}
.partner:hover{transform:translateY(-4px)}
.partner img{height:64px;width:auto;object-fit:contain;margin-bottom:20px}
.partner__since{font-size:.82rem;font-weight:600;color:var(--accent);margin-bottom:6px}
.partner h3{font-size:1.08rem;margin-bottom:8px}
.partner p:last-child{color:var(--ink-2);font-size:.96rem;margin:0}
.logos{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;margin-top:18px}
.logos li{background:var(--card);border-radius:20px;padding:22px 16px 18px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;text-align:center;min-height:150px}
.logos img{height:48px;width:auto;object-fit:contain;filter:saturate(.8);transition:filter .4s,transform .4s var(--ease-out)}
.logos li:hover img{filter:none;transform:scale(1.05)}
.logos span{font-size:.8rem;color:var(--ink-2);line-height:1.35}
.logos__text strong{font-family:var(--serif);font-weight:500;font-size:1.15rem;margin-top:8px}

/* Qualifikation */
.quals{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.qual{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 24px 22px;border-top:3px solid var(--accent)}
.qual h3{font-size:1.06rem;margin-bottom:6px;-webkit-hyphens:auto;hyphens:auto}
.qual p{color:var(--ink-2);font-size:.95rem;margin:0}
.tuev{display:flex;align-items:center;gap:36px;margin-top:22px;background:var(--paper-2);border-radius:22px;padding:24px 28px}
.tuev a{flex:0 0 auto}
.tuev img{width:340px;height:auto;border-radius:6px}
.tuev p{margin:0;color:var(--ink-2);max-width:46ch}

/* Kontakt: hell, mit zartem Violett */
.contact{padding:clamp(100px,14vw,170px) 0;background:radial-gradient(ellipse 80% 70% at 50% 100%,#e9e2fd 0%,var(--paper) 70%)}
.contact__title{font-size:clamp(2.1rem,5vw,3.8rem)}
.contact__lead{color:var(--ink-2);font-size:1.2rem;margin:22px auto 32px;max-width:540px}
.contact__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.contact__where{color:var(--ink-2);margin-top:36px;font-size:.92rem}

/* Footer */
.footer{background:var(--paper-2);color:var(--ink-2);font-size:.82rem;padding:36px 0;border-top:1px solid var(--line)}
.footer__inner{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.footer__logo{height:15px;width:auto}
.footer nav{display:flex;gap:22px}
.footer a{color:var(--ink)}
.footer p{margin:0;width:100%}

/* Einblenden beim Scrollen – bewusst zurückhaltend */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out);transition-delay:var(--d,0s)}
.js .reveal.is-in{opacity:1;transform:none}

/* Rechtstexte */
.legal-hero{padding:130px 0 40px;border-bottom:1px solid var(--line)}
.legal-hero h1{font-size:clamp(2.2rem,5.5vw,3.8rem);-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.legal-hero p{color:var(--ink-2);margin-top:12px}
.legal{padding:50px 0 110px}
.legal h2{font-family:var(--sans);font-weight:700;font-size:1.45rem;letter-spacing:-.015em;margin:2.1em 0 .6em}
.legal h3{font-size:1.1rem;margin:1.6em 0 .4em}
.legal p,.legal li{color:#333;max-width:72ch}
.legal ul,.legal ol{margin:0 0 1em;padding-left:1.3em;list-style:disc}
.legal ol{list-style:decimal}
.legal li{margin:.25em 0}
.legal li.nolist{list-style:none;margin-left:-1.3em;padding-left:1.3em}
.legal .card-box{background:var(--paper-2);border-radius:18px;padding:22px 24px;margin:1em 0 1.6em;max-width:72ch}
.legal .card-box p{margin:0}
.legal .note{font-size:.9rem;color:var(--ink-2)}
.rv{unicode-bidi:bidi-override;direction:rtl;display:inline-block}
.legal-back{display:inline-block;margin-top:30px}

/* Responsive */
@media (max-width:1080px){.partners{grid-template-columns:repeat(2,1fr)}.logos{grid-template-columns:repeat(4,1fr)}}
@media (max-width:860px){
  .nav__toggle{display:block}
  .nav__menu{position:fixed;top:54px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;padding:10px 28px 28px;background:rgba(251,250,247,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);transform:translateY(-10px);opacity:0;visibility:hidden;transition:opacity .3s,transform .4s var(--ease),visibility .3s}
  .nav__menu.is-open{opacity:1;transform:none;visibility:visible}
  .nav__menu a{font-size:1.5rem;font-weight:600;padding:11px 0;opacity:1}
  .nav__menu .nav__cta{background:none;color:var(--accent);padding:11px 0}
  .nav__menu--static{position:static;flex-direction:row;gap:12px;padding:0;background:none;border:0;opacity:1;visibility:visible;transform:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav__menu--static a{font-size:.75rem;font-weight:400;padding:0}
  .nav__menu--static a:first-child{display:none}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .bento{grid-template-columns:1fr 1fr}
  .card--xl{grid-column:span 2;flex-direction:column}
  .card--xl img{width:100%;min-height:0;aspect-ratio:16/11}
  .card--xl .card__body{padding:26px 24px 30px}
  .hero__stage{aspect-ratio:4/3.4;max-height:none;width:calc(100vw - 32px)}
  .zoom{height:150vh}
  .zoom__frame{width:calc(84vw + var(--zp,0) * 16vw);height:calc(44vh + var(--zp,0) * 56vh)}
  .tuev{flex-direction:column;align-items:flex-start;gap:18px}
  .tuev img{width:100%;max-width:400px}
}
@media (max-width:600px){
  body{font-size:16px}
  .bento,.partners{grid-template-columns:1fr}
  .card--xl{grid-column:auto}
  .orchestras{columns:1}
  .logos{grid-template-columns:repeat(2,1fr)}
  .milestones li{grid-template-columns:62px 1fr;gap:12px}
  .hero__slide figcaption{display:none}
  .quals{grid-template-columns:1fr}
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero__slide img{transform:none!important}
  .js .reveal{opacity:1;transform:none}
  .zoom{height:auto}.zoom__sticky{position:static;height:70vh}
  .zoom__frame{width:100vw;height:70vh;border-radius:0}
  .zoom__text{opacity:1;transform:none}
}
@media print{.nav,.hero__controls{display:none}.zoom{height:auto}}
.logos span b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
/* Willkommensbereich kompakter, damit das große Bild früher sichtbar ist */
.hero{padding-top:clamp(86px,11vh,120px)}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.5rem);margin-bottom:16px}
.hero__lead{margin-bottom:22px}
.hero__content{margin-bottom:clamp(26px,3.5vw,40px)}
/* Kachelraster ohne Lücke: 2 breite + 3 schmale Kacheln */
@media (min-width:861px){
  .bento{grid-template-columns:repeat(6,1fr)}
  .bento .card{grid-column:span 2}
  .bento .card:nth-child(2),.bento .card:nth-child(3){grid-column:span 3}
  .bento .card--xl{grid-column:span 6}
}
/* Klassik-Bild: endet in derselben Größe und mit denselben runden Ecken wie das Willkommensbild */
.zoom__frame{width:min(1400px,calc(52vw + var(--zp,0) * 44vw));height:calc(52vh + var(--zp,0) * 32vh);border-radius:var(--radius)}
@media (max-width:860px){.zoom__frame{width:calc(80vw + var(--zp,0) * (20vw - 32px));height:calc(44vh + var(--zp,0) * 34vh)}}
@media (prefers-reduced-motion:reduce){.zoom__frame{width:min(1400px,96vw);height:70vh;border-radius:var(--radius)}}
.acc--faq{margin-top:0}
.acc--faq summary{font-size:1.08rem}
.acc--faq details > p{padding-bottom:22px;font-size:1.05rem;line-height:1.6}

/* =====================================================================
   LIQUID GLASS – Tiefe, Glanz und ein atmender Hintergrund
   (angelehnt an das Glas-Design der aktuellen Apple-Systeme)
   ===================================================================== */
:root{
  --glass:rgba(255,255,255,.52);
  --glass-strong:rgba(255,255,255,.7);
  --glass-rim:rgba(255,255,255,.85);
  --glass-blur:saturate(185%) blur(22px);
  --shadow-deep:0 1px 1px rgba(40,25,90,.04),0 8px 24px -8px rgba(40,25,90,.14),0 30px 60px -30px rgba(40,25,90,.22);
  --shadow-float:0 2px 6px rgba(40,25,90,.06),0 18px 40px -14px rgba(40,25,90,.25);
}
html{background:var(--paper)}
body{background:transparent;position:relative}

/* Atmender Farbhintergrund: weiche Violett-, Flieder- und Pfirsichtöne, die sich langsam bewegen */
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;will-change:transform}
body::before{width:70vmax;height:70vmax;left:-20vmax;top:-18vmax;background:radial-gradient(circle at 50% 50%,rgba(150,120,255,.30) 0%,rgba(150,120,255,.12) 35%,rgba(150,120,255,0) 68%);animation:drift-a 38s ease-in-out infinite alternate}
body::after{width:64vmax;height:64vmax;right:-22vmax;bottom:-20vmax;background:radial-gradient(circle at 50% 50%,rgba(255,190,150,.26) 0%,rgba(255,170,200,.12) 38%,rgba(255,170,200,0) 68%);animation:drift-b 46s ease-in-out infinite alternate}
@keyframes drift-a{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18vw,22vh,0) scale(1.15)}100%{transform:translate3d(42vw,6vh,0) scale(.95)}}
@keyframes drift-b{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-20vw,-28vh,0) scale(1.12)}100%{transform:translate3d(-46vw,-8vh,0) scale(1)}}

/* Flächen werden durchscheinend, damit das Glas Tiefe bekommt */
.section--alt{background:rgba(243,240,234,.45)}
.footer{background:rgba(243,240,234,.55);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.contact{background:radial-gradient(ellipse 80% 70% at 50% 100%,rgba(205,190,255,.55) 0%,rgba(251,250,247,0) 70%)}

/* Gemeinsames Glas für Karten, Kacheln und Paneele */
.card,.partner,.logos li,.qual,.tuev,.chips li,.acc--faq,.more{
  background:linear-gradient(160deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.42) 100%);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 var(--glass-rim),inset 0 -1px 0 rgba(255,255,255,.25),var(--shadow-deep);
}
.qual{border-top:3px solid var(--accent)}
.more{border-radius:var(--radius);padding:26px 28px}
.acc--faq{border-radius:var(--radius);padding:6px 28px;border-top:1px solid rgba(255,255,255,.7)}
.acc--faq details:last-child{border-bottom:0}
.chips li{box-shadow:inset 0 1px 0 var(--glass-rim),0 4px 12px -6px rgba(40,25,90,.18)}

/* Lichtreflex, der dem Mauszeiger folgt, plus feine Glanzkante oben */
.card,.partner,.logos li,.qual,.tuev{position:relative;overflow:hidden;
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.card::after,.partner::after,.logos li::after,.qual::after,.tuev::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.55),rgba(255,255,255,0) 45%),
             linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 22%);
  opacity:.55;transition:opacity .5s}
.card:hover,.partner:hover,.logos li:hover,.qual:hover,.tuev:hover{--ty:-6px;box-shadow:inset 0 1px 0 var(--glass-rim),var(--shadow-float),0 40px 80px -40px rgba(80,50,200,.35)}
.card:hover::after,.partner:hover::after,.logos li:hover::after,.qual:hover::after,.tuev:hover::after{opacity:1}
.card:hover{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
.card img{position:relative;z-index:0}

/* Bildbühnen mit gläserner Fassung und echter Tiefe */
.hero__stage,.zoom__frame{box-shadow:0 2px 4px rgba(40,25,90,.06),0 30px 70px -30px rgba(40,25,90,.45),0 70px 120px -60px rgba(108,71,234,.35)}
.hero__stage{transform:perspective(1600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s var(--ease-out)}
.hero__stage::after,.zoom__frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 1px 0 rgba(255,255,255,.7);
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 18%,rgba(255,255,255,0) 82%,rgba(0,0,0,.12) 100%)}
.zoom__frame{position:relative}

/* Navigation als schwebende Glasleiste */
.nav{top:12px;left:50%;right:auto;width:min(1180px,calc(100% - 24px));transform:translateX(-50%);height:52px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.45));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 var(--glass-rim),var(--shadow-float)}
.nav.is-solid{border-bottom-color:rgba(255,255,255,.75)}
.nav.is-hidden{transform:translate(-50%,-140%)}
.nav__inner{padding:0 10px 0 20px}

/* Glänzende Buttons */
.btn--accent{background:linear-gradient(180deg,#8565f5 0%,#6c47ea 55%,#5d39dc 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.12),0 8px 22px -8px rgba(108,71,234,.65)}
.btn--accent:hover{background:linear-gradient(180deg,#9275fa 0%,#7350f0 55%,#6240e2 100%)}
.btn--ghost{background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.4));-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 var(--glass-rim),0 6px 18px -8px rgba(40,25,90,.25)}
.nav__menu .nav__cta{background:linear-gradient(180deg,#8565f5,#6c47ea 60%,#5d39dc);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 12px -4px rgba(108,71,234,.6)}

/* Bedienelemente auf dem Bild als Glasperle */
.hero__controls{background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.35));border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 var(--glass-rim),0 8px 24px -10px rgba(0,0,0,.35)}
.hero__slide figcaption{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

/* Lebendigeres Einblenden: aus leichter Unschärfe und Tiefe nach vorn */
.js .reveal{opacity:0;transform:translateY(26px) scale(.975);filter:blur(6px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out),filter 1s var(--ease-out);transition-delay:var(--d,0s)}
.js .reveal.is-in{opacity:1;transform:none;filter:none}
.js .card.reveal.is-in,.js .partner.reveal.is-in,.js .qual.reveal.is-in,.js .logos.reveal.is-in li,.js .tuev.reveal.is-in{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}

/* Mobil: Navigation volle Breite, Menü als Glas */
@media (max-width:860px){
  .nav{top:8px;width:calc(100% - 16px);border-radius:18px}
  .nav__menu{top:60px;left:0;right:0;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.72));-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 var(--glass-rim),var(--shadow-float)}
  .nav.menu-open{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.65))}
  body::before{width:110vmax;height:110vmax}
  body::after{width:100vmax;height:100vmax}
}
/* Rechtstexte: Navigation ebenfalls schwebend, Abstand anpassen */
.legal-hero{padding-top:140px}

@media (prefers-reduced-motion:reduce){
  body::before,body::after{animation:none}
  .js .reveal{filter:none}
  .hero__stage,.card,.partner,.logos li,.qual,.tuev{transform:none!important}
}
@media (prefers-reduced-transparency:reduce){
  .card,.partner,.logos li,.qual,.tuev,.chips li,.acc--faq,.more,.nav,.footer,.btn--ghost,.hero__controls{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* Mobiles Menü: Glas, aber gut lesbar */
@media (max-width:860px){
  .nav__menu{background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(250,248,255,.94))}
}
@media (max-width:860px){
  .nav__menu{background:#fdfcff;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (max-width:860px){
  .nav__menu .nav__cta{background:none;box-shadow:none;color:var(--accent)}
}

/* =====================================================================
   ÜBERARBEITUNG 4 – lebendiger: Vollbild-Willkommen, Meilenstein-Galerie,
   Partnerschafts-Slider, mehr Text
   ===================================================================== */

/* Willkommen: Bilder über den ganzen Bildschirm, Text in einem Glasfeld */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;padding:0;overflow:hidden}
.hero__stage{position:absolute;inset:0;width:auto;margin:0;aspect-ratio:auto;max-height:none;border-radius:0;box-shadow:none;animation:none;transform:none!important;background:#d9d4ea}
.hero__stage::after{border-radius:0;box-shadow:none;background:linear-gradient(90deg,rgba(20,10,50,.28) 0%,rgba(20,10,50,0) 55%),linear-gradient(180deg,rgba(20,10,50,.18) 0%,rgba(20,10,50,0) 20%,rgba(20,10,50,0) 75%,rgba(20,10,50,.25) 100%)}
.hero__slide img{transform:scale(1.12);transition:transform 10s linear}
.hero__slide.is-active img{transform:scale(1)}
.hero__slide figcaption{left:auto;right:28px;bottom:auto;top:88px}
.hero__panel{position:absolute;z-index:4;left:max(24px,calc((100vw - var(--wrap)) / 2 + 24px));bottom:clamp(70px,11vh,120px);width:min(640px,calc(100vw - 48px));
  padding:34px 38px 36px;border-radius:30px;
  background:linear-gradient(160deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.55) 100%);
  -webkit-backdrop-filter:saturate(180%) blur(26px);backdrop-filter:saturate(180%) blur(26px);
  border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 30px 80px -30px rgba(20,10,60,.55);
  animation:rise 1.2s .2s var(--ease-out) both}
.hero__panel h1{font-size:clamp(2.4rem,4.6vw,4rem);line-height:1.04;margin-bottom:16px}
.hero__panel .hero__lead{margin:0 0 24px;max-width:none;text-align:left;font-size:clamp(1.02rem,1.35vw,1.18rem);color:#3c3c43;min-height:3.1em;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.hero__panel .hero__lead.is-swap{opacity:0;transform:translateY(8px)}
.hero__panel .hero__actions{justify-content:flex-start}
.hero__controls{right:max(24px,calc((100vw - var(--wrap)) / 2 + 24px));bottom:clamp(70px,11vh,120px)}

/* Fließtext-Lead */
.lead{font-size:clamp(1.15rem,1.7vw,1.35rem);color:var(--ink);line-height:1.5}

/* Über uns: Text + Bild mit sanfter Parallaxe */
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,80px);align-items:center}
.about__text h2{margin-bottom:22px}
.about__text p:not(.eyebrow):not(.lead){color:var(--ink-2);font-size:1.08rem}
.about__media{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;
  box-shadow:0 2px 4px rgba(40,25,90,.06),0 30px 70px -30px rgba(40,25,90,.45);position:relative}
.about__media img{width:100%;height:118%;object-fit:cover;transform:translateY(var(--py,0px))}
.about__media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 1px 0 rgba(255,255,255,.7);pointer-events:none}

/* Meilensteine: Galerie, die beim Scrollen seitlich vorbeizieht */
.ms{position:relative}
.ms__sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:60px}
.ms__head{width:100%;margin-bottom:clamp(24px,4vh,44px)}
.ms__head .sec-head__lead{max-width:640px;margin-top:12px}
.ms__track{display:flex;gap:22px;padding:10px max(24px,calc((100vw - var(--wrap)) / 2 + 24px)) 30px;transform:translate3d(var(--tx,0px),0,0);will-change:transform}
.ms__card{flex:0 0 min(400px,78vw);position:relative;border-radius:var(--radius);padding:30px 30px 32px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.46) 100%);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 var(--glass-rim),var(--shadow-deep);
  transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.ms__card:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 var(--glass-rim),var(--shadow-float)}
.ms__card--img{padding-top:0}
.ms__card--img img{display:block;width:calc(100% + 60px);margin:0 -30px 22px;aspect-ratio:16/9;object-fit:cover}
.ms__year{display:block;font-family:var(--serif);font-size:clamp(3rem,5vw,4.2rem);line-height:1;margin-bottom:14px;
  background:linear-gradient(120deg,#b6a3ff 0%,#6c47ea 60%,#4a2bc4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ms__card h3{font-size:1.15rem;margin-bottom:8px}
.ms__card p{color:var(--ink-2);margin:0}
.ms__badge{display:inline-block;margin-top:18px;padding:6px 12px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:.88rem}
.ms__card--now{background:linear-gradient(160deg,rgba(236,229,255,.9) 0%,rgba(255,255,255,.55) 100%)}
.ms__card--now .btn{margin-top:20px}
.ms__progress{width:100%;height:3px;margin-top:6px;position:relative}
.ms__progress::before{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:3px;background:rgba(108,71,234,.12)}
.ms__progress span{position:absolute;left:24px;top:0;height:3px;border-radius:3px;width:calc((100% - 48px) * var(--p,0));background:linear-gradient(90deg,#b6a3ff,#6c47ea)}

/* Partnerschaften: große, wechselnde Aussagen */
.quotes-sec{padding:clamp(80px,10vw,130px) 0}
.quotes{display:grid;margin:10px auto 0;max-width:900px}
.quote{grid-area:1/1;margin:0;opacity:0;transform:translateY(14px) scale(.985);filter:blur(4px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out),filter .9s var(--ease-out);pointer-events:none}
.quote.is-active{opacity:1;transform:none;filter:none;pointer-events:auto}
.quote p{font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.22;letter-spacing:-.015em;margin:0 0 22px}
.quote p::before{content:"„";color:var(--accent)}
.quote p::after{content:"“";color:var(--accent)}
.quote footer{color:var(--ink-2);font-size:.98rem}
.quotes__dots{display:flex;gap:8px;justify-content:center;margin-top:30px}
.quotes__dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(29,29,31,.2);cursor:pointer;transition:width .4s var(--ease),background .4s}
.quotes__dots button.is-active{width:28px;background:var(--accent)}

/* Glas-Paneele für Orchester & Prométhée */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:60px 0}
.glass-panel{border-radius:var(--radius);padding:34px 34px 30px;
  background:linear-gradient(160deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.45) 100%);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 var(--glass-rim),var(--shadow-deep)}
.glass-panel--feature{background:linear-gradient(160deg,rgba(235,228,255,.85) 0%,rgba(255,255,255,.5) 100%)}
.glass-panel .h3-lg{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,2.4vw,2.1rem);letter-spacing:-.015em;margin-bottom:14px}
.glass-panel p{color:#3c3c43}
.orchestras{padding-bottom:0}
.projects-wrap .h3-lg{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,2.4vw,2.1rem);margin-bottom:14px}
.projects li{transition:padding .3s var(--ease),color .3s}
.projects li:hover{padding-left:8px;color:var(--accent)}

/* Navigation mit 7 Punkten */
.nav__menu{gap:24px}

@media (max-width:1080px){.nav__menu{gap:16px}.nav__menu a{font-size:.8rem}}
@media (max-width:860px){
  .hero{min-height:560px}
  .hero__panel{left:12px;right:12px;width:auto;bottom:84px;padding:24px 22px 24px;border-radius:24px}
  .hero__panel h1{font-size:2.15rem}
  .hero__panel .hero__lead{min-height:4.6em;font-size:1rem}
  .hero__controls{right:50%;transform:translateX(50%);bottom:24px}
  .hero__slide figcaption{display:none}
  .about{grid-template-columns:1fr}
  .about__media{aspect-ratio:4/3}
  .split{grid-template-columns:1fr}
  .nav__menu a{font-size:1.4rem}
  /* Meilensteine mobil: wischen statt Scroll-Kopplung */
  .ms__sticky{position:static;height:auto;padding:80px 0 60px}
  .ms__track{overflow-x:auto;scroll-snap-type:x mandatory;transform:none;scrollbar-width:none;padding-bottom:20px}
  .ms__track::-webkit-scrollbar{display:none}
  .ms__card{scroll-snap-align:center}
  .ms__progress{display:none}
}
@media (prefers-reduced-motion:reduce){
  .quote{transition:none;filter:none}
  .about__media img{transform:none;height:100%}
  .ms__sticky{position:static;height:auto;padding:80px 0}
  .ms__track{overflow-x:auto;transform:none}
}

/* Leistungskacheln: Bild als Hintergrund, Text auf einer Glasleiste (wie auf der bisherigen Seite) */
.card--tile{min-height:clamp(320px,34vw,420px);justify-content:flex-end;color:#fff;background:#2a2340;border-color:rgba(255,255,255,.35)}
.card--tile img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;z-index:0;transition:transform 1.4s var(--ease-out)}
.card--tile:hover img{transform:scale(1.07)}
.card--tile::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(15,8,35,0) 35%,rgba(15,8,35,.55) 100%)}
.card--tile .card__body{position:relative;z-index:2;margin:14px;padding:18px 20px 20px;border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.10) 100%);
  -webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);
  border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.card--tile h3{font-family:var(--serif);font-weight:500;font-size:1.6rem;letter-spacing:-.01em;color:#fff}
.card--tile .card__body p{color:rgba(255,255,255,.9);margin-top:6px;font-size:.98rem}
.card--tile::after{z-index:3}
@media (max-width:600px){.card--tile{min-height:380px}}

/* Meilensteine auf niedrigen Bildschirmen (z. B. Laptops mit 768 px Höhe) kompakter */
@media (min-width:861px) and (max-height:900px){
  .ms__sticky{padding-top:70px}
  .ms__head{margin-bottom:16px}
  .ms__head h2{font-size:clamp(2rem,3.6vw,2.8rem)}
  .ms__head .sec-head__lead{font-size:1rem;margin-top:6px}
  .ms__card{padding:22px 24px 24px;flex-basis:min(380px,78vw)}
  .ms__card--img{padding-top:0}
  .ms__card--img img{width:calc(100% + 48px);margin:0 -24px 14px;aspect-ratio:21/9}
  .ms__year{font-size:2.6rem;margin-bottom:8px}
  .ms__card p{font-size:.95rem;line-height:1.5}
}
@media (min-width:861px) and (max-height:740px){
  .ms__head .sec-head__lead{display:none}
  .ms__card--img img{aspect-ratio:3/1}
  .ms__card p{font-size:.9rem}
}

/* =====================================================================
   FEEDBACK-RUNDE 5
   ===================================================================== */

/* Navigation: höher, größeres Logo */
.nav{height:68px;border-radius:24px;top:14px}
.nav__inner{padding:0 12px 0 26px}
.nav__logo img{height:30px}
.nav__menu a{font-size:.92rem;padding:.42em .85em;border-radius:99px;transition:background-color .3s,color .3s,opacity .3s}
.nav__menu{gap:4px}
/* Reiter färben sich ein, wenn man im jeweiligen Bereich ist */
.nav__menu a.is-active{color:var(--accent);opacity:1;background:rgba(108,71,234,.12);box-shadow:inset 0 0 0 1px rgba(108,71,234,.18)}
.nav__menu a:hover{background:rgba(108,71,234,.07)}
.nav__menu .nav__cta{margin-left:8px;padding:.5em 1.15em}
.nav__menu .nav__cta.is-active{color:#fff;background:linear-gradient(180deg,#8565f5,#6c47ea 60%,#5d39dc)}
.nav.is-hidden{transform:translate(-50%,-150%)}
.legal-hero{padding-top:160px}
@media (max-width:1080px){.nav__menu a{font-size:.82rem;padding:.4em .6em}}
@media (max-width:860px){
  .nav{height:60px;top:8px}
  .nav__logo img{height:24px}
  .nav__menu{top:68px;gap:0}
  .nav__menu a{padding:11px 0;border-radius:0;background:none!important;box-shadow:none!important}
  .nav__menu a.is-active{color:var(--accent)}
}

/* Willkommen: Glasfeld breiter und durchsichtiger */
.hero__panel{width:min(820px,calc(100vw - 48px));padding:38px 44px 40px;
  background:linear-gradient(160deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.26) 100%);
  -webkit-backdrop-filter:saturate(190%) blur(28px);backdrop-filter:saturate(190%) blur(28px);
  border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 30px 80px -30px rgba(20,10,60,.5)}
.hero__panel h1{font-size:clamp(2.6rem,5.2vw,4.6rem);text-shadow:0 1px 18px rgba(255,255,255,.35)}
.hero__panel .hero__lead{color:#1d1d1f;font-size:clamp(1.05rem,1.4vw,1.25rem);max-width:680px}
.hero__panel .eyebrow{color:#4b2fd0}
.hero__slide figcaption{top:100px}

/* Große Stimmungsbilder zwischen den Textbereichen (Bildbänder) */
.band{position:relative;height:clamp(420px,82vh,900px);overflow:hidden;display:flex;align-items:flex-end}
.band__img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;transform:translate3d(0,var(--by,0px),0) scale(1.02);will-change:transform}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(251,250,247,.55) 0%,rgba(251,250,247,0) 14%,rgba(251,250,247,0) 70%,rgba(20,10,50,.28) 100%)}
.band__glass{position:relative;z-index:2;margin:0 0 clamp(36px,7vh,80px) max(24px,calc((100vw - var(--wrap)) / 2 + 24px));max-width:min(680px,calc(100vw - 48px));
  padding:26px 32px 28px;border-radius:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.24) 100%);
  -webkit-backdrop-filter:saturate(190%) blur(24px);backdrop-filter:saturate(190%) blur(24px);
  border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 24px 60px -28px rgba(20,10,60,.5)}
.band__glass .eyebrow{color:#4b2fd0;margin-bottom:8px}
.band__text{font-family:var(--serif);font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.18;letter-spacing:-.015em;color:#1d1d1f;margin:0}
.band--right .band__glass{margin-left:auto;margin-right:max(24px,calc((100vw - var(--wrap)) / 2 + 24px))}

/* Klassik: öffnet sich bis zum vollen Bildschirm, mit mehr Text */
.zoom{height:190vh}
.zoom__frame{width:calc(78vw + var(--zp,0) * 22vw);height:calc(66vh + var(--zp,0) * 34vh);border-radius:calc(var(--radius) * (1 - var(--zp,0)));max-width:none}
.zoom__frame::after{border-radius:inherit}
.zoom__text{inset:auto 0 14vh 0;padding:0 24px}
.zoom__lead{max-width:720px;margin:18px auto 0;color:#fff;font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.5;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.zoom__frame img{filter:brightness(calc(1 - var(--zt,0) * .25))}
@media (max-width:860px){.zoom__frame{width:calc(88vw + var(--zp,0) * 12vw);height:calc(56vh + var(--zp,0) * 44vh)}}
@media (prefers-reduced-motion:reduce){.zoom__frame{width:100vw;height:80vh;border-radius:0}}

/* Weniger Leerraum: Abschnitte dichter, Meilensteine starten oben */
.section{padding:clamp(70px,9vw,120px) 0}
.ms__sticky{justify-content:flex-start;padding-top:clamp(100px,13vh,130px)}
#erfahrung{padding-bottom:clamp(60px,7vw,90px)}

/* Jahreszahlen & Kennzahlen: klar und kraftvoll statt dünner Serifenschrift */
.ms__year,.stat__num{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;font-weight:700;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.ms__year{font-size:clamp(3.2rem,5.4vw,4.6rem);background:linear-gradient(135deg,#a48bff 0%,#6c47ea 45%,#3d22b0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__num{font-size:clamp(2.4rem,4.4vw,3.6rem);background:linear-gradient(135deg,#a48bff 0%,#6c47ea 50%,#3d22b0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (min-width:861px) and (max-height:900px){.ms__year{font-size:2.9rem}}

/* =====================================================================
   FEEDBACK-RUNDE 6
   ===================================================================== */

/* Logo immer sichtbar und größer; beim Runterscrollen wird die Leiste zur kleinen Glasleiste
   mit Logo + aktuellem Bereich („Dynamic Island“-Prinzip) */
.nav{height:76px;transition:width .6s var(--ease-out),height .4s var(--ease-out),transform .45s var(--ease),border-color .3s}
.nav__logo img{height:38px;transition:height .4s var(--ease-out)}
.nav__inner{gap:18px}
.nav__where{flex:1;font-size:.9rem;font-weight:600;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s var(--ease-out)}
.nav__where.has-text::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px;box-shadow:0 0 0 4px rgba(108,71,234,.15)}
.nav__menu{transition:opacity .35s,visibility .35s}
.nav.is-compact{width:min(460px,calc(100% - 24px));height:64px;cursor:pointer}
.nav.is-compact .nav__logo img{height:32px}
.nav.is-compact .nav__menu{opacity:0;visibility:hidden;pointer-events:none;position:absolute;right:12px}
.nav.is-compact .nav__where.has-text{opacity:1;transform:none}
.nav.is-compact::after{content:"Menü ▾";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:.8rem;color:var(--ink-2)}
.nav.is-hidden{transform:translateX(-50%)}
@media (max-width:860px){
  .nav{height:64px}
  .nav__logo img{height:30px}
  .nav__where{opacity:1;transform:none;font-size:.82rem}
  .nav__where:not(.has-text){visibility:hidden}
  .nav__menu{top:72px}
}

/* Glasfelder über Bildern: deutlich transparenter */
.hero__panel{background:linear-gradient(160deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,.14) 100%);-webkit-backdrop-filter:saturate(200%) blur(30px);backdrop-filter:saturate(200%) blur(30px);border-color:rgba(255,255,255,.5)}
.hero__panel h1,.hero__panel .hero__lead{text-shadow:0 1px 14px rgba(255,255,255,.45)}
.band__glass{background:linear-gradient(160deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.12) 100%);-webkit-backdrop-filter:saturate(200%) blur(26px);backdrop-filter:saturate(200%) blur(26px);border-color:rgba(255,255,255,.5)}
.band__text{text-shadow:0 1px 14px rgba(255,255,255,.5)}
.card--tile .card__body{background:linear-gradient(160deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 100%);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px)}
.card--tile .card__body h3,.card--tile .card__body p{text-shadow:0 1px 10px rgba(0,0,0,.35)}

/* Gleiche Höhen links/rechts */
.about{align-items:stretch}
.about__media{aspect-ratio:auto;min-height:520px;height:100%}
.about__media img{height:115%}
.split{align-items:stretch}
.split > *{height:100%}

/* So arbeiten wir: 5 Schritte als Glaskarten mit Verbindungslinie */
.how{background:rgba(243,240,234,.45)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:4%;right:4%;top:46px;height:2px;background:linear-gradient(90deg,rgba(108,71,234,0),rgba(108,71,234,.35),rgba(108,71,234,0))}
.step{position:relative;border-radius:24px;padding:26px 22px 26px;
  background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.44));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 var(--glass-rim),var(--shadow-deep);transition:transform .5s var(--ease-out)}
.step:hover{transform:translateY(-6px)}
.step__num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;margin-bottom:18px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;font-weight:700;font-size:1rem;color:#fff;
  background:linear-gradient(135deg,#a48bff,#6c47ea 55%,#4a2bc4);box-shadow:0 8px 18px -8px rgba(108,71,234,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.step h3{font-size:1.08rem;margin-bottom:8px}
.step p{color:var(--ink-2);font-size:.96rem;margin:0}
@media (max-width:1080px){.steps{grid-template-columns:repeat(3,1fr)}.steps::before{display:none}}
@media (max-width:600px){.steps{grid-template-columns:1fr}}

/* Referenzen: Festival-Kacheln mit Foto, Logo und Text auf Glas */
.fest{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.fest__tile{position:relative;min-height:clamp(340px,32vw,440px);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 2px 4px rgba(40,25,90,.06),0 30px 60px -30px rgba(40,25,90,.45);border:1px solid rgba(255,255,255,.4)}
.fest__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.fest__tile:hover .fest__img{transform:scale(1.06)}
.fest__tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,8,35,.05) 0%,rgba(15,8,35,0) 40%,rgba(15,8,35,.5) 100%);pointer-events:none}
.fest__logo{position:relative;z-index:2;align-self:flex-start;margin:16px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 6px 18px -8px rgba(0,0,0,.35)}
.fest__logo img{height:46px;width:auto;mix-blend-mode:multiply}
.fest__body{position:relative;z-index:2;margin:14px;padding:18px 22px 20px;border-radius:20px;color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);border:1px solid rgba(255,255,255,.3)}
.fest__since{font-size:.82rem;font-weight:600;color:#e3dbff;margin:0 0 4px}
.fest__body h3{font-family:var(--serif);font-weight:500;font-size:1.55rem;margin-bottom:6px;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.fest__body p:last-child{margin:0;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.logos{margin-top:18px}
.projects{columns:2;column-gap:40px}
.projects li{break-inside:avoid}
@media (max-width:860px){.fest{grid-template-columns:1fr}.projects{columns:1}}

/* FAQ: klar abgegrenzt, zweispaltig */
.faq-sec{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 -30px 60px -40px rgba(40,25,90,.18)}
.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,80px);align-items:start}
.faq__head{position:sticky;top:120px}
.faq__head .sec-head__lead{margin:16px 0 26px}
.faq .acc--faq{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--line);box-shadow:0 20px 50px -30px rgba(40,25,90,.25)}
@media (max-width:860px){.faq{grid-template-columns:1fr}.faq__head{position:static}}

/* Footer: groß, in SeMa-Violett, mit weißem Logo */
.footer--big{background:radial-gradient(ellipse 70% 120% at 85% 0%,#8f73ff 0%,rgba(143,115,255,0) 60%),linear-gradient(135deg,#2a1873 0%,#4a2bc4 55%,#6c47ea 100%);color:rgba(255,255,255,.82);padding:clamp(70px,9vw,110px) 0 0;border-top:0;font-size:.95rem;-webkit-backdrop-filter:none;backdrop-filter:none}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer__logo{height:58px;width:auto;opacity:1;margin-bottom:18px}
.footer__claim{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:#fff;margin:0 0 12px}
.footer__brand p:last-child{max-width:380px;color:rgba(255,255,255,.75)}
.footer__col{display:flex;flex-direction:column;gap:10px}
.footer__col h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.6);margin-bottom:6px}
.footer--big a{color:#fff;opacity:.88;width:max-content}
.footer--big a:hover{opacity:1}
.footer__col p{margin:0;color:rgba(255,255,255,.7)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:60px;padding:24px 24px 30px;border-top:1px solid rgba(255,255,255,.18);font-size:.85rem}
.footer__bottom p{margin:0;width:auto;color:rgba(255,255,255,.65)}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}}
@media (max-width:480px){.footer__grid{grid-template-columns:1fr}}

/* =====================================================================
   FEEDBACK-RUNDE 7
   ===================================================================== */
:root{--wrap:1320px;--wrap-wide:1480px}
.wrap--wide{max-width:var(--wrap-wide)}

/* --- Freistehendes Logo --- */
.brand{position:fixed;z-index:101;top:20px;left:max(22px,calc((100vw - var(--wrap-wide)) / 2 + 24px));display:block;transition:transform .5s var(--ease-out)}
.brand img{height:54px;width:auto;transition:height .5s var(--ease-out);
  filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 2px 14px rgba(255,255,255,.75))}
.brand.is-small img{height:40px}
.brand:hover{transform:scale(1.03)}

/* --- Glas-Kapsel für das Menü (rechts, schwebend) --- */
.pill{position:fixed;z-index:100;top:20px;right:max(16px,calc((100vw - var(--wrap-wide)) / 2 + 24px));
  display:flex;align-items:center;gap:2px;height:54px;padding:6px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.34));
  -webkit-backdrop-filter:saturate(190%) blur(22px);backdrop-filter:saturate(190%) blur(22px);
  border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 30px -12px rgba(40,25,90,.35);
  transition:padding .4s var(--ease-out),box-shadow .4s}
.pill__links{display:flex;align-items:center;gap:2px;max-width:980px;overflow:hidden;white-space:nowrap;transition:max-width .6s var(--ease-out),opacity .35s}
.pill__links a{color:var(--ink);font-size:.9rem;font-weight:500;padding:.62em 1em;border-radius:999px;transition:background-color .25s,color .25s}
.pill__links a:hover{background:rgba(108,71,234,.09);text-decoration:none}
.pill__links a.is-active{color:var(--accent);background:rgba(255,255,255,.85);box-shadow:0 2px 8px -2px rgba(40,25,90,.25),inset 0 0 0 1px rgba(108,71,234,.18)}
.pill__links .pill__cta{color:#fff;margin-left:4px;background:linear-gradient(180deg,#8565f5,#6c47ea 60%,#5d39dc);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 12px -4px rgba(108,71,234,.6)}
.pill__links .pill__cta:hover,.pill__links .pill__cta.is-active{color:#fff;background:linear-gradient(180deg,#9275fa,#7350f0 60%,#6240e2)}
.pill__where{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font-size:.9rem;font-weight:600;color:var(--accent);
  display:flex;align-items:center;gap:9px;transition:max-width .6s var(--ease-out),opacity .35s,padding .4s;padding:0}
.pill__where::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(108,71,234,.16)}
.pill__more{display:none;border:0;cursor:pointer;font:inherit;font-size:.85rem;font-weight:500;color:var(--ink);padding:.6em 1.05em;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:0 2px 8px -3px rgba(40,25,90,.3)}
.pill__toggle{display:none;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.75);position:relative;cursor:pointer}
.pill__toggle span:not(.sr){position:absolute;left:12px;right:12px;height:1.6px;background:var(--ink);transition:transform .35s var(--ease)}
.pill__toggle span:nth-child(1){top:16px}.pill__toggle span:nth-child(2){top:24px}
.pill__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.pill__toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
/* kompakt beim Runterscrollen: nur Bereich + „Menü“ */
.pill.is-compact{cursor:pointer}
.pill.is-compact .pill__links{max-width:0;opacity:0}
.pill.is-compact .pill__where.has-text{max-width:280px;opacity:1;padding:0 6px 0 14px}
.pill.is-compact .pill__more{display:inline-block}

@media (max-width:1180px){.pill__links a{padding:.6em .7em;font-size:.84rem}}
@media (max-width:980px){
  .brand img{height:42px}.brand.is-small img{height:34px}
  .pill{height:52px}
  .pill__where{max-width:220px;opacity:1;padding:0 8px 0 12px}
  .pill__where:not(.has-text){max-width:0;padding:0}
  .pill__toggle{display:block}
  .pill__more{display:none!important}
  .pill__links{position:fixed;top:84px;right:12px;left:12px;max-width:none;flex-direction:column;align-items:stretch;gap:2px;padding:10px;border-radius:26px;
    background:#fdfcff;border:1px solid rgba(108,71,234,.12);box-shadow:0 30px 60px -20px rgba(40,25,90,.4);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .4s var(--ease),visibility .3s}
  .pill__links.is-open{opacity:1;visibility:visible;transform:none}
  .pill__links a{font-size:1.15rem;padding:.8em 1em}
  .pill__links .pill__cta{margin:6px 0 0;text-align:center}
  .pill.is-compact .pill__links{max-width:none}
}

/* --- Glas über Bildern: noch transparenter --- */
.hero__panel{background:linear-gradient(160deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.06) 100%);border-color:rgba(255,255,255,.42);-webkit-backdrop-filter:saturate(210%) blur(32px);backdrop-filter:saturate(210%) blur(32px)}
.band__glass{background:linear-gradient(160deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 100%);border-color:rgba(255,255,255,.42)}
.card--tile .card__body{background:linear-gradient(160deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 100%);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-color:rgba(255,255,255,.28)}
.fest__body{background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02));border-color:rgba(255,255,255,.26)}

/* --- Leistungen: Kopf zweispaltig, „Außerdem“ ohne fremde Box --- */
.sec-head--split{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:end}
.sec-head--split .sec-head__lead{margin:0}
.also{margin-top:42px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.also h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;letter-spacing:-.01em;max-width:180px;line-height:1.2}
.also__list{display:flex;flex-wrap:wrap;gap:10px 22px;padding-top:6px}
.also__list li{position:relative;padding-left:18px;font-size:1.02rem;color:#2c2c30}
.also__list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#a48bff,#6c47ea)}
@media (max-width:860px){.sec-head--split,.also{grid-template-columns:1fr}.also{gap:14px}}

/* --- Meilensteine: kein Leerraum mehr darunter (Höhe = Inhalt + Scrollweg) --- */
.ms__sticky{height:auto;top:96px;padding-top:0;padding-bottom:20px;overflow:visible}
.ms{overflow:clip}
.ms__head{margin-bottom:22px}

/* --- Partnerschaften: Zitate etwas kompakter --- */
.quotes-sec{padding:clamp(60px,8vw,100px) 0}

/* --- Referenzen: breiter und kompakter --- */
.fest{grid-template-columns:repeat(4,1fr);gap:16px}
.fest__tile{min-height:clamp(360px,30vw,460px)}
.fest__body{margin:10px;padding:16px 18px 18px}
.fest__body h3{font-size:1.3rem}
.fest__body p:last-child{font-size:.92rem}
.logos{grid-template-columns:repeat(7,1fr)}
.split--3{grid-template-columns:1fr 1fr 1.1fr;margin:40px 0 0;gap:16px}
.split--3 .orchestras{columns:1}
.split--3 .projects{columns:1}
.split--3 .projects li{padding:9px 0;font-size:.95rem;gap:16px}
@media (max-width:1180px){.fest{grid-template-columns:repeat(2,1fr)}.split--3{grid-template-columns:1fr 1fr}.split--3 > :last-child{grid-column:1/-1}.split--3 .projects{columns:2}}
@media (max-width:860px){.logos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.fest,.split--3{grid-template-columns:1fr}.split--3 .projects{columns:1}}

/* --- Team & Qualifikation: zweispaltig, ansprechender --- */
.team__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,70px);align-items:center}
.team__intro h2{margin-bottom:18px}
.team__intro .lead{margin-bottom:12px}
.tuev-badge{display:inline-flex;flex-direction:column;gap:10px;margin-top:22px;padding:16px;border-radius:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.8),rgba(255,255,255,.5));border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 #fff,var(--shadow-deep);transition:transform .4s var(--ease-out)}
.tuev-badge:hover{transform:translateY(-4px);text-decoration:none}
.tuev-badge img{width:300px;height:auto;border-radius:6px}
.tuev-badge span{font-size:.85rem;color:var(--accent);font-weight:500}
.quals2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.q2{display:flex;gap:16px;align-items:flex-start;padding:22px 22px 22px 20px;border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(255,255,255,.5));-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 #fff,var(--shadow-deep);transition:transform .45s var(--ease-out),box-shadow .45s}
.q2:hover{transform:translateY(-5px);box-shadow:inset 0 1px 0 #fff,var(--shadow-float)}
.q2__badge{flex:0 0 auto;display:grid;place-items:center;min-width:52px;height:52px;padding:0 8px;border-radius:16px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;font-weight:700;font-size:.92rem;letter-spacing:-.01em;color:#fff;
  background:linear-gradient(135deg,#a48bff 0%,#6c47ea 55%,#4a2bc4 100%);box-shadow:0 10px 20px -10px rgba(108,71,234,.8),inset 0 1px 0 rgba(255,255,255,.45)}
.q2 h3{font-size:1.04rem;line-height:1.25;margin-bottom:6px}
.q2 p{margin:0;color:var(--ink-2);font-size:.93rem;line-height:1.5}
.q2--team{background:linear-gradient(160deg,rgba(236,229,255,.92),rgba(255,255,255,.55))}
@media (max-width:1080px){.team__grid{grid-template-columns:1fr}}
@media (max-width:600px){.quals2{grid-template-columns:1fr}.tuev-badge img{width:100%}}

/* --- Footer flacher --- */
.footer--big{padding:clamp(44px,5vw,64px) 0 0}
.footer__grid{gap:28px;align-items:start}
.footer__logo{height:42px;margin-bottom:10px}
.footer__claim{font-size:1.25rem;margin-bottom:6px}
.footer__brand p:last-child{font-size:.9rem;margin:0}
.footer__col{gap:6px}
.footer__col h3{margin-bottom:2px}
.footer__bottom{margin-top:34px;padding:16px 24px 20px}

/* Rechtsseiten: Abstand für freistehendes Logo */
.legal-hero{padding-top:150px}
/* Rechtsseiten: Kapsel bleibt auch mobil sichtbar */
@media (max-width:980px){
  .pill__links--static{position:static;flex-direction:row;padding:0;background:none;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none}
  .pill__links--static a{font-size:.78rem;padding:.55em .7em}
}
@media (max-width:520px){.pill--legal .pill__links a:first-child{display:none}.brand img{height:34px}}
/* Handy-Menü: unter der Kapsel in voller Breite aufklappen */
@media (max-width:980px){
  .pill__links:not(.pill__links--static){position:absolute;top:calc(100% + 10px);right:0;left:auto;width:calc(100vw - 32px)}
}

/* =====================================================================
   RUNDE 8
   ===================================================================== */

/* Logo: 1,5× größer, in einer transparenten Glasbox – mit Schimmer */
.brand{top:16px;padding:10px 18px;border-radius:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,.12));
  -webkit-backdrop-filter:saturate(190%) blur(18px);backdrop-filter:saturate(190%) blur(18px);
  border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 30px -14px rgba(40,25,90,.35);
  transition:padding .5s var(--ease-out),transform .5s var(--ease-out),border-radius .5s}
.brand img{height:80px}
.brand.is-small{padding:8px 14px;border-radius:22px}
.brand.is-small img{height:52px}
.pill{top:28px}
@media (max-width:980px){.brand{padding:7px 12px;border-radius:20px}.brand img{height:50px}.brand.is-small img{height:40px}.pill{top:18px}}
@media (max-width:520px){.brand img{height:40px}.brand.is-small img{height:34px}}
.legal-hero{padding-top:170px}

/* Breiter auf großen Displays: weniger Rand */
.wrap--wide{max-width:min(1800px,94vw);padding:0}
@media (max-width:860px){.wrap--wide{max-width:none;padding:0 20px}}

/* Team: linke Spalte endet bündig mit den Karten rechts */
.team__grid{align-items:stretch}
.team__intro{display:flex;flex-direction:column}
.badges{margin-top:auto;display:flex;gap:14px;align-items:stretch;flex-wrap:wrap;padding-top:24px}
.badges__item{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:14px 16px;border-radius:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(255,255,255,.55));border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,var(--shadow-deep);transition:transform .4s var(--ease-out)}
a.badges__item:hover{transform:translateY(-4px);text-decoration:none}
.badges__item--tuev img{width:260px;height:auto;border-radius:6px}
.badges__item--tuev span{font-size:.85rem;color:var(--accent);font-weight:500}
.badges__item--dpvt img{width:118px;height:auto}
.tuev-badge{display:none}

/* Leistungskacheln: Knopf „Beispiele ansehen“ */
.tile__more{margin-top:14px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit;font-size:.9rem;font-weight:600;color:#fff;
  padding:.55em 1.05em;border-radius:999px;border:1px solid rgba(255,255,255,.55);
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.12));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);transition:background-color .3s,transform .3s var(--ease)}
.tile__more:hover{transform:translateX(3px);background:rgba(255,255,255,.35)}
.tile__more:focus-visible{outline:3px solid #fff}

body.lb-open{overflow:hidden}

/* Footer: schmaler */
.footer--big{padding:32px 0 0}
.footer__grid{gap:20px 28px}
.footer__logo{height:34px;margin-bottom:6px}
.footer__claim{font-size:1.1rem;margin-bottom:4px}
.footer__brand p:last-child{font-size:.85rem}
.footer__col{gap:4px;font-size:.9rem}
.footer__bottom{margin-top:22px;padding:12px 24px 14px;font-size:.8rem}

/* =====================================================================
   RUNDE 9 – Logo und Menü als ein System
   Oben: Logo frei und groß mit Schimmer, vertikal mittig zur Menü-Kapsel.
   Beim Scrollen: Logo-Kapsel exakt gleich hoch und gleich gestaltet wie die Menü-Kapsel.
   ===================================================================== */
:root{--bar-top:26px;--bar-h:58px}
.pill{top:var(--bar-top);height:var(--bar-h);padding:6px}
.brand{top:calc(var(--bar-top) + var(--bar-h) / 2);transform:translateY(-50%);height:auto;padding:0;border:1px solid transparent;border-radius:999px;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  display:flex;align-items:center;transition:padding .5s var(--ease-out),background-color .5s,box-shadow .5s,border-color .5s,height .5s var(--ease-out)}
.brand img{height:84px;filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 10px rgba(255,255,255,.85)) drop-shadow(0 3px 22px rgba(255,255,255,.55));transition:height .5s var(--ease-out),filter .5s}
.brand:hover{transform:translateY(-50%) scale(1.03)}
/* Kapsel-Zustand = identisch mit dem Menü */
.brand.is-small{height:var(--bar-h);padding:0 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.34));
  -webkit-backdrop-filter:saturate(190%) blur(22px);backdrop-filter:saturate(190%) blur(22px);
  border-color:rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 30px -12px rgba(40,25,90,.35)}
.brand.is-small img{height:34px;filter:none}
@media (max-width:980px){
  :root{--bar-top:14px;--bar-h:52px}
  .brand img{height:58px}
  .brand.is-small{padding:0 16px}
  .brand.is-small img{height:28px}
}
@media (max-width:520px){.brand img{height:46px}.brand.is-small img{height:26px}}
/* Rechtsseiten: immer Kapsel-Zustand */
.pill--legal ~ main .legal-hero{padding-top:150px}

/* ============ Runde 10 ============ */
/* Startbilder: neues Bild blendet ÜBER dem alten ein – kein Doppelbild beim Wechsel */
.hero__slide{opacity:0;z-index:1;clip-path:inset(0 0 0 100%);transition:opacity 0s linear 1.3s,clip-path 0s linear 1.3s}
.hero__slide.is-active{opacity:1;z-index:2;clip-path:inset(0 0 0 0);transition:clip-path 1.3s cubic-bezier(.75,0,.2,1)}
@media (prefers-reduced-motion:reduce){.hero__slide,.hero__slide.is-active{clip-path:none;transition:none}}
/* Glasbox: Text immer lesbar, auch auf dunklen Bildern */
.hero__panel{background:linear-gradient(160deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.30) 100%);
  -webkit-backdrop-filter:saturate(190%) blur(36px);backdrop-filter:saturate(190%) blur(36px);border-color:rgba(255,255,255,.6)}
.hero__panel .hero__lead{color:#1d1d1f;font-weight:500}
.hero__panel h1,.hero__panel .hero__lead{text-shadow:0 1px 12px rgba(255,255,255,.55)}
@media (prefers-reduced-transparency:reduce){.hero__panel{background:rgba(255,255,255,.92)}}

/* ============ Galerie-Bühne ============ */
.gx{position:fixed;inset:0;z-index:300;display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:#fff;background:#0f0a1a;
  opacity:0;transition:opacity .45s var(--ease);--sw:min(56vw,calc((100svh - 300px) * 1.5),1100px)}
.gx[hidden]{display:none}
.gx.is-open{opacity:1}
.gx__bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.gx__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,rgba(18,12,31,.15),rgba(18,12,31,.75))}
.gx__bgimg{position:absolute;inset:-12%;width:124%;height:124%;object-fit:cover;filter:blur(70px) saturate(160%) brightness(.6);opacity:0;transition:opacity 1.1s var(--ease)}
.gx__bgimg.is-on{opacity:1}
.gx__bar,.gx__track,.gx__grid,.gx__foot,.gx__nav{position:relative;z-index:1}
.gx__bar{display:flex;align-items:center;gap:14px;padding:18px max(20px,3vw) 10px}
.gx__head{display:flex;align-items:baseline;gap:14px;min-width:0;margin-right:auto}
.gx__title{margin:0;font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,2rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx__count{color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums;font-size:.95rem}
.gx__switch{display:flex;padding:4px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.gx__switch button{border:0;background:none;color:rgba(255,255,255,.8);font:inherit;font-size:.9rem;font-weight:600;padding:8px 16px;border-radius:99px;cursor:pointer;transition:background-color .3s,color .3s}
.gx__switch button[aria-pressed="true"]{background:rgba(255,255,255,.92);color:#1d1d1f;box-shadow:0 4px 14px -6px rgba(0,0,0,.5)}
.gx__btn{width:46px;height:46px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.14);color:#fff;font-size:1.05rem;cursor:pointer;
  display:grid;place-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);transition:background-color .3s,transform .3s var(--ease)}
.gx__btn:hover{background:rgba(255,255,255,.26);transform:scale(1.05)}
.gx button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.i-play{width:0;height:0;border-left:12px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.gx.is-playing .i-play{width:12px;height:14px;border:0;margin:0;border-left:4px solid currentColor;border-right:4px solid currentColor}
.gx[data-mode="all"] .gx__play,.gx[data-mode="all"] .gx__nav,.gx[data-mode="all"] .gx__foot,.gx[data-mode="all"] .gx__track{display:none}
.gx[data-mode="stage"] .gx__grid{display:none}

/* Bühne: Cover-Flow-Karussell. Positionen setzt site.js, die Perspektive liegt auf der festen Bühne. */
.gx__track{position:relative;overflow:hidden;perspective:1500px;perspective-origin:50% 45%;outline:0;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.gx.is-dragging .gx__track{cursor:grabbing}
.gx.is-open .gx__track{animation:gxRise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes gxRise{from{opacity:0;transform:translateY(46px) scale(.96)}to{opacity:1;transform:none}}
.gx__slide{--a:0;position:absolute;left:50%;top:46%;width:var(--sw);margin:calc(var(--sw) / -3) 0 0 calc(var(--sw) / -2);
  transform-style:preserve-3d;will-change:transform;cursor:pointer}
.gx__slide.is-current{cursor:inherit}
.gx__frame{position:relative;aspect-ratio:3/2;border-radius:clamp(14px,1.6vw,24px);overflow:hidden;background:#222;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.14);
  -webkit-box-reflect:below 4px linear-gradient(transparent 64%,rgba(255,255,255,.2))}
.gx__frame::before{content:"";position:absolute;inset:0;z-index:1;background:#000;opacity:calc(var(--a) * .42);pointer-events:none}
.gx__frame::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,0) 34%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.gx__frame img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.gx__foot{padding:8px 20px 26px;text-align:center}
.gx__cap{margin:0 auto 14px;max-width:820px;min-height:1.5em;font-size:clamp(.98rem,1.3vw,1.12rem);color:rgba(255,255,255,.92)}
.gx__dots{display:flex;justify-content:center;gap:7px}
.gx__dots span{position:relative;width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.35);overflow:hidden;transition:width .4s var(--ease),background-color .4s}
.gx__dots span.is-active{width:30px;background:rgba(255,255,255,.9)}
.gx.is-playing .gx__dots span.is-active{background:rgba(255,255,255,.35)}
.gx.is-playing .gx__dots.is-tick span.is-active::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:gxTick var(--play,4200ms) linear both}
@keyframes gxTick{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.gx__nav{position:absolute;top:50%;width:58px;height:58px;margin-top:-29px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08));color:#fff;font-size:2rem;line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 30px -12px rgba(0,0,0,.6);transition:transform .3s var(--ease),background-color .3s}
.gx__nav:hover{transform:scale(1.08);background:rgba(255,255,255,.3)}
.gx__prev{left:max(14px,2vw)}.gx__next{right:max(14px,2vw)}

/* Alle Bilder: gleich große Kacheln, erscheinen nacheinander */
.gx__grid{overflow-y:auto;padding:10px max(20px,3vw) 40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,42vw),1fr));gap:clamp(10px,1.4vw,20px);align-content:start}
.gx__tile{--i:0;position:relative;display:block;padding:0;border:0;aspect-ratio:3/2;border-radius:18px;overflow:hidden;cursor:zoom-in;background:rgba(255,255,255,.06);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12);animation:gxIn .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 45ms);transition:transform .45s var(--ease),box-shadow .45s}
@keyframes gxIn{from{opacity:0;transform:translateY(28px) scale(.94)}to{opacity:1;transform:none}}
.gx__tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gx__tile span{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 11px;font-size:.86rem;line-height:1.3;text-align:left;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,0));opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s var(--ease)}
.gx__tile:hover{transform:translateY(-4px);box-shadow:0 30px 60px -24px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.3)}
.gx__tile:hover img{transform:scale(1.06)}
.gx__tile:hover span,.gx__tile:focus-visible span{opacity:1;transform:none}
.gx__tile.is-current{box-shadow:0 0 0 3px #fff,0 20px 50px -24px rgba(0,0,0,.7)}
@media (hover:none){.gx__tile span{opacity:1;transform:none}}

@media (max-width:700px){
  .gx{--sw:min(70vw,calc((100svh - 330px) * .8))}
  .gx__frame{aspect-ratio:4/5}
  .gx__slide{margin-top:calc(var(--sw) * -.625)}
  .gx__grid{grid-template-columns:1fr 1fr;padding:6px 12px 30px}
  .gx__tile{aspect-ratio:1/1;border-radius:14px}
  .gx__bar{flex-wrap:wrap;gap:10px;padding:14px 14px 6px}
  .gx__head{flex:1 1 100%;order:-1}
  .gx__switch{margin-right:auto}
  .gx__switch button{padding:7px 12px;font-size:.85rem}
  .gx__nav{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gx,.gx__track,.gx__tile,.gx__frame img,.gx__bgimg{animation:none!important;transition:none!important}
}

/* ============ Runde 11 ============ */
.hero__slide figcaption{display:none}
@media (min-width:861px){.hero__panel{left:clamp(24px,4vw,72px)}}

/* ============ Runde 12 ============ */
/* Gemeinsame Außenkante: Logo links und Menü rechts schließen bündig mit den breiten Inhalten ab */
:root{--edge:max(16px,calc((100vw - min(1800px,94vw)) / 2))}
@media (min-width:861px){
  .brand{left:var(--edge)}
  .pill{right:var(--edge)}
  .hero__controls{right:var(--edge)}
  .hero__panel{left:max(24px,calc(var(--edge) + 4vw));bottom:clamp(36px,6vh,72px)}
  .hero__controls{bottom:clamp(36px,6vh,72px)}
}

/* Griffige Glas-Symbole (Zahlen „So arbeiten wir“ und Qualifikationen) – wie App-Symbole */
.step__num,.q2__badge{position:relative;isolation:isolate;display:inline-grid;place-items:center;width:58px;height:58px;min-width:0;padding:0;border-radius:18px;
  font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:800;font-size:1.32rem;letter-spacing:-.02em;color:#fff;
  text-shadow:0 1px 1px rgba(30,10,110,.45),0 0 12px rgba(255,255,255,.25);
  background:
    radial-gradient(120% 90% at 28% 12%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 46%),
    linear-gradient(160deg,#b7a2ff 0%,#7d5cf0 38%,#5a35e0 70%,#3d1fb0 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.75),
    inset 0 -3px 6px rgba(30,10,110,.38),
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 2px 3px -1px rgba(40,25,90,.35),
    0 16px 26px -12px rgba(108,71,234,.75);
  transition:transform .6s cubic-bezier(.34,1.56,.64,1),box-shadow .5s var(--ease)}
.step__num::before,.q2__badge::before{content:"";position:absolute;z-index:-1;left:7%;right:7%;top:5%;height:46%;border-radius:14px 14px 50% 50% / 14px 14px 22px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.06));pointer-events:none}
.step__num::after,.q2__badge::after{content:"";position:absolute;z-index:-2;inset:-1px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from 210deg,rgba(255,255,255,.0),rgba(255,255,255,.55),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,.35),rgba(255,255,255,0));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.q2__badge svg{filter:drop-shadow(0 1px 1px rgba(30,10,110,.5))}
.step:hover .step__num,.q2:hover .q2__badge{transform:translateY(-3px) rotate(-6deg) scale(1.06);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8),inset 0 -3px 6px rgba(30,10,110,.38),inset 0 0 0 1px rgba(255,255,255,.25),0 3px 4px -1px rgba(40,25,90,.3),0 22px 30px -12px rgba(108,71,234,.85)}
.q2--team .q2__badge{background:radial-gradient(120% 90% at 28% 12%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 46%),linear-gradient(160deg,#ffb38a 0%,#f0708a 40%,#b046c9 75%,#6c47ea 100%)}
/* große, plastische Ziffer im Hintergrund jeder Schritt-Karte */
.step{position:relative;overflow:hidden}
.step::after{content:attr(data-n);position:absolute;right:14px;top:-10px;z-index:0;pointer-events:none;
  font-family:ui-rounded,"SF Pro Rounded",-apple-system,sans-serif;font-weight:900;font-size:6rem;line-height:1;letter-spacing:-.04em;
  color:transparent;background:linear-gradient(180deg,rgba(108,71,234,.16),rgba(108,71,234,0) 85%);-webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:1px rgba(108,71,234,.14);transition:transform .8s var(--ease)}
.step:hover::after{transform:translate(-6px,4px)}
.step > *{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.step__num,.q2__badge,.step::after{transition:none}.step:hover .step__num,.q2:hover .q2__badge{transform:none}}

/* ============ Runde 13 ============ */
/* Logo, Menü, Glasbox und Bildsteuerung: nah am Rand, mit gleichem seitlichen Luftraum */
:root{--edge:clamp(18px,2.2vw,56px)}
@media (min-width:861px){.hero__panel{left:var(--edge)}}
/* Glasbox etwas weiter vom linken Rand */
@media (min-width:861px){.hero__panel{left:calc(var(--edge) + clamp(24px,3.5vw,72px))}}
/* ============ Runde 14: Footer ============ */
/* alle Spalten mit gleichem Zeilenabstand, Überschriften auf einer Linie */
.footer .footer__col,.footer nav.footer__col{gap:0}
.footer__col h3{margin:0 0 10px;line-height:1.4;font-size:.78rem}
.footer--big .footer__col a,.footer--big .footer__col p{display:block;margin:0;padding:5px 0;min-height:0;height:auto;line-height:1.45;font-size:.95rem;color:#fff}
.footer--big .footer__col p{opacity:.7}
.footer__brand .footer__logo{display:block;margin:0 0 10px}
.footer__brand p{margin:0 0 6px;line-height:1.55}
/* kräftiger Übergang vom Inhalt zum Footer */
.footer--big{position:relative;z-index:1;box-shadow:0 -24px 60px -18px rgba(42,24,115,.55),0 -2px 0 rgba(255,255,255,.35) inset}
.footer--big::before{content:"";position:absolute;left:0;right:0;top:-70px;height:70px;pointer-events:none;
  background:linear-gradient(180deg,rgba(42,24,115,0),rgba(42,24,115,.16))}

/* ============ Runde 15: Handy ============ */
@media (max-width:860px){
  /* Logo und Menü verschwinden beim Herunterscrollen nach oben, kommen beim Hochscrollen zurück */
  .brand,.pill{transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
  body.nav-up .brand,body.nav-up .pill{transform:translateY(-180%);opacity:0;pointer-events:none}
  /* Erste Glasbox kompakter */
  .hero__panel{left:14px;right:14px;bottom:76px;padding:20px 20px 20px;border-radius:24px}
  .hero__panel .eyebrow{font-size:.78rem;margin-bottom:8px}
  .hero__panel h1{font-size:clamp(1.85rem,8.4vw,2.3rem);margin-bottom:10px}
  .hero__panel .hero__lead{font-size:.95rem;line-height:1.45;min-height:4.4em;margin-bottom:16px}
  .hero__panel .hero__actions{flex-wrap:nowrap;gap:8px}
  .hero__panel .btn{padding:11px 16px;font-size:.92rem;white-space:nowrap}
  /* Meilensteine: beim Herunterscrollen laufen die Karten seitlich durch, nach der letzten geht es weiter nach unten */
  .ms__sticky{position:sticky;top:10px;height:auto;padding:16px 0 10px;overflow:visible}
  .ms__head{margin-bottom:10px}
  .ms__head .sec-head__lead{display:none}
  .ms__track{overflow:visible;scroll-snap-type:none;transform:translate3d(var(--tx,0px),0,0);padding:8px 20px 16px;gap:14px}
  .ms__card{flex:0 0 78vw;width:78vw;max-height:none}
  .ms__card img{aspect-ratio:16/9;height:auto;object-fit:cover}
  .ms__card p{font-size:.9rem;line-height:1.45}
  /* Zertifikate nebeneinander, gleich hoch */
  .badges{display:grid;grid-template-columns:1.7fr 1fr;gap:10px;flex-wrap:nowrap}
  .badges__item{padding:10px;border-radius:18px;justify-content:center}
  .badges__item--tuev img{width:100%}
  .badges__item--tuev span{font-size:.75rem}
  .badges__item--dpvt img{width:100%;max-width:120px;margin:0 auto}
  /* Ballett-Bild: Tänzerin bleibt sichtbar */
  .band--ballett .band__img{object-position:18% 40%}
  /* Kunden-Logos: ruhiges Raster, gleich große Logo-Flächen, letzte einzelne Kachel über volle Breite */
  .logos{grid-template-columns:repeat(2,1fr);gap:10px}
  .logos li{min-height:0;padding:16px 10px 14px;justify-content:flex-start}
  .logos img{height:44px;width:100%;max-width:150px;object-fit:contain}
  .logos li:last-child:nth-child(odd){grid-column:1/-1}
  .logos span{font-size:.78rem}
}
@media (max-width:860px){
  .hero__panel .hero__actions{flex-wrap:wrap}
  .band--ballett{align-items:flex-start}
  .band--ballett .band__glass{margin-top:90px}
  .band--ballett .band__img{object-position:22% 45%}
}
@media (max-width:860px){.hero__panel .btn--ghost{display:none}.hero__panel h1{font-size:clamp(1.75rem,7.8vw,2.1rem)}}
/* ============ Runde 16 ============ */
/* „Außerdem“: sauberes Raster statt fließender Zeilen – Punkte immer in einer Flucht */
.also__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px 28px}
@media (max-width:860px){
  .also__list{grid-template-columns:1fr;gap:10px}
  /* Erste Glasbox: etwa halb so groß – nur Kernaussage und ein Knopf */
  .hero__panel{padding:16px 18px 18px;bottom:78px;border-radius:22px}
  .hero__panel .eyebrow{font-size:.72rem;margin-bottom:6px}
  .hero__panel h1{font-size:clamp(1.5rem,6.6vw,1.8rem);line-height:1.08;margin-bottom:12px}
  .hero__panel .hero__lead{display:none}
  .hero__panel .btn{padding:9px 16px;font-size:.88rem}
}

/* ============ Runde 17: aus den neuen Standards (danae-doerken.com) ============ */
/* Nichts ragt über den Rand */
html,body{overflow-x:clip}
.card,.card__body,.q2,.ms__card,.fest__tile,.glass-panel,.logos li,.footer__col,.sec-head > *{min-width:0}
h1,h2,h3,.card p,.ms__card p,.logos span{overflow-wrap:anywhere}
img,video,iframe{max-width:100%}
/* Überschriften leicht statt schwer: Serif 400 in warmem Dunkelgrau */
:root{--head:#46413B}
h1,h2{font-weight:400;color:var(--head);line-height:1.1}
h2{font-size:clamp(30px,3.3vw,46px)}
.hero__panel h1{font-weight:400;color:var(--head)}
.contact__title{font-size:clamp(34px,4.4vw,60px)}
.zoom__text h2{color:#fff;font-size:clamp(3.4rem,10vw,8rem)}
.sec-head--split{align-items:end}
.sec-head--split h2{margin:0}
.footer h2,.footer h3{color:inherit}
@media (max-width:980px){
  /* Menü-Knopf ohne Wort: geschlossen nur der runde Glasknopf */
  .pill:not(.menu-open) .pill__where{display:none}
}
@media (max-width:860px){
  /* Logo nur ganz oben: nach dem ersten Scrollen verschwindet es ganz, nur der Menü-Knopf bleibt */
  body.logo-off .brand{opacity:0;visibility:hidden;transform:translateY(-120%);pointer-events:none}
  .pill__links a{white-space:normal;overflow-wrap:anywhere}
  .pill__links{max-height:calc(100svh - 110px);overflow-y:auto}
}