@font-face{font-family:"Figtree";src:url(../fonts/figtree-var.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Fredoka";src:url(../fonts/fredoka-var.woff2) format("woff2");font-weight:500 700;font-display:swap}
:root {
  /* Farben seit 14.10.2026 nach Fynns Brand Guide: Sky 40, Weiss, Night, Clay */
  --bg: #E0F2FE;
  --surface: #ffffff;
  --ink: #102B5C;
  --muted: #3D5478;
  --line: #CFD5DE;
  --accent: #FF6A1F;
  --accent-deep: #D9500C;
  --on-accent: #102B5C;
  --shadow: 0 24px 48px -24px rgb(20 28 46 / .45);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 "Figtree", system-ui, sans-serif;
  overflow-x: clip;
}
html { overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.display { font-family: "Fredoka", system-ui, sans-serif; font-weight: 700; letter-spacing: -.015em; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
h2 { font-size: clamp(36px, 5vw, 68px); line-height: 1.02; margin: 0 0 28px; }
.lead { color: var(--muted); font-size: 19px; max-width: 46ch; margin: 0; }

/* grain, fixed so it never repaints with scroll */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* rule: buttons are pills, everything else 24px */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  font: 700 16px/1 "Figtree", sans-serif; text-decoration: none; white-space: nowrap;
  /* clay: soft top highlight, pressed-in bottom edge */
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .35), inset 0 -5px 0 var(--accent-deep), 0 10px 22px -10px var(--accent);
  transition: box-shadow .2s, translate .2s;
}
.btn:active { translate: 0 3px; box-shadow: inset 0 2px 0 rgb(255 255 255 / .3), inset 0 -2px 0 var(--accent-deep); }
.btn.ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 2px 0 rgb(255 255 255 / .5), inset 0 -5px 0 var(--line), 0 10px 22px -14px rgb(20 28 46 / .4); }
.btn svg { width: 18px; height: 18px; fill: currentColor; }

/* nav */
.nav {
  position: fixed; top: 14px; left: 50%; translate: -50% 0; z-index: 50;
  width: min(1240px, calc(100% - 28px)); height: 64px; padding: 0 10px 0 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: 999px; background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 10px 30px -18px rgb(20 28 46 / .5);
}
.nav .logo { font-size: 25px; text-decoration: none; }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-weight: 600; }
.nav ul a { text-decoration: none; color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; }
.nav ul a:hover { color: var(--ink); }
.nav .btn { padding: 12px 20px; }
.nav-end { display: flex; align-items: center; gap: 6px; }
.nav .lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-weight: 700; text-decoration: none; color: var(--muted); }
.nav .lang:hover { color: var(--ink); }

/* hero */
.hero { min-height: 0; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 40px; padding-top: 110px; padding-bottom: 60px; }
.hero h1 { font-size: clamp(52px, 7.4vw, 112px); line-height: .98; margin: 0 0 26px; }
.hero h1 .word { display: inline-block; white-space: nowrap; }
.hero h1 .ch { display: inline-block; transform-origin: 50% 100%; }
.hero .lead { margin-bottom: 36px; }
.ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.phones { position: relative; height: min(660px, 76dvh); perspective: 1200px; }
.phone {
  position: absolute; width: 47%; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow), 0 0 0 6px var(--surface);
}
.phone video { width: 100%; height: 100%; object-fit: cover; }
.phone.a { left: 0; top: 14%; rotate: -8deg; }
.phone.b { left: 26%; top: 0; z-index: 2; }
.phone.c { right: 0; top: 18%; rotate: 7deg; }


/* reach */
.reach { padding-block: 40px 120px; } /* Joost 14.10.: kein Leerraum nach dem Kopfbereich */
.bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; margin-top: 48px; }
.tile { border-radius: 24px; padding: 30px; background: var(--surface); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.tile b { display: block; font: 700 clamp(48px, 5.6vw, 84px)/1 "Fredoka", sans-serif; letter-spacing: -.02em; }
.tile span { color: var(--muted); font-weight: 500; }
.tile.big { grid-row: span 2; background: var(--accent); color: var(--on-accent); display: flex; flex-direction: column; justify-content: flex-end; min-height: 500px; }
.tile.big b, .tile.big span { position: relative; z-index: 1; }
.tile.big b { font-size: clamp(88px, 11vw, 168px); }
.tile.big span { color: inherit; opacity: .85; font-size: 20px; }
.tile.big video { position: absolute; right: 28px; top: 28px; width: 34%; border-radius: 22px; rotate: 9deg; box-shadow: var(--shadow); }
.tile.wide { grid-column: span 2; display: flex; align-items: center; gap: 24px; }
.tile.wide img { width: 84px; border-radius: 14px; }
.source { color: var(--muted); font-size: 14px; margin-top: 18px; }

/* work: pinned horizontal pan on desktop, swipe row on mobile */
.work { overflow-x: auto; } /* ohne Animation (Bewegung reduziert, Skript fehlt) per Wischen erreichbar */
.work.pan { overflow: hidden; }
.work-track { display: flex; align-items: center; gap: 28px; height: 100dvh; padding: 0 28px; width: max-content; }
.work-intro { width: min(440px, 80vw); flex: none; padding-right: 20px; }
.card { flex: none; width: clamp(220px, 21vw, 300px); text-decoration: none; }
.card .thumb { aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); background: var(--surface); }
.card img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s cubic-bezier(.34,1.56,.64,1); }
.card:hover img { scale: 1.06; }
.card p { margin: 14px 0 2px; font-weight: 600; line-height: 1.35; }
.card small { color: var(--muted); font-size: 15px; }
.card:nth-child(odd) { translate: 0 -34px; }

/* process */
.process { padding-block: 140px 60px; }
.process-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.stage { position: sticky; top: 14vh; height: 72vh; display: grid; place-items: center; }
.stage .phone { position: relative; width: min(330px, 100%); left: auto; top: auto; rotate: -3deg; }
.stage video { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.stage video.on { opacity: 1; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.step:last-child { margin-bottom: 20vh; }
.step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .5s; }
.step.on { opacity: 1; }
.step .n { font: 700 22px/1 "Fredoka", sans-serif; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); margin-bottom: 22px; box-shadow: inset 0 -4px 0 var(--accent-deep); }
.step h3 { font: 700 clamp(30px, 3.4vw, 46px)/1.05 "Fredoka", sans-serif; margin: 0 0 14px; }
.step p { color: var(--muted); font-size: 19px; max-width: 38ch; margin: 0; }

/* formats */
.formats { padding-block: 100px 140px; }
.fmt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 48px; }
.fmt { border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); padding: 34px; display: grid; grid-template-columns: 1fr 150px; gap: 26px; align-items: end; transform-style: preserve-3d; }
.fmt h3 { font: 700 34px/1.05 "Fredoka", sans-serif; margin: 0 0 12px; }
.fmt p { color: var(--muted); margin: 0 0 22px; }
.fmt ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fmt li { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; padding-top: 8px; border-top: 2px solid var(--line); }
.fmt li em { font-style: normal; color: #B8440B; }
.fmt video { border-radius: 18px; aspect-ratio: 9/16; object-fit: cover; box-shadow: var(--shadow); }

/* offers */
.offers { padding-block: 120px; }
.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 48px; }
.item { border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); padding: 28px; display: flex; flex-direction: column; gap: 10px; position: relative; transform-style: preserve-3d; will-change: transform; }
.item h3 { font: 700 28px/1.1 "Fredoka", sans-serif; margin: 0; }
.item ul { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 8px; color: var(--muted); }
.item .tag { align-self: flex-start; font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 999px; background: var(--bg); color: var(--muted); }
.item.accent { background: var(--ink); color: #fff; } /* Joost 14.10.: Orange biss sich mit der Schrift */
.item.accent ul, .item.accent .tag { color: inherit; }
.item.accent .tag { background: rgb(255 255 255 / .18); }
.offer-note { margin-top: 26px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* final */
.final { padding-block: 140px 80px; text-align: center; }
.final h2 { font-size: clamp(52px, 9vw, 148px); line-height: .95; margin-bottom: 40px; }
.final .ctas { justify-content: center; }
footer.wrap { padding-block: 40px 56px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: 15px; }
footer nav { display: flex; gap: 22px; }
footer a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
footer a:hover { color: var(--ink); }

@media (max-width: 1023px) {
  .nav ul { display: none; }
  .fmt-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  /* nur seitlich: "padding: 0 16px" nahm den Abschnitten am Handy auch den Abstand oben und unten */
  .wrap { padding-inline: 16px; }
  .formats { padding-block: 72px 80px; }
  .offers { padding-block: 40px 80px; }
  .final { padding-block: 80px 48px; }
  .hero { grid-template-columns: 1fr; padding-top: 100px; gap: 36px; min-height: 0; }
  .phones { height: 430px; }
  .reach { padding-block: 32px 80px; }
  .bento { grid-template-columns: 1fr; }
  .tile.big { grid-row: auto; min-height: 340px; }
  .tile.wide { grid-column: auto; }
  .work-track { height: auto; padding: 60px 16px; overflow-x: auto; scroll-snap-type: x mandatory; width: auto; }
  .work-intro { width: 78vw; }
  .card { scroll-snap-align: center; width: 64vw; }
  .card:nth-child(odd) { translate: none; }
  .process { padding-top: 80px; }
  .process-grid { grid-template-columns: 1fr; gap: 0; }
  .stage { display: none; }
  .step { min-height: 0; padding: 30px 0; opacity: 1; }
  .fmt { grid-template-columns: 1fr; }
  .fmt video { width: 60%; }
  .offer-grid { grid-template-columns: 1fr; }
  .nav { height: 58px; }
  .nav .btn { padding: 13px 18px; font-size: 15px; }
}
/* sehr schmale Handys (320 px): Logo, Sprachwechsel und Buchen-Knopf passen sonst nicht in die Leiste */
@media (max-width: 360px) {
  .nav { padding-left: 14px; gap: 8px; }
  .nav .logo { font-size: 22px; }
  .nav-end { gap: 2px; }
  .nav .lang { min-width: 44px; justify-content: center; padding: 0 4px; }
  .nav .btn { padding: 13px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .card img, .stage video, .step { transition: none; }
}
.sprite { position: absolute; }