/* Foodle v2 – "Neutral"
   Zweite Gestaltung: weisser Hintergrund, jede Feed-Karte mit leichter goldiger
   Umrandung, Hashtags nur dezent hervorgehoben. Aktionsleiste bleibt an ihrem
   Platz, ist aber flach statt gerahmt. Gleiche Klassen wie v1 – rein optisch. */
:root {
  --ink: #26241f;
  --ink-soft: #5b564e;
  --gold: #d9a94e;
  --gold-dk: #b8873a;
  --gold-line: #ecdcbc;      /* die leichte Umrandung */
  --gold-wash: #faf3e6;      /* sehr helle Fuellung, z.B. Hashtags */
  --paper: #ffffff;
  --line: #eeeae3;
  --muted: #9c948a;
  --warm-1: #e79a55;         /* Kopfverlauf oben */
  --warm-2: #f3c489;         /* Kopfverlauf unten */
  --tab-h: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { height: 100%; }

body {
  min-height: 100%;
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: contain;
  touch-action: manipulation;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
input, textarea { -webkit-appearance: none; appearance: none; }

#app {
  max-width: 520px;
  margin: 0 auto;
  background: var(--paper);
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px);
  box-shadow: 0 0 0 1px var(--line);
}

/* ---------- Header: warmer Verlauf, Titel mittig ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(160deg, var(--warm-1), var(--warm-2));
  padding: calc(env(safe-area-inset-top) + 18px) 20px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Platz an den Raendern freihalten, damit der mittige Titel nie unter die
   Eckknoepfe laeuft (Trail-Ansicht hat links "Zurueck" und rechts "Aktiv") */
.header-titles { min-width: 0; width: 100%; padding: 0 104px; }
/* Ohne Knopf rechts braucht es den Rand nicht – mehr Platz für den Titel */
.header:not(:has(.header-action)) .header-titles { padding: 0 82px; }
.logo {
  font-size: 27px; font-weight: 400; color: #fff;
  letter-spacing: .3px; line-height: 1.15; overflow-wrap: break-word;
  text-shadow: 0 1px 2px rgba(120, 70, 20, .18);
}
.logo.long { font-size: 20px; letter-spacing: 0; line-height: 1.2; }
.subtitle {
  font-size: 11px; color: rgba(255, 255, 255, .88);
  margin-top: 4px; font-style: italic;
}
.header-action {
  position: absolute; right: 14px;
  top: calc(env(safe-area-inset-top) + 16px);
  background: rgba(255, 255, 255, .92); color: var(--gold-dk);
  border-radius: 999px; padding: 6px 10px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
  max-width: 96px; overflow: hidden; text-overflow: ellipsis;
  font-family: inherit; box-shadow: 0 1px 3px rgba(140, 90, 30, .16);
}
.header-action.ghost { background: rgba(255, 255, 255, .22); color: #fff; border: 1px solid rgba(255,255,255,.65); }
.back-btn {
  position: absolute; left: 14px;
  top: calc(env(safe-area-inset-top) + 17px);
  color: #fff; font-size: 12px; letter-spacing: .6px; padding: 4px 0;
}

/* die weisse Flaeche schiebt sich mit runden Ecken unter den Header */
.stories-section {
  background: var(--paper);
  padding: 18px 0 16px 18px;
  border-bottom: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  margin-top: -16px;
  position: relative;
  z-index: 1;
}
.section-title {
  font-size: 13px; font-weight: 700; margin-bottom: 13px;
  letter-spacing: .2px; color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.hscroll {
  display: flex; gap: 14px; overflow-x: auto; padding-right: 18px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hscroll::-webkit-scrollbar { display: none; }
.story-item { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 62px; }
.story-frame {
  width: 58px; height: 58px; border: 1.5px solid var(--gold-line);
  border-radius: 50%; padding: 2.5px; background: var(--paper);
  position: relative;
}
/* Wie viele Aufnahmen diese Person hat */
.story-count {
  position: absolute; right: -2px; bottom: -2px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--gold); color: #fff; border: 2px solid var(--paper);
  font-size: 10px; font-weight: 700; line-height: 14px; text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.story-frame.active { border-color: var(--gold); }
.story-avatar {
  width: 100%; height: 100%; border-radius: 50%; background: #f4f1ec;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; overflow: hidden; color: var(--gold-dk);
}
.story-avatar img { width: 100%; height: 100%; object-fit: cover; }
.story-label {
  font-size: 11px; color: var(--ink-soft); max-width: 64px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.add-story .story-frame { border-style: dashed; border-color: #d8d2c8; }
.add-story .story-avatar { background: #fbfaf8; color: #b3aa9d; font-size: 22px; }

/* ---------- Feed-Karte: weiss, leichte goldige Umrandung ---------- */
.post-card {
  position: relative;
  margin: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--gold-line);
  border-radius: 16px;
  overflow: hidden;
}
.post-card::after { display: none; }

/* v2: die Abzeichen laufen in der Kopfzeile mit, statt darüber zu schweben */
.badge-stack {
  flex: 0 1 auto; min-width: 0; margin-left: auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.badge {
  padding: 5px 11px; font-size: 9px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  max-width: 148px; border-radius: 999px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chef-badge { background: rgba(255,255,255,.94); color: var(--gold-dk); border: 1px solid var(--gold-line); }
.trail-badge { background: var(--gold-wash); color: var(--gold-dk); border: 1px solid var(--gold-line); }
.trail-badge:active { background: var(--gold); color: #fff; }

.post-header { padding: 14px 16px 11px; display: flex; align-items: center; gap: 11px; border-bottom: none; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; background: #f4f1ec;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; border: 1px solid var(--gold-line); flex: 0 0 auto;
  font-size: 13px; color: var(--gold-dk);
}
.user-info { min-width: 0; }
.user-info h3 {
  font-size: 16px; font-weight: 700; margin-bottom: 2px;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Name und Bild führen aufs Profil der Person */
.user-info h3.is-link { cursor: pointer; }
.user-info h3.is-link:active { color: var(--gold-dk); }
.avatar.is-link { cursor: pointer; }
.avatar.is-link:active { border-color: var(--gold); background: var(--gold-wash); }
.restaurant-name {
  font-size: 11px; color: var(--muted); font-style: italic; background: none;
  padding: 0; border: none; display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: inherit; text-align: left;
}
.restaurant-name.is-link { color: var(--gold-dk); text-decoration: none; }
.restaurant-name.is-link:active { color: var(--ink); }
.restaurant-name .link-ico { font-style: normal; font-size: 9px; opacity: .6; }

.food-image {
  margin: 0 14px; border-radius: 12px;
  min-height: 200px; aspect-ratio: 4 / 3;
  background: #f7f4ef;
  display: flex; align-items: center; justify-content: center;
  font-size: 76px; color: var(--gold); position: relative; overflow: hidden;
}
.food-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.food-meta {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 26px 13px 9px; display: flex; justify-content: space-between; align-items: flex-end;
  background: linear-gradient(transparent, rgba(0, 0, 0, .42)); color: #fff; font-size: 12px;
}
.food-meta .dish { font-weight: 700; letter-spacing: .2px; }
.food-meta .stars { font-size: 10px; opacity: .95; }

.post-description {
  padding: 13px 16px 0; font-size: 15px; color: var(--ink); line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.post-sub { padding: 7px 16px 0; font-size: 11px; color: var(--muted); font-style: italic; }

/* Hashtags: nur leicht hinterlegt */
.mood-tags { padding: 11px 16px 13px; display: flex; gap: 7px; flex-wrap: wrap; }
.mood-tag {
  padding: 5px 11px; background: var(--gold-wash); color: var(--ink-soft);
  border: none; border-radius: 999px; font-size: 12px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.post-card .mood-tag::before { content: '#'; opacity: .5; }
.mood-tag.on { background: var(--gold); color: #fff; }

/* ---------- Aktionen: gleiche Stelle, flacher Stil ---------- */
.action-bar {
  padding: 10px 14px; display: flex; gap: 6px; justify-content: space-between;
  background: var(--paper); border-top: 1px solid var(--line);
}
.action-btn {
  flex: 0 1 auto; min-width: 0;
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  padding: 6px 2px; border: none; background: none; position: relative;
  transition: transform .15s ease; font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
}
.action-btn:active { transform: scale(.94); }
.action-btn .btn-icon { font-size: 17px; line-height: 1; }
.action-btn .btn-text { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.counter {
  position: static; background: none; color: var(--muted); border-radius: 0;
  font-size: 13px; font-weight: 400; min-width: 0; height: auto; padding: 0;
  display: inline; font-family: inherit;
}
/* Die Yum-Zahl ist ein eigenes Ziel – etwas Luft drumherum, damit man sie
   auf dem Handy sicher trifft, ohne dass sich das Layout verschiebt. */
.counter.tappable {
  display: inline-block; padding: 6px 8px; margin: -6px -8px;
  color: var(--gold-dk); text-decoration: underline;
  text-decoration-color: var(--gold-line); text-underline-offset: 3px;
}
.counter.tappable:active { color: var(--ink); }
.yum-btn { background: none; border: none; color: var(--ink); }
.yum-btn.on { background: none; color: var(--gold-dk); }
.yum-btn.on .btn-text { font-weight: 700; }
.chef-hat-btn { color: var(--ink); }
.chef-hat-btn.on { background: none; color: var(--gold-dk); }
.chef-hat-btn.on .btn-text { font-weight: 700; }
.comment-btn { color: var(--ink); }
@keyframes yumPulse { 0%,100% { transform: scale(1); } 45% { transform: scale(1.16); } }
.action-btn.pulse { animation: yumPulse .4s ease-in-out; }

/* ---------- Panels ---------- */
.panel {
  margin: 14px 16px; padding: 15px; background: var(--paper);
  border: 1px solid var(--gold-line); border-radius: 16px;
}
.panel-title {
  font-size: 13px; font-weight: 700; letter-spacing: .2px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.panel-title .sub { font-size: 11px; color: var(--muted); font-weight: 400; font-style: italic; }
.trail-spot {
  min-width: 54px; width: 54px; height: 54px; border: 1px solid var(--gold-line);
  border-radius: 12px; background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--gold-dk); overflow: hidden; position: relative; flex: 0 0 auto;
}
.trail-spot img { width: 100%; height: 100%; object-fit: cover; }
.trail-spot.add { border-style: dashed; border-color: #d8d2c8; color: #b3aa9d; }
.trail-spot .num {
  position: absolute; top: 0; left: 0; background: rgba(38,36,31,.78); color: #fff;
  font-size: 9px; font-family: -apple-system, sans-serif; padding: 1px 5px;
  font-weight: 700; border-radius: 12px 0 8px 0;
}

/* ---------- Listen ---------- */
.list-row {
  display: flex; align-items: center; gap: 13px; padding: 12px 18px;
  border-bottom: 1px solid var(--line); width: 100%; text-align: left; font-family: inherit;
}
.list-row:active { background: #fbfaf8; }
.list-thumb {
  width: 54px; height: 54px; flex: 0 0 auto; border: 1px solid var(--gold-line);
  border-radius: 12px; background: #faf8f5;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; overflow: hidden;
}
.list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.list-main { flex: 1; min-width: 0; }
.list-main h4 {
  font-size: 15px; font-weight: 700; margin-bottom: 3px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.list-main p { font-size: 12px; color: var(--muted); font-style: italic; }
.list-chevron { color: #cfc7bb; font-size: 18px; }

/* ---------- SVG-Karte ---------- */
.map-wrap {
  background: #faf8f5; border: 1px solid var(--gold-line); border-radius: 16px;
  margin: 14px 16px; position: relative;
  overflow: hidden; touch-action: none; cursor: grab;
}
.map-wrap:active { cursor: grabbing; }
.map-wrap svg { display: block; width: 100%; height: auto; user-select: none; }

.map-controls { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.map-controls button {
  width: 36px; height: 36px; background: rgba(255,255,255,.94); color: var(--ink);
  border: 1px solid var(--gold-line); border-radius: 10px; font-size: 16px; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}
.map-controls button:active { background: var(--gold); color: #fff; }
.map-hint {
  position: absolute; left: 10px; bottom: 12px; font-size: 9px; color: var(--muted);
  font-style: italic; background: rgba(255, 255, 255, .82); padding: 3px 8px;
  border-radius: 999px; pointer-events: none; max-width: 55%;
}
.map-empty { padding: 34px 20px; text-align: center; color: var(--muted); font-style: italic; font-size: 13px; line-height: 1.6; }

/* ---------- Statistik ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0 16px; border: 1px solid var(--gold-line); border-radius: 16px; overflow: hidden;
}
.stat { padding: 14px 4px; text-align: center; border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat b { display: block; font-size: 20px; color: var(--gold-dk); }
.stat span {
  font-size: 9px; text-transform: uppercase; letter-spacing: .9px; color: var(--muted);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px 16px; }
.grid-cell {
  aspect-ratio: 1; background: #faf8f5; border-radius: 10px;
  border: 1px solid var(--gold-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; overflow: hidden; position: relative;
}
.grid-cell img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Formulare ---------- */
.field { padding: 0 18px 16px; }
.field label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: var(--ink-soft); margin-bottom: 7px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.field input[type=text], .field textarea, .field select {
  width: 100%; padding: 12px 13px; background: var(--paper);
  border: 1px solid var(--gold-line); border-radius: 12px;
  font-size: 16px; font-family: inherit; color: var(--ink);
}
.field textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
/* Text zum Herauskopieren, wenn die Zwischenablage nicht darf */
.field textarea[readonly] {
  background: #faf8f5; color: var(--ink-soft); font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); }
.hint { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 7px; line-height: 1.5; }

.link-row {
  display: flex; align-items: center; gap: 8px; margin: 9px 0;
  background: var(--gold-wash); border-radius: 12px; padding: 9px 11px;
}
.link-preview { flex: 1; min-width: 0; font-size: 11px; color: var(--gold-dk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-btn { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--gold-line); border-radius: 10px; background: var(--paper); font-size: 15px; }
.link-btn:active { background: var(--gold); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; background: var(--gold); color: #fff;
  border: 1px solid var(--gold); border-radius: 999px; font-size: 13px; font-weight: 700;
  letter-spacing: .3px; text-transform: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.btn:active { background: var(--gold-dk); border-color: var(--gold-dk); }
.btn.secondary { background: var(--paper); color: var(--ink); border-color: var(--gold-line); }
.btn.secondary:active { background: var(--gold-wash); }
.btn.danger { background: var(--paper); color: #b4483f; border-color: #eed6d3; }
.btn[disabled] { opacity: .45; }
.btn-row { display: flex; gap: 10px; padding: 0 18px 16px; }
.btn-row .btn { padding: 12px; }

.rating-row { display: flex; gap: 7px; }
.crown {
  flex: 1; padding: 10px 0; font-size: 19px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--paper); filter: grayscale(1); opacity: .35;
}
.crown.on { filter: none; opacity: 1; border-color: var(--gold-line); background: var(--gold-wash); }

.photo-slot {
  margin: 0 18px 16px; min-height: 220px; aspect-ratio: 4 / 3;
  border: 1.5px dashed var(--gold-line); border-radius: 16px;
  background: #faf8f5; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; color: var(--gold-dk); position: relative; overflow: hidden;
}
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-slot .emoji-preview { font-size: 72px; }
.photo-slot .ph-label { font-size: 12px; letter-spacing: .3px; font-family: -apple-system, sans-serif; }
.emoji-row { display: flex; gap: 8px; overflow-x: auto; padding: 0 18px 16px; scrollbar-width: none; }
.emoji-row::-webkit-scrollbar { display: none; }
.emoji-pick {
  min-width: 46px; height: 46px; font-size: 23px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--paper); flex: 0 0 auto;
}
.emoji-pick.on { border-color: var(--gold); background: var(--gold-wash); }

/* ---------- Tabbar: hell und ruhig ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  max-width: 520px; margin: 0 auto;
  background: rgba(255,255,255,.97); border-top: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(10px);
  display: flex; align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 9px 2px; color: #b3aa9d; height: var(--tab-h);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.tab .ti {
  font-size: 19px; line-height: 1; filter: grayscale(1) opacity(.55);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, transform .18s ease;
}
.tab .tl { font-size: 9px; letter-spacing: .5px; }

/* Der orange Punkt sitzt auf dem Tab, in dem man gerade ist */
.tab.on { color: var(--gold-dk); }
.tab.on .ti {
  filter: none;
  background: linear-gradient(160deg, var(--warm-1), var(--warm-2));
  box-shadow: 0 2px 8px rgba(200, 130, 50, .32);
}
.tab.on .tl { font-weight: 700; }

/* Post ist kein Ort, sondern eine Handlung: nur leicht hinterlegt, damit der
   kräftige Punkt weiterhin zeigt, in welchem Tab man steht */
.tab.cam { color: var(--gold-dk); }
.tab.cam .ti {
  filter: none;
  background: var(--gold-wash);
  border: 1.5px solid var(--gold);
  color: var(--gold-dk);
  font-size: 22px; font-weight: 300; line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  padding-bottom: 2px;                 /* das Plus optisch mittig setzen */
}
.tab.cam .tl { font-weight: 700; }
.tab.cam:active .ti { background: var(--gold); color: #fff; transform: scale(.92); }

/* ---------- Sheets ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(30, 26, 20, .42); z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn .18s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(28px); } to { transform: translateY(0); } }
.sheet {
  width: 100%; max-width: 520px; background: var(--paper);
  border-radius: 22px 22px 0 0; max-height: 88vh; overflow-y: auto;
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
  animation: slideUp .22s ease; -webkit-overflow-scrolling: touch;
}
.sheet-head {
  position: sticky; top: 0; background: var(--paper); z-index: 2;
  padding: 17px 20px 14px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-radius: 22px 22px 0 0;
}
.sheet-head h3 {
  font-size: 15px; letter-spacing: .2px; text-transform: none; font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.sheet-close { font-size: 21px; color: var(--muted); padding: 0 4px; line-height: 1; }
.sheet-body { padding-top: 16px; }

.comment { padding: 12px 18px; border-bottom: 1px solid var(--line); display: flex; gap: 11px; align-items: flex-start; }
.comment .avatar { width: 34px; height: 34px; font-size: 11px; }
.comment .c-body { flex: 1; min-width: 0; }
.comment .c-who { font-size: 13px; font-weight: 700; font-family: -apple-system, sans-serif; }
.comment .c-txt { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-top: 3px; word-wrap: break-word; }
.comment .c-at { font-size: 10px; color: var(--muted); margin-top: 4px; font-style: italic; }

/* ---------- Foodie: Aufnahme & Vollbild ---------- */
.snap-preview {
  margin: 0 18px; aspect-ratio: 4 / 5; min-height: 260px; background: #f7f4ef;
  border: 1px solid var(--gold-line); border-radius: 16px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.snap-preview img { width: 100%; height: 100%; object-fit: cover; }

.snap-viewer {
  position: fixed; inset: 0; z-index: 150; background: #17140f;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 8px) 0 calc(env(safe-area-inset-bottom) + 8px);
  animation: fadeIn .18s ease;
}
.snap-bars { position: absolute; top: calc(env(safe-area-inset-top) + 10px); left: 12px; right: 12px; display: flex; gap: 4px; z-index: 4; }
.snap-bar { flex: 1; height: 2.5px; background: rgba(255, 255, 255, .28); border-radius: 2px; overflow: hidden; }
.snap-bar i { display: block; height: 100%; width: 0; background: var(--warm-2); }
.snap-bar.done i { width: 100%; }
.snap-bar.now i { animation: snapFill 6s linear forwards; }
@keyframes snapFill { from { width: 0; } to { width: 100%; } }

.snap-head { position: absolute; top: calc(env(safe-area-inset-top) + 22px); left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; z-index: 4; color: #fff; }
.snap-head .avatar { width: 34px; height: 34px; font-size: 11px; background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }
.snap-who { flex: 1; min-width: 0; line-height: 1.3; }
.snap-who b { display: block; font-size: 13px; font-family: -apple-system, sans-serif; }
.snap-who span { font-size: 10px; color: rgba(255, 255, 255, .62); font-style: italic; }
.snap-close { color: #fff; font-size: 21px; padding: 4px 8px; line-height: 1; }

.snap-stage { width: 100%; max-width: 520px; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 90px; }
.snap-stage img { width: 100%; height: 100%; object-fit: contain; }

.snap-text {
  position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 62px);
  z-index: 4; padding: 14px 22px; color: #fff; font-size: 15px; line-height: 1.5;
  text-align: center; text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
  background: linear-gradient(transparent, rgba(0, 0, 0, .5));
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.snap-nav { position: absolute; top: 70px; bottom: 0; width: 38%; z-index: 3; background: transparent; }
.snap-nav.left { left: 0; }
.snap-nav.right { right: 0; width: 62%; }

.snap-del {
  position: absolute; bottom: calc(env(safe-area-inset-bottom) + 16px); left: 50%;
  transform: translateX(-50%); z-index: 5; color: #fff; border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px; padding: 8px 18px; font-size: 12px; letter-spacing: .3px;
  font-family: -apple-system, sans-serif; background: rgba(0, 0, 0, .3);
}

.empty { padding: 44px 30px; text-align: center; color: var(--muted); }
.empty .e-icon { font-size: 42px; display: block; margin-bottom: 14px; filter: grayscale(.45); }
.empty p { font-size: 14px; line-height: 1.7; font-style: italic; }

/* ---------- Vorschlagsliste für Lokale ---------- */
.vorschlaege { margin-top: 8px; }
.vorschlaege:empty { display: none; }
.vorschlag {
  display: block; width: 100%; text-align: left; padding: 10px 12px;
  border: 1px solid var(--gold-line); border-radius: 12px; background: var(--paper);
  margin-bottom: 6px; font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.vorschlag:active { background: var(--gold-wash); }
.vorschlag b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.vorschlag span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.vorschlag-hinweis {
  padding: 10px 12px; font-size: 12px; color: var(--muted); font-style: italic;
  background: #faf8f5; border-radius: 12px;
}

/* ---------- Zwei-Wege-Auswahl (z.B. öffentlich / privat) ---------- */
.wahl-row { display: flex; gap: 8px; }
.wahl {
  flex: 1; text-align: left; padding: 11px 12px; border-radius: 12px;
  border: 1px solid var(--gold-line); background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.wahl b { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.wahl span { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.wahl.on { border-color: var(--gold); background: var(--gold-wash); }
.wahl.on b { color: var(--gold-dk); }

.privat-badge { background: #f2efe9; color: var(--ink-soft); border: 1px solid #e2ddd3; }

/* ---------- Ziehen zum Aktualisieren ---------- */
.ptr {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 6px);
  transform: translate(-50%, 0); opacity: 0; z-index: 45; pointer-events: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 2px 8px rgba(120, 80, 30, .22);
  display: flex; align-items: center; justify-content: center;
}
.ptr-ring {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--gold-line); border-top-color: var(--gold);
  display: block;
}
.ptr.bereit .ptr-ring { border-color: var(--gold); border-top-color: var(--gold-dk); }
.ptr.dreht .ptr-ring { animation: ptrDreh .7s linear infinite; }
@keyframes ptrDreh { to { transform: rotate(360deg); } }

#toast-root {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 14px);
  z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.toast {
  background: rgba(38, 36, 31, .94); color: #fff; padding: 11px 18px;
  border-radius: 999px; font-size: 13px; letter-spacing: .2px;
  max-width: 88%; text-align: center; animation: fadeIn .16s ease;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.account-state {
  font-size: 14px; font-weight: 700; color: var(--ink-soft);
  padding: 12px 14px; background: #faf8f5; border-radius: 12px;
  border-left: 3px solid #ded7cc; margin-bottom: 10px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.account-state.on { border-left-color: var(--gold); color: var(--gold-dk); }

.credits { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.credits li { font-size: 11px; color: var(--muted); line-height: 1.45; font-style: italic; }
.credits li b { color: var(--ink-soft); font-style: normal; font-weight: 700; }

.divider { height: 8px; background: #faf8f5; margin-top: 16px; }
.pad { padding: 16px 18px; }

/* ---------- Feed-Filter ---------- */
.filter-row { display: flex; gap: 8px; padding: 12px 16px 4px; }
.filter-chip {
  padding: 7px 15px; border: 1px solid var(--gold-line); border-radius: 999px;
  background: var(--paper); color: var(--ink-soft); font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.filter-chip.on { background: var(--gold-wash); color: var(--gold-dk); font-weight: 700; border-color: var(--gold); }

/* Lupe am rechten Rand der Filterleiste */
.filter-suche {
  margin-left: auto; flex: 0 0 auto;
  width: 38px; height: 34px; border-radius: 999px;
  border: 1px solid var(--gold-line); background: var(--paper);
  font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.filter-suche:active { background: var(--gold-wash); }

/* ---------- Knopf am rechten Rand einer Listenzeile ---------- */
.row-action {
  flex: 0 0 auto; padding: 8px 13px; border: 1px solid var(--gold-line);
  border-radius: 999px; background: var(--paper); color: var(--gold-dk);
  font-size: 12px; font-weight: 700; white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.row-action:active { background: var(--gold); color: #fff; }
.row-note {
  flex: 0 0 auto; font-size: 12px; color: var(--muted); white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- QR-Code ---------- */
.qr-wrap { display: flex; justify-content: center; padding: 10px 18px 0; }
.qr-wrap svg { border: 1px solid var(--gold-line); border-radius: 14px; display: block; }
.qr-handle {
  font-size: 21px; font-weight: 700; color: var(--gold-dk); margin-bottom: 6px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}