@import url('/css/tokens.css');

/* === Reset === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-pressed); }

::selection { background: var(--color-primary); color: #fff; }

/* === Display utility (Chunk) === */
.chunk {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
  font-weight: normal;
}

/* === Containers === */
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 28px; }

/* === Beta-banner === */
.beta-banner {
  background: var(--color-bg-dark);
  color: var(--color-on-dark);
  font-size: 0.92rem;
  text-align: center;
  padding: 10px 44px 10px 16px;
  position: relative;
  font-weight: 500;
}
.beta-banner a {
  color: var(--color-success);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  font-weight: 600;
  margin-left: 4px;
}
.beta-banner a:hover { color: #fff; }
.beta-banner button {
  background: transparent; border: none; color: var(--color-on-dark);
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 4px 10px;
  opacity: 0.7; transition: opacity 0.15s ease;
  font-family: var(--font-display);
}
.beta-banner button:hover { opacity: 1; }
.beta-banner[hidden] { display: none; }

/* === Header === */
.site-header {
  padding: 22px 0;
  background: var(--color-bg);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, padding 0.2s ease;
}
.site-header.scrolled { border-bottom-color: var(--color-divider); padding: 14px 0; }
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-header .logo { display: inline-flex; align-items: center; }
.site-header .logo img { height: 48px; width: auto; }
@media (max-width: 560px) {
  .site-header .logo img { height: 40px; }
}
.site-header nav { display: flex; align-items: center; gap: 22px; }
.site-header nav a {
  color: var(--color-text); font-size: 0.95rem; font-weight: 500;
  text-decoration: none;
}
.site-header nav a:hover { color: var(--color-primary); }
/* Persistent app-download CTA that lives in the sticky header — gives the
   user a one-tap path to the App Store from anywhere on the page (SEO-text,
   FAQ, mid-scroll, etc.) without scrolling back to the hero or down to the
   closer.                                                                  */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px 8px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff !important;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 14px -4px rgba(103, 103, 227, 0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.header-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -4px rgba(103, 103, 227, 0.55);
  color: #fff !important;
}
.lang-switch {
  font-family: var(--font-display);
  font-size: 0.85rem; letter-spacing: 0.04em;
  padding: 4px 10px;
  border: 1.5px solid var(--color-text);
  border-radius: 999px;
  color: var(--color-text) !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lang-switch:hover { background: var(--color-text); color: #fff !important; }

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 1rem; line-height: 1;
  border: none; cursor: pointer; text-decoration: none;
  padding: 18px 28px;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-primary); color: #fff;
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover {
  background: var(--color-primary-pressed);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(103,103,227,0.42);
  color: #fff; text-decoration: none;
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: transparent; color: var(--color-text);
  border: 1.5px solid var(--color-text);
}
.btn-ghost:hover {
  background: var(--color-text); color: #fff;
  text-decoration: none;
}
.btn-on-dark {
  background: #fff; color: var(--color-text);
}
.btn-on-dark:hover {
  background: var(--color-success); color: var(--color-text);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(175,230,235,0.30);
  text-decoration: none;
}
.btn-arrow::after {
  content: "→";
  display: inline-block;
  transition: transform 0.2s ease;
  font-family: var(--font-body);
  font-size: 1.1em;
  margin-left: -2px;
}
.btn:hover .btn-arrow::after,
.btn.btn-arrow:hover::after { transform: translateX(4px); }

/* === HERO === */
.hero {
  position: relative;
  padding: 56px 0 96px;
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.4rem, 6.2vw, 5.4rem);
  line-height: 0.92;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin-bottom: 26px;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
.hero h1 .l1, .hero h1 .l2 { display: block; }
.hero h1 .l2 {
  color: var(--color-primary);
  position: relative;
  display: inline-block;
}
.hero h1 .l2::after {
  /* hand-drawn underline scribble */
  content: "";
  position: absolute;
  left: -2%; right: 14%; bottom: -10px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'><path d='M2 9 Q 80 2 160 7 T 320 6 T 480 8 T 598 5' fill='none' stroke='%236767E3' stroke-width='4' stroke-linecap='round'/></svg>") left center/100% 100% no-repeat;
  opacity: 0.5;
  pointer-events: none;
}
.hero .lede {
  font-size: 1.15rem;
  color: var(--color-text-secondary);
  margin: 0 0 32px;
  max-width: 520px;
  line-height: 1.55;
}
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Hero visual stack */
.hero-visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  perspective: 1000px;
}
.hero-phone {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  /* clip-path is a geometric clip (not a rasterised overflow-clip), so the
     rounded edge stays clean against the page background instead of fringing
     in/out as the image content underneath changes brightness. This is the
     fix for the "stair-stepped halo" the rotated frame used to show.        */
  clip-path: inset(0 round 36px);
  /* drop-shadow follows the alpha shape of the element (i.e. respects the
     clip-path), whereas box-shadow would be clipped away by the clip-path.  */
  filter:
    drop-shadow(0 24px 28px rgba(26, 26, 46, 0.18))
    drop-shadow(0 8px 12px rgba(26, 26, 46, 0.10));
  transform: rotate(-3deg);
  background: #000;
}
.hero-phone img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* === Hero Before/After Card-Stack ===========================================
   Two stacked cards inside .hero-phone. .ba-card--after sits on the floor,
   .ba-card--before stacks on top and gets wiped away with clip-path. The wipe
   highlight slides in lock-step via the --ba-wipe custom property.
*/
@property --ba-wipe {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}
@property --ba-edge {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.ba-stage {
  position: absolute;
  inset: 0;
  --ba-wipe: 0%;
  --ba-edge: 0;
  isolation: isolate;
}
.ba-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  contain: layout paint;
}
.ba-card picture,
.ba-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.ba-card--after  { z-index: 1; }
.ba-card--before {
  z-index: 2;
  clip-path: inset(0 0 0 var(--ba-wipe));
  will-change: clip-path, transform;
}

/* Incoming-card slides in horizontally from the right as a whole card — not a
   content swap inside the frame. Drop-shadow on the leading (left) edge sells
   the "new card on top of the stack" depth cue.                              */
.ba-card--incoming {
  transform: translate3d(100%, 0, 0);
  box-shadow: -16px 0 32px -8px rgba(0, 0, 0, 0.35);
}

/* Hard wipe edge: a bright vertical sliver tracks the clip-path with a warm
   accent glow. Slides via the same --ba-wipe variable so JS only animates one.
   Opacity is driven by JS (Motion) during the wipe so the fade-in/out tracks
   the wipe progression instead of fighting it with a CSS transition.
*/
.ba-stage::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-wipe);
  width: 4px;
  margin-left: -2px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 248, 240, 0.95) 22%,
    rgba(255, 244, 232, 0.95) 78%,
    rgba(255, 255, 255, 0.0) 100%
  );
  box-shadow:
    0 0 16px 2px rgba(254, 91, 39, 0.45),
    0 0 32px 6px rgba(254, 91, 39, 0.22);
  border-radius: 2px;
  opacity: var(--ba-edge);
  pointer-events: none;
  z-index: 3;
  will-change: left;
}

/* Tag labels — small "Vorher" / "Nachher" stickers in Chunk display font.    */
.ba-tag {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 4;
  padding: 8px 16px 6px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #fff;
  background: rgba(26, 26, 46, 0.62);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}
.ba-tag--before { background: rgba(26, 26, 46, 0.62); }
.ba-tag--after {
  background: var(--color-primary, #6767E3);
  box-shadow: 0 6px 18px rgba(103, 103, 227, 0.42);
}

/* Reduced motion: skip the loop entirely. Just show the "after" card with a
   small "Vorher"/"Nachher"-stack still readable; the before-card collapses to
   a thin sliver on the right so users still grasp the contrast.             */
@media (prefers-reduced-motion: reduce) {
  .ba-card--before { clip-path: inset(0 0 0 80%); }
  .ba-card--incoming { transform: none; box-shadow: none; }
  .ba-stage::after { opacity: 0 !important; }
}

.sticker-burst {
  position: absolute;
  width: 158px; aspect-ratio: 1;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  display: grid; place-items: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  text-align: center;
  filter: drop-shadow(0 12px 24px rgba(26, 26, 46, 0.18));
  animation: sticker-wobble 4s ease-in-out infinite;
  /* cqi units below scale the text with the sticker's own width */
  container-type: inline-size;
}
.sticker-burst--orange { background-image: url("/img/brand/burst-orange.png"); color: #fff; }
.sticker-burst--indigo { background-image: url("/img/brand/burst-indigo.png"); color: #fff; }
.sticker-burst--cyan   { background-image: url("/img/brand/burst-cyan.png");   color: var(--color-text); }
.sticker-burst--peach  { background-image: url("/img/brand/burst-peach.png");  color: var(--color-text); }
.sticker-burst .sticker-line {
  display: block;
  letter-spacing: 0.01em;
  line-height: 0.92;
  padding: 0 8%;
  font-size: 12cqi;
}
.sticker-burst .sticker-line--big { font-size: 19cqi; }
.sticker-burst .sticker-line--small { font-size: 7.5cqi; opacity: 0.95; }

/* The hero ships with a single sticker — bottom-left of the phone.
   Top-right is intentionally clean because the phone screenshot itself
   already carries the "YOU SNAP IT. WE WRAP IT." badge. */
.hero-sticker-1 {
  bottom: -34px; left: -38px;
  transform: rotate(-9deg);
  width: 168px;
}

/* Floating illustrations — anchored to the .hero .container so they stay
   inside the layout grid and never get clipped on narrow viewports. */
.hero .container { position: relative; }
.hero-illu {
  position: absolute;
  width: 92px;
  opacity: 0.9;
  pointer-events: none;
  z-index: 2;
  display: none;
}
/* Personality only on desktop where there is room to bracket the text
   column without colliding with the headline. On tablet/mobile the
   single-column layout has no clean spot for them. */
@media (min-width: 961px) {
  .hero-illu { display: block; }
}
/* Anchored outside the content column on desktop so they decorate the
   margins instead of sitting on top of the headline / CTA buttons. The bunny
   nests in the gap between the CTA row and the card-stack column.           */
.hero-illu--monkey { top: -52px; left: -88px; transform: rotate(-12deg); }
.hero-illu--bunny  { bottom: -84px; right: 46%; transform: rotate(8deg); }
@media (max-width: 560px) {
  .hero-illu { display: none; }
}

@keyframes sticker-wobble {
  0%, 100% { transform: var(--wobble-base, rotate(0deg)) translateY(0); }
  50%      { transform: var(--wobble-base, rotate(0deg)) translateY(-6px); }
}
.hero-sticker-1 { --wobble-base: rotate(-9deg); }

/* === MARQUEE === */
.marquee {
  background: var(--color-primary);
  color: #fff;
  padding: 22px 0;
  border-block: 1.5px solid var(--color-primary-pressed);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.marquee-track {
  display: inline-flex;
  gap: 48px;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  animation: marquee-scroll 38s linear infinite;
  will-change: transform;
}
.marquee-track > * { flex-shrink: 0; }
.marquee-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--color-success);
  display: inline-block;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* === STEPS === */
.steps {
  padding: 110px 0 120px;
  background: var(--color-bg);
  position: relative;
}
.steps-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: end;
  margin-bottom: 56px;
}
.section-eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.steps h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
  color: var(--color-text);
}
.steps h2 .accent { color: var(--color-primary); }
.section-lede {
  color: var(--color-text-secondary);
  font-size: 1.05rem;
  max-width: 360px;
  margin-bottom: 6px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.step-card {
  position: relative;
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  aspect-ratio: 9 / 16;
  /* overflow stays visible so the burst-sticker step-numbers can poke beyond
     the card border. Image clipping happens inside .step-image-frame.       */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 52px -16px rgba(26, 26, 46, 0.28);
}
.step-num {
  position: absolute;
  top: -18px;
  right: -22px;
  width: 88px;
  aspect-ratio: 1;
  z-index: 3;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2.3rem;
  line-height: 1;
  color: #fff;
  letter-spacing: 0;
  background-image: url("/img/brand/burst-indigo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 10px 20px rgba(26, 26, 46, 0.22));
  transform: rotate(-8deg);
  pointer-events: none;
  user-select: none;
}
.step-image-frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: #000;
}
.step-image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* SEO-/a11y-hidden text: visually invisible, still indexed by Google and read
   by screen readers. The OCR-style content of each step (titles + extended
   descriptions of the app-screen captions) lives in elements with this class. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* === BAND: für jedes Gericht (wallpaper-grid backdrop) === */
.tape-band {
  background: var(--color-success);
  padding: 110px 0 120px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.food-grid {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.food-grid-inner {
  display: flex; flex-wrap: wrap;
  transform: rotate(-15deg) scale(1.25);
  transform-origin: center center;
  opacity: 0.22;
  width: 130%;
  margin-left: -15%;
  margin-top: -8%;
}
.food-grid-row {
  display: flex; gap: 36px; margin-bottom: 36px;
  width: 100%;
}
/* Mild stagger so the grid doesn't read as a strict checkerboard. */
.food-grid-row:nth-child(2n) { margin-left: 32px; }
.food-grid-row img {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.tape-head {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}
.tape-head h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
  line-height: 1;
  color: var(--color-text);
  margin-bottom: 14px;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .tape-head h2 { white-space: normal; font-size: clamp(1.6rem, 7vw, 2.4rem); }
}
.tape-head p {
  color: var(--color-text);
  max-width: 540px;
  font-size: 1.05rem;
  opacity: 0.82;
}

/* SEO copy block: dense, two-column on desktop. Sized so it reads as footer-
   adjacent secondary copy — not body content, but not so tiny that it looks
   hidden. break-inside is intentionally NOT set to "avoid", so the browser
   is free to flow paragraphs across both columns and balance them.         */
.tape-seo {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 44px auto 0;
  columns: 2;
  column-gap: 36px;
  column-fill: balance;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text);
  opacity: 0.68;
  letter-spacing: 0.002em;
}
.tape-seo p { margin: 0 0 12px; }
.tape-seo p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .tape-seo { columns: 1; column-gap: 0; max-width: 540px; font-size: 0.85rem; }
}

/* === CLOSER (dark) === */
.closer {
  background: var(--color-bg-dark);
  color: var(--color-on-dark);
  padding: 110px 0 110px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.closer::before {
  /* faint radial glow */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(103,103,227,0.32) 0%, transparent 60%);
  pointer-events: none;
}
.closer .container { position: relative; }
/* Centered logo, with the wobbling sticker hooked onto its top-right
   like a price tag on a shopfront. */
.closer .container-narrow { text-align: center; }
.closer-stage {
  position: relative;
  display: inline-block;
  margin: 0 auto 40px;
}
.closer-mark {
  width: clamp(200px, 26vw, 300px);
  filter: drop-shadow(0 8px 24px rgba(175,230,235,0.18));
}
.closer-mark img { width: 100%; height: auto; display: block; }

.closer-burst {
  position: absolute;
  top: -10%;
  left: calc(100% + 14px);
  width: clamp(130px, 13vw, 170px);
  aspect-ratio: 1;
  background: url("/img/brand/burst-cyan.png") center/contain no-repeat;
  display: grid; place-items: center;
  filter: drop-shadow(0 14px 28px rgba(175, 230, 235, 0.22));
  animation: closer-burst-wobble 5.5s ease-in-out infinite;
  container-type: inline-size;
  transform-origin: center center;
}
@media (max-width: 620px) {
  .closer-stage { display: block; }
  .closer-mark { margin: 0 auto; }
  .closer-burst {
    position: relative;
    top: auto; left: auto;
    margin: 18px auto 0;
    width: 140px;
  }
}
.closer-burst-text {
  font-family: var(--font-display);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text);
  font-size: 10cqi;
  line-height: 0.95;
  letter-spacing: -0.005em;
  padding: 0 16%;
}
.closer-burst-text span { display: block; }
@keyframes closer-burst-wobble {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50%      { transform: rotate(11deg) translateY(-6px); }
}
.closer p {
  color: var(--color-on-dark-dim);
  max-width: 520px;
  margin: 0 auto 32px;
  font-size: 1.05rem;
  line-height: 1.55;
}

/* === FOOTER === */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-on-dark-dim);
  padding: 56px 0 36px;
  font-size: 0.92rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.site-footer .container {
  display: flex; flex-wrap: wrap; gap: 24px;
  justify-content: space-between; align-items: center;
}
.site-footer .footer-mark img { height: 36px; width: auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
.site-footer a { color: var(--color-on-dark-dim); }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .copyright { font-size: 0.85rem; color: rgba(255,255,255,0.4); }

/* === Legal pages (carry-over for /impressum etc) === */
.legal-page { padding: 64px 0 96px; background: var(--color-bg); min-height: 100vh; }
.legal-page h1 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 32px; letter-spacing: -0.005em;
  color: var(--color-text);
}
.legal-page h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 1.4rem; margin: 40px 0 12px; color: var(--color-text);
}
.legal-page h3 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 1.05rem; margin: 28px 0 8px; color: var(--color-text);
}
.legal-page p, .legal-page ul, .legal-page ol { margin-bottom: 14px; color: var(--color-text); }
.legal-page ul, .legal-page ol { padding-left: 24px; }
.legal-page li { margin-bottom: 6px; }
.legal-page strong { font-weight: 600; }
.legal-page address {
  font-style: normal;
  background: var(--color-bg-soft);
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  margin: 12px 0 24px;
  border: 1px solid var(--color-divider);
}
.legal-page .meta {
  color: var(--color-text-secondary); font-size: 0.9rem;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
.legal-page p.summary {
  font-size: 1.08rem;
  color: var(--color-text-secondary);
  margin: 0 0 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
  line-height: 1.65;
}
.summary-box {
  background: var(--color-bg-soft);
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  margin: 24px 0;
  font-size: 0.95rem;
  border: 1px solid var(--color-divider);
}

/* === FAQ (support page) === */
.faq { margin-top: 32px; }
.faq details {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.faq details[open] { border-color: var(--color-primary); }
.faq summary {
  padding: 16px 20px;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 0.95rem; letter-spacing: 0.01em;
  cursor: pointer; list-style: none;
  position: relative;
  padding-right: 44px;
  color: var(--color-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; color: var(--color-primary); font-weight: 700;
  transition: transform 0.2s ease;
  font-family: var(--font-body);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > p, .faq details > div { padding: 0 20px 20px; color: var(--color-text-secondary); }
.faq details a { font-weight: 600; }

.contact-card {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  margin: 24px 0 32px;
  display: grid;
  gap: 16px;
}
.contact-card .row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.contact-card .label {
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: 400; color: var(--color-text-secondary);
  min-width: 100px; font-size: 0.82rem; letter-spacing: 0.04em;
}
.contact-card .value { font-size: 1.05rem; }

/* === Reveal animations === */
.reveal {
  opacity: 0; transform: translateY(20px);
  animation: reveal-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.reveal-1 { animation-delay: 0.05s; }
.reveal-2 { animation-delay: 0.18s; }
.reveal-3 { animation-delay: 0.30s; }
.reveal-4 { animation-delay: 0.42s; }
@keyframes reveal-up {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; animation: none; }
  .sticker-burst { animation: none; }
}

/* === Responsive === */
@media (max-width: 960px) {
  .hero { padding: 24px 0 80px; }
  .hero .container { grid-template-columns: 1fr; gap: 36px; }
  /* Mobile: visual leads the viewport so the slider sells the app before the
     headline has a chance to scroll. order: -1 lifts it above .hero-text. */
  .hero-visual { order: -1; max-width: 380px; margin: 0 auto; width: 100%; }
  .hero-illu--monkey { left: -16px; }
  .hero-illu--bunny  { right: -16px; }
  .hero h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 1.02; }
  .hero .lede { font-size: 1rem; margin-bottom: 24px; }

  .steps-head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .steps-grid { grid-template-columns: 1fr; gap: 22px; max-width: 360px; margin: 0 auto; }

  .tape-row { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}

@media (max-width: 560px) {
  .container, .container-narrow { padding: 0 20px; }
  .site-header { padding: 16px 0; }
  .site-header .logo img { height: 32px; }
  .site-header nav { gap: 10px; }
  /* hide secondary nav links on mobile, but keep lang-switch + the App-Store
     CTA — those are the actions users need at every scroll depth.           */
  .site-header nav a:not(.lang-switch):not(.header-cta) { display: none; }
  .header-cta { padding: 7px 12px 6px; font-size: 0.78rem; }

  .hero { padding: 16px 0 64px; }
  .hero .container { gap: 28px; }
  .hero-visual { max-width: 320px; }
  .hero h1 { font-size: clamp(1.9rem, 9.5vw, 2.6rem); line-height: 1.04; }
  .hero .lede { font-size: 0.95rem; margin-bottom: 20px; }
  .hero-sticker-1 { width: 116px; bottom: -18px; left: -12px; }
  .hero-illu { width: 80px; }
  .hero-illu--monkey { top: 0; left: -8px; }
  .hero-illu--bunny  { bottom: 0; right: -8px; }

  .steps { padding: 80px 0 90px; }
  .step-num { width: 76px; font-size: 2rem; top: -14px; right: -18px; }

  .tape-band { padding: 56px 0 64px; }
  .tape-row { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }

  .closer { padding: 88px 0 88px; }
  .closer-mark { width: 80%; }

  .btn { padding: 16px 22px; font-size: 0.92rem; }

  .site-footer .container { flex-direction: column; align-items: flex-start; gap: 18px; }
}