/* Stylesheet der Platzhalter-Website auf mein-kegelbuch.de.

   Bewusst von Hand geschrieben und NICHT aus src/app.css abgeleitet: die Seite ist reines
   statisches HTML ohne Bauschritt (siehe firebase.json, Hosting-Target "website"), Tailwind
   und die shadcn-Tokens der App kommen hier gar nicht vor. Uebernommen sind nur die
   Markenwerte selbst - Hintergrund, Tinte und das Gruen - damit Platzhalter und App
   erkennbar zusammengehoeren.

   Schriften: dieselben Hausschriften wie die App (Poppins fuer Ueberschriften, Nunito fuer den
   Fliesstext), aber von DIESER Domain und nicht von fonts.googleapis.com. Die Dateien liegen
   unter fonts/ und stammen aus @fontsource - derselben Quelle, aus der die App sie bezieht;
   kopiert statt eingebunden, weil es hier keinen Bauschritt gibt, der ein npm-Paket aufloesen
   koennte. Beim Abruf von Google ginge die IP-Adresse jedes Besuchers dorthin, und der
   Platzhalter muesste darueber aufklaeren. */

/* Nur die drei Schnitte, die diese Seite tatsaechlich setzt, und von jedem nur das Subset
   latin: die Seite zeigt festen deutschen Text, keine Namen aus einer Datenbank - das
   latin-ext-Subset der App (osteuropaeische Diakritik in Mitgliedsnamen) traegt hier nichts
   bei. Wer einen weiteren Schnitt setzt, muss ihn hier ergaenzen, sonst rechnet der Browser
   sich die Form aus dem naechstliegenden aus.

   Nur woff2, ohne woff-Rueckfallebene: jeder Browser, der die Farbschema-Abfrage und das
   text-wrap dieser Datei versteht, kann woff2.

   font-display: swap - der Text steht sofort im Rueckfall-Stack und wird ausgetauscht, sobald
   die Schrift da ist. Bei einer Seite aus drei Absaetzen waere jede Sekunde unsichtbaren
   Textes die schlechtere Wahl. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/poppins-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/nunito-latin-400-normal.woff2') format('woff2');
}

:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --ink: #0f172a;
  --ink-soft: #475569;
  /* Der dunklere Markenton, nicht #2fb36d: das Gruen der Marke kommt gegen Weiss nur auf
     2,7:1 und reisst damit die 4,5:1, die ein Link als Text braucht. Dieselbe Rolle traegt in
     der App --wood. */
  --brand: #157a4c;

  /* Namen und Rueckfall-Stacks wie in src/app.css - Poppins traegt die Ueberschriften, Nunito
     den Fliesstext. */
  --font-display: 'Poppins', 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-body: 'Nunito', 'Segoe UI', Roboto, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --surface: #0f172a;
    --ink: #f8fafc;
    --ink-soft: #cbd5e1;
    /* Auf dunklem Grund kehrt sich die Kontrastlage um: hier ist das helle Marken-Gruen der
       lesbare Ton (7,0:1 auf #0b1120), das dunkle waere es nicht. */
    --brand: #4ade80;
  }
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 2rem 1.5rem;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  text-align: center;
}

.page {
  width: 100%;
  max-width: 34rem;
  background: var(--surface);
  border-radius: 1rem;
  padding: clamp(1.75rem, 5vw, 3rem);
  /* Der Schatten ersetzt die Rahmenlinie: auf #f8fafc traegt eine weisse Flaeche sonst keine
     eigene Kante. */
  box-shadow:
    0 1px 2px rgb(15 23 42 / 0.06),
    0 12px 32px rgb(15 23 42 / 0.08);
}

.logo {
  /* width/height stehen als Attribute im Markup, damit der Browser den Platz vor dem Laden
     kennt und die Ueberschrift beim Eintreffen des Bildes nicht springt. Hier zaehlt nur die
     Anzeigebreite. */
  width: 100%;
  max-width: 20rem;
  height: auto;
  margin-bottom: 2rem;
}

h1 {
  font-family: var(--font-display);
  margin: 0 0 1rem;
  font-size: clamp(1.375rem, 4.5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.lead {
  margin: 0;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Der Verweis in die App - das einzige Bedienelement der Seite und deshalb bewusst gross.

   Gruene Flaeche mit DUNKLER Schrift, nicht mit weisser: #ffffff auf #2fb36d ergibt 2,7:1 und
   faellt durch jede Pruefung, --ink auf derselben Flaeche ergibt 6,9:1. Die App macht es an
   ihren Primaerflaechen genauso (--color-primary-foreground in src/app.css), und die Wortmarke
   im Logo zeigt dasselbe Muster.

   Die Farben stehen in beiden Erscheinungsbildern gleich: eine gesaettigte Markenflaeche
   traegt dunkle Schrift, ob die Seite darum herum hell oder dunkel ist. */
.button {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.9375rem 2.25rem;
  border-radius: 0.625rem;
  background: #2fb36d;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.12);
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

.button:hover {
  /* Dunkler statt heller: die helle Richtung wuerde den Kontrast zur dunklen Schrift
     vergroessern, aber die Flaeche gegen einen weissen Grund verlieren. */
  background: #27a061;
  text-decoration: none;
}

.button:active {
  transform: translateY(1px);
}

/* Wer die Bewegung abbestellt hat, bekommt sie nicht - der Zustand bleibt trotzdem an der
   Farbe erkennbar. */
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }

  .button:active {
    transform: none;
  }
}

.footer {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

a {
  color: var(--brand);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration: none;
}

/* Sichtbarer Fokusring fuer die Tastaturbedienung - der Preflight der App entfernt den
   Standardring, dieses Stylesheet hat keinen Reset, also bleibt der des Browsers. Ein
   eigener Ring in der Markenfarbe macht ihn auf beiden Untergruenden gleich gut sichtbar. */
a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

/* Rechtstexte: linksbuendig statt zentriert wie die Startseite - eine Adresse und mehrere
   Absaetze Fliesstext liest man zentriert nicht. */
.legal {
  width: 100%;
  max-width: 44rem;
  text-align: left;
}

.legal h1 {
  margin-bottom: 1.5rem;
}

.legal h2 {
  font-family: var(--font-display);
  margin: 2rem 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
}

.legal h2:first-of-type {
  margin-top: 0;
}

.legal p {
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
}

.legal .logo {
  max-width: 12rem;
  margin-bottom: 1.5rem;
}