/* ============================================================
   Acme Co. — Landing Page Framework
   Plain CSS. Responsive. Sticky "stacking" scroll sections.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --color-primary: #4f7cff;
  --color-primary-dark: #3a5fd0;
  --color-dark: #10131a;
  --color-light: #f7f9fc;
  --color-muted: rgba(247, 249, 252, 0.75);

  --tint-color: 16, 19, 26;   /* RGB used inside rgba() for the tint */
  --tint-opacity: 0.55;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: var(--font-body);

  --nav-height: 64px;
  --maxw: 1100px;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-light);
  background: var(--color-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   TOP NAVIGATION (fixed)
   ============================================================ */
.topnav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 40px);
  z-index: 100;
  background: rgba(16, 19, 26, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.3s ease;
}
.topnav.scrolled { background: rgba(16, 19, 26, 0.85); }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.logo-img { height: 34px; width: auto; }
.brand-name { font-size: 1.05rem; letter-spacing: 0.5px; }

.nav-links { display: flex; gap: clamp(8px, 2vw, 24px); }
.nav-links a {
  font-size: 0.92rem;
  color: var(--color-muted);
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: #fff; border-color: var(--color-primary); }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 26px; height: 2px;
  background: #fff;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   DOT NAVIGATION (right side)
   ============================================================ */
.dotnav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 100;
}
.dotnav a { display: block; padding: 4px; }
.dotnav span {
  display: block;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  transition: background 0.25s, transform 0.25s;
}
.dotnav a:hover span { transform: scale(1.25); }
.dotnav a.active span { background: var(--color-primary); border-color: var(--color-primary); }

/* ============================================================
   STACKING SECTIONS
   Each panel is sticky at top:0 and 100vh tall. Because they
   share the same sticky top, a following panel slides up and
   over the previous one, which stays pinned in place.
   ============================================================ */
.stack { position: relative; }

.panel {
  position: sticky;
  top: 0;
  min-height: 100vh;  /* fallback for browsers without dvh support */
  min-height: 100dvh; /* actual visible viewport — avoids overflow behind mobile browser chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: calc(var(--nav-height) + 24px) clamp(16px, 5vw, 64px) 48px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Placeholder gradient backgrounds — override --bg-image with a real url() */
  background-image: var(--bg-image, none), var(--bg-fallback);
}

/* Placeholder gradients per section (replace by setting --bg-image) */
.panel--hero     { --bg-fallback: linear-gradient(135deg, #1b2b5a 0%, #4f7cff 60%, #7aa0ff 100%); }
.panel--overview { --bg-fallback: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); }
#service-1       { --bg-fallback: linear-gradient(135deg, #3a1c71 0%, #d76d77 60%, #ffaf7b 100%); }
#service-2       { --bg-fallback: linear-gradient(135deg, #093028 0%, #237a57 100%); }
#service-3       { --bg-fallback: linear-gradient(135deg, #42275a 0%, #734b6d 100%); }
#service-4       { --bg-fallback: linear-gradient(135deg, #82275a 0%, #734b6d 100%); }
.panel--contact  { --bg-fallback: linear-gradient(135deg, #16222a 0%, #3a6073 100%); }

/* Tint overlay — sits above background, below content */
.tint {
  position: absolute;
  inset: 0;
  background: rgba(var(--tint-color), var(--tint-opacity));
  z-index: 1;
  pointer-events: none;
}

.panel-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  animation: fadeUp 0.8s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   TYPOGRAPHY / SHARED
   ============================================================ */
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.1;
  margin-bottom: 0.5em;
}
.section-lead {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--color-muted);
  max-width: 60ch;
  margin-bottom: 2em;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s, background 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--ghost { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

/* ============================================================
   (1) HERO
   Split layout: logo on one side, sized to fill the available
   height up to a 50% width cap (whichever it hits first); the
   rest of the content centered on the other side. hero-content
   is given an explicit height (matching the panel's own vertical
   padding) so the 50%-height/50%-width rules below have a
   definite box to resolve against.
   ============================================================ */
.hero-content {
  display: flex;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  height: calc(100vh - var(--nav-height) - 72px);  /* fallback */
  height: calc(100dvh - var(--nav-height) - 72px);
}
.hero-visual {
  flex: 0 1 50%;
  max-width: 50%;
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-visual .logo-img--full {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.hero-text {
  flex: 1 1 50%;
  min-width: 0;
  text-align: center;
}
.hero-claim {
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  color: var(--color-muted);
  max-width: 32ch;
  margin: 0 auto 2em;
}
.quick-links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 1.6rem;
  color: #fff;
  animation: bounce 1.8s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 10px); }
}

/* ============================================================
   (2) OVERVIEW
   ============================================================ */
.claims {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 2.5em;
}
.claim-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 22px;
  backdrop-filter: blur(4px);
}
.claim-card h3 { margin-bottom: 8px; color: #fff; }
.claim-card p { color: var(--color-muted); font-size: 0.95rem; }

.facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: center;
}
.facts li { display: flex; flex-direction: column; }
.fact-num { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; color: var(--color-primary); }
.fact-label { font-size: 0.85rem; color: var(--color-muted); }

/* ============================================================
   (3-5) SERVICE — text left, image right
   ============================================================ */
.service-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.service-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 10px;
}
.service-text p { color: var(--color-muted); margin-bottom: 1.4em; }
.service-points {
  list-style: none;
  margin-bottom: 1.8em;
}
.service-points li {
  padding-left: 26px;
  position: relative;
  margin-bottom: 8px;
}
.service-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.service-figure {
  display: flex;
  justify-content: center;
}
.service-image {
  width: 100%;
  max-height: 70vh;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
/* Fallback shown if the real image is missing */
.service-image.img-fallback {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.12) 14px,
    rgba(255, 255, 255, 0.05) 14px,
    rgba(255, 255, 255, 0.05) 28px
  );
  position: relative;
}
.service-image.img-fallback::after {
  content: "Image placeholder";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* ============================================================
   (6) CONTACT
   ============================================================ */
.contact-content { width: 100%; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: start;
  margin-bottom: 40px;
}
.company-line { color: var(--color-muted); margin-bottom: 12px; }
.company-line a:hover { color: var(--color-primary); }

.contact-form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.9rem; color: var(--color-muted); }
.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  resize: vertical;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.12);
}
.field input.invalid,
.field textarea.invalid { border-color: #ff6b6b; }
.form-status { font-size: 0.9rem; min-height: 1.2em; }
.form-status.success { color: #4ade80; }
.form-status.error { color: #ff6b6b; }

.legal {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--color-muted);
  font-size: 0.85rem;
}
.legal-links a:hover { color: #fff; }

/* ============================================================
   LEGAL PAGES (Impressum / Datenschutzerklärung / AGB)
   Standalone, normally-scrolling content pages — not part of the
   sticky "stacking" panel system — that reuse the site's chrome
   (nav, colors, typography) via a simple full-height section.
   ============================================================ */
.legal-page {
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--nav-height) + 48px) clamp(16px, 5vw, 64px) 64px;
  background: linear-gradient(160deg, #12233a 0%, #16222a 55%, #1b2b3a 100%);
}
.legal-page-content { max-width: 780px; margin: 0 auto; }
.legal-page-content h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  margin-bottom: 0.3em;
}
.legal-page-content .page-lead {
  color: var(--color-muted);
  max-width: 60ch;
  margin-bottom: 2.5em;
}
.legal-page-content h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  margin: 1.8em 0 0.5em;
}
.legal-page-content h2:first-of-type { margin-top: 0; }
.legal-page-content h3 { font-size: 1.05rem; color: #fff; margin: 1.3em 0 0.4em; }
.legal-page-content p,
.legal-page-content li { color: var(--color-muted); margin-bottom: 0.9em; }
.legal-page-content ul,
.legal-page-content ol { padding-left: 1.3em; margin-bottom: 1em; }
.legal-page-content a { color: var(--color-primary); text-decoration: underline; }
.legal-page-content a:hover { color: var(--color-primary-dark); }
.legal-page-content strong { color: #fff; }
.legal-note {
  margin: 2em 0;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.9rem;
}
.legal-note p:last-child { margin-bottom: 0; }
.legal-page .legal { max-width: 780px; margin: 3em auto 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .claims { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 768px) {
  /* Smaller nav bar reclaims vertical space for every panel below —
     every calc() referencing --nav-height picks this up automatically. */
  :root { --nav-height: 56px; }

  .dotnav { display: none; }

  /* Drop the sticky "stacking pages" effect (and, in js/main.js, its
     auto-snap-on-scroll) in favor of one continuous, normally-
     scrolling page — the pinned/overlapping transition reads as
     several small "flips" rather than a single page on a phone. */
  .panel { position: static; }

  /* The bouncing down-arrow hinted at the next stacked/snapped page;
     with one continuous scrolling page on mobile it's redundant. */
  .scroll-cue { display: none; }

  /* Panels: less top/bottom padding so a screen's worth of content
     actually fits a phone's shorter viewport. */
  .panel { padding: calc(var(--nav-height) + 16px) clamp(16px, 5vw, 64px) 28px; }

  /* Smaller heading/lead minimums — the desktop clamp() floors are
     too large once the viewport is this short as well as narrow. */
  .section-title { font-size: clamp(1.5rem, 7vw, 3rem); }
  .section-lead { font-size: clamp(0.95rem, 4vw, 1.25rem); margin-bottom: 1.4em; }

  /* Collapsible nav */
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: var(--nav-height);
    right: 0;
    width: min(78vw, 320px);
    height: calc(100vh - var(--nav-height));  /* fallback */
    height: calc(100dvh - var(--nav-height));
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    background: rgba(16, 19, 26, 0.97);
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { padding: 12px 4px; font-size: 1.05rem; }

  /* Stack service image above text, smaller image so the text below
     it still fits on screen */
  .service-content { grid-template-columns: 1fr; text-align: left; gap: 16px; }
  .service-figure { order: -1; }
  .service-image { max-height: 26vh; }
  .service-points { margin-bottom: 1.1em; }
  .service-points li { margin-bottom: 4px; }

  /* Hero: logo on top (capped at half the available height), rest
     below, whole group centered vertically rather than stretched to
     fill the available height. The logo's cap is computed directly
     from the viewport (not a % of .hero-visual) since .hero-visual
     no longer has a definite height here for a percentage to resolve
     against. */
  .hero-content {
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    /* mobile .panel padding is now 16px top / 28px bottom (44px total),
       not the desktop 72px — recompute so this still spans the full
       available height instead of leaving unused space. */
    height: calc(100vh - var(--nav-height) - 44px);  /* fallback */
    height: calc(100dvh - var(--nav-height) - 44px);
  }
  .hero-visual {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .hero-visual .logo-img--full {
    max-height: calc((100vh - var(--nav-height) - 44px) * 0.5);  /* fallback */
    max-height: calc((100dvh - var(--nav-height) - 44px) * 0.5);
  }
  .hero-text { flex: 0 0 auto; }
  .hero-claim { margin-bottom: 1.2em; }

  .claims { grid-template-columns: 1fr; gap: 12px; margin-bottom: 1.6em; }
  .claim-card { padding: 16px; }
  .facts { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .contact-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 24px; }
  .legal { flex-direction: column; text-align: center; }
}

/* ============================================================
   IDLE FOG OVERLAY
   After a period of no user interaction, a full-viewport fog/
   condensation layer fades in UNIFORMLY (JS adds .is-fogging).
   After a short hold, JS swaps to .is-wiping, which "draws" 4
   curved SVG paths via stroke-dashoffset inside an SVG <mask> —
   each drawn stroke cuts a curved, squeegee-shaped hole in the
   fog as it progresses, alternating direction top-to-bottom.
   ============================================================ */
.fog-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}
.fog-overlay svg { display: block; width: 100%; height: 100%; }

.fog-layer {
  opacity: 0;
  transition: opacity 2.8s ease-out;
}
.fog-overlay.is-fogging .fog-layer,
.fog-overlay.is-wiping .fog-layer {
  opacity: 0.65; /* final intensity kept fairly light */
}
.fog-overlay.is-wiping .fog-layer { transition: none; }

.fog-wipe {
  fill: none;
  stroke: #000;
  stroke-width: 22;
  stroke-linecap: butt;
  stroke-dasharray: 100;
  stroke-dashoffset: 100; /* fully undrawn = mask stays all-white = fog fully shown */
  transition-property: stroke-dashoffset;
  transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  /* transition-duration / transition-delay are set per-path, inline, by
     js/main.js so each row's randomized timing runs strictly one after
     another (no overlap) instead of a fixed CSS stagger. */
  transition-duration: 0.6s;
  transition-delay: 0s;
}
.fog-overlay.is-wiping .fog-wipe { stroke-dashoffset: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel-content, .scroll-cue { animation: none; }
  .fog-overlay { display: none; }
}