/*
  press.css
  Zusätze für die Presseseite von getyomble.com

  ─── Warum eine eigene Datei ───────────────────────────────────────

  `site.css` trägt die Marke: Farben, Schriften, Abschnitte, Karten,
  Preise. Alles davon gilt hier weiter, und diese Datei fügt nur hinzu,
  was es sonst nirgends gibt — Faktenlisten, Bildschirmfoto-Reihen,
  Textblöcke zum Kopieren.

  Getrennt, damit eine Änderung an der Presseseite die Startseite nicht
  anfassen kann. Sie wird **nach** `site.css` geladen und setzt nichts
  außer Kraft.
*/

/* ── Sprungmarken unter der Überschrift ──────────────────────────── */

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2rem 0 0;
}
.jump a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 13px;
}
.jump a:hover { color: var(--paper); border-color: var(--paper); }
.jump a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* ── Der Eintrag zur eigenen Seite in der Fußzeile ───────────────── */

/*
  Die Fußzeile ist auf allen Seiten gleich, also steht „Presse" auch
  hier. `aria-current="page"` sagt der Sprachausgabe, dass der Verweis
  ins Leere zeigt — für Sehende braucht es dasselbe: heller als die
  Nachbarn, und kein Zeigefinger, der eine Bewegung verspricht.

  Steht in dieser Datei, weil der Fall nur auf dieser Seite auftritt.
*/
footer a[aria-current="page"] {
  color: var(--paper);
  cursor: default;
}

/* ── Kleingedruckte Zeile ────────────────────────────────────────── */

/*
  `.note` gibt es auf der Startseite nicht — nur auf der Ausweichseite,
  und die trägt ihr eigenes Stylesheet. Deshalb hier.
*/
.note {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 1.4rem;
}

/* ── Faktenliste ─────────────────────────────────────────────────── */

/*
  Eine Beschreibungsliste, kein Raster aus <div>. Wer die Seite mit
  einer Sprachausgabe liest, bekommt so die Zuordnung von Begriff und
  Wert mitgeliefert; ein Raster wäre eine Folge zusammenhangloser Zeilen.
*/
.facts {
  margin: 2.4rem 0 0;
  border-top: 1px solid var(--line);
}
.facts > div {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 1.4rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.facts dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  padding-top: 0.25em;
}
.facts dd { margin: 0; }

@media (max-width: 40rem) {
  .facts > div { grid-template-columns: 1fr; gap: 0.35rem; }
}

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

/*
  ─── Warum 15rem und nicht 11 ──────────────────────────────────────

  Mit 11rem passten alle fünf Bildschirmfotos in eine Reihe. Das war
  die Absicht — nur ist ein iPhone-Bildschirmfoto bei dieser Breite
  etwa daumengroß, und auf einer Presseseite ist es Material, kein
  Ornament: Eine Redaktion muss erkennen, was sie herunterlädt.

  Mit 15rem passen drei bis vier in eine Reihe, der Rest bricht um.
  Lieber zwei Reihen, in denen man etwas sieht, als eine, in der man
  nichts erkennt.
*/
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 18px;
  margin-top: 2.4rem;
}

.shot-card {
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1rem;
}
.shot-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--slate-raised);
}

/*
  Der Verweis um das Bild führt auf die Datei in voller Größe.

  Ohne ihn sah niemand, dass sich das Bildschirmfoto öffnen lässt — es
  saß als Bild in einer Karte, und Bilder sind auf dieser Seite sonst
  nicht anklickbar. Der Zeiger und das leichte Anheben beim Überfahren
  sagen es, ohne dass ein Wort danebenstehen muss.
*/
.shot-link {
  display: block;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.shot-link:hover,
.shot-link:focus-visible {
  transform: translateY(-2px);
  opacity: 0.92;
}
.shot-link:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 4px;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .shot-link { transition: none; }
  .shot-link:hover,
  .shot-link:focus-visible { transform: none; }
}

/*
  Die Bildunterschrift nennt Dateiname und Maße. Für eine Redaktion ist
  das die eigentliche Auskunft: Sie muss wissen, was sie herunterlädt,
  bevor sie es tut.
*/
.shot-card figcaption {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--dim);
  margin-top: 0.8rem;
  line-height: 1.5;
}

/* ── Bildschirmfoto in voller Größe ──────────────────────────────── */

/*
  ─── Warum ein Overlay und kein Seitenwechsel ──────────────────────

  Ein Klick auf ein Bildschirmfoto führte auf die Bilddatei selbst. Das
  funktioniert, wirft den Leser aber aus der Seite: Er sieht ein Bild
  auf weißem Grund und muss zurückgehen, um weiterzulesen.

  Das Overlay legt sich darüber und geht wieder weg. Der Verweis bleibt
  trotzdem ein Verweis — ohne JavaScript öffnet er die Datei wie bisher.
  Siehe `press.js`.
*/
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.lightbox[data-open="true"] { opacity: 1; }

.lightbox img {
  max-width: min(100%, 22rem);
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 20px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/*
  Der Schließknopf sitzt oben rechts im Bild, nicht am Bildschirmrand:
  Dort sucht ihn die Hand, die gerade das Bild angetippt hat.
*/
.lightbox-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-close:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* Während das Overlay offen ist, soll die Seite darunter nicht rollen. */
body[data-lightbox="open"] { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox-close { transition: none; }
  .lightbox { backdrop-filter: none; }
}

/* ── Textblöcke zum Kopieren ─────────────────────────────────────── */

.boiler {
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.4rem;
  margin-top: 18px;
}

.boiler header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 0.9rem;
}

.boiler .len {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--signal);
  margin-right: auto;
}

/*
  Der Kopierknopf wechselt beim Erfolg Beschriftung **und** Farbe. Ein
  reiner Farbwechsel wäre für die unsichtbar, die Farben schlecht
  auseinanderhalten — dieselbe Regel wie bei den Verweisen in der App.
*/
.copy {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.copy:hover { color: var(--paper); border-color: var(--paper); }
.copy[data-done="true"] { color: var(--found); border-color: var(--found); }
.copy:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

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

.boiler p { margin: 0; color: var(--dim); font-size: 0.96rem; }
.boiler p + p { margin-top: 0.9em; }

/* ── Herunterladbare Marken-Dateien ──────────────────────────────── */

.assets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 18px;
  margin-top: 2.4rem;
}

.asset {
  background: var(--slate);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.4rem;
  text-align: center;
}
.asset img {
  width: 96px;
  height: 96px;
  margin: 0 auto 1rem;
  border-radius: 21px;   /* Apples Eckenverhältnis, rund 22,5 % */
}
.asset h3 { margin-bottom: 0.2em; }
.asset p { color: var(--dim); font-size: 0.9rem; margin-bottom: 1rem; }

/* ── Zeile mit dem Entwickler ────────────────────────────────────── */

.person {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 2.4rem;
  align-items: start;
  margin-top: 2.4rem;
}
.person img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--slate);
}

@media (max-width: 44rem) {
  .person { grid-template-columns: 1fr; gap: 1.4rem; }
  .person img { max-width: 14rem; }
}

/* ── Hervorgehobener Satz ────────────────────────────────────────── */

.pull {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--paper);
  border-left: 3px solid var(--signal);
  padding-left: 1.2rem;
  margin: 2.4rem 0 0;
  max-width: 40rem;
  text-wrap: balance;
}