/* =========================================================
   CreditScorium – Landingpage "Story" (Bootstrap 5.3)
   Farben: Koralle, Sonne, Himmel, Limette, Lila, Tinte
   Schriften: Inter Display (Schlagworte), Inter (Text), Lora (nur Logo) – alle lokal
   ========================================================= */

@font-face { font-family: "Inter Display"; src: url("../fonts/interdisplay-black.woff") format("woff"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/interdisplay-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-semibold.woff") format("woff"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-variable.woff") format("woff"); font-weight: 400 700; font-display: swap; }

:root {
  --ink: #14121F;
  --coral: #FF5C5C;
  --sun: #FFC83D;
  --sky: #4CC9F0;
  --lime: #C8F560;
  --lilac: #7B5CFF;
  --paper: #FFFFFF;
  --mist: #F3F2F8;
  --cs-petrol: #0B5D63;
  --cs-petrol-dark: #084449;
  --cs-petrol-soft: #DCEBEA;
  --cs-ink: var(--ink);
  --cs-line: #E2E0EC;
  --cs-muted: #5D5A6E;
  --cs-mist: var(--mist);
  --cs-green: #1FB863;
  --cs-amber: #E09A1A;
  --cs-red: #E5203A;
  --cs-gold: var(--sun);
  --cs-serif: "Lora", Georgia, serif;
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --nav-h: 66px;
  --hard: 6px 6px 0 var(--ink);

  --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-color-rgb: 20, 18, 31;
  --bs-body-bg: #fff;
  --bs-primary: var(--ink);
  --bs-primary-rgb: 20, 18, 31;
  --bs-heading-color: inherit;
  --bs-link-color: var(--ink);
  --bs-link-color-rgb: 20, 18, 31;
  --bs-link-hover-color: var(--lilac);
  --bs-link-hover-color-rgb: 123, 92, 255;
  --bs-border-color: var(--cs-line);
  --bs-secondary-color: var(--cs-muted);
  --bs-focus-ring-color: rgba(123, 92, 255, .35);
}

html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); }
body { font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
::selection { background: var(--sun); color: var(--ink); }
a { text-underline-offset: 3px; }
.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: .5rem; }
:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }

/* Farbflächen */
.c-coral { --bg: var(--coral); --fg: var(--ink); }
.c-sun   { --bg: var(--sun);   --fg: var(--ink); }
.c-sky   { --bg: var(--sky);   --fg: var(--ink); }
.c-lime  { --bg: var(--lime);  --fg: var(--ink); }
.c-lilac { --bg: var(--lilac); --fg: #fff; }
.c-ink   { --bg: var(--ink);   --fg: #fff; }
.c-white { --bg: #fff;         --fg: var(--ink); }
[class*="c-"] { background: var(--bg); color: var(--fg); }

/* ---------- Buttons ---------- */
.btn { font-weight: 700; border-radius: 999px; padding: .65rem 1.3rem; }
.btn-lg { padding: .95rem 1.75rem; font-size: 1.08rem; }
.btn-sm { padding: .3rem .8rem; font-size: .85rem; }
.btn-primary, .btn-ink, .btn-dark {
  --bs-btn-color: #fff; --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--lilac); --bs-btn-hover-border-color: var(--lilac);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--lilac); --bs-btn-active-border-color: var(--lilac);
  --bs-btn-disabled-bg: var(--ink); --bs-btn-disabled-border-color: var(--ink); --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 123, 92, 255;
}
.btn-ink { position: relative; overflow: hidden; }
.btn-ink::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine { 0%, 60% { left: -40%; } 85%, 100% { left: 130%; } }
.btn-outline-dark { --bs-btn-color: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); --bs-btn-hover-color: #fff; border-width: 2px; }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--cs-line); --bs-btn-hover-bg: var(--mist); }
.link-button { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Formulare ---------- */
.form-label { font-weight: 700; font-size: .9rem; margin-bottom: .35rem; }
.form-control { border: 2px solid var(--ink); border-radius: 14px; padding: .7rem .9rem; }
.form-control-lg { border-radius: 16px; }
.form-control:focus { border-color: var(--lilac); box-shadow: 0 0 0 4px rgba(123, 92, 255, .25); }
.form-check-input { border: 2px solid var(--ink); width: 1.2em; height: 1.2em; margin-top: .15em; }
.form-check-input:checked { background-color: var(--lilac); border-color: var(--lilac); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(123, 92, 255, .25); border-color: var(--lilac); }
.form-check-label a { color: inherit; font-weight: 600; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.invalid-feedback:empty { display: none !important; }
.form-card { background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 28px; padding: 2rem; box-shadow: 10px 10px 0 var(--ink); }
.form-card-line { box-shadow: var(--hard); }
.form-done { text-align: center; padding: 2rem .5rem; }
.form-done .done-icon { display: inline-grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--lime); border: 3px solid var(--ink); margin-bottom: 1rem; animation: pop-in .6s cubic-bezier(.2, 1.6, .4, 1); }
.form-done .done-icon .icon { width: 2.2rem; height: 2.2rem; stroke-width: 3; }
.form-done h3 { font-family: var(--font-display); font-weight: 900; font-size: 1.9rem; letter-spacing: -.02em; }
.form-done p { margin: 0; color: var(--cs-muted); }
@keyframes pop-in { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }

/* ---------- Logo (unverändert) & Navigation ---------- */
.logo { display: inline-flex; align-items: center; gap: .6rem; }
.logo-mark { width: 32px; height: 32px; }
.logo-text { font-family: var(--cs-serif); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; color: var(--ink); }
.site-nav { background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: .7rem 0; border-bottom: 2px solid var(--ink); }
.site-nav .nav-link { color: var(--ink); font-weight: 600; font-size: .96rem; padding-left: .75rem !important; padding-right: .75rem !important; }
.site-nav .nav-link:hover { color: var(--lilac); }
.navbar-toggler { border: 0; padding: .35rem; font-size: 1.5rem; color: var(--ink); }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(123, 92, 255, .35); }

/* Story-Fortschritt wie bei Instagram-Storys */
.story-progress { position: absolute; left: 0; right: 0; bottom: -2px; display: flex; gap: 3px; height: 4px; padding: 0 3px; }
.story-progress span { flex: 1; background: rgba(20, 18, 31, .12); border-radius: 99px; overflow: hidden; }
.story-progress span i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--f, 0)); }

/* =========================================================
   Story-Slides: riesiges Wort schrumpft beim Scrollen
   ========================================================= */
.story { position: relative; height: 215vh; }
.story-stage {
  position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h));
  overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--word-h, 110px) + 1svh) .75rem 3svh;
}
.mega {
  position: absolute; left: 50%; top: 50%; margin: 0; z-index: 2; pointer-events: none;
  font-family: var(--font-display); font-weight: 900; line-height: .82; letter-spacing: -.045em; white-space: nowrap; color: var(--fg);
  font-size: min(calc(150vw / var(--len)), 44svh);
  transform: translate(-50%, -50%) translateY(calc(var(--p, 0) * var(--lift, -34svh))) scale(calc(1 - var(--p, 0) * var(--shrink, .72)));
  will-change: transform;
}
.mega-word { display: inline-block; }
.mega .ch { display: inline-block; }
.anim-ready .story .mega .ch { transform: translateY(110%) rotate(8deg); opacity: 0; }
.anim-ready .story.is-in .mega .ch { animation: ch-drop .9s cubic-bezier(.2, 1.4, .35, 1) forwards; animation-delay: calc(var(--i) * 55ms); }
@keyframes ch-drop { to { transform: none; opacity: 1; } }

.story-body {
  position: relative; z-index: 1; width: 100%; max-width: 760px; display: flex; flex-direction: column; align-items: center; text-align: center;
  opacity: clamp(0, calc((var(--p, 0) - .3) * 2.6), 1);
  transform: translateY(calc((1 - var(--p, 0)) * 70px)) scale(calc(.9 + var(--p, 0) * .1));
}
.scene-slot { width: min(100%, calc((100svh - var(--nav-h)) * .62 * 1.333)); aspect-ratio: 4 / 3; }
.story-line { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 1.75rem); line-height: 1.2; letter-spacing: -.01em; max-width: 26ch; margin: .25rem auto 0; }

.sticker {
  position: absolute; top: 4.5svh; left: 50%; z-index: 3; transform: translateX(-50%) rotate(-4deg);
  background: #fff; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 999px; padding: .4rem 1rem;
  font-weight: 800; font-size: .95rem; box-shadow: 4px 4px 0 var(--ink); white-space: nowrap;
  opacity: calc(1 - var(--p, 0) * 3);
  animation: sticker-in .7s .8s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes sticker-in { from { transform: translateX(-50%) scale(0) rotate(-25deg); } to { transform: translateX(-50%) rotate(-4deg); } }
.scroll-hint {
  position: absolute; left: 50%; bottom: 3.5svh; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .4rem;
  color: var(--ink); text-decoration: none; font-weight: 800; font-size: .85rem; opacity: calc(1 - var(--p, 0) * 6);
}
.scroll-hint i { width: 26px; height: 40px; border: 2.5px solid var(--ink); border-radius: 14px; position: relative; }
.scroll-hint i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 5px; height: 8px; margin-left: -2.5px; border-radius: 3px; background: var(--ink); animation: wheel 1.4s ease-in-out infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Ticker ---------- */
.ticker { padding: 2.25rem 0; background: #fff; overflow: hidden; }
.ticker-row { padding: .9rem 0; overflow: hidden; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.t-lilac { background: var(--lilac); color: #fff; transform: rotate(-2deg) scale(1.04); }
.t-ink { background: var(--ink); color: var(--sun); transform: rotate(1.6deg) scale(1.04); margin-top: -.6rem; }
.ticker-track { display: flex; width: max-content; gap: 1.5rem; align-items: center; animation: marquee 24s linear infinite; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.4rem, 3.6vw, 2.4rem); letter-spacing: -.01em; white-space: nowrap; }
.ticker-track.reverse { animation-direction: reverse; animation-duration: 28s; }
.ticker-track b { color: var(--sun); font-size: .8em; }
.t-ink .ticker-track b { color: var(--coral); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================
   Normale Slides
   ========================================================= */
.slide { padding: clamp(4.5rem, 10vw, 7.5rem) 0; overflow: hidden; }
.mega-static { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.4rem, 12.5vw, 10rem); line-height: .86; letter-spacing: -.045em; text-align: center; margin: 0 0 1.25rem; }
.slide-sub { text-align: center; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; max-width: 34rem; margin: 0 auto 2.75rem; }

/* So geht's */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin: 2.5rem 0 0; }
.how-card { position: relative; border: 3px solid var(--ink); border-radius: 30px; padding: 2rem 1.75rem 1.75rem; box-shadow: 8px 8px 0 var(--ink); overflow: hidden; transition: box-shadow .2s; }
.how-card.hc-1 { background: var(--sun); } .how-card.hc-2 { background: var(--sky); } .how-card.hc-3 { background: var(--lime); }
.how-num { position: absolute; right: .9rem; top: -.6rem; font-family: var(--font-display); font-weight: 900; font-size: 7.5rem; line-height: 1; color: transparent; -webkit-text-stroke: 3px var(--ink); opacity: .9; }
.how-ico { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: #fff; border: 3px solid var(--ink); margin-bottom: 3.25rem; }
.how-ico .icon { width: 1.9rem; height: 1.9rem; stroke-width: 2.2; }
.how-card h3 { font-family: var(--font-display); font-weight: 900; font-size: 2rem; letter-spacing: -.02em; margin: 0 0 .2rem; }
.how-card p { margin: 0; font-weight: 600; }

/* Simulator */
.sim { max-width: 720px; margin: 0 auto; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 32px; padding: 2rem 2rem 1.75rem; box-shadow: 12px 12px 0 var(--ink); }
.sim-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.sim-score { font-family: var(--font-display); font-weight: 900; font-size: clamp(4rem, 10vw, 6rem); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sim-grade { display: inline-block; vertical-align: top; margin-left: .5rem; margin-top: .4rem; font-weight: 800; font-size: .95rem; padding: .3rem .8rem; border-radius: 999px; background: var(--lime); border: 2px solid var(--ink); }
.sim-grade[data-tone="mid"] { background: var(--sun); }
.sim-grade[data-tone="low"] { background: var(--coral); }
.sim-out { font-family: var(--font-display); font-weight: 900; font-size: 2.2rem; color: var(--lilac); font-variant-numeric: tabular-nums; }
.sim-range { height: 2.6rem; margin-top: .25rem; }
.sim-range::-webkit-slider-runnable-track { height: 14px; border-radius: 99px; border: 2px solid var(--ink); background: linear-gradient(90deg, var(--lilac) var(--p, 60%), #fff var(--p, 60%)); }
.sim-range::-webkit-slider-thumb { -webkit-appearance: none; width: 2.2rem; height: 2.2rem; margin-top: -.75rem; border-radius: 50%; background: var(--sun); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.sim-range::-moz-range-track { height: 14px; border-radius: 99px; border: 2px solid var(--ink); background: #fff; }
.sim-range::-moz-range-progress { height: 14px; border-radius: 99px; background: var(--lilac); }
.sim-range::-moz-range-thumb { width: 2rem; height: 2rem; border-radius: 50%; background: var(--sun); border: 3px solid var(--ink); }
.sim-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(123, 92, 255, .35); }
.sim-hint { text-align: center; font-weight: 700; font-size: .85rem; color: var(--cs-muted); margin: 0 0 1.25rem; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
.unlocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 0; }
.unlocks li { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .9rem .5rem; border-radius: 18px; border: 2px dashed #C9C6D6; color: #A19DB3; font-weight: 800; font-size: .95rem; position: relative; transition: background-color .25s, color .25s, border-color .25s; }
.unlocks li .icon { width: 1.8rem; height: 1.8rem; }
.unlocks .u-state { position: absolute; top: -.6rem; right: -.4rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: #E7E5EF; color: #8A86A0; border: 2px solid #fff; }
.unlocks .u-state .icon { width: .95rem; height: .95rem; stroke-width: 3; }
.unlocks li.on { background: var(--lime); color: var(--ink); border: 2px solid var(--ink); }
.unlocks li.on .u-state { background: var(--ink); color: var(--lime); }
.unlocks li.pop { animation: chip-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes chip-pop { 0% { transform: scale(.8) rotate(-6deg); } 100% { transform: scale(1) rotate(0); } }

/* Skala */
.scale { margin: .75rem 0 .25rem; }
.scale-track { position: relative; display: flex; gap: 4px; height: 12px; }
.seg { display: block; height: 100%; border: 2px solid var(--ink); }
.seg-1 { background: var(--coral); border-radius: 99px 0 0 99px; }
.seg-2 { background: var(--sun); }
.seg-3 { background: var(--sky); }
.seg-4 { background: var(--lime); border-radius: 0 99px 99px 0; }
.scale-marker { position: absolute; top: 50%; left: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #fff; border: 4px solid var(--ink); transition: left .5s cubic-bezier(.2, 1.4, .4, 1); }
.scale-labels { display: flex; gap: 4px; margin-top: .5rem; font-size: .75rem; font-weight: 700; color: var(--cs-muted); }
.scale-labels span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Transparenz */
.powers { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0; height: 100%; }
.powers li { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: 1.4rem; border-radius: 24px; color: var(--ink); font-family: var(--font-display); font-weight: 900; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.02em; min-height: 9.5rem; transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.powers li:nth-child(1) { background: var(--lime); } .powers li:nth-child(2) { background: var(--sky); }
.powers li:nth-child(3) { background: var(--sun); } .powers li:nth-child(4) { background: var(--coral); }
.powers li:hover { transform: rotate(-3deg) scale(1.03); }
.powers .icon { width: 2.4rem; height: 2.4rem; stroke-width: 2.4; }
.feed { background: #221F33; border-radius: 24px; padding: 1.4rem 1.4rem .5rem; height: 100%; }
.feed-head { font-weight: 800; margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
.live-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgba(255, 92, 92, .6); animation: live 1.6s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 10px rgba(255, 92, 92, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 92, 92, 0); } }
.feed-window { height: 15.5rem; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); }
.feed-list { margin: 0; animation: feed 16s linear infinite; }
.feed:hover .feed-list { animation-play-state: paused; }
@keyframes feed { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.feed-list li { display: grid; grid-template-columns: 14px 1fr auto; gap: .9rem; align-items: center; padding: .7rem .2rem; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.feed-list b { display: block; font-size: 1rem; }
.feed-list small { color: #A9A5BF; }
.feed-list time { font-size: .8rem; color: #A9A5BF; white-space: nowrap; }
.log-dot { width: 14px; height: 14px; border-radius: 50%; }
.d-ok { background: var(--lime); } .d-info { background: var(--sky); } .d-warn { background: var(--sun); } .d-del { background: var(--coral); }

/* Alt vs Neu */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.25rem; max-width: 920px; margin: 2.5rem auto 0; }
.vs-col { border-radius: 28px; padding: 1.75rem; }
.vs-old { background: var(--mist); color: #8A86A0; transform: rotate(-2deg); }
.vs-new { background: var(--lime); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); transform: rotate(1.5deg); }
.anim-ready .vs-old.is-in { transform: rotate(-2deg); }
.anim-ready .vs-new.is-in { transform: rotate(1.5deg); }
.vs-label { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; letter-spacing: -.02em; margin-bottom: 1rem; }
.vs-new .vs-label { color: var(--ink); }
.vs-col li { display: flex; align-items: center; gap: .7rem; font-weight: 700; font-size: 1.1rem; padding: .45rem 0; }
.vs-old li { text-decoration: line-through; text-decoration-thickness: 2px; }
.vs-old .icon { color: var(--coral); stroke-width: 3; }
.vs-new .icon { background: var(--ink); color: var(--lime); border-radius: 50%; padding: 4px; width: 1.6rem; height: 1.6rem; stroke-width: 3.2; }
.vs-badge { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--ink); color: var(--sun); font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; }
.vs-badge.is-in { animation: wobble 2.4s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(12deg) scale(1.1); } }

/* Warteliste */
.wl-count { display: flex; align-items: center; gap: 1rem; justify-content: center; }
.wl-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(5rem, 15vw, 9rem); line-height: .85; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.wl-label { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.05; }
@media (min-width: 992px) { .wl-count { justify-content: flex-start; } }

/* Kontakt */
.contact-list { display: grid; gap: .75rem; margin: 0; }
.contact-list li { display: flex; align-items: center; gap: .75rem; font-weight: 700; }
.contact-list .icon { width: 2.4rem; height: 2.4rem; padding: .5rem; border-radius: 50%; background: var(--sun); border: 2px solid var(--ink); }

/* Schwebender CTA (Handy) */
.float-cta {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1060; padding: .85rem 1.3rem; border-radius: 999px; text-decoration: none;
  background: var(--ink); color: #fff; font-weight: 800; border: 3px solid var(--sun); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5);
  animation: float-in .5s cubic-bezier(.2, 1.4, .4, 1);
}
.float-cta:hover { color: #fff; background: var(--lilac); }
.float-cta[hidden] { display: none; }
@keyframes float-in { from { transform: translateY(120%); } to { transform: none; } }
@media (min-width: 992px) { .float-cta { display: none !important; } }

/* Footer */
.site-footer { background: var(--ink); color: #B6B2CC; padding: 0 0 2rem; font-size: .95rem; overflow: hidden; }
.footer-marquee { padding: 2.5rem 0 3rem; overflow: hidden; }
.footer-marquee .ticker-track { font-size: clamp(4rem, 14vw, 11rem); line-height: 1; animation-duration: 30s; }
.footer-marquee span { color: transparent; -webkit-text-stroke: 2px #fff; }
.footer-marquee b { color: var(--coral); }
.site-footer .logo-text { color: #fff; }
.footer-brand { text-decoration: none; }
.footer-head { color: #fff; font-weight: 700; margin-bottom: .75rem; }
.footer-links li { margin-bottom: .45rem; }
.footer-links a, .footer-links .link-button { color: #B6B2CC; text-decoration: none; }
.footer-links a:hover, .footer-links .link-button:hover { color: var(--sun); text-decoration: underline; }
.footer-copy { margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .85rem; }

/* =========================================================
   Animations-Engine (Ersatz für WOW.js + animate.css)
   Nur aktiv, wenn JavaScript läuft (html.anim-ready)
   ========================================================= */
.anim-ready [data-anim] { opacity: 0; transition: opacity .7s ease, transform .9s cubic-bezier(.2, 1.15, .35, 1); transition-delay: var(--delay, 0ms); will-change: transform, opacity; }
.anim-ready [data-anim="fade-up"] { transform: translateY(50px); }
.anim-ready [data-anim="fade-left"] { transform: translateX(70px); }
.anim-ready [data-anim="fade-right"] { transform: translateX(-70px); }
.anim-ready [data-anim="zoom-in"] { transform: scale(.82); }
.anim-ready [data-anim="pop"] { transform: scale(.3) rotate(-12deg); }
.anim-ready [data-anim="tilt-left"] { transform: translate(-60px, 40px) rotate(-10deg); }
.anim-ready [data-anim="tilt-right"] { transform: translate(60px, 40px) rotate(10deg); }
.anim-ready [data-anim].is-in { opacity: 1; transform: none; }
.anim-ready [data-mega-reveal] { opacity: 0; transform: scale(2.3); filter: blur(10px); transition: opacity .6s ease, transform 1s cubic-bezier(.2, 1, .3, 1), filter .8s ease; }
.anim-ready [data-mega-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ---------- Unterseiten ---------- */
.page { padding: 4.5rem 0 6rem; }
.page .container { max-width: 46rem; }
.page h1 { font-family: var(--font-display); font-weight: 900; letter-spacing: -.03em; font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 1.5rem; }
.page h2 { font-size: 1.2rem; font-weight: 700; margin: 2rem 0 .6rem; }
.page p, .page li { color: #3D4854; }
.page .placeholder-note { background: #FFF6DE; border: 1px solid #F1DB9F; color: #6B500D; padding: .9rem 1rem; border-radius: .5rem; font-size: .92rem; margin-bottom: 1.75rem; }

/* ---------- Einwilligung ---------- */
.consent-banner {
  border: 3px solid var(--ink) !important; box-shadow: 8px 8px 0 var(--ink) !important; border-radius: 22px !important;
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 1080; width: min(26rem, calc(100vw - 2.5rem));
  background: #fff; color: var(--cs-ink); border: 1px solid var(--cs-line); border-radius: .75rem; padding: 1.5rem;
  box-shadow: 0 24px 60px -20px rgba(27, 36, 48, .45);
  animation: consent-in .35s cubic-bezier(.22, 1, .36, 1);
}
.consent-banner[hidden] { display: none; }
.consent-banner-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.consent-banner-icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .5rem; background: var(--cs-petrol-soft); color: var(--cs-petrol); flex-shrink: 0; }
.consent-banner-icon .icon { width: 1.35rem; height: 1.35rem; }
.consent-banner h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 900; letter-spacing: -.01em; margin: 0; }
.consent-banner p { font-size: .9rem; color: #46525E; margin-bottom: 1.1rem; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.consent-actions .btn { padding: .6rem .5rem; font-size: .92rem; }
.consent-settings-link { display: block; margin: .9rem auto 0; font-size: .88rem; color: var(--cs-muted); }
@keyframes consent-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.consent-modal .modal-title { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; }
.consent-modal .modal-header { align-items: flex-start; padding: 1.5rem 1.5rem 1rem; }
.consent-modal .modal-body { padding: 0 1.5rem 1rem; }
.consent-modal .modal-footer { padding: 1rem 1.5rem 1.5rem; gap: .5rem; }
.consent-modal .modal-footer > * { margin: 0; }
.consent-cat { padding: 1.1rem 0; border-bottom: 1px solid var(--cs-line); }
.consent-cat .form-switch .form-check-input { width: 2.75rem; height: 1.5rem; cursor: pointer; }
.consent-cat .form-check-input:disabled { opacity: .55; cursor: not-allowed; }
.consent-details summary { font-size: .85rem; font-weight: 600; color: var(--cs-petrol); cursor: pointer; }
.consent-details[open] summary { margin-bottom: .6rem; }
.consent-details code { color: var(--cs-ink); }
.consent-id { margin-top: 1rem; word-break: break-all; }

.consent-fab {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 1070; width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--cs-line); background: #fff; color: var(--cs-petrol);
  box-shadow: 0 8px 24px -8px rgba(27, 36, 48, .4); cursor: pointer; transition: transform .15s, background-color .15s, color .15s;
}
.consent-fab[hidden] { display: none; }
.consent-fab:hover { background: var(--cs-petrol); color: #fff; transform: scale(1.05); }
.consent-fab .icon { width: 1.4rem; height: 1.4rem; }




/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 991.98px) {
  .site-nav .navbar-collapse { padding: .75rem 0 .5rem; }
  .site-nav .nav-link { padding: .65rem 0 !important; border-bottom: 1px solid var(--cs-line); }
  .site-nav .btn { width: 100%; }
  .how { grid-template-columns: 1fr; max-width: 30rem; margin-left: auto; margin-right: auto; }
  .how-ico { margin-bottom: 1.5rem; }
  .powers li { min-height: 7.5rem; }
}
@media (max-width: 767.98px) {
  :root { --nav-h: 60px; }
  .versus { grid-template-columns: 1fr; justify-items: stretch; }
  .vs-badge { justify-self: center; margin: -.5rem 0; position: relative; z-index: 2; }
}
@media (max-width: 575.98px) {
  body { font-size: 1rem; }
  .story { height: 200vh; }
  .scene-slot { width: min(100%, calc((100svh - var(--nav-h)) * .5 * 1.333)); }
  .sticker { font-size: .82rem; }
  .sim { padding: 1.5rem 1.1rem 1.25rem; box-shadow: 8px 8px 0 var(--ink); }
  .unlocks { grid-template-columns: 1fr 1fr; }
  .form-card { padding: 1.4rem 1.1rem; box-shadow: 7px 7px 0 var(--ink); }
  .consent-banner { left: .75rem; right: .75rem; bottom: .75rem; width: auto; }
  .consent-fab { left: .75rem; bottom: .75rem; }
  .consent-modal .modal-footer { flex-direction: column-reverse; align-items: stretch; }
  .feed-list li { grid-template-columns: 14px 1fr; }
  .feed-list time { display: none; }
}

/* Bewegung reduzieren: alles sofort sichtbar, keine Scroll-Effekte */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .story { height: auto; }
  .story-stage { position: relative; top: 0; height: auto; padding: 4rem 1rem; }
  .mega { position: static; transform: none !important; font-size: clamp(3.4rem, 12.5vw, 10rem); margin-bottom: 1rem; }
  .story-body { opacity: 1 !important; transform: none !important; }
  .sticker, .scroll-hint { display: none; }
  .ticker-track, .feed-list, .footer-marquee .ticker-track { animation: none !important; }
}