@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/space-grotesk-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/space-grotesk-600.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/space-grotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-600.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/instrument-serif-italic.ttf') format('truetype'); }
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/bebas-neue-400.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/archivo-400.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url('../assets/fonts/archivo-800.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/jetbrains-mono-400.woff2') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0A0E12; color: #E8EEF2; font-family: 'Space Grotesk', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #35E0C2; text-decoration: none; }
a:hover { color: #7FF0DC; }
::selection { background: #ff5a2e; color: #08090b; }

@keyframes ms3Rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ms3Blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes ms3Scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(400%); } }
@keyframes ms3Marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes ms3Float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(-1.5deg); } }
@keyframes ms3Playhead { 0% { left: 0%; } 100% { left: 100%; } }

/* ======= Mobile responsiveness (ms4 onepager) ======= */
@media (max-width: 860px) {
  #ms4-nav-links, #ms4-nav-cta { display: none !important; }
  #ms4-nav-toggle { display: inline-flex !important; }
  #ms4-mobile-menu.ms4-open { display: flex !important; }

  #ms4-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; align-items: start !important; }
  #ms4-hero-rec-panel { display: none !important; }
  /* Desktop pins hero content to the BOTTOM of a 100vh column (the "insert
     video" placeholder is flex:1 and eats the leftover space above it). Once
     the real video loads that placeholder is display:none and drops out of
     flow, so the remaining children (eyebrow/h1/copy/buttons + the marquee)
     are the only flex items left — with justify-content:flex-end they still
     get pinned to the bottom. On mobile that stacked content is taller than
     one screen, so "the bottom" ends up above y=0, behind the nav. Flowing
     from the top instead, cleared by the nav's own height, fixes that
     regardless of how tall the stacked content is or whether the video/
     placeholder has loaded yet. min-height stays a floor (not a cap) so the
     hero can grow past one screen without clipping/squeezing content. */
  /* padding-top must clear the absolutely-positioned mute button (top:104px,
     44px tall, z-index:2 — same z-index as #ms4-hero-grid but earlier in the
     DOM, so once the grid's box reaches that y-range it paints on top and
     eats the button's clicks) or the button becomes unclickable. */
  #top { justify-content: flex-start !important; padding-top: 164px !important; min-height: 100svh !important; }
  /* video/gradient/grain are "inset:0" against #top, i.e. sized to #top's own
     height — since #top now grows past one screen to fit the stacked mobile
     content (see padding-top above), inset:0 stretched them to match, making
     the video balloon to several screens tall instead of just filling the
     first one. Pin them to one screen's height instead; content keeps
     flowing normally below/over them via padding-top + normal flow. */
  #ms4-hero-video, #ms4-hero-gradient, #ms4-hero-grain {
    bottom: auto !important;
    height: 100svh !important;
  }
  #ms4-services-grid { grid-template-columns: 1fr !important; }
  #kontakt { grid-template-columns: 1fr !important; gap: 48px !important; }
  #ms4-footer-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
}

@media (max-width: 480px) {
  #ablauf [style*="width: 56px"][style*="height: 56px"] { width: 44px !important; height: 44px !important; font-size: 19px !important; }
}

.ms3-tab {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  background: transparent;
  color: rgba(232, 238, 242, 0.6);
}
.ms3-tab-active {
  background: #35E0C2;
  color: #0A0E12;
  box-shadow: 0 0 24px rgba(53, 224, 194, 0.3);
}

/* Injizierter Rechtstext (hell gestylt) -- Anpassung an das dunkle Theme */
#ds-doc h2, #ds-doc h3 { font-family: 'Space Grotesk', sans-serif !important; color: #E8EEF2 !important; }
#ds-doc p, #ds-doc ul, #ds-doc li { color: rgba(232, 238, 242, 0.66) !important; }
#ds-doc a { color: #35E0C2 !important; }
#ds-doc a:hover { color: #7FF0DC !important; }