/*
  Eine Datei, kein Framework.

  Die Seite hat eine Aufgabe und ändert sich selten. Ein Build-Schritt wäre
  eine Abhängigkeit, die gepflegt werden will, und ein Framework eines, das
  alle paar Monate umbenennt, was gestern anders hiess.

  Gestaltet nach Swiss Minimalism: Raster, Weissraum, klare Hierarchie,
  keine Effekte, die etwas behaupten. Zwei Schriften — eine Antiqua für
  das, was Haltung zeigt, eine Grotesk für das, was gelesen wird.
*/

:root {
  /* Farben. Das Gold ist gesetzt — es ist dasselbe wie in der App und auf
     der Karte, und eine Marke, die auf zwei Flächen zwei Goldtöne hat,
     hat keinen. */
  --gold: #c4a87c;
  --grund: #000;
  --flaeche: #0b0b0b;
  --linie: #1c1c1f;
  --linie-hell: #2a2a2e;

  /* Alle Texttöne bestehen 4,5:1 auf Schwarz — nachgemessen, nicht
     geschätzt. `--stiller` war vorher #71717a und lag bei 4,35:1;
     ausgerechnet bei den kleinsten Schriften der Seite. */
  --text: #e4e4e7;      /* 16,6:1 */
  --leise: #a1a1aa;     /*  8,2:1 */
  --stiller: #8a8a93;   /*  6,1:1 */

  /* Abstände, grosszügig (24–96). Die Seite hat wenig zu sagen und viel
     Zeit dafür. */
  --raum-1: 0.5rem;
  --raum-2: 1rem;
  --raum-3: 1.5rem;
  --raum-4: 2rem;
  --raum-5: 3rem;
  --raum-6: 4rem;
  --raum-7: 6rem;

  /*
    Die Schrift des Systems.

    Ein Versuch mit Cormorant und Montserrat stand hier kurz — technisch
    sauber, selbst ausgeliefert, und trotzdem falsch: die Antiqua gab der
    Seite etwas Bemühtes, das nicht zu einem Netzwerk passt, das seine
    Zurückhaltung ernst meint. Die Systemschrift behauptet nichts. Sie ist
    ausserdem schon da — nichts zu laden, nichts, was beim Wechsel springt.
  */
  --antiqua: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --grotesk: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  /* Kein `scroll-behavior: smooth`: es gibt nichts zu springen, und was
     es nicht gibt, muss auch nicht animiert werden. */
}

body {
  background: var(--grund);
  color: var(--text);
  font-family: var(--grotesk);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Sichtbar, wo die Tastatur gerade steht. Der Rahmen liegt aussen und
   verdeckt nichts — ein entfernter Fokusrahmen ist der häufigste Weg,
   eine Seite für Tastaturbenutzer unbrauchbar zu machen. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--raum-6) var(--raum-3) var(--raum-7);
}

@media (min-width: 48rem) {
  main { padding: var(--raum-7) var(--raum-4) calc(var(--raum-7) * 1.5); }
}

/* ── Kopf ─────────────────────────────────────────────────────────── */

.marke {
  font-family: var(--grotesk);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.38em;
  color: var(--gold);
  margin-bottom: var(--raum-6);
}

h1 {
  font-family: var(--grotesk);
  font-weight: 600;
  /* Wächst mit der Fläche, ohne Sprünge und ohne Bruchstellen. */
  font-size: clamp(2.5rem, 7vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: #fff;
  /* Verhindert eine einzelne Silbe in der letzten Zeile. */
  text-wrap: balance;
}

.vorspann {
  font-family: var(--grotesk);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  line-height: 1.5;
  color: var(--leise);
  max-width: 34rem;
  margin-top: var(--raum-3);
  text-wrap: pretty;
}

/* ── Die Karte ────────────────────────────────────────────────────── */

.karte {
  margin: var(--raum-6) 0 var(--raum-3);
  max-width: 24rem;
  aspect-ratio: 1.586;              /* das Verhältnis einer echten Karte */
  background: var(--flaeche);
  border: 1px solid rgba(196, 168, 124, 0.3);
  border-radius: 0.875rem;
  padding: var(--raum-3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Ein Hauch Tiefe von oben links — dieselbe Lichtführung wie auf der
     Karte in der App. Kein Schlagschatten: der wäre eine Behauptung. */
  background-image: linear-gradient(148deg, rgba(196, 168, 124, 0.07), transparent 45%);
}

.karte .status {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--gold);
}

.karte .nummer {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.375rem;
  color: #f4f4f5;
}

.karte .seit {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--stiller);
  margin-top: 0.25rem;
}

.fussnote {
  font-size: 0.875rem;
  color: var(--stiller);
  max-width: 30rem;
}

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

section { margin-top: var(--raum-7); }

h2 {
  font-family: var(--grotesk);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stiller);
  padding-bottom: var(--raum-2);
  border-bottom: 1px solid var(--linie);
  margin-bottom: var(--raum-4);
}

section p { color: var(--leise); max-width: 36rem; }
/* Der Satz nach einer Liste braucht mehr Luft als einer nach einem Satz.
   Als Klasse, nicht als `style`-Attribut: unsere eigene
   Sicherheitsrichtlinie (`style-src 'self'`) blockiert Letzteres — und
   eine Seite, die an ihren eigenen Regeln scheitert, wäre peinlich. */
.schluss { margin-top: var(--raum-4); }
section p + p { margin-top: var(--raum-2); }
strong { color: var(--text); font-weight: 500; }

/* Die Liste ohne Punkte: ein Gedankenstrich in Gold statt eines
   Aufzählungszeichens — er trennt, ohne zu schreien. */
ul { list-style: none; }
li {
  color: var(--leise);
  display: flex;
  gap: var(--raum-2);
  max-width: 36rem;
}
li + li { margin-top: var(--raum-2); }
li::before {
  content: "—";
  color: var(--gold);
  flex: none;
  /* Vom Vorlesen ausgenommen: es ist Schmuck, keine Aussage. */
}

/* ── Schluss ──────────────────────────────────────────────────────── */

footer {
  margin-top: var(--raum-7);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--linie);
}

.bald {
  font-family: var(--grotesk);
  font-size: 1.125rem;
  color: var(--text);
}

footer p { font-size: 0.875rem; color: var(--stiller); }
footer p + p { margin-top: var(--raum-2); }

a {
  color: var(--leise);
  text-decoration: none;
  border-bottom: 1px solid var(--linie-hell);
  padding-bottom: 1px;
  transition: color 220ms ease, border-color 220ms ease;
}
a:hover { color: var(--gold); border-color: var(--gold); }

.klein {
  font-size: 0.75rem;
  color: var(--stiller);
  margin-top: var(--raum-5) !important;
}

/* Wer angibt, Bewegung zu vermeiden, bekommt keine. Hier ist es fast
   nichts — aber „fast nichts" ist keine Ausrede, die Angabe zu übergehen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}