:root{
  /* extracted from liftcreative.de - Avada palette slots */
  --ink:#0e0e15;          /* deepest ground (homepage) */
  --surface:#1e1f2e;      /* awb-color4 */
  --surface-2:#282a3c;    /* derived step */
  --line:#343751;         /* derived hairline */
  --paper:#f7f8fc;        /* awb-color2 */
  --white:#ffffff;        /* awb-color1 */
  --aqua:#8355f4;         /* purple - primary fill (white text on it) */
  --aqua-soft:#7845ee;    /* darker on hover - a lighter purple fails white text */
  --purple:#8355f4;       /* awb-color3 - links */
  --lavender:#dab4ff;     /* awb-color6 */
  --lavender-soft:#f3e8ff;/* awb-color8 */
  --blue:#639af9;         /* homepage accent */
  --dim:#a7abc4;          /* derived body grey on dark */
  --dim-2:#8b91b0;        /* derived muted on dark */
  --ink-dim:#5a5f78;
  --line-i:#6a7094;   /* 1.4.11: borders that identify an interactive component need 3:1 */      /* derived muted on light */
  --disp:Mulish,"Segoe UI",Arial,sans-serif;
  --ui:Inter,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--white);font:400 17px/1.65 var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--lavender)}
:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}  /* aqua on #f7f8fc is 1.2:1 - invisible */
.w{max-width:1120px;margin-inline:auto;padding-inline:clamp(18px,4.5vw,48px)}

/* ============ PAGE NAV ============ */
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:15px}
.logo img{height:24px;width:auto;display:block}
.logo em{font-style:normal;font:600 10.5px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2);padding-left:15px;border-left:1px solid var(--line)}
/* Herkunft am rechten Rand der Kopfzeile. Bleibt auch am Telefon stehen –
   anders als das Label neben dem Schriftzug, das dort weicht. */
.head-ort{font:500 12.5px var(--ui);letter-spacing:.02em;color:var(--dim-2);white-space:nowrap}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;text-decoration:none;
  font:600 15px var(--ui);letter-spacing:.005em;padding:14px 24px;border-radius:99px;
  /* Verlauf wie die Buttons auf liftcreative.de: 96 Grad, awb-color6 ->
     awb-color3 (Lavendel -> Markenviolett). Die Beschriftung steht dunkel
     darauf, wie dort auch – auf dem hellen Verlauf traegt weisse Schrift
     nicht. */
  background:linear-gradient(96deg,var(--lavender),var(--purple));color:var(--ink);
}
.btn:hover{background:linear-gradient(96deg,var(--lavender-soft),#9068f6)}
.btn.sm{padding:10px 18px;font-size:14px}
.btn.ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px var(--line-i)}
.btn.ghost:hover{background:rgba(255,255,255,.06);color:var(--white)}
.btn.purple{background:var(--purple);color:#fff}
.btn.purple:hover{background:#9169f6}
.btn.dark{background:var(--ink);color:var(--white)}
.btn.dark:hover{background:var(--surface)}

/* ============ SECTIONS ============ */
.sec{padding:clamp(56px,9vh,104px) 0}
.sec.deep{background:var(--surface)}
.sec h2{font-size:clamp(38px,6.2vw,54px);max-width:16ch;letter-spacing:-.035em;line-height:1.02}
.sec .lead{font-size:clamp(17px,1.9vw,20px);line-height:1.55;color:var(--dim);max-width:58ch;margin-top:18px}
.sec-top{margin-bottom:38px}

/* ============ HERO ============ */
.hero{padding:clamp(52px,10vh,110px) 0 clamp(44px,7vh,76px);position:relative;overflow:hidden}
.hero .glow{position:absolute;inset:auto auto 0 50%;translate:-50% 42%;width:min(1000px,120vw);height:520px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(99,154,249,.28),rgba(131,85,244,.14) 55%,transparent);pointer-events:none;filter:blur(8px)}
.hero > *{position:relative}
/* full width: the headline owns its own grid row, so the old 14ch cap
   (which kept it inside the left column) is gone. */
/* padding-bottom + the matching negative margin cost no layout: they only
   stretch the box that the colour-sweep gradient is painted into. Without it
   the tight line-height (.94) lets descenders like the g in "Förderung" fall
   outside the background box, and background-clip:text simply does not paint
   them — the tail looks chopped off. */
.hero h1{font-size:clamp(46px,9vw,76px);line-height:.94;letter-spacing:-.04em;max-width:none;
  margin:0 0 -.16em;padding-bottom:.16em}
/* Hervorgehobene Wörter im Titel tragen denselben Verlauf wie die Buttons
   (96 Grad, Lavendel -> Markenviolett). Bei inline-Elementen umfasst die
   Hintergrundflaeche die Schriftmetrik, Unterlaengen werden also mitgemalt –
   anders als bei den Ueberschriften selbst, die dafuer Polsterung brauchen. */
.hero h1 span,.sec h2 .lav,.closer h2 .lav{
  background-image:linear-gradient(96deg,var(--lavender),var(--purple));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero .sub{font-size:clamp(17px,2vw,20.5px);line-height:1.5;color:var(--dim);max-width:56ch;margin-top:24px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
@media (max-width:560px){.trust div{border-right:0;border-bottom:1px solid var(--line)}
  .trust div:last-child{border-bottom:0}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px 24px 26px}
.card h3{font-size:19px;margin-bottom:10px}
.card h3.q{color:var(--lavender)}
.card p{font-size:15px;line-height:1.6;color:var(--dim)}
.chip.on{color:#fff;background:var(--aqua);border-color:var(--aqua)}
svg .panel{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:4 4}
svg .t{fill:var(--white);font:700 13.5px var(--disp)}
svg .s{fill:var(--dim-2);font:400 11px var(--ui)}
svg .a{fill:var(--dim-2);font:500 10.5px var(--ui);letter-spacing:.08em}

/* ============ FUNDING ============ */
@media (max-width:360px){.form .fsplit{grid-template-columns:1fr}}  /* 16px min: anything less makes iOS zoom on focus */

/* ============ FAQ ============ */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line-i);padding:0}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 40px 19px 0;position:relative;
  font-family:var(--disp);font-weight:700;font-size:17.5px;color:var(--white);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:16px;font:400 24px var(--ui);color:var(--lavender)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 40px 20px 0;font-size:15.5px;line-height:1.65;color:var(--dim)}

/* ============ LILA PANEL ============ */
[hidden]{display:none!important}

/* ============ MOTION ============ */
/* Die Reveal-Klassen tragen ein sul- davor, und das mit Absicht: mit der
   Einstellung "Skripte der Website laden" kann fremdes CSS auf die Kanvas
   kommen, und kurze Namen sind dort schnell doppelt vergeben. Slider
   Revolution (rs6.css) definiert z. B. Instagram-Filter, einer davon heisst
   "rise": ._1977,.aden,...,.rise,...{position:absolute} plus ein Sepia-Filter.
   Damit fiel frueher jeder Reveal-Block aus dem Fluss, die Abschnitte fielen
   ineinander und alles wirkte ausgewaschen. Also: keine Allerweltsnamen fuer
   Klassen, an denen das Layout haengt. */
@media (prefers-reduced-motion:no-preference){
  html.js .sul-rise{opacity:0;transform:translateY(18px);
    transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
  html.js .sul-rise.sul-in{opacity:1;transform:none}
  html.js .sul-stag > *{opacity:0;transform:translateY(15px)}
  html.js .sul-stag.sul-in > *{opacity:1;transform:none;
    transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
  html.js .sul-stag.sul-in > *:nth-child(1){transition-delay:.04s}
  html.js .sul-stag.sul-in > *:nth-child(2){transition-delay:.11s}
  html.js .sul-stag.sul-in > *:nth-child(3){transition-delay:.18s}
  html.js .sul-stag.sul-in > *:nth-child(4){transition-delay:.25s}
  html.js .sul-stag.sul-in > *:nth-child(5){transition-delay:.32s}
  html.js .sul-stag.sul-in > *:nth-child(6){transition-delay:.39s}

  /* diagram build-in */
  html.js .sul-anim .fx{opacity:0;transition:opacity .5s ease}
  html.js .sul-anim.sul-in .fx{opacity:1}
  html.js .sul-anim.sul-in .fx1{transition-delay:.05s}
  html.js .sul-anim.sul-in .fx2{transition-delay:.42s}
  html.js .sul-anim.sul-in .fx3{transition-delay:.68s}
  html.js .sul-anim.sul-in .fx4{transition-delay:1.02s}
  html.js .sul-anim.sul-in .fx5{transition-delay:1.26s}
  html.js .sul-anim .draw{stroke-dasharray:210;stroke-dashoffset:210;transition:stroke-dashoffset .72s cubic-bezier(.22,.61,.36,1)}
  html.js .sul-anim.sul-in .fx2 .draw{transition-delay:.46s}
  html.js .sul-anim.sul-in .fx4 .draw{transition-delay:1.06s}
  html.js .sul-anim.sul-in .draw{stroke-dashoffset:0}
  html.js .sul-anim .grow{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;
    transition:transform .74s cubic-bezier(.22,.61,.36,1)}
  html.js .sul-anim.sul-in .grow{transform:scaleX(1)}
  html.js .sul-anim.sul-in .fx1 .grow{transition-delay:.08s}
  html.js .sul-anim.sul-in .fx2 .grow{transition-delay:.2s}
  html.js .sul-anim.sul-in .fx3 .grow{transition-delay:.32s}
  html.js .sul-anim.sul-in .fx4 .grow{transition-delay:.44s}
  html.js .sul-anim.sul-in .fx5 .grow{transition-delay:.56s}

  /* micro-interaction */
  .btn,.card,.mod,.case,.fopts button,.lfp-chips button{
    transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
  .btn:hover{transform:translateY(-2px)}
  .card:hover,.mod:hover,.case:hover{transform:translateY(-3px);border-color:var(--dim-2)}
  .mod.on:hover{border-color:var(--aqua)}
  .fopts button:hover{transform:translateY(-2px)}
  .faq summary::after{transition:transform .22s ease}
  .hero .glow{animation:drift 30s ease-in-out infinite alternate}
  @keyframes drift{from{transform:translateX(-3%) scale(1)}to{transform:translateX(3%) scale(1.07)}}
  .ask .aura{animation:pulse 14s ease-in-out infinite alternate}
  @keyframes pulse{from{opacity:.75}to{opacity:1}}
}

/* ============ STICKY CTA ============ */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(18,18,28,.94);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);
  visibility:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),visibility .35s}
.stickycta.show{transform:translateY(0);visibility:visible}
/* Chat offen: der Balken raeumt die untere Kante. Lila setzt .sua-chat-open auf
   <html>; die Regel greift damit auch, bevor unser Skript das Event sieht. */
.sua-chat-open .stickycta,
.sua-chat-open .stickycta.show{transform:translateY(110%);visibility:hidden;pointer-events:none}
.stickycta .sticky-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px))}
.stickycta p{font:500 14.5px var(--ui);color:var(--dim)}
.stickycta p b{color:var(--white);font-weight:700;font-family:var(--disp)}
.stickycta .sticky-btns{display:flex;gap:10px;flex-wrap:wrap}
/* the header cannot fit wordmark + phone + CTA under ~600px (overflows ~73px at 320px,
   silently clipped by body{overflow-x:hidden}). Drop to wordmark + CTA; the phone stays
   reachable in the sticky bar, the final CTA and the footer. */
@media (max-width:600px){
  .nav{gap:12px}
  .logo em{display:none}
}
/* comfortable thumb targets on touch devices */
@media (pointer:coarse){
  .btn.sm{padding:12px 20px;min-height:44px}
  .fopts button{padding:13px 20px;min-height:44px}
  .foot-nav a{min-height:44px;display:inline-flex;align-items:center}
  .head-cta,.nav a{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:420px){.stickycta .sticky-btns .btn:first-child{font-size:13.5px;padding:11px 14px}}
@media (max-width:600px){.stickycta p{display:none}.stickycta .sticky-btns{width:100%}.stickycta .sticky-btns .btn{flex:1;justify-content:center;min-height:44px}}
.split>*,.price>*,.final>*,.fund>*,.proof>*,.cards>*,.mods>*{min-width:0}
footer{border-top:1px solid var(--line);font-size:13.5px;color:var(--dim-2)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ ERSTGESPRAECH CARD ============ */
.expect{background:var(--surface);border:1px solid rgba(218,180,255,.3);border-radius:14px;padding:24px}
.expect ul{list-style:none;margin:0;padding:0}
.expect li{position:relative;padding:0 0 15px 32px;margin-bottom:15px;border-bottom:1px solid var(--line)}
.expect li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.expect li::before{content:"\2713";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  background:rgba(131,85,244,.14);color:var(--lavender);font:600 11px var(--ui);display:grid;place-items:center}
.expect b{display:block;font:700 15.5px var(--disp);color:var(--white);margin-bottom:4px}
.expect span{display:block;font:400 14px/1.55 var(--ui);color:var(--dim)}

/* ============ SITE FOOTER ============ */
.site-foot{background:#0b0b11;border-top:1px solid var(--line);padding:34px 0 40px}
body.sticky-on .site-foot{padding-bottom:calc(40px + var(--sticky-h,101px))}
/* kein Balken, kein reservierter Platz */
.sua-chat-open body.sticky-on .site-foot{padding-bottom:40px}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-in img{height:20px;width:auto;display:block;opacity:.55}
.foot-nav{display:flex;gap:22px;flex-wrap:wrap}
.foot-nav a{color:var(--dim);text-decoration:none;font:500 14px var(--ui);display:inline-flex;align-items:center;min-height:44px}
.foot-nav a:hover{color:var(--white);text-decoration:underline}
.foot-c{font:400 13.5px var(--ui);color:var(--dim-2)}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* touch devices keep :hover applied after a tap - cards would stay "selected" */
@media (hover:none){
  /* a tap leaves :hover applied on touch, so anything that moves must be reset */
  .btn:hover,.tile:hover,.lilafab-btn:hover,.logos-track img:hover{transform:none}
  .logos-track img:hover{opacity:.72}
  .benefits>div:hover{background:var(--ink)}
  .imgslot:hover .imgslot-box{border-color:var(--line)}
  .tile summary:hover .tile-t b{color:var(--white)}
}

/* ============ BOOKING WIDGET ============ */
/* the booking card needs the wider track: calendar + slots sit side by side */
.booking{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,56px);align-items:start}
.booking>*{min-width:0}
@media (max-width:900px){.booking{grid-template-columns:1fr}}



/* ============ HERO GRID + IMAGE SLOTS ============ */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  grid-template-areas:"title title" "copy img" "cta img";
  column-gap:clamp(28px,4vw,56px);row-gap:0;align-items:center}
/* The headline spans both columns, the sub-headline sits next to the video.
   #herostack keeps wrapping both in the markup (and carries the .sul-stag reveal),
   but display:contents lifts its children into the grid so they can take
   separate areas. Safe here: the hero reveal is fired on a timer in main.js,
   not by the IntersectionObserver, which would need a box to measure. */
.hero-grid>#herostack{display:contents}
.hero-grid>#herostack>h1{grid-area:title}
.hero-grid>#herostack>.sub{grid-area:copy;align-self:start}
.hero-grid>.imgslot{grid-area:img}
/* copy column hugs the top of its rows; only the video stays optically centred
   against it, otherwise a tall video would push the text apart. */
.hero-grid>.cta-row{grid-area:cta;align-self:start}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"title" "copy" "img" "cta"}
  .hero-grid>.imgslot{margin-top:28px}
}
.imgslot{margin:0}
.imgslot-box{width:100%;border:1px dashed var(--line);border-radius:16px;background:
  linear-gradient(135deg,rgba(131,85,244,.14),rgba(99,154,249,.07));position:relative}
.imgslot--hero .imgslot-box{aspect-ratio:16/10}
.imgslot--team .imgslot-box{aspect-ratio:4/5;max-width:380px}
.imgslot-box::after{content:"";position:absolute;inset:0;border-radius:16px;
  background:radial-gradient(60% 60% at 50% 45%,rgba(131,85,244,.10),transparent)}

/* ============ HERO-VIDEO (Vimeo, klick-to-play) ============ */
/* Das Video sitzt im Bild-Slot des Heros – gleiche Grid-Area, gleiche Reihen-
   folge auf Mobile (Copy → Medium → CTA). 16/9 mit padding-bottom-Fallback
   fuer Browser ohne aspect-ratio. Vor dem Klick liegt nur das Standbild da:
   es wird nichts von vimeo.com geladen. */
.video-embed{position:relative;width:100%;height:0;padding-bottom:56.25%;
  overflow:hidden;border-radius:16px;background:var(--surface)}
@supports (aspect-ratio:16/9){.video-embed{height:auto;padding-bottom:0;aspect-ratio:16/9}}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;display:block}
/* Standbild liegt UEBER dem Player und geht erst weg, wenn Vimeo antwortet –
   so sieht niemand eine Vimeo-Fehlerseite. */
.video-poster{position:absolute;inset:0;z-index:2;border-radius:16px;overflow:hidden;
  background:var(--surface)}
.video-poster .imgslot-img,.video-poster .imgslot-box{width:100%;height:100%;aspect-ratio:auto;
  max-width:none;border-radius:16px;object-fit:cover}
/* Abdunkelung ueber dem Standbild (nur ueber einem echten Foto, nicht ueber dem
   Platzhalter – der ist schon dunkel). Play-Button und Datenschutz-Hinweis
   muessen auch auf einem sehr hellen Frame lesbar bleiben, das Bild darf dabei
   aber nicht absaufen: ~30 % am Button, nach unten staerker fuer die Hinweis-
   zeile. Gemessen gegen den Worst Case „Standbild = reines Weiss“ (abgedunkelt
   #b5b5b7, Leuchtdichte 0,46): weisses Play-Dreieck auf Lila 4,59:1 · dunkler
   Ring gegen das abgedunkelte Bild 8,2:1 · Hinweistext weiss 13,2:1. Gegen den
   Worst Case „reines Schwarz“ traegt die weisse Haarlinie des Buttons 17,1:1.
   Die mittleren Leuchtdichten dazwischen deckt die zweifarbige Kante ab
   (siehe .video-play, schlechtester Frame 4,1:1). */
.video-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:16px;
  background:linear-gradient(to top,rgba(14,14,21,.60) 0,rgba(14,14,21,.31) 30%,rgba(14,14,21,.30) 100%)}
/* ohne JS gibt es kein Video – dann bleibt das Standbild allein stehen */
.video-play,.video-note{display:none}
html.js .video-play{display:grid;place-items:center}
html.js .video-note{display:block}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:clamp(64px,8vw,78px);height:clamp(64px,8vw,78px);min-width:44px;min-height:44px;
  padding:0;border:0;border-radius:99px;cursor:pointer;background:var(--aqua);color:#fff;
  /* ZWEIFARBIGE Kante. Ein einzelner dunkler Ring traegt nur HELLE Standbilder:
     bei mittlerer Leuchtdichte (graue Bueromauer, dunkler Anzug, Fenster bei
     Wolken) erreichen weder Ring noch lila Scheibe 3:1 – die Scheibe faellt dort
     sogar auf 1,05:1, weil sie dieselbe Leuchtdichte hat wie das Bild dahinter.
     Deshalb aussen eine weisse Haarlinie. Gerechnet ueber alle Vollton-Frames
     #000–#fff, jeweils mit der Abdunkelung darueber:
       weisse Haarlinie gegen den dunklen Ring     16,2:1  (immer, bildunabhaengig)
       dunkler Ring gegen abgedunkeltes Weiss       8,2:1  (>= 3:1 ab Leuchtdichte 0,124)
       weisse Haarlinie gegen abgedunkeltes Schwarz 17,1:1 (>= 3:1 bis Leuchtdichte 0,263)
     Die beiden Bereiche ueberlappen, der schlechteste Frame ueberhaupt liegt bei
     4,1:1 – es bleibt kein Standbild uebrig, auf dem die Kante des Buttons unter
     3:1 faellt (1.4.11). Innen traegt zusaetzlich das weisse Dreieck auf Lila
     4,59:1 (1.4.3/1.4.11). */
  box-shadow:0 0 0 4px rgba(14,14,21,.92),0 0 0 6px rgba(255,255,255,.92),
    0 20px 44px -18px rgba(131,85,244,.95)}
.video-play:hover{background:var(--aqua-soft)}
/* der globale Fokusring ist aqua – auf dem lila Button unsichtbar */
.video-play:focus-visible{outline:3px solid var(--white);outline-offset:0;
  box-shadow:0 0 0 6px rgba(14,14,21,.92),0 0 0 8px rgba(255,255,255,.92),
    0 20px 44px -18px rgba(131,85,244,.95)}
.video-play svg{width:34%;height:34%;display:block;margin-left:8%}
.video-note{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;pointer-events:none;
  padding:26px 16px 12px;text-align:center;font:400 12.5px/1.45 var(--ui);color:var(--white);
  /* Kraeftiger als der Rest der Abdunkelung: der Hinweis ist kleiner Fliesstext
     und braucht 4,5:1. Der Text sitzt komplett im Bereich >= .80, zusammen mit
     dem Scrim also bei effektiv >= .86 Deckung – ueber reinem Weiss 13,2:1. */
  background:linear-gradient(to top,rgba(14,14,21,.97) 0 68%,rgba(14,14,21,.80) 86%,rgba(14,14,21,0))}
@media (max-width:600px){.video-note{font-size:12.5px;padding:22px 12px 10px}}
/* Player laedt: Button stumm schalten, Standbild bleibt bis Vimeo antwortet */
.video-embed.video-loading .video-play{opacity:.55;pointer-events:none}
.video-embed.video-ready .video-poster,
.video-embed.video-ready .video-play,
.video-embed.video-ready .video-note{opacity:0;pointer-events:none;visibility:hidden}
/* Hintergrund-Variante (Filter sul_hero_video_autoplay) startet von selbst */
html.js .video-embed.video-auto .video-play{display:none}
@media (prefers-reduced-motion:no-preference){
  .video-play{transition:transform .18s ease,background .18s ease,box-shadow .18s ease,opacity .18s ease}
  .video-play:hover{transform:translate(-50%,-50%) scale(1.07)}
  .video-poster,.video-note{transition:opacity .6s ease,visibility 0s linear .6s}
}
/* Touch: der Tap laesst :hover stehen - der Play-Button bliebe sonst vergroessert
   und dunkler zurueck. Muss NACH den Regeln oben stehen (gleiche Spezifitaet). */
@media (hover:none){
  .video-play:hover{transform:translate(-50%,-50%)}   /* nicht none: der Button ist damit zentriert */
  .video-play:hover{background:var(--aqua)}
}

/* ============ REFERENZLOGOS ============ */
.sec-logos{padding:clamp(30px,5vh,52px) 0;border-block:1px solid var(--line);background:var(--surface)}
/* padding-block leaves room for the 1.16 hover scale, otherwise the enlarged
   logo is clipped by the overflow:hidden that the marquee needs. At 108px the
   scaled logo is ~125px, i.e. 9px over on each side. */
.logos{overflow:hidden;padding-block:16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logos-track{display:flex;align-items:center;gap:clamp(18px,3vw,40px);width:max-content}
/* the source PNGs are 500x500 canvases with very uneven padding, so a fixed square
   box keeps the rhythm even though the marks inside differ in optical size */
.logos-track img{height:108px;width:108px;object-fit:contain;flex:0 0 auto;opacity:.72;display:block}
.logos:hover .logos-track img{opacity:.85}
.logos-track img:hover{opacity:1}
@media (max-width:600px){.logos-track img{height:78px;width:78px}}
@media (prefers-reduced-motion:no-preference){
  .logos-track{animation:logoscroll 60s linear infinite}
  .logos:hover .logos-track{animation-play-state:paused}
  .logos-track img{transition:opacity .28s ease,transform .28s cubic-bezier(.22,.61,.36,1)}
  .logos-track img:hover{transform:scale(1.16)}
  @keyframes logoscroll{to{transform:translateX(-50%)}}
}


/* ============ BENEFITS ============ */
.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.benefits>div{background:var(--ink);padding:clamp(22px,3vw,30px)}
.benefits h3{font-size:19px;color:var(--lavender);margin:0 0 10px}
.benefits .bi-wrap{width:46px;height:46px;border-radius:13px;background:rgba(131,85,244,.09);
  border:1px solid rgba(131,85,244,.18);display:grid;place-items:center;margin:0 0 18px}
.benefits .bi{width:23px;height:23px;color:var(--lavender);display:block}
@media (prefers-reduced-motion:no-preference){
  .benefits .bi-wrap{transition:background .25s ease,transform .25s cubic-bezier(.22,.61,.36,1)}
  .benefits>div:hover .bi-wrap{background:rgba(131,85,244,.16);transform:translateY(-2px)}
}
@media (max-width:600px){.benefits .bi-wrap{width:40px;height:40px;margin-bottom:14px}
  .benefits .bi{width:20px;height:20px}}
.benefits p{font-size:15.5px;line-height:1.6;color:var(--dim);margin:0}

/* ============ SIX TILES ============ */
/* align-items:start – sonst dehnt sich die Nachbarkachel auf die Hoehe der
   geoeffneten mit und steht halb leer daneben. Jede Kachel ist damit nur so
   hoch wie ihr eigener Inhalt. */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media (max-width:820px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--surface);border:1px solid var(--line-i);border-radius:14px;overflow:hidden}
.tile[open]{border-color:var(--aqua)}
/* Icon and plus sign are centred against the whole text block instead of being
   pinned to the first line — that is what makes the row read as one unit. */
.tile summary{display:flex;align-items:center;gap:17px;cursor:pointer;list-style:none;
  padding:24px 24px;position:relative}
.tile summary::-webkit-details-marker{display:none}
.tile-i{width:34px;height:34px;flex:0 0 auto;color:var(--lavender)}
.tile-t{flex:1;min-width:0}
.tile-t b{display:block;font:700 17.5px var(--disp);color:var(--white);letter-spacing:-.01em}
/* zwei Zeilen reserviert: die Unterzeilen sind mal ein-, mal zweizeilig, und
   ohne align-items:stretch waeren die geschlossenen Kacheln sonst ungleich hoch */
.tile-t i{display:block;font-style:normal;font:500 14.5px/1.45 var(--ui);color:var(--dim);margin-top:5px;min-height:2.9em}
.tile-t u{display:block;text-decoration:none;font:600 12.5px var(--ui);color:var(--lavender);margin-top:9px}
.tile[open] .tile-t u{display:none}
/* geoeffnet braucht die Unterzeile keine Reservezeile mehr – sonst klafft eine
   leere Zeile zwischen Unterzeile und Fliesstext */
.tile[open] .tile-t i{min-height:0}
.tile-x{flex:0 0 auto;width:22px;height:22px;position:relative}
.tile-x::before,.tile-x::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  background:var(--aqua);border-radius:2px}
.tile-x::before{width:13px;height:1.5px}
.tile-x::after{width:1.5px;height:13px}
.tile[open] .tile-x::after{opacity:0}
/* left padding lines the body text up with the title: 24 padding + 34 icon + 17 gap */
.tile p{margin:0;padding:0 24px 24px 75px;font-size:15px;line-height:1.65;color:var(--dim)}
@media (max-width:520px){.tile p{padding-left:22px}}
@media (prefers-reduced-motion:no-preference){
  .tile-x::before,.tile-x::after{transition:opacity .2s ease}
  .tile summary:hover .tile-t b{color:var(--aqua)}
}

/* ============ WER WIR SIND ============ */
.team{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,56px);align-items:center}
/* Gestapelt steht der Knopf unter dem Foto, nicht davor: erst der Text, dann
   das Bild, dann die Aufforderung. Dafuer loest sich der Textblock auf, damit
   seine Kinder eigene Rasterzeilen werden und sich sortieren lassen – dasselbe
   Mittel wie im Hero. Die Zeilenluecke faellt weg, weil Absaetze, Bild und
   Knopf ihre eigenen Abstaende mitbringen. */
@media (max-width:820px){
  .team{grid-template-columns:1fr;row-gap:0}
  .team>div{display:contents}
  .team>.imgslot--team{order:2;margin-top:30px}
  .team>div>.cta-row{order:3}
}
.team .lead{max-width:60ch}
/* the opening line stays the statement; the detail paragraphs sit a step below
   it in size so the block still has a hierarchy instead of three equal blocks */
.team-more{font-size:clamp(15.5px,1.7vw,17.5px);margin-top:16px}

/* ============ CLOSER ============ */
.closer{background:var(--ink);position:relative;overflow:hidden;border-top:1px solid var(--line);
  padding:clamp(66px,12vh,124px) 0}
.closer::before{content:"";position:absolute;top:-1px;left:50%;translate:-50% 0;width:min(420px,60%);height:1px;
  background:linear-gradient(90deg,transparent,var(--aqua),transparent)}
.closer .glow{position:absolute;inset:auto auto 0 50%;translate:-50% 46%;width:min(900px,120vw);height:460px;
  border-radius:50%;pointer-events:none;filter:blur(10px);
  background:radial-gradient(closest-side,rgba(131,85,244,.16),rgba(99,154,249,.08) 55%,transparent)}
.closer>.w{position:relative}
.closer-in{max-width:54ch;margin-inline:auto;text-align:center}
.closer h2{font-size:clamp(40px,6.6vw,58px);letter-spacing:-.035em;line-height:1.02;margin-bottom:20px}
.closer .lead{margin-inline:auto}
.closer .cta-row{justify-content:center;margin-top:32px}
@media (prefers-reduced-motion:no-preference){
  .closer .glow{animation:closerbreathe 16s ease-in-out infinite alternate}
  @keyframes closerbreathe{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}
}

/* ============ MOTION: disclosure + affordances ============ */
@media (prefers-reduced-motion:no-preference){
  .tile[open] > p,
  .faq details[open] > p{animation:disclose .3s cubic-bezier(.22,.61,.36,1) both}
  @keyframes disclose{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
  .tile{transition:border-color .2s ease,transform .2s ease,background .2s ease}
  .tile:hover{transform:translateY(-2px)}
  .tile-i{transition:transform .3s cubic-bezier(.22,.61,.36,1)}
  .tile[open] .tile-i{transform:rotate(90deg) scale(1.06)}
  .benefits>div{transition:background .25s ease}
  .benefits>div:hover{background:var(--surface)}
  .plate{transition:color .25s ease,opacity .25s ease}
  .logos:hover .plate{color:var(--dim)}
  .imgslot-box{transition:border-color .3s ease}
  .imgslot:hover .imgslot-box{border-color:var(--aqua)}
}

/* anchors land clear of the viewport edge */
section[id]{scroll-margin-top:24px}

/* ============ HEADLINE COLOUR SWEEP ON SCROLL ============ */
@media (prefers-reduced-motion:no-preference){
  html.js .sec h2,html.js .closer h2,html.js .hero h1{
    background-image:linear-gradient(100deg,var(--white) 0%,var(--white) 32%,var(--lavender) 50%,var(--white) 68%,var(--white) 100%);
    background-size:340% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    transition:background-position 1.5s cubic-bezier(.22,.61,.36,1)}
  html.js .sul-rise.sul-in h2,html.js .sul-rise.sul-in h1,
  html.js .sec-top.sul-in h2,html.js .sul-stag.sul-in h1{background-position:0 0}
  /* der hervorgehobene Teil malt seinen eigenen Verlauf statt des Sweeps */
  html.js h1 span,html.js h2 span.lav{
    background-image:linear-gradient(96deg,var(--lavender),var(--purple));
    background-size:auto;background-position:0 0;
    -webkit-text-fill-color:transparent;color:transparent;transition:none}
}

/* ============ SKIP LINK ============ */
/* Website-Skripte: Elemente der Hauptseite, die hier nichts verloren haben.
   Der alte Chat (lila-chatbot) waere ein zweiter Chat neben Lila, der Avada-
   Link erschiene ungestylt unter dem Fuss. Normalerweise kommen beide gar nicht
   erst an (SUL_Tracking), das hier ist nur die letzte Absicherung. */
#lila-root,.fusion-page-load-link{display:none!important}
/* Luft ueber der Buchungskarte, wenn der Sprung dort landet */
#su-booking{scroll-margin-top:14px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--aqua);color:#fff;min-height:44px;display:inline-flex;align-items:center;
  padding:12px 20px;border-radius:0 0 8px 0;font:600 15px var(--ui);text-decoration:none}
.skip:focus{left:0}

/* ============ IMAGE SLOTS (echte Bilder aus der Mediathek) ============ */
.imgslot-img{width:100%;height:auto;display:block;border-radius:16px;object-fit:cover}
.imgslot--hero .imgslot-img{aspect-ratio:16/10}
.imgslot--team .imgslot-img{aspect-ratio:4/5;max-width:380px}

/* ============ TEAMFOTO IN DER RUNDEN BUEHNE ============
   Freisteller auf einer Farbscheibe, darum zwei Ringe und drei Punkte, die
   langsam kreisen. Alles rein dekorativ und per CSS gezeichnet – kein
   zusätzlicher Netzwerkaufruf, nichts, was ohne JavaScript fehlt. */
/* Der Abschnitt schneidet ab, was die Bahnen ueberstehen lassen.
   Grund: eine gedrehte Quadrat-Huelle ist 1,41-mal so breit wie das Quadrat
   selbst – bei 300px Buehne also 424px. Sichtbar ist davon nichts (die Bahnen
   sind durchsichtig, die Punkte bleiben innerhalb), aber die Huelle zaehlt zur
   scrollbaren Flaeche und schiebt die Seite am Telefon seitlich weg.
   Der Zugriff ueber :has() trifft genau den Team-Abschnitt, ohne im Markup
   eine Klasse zu ergaenzen (die Abschnittsfolge ist mit der Design-Vorlage
   abgeglichen und soll gleich bleiben). */
.sec.deep:has(.imgslot--team){overflow:hidden}
.imgslot--team.teamorb{width:100%;max-width:440px;margin-inline:auto}
.teamorb-stage{position:relative;width:100%;aspect-ratio:1/1;display:grid;place-items:center;isolation:isolate}
.teamorb-ring{position:absolute;border-radius:50%;pointer-events:none}
.teamorb-ring--wide{inset:0;border:1px solid rgba(218,180,255,.16)}
.teamorb-ring--dash{inset:6.5%;border:1px dashed rgba(218,180,255,.26)}
.teamorb-disc{position:absolute;inset:11%;border-radius:50%;overflow:hidden;
  background:linear-gradient(155deg,#dab4ff 0%,#b98cf8 45%,#8355f4 100%);
  box-shadow:0 26px 70px rgba(131,85,244,.28)}
/* Der Freisteller steht auf der Grundlinie der Scheibe und wird nicht
   beschnitten; ein eigenes Foto aus der Mediathek füllt die Scheibe. */
.teamorb-disc .imgslot-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  aspect-ratio:auto;border-radius:0;object-fit:cover}
.teamorb-disc .teamorb-cutout{object-fit:contain;object-position:center bottom;padding:4% 6% 0}
/* Die Punkte hängen je an einer eigenen Kreisbahn: die Bahn dreht sich, der
   Punkt sitzt auf ihrem oberen Rand. */
.teamorb-orbit{position:absolute;border-radius:50%;pointer-events:none;display:block}
.teamorb-orbit--a{inset:1%}
.teamorb-orbit--b{inset:4%;transform:rotate(128deg)}
.teamorb-orbit--c{inset:-2%;transform:rotate(226deg)}
.teamorb-dot{position:absolute;top:0;left:50%;border-radius:50%;display:block;
  transform:translate(-50%,-50%)}
.teamorb-dot--blue{width:20px;height:20px;background:radial-gradient(circle at 32% 30%,#9ad2ff,#3c8ef0);
  box-shadow:0 0 18px rgba(80,150,240,.55)}
.teamorb-dot--tiny{width:7px;height:7px;background:#cbb6ff;box-shadow:0 0 12px rgba(203,182,255,.7)}
.teamorb-dot--big{width:44px;height:44px;background:radial-gradient(circle at 34% 30%,#c49bff,#7b40f0);
  box-shadow:0 0 34px rgba(131,85,244,.6)}
@media (prefers-reduced-motion:no-preference){
  .teamorb-ring--dash{animation:teamorb-spin 54s linear infinite}
  .teamorb-ring--wide{animation:teamorb-spin 78s linear infinite reverse}
  .teamorb-orbit--a{animation:teamorb-spin 26s linear infinite}
  .teamorb-orbit--b{animation:teamorb-spin-b 34s linear infinite}
  .teamorb-orbit--c{animation:teamorb-spin-c 44s linear infinite reverse}
}
@keyframes teamorb-spin{to{transform:rotate(360deg)}}
@keyframes teamorb-spin-b{from{transform:rotate(128deg)}to{transform:rotate(488deg)}}
@keyframes teamorb-spin-c{from{transform:rotate(226deg)}to{transform:rotate(586deg)}}
@media (max-width:900px){.imgslot--team.teamorb{max-width:360px}}
@media (max-width:600px){
  .imgslot--team.teamorb{max-width:300px}
  .teamorb-dot--big{width:34px;height:34px}
  .teamorb-dot--blue{width:16px;height:16px}
}
/* Auf sehr schmalen Geraeten (iPhone SE und aehnlich) wuerde ein Punkt sonst
   genau am Bildschirmrand stehen und vom Beschnitt angeschnitten. */
@media (max-width:340px){.imgslot--team.teamorb{max-width:262px}}

/* ============ BOOKING FALLBACK (Buchungs-Plugin nicht aktiv) ============ */
/* same card look as .bk-card, self-contained because su-booking.css is not loaded then */
.bk-fallback{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3vw,32px);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9)}
.bk-fallback .bk-title{font-size:clamp(23px,3vw,32px);color:var(--white);margin:0 0 14px;letter-spacing:-.025em}
.bk-fallback .lead{margin-top:0}
.bk-fallback .cta-row{margin-top:24px}