/*
 * Frontpage-Styles — Richtung „Ruhig & Papier".
 *
 * Dies ist eine statische Seite außerhalb des Expo-Bundles (Spec §18). Sie
 * übernimmt exakt die Design-Tokens der App aus `src/global.css` — dieselben
 * HSL-Tripel, dieselben Hex-Werte in den Kommentaren. Eigene Farbwerte gibt es
 * hier bewusst nicht (#92, Akzeptanzkriterium 2).
 *
 * Unterschied zur App: die App schaltet Dunkel über die Klasse `.dark` am
 * <html>. Diese Seite trägt kein JavaScript (#92, Akzeptanzkriterium 4) und
 * folgt darum dem Systemwunsch über `prefers-color-scheme`.
 */

:root {
  /* Flächen */
  --background: 60 16.67% 97.65%; /* #FAFAF8 warmes Off-White */
  --foreground: 40 5.66% 10.39%; /* #1C1B19 */
  --card: 0 0% 100%; /* #FFFFFF */
  --card-foreground: 40 5.66% 10.39%; /* #1C1B19 */
  --muted: 45 15.38% 94.9%; /* #F4F3F0 */
  --muted-foreground: 48 2.39% 40.98%; /* #6B6A66 */
  --subtle-foreground: 45 4.17% 62.35%; /* #A3A19B */

  /* Linien */
  --border: 48 11.11% 91.18%; /* #EBEAE6 */
  --border-strong: 45 10.81% 85.49%; /* #DEDCD6 */

  /* Akzent — Schwarz, die Seite ist monochrom */
  --primary: 0 0% 0%; /* #000000 */
  --primary-foreground: 0 0% 100%; /* #FFFFFF */
  --primary-soft: 48 12.2% 91.96%; /* #EDECE8 */
  --ring: 0 0% 0%; /* #000000 */

  /* Signal */
  --destructive: 0 72.22% 50.59%; /* #DC2626 */
  --destructive-foreground: 0 0% 100%; /* #FFFFFF */
  --destructive-soft: 4.62 61.9% 95.88%; /* #FBEFEE */

  /* Overlay hinter Sheets — hier nur als Schattenfarbe des Produkt-Shots */
  --scrim: 40 5.66% 10.39%; /* #1C1B19 */

  /* Rollenbasierte Typo-Skala (tailwind.config.js) */
  --text-display: 28px;
  --leading-display: 34px;
  --text-title: 20px;
  --leading-title: 28px;
  --text-body: 16px;
  --leading-body: 24px;
  --text-callout: 15px;
  --leading-callout: 22px;
  --text-footnote: 13px;
  --leading-footnote: 18px;
  --text-caption: 11px;
  --leading-caption: 16px;

  /* Layout-Konstanten (DESIGN.md §4) */
  --gutter: 20px;
  --radius: 10px;
  --radius-lg: 14px;
  --touch: 44px;

  /* Systemschrift, keine Webfonts (DESIGN.md §3) */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: 40 6.12% 9.61%; /* #1A1917 warmes Dunkel */
    --foreground: 42.86 18.92% 92.75%; /* #F0EEE9 */
    --card: 30 3.03% 12.94%; /* #222120 */
    --card-foreground: 42.86 18.92% 92.75%; /* #F0EEE9 */
    --muted: 45 5% 15.69%; /* #2A2926 */
    --muted-foreground: 43.64 5.95% 63.73%; /* #A8A59D */
    --subtle-foreground: 42 4.35% 45.1%; /* #78756E */

    --border: 40 6.12% 19.22%; /* #34322E */
    --border-strong: 40 6% 26%; /* #46443E */

    /* Akzent invertiert: im Dunkeln ist Hell die Bestätigung. */
    --primary: 42.86 18.92% 92.75%; /* #F0EEE9 */
    --primary-foreground: 40 6.12% 9.61%; /* #1A1917 */
    --primary-soft: 50 5.36% 21.96%; /* #3B3A35 */
    --ring: 42.86 18.92% 92.75%; /* #F0EEE9 */

    --destructive: 0 90.6% 70.78%; /* #F87171 */
    --destructive-foreground: 40 6.12% 9.61%; /* #1A1917 */
    --destructive-soft: 5.22 24.73% 18.24%; /* #3A2523 */

    --scrim: 0 0% 0%; /* #000000 */
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

/* Sichtbarer Fokusring aus dem Ring-Token — Tastaturbedienung ohne JS. */
:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Kopfzeile: Wortmarke links, sichtbarer Link zur App rechts (#92, Kriterium 5). */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

/*
 * Wortmarke und Footer-Links sind mindestens 44 px hoch antippbar, auch wenn die
 * Schrift kleiner ist (CLAUDE.md: Touch-Targets minimal 44 × 44). Die Höhe kommt
 * über `min-height` plus zentrierte Ausrichtung und nicht über Padding, damit die
 * Textkante da bleibt, wo das Raster sie erwartet.
 */
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-size: var(--text-title);
  line-height: var(--leading-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: hsl(var(--foreground));
}

/* Pill-Button für den App-Einstieg, im Akzent. */
.app-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--touch);
  padding: 0 18px;
  border-radius: 999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: var(--text-callout);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.app-link:hover {
  opacity: 0.9;
}

/* Hero — #93 ersetzt Copy und CTA durch das E-Mail-Feld. */
.hero {
  padding: 72px 0 56px;
  max-width: 640px;
}

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(var(--text-display), 6vw, 44px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.hero .subline {
  margin: 0 0 28px;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  color: hsl(var(--muted-foreground));
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--touch);
  padding: 0 24px;
  border-radius: 999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: var(--text-body);
  font-weight: 500;
  text-decoration: none;
}

.cta:hover {
  opacity: 0.9;
}

/*
 * E-Mail-Einstieg (#93). Zwei Formulare, gleiches Verhalten: eines im Hero,
 * eines am Seitenende. Feld und Button liegen in einer Zeile und brechen auf
 * schmalen Schirmen untereinander.
 */
.magic-form {
  margin: 0;
  max-width: 480px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.magic-form input {
  flex: 1 1 220px;
  min-height: var(--touch);
  padding: 0 16px;
  border: 1px solid hsl(var(--border-strong));
  border-radius: var(--radius);
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-family: inherit;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.magic-form input::placeholder {
  color: hsl(var(--subtle-foreground));
}

.magic-form button {
  min-height: var(--touch);
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 500;
  cursor: pointer;
}

.magic-form button:hover:not(:disabled) {
  opacity: 0.9;
}

/*
 * Der inaktive Zustand, solange die Adresse nicht gültig ist (Spec §14) —
 * dieselbe Rollenverteilung wie im Anmelde-Screen: gedämpfte Fläche, gedämpfte
 * Schrift, kein Zeigefinger.
 */
.magic-form button:disabled {
  background: hsl(var(--muted));
  color: hsl(var(--subtle-foreground));
  cursor: default;
}

/*
 * Die Fehlerzeile steht unter dem Feld — dort, wo der Blick nach dem Tippen
 * ohnehin hinwandert. Sie schiebt den Rest nach unten, statt ihn zu überdecken.
 */
.form-note {
  margin: 10px 0 0;
  color: hsl(var(--destructive));
  font-size: var(--text-footnote);
  line-height: var(--leading-footnote);
}

.form-hint {
  margin: 12px 0 0;
  color: hsl(var(--muted-foreground));
  font-size: var(--text-footnote);
  line-height: var(--leading-footnote);
}

/* Sichtbar für Screenreader, unsichtbar im Layout. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Abschluss-Abschnitt: dieselbe Eingabe ein zweites Mal (Spec §18). */
.closing {
  padding: 56px 0 24px;
  border-top: 1px solid hsl(var(--border));
  margin-top: 40px;
}

.closing h2 {
  margin: 0 0 20px;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/*
 * Produkt-Shot. Der Browser-Rahmen steckt im Bild, hier kommt deshalb kein
 * zweiter dazu — nur eine Kante und ein sehr zurückhaltender Schatten, damit das
 * Bild nicht auf der Fläche klebt.
 *
 * `height: auto` neben den `width`/`height`-Attributen im Markup: die Attribute
 * verhindern das Springen des Layouts beim Laden, die Regel lässt das Bild
 * trotzdem mitskalieren.
 */
.shot {
  margin: 8px 0 24px;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px hsl(var(--scrim) / 0.04), 0 8px 24px hsl(var(--scrim) / 0.06);
}

/* Story-Abschnitt: zwei Absätze, dann die drei Prinzipien. */
.story {
  padding: 56px 0 8px;
  max-width: 680px;
}

.story h2 {
  margin: 0 0 20px;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.story p {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 29px;
  color: hsl(var(--muted-foreground));
}

/*
 * Drei Spalten, auf Mobil untereinander (Spec §18). `auto-fit` mit einer
 * Mindestbreite statt einer Medienabfrage: der Umbruch entsteht dort, wo der
 * Text zu eng wird, und nicht an einer geratenen Gerätebreite.
 */
.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
  margin: 20px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid hsl(var(--border));
  list-style: none;
}

.principles h3 {
  margin: 0 0 6px;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: 600;
}

.principles p {
  margin: 0;
  font-size: var(--text-callout);
  line-height: var(--leading-callout);
  color: hsl(var(--muted-foreground));
}

.closing .claim {
  margin: 0 0 24px;
  max-width: 620px;
  font-size: 20px;
  line-height: 30px;
  color: hsl(var(--muted-foreground));
}

/* Footer-Links: Datenschutz und Impressum, dazu der Weg in die App. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
}

/* Rechtsseiten — reiner Lesetext, eine Spalte. */
.legal {
  padding: 40px 0 24px;
  max-width: 680px;
}

.legal h1 {
  margin: 0 0 20px;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.legal h2 {
  margin: 32px 0 8px;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  font-weight: 600;
}

.legal p {
  margin: 0;
  color: hsl(var(--muted-foreground));
}

/*
 * Der Hinweis, dass die Seite noch nicht ausgefüllt ist. Er trägt die
 * Signalfarbe, weil er genau das ist: etwas, das vor der Veröffentlichung
 * erledigt sein muss. Fällt mit dem echten Text weg.
 *
 * Zwei Klassen im Selektor, obwohl eine das Element schon trifft: als
 * `.legal-note` allein (0,1,0) verlöre die Regel gegen `.legal p` (0,1,1) — und
 * zwar unabhängig von der Reihenfolge, weil Spezifität vor Position kommt. Der
 * Hinweis stand damit in gedämpftem Grau statt in der Signalfarbe.
 */
.legal .legal-note {
  padding: 14px 16px;
  border: 1px solid hsl(var(--destructive) / 0.3);
  border-radius: var(--radius);
  background: hsl(var(--destructive-soft));
  color: hsl(var(--destructive));
  font-size: var(--text-footnote);
  line-height: var(--leading-footnote);
}

/* Footer — #94 ergänzt Datenschutz und Impressum. */
.site-footer {
  margin-top: 40px;
  /*
   * Weniger eigenes Padding als die übrigen Abschnitte: die Links bringen ihre
   * 44 px Trefferfläche selbst mit, zusammen ergibt das die Footer-Höhe.
   */
  padding: 16px 0;
  border-top: 1px solid hsl(var(--border));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: hsl(var(--muted-foreground));
  font-size: var(--text-footnote);
  line-height: var(--leading-footnote);
}

.site-footer a {
  color: hsl(var(--muted-foreground));
}