/*
  Design-System "Classical" - Tokens und Komponentenklassen aus dem Handoff
  (design_handoff_local_events/_ds/styles.css), bereits in der Naturgrün-Variante
  des Entwurfs. Farben, Schrift, Abstände und Radien kommen ausschließlich aus
  diesen Variablen - im Markup steht kein Hex-Wert.
*/

:root {
  --color-bg: #f2f4f0;
  --color-surface: #e7ece3;
  --color-text: #1e241d;
  --color-accent: #6f9560;
  --color-divider: color-mix(in srgb, #1e241d 16%, transparent);

  --color-accent-100: #eef4ea;
  --color-accent-200: #d9e7d2;
  --color-accent-300: #bcd4b1;
  --color-accent-400: #9cbb8e;
  --color-accent-500: #7da06e;
  --color-accent-600: #5f8551;
  --color-accent-700: #47683b;
  --color-accent-800: #314a28;
  --color-accent-900: #22331d;

  --color-neutral-100: #f4f6f2;
  --color-neutral-200: #e7ebe4;
  --color-neutral-300: #d4d9d0;
  --color-neutral-400: #b7bdb3;
  --color-neutral-500: #989e94;
  --color-neutral-600: #7a8077;
  --color-neutral-700: #5d635a;
  --color-neutral-800: #424740;
  --color-neutral-900: #2b2f2a;

  /* Der "Für dich"-Bereich behält bewusst den warmen Gold-Akzent des
     ursprünglichen Systems - lokal gesetzt, nicht global (siehe Handoff). */
  --color-gold: #b68235;
  --color-gold-100: #fff3e4;
  --color-gold-300: #facb8d;
  --color-gold-700: #7d5411;
  --color-gold-800: #5a3b0a;

  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-heading-weight: 600;
  --font-body: "Lora", Georgia, "Times New Roman", serif;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2f2a 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2f2a 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2f2a 22%, transparent);
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  /* Auswahl und Antippen sollen sich wie in einer App anfühlen, nicht wie im Browser. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}

h4 { font-size: 20px; }

p { margin: 0 0 var(--space-3); }

a { color: var(--color-accent); text-underline-offset: 3px; }

img { display: block; max-width: 100%; }

/* Zahlen stehen durchgehend tabellarisch - Preise und Entfernungen fluchten dadurch. */
.tnum { font-variant-numeric: tabular-nums; }

.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — Linien — */
.hr {
  height: 1px;
  border: 0;
  margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — Buttons: immer konturiert, nie flächig gefüllt — */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}

.btn svg { display: block; }
.btn:disabled { opacity: 0.45; }

.btn-primary { color: var(--color-accent-700); border-color: var(--color-accent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }

.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-1); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — Etiketten — */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}

.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid currentColor; }

/* — Formularfelder — */
.field > label {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.input {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  -webkit-user-select: text;
  user-select: text;
}

.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

input[type="range"] { accent-color: var(--color-accent); }

/* — Bilder als aufgezogene Tafel — */
.plate {
  filter: saturate(0.78) contrast(1.04) hue-rotate(-6deg);
  border: 6px solid var(--color-surface);
  outline: 1px solid var(--color-divider);
}