/*
 * Stil der Einloese-Seite app.waldundschrat.de (ZUG-03, PLAN 09-07).
 *
 * Werte-Quelle `app/src/theme/theme.ts` — geborgt, nicht kopiert. Die Rollennamen
 * sind die von `theme.ts`; wer dort einen Wert aendert, findet ihn hier ueber
 * diese Zuordnung (09-UI-SPEC.md W1 „Tokens der Seite"):
 *
 *   --background            colors.background      Creme
 *   --text-strong           colors.textStrong      Tiefsee
 *   --text-body             colors.textBody        Waldgruen
 *   --border                colors.border          Waldgruen
 *   --accent                colors.accent          Limette (nur Pillen, UI-SPEC „Accent reserved for")
 *   --danger                colors.danger          Rost (Feldfehler)
 *   --spacing-xs … -xxxl    spacing.xs … xxxl
 *   --typo-*                typography.display / heading / body / label (in rem, 1.4.4)
 *   --weight-*              fontWeights.regular / semibold (600 statt 700: Abweichung 6)
 *   --radius-field / -pill  radii.field / radii.pill
 *   --size-field / -button / -touch / -logo   sizes.field / button / touchTarget / logoSymbol
 *   --opacity-pressed / -inactive             opacities.pressed / inactive
 *   --font-*                fonts.regular / semibold / expanded / expandedSemi
 *
 * Regel wie in `theme.ts`: kein Wert ohne Variable ausserhalb von :root — Farben,
 * Schriftgroessen, Abstaende und Masse stehen nur dort. Ausgenommen sind die
 * Rahmenstaerken 1 und 2 und der Fokusring-Versatz (Masse, keine Abstaende,
 * UI-SPEC „Spacing Scale — Ausnahmen") und die Spaltenbreite 30rem (V-19).
 * Keine Bewegung, nichts klebt am Bildschirmrand (Vorgabe 05.09.2026).
 */

:root {
  --background: #F0EBE1;
  --text-strong: #021E27;
  --text-body: #546B46;
  --border: #546B46;
  --accent: #E1FF73;
  --danger: #8A3B2E;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 64px;
  --typo-display-size: 1.75rem;
  --typo-display-line: 2.125rem;
  --typo-heading-size: 1.25rem;
  --typo-heading-line: 1.625rem;
  --typo-body-size: 1rem;
  --typo-body-line: 1.5rem;
  --typo-label-size: 0.875rem;
  --typo-label-line: 1.125rem;
  --weight-regular: 400;
  --weight-semibold: 600;
  --radius-field: 12px;
  --radius-pill: 22px;
  --size-field: 4.5rem;
  --size-button: max(44px, 2.75rem);
  --size-touch: 44px;
  --size-logo: 83px;
  --opacity-pressed: 0.75;
  --opacity-inactive: 0.55;
  --font-regular: 'Anybody', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-semibold: 'Anybody', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-expanded: 'Anybody Expanded', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-expanded-semi: 'Anybody Expanded', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Vier Schnitte, selbst gehostet (C.8, V-18); bis sie da sind, gilt der Rueckfall-Stapel. */
@font-face {
  font-family: 'Anybody';
  font-weight: 400;
  font-style: normal;
  src: url('/fonts/Anybody-Regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Anybody';
  font-weight: 600;
  font-style: normal;
  src: url('/fonts/Anybody-SemiBold.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Anybody Expanded';
  font-weight: 400;
  font-style: normal;
  src: url('/fonts/AnybodyExpanded-Regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Anybody Expanded';
  font-weight: 600;
  font-style: normal;
  src: url('/fonts/AnybodyExpanded-SemiBold.woff2') format('woff2');
  font-display: swap;
}

[hidden] {
  display: none !important;
}

html {
  color-scheme: light;
  background: var(--background);
}

/* Rahmen 3: eine Spalte, oben ausgerichtet, auf breiten Bildschirmen mittig (V-19). */
body {
  max-width: 30rem;
  margin: 0 auto;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xxl);
  background: var(--background);
  color: var(--text-body);
  font-family: var(--font-regular);
  font-weight: var(--weight-regular);
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
}

/* Rahmen 4: Logo-Symbol, feste Breite, kein Link. */
.logo {
  display: block;
  width: var(--size-logo);
  height: auto;
  margin-top: var(--spacing-lg);
}

/* Zweiton-Ueberschrift (TwoToneHeadline variant="onboarding"). */
h1 {
  margin: var(--spacing-xl) 0 0;
  font-family: var(--font-expanded);
  font-weight: var(--weight-regular);
  font-size: var(--typo-display-size);
  line-height: var(--typo-display-line);
  color: var(--text-body);
}

h1 strong {
  font-family: var(--font-expanded-semi);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

/* Die per Skript fokussierte Ueberschrift ist nicht bedienbar und zeigt keinen Ring. */
h1[tabindex]:focus {
  outline: none;
}

/* Rahmen 6: Fliesstext. */
p {
  margin: var(--spacing-md) 0 0;
}

/* Link: unterstrichen, gleiche Farbe wie der Text; Mail-Verweise zeigen die Adresse. */
a {
  color: var(--text-body);
  text-decoration: underline;
}

/* Grosse Adresse (Z6, Z7): bricht an jeder Stelle, die Seite scrollt nie quer. */
.adresse {
  margin-block: var(--spacing-lg);
  font-family: var(--font-expanded-semi);
  font-weight: var(--weight-semibold);
  font-size: var(--typo-heading-size);
  line-height: var(--typo-heading-line);
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

/* Feld (wie TextField): Label innen oben im Rahmen, keine Fuellung. */
.feld {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--size-field);
  margin-top: var(--spacing-xl);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-field);
}

.feld label {
  font-family: var(--font-semibold);
  font-weight: var(--weight-semibold);
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-line);
  color: var(--text-strong);
}

.feld input {
  margin: var(--spacing-xs) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-regular);
  font-weight: var(--weight-regular);
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  color: var(--text-strong);
  width: 100%;
}

.feld input:focus {
  outline: none;
}

.feld:focus-within {
  outline: 2px solid var(--text-strong);
  outline-offset: 2px;
}

/* Fehler: 2-px-Rost-Rahmen; der Innenabstand gleicht den dickeren Rahmen aus. */
.feld.fehler {
  border: 2px solid var(--danger);
  padding: calc(var(--spacing-sm) - 1px) calc(var(--spacing-md) - 1px);
}

.fehlerzeile {
  margin-top: var(--spacing-sm);
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-line);
  color: var(--danger);
}

/* Pille (wie PrimaryButton, Beschriftung 600): volle Spaltenbreite, Limette. */
.pille {
  display: block;
  width: 100%;
  min-height: var(--size-button);
  margin-top: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-body);
  font-family: var(--font-semibold);
  font-weight: var(--weight-semibold);
  font-size: var(--typo-body-size);
  line-height: var(--typo-body-line);
  text-align: center;
  cursor: pointer;
}

.pille:active {
  opacity: var(--opacity-pressed);
}

/* Anfrage laeuft: Klicks ohne Wirkung, Flaeche gedaempft. */
.pille[aria-disabled='true'] {
  opacity: var(--opacity-inactive);
  cursor: default;
}

/* Textknopf (wie TextButton, 600): ohne Flaeche, nicht unterstrichen, Tippziel 44. */
.textknopf {
  display: block;
  min-height: var(--size-touch);
  min-width: var(--size-touch);
  margin-top: var(--spacing-md);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-body);
  font-family: var(--font-semibold);
  font-weight: var(--weight-semibold);
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-line);
  text-align: left;
  cursor: pointer;
}

.store {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}

/* Fokus: Ring 2 px Tiefsee mit 2 px Versatz auf allem Bedienbaren. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--text-strong);
  outline-offset: 2px;
}

/* Rahmen 7: Fusszeile, zwei Links nebeneinander, brechen bei Platzmangel um (1.4.10). */
footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xxxl);
}

footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-touch);
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-line);
}

/* Z0: die Live-Region steht als Wartezeile sichtbar unter der Ueberschrift. */
.wartezeile {
  font-size: var(--typo-label-size);
  line-height: var(--typo-label-line);
  color: var(--text-body);
}

/* Visuell verborgen, fuer Screenreader lesbar (Live-Region ausserhalb von Z0). */
.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Erzwungene Farben: die Pille behaelt eine Kante, das Feld seinen Rahmen. */
@media (forced-colors: active) {
  .pille {
    border: 1px solid ButtonText;
  }

  .feld {
    border-color: CanvasText;
  }
}