/* ════════════════════════════════════════════════════════════════
   Müller Stefan Fensterelemente — Design-System "Kinetic Blueprint"
   Graphit + Stahlblau · Space Grotesk × IBM Plex Sans
   ════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light dark;
  --color-bg:#F3F4F5; --color-surface:#FFFFFF; --color-fg:#14171A; --color-muted:#5B6470;
  --color-border:#D9DCDF; --color-primary:#2C6E93; --color-primary-dk:#1E5677;
  --color-secondary:#3A4652; --focus:#2C6E93;

  --space-xs:.5rem; --space-sm:1rem; --space-md:1.5rem; --space-lg:2.5rem; --space-xl:4rem; --space-2xl:6rem;
  --radius-sm:.25rem; --radius:.5rem; --radius-lg:.75rem;
  --shadow-sm:0 1px 2px rgb(20 30 40/.08); --shadow:0 12px 32px rgb(20 30 40/.14);

  --text-eyebrow:.8rem; --text-body:1.0625rem; --text-lead:clamp(1.15rem,1.4vw,1.35rem);
  --text-h4:clamp(1.15rem,1.4vw,1.35rem); --text-h3:clamp(1.25rem,2.2vw,1.6rem);
  --text-h2:clamp(1.5rem,3.5vw,2.25rem); --text-h1:clamp(2rem,5vw,3.5rem); --text-hero:clamp(2.4rem,6vw,4.5rem);
  --lh-tight:1.08; --lh-snug:1.25; --lh-body:1.6;
  --tracking-tight:-.02em; --tracking-label:.14em;

  --font-heading:'Space Grotesk',sans-serif; --font-body:'IBM Plex Sans',sans-serif;
  --dur:.4s; --ease-out:cubic-bezier(.16,1,.3,1);
}
.dark{
  --color-bg:#15181C; --color-surface:#1E2226; --color-fg:#E7E9EE; --color-muted:#9AA3AD;
  --color-border:#2C3238; --color-primary:#5AA3CC; --color-primary-dk:#7FBBDC; --color-secondary:#232A31;
  --focus:#5AA3CC;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--color-bg); color:var(--color-fg); font-family:var(--font-body);
  font-size:var(--text-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased;
  transition:background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.dark body{ color:#E7E9EE; }
h1,h2,h3,h4{ font-family:var(--font-heading); line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); margin:0; font-weight:700; }
h3{ font-weight:600; }
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:2px; }

.eyebrow{ font-family:var(--font-heading); font-size:var(--text-eyebrow); font-weight:600; letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--color-primary); display:inline-flex; align-items:center; gap:.5rem; }
.eyebrow::before{ content:''; width:1.4rem; height:2px; background:var(--color-primary); display:inline-block; }
.lead{ font-size:var(--text-lead); font-weight:500; color:var(--color-muted); max-width:62ch; }
.wrap{ max-width:1280px; margin-inline:auto; padding-inline:1.25rem; }
@media(min-width:768px){ .wrap{ padding-inline:2rem; } }
.section{ padding-block:4rem; }
@media(min-width:768px){ .section{ padding-block:7rem; } }

/* ── Buttons ─────────────────────────────────────────── */
.btn{ font-family:var(--font-heading); font-weight:600; font-size:.95rem; letter-spacing:.01em; display:inline-flex;
  align-items:center; gap:.6rem; padding:.9rem 1.6rem; border-radius:var(--radius-sm); text-decoration:none;
  cursor:pointer; border:1.5px solid transparent; transition:transform .35s var(--ease-out), background .3s, color .3s, border-color .3s;
  min-height:44px; }
.btn-primary{ background:var(--color-primary); color:#fff; }
.btn-primary:hover{ background:var(--color-primary-dk); }
.btn-ghost{ background:transparent; color:var(--color-fg); border-color:var(--color-border); }
.btn-ghost:hover{ border-color:var(--color-primary); color:var(--color-primary); }
.btn-invert{ background:#fff; color:var(--color-secondary); }
.btn-invert:hover{ background:var(--color-primary); color:#fff; }

/* ── Header ──────────────────────────────────────────── */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:100; color:#fff; background:transparent;
  transition:background .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s; }
.site-header .head-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.site-header.scrolled{ background:color-mix(in oklch, var(--color-bg) 92%, transparent); color:var(--color-fg);
  box-shadow:var(--shadow-sm); backdrop-filter:blur(10px); }
.site-header .head-inner{ max-width:1280px; margin-inline:auto; padding-inline:1.25rem; }
@media(min-width:768px){ .site-header .head-inner{ padding-inline:2rem; } }
.logo-mark{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-heading); font-weight:700; font-size:1.05rem;
  letter-spacing:.01em; text-decoration:none; color:inherit; }
.logo-mark svg{ flex:none; }
.main-nav{ display:none; align-items:center; gap:2.1rem; font-family:var(--font-heading); font-size:.92rem; font-weight:500; }
@media(min-width:920px){ .main-nav{ display:flex; } }
.main-nav a{ text-decoration:none; position:relative; padding-block:.3rem; }
.main-nav a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:2px; background:currentColor;
  transition:right .35s var(--ease-out); }
.main-nav a:hover::after, .main-nav a[aria-current]::after{ right:0; }
.burger{ display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; background:none;
  border:0; color:inherit; cursor:pointer; }
@media(min-width:920px){ .burger{ display:none; } }
.burger svg{ width:24px; height:24px; }
.mobile-menu{ position:fixed; inset:0; z-index:99; background:var(--color-secondary); color:#fff; display:flex;
  flex-direction:column; justify-content:center; gap:1.6rem; padding:2rem; transform:translateY(-100%);
  transition:transform .5s var(--ease-out); }
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--font-heading); font-size:1.7rem; font-weight:600; text-decoration:none; color:#fff; }
.mobile-menu .mm-contact{ margin-top:1rem; font-family:var(--font-body); font-size:1rem; opacity:.8; }

/* ── Signature: Messmarken (corner brackets) ────────────── */
.bracket-card{ position:relative; }
.bracket-card svg.bracket{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.bracket-card svg.bracket path{ stroke:var(--color-primary); stroke-width:1.5; fill:none; }

/* ── Cards ───────────────────────────────────────────── */
.card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; height:100%; box-shadow:var(--shadow-sm); }
.card-media{ aspect-ratio:4/3; overflow:hidden; position:relative; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.card:hover .card-media img{ transform:scale(1.06); }
.card-body{ padding:1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }

/* ── Reveal base states (GSAP sets these — no CSS pre-hide) ── */
[data-split] .word{ display:inline-block; white-space:nowrap; }
[data-split] .char{ display:inline-block; will-change:transform; }
[data-tilt]{ transform-style:preserve-3d; }
canvas.bg-canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:-2; pointer-events:none; }
.bg-scene{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
.bg-scene svg{ position:absolute; inset:0; width:100%; height:100%; }

/* ── Footer ──────────────────────────────────────────── */
.site-footer{ background:var(--color-secondary); color:#E7E9EE; }
.dark .site-footer{ background:#101317; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; padding-block:4rem 3rem; }
@media(min-width:768px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; gap:2rem; } }
.footer-grid a{ text-decoration:none; opacity:.82; }
.footer-grid a:hover{ opacity:1; }
.footer-nav-list{ display:flex; flex-direction:column; gap:.65rem; list-style:none; padding:0; margin:0; }
.footer-bottom{ border-top:1px solid rgb(255 255 255/.12); display:flex; flex-wrap:wrap; gap:1.2rem 2rem;
  align-items:center; justify-content:space-between; padding-block:1.4rem; padding-bottom:calc(1.4rem + 15px); }
.footer-legal{ display:flex; flex-wrap:wrap; gap:1.4rem; font-size:.85rem; }
.footer-legal a{ opacity:.7; }
.demo-note{ font-size:.78rem; opacity:.55; max-width:60ch; padding-bottom:1rem; }

/* ── Before/After slider ─────────────────────────────── */
.ba{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10; --ba:50%; touch-action:none; }
.ba img, .ba svg.ba-layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-before{ position:absolute; inset:0; clip-path:inset(0 var(--ba) 0 0); }
.ba-tag{ position:absolute; top:.75rem; z-index:3; font-family:var(--font-heading); font-size:.72rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; background:rgb(20 23 26/.72); color:#fff; padding:.35rem .65rem;
  border-radius:999px; pointer-events:none; }
.ba-tag-l{ left:.75rem; } .ba-tag-r{ right:.75rem; }
.ba-handle{ position:absolute; top:0; bottom:0; left:var(--ba); width:0; z-index:2; pointer-events:none; }
.ba-handle::before{ content:''; position:absolute; top:0; bottom:0; left:-1px; width:2px; background:#fff; }
.ba-handle::after{ content:''; position:absolute; top:50%; left:50%; width:38px; height:38px; border-radius:999px;
  background:#fff; transform:translate(-50%,-50%); box-shadow:var(--shadow); }
.ba-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4; }

/* ── Accordion (FAQ) ─────────────────────────────────── */
.acc-item{ border-bottom:1px solid var(--color-border); }
.acc-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; background:none;
  border:0; text-align:left; padding:1.4rem 0; font-family:var(--font-heading); font-weight:600; font-size:1.05rem;
  color:var(--color-fg); cursor:pointer; }
.acc-trigger .plus{ flex:none; width:22px; height:22px; position:relative; }
.acc-trigger .plus::before,.acc-trigger .plus::after{ content:''; position:absolute; background:var(--color-primary);
  top:50%; left:50%; transform:translate(-50%,-50%); }
.acc-trigger .plus::before{ width:14px; height:2px; } .acc-trigger .plus::after{ width:2px; height:14px; transition:transform .3s var(--ease-out); }
.acc-item[data-open] .plus::after{ transform:translate(-50%,-50%) rotate(90deg) scale(0); }
.acc-panel{ overflow:hidden; height:0; }
.acc-panel-inner{ padding-bottom:1.5rem; color:var(--color-muted); max-width:70ch; }

/* ── Preloader ────────────────────────────────────────── */
#preloader{ position:fixed; inset:0; z-index:9999; background:var(--color-secondary); display:flex; align-items:center;
  justify-content:center; }
#preloader .mark{ display:flex; flex-direction:column; align-items:center; gap:1rem; }

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto!important; }
}