/* ============================================================
   Schrift lokal einbinden

   Grund: Wird Inter von Googles Servern geladen, geht die IP-Adresse
   jedes Besuchers an Google — ohne Klick und ohne Einwilligung. Das
   wurde in Deutschland bereits abgemahnt. Lokal eingebunden entfällt
   das, und die Seite lädt schneller.

   Die vier Dateien liegen NICHT im Paket, weil sie beim Bauen nicht
   heruntergeladen werden konnten. Anleitung: assets/fonts/README.md
   Fehlen sie, greift die Systemschrift — die Seite bleibt benutzbar.
   ============================================================ */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/inter-700.woff2") format("woff2")}

/* ============================================================
   Lumetric Studio — gemeinsames Stylesheet

   Zwei Themen, eine Designsprache:
     .thema-dunkel   Startseite und Media Agency — die Markenidentität
     .thema-metall   Mobile Studio — mattes Grau, technischer

   Struktur, Abstände, Typografie und Verhalten sind identisch.
   Nur die Farbwerte unterscheiden sich. So bleibt erkennbar,
   dass beide Bereiche zur selben Marke gehören.
   ============================================================ */

:root{
  --sw:cubic-bezier(.22,1,.36,1);
  --pad:clamp(1.15rem,4.5vw,2.6rem);
  --max:1220px;
}

/* ---------- Thema 1: dunkel, die Markenidentität ---------- */
.thema-dunkel{
  --grund:
    radial-gradient(120% 90% at 20% -10%, #17171B 0%, transparent 55%),
    radial-gradient(100% 80% at 88% 8%, #141418 0%, transparent 50%),
    linear-gradient(165deg, #0A0A0C 0%, #060607 55%, #030304 100%);
  --glas:rgba(255,255,255,.055);
  --glas-stark:rgba(255,255,255,.085);
  --glas-kante:rgba(255,255,255,.09);
  --glas-kante-u:rgba(255,255,255,.03);
  --glas-schimmer:rgba(255,255,255,.16);
  --glas-schatten:0 24px 60px -34px rgba(0,0,0,.9);
  --glas-schatten-hover:0 34px 76px -34px rgba(0,0,0,1);
  --t1:#F5F5F7; --t2:#C4C4CA; --t3:#82828A; --t4:#5A5A62;
  --linie:rgba(255,255,255,.1);
  --linie-zart:rgba(255,255,255,.06);
  --akzent:#F3D9AE; --akzent-hell:#FFF4E2;
  --auswahl:rgba(243,217,174,.22);
  --btn-bg:#F5F5F7; --btn-text:#08080A;
  --btn-schatten:0 12px 26px -14px rgba(0,0,0,.8);
  --feld-bg:rgba(255,255,255,.06); --feld-rand:rgba(255,255,255,.12);
  --bild-grund:#0A0A0C;
  --logo-filter:brightness(0) invert(1);
}

/* ---------- Thema 2: mattes Metall, Mobile Studio ---------- */
.thema-metall{
  --grund:
    radial-gradient(90% 60% at 12% -8%, rgba(255,255,255,.92) 0%, transparent 58%),
    radial-gradient(80% 55% at 92% 4%, rgba(255,255,255,.72) 0%, transparent 55%),
    radial-gradient(72% 52% at 50% 108%, rgba(146,153,166,.36) 0%, transparent 62%),
    linear-gradient(168deg, #E8EAEE 0%, #D7DADF 42%, #C7CBD3 76%, #D3D6DC 100%);
  --glas:rgba(255,255,255,.42);
  --glas-stark:rgba(255,255,255,.66);
  --glas-kante:rgba(255,255,255,.85);
  --glas-kante-u:rgba(30,33,40,.1);
  --glas-schimmer:rgba(255,255,255,.95);
  --glas-schatten:0 18px 44px -26px rgba(28,32,40,.5);
  --glas-schatten-hover:0 28px 60px -28px rgba(28,32,40,.6);
  --t1:#14161B; --t2:#3B3E46; --t3:#6E727C; --t4:#969AA4;
  --linie:rgba(30,33,40,.14);
  --linie-zart:rgba(30,33,40,.08);
  --akzent:#7C6329; --akzent-hell:#B08D4E;
  --auswahl:rgba(124,99,41,.2);
  --btn-bg:#191C22; --btn-text:#F2F3F5;
  --btn-schatten:0 12px 26px -14px rgba(25,28,34,.65);
  --feld-bg:rgba(255,255,255,.62); --feld-rand:rgba(30,33,40,.16);
  --bild-grund:#0A0A0C;
  --logo-filter:none;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color:var(--t2);line-height:1.6;overflow-x:clip;
  background:var(--grund);background-attachment:fixed;
}
.thema-dunkel{color-scheme:dark}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
section{position:relative;padding:clamp(4.5rem,10vw,8rem) 0}

/* ---------- Glas ----------
   Glas braucht etwas, das es bricht. Im dunklen Thema sind das die
   Lichtblüten und die Bilder, im metallischen die Grauverläufe. */
.glas{
  position:relative;border-radius:20px;
  background:linear-gradient(155deg,var(--glas-stark),var(--glas) 55%,var(--glas));
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--glas-kante);
  border-bottom-color:var(--glas-kante-u);
  box-shadow:var(--glas-schatten);
}
.glas::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(190deg,var(--glas-schimmer),transparent 26%);
  opacity:.5;
}
.gh{transition:transform .55s var(--sw),box-shadow .55s var(--sw),border-color .55s}
.gh:hover{transform:translateY(-5px);box-shadow:var(--glas-schatten-hover);
  border-color:var(--glas-schimmer)}
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--linie) 18%,var(--linie) 82%,transparent)}

/* Lichtblüte — nur im dunklen Thema wirksam */
.bloom{position:absolute;border-radius:999px;filter:blur(86px);pointer-events:none;z-index:0}
.thema-metall .bloom{display:none}

/* ---------- Typografie ---------- */
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:var(--t3);
  font-weight:600}
h1{font-size:clamp(2.3rem,6.6vw,4.4rem);font-weight:600;line-height:1.02;
  letter-spacing:-.045em;color:var(--t1)}
h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:600;line-height:1.08;
  letter-spacing:-.04em;color:var(--t1);margin-top:1rem}
h3{font-size:18.5px;font-weight:600;letter-spacing:-.022em;color:var(--t1)}
.lead{font-size:clamp(15.5px,1.45vw,17.5px);line-height:1.75;color:var(--t2);
  margin-top:1.2rem;max-width:56ch}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:999px;padding:.92rem 1.7rem;font-size:14.5px;font-weight:600;
  letter-spacing:-.012em;border:1px solid transparent;cursor:pointer;
  font-family:inherit;transition:transform .4s var(--sw),box-shadow .4s,background .3s,border-color .3s,opacity .3s}
.btn-primaer{background:var(--btn-bg);color:var(--btn-text);box-shadow:var(--btn-schatten)}
.btn-primaer:hover{transform:translateY(-2px);opacity:.88}
.btn-glas{background:var(--glas-stark);border-color:var(--glas-kante);color:var(--t1);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:var(--glas-schatten)}
.btn-glas:hover{transform:translateY(-2px);border-color:var(--glas-schimmer)}
.btn-wa{background:#25D366;color:#08240F;box-shadow:0 12px 26px -14px rgba(37,211,102,.75)}
.btn-wa:hover{transform:translateY(-2px);background:#2FE071}
.btn-voll{width:100%}

/* ---------- Kopfleiste ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:60;padding:.85rem var(--pad) 0;
  padding-top:max(.85rem,env(safe-area-inset-top))}
.nav{max-width:var(--max);margin:0 auto;height:56px;display:flex;align-items:center;
  justify-content:space-between;padding:0 .5rem 0 1.15rem;border-radius:999px;
  border:1px solid transparent;transition:all .6s var(--sw)}
.nav.an{background:var(--glas-stark);border-color:var(--glas-kante);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:var(--glas-schatten)}
.nav .logo{height:20px;width:auto;filter:var(--logo-filter)}
.nav-links{display:flex;gap:1.7rem}
.nav-links a{font-size:13.5px;font-weight:500;color:var(--t2);transition:color .3s}
.nav-links a:hover{color:var(--t1)}
.nav .btn{padding:.55rem 1.15rem;font-size:13px}
.burger{display:none;width:42px;height:42px;border:0;background:none;cursor:pointer;
  position:relative;flex:0 0 42px}
.burger i{position:absolute;left:11px;width:20px;height:1.6px;background:var(--t1);
  border-radius:2px;transition:transform .5s var(--sw)}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:24px}
.burger.x i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.x i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:55;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .4s var(--sw),transform .5s var(--sw),visibility .4s}
.thema-dunkel .sheet{background:rgba(6,6,7,.97)}
.thema-metall .sheet{background:rgba(224,227,232,.97)}
.sheet.offen{opacity:1;visibility:visible;transform:none}
.sheet a{font-size:clamp(1.8rem,8.5vw,2.4rem);font-weight:600;letter-spacing:-.04em;
  color:var(--t1);padding:.42rem 0}
.sheet .btn{align-self:flex-start;margin-top:1.5rem;font-size:15px;padding:1rem 1.9rem}
.sheet .meta{margin-top:2.2rem;font-size:12.5px;color:var(--t3);line-height:1.9}
body.fix{overflow:hidden}
@media(max-width:980px){.nav-links{display:none}.burger{display:block}.nav>.btn{display:none}}

/* ---------- Raster ---------- */
.g2,.g3,.g4{display:grid;gap:1.05rem;margin-top:3rem;position:relative;z-index:1}
@media(min-width:820px){.g2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:640px) and (max-width:979px){.g4{grid-template-columns:repeat(2,1fr)}}

/* ---------- Karten ---------- */
.karte{padding:1.9rem;height:100%;display:flex;flex-direction:column}
.karte .n{font-size:11.5px;letter-spacing:.16em;color:var(--t3);font-weight:600}
.karte h3{margin-top:1rem}
.karte p{margin-top:.7rem;font-size:14px;line-height:1.72;color:var(--t2)}

/* ---------- Scroll-Reveal ---------- */
.rev{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--sw),transform .85s var(--sw)}
.rev.da{opacity:1;transform:none}

/* ---------- FAQ ---------- */
.faq{max-width:900px}
.fitem{border-top:1px solid var(--linie)}
.fitem:last-of-type{border-bottom:1px solid var(--linie)}
.fitem button{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:1.3rem;padding:1.45rem 0;background:none;border:0;color:inherit;font:inherit;
  text-align:left;cursor:pointer}
.fitem button>span:first-child{font-size:16px;font-weight:600;letter-spacing:-.022em;
  color:var(--t1)}
.plus{font-size:19px;font-weight:300;color:var(--t3);transition:transform .45s var(--sw)}
.fitem.offen .plus{transform:rotate(45deg)}
.antw{max-height:0;overflow:hidden;transition:max-height .5s var(--sw)}
.antw p{padding-bottom:1.5rem;max-width:64ch;font-size:14.5px;line-height:1.8;color:var(--t2)}

/* ---------- Fußzeile ---------- */
.fuss{padding:4rem 0 calc(2.4rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--linie-zart);margin-top:2rem;position:relative;z-index:1}
.fuss-g{display:grid;gap:2.2rem;padding-top:2.4rem}
@media(min-width:640px){.fuss-g{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.fuss-g{grid-template-columns:1.7fr 1fr 1fr 1fr}}
.fuss h4{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--t4);
  font-weight:600}
.fuss ul{list-style:none;margin-top:1rem;display:grid;gap:.62rem}
.fuss a{font-size:13.5px;color:var(--t3);transition:color .3s}
.fuss a:hover{color:var(--t1)}
.fuss .logo{width:150px;filter:var(--logo-filter)}
.copy{margin-top:2.6rem;font-size:12px;color:var(--t4)}

::selection{background:var(--auswahl)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:4px}

@media(max-width:768px){
  section{padding:3.6rem 0}
  .glas{border-radius:16px;backdrop-filter:blur(12px) saturate(140%);
    -webkit-backdrop-filter:blur(12px) saturate(140%)}
  .gh:hover{transform:none}
  .karte{padding:1.4rem}
  .g2,.g3,.g4{gap:.7rem;margin-top:2.2rem}
  .btn{padding:.88rem 1.4rem}
  .bloom{filter:blur(56px)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}