/* ==========================================================================
   Straßen- & Hof-Flohmarkt – Design System
   Stil: Nachbarschafts-Plakat. Warmes Creme, Waldgrün, Sonnengelb, Korall.
   Mobile first, App-Shell mit Tab-Bar unten (iPhone-Gefühl).
   ========================================================================== */

/* ---------- 1. Design Tokens ---------------------------------------------- */
:root {
  /* Farben */
  --cream:        #FBF6E9;
  --cream-deep:   #F3EAD6;
  --paper:        #FFFDF6;
  --paper-2:      #FFF9EC;

  --green-900:    #144026;
  --green-800:    #1E5B34;
  --green-700:    #2A7043;
  --green-600:    #398A54;
  --green-400:    #74B77E;
  --green-200:    #BFE0A8;
  --green-100:    #E4F0DA;
  --green-50:     #F1F8EA;

  --sun:          #FDC63F;
  --sun-soft:     #FFE39A;
  --orange:       #EE8B4E;
  --coral:        #E8684A;
  --coral-soft:   #FBD9CE;
  --sky:          #6FB6D6;
  --sky-soft:     #D6EEF6;
  --wood:         #CE9E5E;
  --wood-dark:    #A97C42;
  --berry:        #B85C8A;

  --ink:          #24321F;
  --ink-soft:     #4B5B46;
  --muted:        #7C8C78;
  --line:         #E3DCC6;
  --line-strong:  #CFC4A5;

  /* Kategorie-Farben (Karte + Listen) */
  --cat-stand:    #2A7043;
  --cat-food:     #EE8B4E;
  --cat-cafe:     #B85C8A;
  --cat-info:     #6FB6D6;

  /* Typo */
  --font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radien */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Schatten */
  --sh-sm: 0 2px 6px rgba(36, 50, 31, .08);
  --sh-md: 0 6px 18px rgba(36, 50, 31, .10);
  --sh-lg: 0 14px 38px rgba(36, 50, 31, .16);
  --sh-up: 0 -8px 28px rgba(36, 50, 31, .14);

  /* Layout */
  --shell-max: 720px;
  --tabbar-h: 66px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ---------- 2. Reset / Basis ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  background-image:
    radial-gradient(circle at 12% 8%,  rgba(253,198,63,.16), transparent 42%),
    radial-gradient(circle at 92% 22%, rgba(111,182,214,.13), transparent 38%),
    radial-gradient(circle at 50% 98%, rgba(116,183,126,.16), transparent 45%);
  background-attachment: fixed;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--green-800);
  line-height: 1.12;
  margin: 0 0 .4em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(1.9rem, 7.5vw, 2.9rem); font-weight: 800; }
h2 { font-size: clamp(1.35rem, 5vw, 1.8rem);  font-weight: 700; }
h3 { font-size: 1.16rem; font-weight: 700; }
h4 { font-size: 1rem;    font-weight: 700; }

p { margin: 0 0 .9em; }
a { color: var(--green-700); text-decoration-color: var(--green-200); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
small { font-size: .82rem; }

::selection { background: var(--green-200); color: var(--green-900); }

/* Standardgröße für Inline-Icons. Komponenten-Regeln (.btn svg, .tab svg …)
   sind spezifischer und überschreiben das. */
.icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -.18em;
  flex: none;
}

:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- 3. App-Shell --------------------------------------------------- */
.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: var(--shell-max);
  margin-inline: auto;
  background: transparent;
  position: relative;
}

@media (min-width: 760px) {
  /* Kein backdrop-filter und kein transform hier: beides würde .app zum
     Bezugsrahmen für die fixierte Tab-Leiste machen, die dann ans Ende des
     gescrollten Inhalts rutscht statt an den unteren Bildschirmrand. */
  .app {
    box-shadow: 0 0 0 1px rgba(207,196,165,.5), var(--sh-lg);
    background: rgba(255,253,246,.72);
  }
}

/* --- Kopfzeile mit Wimpelkette --- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: calc(var(--safe-t) + 6px) 16px 10px;
  background: linear-gradient(180deg, var(--paper) 62%, rgba(255,253,246,0));
  backdrop-filter: blur(10px) saturate(1.3);
}
.appbar__bunting {
  position: absolute;
  inset: calc(var(--safe-t)) 0 auto 0;
  height: 26px;
  pointer-events: none;
  opacity: .95;
}
.appbar__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
}
.appbar__logo {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: 13px;
  background: var(--green-700);
  display: grid; place-items: center;
  box-shadow: var(--sh-sm);
}
.appbar__logo svg { width: 24px; height: 24px; }
.appbar__titles { min-width: 0; flex: 1; }
.appbar__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.14rem;
  color: var(--green-800);
  line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appbar__sub {
  font-size: .76rem;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Hauptbereich --- */
.main {
  flex: 1;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px);
}
.view { display: none; animation: viewIn .28s cubic-bezier(.22,.9,.3,1); }
.view.is-active { display: block; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.view__pad { padding: 4px 16px 22px; }

/* --- Tab-Bar unten (iOS-Stil) --- */
.tabbar {
  position: fixed;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(100%, var(--shell-max));
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 7px 8px calc(7px + var(--safe-b));
  background: rgba(255,253,246,.93);
  backdrop-filter: blur(16px) saturate(1.5);
  border-top: 1px solid var(--line);
  box-shadow: var(--sh-up);
}
@media (min-width: 760px) {
  .tabbar {
    bottom: 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    width: min(560px, calc(100% - 32px));
    padding: 8px 10px;
    box-shadow: var(--sh-lg);
  }
}
.tab {
  appearance: none;
  border: 0; background: none;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: .66rem;
  letter-spacing: .01em;
  color: var(--muted);
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  padding: 6px 2px 4px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: color .18s, background .18s, transform .18s;
  position: relative;
}
.tab svg { width: 23px; height: 23px; stroke-width: 1.9; }
.tab:active { transform: scale(.92); }
.tab.is-active { color: var(--green-700); background: var(--green-50); }
.tab.is-active svg { stroke-width: 2.4; }
.tab__dot {
  position: absolute;
  top: 4px; right: calc(50% - 18px);
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--coral);
  color: #fff;
  font-size: .6rem; font-weight: 800;
  display: none; place-items: center;
  box-shadow: 0 0 0 2px var(--paper);
}
.tab__dot.is-on { display: grid; }

/* ---------- 4. Bausteine --------------------------------------------------- */

/* Karten */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 16px;
  margin-bottom: 14px;
}
.card--flat { box-shadow: none; }
.card--tint { background: var(--green-50); border-color: var(--green-200); }
.card--sun  { background: #FFF6DE; border-color: var(--sun-soft); }

/* Abschnitts-Überschrift mit Marker-Strich (wie auf dem Plakat) */
.section-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  position: relative;
  margin: 22px 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--green-800);
  padding: 2px 10px 4px;
  z-index: 0;
}
.section-title::before {
  content: "";
  position: absolute;
  inset: 12% -6px 6% -6px;
  background: var(--green-200);
  border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%;
  transform: rotate(-.7deg);
  z-index: -1;
  opacity: .85;
}
.section-title svg { width: 24px; height: 24px; flex: none; }

.section-sub {
  color: var(--ink-soft);
  font-weight: 600;
  margin: -6px 0 14px;
  font-size: .94rem;
}

/* Buttons */
.btn {
  appearance: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  padding: 13px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 8px;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--primary { background: var(--green-700); color: #fff; box-shadow: 0 4px 0 var(--green-900); }
.btn--primary:active { box-shadow: 0 2px 0 var(--green-900); }
.btn--sun { background: var(--sun); color: var(--green-900); box-shadow: 0 4px 0 #D9A322; }
.btn--sun:active { box-shadow: 0 2px 0 #D9A322; }
.btn--coral { background: var(--coral); color: #fff; box-shadow: 0 4px 0 #B84A31; }
.btn--coral:active { box-shadow: 0 2px 0 #B84A31; }
.btn--ghost { background: var(--paper); color: var(--green-800); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--green-50); }
.btn--quiet { background: transparent; color: var(--ink-soft); padding: 10px 12px; font-weight: 700; }
.btn--block { width: 100%; white-space: normal; }
.btn--sm { padding: 9px 14px; font-size: .88rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* Chips / Badges */
.chip {
  display: inline-flex;
  align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  font-size: .82rem;
  font-weight: 800;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: all .16s;
  font-family: var(--font-body);
}
.chip svg { width: 15px; height: 15px; }
.chip.is-active { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.chip--static { cursor: default; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--green-100);
  color: var(--green-800);
  font-size: .76rem;
  font-weight: 800;
}
.tag--sun   { background: var(--sun-soft); color: #8A6410; }
.tag--coral { background: var(--coral-soft); color: #9E3E24; }
.tag--sky   { background: var(--sky-soft); color: #23586E; }

/* Chip-Reihe horizontal scrollbar */
.chiprow {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 16px 10px;
  margin-inline: -16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chiprow::-webkit-scrollbar { display: none; }
.chiprow > * { flex: none; }

/* Formulare */
.field { margin-bottom: 14px; }
.label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .96rem;
  color: var(--green-800);
  margin-bottom: 5px;
}
.hint { font-size: .8rem; color: var(--muted); font-weight: 600; margin-top: 4px; }
.input, .textarea, .select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-2);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 12px 14px;
  transition: border-color .15s, background .15s;
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--green-600);
  background: #fff;
}
.input::placeholder, .textarea::placeholder { color: #A9B3A4; font-weight: 600; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232A7043' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Suchfeld */
.search {
  position: relative;
  display: flex;
  align-items: center;
}
.search svg {
  position: absolute; left: 14px;
  width: 19px; height: 19px;
  color: var(--muted);
  pointer-events: none;
}
.search .input { padding-left: 42px; border-radius: var(--r-pill); }
.search__clear {
  position: absolute; right: 8px;
  border: 0; background: var(--green-100);
  width: 28px; height: 28px; border-radius: 50%;
  display: none; place-items: center;
  cursor: pointer; color: var(--green-800);
}
.search__clear.is-on { display: grid; }

/* Leerzustand */
.empty {
  text-align: center;
  padding: 34px 20px;
  color: var(--muted);
}
.empty svg { width: 54px; height: 54px; opacity: .45; margin: 0 auto 10px; }
.empty__title { font-family: var(--font-display); font-weight: 700; color: var(--ink-soft); font-size: 1.05rem; }

/* Trenner */
.divider { height: 1px; background: var(--line); margin: 18px 0; border: 0; }

/* ---------- 5. Karte (Leaflet) --------------------------------------------- */
.mapwrap {
  position: relative;
  margin: 0 0 6px;
  height: 56dvh;
  min-height: 320px;
  background: var(--green-100);
  overflow: hidden;
}
@media (min-width: 760px) {
  .mapwrap { height: 50dvh; border-radius: var(--r-lg); margin: 0 16px 6px; box-shadow: var(--sh-sm); }
}
.mapwrap.is-expanded { height: calc(100dvh - var(--tabbar-h) - var(--safe-b) - 120px); }
#map { position: absolute; inset: 0; z-index: 1; }

.leaflet-container {
  font-family: var(--font-body);
  /* Neutraler Papierton: Noch nicht geladene Kacheln sehen nach "lädt" aus
     und nicht nach einer riesigen Wiese. */
  background: #EDE7DA;
}
.leaflet-control-attribution {
  font-size: 9px !important;
  background: rgba(255,253,246,.82) !important;
  border-radius: 6px 0 0 0;
}
.leaflet-bar a {
  color: var(--green-800) !important;
  border-radius: 8px !important;
}
.leaflet-touch .leaflet-bar { border: 1px solid var(--line-strong) !important; }

/* Karten-Overlays */
.map-overlay {
  position: absolute;
  z-index: 20;
  pointer-events: none;
}
.map-overlay > * { pointer-events: auto; }
.map-tools {
  left: 10px; right: 10px; top: 10px;
  display: flex; gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.map-tools::-webkit-scrollbar { display: none; }
.map-tools .chip {
  box-shadow: var(--sh-sm);
  background: rgba(255,253,246,.96);
  backdrop-filter: blur(8px);
}
/* Muss nach der Regel darüber stehen, sonst überschreibt diese den aktiven Zustand. */
.map-tools .chip.is-active {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
}
.map-fabs {
  right: 10px; bottom: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.fab {
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(255,253,246,.96);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--green-800);
  box-shadow: var(--sh-sm);
  transition: transform .15s, background .15s;
}
.fab svg { width: 21px; height: 21px; }
.fab:active { transform: scale(.92); }
.fab.is-active { background: var(--green-700); color: #fff; border-color: var(--green-700); }

/* Marker-Pins */
.pin {
  width: 38px; height: 46px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 3px 4px rgba(36,50,31,.35));
  transition: transform .2s cubic-bezier(.3,1.4,.5,1);
  cursor: pointer;
}
.pin:hover { transform: translateY(-3px) scale(1.06); }
.pin__body { width: 100%; height: 100%; }
.pin.is-visited .pin__body { opacity: .68; }
.pin.is-selected { transform: translateY(-5px) scale(1.16); z-index: 999 !important; }

.leaflet-marker-icon.pin-icon { background: none; border: 0; }

/* „Stand setzen“-Fadenkreuz */
.crosshair {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -100%);
  z-index: 30;
  pointer-events: none;
  animation: bob 1.6s ease-in-out infinite;
}
@keyframes bob {
  0%,100% { transform: translate(-50%, -100%); }
  50%     { transform: translate(-50%, -112%); }
}

/* ---------- 6. Bottom-Sheet ------------------------------------------------ */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(20,32,18,.42);
  backdrop-filter: blur(2px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s;
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  left: 50%; bottom: 0;
  transform: translate(-50%, 100%);
  width: min(100%, var(--shell-max));
  max-height: 92dvh;
  z-index: 100;
  background: var(--paper);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-lg);
  display: flex;
  flex-direction: column;
  transition: transform .34s cubic-bezier(.22,.9,.3,1);
  overscroll-behavior: contain;
}
.sheet.is-open { transform: translate(-50%, 0); }
@media (min-width: 760px) {
  .sheet { border-radius: var(--r-xl); bottom: 14px; max-height: 86dvh; width: min(560px, calc(100% - 32px)); }
}
.sheet__grab {
  padding: 10px 0 4px;
  display: grid; place-items: center;
  cursor: grab;
  touch-action: none;
  flex: none;
}
.sheet__grab::after {
  content: "";
  width: 42px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
}
.sheet__close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 0;
  background: var(--cream-deep);
  color: var(--ink-soft);
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 3;
}
.sheet__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 18px calc(22px + var(--safe-b));
  overscroll-behavior: contain;
}

/* ---------- 7. Stand-Liste & Detail ---------------------------------------- */
.standlist { display: flex; flex-direction: column; gap: 11px; }

.standcard {
  display: flex;
  gap: 12px;
  padding: 11px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 5px solid var(--cat-stand);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  cursor: pointer;
  transition: transform .16s, box-shadow .16s;
  text-align: left;
  width: 100%;
  font-family: inherit;
  align-items: flex-start;
}
.standcard:active { transform: scale(.985); }
.standcard:hover { box-shadow: var(--sh-md); }
.standcard[data-cat="essen"] { border-left-color: var(--cat-food); }
.standcard[data-cat="cafe"]  { border-left-color: var(--cat-cafe); }
.standcard[data-cat="info"]  { border-left-color: var(--cat-info); }
.standcard.is-visited { background: var(--green-50); }

.standcard__thumb {
  width: 68px; height: 68px;
  flex: none;
  border-radius: 13px;
  object-fit: cover;
  background: var(--green-100);
  display: grid; place-items: center;
  font-size: 26px;
  overflow: hidden;
}
.standcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.standcard__main { min-width: 0; flex: 1; }
.standcard__top { display: flex; align-items: baseline; gap: 7px; }
.standcard__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .8rem;
  color: #fff;
  background: var(--green-700);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  flex: none;
}
.standcard[data-cat="essen"] .standcard__num { background: var(--cat-food); }
.standcard[data-cat="cafe"]  .standcard__num { background: var(--cat-cafe); }
.standcard[data-cat="info"]  .standcard__num { background: var(--cat-info); }
.standcard__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--green-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.standcard__addr {
  font-size: .8rem; color: var(--muted); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.standcard__addr svg { width: 13px; height: 13px; flex: none; }
.standcard__tags {
  display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px;
}
.standcard__side { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.iconbtn {
  width: 34px; height: 34px;
  border-radius: 11px;
  border: 1.5px solid var(--line-strong);
  background: var(--paper-2);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--muted);
  transition: all .16s;
  flex: none;
}
.iconbtn svg { width: 18px; height: 18px; }
.iconbtn:active { transform: scale(.9); }
.iconbtn.is-on { background: var(--sun); border-color: var(--sun); color: var(--green-900); }
.iconbtn.is-on--green { background: var(--green-600); border-color: var(--green-600); color: #fff; }

/* Stand-Detail im Sheet */
.detail__hero {
  position: relative;
  margin: 0 -18px 14px;
  height: 190px;
  background: var(--green-100);
  overflow: hidden;
  display: grid; place-items: center;
}
.detail__hero img { width: 100%; height: 100%; object-fit: cover; }
.detail__hero-fallback { font-size: 62px; opacity: .55; }
.detail__badges {
  position: absolute; left: 14px; bottom: 12px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.detail__badges .tag { box-shadow: var(--sh-sm); }
.detail__name { margin-bottom: 2px; }
.detail__meta {
  display: flex; align-items: center; gap: 6px;
  color: var(--muted); font-weight: 700; font-size: .88rem;
  margin-bottom: 12px;
}
.detail__meta svg { width: 15px; height: 15px; }
.detail__actions { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.detail__actions .btn { flex: 1; min-width: 130px; }
.detail__desc { color: var(--ink-soft); font-weight: 600; white-space: pre-wrap; }

.highlights { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 7px; }
.highlights li {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--green-50);
  border: 1px dashed var(--green-200);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-weight: 700;
  color: var(--green-800);
}
.highlights li::before { content: "✨"; flex: none; }

/* ---------- 8. Pinnwand & Fragen ------------------------------------------- */
.post {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 14px;
  box-shadow: var(--sh-sm);
  margin-bottom: 11px;
}
.post--question { background: #FFF9EC; border-color: var(--sun-soft); }
.post--offer    { background: var(--sky-soft); border-color: #B7E0EE; }
.post__head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.post__avatar {
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--green-100);
  display: grid; place-items: center;
  font-size: 17px; flex: none;
}
.post__who { display: block; font-family: var(--font-display); font-weight: 700; color: var(--green-800); line-height: 1.15; }
.post__time { display: block; font-size: .74rem; color: var(--muted); font-weight: 700; }
.reply__head .post__time { display: inline; }
.post__body { white-space: pre-wrap; font-weight: 600; color: var(--ink-soft); margin: 0; }
.post__foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.replies {
  margin: 10px 0 0;
  padding-left: 12px;
  border-left: 3px dotted var(--green-200);
  display: flex; flex-direction: column; gap: 8px;
}
.reply {
  background: var(--green-50);
  border-radius: var(--r-sm);
  padding: 9px 11px;
}
.reply--owner { background: var(--green-100); border: 1px solid var(--green-200); }
.reply__head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.reply__who { font-weight: 800; color: var(--green-800); font-size: .9rem; }
.reply__body { margin: 0; font-weight: 600; color: var(--ink-soft); font-size: .94rem; white-space: pre-wrap; }

.standref {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--green-700); color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  padding: 4px 11px;
  font-size: .76rem; font-weight: 800;
  cursor: pointer;
  font-family: var(--font-body);
}
.standref svg { width: 13px; height: 13px; }
.standref:active { transform: scale(.95); }

/* Ankündigungen */
.announce {
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--sun-soft);
  border: 2px solid var(--sun);
  position: relative;
}
.announce--wichtig { background: var(--coral-soft); border-color: var(--coral); }
.announce__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.announce__head svg { width: 20px; height: 20px; color: var(--green-800); flex: none; }
.announce__title { font-family: var(--font-display); font-weight: 800; color: var(--green-900); font-size: 1.05rem; }
.announce__body { margin: 0; font-weight: 600; color: #4A3B14; white-space: pre-wrap; }
.announce--wichtig .announce__body { color: #7A3221; }
.announce__time { font-size: .72rem; font-weight: 800; color: rgba(0,0,0,.42); margin-top: 6px; }

/* ---------- 9. Gamification ------------------------------------------------ */
.score {
  background: linear-gradient(135deg, var(--green-700), var(--green-600) 60%, var(--green-400));
  color: #fff;
  border-radius: var(--r-xl);
  padding: 20px 18px;
  box-shadow: var(--sh-md);
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}
.score::after {
  content: "";
  position: absolute;
  right: -30px; top: -40px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.score__label { font-weight: 800; opacity: .9; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.score__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.9rem;
  line-height: 1;
  color: #fff;
  margin: 2px 0 10px;
}
.score__value small { font-size: 1rem; opacity: .8; font-weight: 700; }
.progress {
  height: 11px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.28);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--sun);
  width: 0;
  transition: width .6s cubic-bezier(.22,.9,.3,1);
}
.score__hint { font-size: .84rem; font-weight: 700; opacity: .92; margin-top: 8px; }

.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.badge {
  text-align: center;
  padding: 13px 8px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line);
  opacity: .42;
  filter: grayscale(1);
  transition: all .3s;
}
.badge.is-earned {
  opacity: 1; filter: none;
  background: var(--green-50);
  border-color: var(--green-200);
  box-shadow: var(--sh-sm);
}
.badge__icon { font-size: 30px; line-height: 1; }
.badge__name { font-family: var(--font-display); font-weight: 700; font-size: .8rem; color: var(--green-800); margin-top: 5px; line-height: 1.2; }
.badge__desc { font-size: .68rem; color: var(--muted); font-weight: 700; }

/* ---------- 10. Info / Veranstaltung --------------------------------------- */
.poster {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 0 0 20px;
  overflow: hidden;
  box-shadow: var(--sh-md);
  margin-bottom: 16px;
  position: relative;
}
.poster__top {
  background: linear-gradient(180deg, #FFF8E4, var(--paper));
  padding: 26px 20px 18px;
  text-align: center;
  position: relative;
}
.poster__sun { position: absolute; right: 10px; top: 8px; width: 74px; height: 74px; opacity: .95; }
.poster__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 8vw, 2.5rem);
  color: var(--green-800);
  line-height: 1.02;
  margin: 0;
  position: relative; z-index: 2;
}
.poster__title em { font-style: normal; display: block; font-size: .56em; font-weight: 700; color: var(--green-700); }
.poster__lead { font-weight: 700; color: var(--ink-soft); margin: 10px auto 0; max-width: 30ch; }
.poster__scene { width: 100%; display: block; }

.factlist { list-style: none; margin: 0; padding: 0 20px; display: flex; flex-direction: column; gap: 14px; }
.fact { display: flex; gap: 12px; align-items: flex-start; }
.fact__icon {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  background: var(--green-50);
  border: 1.5px solid var(--green-200);
  display: grid; place-items: center;
  color: var(--green-700);
}
.fact__icon svg { width: 21px; height: 21px; }
.fact > span:last-child { min-width: 0; }
.fact__label { display: block; font-family: var(--font-display); font-weight: 700; color: var(--green-800); line-height: 1.2; }
.fact__value { display: block; font-weight: 700; color: var(--ink-soft); white-space: pre-wrap; }

.note-hand {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--green-700);
  transform: rotate(-2deg);
  display: inline-block;
}

/* ---------- 11. Onboarding / Rollenwahl ------------------------------------ */
.onboard {
  position: fixed; inset: 0;
  z-index: 200;
  background: var(--cream);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(253,198,63,.28), transparent 45%),
    radial-gradient(circle at 85% 88%, rgba(116,183,126,.25), transparent 45%);
  display: none;
  flex-direction: column;
  padding: calc(var(--safe-t) + 20px) 22px calc(var(--safe-b) + 22px);
  overflow-y: auto;
}
.onboard.is-open { display: flex; }
.onboard__inner { margin: auto; width: 100%; max-width: 420px; text-align: center; }
.onboard__logo { width: 84px; height: 84px; margin: 0 auto 14px; }
.roles { display: grid; gap: 12px; margin-top: 20px; }
.role {
  display: flex; align-items: center; gap: 14px;
  padding: 17px;
  border-radius: var(--r-lg);
  border: 2px solid var(--line-strong);
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  transition: all .18s;
  font-family: inherit;
  box-shadow: var(--sh-sm);
}
.role:active { transform: scale(.98); }
.role:hover { border-color: var(--green-600); background: var(--green-50); }
.role__emoji { font-size: 34px; flex: none; }
.role > span { min-width: 0; }
.role__title { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.16rem; color: var(--green-800); }
.role__desc { display: block; font-size: .86rem; color: var(--muted); font-weight: 700; line-height: 1.35; margin-top: 2px; }

/* ---------- 12. Toast / Konfetti ------------------------------------------- */
.toast {
  position: fixed;
  left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-b) + 18px);
  transform: translate(-50%, 24px);
  z-index: 300;
  background: var(--green-900);
  color: #fff;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-lg);
  opacity: 0;
  pointer-events: none;
  transition: all .3s cubic-bezier(.22,.9,.3,1);
  max-width: calc(100% - 32px);
  text-align: center;
  font-size: .94rem;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast--warn { background: var(--coral); }

.confetti {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 400;
}
.confetti i {
  position: absolute;
  width: 9px; height: 14px;
  border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall {
  0%   { transform: translateY(-12vh) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ---------- 13. Skeleton / Loading ----------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--cream-deep) 25%, #F7F0DF 50%, var(--cream-deep) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
  border-radius: var(--r-md);
}
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton--card { height: 92px; margin-bottom: 11px; }

/* ---------- 14. Admin ------------------------------------------------------ */
.admin-shell { max-width: 960px; margin-inline: auto; padding: 20px 16px 60px; }
.admin-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.admin-head h1 { margin: 0; font-size: 1.7rem; }
.admin-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.admin-tabs::-webkit-scrollbar { display: none; }
.adm-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.adm-table th {
  text-align: left; font-family: var(--font-display);
  color: var(--green-800); padding: 8px 10px;
  border-bottom: 2px solid var(--line-strong);
  font-size: .86rem;
}
.adm-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; font-weight: 600; }
.adm-table tr:hover td { background: var(--green-50); }
.adm-actions { display: flex; gap: 6px; flex-wrap: nowrap; }
.adm-table td:last-child, .adm-table th:last-child { white-space: nowrap; width: 1%; }
.adm-table td:first-child { white-space: nowrap; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 18px; }
.stat {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 13px; text-align: center;
}
.stat__v { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--green-700); line-height: 1; }
.stat__l { font-size: .76rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 3px; }

/* ---------- 15. Utilities -------------------------------------------------- */
.stack  { display: flex; flex-direction: column; gap: 10px; }
.rowx   { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.center { text-align: center; }
.mt0 { margin-top: 0 } .mt1 { margin-top: 8px } .mt2 { margin-top: 16px } .mt3 { margin-top: 24px }
.mb0 { margin-bottom: 0 } .mb1 { margin-bottom: 8px } .mb2 { margin-bottom: 16px }
.muted { color: var(--muted); font-weight: 700; }
.nowrap { white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}