/*
  site.css
  Gestaltung von getyomble.com

  ─── Dieselbe Sprache wie App und Rechtstexte ──────────────────────

  Die Farbmarken sind identisch mit `legal.css` und mit `Theme` im
  iOS-Projekt. Wer von hier zur Datenschutzerklärung auf yomble.app
  klickt, soll nicht das Gefühl haben, die Firma gewechselt zu haben.

  ─── Warum durchgehend dunkel ──────────────────────────────────────

  Kein `prefers-color-scheme`. Die App ist dunkel, die Rechtstexte sind
  dunkel; eine Marketingseite, die je nach Systemeinstellung anders
  aussieht, wäre die einzige Stelle, an der die Marke schwankt.

  ─── Wo hier anders entschieden wird als bei den Rechtstexten ──────

  Dort trägt Bricolage Grotesque nur Überschriften, weil Kleingedrucktes
  lang gelesen wird. Hier gibt es kein Kleingedrucktes: Die Abschnitte
  sind kurz, und die Schrift darf mehr Raum nehmen.
*/

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/BricolageGrotesque-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/fonts/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #0F141A;
  --slate: #1A222B;
  --slate-raised: #232D38;
  --signal: #F2A33C;
  --trace: #8B7CFF;
  --found: #4ED9A4;
  --paper: #F3EFE7;
  --dim: #8C97A3;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --width: 62rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--signal); text-underline-offset: 3px; }

/* ── Sprungmarke für die Tastatur ────────────────────────────────── */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  font-size: 0.9rem;
  z-index: 20;
}
.skip:focus { left: 0; }

/* ── Kopfzeile ───────────────────────────────────────────────────── */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(15, 20, 26, 0.86);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.top .inner {
  max-width: var(--width);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.03em;
  color: var(--paper);
  text-decoration: none;
  margin-right: auto;
}
.wordmark::after { content: "."; color: var(--signal); }

.top nav {
  display: flex;
  gap: 20px;
  font-size: 0.92rem;
}
.top nav a { color: var(--dim); text-decoration: none; }
.top nav a:hover { color: var(--paper); }

@media (max-width: 44rem) {
  .top nav { display: none; }
}

/* ── Sprachumschalter ────────────────────────────────────────────── */

.langbar { display: flex; gap: 6px; }
.langbar button {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--dim);
  padding: 5px 11px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.langbar button:hover { color: var(--paper); }
.langbar button[aria-pressed="true"] {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
  font-weight: 600;
}
.langbar button:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .langbar button { transition: none; }
}

/*
  ─── Warum es drei Regeln braucht ──────────────────────────────────

  `display: block` ist für die großen Abschnitte richtig. In der
  Kopfleiste stehen aber **Verweise** mit `data-lang`, und aus denen
  macht `block` breite Blöcke, die sich in der Flex-Reihe überlagern.
  Getroffen wurde dann nur der oberste — auf Englisch zufällig der
  richtige, auf Deutsch der darüberliegende englische.

  Ein erster Versuch mit `revert-layer` half nicht: Ohne
  Kaskadenschichten hat es keine sinnvolle Wirkung. Hier steht deshalb
  ausdrücklich, was gelten soll.
*/
[data-lang] { display: none; }
[data-lang].active { display: block; }

/* Verweise in Kopfleiste und Fußzeile bleiben inline. Die Absätze in
   der Fußzeile — der Markenhinweis — bleiben Blöcke; sie sind keine
   Verweise und fallen unter die Regel darüber. */
.top nav a[data-lang].active,
footer a[data-lang].active { display: inline; }

/* ── Abschnitte ──────────────────────────────────────────────────── */

section.band {
  padding: 5.5rem 24px;
  border-top: 1px solid var(--line);
  /*
    Die Kopfleiste klebt oben und ist rund 72 Punkte hoch. Ohne diesen
    Abstand verschwände die Überschrift eines angesprungenen Abschnitts
    darunter.
  */
  scroll-margin-top: 72px;
}
section.band:first-of-type { border-top: none; }

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

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 0.9em;
}

/*
  ─── Warum `text-wrap` und kein `<br>` ─────────────────────────────

  Im Titelbereich stand `A message that opens<br>only at one place.`
  Der harte Umbruch legte die zweite Zeile fest — die **erste** war
  damit aber nicht kurz genug: Sie brach ein zweites Mal, und „opens"
  stand allein. Drei Zeilen, eine davon ein Wort.

  Ein `<br>` gilt in jeder Breite gleich. Die Überschrift steht hier in
  einer Rasterspalte, deren Breite sich mit dem Fenster ändert — ein
  fester Umbruch kann darin nur an einer einzigen Fensterbreite richtig
  sitzen.

  `balance` verteilt die Zeilen einer Überschrift gleichmäßig, statt die
  erste voll zu füllen und den Rest hängen zu lassen. Browser ohne
  Unterstützung brechen wie bisher; nichts geht dadurch kaputt.
*/
h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1.03;
  letter-spacing: -0.04em;
  margin: 0 0 0.4em;
  text-wrap: balance;
}

h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.4vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.35em;
  text-wrap: balance;
}

/*
  ─── Warum der Vorspann breiter läuft als 34rem ────────────────────

  Bei 34rem brach „No account, no sign-up, no address book. All you send
  is a link." nach dem „a" um, und „link." stand allein. Der Satz hat 64
  Zeichen — er passt in eine Zeile, nur nicht in diese Breite.

  46rem entspricht dem Maß, das die Fußzeile für den Markenhinweis
  verwendet, und liegt weiterhin deutlich unter den 62rem des Satzes.
  Die kurzen Vorspänne stehen damit einzeilig, die langen brechen wie
  bisher — nur an besseren Stellen.

  ─── Warum `balance` und nicht `pretty` ────────────────────────────

  `pretty` verhindert nur die Waise auf der letzten Zeile. Vorspänne
  sind zwei bis drei Zeilen kurz; da ist eine gleichmäßige Verteilung
  das bessere Bild. `pretty` bleibt dem eigentlichen Fließtext
  darunter vorbehalten.
*/
.lead {
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  color: var(--dim);
  max-width: 46rem;
  margin: 0 0 2em;
  text-wrap: balance;
}

.card p,
.claims p,
.row p,
.tier li,
details p { text-wrap: pretty; }

p { margin: 0 0 1em; }
p.tight { margin-bottom: 0; }

/* ── Titelbereich ────────────────────────────────────────────────── */

.hero {
  padding-top: 5rem;
  padding-bottom: 4rem;
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 52rem) {
  .hero .wrap { grid-template-columns: 1fr; }
}

/*
  Ein Schimmer hinter dem Gerät, damit es nicht auf schwarzem Nichts
  schwebt. Bewusst schwach: Der Marker in der App ist das Leuchtende,
  nicht der Hintergrund.
*/
.hero-art {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-art::before {
  content: "";
  position: absolute;
  inset: 8% 12%;
  background: radial-gradient(closest-side, rgba(242, 163, 60, 0.22), transparent 70%);
  filter: blur(28px);
  z-index: -1;
}
.hero-art img {
  max-height: 34rem;
  width: auto;
  margin: 0 auto;
}

/* ── Knöpfe ──────────────────────────────────────────────────────── */

.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/*
  ─── Warum beide Abzeichen dieselbe Höhe haben ─────────────────────

  Google verlangt, dass das Play-Abzeichen neben anderen
  Store-Abzeichen **gleich groß oder größer** ist. Gemessen wird an der
  sichtbaren Marke.

  Hier stand kurzzeitig 60 zu 52 Punkte, unter der Annahme, Googles SVG
  bringe Freiraum mit, den Apples Datei nicht hat. **Nachgemessen: beide
  Dateien haben keinen transparenten Rand** — das Play-Abzeichen war
  dadurch schlicht größer.

  Gleiche Höhe erfüllt die Vorgabe („gleich groß oder größer") und sieht
  richtig aus. Die Breiten unterscheiden sich, weil die
  Seitenverhältnisse verschieden sind: Apple 2,99 : 1, Google 3,375 : 1.

  Verändert wird an beiden nichts — keine Farbe, kein Zuschnitt, keine
  Ecken. Deshalb liegen sie als gelieferte SVG-Dateien vor und werden
  nicht nachgebaut.
*/
.badge img { height: 52px; width: auto; }

.button {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.98rem;
}
.button.primary { background: var(--signal); color: var(--ink); }
.button.quiet {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line-strong);
}
.button:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* ── Karten ──────────────────────────────────────────────────────── */

/*
  ─── Warum vier feste Spalten ──────────────────────────────────────

  `repeat(auto-fit, minmax(15rem, 1fr))` ergab bei vier Karten und 62rem
  Innenbreite drei nebeneinander und eine allein darunter — dieselbe
  Schieflage wie zuvor bei den Preisen.

  Vier Schritte sind eine Abfolge. Sie gehören in eine Reihe, nicht in
  ein Quadrat: Nur so liest man 01 bis 04 in einem Zug. Seit die
  Bildschirmfotos heraus sind, tragen die Karten nur noch drei bis vier
  Zeilen Text und passen in eine Viertelspalte.
*/
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 2.6rem;
}

/* Zwei mal zwei, solange die Reihenfolge noch links-oben nach
   rechts-unten läuft. */
@media (max-width: 58rem) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 34rem) {
  .cards { grid-template-columns: 1fr; }
}

.card {
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.5rem;
}
.card p { color: var(--dim); margin: 0; font-size: 0.96rem; }

/* Die Zahl der Schritte in Monospace — dieselbe Rolle wie die
   Datenzeilen in der App. */
.step-number {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--signal);
  letter-spacing: 0.09em;
  margin-bottom: 0.9em;
}

/*
  ─── Zurzeit ungenutzt ─────────────────────────────────────────────

  Die vier Schrittkarten trugen bis zum 27. August je ein
  Bildschirmfoto. Bei einer Kartenbreite von rund 15rem war darauf
  nichts mehr zu lesen, und die Karten wurden so hoch, dass Überschrift
  und Erklärung erst nach längerem Blättern kamen. Die Regel bleibt
  stehen, falls die Bilder an anderer Stelle zurückkehren.

  ─── Warum hier kein festes Seitenverhältnis steht ─────────────────

  Vorher: `aspect-ratio: 9 / 16` mit `object-fit: cover`. Ein iPhone-
  Bildschirmfoto ist aber etwa 9 : 19,5 — der Rahmen war also zu kurz,
  und `cover` schnitt oben und unten weg. Sichtbar wurde das an der
  angeschnittenen Statusleiste.

  Ohne Vorgabe behält das Bild seine eigenen Maße. Die drei Karten
  bleiben gleich hoch, solange die drei Bildschirmfotos es sind — und
  das sind sie, weil sie vom selben Gerät stammen.
*/
.shot {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  margin-bottom: 1.2rem;
  background: var(--slate-raised);
}

/* ── Ausführliche Einzelheiten ───────────────────────────────────── */

/*
  ─── Warum kein drittes Kartenraster ───────────────────────────────

  Über diesem Abschnitt stehen schon zwei Raster: „So geht es" und
  „Was Leute hinterlassen". Ein drittes gleich darunter liest sich wie
  eine Wiederholung, auch wenn der Inhalt ein anderer ist.

  Diese Abschnitte tragen längere Texte — zwei bis drei Sätze, die
  erklären, nicht anreißen. Untereinander mit Trennlinie bekommen sie
  die Breite, die Fließtext braucht, und die Überschrift links gibt der
  Reihe einen Anker fürs Auge.

  ─── Warum hier keine Bilder mehr stehen ───────────────────────────

  Bis zum 15. September standen hier drei Bild-Text-Reihen mit
  Platzhaltern für 4 : 3-Ausschnitte aus Bildschirmfotos. Ein
  iPhone-Bild ist aber etwa 9 : 19,5 — jeder 4 : 3-Ausschnitt daraus
  wirft mehr weg, als er zeigt, und ist mühsam herzustellen. Deshalb
  lagen die Platzhalter monatelang.

  Die Texte tragen sich selbst. Sollen später doch Bilder dazu, dann
  im Format des Geräts, nicht in einem, das dagegen arbeitet.
*/
.details {
  margin-top: 2.4rem;
  border-top: 1px solid var(--line);
}

.details > div {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 2.4rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--line);
}

.details h3 {
  margin: 0;
  text-wrap: balance;
}

.details p {
  margin: 0;
  color: var(--dim);
  max-width: 34rem;
}

@media (max-width: 46rem) {
  .details > div {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 1.4rem 0;
  }
}

/* ── Drei Bildschirmfotos ────────────────────────────────────────── */

/*
  ─── Warum genau drei ──────────────────────────────────────────────

  Sie erzählen zusammen, was die App tut: wo etwas liegt, wie weit es
  noch ist, und was am Ende dasteht. Ein viertes zeigt eine Funktion;
  diese drei zeigen einen Vorgang.

  ─── Warum im Format des Geräts ────────────────────────────────────

  Vorher standen hier Platzhalter für 4 : 3-Ausschnitte. Ein
  iPhone-Bildschirmfoto ist 9 : 19,5 — jeder Ausschnitt daraus wirft
  weg, was die App ausmacht: dass alles auf einem Bildschirm Platz hat.

  Hochkant nebeneinander ist die Reihe schmal genug, dass drei davon in
  eine Zeile passen, ohne dass etwas beschnitten wird.
*/
.screens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  margin-top: 3.4rem;
  max-width: 46rem;
}

.screens figure { margin: 0; }

.screens img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--slate);
}

.screens figcaption {
  margin-top: 0.9rem;
  font-size: 0.86rem;
  color: var(--dim);
  text-wrap: balance;
}

/*
  Unter 40rem passen drei nebeneinander nicht mehr — dann wäre jedes so
  schmal, dass die Schrift darin verschwindet. Zwei Spalten, das dritte
  Bild rutscht in die zweite Reihe.
*/
@media (max-width: 40rem) {
  .screens { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
}

/* ── Wechselnde Bild-Text-Reihen ─────────────────────────────────── */

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.4rem;
  align-items: center;
  margin-top: 3.4rem;
}
.row:first-of-type { margin-top: 0; }
.row.flip > *:first-child { order: 2; }

@media (max-width: 52rem) {
  .row { grid-template-columns: 1fr; gap: 1.8rem; }
  .row.flip > *:first-child { order: 0; }
}

.row img {
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--slate);
}

/* ── Datenschutz-Streifen ────────────────────────────────────────── */

.privacy-band { background: var(--slate); }

.claims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.6rem;
  margin-top: 2.4rem;
}
.claims h3 { color: var(--found); }
.claims p { color: var(--dim); font-size: 0.95rem; margin: 0; }

/* ── Preise ──────────────────────────────────────────────────────── */

/*
  ─── Warum hier zwei feste Spalten stehen ──────────────────────────

  Vorher: `repeat(auto-fit, minmax(17rem, 1fr))`. Bei vier Kästen und
  62rem Innenbreite passten drei nebeneinander — der vierte fiel allein
  in eine zweite Zeile und wirkte wie ein Nachtrag.

  `repeat(2, 1fr)` ergibt ein 2 × 2. Oben die Zeile mit dem laufenden
  Preis, unten die beiden Einmalzahlungen.

  `align-items: start` ist entfallen: In einem Raster mit zwei Zeilen
  fällt es auf, wenn nebeneinanderstehende Kästen verschieden hoch
  enden. Mit dem voreingestellten `stretch` sind sie je Zeile gleich
  hoch; der Inhalt bleibt oben, weil nichts ihn zentriert.
*/
.tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 2.6rem;
}

/* Derselbe Umbruchpunkt wie bei der Kopfleiste. Darunter stehen die
   vier Kästen untereinander. */
@media (max-width: 44rem) {
  .tiers { grid-template-columns: 1fr; }
}

.tier {
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.8rem;
}
.tier.highlight { border-color: rgba(242, 163, 60, 0.45); }

.price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.03em;
  margin: 0.2em 0 0.1em;
}
.price small {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  display: block;
  font-weight: 400;
  margin-top: 0.5em;
}

/*
  Der Hinweis, dass nichts weiterläuft, ist bei einer Einmalzahlung das
  Kaufargument — und stand bisher in derselben gedämpften Farbe wie die
  Zeitangabe „im Jahr" daneben.

  Space Mono liegt nur in einem Schnitt vor; `700` lässt der Browser
  daher künstlich fetten. Bei dieser Größe trägt ohnehin die Farbe.
*/
.price small strong {
  color: var(--signal);
  font-weight: 700;
}

.tier ul { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.tier li {
  padding-left: 1.6em;
  position: relative;
  margin: 0.5em 0;
  color: var(--dim);
  font-size: 0.96rem;
}
.tier li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--signal);
}
.tier li.off { opacity: 0.45; }
.tier li.off::before { content: "·"; color: var(--dim); }

/* ── Fragen ──────────────────────────────────────────────────────── */

details {
  border-top: 1px solid var(--line);
  padding: 1.2rem 0;
}
details:last-of-type { border-bottom: 1px solid var(--line); }

summary {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "+";
  color: var(--signal);
  font-family: var(--mono);
  font-size: 1rem;
}
details[open] summary::before { content: "–"; }
summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

details p {
  color: var(--dim);
  margin: 0.9em 0 0 1.6em;
  font-size: 0.97rem;
}

/* ── Abschluss ───────────────────────────────────────────────────── */

.closing { text-align: center; }
.closing .lead { margin-left: auto; margin-right: auto; }
.closing .actions { justify-content: center; }

/* ── Fußzeile ────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--line);
  padding: 2.6rem 24px 3.4rem;
  color: var(--dim);
  font-size: 0.88rem;
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  align-items: center;
}
footer a { color: var(--dim); text-decoration: none; }
footer a:hover { color: var(--paper); }
footer .spacer { margin-left: auto; }

.legal-note {
  margin-top: 1.6rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--dim);
  opacity: 0.75;
  max-width: 46rem;
}