/*
Theme Name: Destiny
Theme URI: https://github.com/muax3000/destiny-site
Author: Niemann Consulting GmbH
Description: Produktseite für Destiny. Block-Theme, gebaut aus denselben Design-Tokens wie die Produktoberfläche.
Version: 0.8.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: destiny-site
Tags: full-site-editing, block-patterns, accessibility-ready
*/

/*
 * Was hier steht und nicht in theme.json.
 *
 * theme.json kann Farben, Abstände und Schrift. Es kann keinen klebenden Kopf,
 * keine Marke neben dem Namen und keinen Schalter, der jede Bewegung abschaltet.
 * Genau das steht hier — und sonst nichts.
 *
 * **Kein Farbwert in dieser Datei.** Jede Farbe kommt über eine
 * `--wp--preset--color--*`-Variable aus theme.json und damit aus den Tokens des
 * Produkts. Ein Prüflauf (`npm test`) besteht darauf. Der Grund ist nicht
 * Ordnungsliebe: eine hier eingetragene Farbe ist die eine, die beim nächsten
 * Nachschärfen der Marke stehen bleibt.
 */

/*
 * Keine eigene Sprungmarke.
 *
 * WordPress hängt in Block-Themes selbst eine ein (`#wp-skip-link`). Eine zweite
 * ist kein zusätzlicher Dienst, sondern ein zweiter erster Tabstopp: wer mit der
 * Tastatur ankommt, drückt zweimal und landet beim selben Ziel. Beim ersten Bau
 * stand sie hier, weil ich nicht nachgesehen habe, ob der Kern das schon tut.
 */

/*
 * Der Kopf klebt, aber leise: kein Schatten, solange die Seite oben steht.
 * Ein Kopf, der immer schwebt, nimmt auf einem Telefon Platz weg, den der
 * Inhalt braucht.
 */
.destiny-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--wp--preset--color--surface-card);
  border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Marke neben dem Namen. Der Name ist echter Text — er wird gelesen, kopiert und gefunden. */
.destiny-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  text-decoration: none;
  color: inherit;
}

.destiny-lockup img {
  width: 1.75em;
  height: 1.75em;
  display: block;
}

.destiny-lockup span {
  font-weight: 650;
  letter-spacing: -0.01em;
}

/*
 * Bildstrecken. Ein Bildschirmfoto ist hier ein Beleg, kein Schmuck — deshalb
 * ein Rahmen, der es als Fenster kennzeichnet, und eine Bildunterschrift, die
 * sagt, was zu sehen ist.
 */
.destiny-figure img,
.destiny-figure video {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--lg);
  box-shadow: var(--wp--custom--shadow--two);
  background: var(--wp--preset--color--surface-card);
}

.destiny-figure figcaption {
  margin-top: var(--wp--preset--spacing--30);
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--small);
}

/* Karten im Funktionsraster. */
/*
 * Karten im Funktionsraster.
 *
 * Kein `height: 100%`. In einer Rasterspalte streckt das die Karte auf die Höhe
 * der höchsten — beim ersten Bau standen dadurch acht Kacheln mit je drei Zeilen
 * Text bildschirmfüllend übereinander, und der nächste Abschnitt lief in sie
 * hinein. Das Raster gleicht die Höhen selbst aus.
 */
.destiny-card {
  background: var(--wp--preset--color--surface-card);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--lg);
  padding: var(--wp--preset--spacing--60);
}

/* Die Überschrift der Karte ist ein Verweis, sieht aber wie eine Überschrift aus. */
.destiny-card :is(h2, h3) a {
  color: var(--wp--preset--color--text);
  text-decoration: none;
}

.destiny-card :is(h2, h3) a:hover {
  text-decoration: underline;
}

/* Ein Band, das sich vom Fluss abhebt, ohne laut zu werden. */
.destiny-band {
  background: var(--wp--preset--color--surface-page);
  border-block: 1px solid var(--wp--preset--color--line);
}

.destiny-band-accent {
  background: var(--wp--preset--color--accent-surface);
  border-block: 1px solid var(--wp--preset--color--accent);
}

/* Ein Beleg neben einer Behauptung: schmaler Strich in der Markenfarbe. */
.destiny-proof {
  border-left: 3px solid var(--wp--preset--color--accent);
  padding-left: var(--wp--preset--spacing--50);
}

/*
 * Bewegung, nach derselben Regel wie im Produkt (ATS-13.4): drei Dauern, eine
 * Kurve, und ein einziger Block, der alle drei auf null setzt. Über diesen
 * Umweg statt über eine Media Query je Regel, damit „keine Bewegung" nicht
 * davon abhängt, dass jemand daran gedacht hat.
 */
:root {
  --destiny-motion-fast: var(--wp--custom--motion--fast);
  --destiny-motion-base: var(--wp--custom--motion--base);
  --destiny-ease: var(--wp--custom--motion--ease);
}

.destiny-lockup img,
.wp-element-button,
.wp-block-button__link {
  transition: transform var(--destiny-motion-fast) var(--destiny-ease),
              background-color var(--destiny-motion-base) var(--destiny-ease);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --destiny-motion-fast: 0ms;
    --destiny-motion-base: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* Sichtbarer Fokus überall, auch dort, wo der Browser ihn verstecken würde. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--wp--preset--color--focus);
  outline-offset: 2px;
}

/*
 * Das eine Formular der Seite.
 *
 * Zwei Zeilen davon sind die eigentliche Arbeit: das Honigtopf-Feld darf für
 * Menschen nicht sichtbar sein und für Bildschirmleser trotzdem nicht im Weg
 * stehen — `display: none` würde es auch manchen Werbemüll-Programmen verraten,
 * die genau darauf prüfen.
 */
.destiny-form p {
  margin-block: 0 var(--wp--preset--spacing--50);
}

.destiny-form label {
  display: block;
  margin-bottom: var(--wp--preset--spacing--20);
  font-weight: 600;
}

.destiny-form :is(input, select, textarea) {
  /*
   * `box-sizing` ist hier keine Kosmetik. Ohne es schlägt die Innenabstands-
   * und Randbreite auf die 100 % obendrauf, und das Textfeld ragte auf einem
   * 390 Pixel breiten Bildschirm um zehn Pixel hinaus — die ganze Seite ließ
   * sich seitlich schieben. Gefunden hat es nicht das Auge, sondern
   * `npm run check`.
   */
  box-sizing: border-box;
  width: 100%;
  max-width: 32rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--base);
  background: var(--wp--preset--color--surface-card);
  color: var(--wp--preset--color--text);
  font: inherit;
}

.destiny-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.destiny-note {
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
 * Rhythmus
 *
 * Die Tokens stammen aus einer Verwaltungsoberfläche, und dort ist
 * Zurückhaltung richtig: wer acht Stunden damit arbeitet, will keine Farbe,
 * die ruft. Eine Produktseite hat die umgekehrte Aufgabe — sie wird einmal
 * überflogen, und was dabei nicht auffällt, wird nicht gelesen.
 *
 * Gemessen war das Problem eindeutig: `surface-page` gegen `surface-card`
 * trennt mit 1,08:1. Zwei Flächen, die sich um acht Prozent unterscheiden,
 * sind für das Auge eine Fläche. Die Seite bestand aus einer einzigen weißen
 * Bahn mit Text darauf.
 *
 * Die Abhilfe kommt ohne eine neue Farbe aus. Die Palette hat einen kräftigen
 * Dunkelton und ein Markengelb — die Seite hat beide nie als *Fläche*
 * benutzt, nur als Schrift und als Knopf.
 * ========================================================================== */

/* Deutlicher als vorher: vertieft statt fast weiß. */
.destiny-band {
  background: var(--wp--preset--color--surface-sunken);
  border-block: 1px solid var(--wp--preset--color--line);
}

/*
 * Das dunkle Band. Ein einziges auf der Seite, für den Abschnitt, der den
 * Ausschlag gibt.
 *
 * Nachgerechnet, nicht geschätzt: Weiß auf #1d2327 ergibt 15,89:1, das
 * Markengelb 7,62:1. Beides über AA, und das Gelb wird hier zum ersten Mal
 * lesbare Schrift statt nur Fläche.
 */
.destiny-band-dark {
  background: var(--wp--preset--color--text);
  color: var(--wp--preset--color--text-on-fill);
  border-block: 1px solid var(--wp--preset--color--text);
}

.destiny-band-dark :is(h1, h2, h3, h4, p, li, strong) {
  color: var(--wp--preset--color--text-on-fill);
}

/* Zurückgenommener Text auf dunklem Grund: kein neuer Farbwert, nur weniger
   Deckkraft. 80 % ergeben rechnerisch noch rund 10:1. */
.destiny-band-dark .destiny-muted {
  opacity: 0.8;
}

.destiny-band-dark .destiny-kicker,
.destiny-band-dark .destiny-proof {
  color: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
}

.destiny-band-dark .destiny-card {
  background: transparent;
  border-color: var(--wp--preset--color--text-secondary);
}

/*
 * Der Kicker über der Überschrift.
 *
 * Drei Worte in Versalien, davor ein kurzer Strich in der Markenfarbe. Er
 * kostet eine Zeile und gibt jedem Abschnitt einen Anfang — vorher begannen
 * alle gleich, und beim Überfliegen verschwammen sie ineinander.
 */
.destiny-kicker {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: var(--wp--preset--spacing--30);
  color: var(--wp--preset--color--accent-strong);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.destiny-kicker::before {
  content: "";
  width: 1.75rem;
  height: 3px;
  border-radius: 2px;
  background: var(--wp--preset--color--accent);
}

/*
 * Karten reagieren auf den Zeiger.
 *
 * Nicht als Spielerei: acht gleiche Kacheln nebeneinander sehen aus wie eine
 * Tabelle. Ein Rand, der sich färbt, und ein Millimeter Hub sagen „das hier
 * ist ein Ziel". Dauer und Kurve kommen aus denselben Tokens wie im Produkt,
 * und unter `prefers-reduced-motion` bleibt beides stehen.
 */
.destiny-card {
  transition: border-color var(--destiny-motion-base) var(--destiny-ease),
              box-shadow var(--destiny-motion-base) var(--destiny-ease),
              transform var(--destiny-motion-base) var(--destiny-ease);
}

.destiny-card:hover,
.destiny-card:focus-within {
  border-color: var(--wp--preset--color--accent);
  box-shadow: var(--wp--custom--shadow--two);
  transform: translateY(-2px);
}

/*
 * Das Zeichen auf der Kachel.
 *
 * Aus derselben Bauart wie die Marke: Geometrie, ein Strich, keine Füllung,
 * `currentColor` statt eines Farbwerts. Damit gibt es hier keine zweite Palette
 * und keinen Zeichensatz, der nachgeladen werden müsste.
 */
.destiny-icon {
  display: block;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--wp--preset--spacing--30);
  color: var(--wp--preset--color--accent-strong);
}

/* Der Aufmacher darf mehr Luft haben als der Rest. */
.destiny-hero {
  padding-block: var(--wp--preset--spacing--80);
}

.destiny-hero h1 {
  max-width: 18ch;
}

/*
 * Der Aufmacher steht zweispaltig, sobald Platz ist.
 *
 * Vorher war er eine lange Spalte mit einem großen Bild darunter — man sah
 * beim Laden Text, Text, Text und dann eine graue Fläche. Nebeneinander
 * erklären sich beide gegenseitig, und die Seite fängt nicht mit einer Wand an.
 * Unter 782 Pixeln bricht der Kern die Spalten von selbst um; dort ist
 * untereinander richtig.
 */
.destiny-hero .destiny-figure {
  margin-top: 0;
}

/* Das Abschlussband endet warm statt grau. */
.destiny-band-accent {
  border-block: 1px solid var(--wp--preset--color--accent);
}

/* ==========================================================================
 * Zweite Markenfarbe und Verläufe
 *
 * Bis hierher kam jede Farbe aus den Produkt-Tokens. Das war richtig, solange
 * die Seite wie die Oberfläche aussehen sollte — und es ist die Regel, die
 * jetzt bewusst fällt: eine Verkaufsseite darf eine reichere Marke haben als
 * eine Verwaltungsoberfläche, in der Farbe ein Signal ist und kein Schmuck.
 *
 * Was **nicht** fällt: dass jede Farbe einen Namen, einen Ort und eine
 * nachgerechnete Zahl hat. Das Violett steht als Markenerweiterung in
 * `tools/theme.base.json`, mit den Kontrastwerten daneben, und ein Prüflauf
 * rechnet sie nach. Eine zweite Farbe, die irgendwo im CSS anfängt, ist in
 * einem halben Jahr vier Violetttöne.
 * ========================================================================== */

/* Der Strich vor dem Kicker führt beide Farben. */
.destiny-kicker::before {
  width: 2.25rem;
  background: var(--wp--preset--gradient--rule);
}

/*
 * Der Aufmacher bekommt eine sehr blasse Fläche.
 *
 * „Sehr blass" ist die ganze Kunst: der Text darauf steht bei 14:1, also
 * unverändert lesbar. Ein Verlauf, der so kräftig ist, dass man ihn
 * *bemerkt*, macht die Überschrift schlechter lesbar und die Seite billiger.
 */
.destiny-hero {
  background: var(--wp--preset--gradient--brand-soft);
  border-bottom: 1px solid var(--wp--preset--color--line);
}

/*
 * Das dunkle Band bekommt Tiefe: von der Textfarbe des Produkts nach einem
 * violettstichigen Schwarz. Weiß darauf steht bei 15,9 bis 17,4:1, das
 * Markengelb bei 8,4:1, das helle Violett bei 6,4:1 — alle drei über AA,
 * über die ganze Fläche.
 */
.destiny-band-dark {
  background: var(--wp--preset--gradient--ink);
  border-block-color: var(--wp--preset--color--ink);
}

.destiny-band-dark .destiny-kicker {
  color: var(--wp--preset--color--violet-light);
}

.destiny-band-dark .destiny-proof {
  border-color: var(--wp--preset--color--violet-light);
}

/*
 * Karten bekommen unter dem Zeiger eine Kante in den Markenfarben.
 *
 * Über ein Pseudo-Element und nicht über den Rahmen: ein Verlauf als
 * Rahmenfarbe braucht `border-image` und bricht dann die Rundung.
 */
.destiny-card {
  position: relative;
  overflow: hidden;
}

.destiny-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--wp--preset--gradient--rule);
  opacity: 0;
  transition: opacity var(--destiny-motion-base) var(--destiny-ease);
}

.destiny-card:hover::before,
.destiny-card:focus-within::before {
  opacity: 1;
}

.destiny-card:hover,
.destiny-card:focus-within {
  border-color: var(--wp--preset--color--violet);
}

/* Die Zeichen im Raster tragen die zweite Farbe. */
.destiny-icon {
  color: var(--wp--preset--color--violet-strong);
}

/*
 * Der zweite Knopf wird violett.
 *
 * Der erste bleibt, wie er ist: dunkle Schrift auf dem Markengelb, 8,36:1.
 * Ein Verlauf als Knopffläche wäre die naheliegende Spielerei und wäre
 * falsch — am orangen Ende erreicht weiße Schrift 2,08:1 und ist unlesbar.
 * Violett trägt Weiß mit 5,7:1.
 */
.wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--wp--preset--color--violet-strong);
  border-color: var(--wp--preset--color--violet-strong);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--violet-strong);
  color: var(--wp--preset--color--text-on-fill);
}

/* Das Abschlussband nimmt die blasse Markenfläche. */
.destiny-band-accent {
  background: var(--wp--preset--gradient--brand-soft);
  border-block-color: var(--wp--preset--color--violet-surface);
}

/* Der Kopf trägt einen Haarstrich in den Markenfarben. */
.destiny-header {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--wp--preset--color--line);
}

.destiny-header::after {
  content: "";
  display: block;
  height: 2px;
  margin-block-start: var(--wp--preset--spacing--40);
  margin-inline: calc(var(--wp--style--root--padding-left) * -1) calc(var(--wp--style--root--padding-right) * -1);
  background: var(--wp--preset--gradient--rule);
}

/*
 * Das Zeichen sitzt auf einer eigenen Fläche.
 *
 * Ein freistehender Strich in einer sonst leeren Kartenecke sieht aus wie
 * vergessen. Die blasse Fläche darunter macht daraus ein Element — und sie ist
 * blass genug, dass der dunkle Text daneben unverändert bei 14:1 steht.
 */
.destiny-icon {
  box-sizing: content-box;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.55rem;
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--violet-surface);
}

.destiny-card:hover .destiny-icon,
.destiny-card:focus-within .destiny-icon {
  background: var(--wp--preset--gradient--brand-soft);
}

/* Eine Trennlinie genügt: der Verlaufsstrich ist sie. */
.destiny-header {
  box-shadow: none;
}