/* ================================================================
   Weihnachtsmarkt-Tour – Gestaltung (auf Bootstrap 5.3)
   Tannengrün, Weihnachtsrot, Gold, Creme
   ================================================================ */
:root {
  --wm-gruen: #1d4a37;
  --wm-gruen-dunkel: #12301f;
  --wm-gruen-hell: #e4efe8;
  --wm-rot: #b3202a;
  --wm-rot-dunkel: #8a1820;
  --wm-gold: #d4a72c;
  --wm-gold-hell: #f6ebc9;
  --wm-creme: #fbf6ec;
  --wm-linie: #e8dfcf;
  --wm-text: #2b2420;
  --wm-text-leise: #7a6f62;

  --bs-body-bg: var(--wm-creme);
  --bs-body-color: var(--wm-text);
  --bs-primary: var(--wm-rot);
  --bs-primary-rgb: 179, 32, 42;
  --bs-link-color: var(--wm-rot-dunkel);
  --bs-link-color-rgb: 138, 24, 32;
  --bs-link-hover-color: var(--wm-rot);
  --bs-border-color: var(--wm-linie);
  --bs-border-radius: .6rem;
}

body { background: var(--wm-creme); }

h1, h2, h3, .wm-titel, .navbar-brand, .tn-app-name, .einfach-appname {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
.wm-titel { color: var(--wm-gruen); font-weight: 700; }

/* ---- Buttons ---- */
.btn-primary {
  --bs-btn-bg: var(--wm-rot); --bs-btn-border-color: var(--wm-rot);
  --bs-btn-hover-bg: var(--wm-rot-dunkel); --bs-btn-hover-border-color: var(--wm-rot-dunkel);
  --bs-btn-active-bg: var(--wm-rot-dunkel); --bs-btn-active-border-color: var(--wm-rot-dunkel);
  --bs-btn-disabled-bg: var(--wm-rot); --bs-btn-disabled-border-color: var(--wm-rot);
  --bs-btn-focus-shadow-rgb: 179, 32, 42;
}
.btn-success {
  --bs-btn-bg: var(--wm-gruen); --bs-btn-border-color: var(--wm-gruen);
  --bs-btn-hover-bg: var(--wm-gruen-dunkel); --bs-btn-hover-border-color: var(--wm-gruen-dunkel);
  --bs-btn-active-bg: var(--wm-gruen-dunkel); --bs-btn-active-border-color: var(--wm-gruen-dunkel);
}
.btn-outline-primary {
  --bs-btn-color: var(--wm-rot); --bs-btn-border-color: var(--wm-rot);
  --bs-btn-hover-bg: var(--wm-rot); --bs-btn-hover-border-color: var(--wm-rot);
  --bs-btn-active-bg: var(--wm-rot-dunkel); --bs-btn-active-border-color: var(--wm-rot-dunkel);
}
.btn-outline-success {
  --bs-btn-color: var(--wm-gruen); --bs-btn-border-color: var(--wm-gruen);
  --bs-btn-hover-bg: var(--wm-gruen); --bs-btn-hover-border-color: var(--wm-gruen);
  --bs-btn-active-bg: var(--wm-gruen-dunkel);
}
.text-bg-success { background-color: var(--wm-gruen) !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--wm-gold); box-shadow: 0 0 0 .2rem rgba(212, 167, 44, .3);
}
.form-check-input:checked { background-color: var(--wm-gruen); border-color: var(--wm-gruen); }

/* ---- Karten ---- */
.wm-card { border: 1px solid var(--wm-linie); border-radius: .9rem; background: #fff; overflow: hidden; }
.wm-card > .card-header {
  background: var(--wm-gruen-hell); border-bottom: 1px solid var(--wm-linie);
  font-weight: 600; color: var(--wm-gruen);
}
.wm-stat { border-radius: .9rem; background: #fff; border: 1px solid var(--wm-linie); padding: 1rem 1.1rem; height: 100%; }
.wm-stat .zahl { font-family: "Playfair Display", Georgia, serif; font-size: 1.75rem; font-weight: 700; color: var(--wm-gruen); line-height: 1.1; }
.wm-stat .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wm-text-leise); }
.wm-stat.rot .zahl { color: var(--wm-rot); }
.wm-stat.gold { background: var(--wm-gruen); border-color: var(--wm-gruen); }
.wm-stat.gold .zahl { color: var(--wm-gold); }
.wm-stat.gold .label { color: #cfe0d6; }

.table > :not(caption) > * > * { padding: .55rem .6rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--wm-text-leise); font-weight: 600; background: transparent; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--wm-gold-hell); }
tr.storniert td { text-decoration: line-through; color: var(--wm-text-leise); }
tr.storniert td.kein-strich { text-decoration: none; }

/* ---- Admin-Navigation ---- */
.wm-navbar { background: linear-gradient(180deg, var(--wm-gruen) 0%, var(--wm-gruen-dunkel) 100%); }
.wm-navbar .nav-link { color: rgba(251, 246, 236, .82); font-size: .93rem; }
.wm-navbar .nav-link:hover, .wm-navbar .nav-link:focus { color: #fff; }
.wm-navbar .nav-link.active { color: var(--wm-gold); font-weight: 600; }
.wm-badge-gold { background: var(--wm-gold); color: var(--wm-gruen-dunkel); font-family: system-ui, sans-serif; font-size: .65rem; }
.wm-subbar { background: var(--wm-gold-hell); border-bottom: 1px solid var(--wm-linie); padding: .45rem 0; }
.wm-subbar-label { color: var(--wm-gruen); letter-spacing: .05em; }
.logo-sm { width: 34px; height: 34px; }
.logo-lg { width: 84px; height: 84px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }

/* Lichterkette unter Kopfbereichen */
.lichterkette {
  height: 16px;
  background:
    radial-gradient(circle at 10px 10px, #ffd54a 3.5px, transparent 4.5px) 0 0 / 80px 16px repeat-x,
    radial-gradient(circle at 30px 10px, #ff5a5a 3.5px, transparent 4.5px) 0 0 / 80px 16px repeat-x,
    radial-gradient(circle at 50px 10px, #7ee0a8 3.5px, transparent 4.5px) 0 0 / 80px 16px repeat-x,
    radial-gradient(circle at 70px 10px, #8fc7ff 3.5px, transparent 4.5px) 0 0 / 80px 16px repeat-x,
    linear-gradient(var(--wm-gruen-dunkel), var(--wm-gruen-dunkel)) 0 5px / 100% 1px no-repeat,
    var(--wm-gruen-dunkel);
  animation: funkeln 2.4s ease-in-out infinite alternate;
}
.lichterkette-karte { background-color: var(--wm-gruen); }
@keyframes funkeln { from { filter: brightness(.85); } to { filter: brightness(1.25); } }

/* ---- Einfache Seiten ---- */
.einfach-hintergrund {
  min-height: 100vh; position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(212, 167, 44, .35), transparent 60%),
    linear-gradient(180deg, #0d2418 0%, var(--wm-gruen) 70%, #24553f 100%);
}
.einfach-appname { font-size: 2rem; font-weight: 700; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.schnee-bereich { position: relative; }
canvas.schnee { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pin-anzeige { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 2.4rem; letter-spacing: .5rem; font-weight: 700; color: var(--wm-rot); background: var(--wm-gold-hell); border-radius: .7rem; padding: .5rem 1rem; display: inline-block; }
.pin-eingabe { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.6rem; letter-spacing: .6rem; text-align: center; }

/* ---- Teilnehmer-App ---- */
.tn-container { max-width: 720px; }
.tn-kopf { background: linear-gradient(180deg, #0d2418 0%, var(--wm-gruen) 100%); color: #fbf6ec; overflow: hidden; }
.tn-app-name { font-size: 1.15rem; font-weight: 700; color: #fff; }
.tn-main { padding-bottom: 6.5rem !important; }
.tn-nav { background: #fff; border-top: 1px solid var(--wm-linie); box-shadow: 0 -4px 18px rgba(0, 0, 0, .06); padding-bottom: env(safe-area-inset-bottom); }
.tn-nav-link { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .55rem 0 .5rem; text-decoration: none; color: var(--wm-text-leise); font-size: .72rem; }
.tn-nav-link i { font-size: 1.35rem; }
.tn-nav-link.active { color: var(--wm-rot); font-weight: 600; }

.station-karte { display: flex; gap: .9rem; align-items: center; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--wm-linie); border-radius: .9rem; padding: .9rem 1rem; transition: transform .1s ease, border-color .1s ease; }
.station-karte:hover, .station-karte:focus { border-color: var(--wm-gold); color: inherit; transform: translateY(-1px); }
.station-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 46px; font-size: 1.3rem; background: var(--wm-gruen-hell); color: var(--wm-gruen); }
.station-icon.restaurant { background: #f8e1e2; color: var(--wm-rot); }

.zeitleiste { list-style: none; padding: 0; margin: 0; position: relative; }
.zeitleiste::before { content: ""; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(var(--wm-gold) 0 6px, transparent 6px 12px); }
.zeitleiste li { position: relative; padding-left: 60px; margin-bottom: 1rem; }
.zeitleiste .station-icon { position: absolute; left: 0; top: 0; border: 3px solid var(--wm-creme); }

.artikel { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px dashed var(--wm-linie); }
.artikel:last-child { border-bottom: 0; }
.artikel .name { flex: 1; min-width: 0; }
.artikel .preis { color: var(--wm-text-leise); font-size: .88rem; }
.stepper { display: flex; align-items: center; gap: .25rem; }
.stepper button { width: 38px; height: 38px; border-radius: 50%; padding: 0; display: grid; place-items: center; font-size: 1.1rem; }
.stepper input { width: 46px; text-align: center; font-weight: 700; border: 0; background: transparent; padding: 0; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.artikel.gewaehlt .name { color: var(--wm-rot); font-weight: 600; }

.buchen-leiste { position: fixed; left: 0; right: 0; bottom: 64px; z-index: 1029; padding: .6rem 0; background: rgba(251, 246, 236, .96); border-top: 1px solid var(--wm-linie); backdrop-filter: blur(4px); }
.summe-gross { font-family: "Playfair Display", Georgia, serif; font-size: 1.6rem; font-weight: 700; color: var(--wm-rot); }

/* ---- Druck (Abrechnung) ---- */
@media print {
  .wm-navbar, .wm-subbar, .lichterkette, .no-print, .btn, form, .tn-nav { display: none !important; }
  main { padding: 0 !important; }
  .wm-card { border: 0; }
  body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .lichterkette { animation: none; }
  .station-karte { transition: none; }
}