/* =========================================================
   Eigene Regeln der Website (Tokens, Animationen, Komponenten ausserhalb von Tailwind).
   Wird von index.html und wecker-check.html geladen. Ungelayert: gewinnt immer gegen
   Tailwind-Utilities aus tailwind.css, egal in welcher Reihenfolge die Dateien geladen werden.
   ========================================================= */
/* =========================================================
   FARBEN & SCHRIFTEN – hier anpassen
   ========================================================= */
:root {
  --bg: #FBF8F3;              /* warmes Off-White, Seitenhintergrund */
  --surface: #FFFFFF;         /* Karten */
  --ink: #17140F;             /* Headlines, Buttons */
  --copy: #3A342D;            /* Fliesstext */
  --muted: #625A51;           /* Nebentext */
  --line: #ECE5DA;            /* feine Linien */
  --line-strong: #D9CFC1;
  --peach: #FDEADF;           /* Pastell 1 */
  --peach-strong: #F8C9AE;
  --lavender: #EEEAFB;        /* Pastell 2 */
  --lavender-strong: #CFC6F4;
  --lime: #EFF6D5;            /* Pastell 3 */
  --lime-strong: #D2E79A;
  --mascot: #FFC6A5;          /* Wecker-Figur */
  --blush: #FF9E7D;           /* Wangen, Kringel */
  --alert: #E5484D;           /* rote Markierungen */

  --font-head: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--copy);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Einblenden beim Scrollen ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .js [data-reveal="left"] { transform: translate3d(-44px, 0, 0); }
  .js [data-reveal="right"] { transform: translate3d(44px, 0, 0); }
  .js [data-reveal="scale"] { transform: scale(.9); }
  .js [data-reveal="tilt-l"] { transform: translate3d(-24px, 48px, 0) rotate(-7deg); }
  .js [data-reveal="tilt-r"] { transform: translate3d(24px, 48px, 0) rotate(7deg); }
  .js [data-reveal="blur"] { transform: translate3d(0, 18px, 0); filter: blur(14px); }
  .js [data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

  /* Hero-Headline: Wort für Wort */
  .js .wd {
    opacity: 0;
    transform: translateY(.5em) rotate(5deg);
    transform-origin: left bottom;
    filter: blur(8px);
    animation: word-in 1s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 80ms + 120ms);
  }
  .js .squiggle path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s var(--ease) 1s forwards; }

  /* Timeline-Linien zeichnen sich */
  .js .step::after { scale: var(--line-scale-off); transition: scale 1.1s var(--ease) .35s; }
  .js .step.is-visible::after { scale: 1 1; }

  /* Wecker klingelt, blinzelt, schwebt */
  .m-ring { animation: ring 5s ease-in-out 2s infinite; }
  .m-blink { animation: blink 4.5s infinite; }
  .float { animation: float 6s ease-in-out infinite; }
  .float-slow { animation: float 9s ease-in-out infinite; }
  .spin { animation: spin 16s linear infinite; }
  .zzz { animation: zzz 3.2s ease-in-out infinite; }
  .z2 { animation-delay: 1.05s; }
  .z3 { animation-delay: 2.1s; }
  .breathe { animation: breathe 3.2s ease-in-out infinite; }
  .stage-blob { animation: drift 18s ease-in-out infinite alternate; }
  .stage-blob.b2 { animation-duration: 23s; animation-delay: -7s; }
  .stage-blob.b3 { animation-duration: 27s; animation-delay: -12s; }
  .ping { animation: ping-pop 3.6s var(--ease) infinite; animation-delay: calc(var(--n, 0) * .4s); }
  .variant { animation: variant 6s ease-in-out infinite; animation-delay: calc(var(--n, 0) * 2s); }
  .variant .vcheck { animation: variant-check 6s ease-in-out infinite; animation-delay: calc(var(--n, 0) * 2s); }
  .cal-send { animation: cal-send 4s ease-in-out infinite; animation-delay: calc(var(--n, 0) * 2s); }
  .day { animation: day-tick 6s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .6s); }
  .wiggle:hover { animation: ring .9s ease-in-out; }
  .shine.is-visible::after { animation: shine 1.8s var(--ease) .6s forwards; }
}

@keyframes word-in { to { opacity: 1; transform: none; filter: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ring {
  0%, 18%, 100% { transform: rotate(0); }
  2% { transform: rotate(14deg); }
  4% { transform: rotate(-12deg); }
  6% { transform: rotate(10deg); }
  8% { transform: rotate(-8deg); }
  10% { transform: rotate(6deg); }
  12% { transform: rotate(-4deg); }
  14% { transform: rotate(2deg); }
}
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(3deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes zzz {
  0% { opacity: 0; transform: translate(0, 6px) scale(.5); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(16px, -36px) scale(1.2); }
}
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .97); } }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18%, 10%) scale(1.15); }
  100% { transform: translate(-14%, 18%) scale(.92); }
}
@keyframes ping-pop {
  0% { scale: 0; box-shadow: 0 0 0 0 rgb(229 72 77 / .45); }
  12% { scale: 1; }
  45% { box-shadow: 0 0 0 12px rgb(229 72 77 / 0); }
  85% { scale: 1; opacity: 1; }
  100% { scale: .6; opacity: 0; }
}
@keyframes variant {
  0%, 27% { box-shadow: 0 0 0 2px var(--ink), 0 14px 24px -14px rgb(23 20 15 / .45); transform: scale(1.04); }
  34%, 100% { box-shadow: 0 0 0 0 transparent, 0 6px 14px -10px rgb(23 20 15 / .2); transform: none; }
}
@keyframes variant-check { 0%, 27% { opacity: 1; scale: 1; } 34%, 100% { opacity: 0; scale: .4; } }
@keyframes cal-send {
  0%, 45% { background: var(--ink); color: #fff; scale: 1.12; }
  55%, 100% { background: #F1ECE4; color: transparent; scale: 1; }
}
@keyframes day-tick {
  0%, 6% { background: #F1ECE4; }
  12%, 82% { background: var(--ink); }
  92%, 100% { background: #F1ECE4; }
}
@keyframes shine { 0% { opacity: 0; translate: 0 0; } 12%, 80% { opacity: 1; } 100% { opacity: 0; translate: 620% 0; } }

/* ---------- FAQ ---------- */
.faq summary { display: block; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
@media (prefers-reduced-motion: no-preference) {
  .faq { interpolate-size: allow-keywords; }
  .faq::details-content { height: 0; overflow: clip; transition: height .4s var(--ease), content-visibility .4s allow-discrete; }
  .faq[open]::details-content { height: auto; }
}

/* ---------- Laufband ---------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-track > ul { display: flex; flex-shrink: 0; gap: .75rem; padding-right: .75rem; }

/* ---------- Parallax & Fächer (Werte kommen per JS) ---------- */
[data-parallax] { translate: 0 var(--py, 0px); rotate: calc(var(--tilt, 0deg) + var(--prot, 0deg)); }
.fan-card { translate: calc(-50% + var(--fan-x, 0%)) var(--fan-y, 0px); rotate: var(--fan-r, 0deg); }
.fan-card:nth-child(1) { --fan-x: -36%; --fan-y: 16px; --fan-r: -10deg; }
.fan-card:nth-child(3) { --fan-x: 36%; --fan-y: 16px; --fan-r: 10deg; }

/* ---------- Sticky CTA (Mobile) ---------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transition: transform .45s var(--ease), visibility 0s linear 0s;
}
.sticky-cta.is-hidden {
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s linear .45s;
}
@media (max-width: 767.98px) { body { padding-bottom: 5.25rem; } }
/* Seiten ohne Sticky CTA (Wecker-Check): kein freier Platz unter dem Footer */
@media (max-width: 767.98px) { body.no-sticky-cta { padding-bottom: 0; } }
@media (min-width: 768px) { .sticky-cta { display: none; } }

/* ---------- Sprungziele: Abstand zur schwebenden Navigation ---------- */
/* Desktop: Navigation (1rem vom Rand + 3.25rem hoch) plus 1.5rem Luft. Mobile: oben ist keine Navigation fixiert. */
:root { --jump-offset: 1.5rem; }
@media (min-width: 768px) { :root { --jump-offset: calc(1rem + 3.25rem + 1.5rem); } }
main section[id] { scroll-margin-top: var(--jump-offset); }
#formular { scroll-margin-top: calc(var(--jump-offset) + 4rem); } /* plus Platz für den Wecker über der Karte */

/* ---------- Schwebende Navigation (Desktop) ---------- */
.floatnav {
  position: fixed;
  width: max-content;
  white-space: nowrap;
  top: 1rem;
  left: 50%;
  z-index: 50;
  translate: -50% 0;
  transition: translate .55s var(--ease), opacity .4s ease, visibility 0s linear 0s;
}
.floatnav.is-hidden {
  translate: -50% -160%;
  opacity: 0;
  visibility: hidden;
  transition: translate .55s var(--ease), opacity .3s ease, visibility 0s linear .55s;
}

/* ---------- Hero-Headline: ab 768 px jeder Satz auf genau einer Zeile ---------- */
/* Die Schrift passt sich der Breite an, damit «Deine E-Mail-Liste schläft?» nie umbricht. */
@media (min-width: 768px) {
  .hero-fit { font-size: min(6rem, calc((min(100vw, 72rem) - 7rem) / 11.2)); }
  .hero-line { white-space: nowrap; }
}

/* ---------- Hero: zzZ schräg rechts oberhalb des Fragezeichens ---------- */
/* Verankert am «?» (span.q): bleibt bei jeder Breite und jedem Zeilenumbruch an derselben Stelle. */
.q { position: relative; display: inline-block; }
.hero-zzz {
  position: absolute;
  left: 100%;
  bottom: calc(62% + .65rem);
  margin-left: .1em;
  width: 2.4em;
  height: 2.4em;
  font-family: var(--font-head);
  font-size: clamp(1.05rem, .2em, 1.35rem);
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
}
.hero-zzz .hz { position: absolute; }
.hero-zzz .hz1::before, .hero-zzz .hz2::before { content: "z"; }
.hero-zzz .hz3::before { content: "Z"; }
.hero-zzz .hz1 { left: 0; bottom: 0; font-size: .8em; color: var(--muted); }
.hero-zzz .hz2 { left: .6em; bottom: .55em; font-size: 1em; color: var(--muted); }
.hero-zzz .hz3 { left: 1.2em; bottom: 1.15em; font-size: 1.3em; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .hero-zzz .hz { animation: hz-float 2.8s ease-in-out infinite; }
  .hero-zzz .hz2 { animation-delay: .45s; }
  .hero-zzz .hz3 { animation-delay: .9s; }
}
@keyframes hz-float { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(-.25em); opacity: 1; } }

/* ---------- Honeypot: unsichtbar, auch ohne Tailwind ---------- */
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Benji: ohne Foto einspaltig ---------- */
#benji.no-photo .wrap { grid-template-columns: 1fr; }

/* ---------- Mail-Skizzen & Bild-Slots ---------- */
/* Jede .mail füllt ihren (positionierten) Rahmen. */
.mail {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 1.3rem;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(23 20 15 / .06), 0 1px 2px rgb(23 20 15 / .05), 0 24px 44px -24px rgb(23 20 15 / .38);
}
.mail-sketch { position: absolute; inset: 0; }
.mail-img { position: absolute; inset: 0; display: none; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mail.has-img .mail-img { display: block; }
.mail.has-img .mail-sketch { display: none; }
.sk { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); border-radius: var(--r, 999px); background: var(--c, #E6E1DA); }

/* DIE DREI STELLEN (in % der Mail): Rahmen 1–3 und die Streifen, die nacheinander umgebaut werden.
   Bei echten Screenshots hier anpassen. x/w gilt nur für den roten Rahmen, der Streifen geht immer über die ganze Breite. */
.ba-regions {
  --r1x: 4%;  --r1y: 14.5%; --r1w: 92%; --r1h: 9.5%;   /* 1: Betreff */
  --r2x: 5%;  --r2y: 27.5%; --r2w: 90%; --r2h: 44%;    /* 2: Textblock */
  --r3x: 5%;  --r3y: 76%;   --r3w: 54%; --r3h: 11%;    /* 3: Button */
}
.ba-mark { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 2.5px solid var(--alert); border-radius: 12px; }
.ba-m1 { --x: var(--r1x); --y: var(--r1y); --w: var(--r1w); --h: var(--r1h); }
.ba-m2 { --x: var(--r2x); --y: var(--r2y); --w: var(--r2w); --h: var(--r2h); }
.ba-m3 { --x: var(--r3x); --y: var(--r3y); --w: var(--r3w); --h: var(--r3h); }
.ba-mark::after {
  content: attr(data-n);
  position: absolute;
  top: -.75rem;
  right: -.75rem;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--alert);
  color: #fff;
  font: 700 .72rem/1 var(--font-body);
}
.ba-label, .ba-label-static {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(23 20 15 / .08), 0 8px 16px -12px rgb(23 20 15 / .45);
  color: var(--ink);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Vorher/Nachher-Animation (ein Loop = --ba-t) ---------- */
.ba-anim { display: none; }
.js .ba-anim { display: block; }
.js .ba-static { display: none; }

.ba-screen { position: relative; width: 100%; max-width: 26rem; margin-inline: auto; aspect-ratio: 4 / 5; --ba-t: 13.7s; }
.ba-screen > * { position: absolute; }
.ba-label { top: 1%; left: 50%; z-index: 40; translate: -50% 0; opacity: 0; }
.ba-card { left: 15%; top: 10%; width: 70%; height: 83%; z-index: 30; opacity: 0; }
.ba-main { opacity: 1; }
.ba-band { box-shadow: none; clip-path: inset(var(--bt) 100% var(--bb) 0 round 10px); }
.ba-band-1 { --bt: var(--r1y); --bb: calc(100% - var(--r1y) - var(--r1h)); }
.ba-band-2 { --bt: var(--r2y); --bb: calc(100% - var(--r2y) - var(--r2h)); }
.ba-band-3 { --bt: var(--r3y); --bb: calc(100% - var(--r3y) - var(--r3h)); }
.ba-full { box-shadow: none; opacity: 0; }
.ba-screen .ba-mark { opacity: 0; }
.ba-spark { left: 74%; top: 5%; z-index: 35; font-size: 1.9rem; opacity: 0; }

.ba-env { left: 20%; top: 35.2%; z-index: 20; width: 60%; aspect-ratio: 200 / 140; opacity: 0; }
.ba-env > * { position: absolute; }
.env-front { inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; }
.env-letter { left: 12%; top: 10%; z-index: 3; width: 76%; height: 80%; opacity: 0; }
.env-letter .mail { border-radius: .55rem; box-shadow: 0 0 0 1px rgb(23 20 15 / .1); }
.env-flap { left: 0; top: 0; z-index: 1; width: 100%; height: 57.14%; overflow: visible; transform-origin: 50% 10%; transform: perspective(600px) rotateX(180deg); }

.ba-send {
  left: 50%;
  top: 75%;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem 1.25rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #3a342d 0%, var(--ink) 55%, #0c0a07 100%);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  translate: -50% 0;
  opacity: 0;
}
.ba-send::after { content: ""; position: absolute; inset: -7px; border: 2px solid var(--ink); border-radius: 999px; opacity: 0; }
.ba-cursor { z-index: 45; width: 1.75rem; height: 1.75rem; transform-origin: 18% 10%; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .25)); opacity: 0; }
.ba-cursor-1 { left: calc(50% + .4rem); top: 78%; }
.ba-cursor-2 { position: absolute; right: 14%; top: 42%; }

.ba-inbox { left: 7%; top: 15%; z-index: 20; width: 86%; overflow: hidden; border-radius: 1.4rem; background: #fff; box-shadow: 0 0 0 1px rgb(23 20 15 / .06), 0 24px 44px -24px rgb(23 20 15 / .38); opacity: 0; }
.ba-badge { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .2rem; border-radius: 999px; background: var(--alert); color: #fff; font: 700 .65rem/1 var(--font-body); scale: 0; }
.ba-dot { width: .7rem; height: .7rem; flex-shrink: 0; border-radius: 999px; background: #3BB273; }
.ba-reopen { opacity: 0; }
.ba-progress { left: 15%; right: 15%; bottom: 2.5%; height: 3px; overflow: hidden; border-radius: 999px; background: rgb(23 20 15 / .12); }
.ba-progress::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }

.ba-anim.is-on .ba-screen *, .ba-anim.is-on .ba-screen *::after { animation-duration: var(--ba-t); animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
.ba-anim.is-on .ba-l-vorher { animation-name: ba-l-vorher; }
.ba-anim.is-on .ba-l-nachher { animation-name: ba-l-nachher; }
.ba-anim.is-on .ba-main { animation-name: ba-main; }
.ba-anim.is-on .ba-band-1 { animation-name: ba-band-1; }
.ba-anim.is-on .ba-band-2 { animation-name: ba-band-2; }
.ba-anim.is-on .ba-band-3 { animation-name: ba-band-3; }
.ba-anim.is-on .ba-full { animation-name: ba-full; }
.ba-anim.is-on .ba-m1 { animation-name: ba-m1; }
.ba-anim.is-on .ba-m2 { animation-name: ba-m2; }
.ba-anim.is-on .ba-m3 { animation-name: ba-m3; }
.ba-anim.is-on .ba-spark { animation-name: ba-spark; }
.ba-anim.is-on .ba-env { animation-name: ba-env; }
.ba-anim.is-on .env-letter { animation-name: ba-letter; }
.ba-anim.is-on .env-flap { animation-name: ba-flap; }
.ba-anim.is-on .ba-send { animation-name: ba-send; }
.ba-anim.is-on .ba-send::after { animation-name: ba-ripple; }
.ba-anim.is-on .ba-cursor-1 { animation-name: ba-cursor-1; }
.ba-anim.is-on .ba-inbox { animation-name: ba-inbox; }
.ba-anim.is-on .ba-new { animation-name: ba-new; }
.ba-anim.is-on .ba-badge { animation-name: ba-badge; }
.ba-anim.is-on .ba-dot { animation: ba-dot 1.4s ease-out infinite; }
.ba-anim.is-on .ba-cursor-2 { animation-name: ba-cursor-2; }
.ba-anim.is-on .ba-reopen { animation-name: ba-reopen; }
.ba-anim.is-on .ba-progress::after { animation-name: ba-progress; animation-timing-function: linear; }
.ba-anim.is-paused .ba-screen *, .ba-anim.is-paused .ba-screen *::after { animation-play-state: paused !important; }

/* Zeitplan (13.7 s): 0–2.3 s Vorher + Rahmen · 2.8–5.5 s Stelle 1–3 umbauen · 5.6–6.3 s Nachher ·
   7.2–8.8 s Falten & Umschlag · 8.7–10.2 s Senden · 10–11.9 s Posteingang · 11.8–13.6 s wieder geöffnet */
@keyframes ba-main { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 4.38%, 52.55% { opacity: 1; transform: none; } 56.93% { opacity: 1; transform: translateY(-41.9%) scale(.651, .324); } 57.66% { opacity: 0; transform: translateY(-41.9%) scale(.651, .324); } 58.4%, 100% { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes ba-band-1 { 0%, 20.44% { clip-path: inset(var(--bt) 100% var(--bb) 0 round 10px); } 24.82%, 100% { clip-path: inset(var(--bt) 0 var(--bb) 0 round 10px); } }
@keyframes ba-band-2 { 0%, 27.74% { clip-path: inset(var(--bt) 100% var(--bb) 0 round 10px); } 32.12%, 100% { clip-path: inset(var(--bt) 0 var(--bb) 0 round 10px); } }
@keyframes ba-band-3 { 0%, 35.04% { clip-path: inset(var(--bt) 100% var(--bb) 0 round 10px); } 39.42%, 100% { clip-path: inset(var(--bt) 0 var(--bb) 0 round 10px); } }
@keyframes ba-full { 0%, 40.88% { opacity: 0; } 43.8%, 100% { opacity: 1; } }
@keyframes ba-m1 { 0%, 7.3% { opacity: 0; transform: scale(.6); } 8.39% { opacity: 1; transform: scale(1.06); } 9.49%, 23.36% { opacity: 1; transform: none; } 25.55%, 100% { opacity: 0; transform: scale(.94); } }
@keyframes ba-m2 { 0%, 10.95% { opacity: 0; transform: scale(.6); } 12.04% { opacity: 1; transform: scale(1.04); } 13.14%, 30.66% { opacity: 1; transform: none; } 32.85%, 100% { opacity: 0; transform: scale(.97); } }
@keyframes ba-m3 { 0%, 14.6% { opacity: 0; transform: scale(.6); } 15.69% { opacity: 1; transform: scale(1.08); } 16.79%, 37.96% { opacity: 1; transform: none; } 40.15%, 100% { opacity: 0; transform: scale(.94); } }
@keyframes ba-l-vorher { 0%, 2.19% { opacity: 0; transform: translateY(-6px); } 5.11%, 40.88% { opacity: 1; transform: none; } 43.07%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes ba-l-nachher { 0%, 43.07% { opacity: 0; transform: translateY(-6px); } 45.99%, 52.55% { opacity: 1; transform: none; } 54.74%, 87.59% { opacity: 0; transform: translateY(-6px); } 90.51%, 96.35% { opacity: 1; transform: none; } 99.27%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes ba-spark { 0%, 43.8% { opacity: 0; transform: scale(.4) rotate(-20deg); } 46.7% { opacity: 1; transform: scale(1.15) rotate(8deg); } 48.9%, 50.36% { opacity: 1; transform: none; } 52.55%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes ba-env { 0%, 51.82% { opacity: 0; transform: translateY(16px) scale(.9); } 55.47%, 69.71% { opacity: 1; transform: none; } 70.44% { opacity: 1; transform: translateY(6px) scale(1.05, .93); } 72.99% { opacity: 1; transform: translate(55%, -95%) rotate(-14deg) scale(.55); } 74.45% { opacity: 0; transform: translate(85%, -150%) rotate(-20deg) scale(.38); } 75.18%, 100% { opacity: 0; transform: translateY(16px) scale(.9); } }
@keyframes ba-letter { 0%, 56.93% { opacity: 0; transform: translateY(-131%); } 57.66% { opacity: 1; transform: translateY(-131%); } 60.95%, 63.5% { opacity: 1; transform: none; } 64.31%, 75.18% { opacity: 0; transform: none; } 75.9%, 100% { opacity: 0; transform: translateY(-131%); } }
@keyframes ba-flap { 0%, 60.95% { z-index: 1; transform: perspective(600px) rotateX(180deg); } 61.05% { z-index: 5; transform: perspective(600px) rotateX(179deg); } 63.87%, 74.45% { z-index: 5; transform: perspective(600px) rotateX(0deg); } 75.18%, 100% { z-index: 1; transform: perspective(600px) rotateX(180deg); } }
@keyframes ba-send { 0%, 62.04% { opacity: 0; transform: translateY(10px) scale(.9); } 64.96%, 68.61% { opacity: 1; transform: none; } 69.34% { opacity: 1; transform: scale(.92); } 70.07% { opacity: 1; transform: none; } 72.99%, 100% { opacity: 0; transform: translateY(6px) scale(.95); } }
@keyframes ba-ripple { 0%, 68.61% { opacity: 0; transform: scale(.9); } 69.34% { opacity: .55; transform: scale(1); } 72.3%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes ba-cursor-1 { 0%, 63.5% { opacity: 0; transform: translate(110px, 80px); } 64.96% { opacity: 1; transform: translate(80px, 60px); } 67.88% { opacity: 1; transform: none; } 68.61% { opacity: 1; transform: scale(.82); } 69.34%, 70.8% { opacity: 1; transform: none; } 72.99%, 100% { opacity: 0; transform: translate(8px, 10px); } }
@keyframes ba-inbox { 0%, 72.99% { opacity: 0; transform: translateY(18px) scale(.96); } 76.64%, 85.4% { opacity: 1; transform: none; } 88.32%, 100% { opacity: 0; transform: scale(1.03); } }
@keyframes ba-new { 0%, 76.64% { opacity: 0; transform: translateY(-140%) scale(.9); } 79.56% { opacity: 1; transform: translateY(6%) scale(1.02); } 80.6%, 84.67% { opacity: 1; transform: none; } 85.4% { opacity: 1; transform: scale(.97); } 86.13%, 99% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-140%) scale(.9); } }
@keyframes ba-badge { 0%, 78.8% { scale: 0; } 80.29% { scale: 1.25; } 81.02%, 99% { scale: 1; } 100% { scale: 0; } }
@keyframes ba-dot { 0% { box-shadow: 0 0 0 0 rgb(59 178 115 / .55); } 70%, 100% { box-shadow: 0 0 0 8px rgb(59 178 115 / 0); } }
@keyframes ba-cursor-2 { 0%, 80.29% { opacity: 0; transform: translate(70px, 50px); } 81.75% { opacity: 1; transform: translate(50px, 36px); } 83.94% { opacity: 1; transform: none; } 84.67% { opacity: 1; transform: scale(.82); } 85.4% { opacity: 1; transform: none; } 86.86%, 100% { opacity: 0; transform: none; } }
@keyframes ba-reopen { 0%, 86.13% { opacity: 0; transform: translateY(-24.7%) scale(1.1, .12); } 90.51%, 96.35% { opacity: 1; transform: none; } 99.27%, 100% { opacity: 0; transform: scale(.98); } }
@keyframes ba-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Absende-Knopf im Formular: dezenter Puls (3 Mal, dann Ruhe), Klasse setzt das Script ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cta-pulse { animation: cta-pulse 1.1s var(--ease) .5s 3; }
}
@keyframes cta-pulse {
  0%, 100% { scale: 1; }
  40% { scale: 1.04; }
}

/* ---------- Wecker-Check (/wecker-check) ---------- */
/* Fortschrittsbalken: füllt sich weich mit dem Easing der Seite. Wecker klingelt bei «Hellwach» (Keyframe ring wie .m-ring). */
.quiz-bar { transform: scaleX(.1); transform-origin: left center; }
/* Wecker-Figur (viewBox 0 0 100 100) reicht von y 7 bis 98: Mitte 52.5. Um 2.5 % hoch, damit sie genau in der Kreismitte sitzt. */
.mascot-center { translate: 0 -2.5%; }
@media (prefers-reduced-motion: no-preference) {
  .quiz-bar { transition: transform .6s var(--ease); }
  .stage-ring { animation: ring 2.5s ease-in-out .4s infinite; }
}

/* ---------- Newsletter: dunkler Look, gemeinsam für die Seite /newsletter (body) und das Pop-up der Startseite (dialog) ---------- */
.nl-dark {
  --nl-bg: #0E0E10;
  --nl-ink: #FBF8F3;
  --nl-muted: #A3A3A3;
  color-scheme: dark;
  background: var(--nl-bg);
  color: var(--nl-ink);
}
.nl-dark :focus-visible { outline-color: var(--nl-ink); }
.nl-dark ::selection { background: var(--blush); color: var(--nl-bg); }
/* Eingabefeld: Rand und Fokus hier statt per Utility, damit der Autofill-Trick den Rand nicht überschreibt */
.nl-field {
  background: rgb(255 255 255 / .06);
  color: var(--nl-ink);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.nl-field::placeholder { color: var(--nl-muted); opacity: 1; }
.nl-field:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); }
/* Transparente Outline bleibt im Kontrastmodus sichtbar, dort fallen Schatten weg */
.nl-field:focus { outline: 2px solid transparent; background: rgb(255 255 255 / .09); box-shadow: inset 0 0 0 1.5px rgb(251 248 243 / .7), 0 0 0 4px rgb(251 248 243 / .1); }
.nl-field[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--blush); }
.nl-field:-webkit-autofill,
.nl-field:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--nl-ink);
  caret-color: var(--nl-ink);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), inset 0 0 0 100px #1C1C1F;
}
.nl-field:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--nl-ink);
  caret-color: var(--nl-ink);
  box-shadow: inset 0 0 0 1.5px rgb(251 248 243 / .7), inset 0 0 0 100px #1C1C1F, 0 0 0 4px rgb(251 248 243 / .1);
}
@media (forced-colors: active) { .nl-field { border: 1px solid CanvasText; } }
/* Heller Button auf dunklem Grund: Schatten weich statt dunkel, damit er sich abhebt */
.nl-dark .btn-light { box-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 14px 30px -14px rgb(251 248 243 / .28); }
.nl-dark .btn-light:hover,
.nl-dark .btn-light:focus-visible { box-shadow: 0 2px 4px rgb(0 0 0 / .4), 0 22px 38px -16px rgb(251 248 243 / .36); }
.nl-dark .btn-light:disabled { cursor: wait; opacity: .75; }

/* Pop-up (dialog) auf der Startseite. Tailwind setzt margin auf 0, margin: auto zentriert wieder. */
.nl-popup {
  width: min(100% - 1rem, 600px);
  max-height: calc(100dvh - 1rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 2rem;
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .07), 0 40px 100px -30px rgb(0 0 0 / .7);
}
/* Zu: nie im Seitenfluss, auch nicht in alten Browsern ohne <dialog> (sonst stünde das Formular doppelt auf der Seite) */
.nl-popup:not([open]) { display: none; }
.nl-popup::backdrop { background: rgb(14 14 16 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:has(.nl-popup[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .nl-popup[open] { animation: nl-pop-in .6s var(--ease); }
  .nl-popup[open]::backdrop { animation: nl-fade-in .4s ease; }
}
@keyframes nl-pop-in { from { opacity: 0; transform: translateY(24px) scale(.96); } }

/* Umfrage auf /willkommen: alle Fragen auf einer Seite, Antworten als Chips. Jeder Chip ist ein echtes
   Radio- oder Checkbox-Feld (unsichtbar über dem Chip), die gewählte Antwort hell. */
.survey-q { display: block; font-family: var(--font-head); font-size: clamp(1.125rem, 1rem + .5vw, 1.3rem); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; color: var(--nl-ink); }
.survey-q-num { color: var(--nl-muted); }
.survey-q-hint { font-family: var(--font-body); font-size: .8em; font-weight: 500; color: var(--nl-muted); }
.survey fieldset { min-width: 0; }
.survey-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .875rem; }
/* Zweite Gruppe einer Frage beginnt immer auf einer neuen Reihe (z. B. «Anderes» neben «Noch gar nicht») */
.survey-chips-next { margin-top: .5rem; }
/* Zwei Antworten, die immer nebeneinander stehen: Auf schmalen Handys bricht der Text im Chip um statt in die nächste Reihe */
.survey-chips-pair { flex-wrap: nowrap; }
.survey-chips-pair .survey-chip { flex: 0 1 auto; min-width: 0; }
.survey-chips-pair .survey-chip span { text-align: center; text-wrap: balance; }
.survey-chip { position: relative; display: inline-flex; max-width: 100%; }
.survey-chip input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.survey-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .5rem 1.05rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14);
  color: var(--nl-ink);
  font-weight: 600;
  line-height: 1.25;
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease, scale .2s ease;
}
/* Hover nur mit Maus: Auf dem Handy bliebe er nach dem Antippen hängen */
@media (hover: hover) {
  .survey-chip:hover input:not(:checked) + span { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
}
.survey-chip:active span { scale: .97; }
.survey-chip input:checked + span { background: var(--nl-ink); color: var(--nl-bg); box-shadow: none; }
.survey-chip input:focus-visible + span { outline: 2px solid var(--nl-ink); outline-offset: 3px; }
@keyframes nl-fade-in { from { opacity: 0; } }

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { width: auto; justify-content: center; }
  .marquee-track > ul:first-child { flex-shrink: 1; flex-wrap: wrap; justify-content: center; padding-inline: 1.25rem; }
  .marquee-dup, .marquee-row-2 { display: none !important; }
  .marquee li { padding: .55rem 1rem; font-size: 1rem; }
  .sticky-cta, .sticky-cta.is-hidden, .floatnav, .floatnav.is-hidden { transition: none; }
  .zzz { opacity: 1; }
  .js .ba-anim { display: none; }
  .js .ba-static { display: grid; }
}