/*
 * Grundstile von fotowand – für Website und App dieselben (CLAUDE.md §1b: ein Designsystem,
 * eine Quelle). Setzt tokens.css voraus und benutzt nur dessen Variablen.
 *
 * Hier steht, was jede Seite braucht: Grund, Schrift, Fokus, Titel, leiser Text, Hauptknopf,
 * Testmodus-Hinweis. Komponenten einzelner Oberflächen gehören nicht hierher.
 */

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

body {
  margin: 0;
  min-height: 100vh;
  /* Mobil ohne die Browserleiste gerechnet – sonst sitzt die Mitte tiefer als sichtbar. */
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

/*
 * Fokus als Ring aus den Tokens. Der durchsichtige Umriss bleibt stehen, weil Windows im
 * Kontrastmodus Schatten nicht zeichnet – dort wird er sichtbar, sonst nicht.
 */
:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

.fw-center {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.fw-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title-2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
  /* Lange deutsche Wörter dürfen die Seite nicht breiter als den Bildschirm machen. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.fw-muted {
  margin: 0;
  /* Höchstens etwa 65 Zeichen pro Zeile (docs/DESIGN.md §3). */
  max-width: 65ch;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* Hauptknopf (Designset „Primär“): 56 px hoch, Indigo. */
.fw-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: 0 var(--space-5);
  border-radius: var(--radius-control);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-accent);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.fw-button:hover {
  background: var(--color-accent-strong);
}

/* Testmodus-Hinweis im Seitenfluss – nie fest über dem Inhalt, damit er nichts verdeckt. */
.fw-test-mode {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--color-neutral-soft);
  color: var(--color-neutral-ink);
  font-size: var(--text-small);
  text-align: center;
}

/* Teilen-Knopf (Plan MITMACHEN) auf Gästeseite und Event-Seite: app/src/views/participation.tsx. */
/* `hidden` gewinnt – sonst überstimmt `display` der Knopf- und Feldregeln es. */
.fw-share [hidden][hidden] {
  display: none;
}

.fw-share {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fw-share-status,
.fw-share-label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.fw-share-status:empty {
  display: none;
}

.fw-share-quiet {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  align-self: flex-start;
  min-height: var(--tap-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent-strong);
  font: inherit;
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.fw-share-fallback {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* „Link kopieren“ (app/src/views/copy-button.tsx): „Kopiert“ steht am Knopf selbst. */
.fw-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fw-copy [hidden][hidden] {
  display: none;
}

.fw-copy-state {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}

.fw-copy-check {
  display: inline-flex;
}

.fw-button.fw-copy-button[data-copied] {
  border-color: var(--color-success-soft);
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.fw-share-text {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-small);
  resize: vertical;
}

/*
 * Impressum, Datenschutz und AGB unter jeder Seite der App (app/src/views/layout.tsx) – leise,
 * aber mit voller Tipp-Fläche. Die Leinwand lässt den Fuß weg.
 */
.fw-legal-links nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-6);
}

.fw-legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  text-underline-offset: 3px;
}