:root{
  --bg:#0f172a; --panel:#0b1222; --text:#e8ecf3; --muted:#9fb0c7;
  --accent:#22d3ee; --accent-2:#a78bfa; --ring:rgba(34,211,238,.45);
  --shadow:0 18px 40px rgba(2,8,23,.35); --radius:18px; --max:1200px;
  --nav-h:72px; --nav-bg:rgba(11,13,20,.68); --nav-border:rgba(255,255,255,.07); --nav-shadow:0 6px 24px rgba(0,0,0,.22);
  --menu-bg:#0b1222; --menu-border:rgba(148,163,184,.22); --menu-shadow:0 18px 50px rgba(0,0,0,.55);
  --card-b:#ffffff10; --card-grad:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --hover-grad:linear-gradient(135deg, rgba(34,211,238,.10), rgba(167,139,250,.10));
  --hair:#ffffff12; --hair2:#ffffff08;
}

/* --- GLOBAL / NO HORIZONTAL SCROLL --- */
*{box-sizing:border-box}
html,body{height:100%}
html,body{overflow-x:hidden} /* verhindert X-Scroll global */
body{
  margin:0; font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial; color:var(--text);
  background:
    radial-gradient(1200px 600px at 110% -10%, rgba(167,139,250,.06), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(34,211,238,.06), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img,video,svg,canvas{display:block; max-width:100%; height:auto} /* verhindert Overflows */
iframe{max-width:100%}
:where(.container, .grid, .grid2, .svc-grid){overflow:visible} /* Container dürfen überlaufen (Schatten), nicht in X scrollen */
:where(.row){min-width:0}
:where(p,li,h1,h2,h3){overflow-wrap:break-word} /* lange Worte umbrechen */
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:12px; top:12px; padding:10px 14px; background:#000; color:#fff; border-radius:8px; z-index:99999}

.container{max-width:var(--max); margin-inline:auto; padding-inline:22px}
.section{padding:96px 0; scroll-margin-top:calc(var(--nav-h) + 24px)}
.section.alt{background:
  linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)),
  radial-gradient(1000px 600px at 0% 0%, rgba(34,211,238,.05), transparent 60%)}
.section-tight{padding:38px 0}
.section-head{text-align:center; margin-bottom:28px}
h1,h2,h3{margin:0 0 10px}
h2{font-size:clamp(28px,5vw,40px)}
h3{font-size:20px}
.lead{color:var(--text)}
.muted{color:var(--muted)}
.eyebrow{letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; font-size:12px}

/* NAV */
.nav{position:fixed; top:0; left:0; right:0; z-index:9999; height:var(--nav-h); background:var(--nav-bg);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s, background-color .25s}
.nav.scrolled{ border-bottom-color:var(--nav-border); box-shadow:var(--nav-shadow); background:rgba(11,13,20,.82) }
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h)}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.12em}
.brand img{width:26px; height:26px}
.nav-links a{margin-left:18px; color:var(--text); font-weight:500}
.nav-links a[aria-current="page"]{color:var(--accent)}
.nav-links a:hover{color:var(--accent)}
.btn{display:inline-block; padding:12px 18px; border-radius:999px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#041016; font-weight:800; box-shadow:0 10px 28px rgba(34,211,238,.24)}
.btn.small{padding:8px 14px; font-size:14px}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid rgba(148,163,184,.28); box-shadow:none}

/* Mobile menu */
.kebab-toggle{display:none; appearance:none; border:1px solid rgba(148,163,184,.22); background:rgba(255,255,255,.05); color:var(--text); width:42px; height:42px; border-radius:12px; align-items:center; justify-content:center; gap:3px; padding:0 6px; box-shadow:0 8px 22px rgba(0,0,0,.22)}
.kebab-toggle .dot{ width:4px; height:4px; border-radius:50%; background:currentColor; }
.kebab-menu{position:fixed; right:14px; top:calc(var(--nav-h) + 10px); width:min(88vw, 340px); background:var(--menu-bg); border:1px solid var(--menu-border); box-shadow:var(--menu-shadow); border-radius:16px; padding:8px; color:var(--text); transform-origin:top right; transform:scale(.96) translateY(-6px); opacity:0; pointer-events:none; transition:transform .14s ease-out, opacity .14s ease-out; z-index:99991}
.kebab-menu.open{ opacity:1; transform:none; pointer-events:auto }
.kebab-menu .kebab-arrow{ position:absolute; top:-8px; right:18px; width:16px; height:16px; background:var(--menu-bg); border-left:1px solid var(--menu-border); border-top:1px solid var(--menu-border); transform:rotate(45deg) }
.kebab-menu a{display:flex; flex-direction:column; gap:2px; padding:12px; border-radius:12px; color:var(--text)}
.kebab-menu a:hover{ background:#121a2e }
.kebab-menu hr{height:1px; border:0; margin:6px 4px; background:linear-gradient(90deg, rgba(148,163,184,.2), rgba(148,163,184,.08))}
.kebab-menu .menu-cta{ display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#041016; font-weight:800; border-radius:12px }

/* HERO */
.hero{position:relative; padding:120px 0 40px; overflow:hidden}
.hero--elevated .hero-orb{
  position:absolute; inset:-20% -10% auto -10%; height:100%;
  background:
    radial-gradient(42% 42% at 20% 20%, rgba(34,211,238,.15), transparent 60%),
    radial-gradient(40% 40% at 80% 0%, rgba(167,139,250,.13), transparent 65%),
    radial-gradient(60% 60% at 60% 80%, rgba(34,211,238,.08), transparent 65%);
  filter:saturate(140%) blur(6px);
  animation:orbfloat 12s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes orbfloat{to{transform:translateY(-12px) translateX(6px)}}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center}
.hero-title{font-size:clamp(40px,7vw,68px); line-height:1.03; letter-spacing:-.02em}
.gradline{background:linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; position:relative}
.gradline::after{content:""; position:absolute; left:0; right:0; bottom:-8px; height:10px; background:linear-gradient(90deg, rgba(34,211,238,.35), rgba(167,139,250,.35)); border-radius:999px; filter:blur(6px); opacity:.9}
.hero-sub{color:var(--muted); font-size:clamp(16px,2.3vw,20px); max-width:680px; margin-top:10px}
.hero-cta{display:flex; gap:12px; align-items:center; margin:22px 0 26px}

/* Trust & Bullets */
.trust{display:flex; align-items:center; gap:18px; margin-top:20px}
.trust-label{color:var(--muted); font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.trust-logos{display:flex; gap:12px; flex-wrap:wrap; opacity:.95}
.t{padding:8px 12px; border-radius:12px; border:1px solid var(--hair); background:rgba(255,255,255,.03); font-weight:600}
.t1{border-color:#22d3ee40}.t3{border-color:#34d39940}
.t1:hover{background:#0c182b} .t3:hover{background:#0d1f1a}
.t1 a,.t3 a{color:inherit; text-decoration:none}

.bullets{margin:0; padding-left:20px}
.bullets li{margin:8px 0}
.bullets--emph{list-style:none; padding:0}
.bullets--emph li{margin:10px 0; padding-left:30px; position:relative}
.bullets--emph li::before{content:""; position:absolute; left:0; top:.55em; width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 0 0 3px rgba(34,211,238,.12)}

/* Micro Info Cards */
.microgrid{display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); margin:12px auto 26px}
@media (max-width:1000px){ .microgrid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .microgrid{grid-template-columns:1fr} }
.microcard{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)) border-box;
  border:1px solid transparent;
  border-radius:16px; padding:16px 16px 14px; box-shadow:var(--shadow); position:relative;
}
.microcard.luxe::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(120px 18px at 16px 16px, rgba(255,255,255,.16), transparent 60%);
}
.microcard h3{margin:6px 0 4px; font-size:18px}
.micro-ico{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:18px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#041016; font-weight:800; box-shadow:0 8px 24px rgba(34,211,238,.18)}

/* Grid & Cards */
.grid{display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr))}
.grid2{display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)) border-box;
  border:1px solid transparent;
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  position:relative;
}
.card.glass{backdrop-filter:saturate(130%) blur(6px)}
.card .card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.card .chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; font-weight:700; font-size:12px; color:#041016;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 8px 20px rgba(34,211,238,.18)}
.chip.tone{color:var(--text); background:rgba(255,255,255,.06); border:1px solid var(--hair)}
.chip.action{margin-top:8px}
.card.luxe::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(120px 20px at 16px 16px, rgba(255,255,255,.17), transparent 60%),
    radial-gradient(120px 20px at calc(100% - 16px) calc(100% - 16px), rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.03) 60%, transparent);
  mask:linear-gradient(#000,#000) exclude, linear-gradient(#000,#000);
  opacity:.7;
}
.card.luxe:hover{box-shadow:0 18px 48px rgba(0,0,0,.35); background:
  linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) padding-box,
  linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08)) border-box}
.card h3{margin:0 0 8px}
.card p.lead{margin:6px 0 10px}

/* Icon lists */
.checks{list-style:none; padding-left:0; margin:10px 0 0}
.checks.tight{margin-top:4px}
.checks li{padding-left:28px; position:relative; margin:8px 0; color:var(--text)}
.checks li::before{
  content:""; position:absolute; left:0; top:.2em; width:18px; height:18px; opacity:.95;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5L9 16.2z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5L9 16.2z"/></svg>') center/contain no-repeat;
}

/* Services Grid Cards */
.svc-grid{display:grid; grid-template-columns:2fr 1.5fr; gap:16px}
.svc-grid .svc-card:nth-child(3){grid-column:1/2}
.svc-grid .svc-card:nth-child(4){grid-column:2/3}
@media (max-width:1000px){ .svc-grid{grid-template-columns:1fr} }
.svc-card{display:block; position:relative; padding:18px; transition:transform .15s ease, box-shadow .15s ease, background .2s ease}
.svc-card:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.28)}
.svc-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.svc-arrow{width:28px; height:28px; border-radius:50%; border:1px solid var(--hair); display:inline-flex; align-items:center; justify-content:center}
.svc-arrow::before{content:""; width:12px; height:12px; background:currentColor; mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M13 5l7 7-7 7-1.4-1.4 4.6-4.6H4v-2h12.2l-4.6-4.6L13 5z"/></svg>') center/contain no-repeat}

/* Forms */
.grid2{display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr))}
label{display:block; margin:10px 0}
input,textarea,select{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--hair); background:var(--panel); color:var(--text)}
input::placeholder, textarea::placeholder{color:#b0bccb}
input:focus,textarea:focus,select:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
.checkbox{display:flex; align-items:flex-start; gap:10px; margin-top:8px}
.form-status{margin-top:10px; min-height:20px}
.hp{position:absolute !important; left:-9999px !important; opacity:0 !important}
.contact-wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:start}

/* Elegante Consent-Komponente */
.consent{
  display:grid; grid-template-columns:auto 1fr; align-items:flex-start; gap:12px; margin:12px 0 6px;
  padding:14px 14px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--hair);
  position:relative;
}
.consent:hover{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03))}
.consent input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:2px 0 0;
  border-radius:6px; outline:none; cursor:pointer;
  border:1px solid rgba(148,163,184,.4);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.22);
  position:relative;
}
.consent input[type="checkbox"]:focus-visible{ box-shadow:0 0 0 3px var(--ring), inset 0 1px 0 rgba(255,255,255,.08) }
.consent input[type="checkbox"]:checked{
  border-color:transparent;
  background:
    linear-gradient(135deg, var(--accent), var(--accent-2)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.08)) border-box;
}
.consent input[type="checkbox"]:checked::after{
  content:""; position:absolute; inset:0; margin:auto; width:14px; height:14px; background:#041016;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5L9 16.2z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5L9 16.2z"/></svg>') center/contain no-repeat;
}
.consent .check{ position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(120px 16px at 16px 16px, rgba(255,255,255,.16), transparent 60%); }
.consent .labeltext{display:flex; flex-direction:column; gap:4px; font-size:15px}
.consent .labeltext .link{color:var(--accent)}
.consent .labeltext .link:hover{text-decoration:underline}
.assure{display:flex; align-items:center; gap:8px; margin-top:10px}
.assure-dot{width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent-2))}

/* CTA + Footer */
.footer-cta{padding:36px 0; background:
  radial-gradient(600px 300px at 10% 0%, rgba(34,211,238,.10), transparent 60%),
  radial-gradient(700px 320px at 100% 100%, rgba(167,139,250,.10), transparent 60%),
  rgba(255,255,255,.02); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:20px}
.cta-inner h3{margin:0; font-size:clamp(20px,3vw,26px)}
.site-footer{background:rgba(8,13,23,.55)}
.footer-top{display:grid; gap:24px; grid-template-columns:2fr 1fr 1fr; padding:38px 0 18px; border-bottom:1px solid var(--hair)}
.footer-col h4{margin:0 0 10px; font-size:14px; letter-spacing:.08em; text-transform:uppercase}
.footer-col ul{list-style:none; padding:0; margin:0}
.footer-col li{margin:6px 0}
.footer-col a{color:var(--muted)}
.footer-col a:hover{color:var(--text); text-decoration:underline; text-underline-offset:3px}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; padding:14px 0 34px; color:var(--muted)}
.to-top{display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--hair); background:rgba(255,255,255,.04); color:var(--text); box-shadow:0 8px 22px rgba(0,0,0,.25)}
.to-top:hover{transform:translateY(-2px)}

/* Breadcrumb / Page hero */
.page-hero{padding:110px 0 24px; background:transparent}
.page-hero h1{font-size:clamp(32px,5vw,48px)}
.keybar{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px}
.keybar > div{background:rgba(255,255,255,.05); border:1px solid var(--hair); border-radius:12px; padding:10px 12px}
.breadcrumb{border-bottom:1px solid var(--hair); background:rgba(255,255,255,.02); margin-top:var(--nav-h)}
.breadcrumb .container{display:flex; gap:8px; align-items:center; padding:10px 22px; color:var(--muted)}
.breadcrumb a{color:var(--text)}

/* FAQ */
.faq-grid{display:grid; gap:12px}
.faq{border:1px solid var(--hair); border-radius:14px; background:var(--card-grad); overflow:hidden; position:relative}
.faq.luxe::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(120px 20px at 18px 18px, rgba(255,255,255,.17), transparent 60%); opacity:.7}
.faq > summary{cursor:pointer; list-style:none; padding:14px 16px; font-weight:700; display:flex; align-items:center; gap:10px}
.faq > summary::-webkit-details-marker{display:none}
.faq > summary span{flex:1}
.faq > summary::after{content:"+"; font-weight:800; opacity:.8}
.faq[open] > summary::after{content:"–"}
.faq-body{padding:0 16px 16px; color:var(--text)}

/* Reveal (Scroll-in) */
.reveal{opacity:0; transform:translateY(14px); transition:all .6s cubic-bezier(.2,.6,.2,1)}
.reveal.is-visible{opacity:1; transform:none}
.reveal-1{opacity:0; transform:translateY(10px); animation:fadeUp .7s .1s forwards}
.reveal-2{opacity:0; transform:translateY(10px); animation:fadeUp .8s .2s forwards}
.reveal-3{opacity:0; transform:translateY(10px); animation:fadeUp .8s .35s forwards}
.reveal-4{opacity:0; transform:translateY(10px); animation:fadeUp .8s .5s forwards}
@keyframes fadeUp{to{opacity:1; transform:none}}

/* --- Freundlicher Page-Enter --- */
.soft-enter .nav{animation:enterDown .6s ease-out both}
.soft-enter .hero-title{animation:enterUp .7s .05s ease-out both}
.soft-enter .hero-sub{animation:enterUp .7s .15s ease-out both}
.soft-enter .hero-cta,.soft-enter .kpi,.soft-enter .microcard,
.soft-enter .svc-card,.soft-enter .card{animation:enterUp .7s .25s ease-out both}
@keyframes enterUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes enterDown{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}

/* Gradline subtle alive */
.soft-enter .gradline{ background-size:200% 100%; animation:gradSweep 2.2s ease-out both; }
@keyframes gradSweep{ 0%{background-position:100% 0; filter:saturate(1)} 100%{background-position:0 0; filter:saturate(1.1)} }

/* --- Willkommens-Toast (optional) --- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(10px);
  background:rgba(8,13,23,.75); backdrop-filter:saturate(140%) blur(8px);
  border:1px solid var(--hair); border-radius:14px; padding:12px 16px;
  display:flex; gap:10px; align-items:center; box-shadow:0 18px 40px rgba(0,0,0,.35);
  color:var(--text); z-index:99992; opacity:0; pointer-events:none;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s}
.toast .dot{ width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 0 0 3px rgba(34,211,238,.15); }
.toast .close{ margin-left:10px; background:transparent; border:1px solid var(--hair); color:var(--text); border-radius:10px; padding:6px 8px; cursor:pointer; }
.toast .close:hover{background:rgba(255,255,255,.06)}

/* --- OPENING INTRO (Splash) --- */
.intro{
  position:fixed; inset:0; z-index:10000; display:grid; place-items:center;
  background:
    radial-gradient(900px 520px at 100% 0%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(900px 520px at 0% 100%, rgba(167,139,250,.10), transparent 60%),
    #0b1222;
  overflow:hidden;
}
.intro__logo{
  display:flex; align-items:center; gap:12px; padding:18px 22px; border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(8px) scale(.98); opacity:0;
  will-change:transform,opacity,filter;
}
.intro__logo img{width:34px; height:34px}
.intro__name{font-weight:900; letter-spacing:.14em}
.intro__shine{
  position:absolute; inset:-20% -20%; pointer-events:none;
  background:
    radial-gradient(1100px 500px at 50% -20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(1200px 600px at -10% 110%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(1200px 600px at 110% 10%, rgba(167,139,250,.18), transparent 60%);
  filter:blur(14px); opacity:.0;
}
.intro.show .intro__logo{animation:introPop .7s ease-out forwards .05s}
.intro.show .intro__shine{animation:introShine 1.2s ease-out forwards}
.intro.hide{animation:introFade .5s ease-in forwards}
@keyframes introPop{ to{ transform:translateY(0) scale(1); opacity:1; } }
@keyframes introShine{ to{ opacity:.8; } }
@keyframes introFade{ to{ opacity:0; } }

/* Body lock while intro plays */
.body-locked{height:100vh; overflow:hidden}

/* ----------------- RESPONSIVE ----------------- */
@media (max-width:1200px){ .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .keybar{grid-template-columns:1fr}
}

/* ===== Mobile Polish (≤ 820px) — NUR MOBILE! ===== */
@media (max-width:820px){
  :root{ --nav-h:56px; }

  /* Layout + Container */
  .container{padding-inline:16px}
  .section{padding:64px 0}
  .section.alt{background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
    radial-gradient(700px 420px at 0% 0%, rgba(34,211,238,.05), transparent 60%)}

  /* Nav / Kebab */
  .nav-inner{height:var(--nav-h)}
  .nav{padding-top:env(safe-area-inset-top)}
  .nav-links{display:none}
  .kebab-toggle{display:inline-flex; width:44px; height:44px; border-radius:14px}
  .kebab-menu{right:12px; width:92vw; max-width:360px; padding:10px}
  .kebab-menu a{padding:14px; border-radius:14px}
  .kebab-menu .menu-cta{padding:14px}

  /* Hero + Page-Hero */
  .hero,.page-hero{padding-top:88px; padding-bottom:18px}
  .hero-title,.page-hero h1{font-size:clamp(28px,7.5vw,36px); line-height:1.08}
  .hero-sub{font-size:16px}
  .hero-cta{flex-wrap:wrap}
  .btn{width:100%; text-align:center}
  .btn.small{width:auto}

  /* Grids einspaltig */
  .grid,.about-wrap,.grid2{grid-template-columns:1fr}
  .grid{gap:14px}
  .grid2{gap:10px}

  /* Cards / FAQ weichere Optik & mehr Luft */
  .card{padding:16px; border-radius:16px; box-shadow:0 12px 28px rgba(0,0,0,.28)}
  .faq{border-radius:16px}
  .faq > summary{padding:16px}
  .faq-body{padding:0 16px 16px}

  /* Microcards dichter */
  .microgrid{gap:12px}
  .microcard{padding:14px}

  /* Keybar untereinander */
  .keybar{grid-template-columns:1fr; gap:10px}
  .keybar > div{padding:12px}

  /* Breadcrumb kompakter */
  .breadcrumb .container{padding:8px 16px; font-size:14px}

  /* Kontaktbereich (falls vorhanden) stapeln */
  .contact-wrap{grid-template-columns:1fr; gap:16px}

  /* CTA stapeln */
  .footer-cta{padding:28px 0}
  .cta-inner{flex-direction:column; align-items:stretch; gap:12px}
  .cta-inner .btn{width:100%}

  /* Footer einspaltig */
  .footer-top{grid-template-columns:1fr; gap:18px}
  .footer-bottom{flex-direction:column; gap:10px; text-align:center}
  .to-top{align-self:center}

  /* Modals */
  dialog.modal{width:92vw; max-width:480px; border-radius:16px; border:1px solid var(--hair); background:rgba(10,16,28,.96); color:var(--text)}
  dialog.modal article{padding:12px}
  dialog.modal header{display:flex; align-items:center; justify-content:space-between; gap:8px}
  dialog.modal .close{appearance:none; border:1px solid var(--hair); background:transparent; color:var(--text); border-radius:10px; padding:6px 10px}

  /* Tap Targets & Scrollbars */
  a, button{min-height:40px}
  ::-webkit-scrollbar{width:0; height:0} /* optisch ruhiger auf Mobile */

  /* Safety: keine X-Scrollbars auf Seitenabschnitten */
  .section, .site-footer, .breadcrumb{overflow-x:clip}
}

/* Barrierefreiheit: weniger Bewegung */
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-1,.reveal-2,.reveal-3,.reveal-4,
  .soft-enter .nav,.soft-enter .hero-title,.soft-enter .hero-sub,.soft-enter .hero-cta,
  .soft-enter .kpi,.soft-enter .microcard,.soft-enter .svc-card,.soft-enter .card,
  .gradline,.intro.show .intro__logo,.intro.show .intro__shine,.intro.hide{animation:none !important}
  .intro{opacity:1}
}

/* === DESKTOP GUARDS (lassen PC-Verhältnis unberührt) === */
@media (min-width:821px){
  :root{ --nav-h:72px; }
  .container{ padding-inline:22px; }
  .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .svc-grid{ grid-template-columns:2fr 1.5fr; }
  .keybar{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hero,.page-hero{ padding-top:120px; }
}

/* Falls ein Element breiter ist als der Viewport: clippe nur Body in X */
body{ overflow-x: hidden; }
.section, .container, .site-footer, .breadcrumb { overflow-x: visible; }