/* ==========================================================================
   1TakeFilms – Redesign Oktober 2026 („Neon Glass“)
   Dunkler Hintergrund mit Farbschimmer, Glas-Karten, Verlauf Pink → Violett → Blau.
   Wird ganz am Ende von index.php eingebunden und gewinnt so gegen ältere Ebenen.
   ========================================================================== */
:root{
  --tf-bg:#09090f;
  --tf-bg2:#0e0e17;
  --tf-card:rgba(255,255,255,.035);
  --tf-card2:rgba(255,255,255,.06);
  --tf-line:rgba(255,255,255,.09);
  --tf-line2:rgba(255,255,255,.16);
  --tf-txt:#f5f4fb;
  --tf-soft:#c9c6d8;
  --tf-muted:#9893ad;
  --tf-pink:#19e3c7;
  --tf-violet:#7c3aed;
  --tf-blue:#8b5cf6;
  --tf-grad:linear-gradient(120deg,#8b3dff 0%,#6a5cf5 45%,#19e3c7 100%);
  --tf-grad-soft:linear-gradient(120deg,rgba(25,227,199,.16),rgba(124,58,237,.14) 50%,rgba(139,92,246,.14));
  --tf-text-grad:linear-gradient(95deg,#ffffff 0%,#e9dcff 30%,#c4b0ff 58%,#9ff5e6 100%);
  --tf-glow:0 12px 34px -10px rgba(25,227,199,.55),0 20px 50px -18px rgba(139,92,246,.55);
  --tf-radius:22px;
  --tf-font:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* alte Variablen auf das neue Schema umbiegen */
  --bg:#09090f!important;--bg2:#09090f!important;--panel:#11111b!important;--panel2:#151520!important;
  --txt:#f5f4fb!important;--ink:#f5f4fb!important;--muted:#a29db8!important;--line:rgba(255,255,255,.09)!important;
  --soft:rgba(255,255,255,.05)!important;--card:#12121b!important;--accent:#ffffff!important;--site-black:#09090f!important;
}

/* ---------- Grundlage ---------- */
html{background:var(--tf-bg)!important;scroll-padding-top:96px}
html body{background:transparent!important;color:var(--tf-txt)!important;font-family:var(--tf-font)!important;-webkit-font-smoothing:antialiased}
html body :is(h1,h2,h3,h4,h5,p,a,li,span,button,input,textarea,select,label,small,strong,em,blockquote,figcaption,summary,div,dt,dd,td,th){font-family:var(--tf-font)!important}
html body ::selection{background:rgba(25,227,199,.45);color:#fff}
/* Farbschimmer im Hintergrund (fix, hinter allem) */
html body::before{content:"";position:fixed;inset:-20vh -20vw;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vw 32vw at 12% 8%,rgba(124,58,237,.20),transparent 70%),
    radial-gradient(34vw 30vw at 92% 22%,rgba(25,227,199,.13),transparent 70%),
    radial-gradient(40vw 34vw at 70% 78%,rgba(139,92,246,.14),transparent 70%),
    radial-gradient(30vw 28vw at 8% 82%,rgba(25,227,199,.10),transparent 70%);
  filter:saturate(1.1)}
html body .grain{opacity:.035!important}

/* Alle Bereiche durchsichtig, damit der Schimmer durchscheint */
html body :is(header.hero,section,footer,.marquee,.price-guarantee,.studio-section,.business-showcase){background:transparent!important;background-image:none!important;color:var(--tf-txt)!important}
html body section:is(#faq,#contact,#newsletter){background:transparent!important;background-image:none!important;color:var(--tf-txt)!important}
html body section{border-top:0!important}
html body :is(h1,h2,h3,h4){color:#fff!important;letter-spacing:-.035em!important}
html body :is(section,footer,.hero) p{color:var(--tf-soft)}

/* Hervorhebungen: Umriss-Schrift wird zu Verlaufs-Schrift */
html body :is(h1,h2,h3) :is(.outline,.accent){
  background:var(--tf-grad)!important;-webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;-webkit-text-fill-color:transparent!important;-webkit-text-stroke:0!important;
  font-style:normal!important;font-weight:inherit!important;font-family:var(--tf-font)!important;padding-right:.04em}

/* Kleine Überschriften als leuchtende Pille */
html body :is(.about-kicker,.studio-kicker,.bs-kicker,.abo-kicker,.tf-badge){
  display:inline-flex!important;align-items:center;gap:.55em;width:auto!important;max-width:max-content;
  padding:.5em 1.05em!important;border-radius:999px!important;border:1px solid rgba(124,58,237,.38)!important;
  background:rgba(124,58,237,.10)!important;color:#d8ccff!important;
  font-size:.72rem!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase!important;line-height:1.2!important}
html body :is(.about-kicker,.studio-kicker,.bs-kicker,.abo-kicker,.tf-badge)::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tf-grad);box-shadow:0 0 10px var(--tf-pink);flex:none}

/* ---------- Ladebildschirm ---------- */
html body #luxuryLoader{background:var(--tf-bg)!important;color:#fff!important}
html body #luxuryLoader span{font-family:var(--tf-font)!important;font-weight:800!important;background:var(--tf-text-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
html body #luxuryLoader i{background:var(--tf-grad)!important;height:2px!important;border-radius:2px}
html body #luxuryLoader small{color:var(--tf-muted)!important}
html body #scrollProgress{background:var(--tf-grad)!important;height:3px!important;box-shadow:0 0 12px rgba(25,227,199,.6)}

/* ---------- Navigation ---------- */
html body nav{background:rgba(14,14,22,.68)!important;border:1px solid var(--tf-line)!important;border-radius:22px!important;
  box-shadow:0 18px 50px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05)!important}
@media (min-width:901px){html body nav{-webkit-backdrop-filter:blur(18px) saturate(1.4)!important;backdrop-filter:blur(18px) saturate(1.4)!important}}
html body nav .navlinks a{color:#bdb9cf!important;text-transform:none!important;letter-spacing:0!important;font-weight:500!important;font-size:.9rem!important;border-radius:12px!important}
html body nav .navlinks a:hover,html body nav .navlinks a.active{color:#fff!important;background:rgba(255,255,255,.07)!important}
html body nav .navlinks a::after{display:none!important}
html body nav .nav-portal{color:#fff!important}

/* ---------- Buttons ---------- */
html body :is(.nav-cta,.btn:not(.ghost),.consult-submit,.book-submit,.abo-cta,.an-cta,.cookie-btn.primary,.cookie-accept,.tf-cta){
  position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center;gap:.7em;
  background:var(--tf-grad)!important;background-size:160% 100%!important;background-position:0 0!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;border:0!important;border-radius:999px!important;
  box-shadow:var(--tf-glow)!important;font-family:var(--tf-font)!important;font-weight:700!important;
  text-transform:none!important;letter-spacing:0!important;text-decoration:none!important;
  transition:background-position .5s ease,transform .25s ease,box-shadow .25s ease!important;overflow:visible!important}
html body :is(.nav-cta,.btn:not(.ghost),.consult-submit,.book-submit,.abo-cta,.an-cta,.cookie-btn.primary,.cookie-accept,.tf-cta):hover{
  background-position:100% 0!important;transform:translateY(-2px)!important;
  box-shadow:0 16px 40px -10px rgba(25,227,199,.7),0 24px 60px -18px rgba(139,92,246,.7)!important;color:#fff!important}
html body :is(.nav-cta,.btn:not(.ghost),.consult-submit,.book-submit,.abo-cta,.an-cta)::before{display:none!important}
/* runder Pfeil-Knopf rechts – wie im Beispiel */
html body :is(.nav-cta,.abo-cta,.an-cta,.consult-submit,.tf-cta)::after{
  content:""!important;display:inline-block!important;position:static!important;flex:none;width:1.75em;height:1.75em;margin-right:-.55em;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke=%27%237c3aed%27 stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/58% no-repeat!important;
  opacity:.95;transform:none!important;transition:transform .3s ease!important;inset:auto!important;height:1.75em!important;width:1.75em!important}
html body :is(.nav-cta,.abo-cta,.an-cta,.consult-submit,.tf-cta):hover::after{transform:translateX(3px)!important}
html body .nav-cta{padding:.62rem .85rem .62rem 1.25rem!important;font-size:.88rem!important}
html body .btn:not(.ghost){padding:.95rem 1.6rem!important}
html body .btn.ghost,html body .cookie-btn:not(.primary):not(.cookie-accept){
  background:rgba(255,255,255,.04)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border:1px solid var(--tf-line2)!important;
  border-radius:999px!important;text-transform:none!important;letter-spacing:0!important;font-weight:600!important;box-shadow:none!important;
  transition:border-color .25s ease,background .25s ease,transform .25s ease!important}
html body .btn.ghost:hover,html body .cookie-btn:not(.primary):not(.cookie-accept):hover{border-color:rgba(25,227,199,.7)!important;background:rgba(124,58,237,.14)!important;transform:translateY(-2px)!important}
html body .btn.ghost::before,html body .btn.ghost::after{display:none!important}

/* ---------- Startbereich ---------- */
html body .hero{position:relative}
html body .hero::before,html body .hero::after{display:none!important}
html body .hero .tf-badge{margin:0 0 1.6rem!important}
html body .hero h1{font-family:var(--tf-font)!important;font-weight:800!important;text-transform:none!important;letter-spacing:-.05em!important;line-height:.98!important;color:#fff!important}
html body .hero h1>span{display:block}
html body .hero h1 .accent,html body .hero h1 .geschichte-white{
  background:var(--tf-grad)!important;-webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;-webkit-text-fill-color:transparent!important;font-style:normal!important;font-weight:800!important}
html body .hero-bottom{border-top:1px solid var(--tf-line)!important}
html body .hero-bottom p{color:var(--tf-soft)!important}
html body .scrollhint{color:var(--tf-muted)!important}

/* ---------- Laufband ---------- */
html body .marquee{transform:none!important;margin:1rem 0 3rem!important;border-top:1px solid var(--tf-line)!important;border-bottom:1px solid var(--tf-line)!important;color:#fff!important;background:rgba(255,255,255,.02)!important}
html body .marquee::after{background:linear-gradient(90deg,var(--tf-bg) 0%,transparent 12%,transparent 88%,var(--tf-bg) 100%)!important}
html body .marquee span{color:#fff!important;font-family:var(--tf-font)!important;font-weight:800!important;text-transform:none!important;letter-spacing:-.03em!important}
html body .marquee em{background:var(--tf-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}

/* ---------- Karten (Leistungen, Vorteile, Schritte, Abo, Stimmen, FAQ …) ---------- */
html body :is(.svc,.bs-card,.tm,.quick-grid>*,.abo-calc,.an-in,.usecase-row,.split-feature,.branch-item,.contact-meta,.cl-logo,.price-guarantee .pg-card,.fs-steps>li){
  background:var(--tf-card)!important;background-image:none!important;border:1px solid var(--tf-line)!important;border-radius:var(--tf-radius)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;color:var(--tf-txt)!important;
  transition:border-color .3s ease,transform .3s ease,background .3s ease,box-shadow .3s ease!important}
html body :is(.svc,.bs-card,.tm,.quick-grid>*,.fs-steps>li,.branch-item):hover{
  border-color:rgba(25,227,199,.55)!important;background:rgba(124,58,237,.07)!important;transform:translateY(-4px)!important;
  box-shadow:0 24px 60px -30px rgba(124,58,237,.75),inset 0 1px 0 rgba(255,255,255,.06)!important}
html body .services{gap:14px!important;border:0!important;background:transparent!important}
html body .svc h3{color:#fff!important}
html body .svc p,html body .bs-card p,html body .tm blockquote{color:var(--tf-soft)!important}
html body .svc:hover h3{background:var(--tf-text-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}
html body .bs-num,html body .svc-num{background:var(--tf-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}
html body .bs-grid{gap:14px!important;border:0!important;background:transparent!important}
html body .tm-s i{color:#8ff0de!important}
html body .cl-logo{background:rgba(255,255,255,.92)!important}

/* Full-Service-Schritte */
html body .fs-steps{gap:12px!important}
html body .fs-steps>li{padding:1.3rem 1.4rem!important}
html body .fs-steps>li:hover *{color:#fff!important}

/* Preis / Abo / Analyse */
html body .abo-sec .abo-wrap,html body .an-sec .an-in{border-radius:28px!important}
html body .abo-calc{background:linear-gradient(160deg,rgba(25,227,199,.10),rgba(139,92,246,.08))!important;border-color:rgba(25,227,199,.35)!important}
html body .abo-price{background:var(--tf-text-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}
html body input[type=range]{accent-color:#7c3aed}
html body .an-sec .an-in{background:linear-gradient(140deg,rgba(25,227,199,.12),rgba(124,58,237,.10) 45%,rgba(139,92,246,.12))!important;border:1px solid rgba(25,227,199,.4)!important;padding:clamp(1.8rem,4vw,3.4rem)!important}

/* FAQ */
html body #faq :is(h2,h3,p,summary,span){color:inherit}
html body #faq h2{color:#fff!important}
html body #faq .quick-grid{border:0!important;gap:12px!important}
html body #faq .quick-grid>*{padding:1.4rem 1.5rem!important}
html body #faq .quick-grid>* :is(h3,strong){color:#fff!important}
html body #faq .quick-grid>* p{color:var(--tf-soft)!important}

/* Kontakt */
html body #contact h2{letter-spacing:-.05em!important}
html body #contact::before{content:"";position:absolute;inset:10% 15%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(124,58,237,.28),rgba(25,227,199,.10) 55%,transparent);filter:blur(30px);pointer-events:none}
html body .contact-meta{padding:1.2rem 1.4rem!important}
html body .contact-meta a{color:#fff!important}

/* Newsletter + Formulare */
html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select){
  background:rgba(255,255,255,.04)!important;border:1px solid var(--tf-line2)!important;border-radius:14px!important;color:#fff!important}
html body :is(input,textarea,select):focus{outline:none!important;border-color:rgba(25,227,199,.8)!important;box-shadow:0 0 0 4px rgba(124,58,237,.18)!important}
html body ::placeholder{color:#8a86a0!important}
html body :is(dialog,.consult-dialog,.consult-modal,.book-modal){background:#101019!important;border:1px solid var(--tf-line2)!important;border-radius:26px!important;color:#fff!important;box-shadow:0 40px 120px -30px rgba(124,58,237,.45)!important}
html body dialog::backdrop{background:rgba(5,5,10,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ---------- Footer ---------- */
html body footer{border-top:1px solid var(--tf-line)!important;background:rgba(255,255,255,.02)!important}
html body footer a{color:#d6d2e6!important}
html body footer a:hover{color:#fff!important}

/* ---------- Cookie-Hinweis ---------- */
html body .cookie-banner{background:rgba(16,16,26,.86)!important;-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;border:1px solid var(--tf-line2)!important;border-radius:22px!important;color:#fff!important;box-shadow:0 30px 90px -30px rgba(0,0,0,.9)!important}
html body .cookie-banner :is(p,span,strong,h3,h4){color:#e6e3f2!important}

/* ---------- Überlagerungen (Über uns, Referenzen, Marketing, KI, Impressum) ---------- */
html body :is(.about-overlay,.legal-overlay,#aiOverlay,#marketingOverlay,#workOverlay){background:var(--tf-bg)!important;background-image:
    radial-gradient(50vw 40vw at 90% 0%,rgba(124,58,237,.16),transparent 70%),
    radial-gradient(40vw 36vw at 0% 100%,rgba(25,227,199,.10),transparent 70%)!important;color:var(--tf-txt)!important}
html body :is(.about-overlay-header,.legal-header){background:rgba(9,9,15,.8)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--tf-line)!important}
html body :is(.about-close,.legal-close){border-radius:999px!important;border:1px solid var(--tf-line2)!important;background:rgba(255,255,255,.05)!important;color:#fff!important}
html body :is(.about-close,.legal-close):hover{border-color:rgba(25,227,199,.7)!important;background:rgba(124,58,237,.15)!important}
html body :is(.team-card,.work-card,.ai-feature-block>*,.ai-process>*){border-radius:var(--tf-radius)!important;border-color:var(--tf-line)!important}
html body .work-tag{background:rgba(124,58,237,.75)!important;color:#fff!important;border-radius:999px!important}
html body .work-filter button{border-radius:999px!important;border:1px solid var(--tf-line2)!important;background:rgba(255,255,255,.04)!important;color:#ddd!important}
html body .work-filter button.active{background:var(--tf-grad)!important;border-color:transparent!important;color:#fff!important}

/* ---------- Eigener Zeiger ---------- */
html body #customCursor.cursor{background:var(--tf-grad)!important;border:0!important;box-shadow:0 0 14px rgba(25,227,199,.7)!important;mix-blend-mode:normal!important}
html.cc-link body #customCursor.cursor{background:rgba(25,227,199,.18)!important;border:1px solid rgba(159,245,230,.9)!important}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  html body nav{background:rgba(14,14,22,.92)!important}
  html body .hero .tf-badge{margin-bottom:1.1rem!important;font-size:.64rem!important}
  html body :is(.svc,.bs-card,.tm,.fs-steps>li){border-radius:18px!important}
  html body .svc:hover,html body .bs-card:hover{transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  html body *{transition:none!important}
}

/* ==========================================================================
   Liquid Glass (ähnlich Apple): milchig, stark weichgezeichnet, Lichtkante oben
   ========================================================================== */
:root{
  --lg-fill:linear-gradient(155deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.04) 38%,rgba(255,255,255,.025) 62%,rgba(255,255,255,.07) 100%);
  --lg-sheen:radial-gradient(120% 60% at 15% -10%,rgba(255,255,255,.16),transparent 55%);
  --lg-blur:blur(26px) saturate(185%) brightness(1.08);
  --lg-edge:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.06),inset 1px 0 0 rgba(255,255,255,.07),inset -1px 0 0 rgba(255,255,255,.04);
  --lg-drop:0 22px 60px -28px rgba(0,0,0,.85),0 2px 10px -4px rgba(0,0,0,.4);
}
/* kräftigere Farbflächen hinter dem Glas, damit es „lebt“ */
html body::before{
  background:
    radial-gradient(34vw 30vw at 10% 10%,rgba(124,58,237,.30),transparent 70%),
    radial-gradient(30vw 28vw at 94% 18%,rgba(25,227,199,.22),transparent 70%),
    radial-gradient(38vw 32vw at 72% 80%,rgba(139,92,246,.20),transparent 70%),
    radial-gradient(28vw 26vw at 6% 86%,rgba(139,92,246,.20),transparent 70%)!important;
  animation:lgDrift 28s ease-in-out infinite alternate}
@keyframes lgDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3vw,2vh,0) scale(1.08)}}

html body :is(nav,.svc,.bs-card,.tm,.quick-grid>*,.abo-calc,.an-in,.usecase-row,.split-feature,.branch-item,.contact-meta,.fs-steps>li,.faq-item,.imp-card,.cookie-banner,.about-overlay-header,.legal-header,.btn.ghost,.cookie-btn:not(.primary):not(.cookie-accept),.work-filter button,.about-close,.legal-close,.tf-badge,.team-card,.price-guarantee .pg-card){
  background:var(--lg-sheen),var(--lg-fill)!important;
  -webkit-backdrop-filter:var(--lg-blur)!important;backdrop-filter:var(--lg-blur)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:var(--lg-edge),var(--lg-drop)!important}
html body :is(.svc,.bs-card,.tm,.quick-grid>*,.fs-steps>li,.branch-item,.faq-item,.imp-card):hover{
  background:radial-gradient(120% 70% at 20% -10%,rgba(255,255,255,.22),transparent 55%),
             linear-gradient(155deg,rgba(25,227,199,.10),rgba(124,58,237,.07) 45%,rgba(139,92,246,.09))!important;
  border-color:rgba(255,255,255,.24)!important;
  box-shadow:var(--lg-edge),0 30px 70px -30px rgba(124,58,237,.65),0 0 0 1px rgba(255,255,255,.04)!important}
/* Mobile Menü: backdrop-filter würde das ausklappende Menü einsperren -> nur ab Desktop */
@media (max-width:900px){html body nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(18,16,30,.94)!important}}
/* Akzent-Kacheln behalten ihren Farbschimmer unter dem Glas */
html body .abo-calc{background:var(--lg-sheen),linear-gradient(160deg,rgba(25,227,199,.16),rgba(139,92,246,.10))!important}
html body .an-sec .an-in{background:var(--lg-sheen),linear-gradient(140deg,rgba(25,227,199,.18),rgba(124,58,237,.12) 45%,rgba(139,92,246,.16))!important}
html body .cl-logo{background:rgba(255,255,255,.9)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* Glas-Knöpfe: Lichtkante auch auf den Verlaufs-Buttons */
html body :is(.nav-cta,.btn:not(.ghost),.consult-submit,.book-submit,.abo-cta,.an-cta,.tf-cta){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 6px rgba(0,0,0,.15),var(--tf-glow)!important}

/* ---------- FAQ (Akkordeon) ---------- */
html body #faq.faq-sec{padding:clamp(5rem,10vw,8rem) 5vw!important}
html body .faq-wrap{max-width:860px;margin:0 auto}
html body .faq-head{text-align:center;display:flex;flex-direction:column;align-items:center}
html body .faq-head .about-kicker{max-width:none}
html body .faq-head h2{font-size:clamp(2.3rem,5.2vw,4.4rem)!important;line-height:1!important;margin:1.1rem 0 1rem!important}
html body .faq-head p{color:var(--tf-soft)!important;max-width:560px;line-height:1.7;margin:0 auto 2.6rem}
html body .faq-list{display:grid;gap:12px}
html body .faq-item{border-radius:24px!important;overflow:hidden;transition:border-color .3s ease,background .3s ease,box-shadow .3s ease!important}
html body .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.35rem 1.5rem 1.35rem 1.7rem!important;font-size:clamp(1rem,1.25vw,1.12rem)!important;font-weight:700!important;color:#fff!important;letter-spacing:-.01em!important;border:0!important;background:none!important}
html body .faq-item summary::-webkit-details-marker{display:none}
html body .faq-item summary::before{display:none!important}
html body .faq-item summary::after{content:""!important;flex:none;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)!important;border:1px solid rgba(255,255,255,.14)!important;transition:transform .35s ease,background-color .35s ease!important;position:static!important;opacity:1!important}
html body .faq-item[open] summary::after{transform:rotate(45deg)!important;background-color:rgba(124,58,237,.55)!important}
html body .faq-item[open]{border-color:rgba(255,255,255,.22)!important}
html body .faq-item p{margin:0!important;padding:0 1.7rem 1.5rem!important;color:var(--tf-soft)!important;line-height:1.75!important;max-width:none!important}
html body .faq-item[open] p{animation:faqIn .35s ease both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
html body .faq-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;margin-top:2.4rem;color:var(--tf-soft)}

/* ---------- Impressum ---------- */
html body .legal-body{max-width:900px!important}
html body .legal-body h1{font-family:var(--tf-font)!important;font-weight:800!important;letter-spacing:-.04em!important;background:var(--tf-text-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important}
html body .legal-body h2{font-family:var(--tf-font)!important;text-transform:none!important;letter-spacing:-.02em!important;font-size:1.5rem!important;color:#fff!important}
html body .legal-body h3{font-family:var(--tf-font)!important;color:#fff!important}
html body .legal-body p,html body .legal-body li{color:var(--tf-soft)!important}
html body .legal-body a{color:#8ff0de!important;text-decoration:none!important;border-bottom:1px solid rgba(159,245,230,.35)}
html body .imp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:1.2rem 0 2.2rem}
html body .imp-card{border-radius:20px!important;padding:1.3rem 1.4rem!important}
html body .imp-card h3{margin:0 0 .55rem!important;font-size:.74rem!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#d8ccff!important}
html body .imp-card p{margin:0!important;line-height:1.75!important;color:#ece9f6!important}
html body .hero h1{letter-spacing:-.045em!important;word-spacing:.02em}
html body .hero h1 .tf-grad-text{padding-right:.06em}
/* FAQ: alte Zwei-Spalten-Raster-Regeln aufheben */
html body #faq.faq-sec{display:block!important;grid-template-columns:none!important;max-width:none!important;width:100%!important}
html body #faq.faq-sec>.faq-wrap{display:block!important;max-width:860px!important;margin:0 auto!important}
html body #faq.faq-sec .faq-head{position:static!important}
html body #faq.faq-sec .faq-list{display:grid!important;grid-template-columns:1fr!important}
html body #faq.faq-sec .faq-item{padding:0!important;min-height:0!important;border-top:1px solid rgba(255,255,255,.13)!important}
html body #faq.faq-sec .faq-item summary{position:relative!important;padding-right:1.5rem!important}
html body #faq.faq-sec .faq-item summary::after{float:none!important;font-size:0!important;content:""!important}
html body #faq.faq-sec .faq-item[open] summary::after{content:""!important}
html body #faq.faq-sec .faq-item p{padding:0 1.7rem 1.5rem!important;font-size:.98rem!important}
html body #faq.faq-sec .faq-head p{padding:0!important}
/* FAQ-Kopf zentriert, einspaltig */
html body #faq.faq-sec .faq-head{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;grid-template-columns:none!important;width:100%!important}
html body #faq.faq-sec .faq-head>*{max-width:640px!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important}
html body #faq.faq-sec .faq-head .about-kicker{max-width:max-content!important;width:auto!important}
html body #faq.faq-sec .faq-head h2{font-size:clamp(2.3rem,4.6vw,4rem)!important;line-height:1.02!important;width:auto!important}
html body .legal-body h1{font-size:clamp(2.2rem,5.5vw,4.2rem)!important;line-height:1.02!important;text-transform:none!important;overflow-wrap:anywhere;hyphens:manual!important;margin-bottom:.6rem!important}
html body .hero h1 .accent,html body .hero h1 .tf-grad-text{font-size:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;display:inline!important}
@media (max-width:900px){html body nav .nav-cta{display:none!important}}

/* ==========================================================================
   Mehr Farbe + moderne UI (Okt 2026)
   ========================================================================== */
:root{--tf-bg:#0d0a1c;--tf-bg2:#141029;--bg:#0d0a1c!important;--bg2:#0d0a1c!important;--site-black:#0d0a1c!important}
html{background:#0d0a1c!important}
html body::before{
  background:
    radial-gradient(42vw 36vw at 8% 6%,rgba(139,92,246,.42),transparent 70%),
    radial-gradient(36vw 32vw at 96% 14%,rgba(25,227,199,.30),transparent 70%),
    radial-gradient(46vw 38vw at 70% 74%,rgba(110,80,255,.34),transparent 70%),
    radial-gradient(34vw 30vw at 2% 88%,rgba(25,227,199,.20),transparent 70%),
    linear-gradient(180deg,#120d26 0%,#0d0a1c 40%,#110c24 100%)!important}
/* Fliesstext leicht violett getönt statt grau */
html body :is(section,footer,.hero) p{color:#cfc8ea}
html body{--tf-soft:#cfc8ea;--tf-muted:#a49cc6}
/* farbige Bereiche: jede zweite Sektion bekommt einen Farbschleier */
html body :is(#full-service,#workflow,#analyse,#stimmen){position:relative}
html body :is(#full-service,#workflow,#stimmen)::after{content:"";position:absolute;inset:6% 0;z-index:-1;pointer-events:none;
  background:linear-gradient(120deg,rgba(139,92,246,.14),rgba(25,227,199,.08) 60%,rgba(139,92,246,.10));
  -webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
/* Überschriften: kleine Farbstriche, Kicker in Farbe */
html body :is(.about-kicker,.studio-kicker,.bs-kicker,.abo-kicker,.tf-badge){border-color:rgba(25,227,199,.45)!important;background:linear-gradient(90deg,rgba(25,227,199,.16),rgba(139,92,246,.16))!important;color:#e4dbff!important}
html body .sec-head h2,html body .sec-head h2 *{background:var(--tf-text-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}
/* Laufband als Farbband */
html body div.marquee.marquee{background:var(--tf-grad)!important;border:0!important;transform:rotate(-1.2deg) scale(1.03)!important;box-shadow:0 20px 60px -20px rgba(139,92,246,.6),0 10px 40px -20px rgba(25,227,199,.6)!important}
html body .marquee span{color:#fff!important}
html body .marquee em{background:none!important;color:#0d0a1c!important;-webkit-text-fill-color:#0d0a1c!important}
html body .marquee::after{display:none!important}
/* Karten: farbige Lichtkante oben + farbiger Titel beim Hover */
html body :is(.svc,.bs-card,.tm,.fs-steps>li,.branch-item,.imp-card,.faq-item){position:relative;overflow:hidden}
html body :is(.svc,.bs-card,.tm,.fs-steps>li,.branch-item)::before{content:""!important;display:block!important;position:absolute!important;left:18px!important;right:18px!important;top:0!important;height:2px!important;width:auto!important;border-radius:2px;background:var(--tf-grad)!important;opacity:.55!important;transform:none!important;inset:0 18px auto 18px!important;z-index:4!important;transition:opacity .3s ease!important}
html body :is(.svc,.bs-card,.tm,.fs-steps>li,.branch-item):hover::before{opacity:1!important}
html body .svc h3{color:#fff!important}
html body .svc:hover h3{background:var(--tf-grad)!important;-webkit-background-clip:text!important;background-clip:text!important}
/* Farbige Icons/Nummern-Plaketten */
html body :is(.bs-num,.svc-num){display:inline-grid;place-items:center;min-width:2.4em;height:2.4em;padding:0 .5em;border-radius:12px;background:linear-gradient(135deg,rgba(25,227,199,.22),rgba(139,92,246,.26))!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:#e4dbff!important;-webkit-text-fill-color:#e4dbff!important;border:1px solid rgba(255,255,255,.14)}
/* Häkchen-Listen farbig */
html body .abo-feat li::marker,html body .an-pts li::marker{color:#19e3c7}
/* Kontakt-Bereich: grosser Farbkreis */
html body #contact::before{inset:5% 10%!important;background:radial-gradient(closest-side,rgba(139,92,246,.45),rgba(25,227,199,.18) 55%,transparent)!important}
/* Footer mit Farblinie */
html body footer{border-top:0!important;position:relative}
html body footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--tf-grad);opacity:.7}
/* Moderne Details: weichere Ecken, Fokus-Ringe, Scrollbar */
html body :is(a,button,summary):focus-visible{outline:2px solid #19e3c7!important;outline-offset:3px!important;border-radius:12px}
html{scrollbar-color:#6b4fd8 #0d0a1c}
html::-webkit-scrollbar{width:10px}html::-webkit-scrollbar-track{background:#0d0a1c}html::-webkit-scrollbar-thumb{background:linear-gradient(#19e3c7,#8b5cf6);border-radius:10px;border:2px solid #0d0a1c}
/* Überlagerungen ebenfalls farbig */
html body :is(.about-overlay,.legal-overlay,#aiOverlay,#marketingOverlay,#workOverlay){background-color:#0d0a1c!important;background-image:
    radial-gradient(50vw 40vw at 90% 0%,rgba(139,92,246,.32),transparent 70%),
    radial-gradient(40vw 36vw at 0% 100%,rgba(25,227,199,.18),transparent 70%)!important}

/* ==========================================================================
   „Rausgezoomt“ wie Exora: kleinere Schrift, kompaktere Abstände, Inhalt max. 1240px
   ========================================================================== */
html body{font-size:15px}
@media (min-width:901px){
  html body .hero{min-height:auto!important;padding:150px max(5vw,calc((100vw - 1240px)/2)) 70px!important}
  html body .hero h1{font-size:clamp(2.8rem,5.4vw,5rem)!important;line-height:1.02!important;max-width:900px}
  html body .hero-bottom{max-width:1240px;margin-top:2.4rem!important;padding-top:2rem!important}
  html body .hero-bottom p{font-size:1.05rem!important;max-width:560px!important}
  html body section{padding:clamp(4rem,7vw,6.5rem) max(5vw,calc((100vw - 1240px)/2))!important;max-width:none!important;width:100%!important}
  html body section h2{font-size:clamp(2rem,3.6vw,3.3rem)!important;line-height:1.06!important}
  html body #contact h2{font-size:clamp(2.6rem,5vw,4.6rem)!important;line-height:1!important}
  html body .sec-head h2{font-size:clamp(2.2rem,4vw,3.6rem)!important}
  html body .svc{padding:1.6rem 1.6rem 1.8rem!important}
  html body .svc h3{font-size:1.05rem!important}
  html body .svc p,html body .bs-card p{font-size:.92rem!important;line-height:1.65!important}
  html body .bs-card h3,html body .split-big,html body .usecase-lead{font-size:clamp(1.2rem,1.8vw,1.6rem)!important}
  html body nav .logo img{height:30px!important}
  html body nav{min-height:60px!important;padding-top:8px!important;padding-bottom:8px!important}
  html body .marquee span{font-size:clamp(1.3rem,2.4vw,2.2rem)!important}
  html body :is(.studio-intro,.bs-head,.sec-head){margin-bottom:clamp(2rem,4vw,3.4rem)!important}
  html body .abo-wrap,html body .an-in,html body .tm-wrap,html body .cl-head,html body .fs-in{max-width:1240px!important;margin-left:auto!important;margin-right:auto!important}
}

/* ---------- Startbereich: Handy + Glas-Kärtchen (wie moderne Agentur-Seiten) ---------- */
html body .tf-hero-visual{display:none}
@media (min-width:1101px){
  html body .hero{position:relative!important}
  html body .tf-hero-visual{display:block;position:absolute;right:max(5vw,calc((100vw - 1240px)/2));top:130px;width:min(30vw,400px);height:540px;pointer-events:none}
  html body .tf-phone{position:absolute;right:40px;top:0;width:250px;height:520px;border-radius:42px;padding:10px;
    background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 40px 90px -30px rgba(124,58,237,.75),0 20px 60px -30px rgba(25,227,199,.5);
    transform:rotate(6deg);animation:tfFloat 7s ease-in-out infinite}
  html body .tf-phone video,html body .tf-phone-ph{width:100%;height:100%;object-fit:cover;border-radius:33px;display:block;background:linear-gradient(160deg,#2a1a5e,#0d0a1c 60%,#0f3b3a)}
  html body .tf-phone-ph{display:grid;place-items:center}
  html body .tf-phone-ph span{font-weight:800;font-size:2rem;letter-spacing:-.04em;background:var(--tf-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  html body .tf-phone-notch{position:absolute;top:18px;left:50%;width:80px;height:22px;margin-left:-40px;border-radius:20px;background:#07050f;z-index:2}
  html body .tf-chip{position:absolute;display:flex;flex-direction:column;gap:.2rem;padding:.9rem 1.1rem;border-radius:18px;
    background:radial-gradient(120% 60% at 15% -10%,rgba(255,255,255,.22),transparent 55%),linear-gradient(155deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
    -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
    border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 20px 50px -20px rgba(0,0,0,.8);color:#fff}
  html body .tf-chip small{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#cbbdff}
  html body .tf-chip b{font-size:1rem;font-weight:800;letter-spacing:-.01em}
  html body .tf-chip span{font-size:.74rem;color:#8ff0de;font-weight:600}
  html body .tf-chip-a{right:-10px;top:70px;animation:tfFloat 6s ease-in-out infinite .6s}
  html body .tf-chip-b{left:0;top:250px;align-items:center;animation:tfFloat 8s ease-in-out infinite 1.2s}
  html body .tf-chip-b b{font-size:1.6rem;background:var(--tf-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  html body .tf-chip-c{right:10px;bottom:10px;flex-direction:row;align-items:center;gap:.55rem;animation:tfFloat 7s ease-in-out infinite 2s}
  html body .tf-chip-c i{width:8px;height:8px;border-radius:50%;background:#19e3c7;box-shadow:0 0 12px #19e3c7}
  html body .tf-chip-c span{color:#fff;font-size:.8rem}
  html body .hero h1,html body .hero-bottom{max-width:calc(100% - min(30vw,400px) - 2rem)!important}
}
@keyframes tfFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
/* Handy oben entfernt: Text wieder volle Breite */
html body .hero h1,html body .hero-bottom{max-width:1240px!important}
/* Behälter hinter Karten: keine dunklen Kästen */
html body :is(.fs-steps,.branch-strip,.bs-grid,.services,.quick-grid,.split-copy){background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body .price-note{background:radial-gradient(120% 60% at 15% -10%,rgba(255,255,255,.14),transparent 55%),linear-gradient(155deg,rgba(124,58,237,.16),rgba(25,227,199,.08))!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:22px!important;-webkit-backdrop-filter:blur(24px) saturate(180%)!important;backdrop-filter:blur(24px) saturate(180%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)!important}
html body .branch-strip{gap:12px!important}
html body .branch-item{border-radius:20px!important}
html body .fs-steps>li{min-width:0!important;overflow:hidden}
html body .fs-steps>li :is(b,strong,h3,h4){overflow-wrap:break-word;hyphens:auto}
/* Mobil: Erstgespräch-Knopf oben ausblenden (Menü-Symbol sichtbar) */
@media (max-width:900px){html body nav a.nav-cta.nav-cta{display:none!important}}

/* ==========================================================================
   Eigene Identität (nicht wie Exora): Archivo + Space Grotesk, Labels mit Strich, nummerierte FAQ
   ========================================================================== */
:root{--tf-font:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;--tf-head:'Archivo',system-ui,sans-serif}
html body,html body :is(p,a,li,span,button,input,textarea,select,label,small,strong,em,blockquote,figcaption,summary,div,dt,dd,td,th){font-family:var(--tf-font)!important}
html body :is(h1,h2,h3,h4,h5),html body :is(h1,h2,h3,h4) *,html body .marquee span,html body .abo-price,html body .tf-chip b,html body #luxuryLoader span{font-family:var(--tf-head)!important}
html body :is(h1,h2){font-weight:900!important;text-transform:uppercase!important;letter-spacing:-.045em!important}
html body .hero h1{font-weight:900!important;text-transform:uppercase!important;letter-spacing:-.05em!important;line-height:.92!important}
html body h3{font-weight:800!important}
html body .marquee span{font-weight:900!important;text-transform:uppercase!important;letter-spacing:-.03em!important}
html body :is(.nav-cta,.btn,.consult-submit,.book-submit,.abo-cta,.an-cta,.cookie-btn){font-family:var(--tf-font)!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.06em!important;font-size:.8rem!important}
/* Labels: keine Pille mehr, sondern Farbstrich + Grossbuchstaben */
html body :is(.about-kicker,.studio-kicker,.bs-kicker,.abo-kicker,.tf-badge){
  padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  color:#8ff0de!important;font-size:.72rem!important;letter-spacing:.24em!important;gap:.9em!important}
html body :is(.about-kicker,.studio-kicker,.bs-kicker,.abo-kicker,.tf-badge)::before{width:34px!important;height:2px!important;border-radius:2px!important;box-shadow:none!important;background:var(--tf-grad)!important}
/* FAQ nummeriert */
html body .faq-list{counter-reset:faq}
html body .faq-item{counter-increment:faq;border-radius:16px!important}
html body .faq-item summary{justify-content:flex-start!important}
html body .faq-item summary::before{content:counter(faq,decimal-leading-zero)!important;display:inline-block!important;flex:none;min-width:2.2em;font-family:var(--tf-head)!important;font-weight:900;font-size:.9rem;
  background:var(--tf-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;position:static!important;opacity:1!important}
html body .faq-item summary::after{margin-left:auto!important;border-radius:10px!important}
html body .faq-item p{padding-left:calc(1.7rem + 2.2em + 1.2rem)!important}
html body .faq-head{text-align:left!important;align-items:flex-start!important}
html body #faq.faq-sec .faq-head,html body #faq.faq-sec .faq-head>*{align-items:flex-start!important;text-align:left!important;margin-left:0!important}
/* Knöpfe: eckiger statt Pille */
html body :is(.nav-cta,.btn,.consult-submit,.book-submit,.abo-cta,.an-cta,.cookie-btn,.tf-cta){border-radius:14px!important}
html body :is(.nav-cta,.abo-cta,.an-cta,.consult-submit,.tf-cta)::after{border-radius:9px!important}

/* ---------- Referenzen auf der Startseite ---------- */
html body #home-refs{text-align:center}
html body .hr-head{display:flex;flex-direction:column;align-items:center;max-width:720px;margin:0 auto 2.6rem}
html body .hr-head h2{margin:1rem 0 .8rem!important}
html body .hr-head p{max-width:560px;line-height:1.7}
html body .hr-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;max-width:1240px;margin:0 auto}
html body .hr-card{margin:0;cursor:pointer;text-align:left}
html body .hr-media{position:relative;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#151027;
  border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 30px 60px -30px rgba(124,58,237,.7);transition:transform .35s ease,box-shadow .35s ease}
html body .hr-media video{width:100%;height:100%;object-fit:cover;display:block}
html body .hr-card:hover .hr-media{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 40px 70px -30px rgba(25,227,199,.55)}
html body .hr-play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);border:1px solid rgba(255,255,255,.35)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);transition:opacity .3s ease,transform .3s ease}
html body .hr-play svg{width:22px;height:22px;fill:#fff;margin-left:3px}
html body .hr-card.playing .hr-play{opacity:0;transform:scale(.8)}
html body .hr-card figcaption{display:flex;flex-direction:column;gap:.2rem;padding:.9rem .3rem 0}
html body .hr-card figcaption b{font-family:var(--tf-head)!important;font-weight:800;color:#fff;font-size:.95rem}
html body .hr-card figcaption span{color:#a49cc6;font-size:.8rem}
html body .hr-more{margin-top:2.4rem}
@media (max-width:900px){
  html body .hr-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 4px 10px;-webkit-overflow-scrolling:touch}
  html body .hr-card{flex:0 0 62%;scroll-snap-align:start}
}

/* ---------- Fehlerbehebungen ---------- */
/* Label oben: kein Rahmen/Glas */
html body .hero div.tf-badge,html body div.tf-badge.tf-badge{border:0!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important}
/* FAQ: Nummer – Frage – Plus sauber in einer Zeile */
html body #faq.faq-sec .faq-item summary{justify-content:flex-start!important;text-align:left!important;gap:1rem!important}
html body #faq.faq-sec .faq-item summary::after{margin-left:auto!important}
/* Workflow „Vom Bild zum Film“: alte schwarze Flächen + zu kleine Schrift */
html body :is(.split-feature,.split-big,.split-copy,.split-copy>div,.usecase-row,.usecase-lead,.usecase-text){background-color:transparent!important}
html body .split-feature{background:radial-gradient(120% 60% at 15% -10%,rgba(255,255,255,.14),transparent 55%),linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.02))!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:24px!important;overflow:hidden}
html body .split-big{font-size:clamp(2.2rem,4.4vw,4rem)!important;line-height:.95!important;background:linear-gradient(160deg,rgba(124,58,237,.35),rgba(25,227,199,.15))!important;border-radius:20px!important}

/* ==========================================================================
   FAQ / Kontakt / Newsletter – final, mit ID-Selektoren (schlägt alte #faq-Regeln)
   ========================================================================== */
html body section#faq.faq-sec details.faq-item,
html body section#faq.faq-sec details.faq-item:hover,
html body section#faq.faq-sec details.faq-item[open]{
  display:block!important;width:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;
  background:radial-gradient(120% 60% at 15% -10%,rgba(255,255,255,.12),transparent 55%),linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.025))!important;
  -webkit-backdrop-filter:blur(24px) saturate(180%)!important;backdrop-filter:blur(24px) saturate(180%)!important;
  border:1px solid rgba(255,255,255,.13)!important;border-radius:18px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 20px 50px -30px rgba(0,0,0,.8)!important;color:#fff!important}
html body section#faq.faq-sec details.faq-item:hover{border-color:rgba(25,227,199,.4)!important}
html body section#faq.faq-sec details.faq-item[open]{border-color:rgba(139,61,255,.55)!important;
  background:radial-gradient(120% 60% at 15% -10%,rgba(255,255,255,.14),transparent 55%),linear-gradient(155deg,rgba(124,58,237,.16),rgba(25,227,199,.06))!important}
html body section#faq.faq-sec details.faq-item summary{
  position:relative!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:1rem!important;
  width:100%!important;min-height:0!important;margin:0!important;padding:1.25rem 1.3rem 1.25rem 1.4rem!important;
  background:transparent!important;color:#fff!important;font-size:1rem!important;font-weight:700!important;line-height:1.35!important;text-align:left!important;white-space:normal!important}
html body section#faq.faq-sec details.faq-item summary::before{
  content:counter(faq,decimal-leading-zero)!important;position:static!important;display:inline-block!important;flex:none!important;min-width:2em!important;
  font-family:var(--tf-head)!important;font-weight:900!important;font-size:.9rem!important;color:#19e3c7!important;-webkit-text-fill-color:#19e3c7!important;background:none!important;opacity:1!important}
html body section#faq.faq-sec details.faq-item summary::after{
  content:""!important;position:static!important;transform:none!important;flex:none!important;margin-left:auto!important;
  width:32px!important;height:32px!important;border-radius:50%!important;font-size:0!important;line-height:0!important;
  background:rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/15px no-repeat!important;
  border:1px solid rgba(255,255,255,.18)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)!important;transition:transform .3s ease,background-color .3s ease!important}
html body section#faq.faq-sec details.faq-item[open] summary::after{
  transform:none!important;background:var(--tf-grad) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"),var(--tf-grad)!important;
  background-position:center,0 0!important;background-size:15px,100% 100%!important;background-repeat:no-repeat!important;border-color:transparent!important}
html body section#faq.faq-sec details.faq-item p{
  display:block!important;width:auto!important;max-width:none!important;margin:0!important;background:transparent!important;
  padding:0 1.4rem 1.35rem calc(1.4rem + 2em + 1rem)!important;color:#cfc8ea!important;font-size:.95rem!important;line-height:1.7!important}
@media (max-width:600px){html body section#faq.faq-sec details.faq-item p{padding:0 1.1rem 1.2rem 1.1rem!important}
  html body section#faq.faq-sec details.faq-item summary{padding:1.05rem 1rem!important;font-size:.95rem!important}}

/* Kontakt-Knöpfe */
html body section#contact .btn,html body section#contact .btn.ghost{background:rgba(255,255,255,.06)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:14px!important}
html body section#contact .btn:hover,html body section#contact .btn.ghost:hover{background:rgba(124,58,237,.3)!important;border-color:rgba(25,227,199,.6)!important;color:#fff!important}
/* Newsletter */
html body #nlForm input[type=email]{border-radius:14px!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.2)!important}
html body #nlForm button{border-radius:14px!important;background:var(--tf-grad)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),var(--tf-glow)!important}
/* Prüfung: Kontakt-Bereich hatte noch schwarze Flächen, FAQ-Abstand zu gross, Nummern zu klein */
html body section#contact.contact,html body section#contact.contact>div{background:transparent!important;background-image:none!important;background-color:transparent!important}
html body section#faq.faq-sec .faq-list{gap:10px!important;row-gap:10px!important}
html body .bs-num{font-size:.78rem!important;letter-spacing:.12em!important}

/* ==========================================================================
   Bestpreis-Garantie
   ========================================================================== */
html body section.price-guarantee div{background-color:transparent!important;background-image:none!important}
html body section.price-guarantee div[style*="grid-template-columns"]{border:0!important;gap:12px!important}
html body section.price-guarantee div[style*="padding:2rem"]{
  border:1px solid rgba(255,255,255,.13)!important;border-radius:20px!important;
  background:radial-gradient(120% 60% at 15% -10%,rgba(255,255,255,.12),transparent 55%),linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.025))!important;
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)!important}
html body section.price-guarantee div[style*="padding:2rem"]>div:first-child{font-family:var(--tf-head)!important;font-weight:900;font-size:1.1rem!important;color:#19e3c7!important}
html body section.price-guarantee div[style*="letter-spacing:.2em"]{color:#8ff0de!important}

/* ==========================================================================
   Erstgespräch-Fenster
   ========================================================================== */
html body #consultModal.consult-modal{background:rgba(10,7,22,.86)!important;-webkit-backdrop-filter:blur(18px) saturate(140%)!important;backdrop-filter:blur(18px) saturate(140%)!important;
  background-image:radial-gradient(50vw 40vw at 85% 0%,rgba(124,58,237,.30),transparent 70%),radial-gradient(40vw 36vw at 5% 100%,rgba(25,227,199,.14),transparent 70%)!important}
html body #consultModal .consult-wrap{color:#fff!important;width:min(1080px,100%)!important}
html body #consultModal .consult-head{text-align:center!important;margin:0 auto 2.6rem!important}
html body #consultModal .consult-head small,html body #consultModal .consult-label{display:inline-flex!important;align-items:center;gap:.8em;border:0!important;padding:0!important;background:none!important;color:#8ff0de!important;font-size:.72rem!important;letter-spacing:.24em!important;font-weight:700!important}
html body #consultModal .consult-head small::before,html body #consultModal .consult-label::before{content:"";width:30px;height:2px;border-radius:2px;background:var(--tf-grad)}
html body #consultModal .consult-head h2{font-family:var(--tf-head)!important;font-weight:900!important;text-transform:uppercase!important;font-size:clamp(2rem,4.2vw,3.6rem)!important;line-height:.98!important;letter-spacing:-.045em!important;margin:1rem auto .9rem!important;max-width:820px;
  background:linear-gradient(95deg,#fff 0%,#e9dcff 45%,#9ff5e6 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent!important}
html body #consultModal .consult-head p{color:#cfc8ea!important}
html body #consultModal .consult-grid{gap:16px!important;grid-template-columns:.8fr 1.2fr!important}
html body #consultModal .consult-card,html body #consultModal .consult-card:first-child{
  background:radial-gradient(120% 60% at 15% -10%,rgba(255,255,255,.13),transparent 55%),linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.025))!important;
  -webkit-backdrop-filter:blur(24px) saturate(180%)!important;backdrop-filter:blur(24px) saturate(180%)!important;
  border:1px solid rgba(255,255,255,.14)!important;border-radius:24px!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 30px 70px -35px rgba(0,0,0,.9)!important;padding:28px!important}
html body #consultModal .consult-card::after{background:radial-gradient(circle,rgba(124,58,237,.28),transparent 70%)!important}
html body #consultModal .consult-card :is(h3,b,label,a,span,p){color:#fff!important;-webkit-text-fill-color:#fff!important}
html body #consultModal .consult-card h3{font-family:var(--tf-head)!important;text-transform:uppercase!important;font-weight:900!important;font-size:1.4rem!important;letter-spacing:-.03em!important}
html body #consultModal .consult-info{border-bottom:1px solid rgba(255,255,255,.1)!important}
html body #consultModal .consult-info b{color:#a9a2c9!important;-webkit-text-fill-color:#a9a2c9!important;font-size:.7rem!important;letter-spacing:.16em!important;text-transform:uppercase}
html body #consultModal .consult-field label{color:#a9a2c9!important;-webkit-text-fill-color:#a9a2c9!important;font-size:.7rem!important;letter-spacing:.16em!important;text-transform:uppercase}
html body #consultModal .consult-field :is(input,textarea){background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:14px!important;color:#fff!important}
html body #consultModal .consult-field :is(input,textarea):focus{border-color:rgba(25,227,199,.85)!important;box-shadow:0 0 0 4px rgba(25,227,199,.15)!important}
html body #consultModal .consult-close{position:fixed!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.22)!important;color:#fff!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html body #consultModal .consult-close:hover{background:rgba(124,58,237,.4)!important}
html body #consultModal .book-open{background:rgba(255,255,255,.06)!important;color:#fff!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:14px!important}
html body #consultModal .consult-note{color:#a9a2c9!important}
@media (max-width:860px){html body #consultModal .consult-grid{grid-template-columns:1fr!important}}

/* ==========================================================================
   GENERALREGEL: keine alten schwarzen/weissen Flächen mehr (Seite + alle Fenster)
   :not(#tf-x) hebt die Gewichtung über alte #id-Regeln.
   ========================================================================== */
html body :is(section,article,div,aside,form,figure,header,main,li,details,blockquote):not(#tf-x):not(.cookie-banner):not(.consult-modal):not(.book-modal):not(.cl-logo):not(#luxuryLoader):not(.cursor):not(.tf-chip):not(.hr-media):not(.statusbar){background-color:transparent!important}
/* typische alte Karten in den Fenstern -> Glas */
html body :is(.team-card,.work-card,.ai-analysis-band,.ai-final,.ai-feature-block,.ai-process>*,.ai-kpi,.ai-kpis>*,.ai-metric,.ai-step,.marketing-explain,.mk-card,.project-card,.quick-zone,.book-card,.consult-card,.price-note):not(#tf-x){
  background-image:radial-gradient(120% 60% at 15% -10%,rgba(255,255,255,.12),transparent 55%),linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.02))!important;
  border:1px solid rgba(255,255,255,.13)!important;border-radius:22px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 24px 60px -34px rgba(0,0,0,.85)!important;color:#f5f3ff!important}
html body :is(.ai-analysis-band,.ai-final,.marketing-explain):not(#tf-x){background-image:radial-gradient(120% 60% at 15% -10%,rgba(255,255,255,.12),transparent 55%),linear-gradient(140deg,rgba(124,58,237,.18),rgba(25,227,199,.07))!important}
html body .work-card:not(#tf-x){overflow:hidden}
/* alle Inhalte in Fenstern hell */
html body :is(.about-overlay,.legal-overlay,#aiOverlay,#marketingOverlay,#workOverlay) :is(h2,h3,h4,b,strong):not(.outline):not(.accent):not(#tf-x){color:#fff!important}
html body :is(.about-overlay,.legal-overlay,#aiOverlay,#marketingOverlay,#workOverlay) :is(p,li,small,span:not(.outline):not(.accent)):not(#tf-x){color:#cfc8ea}
/* alte weisse Knöpfe in den Fenstern */
html body :is(.ai-cta,.about-cta,.mk-cta,.team-cta):not(#tf-x){background:var(--tf-grad)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border:0!important;border-radius:14px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),var(--tf-glow)!important}
/* Mobile-Menü */
html body nav .navlinks.open:not(#tf-x){background:rgba(18,13,38,.96)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:22px!important}
html body nav .navlinks.open a:not(#tf-x){color:#fff!important}
/* Regler im Abo */
html body #aboRange:not(#tf-x){background:transparent!important;accent-color:#7c3aed}

/* Termin buchen */
html body #bookModal.book-modal:not(#tf-x){background:rgba(10,7,22,.86)!important;-webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important}
html body #bookModal .book-card:not(#tf-x){background-color:#161131!important}
html body #bookModal .book-kicker:not(#tf-x){color:#8ff0de!important}
html body #bookModal :is(h2,h3):not(#tf-x){font-family:var(--tf-head)!important;text-transform:uppercase;color:#fff!important}
html body #bookModal .book-step:not(#tf-x){color:#a9a2c9!important;letter-spacing:.14em}
html body #bookModal .book-chip:not(#tf-x){background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.16)!important;color:#fff!important;border-radius:12px!important;font-family:var(--tf-font)!important}
html body #bookModal .book-chip:hover:not(#tf-x){border-color:rgba(25,227,199,.6)!important}
html body #bookModal .book-chip.active:not(#tf-x){background:var(--tf-grad)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 8px 22px -10px rgba(124,58,237,.8)!important}
html body #bookModal :is(input,textarea):not(#tf-x){background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:14px!important;color:#fff!important}
html body #bookModal .book-x:not(#tf-x){background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.22)!important;color:#fff!important}
html body #bookModal .book-days:not(#tf-x){scrollbar-color:#7c3aed transparent}
html body :is(.about-overlay,#aiOverlay,#marketingOverlay,#workOverlay) .about-kicker:not(#tf-x){color:#8ff0de!important}
/* Fenster brauchen einen deckenden Hintergrund (Generalregel ausgenommen) */
html body :is(.about-overlay,.legal-overlay,#aiOverlay,#marketingOverlay,#workOverlay,#aboutOverlay):not(#tf-x):not(#tf-y){background-color:#0f0b22!important}
html body #bookModal .book-card:not(#tf-x):not(#tf-y){background-color:#161131!important}
html body :is(.about-overlay-header,.legal-header):not(#tf-x):not(#tf-y){background-color:rgba(15,11,34,.85)!important}
/* Ladebildschirm farbig statt schwarz */
html body #luxuryLoader:not(#tf-x):not(#tf-y){background-color:#0f0b22!important;background-image:radial-gradient(45vw 40vw at 15% 20%,rgba(139,61,255,.45),transparent 70%),radial-gradient(40vw 36vw at 85% 80%,rgba(25,227,199,.25),transparent 70%)!important}
/* Eigener Zeiger immer zuoberst (auch über Erstgespräch, Termin, Fenstern) */
html body #customCursor.cursor:not(#tf-x){z-index:2147483000!important;pointer-events:none!important;position:fixed!important}
html body .abo-guarantee{margin:1rem 0 0!important;padding:.85rem 1rem!important;border-radius:14px;border:1px solid rgba(25,227,199,.3);background:rgba(25,227,199,.07)!important;color:#bff7ec!important;font-size:.86rem!important;line-height:1.55!important}
/* Label oben ohne Kasten (auch mobil) */
html body header.hero>div.tf-badge:not(#tf-x){border:0!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important}
/* Logo im Menü grösser */
html body nav .logo img:not(#tf-x){height:48px!important;max-height:48px!important;width:auto!important;max-width:190px!important}
@media (max-width:900px){html body nav .logo img:not(#tf-x){height:40px!important;max-height:40px!important}}
/* Menü wie modernes Pillen-Menü: aktiver Punkt hervorgehoben */
@media (min-width:901px){
  html body nav .navlinks a:not(#tf-x){padding:.6rem 1rem!important;border-radius:999px!important;color:#b9b3d4!important;font-weight:500!important;font-size:.92rem!important;text-transform:none!important;letter-spacing:0!important}
  html body nav .navlinks a.active:not(#tf-x){background:rgba(255,255,255,.1)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important}
  html body nav .navlinks a:hover:not(#tf-x){color:#fff!important;background:rgba(255,255,255,.06)!important}
  html body nav .navlinks a.nav-portal:not(#tf-x){color:#8ff0de!important}
}

/* ==========================================================================
   Letzte Schwarz/Weiss-Reste (auch Kleinteile)
   ========================================================================== */
/* Pfeil-Kreise in Buttons: Glas statt weiss */
html body :is(.nav-cta,.abo-cta,.an-cta,.consult-submit,.tf-cta)::after{
  background:rgba(255,255,255,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/58% no-repeat!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)!important;border:1px solid rgba(255,255,255,.3)!important;opacity:1!important}
/* Linien unter Überschriften, Burger, Team-Deko */
html body h2::after,html body .team-role::before{background:var(--tf-grad)!important}
html body .burger span{background:#e9e3ff!important}
html body .team-card::before,html body .team-card::after{background:#19e3c7!important}
/* Nummern in der Gratis-Analyse */
html body .an-pts li>span:first-child{background:var(--tf-grad)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border:0!important}
/* Fenster + Termin: sichtbar violett statt fast schwarz */
html body :is(.about-overlay,.legal-overlay,#aiOverlay,#marketingOverlay,#workOverlay,#aboutOverlay):not(#tf-x):not(#tf-y){background-color:#1a1240!important;background-image:
    radial-gradient(60vw 50vw at 95% 0%,rgba(139,61,255,.45),transparent 70%),
    radial-gradient(50vw 44vw at 0% 100%,rgba(25,227,199,.20),transparent 70%),
    linear-gradient(180deg,#1c1345 0%,#140e33 100%)!important}
html body #bookModal .book-card:not(#tf-x):not(#tf-y){background-color:#1f1650!important;background-image:radial-gradient(80% 50% at 15% -10%,rgba(139,61,255,.35),transparent 60%),linear-gradient(160deg,#211854,#17113c)!important}
html body .hr-media{background:linear-gradient(160deg,#2a1a5e,#16103a 60%,#0f3b3a)!important}
/* Seite selbst: Grundton etwas violetter */
html,html body::before{background-color:#140e30!important}
html body .team-card:not(#tf-x):not(#tf-y)::before,html body .team-card:not(#tf-x):not(#tf-y)::after{background:#19e3c7!important;background-image:none!important}
html body .ai-analysis-kpis span:not(#tf-x)::before{background:#19e3c7!important;box-shadow:0 0 10px rgba(25,227,199,.7)!important}
/* Neues Logo (1TAKEFILMS mit A/E vom alten Logo) */
html body nav a.logo img:not(#tf-x){height:30px!important;max-height:30px!important;width:auto!important;max-width:260px!important;opacity:1!important;filter:none!important}
@media (max-width:900px){html body nav a.logo img:not(#tf-x){height:22px!important;max-height:22px!important;max-width:190px!important}}
/* Startbereich kompakt: keine grossen Lücken zwischen Label, Überschrift und Text */
html body header.hero:not(#tf-x){display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;min-height:auto!important;gap:0!important}
html body header.hero:not(#tf-x)>h1{margin:0!important}
html body header.hero:not(#tf-x)>.hero-bottom{margin-top:clamp(1.6rem,3vw,2.4rem)!important;width:100%}
html body header.hero:not(#tf-x)>.tf-badge{margin:0 0 clamp(1rem,2vw,1.5rem)!important}
@media (min-width:901px){html body header.hero:not(#tf-x){padding-top:140px!important;padding-bottom:60px!important}}
html body header.hero .scrollhint{display:none!important}
/* Nummern-Labels („01 /“ usw.) entfernen */
html body .sec-head h2::before,html body .business-showcase::before,html body .studio-section::before,html body .fs-sec::before{content:none!important;display:none!important}
html body .sec-head h2::after{background:var(--tf-grad)!important;height:2px!important}
/* Fix: Startbereich-Inhalte volle Breite (nicht zusammengedrückt) */
html body header.hero:not(#tf-x)>*{width:100%!important;max-width:1240px!important;grid-column:auto!important;margin-left:0!important;margin-right:0!important}
html body header.hero:not(#tf-x)>.tf-badge{width:auto!important;max-width:none!important;white-space:nowrap}
html body header.hero:not(#tf-x)>.hero-bottom{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:1.4rem!important}
html body header.hero:not(#tf-x)>.hero-bottom p{max-width:600px!important;width:auto!important}
/* Fix grosse Bildschirme: Bereiche volle Breite, Inhalt mittig max. 1240px */
@media (min-width:901px){
  html body header.hero:not(#tf-x),html body section:not(#tf-x):not(.ai-feature-block):not(.ai-analysis-band):not(.ai-process):not(.marketing-explain){
    max-width:none!important;width:100%!important;margin-left:0!important;margin-right:0!important;
    padding-left:max(5vw,calc((100% - 1240px)/2))!important;padding-right:max(5vw,calc((100% - 1240px)/2))!important;box-sizing:border-box!important}
}
@media (max-width:600px){html body header.hero:not(#tf-x)>.tf-badge{white-space:normal!important;font-size:.6rem!important;letter-spacing:.16em!important;line-height:1.5!important;max-width:100%!important}
  html body header.hero:not(#tf-x)>.tf-badge::before{width:22px!important}}
/* Referenzen: 5 sichtbar, Rest per „Mehr anzeigen“; „Bald“-Karten */
html body #hrRow .hr-more-item{display:none!important}
html body #hrRow.show-all .hr-more-item{display:block!important}
@media (min-width:901px){html body #hrRow.show-all{row-gap:28px}}
html body .hr-soon .hr-media{display:grid;place-items:center;background:linear-gradient(160deg,rgba(139,61,255,.28),rgba(20,14,44,.6) 55%,rgba(25,227,199,.16))!important}
html body .hr-soon-tag{padding:.45rem .9rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
html body .hr-soon{cursor:default}
html body .hr-soon:hover .hr-media{transform:none!important}

/* ==========================================================================
   Neuer Footer
   ========================================================================== */
html body footer.tf-foot:not(#tf-x){display:block!important;padding:0 max(5vw,calc((100% - 1240px)/2)) 28px!important;margin-top:40px!important;background:transparent!important;border:0!important;text-align:left!important;font-size:.92rem!important}
html body footer.tf-foot:not(#tf-x)::before{display:none!important}
html body footer.tf-foot *{box-sizing:border-box}
html body .tf-foot-cta{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding:1.6rem 1.8rem;border-radius:22px;margin-bottom:3.2rem;
  background:radial-gradient(120% 80% at 0% 0%,rgba(139,61,255,.35),transparent 60%),linear-gradient(120deg,rgba(124,58,237,.22),rgba(25,227,199,.12));border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
html body .tf-foot-cta b{display:block;font-family:var(--tf-head)!important;font-weight:900;text-transform:uppercase;font-size:clamp(1.2rem,2vw,1.6rem);letter-spacing:-.02em;color:#fff}
html body .tf-foot-cta span{color:#cfc8ea;font-size:.92rem}
html body .tf-foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:2rem 2.4rem;padding-bottom:2.6rem;border-bottom:1px solid rgba(255,255,255,.1)}
html body .tf-foot-brand img{height:26px;width:auto;display:block;margin-bottom:1rem}
html body .tf-foot-brand p{color:#b9b2d6!important;font-size:.9rem;line-height:1.6;max-width:300px;margin:0 0 1.2rem}
html body .tf-foot-social{display:flex;gap:.55rem}
html body .tf-foot-social a{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);transition:border-color .25s,background .25s,transform .25s}
html body .tf-foot-social a:hover{border-color:rgba(25,227,199,.6);background:rgba(124,58,237,.25);transform:translateY(-2px)}
html body .tf-foot-social svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html body .tf-foot-col{display:flex;flex-direction:column;gap:.62rem;min-width:0}
html body .tf-foot-col small{font-size:.7rem!important;letter-spacing:.2em;text-transform:uppercase;color:#8ff0de!important;font-weight:700;margin-bottom:.35rem}
html body .tf-foot-col a,html body .tf-foot-col span{color:#cfc8ea!important;text-decoration:none!important;font-size:.9rem;line-height:1.35;width:max-content;max-width:100%;transition:color .2s}
html body .tf-foot-col a:hover{color:#fff!important}
html body .tf-foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.4rem;color:#8f88b0;font-size:.8rem}
html body .tf-foot-bottom span{color:#8f88b0!important}
html body .tf-foot-claim{font-family:var(--tf-head)!important;font-weight:900;text-transform:uppercase;letter-spacing:.04em;background:var(--tf-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}
@media (max-width:1000px){html body .tf-foot-grid{grid-template-columns:1fr 1fr 1fr}html body .tf-foot-brand{grid-column:1/-1}}
@media (max-width:600px){html body .tf-foot-grid{grid-template-columns:1fr 1fr}html body .tf-foot-cta{padding:1.3rem}html body .tf-foot-cta .tf-cta{width:100%}html body .tf-foot-bottom{flex-direction:column}}
html body .tf-foot-social svg,html body .tf-foot-social svg *{fill:none!important;stroke:#fff!important;stroke-width:1.7!important}
/* Leistungs-Seiten */
html body .svc-overlay .svc-grid{margin-top:2.2rem}
html body .svc-cta{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;margin:2.6rem 0 1rem;padding:1.4rem 1.6rem;border-radius:20px;
  background:linear-gradient(120deg,rgba(124,58,237,.25),rgba(25,227,199,.1));border:1px solid rgba(255,255,255,.14)}
html body .svc-cta p{margin:0!important;color:#e4ddff!important;max-width:560px}
html body .svc.svc-link{cursor:pointer}
html body .svc.svc-link::after{content:"Mehr erfahren →"!important;display:block!important;position:static!important;height:auto!important;width:auto!important;background:none!important;margin-top:1rem;font-size:.78rem;font-weight:700;letter-spacing:.06em;color:#8ff0de;opacity:.85}
/* Leistungs-/Marketing-Karten: Überschriften normal gross, kein Überlauf */
html body :is(.svc-overlay,#marketingOverlay) .team-card h3:not(#tf-x){font-size:clamp(1.15rem,1.7vw,1.5rem)!important;line-height:1.15!important;letter-spacing:-.02em!important;margin:.9rem 0 .8rem!important;overflow-wrap:break-word!important;hyphens:auto!important;max-width:100%!important}
html body :is(.svc-overlay,#marketingOverlay) .team-card:not(#tf-x){min-height:0!important;padding:1.6rem 1.6rem 1.7rem!important}
html body :is(.svc-overlay,#marketingOverlay) .team-card p:not(#tf-x){font-size:.95rem!important;line-height:1.65!important}
/* Footer-Knopf „Erstgespräch sichern“ */
html body .tf-foot-cta .tf-cta:not(#tf-x),html body .svc-cta .tf-cta:not(#tf-x){padding:.85rem .95rem .85rem 1.35rem!important;font-size:.85rem!important;white-space:nowrap!important;line-height:1!important;gap:.8em!important}

/* ==========================================================================
   KI- und Marketing-Seite: Blöcke einspaltig, Überschriften normal gross
   ========================================================================== */
html body :is(#aiOverlay,#marketingOverlay) :is(.ai-feature-block,.ai-analysis-band,.ai-process,.marketing-explain):not(#tf-x){
  display:block!important;grid-template-columns:none!important;background:none!important;background-image:none!important;border:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:clamp(1.5rem,4vw,3rem) 0!important;margin:0!important;max-width:none!important;width:100%!important}
html body :is(#aiOverlay,#marketingOverlay,.svc-overlay) .about-page h2:not(#tf-x){font-size:clamp(2rem,4.4vw,3.8rem)!important;line-height:1.02!important;max-width:1000px!important;overflow-wrap:break-word!important;hyphens:manual!important;width:auto!important}
html body :is(#aiOverlay,#marketingOverlay,.svc-overlay) .about-page .about-kicker:not(#tf-x){white-space:nowrap!important;max-width:none!important}
html body :is(#aiOverlay,#marketingOverlay) .team-grid:not(#tf-x){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))!important;gap:14px!important}
html body #aiOverlay .team-card h3:not(#tf-x){font-size:clamp(1.15rem,1.7vw,1.5rem)!important;line-height:1.15!important;letter-spacing:-.02em!important;margin:.9rem 0 .8rem!important;overflow-wrap:break-word!important;hyphens:auto!important}
html body #aiOverlay .team-card:not(#tf-x){min-height:0!important;padding:1.6rem!important}
html body #aiOverlay .team-card p:not(#tf-x){font-size:.95rem!important;line-height:1.65!important}
html body :is(#aiOverlay,#marketingOverlay) .team-intro:not(#tf-x){max-width:820px!important}
/* Knöpfe: dunklerer Verlauf, damit die weisse Schrift überall gut lesbar ist */
:root{--tf-btn-grad:linear-gradient(120deg,#6d28d9 0%,#5b3fd9 50%,#0e9f8c 100%)}
html body :is(.nav-cta,.btn:not(.ghost),.consult-submit,.book-submit,.abo-cta,.an-cta,.cookie-btn.primary,.cookie-accept,.tf-cta):not(#tf-x){background:var(--tf-btn-grad)!important;background-size:100% 100%!important;color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.35)!important}
html body :is(.nav-cta,.btn:not(.ghost),.consult-submit,.book-submit,.abo-cta,.an-cta,.tf-cta):not(#tf-x):hover{filter:brightness(1.12)!important}
html body #nlForm button:not(#tf-x),html body #bookModal .book-chip.active:not(#tf-x){background:var(--tf-btn-grad)!important}
html body :is(#aiOverlay,#marketingOverlay,.svc-overlay) .team-card:not(#tf-x){height:auto!important;max-height:none!important;overflow:visible!important}
html body :is(#aiOverlay,#marketingOverlay,.svc-overlay) .team-card :is(p,h3):not(#tf-x){max-height:none!important;overflow:visible!important;-webkit-line-clamp:unset!important;display:block!important}

/* ==========================================================================
   Performance: gleiche Optik, weniger Rechenaufwand
   ========================================================================== */
/* Hintergrund-Schimmer statisch (die Dauer-Animation eines bildschirmgrossen Verlaufs kostet viel) */
html body::before{animation:none!important;will-change:auto!important}
/* Körnung aus (unsichtbar fein, aber teuer beim Scrollen) */
html body .grain{display:none!important}
/* Glas: schwächerer Weichzeichner = viel weniger GPU-Arbeit, Look bleibt */
html body :is(.svc,.bs-card,.tm,.fs-steps>li,.branch-item,.faq-item,.imp-card,.team-card,.abo-calc,.an-in,.contact-meta,.price-note){-webkit-backdrop-filter:blur(12px) saturate(150%)!important;backdrop-filter:blur(12px) saturate(150%)!important}
/* Handy: kein Weichzeichner auf Karten (spart Akku, sieht fast gleich aus) */
@media (max-width:900px){
  html body :is(.svc,.bs-card,.tm,.fs-steps>li,.branch-item,.faq-item,.imp-card,.team-card,.abo-calc,.an-in,.contact-meta,.price-note,.hr-play){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:rgba(28,20,60,.55)!important}
}
/* Weniger Bewegung, wenn im System gewünscht */
@media (prefers-reduced-motion:reduce){html body .marquee-inner{animation:none!important}}
/* alte Zier-Ecklinien an Karten entfernen */
html body .team-card:not(#tf-x):not(#tf-y)::before,html body .team-card:not(#tf-x):not(#tf-y)::after{content:none!important;display:none!important}

/* Fix: alter Startbereich-Effekt hielt den Text unsichtbar (meine Animation ersetzt seine) */
html body header.hero:not(#tf-x)>.hero-bottom{opacity:1;transform:none}
html body header.hero:not(#tf-x) h1>span,html body header.hero:not(#tf-x)>.tf-badge{opacity:1;transform:none}

/* KI-Seite: Ablauf „Von der Idee zum Video“ als saubere Schritt-Karten */
html body #aiOverlay .ai-process .about-kicker:not(#tf-x){border:0!important;background:none!important;padding:0!important;box-shadow:none!important}
html body #aiOverlay .ai-process-row:not(#tf-x){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:10px!important;border:0!important;background:none!important;box-shadow:none!important;padding:0!important;margin-top:1.4rem!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body #aiOverlay .ai-process-row>span:not(#tf-x){display:flex!important;flex-direction:column;gap:.5rem;padding:1.1rem 1.2rem!important;border-radius:16px!important;border:1px solid rgba(255,255,255,.12)!important;
  background:radial-gradient(120% 60% at 15% -10%,rgba(255,255,255,.1),transparent 55%),linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.02))!important;
  font-family:var(--tf-head)!important;font-weight:900;font-size:.85rem;color:#19e3c7!important;letter-spacing:.06em;min-height:96px;border-left:1px solid rgba(255,255,255,.12)!important}
html body #aiOverlay .ai-process-row>span b:not(#tf-x){font-family:var(--tf-font)!important;font-size:.98rem;font-weight:700;color:#fff!important;letter-spacing:0;line-height:1.3}
html body #aiOverlay .ai-process-row:not(#tf-x){grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media (min-width:1100px){html body #aiOverlay .ai-process-row:not(#tf-x){grid-template-columns:repeat(6,minmax(0,1fr))!important}}
@media (max-width:600px){html body #aiOverlay .ai-process-row:not(#tf-x){grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Text-Editor auf der Website (nur für Admins sichtbar) */
#tfEditBar{position:fixed;left:16px;bottom:16px;z-index:2147482000;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;max-width:calc(100vw - 32px);padding:.55rem .6rem;border-radius:16px;
  background:rgba(18,13,38,.92);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 50px -20px rgba(0,0,0,.9);font-family:var(--tf-font)}
#tfEditBar button{appearance:none;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;font:700 .82rem var(--tf-font);padding:.6rem .95rem;border-radius:12px;cursor:pointer;transition:transform 160ms ease-out}
#tfEditBar button:active{transform:scale(.97)}
#tfEditBar #tfEditSave{background:var(--tf-btn-grad);border-color:transparent}
#tfEditBar #tfEditHint{color:#cfc8ea;font-size:.8rem;max-width:360px}
html.tf-editing [data-tf-edit]{outline:1px dashed rgba(25,227,199,.55)!important;outline-offset:3px;border-radius:4px;cursor:text!important}
html.tf-editing [data-tf-edit]:focus{outline:2px solid #19e3c7!important;background:rgba(25,227,199,.06)}
html.tf-editing .scroll-reveal,html.tf-editing .motion-reveal{opacity:1!important;transform:none!important}
html.tf-editing,html.tf-editing *{cursor:auto}
html.tf-editing #customCursor{display:none!important}

/* ==========================================================================
   Mobil (iPhone/Android)
   ========================================================================== */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Eingabefelder mind. 16px: sonst zoomt iOS beim Antippen hinein */
html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select){font-size:16px!important}
/* Sofortige Reaktion beim Tippen, kein Text-Markieren auf Knöpfen */
html body :is(a,button,[role=button],summary,label,.svc-link,.hr-card,.book-chip,.chip){touch-action:manipulation}
html body :is(button,[role=button],.btn,.nav-cta,.tf-cta,.book-chip,.lang-btn,.burger,.svc-link,summary){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* Startbereich: nie unter die Browser-Leiste rutschen */
@media (max-width:900px){html body header.hero:not(#tf-x){min-height:auto!important}}
/* Notch / Dynamic Island / Home-Balken */
html body nav:not(#tf-x){top:max(10px,env(safe-area-inset-top,0px))!important}
@media (max-width:900px){
  html body nav:not(#tf-x){left:max(10px,env(safe-area-inset-left,0px))!important;right:max(10px,env(safe-area-inset-right,0px))!important}
  html body footer.tf-foot:not(#tf-x){padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))!important}
  html body .cookie-banner:not(#tf-x){bottom:calc(.75rem + env(safe-area-inset-bottom,0px))!important}
}
/* Fenster scrollen für sich, die Seite dahinter bleibt stehen */
html body :is(.about-overlay,.legal-overlay,.consult-modal,.book-modal,.hr-row):not(#tf-x){overscroll-behavior:contain}
html body :is(.about-overlay,.legal-overlay){height:100dvh!important}
/* Referenzen auf dem Handy: sauberes seitliches Wischen */
@media (max-width:900px){html body .hr-row:not(#tf-x){scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}html body .hr-row::-webkit-scrollbar{display:none}html body .hr-card{scroll-snap-align:start}}

/* Referenzen: Ton-Knopf (Videos laufen stumm automatisch) */
html body .hr-sound{position:absolute;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;z-index:2;
  background:rgba(15,11,34,.55);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .15s ease-out,background-color .2s ease}
html body .hr-sound:active{transform:scale(.94)}
html body .hr-sound svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body .hr-sound .ic-on{display:none}
html body .hr-card.has-sound .hr-sound .ic-on{display:block}
html body .hr-card.has-sound .hr-sound .ic-off{display:none}
html body .hr-card.has-sound .hr-sound{background:linear-gradient(120deg,#6d28d9,#0e9f8c);border-color:transparent}
html body .hr-card:not(.hr-soon){cursor:pointer}

/* ==========================================================================
   Blöcke rundum mit Farbverlauf umranden (Violett → Türkis), Glas bleibt erhalten
   ========================================================================== */
html body :is(.svc,.bs-card,.tm,.fs-steps>li,.branch-item,.faq-item,.imp-card,.team-card,.abo-calc,.an-in,.contact-meta,.tf-foot-cta,.svc-cta,.consult-card,.book-card):not(#tf-x):not(#tf-y):not(#tf-z){position:relative!important;border-color:transparent!important}
html body :is(.svc,.bs-card,.tm,.fs-steps>li,.branch-item,.faq-item,.imp-card,.team-card,.abo-calc,.an-in,.contact-meta,.tf-foot-cta,.svc-cta,.consult-card,.book-card):not(#tf-x):not(#tf-y):not(#tf-z)::before{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;width:auto!important;height:auto!important;
  border-radius:inherit!important;padding:1px!important;pointer-events:none!important;z-index:1!important;opacity:.85!important;transform:none!important;box-shadow:none!important;
  background:linear-gradient(120deg,#8b3dff 0%,#6a5cf5 45%,#19e3c7 100%)!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;-webkit-mask-composite:xor!important;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)!important}
@media (hover:hover) and (pointer:fine){html body :is(.svc,.bs-card,.tm,.fs-steps>li,.team-card,.faq-item):not(#tf-x):not(#tf-y):not(#tf-z):hover::before{opacity:1!important}}
/* Text bearbeiten (im Admin): normaler Mauszeiger statt eigenem Punkt */
html.tf-editing,html.tf-editing body,html.tf-editing body *{cursor:auto!important}
html.tf-editing [data-tf-edit],html.tf-editing [data-tf-edit] *{cursor:text!important}
html.tf-editing #tfEditBar button{cursor:pointer!important}
html.tf-editing #customCursor{display:none!important}

/* Referenz-Karten: Tag oben links, Ton oben rechts, Titel + Text unten im Video */
html body .hr-card:not(#tf-x){position:relative!important}
html body .hr-card:not(.hr-soon) figcaption:not(#tf-x){position:absolute!important;left:0;right:0;bottom:0;z-index:2;padding:2.6rem 1rem 1.1rem!important;text-align:center;pointer-events:none;
  border-radius:0 0 22px 22px;background:linear-gradient(180deg,transparent,rgba(8,5,20,.55) 35%,rgba(8,5,20,.9))!important}
html body .hr-card:not(.hr-soon) figcaption b:not(#tf-x){font-size:1.12rem!important;line-height:1.2;color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.5)}
html body .hr-card:not(.hr-soon) figcaption span:not(#tf-x){font-size:.8rem!important;line-height:1.45;color:#e6e0ff!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html body .hr-sound:not(#tf-x){top:12px!important;right:12px!important;bottom:auto!important}
html body .hr-tag{position:absolute;top:14px;left:12px;z-index:2;max-width:calc(100% - 70px);padding:.42rem .8rem;border-radius:999px;background:rgba(255,255,255,.92);color:#140e30;
  font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
html body .hr-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:2.8rem 1rem 1.1rem;text-align:center;pointer-events:none;display:flex;flex-direction:column;gap:.3rem;
  background:linear-gradient(180deg,transparent,rgba(8,5,20,.55) 35%,rgba(8,5,20,.9))}
html body .hr-cap b{font-family:var(--tf-head)!important;font-weight:800;font-size:1.12rem;line-height:1.2;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5)}
html body .hr-cap span{font-size:.8rem;line-height:1.45;color:#e6e0ff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Tag-Pille in den Markenfarben statt weiss */
html body .hr-tag:not(#tf-x){background:linear-gradient(120deg,#6d28d9 0%,#5b3fd9 50%,#0e9f8c 100%)!important;color:#fff!important;border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px -8px rgba(124,58,237,.8);text-shadow:0 1px 2px rgba(0,0,0,.3)}

/* Fix Streifen in Karten: Live-Blur über dem animierten Hintergrund erzeugte harte Lichtbalken (und kostete Leistung).
   Inhalts-Karten ohne backdrop-filter, dafür etwas dichtere Glas-Füllung. Navigation/Overlays behalten den Blur. */
html body :is(.svc,.bs-card,.tm,.quick-grid>*,.abo-calc,.an-in,.usecase-row,.split-feature,.branch-item,.contact-meta,.fs-steps>li,.faq-item,.imp-card,.team-card,.price-guarantee .pg-card,.hr-card):not(#tf-x){
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body :is(.svc,.bs-card,.tm,.quick-grid>*,.usecase-row,.split-feature,.branch-item,.contact-meta,.fs-steps>li,.faq-item,.imp-card,.team-card,.price-guarantee .pg-card):not(#tf-x):not(:hover){
  background:radial-gradient(120% 60% at 15% -10%,rgba(255,255,255,.12),transparent 60%),linear-gradient(155deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.045) 40%,rgba(255,255,255,.035) 65%,rgba(255,255,255,.07) 100%),rgba(22,16,44,.55)!important}

/* Sprach-Menü im Look der Auswahl-Listen: Verlauf, gewählte Sprache farbig mit Häkchen */
html body .lang-menu:not(#tf-x){min-width:170px;padding:6px;border:1px solid rgba(255,255,255,.14)!important;border-radius:16px!important;
  background:linear-gradient(160deg,rgba(124,58,237,.22),rgba(25,227,199,.07) 60%),#151029!important;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.8),0 0 0 1px rgba(139,61,255,.15)!important;transform-origin:top right;animation:tfLangIn .16s cubic-bezier(.23,1,.32,1)}
@keyframes tfLangIn{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}
html body .lang-menu:not(#tf-x) li{background:transparent!important}
html body .lang-menu:not(#tf-x) button{position:relative;display:flex;align-items:center;gap:10px;padding:.62rem 2.2rem .62rem .7rem;border-radius:10px!important;color:#e9e5fb!important;font-size:.9rem;transition:background .15s ease}
html body .lang-menu:not(#tf-x) button::before{content:attr(data-lang);display:inline-grid;place-items:center;width:26px;height:20px;border-radius:6px;font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#cfc8ef;background:rgba(255,255,255,.08)}
html body .lang-menu:not(#tf-x) button:hover{background:rgba(255,255,255,.09)!important;color:#fff!important}
html body .lang-menu:not(#tf-x) button[aria-checked=true]{background:linear-gradient(120deg,rgba(139,61,255,.5),rgba(25,227,199,.28))!important;color:#fff!important;font-weight:700}
html body .lang-menu:not(#tf-x) button[aria-checked=true]::before{color:#0f0b22;background:linear-gradient(135deg,#b28cff,#19e3c7)}
html body .lang-menu:not(#tf-x) button[aria-checked=true]::after{content:"";position:absolute;right:14px;top:50%;width:5px;height:10px;margin-top:-7px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){html body .lang-menu:not(#tf-x){animation:none}}


/* ---------- Handy: flüssig statt schwer ----------
   Live-Weichzeichner (backdrop-filter) und Unschärfe beim Einblenden kosten auf Handys sehr viel Grafikleistung –
   zusammen mit laufenden Videos wird die Seite sonst zäh. Optik bleibt, nur ohne diese teuren Filter. */
@media (max-width:900px),(hover:none){
  html body *:not(#tf-x):not(#tf-y),html body *:not(#tf-x):not(#tf-y)::before,html body *:not(#tf-x):not(#tf-y)::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html body :is(.scroll-reveal,.motion-reveal):not(#tf-x):not(#tf-y){filter:none!important;will-change:auto!important}
  html body .scroll-reveal{transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)!important}
  html body nav{background:rgba(18,16,30,.94)!important}
}