/* =====================================================================
   Warteliste — Design-System
   ---------------------------------------------------------------------
   Übernommen aus dem PBS-Design (PBS/frontend/src/styles/theme.css):
   warme, erdige Praxis-Anmutung — Papier-Beige-Flächen, Sienna-Braun
   als Primärfarbe, Serifen-Überschriften.

   DSGVO: KEINE externen Webfonts/CDNs — Serifen aus dem System-Stack.
   MOBIL: mobile-first (Anforderung Christian 2026-07-11) — einspaltig,
   Inputs >= 16px (kein iOS-Auto-Zoom), Touch-Ziele >= 44px.
   ===================================================================== */

:root {
  /* --- Primär (Sienna) — identisch zu PBS ------------------------- */
  --wl-primary: #683010;
  --wl-primary-dark: #4e2409;
  --wl-primary-light: #8a4a20;
  --wl-primary-tint: #f7f0e8;
  --wl-primary-soft: #f0e5da;
  --wl-primary-soft-border: #e2cfbc;

  /* --- Flächen (Papier/Taupe) -------------------------------------- */
  --wl-bg: #f6f2ea;
  --wl-bg-soft: #efeae1;
  --wl-bg-subtle: #f8f5ee;
  --wl-card: #ffffff;

  /* --- Linien -------------------------------------------------------- */
  --wl-border: #e6dfd3;
  --wl-border-strong: #d9d1c4;

  /* --- Text (warme Grau-Braun-Töne) --------------------------------- */
  --wl-text: #2e2a25;
  --wl-text-strong: #3a342d;
  --wl-text-muted: #7d7265;
  --wl-text-faint: #a89b8c;

  /* --- Status -------------------------------------------------------- */
  --wl-error: #a03123;
  --wl-error-bg: #f9ece9;
  --wl-success: #3d6b35;
  --wl-success-bg: #eef4ec;

  /* --- Typografie ----------------------------------------------------- */
  --wl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --wl-font-serif: Georgia, "Iowan Old Style", "Times New Roman",
    Charter, serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--wl-bg);
  color: var(--wl-text);
  font-family: var(--wl-font-sans);
  font-size: 16px;             /* nie kleiner — iOS zoomt sonst */
  line-height: 1.6;
}

/* --- Layout: einspaltig, mittig, mobil ohne Rand-Verschnitt --------- */
.wl-container {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
}

.wl-card {
  background: var(--wl-card);
  border: 1px solid var(--wl-border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}

@media (min-width: 600px) {
  .wl-container { padding: 32px 24px; }
  .wl-card { padding: 32px; }
}

/* --- Typografie ------------------------------------------------------ */
h1, h2, h3 { font-family: var(--wl-font-serif); line-height: 1.25; }
h1 { color: var(--wl-primary); font-size: 1.6rem; margin: 0 0 .5em; }
h2 { color: var(--wl-primary-dark); font-size: 1.25rem; }
a  { color: var(--wl-primary); }

.wl-muted { color: var(--wl-text-muted); font-size: .925rem; }

/* --- Formulare -------------------------------------------------------- */
.wl-field { margin-bottom: 18px; }

.wl-field label {
  display: block;
  font-weight: 600;
  color: var(--wl-text-strong);
  margin-bottom: 6px;
}

.wl-field input[type="text"],
.wl-field input[type="email"],
.wl-field input[type="tel"],
.wl-field input[type="date"],
.wl-field select {
  width: 100%;
  font-size: 16px;
  padding: 12px;
  min-height: 44px;                    /* Touch-Ziel */
  border: 1px solid var(--wl-border-strong);
  border-radius: 8px;
  background: var(--wl-bg-subtle);
  color: var(--wl-text);
}

.wl-field input:focus,
.wl-field select:focus {
  outline: 2px solid var(--wl-primary-light);
  outline-offset: 1px;
  background: #fff;
}

/* Radio-/Checkbox-Zeilen als große Touch-Flächen */
.wl-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  min-height: 44px;
  border: 1px solid var(--wl-border);
  border-radius: 8px;
  background: var(--wl-bg-subtle);
  margin-bottom: 8px;
  cursor: pointer;
}

.wl-choice input { width: 20px; height: 20px; margin-top: 2px; flex: none; }

/* --- Buttons ----------------------------------------------------------- */
.wl-button {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--wl-primary);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.wl-button:hover, .wl-button:focus { background: var(--wl-primary-dark); }
.wl-button:disabled { background: var(--wl-text-faint); cursor: not-allowed; }

@media (min-width: 600px) {
  .wl-button { width: auto; }
}

/* --- Meldungen ---------------------------------------------------------- */
.wl-error {
  color: var(--wl-error);
  background: var(--wl-error-bg);
  border: 1px solid var(--wl-error);
  border-radius: 8px;
  padding: 12px;
}

.wl-success {
  color: var(--wl-success);
  background: var(--wl-success-bg);
  border: 1px solid var(--wl-success);
  border-radius: 8px;
  padding: 12px;
}

/* --- Status-Anzeige (Wartelistenposition) ------------------------------- */
.wl-status-number {
  font-family: var(--wl-font-serif);
  font-size: 2.2rem;
  color: var(--wl-primary);
}

/* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld */
.wl-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}