/* ===================================================================
   Wesenberg „Trail" — Design System
   Editorial, naturnah, gamifiziert. Spectral (serif) + Hanken Grotesk (UI).
   Mobile-first, vollflaechig (kein Telefon-Bezel). Vanilla CSS, Tokens.
   =================================================================== */

:root {
  /* ── Trail Palette ─────────────────────────────────────────────── */
  --canopy:      #15281d;   /* dunkles Tannengruen (Hero, Profile) */
  --frame:       #10211a;   /* fast schwarz-gruen */
  --pine:        #1e5638;   /* Primaer / aktive Tabs */
  --pine-soft:   #3f6e4a;
  --brass:       #c28e2c;   /* Messing / Gold */
  --gold-light:  #d4b475;   /* helles Gold */
  --ember:       #c2552f;   /* Glut / Terra */
  --paper:       #f2ecde;   /* Papier / Creme (Seiten-BG) */
  --paper-warm:  #fbf8f0;   /* warmes Papier (Tab-Bar) */

  --ink:         #243029;   /* Text dunkel */
  --ink-700:     #4b524d;
  --ink-muted:   #6c7a6c;   /* Text gedaempft */
  --ink-soft:    #8a8f82;   /* heller gedaempft */
  --ink-light:   #bfcab8;   /* hell-gedaempft auf dunkel */
  --ink-dim:     #a7aca0;   /* inaktive Tabs */

  --card:        #ffffff;
  --card-border: #ece4d2;
  --card-border2:#e6e0d0;
  --hairline:    #f0ead9;

  /* abgeleitete Toene */
  --pine-bg:     #e4ede0;
  --pine-bg2:    #eef4e9;
  --pine-bd:     #cfe0c2;
  --brass-bg:    #fbf2e2;
  --brass-bg2:   #fbf0e2;
  --brass-bd:    #f0d9b8;
  --ember-bg:    #f7e7df;
  --earth-bg:    #f0e6d7;
  --earth-text:  #7a5a3a;

  /* Status-Toene */
  --info-bg:     #e4ede0;  --info-text:  #1e5638;
  --warn-bg:     #fbf0e2;  --warn-text:  #9c7320;
  --error-bg:    #f7e7df;  --error-text: #a8431f;

  /* Radii / Schatten */
  --r-sm: 12px;
  --r:    14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --shadow-card: 0 6px 18px -12px rgba(35,48,40,.25);
  --shadow-pop:  0 8px 22px -14px rgba(30,86,56,.5);
  --shadow-cta:  0 12px 26px -10px rgba(30,86,56,.6);

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;

  /* Fonts */
  --serif: 'Spectral', Georgia, serif;
  --sc:    'Spectral SC', 'Spectral', serif;
  --ui:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --maxw: 480px;

  --tabbar-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--ui);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes floaty  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes pulse   { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes confettiFall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(320px) rotate(220deg); opacity: 0; }
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* Default-Groesse fuer Inline-Icons (Makro) — Kontext-Regeln weiter unten
   (.btn svg, .tabbar a svg, …) ueberschreiben diese Basis. */
svg.ico { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -3px; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); margin: 0; font-weight: 700; }

/* ── App-Shell: zentrierte Mobile-Spalte ──────────────────────────── */

.app-shell {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  position: relative;
  overflow-x: hidden;
  box-shadow: 0 0 60px -30px rgba(20,40,29,.4);
}

main.app-main {
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 18px);
}

.screen { padding: 0; }
.screen-pad { padding: 18px; }
.gap-pad { padding: 0 18px; }
.section-gap { margin-top: 20px; }

.kicker {
  font: 600 11px var(--ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
}
.kicker-light { color: var(--gold-light); }

.muted { color: var(--ink-soft); }
.dim { color: var(--ink-muted); }
.serif { font-family: var(--serif); }
.center { text-align: center; }

/* ── Flash messages ──────────────────────────────────────────────── */
.flash-wrap { padding: 12px 18px 0; }
.alert {
  border-radius: var(--r);
  padding: 12px 14px;
  font: 500 13.5px var(--ui);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.alert svg { width: 18px; height: 18px; flex: 0 0 auto; }
.alert-info  { background: var(--info-bg);  color: var(--info-text); }
.alert-warn  { background: var(--warn-bg);  color: var(--warn-text); }
.alert-error { background: var(--error-bg); color: var(--error-text); }

/* ── Buttons / Pills ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px var(--ui);
  border: none; cursor: pointer;
  border-radius: var(--r);
  padding: 14px 20px;
  transition: transform .1s ease, box-shadow .15s ease;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--pine); color: #fff; box-shadow: var(--shadow-cta); }
.btn-secondary { background: #fff; color: var(--canopy); border: 1px solid var(--card-border); }
.btn-ghost-light { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.btn-gold { background: var(--gold-light); color: var(--canopy); }
.btn-full { width: 100%; }
.btn-lg { padding: 16px 22px; font-size: 16px; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 11px var(--ui);
  padding: 5px 11px; border-radius: 30px;
  background: #fff; color: var(--ink-700); border: 1px solid var(--card-border);
}
.pill svg { width: 13px; height: 13px; }
.pill-pine  { background: var(--pine-bg);  color: var(--pine); border: none; }
.pill-brass { background: var(--brass-bg); color: #9c7320; border: none; }
.pill-ember { background: var(--ember-bg); color: #7a2f1a; border: none; }
.pill-earth { background: var(--earth-bg); color: var(--earth-text); border: none; }
.pill-new   { background: var(--ember-bg); color: var(--ember); border: none; font-weight: 700; }
.pill-active { background: var(--pine); color: #fff; border: none; font-weight: 700; }

/* ── Hero (Home) ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 360px;
  padding: calc(var(--safe-top) + 40px) 24px 24px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(16,33,26,.05) 0%, rgba(16,33,26,.35) 55%, rgba(16,33,26,.92) 100%),
    linear-gradient(160deg, #3a6b4d 0%, #23482f 48%, #15281d 100%);
  background-size: cover; background-position: center;
}
.hero.has-photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,33,26,.05) 0%, rgba(16,33,26,.35) 55%, rgba(16,33,26,.92) 100%);
}
.hero .paper-texture {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px);
  opacity: .5; pointer-events: none;
}
.hero-content { position: relative; }
.hero-greet { font: 400 16px var(--ui); color: rgba(255,255,255,.85); margin-top: 14px; }
.hero-title { font: 700 28px/1.14 var(--serif); margin-top: 2px; }
.hero-actions { display: flex; gap: 8px; margin-top: 18px; }
.hero-actions .btn { flex: 1; }
.hero-side {
  width: 52px; flex: 0 0 auto;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r); display: grid; place-items: center;
  backdrop-filter: blur(6px); color: #fff; font-size: 18px;
}

.streak-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(194,85,47,.92); color: #fff;
  padding: 7px 13px; border-radius: 30px;
  font: 700 11.5px var(--ui);
}
.streak-dots { display: inline-flex; gap: 3px; align-items: center; }
.streak-dots i { width: 6px; height: 6px; border-radius: 50%; background: #fff; display: inline-block; }
.streak-dots i.open { background: transparent; border: 1.5px solid #fff; animation: pulse 1.4s ease-in-out infinite; }

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
  display: block;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--r-lg); padding: 18px;
  box-shadow: var(--shadow-card);
}
.card-flat { box-shadow: none; }

/* Weiter-sammeln Card */
.continue-card { margin: -28px 18px 0; position: relative; z-index: 2; }
.continue-top { display: flex; align-items: center; gap: 16px; }
.continue-info { flex: 1; min-width: 0; }
.continue-info .ttl { font: 700 18px var(--serif); margin-top: 2px; }
.continue-info .sub { font: 500 13px var(--ui); color: var(--ink-muted); margin-top: 3px; }
.continue-foot {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between;
}
.continue-foot .arrow { font: 700 14px var(--ui); color: var(--pine); }

/* ── Fortschritts-Ring (conic-gradient) ───────────────────────────── */
.ring {
  --pct: 0; --ring-fg: var(--pine); --ring-bg: #e7dfcb; --ring-size: 74px; --ring-inner: 8px;
  width: var(--ring-size); height: var(--ring-size); border-radius: 50%;
  flex: 0 0 auto; position: relative;
  background: conic-gradient(var(--ring-fg) calc(var(--pct) * 1%), var(--ring-bg) 0);
  display: grid; place-items: center;
}
.ring::before {
  content: ""; position: absolute; inset: var(--ring-inner);
  background: var(--card); border-radius: 50%;
}
.ring-num { position: relative; text-align: center; line-height: 1; }
.ring-num b { font: 700 22px var(--ui); color: var(--pine); display: block; }
.ring-num span { font: 600 9px var(--ui); color: var(--ink-soft); }
.ring-dark { --ring-fg: var(--brass); --ring-bg: rgba(255,255,255,.14); --ring-size: 88px; --ring-inner: 9px; }
.ring-dark::before { background: var(--canopy); }
.ring-dark .ring-num b { color: #fff; font-size: 28px; }
.ring-dark .ring-num span { color: var(--ink-light); font-size: 10px; }

/* ── Avatar-Stack (Social Proof) ──────────────────────────────────── */
.avatars { display: inline-flex; align-items: center; }
.avatars .av {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #fff; display: inline-grid; place-items: center;
  font: 700 10px var(--ui); color: var(--canopy);
}
.avatars .av:not(:first-child) { margin-left: -8px; }
.avatars .av.a1 { background: #c9a55c; }
.avatars .av.a2 { background: #7daf8e; }
.avatars .av.a3 { background: #c2552f; }
.avatars .av.a4 { background: #3a6b4d; }
.avatars .av.more { background: var(--pine-bg); color: var(--pine); }
.avatars .av.dark { border-color: var(--canopy); }
.avatars-label { font: 600 12px var(--ui); color: var(--ink-muted); margin-left: 10px; }
.avatars-label b { color: var(--pine); }

/* ── Knappheits-Streifen ─────────────────────────────────────────── */
.scarcity {
  display: flex; align-items: center; gap: 12px;
  background: var(--brass-bg2); border: 1px solid var(--brass-bd);
  border-radius: var(--r); padding: 13px 15px;
}
.scarcity .num {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
  background: var(--brass); color: #fff;
  font: 700 14px var(--serif); display: grid; place-items: center;
}
.scarcity .body { flex: 1; }
.scarcity .top { display: flex; align-items: baseline; justify-content: space-between; }
.scarcity .ttl { font: 700 13.5px var(--ui); color: var(--ink); }
.scarcity .time { font: 700 11.5px var(--ui); color: var(--ember); }
.scarcity .sub { font: 500 12px var(--ui); color: #a07b2e; margin-top: 2px; }
.scarcity .bar { height: 5px; background: #f0e0c4; border-radius: 20px; margin-top: 8px; overflow: hidden; }
.scarcity .bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--brass), #e0a85a); border-radius: 20px; }

/* ── Listen-Titel ────────────────────────────────────────────────── */
.list-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.list-head h2 { font: 700 17px var(--serif); }
.list-head .more { font: 600 12px var(--ui); color: var(--ink-soft); }

/* ── Challenge-Mini-Card (Liste) ─────────────────────────────────── */
.ch-mini {
  display: flex; gap: 13px;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--r); padding: 11px;
}
.ch-mini + .ch-mini { margin-top: 12px; }
.ch-thumb {
  width: 58px; height: 58px; border-radius: var(--r-sm); flex: 0 0 auto;
  background: linear-gradient(150deg, #3a6b4d, #15281d);
  position: relative; overflow: hidden;
}
.ch-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ch-thumb.green2 { background: linear-gradient(150deg, #6f8a5a, #3a4a28); }
.ch-thumb::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.07) 0 1px, transparent 1px 8px);
}
.ch-mini-body { flex: 1; min-width: 0; }
.ch-mini-top { display: flex; justify-content: space-between; align-items: center; }
.ch-mini-name { font: 700 15px var(--serif); }
.ch-mini-sub { font: 500 12px var(--ui); color: var(--ink-soft); margin-top: 2px; }

/* Fortschrittsbalken */
.pbar { height: 6px; background: #eee6d5; border-radius: 20px; margin-top: 9px; overflow: hidden; }
.pbar > span { display: block; height: 100%; background: var(--pine); border-radius: 20px; }
.pbar.thick { height: 9px; }
.pbar.grad > span { background: linear-gradient(90deg, var(--pine), var(--pine-soft)); }

/* ── Detail-Cover (Hero kleiner) ─────────────────────────────────── */
.cover-hero {
  position: relative; min-height: 208px;
  padding: calc(var(--safe-top) + 32px) 22px 18px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(16,33,26,.1), rgba(16,33,26,.7)),
    linear-gradient(155deg, #3a6b4d, #23482f 55%, #15281d);
  background-size: cover; background-position: center;
}
.cover-hero.ember {
  background:
    linear-gradient(180deg, rgba(16,33,26,.15), rgba(16,33,26,.78)),
    linear-gradient(150deg, #c2552f, #7a2f1a);
}
.cover-hero.has-photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,33,26,.1), rgba(16,33,26,.72));
}
.cover-row { display: flex; justify-content: space-between; position: relative; }
.cover-meta { position: relative; }
.cover-title { font: 700 26px/1.1 var(--serif); margin-top: 9px; }
.icon-circle {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  display: grid; place-items: center; backdrop-filter: blur(6px); color: #fff;
}
.cover-tag {
  display: inline-flex; gap: 6px; align-items: center;
  font: 600 10.5px var(--ui); letter-spacing: .04em; text-transform: uppercase;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  padding: 5px 11px; border-radius: 30px;
}

/* ── Dunkle Fortschritts-Card (Detail) ───────────────────────────── */
.progress-dark {
  background: var(--canopy); border-radius: var(--r-xl); padding: 20px;
  color: #fff; position: relative; overflow: hidden;
}
.progress-dark::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(125deg, rgba(255,255,255,.04) 0 1px, transparent 1px 14px);
}
.progress-dark-row { position: relative; display: flex; align-items: center; gap: 18px; }
.progress-dark .info { flex: 1; }
.progress-dark .lead { font: 600 17px/1.25 var(--serif); margin-top: 4px; }
.progress-dark .note { font: 500 12px var(--ui); color: var(--ink-light); margin-top: 6px; }
.pin-reserve {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font: 700 10.5px var(--ui); color: var(--canopy);
  background: var(--gold-light); padding: 5px 10px; border-radius: 20px;
}

/* ── Sammel-Pass / Tiers ─────────────────────────────────────────── */
.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tier {
  background: var(--paper); border: 1px solid var(--card-border2);
  border-radius: var(--r); padding: 13px 6px; text-align: center; position: relative;
}
.tier .badge {
  width: 32px; height: 32px; margin: 0 auto; border-radius: 50%;
  display: grid; place-items: center; font: 700 13px var(--ui);
}
.tier .name { font: 700 11px var(--ui); margin-top: 7px; }
.tier .thr { font: 600 9.5px var(--ui); color: var(--ink-soft); }
.tier.done { background: var(--pine-bg2); border-color: var(--pine-bd); }
.tier.done .badge { background: var(--brass); color: #fff; }
.tier.done .name { color: var(--pine); }
.tier.done .thr { color: #7e8d76; }
.tier.next { background: var(--brass-bg); border: 1.5px solid var(--brass); }
.tier.next .badge { background: #fff; border: 2px solid var(--brass); color: var(--brass); }
.tier.next .name { color: #9c7320; }
.tier.next .thr { color: #b9913f; }
.tier .next-tag {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font: 700 8px var(--ui); letter-spacing: .06em;
  background: var(--brass); color: #fff; padding: 2px 7px; border-radius: 20px;
}
.tier.locked { opacity: .7; }
.tier.locked .badge { background: #e7dfcb; color: var(--ink-dim); }
.tier.locked .name { color: var(--ink-soft); }
.tier.locked .thr { color: var(--ink-dim); }

/* ── So funktioniert's ───────────────────────────────────────────── */
.steps { display: flex; flex-direction: column; gap: 9px; }
.step {
  display: flex; gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--card-border);
  border-radius: 13px; padding: 11px 13px;
}
.step .n {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  background: var(--pine-bg); color: var(--pine);
  font: 700 13px var(--ui); display: grid; place-items: center;
}
.step .txt { font: 500 13px var(--ui); color: var(--ink-700); }

/* ── Naechste Punkte / Punkt-Reihen ──────────────────────────────── */
.pt-row {
  display: flex; gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--card-border);
  border-radius: 13px; padding: 11px 13px;
}
.pt-row + .pt-row { margin-top: 8px; }
.pt-num {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font: 700 13px var(--ui);
}
.pt-num.active { background: var(--pine); color: #fff; }
.pt-num.locked { background: #eee6d5; color: var(--ink-dim); }
.pt-body { flex: 1; min-width: 0; }
.pt-name { font: 700 13.5px var(--ui); color: var(--ink); }
.pt-meta { font: 500 11.5px var(--ui); color: var(--ink-soft); }
.pt-lock svg { width: 14px; height: 14px; stroke: #bcbfb6; }

/* ── Sticky CTA ──────────────────────────────────────────────────── */
.sticky-cta {
  position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  padding: 18px; margin-top: 6px;
  background: linear-gradient(180deg, rgba(242,236,222,0), var(--paper) 30%);
  z-index: 5;
}

/* ── Upload / Jetzt dran (Progress) ──────────────────────────────── */
.active-card {
  background: #fff; border: 1.5px solid var(--pine);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-pop);
}
.active-cover {
  height: 118px; position: relative;
  background: linear-gradient(150deg, #3a6b4d, #15281d);
  display: flex; align-items: flex-end; padding: 12px 14px;
}
.active-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.active-cover::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.06) 0 1px, transparent 1px 10px);
}
.active-cover .tag {
  position: relative; font: 700 11px var(--ui); color: #fff;
  background: rgba(0,0,0,.3); padding: 5px 9px; border-radius: 8px;
}
.active-body { padding: 15px 16px 16px; }
.active-task { font: 500 13px var(--ui); color: var(--ink-muted); }
.gps-line {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font: 600 11.5px var(--ui); color: var(--pine);
}
.gps-line.warn { color: var(--ember); }
.gps-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pine); display: inline-block; }
.gps-line.warn .gps-dot { background: var(--ember); }

.upload-btn {
  margin-top: 13px; width: 100%;
  background: var(--pine); color: #fff; border: none; cursor: pointer;
  border-radius: var(--r); min-height: 56px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 16px var(--ui); box-shadow: var(--shadow-cta);
}
.upload-btn:disabled { opacity: .55; }
.upload-btn svg { width: 20px; height: 20px; }
.file-hidden { display: none; }
.file-pick {
  margin-top: 13px; display: flex; align-items: center; gap: 10px;
  border: 1.5px dashed var(--pine-bd); border-radius: var(--r);
  padding: 12px 14px; font: 600 13px var(--ui); color: var(--pine);
  background: var(--pine-bg2); cursor: pointer;
}
.file-pick svg { width: 20px; height: 20px; flex: 0 0 auto; }
.file-name { font: 500 12px var(--ui); color: var(--ink-soft); margin-top: 8px; }

/* in Pruefung (Shimmer) */
.review-box {
  background: var(--brass-bg2); border: 1px solid var(--brass-bd);
  border-radius: var(--r); padding: 14px 15px;
  display: flex; align-items: center; gap: 11px;
}
.review-q {
  width: 42px; height: 42px; border-radius: var(--r-sm); flex: 0 0 auto;
  background: linear-gradient(110deg, #f0d9b8, #fbf0e2, #f0d9b8);
  background-size: 200% 100%; animation: shimmer 1.6s linear infinite;
  display: grid; place-items: center; color: var(--brass); font: 700 16px var(--serif);
}
.review-box .ttl { font: 700 13.5px var(--ui); color: #9c7320; }
.review-box .sub { font: 500 12px var(--ui); color: #b9913f; }

/* gerade angenommen */
.accepted-box {
  display: flex; gap: 12px; align-items: center;
  background: var(--pine-bg2); border: 1px solid var(--pine-bd);
  border-radius: var(--r); padding: 13px 15px;
}
.accepted-ico {
  width: 46px; height: 46px; border-radius: var(--r-sm); flex: 0 0 auto;
  background: linear-gradient(150deg, #6f8a5a, #3a4a28);
  display: grid; place-items: center; color: #fff;
}
.accepted-ico svg { width: 22px; height: 22px; }
.accepted-box .ttl { font: 700 13.5px var(--ui); color: var(--pine); }
.accepted-box .sub { font: 500 12px var(--ui); color: #5e7a5e; }
.accepted-thumb { width: 100%; border-radius: var(--r); margin-top: 12px; max-height: 220px; object-fit: cover; }

.reject-box {
  background: var(--error-bg); color: var(--error-text);
  border-radius: var(--r); padding: 12px 14px;
  font: 500 12.5px var(--ui); margin-top: 10px;
  display: flex; gap: 8px; align-items: flex-start;
}
.reject-box svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* mini progress card (Progress-Header) */
.mini-progress {
  background: #fff; border: 1px solid var(--card-border);
  border-radius: var(--r); padding: 14px 16px;
}
.mini-progress .row { display: flex; justify-content: space-between; align-items: baseline; }
.mini-progress .row b { font: 700 14px var(--ui); color: var(--ink); }
.mini-progress .pct { font: 700 13px var(--ui); color: var(--pine); }
.mini-progress .note { font: 500 12px var(--ui); color: var(--ink-soft); margin-top: 8px; }

.back-head { display: flex; align-items: center; gap: 9px; }
.back-circle { width: 36px; height: 36px; border-radius: 50%; background: var(--canopy); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.back-circle svg { width: 18px; height: 18px; }
.back-head .ttl { font: 700 20px var(--serif); }

/* Karte */
#mini-map, .map-mini {
  height: 150px; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--pine-bd); background: #dde6d2;
}
.section-title-sm { font: 700 14px var(--serif); margin-bottom: 10px; }

/* ── Pp-Accordion (Progress-Liste, bestehender Loop) ─────────────── */
.pp-cards { display: flex; flex-direction: column; gap: 9px; }
.pp-acc {
  background: #fff; border: 1px solid var(--card-border);
  border-radius: 13px; overflow: hidden;
}
.pp-acc[open] { box-shadow: var(--shadow-card); }
.pp-acc summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px; padding: 12px 13px;
}
.pp-acc summary::-webkit-details-marker { display: none; }
.pp-status-ico {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
}
.pp-status-ico svg { width: 16px; height: 16px; }
.pp-status-ico.accepted { background: var(--pine); color: #fff; }
.pp-status-ico.submitted { background: var(--brass-bg2); color: var(--brass); }
.pp-status-ico.open { background: #eee6d5; color: var(--ink-dim); }
.pp-headtext { flex: 1; min-width: 0; }
.pp-kicker { display: flex; align-items: center; gap: 7px; font: 600 11px var(--ui); color: var(--ink-soft); }
.pp-name { font: 700 14px var(--ui); color: var(--ink); margin-top: 1px; }
.pp-acc .chev svg { width: 18px; height: 18px; stroke: var(--ink-dim); transition: transform .2s; }
.pp-acc[open] .chev svg { transform: rotate(180deg); }
.pp-acc-body { padding: 0 13px 14px 13px; }
.status-mini {
  font: 700 9.5px var(--ui); padding: 2px 7px; border-radius: 20px;
}
.status-mini.accepted { background: var(--pine-bg); color: var(--pine); }
.status-mini.submitted { background: var(--brass-bg2); color: #9c7320; }
.status-mini.open { background: #eee6d5; color: var(--ink-soft); }

/* ── Events ──────────────────────────────────────────────────────── */
.filter-pills { display: flex; gap: 8px; overflow-x: auto; padding: 16px 18px 0; -webkit-overflow-scrolling: touch; }
.filter-pills::-webkit-scrollbar { display: none; }
.filter-pills a {
  flex: 0 0 auto; font: 600 12px var(--ui); color: var(--ink-700);
  background: #fff; border: 1px solid var(--card-border);
  padding: 8px 15px; border-radius: 30px; white-space: nowrap;
}
.filter-pills a.active { background: var(--pine); color: #fff; border: none; font-weight: 700; }

.event-card {
  background: #fff; border: 1px solid var(--card-border);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-card); display: block;
}
.event-card + .event-card { margin-top: 14px; }
.event-cover {
  height: 104px; position: relative;
  display: flex; align-items: flex-start; justify-content: space-between; padding: 12px;
  background: linear-gradient(150deg, #c2552f, #7a2f1a);
}
.event-cover.green { background: linear-gradient(150deg, #6f8a5a, #3a4a28); }
.event-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-cover::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.07) 0 1px, transparent 1px 10px);
}
.event-cover .when {
  position: relative; font: 700 10.5px var(--ui); color: #fff;
  background: rgba(0,0,0,.28); padding: 5px 9px; border-radius: 7px;
}
.event-cover .free {
  position: relative; font: 700 10px var(--ui); color: #7a2f1a;
  background: #fff; padding: 5px 9px; border-radius: 30px;
}
.event-body { padding: 14px 15px 15px; }
.event-title { font: 700 17px var(--serif); }
.event-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.event-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--hairline);
}
.host-cta {
  background: var(--pine-bg2); border: 1px dashed #9fbf8e;
  border-radius: var(--r); padding: 15px; text-align: center;
}
.host-cta .ttl { font: 700 14px var(--serif); color: var(--pine); }
.host-cta .sub { font: 500 12px var(--ui); color: #5e7a5e; margin-top: 3px; }

/* Event Detail */
.meta-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.meta-tile { background: #fff; border: 1px solid var(--card-border); border-radius: 13px; padding: 12px 8px; text-align: center; }
.meta-tile .v { font: 700 17px var(--ui); color: var(--pine); }
.meta-tile .l { font: 600 9.5px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

.host-card {
  background: #fff; border: 1px solid var(--card-border);
  border-radius: var(--r); padding: 14px; display: flex; gap: 13px; align-items: center;
}
.host-avatar { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; background: linear-gradient(150deg, #c9a55c, #9c7320); }
.host-card .label { font: 600 10.5px var(--ui); color: var(--brass); }
.host-card .name { font: 700 15px var(--serif); }
.host-card .sub { font: 500 11.5px var(--ui); color: var(--ink-soft); }

.scarcity-bar { background: #fff; border: 1px solid var(--brass-bd); border-radius: var(--r); padding: 14px 16px; }
.scarcity-bar .row { display: flex; justify-content: space-between; align-items: baseline; }
.scarcity-bar .row b { font: 700 13px var(--ui); color: var(--ink); }
.scarcity-bar .row .free { font: 700 13px var(--ui); color: var(--ember); }
.scarcity-bar .bar { height: 9px; background: var(--earth-bg); border-radius: 20px; margin-top: 9px; overflow: hidden; }
.scarcity-bar .bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--ember), #e08a4f); border-radius: 20px; }

.cal-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 10px; font: 600 11.5px var(--ui); color: #5e7a5e; }
.cal-note svg { width: 14px; height: 14px; stroke: var(--pine); }

/* Event-Foto-Feed */
.feed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.feed-item { background: #fff; border: 1px solid var(--card-border); border-radius: var(--r); overflow: hidden; }
.feed-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.feed-item .cap { padding: 8px 10px; font: 500 12px var(--ui); color: var(--ink-muted); }
.feed-item .by { padding: 0 10px 8px; font: 500 11px var(--ui); color: var(--ink-soft); }

/* ── Forms ───────────────────────────────────────────────────────── */
.form-group { margin-bottom: 14px; }
.label { display: block; font: 600 12.5px var(--ui); color: var(--ink-700); margin-bottom: 6px; }
.input, .select {
  width: 100%; font: 500 14px var(--ui); color: var(--ink);
  background: #fff; border: 1px solid var(--card-border);
  border-radius: var(--r); padding: 12px 14px;
}
.input:focus, .select:focus { outline: none; border-color: var(--pine); }

/* ── Fotopunkt-Filter (Progress) ─────────────────────────────────── */
.pp-filter { display: flex; gap: 8px; margin-bottom: 12px; }
.pp-filter button {
  flex: 0 0 auto; font: 600 12px var(--ui); color: var(--ink-700);
  background: #fff; border: 1px solid var(--card-border);
  padding: 8px 15px; border-radius: 30px; cursor: pointer;
}
.pp-filter button.active { background: var(--pine); color: #fff; border-color: var(--pine); font-weight: 700; }

/* ── Profil / Sammlung ───────────────────────────────────────────── */
.profile-head {
  background: linear-gradient(160deg, #23482f, #15281d);
  padding: calc(var(--safe-top) + 32px) 24px 22px; color: #fff; position: relative;
}
.profile-head::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.04) 0 1px, transparent 1px 16px);
}
.profile-top { position: relative; display: flex; align-items: center; gap: 14px; }
.logout-btn {
  margin-left: auto; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  display: grid; place-items: center; color: #fff;
}
.logout-btn svg { width: 18px; height: 18px; }
.profile-av { width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(150deg, #c9a55c, #9c7320); border: 3px solid rgba(255,255,255,.2); display: grid; place-items: center; font: 700 22px var(--serif); color: var(--canopy); position: relative; flex: 0 0 auto; }
.profile-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile-av .av-edit {
  position: absolute; right: -3px; bottom: -3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold-light); color: var(--canopy);
  display: grid; place-items: center; border: 2px solid var(--canopy);
}
.profile-av .av-edit svg { width: 11px; height: 11px; }
.profile-name { font: 700 20px var(--serif); }
.level-pill { display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--ui); color: var(--canopy); background: var(--gold-light); padding: 4px 11px; border-radius: 30px; margin-top: 5px; }
.level-progress { position: relative; margin-top: 16px; }
.level-progress .row { display: flex; justify-content: space-between; font: 600 11px var(--ui); color: var(--ink-light); }
.level-bar { height: 8px; background: rgba(255,255,255,.14); border-radius: 20px; margin-top: 7px; overflow: hidden; }
.level-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-light), var(--brass)); border-radius: 20px; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.stat-tile { background: #fff; border: 1px solid var(--card-border); border-radius: var(--r); padding: 13px 6px; text-align: center; }
.stat-tile .v { font: 700 22px var(--serif); color: var(--pine); }
.stat-tile .l { font: 600 9.5px var(--ui); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }

/* Pin-Pass */
.pin-pass {
  background: #fff; border: 1px solid var(--card-border);
  border-radius: var(--r-lg); padding: 16px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px;
}
.pin-cell { text-align: center; }
.pin-disc {
  width: 50px; height: 50px; margin: 0 auto; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font: 700 11px var(--serif); box-shadow: 0 4px 10px -4px rgba(194,142,44,.6);
}
.pin-disc.earned { background: radial-gradient(circle at 50% 38%, #e9c878, #c28e2c 65%, #9c7320); }
.pin-disc.earned.silver { background: radial-gradient(circle at 50% 38%, #9fb0bf, #6b7d8c 65%, #4b5a66); }
.pin-disc.earned.green { background: linear-gradient(150deg, #6f8a5a, #3a4a28); box-shadow: none; }
.pin-disc.locked { background: #efe9da; border: 2px dashed #cfc6ad; color: #bcae8e; font: 700 16px var(--ui); box-shadow: none; }
.pin-cell.locked { opacity: .6; }
.pin-cell.locked .pin-disc { box-shadow: none; }
.pin-cell .lbl { font: 600 9px var(--ui); color: var(--ink-muted); margin-top: 5px; }
.pin-pass-note { font: 500 12px var(--ui); color: var(--ink-soft); text-align: center; margin-top: 11px; }
.pin-pass-note b { color: var(--brass); }

/* ── Diplom ──────────────────────────────────────────────────────── */
.diplom-screen { background: var(--canopy); min-height: 100vh; color: #fff; position: relative; overflow: hidden; }
.confetti { position: absolute; top: 60px; left: 0; right: 0; height: 320px; overflow: hidden; pointer-events: none; }
.confetti span { position: absolute; top: -10px; animation: confettiFall 3.2s ease-in infinite; }
.diplom-head { padding: calc(var(--safe-top) + 24px) 28px 22px; text-align: center; position: relative; }
.seal {
  width: 158px; height: 158px; margin: 22px auto 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #e9c878, #c28e2c 62%, #9c7320);
  display: grid; place-items: center; position: relative;
  box-shadow: 0 16px 40px -12px rgba(194,142,44,.7);
  animation: floaty 4s ease-in-out infinite;
}
.seal::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.55); }
.seal-inner { text-align: center; color: #fff; }
.seal-inner .top { font: 700 13px var(--sc); letter-spacing: .1em; }
.seal-inner .region { font: 800 30px var(--serif); line-height: 1; margin: 2px 0; }
.seal-inner .yr { font: 600 10px var(--ui); letter-spacing: .15em; }
.diplom-title { font: 700 30px/1.12 var(--serif); margin-top: 24px; }
.diplom-sub { font: 400 14.5px/1.55 var(--ui); color: var(--ink-light); margin-top: 8px; max-width: 300px; margin-left: auto; margin-right: auto; }

.dark-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); padding: 15px; }
.pin-ship { display: flex; gap: 13px; align-items: center; }
.pin-ship .disc { width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto; background: linear-gradient(150deg, #e9c878, #9c7320); display: grid; place-items: center; color: var(--canopy); font: 700 18px var(--serif); }
.pin-ship .ttl { font: 700 14px var(--ui); color: #fff; }
.pin-ship .sub { font: 500 12px var(--ui); color: var(--ink-light); }

.referral { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); padding: 16px; }
.referral-top { display: flex; gap: 13px; align-items: center; }
.referral-avs { display: flex; align-items: center; flex: 0 0 auto; }
.referral-avs .a { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--canopy); }
.referral-avs .a.gold { background: linear-gradient(150deg, #c9a55c, #9c7320); }
.referral-avs .a.plus { background: #7daf8e; display: grid; place-items: center; margin-left: -13px; color: var(--canopy); font: 700 16px var(--ui); }
.referral .ttl { font: 700 14.5px var(--ui); color: #fff; }
.referral .sub { font: 500 12px/1.45 var(--ui); color: var(--ink-light); }
.referral .sub b { color: var(--gold-light); }
.referral-link { margin-top: 12px; display: flex; gap: 8px; }
.referral-link input { flex: 1; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-sm); color: #fff; font: 500 12px var(--ui); padding: 10px 12px; min-width: 0; }
.copy-btn { background: var(--gold-light); color: var(--canopy); border: none; border-radius: var(--r-sm); font: 700 13px var(--ui); padding: 0 16px; cursor: pointer; }

.unlock-card { background: linear-gradient(150deg, #3a6b4d, #23482f); border-radius: var(--r-lg); padding: 16px; display: flex; gap: 13px; align-items: center; position: relative; overflow: hidden; }
.unlock-card::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.05) 0 1px, transparent 1px 10px); }
.unlock-card .body { position: relative; flex: 1; }
.unlock-card .ttl { font: 700 17px var(--serif); color: #fff; }
.unlock-card .sub { font: 500 12.5px var(--ui); color: #cfe0c2; margin-top: 2px; }
.unlock-card .sub b { color: #fff; }
.unlock-card .cta { position: relative; font: 700 12px var(--ui); color: var(--canopy); background: var(--gold-light); padding: 9px 13px; border-radius: 30px; }

/* ── Onboarding ──────────────────────────────────────────────────── */
.ob-steps { display: flex; align-items: center; gap: 6px; }
.ob-steps span { width: 22px; height: 4px; border-radius: 20px; background: rgba(0,0,0,.12); display: inline-block; }
.ob-steps span.done { background: var(--pine); }
.ob-steps span.cur { background: var(--brass); }
.endowed-card { background: var(--canopy); border-radius: var(--r-xl); padding: 22px; color: #fff; position: relative; overflow: hidden; }
.endowed-card::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(125deg, rgba(255,255,255,.04) 0 1px, transparent 1px 14px); }
.endowed-row { position: relative; display: flex; align-items: center; gap: 18px; }
.endowed-ring { width: 84px; height: 84px; }
.endowed-tag { display: inline-flex; align-items: center; font: 700 10px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--canopy); background: var(--gold-light); padding: 4px 9px; border-radius: 20px; }
.endowed-lead { font: 600 16px/1.3 var(--serif); margin-top: 8px; }
.seg-strip { position: relative; display: flex; gap: 3px; margin-top: 18px; }
.seg-strip span { flex: 1; height: 7px; border-radius: 20px; background: rgba(255,255,255,.13); }
.seg-strip span.on { background: transparent; border: 1.5px solid var(--brass); }
.ob-point { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--card-border2); border-radius: 13px; padding: 11px 13px; }
.ob-point + .ob-point { margin-top: 9px; }
.ob-point .ico { width: 30px; height: 30px; border-radius: 50%; background: var(--brass-bg2); display: grid; place-items: center; flex: 0 0 auto; }
.ob-point .ico svg { width: 16px; height: 16px; stroke: var(--brass); }
.ob-point .name { font: 700 13.5px var(--ui); color: var(--ink); }
.ob-point .meta { font: 500 11.5px var(--ui); color: #5e7a5e; }
.nudge { display: flex; align-items: center; gap: 12px; background: var(--brass-bg2); border: 1px solid var(--brass-bd); border-radius: var(--r); padding: 13px 15px; }
.nudge .ico { width: 34px; height: 34px; border-radius: 50%; background: var(--brass); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.nudge .ico svg { width: 17px; height: 17px; }
.nudge .ttl { font: 700 13px var(--ui); color: var(--ink); }
.nudge .sub { font: 500 12px var(--ui); color: #a07b2e; }
.skip-link { text-align: center; font: 600 12px var(--ui); color: var(--ink-soft); margin-top: 13px; }

/* ── Activity-Feed („Gerade unterwegs") ──────────────────────────── */
.act-item {
  background: #fff; border: 1px solid var(--card-border);
  border-radius: 13px; padding: 10px 13px;
}
.act-item + .act-item { margin-top: 8px; }
.act-row { display: flex; gap: 11px; align-items: center; }
.act-photo {
  display: block; width: 100%; max-height: 220px; object-fit: cover;
  border-radius: 10px; margin-top: 9px;
}
.act-note {
  margin-top: 7px; font: italic 500 13.5px/1.5 var(--serif);
  color: var(--ink-700);
}

/* ── Feed-Opt-in beim Foto-Upload ────────────────────────────────── */
.share-opt { margin-top: 10px; }
.share-check {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font: 600 13px var(--ui); color: var(--ink-700);
}
.share-check input { width: 17px; height: 17px; accent-color: var(--pine, #1e5638); }
.share-note { margin-top: 8px; font-size: 13px; }

/* ── Push-Aktivierungs-Karte ─────────────────────────────────────── */
.push-card {
  display: flex; gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--card-border);
  border-radius: 14px; padding: 13px 14px;
}
.push-bell { font-size: 22px; flex: 0 0 auto; }
.push-body { flex: 1; min-width: 0; }
.push-body .ttl { font: 700 13.5px var(--ui); color: var(--ink); }
.push-body .sub { font: 500 12px/1.45 var(--ui); color: var(--ink-muted); margin-top: 2px; }
.push-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex: 0 0 auto; }
.push-actions .btn { padding: 8px 14px; font-size: 12.5px; }
.push-later {
  background: none; border: none; cursor: pointer;
  font: 600 11.5px var(--ui); color: var(--ink-soft);
}

/* ── Bezahl-/Themen-Challenges ───────────────────────────────────── */
.price-pill {
  display: inline-block; margin-top: 8px; padding: 5px 12px;
  border-radius: 999px; background: rgba(194, 142, 44, .92); color: #fff;
  font: 700 12.5px var(--ui); letter-spacing: .02em;
}
.impact-box {
  display: flex; gap: 11px; align-items: flex-start;
  background: #eaf2ea; border: 1px solid #cfe0cf;
  border-radius: 13px; padding: 12px 14px;
}
.impact-box.sponsor { background: #f7f1e2; border-color: #e7d9b8; }
.impact-ico { font-size: 20px; flex: 0 0 auto; line-height: 1.2; }
.impact-box .ttl { font: 700 13px var(--ui); color: var(--ink); }
.impact-box .sub { font: 500 12.5px/1.5 var(--ui); color: var(--ink-700); margin-top: 2px; }
.pay-note {
  margin-top: 8px; text-align: center;
  font: 600 11.5px var(--ui); color: var(--ink-soft);
}
.ch-thumb.thematic { background: #2e5d43; display: grid; place-items: center; }
.thumb-emoji { font-size: 26px; }

/* ── Gastgeber-Bewerbung ─────────────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.cat-check {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: #fff; border: 1px solid var(--card-border);
  border-radius: 11px; padding: 10px 12px;
  font: 600 13px var(--ui); color: var(--ink-700);
}
.cat-check input { width: 17px; height: 17px; accent-color: var(--pine, #1e5638); flex: 0 0 auto; }
.cat-check:has(input:checked) { border-color: var(--pine, #1e5638); background: #eef4ee; }

/* ── Desktop-/Laptop-Ansicht ─────────────────────────────────────── */
.desktop-aside { display: none; }

@media (min-width: 900px) {
  body {
    background:
      radial-gradient(1200px 600px at 70% -10%, rgba(125, 175, 142, .18), transparent 60%),
      radial-gradient(900px 700px at 10% 110%, rgba(194, 142, 44, .10), transparent 55%),
      #15281d;
  }
  .app-shell {
    box-shadow: 0 0 0 1px rgba(242, 236, 222, .08), 0 30px 80px -30px rgba(0, 0, 0, .8);
  }
}

@media (min-width: 1150px) {
  .desktop-aside {
    display: block;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: calc(50% + var(--maxw) / 2 + 56px);
    width: 300px;
    color: #f2ecde;
    z-index: 5;
  }
  .desktop-aside .mark {
    width: 54px; height: 54px; border-radius: 14px;
    display: grid; place-items: center;
    background: linear-gradient(145deg, #2c5c40, #15281d);
    border: 1px solid rgba(242, 236, 222, .15);
    font: 700 26px var(--serif); color: #d4b475;
    margin-bottom: 14px;
  }
  .desktop-aside .brand { font: 700 26px var(--serif); }
  .desktop-aside .claim {
    font: 500 14px/1.65 var(--ui); color: rgba(242, 236, 222, .75);
    margin-top: 10px;
  }
  .desktop-aside .qr-box {
    display: flex; gap: 14px; align-items: center;
    margin-top: 26px; padding: 16px;
    background: rgba(242, 236, 222, .06);
    border: 1px solid rgba(242, 236, 222, .12);
    border-radius: 16px;
  }
  .desktop-aside .qr-box img {
    width: 104px; height: 104px; flex: 0 0 auto;
    background: #f2ecde; border-radius: 10px; padding: 7px;
  }
  .desktop-aside .qr-box div { font: 500 12px/1.55 var(--ui); color: rgba(242, 236, 222, .75); }
  .desktop-aside .qr-box b { display: block; color: #f2ecde; font-size: 13px; margin-bottom: 4px; }
}

/* ── Einfarbige Icons statt Emojis ───────────────────────────────── */
.impact-box .impact-ico svg { width: 22px; height: 22px; stroke: var(--pine, #1e5638); }
.impact-box.sponsor .impact-ico svg { stroke: #9c7320; }
.push-bell svg { width: 22px; height: 22px; stroke: var(--pine, #1e5638); }
.champ-medal svg { width: 20px; height: 20px; }
.champ-row.rank-1 .champ-medal svg, .champ-row .champ-medal.rank-1 svg { stroke: #c28e2c; }
.champ-medal.rank-1 svg { stroke: #c28e2c; }
.champ-medal.rank-2 svg { stroke: #8f979d; }
.champ-medal.rank-3 svg { stroke: #b0764a; }
.thumb-emoji svg { width: 24px; height: 24px; stroke: #fff; }
.cat-check svg { width: 17px; height: 17px; stroke: var(--pine, #1e5638); flex: 0 0 auto; }
.act-av svg { width: 17px; height: 17px; stroke: #fff; }
.review-q svg { width: 18px; height: 18px; stroke: currentColor; }
.streak-badge svg { width: 13px; height: 13px; stroke: currentColor; }
.cover-tag svg, .price-pill svg { width: 13px; height: 13px; stroke: currentColor; vertical-align: -2px; }
.list-head .more svg { width: 17px; height: 17px; stroke: var(--brass, #c28e2c); }

/* ── Widerrufs-Zustimmung beim Kauf ──────────────────────────────── */
.consent-check {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  margin-bottom: 10px; text-align: left;
  font: 500 12px/1.5 var(--ui); color: var(--ink-700);
}
.consent-check input {
  width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px;
  accent-color: var(--pine, #1e5638);
}
.consent-check a { color: var(--pine, #1e5638); }

/* ── Rechtsseiten + Footer ───────────────────────────────────────── */
.legal-foot {
  text-align: center; padding: 26px 16px 18px;
  font: 500 11.5px var(--ui); color: var(--ink-soft);
}
.legal-foot a { color: var(--ink-soft); text-decoration: none; }
.legal-foot a:hover { color: var(--ink-700); text-decoration: underline; }
.legal-page {
  padding: calc(var(--safe-top) + 22px) 20px 30px;
  max-width: 640px; margin: 0 auto;
}
.legal-page h1 { font-size: 24px; line-height: 1.15; margin-bottom: 10px; }
.legal-page h2 { font-size: 15px; margin: 22px 0 6px; }
.legal-page p {
  font: 500 13.5px/1.65 var(--ui); color: var(--ink-700);
  margin: 0 0 8px;
}
.legal-page a { color: var(--pine, #1e5638); }
.legal-intro { color: var(--ink-muted) !important; }
.legal-stand { margin-top: 24px !important; font-size: 12px !important; color: var(--ink-soft) !important; }

/* ── Willkommens-Screen (Profilbild-Onboarding) ──────────────────── */
.welcome-av { position: relative; display: inline-block; cursor: pointer; margin-bottom: 6px; }
.welcome-av-circle {
  width: 110px; height: 110px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: #7daf8e;
  color: #fff; font: 700 40px var(--serif);
  border: 3px dashed rgba(30, 86, 56, .45);
}
.welcome-av-circle img { width: 100%; height: 100%; object-fit: cover; }
.welcome-av-badge {
  position: absolute; right: 2px; bottom: 2px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pine, #1e5638); border: 2px solid #fff;
}
.welcome-av-badge svg { width: 15px; height: 15px; stroke: #fff; }
.welcome-av-hint { font: 500 12.5px/1.5 var(--ui); color: var(--ink-muted); margin: 6px 0 14px; }
.welcome-skip {
  display: inline-block; margin-top: 14px;
  font: 600 13px var(--ui); color: var(--ink-soft); text-decoration: none;
}
.act-av {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff; font: 700 13px var(--ui);
  overflow: hidden; background: #7daf8e;
}
.act-av img { width: 100%; height: 100%; object-fit: cover; }
.act-item:nth-child(4n+1) .act-av { background: #c9a55c; }
.act-item:nth-child(4n+2) .act-av { background: #7daf8e; }
.act-item:nth-child(4n+3) .act-av { background: #c2552f; }
.act-item:nth-child(4n)   .act-av { background: #3a6b4d; }
.act-txt { flex: 1; min-width: 0; font: 500 13px/1.4 var(--ui); color: var(--ink-700); }
.act-txt b { color: var(--ink); font-weight: 700; }
.act-when { font: 600 10.5px var(--ui); color: var(--ink-soft); flex: 0 0 auto; }

/* ── Freie-Reihenfolge-Hinweis ───────────────────────────────────── */
.free-order-note {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font: 600 12px var(--ui); color: var(--ink-muted);
}
.free-order-note svg { width: 15px; height: 15px; stroke: var(--brass); }

/* ── Belohnungs-Momente ──────────────────────────────────────────── */
@keyframes popIn {
  0% { transform: scale(.92); opacity: 0; }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}
.accepted-box { animation: popIn .45s cubic-bezier(.22,1,.36,1); position: relative; overflow: hidden; }
.accepted-box .mini-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.accepted-box .mini-confetti span { position: absolute; top: -8px; animation: confettiFall 2.6s ease-in 2; }

/* Fortschrittsbalken fuellen sich beim Laden (CSS-only, endet immer korrekt) */
@keyframes fillIn { from { transform: scaleX(0); } }
.pbar > span, .level-bar > span, .scarcity .bar > span, .scarcity-bar .bar > span {
  transform-origin: left;
  animation: fillIn .9s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .pbar > span, .level-bar > span, .scarcity .bar > span, .scarcity-bar .bar > span,
  .accepted-box, .accepted-box .mini-confetti span { animation: none; }
}

/* ── Meilenstein-Feier (Bronze/Silber/Gold) ──────────────────────── */
.tier-celebration {
  position: relative; overflow: hidden;
  display: flex; gap: 14px; align-items: center;
  background: radial-gradient(circle at 20% 0%, #e9c878, #c28e2c 70%);
  border-radius: var(--r-lg); padding: 16px;
  color: #fff; box-shadow: 0 12px 28px -10px rgba(194,142,44,.6);
  animation: popIn .5s cubic-bezier(.22,1,.36,1);
}
.tier-celebration .mini-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tier-celebration .mini-confetti span { position: absolute; top: -8px; animation: confettiFall 2.8s ease-in 3; }
.tier-celebration-disc {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.5);
  display: grid; place-items: center; font-size: 26px;
  animation: floaty 3.5s ease-in-out infinite;
}
.tier-celebration .ttl { font: 700 18px var(--serif); position: relative; }
.tier-celebration .sub { font: 500 12.5px var(--ui); color: rgba(255,255,255,.9); margin-top: 2px; position: relative; }

/* ── Entfernungen + Nähe-Badge (Fotopunkt-Liste) ─────────────────── */
.pp-dist { font: 600 11px var(--ui); color: var(--pine); white-space: nowrap; }
.near-pill { background: var(--ember); color: #fff; animation: pulse 1.6s ease-in-out infinite; }

/* ── Teilen-Mini-Button (nach Erfolg) ────────────────────────────── */
.share-mini {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  background: #fff; border: 1px solid var(--pine-bd); color: var(--pine);
  display: grid; place-items: center; cursor: pointer;
}
.share-mini svg { width: 17px; height: 17px; }

/* Upload-Button waehrend der Pruefung */
.upload-btn.is-checking { animation: pulse 1.2s ease-in-out infinite; }

/* ── Wochen-Champions (Home) ─────────────────────────────────────── */
.champ-row {
  display: flex; gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--card-border);
  border-radius: 13px; padding: 11px 13px;
}
.champ-row + .champ-row { margin-top: 8px; }
.champ-row.first { border: 1.5px solid var(--brass); background: var(--brass-bg); }
.champ-medal { font-size: 22px; flex: 0 0 28px; text-align: center; }
.champ-row .act-av { width: 32px; height: 32px; font-size: 12px; }
.champ-name { flex: 1; font: 700 14px var(--ui); color: var(--ink); }
.champ-pts { font: 700 12px var(--ui); color: var(--brass); white-space: nowrap; }

/* ── Diplom-bestätigt-Popup ──────────────────────────────────────── */
.diplom-popup-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(16,33,26,.7);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.diplom-popup {
  position: relative; overflow: hidden;
  background: var(--paper-warm); border-radius: var(--r-xl);
  padding: 30px 24px 22px; max-width: 340px; width: 100%;
  text-align: center; box-shadow: 0 24px 64px rgba(0,0,0,.35);
  animation: popIn .45s cubic-bezier(.22,1,.36,1);
}
.diplom-popup-seal {
  width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #e9c878, #c28e2c 65%, #9c7320);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 10px 26px -8px rgba(194,142,44,.7);
  animation: floaty 4s ease-in-out infinite;
}
.diplom-popup-seal svg { width: 32px; height: 32px; }
.diplom-popup h3 { font: 700 22px var(--serif); }
.diplom-popup p { font: 500 13.5px/1.6 var(--ui); color: var(--ink-700); margin: 8px 0 16px; }
.diplom-popup-later {
  margin-top: 10px; background: none; border: none; cursor: pointer;
  font: 600 12.5px var(--ui); color: var(--ink-soft); text-decoration: underline;
}

/* ── Empty States ────────────────────────────────────────────────── */
.empty-card { text-align: center; padding: 40px 24px; background: #fff; border: 1px solid var(--card-border); border-radius: var(--r-lg); margin: 18px; }
.empty-ico { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--pine-bg2); display: grid; place-items: center; color: var(--pine); }
.empty-ico svg { width: 26px; height: 26px; }
.empty-card h3 { font: 700 18px var(--serif); }
.empty-card p { font: 500 13px var(--ui); color: var(--ink-soft); margin-top: 6px; }

/* Teaser (Detail, vor Join) */
.teaser { background: var(--pine-bg2); border: 1px solid var(--pine-bd); border-radius: var(--r); padding: 18px; font: 500 13.5px var(--ui); color: var(--ink-700); margin: 0 18px; }
.teaser b { color: var(--pine); }

/* ── Auth (Login/Register) ───────────────────────────────────────── */
.auth-screen { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 24px calc(var(--tabbar-h) + 40px); max-width: var(--maxw); margin: 0 auto; }
.auth-brand { text-align: center; margin-bottom: 28px; }
.auth-brand .mark { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; background: linear-gradient(155deg, #15281d, #1e5638); display: grid; place-items: center; font: 800 30px var(--serif); color: var(--gold-light); }
.auth-brand h1 { font: 700 26px var(--serif); }
.auth-brand p { font: 500 13.5px var(--ui); color: var(--ink-muted); margin-top: 6px; }
.auth-card { background: #fff; border: 1px solid var(--card-border); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow-card); }
.auth-foot { text-align: center; margin-top: 18px; font: 500 13px var(--ui); color: var(--ink-muted); }
.auth-foot a { color: var(--pine); font-weight: 700; }

/* ── Bottom Tab Bar (5 Slots + zentraler FAB) ────────────────────── */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--maxw); z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 18px calc(10px + var(--safe-bottom));
  background: var(--paper-warm); border-top: 1px solid var(--card-border);
  box-shadow: 0 -8px 24px -18px rgba(20,40,29,.4);
}
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink-dim); flex: 1; padding: 2px 0; }
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a span { font: 600 10px var(--ui); }
.tabbar a.active { color: var(--pine); }
.tabbar a.active span { font-weight: 700; }

/* Desktop: Tablet-Bereich heller Rand, ab 900px dunkler Wald-Hintergrund
   (Regeln dazu im Block „Desktop-/Laptop-Ansicht") */
@media (min-width: 481px) and (max-width: 899px) {
  body { background: #e9e3d4; }
}