/* =================================================
   RizzArchitect — Szenenseiten (/scenarios/, 27.10.2026)
   Eigenständig statt style.css (80 KB): die Seiten sind reiner Lesetext,
   Ziel Lighthouse Mobile >= 90. Farben und Schrift wie die Hauptseite
   (Gold auf Schwarz, Barlow aus fonts.css, selbst gehostet).
   ================================================= */
:root {
  color-scheme: dark only;
  forced-color-adjust: none;
  --black: #0A0A0A;
  --card: #161616;
  --outline: #4A4A5E;
  --gold-ocker: #E0B57A;
  --gold-ocker-lt: #EAC79A;
  --gold-ocker-dk: #C89A5C;
  --text: #FFFFFF;
  --text-soft: #F5F5F5;
  --text-muted: #DCDCE2;
  --sans: "Barlow", -apple-system, "Segoe UI", Roboto, sans-serif;
  --rad: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--text-soft);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
}

a { color: var(--gold-ocker); text-underline-offset: 3px; }
a:hover { color: var(--gold-ocker-lt); }

.topbar {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 16px 0;
}
.topbar__brand {
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .95rem;
}

.sc {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 16px 48px;
}

.crumbs {
  font-size: .85rem;
  color: var(--text-muted);
  margin: 8px 0 28px;
}
.crumbs a { color: var(--text-muted); }

h1 {
  font-weight: 700;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  line-height: 1.15;
  color: var(--gold-ocker);
  margin: 0 0 10px;
  letter-spacing: -.01em;
}
.byline {
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}
h2 {
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--gold-ocker-lt);
  margin: 44px 0 12px;
}
h3 {
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--text);
  margin: 28px 0 8px;
}
p { margin: 0 0 14px; }
ul { padding-left: 22px; margin: 0 0 14px; }
li { margin-bottom: 8px; }
strong { color: var(--text); }

/* Punktzahl als Abzeichen — die H3 bleibt echter Text. */
.score {
  display: inline-block;
  padding: 1px 10px;
  margin-right: 2px;
  border-radius: 999px;
  font-size: .9em;
  font-weight: 700;
  color: #0A0A0A;
  white-space: nowrap;
}
.score--100 { background: #7FD49B; }
.score--77  { background: #E0B57A; }
.score--45  { background: #F0A060; }
.score--31  { background: #F08A8A; }

.scorebox,
.facts {
  background: var(--card);
  border: 1px solid var(--outline);
  border-radius: var(--rad);
  padding: 16px 18px;
  margin: 18px 0 22px;
}
.scorebox p:last-child,
.facts p:last-child,
.cta p:last-of-type { margin-bottom: 0; }

.cta {
  background: linear-gradient(180deg, rgba(224,181,122,.14), rgba(224,181,122,.05));
  border: 1px solid var(--gold-ocker-dk);
  border-radius: var(--rad);
  padding: 20px 18px;
  margin: 36px 0 24px;
}
.cta__title { font-size: 1.15rem; }
.cta__btn,
.sticky-cta {
  display: block;
  text-align: center;
  background: var(--gold-ocker);
  color: #0A0A0A;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  padding: 14px 20px;
  min-height: 48px;
}
.cta__btn { margin-top: 16px; }
.cta__btn:hover,
.sticky-cta:hover { background: var(--gold-ocker-lt); color: #0A0A0A; }

.more {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--outline);
}

.sc-foot {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 96px;
  border-top: 1px solid var(--outline);
  font-size: .85rem;
  text-align: center;
}
.sc-foot a { display: inline-block; margin: 4px 10px; color: var(--text-muted); }

/* Fester Knopf unten, nur auf schmalen Bildschirmen und erst nach der H1. */
.sticky-cta {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 50;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  transform: translateY(160%);
  transition: transform .25s ease;
}
.sticky-cta.is-on { transform: none; }
@media (min-width: 760px) {
  .sticky-cta { display: none; }
  .sc-foot { padding-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* =================================================
   Gestaltung v2 (Abschnitt 3a, 27.10.2026): Karten statt Textwand.
   Nur unter .v2 — Seiten ohne v2 bleiben unverändert.
   Punktfarben wie in der App (ScoreGreen/ScoreYellow/ScoreRed, Color.kt).
   ================================================= */
.v2 { --card2: #1F1F1F; --edge: rgba(224,181,122,.22); --accent: #E0B57A; line-height: 1.6; }
.v2 .score--100 { background: #4CAF50; }
.v2 .score--77  { background: #FFC107; }
.v2 .score--45  { background: #FF9800; }
.v2 .score--31  { background: #EF5350; }
.v2 h2 { margin-top: 0; }
.v2 section, .v2 .scene-wrap, .v2 aside, .v2 .more { margin: 0 0 40px; }
.v2 .card {
  background: var(--card2);
  border: 1px solid var(--edge);
  border-radius: 18px;
  padding: 18px;
}
.v2 .small, .v2 .small p { font-size: .95rem; color: var(--text-muted); }
.v2 .kicker, .v2 .eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}

/* 1 · Kurzantwort */
.v2 .short { border-left: 4px solid var(--accent); }
.v2 .short p { margin: 0; }

/* 2 · Szene im App-Look */
.v2 .scene-wrap { display: grid; gap: 18px; }
.v2 .chip {
  display: inline-block; font-size: .85rem; color: var(--text-muted);
  background: rgba(255,255,255,.06); border-radius: 999px; padding: 4px 12px; margin-bottom: 12px;
}
.v2 .scene h2 { font-size: 1.15rem; margin-bottom: 8px; }
.v2 .ask { font-size: 1.25rem; font-weight: 700; color: var(--accent); margin: 18px 0 8px; }
.v2 .timer {
  display: inline-block; font-weight: 700; color: #0A0A0A; background: var(--accent);
  border-radius: 999px; padding: 3px 12px; font-size: .9rem;
}
.v2 .phone { margin: 0; justify-self: center; max-width: 300px; }
.v2 .phone img {
  display: block; width: 100%; height: auto;
  border: 6px solid #2A2A2A; border-radius: 22px; box-shadow: 0 16px 40px rgba(0,0,0,.6);
}
@media (min-width: 760px) {
  .v2 .scene-wrap { grid-template-columns: 1fr 280px; align-items: start; }
}

/* 3 · Antwort-Karten */
.v2 .hint { color: var(--text-muted); }
.v2 .move { margin-bottom: 12px; padding: 0; }
.v2 .move summary {
  list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; min-height: 48px;
}
.v2 .move summary::-webkit-details-marker { display: none; }
.v2 .letter {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--accent); color: var(--accent);
  display: grid; place-items: center; font-weight: 700; font-size: .9rem;
}
.v2 .move[open] { border-color: var(--accent); }
.v2 .move[open] summary { padding-bottom: 6px; }
.v2 .move > :not(summary) { margin-left: 18px; margin-right: 18px; }
.v2 .move > p:last-child { margin-bottom: 18px; }
.v2 .move h3 { margin-top: 8px; }
.v2 .legend { font-size: .85rem; color: var(--text-muted); margin-top: 14px; }
.v2 .legend p { margin: 0; }

/* 4 + 6 · Zitate */
.v2 .pull {
  margin: 8px 0 14px; padding: 0;
  font-size: 1.4rem; line-height: 1.35; font-weight: 700; color: var(--text);
}
.v2 .why .pull { border-left: 4px solid var(--accent); padding-left: 14px; }
.v2 .quote-card { background: #121212; }
.v2 .quote-card .pull::before { content: "“"; color: var(--accent); }
.v2 .quote-card .pull::after { content: "”"; color: var(--accent); }

/* 5 · Kacheln */
.v2 .tiles { list-style: none; padding: 0; display: grid; gap: 12px; }
.v2 .tile {
  background: var(--card2); border: 1px solid var(--edge); border-radius: 18px;
  padding: 16px; margin: 0; display: grid; gap: 4px;
}
.v2 .tile__icon { font-size: 1.5rem; }
.v2 .tile__head { font-size: 1.1rem; }
.v2 .tile__text { font-size: .95rem; color: var(--text-muted); }
@media (min-width: 600px) { .v2 .tiles { grid-template-columns: 1fr 1fr; } }

/* 7 · CTA */
.v2 .cta.card { padding: 22px 18px; }
.v2 .cta__kopf { font-size: 1.35rem; font-weight: 700; color: var(--accent); line-height: 1.3; }
.v2 .cta__btn { font-size: 1.05rem; padding: 16px 20px; }

/* 8 · Fakten */
.v2 .facts__nums {
  list-style: none; padding: 0; margin: 10px 0 14px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.v2 .facts__nums li {
  margin: 0; text-align: center; font-size: .8rem; color: var(--text-muted);
  background: rgba(255,255,255,.05); border-radius: 12px; padding: 10px 4px;
}
.v2 .facts__nums strong { display: block; font-size: 1.15rem; color: var(--accent); }

/* 9 · FAQ */
.v2 .faq details { margin-bottom: 10px; padding: 0; }
.v2 .faq summary { cursor: pointer; padding: 14px 18px; list-style: none; }
.v2 .faq summary::-webkit-details-marker { display: none; }
.v2 .faq summary h3 { display: inline; margin: 0; font-size: 1.02rem; }
.v2 .faq summary::after { content: " +"; color: var(--accent); font-weight: 700; }
.v2 .faq details[open] summary::after { content: " –"; }
.v2 .faq details p { margin: 0 18px 16px; }

/* 10 · Weitere Szenen */
.v2 .more { border-top: none; padding-top: 0; }
.v2 .more__cards { list-style: none; padding: 0; display: grid; gap: 10px; margin-bottom: 10px; }
.v2 .more__cards li { margin: 0; }
.v2 .more__card { display: block; text-decoration: none; color: var(--text); font-weight: 600; padding: 14px 18px; }
@media (min-width: 600px) { .v2 .more__cards { grid-template-columns: repeat(3, 1fr); } }

/* v2 · Nachbesserungen 27.10. (Tilo) */
.v2 .ico { flex: none; vertical-align: -3px; }
.v2 .chip, .v2 .timer { display: inline-flex; align-items: center; gap: 6px; }
.v2 .chip .ico { color: var(--accent); }
.v2 .tile { border-top: 3px solid var(--accent); }
/* Geschlossene Karten abgedunkelt, die offene hebt sich ab. */
.v2 details.card:not([open]) { background: #141414; border-color: rgba(224,181,122,.12); }
.v2 details.card:not([open]) .move__text { color: var(--text-muted); }
.v2 details.card[open] { background: #242424; }
.v2 .more__card { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.v2 .more__card .ico { color: var(--accent); }
/* Abstand unten: der feste Knopf darf das Seitenende nicht verdecken. */
@media (max-width: 759px) {
  .v2 { padding-bottom: 40px; }
  .v2 ~ .sc-foot { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}

/* v2 · Handy-Rahmen mit Screenshot (27.10., Tilo): KEIN Scrollen im Rahmen — am Handy
   fängt ein scrollbarer Bereich den Daumen ein. Der Rahmen zeigt den oberen Teil (Lage +
   Frage), blendet nach unten weich aus; Antippen öffnet das ganze Bild. */
.v2 .phone { width: 100%; max-width: 300px; }
.v2 .phone__screen {
  position: relative; display: block; max-height: 540px; overflow: hidden;
  border: 6px solid #2A2A2A; border-radius: 26px; background: #0A0A0A;
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.v2 .phone__screen:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.v2 .phone .phone__screen img { border: 0; border-radius: 0; box-shadow: none; }
.v2 .phone { position: relative; }
/* Symbol außerhalb der Ausblendung, unten rechts; Antippen geht durch auf den Link. */
.v2 .phone__open {
  pointer-events: none;
  position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(10,10,10,.75); color: var(--accent);
}