/* ─── Variables ──────────────────────────────────────────────────────────────── */
:root {
  --bg:           #060606;
  --bg2:          #0d0d0d;
  --surface:      rgba(255,255,255,0.035);
  --surface-h:    rgba(255,255,255,0.065);
  --border:       rgba(255,255,255,0.08);
  --red:          #d91a2a;
  --red-dim:      rgba(217,26,42,0.15);
  --teal:         #00b4b4;
  --teal-dim:     rgba(0,180,180,0.12);
  --white:        #f5f5f5;
  --grey:         #888;
  --grey-l:       #bbb;
}

/* ─── Reset ──────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--white);
  font-family:'DM Sans',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Grain overlay */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.025; pointer-events:none; z-index:9999;
}
a { color:inherit; text-decoration:none; }
p { color:var(--grey-l); }
img { display:block; max-width:100%; }

/* ─── Typography ─────────────────────────────────────────────────────────────── */
h1,h2,h3,h4 {
  font-family:'Barlow Condensed',sans-serif;
  line-height:1.05;
  letter-spacing:-0.01em;
}
.display-xl {
  font-size:clamp(4rem,10vw,9rem);
  font-weight:900;
  letter-spacing:-0.03em;
  text-transform:uppercase;
  line-height:0.95;
}
.display-l {
  font-size:clamp(2.5rem,6vw,5rem);
  font-weight:800;
  text-transform:uppercase;
}
.display-m {
  font-size:clamp(1.8rem,4vw,3rem);
  font-weight:700;
  text-transform:uppercase;
}
.label {
  display:block;
  font-family:'DM Sans',sans-serif;
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--red);
}
.red-divider {
  width:48px; height:2px;
  background:var(--red);
  margin:1.25rem 0;
}

/* ─── Top accent line ────────────────────────────────────────────────────────── */
.topline {
  position:fixed; top:0; left:0; right:0; height:2px; z-index:200;
  background:linear-gradient(to right,var(--red) 0%,var(--teal) 100%);
}

/* ─── Navigation ─────────────────────────────────────────────────────────────── */
#main-nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.5rem 2rem;
  display:flex; align-items:center; justify-content:space-between;
  transition:background .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
#main-nav.scrolled {
  background:rgba(6,6,6,0.93);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding:1rem 2rem;
  border-bottom-color:var(--border);
}
.nav-logo img {
  height:42px; width:auto;
  filter:drop-shadow(0 0 8px rgba(217,26,42,.3));
}
.nav-links {
  display:flex; align-items:center; gap:2rem;
  list-style:none;
}
.nav-links a {
  font-size:.75rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--grey-l); transition:color .2s;
  position:relative;
}
.nav-links a::after {
  content:''; position:absolute;
  bottom:-4px; left:0; width:0; height:1px;
  background:var(--red); transition:width .3s;
}
.nav-links a:hover,
.nav-links a.active { color:var(--white); }
.nav-links a:hover::after,
.nav-links a.active::after { width:100%; }

/* Lang switcher */
.lang-switcher {
  display:flex; gap:.25rem; align-items:center;
  margin-left:1.5rem;
}
.lang-switcher button {
  background:none;
  border:1px solid var(--border);
  color:var(--grey);
  font-size:.65rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .5rem;
  cursor:pointer; transition:all .2s;
}
.lang-switcher button:hover { border-color:var(--red); color:var(--white); }
.lang-switcher button.active-lang {
  background:var(--red); border-color:var(--red); color:var(--white);
}

/* Hamburger */
.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; background:none; border:none; padding:4px;
}
.nav-toggle span {
  display:block; width:24px; height:1.5px;
  background:var(--white); transition:all .3s;
}
.nav-toggle.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

@media(max-width:768px) {
  .nav-toggle { display:flex; }
  #nav-menu {
    display:none; position:fixed; inset:0;
    background:rgba(6,6,6,.98); backdrop-filter:blur(20px);
    flex-direction:column; align-items:center; justify-content:center;
    gap:2.5rem; z-index:99;
  }
  #nav-menu.open { display:flex; }
  .nav-links { flex-direction:column; align-items:center; gap:2rem; }
  .nav-links a { font-size:1.2rem; }
  .lang-switcher { margin:0; }
}

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 2rem;
  background:var(--red); color:var(--white);
  font-size:.75rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  border:1px solid var(--red);
  cursor:pointer; transition:all .25s;
  position:relative; overflow:hidden;
}
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,.1);
  transform:translateX(-110%); transition:transform .3s;
}
.btn-primary:hover::before { transform:translateX(0); }
.btn-primary:hover { box-shadow:0 0 30px rgba(217,26,42,.35); }
.btn-primary:disabled { opacity:.5; pointer-events:none; }

.btn-ghost {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 2rem;
  background:transparent; color:var(--white);
  font-size:.75rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  border:1px solid var(--border);
  cursor:pointer; transition:all .25s;
}
.btn-ghost:hover { border-color:var(--white); background:rgba(255,255,255,.05); }

/* ─── Hero ───────────────────────────────────────────────────────────────────── */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:flex-end;
  padding-bottom:10vh; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center 30%;
  transform:scale(1.05);
  animation:slowZoom 20s ease-in-out infinite alternate;
}
@keyframes slowZoom {
  from { transform:scale(1.05); }
  to   { transform:scale(1.12); }
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    rgba(6,6,6,.3)  0%,
    rgba(6,6,6,.5)  40%,
    rgba(6,6,6,.92) 80%,
    var(--bg)       100%
  );
}
.hero-accent {
  position:absolute; top:0; right:15%;
  width:1px; height:100%;
  background:linear-gradient(to bottom,transparent,var(--red) 40%,transparent);
  opacity:.4;
}
.hero-content {
  position:relative; z-index:2;
  max-width:1400px; margin:0 auto;
  padding:0 2rem; width:100%;
}
.hero-content .label { margin-bottom:1.5rem; }
.hero-h1 { margin-bottom:1.5rem; }
.hero-h1 .accent { color:var(--red); }
.hero-sub {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(1.2rem,2.5vw,1.8rem);
  font-weight:400; text-transform:uppercase;
  color:var(--teal); letter-spacing:.05em;
  margin-bottom:1.5rem;
}
.hero-body {
  max-width:540px; font-size:1rem;
  color:var(--grey-l); line-height:1.7;
  margin-bottom:2.5rem;
}
.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap; }

/* ─── Layout helpers ─────────────────────────────────────────────────────────── */
.section {
  padding:8rem 2rem;
  max-width:1400px; margin:0 auto;
}
.section-full { padding:8rem 2rem; }
.section-header { margin-bottom:4rem; }
.section-header .label { margin-bottom:.75rem; }

/* ─── Cards ──────────────────────────────────────────────────────────────────── */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  padding:2rem;
  transition:all .3s;
  position:relative; overflow:hidden;
}
.card::before {
  content:''; position:absolute;
  top:0; left:0; width:2px; height:0;
  background:var(--red); transition:height .4s;
}
.card:hover {
  background:var(--surface-h);
  border-color:rgba(255,255,255,.14);
  transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.card:hover::before { height:100%; }
.card-icon {
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.5rem; color:var(--red);
}
.card-icon svg { width:28px; height:28px; stroke-width:1.5; }
.card h3 {
  font-size:1.3rem; font-weight:700;
  text-transform:uppercase; margin-bottom:.25rem;
}
.card .card-sub {
  font-size:.7rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal); margin-bottom:1rem;
}
.card p { font-size:.9rem; line-height:1.65; }

/* ─── Services grid ──────────────────────────────────────────────────────────── */
.services-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px; background:var(--border);
}
.services-grid .card { background:var(--bg2); }

/* ─── Features strip ─────────────────────────────────────────────────────────── */
.features-strip {
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border);
}
.feat-item {
  padding:2.5rem 2rem;
  border-right:1px solid var(--border);
  transition:background .3s;
}
.feat-item:last-child { border-right:none; }
.feat-item:hover { background:var(--surface); }
.feat-num {
  font-family:'Barlow Condensed',sans-serif;
  font-size:2.5rem; font-weight:900;
  color:var(--red); opacity:.25;
  line-height:1; margin-bottom:.75rem;
}
.feat-item h4 {
  font-size:.9rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  margin-bottom:.5rem; color:var(--white);
}
.feat-item p { font-size:.85rem; }
@media(max-width:900px) {
  .features-strip { grid-template-columns:repeat(2,1fr); }
  .feat-item:nth-child(2) { border-right:none; }
  .feat-item:nth-child(3) { border-top:1px solid var(--border); }
  .feat-item:nth-child(4) { border-top:1px solid var(--border); border-right:none; }
}
@media(max-width:540px) {
  .features-strip { grid-template-columns:1fr; }
  .feat-item { border-right:none; border-top:1px solid var(--border); }
  .feat-item:first-child { border-top:none; }
}

/* ─── Studio split ───────────────────────────────────────────────────────────── */
.studio-split {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--border); overflow:hidden;
}
.studio-img {
  aspect-ratio:16/10; overflow:hidden;
}
.studio-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s,filter .8s;
  filter:brightness(.75) saturate(.8);
}
.studio-img:hover img { transform:scale(1.04); filter:brightness(.9) saturate(1); }
.studio-text {
  display:flex; flex-direction:column; justify-content:center;
  padding:4rem 3rem; background:var(--bg2);
}
@media(max-width:900px) {
  .studio-split { grid-template-columns:1fr; }
  .studio-img { aspect-ratio:16/9; }
  .studio-text { padding:2.5rem 2rem; }
}

/* ─── CTA section ────────────────────────────────────────────────────────────── */
.cta-section {
  position:relative; padding:8rem 2rem;
  text-align:center; overflow:hidden;
}
.cta-glow {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:600px; height:400px;
  background:radial-gradient(ellipse,rgba(217,26,42,.12) 0%,transparent 70%);
  pointer-events:none;
}

/* ─── Page header ────────────────────────────────────────────────────────────── */
.page-header {
  padding:14rem 2rem 5rem;
  max-width:1400px; margin:0 auto;
  position:relative;
}
.page-header-rule {
  position:absolute; bottom:0; left:2rem; right:2rem;
  height:1px; background:var(--border);
}

/* ─── Service blocks (leistungen page) ───────────────────────────────────────── */
.svc-block { padding:4rem 0; border-bottom:1px solid var(--border); }
.svc-block:last-child { border-bottom:none; }
.svc-grid {
  display:grid; grid-template-columns:1fr 1.4fr;
  gap:5rem; align-items:start;
}
@media(max-width:900px) { .svc-grid { grid-template-columns:1fr; gap:2.5rem; } }

.svc-tag {
  display:inline-block;
  padding:.3rem .8rem;
  border:1px solid var(--red); color:var(--red);
  font-size:.65rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:1.5rem;
}
.svc-list { list-style:none; margin:1.25rem 0; }
.svc-list li {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.5rem 0; border-bottom:1px solid var(--border);
  color:var(--grey-l); font-size:.9rem;
}
.svc-list li::before {
  content:''; display:block; flex-shrink:0;
  width:16px; height:1px;
  background:var(--teal); margin-top:.65em;
}
.svc-note {
  margin-top:1.5rem; padding:1rem 1.25rem;
  border-left:2px solid var(--red);
  background:var(--red-dim);
  color:var(--grey-l); font-size:.875rem; line-height:1.6;
}
.stem-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:.5rem; margin:1rem 0;
}
.stem-tag {
  padding:.6rem 1rem;
  border:1px solid var(--border);
  font-size:.75rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal); text-align:center;
  transition:border-color .2s;
}
.stem-tag:hover { border-color:var(--teal); }

/* ─── Contact form ───────────────────────────────────────────────────────────── */
.contact-layout {
  display:grid; grid-template-columns:1fr 1.6fr;
  gap:6rem; align-items:start;
}
@media(max-width:900px) { .contact-layout { grid-template-columns:1fr; gap:3rem; } }

.contact-meta p { font-size:.9rem; margin-bottom:2rem; }
.contact-meta-block {
  border-top:1px solid var(--border);
  padding-top:2rem; margin-top:2rem;
}
.contact-meta-block .label { margin-bottom:.75rem; }
.contact-meta-block p { font-size:.85rem; }
.contact-note {
  margin-top:3rem; padding:1.5rem;
  border:1px solid var(--border); background:var(--surface);
}
.contact-note p { font-size:.8rem; line-height:1.65; }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:640px) { .form-grid { grid-template-columns:1fr; } }
.form-group { display:flex; flex-direction:column; gap:.4rem; }
.form-group.full { grid-column:1/-1; }
.form-label {
  font-size:.65rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--grey);
}
.form-input,
.form-select,
.form-textarea {
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--white);
  padding:.85rem 1rem;
  font-family:'DM Sans',sans-serif; font-size:.95rem;
  transition:border-color .2s,background .2s;
  width:100%; appearance:none; -webkit-appearance:none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline:none;
  border-color:var(--red); background:rgba(217,26,42,.05);
}
.form-input::placeholder,
.form-textarea::placeholder { color:rgba(255,255,255,.2); }
.form-select {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
  padding-right:2.5rem;
}
.form-select option { background:#111; }
.form-textarea { resize:vertical; min-height:140px; }
.form-submit { margin-top:.5rem; }
.form-status {
  margin-top:1rem; padding:.85rem 1rem;
  font-size:.875rem; display:none;
}
.form-status.ok  { display:block; border-left:2px solid var(--teal); background:var(--teal-dim); color:var(--teal); }
.form-status.err { display:block; border-left:2px solid var(--red);  background:var(--red-dim);  color:#ff8080; }

/* ─── Legal / Datenschutz ────────────────────────────────────────────────────── */
.legal { max-width:780px; }
.legal h2 {
  font-size:1.5rem; font-weight:700;
  text-transform:uppercase; color:var(--white);
  margin:3rem 0 1rem;
}
.legal h2:first-child { margin-top:0; }
.legal p { font-size:.95rem; color:var(--grey-l); line-height:1.75; margin-bottom:1rem; }

/* ─── Footer ─────────────────────────────────────────────────────────────────── */
footer {
  border-top:1px solid var(--border);
  padding:3rem 2rem;
  max-width:1400px; margin:0 auto;
  display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:1.5rem;
}
.footer-logo img { height:32px; filter:grayscale(1) brightness(.7); }
.footer-links { display:flex; gap:2rem; list-style:none; }
.footer-links a {
  font-size:.72rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--grey); transition:color .2s;
}
.footer-links a:hover { color:var(--white); }
.footer-copy { font-size:.72rem; color:var(--grey); letter-spacing:.05em; }

/* ─── Scroll reveal ──────────────────────────────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal.d1 { transition-delay:.1s; }
.reveal.d2 { transition-delay:.2s; }
.reveal.d3 { transition-delay:.3s; }
.reveal.d4 { transition-delay:.4s; }
.revealed  { opacity:1; transform:none; }