/* ============================================================
   TS Pro IT-Dienstleistung Berlin GmbH — Stylesheet
   Hell/Dunkel · modern · barrierefrei · Original-Logo (mask)
   ============================================================ */

/* Schriften selbst gehostet – keine externen Aufrufe (DSGVO) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('Inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('Inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('Inter-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('SpaceGrotesk-400.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('SpaceGrotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('SpaceGrotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('SpaceGrotesk-700.woff2') format('woff2')}

:root{
  --bg:#FFFFFF; --bg-soft:#F4F6F9; --bg-elev:#FFFFFF;
  --fg:#0A0A0C; --fg-soft:#565C68; --fg-faint:#8A8F9A;
  --line:#E6E8EC; --line-2:#D2D6DD;
  --accent:#0A0A0B; --accent-2:#3A3A3E; --accent-ink:#000000; --accent-wash:#F0F1F3;
  --card:#FFFFFF; --chip:#F4F6F9;
  --shadow-sm:0 1px 2px rgba(16,18,28,.06),0 1px 1px rgba(16,18,28,.04);
  --shadow:0 10px 30px -12px rgba(16,18,28,.22),0 4px 10px -6px rgba(16,18,28,.12);
  --shadow-lg:0 30px 60px -20px rgba(16,18,28,.30);
  --logo-fg:#0A0A0C;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1200px; --pad:clamp(20px,5vw,64px);
  --r:14px; --r-sm:9px; --r-lg:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{
  --bg:#0A0B0F; --bg-soft:#0F1117; --bg-elev:#13151C;
  --fg:#F3F4F7; --fg-soft:#A4A9B4; --fg-faint:#6E737E;
  --line:#22252E; --line-2:#30343E;
  --accent:#F4F5F7; --accent-2:#C9CCD3; --accent-ink:#FFFFFF; --accent-wash:#191B21;
  --card:#13151C; --chip:#171A22;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 14px 40px -16px rgba(0,0,0,.7);
  --shadow-lg:0 40px 80px -24px rgba(0,0,0,.8);
  --logo-fg:#F3F4F7;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}}

body{margin:0;font-family:var(--font-body);color:var(--fg);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .4s var(--ease),color .4s var(--ease)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:var(--r-sm);font-family:var(--font-body);font-size:.85rem}
.skip:focus{left:8px}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.07;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(2.6rem,7vw,5.2rem);font-weight:700;letter-spacing:-.04em}
h2{font-size:clamp(1.8rem,4vw,2.9rem);letter-spacing:-.03em}
h3{font-size:clamp(1.15rem,2vw,1.45rem)}
p{margin:0 0 1em}

.eyebrow{font-family:var(--font-body);font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 1.2rem;display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* Logo (Original, freigestellt; schwarz für hell, weiß für dunkel) */
.logo{display:inline-block;--h:30px;height:var(--h);aspect-ratio:1203/675;width:auto;background:url(logo-black.png) center/contain no-repeat}
[data-theme="dark"] .logo{background-image:url(logo-white.png)}

.site-head{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:18px}
.brand{display:flex;align-items:center;gap:11px;color:var(--fg)}
.brand .logo{--h:52px}
.brand .brand-text{display:flex;flex-direction:column;line-height:1}
.brand .brand-name{font-family:var(--font-display);font-weight:700;font-size:1.04rem;letter-spacing:-.02em}
.brand .brand-sub{font-family:var(--font-body);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-soft);margin-top:3px}

.nav{display:flex;align-items:center;gap:8px}
.nav-links{display:flex;align-items:center;gap:8px}
.nav .link{font-size:.93rem;color:var(--fg-soft);padding:8px 12px;border-radius:var(--r-sm);transition:color .15s,background .15s}
.nav .link:hover,.nav .link:focus-visible{color:var(--fg);background:var(--chip)}
.nav .nav-cta{font-family:var(--font-body);font-size:.82rem;color:var(--bg);background:var(--accent);padding:10px 16px;border-radius:var(--r-sm);transition:transform .15s,filter .15s}
.nav .nav-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}

.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--card);color:var(--fg);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.icon-btn:hover{border-color:var(--fg);transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px}
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:block}
.nav-toggle{display:none}

.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-body);font-size:.88rem;padding:13px 22px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;transition:transform .15s var(--ease),filter .15s,background .15s,border-color .15s}
.btn-primary{background:var(--accent);color:var(--bg)}
.btn-primary:hover,.btn-primary:focus-visible{filter:brightness(1.08);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--fg);transform:translateY(-2px)}
.btn .arrow{transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .wrap{position:relative;z-index:2;padding-top:clamp(64px,11vw,150px);padding-bottom:clamp(56px,9vw,120px)}
.hero h1{max-width:15ch}
.hero h1 .grad{color:var(--fg)}
@supports((-webkit-text-stroke:1px #000) or (text-stroke:1px #000)){.hero h1 .grad{color:transparent;-webkit-text-stroke:2px var(--fg);text-stroke:2px var(--fg)}}
.hero .lead{font-size:clamp(1.08rem,1.7vw,1.35rem);color:var(--fg-soft);max-width:56ch;margin-top:1.8rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.6rem}
.hero-logo{display:none}
@media (max-width:880px){.hero-logo{display:none}}

.mesh{display:none}
.mesh i{position:absolute;border-radius:50%;mix-blend-mode:multiply;animation:float 20s var(--ease) infinite alternate;display:block}
[data-theme="dark"] .mesh{opacity:.4}
[data-theme="dark"] .mesh i{mix-blend-mode:screen}
.mesh i:nth-child(1){width:42vw;height:42vw;left:6%;top:-4%;background:var(--accent)}
.mesh i:nth-child(2){width:34vw;height:34vw;right:4%;top:8%;background:var(--accent-2);animation-delay:-7s}
.mesh i:nth-child(3){width:24vw;height:24vw;left:44%;top:34%;background:#16BFC7;animation-delay:-13s}
@keyframes float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(5%,7%,0) scale(1.14)}}

.statusbar{border-bottom:1px solid var(--line);background:var(--bg-soft);font-family:var(--font-body);font-size:.74rem;color:var(--fg-soft)}
.statusbar .wrap{display:flex;flex-wrap:wrap;gap:9px 30px;padding-block:12px}
.statusbar b{color:var(--fg);font-weight:600}

.section{padding-block:clamp(60px,8vw,112px)}
.section.soft{background:var(--bg-soft);border-block:1px solid var(--line)}
.section-head{max-width:64ch;margin-bottom:clamp(36px,5vw,60px)}
.section-head p{color:var(--fg-soft);font-size:1.06rem;margin-top:.85rem}

.spec{border-top:1px solid var(--fg)}
.spec-row{display:grid;grid-template-columns:66px 1fr;gap:0 24px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start;transition:background .2s,padding-left .2s var(--ease)}
.spec-row:hover{background:linear-gradient(90deg,var(--accent-wash),transparent 55%);padding-left:14px}
.spec-no{font-family:var(--font-display);font-weight:300;font-size:2rem;line-height:1;color:var(--fg-faint);font-feature-settings:"tnum";transition:color .2s}
.spec-row:hover .spec-no{color:var(--fg)}
.spec-body h3{margin-bottom:.55rem}
.spec-body p{color:var(--fg-soft);margin:0;max-width:64ch}
.spec-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:1rem}
.spec-tags span{font-family:var(--font-body);font-size:.7rem;color:var(--fg-soft);border:1px solid var(--line-2);border-radius:99px;padding:3px 11px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid3 .cell{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.grid3 .cell:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.grid3 .cell .k{font-family:var(--font-body);font-size:.72rem;color:var(--accent);letter-spacing:.1em;text-transform:uppercase}
.grid3 .cell h3{margin:14px 0 8px}
.grid3 .cell p{color:var(--fg-soft);margin:0;font-size:.97rem}
@media (max-width:860px){.grid3{grid-template-columns:1fr}}

.facts{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:start}
.facts dl{margin:0;border-top:1px solid var(--fg)}
.facts .row{display:grid;grid-template-columns:42% 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.facts dt{font-family:var(--font-body);font-size:.78rem;color:var(--fg-soft);text-transform:uppercase;letter-spacing:.06em}
.facts dd{margin:0;font-size:.99rem}
.facts .ph{color:var(--accent);font-family:var(--font-body);font-size:.88rem}
@media (max-width:860px){.facts{grid-template-columns:1fr;gap:26px}}

.contact{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:start}
@media (max-width:860px){.contact{grid-template-columns:1fr;gap:34px}}
.contact-card{border:1px solid var(--line);border-radius:var(--r);padding:28px;background:var(--card);box-shadow:var(--shadow-sm)}
.contact-line{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.contact-line:last-child{border-bottom:0}
.contact-line .lbl{font-family:var(--font-body);font-size:.72rem;color:var(--fg-soft);text-transform:uppercase;letter-spacing:.08em;width:92px;flex:none}
.contact-line .val{font-size:1rem}
.contact-line a{color:var(--accent)}
.contact-line .ph{color:var(--accent);font-family:var(--font-body)}

.site-foot{background:var(--bg-soft);border-top:1px solid var(--line);color:var(--fg-soft);padding-block:clamp(50px,7vw,76px);font-size:.92rem}
.site-foot a:hover{color:var(--fg)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:42px;padding-bottom:42px;border-bottom:1px solid var(--line)}
@media (max-width:860px){.foot-top{grid-template-columns:1fr;gap:30px}}
.foot-brand .logo{--h:92px;margin-bottom:18px}
.foot-brand p{color:var(--fg-soft);margin:0;max-width:36ch;font-size:.92rem}
.foot-col h4{font-family:var(--font-body);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-soft);font-weight:500;margin-bottom:14px}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:26px;font-family:var(--font-body);font-size:.76rem;color:var(--fg-faint)}

.legal{padding-block:clamp(48px,7vw,90px)}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:.4em}
.legal .updated{font-family:var(--font-body);font-size:.78rem;color:var(--fg-soft);margin-bottom:2.4rem}
.legal h2{font-size:1.45rem;margin:2.4em 0 .7em;padding-top:1.4em;border-top:1px solid var(--line)}
.legal h2:first-of-type{border-top:0;padding-top:0}
.legal h3{font-size:1.1rem;margin:1.6em 0 .5em}
.legal p,.legal li{color:var(--fg);font-size:1rem}
.legal ul,.legal ol{padding-left:1.2em}
.legal li{margin-bottom:.4em}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal .ph{background:var(--accent-wash);color:var(--accent-ink);font-family:var(--font-body);font-size:.86em;padding:1px 7px;border-radius:4px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);white-space:nowrap}
.legal .note{background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:16px 20px;margin:1.6em 0;font-size:.92rem;color:var(--fg-soft)}
.legal address{font-style:normal;line-height:1.7}
.backlink{font-family:var(--font-body);font-size:.82rem;color:var(--fg-soft);display:inline-flex;gap:.5em;margin-bottom:2rem}
.backlink:hover{color:var(--fg)}

@media (max-width:780px){
  .nav-toggle{display:inline-grid}
  .nav-links{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--pad) 20px;transform:translateY(-130%);transition:transform .28s var(--ease)}
  .nav-links[data-open="true"]{transform:translateY(0)}
  .nav-links .link{padding:14px 0;border-bottom:1px solid var(--line);border-radius:0;font-size:1rem}
  .nav-links .nav-cta{margin-top:14px;text-align:center}
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
::selection{background:var(--accent);color:var(--bg)}

/* Rotierendes 3D-Logo im Hero */
.hero-mark{position:absolute;right:max(40px,calc((100% - 1480px)/2));top:50%;transform:translateY(-50%);width:min(24vw,196px);z-index:1;perspective:1150px;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:20px}
.hero-mark .spin3d{position:relative;width:100%;height:min(20vw,166px);transform-style:preserve-3d;animation:logoturn 7s ease-in-out infinite;will-change:transform}
.hero-mark .face{position:absolute;inset:0;width:100%;height:100%}
.hero-mark .face path{fill:var(--mark-fill)}
.hero-mark .face:nth-child(1){transform:translateZ(5px)}
.hero-mark .face:nth-child(2){transform:translateZ(2.5px)}
.hero-mark .face:nth-child(3){transform:translateZ(0)}
.hero-mark .face:nth-child(4){transform:translateZ(-2.5px)}
.hero-mark .face:nth-child(5){transform:translateZ(-5px)}
@keyframes logoturn{0%{transform:rotateX(8deg) rotateY(-32deg)}50%{transform:rotateX(8deg) rotateY(32deg)}100%{transform:rotateX(8deg) rotateY(-32deg)}}
@media (max-width:880px){.hero-mark{display:none}}
@media (prefers-reduced-motion:reduce){.hero-mark .spin3d{transform:rotateX(8deg) rotateY(0deg)}}

/* ============ Modern: Grau-Verläufe + Glas-Optik (S/W) ============ */
/* Header: stärkeres Frosted Glass */
.site-head{background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 74%,transparent),color-mix(in srgb,var(--bg) 56%,transparent));backdrop-filter:saturate(160%) blur(20px);-webkit-backdrop-filter:saturate(160%) blur(20px)}

/* Hero: dezente, driftende Grau-Aura hinter dem 3D-Logo */
.hero::before{content:"";position:absolute;inset:-12% -6%;z-index:0;pointer-events:none;
  background:radial-gradient(38% 46% at 68% 26%,rgba(0,0,0,.08),transparent 70%),
             radial-gradient(42% 52% at 22% 72%,rgba(0,0,0,.06),transparent 70%),
             radial-gradient(60% 60% at 48% 50%,rgba(0,0,0,.035),transparent 72%);
  animation:auraDrift 18s ease-in-out infinite alternate}
[data-theme="dark"] .hero::before{
  background:radial-gradient(38% 46% at 68% 26%,rgba(255,255,255,.09),transparent 70%),
             radial-gradient(42% 52% at 22% 72%,rgba(255,255,255,.06),transparent 70%),
             radial-gradient(60% 60% at 48% 50%,rgba(255,255,255,.04),transparent 72%)}
@keyframes auraDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(2.5%,2%,0) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none}}

/* Soft-Sektionen: Grau-Verlauf als Tiefe (damit Glas etwas zum Brechen hat) */
.section.soft{background:
  radial-gradient(55% 65% at 88% -5%,rgba(0,0,0,.055),transparent 60%),
  radial-gradient(48% 58% at -5% 105%,rgba(0,0,0,.05),transparent 60%),
  var(--bg-soft)}
[data-theme="dark"] .section.soft{background:
  radial-gradient(55% 65% at 88% -5%,rgba(255,255,255,.06),transparent 60%),
  radial-gradient(48% 58% at -5% 105%,rgba(255,255,255,.05),transparent 60%),
  var(--bg-soft)}

/* Glas-Karten */
.grid3 .cell{background:linear-gradient(155deg,rgba(255,255,255,.72),rgba(255,255,255,.32));
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 16px 40px -18px rgba(16,18,28,.24),inset 0 1px 0 rgba(255,255,255,.75)}
[data-theme="dark"] .grid3 .cell{background:linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 22px 50px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)}
.grid3 .cell:hover{transform:translateY(-5px);box-shadow:0 26px 56px -20px rgba(16,18,28,.32),inset 0 1px 0 rgba(255,255,255,.8);border-color:rgba(255,255,255,.85)}
[data-theme="dark"] .grid3 .cell:hover{box-shadow:0 30px 64px -22px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.09);border-color:rgba(255,255,255,.16)}

/* Glas-Kontaktkarte */
.contact-card{background:linear-gradient(155deg,rgba(255,255,255,.7),rgba(255,255,255,.3));
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 16px 40px -18px rgba(16,18,28,.22),inset 0 1px 0 rgba(255,255,255,.75)}
[data-theme="dark"] .contact-card{background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 22px 50px -20px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.06)}

/* Glas-Ghost-Button */
.btn-ghost{background:color-mix(in srgb,var(--bg) 42%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* Typo: Buttons/Labels mit etwas mehr Gewicht (statt Mono-Look) */
.btn{font-weight:600;letter-spacing:.005em}
.eyebrow{font-weight:600}
.statusbar{letter-spacing:.01em}

/* ============ Apple-style „Liquid Glass" ============ */
/* weichere Rundungen */
:root{--r:18px;--r-sm:12px;--r-lg:26px}

/* Farbiger, weicher Verlaufs-Hintergrund im Hero (Glas bricht ihn) */
.hero::before{content:"";position:absolute;inset:-15% -8%;z-index:0;pointer-events:none;filter:saturate(120%);
  background:
    radial-gradient(34% 42% at 70% 22%,rgba(99,102,241,.24),transparent 70%),
    radial-gradient(40% 48% at 22% 70%,rgba(45,212,191,.20),transparent 70%),
    radial-gradient(36% 44% at 52% 52%,rgba(244,114,182,.18),transparent 72%),
    radial-gradient(50% 52% at 88% 78%,rgba(59,130,246,.16),transparent 72%);
  animation:auraDrift 20s ease-in-out infinite alternate}
[data-theme="dark"] .hero::before{filter:saturate(135%);
  background:
    radial-gradient(34% 42% at 70% 22%,rgba(99,102,241,.34),transparent 70%),
    radial-gradient(40% 48% at 22% 70%,rgba(45,212,191,.26),transparent 70%),
    radial-gradient(36% 44% at 52% 52%,rgba(168,85,247,.30),transparent 72%),
    radial-gradient(50% 52% at 88% 78%,rgba(59,130,246,.22),transparent 72%)}

/* Farbverläufe in den „soft"-Sektionen */
.section.soft{position:relative;background:
  radial-gradient(46% 58% at 90% -8%,rgba(99,102,241,.14),transparent 62%),
  radial-gradient(42% 54% at -6% 108%,rgba(45,212,191,.13),transparent 62%),
  radial-gradient(38% 50% at 50% 120%,rgba(244,114,182,.10),transparent 64%),
  var(--bg-soft)}
[data-theme="dark"] .section.soft{background:
  radial-gradient(46% 58% at 90% -8%,rgba(99,102,241,.22),transparent 62%),
  radial-gradient(42% 54% at -6% 108%,rgba(45,212,191,.18),transparent 62%),
  radial-gradient(38% 50% at 50% 120%,rgba(168,85,247,.18),transparent 64%),
  var(--bg-soft)}

/* Glas-Panels: mehr Unschärfe, Sättigung, Lichtkante */
.grid3 .cell,.contact-card{
  background:linear-gradient(150deg,rgba(255,255,255,.55),rgba(255,255,255,.16));
  -webkit-backdrop-filter:blur(30px) saturate(185%);backdrop-filter:blur(30px) saturate(185%);
  border:1px solid rgba(255,255,255,.6);border-radius:var(--r-lg);
  box-shadow:0 24px 60px -22px rgba(31,38,80,.30),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.12)}
[data-theme="dark"] .grid3 .cell,[data-theme="dark"] .contact-card{
  background:linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 28px 70px -24px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.14)}
.grid3 .cell:hover{transform:translateY(-6px);box-shadow:0 34px 74px -22px rgba(31,38,80,.40),inset 0 1px 0 rgba(255,255,255,.95);border-color:rgba(255,255,255,.85)}
[data-theme="dark"] .grid3 .cell:hover{box-shadow:0 38px 84px -24px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.18);border-color:rgba(255,255,255,.2)}

/* Liquid-Glass-Header */
.site-head{background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 70%,transparent),color-mix(in srgb,var(--bg) 48%,transparent));
  -webkit-backdrop-filter:blur(26px) saturate(185%);backdrop-filter:blur(26px) saturate(185%);
  border-bottom:1px solid color-mix(in srgb,var(--fg) 8%,transparent)}

/* Pill-Buttons mit Glanzkante */
.btn{border-radius:999px}
.btn-primary{background:var(--accent);box-shadow:0 8px 22px -8px color-mix(in srgb,var(--accent) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-ghost{background:color-mix(in srgb,var(--bg) 38%,transparent);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border:1px solid color-mix(in srgb,var(--fg) 14%,transparent)}
.nav .nav-cta{border-radius:999px;box-shadow:0 8px 22px -8px color-mix(in srgb,var(--accent) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.22)}
.icon-btn{border-radius:999px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:color-mix(in srgb,var(--bg) 55%,transparent)}

/* Status-Leiste & Footer leicht glasig */
.statusbar{background:linear-gradient(to bottom,color-mix(in srgb,var(--bg-soft) 60%,transparent),color-mix(in srgb,var(--bg-soft) 85%,transparent));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ============ Zurück zu Grau, stärkere Hell/Dunkel-Nuancen ============ */
.hero::before{filter:none;background:
  radial-gradient(50% 56% at 50% 26%,rgba(255,255,255,.95),transparent 60%),
  radial-gradient(40% 48% at 74% 30%,rgba(0,0,0,.13),transparent 70%),
  radial-gradient(44% 52% at 18% 76%,rgba(0,0,0,.11),transparent 70%),
  radial-gradient(46% 50% at 92% 86%,rgba(0,0,0,.09),transparent 72%)}
[data-theme="dark"] .hero::before{filter:none;background:
  radial-gradient(52% 58% at 50% 24%,rgba(255,255,255,.13),transparent 62%),
  radial-gradient(40% 48% at 74% 30%,rgba(255,255,255,.10),transparent 70%),
  radial-gradient(44% 52% at 18% 76%,rgba(255,255,255,.07),transparent 70%),
  radial-gradient(50% 56% at 90% 88%,rgba(0,0,0,.6),transparent 72%)}

.section.soft{background:
  radial-gradient(48% 56% at 50% 42%,rgba(255,255,255,.92),transparent 64%),
  radial-gradient(48% 60% at 92% -8%,rgba(0,0,0,.10),transparent 62%),
  radial-gradient(44% 56% at -6% 108%,rgba(0,0,0,.09),transparent 62%),
  var(--bg-soft)}
[data-theme="dark"] .section.soft{background:
  radial-gradient(48% 56% at 50% 46%,rgba(255,255,255,.08),transparent 64%),
  radial-gradient(48% 60% at 92% -8%,rgba(255,255,255,.07),transparent 62%),
  radial-gradient(50% 58% at -6% 110%,rgba(0,0,0,.5),transparent 62%),
  var(--bg-soft)}

/* Buttons/CTA neutral (kein farbiger Schimmer) */
.btn-primary{box-shadow:0 10px 26px -10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.nav .nav-cta{box-shadow:0 10px 26px -10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.2)}

/* ============ Graues Apple-Glas: kräftiger & klar sichtbar ============ */
/* Soft-Sektionen: leicht dunklerer Grund + starke Hell/Dunkel-Wolken -> Glas hebt sich ab */
.section.soft{background:
  radial-gradient(56% 62% at 50% 38%,rgba(255,255,255,.92),transparent 60%),
  radial-gradient(52% 62% at 92% -6%,rgba(0,0,0,.16),transparent 60%),
  radial-gradient(48% 60% at -6% 108%,rgba(0,0,0,.15),transparent 60%),
  linear-gradient(180deg,#E8EBF0,#EEF0F4)}
[data-theme="dark"] .section.soft{background:
  radial-gradient(56% 62% at 50% 42%,rgba(255,255,255,.11),transparent 60%),
  radial-gradient(52% 62% at 92% -6%,rgba(255,255,255,.08),transparent 60%),
  radial-gradient(52% 62% at -6% 110%,rgba(0,0,0,.62),transparent 60%),
  linear-gradient(180deg,#0B0D11,#101319)}

/* Hero-Aura kräftiger grau */
.hero::before{filter:none;background:
  radial-gradient(54% 60% at 50% 24%,rgba(255,255,255,1),transparent 56%),
  radial-gradient(44% 52% at 78% 30%,rgba(0,0,0,.17),transparent 66%),
  radial-gradient(48% 56% at 14% 80%,rgba(0,0,0,.15),transparent 66%),
  radial-gradient(50% 54% at 95% 90%,rgba(0,0,0,.12),transparent 68%)}
[data-theme="dark"] .hero::before{filter:none;background:
  radial-gradient(56% 62% at 50% 22%,rgba(255,255,255,.17),transparent 58%),
  radial-gradient(44% 52% at 78% 30%,rgba(255,255,255,.12),transparent 66%),
  radial-gradient(48% 56% at 14% 80%,rgba(255,255,255,.08),transparent 66%),
  radial-gradient(54% 60% at 93% 92%,rgba(0,0,0,.68),transparent 68%)}

/* Glas-Panels: frostig + heller Rand + kräftiger Schwebeschatten */
.grid3 .cell,.contact-card{
  background:linear-gradient(155deg,rgba(255,255,255,.58),rgba(255,255,255,.34));
  -webkit-backdrop-filter:blur(34px) saturate(140%);backdrop-filter:blur(34px) saturate(140%);
  border:1px solid rgba(255,255,255,.9);border-radius:var(--r-lg);
  box-shadow:0 36px 72px -24px rgba(15,18,30,.42),0 8px 22px -12px rgba(15,18,30,.22),inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(255,255,255,.2)}
[data-theme="dark"] .grid3 .cell,[data-theme="dark"] .contact-card{
  background:linear-gradient(155deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 40px 84px -26px rgba(0,0,0,.88),0 10px 26px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22)}
.grid3 .cell:hover{transform:translateY(-8px);box-shadow:0 48px 94px -24px rgba(15,18,30,.5),inset 0 1px 0 rgba(255,255,255,1);border-color:#fff}
[data-theme="dark"] .grid3 .cell:hover{box-shadow:0 56px 108px -26px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.3);border-color:rgba(255,255,255,.3)}

/* kräftigere Schatten: Header & Primär-Button */
.site-head{box-shadow:0 12px 34px -18px rgba(15,18,30,.32)}
[data-theme="dark"] .site-head{box-shadow:0 14px 38px -18px rgba(0,0,0,.72)}
.btn-primary{box-shadow:0 16px 34px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.28)}

/* ============ Logo-Drehung immer aktiv (auch bei reduzierter Bewegung) ============ */
@keyframes logospin{from{transform:rotateX(14deg) rotateY(0deg)}to{transform:rotateX(14deg) rotateY(360deg)}}
.hero-mark .spin3d{animation:logoturn 7s ease-in-out infinite !important;animation-duration:7s !important;animation-iteration-count:infinite !important}

/* ============ Logo-Grau + Firmen-Aufschrift ============ */
:root{--mark-fill:#565b62}
[data-theme="dark"]{--mark-fill:#c9ccd2}
.mark-cap{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;max-width:100%}
.mark-cap b{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:.01em;color:var(--fg);line-height:1}
.mark-cap em{font-style:normal;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-soft);line-height:1.3}