/* Byteling website — style.css
   Palette mirrors the iOS app's AppTheme.swift (single source of truth per
   DESIGN.md). Pure CSS, no build step, no external fonts. */

:root {
  --bg: #f5f2e8;        /* AppTheme.background 0.96/0.95/0.91 */
  --panel: #fffcf2;     /* AppTheme.softPanel */
  --ink: #24211f;       /* AppTheme.ink */
  --ink-70: rgba(36, 33, 31, 0.72);
  --ink-55: rgba(36, 33, 31, 0.63);  /* 0.55 ergab 3,56:1 auf --bg, unter WCAG AA */
  --ink-border: rgba(36, 33, 31, 0.1);
  --coral: #d45952;     /* AppTheme.coral — nur Flaechen, Rahmen, Akzente */
  --coral-text: #bf4039;/* dieselbe Koralle, dunkel genug fuer Text: 4,68:1 auf --bg */
  --coral-ink: #ffffff;
  --gold: #e8a140;      /* AppTheme.gold */
  --moss: #5e8c63;      /* AppTheme.moss — dekorativ (Aufzaehlungszeichen) */
  --moss-text: #507754; /* dasselbe Moos als Textfarbe: 4,56:1 auf --bg */
  --sky: #5e91b8;       /* AppTheme.sky */
  --radius: 8px;
  --max: 720px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* ---------- Footer ---------- */

footer {
  padding: 28px 20px 40px;
  text-align: center;
  border-top: 1px solid var(--ink-border);
  margin-top: 12px;
}

footer .brand { font-weight: 800; margin-bottom: 6px; }

footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  font-size: 13px;
  margin-bottom: 10px;
}

footer nav a { color: var(--ink-70); }
footer .made { font-size: 12px; color: var(--ink-55); }
/* Markenhinweis zum App-Store-Badge (Apple-Richtlinien: einmal pro Website, dort, wo die Rechtshinweise stehen). */
footer .marks { font-size: 11px; color: var(--ink-55); max-width: 560px; margin: 0 auto 8px; }

a { color: var(--coral-text); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

/* ---------- Presskit page ---------- */

.presskit main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px 20px 48px;
}

.presskit h1 { font-size: 28px; margin-bottom: 4px; }
.presskit .tagline { color: var(--ink-70); margin-top: 0; }

.presskit section {
  background: var(--panel);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.presskit h2 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--moss-text);
  margin: 0 0 12px;
}

.fact-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fact-table td, .fact-table th { padding: 6px 0; border-bottom: 1px solid var(--ink-border); vertical-align: top; }
/* Die Beschriftungsspalte sind Zeilenkoepfe (th scope="row"), damit ein
   Screenreader jeden Wert mit seinem Label vorliest. */
.fact-table th { color: var(--ink-55); width: 38%; font-weight: 600; text-align: left; }

.presskit ul { margin: 0; padding-left: 20px; }
.presskit li { margin-bottom: 6px; }

/* ---------- Legal pages (privacy, terms, imprint) ---------- */
/* Reuse the presskit layout; these rules only add what legal text needs. */

.legal .back { font-size: 13px; margin: 0 0 12px; }
.legal .back a { color: var(--coral-text); }
.legal section p, .legal section li { font-size: 15px; color: var(--ink); }
.legal section p { margin: 0 0 10px; }
.legal section p:last-child { margin-bottom: 0; }
.legal h3 { font-size: 15px; margin: 14px 0 6px; }

/* Visible on purpose: these pages are drafts until a lawyer has reviewed
   them. Remove the element once that has happened. */
.draft-note {
  background: #fff4d6;
  border: 1px dashed var(--gold);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-70);
  margin: 0 0 16px;
}

/* Details only Marcel can fill in. Red so an unfilled one cannot go unnoticed. */
.placeholder {
  background: #fde8e6;
  color: var(--coral-text);
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 600;
}

/* Krisentelefone nach Land (safety/, generiert aus SafetyFilter.crisisLines) */
.helplines { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 12px 0 4px; }
.helplines th, .helplines td { text-align: left; vertical-align: top; padding: 7px 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.helplines th { font-weight: 700; }
@media (max-width: 560px) {
  .helplines, .helplines tr, .helplines td, .helplines th { display: block; }
  .helplines tr:first-child { display: none; }
  .helplines td:first-child { font-weight: 700; padding-top: 12px; border-bottom: none; }
  .helplines td { padding: 2px 0; border-bottom: none; }
}

/* ---------- Sprachumschalter (2026-10-09) ---------- */
/* Oben rechts auf jeder Seite. Startseite und Presskit gibt es als eigene
   deutsche Seiten unter /de/; bei den Rechtstexten springt EN zur englischen
   Fassung derselben Seite (Deutsch bleibt verbindlich). Reine Links, kein
   Skript — funktioniert ohne JavaScript, und Suchmaschinen finden beide. */
body { position: relative; }

.lang-switch {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--panel);
  border: 1px solid var(--ink-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.lang-switch a,
.lang-switch span {
  display: block;
  min-width: 36px;
  padding: 7px 10px;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  color: var(--ink-70);
}

.lang-switch a:hover { color: var(--ink); background: rgba(36, 33, 31, 0.06); }
.lang-switch [aria-current] { background: var(--ink); color: var(--panel); }

/* Die Rechtsseiten beginnen mit „← Byteling“ links oben — der Umschalter
   rechts daneben braucht etwas Luft nach unten, damit nichts überlappt. */
.presskit main { padding-top: 56px; }
/* ---------- Herz in der Fußzeile (2026-10-10) ---------- */
/* Das Herz aus der App (herz.svg aus assets/symbole/herzen) statt des Pflanzen-Emojis. */
.made .heart {
  display: inline-block;
  width: 14px;
  height: auto;
  vertical-align: -1px;
  image-rendering: pixelated;
}

/* ---------- Startseite: ein Handy statt vieler Karten (2026-10-10) ---------- */
/* Marcel: „viel zu überwältigend“. Jetzt: Überschrift, ein Handy mit acht echten
   Bildschirmfotos zum Durchblättern (seit V3, 2026-10-14), der App-Store-Knopf, eine
   Zeile Versprechen.
   Handy: alles untereinander und auf einen Bildschirm, Desktop: Text links,
   Handy rechts. Das Handy wischt ohne Skript (scroll-snap). */
.landing { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.landing footer { margin-top: auto; }

/* Drei Teile: Einleitung, Handy, Knopf. Am Telefon in dieser Reihenfolge
   untereinander (das Handy kommt vor dem Knopf, damit es oben zu sehen ist),
   am Desktop Einleitung und Knopf links, das Handy rechts. */
.hero {
  display: grid;
  grid-template-areas: "intro" "device" "cta";
  justify-items: center;
  gap: 18px;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 52px 16px 28px;
  text-align: center;
}
.hero-intro { grid-area: intro; max-width: 440px; }
.device { grid-area: device; width: 100%; }
.hero-cta { grid-area: cta; max-width: 440px; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss-text);
  margin-bottom: 10px;
}

.hero h1 {
  font-size: clamp(25px, 6.6vw, 40px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

.subline { color: var(--ink-70); font-size: 16px; margin: 0; }

/* Bis zum Launch kein Link: ruhig, nicht klickbar. Beim Launch ersetzt das
   offizielle Badge von Apple diesen Knopf (Kommentar in index.html). */
.cta { margin: 0 0 12px; }
.store-button {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 170px;
  padding: 9px 22px 10px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--panel);
  line-height: 1.15;
  text-align: left;
  text-decoration: none;
}
.store-button small { font-size: 11px; opacity: 0.8; }
.store-button strong { font-size: 20px; }
.store-button.is-soon { cursor: default; }

/* „Bald auch für Android“ — nur Text, kein Logo (V3, 2026-10-14). Google erlaubt sein
   Badge erst, wenn die App dort zu haben ist; dann ersetzt es diese Zeile. */
.also { font-size: 13px; color: var(--ink-70); margin: 0 0 12px; }

/* Vorbereitet für den Launch: die offiziellen Badges von Apple und Google als Bilddatei
   aus website/badges/ (Anleitung in index.html und README.md). Apple verlangt mindestens
   40 px Höhe und ringsum ein Viertel der Höhe Freiraum — daher die 10 px Abstand. */
.store-badge { display: inline-block; margin: 0 10px 10px 0; }
.store-badge img { display: block; height: 40px; width: auto; }

.release { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.promises { font-size: 13px; color: var(--ink-55); margin: 0; }
.promises a { color: var(--ink-70); }

/* Das Handy. Auf dem Telefon so groß, dass Überschrift, Handy und Reiter
   gemeinsam auf den Bildschirm passen; nie breiter als 300 px. */
.device { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.device-row { display: flex; align-items: center; gap: 10px; }

.phone {
  width: min(300px, 64vw, calc((100svh - 330px) / 2.12));
  min-width: 200px;
  padding: 7px;
  background: var(--ink);
  border-radius: 34px;
  box-shadow: 0 18px 36px rgba(36, 33, 31, 0.18);
}

.phone-screen {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 27px;
  background: var(--bg);
  aspect-ratio: 600 / 1233;
}
.phone-screen::-webkit-scrollbar { display: none; }
.phone-screen:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

.phone-screen img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Pfeile nur, wo genug Platz ist — auf dem Telefon wischt man. */
.device-arrow {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--ink-border);
  background: var(--panel);
  color: var(--ink);
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.device-arrow:hover { border-color: var(--ink-55); }

/* Die Reiter sehen aus wie die Leiste in der App: Pixel-Symbol über dem Namen,
   der aktive fett mit einem kleinen Korallen-Strich darunter. Die Symbole kommen
   aus assets/symbole/bedienung (tools/make-website-icons.mjs) und werden als Maske
   in der Textfarbe gezeichnet — wie foregroundStyle in der App. */
.device-tabs {
  display: grid;
  /* Acht Reiter seit V3: am Telefon zwei Reihen zu vier (acht Namen wie „Einrichten“
     passen bei 375 px nicht nebeneinander), ab 560 px eine Reihe. 10 px weiter als
     der Inhalt, auf breiten Bildschirmen höchstens 560 px, mittig. */
  grid-template-columns: repeat(4, 1fr);
  row-gap: 4px;
  width: min(calc(100% + 20px), 560px);
  margin-inline: max(-10px, calc((100% - 560px) / 2));
  padding: 8px 2px 4px;
  background: var(--panel);
  border: 1px solid var(--ink-border);
  border-radius: 18px;
}
.device-tabs a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 2px 0 9px;
  color: var(--ink-70);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.device-tabs a:hover { color: var(--ink); }
.device-tabs a[aria-current] { color: var(--ink); font-weight: 800; }
.device-tabs a[aria-current]::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--coral);
}

.tab-icon {
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.i-zuhause { --icon: url("symbole/zuhause.svg"); }
.i-malen { --icon: url("symbole/malen.svg"); }
.i-herz-voll { --icon: url("symbole/herz-voll.svg"); }
.i-sprechblase { --icon: url("symbole/sprechblase.svg"); }
.i-spielen { --icon: url("symbole/spielen.svg"); }
.i-reisen { --icon: url("symbole/reisen.svg"); }
.i-lupe { --icon: url("symbole/lupe.svg"); }
.i-heft { --icon: url("symbole/heft.svg"); }

@media (min-width: 560px) {
  .device-arrow { display: block; }
  .device-tabs { grid-template-columns: repeat(8, 1fr); }
}

/* Text links, Handy rechts erst ab 1000 px (V3): die acht Reiter brauchen in einer Reihe
   560 px, und daneben muss die Überschrift noch Platz haben. Darunter steht alles
   untereinander wie am Telefon. */
@media (min-width: 1000px) {
  .hero {
    grid-template-areas: "intro device" "cta device";
    grid-template-columns: minmax(0, 420px) minmax(560px, auto);
    grid-template-rows: auto 1fr;
    max-width: 1060px;
    justify-content: center;
    justify-items: start;
    align-items: end;
    column-gap: 48px;
    row-gap: 24px;
    padding-top: 72px;
    text-align: left;
  }
  .hero-cta { align-self: start; }
  .phone { width: min(300px, calc((100vh - 220px) / 2.12)); }
}

/* ---------- Über Byteling: Text und häufige Fragen unter dem Handy (2026-10-19) ---------- */
/* Die Startseite hatte fast keinen Text, und eine Suchmaschine findet nur, was dasteht
   (Marcel: „wenn ein User nach Spielen sucht, die in unsere Richtung gehen, soll Google es
   vorschlagen“). Der erste Bildschirm bleibt das Handy; darunter eine ruhige Spalte wie im
   Presskit, die Fragen klappen ohne Skript auf (<details>). */
.about {
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 4px 20px 36px;
}
.about h2 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--moss-text);
  margin: 28px 0 10px;
}
.about > p { margin: 0 0 12px; }
.faq {
  background: var(--panel);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius);
}
.faq details + details { border-top: 1px solid var(--ink-border); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--coral-text); font-weight: 800; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: 3px solid var(--coral); outline-offset: -3px; border-radius: var(--radius); }
.faq details p { margin: 0; padding: 0 18px 14px; font-size: 15px; color: var(--ink-70); }
.about-more { font-size: 14px; color: var(--ink-70); margin-top: 16px; }