/* =====================================================================
   n8buy.de — Marketplace Landing CSS
   Minimalistisch seit 2026-05-29: Topnav + Hero (Adress-Suche) + Footer.
   Backup der Coming-Soon-Variante: landing.coming-soon.backup.{html,css,js}.
   ===================================================================== */

/* POLISH-1 · Self-hosted Plus Jakarta Sans (siehe styles.css für Details). */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/PlusJakartaSans-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/PlusJakartaSans-Variable.woff2') format('woff2');
}

:root {
  --bg:           #0B0B0D;
  --bg-elev:      #16161A;
  --bg-elev-2:    #1F1F23;
  --border:       #26262B;
  --border-2:     #353539;
  --text:         #FAFAFA;
  --text-2:       #C8C8CC;
  --text-3:       #8A8A8F;
  --text-4:       #5A5A5F;
  --gold:         #E5B547;
  --gold-dark:    #B8902F;
  --green:        #22C55E;
  --error:        #FF7B7B;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --shadow-lg: 0 1px 3px rgba(0,0,0,.24), 0 8px 20px rgba(0,0,0,.36), 0 28px 64px rgba(0,0,0,.44);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* POLISH-2 · OKLCH P3-Wide-Gamut für Brand-Gold. */
@supports (color: oklch(0 0 0)) {
  :root {
    --gold:      oklch(78% 0.155 86);
    --gold-dark: oklch(63% 0.125 86);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; min-height: 100%; }
body.landing {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }
h1 { font-weight: 800; letter-spacing: -0.015em; line-height: 1.05; color: var(--text); }

/* ===================================================================
 * BRAND LOGO (1:1 zum Shop-Header in styles.css)
 * =================================================================== */
.brand-logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 22px; font-weight: 900; letter-spacing: -0.015em;
  color: var(--text); text-decoration: none;
}
.brand-logo-moon {
  width: 22px; height: 22px;
  color: var(--gold); flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(229, 181, 71, 0.35));
}
.brand-logo-text { display: inline-flex; align-items: baseline; }
.brand-logo-suffix { font-weight: 500; opacity: 0.55; font-size: 0.75em; margin-left: 1px; }

/* ===================================================================
 * A11y — Skip-Link
 * =================================================================== */
.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--bg); color: var(--gold);
  padding: 12px 16px; z-index: 9999;
  text-decoration: none;
  border: 2px solid var(--gold);
  border-radius: 0 0 6px 0;
  font-weight: 700;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; outline: none; }

/* ===================================================================
 * PRE-LAUNCH-STREIFEN (full-bleed, oben)
 * — UWG § 5 / § 5a: laut, kontrastreich, sofort sichtbar.
 * Sitzt VOR dem Topnav, schiebt den Hero entsprechend nach unten.
 * =================================================================== */
.pre-launch-strip {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(90deg,
              rgba(229, 181, 71, 0.96) 0%,
              rgba(229, 181, 71, 1)    50%,
              rgba(229, 181, 71, 0.96) 100%);
  color: #0B0B0D;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  flex-wrap: wrap;
  line-height: 1.45;
  box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.4);
}
.pre-launch-strip strong { font-weight: 800; }
.pre-launch-strip time { font-feature-settings: 'tnum'; white-space: nowrap; }
.pre-launch-strip-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #0B0B0D;
  flex-shrink: 0;
  animation: pulseDot 2.2s ease-in-out infinite;
}
.pre-launch-strip-note { opacity: 0.85; }
@media (max-width: 480px) {
  .pre-launch-strip {
    font-size: 12px;
    padding: 8px 12px;
    gap: 8px;
  }
  .pre-launch-strip-note { display: block; width: 100%; opacity: 0.85; }
}

/* ===================================================================
 * TOP-NAV
 * Position relativ — Pre-Launch-Streifen sitzt darueber und nimmt
 * eigenen Platz ein. Der Hero hat passenden padding-top.
 * =================================================================== */
.mp-topnav {
  position: relative;
  z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 60px);
  background: var(--bg);
}
.mp-topnav-links { display: flex; align-items: center; gap: 18px; }
.mp-topnav-cta {
  background: var(--gold);
  color: var(--bg) !important;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-weight: 800;
}
.mp-topnav-cta:hover { background: #F0C460 !important; }
.mp-topnav-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(229, 181, 71, 0.10);
  border: 1px solid rgba(229, 181, 71, 0.28);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.mp-topnav-pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(229, 181, 71, 0.7);
  animation: pulseDot 2.2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-topnav-pill-dot { animation: none; }
}
@media (max-width: 480px) {
  .mp-topnav-pill { padding: 7px 10px; font-size: 12px; }
}

/* ===================================================================
 * HERO — Full-Viewport, zentriert, H1 + Adress-Suche
 * =================================================================== */
.mp-hero {
  position: relative;
  min-height: calc(100vh - 90px);
  background:
    radial-gradient(1100px 560px at 50% -10%, rgba(229,181,71,0.13), transparent 60%),
    radial-gradient(700px 380px at 8% 100%, rgba(229,181,71,0.07), transparent 55%),
    var(--bg);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px clamp(20px, 5vw, 60px) 90px;
  overflow: hidden;
}

.mp-hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.45);
  background: transparent;
  text-decoration: none;
  z-index: 2;
  animation: mpHeroScrollBob 2.2s ease-in-out infinite;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.mp-hero-scroll:hover,
.mp-hero-scroll:focus-visible {
  color: var(--gold);
  background: rgba(229, 181, 71, 0.08);
  outline: none;
}
@keyframes mpHeroScrollBob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
  50%      { transform: translate(-50%, 6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-hero-scroll { animation: none; }
}
.mp-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 18% 28%, rgba(255,255,255,.45), transparent 50%),
    radial-gradient(1px 1px   at 72% 22%, rgba(255,255,255,.4),  transparent 50%),
    radial-gradient(1.5px 1.5px at 85% 65%, rgba(255,255,255,.35), transparent 50%),
    radial-gradient(1px 1px   at 12% 78%, rgba(255,255,255,.3),  transparent 50%),
    radial-gradient(1px 1px   at 55% 14%, rgba(255,255,255,.4),  transparent 50%);
  opacity: 0.7;
}
.mp-hero::after {
  content: ''; position: absolute;
  top: -140px; right: -140px; width: 440px; height: 440px; border-radius: 50%;
  background: radial-gradient(circle, rgba(229,181,71,.35) 0%, transparent 60%);
  opacity: 0.5; filter: blur(35px); pointer-events: none;
}
.mp-hero-inner {
  max-width: 1000px; text-align: center;
  position: relative; z-index: 1;
  animation: fadeUp 0.6s var(--ease-out) both;
}
.mp-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: rgba(229, 181, 71, 0.08);
  border: 1px solid rgba(229, 181, 71, 0.22);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mp-hero-eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(229, 181, 71, 0.8);
  animation: pulseDot 2.2s ease-in-out infinite;
}
.mp-hero-eyebrow time { font-feature-settings: 'tnum'; }
@media (max-width: 480px) {
  .mp-hero-eyebrow { font-size: 11.5px; padding: 7px 12px; }
}
.mp-hero-h1 {
  font-size: clamp(2.7rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 28px;
  color: var(--text);
}
.mp-hero-sub {
  max-width: 640px;
  margin: 0 auto 48px;
  font-size: clamp(15px, 2.2vw, 17px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-2);
}
.mp-hero-sub strong { color: var(--text); font-weight: 700; }
.mp-hero-sub-strong { color: var(--gold); font-weight: 700; }

/* ===================================================================
 * ADDRESS-SUCHE — Premium-Bar (Landing-Hero, 2026-05-29)
 * Optisches Ziel: einladend, Touch-freundlich (≥ 56 px), klarer Gold-
 * Akzent, ruhiger Glow im Fokus, Backdrop-Tiefe.
 * =================================================================== */
.addr-search-wrap {
  max-width: 560px; margin: 0 auto;
  position: relative;
  display: flex; align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 12px;
  transition: border-color 0.15s var(--ease-out);
}
.addr-search-wrap:focus-within { border-color: var(--gold); }
.addr-search-icon {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-3); flex-shrink: 0;
}
.addr-search-input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  font-size: 16px; color: var(--text);
  padding: 13px 10px;
  font-family: inherit;
}
.addr-search-input::placeholder { color: var(--text-4); }
.addr-search-clear {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: var(--text-3);
  cursor: pointer; padding: 4px 8px;
}
.addr-search-clear:hover { color: var(--text); }

.addr-search-results {
  max-width: 560px; margin: -1px auto 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
  max-height: 240px;
  overflow-y: auto;
  text-align: left;
}

/* -------------------------------------------------------------------
 * PREMIUM-VARIANT — nur auf der Landing.  Die Shop-Sheet-Variante
 * (.addr-search-wrap ohne --landing) bleibt schlicht & kompakt.
 * ------------------------------------------------------------------- */
.addr-search-wrap--landing {
  --bar-bg:        rgba(28, 28, 33, 0.88);
  --bar-bg-hover:  rgba(34, 34, 40, 0.94);
  --bar-border:    rgba(229, 181, 71, 0.28);
  --bar-border-hi: rgba(229, 181, 71, 0.7);

  max-width: 640px;
  padding: 0 8px 0 22px;
  gap: 14px;
  background: var(--bar-bg);
  border: 1px solid var(--bar-border);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(229, 181, 71, 0.06),
    0 26px 60px -24px rgba(0, 0, 0, 0.85),
    0 14px 36px -18px rgba(229, 181, 71, 0.22);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: addrBarFloat 5.5s ease-in-out infinite;
  transition:
    border-color 220ms var(--ease-out),
    background 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out),
    transform 220ms var(--ease-out);
}
@keyframes addrBarFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .addr-search-wrap--landing { animation: none; }
}
@media (hover: hover) and (pointer: fine) {
  .addr-search-wrap--landing:hover {
    background: var(--bar-bg-hover);
    border-color: rgba(229, 181, 71, 0.55);
    transform: translateY(-3px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.07) inset,
      0 0 0 1px rgba(229, 181, 71, 0.1),
      0 32px 70px -22px rgba(0, 0, 0, 0.9),
      0 18px 44px -18px rgba(229, 181, 71, 0.35);
  }
}
.addr-search-wrap--landing:focus-within {
  border-color: var(--bar-border-hi);
  background: rgba(34, 34, 40, 0.96);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 0 0 4px rgba(229, 181, 71, 0.18),
    0 32px 70px -22px rgba(0, 0, 0, 0.9),
    0 18px 44px -18px rgba(229, 181, 71, 0.4);
  transform: translateY(-3px);
  animation: none;
}

.addr-search-wrap--landing .addr-search-icon {
  width: 22px; height: 22px;
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(229, 181, 71, 0.35));
  transition: transform 220ms var(--ease-out);
}
.addr-search-wrap--landing:focus-within .addr-search-icon {
  transform: scale(1.06);
}

.addr-search-wrap--landing .addr-search-input {
  padding: 24px 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.addr-search-wrap--landing .addr-search-input::placeholder {
  color: var(--text-3);
  font-weight: 500;
  opacity: 1;
}
/* Browser-eigene Search-Cancel/Decoration killen — wir haben unseren X-Button. */
.addr-search-wrap--landing .addr-search-input::-webkit-search-cancel-button,
.addr-search-wrap--landing .addr-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* Rechts: dezenter Gold-Pill als visueller Call-to-Action. */
.addr-search-hint {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(229, 181, 71, 0.10);
  border: 1px solid rgba(229, 181, 71, 0.22);
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition:
    opacity 200ms var(--ease-out),
    transform 200ms var(--ease-out),
    background 200ms var(--ease-out);
  pointer-events: none;
}
.addr-search-hint-text { display: inline; }
@media (max-width: 480px) {
  .addr-search-hint { padding: 8px; gap: 0; }
  .addr-search-hint-text { display: none; }
}
/* Hint verstecken, sobald der User tippt oder ein X-Button sichtbar ist. */
.addr-search-wrap--landing:focus-within .addr-search-hint { opacity: 0; transform: translateX(6px); }
.addr-search-wrap--landing .addr-search-clear:not([hidden]) ~ .addr-search-hint { display: none; }

.addr-search-wrap--landing .addr-search-clear {
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.06);
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.addr-search-wrap--landing .addr-search-clear:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

/* Subtext unter der Bar: gibt Vertrauen + zeigt das Liefergebiet. */
.addr-search-sub {
  max-width: 620px;
  margin: 14px auto 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  opacity: 0.92;
}
.addr-search-sub svg { color: var(--gold); opacity: 0.85; flex-shrink: 0; }

/* Ergebnis-Dropdown an die Premium-Bar angleichen (gleiche Optik).
   General-Sibling-Selector, weil zwischen Bar und Results der Subtext liegt. */
.addr-search-wrap--landing ~ .addr-search-results {
  max-width: 620px;
  margin-top: 10px;
  background: rgba(22, 22, 26, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 50px -22px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  max-height: 320px;
  padding: 4px;
}
.addr-search-wrap--landing ~ .addr-search-results .addr-search-result {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 14px 16px;
  border-radius: 10px;
}
.addr-search-wrap--landing ~ .addr-search-results .addr-search-result:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .addr-search-wrap--landing ~ .addr-search-results .addr-search-result:hover {
    background: rgba(255, 255, 255, 0.04);
  }
}
.addr-search-wrap--landing ~ .addr-search-results .addr-search-result-line1 {
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em;
}
.addr-search-wrap--landing ~ .addr-search-results .addr-search-result-line2 {
  font-size: 12.5px; margin-top: 3px;
}
.addr-search-result {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s var(--ease-out);
  background: transparent; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left;
  font-family: inherit; color: var(--text);
  min-height: 48px; touch-action: manipulation;
}
.addr-search-result:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .addr-search-result:hover { background: var(--bg-elev-2); }
}
.addr-search-result:focus-visible { background: var(--bg-elev-2); outline: none; }
.addr-search-result-icon { font-size: 16px; flex-shrink: 0; color: var(--gold); margin-top: 2px; }
.addr-search-result-body { flex: 1; min-width: 0; }
.addr-search-result-line1 {
  font-size: 14px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.addr-search-result-line2 {
  font-size: 12px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
}
.addr-search-empty {
  padding: 14px;
  font-size: 13px; color: var(--text-3); text-align: center;
}
.addr-search-empty a {
  color: var(--gold); text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-block; margin-top: 6px;
  font-weight: 700;
}

/* ===================================================================
 * PRE-LAUNCH-NOTICE (§ 5 / § 5a UWG — rechtssicherer Status-Block)
 * Sitzt zwischen Hero und Footer. Klare Liste der Pre-Launch-Fakten:
 * Start-Datum, keine Bestellungen, lokale Adress-Speicherung, Anbieter.
 * =================================================================== */
.pre-launch-notice {
  position: relative;
  padding: 56px clamp(20px, 5vw, 60px) 72px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(229,181,71,0.04) 40%, transparent 100%),
    var(--bg);
}
.pre-launch-notice-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px clamp(20px, 4vw, 36px);
  background: rgba(22, 22, 26, 0.7);
  border: 1px solid rgba(229, 181, 71, 0.20);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 40px -22px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.pre-launch-notice-title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--text);
}
.pre-launch-notice-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(229, 181, 71, 0.18);
  color: var(--gold);
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}
.pre-launch-notice-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex; flex-direction: column;
  gap: 12px;
}
.pre-launch-notice-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.pre-launch-notice-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(229, 181, 71, 0.6);
  box-shadow: 0 0 6px rgba(229, 181, 71, 0.3);
}
.pre-launch-notice-list strong { color: var(--text); font-weight: 700; }
.pre-launch-notice-list a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pre-launch-notice-list a:hover { color: #F0C460; }

@media (max-width: 480px) {
  .pre-launch-notice { padding: 36px 16px 48px; }
  .pre-launch-notice-inner { padding: 22px 18px; }
  .pre-launch-notice-title { font-size: 15.5px; }
  .pre-launch-notice-list li { font-size: 14px; }
}

/* ===================================================================
 * PRIVACY-BANNER (Landing) — dezenter Bottom-Sticky-Hinweis.
 * Kein blockierendes Modal, weil rechtlich kein Consent noetig
 * (TTDSG § 25 Abs. 2 Nr. 2). Aber: transparente Erklaerung, was
 * gespeichert wird + Bestaetigungsknopf mit Persistenz.
 * =================================================================== */
.lp-privacy {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: 14px clamp(16px, 4vw, 32px);
  background: rgba(11, 11, 13, 0.94);
  border-top: 1px solid rgba(229, 181, 71, 0.35);
  box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: lpPrivacyIn 320ms var(--ease-out);
}
@keyframes lpPrivacyIn {
  0%   { transform: translateY(110%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-privacy { animation: none; }
}
.lp-privacy-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.lp-privacy-text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.lp-privacy-text strong { color: var(--text); font-weight: 700; }
.lp-privacy-text a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lp-privacy-text a:hover { color: #F0C460; }
.lp-privacy-btn {
  flex-shrink: 0;
  padding: 11px 22px;
  border-radius: 999px;
  border: 0;
  background: var(--gold);
  color: #0B0B0D;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.lp-privacy-btn:hover { background: #F0C460; transform: translateY(-1px); }
.lp-privacy-btn:active { transform: translateY(0); }
@media (max-width: 520px) {
  .lp-privacy { padding: 12px 14px; }
  .lp-privacy-text { font-size: 12.5px; }
  .lp-privacy-btn { width: 100%; padding: 12px 20px; }
}
/* Sicherheit: bei aktivem Banner Footer-Spacing erhoehen, damit der
   Footer-Tag nicht hinter dem Banner verschwindet. */
body.lp-privacy-visible .site-footer { padding-bottom: 120px; }

/* ===================================================================
 * FOOTER (site-wide, identisch zu styles.css/site-footer)
 * =================================================================== */
.site-footer {
  padding: 32px clamp(20px, 5vw, 60px) 24px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
  line-height: 2.4;
  background: var(--bg);
}
.site-footer a {
  color: var(--text-2);
  display: inline-block;
  padding: 10px 8px;
  min-height: 44px;
  line-height: 24px;
  transition: color 0.15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover { color: var(--gold); }
}
.site-footer a[aria-current="page"] {
  color: var(--gold);
  font-weight: 600;
}
.site-footer-tag {
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-4);
}
.site-footer-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 8px;
}

/* ===================================================================
 * KEYFRAMES
 * =================================================================== */
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-hero-inner { animation: none; }
}

/* ===================================================================
 * RESPONSIVE
 * =================================================================== */
@media (max-width: 640px) {
  .mp-topnav { padding: 16px 18px; }
  .mp-hero { padding-top: 110px; padding-bottom: 80px; }
}