/* === Designsystem "Lichtung" – Tokens auf Bootstrap 5 gemappt ===
 * Quelle: concepts/ Designstudie. Angepasst fuer SSR (keine SPA-Views). */
:root {
  --bs-primary: #1f6b47; --bs-primary-rgb: 31, 107, 71;
  --forest: #1f6b47; --forest-deep: #123a28; --forest-soft: #e4f0e7;
  --amber: #e07a3e; --amber-soft: #fbe7d6; --acorn: #c79224; --acorn-soft: #f7eccb;
  --canvas: #f4f8f0; --ink: #15241c; --muted: #5f7166; --line: #e2ebe0;
  --bs-body-bg: #f4f8f0; --bs-body-color: #15241c;
  --bs-body-font-family: 'Hanken Grotesk', system-ui, sans-serif;
  --bs-border-radius: 14px; --bs-border-radius-lg: 20px; --bs-border-radius-xl: 26px;
  --bs-border-color: #e2ebe0;
}
body { font-family: 'Hanken Grotesk', sans-serif; background: var(--canvas); color: var(--ink); }
h1, h2, h3, h4, h5, .display {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  letter-spacing: -.02em; color: var(--forest-deep); line-height: 1.06;
}

/* Buttons */
.btn { font-weight: 700; border-radius: 999px; padding: .7rem 1.4rem; }
.btn-sm { padding: .35rem .9rem; }
.btn-primary { --bs-btn-bg: var(--forest); --bs-btn-border-color: var(--forest); --bs-btn-hover-bg: var(--forest-deep); --bs-btn-hover-border-color: var(--forest-deep); --bs-btn-active-bg: var(--forest-deep); }
.btn-outline-primary { --bs-btn-color: var(--forest); --bs-btn-border-color: var(--forest); --bs-btn-hover-bg: var(--forest-soft); --bs-btn-hover-border-color: var(--forest); --bs-btn-hover-color: var(--forest-deep); }
.btn-amber { --bs-btn-bg: var(--amber); --bs-btn-color: #fff; --bs-btn-border-color: var(--amber); --bs-btn-hover-bg: #cf6a30; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #cf6a30; }
.btn:focus-visible { outline: 3px solid var(--acorn); outline-offset: 2px; }

/* Chips / Badges */
.chip { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .8rem; padding: .3rem .8rem; border-radius: 999px; text-decoration: none; }
.chip-forest { background: var(--forest-soft); color: var(--forest); }
.chip-amber { background: var(--amber-soft); color: #b5571f; }
.chip-acorn { background: var(--acorn-soft); color: #8a6410; }

.text-forest { color: var(--forest) !important; }
.text-amber { color: var(--amber) !important; }
.text-acorn { color: var(--acorn) !important; }
.text-muted2 { color: var(--muted) !important; }
.bg-forest { background: var(--forest) !important; }
.bg-forest-soft { background: var(--forest-soft) !important; }
.shadow-soft { box-shadow: 0 14px 40px -18px rgba(18, 58, 40, .35) !important; }
.shadow-soft-sm { box-shadow: 0 6px 18px -10px rgba(18, 58, 40, .30) !important; }
.card { border-color: var(--line); }

/* Nav */
.navbar { background: rgba(244, 248, 240, .85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.navbar-brand { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 1.3rem; color: var(--forest-deep); display: flex; align-items: center; gap: .5rem; }
.nav-link { font-weight: 600; color: var(--muted); border-radius: 10px; cursor: pointer; }
.nav-link:hover, .nav-link.active { color: var(--forest); background: var(--forest-soft); }

/* Promo-Bar oben */
.promo-note { background: var(--forest-deep); color: #cfe6d7; font-size: .82rem; }
.promo-note a { color: #fff; }

/* Hero + Signaturen */
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--amber); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.1rem); font-weight: 800; }
.tail { position: absolute; right: -30px; top: -30px; width: 380px; height: 380px; opacity: .5; pointer-events: none; z-index: 0; }
.acorn-badge { position: absolute; top: -16px; right: 22px; background: var(--acorn); color: #fff; border-radius: 999px; padding: .45rem .85rem; font-weight: 700; font-size: .82rem; display: inline-flex; align-items: center; gap: .4rem; }
.collected { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 2.7rem; color: var(--forest); line-height: 1; }
.progress { height: 12px; background: var(--forest-soft); border-radius: 999px; }
.progress-bar { background: linear-gradient(90deg, var(--amber), var(--acorn)); }

/* Event-Karten */
.ecard .top { height: 122px; position: relative; border-radius: 14px 14px 0 0; }
.ecard .seal { position: absolute; bottom: -15px; left: 18px; width: 38px; height: 38px; border-radius: 11px; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px -10px rgba(18, 58, 40, .3); }
.collect-line { display: flex; align-items: center; gap: .4rem; color: var(--acorn); font-weight: 700; font-size: .9rem; }

/* Statistiken / Balken */
.stat .n { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 2rem; color: var(--forest); line-height: 1; }
.bar { height: 8px; border-radius: 999px; background: var(--forest-soft); overflow: hidden; max-width: 230px; margin-top: 6px; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--forest), var(--acorn)); }
.impact { background: var(--forest-soft); border-radius: 16px; }
.big-collect { background: var(--forest); color: #fff; border-radius: 22px; position: relative; overflow: hidden; }
.big-collect .amount { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 3rem; line-height: 1; }

/* Ticket mit Perforation (Bestaetigungs-/Ticketansicht) */
.ticket .head { background: var(--forest); color: #fff; }
.ticket .perf { height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px); position: relative; }
.ticket .perf::before, .ticket .perf::after { content: ""; position: absolute; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--canvas); }
.ticket .perf::before { left: -11px; }
.ticket .perf::after { right: -11px; }
.qr { width: 172px; height: 172px; margin: 0 auto; border-radius: 14px; background: #fff; border: 1px solid var(--line); padding: 10px; }
.code { font-family: 'Bricolage Grotesque'; font-weight: 700; letter-spacing: .14em; }

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