/* site-extra.css
   Additive styles for functionality not present in the original static
   proposal (web/style.css is kept 100% untouched as the visual base).
   New here: cookie banner, legal info boxes + sidebar, contact form
   anti-spam honeypot, hero video contrast overlay, founder photo, BFW
   private-preview notice, form status states.
   Uses the same design tokens (--bg/--panel/--line/--blue/--muted/--text)
   defined in style.css so it matches the visual system exactly. */

/* ---- Mobile overflow guard ------------------------------------------
   Fixes a real bug found during QA: long single-word headlines (e.g. the
   German/English word "Impressum" has no spaces) do not wrap at narrow
   viewports and overflow the viewport horizontally, because the base
   style.css sizes headings with a vw-based clamp() but never constrains
   long unbreakable words. This is additive and does not change how any
   multi-word headline looks. */
html, body { max-width: 100%; overflow-x: hidden; }
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* ---- Hero video legibility ---------------------------------------- */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 13, 18, 0.35) 0%, rgba(9, 13, 18, 0.55) 55%, rgba(9, 13, 18, 0.85) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero-inner, .hero-meta, .hero-cross { position: relative; z-index: 2; }

/* ---- Founder photo (about page) ------------------------------------ */
.founder-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

/* ---- Legal pages (Impressum / Privacy / Terms) --------------------- */
.legal-body h2 { margin-top: 48px; margin-bottom: 16px; font-size: 24px; }
.legal-body h2:first-of-type { margin-top: 0; }
.legal-info-box-preview {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 18px 0 26px;
}
.legal-info-box-preview .row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.legal-info-box-preview .row:last-child { border-bottom: none; }
.legal-info-box-preview .key { color: var(--muted); }
.legal-info-box-preview .val { text-align: right; font-weight: 500; }
.legal-info-box-preview .val a { color: var(--blue); text-decoration: underline; }
.legal-info-box-preview p { margin: 0; color: var(--muted); }
.legal-info-box-preview.mb-6 { margin-bottom: 26px; }
.legal-info-box-preview.mt-8 { margin-top: 40px; }
.legal-info-box-preview.text-center { text-align: center; }
.legal-sidebar nav { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 24px; }
.legal-sidebar nav a { color: var(--muted); font-size: 14px; }
.legal-sidebar nav a:hover { color: var(--text); }
.legal-sidebar-other { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.legal-sidebar-other a { color: var(--blue); font-size: 14px; }

/* ---- BFW private-preview notice ------------------------------------ */
.reference-note strong { color: #e0a847; }

/* ---- Contact form: honeypot (hidden from humans, visible to bots) --- */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  left: -9999px;
}

/* ---- Contact form: submit / status states --------------------------- */
.contact-form button[type="submit"][disabled] { opacity: .6; cursor: progress; }
.form-status { min-height: 24px; margin-top: 14px; font-size: 14px; }
.form-status[data-state="success"] { color: #5fd4a0; }
.form-status[data-state="error"] { color: #f08383; }

/* ---- Cookie consent banner ------------------------------------------
   Compact centered card instead of a full-width bottom bar. Two reasons:
   1) Visual: matches the rest of the design system (sharp 3px radius,
      panel gradient background, same as .service-card / .reference-note)
      instead of a generic edge-to-edge strip.
   2) Bug fix: the chatbot FAB bubble (cyphersys-ultra.css: position:fixed;
      right:18px; bottom:18px, ~52px tall) lives in the bottom-right
      corner. A full-width bar touching bottom:0 always collided with it.
      This card is centered AND lifted to bottom:92px — comfortably above
      the FAB's vertical band (18px–70px from the bottom) — so there is no
      overlap at ANY viewport width, not just on average, because the two
      elements never share the same vertical band regardless of how wide
      the card gets on narrow screens. */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: clamp(18px, 3vw, 26px);
  background: linear-gradient(125deg, #121c27, #0d131c);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cookie-banner-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
.cookie-settings-panel {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cookie-settings-panel[hidden] { display: none; }
.cookie-settings-title { font-size: 13px; color: var(--text); display: block; }
.cookie-category {
  background: var(--surface, rgba(255,255,255,0.03));
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
.cookie-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cookie-category-name { font-size: 13px; font-weight: 600; color: var(--text); }
.cookie-category-status {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blue);
}
.cookie-category-desc { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.cookie-banner-main p { margin: 0; font-size: 13px; color: var(--muted); }
.cookie-banner-main p a { color: var(--blue); text-decoration: underline; }
.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner-actions .button { white-space: nowrap; flex: 1 1 auto; min-width: 108px; }
@media (max-width: 420px) {
  .cookie-banner-actions .button { flex-basis: 100%; }
}

/* ---- Reduced motion: never autoplay / respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal.is-waiting { opacity: 1 !important; transform: none !important; }
}

/* ---- No-JS fallback banner (visible without JS; hidden once JS runs) */
.noscript {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}