/* ============================================================
   LUFTWERK — Basis-Styles
   Schriften lokal gehostet (DSGVO-konform, kein Google-Server)
   ============================================================ */

/* ---- Archivo ---- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/archivo-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/archivo-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/archivo-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/archivo-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---- Instrument Serif ---- */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Basis ---- */
:root {
  --accent: #C8A273;
  --tshadow: 0 1px 2px rgba(5,5,10,.95), 0 3px 12px rgba(5,5,10,.78), 0 10px 44px rgba(5,5,10,.8);
}
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: #0B0B0C;
  color: #EDEAE3;
  font-family: Archivo, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: #EDEAE3; text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: #0B0B0C; }
::placeholder { color: #605c55; }
select option { background: #141416; color: #EDEAE3; }

@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* Skip-Link (nur bei Tastatur-Fokus sichtbar) */
.skip {
  position: fixed; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #0B0B0C !important;
  padding: 12px 22px; font-weight: 600; font-size: 13px; letter-spacing: .08em;
}
.skip:focus { left: 0; }

/* Film-Korn-Overlay */
.noise {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%222%22/%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url(%23n)%22 opacity=%22.6%22/%3E%3C/svg%3E');
  background-size: 180px;
}

/* ---- Hover-/Focus-Zustände (ersetzen style-hover / style-focus) ---- */

/* Nav-Button „Anfragen“ (Outline-Variante) */
.cta-nav:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #0B0B0C !important;
}
/* Nav-Button „Anfragen“ (gefüllte Variante, aktive Seite Kontakt) */
.cta-nav-fill:hover { opacity: .85; color: #0B0B0C !important; }

/* Leistungs-Zeilen auf der Startseite */
.row-hover:hover { background: #121214 !important; }

/* Großer CTA-Knopf (Outline in Akzentfarbe) */
.btn-accent-outline:hover {
  background: var(--accent) !important;
  color: #0B0B0C !important;
}
/* Gefüllter Akzent-Knopf */
.btn-accent:hover { opacity: .85; }

/* Paket-Knöpfe (Outline hell) */
.btn-outline:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #0B0B0C !important;
}

/* Filter-Chips im Portfolio */
.chip:hover { border-color: var(--accent) !important; color: #EDEAE3 !important; }

/* Karte „Dein Objekt?“ */
.card-hover:hover { border-color: var(--accent) !important; }

/* Formularfelder */
.field:focus { border-bottom-color: var(--accent) !important; }

/* WhatsApp-Knopf */
.btn-wa:hover { border-color: #25D366 !important; color: #25D366 !important; }

/* ---- Mobile-Anpassungen ---- */
@media (max-width: 640px) {
  header[data-nav] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }
  header[data-nav] nav {
    max-width: 100% !important;
    gap: 12px 16px !important;
    font-size: 11px !important;
    letter-spacing: .14em !important;
    justify-content: center !important;
  }
  header[data-nav] nav .cta-nav,
  header[data-nav] nav .cta-nav-fill {
    padding: 9px 16px !important;
  }
  /* Leistungs-Zeilen: Nummer & Pfeil ausblenden, 2 Spalten */
  .row-hover { grid-template-columns: 1fr clamp(96px, 30vw, 150px) !important; }
  .row-hover > span:first-child,
  .row-hover > span:last-child { display: none !important; }
}
@media (max-width: 700px) {
  /* Label/Inhalt-Raster einspaltig, sonst erzwingt es Mindestbreite */
  .label-grid { grid-template-columns: 1fr !important; }
  /* Große Display-Headlines kleiner, damit lange Wörter nicht überlaufen */
  .display-h1 { font-size: clamp(34px, 11.5vw, 52px) !important; }
  .row-hover span { hyphens: auto; }
}
@media (max-width: 380px) {
  header[data-nav] nav {
    gap: 10px 12px !important;
    font-size: 10px !important;
    letter-spacing: .1em !important;
  }
  header[data-nav] nav .cta-nav,
  header[data-nav] nav .cta-nav-fill {
    padding: 8px 12px !important;
  }
}

/* ---- Scroll-Video-Hero (Scrub) ---- */
[data-vscrub] { height: 300vh; }

/* Zweiter Text-Beat: eigener Scrim hinter dem Text, vertieft sich mit --k */
.scrub-band::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  pointer-events: none;
  opacity: calc(.25 + .75 * var(--k, 1));
  background: radial-gradient(ellipse 80% 70% at 42% 50%, rgba(5,5,10,.6) 0%, rgba(5,5,10,.4) 46%, rgba(5,5,10,0) 76%);
}
.scrub-band { transform: scale(calc(.9 + .1 * var(--k, 0))); transform-origin: left center; }

/* Video blendet über dem Poster ein, sobald es abspielbereit ist.
   Wichtig: Start-Opacity per CSS-Regel, NICHT inline — sonst gewinnt der
   Inline-Stil gegen die .video-ready-Regel und das Video bleibt unsichtbar. */
[data-scrub-video] { opacity: 0; transition: opacity .9s; }
[data-stage].video-ready [data-scrub-video] { opacity: 1; }
[data-stage].video-failed [data-scrub-video] { display: none; }

/* Static-Hero-Gate: identisch in CSS und JS.
   Das Scroll-Video läuft auf allen Geräten — nur wer systemweit
   „Bewegung reduzieren" aktiviert hat, bekommt das gestaltete Standbild. */
@media (prefers-reduced-motion: reduce) {
  [data-vscrub] { height: 100vh; }
  [data-scrub-video] { display: none; }
  .scrub-band { display: none; }
}

/* Beat-2-Typografie auf schmalen Screens */
@media (max-width: 720px) {
  .scrub-band { max-width: min(86vw, 30ch) !important; top: clamp(130px, 20vh, 210px) !important; }
  .scrub-band p:last-child { font-size: clamp(27px, 8vw, 40px) !important; }
}