/* The landing site's shared stylesheet: the tokens, the header with its tabs, the footer, and the
   pieces the Start, Alpha and Regeln pages are built from. Every page in web/ except 404.html
   loads it.

   A file rather than a block copied into each page, which is how this site did it while it was one
   page and four legal texts: the header and footer are now on nine pages, and nine hand-kept copies
   of the same rules drift. Nothing goes stale either: firebase.json serves everything here with
   no-cache, so a browser asks for this file again on every visit.

   The token values are still COPIED from app/src/theme.ts — `glassDark` and the `text` scale —
   rather than chosen here. There is no build step shared between a React Native app and these
   hand-written pages, so the honest arrangement is one block, copied, saying where it came from. If
   a token changes in theme.ts it has to change here too, and in 404.html, which keeps its own copy.
   See docs/UI-TODO.md item 18.

   The legal pages keep an inline <style> for their own text (headings, lists, tables), which comes
   after this file and so wins where the two overlap. Everything below that styles an element
   rather than a class is scoped to `.page`, the <main> of the Start, Alpha and Regeln pages, so it
   never reaches a legal text. */

:root {
  /* glassDark */
  --bg:        #000000;
  --card:      rgba(255,255,255,0.05);
  --card-line: rgba(255,255,255,0.08);
  --text:      #ffffff;               /* textPrimary   */
  --muted:     rgba(255,255,255,0.6); /* textSecondary -- 7.4:1 on black */
  --dim:       rgba(255,255,255,0.47);/* textTertiary  -- 4.8:1, the floor for 13px copy */
  --accent:    #ef5139;               /* accent — the logo's red, lifted for contrast */
  --green:     #30d158;
  --amber:     #ffb340;
  --popular:   #ffd60a;
  /* The primary button inverts the page — white on black — which is what the app's own
     "Mit Google anmelden" looks like on the screen this page sends people to. */
  --solid:     #ffffff;
  --on-solid:  #000000;
  --ghost-line:rgba(255,255,255,0.18);

  /* radius */
  --r-md: 14px;
  --r-lg: 16px;

  /* One width for the header, every page's content and the footer, so the logo, the tabs and the
     first line of text start on the same edge whichever tab is open. It was 560 on the start page
     and 680 on the legal texts; switching between them made the whole header jump. */
  --page: 680px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* No radial glow. The app has no gradient anywhere — it is flat black with hairline borders and one
   accent, and the Welcome screen these pages lead to is a plain page with the logo on it. */
body {
  min-height: 100dvh;
  display: flex; flex-direction: column;
}

/* Every jump to an anchor — a legal text's table of contents, /#fragen — stops below the pinned
   header rather than under it. */
[id] { scroll-margin-top: 72px; }

/* --- Kopfzeile und Tabs ------------------------------------------------ */

/* One row on every screen: the logo, then the tabs. On a phone the tabs scroll sideways rather than
   wrap to a second row, so the header stays one 52px strip that can stay pinned to the top. Solid
   black under the blur, at 88%, so text scrolling under it never shows through enough to read. */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: rgba(0,0,0,0.88);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--card-line);
}
.site-header .bar {
  max-width: var(--page); margin: 0 auto; padding: 0 12px 0 22px;
  display: flex; align-items: center; gap: 10px;
  min-height: 52px;
}

.brand {
  display: flex; align-items: center; gap: 10px; flex: none;
  color: var(--text); text-decoration: none;
  /* A 44px tap target around a 28px mark. */
  min-height: 44px; padding-right: 4px;
}
.brand img { width: 28px; height: 28px; border-radius: 8px; display: block; }
/* The wordmark only where there is room for it next to every tab. On a phone the mark is the way
   home, and so is the first tab. */
.brand span { display: none; font-size: 17px; font-weight: 600; letter-spacing: -0.2px; }
@media (min-width: 700px) { .brand span { display: inline; } }

/* The app's own tabs (IconTabs in app/src/components/ui/Tabs.tsx): the chosen one in textPrimary
   with a 1.5px underline in the same colour, the others in textTertiary, a hairline under the
   strip — here the header's own border. Words rather than icons, because a page has no content
   directly under the strip to say what an icon means. */
.tabs {
  display: flex; flex: 1; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* The strip fades at its right edge when it scrolls, so a cut-off tab reads as "more this way"
     rather than as a word broken in half. The padding keeps the last tab clear of the fade once
     scrolled to the end. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  padding-right: 28px;
}
.tabs::-webkit-scrollbar { display: none; }
/* Pushed to the right where they all fit. On a phone the strip fills the row and this does
   nothing. */
.tabs > :first-child { margin-left: auto; }

.tabs a {
  position: relative; flex: none;
  display: flex; align-items: center;
  min-height: 52px; padding: 0 10px;
  font-size: 14px; font-weight: 600; letter-spacing: -0.1px;
  color: var(--dim); text-decoration: none; white-space: nowrap;
  transition: color .12s ease;
}
.tabs a:hover { color: var(--muted); }
.tabs a[aria-current="page"] { color: var(--text); }
/* Sits on the header's bottom border, as the app's underline sits on its strip's hairline. */
.tabs a[aria-current="page"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 1.5px; background: var(--text);
}
.tabs a:focus-visible { outline: 2px solid var(--text); outline-offset: -6px; border-radius: 10px; }

@media (min-width: 700px) {
  .tabs { -webkit-mask-image: none; mask-image: none; padding-right: 0; }
}

/* --- Fusszeile -------------------------------------------------------- */

.site-footer {
  max-width: var(--page); width: 100%; margin: 0 auto;
  padding: 26px 22px 34px; text-align: center;
  font-size: 13px; line-height: 1.4; color: var(--dim);
  border-top: 1px solid var(--card-line);
}
.site-footer nav { margin-bottom: 14px; }
/* Padded to a 44px tap target; the text itself stays 13px. */
.site-footer a {
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  display: inline-block; padding: 14px 4px; margin: -14px 0;
}
.site-footer a:hover { color: var(--text); }
.site-footer .sep { opacity: .4; margin: 0 6px; }

/* The Instagram account, @kanti_notes: on the start page under the buttons, and here on every page.
   A plain link out — no embed, no follow button, nothing loaded from Meta — so the CSP, the cookie
   banner and the privacy policy have nothing to say about it. A new tab, like every link that leaves
   the site. Drawn as a pill like the alpha one, in the same hairline, so it reads as a thing to
   tap. */
.social {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 15px;
  border: 1px solid var(--ghost-line); border-radius: 999px;
  color: var(--text); text-decoration: none;
  font-size: 14px; font-weight: 600;
  transition: border-color .12s ease;
}
.social:hover { border-color: var(--muted); }
.social svg { width: 18px; height: 18px; flex: none; display: block; }
.social .handle { color: var(--dim); font-weight: 500; }
/* Undoes what `.site-footer a` gives a text link: the underline, and the padding that makes a 13px
   word a 44px target, which the pill already is. */
.site-footer .social {
  display: inline-flex; margin: 0 0 18px; padding: 8px 15px;
  color: var(--text); text-decoration: none; font-size: 13px;
}

/* --- Seiten: Start, Alpha, Regeln ------------------------------------- */

.page {
  flex: 1; width: 100%; max-width: var(--page);
  margin: 0 auto; padding: 44px 22px 56px;
  display: flex; flex-direction: column;
}

/* The app icon itself, not a stand-in. The glow is keyed off the logo's own red, or the tile floats
   in a halo that belongs to a different brand. */
.mark {
  width: 62px; height: 62px;
  border-radius: 16px;
  display: block;
  margin-bottom: 22px;
  box-shadow: 0 8px 28px rgba(236,48,19,0.32);
}

/* `hero` — 32/700/-1, the step the app added for exactly this: the one screen whose job is to say
   the app's name. Welcome uses it too. */
.page h1 {
  font-size: 32px; font-weight: 700;
  line-height: 1.1; letter-spacing: -1px;
  margin: 0 0 12px;
}
/* The other pages open with `display` (28/700/-0.6), as the legal texts and 404.html do: a page
   title, not the product's name. */
.page h1.title { font-size: 28px; letter-spacing: -0.6px; line-height: 1.2; }

/* `heading` (17). One step above body, which is what a lede is. Held to a line length that reads,
   now that the page is as wide as the legal texts. */
.lede {
  font-size: 17px; line-height: 1.5; max-width: 34em;
  color: var(--muted); margin: 0 0 30px;
}

/* --- Knöpfe ----------------------------------------------------------- */

.actions { display: flex; flex-direction: column; gap: 11px; max-width: 440px; }

/* 17/600 and radius 14, which is what the app's own buttons are — `heading` on `radius.md`. */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 15px 20px; border-radius: var(--r-md);
  font-size: 17px; font-weight: 600; letter-spacing: -0.2px;
  text-decoration: none; border: 1px solid transparent;
  cursor: pointer; text-align: center;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(0.985); }
.btn-primary { background: var(--solid); color: var(--on-solid); }
.btn-ghost   { background: transparent; color: var(--text); border-color: var(--ghost-line); }
.btn[data-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn svg { width: 19px; height: 19px; flex: none; }
/* `caption` (12) and `bodySm` (13). */
.btn small { display: block; font-size: 12px; font-weight: 500; opacity: .75; margin-top: 2px; }

.note {
  font-size: 13px; line-height: 1.4; max-width: 440px;
  color: var(--dim); margin: 16px 2px 0;
}
/* "Closed Alpha" broke over two lines at the end of the sentence. */
.note a { white-space: nowrap; }
.page > .social { align-self: flex-start; margin-top: 22px; }

/* --- Funktionen -------------------------------------------------------- */

.features {
  margin: 0; padding: 20px; list-style: none;
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--r-lg); display: grid; gap: 16px;
}
.features li { display: flex; gap: 14px; align-items: flex-start; }

/* The app draws a feature row as a 40px rounded square holding the icon, tinted with that feature's
   own accent at 12% — see `featureIcon` and `tint()` in the app. Each row carries its colour on the
   <li> so the square and the glyph cannot drift apart. */
.features .ico {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--ico);
  /* Two declarations, and the first is the point: color-mix() is Chrome 111 / Safari 16.2, and a
     phone older than that would drop the rule entirely and leave the glyph floating with no square
     behind it. The neutral wash degrades to a grey tile instead. */
  background: rgba(255,255,255,0.06);
  background: color-mix(in srgb, var(--ico) 12%, transparent);
}
.features .ico svg { width: 20px; height: 20px; display: block; }

/* `body` (15) with the weight the step does not carry, then `bodySm` (13) — the same pairing the
   app's Welcome uses for exactly these two lines. */
.features b { display: block; font-weight: 600; font-size: 15px; line-height: 1.4; }
.features span { color: var(--dim); font-size: 13px; line-height: 1.4; }

/* --- Abschnitte -------------------------------------------------------- */

/* Everything under the hero is a section with the same three parts the app uses for a group: the
   small all-caps rule, a heading, then the content. */
.page section { margin-top: 56px; }

/* `label` (11/600/0.5), uppercased by the caller — the rule the app draws over a group. */
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--dim); margin: 0 0 8px;
}
/* `title` (22/700/-0.4). */
.page h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.2; margin: 0 0 10px; }
/* `heading` (17/600/-0.2). */
.page h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.3; margin: 0 0 12px; }
.intro { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 0 0 20px; max-width: 38em; }

.card {
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--r-lg); padding: 20px;
}

/* The start page's link to the alpha. A dot in the app's own status colours: green while the
   sign-up is open, amber while it is not. */
.pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 6px 13px; margin: 0 0 16px;
  border: 1px solid var(--ghost-line); border-radius: 999px;
  color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 600;
}
.pill:hover { border-color: var(--muted); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }
.pill[data-open="true"] .dot { background: var(--green); }

/* Numbered steps. The number sits in a hairline circle rather than a filled one: the filled white
   shape on these pages means "the button to press". */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 16px; }
.steps li { counter-increment: step; display: flex; gap: 14px; align-items: flex-start; }
.steps li::before {
  content: counter(step);
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--ghost-line);
  font-size: 13px; font-weight: 600; color: var(--text);
}
.steps b { display: block; font-weight: 600; font-size: 15px; line-height: 1.4; }
.steps span { color: var(--dim); font-size: 13px; line-height: 1.4; }

.checks { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.checks svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--green); }
.checks.no svg { color: var(--accent); }

.fine { font-size: 13px; line-height: 1.4; color: var(--dim); margin: 14px 2px 0; }

/* --- Weiter: Karten, die auf einen anderen Tab führen ------------------ */

/* The whole card is the link. Same surface as every other card, with an arrow that says it goes
   somewhere — the app's list rows end in a chevron for the same reason. */
.links { display: grid; gap: 10px; }
@media (min-width: 520px) { .links { grid-template-columns: 1fr 1fr; } }
.link-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--card-line);
  color: var(--text); text-decoration: none;
  transition: border-color .12s ease;
}
.link-card:hover { border-color: var(--ghost-line); }
.link-card .eyebrow { margin: 0; display: flex; align-items: center; gap: 8px; }
.link-card .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.link-card b { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.3; }
.link-card .desc { font-size: 13px; line-height: 1.4; color: var(--dim); }
.link-card .go { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.link-card:hover .go { color: var(--text); }

/* --- Sprache, auf den Rechtstexten --------------------------------------- */

/* The switch to the same text in the other language, above the title. A pill rather than a bare
   word, so it reads as a control and not as part of the text. */
.lang-row { display: flex; justify-content: flex-end; margin: 0 0 14px; }
.lang {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 6px 13px;
  border: 1px solid var(--ghost-line); border-radius: 999px;
  color: var(--muted); text-decoration: none;
  font-size: 13px; font-weight: 600;
}
.lang:hover { color: var(--text); border-color: var(--muted); }
.lang svg { width: 15px; height: 15px; display: block; }

/* --- Alpha ------------------------------------------------------------- */

/* The one card with a coloured edge, because it is the one thing on the site with a deadline. Same
   fallback pattern as .features .ico: hairline first, tinted where supported. */
.alpha {
  border-color: rgba(255,255,255,0.14);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.alpha .steps { margin-bottom: 24px; }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 22px; }
.fact {
  padding: 14px 12px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.04); border: 1px solid var(--card-line);
}
/* `title` for the figure, `caption` under it. */
.fact b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.1; }
.fact span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.3; color: var(--dim); }

/* --- Regeln ------------------------------------------------------------ */

.rules { display: grid; gap: 10px; }
.rules .card { padding: 18px 20px; }
.rules .checks { margin: 0; }
.rules .eyebrow { margin-bottom: 12px; }
@media (min-width: 520px) { .rules { grid-template-columns: 1fr 1fr; } }

/* Melden, löschen, blockieren: the feature rows' shape, without the card, as a plain list. */
.tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.tools li { display: flex; gap: 14px; align-items: flex-start; }
.tools .ico {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-items: center; color: var(--ico);
  background: rgba(255,255,255,0.06);
  background: color-mix(in srgb, var(--ico) 12%, transparent);
}
.tools .ico svg { width: 20px; height: 20px; display: block; }
.tools b { display: block; font-weight: 600; font-size: 15px; line-height: 1.4; }
.tools span { color: var(--muted); font-size: 15px; line-height: 1.5; }

/* --- Häufige Fragen ---------------------------------------------------- */

/* <details>, so every answer works with no script and is found by the browser's own search. */
.faq { border-top: 1px solid var(--card-line); }
.faq details { border-bottom: 1px solid var(--card-line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 15px 32px 15px 0; min-height: 44px;
  font-size: 15px; font-weight: 600; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 13px;
  font-size: 20px; font-weight: 400; line-height: 1; color: var(--dim);
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: -4px 0 16px; font-size: 15px; line-height: 1.5; color: var(--muted); }

.page a:not(.btn):not(.pill):not(.link-card):not(.social) { color: var(--text); text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }