/* ══════════════════════════════════════════════════
   TANREN · FOUNDING MEMBERS LANDING
   Editorial, ruhig, hochwertig. Off-White Background.
   Kein Tailwind — pures CSS.
   ══════════════════════════════════════════════════ */

:root{
  /* Momo Palette — synchron mit Main-App */
  --bg:#F7F2EA;               /* momo-cream */
  --bg-sub:#F2EDE4;           /* cream leicht abgesetzt */
  --card:#FDFAF5;             /* leicht heller als bg für Tiefen-Kontrast */
  --ink:#1A1614;              /* momo-charcoal */
  --ink-mid:#5A4F47;          /* ink-mid */
  --ink-soft:#8B7F75;          /* ink-soft */
  --ink-faint:#B5A89D;         /* sand-faint */
  --line:#D9CEC0;              /* momo-sand */
  --line-soft:#E6DDD0;          /* sand-soft */
  --accent:#F4B4A6;            /* momo-peach — ersetzt altes Gold */
  --accent-bg:rgba(244,180,166,0.12);  /* peach-tint */
  --accent-deep:#D88871;       /* peach deeper für Text auf hellem peach-bg */
  --green:#3F808D;
  --ok:#2E7D32;
  --danger:#C2513A;            /* coral matchend zu streak-danger */
  --font-display:'Fraunces',Georgia,serif;
  --radius:18px;
  --radius-lg:22px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
html{overflow-x:hidden;overscroll-behavior-x:none}
body{
  font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","ss02";
  min-height:100dvh;
  overflow-x:hidden;
}

/* Subtle film grain — pure aesthetic, kein Performance-Killer */
.grain{
  position:fixed;inset:0;z-index:100;pointer-events:none;opacity:0.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.09  0 0 0 0 0.09  0 0 0 0 0.09  0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* ============ NAV ============ */
.nav{
  max-width:980px;margin:0 auto;padding:22px 24px;
  display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;z-index:5;
  background:rgba(250,250,247,0.85);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
}
.wordmark{font-family:'Geist Mono',ui-monospace,monospace;font-size:13px;letter-spacing:1.8px;text-transform:uppercase;font-weight:600;color:var(--ink)}
.nav-link{font-size:13px;color:var(--ink-mid);text-decoration:none;padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:var(--card);transition:border-color 200ms var(--ease-out),color 200ms var(--ease-out),transform 160ms var(--ease-out)}
.nav-link:hover{color:var(--ink);border-color:var(--ink)}
.nav-link:active{transform:scale(0.97)}

/* ============ HERO ============ */
.hero{
  max-width:720px;margin:0 auto;padding:72px 24px 64px;text-align:center;
}
.eyebrow{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:26px;
}
.headline{
  font-size:clamp(34px,6.2vw,52px);
  font-weight:500;letter-spacing:-1.6px;line-height:1.04;
  color:var(--ink);margin:0 0 20px;
  font-feature-settings:"ss01","ss02";
}
.deck{
  font-size:17px;line-height:1.55;
  color:var(--ink-mid);letter-spacing:-0.1px;
  max-width:560px;margin:0 auto 34px;
}

.counter-line{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:12.5px;font-weight:500;letter-spacing:-0.05px;
  color:var(--ink-mid);
  background:var(--card);border:1px solid var(--line);
  padding:8px 16px;border-radius:99px;margin-bottom:26px;
  box-shadow:0 1px 2px rgba(17,24,39,0.04);
}
.counter-line .dot{
  width:8px;height:8px;border-radius:99px;
  background:var(--accent);
}
.counter-line strong{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.counter-line.counter-limit{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-bg) 0%,var(--card) 100%)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.85)}}

/* ============ JOIN FORM ============ */
.join-form{
  display:flex;gap:8px;max-width:460px;margin:0 auto 12px;
  background:var(--card);border:1px solid var(--line);border-radius:99px;
  padding:6px;box-shadow:0 1px 2px rgba(17,24,39,0.03),0 14px 34px -16px rgba(17,24,39,0.12);
  transition:border-color 220ms var(--ease-out),box-shadow 220ms var(--ease-out);
}
.join-form:focus-within{border-color:var(--ink);box-shadow:0 1px 2px rgba(17,24,39,0.04),0 18px 44px -14px rgba(17,24,39,0.18)}
.join-form input{
  flex:1;border:none;outline:none;background:transparent;
  padding:12px 18px;font-size:15px;color:var(--ink);font-family:inherit;letter-spacing:-0.1px;
  min-width:0;
}
.join-form input::placeholder{color:var(--ink-faint)}
.join-form button{
  background:var(--ink);color:var(--bg);border:none;
  padding:12px 22px;border-radius:99px;font-family:inherit;font-size:14px;font-weight:500;letter-spacing:-0.15px;
  cursor:pointer;white-space:nowrap;
  transition:transform 160ms var(--ease-out),background 200ms var(--ease-out);
}
.join-form button:hover{background:#2A2420}
.join-form button:active{transform:scale(0.96)}
.join-form button:disabled{opacity:0.55;cursor:not-allowed}

.join-error{color:var(--danger);font-size:13px;min-height:20px;margin-bottom:8px;letter-spacing:-0.05px}
.join-note{font-size:12px;color:var(--ink-faint);letter-spacing:-0.05px}

/* Inbox-State: nach Versand der Bestätigungs-Mail */
.inbox-state{
  max-width:460px;margin:0 auto;padding:28px 28px 24px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  text-align:center;
  box-shadow:0 1px 2px rgba(17,24,39,0.03),0 18px 44px -18px rgba(17,24,39,0.14);
  animation:fadeUp 500ms cubic-bezier(0.23,1,0.32,1) both;
}
.inbox-state-icon{
  width:52px;height:52px;border-radius:99px;
  background:var(--accent-bg);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
}
.inbox-state-title{
  font-size:20px;font-weight:500;letter-spacing:-0.4px;color:var(--ink);
  margin-bottom:10px;
}
.inbox-state-body{
  font-size:14.5px;line-height:1.55;color:var(--ink-mid);
  letter-spacing:-0.1px;margin-bottom:14px;
}
.inbox-state-body strong{color:var(--ink);font-weight:500;word-break:break-all}
.inbox-state-meta{
  font-size:12px;color:var(--ink-faint);letter-spacing:-0.05px;
  margin-bottom:16px;
}

/* "Schon eingetragen?" Lookup */
.join-lookup{margin-top:18px;max-width:460px;margin-left:auto;margin-right:auto}
.lookup-toggle{
  background:transparent;border:none;
  font-family:inherit;font-size:12.5px;color:var(--ink-soft);
  letter-spacing:-0.05px;cursor:pointer;padding:6px 10px;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);
  transition:color 180ms var(--ease-out),text-decoration-color 180ms var(--ease-out);
}
.lookup-toggle:hover{color:var(--ink);text-decoration-color:var(--ink-soft)}
.join-form-lookup{margin-top:12px;margin-bottom:0}
.join-error-lookup{text-align:center;margin-top:10px}
/* `hidden`-Attribut soll Flex-Layout schlagen */
[hidden]{display:none!important}

/* ============ REWARDS — kompakter Block direkt unter Form ============ */
.rewards-strip{
  max-width:520px;margin:36px auto 0;
  display:flex;flex-direction:column;gap:2px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;text-align:left;
  box-shadow:0 1px 2px rgba(17,24,39,0.03),0 18px 42px -22px rgba(17,24,39,0.12);
}
.reward-row{
  display:grid;grid-template-columns:auto 1fr;gap:18px;
  padding:18px 22px;align-items:center;
  border-top:1px solid var(--line-soft);
  transition:background 200ms var(--ease-out);
}
.reward-row:first-child{border-top:none}
.reward-row:hover{background:var(--bg-sub)}
.reward-mark{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:1.4px;
  color:var(--ink-soft);font-weight:600;
  width:28px;height:28px;border-radius:99px;
  border:1px solid var(--line);background:var(--bg);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.reward-mark span{margin-top:1px}
.reward-text{min-width:0}
.reward-range{font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:4px}
.reward-line{font-size:15px;line-height:1.4;color:var(--ink);letter-spacing:-0.15px}
.reward-line strong{font-weight:600;color:var(--ink)}

/* Featured (Founder) row — Gold-Akzent */
.reward-row-featured{
  background:linear-gradient(180deg,var(--accent-bg) 0%,var(--card) 100%);
  position:relative;
}
.reward-row-featured::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--accent),transparent);
}
.reward-row-featured .reward-mark{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}
.reward-row-featured .reward-range{color:var(--accent)}
.reward-row-featured:hover{background:linear-gradient(180deg,var(--accent-bg) 0%,var(--accent-bg) 100%)}

/* Section-Eyebrow bleibt für FAQ etc. */
.section-eyebrow{font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:20px;text-align:center}

/* ============ TANREN STORY ============ */
.story{max-width:580px;margin:0 auto;padding:48px 24px 40px;text-align:left}
.story-eyebrow{font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:22px;padding-top:24px;border-top:1px solid var(--line)}
.story-body p{font-size:16px;line-height:1.65;color:var(--ink-mid);letter-spacing:-0.08px;margin-bottom:16px;max-width:58ch}
.story-lead{font-size:20px!important;line-height:1.45!important;color:var(--ink)!important;letter-spacing:-0.35px!important;margin-bottom:20px!important}
.story-word{font-weight:600;color:var(--ink);letter-spacing:-0.4px}
.story-lead em{color:var(--accent);font-style:italic;font-weight:500}
.story-close{color:var(--ink)!important;font-weight:500!important;margin-top:20px!important}

/* ============ RANK CARD (Post-Join) ============ */
.rank-card{
  max-width:620px;margin:0 auto;padding:28px 24px 48px;
  scroll-margin-top:76px; /* Nav-Höhe beim scrollIntoView berücksichtigen */
}

/* IDENTITÄT */
.rank-head{text-align:center;margin-bottom:24px}
.rank-eyebrow{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:14px}
.rank-number{
  font-size:96px;font-weight:500;letter-spacing:-4px;line-height:1;
  color:var(--ink);margin-bottom:16px;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"ss01","ss02";
}
.rank-tier-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:99px;
  background:var(--bg-sub);color:var(--ink-mid);border:1px solid var(--line);
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  transition:background 240ms var(--ease-out),color 240ms var(--ease-out),border-color 240ms var(--ease-out);
}
/* Tier-spezifische Pill-Farben */
.rank-tier-pill[data-tier="1"]{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
.rank-tier-pill[data-tier="2"]{background:var(--accent-bg);color:var(--accent-deep);border-color:var(--accent)}
.rank-tier-pill[data-tier="3"]{background:var(--bg-sub);color:var(--ink-mid);border-color:var(--line)}
.rank-tier-pill[data-tier="4"]{background:var(--bg-sub);color:var(--ink-soft);border-color:var(--line-soft)}

/* Karten-Base */
.rank-current,
.rank-next,
.rank-boost{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 24px;margin-bottom:10px;
  box-shadow:0 1px 2px rgba(17,24,39,0.02),0 14px 36px -22px rgba(17,24,39,0.08);
}
.rank-boost{margin-bottom:0}

/* Founder-Tier: Gold-Akzent auf Current-Card */
.rank-card[data-tier="1"] .rank-current{
  background:linear-gradient(180deg,var(--accent-bg) 0%,var(--card) 100%);
  border-color:var(--accent);
}
.rank-card[data-tier="1"] .rank-current::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.rank-current{position:relative;overflow:hidden}

/* Section-Labels */
.rank-section-label{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;margin-bottom:10px;
}

/* Current-Reward (was dir jetzt gehört) */
.rank-current-reward{
  font-size:20px;font-weight:500;color:var(--ink);
  letter-spacing:-0.35px;line-height:1.35;
  margin-bottom:8px;
}
.rank-card[data-tier="1"] .rank-current-reward{color:var(--accent);font-weight:600}
.rank-current-value{
  font-size:13px;color:var(--ink-mid);letter-spacing:-0.05px;
  font-variant-numeric:tabular-nums;
}

/* Next-Goal (was auf der anderen Seite wartet) */
.rank-next-reward{
  font-size:17px;font-weight:500;color:var(--ink);
  letter-spacing:-0.3px;line-height:1.35;
  margin-bottom:18px;
}

/* Progress-Bar */
.rank-progress-bar{height:6px;background:var(--line-soft);border-radius:99px;overflow:hidden}
.rank-progress-fill{height:100%;background:var(--ink);border-radius:99px}
.rank-progress-label{margin-top:10px;font-size:12.5px;color:var(--ink-soft);letter-spacing:-0.05px;font-variant-numeric:tabular-nums}

/* Boost-Sektion */
.rank-boost-headline{
  font-size:17px;font-weight:500;color:var(--ink);
  letter-spacing:-0.3px;margin-bottom:6px;line-height:1.3;
}
.rank-boost-meta{
  font-size:13px;color:var(--ink-mid);
  letter-spacing:-0.05px;margin-bottom:16px;line-height:1.5;
}

.share-row{display:flex;gap:8px;margin-bottom:14px;background:var(--bg-sub);border-radius:12px;padding:4px 4px 4px 12px;align-items:center}
.share-row input{flex:1;border:none;outline:none;background:transparent;font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;color:var(--ink-mid);letter-spacing:0;min-width:0}
.share-copy{background:var(--ink);color:var(--bg);border:none;font-family:inherit;font-size:12px;font-weight:500;padding:9px 14px;border-radius:8px;cursor:pointer;letter-spacing:-0.1px;transition:transform 160ms var(--ease-out),background 200ms ease}
.share-copy:active{transform:scale(0.96)}
.share-copy.ok{background:var(--ok)}

.share-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:520px){.share-buttons{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.share-btn{
  background:var(--card);border:1px solid var(--line);color:var(--ink);
  font-family:inherit;font-size:13px;font-weight:500;padding:11px;
  border-radius:12px;cursor:pointer;letter-spacing:-0.1px;
  transition:border-color 200ms var(--ease-out),background 200ms var(--ease-out),transform 160ms var(--ease-out),color 200ms var(--ease-out);
}
.share-btn:hover{border-color:var(--ink)}
.share-btn:active{transform:scale(0.97)}
/* WhatsApp als Primary — den DE-Messenger die Aufmerksamkeit */
.share-btn-primary{
  background:var(--ink);color:var(--bg);border-color:var(--ink);
  font-weight:500;
}
.share-btn-primary:hover{background:#2A2420;border-color:#2A2420}

/* ============ FAQ ============ */
.faq{max-width:680px;margin:0 auto;padding:24px 24px 40px}
.faq-item{border-bottom:1px solid var(--line-soft);padding:14px 0}
.faq-item:first-of-type{border-top:1px solid var(--line-soft)}
.faq-item summary{list-style:none;cursor:pointer;font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-0.2px;padding:6px 28px 6px 0;position:relative;transition:color 180ms var(--ease-out)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);
  transform:translateY(-70%) rotate(45deg);transition:transform 220ms var(--ease-out);
}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-item p{font-size:14px;line-height:1.6;color:var(--ink-mid);letter-spacing:-0.05px;padding:10px 0 8px;max-width:65ch}
.faq-item a{color:var(--green);text-decoration:none;border-bottom:1px solid currentColor}

/* ============ FOOTER ============ */
.foot{max-width:840px;margin:0 auto;padding:40px 24px calc(env(safe-area-inset-bottom) + 40px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line-soft);margin-top:20px}
.foot-brand{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{font-size:12px;color:var(--ink-mid);text-decoration:none;letter-spacing:-0.05px;transition:color 180ms var(--ease-out)}
.foot-links a:hover{color:var(--ink)}

/* ============================================================
   MOTION — Emil-Review-Pass
   Entrance-Animationen, Stagger, Touch-Gates, GPU-Friendly
   ============================================================ */

/* ---------- Hero: sanfter Cascade beim ersten Paint ---------- */
.eyebrow,
.headline,
.deck,
.counter-line{
  animation:fadeUp 520ms cubic-bezier(0.23,1,0.32,1) both;
}
.eyebrow{animation-delay:40ms}
.headline{animation-delay:120ms}
.deck{animation-delay:220ms}
.counter-line{animation-delay:320ms}
.join-form{animation:fadeUp 520ms cubic-bezier(0.23,1,0.32,1) 400ms both}
.join-note{animation:fadeUp 520ms cubic-bezier(0.23,1,0.32,1) 480ms both}
.join-lookup{animation:fadeUp 520ms cubic-bezier(0.23,1,0.32,1) 560ms both}

/* ---------- Reward-Rows: gestaffelt ---------- */
.rewards-strip{animation:fadeUp 520ms cubic-bezier(0.23,1,0.32,1) 560ms both}
.rewards-strip .reward-row{opacity:0;animation:fadeUp 520ms cubic-bezier(0.23,1,0.32,1) both}
.rewards-strip .reward-row:nth-child(1){animation-delay:640ms}
.rewards-strip .reward-row:nth-child(2){animation-delay:700ms}
.rewards-strip .reward-row:nth-child(3){animation-delay:760ms}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- Rank-Card: der Moment ---------- */
.rank-card:not([hidden]){
  animation:rankCardIn 520ms cubic-bezier(0.23,1,0.32,1) both;
}
@keyframes rankCardIn{
  from{opacity:0;transform:translateY(14px) scale(0.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.rank-card:not([hidden]) .rank-number{
  animation:rankNumberIn 680ms cubic-bezier(0.34,1.4,0.64,1) 120ms both;
  transform-origin:center bottom;
}
@keyframes rankNumberIn{
  from{opacity:0;transform:scale(0.9)}
  to{opacity:1;transform:scale(1)}
}

.rank-card:not([hidden]) .rank-tier-pill{animation:fadeUp 480ms cubic-bezier(0.23,1,0.32,1) 280ms both}
.rank-card:not([hidden]) .rank-current{animation:fadeUp 480ms cubic-bezier(0.23,1,0.32,1) 360ms both}
.rank-card:not([hidden]) .rank-next{animation:fadeUp 480ms cubic-bezier(0.23,1,0.32,1) 460ms both}
.rank-card:not([hidden]) .rank-boost{animation:fadeUp 480ms cubic-bezier(0.23,1,0.32,1) 560ms both}

/* ---------- Progress-Bar: scaleX statt width ---------- */
.rank-progress-fill{
  width:100%;
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform 900ms cubic-bezier(0.77,0,0.175,1) 700ms;
  will-change:transform;
}

/* ---------- Hover-States nur auf echten Zeigegeräten ---------- */
@media (hover: none), (pointer: coarse){
  .nav-link:hover{color:var(--ink-mid);border-color:var(--line);background:var(--card)}
  .reward-row:hover{background:transparent}
  .reward-row-featured:hover{background:linear-gradient(180deg,var(--accent-bg) 0%,var(--card) 100%)}
  .share-btn:hover{border-color:var(--line)}
  .foot-links a:hover{color:var(--ink-mid)}
  .lookup-toggle:hover{color:var(--ink-soft);text-decoration-color:var(--line)}
}

/* ---------- Copy-Button: Checkmark-Morph ---------- */
.share-copy{position:relative;overflow:hidden;min-width:110px}
.share-copy::after{
  content:"✓";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(0.7);
  transition:opacity 180ms cubic-bezier(0.23,1,0.32,1),transform 220ms cubic-bezier(0.34,1.4,0.64,1);
  font-size:15px;font-weight:500;
  pointer-events:none;
}
.share-copy.ok{color:transparent;background:var(--ok)}
.share-copy.ok::after{opacity:1;transform:scale(1);color:#fff}

/* ---------- Lookup-Toggle: taktiles Feedback ---------- */
.lookup-toggle{transition:color 180ms cubic-bezier(0.23,1,0.32,1),text-decoration-color 180ms cubic-bezier(0.23,1,0.32,1),transform 160ms cubic-bezier(0.23,1,0.32,1)}
.lookup-toggle:active{transform:scale(0.97)}

/* ---------- Counter-Dot: Pulse via Pseudo (GPU) ---------- */
.counter-line .dot{position:relative}
.counter-line .dot::after{
  content:"";position:absolute;inset:-4px;border-radius:99px;
  border:2px solid var(--accent);opacity:0.5;
  animation:dotPing 2.2s cubic-bezier(0.23,1,0.32,1) infinite;
  will-change:transform,opacity;
}
@keyframes dotPing{
  0%{transform:scale(0.6);opacity:0.55}
  70%{transform:scale(1.8);opacity:0}
  100%{transform:scale(1.8);opacity:0}
}

/* ---------- Reduced Motion: alles beruhigen ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
  .rank-progress-fill{transition:none}
}

/* ============================================================
   iOS-Safari-Optimierungen
   ============================================================ */

/* Inputs ≥ 16px verhindert iOS-Auto-Zoom beim Fokus */
.join-form input,
.join-form-lookup input{
  font-size:16px;
}

/* Long-Press-Menüs deaktivieren (iOS Callout) */
button,.tier,.reward-row,.share-btn,.nav-link{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
input,textarea{
  -webkit-user-select:text;
  user-select:text;
}

/* Double-Tap-Zoom auf Interaktions-Targets weg */
button,a,.nav-link,.reward-row,.share-btn{
  touch-action:manipulation;
}

/* iOS Autofill-Gelb ausblenden */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0px 1000px var(--card) inset;
  -webkit-text-fill-color:var(--ink);
  transition:background-color 5000s ease-in-out 0s;
}

/* Smooth-Scrolling */
html,body{
  -webkit-overflow-scrolling:touch;
}

/* PWA Standalone: Notch-Abstand oben */
@media all and (display-mode:standalone){
  body{padding-top:env(safe-area-inset-top)}
  .nav{padding-top:calc(env(safe-area-inset-top) + 14px)}
}

/* 100dvh für Safari-Toolbar-Verhalten */
body{min-height:100dvh}
@supports not (min-height:100dvh){body{min-height:100vh}}

/* ═══════════════════════════════════════════════════════════════════
   MOMO BRAND OVERLAY — synced mit Main-App Look&Feel
   ═══════════════════════════════════════════════════════════════════ */

/* Nav: cream blur statt weißlich */
.nav{background:rgba(247,242,234,0.85) !important}

/* Wordmark SVG statt Mono-Uppercase-Text */
.wordmark-link{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  padding:2px 4px;
  border-radius:8px;
  transition:transform 160ms var(--ease-out);
}
.wordmark-link:active{transform:scale(0.96)}
.f-wordmark{
  display:block;
  height:38px;
  width:auto;
  user-select:none;
  pointer-events:none;
}
@media (max-width: 640px){
  .f-wordmark{height:32px}
}
.f-wordmark-dark{display:none}
@media (prefers-color-scheme: dark){
  .f-wordmark-light{display:none}
  .f-wordmark-dark{display:block}
}

/* Hero-Headline: Fraunces für editoriale Signatur wie im Main-App */
.headline{
  font-family:var(--font-display);
  font-weight:300;
  font-variation-settings:"SOFT" 50,"opsz" 144;
  letter-spacing:-0.04em !important;
  line-height:1.02 !important;
}

/* Rang-Zahl: Fraunces Display matched Streak-Hero der Main-App */
.rank-number{
  font-family:var(--font-display) !important;
  font-weight:300 !important;
  font-variation-settings:"SOFT" 50,"opsz" 144;
  letter-spacing:-0.06em !important;
}

/* Story: Fraunces italic für den Namens-Lead */
.story-lead em{
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 100;
  font-style:italic;
  font-weight:400;
  color:var(--accent-deep) !important;
}

/* Reward-Featured: peach Akzent statt Gold-Gradient */
.reward-row-featured{
  background:var(--accent-bg) !important;
}
.reward-row-featured::before{
  background:var(--accent) !important;
}
.reward-row-featured:hover{background:var(--accent-bg) !important;filter:brightness(0.97)}

/* Counter-Limit-Ring: peach Outline statt Gold-Gradient */
.counter-line.counter-limit{
  background:transparent !important;
  border-color:var(--accent) !important;
}
.counter-line.counter-limit .dot{background:var(--accent)}

/* Rank-Card Tier-1 (Founder): peach Border + subtle tint */
.rank-card[data-tier="1"] .rank-current{
  background:var(--accent-bg) !important;
  border-color:var(--accent) !important;
}
.rank-card[data-tier="1"] .rank-current::before{
  background:var(--accent) !important;
}

/* Share-Button-Primary: Momo-Charcoal, peach-Hover-Tint */
.share-btn-primary{
  background:var(--ink) !important;
  color:var(--bg) !important;
}
.share-btn-primary:hover{background:#0F0B08 !important;border-color:#0F0B08 !important}

/* Inbox-State-Icon: peach statt Gold */
.inbox-state-icon{
  background:var(--accent-bg) !important;
  color:var(--accent-deep) !important;
  border:1px solid var(--accent) !important;
}

/* Film-Grain reduzieren — passt nicht zur ruhigen Momo-Ästhetik */
.grain{opacity:0.18 !important}

/* Reward-Mark Kreise: warmer Sand-Ton */
.reward-mark{
  background:var(--bg-sub) !important;
  border-color:var(--line) !important;
  color:var(--ink-soft) !important;
}
.reward-row-featured .reward-mark{
  background:var(--accent) !important;
  color:var(--ink) !important;
  border-color:var(--accent) !important;
}

/* Touch-Device: keine Ghost-Hover */
@media (hover: none), (pointer: coarse){
  .reward-row:hover,.nav-link:hover,.lookup-toggle:hover,
  .share-btn-primary:hover,.join-form button:hover{
    background:inherit !important;
    transform:none !important;
  }
}

/* Dezenter Signin-Link oberhalb des Footers */
.foot-signin{text-align:center;padding:32px 20px 8px}
.foot-signin-link{font-size:13px;font-weight:500;color:var(--ink-soft);letter-spacing:-0.1px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);transition:color 180ms ease,text-decoration-color 180ms ease}
.foot-signin-link:hover{color:var(--ink);text-decoration-color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════
   FEATURE-TEASER BLOCK — konkrete Features pro Bereich
   ═══════════════════════════════════════════════════════════════════ */
.feature-teaser{
  max-width:720px;
  margin:0 auto;
  padding:48px 24px 32px;
}
.feature-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:6px;
}
@media (max-width: 640px){
  .feature-grid{grid-template-columns:1fr}
}
.feature-item{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  transition:border-color 220ms var(--ease-out),transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .feature-item:hover{border-color:var(--accent)}
}
.feature-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.feature-ico{
  width:32px;
  height:32px;
  border-radius:10px;
  background:var(--accent-bg);
  color:var(--accent-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.feature-title{
  font-size:15.5px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-0.2px;
}
.feature-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.feature-list li{
  font-size:13.5px;
  line-height:1.45;
  color:var(--ink-mid);
  letter-spacing:-0.08px;
  padding-left:14px;
  position:relative;
}
.feature-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width:5px;
  height:5px;
  border-radius:99px;
  background:var(--accent);
  opacity:0.7;
}

/* ═══════════════════════════════════════════════════════════════════
   TIER-1 Reward: dezent größer, nicht scammy
   ═══════════════════════════════════════════════════════════════════ */
.reward-row-featured{
  padding:22px 24px !important;
}
.reward-row-featured .reward-line{
  font-size:15.5px;
}
.reward-row-featured .reward-line strong{
  font-size:16px;
}
.reward-row-featured .reward-mark{
  width:32px !important;
  height:32px !important;
  font-size:11px !important;
}

/* Feature-Teaser: Grid bleibt innen left-aligned */
.feature-teaser{text-align:center}
.feature-grid{text-align:left}

/* Streak-Line: editorial, ruhig, Fraunces italic — matched dem App-Streak-Hero */
.feature-streak{
  margin:32px auto 0;
  max-width:460px;
  text-align:center;
}
/* Label: — 🔥 STREAKS — als eine optische Einheit, flame+STREAKS gehören zusammen */
.feature-streak-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:14px;
  line-height:1;
}
.feature-streak-label::before,
.feature-streak-label::after{
  content:"";
  display:block;
  width:28px;
  height:1px;
  background:var(--line);
  flex-shrink:0;
}
.feature-streak-word{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--accent-deep);
  line-height:1;
}
.feature-streak-flame{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  transform:translateY(-0.5px); /* optisches Alignment mit Caps-Höhe */
}
.feature-streak-flame svg{display:block}
/* Body: Fraunces, balanced, italics heben den Kern hervor */
.feature-streak-text{
  font-family:var(--font-display);
  font-weight:400;
  font-variation-settings:"SOFT" 80;
  font-size:16px;
  line-height:1.5;
  color:var(--ink-mid);
  letter-spacing:-0.15px;
  margin:0 auto;
  max-width:32ch;
  text-wrap:balance;
}
.feature-streak-text em{
  font-style:italic;
  font-variation-settings:"SOFT" 100;
  color:var(--ink);
  font-weight:450;
}

/* ═══════════════════════════════════════════════════════════════════
   DARK-MODE — komplette Palette wenn System-Setting dark ist
   Kein User-Toggle (bleibt wie du möchtest), nur System-prefers-color-scheme
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14100E;
    --bg-sub:#1E1917;
    --card:#221C18;
    --ink:#F7F2EA;
    --ink-mid:#C0B5AA;
    --ink-soft:#8B7F75;
    --ink-faint:#5A4F47;
    --line:#3A332E;
    --line-soft:#2D2722;
    --accent:#F4B4A6;
    --accent-bg:rgba(244,180,166,0.09);
    --accent-deep:#F4B4A6;
    --danger:#E89070;
    color-scheme:dark;
  }
  /* Nav: charcoal blur */
  .nav{background:rgba(20,16,14,0.85) !important}
  /* Grain: screen statt multiply damit er auf dark funktioniert */
  .grain{opacity:0.14 !important;mix-blend-mode:screen}
  /* Primary-Button: cream bg + charcoal text (invertiert) */
  .join-form button{background:var(--ink);color:#14100E}
  .join-form button:hover{background:#EFE6D7}
  .share-btn-primary{background:var(--ink) !important;color:#14100E !important}
  .share-btn-primary:hover{background:#EFE6D7 !important;border-color:#EFE6D7 !important}
  /* Reward-featured bg stärker damit peach-tint sichtbar */
  .reward-row-featured{background:rgba(244,180,166,0.08) !important}
  .reward-row-featured:hover{background:rgba(244,180,166,0.12) !important}
  /* Inbox-Icon: dark-safe */
  .inbox-state-icon{
    background:rgba(244,180,166,0.12) !important;
    color:var(--accent) !important;
    border-color:rgba(244,180,166,0.4) !important;
  }
  /* Story: Lead-Italic in peach bleibt gleich, Close-Text liest sich cream */
  .story-close{color:var(--ink) !important}
  /* FAQ: Link-Color statt green nutze ink-soft */
  .faq-item a{color:var(--accent) !important}
}

/* ═══════════════════════════════════════════════════════════════════
   SPACING-POLISH — Abstände tighter + konsistenter
   ═══════════════════════════════════════════════════════════════════ */
/* Hero: weniger Luft unten vor den Rewards bzw. dem Feature-Teaser */
.hero{padding:56px 24px 40px !important}
/* Feature-Teaser rückt näher an Hero ran */
.feature-teaser{padding:32px 24px 28px !important}
/* Story mit dezenter Divider statt harter Border zum FAQ */
.story{padding:36px 24px 28px !important}
.story-eyebrow{padding-top:20px !important;margin-bottom:16px !important}
/* FAQ tighter */
.faq{padding:12px 24px 48px !important}
/* Footer: Sand-Divider oben für sauberen Abschluss */
.foot{
  margin-top:32px !important;
  padding:24px !important;
  border-top:1px solid var(--line) !important;
}
/* Rewards-Strip bisschen weniger Luft zum Hero-Content */
.rewards-strip{margin-top:28px !important}
/* Mobile: Hero noch tighter, kein 56 sondern 40 */
@media (max-width: 640px){
  .hero{padding:40px 20px 32px !important}
  .feature-teaser{padding:28px 20px 24px !important}
  .story{padding:32px 20px 24px !important}
  .faq{padding:8px 20px 40px !important}
}

/* ════════════════════════════════════════════════════════════
   WAITLIST-HERO — Polish v2: zentrale Wordmark, Content hoch, kein Alert-Pill
   ════════════════════════════════════════════════════════════ */

/* Nav: Wordmark links-aligned, kompakt */
.nav{
  justify-content:flex-start!important;
  padding:26px 24px 18px!important;
}
.nav-right{display:none!important}

/* Wordmark ~15% größer */
.f-wordmark{
  height:44px!important;
}
@media (max-width:768px){
  .f-wordmark{height:37px!important}
  .nav{padding:20px 20px 14px!important}
}

/* Hero nach oben rücken */
.hero{
  padding:40px 24px 64px!important;
}
@media (max-width:768px){
  .hero{padding:28px 20px 48px!important}
}

/* Eyebrow-Rhythmus straffen */
.eyebrow{margin-bottom:18px!important}

/* Counter-Line entkleiden: kein Pill, kein Gradient, kein Border */
.counter-line,
.counter-line.counter-limit{
  display:inline-flex!important;
  align-items:center!important;
  gap:9px!important;
  padding:0!important;
  margin:26px 0 34px!important;
  border:none!important;
  background:transparent!important;
  border-radius:0!important;
  font-family:'Geist','Inter',system-ui,sans-serif!important;
  font-size:13.5px!important;
  font-weight:400!important;
  letter-spacing:-0.1px!important;
  color:var(--ink-mid)!important;
  line-height:1.4!important;
}
.counter-line strong{
  font-weight:600!important;
  color:var(--ink)!important;
  letter-spacing:-0.15px;
}
.counter-line .dot{
  width:6px!important;height:6px!important;
  background:var(--accent)!important;
  flex-shrink:0;
}
/* Puls-Ring deaktivieren — Perpetual Motion zieht Aufmerksamkeit vom CTA */
.counter-line .dot::after{display:none!important}

/* Join-Form: flacherer Schatten, Peach-Focus-Ring */
.join-form{
  box-shadow:0 1px 2px rgba(17,24,39,0.035)!important;
}
.join-form:focus-within{
  box-shadow:0 1px 2px rgba(17,24,39,0.04),
             0 0 0 3px rgba(244,180,166,0.22)!important;
}

/* Mobile: counter-line bleibt einzeilig so weit es geht */
@media (max-width:480px){
  .counter-line,.counter-line.counter-limit{
    font-size:12.5px!important;
    margin:22px 0 28px!important;
  }
}

/* Reduced motion bleibt respektiert durch vorhandene Rules oben */

/* ════════════════════════════════════════════════════════════
   WAITLIST-HERO — Editorial v3: Fraunces-Headline, Peach-Reduktion, Rhythmus
   ════════════════════════════════════════════════════════════ */

/* Eyebrow: aus Peach raus — Charcoal-muted, weniger aufdringlich */
.eyebrow{
  color:rgba(26,22,20,0.48)!important;
  font-size:10.5px!important;
  letter-spacing:2.4px!important;
  font-weight:500!important;
  margin-bottom:22px!important;
}
:root[data-theme="dark"] .eyebrow,
@media (prefers-color-scheme:dark){
  .eyebrow{color:rgba(247,242,234,0.48)!important}
}

/* Headline: Fraunces italic, größer, enger */
.headline{
  font-family:"Fraunces","Playfair Display",Georgia,serif!important;
  font-weight:400!important;
  font-style:italic!important;
  font-size:clamp(40px,7vw,62px)!important;
  line-height:1.02!important;
  letter-spacing:-1.8px!important;
  margin-bottom:14px!important;
}

/* Deck: kleiner, kürzer, mehr Typo-Rhythmus */
.deck{
  font-size:15.5px!important;
  line-height:1.55!important;
  max-width:48ch!important;
  letter-spacing:-0.1px!important;
  margin:0 auto 22px!important;
  color:rgba(26,22,20,0.62)!important;
}

/* Editorial Rule-Line unter Deck — dezenter Peach-Anker */
.deck::after{
  content:"";
  display:block;
  width:44px;
  height:1px;
  background:var(--accent,#F4B4A6);
  opacity:0.55;
  margin:26px auto 0;
}

/* Counter-Line rückt direkt an die Form — visuell gekoppelt */
.counter-line,.counter-line.counter-limit{
  margin:10px 0 14px!important;
}

/* Deck-Gap zur Counter-Line straffen (falls counter direkt folgt) */
.deck + .counter-line{margin-top:4px!important}

/* Mobile — Headline-Verhältnisse anpassen */
@media (max-width:480px){
  .headline{
    font-size:clamp(34px,8.5vw,44px)!important;
    letter-spacing:-1.2px!important;
  }
  .deck{font-size:15px!important;max-width:42ch!important}
  .deck::after{margin:22px auto 0}
}

/* Reduced Motion respektiert bestehende Fade-up-Animationen */

/* ════════════════════════════════════════════════════════════
   NAV — App-Store-Hint oben rechts
   ════════════════════════════════════════════════════════════ */

/* Nav wieder mit Zwei-Seiten-Layout: Wordmark links, Hint rechts */
.nav{
  justify-content:space-between!important;
}
.nav-right{
  display:flex!important;
  align-items:center;
}

/* Hint-Pill — dezent, keine laute CTA */
.appstore-hint{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:32px;
  padding:0 12px 0 11px;
  border-radius:999px;
  background:transparent;
  border:1px solid rgba(26,22,20,0.14);
  color:rgba(26,22,20,0.72);
  font-family:"Geist",system-ui,sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:-0.005em;
  line-height:1;
  white-space:nowrap;
  transition:border-color 200ms var(--ease-out),color 200ms var(--ease-out);
}
.appstore-hint-ico{
  display:inline-flex;
  opacity:0.8;
  margin-top:-1px;        /* optische Baseline mit dem Text */
}
.appstore-hint-soon{
  font-family:"Geist Mono","SF Mono",ui-monospace,monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent,#F4B4A6);
  margin-right:2px;
}

@media (hover:hover) and (pointer:fine){
  .appstore-hint:hover{
    border-color:rgba(26,22,20,0.28);
    color:var(--ink);
  }
}

/* Dark-Mode */
@media (prefers-color-scheme:dark){
  .appstore-hint{
    border-color:rgba(247,242,234,0.18);
    color:rgba(247,242,234,0.72);
  }
  .appstore-hint:hover{
    border-color:rgba(247,242,234,0.32);
    color:var(--cream,#F7F2EA);
  }
}

/* Mobile: nur Apple-Icon + "Bald", kein "im App Store" */
@media (max-width:520px){
  .appstore-hint{
    height:28px;
    padding:0 10px 0 9px;
    font-size:11px;
    gap:6px;
  }
  .appstore-hint-label{
    font-size:0;            /* Text ausblenden, Monospace-Badge bleibt sichtbar */
  }
  .appstore-hint-soon{
    font-size:9.5px;
    margin-right:0;
  }
}

/* ════════════════════════════════════════════════════════════
   APPSTORE-HINT v2 — mit Peach-Pulse-Dot + Depth-Highlight
   ════════════════════════════════════════════════════════════ */

/* Basis-Pill refined */
.appstore-hint{
  position:relative;
  gap:8px!important;
  padding:0 13px 0 11px!important;
  background:rgba(253,250,245,0.6)!important;         /* leicht hellerer Cream für Depth */
  border:1px solid rgba(26,22,20,0.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);      /* Top-Highlight → subtle lift */
  backdrop-filter:blur(8px) saturate(1.2);
  -webkit-backdrop-filter:blur(8px) saturate(1.2);
}

/* Puls-Dot links */
.appstore-hint-dot{
  width:6px;height:6px;border-radius:999px;
  background:var(--accent,#F4B4A6);
  flex-shrink:0;
  position:relative;
  box-shadow:0 0 0 0 rgba(244,180,166,0.55);
  animation:appstorePulse 2.4s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes appstorePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(244,180,166,0.55)}
  50%{box-shadow:0 0 0 5px rgba(244,180,166,0)}
}

/* Apple-Icon dezenter */
.appstore-hint-ico{
  opacity:0.85;
  margin-top:-1px;
}

/* Separator + "zum Launch" typografisch absetzen */
.appstore-hint-sep{
  opacity:0.35;
  margin:0 1px;
  font-weight:400;
}
.appstore-hint-when{
  font-family:"Geist Mono","SF Mono",ui-monospace,monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent,#F4B4A6);
  margin-left:1px;
}

/* Mobile — nur Dot + Icon + "Launch" in Mono */
@media (max-width:520px){
  .appstore-hint{
    gap:6px!important;
    padding:0 10px 0 9px!important;
  }
  .appstore-hint-label{
    font-size:0!important;  /* hauptlabel unsichtbar */
  }
  .appstore-hint-when{
    font-size:9.5px!important;
    margin-left:0!important;
  }
  /* Mono-Label via ::after am Container – "Launch" direkt nach Icon */
  .appstore-hint-label::after{
    content:"Launch";
    font-family:"Geist Mono",ui-monospace,monospace;
    font-size:9.5px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--accent,#F4B4A6);
  }
  /* Desktop "zum Launch" verstecken (weil ::after jetzt das Label ist) */
  .appstore-hint-when,.appstore-hint-sep{display:none!important}
}

/* Dark-Mode */
@media (prefers-color-scheme:dark){
  .appstore-hint{
    background:rgba(26,22,20,0.4)!important;
    border-color:rgba(247,242,234,0.15)!important;
    box-shadow:inset 0 1px 0 rgba(247,242,234,0.06);
  }
}

/* Reduced Motion — Dot statisch */
@media (prefers-reduced-motion:reduce){
  .appstore-hint-dot{animation:none!important;box-shadow:none!important}
}

/* ════════════════════════════════════════════════════════════
   APPSTORE-HINT v3 — "Native iOS folgt"
   ════════════════════════════════════════════════════════════ */

/* "Native" als Peach-Mono-Akzent, "iOS folgt" als normales Label */
.appstore-hint-native{
  font-family:"Geist Mono","SF Mono",ui-monospace,monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent,#F4B4A6);
  margin-right:3px;
}

/* Alte v2-Klassen abgeschaltet — nicht mehr im Markup */
.appstore-hint-sep,
.appstore-hint-when{display:none!important}

/* Mobile — Label kollabiert auf nur "iOS" */
@media (max-width:520px){
  /* v2 mobile-::after Override zurücknehmen */
  .appstore-hint-label::after{content:none!important}
  .appstore-hint-label{font-size:11px!important}
  .appstore-hint-native{
    font-size:9.5px!important;
    margin-right:2px!important;
  }
}

/* ════════════════════════════════════════════════════════════
   JOIN-NOTE v2 — Trust-Row mit Peach-Checkmarks
   ════════════════════════════════════════════════════════════ */
.join-note{
  display:flex!important;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:4px 14px!important;
  font-size:12px!important;
  color:rgba(26,22,20,0.55)!important;
  letter-spacing:-0.05px!important;
}
.join-note-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}
.join-note-item svg{
  color:var(--accent,#F4B4A6);
  flex-shrink:0;
  opacity:0.85;
}
@media (max-width:480px){
  .join-note{gap:3px 10px!important;font-size:11.5px!important}
  .join-note-item svg{width:10px;height:10px}
}

/* Platz-nachsehen Link subtiler machen */
.lookup-toggle{
  text-decoration:none!important;
  color:rgba(26,22,20,0.42)!important;
  font-size:12px!important;
  padding:8px 14px!important;
  border-radius:999px!important;
  transition:color 200ms cubic-bezier(0.23,1,0.32,1),background-color 200ms ease!important;
}
@media (hover:hover) and (pointer:fine){
  .lookup-toggle:hover{
    color:var(--ink,#1A1614)!important;
    background:rgba(26,22,20,0.04)!important;
    text-decoration:none!important;
  }
}
.join-lookup{margin-top:22px!important}

/* ════════════════════════════════════════════════════════════
   SNEAK-PEEK — iPhone-Mockup zwischen Hero und Feature-Teaser
   ════════════════════════════════════════════════════════════ */
.sneak-peek{
  position:relative;
  max-width:1000px;
  margin:0 auto;
  padding:40px 24px 80px;
  text-align:center;
  overflow:hidden;
}
.sneak-peek-inner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
}
.sneak-peek-eyebrow{
  font-family:"Geist Mono","SF Mono",ui-monospace,monospace;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(26,22,20,0.42);
}

/* Stage: Bühne für iPhone + Glow */
.sneak-peek-stage{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  min-height:560px;
  perspective:1400px;
}

/* Peach-Glow unterm iPhone */
.sneak-peek-glow{
  position:absolute;
  bottom:-40px;
  left:50%;
  width:420px;
  height:180px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,
    rgba(244,180,166,0.45) 0%,
    rgba(244,180,166,0.18) 35%,
    rgba(244,180,166,0) 70%);
  filter:blur(32px);
  pointer-events:none;
  z-index:0;
}

/* iPhone-Frame — pure CSS */
.iphone-frame{
  position:relative;
  z-index:1;
  width:280px;
  height:572px;
  border-radius:48px;
  background:linear-gradient(145deg,#2A2420 0%,#1A1614 50%,#0F0C0A 100%);
  padding:11px;
  box-shadow:
    0 1px 1px rgba(255,255,255,0.08) inset,        /* top edge catch-light */
    0 -2px 3px rgba(0,0,0,0.4) inset,              /* bottom edge depth */
    0 40px 80px -20px rgba(26,22,20,0.35),         /* drop shadow */
    0 25px 50px -15px rgba(244,180,166,0.25);      /* peach-tinted shadow */
  transform:rotate(-3.5deg) translateY(0);
  transition:transform 600ms cubic-bezier(0.23,1,0.32,1);
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .iphone-frame:hover{transform:rotate(-1.5deg) translateY(-4px)}
}

/* Notch / Dynamic Island */
.iphone-notch{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width:88px;
  height:26px;
  background:#000;
  border-radius:16px;
  z-index:3;
}

/* Screen — Content-Area */
.iphone-screen{
  position:relative;
  width:100%;
  height:100%;
  border-radius:38px;
  background:var(--bg,#F7F2EA);
  overflow:hidden;
}

/* Screenshot-Image — füllt komplett */
.iphone-screenshot{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}

/* Placeholder — sichtbar wenn kein Screenshot existiert */
.iphone-placeholder{
  display:none;              /* default: hidden, onerror zeigt an */
  position:absolute;inset:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  background:linear-gradient(180deg,var(--bg,#F7F2EA) 0%,#EEE6DA 100%);
}
.iphone-placeholder-mark{
  width:56px;height:56px;
  border-radius:16px;
  background:var(--accent,#F4B4A6);
  box-shadow:0 8px 20px -8px rgba(244,180,166,0.6);
  opacity:0.9;
}
.iphone-placeholder-hint{
  font-family:"Geist Mono","SF Mono",ui-monospace,monospace;
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(26,22,20,0.38);
}

/* Diagonal Highlight auf dem Frame — simulierte Lichtreflektion */
.iphone-highlight{
  position:absolute;
  inset:0;
  border-radius:48px;
  background:linear-gradient(125deg,
    rgba(255,255,255,0.06) 0%,
    rgba(255,255,255,0.02) 30%,
    transparent 60%);
  pointer-events:none;
  z-index:2;
}

/* Caption */
.sneak-peek-caption{
  font-size:12.5px;
  color:rgba(26,22,20,0.48);
  letter-spacing:-0.05px;
  font-style:italic;
}

/* Dark-Mode Glow/Shadow anpassen */
@media (prefers-color-scheme:dark){
  .sneak-peek-eyebrow,
  .sneak-peek-caption{color:rgba(247,242,234,0.5)}
  .iphone-placeholder{background:linear-gradient(180deg,#1A1614 0%,#0F0C0A 100%)}
  .iphone-placeholder-hint{color:rgba(247,242,234,0.4)}
}

/* Mobile */
@media (max-width:640px){
  .sneak-peek{padding:24px 20px 60px}
  .sneak-peek-stage{min-height:500px}
  .iphone-frame{
    width:240px;
    height:490px;
    padding:9px;
    border-radius:42px;
    transform:rotate(-2.5deg);
  }
  .iphone-screen{border-radius:33px}
  .iphone-notch{width:74px;height:22px;top:15px;border-radius:14px}
  .iphone-highlight{border-radius:42px}
  .sneak-peek-glow{width:320px;height:140px}
}

/* Reduced Motion */
@media (prefers-reduced-motion:reduce){
  .iphone-frame{transition:none!important;transform:rotate(-2deg)!important}
  .iphone-frame:hover{transform:rotate(-2deg)!important}
}

/* ════════════════════════════════════════════════════════════
   NAV v3 — Layout-Bug Fix + kompakter
   ════════════════════════════════════════════════════════════ */
.nav{
  justify-content:space-between!important;   /* Wordmark links, Pill rechts */
  padding:22px 24px 16px!important;
}
@media (max-width:768px){
  .nav{padding:18px 20px 14px!important}
}

/* ════════════════════════════════════════════════════════════
   APPSTORE-HINT v4 — Dashed Border + "iOS · Im Aufbau"
   ════════════════════════════════════════════════════════════ */
.appstore-hint{
  border-style:dashed!important;
  border-color:rgba(26,22,20,0.25)!important;
}
@media (prefers-color-scheme:dark){
  .appstore-hint{border-color:rgba(247,242,234,0.22)!important}
}

/* Divider dot zwischen "iOS" und "Im Aufbau" */
.appstore-hint-divider{
  display:inline-block;
  margin:0 2px;
  color:rgba(26,22,20,0.3);
}
@media (prefers-color-scheme:dark){
  .appstore-hint-divider{color:rgba(247,242,234,0.3)}
}

/* Status-Badge in Peach-Mono */
.appstore-hint-status{
  font-family:"Geist Mono","SF Mono",ui-monospace,monospace;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent,#F4B4A6);
}

/* v3-Legacy Klassen aus dem Markup raus → kaschieren */
.appstore-hint-native{display:none!important}

/* Mobile — kompakter, "iOS ·" versteckt, nur "IM AUFBAU" bleibt sichtbar */
@media (max-width:520px){
  .appstore-hint{
    gap:6px!important;
    padding:0 10px 0 9px!important;
  }
  .appstore-hint-label{font-size:0!important}    /* Haupt-Container unsichtbar */
  .appstore-hint-divider{display:none!important}
  .appstore-hint-status{
    font-size:9.5px!important;
  }
  /* "iOS" visuell unterdrücken → Label-Container zeigt nur die Status-Inline-Span */
  .appstore-hint-label > :not(.appstore-hint-status){display:none!important}
  .appstore-hint-label .appstore-hint-status{
    font-size:9.5px!important;
  }
  /* Vorheriges v3-mobile ::after override zurücknehmen falls noch aktiv */
  .appstore-hint-label::after{content:none!important}
}

/* ════════════════════════════════════════════════════════════
   APPSTORE-HINT v5 — klare Copy "Nach Launch im App Store"
   ════════════════════════════════════════════════════════════ */

/* Label wieder sichtbar machen (v4 hatte Kinder versteckt) */
.appstore-hint-label{
  font-family:"Geist",system-ui,sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:-0.005em;
  color:rgba(26,22,20,0.72);
  line-height:1;
}
@media (prefers-color-scheme:dark){
  .appstore-hint-label{color:rgba(247,242,234,0.72)}
}

/* Mobile — nur "Nach Launch" zeigen, "im App Store" versteckt (Apple-Icon impliziert es) */
@media (max-width:520px){
  .appstore-hint{
    gap:6px!important;
    padding:0 10px 0 9px!important;
  }
  .appstore-hint-label{
    font-size:11px!important;
    max-width:78px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  /* v4 overrides zurücknehmen */
  .appstore-hint-label > :not(.appstore-hint-status){display:inline!important}
  .appstore-hint-label::after{content:none!important}
}

/* Sehr schmal — Text komplett raus, nur Apple-Icon + Peach-Dot bleibt */
@media (max-width:380px){
  .appstore-hint-label{
    font-size:0!important;
    max-width:0!important;
    padding:0!important;
  }
}

/* Sneak-Peek Caption v2 — editorial Fraunces-Italic statt bleichem Text */
.sneak-peek-caption{
  font-family:"Fraunces","Playfair Display",Georgia,serif!important;
  font-style:italic!important;
  font-weight:400!important;
  font-size:17px!important;
  letter-spacing:-0.3px!important;
  color:rgba(26,22,20,0.7)!important;
  margin-top:8px;
}
@media (prefers-color-scheme:dark){
  .sneak-peek-caption{color:rgba(247,242,234,0.7)!important}
}
@media (max-width:640px){
  .sneak-peek-caption{font-size:15px!important}
}

/* ════════════════════════════════════════════════════════════
   APPSTORE-HINT v6 — Solid Border, kein Peach-Dot
   ════════════════════════════════════════════════════════════ */
.appstore-hint{
  border-style:solid!important;
  border-color:rgba(26,22,20,0.14)!important;
}
@media (prefers-color-scheme:dark){
  .appstore-hint{border-color:rgba(247,242,234,0.18)!important}
}
.appstore-hint-dot{display:none!important}

/* ════════════════════════════════════════════════════════════
   LEGAL PAGES — Impressum & Datenschutz
   ════════════════════════════════════════════════════════════ */

.legal{
  max-width:720px;
  margin:0 auto;
  padding:48px 24px 80px;
}
.legal-inner{position:relative}

.legal-eyebrow{
  font-family:"Geist Mono","SF Mono",ui-monospace,monospace;
  font-size:10.5px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  font-weight:500;
  color:rgba(26,22,20,0.48);
  margin-bottom:14px;
}

.legal-title{
  font-family:"Fraunces","Playfair Display",Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(34px,5.2vw,46px);
  line-height:1.05;
  letter-spacing:-1.4px;
  color:var(--ink,#1A1614);
  margin:0 0 18px;
}

.legal-intro{
  font-size:16px;
  line-height:1.6;
  color:rgba(26,22,20,0.68);
  max-width:58ch;
  margin-bottom:8px;
}
.legal-meta{
  font-family:"Geist Mono","SF Mono",ui-monospace,monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(26,22,20,0.42);
  margin:8px 0 48px;
}

.legal-section{
  padding:28px 0;
  border-top:1px solid rgba(26,22,20,0.08);
}
.legal-section:first-of-type{border-top:none;padding-top:0}

.legal-section h2{
  font-family:"Fraunces","Playfair Display",Georgia,serif;
  font-weight:500;
  font-size:22px;
  letter-spacing:-0.5px;
  color:var(--ink,#1A1614);
  margin:0 0 14px;
}
.legal-section h3{
  font-family:"Geist",system-ui,sans-serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:-0.1px;
  color:var(--ink,#1A1614);
  margin:22px 0 8px;
}
.legal-section p{
  font-size:14.5px;
  line-height:1.65;
  color:rgba(26,22,20,0.72);
  max-width:62ch;
  margin:0 0 12px;
}
.legal-section p:last-child{margin-bottom:0}

.legal-section a{
  color:var(--ink,#1A1614);
  text-decoration:underline;
  text-decoration-color:rgba(244,180,166,0.6);
  text-underline-offset:3px;
  transition:text-decoration-color 200ms cubic-bezier(0.23,1,0.32,1);
}
.legal-section a:hover{text-decoration-color:var(--accent,#F4B4A6)}

.legal-list{
  list-style:none;
  padding:0;
  margin:12px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.legal-list li{
  position:relative;
  padding-left:18px;
  font-size:14.5px;
  line-height:1.55;
  color:rgba(26,22,20,0.72);
}
.legal-list li::before{
  content:"";
  position:absolute;
  left:0;top:10px;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--accent,#F4B4A6);
}
.legal-list strong{color:var(--ink,#1A1614);font-weight:600}

.legal-mono{
  font-family:"Geist Mono","SF Mono",ui-monospace,monospace;
  font-size:0.95em;
  letter-spacing:0.02em;
  color:var(--ink,#1A1614);
}

/* Back-Link in Nav */
.legal-back{
  font-family:"Geist",system-ui,sans-serif;
  font-size:12.5px;
  font-weight:500;
  color:rgba(26,22,20,0.55);
  text-decoration:none;
  padding:6px 12px;
  border-radius:999px;
  transition:color 200ms ease,background-color 200ms ease;
}
.legal-back:hover{
  color:var(--ink,#1A1614);
  background:rgba(26,22,20,0.04);
}

/* Sibling-Nav zwischen Impressum und Datenschutz */
.legal-sibling-nav{
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid rgba(26,22,20,0.08);
}
.legal-sibling-nav a{
  font-family:"Geist",system-ui,sans-serif;
  font-size:14px;
  font-weight:500;
  color:var(--ink,#1A1614);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:transform 200ms cubic-bezier(0.23,1,0.32,1);
}
.legal-sibling-nav a:hover{transform:translateX(2px)}

/* Dark-Mode */
@media (prefers-color-scheme:dark){
  .legal-eyebrow{color:rgba(247,242,234,0.48)}
  .legal-title{color:var(--cream,#F7F2EA)}
  .legal-intro{color:rgba(247,242,234,0.68)}
  .legal-meta{color:rgba(247,242,234,0.42)}
  .legal-section{border-top-color:rgba(247,242,234,0.1)}
  .legal-section h2,.legal-section h3,.legal-section a,.legal-mono{color:var(--cream,#F7F2EA)}
  .legal-section p,.legal-list li{color:rgba(247,242,234,0.72)}
  .legal-list strong{color:var(--cream,#F7F2EA)}
  .legal-back{color:rgba(247,242,234,0.55)}
  .legal-back:hover{color:var(--cream,#F7F2EA);background:rgba(247,242,234,0.06)}
  .legal-sibling-nav{border-top-color:rgba(247,242,234,0.1)}
  .legal-sibling-nav a{color:var(--cream,#F7F2EA)}
}

/* Mobile */
@media (max-width:640px){
  .legal{padding:32px 20px 60px}
  .legal-title{font-size:clamp(28px,7vw,36px)}
  .legal-section{padding:22px 0}
  .legal-section p,.legal-list li{font-size:14px}
}

/* ════════════════════════════════════════════════════════════
   COOKIE-BANNER — minimal, bottom-right, dismissible
   ════════════════════════════════════════════════════════════ */
.cookie-banner{
  position:fixed;
  bottom:20px; right:20px;
  max-width:420px;
  z-index:90;
  opacity:0;
  transform:translateY(12px);
  transition:opacity 280ms cubic-bezier(0.23,1,0.32,1),
             transform 280ms cubic-bezier(0.23,1,0.32,1);
  pointer-events:none;
}
.cookie-banner.visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.cookie-banner-inner{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px 18px;
  border-radius:16px;
  background:rgba(253,250,245,0.92);
  border:1px solid rgba(26,22,20,0.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),
             0 20px 40px -16px rgba(26,22,20,0.18);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
}
.cookie-banner-text{
  font-size:12.5px;
  line-height:1.55;
  color:rgba(26,22,20,0.72);
  letter-spacing:-0.05px;
}
.cookie-banner-text a{
  color:var(--ink,#1A1614);
  text-decoration:underline;
  text-decoration-color:rgba(244,180,166,0.6);
  text-underline-offset:2px;
}
.cookie-banner-btn{
  align-self:flex-start;
  padding:8px 14px;
  border-radius:999px;
  border:none;
  background:var(--ink,#1A1614);
  color:var(--bg,#F7F2EA);
  font-family:"Geist",system-ui,sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:-0.1px;
  cursor:pointer;
  transition:transform 140ms cubic-bezier(0.23,1,0.32,1),background-color 180ms ease;
}
.cookie-banner-btn:hover{background:#2A2420}
.cookie-banner-btn:active{transform:scale(0.97)}

@media (prefers-color-scheme:dark){
  .cookie-banner-inner{
    background:rgba(26,22,20,0.85);
    border-color:rgba(247,242,234,0.15);
    box-shadow:inset 0 1px 0 rgba(247,242,234,0.08),
               0 20px 40px -16px rgba(0,0,0,0.6);
  }
  .cookie-banner-text{color:rgba(247,242,234,0.72)}
  .cookie-banner-text a{color:var(--cream,#F7F2EA)}
  .cookie-banner-btn{background:var(--cream,#F7F2EA);color:var(--ink,#1A1614)}
  .cookie-banner-btn:hover{background:#FFFDF7}
}

@media (max-width:520px){
  .cookie-banner{
    left:12px; right:12px;
    bottom:12px;
    max-width:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .cookie-banner{transition:opacity 200ms ease!important;transform:none!important}
  .cookie-banner.visible{transform:none!important}
}

/* ════════════════════════════════════════════════════════════
   404 PAGE
   ════════════════════════════════════════════════════════════ */
.notfound{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
}
.notfound-inner{
  text-align:center;
  max-width:460px;
}
.notfound-code{
  font-family:"Geist Mono","SF Mono",ui-monospace,monospace;
  font-size:13px;
  letter-spacing:0.3em;
  color:var(--accent,#F4B4A6);
  font-weight:600;
  margin-bottom:18px;
}
.notfound-title{
  font-family:"Fraunces","Playfair Display",Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(38px,6vw,54px);
  line-height:1.02;
  letter-spacing:-1.6px;
  color:var(--ink,#1A1614);
  margin:0 0 14px;
}
.notfound-sub{
  font-size:16px;
  line-height:1.55;
  color:rgba(26,22,20,0.6);
  margin-bottom:28px;
}
.notfound-btn{
  display:inline-flex;
  align-items:center;
  padding:12px 22px;
  border-radius:999px;
  background:var(--ink,#1A1614);
  color:var(--bg,#F7F2EA);
  font-family:"Geist",system-ui,sans-serif;
  font-size:14px;
  font-weight:500;
  letter-spacing:-0.15px;
  text-decoration:none;
  transition:transform 140ms cubic-bezier(0.23,1,0.32,1),background-color 180ms ease;
}
.notfound-btn:hover{background:#2A2420}
.notfound-btn:active{transform:scale(0.97)}

@media (prefers-color-scheme:dark){
  .notfound-title{color:var(--cream,#F7F2EA)}
  .notfound-sub{color:rgba(247,242,234,0.6)}
  .notfound-btn{background:var(--cream,#F7F2EA);color:var(--ink,#1A1614)}
  .notfound-btn:hover{background:#FFFDF7}
}

/* ════════════════════════════════════════════════════════════
   APPSTORE-HINT v7 — voller Text auf Mobile, keine Ellipsis-Kürzung
   ════════════════════════════════════════════════════════════ */
@media (max-width:520px){
  .appstore-hint-label{
    font-size:10.5px!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
}
@media (max-width:380px){
  .appstore-hint{
    gap:5px!important;
    padding:0 9px 0 8px!important;
  }
  .appstore-hint-label{
    font-size:10px!important;
    max-width:none!important;
    padding:0!important;
  }
  .appstore-hint-ico{width:11px;height:11px}
}

/* ════════════════════════════════════════════════════════════
   REVIEW-FIXES — Cross-Page Consistency + Craft
   ════════════════════════════════════════════════════════════ */

/* P0: Cookie-Banner über Grain-Overlay heben (Grain ist z-index 100) */
.cookie-banner{z-index:120!important}

/* P0: 404-Seite — leeres nav-right erzeugt toten Space, verstecken */
body:has(.notfound) .nav-right,
.notfound ~ * .nav-right{display:none}
/* Fallback falls :has() nicht supported — .nav-right ohne Kinder ausblenden */
.nav-right:empty{display:none!important}

/* P1: Counter-Line Farbe harmonisieren mit neuem Eyebrow-Ton */
.counter-line,.counter-line.counter-limit{
  color:rgba(26,22,20,0.55)!important;
}
@media (prefers-color-scheme:dark){
  .counter-line,.counter-line.counter-limit{color:rgba(247,242,234,0.55)!important}
}

/* P1: Legal-Page Footer-Inner konsistent stylen */
.foot-inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.foot-copy{
  font-size:11.5px;
  color:rgba(26,22,20,0.42);
  letter-spacing:-0.05px;
}
@media (prefers-color-scheme:dark){
  .foot-copy{color:rgba(247,242,234,0.42)}
}
@media (max-width:520px){
  .foot-inner{flex-direction:column;align-items:flex-start;gap:10px}
}

/* P1: Legal-Section Border deutlicher (war zu blass) */
.legal-section{border-top-color:rgba(26,22,20,0.12)!important}
@media (prefers-color-scheme:dark){
  .legal-section{border-top-color:rgba(247,242,234,0.12)!important}
}

/* P1: iPhone-Placeholder default sichtbar, wird erst auf load versteckt */
.iphone-placeholder{display:flex!important}
.iphone-screenshot[src]:not([src=""]){position:relative;z-index:2}
.iphone-screen:has(img.iphone-screenshot:not([src=""]):not([data-failed])) .iphone-placeholder{
  display:none!important
}

/* iPhone-Screen Stacking: Placeholder als Hintergrund, Image drüber */
.iphone-screenshot{
  position:relative!important;
  z-index:2!important;
}
.iphone-placeholder{
  z-index:1!important;
}