/* Einladungsplattform «Unterwegs» - Design-Tokens
   Bildwelt: Schweizer Wanderwegweiser, Herbst, Hüttenstimmung */

:root {
  /* Flächen */
  --paper: oklch(96.5% 0.014 85);          /* warmes Papier, wie Wanderkarte */
  --paper-panel: oklch(93.5% 0.022 82);
  --paper-deep: oklch(90% 0.028 80);
  --divider: oklch(88% 0.02 82);
  --divider-soft: oklch(91% 0.018 82);

  /* Tinte: dunkles Tannengrün statt Navy */
  --ink: oklch(27% 0.035 152);
  --ink-deep: oklch(17.5% 0.028 158);      /* Nachthimmel über der Hütte */
  --ink-soft: oklch(38% 0.03 150);

  /* Wanderweg-Gelb (Signalfarbe der Wegweiser) */
  --signal: oklch(84% 0.155 92);
  --signal-dark: oklch(72% 0.145 85);
  --signal-text: oklch(46% 0.11 80);

  /* Herbstakzente */
  --trail: oklch(56% 0.135 48);            /* Marroni, Laub */
  --moss: oklch(54% 0.085 152);
  --berry: oklch(50% 0.145 28);

  /* Etappenfarben (Wander-Pass, Bändchen) */
  --etappe-start: #E8B93C;
  --etappe-weg: #5C8A4A;
  --etappe-rast: #B4553A;

  /* Text */
  --muted: oklch(44% 0.02 130);
  --muted-soft: oklch(52% 0.018 130);
  --on-ink: oklch(94% 0.012 90);
  --on-ink-muted: oklch(70% 0.018 100);
  --input-border: oklch(83% 0.02 90);

  --shadow-card: 0 18px 40px -28px oklch(30% 0.05 150 / 0.55);
  --shadow-big: 0 34px 70px -34px oklch(25% 0.05 150 / 0.6);

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Nunito Sans', system-ui, -apple-system, sans-serif;

  --radius: 14px;
  --radius-lg: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  /* feines Papierkorn */
  background-image: radial-gradient(oklch(80% 0.03 85 / 0.25) 0.5px, transparent 0.5px);
  background-size: 4px 4px;
}
::selection { background: oklch(84% 0.155 92 / 0.45); }

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }

a { color: var(--signal-text); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  padding: 15px 32px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.btn-gold { background: var(--signal); color: var(--ink-deep); }
.btn-gold:hover { background: var(--signal-dark); }
.btn-gold:disabled { background: oklch(91% 0.015 90); color: oklch(65% 0.02 90); cursor: not-allowed; }
.btn-outline { background: none; border: 1.5px solid var(--ink); color: var(--ink); font-weight: 700; }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-outline-light { background: none; border: 1.5px solid var(--input-border); color: var(--ink); font-weight: 700; }
.btn-outline-light:hover { border-color: var(--ink-soft); }
.btn-sm { padding: 9px 18px; font-size: 14px; }

/* ---------- Wegweiser ---------- */
/* Gelbes Schild im Stil der Schweizer Wanderwegweiser, Spitze rechts */
.wegweiser {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--signal); color: oklch(22% 0.04 90);
  padding: 10px 34px 10px 18px;
  font-weight: 800; font-size: 15px; letter-spacing: 0.01em;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  filter: drop-shadow(0 6px 12px oklch(40% 0.06 90 / 0.25));
}
.wegweiser .zeit { font-weight: 700; font-size: 13px; opacity: 0.72; }
.wegweiser.links {
  padding: 10px 18px 10px 34px;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
}

/* gestrichelte Wegspur */
.trail-dash {
  height: 0; border-top: 2px dashed oklch(70% 0.06 100 / 0.7);
  margin: 0 auto;
}

/* ---------- Formulare ---------- */
label.field-label {
  display: block; font-weight: 700; color: var(--ink);
  font-size: 14px; margin-bottom: 6px;
}
input[type=text], input[type=email], input[type=date], input[type=time],
input[type=url], input[type=number], input[type=password], input[type=datetime-local],
select, textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--input-border);
  font-size: 15px;
  font-family: inherit;
  background: white;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--signal);
  outline-offset: 1px;
  border-color: var(--signal-dark);
}
textarea { min-height: 80px; resize: vertical; }

/* ---------- Karten ---------- */
.card {
  background: white;
  border: 1px solid var(--divider-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
}

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ink); color: var(--paper);
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
}
.chip .dot-color { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }

/* ---------- Utility ---------- */
.muted { color: var(--muted); }
.center { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}