/* Foodle v3 – "Fine Dining"
   Dritte Gestaltung nach der dunklen Vorlage: schwarzer Grund, warmes Gold,
   Serifen fuer alles Reprasentative, Grotesk fuer die Bedienung. Die Klassen
   sind dieselben wie in v1 und v2 – rein optisch. Inhaltlich unterscheidet
   sich v3 nur an drei Stellen (siehe app-v3.js): kein Text im Bild, ein
   eigenes Textfeld darunter, und die neue Aktionsleiste. */
:root {
  --bg: #000000;              /* der Grund, auf dem alles liegt */
  --card: #14110d;            /* Karten und Flaechen */
  --card-2: #1b1712;          /* eine Stufe heller, z.B. Eingabefelder */
  --ink: #f6f1e7;             /* Text auf dunklem Grund */
  --ink-soft: #cdc4b6;
  --muted: #8e8578;
  --gold: #d5a95c;            /* das tragende Gold */
  --gold-lt: #ecc98a;         /* helleres Gold, z.B. Logo */
  --gold-dk: #a67c33;
  --gold-line: rgba(213, 169, 92, .34);   /* die feine Umrandung */
  --gold-wash: rgba(213, 169, 92, .11);   /* sehr leichte Fuellung */
  --line: rgba(246, 241, 231, .10);       /* neutrale Trennlinie */
  --tab-h: 66px;
  --hero: none;               /* wird beim Start aus photos.js gesetzt */
}

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

html { height: 100%; background: var(--bg); }

body {
  min-height: 100%;
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--bg);
  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(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px);
}


/* ---------- Kopf: Logo auf einem dunklen Speisenbild ----------
   Der Kopf bleibt wie in v2 oben stehen. Damit beim Scrollen nichts
   durchscheint, traegt er das Bild selbst und ist deshalb undurchsichtig. */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: #0b0906;
  background-image:
    linear-gradient(rgba(6, 5, 3, .86), rgba(6, 5, 3, .93)),
    var(--hero);
  background-size: cover;
  background-position: center 38%;
  padding: calc(env(safe-area-inset-top) + 22px) 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Der Rand haelt nur den Titel von den Eckknoepfen fern (links "Zurueck",
   rechts "Trail"). Die Unterzeile sitzt tiefer als die Knoepfe und darf
   deshalb die volle Breite nutzen – gesperrt gesetzt braucht sie die auch. */
.header-titles { min-width: 0; width: 100%; padding: 0; }

.logo {
  font-size: 28px; font-weight: 400; color: var(--gold-lt);
  letter-spacing: 4px; line-height: 1.15; text-transform: uppercase;
  /* Ohne Eckknoepfe steht der ganze Bildschirm zur Verfuegung. Die 92
     Pixel je Seite halten Platz fuer "Zurueck" links und einen Knopf
     rechts - wo keiner steht, waren sie die halbe Breite eines Telefons,
     und der Titel wurde abgeschnitten. */
  padding: 0 20px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}
.logo.mit-ecken { padding: 0 92px; }
.logo.long { font-size: 19px; letter-spacing: 2px; }
/* Auf sehr schmalen Geraeten (iPhone SE und kleiner) eine Stufe kleiner,
   damit auch dort nichts ausgelassen wird - und der Platz fuer die
   Eckknoepfe schrumpft mit, sonst bleibt fuer den Titel zu wenig uebrig.
   Das galt auch schon vorher: "LOKAL" mit Zurueck-Knopf passte bei 320
   Pixeln nicht in die verbleibenden 136. */
@media (max-width: 380px) {
  .logo { font-size: 24px; letter-spacing: 3px; }
  .logo.long { font-size: 17px; letter-spacing: 1.4px; }
  .logo.mit-ecken { padding: 0 74px; }
}

/* Die gesperrte Unterzeile, links und rechts von einem feinen Strich gefasst */
.subtitle {
  font-size: 10px; color: rgba(246, 241, 231, .72);
  margin-top: 10px; font-style: normal; text-transform: uppercase;
  letter-spacing: 3.2px;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  max-width: 100%; padding: 0 16px;
}
/* Der Text selbst darf umbrechen, aber nur einmal: zwei Zeilen erklaeren,
   drei erschlagen. Vorher stand hier nowrap - eine erklaerende Zeile lief
   damit rechts aus dem Bild. */
.subtitle > span {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; min-width: 0;
  white-space: normal; overflow-wrap: break-word;
  line-height: 1.55; text-align: center;
}
/* Bei zwei Zeilen wirkt die enge Sperrung gedraengt - etwas Luft nehmen.
   Und je schmaler das Geraet, desto weniger Sperrung: ein erklaerender
   Satz soll in zwei Zeilen passen, nicht in der dritten abbrechen. */
@media (max-width: 420px) {
  .subtitle { letter-spacing: 2.2px; }
}
@media (max-width: 380px) {
  .subtitle { letter-spacing: 1.2px; padding: 0 10px; gap: 6px; }
  .subtitle > span { font-size: 9.5px; }
  .subtitle::before, .subtitle::after { width: 14px; }
}
.subtitle::before, .subtitle::after {
  content: ''; width: 26px; height: 1px; flex: 0 0 auto;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}

.header-action {
  position: absolute; right: 14px;
  top: calc(env(safe-area-inset-top) + 22px);
  background: rgba(0, 0, 0, .35); color: var(--gold);
  border: 1px solid var(--gold-line);
  border-radius: 999px; padding: 7px 12px; font-size: 8px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.1px; white-space: nowrap;
  max-width: 98px; overflow: hidden; text-overflow: ellipsis;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.header-action:active { background: var(--gold); color: #17130c; }
.header-action.ghost { background: rgba(0, 0, 0, .3); }
.back-btn {
  position: absolute; left: 14px;
  top: calc(env(safe-area-inset-top) + 24px);
  color: var(--gold); font-size: 12px; letter-spacing: .6px; padding: 4px 0;
}

/* Glocke links im Kopf, mit Zahl fuer Ungelesenes */
.header-bell {
  position: absolute; left: 14px;
  top: calc(env(safe-area-inset-top) + 18px);
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--gold-line); background: rgba(0, 0, 0, .35);
  font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.header-bell:active { background: var(--gold); }
/* Lupe direkt neben der Glocke – in der Filterleiste stand sie im Weg */
.header-lupe {
  position: absolute; left: 58px;
  top: calc(env(safe-area-inset-top) + 18px);
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--gold-line); background: rgba(0, 0, 0, .35);
  font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.header-lupe:active { background: var(--gold); }

.bell-zahl {
  position: absolute; top: -3px; right: -3px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: #e0552b; color: #fff; border: 2px solid #0b0906;
  font-size: 10px; font-weight: 700; line-height: 14px; text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Eine ungelesene Meldung bekommt einen goldenen Streifen am Rand */
.list-row.meldung { align-items: flex-start; }
.list-row.meldung.neu { border-left: 3px solid var(--gold); padding-left: 15px; }
.list-row.meldung .wann { font-size: 10px; color: var(--muted); margin-top: 3px; }

/* ---------- Foodies ---------- */
.stories-section {
  background: linear-gradient(rgba(11, 9, 6, .96), var(--bg));
  padding: 16px 0 16px 18px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
.section-title {
  font-size: 12px; font-weight: 600; margin-bottom: 13px;
  letter-spacing: 1.6px; color: var(--muted); text-transform: uppercase;
  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: 8px; min-width: 62px; }
.story-frame {
  width: 58px; height: 58px; border: 1.5px solid var(--line);
  border-radius: 50%; padding: 2.5px; background: var(--bg);
  position: relative;
}
/* Ungesehen: der goldene Ring. Er ist die eigentliche Aussage der Leiste. */
.story-frame.neu { border-color: var(--gold); }
.story-count {
  position: absolute; right: -2px; bottom: -2px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--gold); color: #17130c; border: 2px solid var(--bg);
  font-size: 10px; font-weight: 700; line-height: 14px; text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Die goldene Kugel sagt dasselbe wie der Ring und geht mit ihm. */
.story-frame.neu::before {
  content: ''; position: absolute; right: 1px; top: 1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--bg);
  z-index: 1;
}
/* Die eigenen Aufnahmen bekommen einen kleinen Punkt statt eines zweiten
   Rings. Er bleibt auch dann, wenn nichts ungesehen ist: die eigene Story
   ist nie neu für einen selbst, aber man soll sehen, dass man eine hat. */
.story-frame.active::after {
  content: ''; position: absolute; right: 2px; bottom: 2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #e08a2b; border: 2px solid var(--bg);
}
.story-avatar {
  width: 100%; height: 100%; border-radius: 50%; background: #241d15;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; overflow: hidden; color: var(--gold);
}
.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: solid; border-color: rgba(246,241,231,.22); }
.add-story .story-avatar { background: #17140f; color: var(--ink-soft); font-size: 24px; font-weight: 300; }

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

/* ---------- Der Kopf: drei Zeilen ----------

   1   Gruppe links          Trail rechts
   2   Bild, Name, Lokal     die drei Punkte
   3                         die Kronen

   Untereinander statt nebeneinander - deshalb ist die Kopfzeile selbst
   eine Spalte. Die Ausrichtung nach rechts macht in Zeile 1 und 3
   dieselbe Regel: der rechte Rand ist die gemeinsame Achse von Trail,
   Punkten und Kronen. */
.post-header {
  padding: 13px 16px;
  display: flex; flex-direction: column; gap: 8px;
  /* Eine Krone ist genau so breit wie ihre Schriftgroesse - nachgemessen,
     zwoelf Punkte bei zwoelf Punkten Schrift. Daraus rechnet die
     Lokalzeile ihren Freiraum aus; aendert sich die Groesse, folgt der
     Freiraum von selbst. */
  --kronen-groesse: 12px;
  --kronen: 0;
}

/* Zeile 1. Links und rechts mit demselben Abstand zum Rand - der Abstand
   kommt aus dem Polster des Kopfes und nicht aus einer eigenen Zahl,
   damit beide Seiten zwangslaeufig gleich liegen. */
.kopf-meta {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; min-width: 0;
}
.kopf-meta-links, .kopf-meta-rechts {
  display: flex; flex-wrap: wrap; gap: 6px; min-width: 0;
}
.kopf-meta-rechts { justify-content: flex-end; }

/* Leise. Duenn umrandet, kleine Schrift, kein fetter Text - eine Marke
   ist eine Nebenauskunft und nicht die Nachricht. */
.kopf-marke {
  display: inline-flex; align-items: center;
  max-width: 100%; min-width: 0;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--gold-line); background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px; font-weight: 500; letter-spacing: .4px;
  color: var(--gold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kopf-marke.privat { color: var(--muted); border-color: var(--line); }
.kopf-marke.chef::before { content: '♛ '; }
button.kopf-marke:active { background: var(--gold-wash); }

/* Zeile 2 */
.kopf-haupt { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* Der Kopf einer Profilseite. Bild und Name nebeneinander - so, wie es
   der Beitragskopf frueher auch war. Er hat sich dessen Klasse geliehen,
   bis der Beitragskopf zu drei Zeilen wurde; jetzt hat er eine eigene. */
.profil-kopf {
  padding: 15px 16px 13px;
  display: flex; align-items: center; gap: 12px; min-width: 0;
}

/* ---------- Die Kronen ----------

   Buendig unter den drei Punkten, auf der Hoehe des Restaurantnamens.

   Woher die 24,5 Punkte kommen (gemessen, nicht geraten):

       8,0   der Zeilenabstand des Kopfes (row-gap)
      12,0   die Hoehe der Kronenzeile selbst
       4,5   was die Namensspalte unter dem Restaurantnamen uebrig
             laesst, weil das runde Bild hoeher ist als sie
      ────
      24,5

   Keine dieser Zahlen haengt an der Bildschirmbreite - deshalb stimmt
   der Versatz bei 320 wie bei 430 Punkten, nachgemessen.

   pointer-events: none, weil die Zeile ueber die volle Breite geht und
   sonst die untere Haelfte der drei Punkte abfangen wuerde. Die Kronen
   sind eine Auskunft, kein Knopf - sie brauchen keine Beruehrung. */
.kopf-kronen {
  display: flex; justify-content: flex-end;
  margin-top: -24.5px;
  pointer-events: none;
  font-size: var(--kronen-groesse); line-height: 1;
  font-style: normal; letter-spacing: 0;
  color: var(--gold); white-space: nowrap;
}

/* Die drei Punkte rechts in der Kopfzeile - Zugang zum Verwalten */
/* ---------- Die drei Punkte ----------

   Der Kasten ist kuerzer als frueher (22 statt 30), damit die Kronen
   buendig darunter passen: sie liegen auf der Hoehe des
   Restaurantnamens, und mit 30 Punkten Hoehe reichte dieser Knopf genau
   dorthin hinab - an derselben rechten Kante.

   Die Trefferflaeche wird dadurch NICHT kleiner. Sie steckt in einem
   unsichtbaren Feld darum herum (::after), das ueber den Kasten
   hinausragt - so bleibt der Knopf gut zu treffen, ohne dass man ihm
   ansieht, wie gross er wirklich ist. Zweiundzwanzig Punkte trifft auf
   einem Telefon niemand zuverlaessig; achtunddreissig schon. */
.post-menu {
  position: relative;
  flex: 0 0 auto; margin-left: 6px; align-self: flex-start;
  width: 30px; height: 22px; border-radius: 999px;
  color: var(--muted); font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.post-menu::after {
  content: ''; position: absolute;
  top: -8px; bottom: -8px; left: -6px; right: -6px;
}
/* Der Knopf sitzt immer ganz rechts - er ist der letzte in seiner
   Zeile, und dort gehoert er hin. */
.post-menu { margin-left: auto; }
.post-menu:active { background: var(--gold-wash); color: var(--gold); }
/* Die Abzeichen bleiben schmal – sonst frisst ein langer Trailname den
   Platz weg und der Personenname wird abgeschnitten. */
.badge {
  padding: 5px 10px; font-size: 8px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  max-width: 118px; border-radius: 999px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chef-badge { background: rgba(213,169,92,.10); color: var(--gold); border: 1px solid var(--gold-line); }
.chef-badge::before { content: '♛ '; }
.trail-badge { background: var(--gold-wash); color: var(--gold); border: 1px solid var(--gold-line); }
.trail-badge:active { background: var(--gold); color: #17130c; }


.avatar {
  width: 42px; height: 42px; border-radius: 50%; background: #241d15;
  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);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.user-info { flex: 1 1 auto; min-width: 0; }

/* Lokal links, Kronen rechts - auf einer Zeile. Beide auf der Grundlinie
   ausgerichtet, damit die Kronen nicht ueber dem Text zu schweben
   scheinen. */
/* Nur noch das Lokal - die Kronen sind eine Zeile tiefer gewandert und
   nehmen dem Namen keine Breite mehr weg. */
/* Nur das Lokal - die Kronen stehen rechts daneben, aber ausserhalb
   dieser Spalte: sonst endeten sie am rechten Rand der Namensspalte
   statt buendig unter den drei Punkten.

   Weil die Kronen darueber liegen, haelt die Zeile ihnen den Platz frei -
   genau so viel, wie sie brauchen, und keinen Punkt mehr. Zwei Punkte
   Luft je Krone sind darin enthalten. Ohne Bewertung ist --kronen null,
   und damit auch der Freiraum. */
.lokal-zeile {
  display: flex; min-width: 0;
  padding-right: calc(var(--kronen) * (var(--kronen-groesse) + 2px));
}
.lokal-zeile .restaurant-name {
  min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Die Kronen tragen den Stil des Lokals - dieselbe Groesse, dieselbe
   Farbe, dieselbe Schrift. Nur nicht kursiv: das Lokal ist ein Name und
   darf sich neigen, eine Bewertung ist eine Angabe und steht gerade. */
.lokal-zeile .stars {
  flex: 0 0 auto; font-size: 12px; font-style: normal;
  color: var(--gold); letter-spacing: 0; line-height: 1;
  white-space: nowrap;
}
.user-info h3 {
  font-size: 16px; font-weight: 700; margin-bottom: 2px; color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-info h3.is-link { cursor: pointer; }
.user-info h3.is-link:active { color: var(--gold); }
.avatar.is-link { cursor: pointer; }
.avatar.is-link:active { border-color: var(--gold); background: var(--gold-wash); }
.restaurant-name {
  font-size: 12px; color: var(--gold); 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 { text-decoration: none; }
.restaurant-name.is-link:active { color: var(--ink); }
.restaurant-name .link-ico { font-style: normal; font-size: 9px; opacity: .55; }

/* Das Bild bleibt wie in v2 vom Kopf abgesetzt: eigener Rand, runde Ecken.
   Beschriftet wird es nicht mehr – der Text steht darunter. */
/* Das Seitenverhältnis kommt jetzt aus der Aufnahme selbst und steht als
   Stil am Element - hier bleibt nur der Rückfall für Beiträge ohne
   Massangabe. min-height ist bewusst weg: bei einem Hochformat rechnet der
   Browser die Höhe aus dem Verhältnis, eine feste Mindesthöhe würde sie
   wieder verbiegen. */
.food-image {
  margin: 0 14px; border-radius: 12px;
  /* Fest vier zu fuenf. Der Rahmen ist die Regel des Feeds; welcher Teil
     einer Aufnahme darin steht, entscheidet ihr eigener Ausschnitt. So
     springt zwischen zwei Beitraegen nichts, und ein Karussell hat auf
     jeder Bahn dieselbe Hoehe. */
  aspect-ratio: 4 / 5;
  background: #1d1810;
  display: flex; align-items: center; justify-content: center;
  font-size: 76px; color: var(--gold); position: relative; overflow: hidden;
}
/* Ohne Ausschnittangaben - Beispielbeitraege, aeltere Stellen - bleibt es
   beim schlichten Fuellen. Leer wird der Rahmen dadurch nie. */
.food-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mit Ausschnitt liegt das Bild frei im Rahmen: Breite, Hoehe und Versatz
   kommen aus cropStil() und stehen im style-Attribut. */
.food-image img.crop-bild {
  position: absolute; width: auto; height: auto; max-width: none; object-fit: cover;
}

/* Video füllt den Rahmen wie ein Bild. object-fit: contain, damit bei
   mehreren Aufnahmen mit verschiedenen Formaten nichts abgeschnitten wird -
   der Rahmen richtet sich nach der ersten. */
.food-video {
  width: 100%; height: 100%; object-fit: contain;
  display: block; background: #000;
}
/* Oben links, nicht unten: unten liegt die Bedienleiste des Videos darüber */
.video-dauer {
  position: absolute; left: 10px; top: 10px;
  background: rgba(0, 0, 0, .62); color: #fff;
  border-radius: 999px; padding: 3px 9px;
  font-size: 11px; font-weight: 600; pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Bei mehreren Aufnahmen fuellt jede ihren eigenen Ausschnitt. Hier stand
   frueher object-fit: contain, damit nichts beschnitten wird - der Preis
   waren Balken, sobald zwei Aufnahmen verschiedene Formate hatten. Jetzt
   entscheidet der Mensch, WAS beschnitten wird, statt Balken zu bekommen. */


/* Mehrere Bilder: seitlich scrollbar, jedes rastet ein */
.food-image.mehrere { display: block; }
.bild-bahn {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.bild-bahn::-webkit-scrollbar { display: none; }
.bild-feld {
  flex: 0 0 100%; height: 100%; scroll-snap-align: center;
  /* Ein schneller Wisch soll genau ein Bild weiterspringen und nicht zwei.
     Dafuer gibt es diese eine Zeile - der Browser haelt dann an jedem
     Rastpunkt an, statt mit Schwung darueber hinwegzugleiten. Von Hand
     nachgebaut waere es eine Geschwindigkeitsrechnung mit Zeitgebern. */
  scroll-snap-stop: always;
  position: relative; overflow: hidden;
}
.bild-zahl {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0, 0, 0, .6); color: #fff;
  border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif; pointer-events: none;
}


/* Video in der Erfassen-Vorschau und im Streifen */
.photo-slot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bild-mini video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-video {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  color: #fff; font-size: 15px; text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
  pointer-events: none;
}

/* Video in einer Nachricht */
.msg-bild video { display: block; width: 100%; max-height: 340px; background: #000; }

/* Bildstreifen im Erfassen-Blatt */
.bild-mini {
  position: relative; flex: 0 0 auto;
  width: 62px; height: 62px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--gold-line); background: var(--card-2);
}
.bild-mini.erstes { border-color: var(--gold); }
.bild-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bild-mini .mini-marke {
  position: absolute; top: 3px; left: 3px;
  background: var(--gold); color: #17130c; border-radius: 999px;
  width: 17px; height: 17px; line-height: 17px; text-align: center;
  font-size: 10px; font-weight: 700; font-family: -apple-system, sans-serif;
}
.bild-mini:active { opacity: .5; }

/* Filterleiste, die seitlich scrollt, mit fester Lupe daneben */
.filter-zeile { display: flex; align-items: center; gap: 8px; padding: 14px 16px 4px; }
.filter-zeile .filter-row {
  flex: 1; min-width: 0; padding: 0; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.filter-zeile .filter-row::-webkit-scrollbar { display: none; }
.filter-zeile .filter-chip { flex: 0 0 auto; }
.filter-zeile .filter-suche { margin-left: 0; }

/* Erwaehnung im Text */
.erwaehnung { color: var(--gold); font-weight: 600; cursor: pointer; }
.erwaehnung:active { color: var(--gold-lt); }

/* Antwort auf einen Kommentar: eingerueckt mit feiner Linie */
.comment-wrap.antwort .comment { padding-left: 44px; }
.comment-wrap.antwort .avatar { width: 28px; height: 28px; font-size: 10px; }
.comment .c-who.is-link { cursor: pointer; }
.comment .c-at b { color: var(--gold); cursor: pointer; }
.food-meta { display: none; }          /* in v3 bewusst leer */

/* Das Textfeld unter dem Bild, durch eine feine Linie getrennt */
.post-text {
  margin: 14px 16px 0; padding-top: 14px;
  border-top: 1px solid var(--line);
}
/* Die Zeile gehoert jetzt dem Gericht allein - die Kronen sind hinauf zum
   Lokal gewandert. Damit steht dem Namen die ganze Breite zur Verfuegung
   statt der Haelfte. */
.dish-line { display: block; margin-bottom: 7px; }
.dish-line .dish {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: break-word;
  font-size: 19px; color: var(--gold-lt); letter-spacing: .4px; line-height: 1.25;
}

.post-description {
  padding: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.post-sub { padding: 8px 0 0; font-size: 11px; color: var(--muted); font-style: italic; }

.mood-tags { padding: 11px 0 0; display: flex; gap: 7px; flex-wrap: wrap; }
.mood-tag {
  padding: 5px 11px; background: var(--gold-wash); color: var(--gold);
  border: 1px solid var(--gold-line); 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: .55; }
.mood-tag.on { background: var(--gold); color: #17130c; border-color: var(--gold); }

/* ---------- Aktionen: vier gleich gebaute Felder ----------
   Je Feld links das Symbol, rechts daneben die Zahl über der Beschriftung.
   Dazwischen der feine senkrechte Strich. */
.action-bar {
  margin: 14px 16px 0; padding: 13px 0 15px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line);
}
.action-sep { width: 1px; height: 26px; background: var(--line); flex: 0 0 auto; }
/* Ohne Beschriftungen sind alle vier Felder gleich breit - so sitzen die
   Trennstriche in gleichmaessigem Abstand und die ganze Leiste ist ruhig. */
.action-btn {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: row; align-items: center;
  justify-content: center; gap: 9px;
  padding: 2px 0; border: none; background: none; position: relative;
  transition: transform .15s ease;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink-soft);
}
.action-btn:active { transform: scale(.94); }
.action-btn .btn-icon { font-size: 19px; line-height: 1; display: flex; flex: 0 0 auto; }
.action-btn .btn-icon svg { display: block; width: 20px; height: 20px; }

.counter {
  position: static; background: none; color: var(--ink); border-radius: 0;
  font-size: 15px; font-weight: 700; min-width: 0; height: auto; padding: 0;
  display: block; font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Die Zahl ist ein eigenes Ziel: antippen zeigt, wer geliked hat. */
.counter.tappable {
  text-decoration: underline;
  text-decoration-color: var(--gold-line); text-underline-offset: 3px;
}
.counter.tappable:active { color: var(--gold); }
.yum-btn { background: none; border: none; }
.yum-btn.on .btn-icon { filter: drop-shadow(0 0 7px rgba(224, 138, 43, .8)); }
.yum-btn.on .counter { color: var(--gold-lt); }
/* Merken: das Lesezeichen links, ausgefuellt sobald es gesetzt ist */
.chef-hat-btn { color: rgba(213, 169, 92, .62); }
.chef-hat-btn.on { color: var(--gold); }
.chef-hat-btn.on .btn-icon { filter: drop-shadow(0 0 6px rgba(213,169,92,.6)); }
.share-btn, .comment-btn { color: rgba(213, 169, 92, .62); }
.share-btn:active, .comment-btn:active { color: var(--gold); }
@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(--card);
  border: 1px solid var(--gold-line); border-radius: 16px;
}
.panel-title {
  font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px; color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.panel-title .sub {
  font-size: 11px; color: var(--muted); font-weight: 400; font-style: italic;
  text-transform: none; letter-spacing: 0;
}
.trail-spot {
  min-width: 54px; width: 54px; height: 54px; border: 1px solid var(--gold-line);
  border-radius: 12px; background: var(--card-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--gold); 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: rgba(246,241,231,.2); color: var(--muted); }
.trail-spot .num {
  position: absolute; top: 0; left: 0; background: rgba(0,0,0,.78); color: var(--gold);
  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: 13px 18px;
  border-bottom: 1px solid var(--line); width: 100%; text-align: left;
  font-family: inherit; background: none; color: var(--ink);
}
.list-row:active { background: var(--card); }
.list-thumb {
  width: 54px; height: 54px; flex: 0 0 auto; border: 1px solid var(--gold-line);
  border-radius: 12px; background: var(--card-2);
  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; color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.list-main p { font-size: 12px; color: var(--muted); font-style: italic; }
.list-chevron { color: var(--gold-dk); font-size: 18px; }

/* ---------- SVG-Karte ---------- */
.map-wrap {
  background: #12100c; border: 1px solid var(--gold-line); border-radius: 16px;
  margin: 14px 16px; position: relative;
  overflow: hidden; touch-action: none; cursor: grab;
  /* etwas Tiefe, sonst wirkt die Fläche wie ein Loch im Bildschirm */
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .6);
}
.map-wrap:active { cursor: grabbing; }
.map-wrap svg {
  display: block; width: 100%; height: auto; user-select: none;
  position: relative; z-index: 2;      /* Nadeln über den Kacheln */
}

/* Die echte Karte darunter. Die Kacheln sind absolut gesetzt, weil ihre
   Lage aus derselben Rechnung stammt wie die der Nadeln. */
.kachel-schicht { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
/* Warmer Schleier über der Karte: bindet das fremde Bildmaterial an den
   goldenen Stil, ohne die Beschriftung zu verschlucken. */
.kachel-schicht::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(6, 5, 3, .55) 100%),
    rgba(28, 20, 10, .28);
}
.kachel {
  position: absolute; display: block; max-width: none;
  /* OpenStreetMap liefert nur helle Kacheln. Umkehren zu einer Nachtkarte
     habe ich versucht - Wasser und Land verschwimmen dabei zu einem Brei.
     Gedämpft und entsättigt bleibt die Karte lesbar und fügt sich trotzdem
     ein; den Rest erledigt der Schleier darüber. */
  filter: brightness(.58) saturate(.62) contrast(1.06);
  pointer-events: none;
}

/* Namensnennung – bei OpenStreetMap vorgeschrieben */
.map-quelle {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  font-size: 9px; color: rgba(246, 241, 231, .62);
  background: rgba(0, 0, 0, .55); padding: 2px 7px; border-radius: 999px;
  pointer-events: 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(20,17,13,.92); color: var(--gold);
  border: 1px solid var(--gold-line); border-radius: 10px; font-size: 16px; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.map-controls button:active { background: var(--gold); color: #17130c; }
.map-hint {
  position: absolute; left: 10px; bottom: 12px; font-size: 9px; color: var(--muted);
  font-style: italic; background: rgba(0, 0, 0, .68); 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;
  background: var(--card);
}
.stat { padding: 15px 4px; text-align: center; border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat b { display: block; font-size: 21px; color: var(--gold-lt); }
.stat span {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px; 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: var(--card-2); 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: 10px; font-weight: 600; letter-spacing: 1.3px;
  color: var(--muted); margin-bottom: 8px; text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Bewusst ohne Typangabe: in v2 galt die Regel nur fuer input[type=text],
   und Passwortfelder blieben hell. Auf weissem Grund faellt das nicht auf,
   auf schwarzem sofort. */
.field input, .field textarea, .field select {
  width: 100%; padding: 13px; background: var(--card-2);
  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; }
.field textarea[readonly] {
  background: var(--card); 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); }
.field input::placeholder, .field textarea::placeholder { color: #6b6459; }
.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); 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(--card); font-size: 15px; }
.link-btn:active { background: var(--gold); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px; background: var(--gold); color: #17130c;
  border: 1px solid var(--gold); border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.btn:active { background: var(--gold-dk); border-color: var(--gold-dk); }
.btn.secondary { background: transparent; color: var(--gold); border-color: var(--gold-line); }
.btn.secondary:active { background: var(--gold-wash); }
.btn.danger { background: transparent; color: #d97b70; border-color: rgba(217,123,112,.42); }
.btn[disabled] { opacity: .4; }
.btn-row { display: flex; gap: 10px; padding: 0 18px 16px; }
.btn-row .btn { padding: 13px; }

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

/* Die Vorschau beim Erfassen richtet sich nach der Aufnahme; das
   Seitenverhaeltnis kommt als Stil vom JS, hier steht nur der Rueckfall. */
.photo-slot {
  margin: 0 18px 16px; aspect-ratio: 4 / 3;
  border: 1.5px dashed var(--gold-line); border-radius: 16px;
  background: var(--card-2); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; color: var(--gold); 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: 11px; letter-spacing: 1.2px; text-transform: uppercase; 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(--card-2); flex: 0 0 auto;
}
.emoji-pick.on { border-color: var(--gold); background: var(--gold-wash); }

/* ---------- Leiste unten ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  max-width: 520px; margin: 0 auto;
  background: rgba(0, 0, 0, .96); border-top: 1px solid var(--line);
  backdrop-filter: saturate(160%) blur(12px);
  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: 4px; padding: 9px 2px; color: #6f6a61; height: var(--tab-h);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Die Symbole sind Linien in der Farbe des Tabs – kein Emoji, damit die
   Leiste eine einzige Handschrift hat und der aktive Tab golden leuchtet. */
.tab .ti {
  font-size: 19px; line-height: 1;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .18s ease;
}
.tab .ti svg { display: block; width: 21px; height: 21px; }
.tab .tl { font-size: 9px; letter-spacing: 1.3px; text-transform: uppercase; }

/* Der Tab, in dem man gerade ist, leuchtet golden */
.tab.on { color: var(--gold); }
.tab.on .tl { font-weight: 700; }

/* Post ist kein Ort, sondern eine Handlung: der gerahmte Kreis in der Mitte */
.tab.cam { color: var(--gold); }
.tab.cam .ti {
  filter: none;
  width: 44px; height: 44px; margin-top: -8px;
  background: rgba(213, 169, 92, .12);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-size: 24px; font-weight: 300; line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  padding-bottom: 2px;                 /* das Plus optisch mittig setzen */
  box-shadow: 0 0 16px rgba(213, 169, 92, .22);
}
.tab.cam .tl { font-weight: 700; }
.tab.cam:active .ti { background: var(--gold); color: #17130c; transform: scale(.92); }

/* ---------- Sheets ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .7); 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(--card);
  border-radius: 22px 22px 0 0; max-height: 88vh; overflow-y: auto;
  border-top: 1px solid var(--gold-line);
  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(--card); z-index: 2;
  padding: 18px 20px 15px; 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: 12px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600;
  color: var(--ink); 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; }

/* ---------- Kommentar mit Aktionen dahinter ----------

   Der Streifen liegt fest an seinem Platz, die Zeile schiebt sich
   darueber weg. Andersherum - Aktionen, die beim Wischen erst entstehen -
   ruckelt es am ersten Millimeter, weil der Browser dabei neu rechnet.

   touch-action: pan-y ist der wichtigste Zeile hier: senkrechtes
   Scrollen bleibt beim Browser und damit fluessig, waagrechtes bekommen
   wir. Ohne das muessten wir das Scrollen selbst nachbauen. */
.comment-wrap { position: relative; overflow: hidden; }
.c-aktionen {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.c-akt {
  background: var(--card-2); border: none; border-left: 1px solid var(--line);
  padding: 0 14px; font-size: 11px; letter-spacing: .3px; color: var(--ink-soft);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif; cursor: pointer;
}
.c-akt:active { background: var(--gold); color: #17130c; }
/* Erkennbar, aber nicht laut: ein Kommentar ist kein Konto. */
.c-akt.weg { color: #e08a6b; }
.c-akt.weg:active { background: #8d3b28; color: #fff; }

.comment {
  position: relative; background: var(--card);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
  touch-action: pan-y;
}
/* Verschoben wird genau um die Breite des Streifens - die kennt nur der
   Browser, deshalb misst die App sie einmal und legt sie als --akt ab.
   Ein Prozentwert waere die Breite der ZEILE und damit zu weit. */
.comment-wrap.offen .comment { transform: translateX(calc(-1 * var(--akt, 0px))); }

/* Derselbe Streifen ohne Finger - fuer den Rechner und fuer jeden, der
   nicht wischen mag. */
.c-mehr {
  flex: 0 0 auto; align-self: flex-start;
  background: none; border: none; padding: 2px 2px 2px 8px; margin: -2px -4px 0 0;
  color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
}
.c-mehr:active { color: var(--gold); }

/* Umschreiben an Ort und Stelle */
.c-edit {
  width: 100%; margin-top: 6px; min-height: 64px; resize: vertical;
}
.c-edit-knoepfe { display: flex; gap: 8px; margin-top: 8px; }
.c-edit-ab, .c-edit-ok {
  border-radius: 999px; padding: 6px 14px; font-size: 12px; cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .3px;
}
.c-edit-ab { background: none; border: 1px solid var(--line); color: var(--muted); }
.c-edit-ok { background: var(--gold); border: 1px solid var(--gold); color: #17130c; font-weight: 700; }
.comment.im-edit { background: var(--card-2); }

/* ---------- Wen meinst du? ----------
   Erscheint unter dem Feld, sobald nach dem @ zwei Zeichen stehen. */
.c-nennen { display: flex; flex-direction: column; margin-top: 6px; }
.c-nennen:empty { display: none; }
.c-nenn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 7px 10px; margin-bottom: 5px; cursor: pointer; text-align: left;
}
.c-nenn:active { border-color: var(--gold); }
.c-nenn-kopf {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--gold-line);
  font-size: 10px; font-weight: 700; color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.c-nenn-name { flex: 1; min-width: 0; font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-nenn-at { flex: 0 0 auto; font-size: 11px; color: var(--gold-lt); }

.comment { padding: 13px 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; color: var(--ink); 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: var(--card-2);
  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: #000;
  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;

  /* ---------- Warum das hier steht ----------
     Gedrueckthalten haelt die Story an. iOS versteht ein langes Druecken
     aber ausserdem als "markieren": es faerbt Text blau, blendet
     Kopieren/Teilen ein und bei einem Bild sein eigenes Menue. Seit die
     geteilte Karte Text enthaelt - Name, Lokal, Gericht - passiert das bei
     fast jedem Halten.

     Der Tap-Highlight ist global schon aus (siehe ganz oben), das war es
     also nicht. Es ist die Textauswahl.

     Bewusst nur HIER und nicht in der ganzen App: wer eine Beschreibung
     kopieren will, soll das im Feed weiterhin koennen. */
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Und die Aufnahmen selbst lassen sich nicht aufnehmen und ziehen. */
.snap-viewer img, .snap-viewer video {
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.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, .24); border-radius: 2px; overflow: hidden; }
.snap-bar i { display: block; height: 100%; width: 0; background: var(--gold); }
.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,.12); color: #fff; border-color: rgba(255,255,255,.28); }
.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, .6); font-style: italic; }
/* Restlaufzeit im Kopf der Story: nur Stunden, laeuft von 24 auf 0 */
.snap-rest {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: 1px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(213, 169, 92, .45); background: rgba(0, 0, 0, .35);
  color: var(--gold-lt); font-size: 13px; font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-variant-numeric: tabular-nums;
}
.snap-rest span { font-size: 9px; font-weight: 600; opacity: .8; }

.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; }

/* ---------- Die Bildflaeche ----------

   Sie ist 4:5 - genau wie die Vorschau im Verfasser. Das ist kein
   Schoenheitsentscheid: der Story-Text wird als Bruchteil DIESER Flaeche
   gespeichert, und nur wenn beide Flaechen dieselbe Form haben, liegt er
   nachher dort, wo man ihn hingelegt hat.

   Absichtlich OHNE z-index: der Kasten soll keine eigene Stapelebene
   aufmachen. Sonst waeren Text und Koepfe darin gefangen und lägen unter
   den Blaetterflaechen (.snap-nav, z-index 3) - der Kopf der Markierten
   liesse sich dann nicht antippen.

   Eine weitergegebene Karte ist kein Bild. Sie behaelt ihre Hoehe; sie in
   4:5 zu zwaengen wuerde sie beschneiden, ohne dass jemand etwas davon
   haette. */
.snap-bild {
  position: relative;
  width: 100%; aspect-ratio: 4 / 5; max-height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.snap-bild.karte { aspect-ratio: auto; height: 100%; }

/* Der Kopf der Markierten muss ueber die Blaetterflaeche hinaus - sonst
   sieht man ihn, trifft ihn aber nie. */
.snap-bild .bild-begleit { z-index: 6; }

/* ---------- Der frei gelegte Text ----------

   Der Punkt links/oben ist der MITTELPUNKT des Textes, deshalb die
   Verschiebung um die halbe eigene Groesse. So bleibt die gespeicherte
   Zahl unabhaengig davon, wie lang der Text ist.

   Lesbarkeit ohne schwarzen Kasten: zwei Schatten uebereinander, ein
   harter und ein weicher. Der harte traegt ihn ueber hellem Grund, der
   weiche ueber unruhigem. */
.snap-frei {
  position: absolute; transform: translate(-50%, -50%);
  z-index: 4; max-width: 78%; padding: 4px 10px;
  color: #fff; font-size: 16px; font-weight: 600; line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  text-align: center; white-space: pre-wrap; overflow-wrap: break-word;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 2px 12px rgba(0, 0, 0, .7);
  /* Im Betrachter nimmt er keine Beruehrung an: er soll das Tippen zum
     Blaettern nicht schlucken. Verschoben wird beim Erstellen. */
  pointer-events: none;
}
.snap-frei[hidden] { display: none; }

/* Im Verfasser ist er das Bedienbare. touch-action: none haelt die Seite
   still, waehrend der Finger den Text traegt. */
.snap-frei.zieh {
  pointer-events: auto; touch-action: none; cursor: grab;
  border-radius: 12px; background: rgba(0, 0, 0, .18);
  outline: 1px dashed rgba(255, 255, 255, .34); outline-offset: 2px;
}
.snap-frei.zieh.zieht {
  cursor: grabbing; background: rgba(0, 0, 0, .34);
  outline-style: solid; outline-color: var(--gold);
}
/* In der Vorschau ist der Kopf ein Bild von spaeter, kein Knopf. */
.snap-preview .bild-begleit { pointer-events: none; }

.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,.36);
  border-radius: 999px; padding: 8px 18px; font-size: 12px; letter-spacing: .3px;
  font-family: -apple-system, sans-serif; background: rgba(0, 0, 0, .4);
}

.empty { padding: 46px 30px; text-align: center; color: var(--muted); }
.empty .e-icon { font-size: 42px; display: block; margin-bottom: 14px; filter: grayscale(.5); opacity: .8; }
.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: 11px 12px;
  border: 1px solid var(--gold-line); border-radius: 12px; background: var(--card-2);
  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: var(--card-2); border-radius: 12px;
}

/* ---------- Zwei-Wege-Auswahl (z.B. öffentlich / privat) ---------- */
.wahl-row { display: flex; gap: 8px; }
.wahl {
  flex: 1; text-align: left; padding: 12px; border-radius: 12px;
  border: 1px solid var(--gold-line); background: var(--card-2);
  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); }


/* Einladungscode: gross und gesperrt, er wird abgetippt und vorgelesen */
.list-main h4.code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 17px; letter-spacing: 2px; color: var(--gold-lt);
}
.list-main h4.code.verbraucht { color: var(--muted); text-decoration: line-through; }

/* ---------- Schalter fuer Einstellungen ---------- */
.schalter {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  text-align: left; font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.schalter:last-of-type { border-bottom: none; }
.schalter-text { flex: 1; min-width: 0; }
.schalter-text b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.schalter-text span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35; }

/* Der Kippschalter selbst - reines CSS, kein Bild */
.schalter-knopf {
  flex: 0 0 auto; position: relative;
  width: 46px; height: 27px; border-radius: 999px;
  background: rgba(246, 241, 231, .12); border: 1px solid var(--line);
  transition: background .18s ease, border-color .18s ease;
}
.schalter-knopf::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 21px; height: 21px; border-radius: 50%;
  background: #6f6a61; transition: transform .18s ease, background .18s ease;
}
.schalter.on .schalter-knopf { background: var(--gold-wash); border-color: var(--gold); }
.schalter.on .schalter-knopf::after { transform: translateX(19px); background: var(--gold); }

/* Wie oft die eigene Story gesehen wurde */
.snap-seher {
  position: absolute; bottom: calc(env(safe-area-inset-bottom) + 16px); left: 16px;
  z-index: 5; color: var(--gold-lt); background: rgba(0, 0, 0, .45);
  border: 1px solid var(--gold-line); border-radius: 999px;
  padding: 8px 16px; font-size: 13px; font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.snap-seher:active { background: var(--gold); color: #17130c; }

/* Flamme in der Story – unten rechts, gegenüber der Seher-Anzeige */
.snap-like {
  position: absolute; bottom: calc(env(safe-area-inset-bottom) + 16px); right: 16px;
  z-index: 5; color: #fff; background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  padding: 9px 16px; font-size: 15px; font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  transition: transform .15s ease;
}
.snap-like.on { border-color: var(--gold); color: var(--gold-lt); }
.snap-like.on { filter: drop-shadow(0 0 8px rgba(224, 138, 43, .55)); }
.snap-like:active { transform: scale(.92); }
.snap-like.nur-zahl { pointer-events: none; }

/* Angehaltene Story: der Kopf tritt zurück, damit das Bild frei liegt */
.snap-viewer.pausiert .snap-bars,
.snap-viewer.pausiert .snap-head { opacity: .35; transition: opacity .2s ease; }

/* Passwortfeld mit Auge */
.pw-feld { position: relative; }
.pw-feld input {
  width: 100%; padding: 16px 52px 16px 14px; background: var(--card-2);
  border: 1px solid var(--gold-line); border-radius: 12px;
  font-size: 17px; font-family: inherit; color: var(--ink);
  letter-spacing: .5px;
}
.pw-feld input:focus { outline: none; border-color: var(--gold); }
.pw-auge {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 10px;
  font-size: 17px; line-height: 1; opacity: .45;
  display: flex; align-items: center; justify-content: center;
}
.pw-auge.an { opacity: 1; }
.pw-auge:active { background: var(--gold-wash); }

/* ---------- 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(--card); border: 1px solid var(--gold-line);
  display: flex; align-items: center; justify-content: center;
}
.ptr-ring {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid rgba(246,241,231,.18); border-top-color: var(--gold);
  display: block;
}
.ptr.bereit .ptr-ring { border-color: var(--gold-line); border-top-color: var(--gold-lt); }
.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(28, 24, 18, .97); color: var(--ink); padding: 11px 18px;
  border: 1px solid var(--gold-line);
  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: 13px; font-weight: 600; color: var(--ink-soft);
  padding: 12px 14px; background: var(--card-2); border-radius: 12px;
  border-left: 3px solid var(--line); margin-bottom: 10px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.account-state.on { border-left-color: var(--gold); color: var(--gold); }

.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: var(--card); margin-top: 16px; }
.pad { padding: 16px 18px; }

/* ---------- Feed-Filter ---------- */
.filter-row { display: flex; gap: 8px; padding: 14px 16px 4px; align-items: center; }
.filter-chip {
  padding: 9px 18px; border: 1px solid var(--gold-line); border-radius: 999px;
  background: transparent; color: var(--ink-soft); font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.filter-chip.on {
  background: linear-gradient(160deg, var(--gold-lt), var(--gold));
  color: #17130c; font-weight: 700; border-color: var(--gold);
}

/* Die Zahl neben der Beschriftung: wie viel seit dem letzten Blick
   dazugekommen ist. Auf dem aktiven Knopf steht sie dunkel auf Gold, sonst
   golden auf dunkel - sie muss in beiden Faellen lesbar bleiben. */
.chip-zahl {
  display: inline-block; min-width: 18px; margin-left: 7px; padding: 0 5px;
  border-radius: 999px; background: var(--gold); color: #17130c;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  vertical-align: 1px;
}
.filter-chip.on .chip-zahl { background: #17130c; color: var(--gold-lt); }

/* ============================================================
   Nachrichten
   ============================================================ */

/* ---------- Foodtrack: die Zahlenliste ---------- */
.zahl-zeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 2px; border-bottom: 1px solid var(--line);
}
.zahl-zeile:last-child { border-bottom: none; }
.zahl-zeile span {
  font-size: 13px; color: var(--ink-soft);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.zahl-zeile b { font-size: 16px; color: var(--gold-lt); text-align: right; }

/* ---------- „Deine Freunde waren hier" ----------
   Steht auf der Lokalseite über dem allgemeinen Durchschnitt. Bewusst
   derselbe Rahmen wie die Zahlenreihe daneben, nur mit der leichten
   goldenen Füllung — er soll herausstechen, ohne aus der Reihe zu fallen. */
.sozial-block {
  display: flex; align-items: center; gap: 14px; width: calc(100% - 32px);
  margin: 14px 16px 0; padding: 13px 14px;
  border: 1px solid var(--gold-line); border-radius: 16px;
  background: var(--gold-wash); text-align: left;
}
.sozial-block:active { background: rgba(213, 169, 92, .18); }

.sozial-wert { flex: 0 0 auto; text-align: center; }
.sozial-wert b {
  display: block; font-size: 21px; color: var(--gold-lt); white-space: nowrap;
}
.sozial-wert > span {
  display: block; margin-top: 2px;
  font-size: 8.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.sozial-rechts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.sozial-zeile {
  font-size: 12.5px; color: var(--ink); line-height: 1.35;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.sozial-pfeil { flex: 0 0 auto; color: var(--gold); font-size: 17px; }

/* Die Gesichter überlappen sich leicht, wie man es kennt. Der Rand in der
   Hintergrundfarbe trennt sie voneinander. */
.avatar-stapel { display: flex; }
.stapel-kreis {
  width: 32px; height: 32px; border-radius: 50%; margin-left: -9px;
  border: 2px solid #17130c; background: var(--card-2); color: var(--gold-lt);
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; letter-spacing: .3px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.stapel-kreis:first-child { margin-left: 0; }
.stapel-kreis.mehr { background: transparent; border-style: dashed; color: var(--gold); }

/* ---------- „Deine Freunde lieben" ----------
   Karten zum seitlichen Durchblättern, dieselbe Bahn wie die Foodies. */
.loved-reihe { padding: 0 18px 18px; gap: 10px; }

/* Im Feed liegt dieselbe Reihe hinter einer Klappe. Die Zeile trägt die
   Schrift der übrigen Abschnittstitel - sie soll wie eine Überschrift
   aussehen, die man antippen kann, nicht wie ein eigener Block. */
.loved-zeile {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 14px 20px 13px; min-height: 46px;
  background: none; border: none; text-align: left;
  font-family: inherit; cursor: pointer;
}
.loved-zeile:active { background: var(--gold-wash); }
.loved-zeile-titel {
  font-size: 12px; font-weight: 600; letter-spacing: 1.6px;
  color: var(--muted); text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.loved-zeile-zahl {
  font-size: 12px; font-weight: 600; color: var(--gold);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.loved-zeile-winkel {
  margin-left: auto; display: flex; color: var(--gold); opacity: .6;
  transition: transform .18s ease;
}
.loved-block.offen .loved-zeile-winkel { transform: rotate(180deg); }

/* Auf- und Zuklappen über die Zeilenhöhe des Rasters: 0fr auf 1fr. Das
   braucht keine geratene Maximalhöhe - und wo der Browser es nicht weich
   kann, schaltet er schlicht um, was auch in Ordnung ist. */
.loved-klapp {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .2s ease;
}
.loved-block.offen .loved-klapp { grid-template-rows: 1fr; }
.loved-klapp-innen { overflow: hidden; min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  .loved-klapp, .loved-zeile-winkel { transition: none; }
}
.loved-karte {
  flex: 0 0 auto; width: 208px; text-align: left;
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px; border-radius: 16px;
  border: 1px solid var(--gold-line); background: var(--gold-wash);
}
.loved-karte:active { background: rgba(213, 169, 92, .18); }
.loved-name {
  font-size: 16px; color: var(--gold-lt); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.loved-ort {
  font-size: 11.5px; color: var(--ink-soft); font-style: italic;
}
.loved-wert {
  margin-top: 3px; font-size: 13px; color: var(--ink); font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.loved-fuss {
  display: flex; align-items: center; gap: 7px; margin-top: 4px;
  font-size: 11px; color: var(--muted);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

/* Der Stapel in der Trefferliste ist kleiner als der auf der Lokalseite */
.avatar-stapel.klein .stapel-kreis {
  width: 22px; height: 22px; font-size: 8.5px; margin-left: -7px; border-width: 1.5px;
}

/* Ein Suchtreffer mit sozialem Beleg */
.lokal-treffer { align-items: flex-start; }
.lokal-treffer .list-main { min-width: 0; }
.treffer-sozial {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  font-size: 11.5px; color: var(--ink-soft);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
/* Das Urteil der Freunde ist die wichtigere Zahl - es steht in Gold */
.freunde-wert { color: var(--gold-lt); font-weight: 600; }

/* „nicht bewertet" soll leiser sein als eine Zahl */
.row-note.leer { color: var(--muted); font-style: italic; font-size: 11px; }

/* ---------- Lokalseite ---------- */
.lokal-kopf { padding: 18px 20px 4px; text-align: center; }
.lokal-name {
  font-size: 23px; color: var(--gold-lt); line-height: 1.2;
}
.lokal-adresse {
  margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); font-style: italic;
}
/* Die Zahlenreihe des Lokals hat drei Felder statt vier */
.stats.drei { grid-template-columns: repeat(3, 1fr); margin-top: 14px; }

/* Senden an: Kacheln statt Zeilen. Bei einer Handvoll Leuten sieht man so
   alle auf einen Blick, statt eine Liste hinunterzuwandern. */
.senden-raster {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px 8px; padding: 4px 16px 18px;
}
.senden-kachel {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: transparent; border: 0; min-width: 0;
}
.senden-kreis {
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid var(--gold-line); background: var(--card-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-lt); font-size: 20px; letter-spacing: .5px;
}
.senden-kachel:active .senden-kreis { border-color: var(--gold); background: var(--gold-wash); }
.senden-kreis.klein { width: 46px; height: 46px; font-size: 17px; }
.senden-name {
  max-width: 100%; font-size: 12px; color: var(--ink); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.senden-unter {
  font-size: 10px; color: var(--muted);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

/* Der Weg nach draussen, abgesetzt am Fuss des Blattes */
.senden-fuss {
  display: flex; gap: 26px; justify-content: center;
  padding: 14px 16px 6px; border-top: 1px solid var(--line);
}
.senden-aussen {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: transparent; border: 0;
  font-size: 11px; color: var(--ink-soft);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

/* Ungelesene Nachrichten: ein Punkt am Symbol, keine Zahl */
.tab .ti { position: relative; display: inline-flex; }
.tab-punkt {
  position: absolute; top: -2px; right: -5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #e0552b; border: 1.5px solid #0b0906;
}

/* --- Übersicht --- */
.chat-zeile {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; background: transparent; text-align: left;
  border: 0; border-bottom: 1px solid var(--line);
}
.chat-zeile .list-main { min-width: 0; flex: 1; }
.chat-zeile h4 { margin: 0 0 2px; font-size: 15px; color: var(--ink); }
.chat-vorschau {
  margin: 0; font-size: 13px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-zeile.neu h4 { font-weight: 700; }
.chat-zeile.neu .chat-vorschau { color: var(--ink); }
.chat-rechts {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto;
}
.chat-rechts .wann { font-size: 11px; color: var(--muted); }
.chat-zahl {
  min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--gold); color: #17130c;
  font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
}

/* --- Das Gespräch ---
   Unten steht die Eingabe statt der Tab-Leiste; der Platz dafür kommt aus
   dem Abstand am Seitenende. */
body.im-chat { padding-bottom: 0; }
/* Das Gespraech klebt unten: bei wenigen Nachrichten haengen sie sonst
   oben und darunter steht eine grosse schwarze Flaeche. Wird es laenger als
   der Bildschirm, waechst der Kasten und flex-end wirkt nicht mehr - genau
   richtig. */
.chat-lauf {
  /* Unten so viel Luft, wie die Eingabeleiste hoch ist - sonst verdeckt sie
     die letzte Nachricht. Die Hoehe ist der Rest unter dem Kopf; damit
     endet der Kasten genau an der Leiste und es klafft nichts. */
  padding: 8px 12px 88px;
  display: flex; flex-direction: column; gap: 3px;
  justify-content: flex-end;
  min-height: calc(100dvh - 88px);
}
.chat-tag {
  align-self: center; margin: 14px 0 8px; padding: 3px 12px;
  border-radius: 999px; background: rgba(255, 255, 255, .05);
  font-size: 11px; color: var(--muted); letter-spacing: .04em;
}

.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 80%; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg-wer { padding: 0 8px 2px; font-size: 11px; color: var(--gold); }

.blase {
  position: relative; padding: 8px 12px 6px; border-radius: 16px;
  background: #1b1917; border: 1px solid var(--line);
  color: var(--ink); font-size: 14.5px; line-height: 1.42;
  text-align: left; word-break: break-word;
  /* Gesprochenes gehoert in die Bedienschrift, nicht in die Serifen: die
     Serifen tragen in v3 das Repraesentative, ein Chat ist das Gegenteil. */
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.msg.mine .blase {
  background: linear-gradient(160deg, rgba(212, 175, 108, .22), rgba(212, 175, 108, .12));
  border-color: var(--gold-line);
}
.blase.weg { color: var(--muted); font-style: italic; }
.msg-text { white-space: pre-wrap; }
.msg-zeit {
  display: block; margin-top: 2px; font-size: 10px;
  color: var(--muted); text-align: right;
}

/* Zitat über einer Antwort */
.msg-zitat {
  margin: -2px -4px 6px; padding: 5px 9px; border-left: 2px solid var(--gold);
  border-radius: 8px; background: rgba(255, 255, 255, .04);
  font-size: 12.5px; color: var(--ink-soft);
}
.msg-zitat b { display: block; color: var(--gold); font-size: 11px; margin-bottom: 1px; }
.msg-zitat i { color: var(--muted); }

.msg-bild { margin: -2px -6px 6px; border-radius: 12px; overflow: hidden; }
.msg-bild img { display: block; width: 100%; max-height: 320px; object-fit: cover; }

/* Ein geteilter Beitrag in der Blase */
.msg-post {
  display: flex; gap: 10px; align-items: center; width: 100%;
  margin: -2px -6px 6px; padding: 8px; border: 0;
  border-radius: 12px; background: rgba(255, 255, 255, .05); text-align: left;
}
.msg-post-bild {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 9px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: #221f1c; font-size: 20px;
}
.msg-post-bild img { width: 100%; height: 100%; object-fit: cover; }
.msg-post-text { min-width: 0; }
.msg-post-text b { display: block; color: var(--gold-lt); font-size: 13px; }
.msg-post-text span {
  display: block; font-size: 11.5px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Die Leiste unten --- */
.chat-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(10, 9, 8, .96); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.chat-bezug {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px 3px; font-size: 12px; color: var(--ink-soft);
}
.chat-bezug > div { min-width: 0; flex: 1; }
.chat-bezug b { display: block; color: var(--gold); font-size: 11px; }
.chat-bezug span {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bezug-weg {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
}
.chat-eingabe { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px 10px; }
.chat-eingabe textarea {
  flex: 1; resize: none; max-height: 130px; padding: 10px 14px;
  border-radius: 20px; border: 1px solid var(--gold-line);
  background: #161412; color: var(--ink);
  font-size: 15px; line-height: 1.35;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}
.chat-eingabe textarea:focus { outline: none; border-color: var(--gold); }
.chat-foto, .chat-senden {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--gold-line); background: transparent;
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.chat-senden { background: linear-gradient(160deg, var(--gold-lt), var(--gold)); color: #17130c; }

/* Auswahlzeile im Blatt "Neues Gespräch" */
.list-row.auswahl { cursor: pointer; }
.list-row.auswahl input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--gold); }

/* Offene Freundschaftsanfrage: Person oben, Antwort darunter. Leicht
   abgesetzt, damit sie sich von der Freundesliste abhebt - sie will ja
   etwas von einem. */
.anfrage-karte {
  margin: 0 16px 10px; border: 1px solid var(--gold-line); border-radius: 16px;
  background: rgba(212, 175, 108, .05); overflow: hidden;
}
.anfrage-karte .list-row { border-bottom: 0; padding-bottom: 2px; }
.anfrage-karte .btn-row { padding: 0 14px 12px; }

/* Lupe am rechten Rand der Filterleiste */
.filter-suche {
  margin-left: auto; flex: 0 0 auto;
  width: 42px; height: 36px; border-radius: 12px;
  border: 1px solid var(--gold-line); background: transparent;
  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: 9px 14px; border: 1px solid var(--gold-line);
  border-radius: 999px; background: transparent; color: var(--gold);
  font-size: 10px; font-weight: 700; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 1.1px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.row-action:active { background: var(--gold); color: #17130c; }
.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; background: #fff; }
.qr-handle {
  font-size: 21px; font-weight: 700; color: var(--gold-lt); margin-bottom: 6px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Gemeinsamer Trail ----------
   Die Runde unter dem Kopf: wer hier mitplant. */
.trail-runde {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 20px 14px;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font-family: inherit; color: var(--ink); text-align: left;
}
.trail-runde:active { background: var(--card); }
.trail-runde-text {
  flex: 1; font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.trail-runde .list-chevron { color: var(--gold); }

/* Eine geplante Station. */
.stop-karte { align-items: flex-start; }
.stop-zeile {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px;
}
.stop-wann {
  font-size: 11.5px; color: var(--ink-soft);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.stop-notiz {
  margin-top: 5px; font-size: 12.5px; color: var(--ink-soft); font-style: italic;
}
.stop-von {
  margin-top: 4px; font-size: 10.5px; color: var(--muted);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Die fuenf Staende. Bewusst keine fuenf Signalfarben - das Gold traegt die
   Ansicht, und ein Plan mit rot-gelb-gruenen Punkten saehe aus wie ein
   Aufgabenverwalter, nicht wie ein Abend, auf den man sich freut. Der
   Unterschied liegt in der Fuellung: was ansteht, leuchtet; was erledigt
   oder verworfen ist, tritt zurueck. */
.stop-stand {
  display: inline-block; padding: 3px 9px 4px; border-radius: 999px;
  font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  border: 1px solid var(--gold-line); color: var(--gold); background: transparent;
  white-space: nowrap;
}
.stop-stand.idea      { border-color: var(--line); color: var(--muted); }
.stop-stand.must_try  { background: var(--gold); border-color: var(--gold); color: #17130c; }
.stop-stand.booked    { background: var(--gold-wash); color: var(--gold-lt); }
.stop-stand.visited   { border-color: rgba(246, 241, 231, .3); color: var(--ink); }
.stop-stand.skipped   { border-color: transparent; color: var(--muted); background: rgba(246, 241, 231, .05); }

.list-row.mitglied .list-main p {
  font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Die Stimme zu einer Station. Der Knopf liegt neben der Zeile, nicht in
   ihr - sonst oeffnete jeder Tipp darauf die Station. */
.stop-reihe { position: relative; }
.stop-reihe .stop-karte { padding-right: 74px; }
.stop-stimmen {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.stimme {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 11px 7px; border-radius: 999px;
  border: 1px solid var(--gold-line); background: transparent;
  color: var(--muted); font-size: 15px; line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.stimme span { font-size: 12px; }
.stimme:active { background: var(--gold-wash); }
.stimme.dafuer { color: var(--gold-lt); border-color: var(--gold); background: var(--gold-wash); }
.stimme-wer {
  background: none; border: 0; padding: 0;
  font-size: 9px; letter-spacing: .4px; color: var(--muted);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Plan nach Tagen ---------- */
.tag-kopf {
  padding: 20px 20px 8px; font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gold);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  border-bottom: 1px solid var(--gold-line);
}

/* Der Stand ist ein Knopf, wenn man planen darf - er soll trotzdem
   aussehen wie das Abzeichen daneben, nur eine Spur einladender. */
button.stop-stand { cursor: pointer; }
button.stop-stand:active { transform: scale(.95); }

.stop-planen {
  background: none; border: 0; padding: 0;
  font-size: 11px; letter-spacing: .3px; color: var(--gold);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Die Standwahl im Blatt */
.stand-wahl .list-main p { font-size: 12.5px; color: var(--muted); }
.stand-wahl.on .list-main h4 { color: var(--gold-lt); }
.stand-haken { color: var(--gold); font-size: 17px; }

/* ---------- Want to Try ----------
   Die Merkliste steht ueber den Trails und sieht anders aus als sie: kein
   Reiseplan, sondern eine Frage. Deshalb eine Karte statt einer Zeile -
   und das Herz statt eines Vorschaubildes. */
.merk-karte {
  display: flex; align-items: center; gap: 14px; width: calc(100% - 36px);
  margin: 4px 18px 12px; padding: 15px 16px;
  border: 1px solid var(--gold-line); border-radius: 16px;
  background: var(--gold-wash); color: var(--ink);
  font-family: inherit; text-align: left;
}
.merk-karte:active { background: rgba(213, 169, 92, .18); }
.merk-herz { font-size: 24px; line-height: 1; }
.merk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.merk-text b {
  font-size: 17px; color: var(--gold-lt); letter-spacing: .3px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 600;
}
.merk-text span { font-size: 12.5px; color: var(--muted); }
.merk-karte .list-chevron { color: var(--gold); }

/* ---------- Merken ----------
   Ein Herz, mehr nicht. Es steht an jeder Stelle, an der ein Lokal
   auftaucht, und zeigt ueberall denselben Zustand - er kommt aus einer
   Quelle: den Stationen der Merkliste. */
.merken {
  flex: 0 0 auto; background: none; border: 0; padding: 6px 4px;
  font-size: 19px; line-height: 1; opacity: .75;
}
.merken.an { opacity: 1; }
.merken:active { transform: scale(.9); }
.merken.gross {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px; border-radius: 999px; opacity: 1;
  border: 1px solid var(--gold-line); background: transparent; color: var(--gold);
  font-size: 17px;
}
.merken.gross span {
  font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.merken.gross.an { background: var(--gold-wash); border-color: var(--gold); color: var(--gold-lt); }

/* Suchtreffer mit Herz daneben */
.treffer-reihe { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.treffer-reihe .list-row { border-bottom: 0; }
.treffer-reihe .merken { margin-right: 12px; }

.loved-kopf { display: flex; align-items: flex-start; gap: 6px; }
.loved-kopf .loved-name { flex: 1; }
.loved-kopf .merken { padding: 0; font-size: 16px; }

/* ---------- Foodtrack: Länder, Städte, Lokale ---------- */
.ort-zurueck {
  display: block; width: 100%; text-align: left;
  padding: 12px 20px 12px 18px; background: none; border: 0;
  border-bottom: 1px solid var(--line); color: var(--gold);
  font-size: 13px; letter-spacing: .3px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.ort-zurueck:active { background: var(--card); }
.ort-kopf { padding: 20px 20px 14px; border-bottom: 1px solid var(--gold-line); }
.ort-kopf h3 {
  font-size: 24px; color: var(--gold-lt); letter-spacing: 1px;
  text-transform: uppercase; font-weight: 400; margin-bottom: 5px;
}
.ort-kopf p { font-size: 12.5px; color: var(--muted); }
.list-row.ort-zeile .list-main h4 {
  font-size: 17px; letter-spacing: .6px; text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 600;
}

/* Die Besuchszahl auf der Lokalseite ist antippbar - sie sieht aus wie die
   beiden daneben, fuehrt aber weiter. */
button.stat {
  font-family: inherit; border: 0; background: none; color: inherit;
  cursor: pointer; text-align: center;
}
button.stat:active { background: var(--card-2); }
button.stat span { color: var(--gold); }

.besuch-zeile .list-main h4 {
  font-size: 15px; font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600; letter-spacing: .2px;
}

/* Das Bild im Bearbeiten-Blatt */
.edit-bild {
  width: 100%; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--gold-line); background: var(--card-2);
  display: flex; align-items: center; justify-content: center;
}
.edit-bild img { width: 100%; height: 100%; object-fit: cover; }
.edit-bild.leer { font-size: 52px; }

/* Ein geteilter Beitrag in einer Nachricht */
.msg-post-kronen { display: block; margin-top: 3px; font-size: 11px; }
.msg-post.weg {
  display: flex; align-items: center; gap: 10px; width: 100%;
  opacity: .6; cursor: default;
}
.msg-post.weg .msg-post-bild {
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.msg-post.weg .msg-post-text span { font-style: italic; }

/* Gruppen zum Antippen - Mehrfachauswahl ohne Auswahlfeld */
.gruppenwahl { display: flex; flex-wrap: wrap; gap: 8px; }
.gwahl {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px 10px; border-radius: 999px;
  border: 1px solid var(--gold-line); background: transparent; color: var(--ink-soft);
  font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.gwahl.on { background: var(--gold-wash); border-color: var(--gold); color: var(--gold-lt); }
.gwahl-haken {
  width: 15px; height: 15px; border-radius: 4px; flex: 0 0 auto;
  border: 1px solid var(--gold-line); display: flex; align-items: center;
  justify-content: center; font-size: 10px;
}
.gwahl.on .gwahl-haken { background: var(--gold); border-color: var(--gold); color: #17130c; }

/* ---------- FOODLE Business ----------
   Zurückhaltung ist hier die Gestaltung. Ein bestätigter Betrieb bekommt
   ein kleines goldenes Zeichen am Namen - nicht mehr. Eine Plakette, ein
   Banner oder ein hervorgehobener Rahmen würden das Lokal über die Gäste
   stellen, und genau das soll Foodle nicht tun. */
.biz-haken {
  display: inline-block; margin-left: 7px; vertical-align: 3px;
  width: 17px; height: 17px; line-height: 17px; border-radius: 50%;
  font-size: 10.5px; text-align: center;
  color: #17130c; background: var(--gold);
}

/* Die eigene Zuordnung: eine ruhige Zeile, kein Schaltpult. Es gibt hier
   nichts zu tun - der Betrieb erfährt nur, dass er zugeordnet ist. */
.biz-eigen {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; padding: 11px 14px; border-radius: 12px; text-align: left;
  font: inherit; -webkit-appearance: none;
  border: 1px solid var(--gold-line); background: var(--gold-wash);
}
.biz-eigen:active { background: rgba(213, 169, 92, .2); }
.biz-eigen b {
  font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--gold);
}
.biz-eigen span { font-size: 12.5px; color: var(--ink-soft); }

/* Die Einladung an den Wirt steht bewusst klein und ganz unten: sie geht
   fast alle Betrachter nichts an. Wer gemeint ist, sucht danach. */
.biz-link {
  display: block; width: 100%; padding: 10px 0;
  background: none; border: 0; text-align: center;
  font-size: 12.5px; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px;
}
.biz-link:active { color: var(--gold); }

/* "optional" neben der Beschriftung - kleiner und leiser als sie */
.field label .opt {
  margin-left: 6px; font-size: 10.5px; letter-spacing: 0;
  text-transform: none; color: var(--ink-soft); opacity: .8;
}

/* ---------- FOODLE Business: die Zahlen ----------
   Kein Armaturenbrett aus dem Baukasten. Dieselbe Schrift, dasselbe Gold,
   dieselbe Ruhe wie im Rest der App - ein Wirt soll sehen, dass er noch
   in Foodle ist, und nicht in einem Werkzeug. */
.biz-marke {
  margin-top: 8px; font-size: 10.5px; letter-spacing: 1.6px;
  color: var(--gold); opacity: .85;
}

/* Die Absicht steht oben und gross: das ist die Zahl, wegen der ein Wirt
   herkommt. Alles andere ist Beiwerk. */
.biz-absicht {
  margin: 14px 16px 4px; padding: 20px 16px 18px; border-radius: 16px;
  text-align: center;
  border: 1px solid var(--gold-line); background: var(--gold-wash);
}
.biz-absicht b {
  display: block; font-size: 44px; line-height: 1; font-weight: 400;
  color: var(--gold-lt);
}
.biz-absicht-satz {
  display: block; margin-top: 8px; font-size: 13.5px; color: var(--ink);
}
.biz-absicht-teile {
  display: block; margin-top: 5px; font-size: 11.5px; color: var(--ink-soft);
}

.biz-raster {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px; padding: 8px 16px 0;
}
.biz-raster.zwei { grid-template-columns: repeat(2, 1fr); }
.biz-kachel {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, .3);
}
.biz-kachel b {
  font-size: 22px; font-weight: 400; line-height: 1.1; color: var(--gold-lt);
}
.biz-kachel span {
  font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink-soft);
}
/* Der Vergleich zum Zeitraum davor. Gruen und rot waeren hier falsch:
   weniger Aufrufe im August sind keine schlechte Nachricht, sondern
   Sommer. Deshalb nur heller und leiser, nicht wertend. */
.biz-trend {
  position: absolute; top: 12px; right: 12px;
  font-size: 10.5px; letter-spacing: 0; text-transform: none;
}
.biz-kachel { position: relative; }
.biz-trend.rauf { color: var(--gold); }
.biz-trend.runter { color: var(--ink-soft); opacity: .75; }

.biz-block { margin: 16px 16px 0; }
.biz-block-titel {
  font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--gold); padding-bottom: 8px;
}
/* Ein Bild, kein Dutzend: Aufrufe je Tag als Balken. Die Hoehe ist
   anteilig zum groessten Tag - eine feste Skala waere bei drei Aufrufen
   ein leeres Feld und bei dreihundert ein Klotz. */
.biz-chart {
  position: relative; height: 84px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, .3);
}
.biz-balken {
  position: absolute; bottom: 0; margin-left: 2px;
  border-radius: 2px 2px 0 0; background: var(--gold);
  opacity: .8;
}
.biz-chart-fuss {
  display: flex; justify-content: space-between;
  padding: 6px 2px 0; font-size: 10.5px; color: var(--ink-soft);
}

/* ---------- FOODLE Business: was der Betrieb pflegt ----------
   Zurueckhaltend, wie alles Geschaeftliche in Foodle. Das Bild des Hauses
   steht oben, aber es bekommt keinen Rahmen und keine Aufschrift - der
   soziale Teil darunter soll das Erste bleiben, was jemand liest. */
.biz-hero {
  margin: 0; overflow: hidden; background: #000;
  border-bottom: 1px solid var(--gold-line);
}
.biz-hero img {
  display: block; width: 100%; height: 190px; object-fit: cover;
}

.lokal-art {
  margin-top: 5px; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold); opacity: .8;
}

.biz-text {
  margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
}

.biz-zeiten { padding: 0 20px; }
.biz-zeit-zeile {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0; font-size: 12.5px; color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.biz-zeit-zeile:last-child { border-bottom: 0; }
.biz-zeit-zeile b { color: var(--ink); font-weight: 400; }
/* Heute steht hervorgehoben: das ist die Frage, mit der jemand kommt. */
.biz-zeit-zeile.heute span, .biz-zeit-zeile.heute b { color: var(--gold-lt); }

.biz-kontakte { display: flex; gap: 8px; }
.biz-kontakt {
  flex: 1; text-align: center; padding: 11px 8px; border-radius: 12px;
  border: 1px solid var(--gold-line); background: rgba(0, 0, 0, .35);
  color: var(--gold-lt); font-size: 12.5px; text-decoration: none;
}
.biz-kontakt:active { background: var(--gold-wash); }

/* ---------- Das Formular ---------- */
.biz-hero-vorschau { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.biz-hero-vorschau img { display: block; width: 100%; height: 160px; object-fit: cover; }
.biz-hero-leer {
  display: flex; align-items: center; justify-content: center; height: 110px;
  border: 1px dashed var(--gold-line); border-radius: 12px;
  color: var(--ink-soft); font-size: 12.5px;
}

.preis-wahl { display: flex; flex-wrap: wrap; gap: 6px; }

.biz-woche { padding: 0 16px; }
.biz-tag {
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.biz-tag:last-child { border-bottom: 0; }
.biz-tag-kopf {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--ink); padding-bottom: 6px;
}
.biz-zu {
  background: none; border: 1px solid var(--gold-line); border-radius: 999px;
  padding: 4px 12px; font-size: 11px; color: var(--ink-soft);
}
.biz-tag-zeiten {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-soft);
}
.biz-uhr {
  flex: 0 0 auto; width: 92px; padding: 8px 6px; text-align: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(0, 0, 0, .3); color: var(--ink); font-size: 12.5px;
}
.biz-und { opacity: .55; padding: 0 2px; }
/* Ein Ruhetag braucht keine Uhrzeiten - sie stehen nur im Weg. */
.biz-tag.zu .biz-tag-zeiten { display: none; }
.biz-tag.zu .biz-zu { border-color: var(--gold); color: var(--gold); }

/* Die Kachel, die keine Zahl traegt, sondern einen Vorbehalt */
.biz-kachel.leer { justify-content: center; }
.biz-kachel.leer span {
  text-transform: none; letter-spacing: 0; font-size: 11.5px; line-height: 1.45;
}

/* ---------- Trails: zwei gleichwertige Bereiche ----------
   "Meine Trails" und "Want to Try" beantworten zwei verschiedene Fragen -
   was plane ich, und wo wollte ich mal hin. Bisher war die Merkliste eine
   einzelne Karte ueber den Trails; das machte sie zu einem Anhaengsel,
   obwohl sie fuer die meisten der Teil ist, den sie taeglich benutzen.
   Also zwei Ueberschriften desselben Gewichts. */
.bereich-titel {
  padding: 18px 20px 8px;
  font-size: 13px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--gold-lt);
}

/* Die Listen tragen sich leichter als die Trails: kein Bild, kein Ort,
   keine Entfernung - nur Zeichen, Name und wie viele Lokale. */
.liste-zeile {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 20px; background: none; border: 0; text-align: left;
  border-bottom: 1px solid var(--line);
}
.liste-zeile:active { background: rgba(213, 169, 92, .07); }
.liste-zeichen { font-size: 20px; width: 26px; text-align: center; }
.liste-text { flex: 1; min-width: 0; }
.liste-text b {
  display: block; font-size: 14.5px; font-weight: 400; color: var(--ink);
}
.liste-text span { font-size: 12px; color: var(--ink-soft); }

/* Die Frage vor dem Anlegen: Foodtrail oder Liste. Zwei Karten statt
   zweier Zeilen - der Unterschied ist eine Entscheidung, keine Auswahl. */
.wahl-karte {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px 20px; background: none; border: 0; text-align: left;
  border-bottom: 1px solid var(--line);
}
.wahl-karte:active { background: rgba(213, 169, 92, .07); }
.wahl-zeichen { font-size: 26px; width: 34px; text-align: center; }
.wahl-text { flex: 1; min-width: 0; }
.wahl-text b {
  display: block; font-size: 15px; font-weight: 400; color: var(--gold-lt);
  padding-bottom: 3px;
}
.wahl-text span { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }

/* "Liste aendern" haengt am Hinweis, der nach dem Merken erscheint. Es ist
   ein Angebot, kein Blatt vor der Nase: wer die Standardliste meinte -
   und das sind die meisten -, tippt es einfach nicht an. */
.toast.mit-aktion { pointer-events: auto; }
.toast-aktion {
  margin-left: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--gold); background: none;
  color: var(--gold-lt); font-size: 11.5px;
}
.toast-aktion:active { background: var(--gold); color: #17130c; }

/* ---------- Wischen ----------
   Die Knoepfe liegen hinter der Zeile, nicht daneben: die Zeile schiebt
   sich darueber weg. Ohne Bibliothek - eine Umrandung, ein Verschieben,
   sonst nichts. */
.reihe { position: relative; overflow: hidden; }
.reihe-aktionen {
  position: absolute; inset: 0 0 0 auto; display: flex; align-items: stretch;
}
.reihe-inhalt {
  position: relative; background: var(--bg);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1);
  will-change: transform;
}
/* Waehrend des Ziehens folgt die Zeile dem Finger ohne Verzoegerung -
   ein Uebergang macht die Geste zaeh. */
.reihe-inhalt[style*="translateX"] { transition: none; }
.reihe.offen .reihe-inhalt { transition: transform .18s cubic-bezier(.2, .8, .3, 1); }

.reihe-tat {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 76px; padding: 0 6px; border: 0;
  font-size: 10.5px; line-height: 1.25; letter-spacing: .4px; text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Weglegen ist keine grosse Sache und sieht auch nicht danach aus.
   Loeschen schon - es bekommt als einziges eine eigene Farbe, damit
   niemand es fuer das Weglegen haelt. */
.reihe-tat.archiv { background: rgba(213, 169, 92, .16); color: var(--gold-lt); }
.reihe-tat.archiv:active { background: rgba(213, 169, 92, .3); }
.reihe-tat.weg { background: #6b2320; color: #f3e2df; }
.reihe-tat.weg:active { background: #8a2d29; }

/* ---------- Meine Foodwelt ----------
   Eine Zeile, zwei Absichten: hin zum Restaurant, oder weiter in einen
   Plan. Der zweite Knopf steht rechts und traegt kein Gold - er ist der
   seltenere Weg und soll den ersten nicht ueberstrahlen. */
.fw-zeile {
  display: flex; align-items: stretch; border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.fw-haupt {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 12px 8px 12px 20px; background: none; border: 0; text-align: left;
}
.fw-haupt:active { background: rgba(213, 169, 92, .07); }
.fw-haupt .list-thumb { flex: 0 0 auto; }
.fw-text { flex: 1; min-width: 0; }
.fw-text b {
  display: block; font-size: 14.5px; font-weight: 400; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fw-text span { font-size: 12px; color: var(--ink-soft); }
.fw-plan {
  flex: 0 0 auto; align-self: center; margin: 0 16px 0 0;
  height: 32px; padding: 0 14px; white-space: nowrap;
  border: 1px solid var(--gold-line); border-radius: 999px;
  background: transparent; color: var(--gold-lt); font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.fw-plan:active { background: var(--gold-wash); }

/* Der Punkt an den Nachrichten oben rechts. Eine Zahl braucht es nicht -
   dass etwas da ist, genuegt; wie viel, sagt die Liste selbst.
   .header-action ist bereits absolut platziert und damit selbst der
   Bezugsrahmen - es hier anzufassen wuerde es aus der Ecke schieben. */
.kopf-punkt {
  position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); border: 1.5px solid rgba(0, 0, 0, .5);
}
/* Das Briefzeichen im Kopf traegt kein Wort - es braucht etwas Luft */
.header-action svg { display: block; width: 17px; height: 17px; }
/* Steht ein zweiter Knopf daneben, ruecken beide zusammen statt sich zu
   ueberlagern - der Brief bleibt aussen. */
.header-action + .header-action { right: 14px; }
.header-action:not(:last-child) { right: 92px; }

/* ---------- Zwei Knoepfe oben rechts ----------
   Der Punkte-Knopf ist schmal; stuende der erste dann bei 92 Pixeln,
   klaffte dazwischen eine Luecke. Diese Regel steht NACH der obigen und
   gewinnt bei gleicher Staerke. */
.header-action.punkte {
  padding: 7px 11px; font-size: 13px; letter-spacing: 1px; line-height: 1;
  max-width: none;
}
.header-action.zwei { right: 62px; }

/* Der Weg ins Archiv - eine schmale Zeile, kein Bereich. */
.archiv-zeile {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; border-top: 1px solid var(--line);
  padding: 13px 20px; margin-top: 6px; cursor: pointer;
  color: var(--muted); font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.archiv-zeile:active { color: var(--gold-lt); }
.archiv-zahl {
  min-width: 22px; padding: 2px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--line);
  font-size: 11px; color: var(--ink-soft);
}

/* ---------- Die Aktionszeile der Lokalseite ----------

   Vier Handgriffe nebeneinander statt vier Knoepfe untereinander. Drei
   Symbole in gleich grossen Quadraten, dann die Pille - sie darf breiter
   sein, weil sie als einzige ein Wort traegt.

   nowrap ist Absicht: bricht die Zeile um, steht die Pille allein in
   einer zweiten und alles ist wieder so hoch wie vorher. Auf einem sehr
   schmalen Geraet gibt lieber der Innenabstand nach - der faellt kaum
   auf, ein Umbruch schon. */
.lokal-akt {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  padding: 12px 20px 4px;
}
.akt-ikon, .akt-pille {
  height: 42px; border-radius: 12px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  color: var(--gold-lt); font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.akt-ikon { flex: 0 0 auto; width: 46px; }
.akt-ikon svg { width: 19px; height: 19px; display: block; }
.akt-ikon:active, .akt-pille:active { background: var(--gold); color: #17130c; }

/* Ein gesetztes Herz leuchtet, ein gesetztes Lesezeichen auch - aber
   beide bleiben Umriss und werden nicht zur Flaeche: die Zeile soll
   ruhig bleiben, auch wenn zwei von vier gesetzt sind. */
.akt-ikon.an { border-color: var(--gold); color: var(--gold); }
.akt-ikon.merken.favorit.an { color: #e06b6b; border-color: rgba(224, 107, 107, .55); }

/* Die Pille nimmt, was uebrig ist - und gibt als erstes nach, wenn es
   eng wird. */
.akt-pille {
  flex: 1 1 auto; min-width: 0; padding: 0 14px;
  font-size: 13px; letter-spacing: .3px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 360px) {
  .lokal-akt { gap: 6px; padding-left: 14px; padding-right: 14px; }
  .akt-ikon { width: 42px; }
  .akt-pille { padding: 0 10px; font-size: 12.5px; }
}

/* Der Haken im "Speichern in"-Blatt. Ein gesetzter Haken ist eine
   Aussage, ein leerer Kreis waere eine - deshalb steht dort nichts, wenn
   die Liste noch gar nicht geladen ist. */
.wahl-haken {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); color: var(--muted); font-size: 13px;
}
.wahl-haken.an { background: var(--gold); border-color: var(--gold); color: #17130c; }

/* Herz und Lesezeichen stehen nebeneinander und meinen Verschiedenes. */
.merken.favorit.an { filter: none; }
.merken.speichern { margin-left: 2px; }

/* ---------- Ein Lokal in den Plan legen ----------

   Der Knopf gehoert zur Liste, nicht unter die Seite. Deshalb traegt er
   dieselbe Zeilenform wie ein Lokal darueber - gleiche Hoehe, gleicher
   Rand, gleicher Innenabstand - und unterscheidet sich nur durch das
   Plus und die gestrichelte Kante: er ist eine Zeile, die es noch nicht
   gibt.

   Ein voller Knopf mit Goldgrund waere hier lauter als jedes Lokal
   darueber, und der Blick bliebe am Hinzufuegen haengen statt am Plan. */
.stop-plus {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 20px; cursor: pointer;
  background: none; border: none; border-bottom: 1px solid var(--line);
  color: var(--gold-lt); font-size: 13px; letter-spacing: .3px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.stop-plus-zeichen {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--gold-line); color: var(--gold);
  font-size: 15px; line-height: 1;
}
.stop-plus:active { background: var(--card-2); }
.stop-plus:active .stop-plus-zeichen { border-style: solid; }

/* Der Plan/Karte-Schalter sitzt unmittelbar ueber der Liste. Vorher lag
   dazwischen so viel Luft, dass die Liste erst nach dem Scrollen begann -
   auf einer Seite, deren einziger Inhalt die Liste ist. */
.trail-schalter { padding: 12px 20px 8px; }

/* Zahlen erklaeren eine Seite, sie sind nicht ihr Inhalt. Unten und
   schmaler als der Block, der frueher oben stand. */
.stats.schmal { margin-top: 18px; }
.stats.schmal .stat { padding: 11px 4px; }
.stats.schmal .stat b { font-size: 17px; }

/* Im Menue: Loeschen erkennbar, aber nicht laut. */
.list-row.gefahr h4 { color: #e08a6b; }
.row-action.weg { color: #e08a6b; }

/* ---------- Wechsel zwischen den Bereichen ----------
   Ein kurzer Schub in die Richtung, aus der der Inhalt kommt. Mehr nicht:
   eine Bewegung, die laenger dauert als der Gedanke dahinter, macht die
   App langsam, nicht lebendig. */
@keyframes reinVonRechts {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes reinVonLinks {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: none; }
}
.tab-rein-rechts { animation: reinVonRechts .2s cubic-bezier(.2, .8, .3, 1); }
.tab-rein-links { animation: reinVonLinks .2s cubic-bezier(.2, .8, .3, 1); }

/* ---------- Mit wem bist du hier? ----------
   Die Zeile im Beitrag ist bewusst leise: dieselbe Grösse und Farbe wie die
   Angaben darüber, nur mit einem Zeichen davor. Wer sie sucht, findet sie;
   wer den Beitrag liest, stolpert nicht darüber. */
.post-begleit {
  display: flex; align-items: baseline; gap: 6px;
  width: 100%; margin: 0 0 8px; padding: 0;
  background: none; border: none; text-align: left;
  font-size: 12px; line-height: 1.35; color: var(--muted);
  font-family: inherit; cursor: pointer;
}
.post-begleit .begleit-ico { flex: 0 0 auto; font-size: 11px; opacity: .75; }
/* Offen heisst offen - kursiv und blasser, damit es nicht wie eine
   festgestellte Tatsache aussieht. */
.post-begleit .begleit-offen { font-style: italic; opacity: .7; }

/* Die Frage an den Markierten. Sie steht über dem Beitrag und darf deshalb
   auffallen - aber als Karte, nicht als Warnung: es ist eine freundliche
   Nachfrage und kein Fehler. */
.begleit-frage {
  margin: 14px 16px 4px; padding: 16px 18px;
  border: 1px solid var(--gold); border-radius: 14px;
  background: var(--gold-wash);
}
.begleit-frage h4 {
  font-size: 15px; font-weight: 600; color: var(--gold-lt);
  letter-spacing: .3px; margin-bottom: 6px;
}
.begleit-frage p { font-size: 13px; line-height: 1.5; color: var(--ink); margin-bottom: 12px; }
.begleit-frage .btn-row { padding: 0; }

/* Die Auswahl im Formular. Ein Name je Marke, das ✕ gehört dazu und ist
   gross genug für einen Daumen. */
.begleit-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.begleit-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: 999px;
  border: 1px solid var(--gold); background: var(--gold-wash);
  color: var(--gold-lt); font-family: inherit; font-size: 13px;
  cursor: pointer; max-width: 100%;
}
.begleit-chip span { font-size: 14px; line-height: 1; opacity: .8; }

/* Die Liste im Auswahlblatt. Der Haken sitzt rechts, wo auf dem Telefon der
   Daumen ohnehin steht. */
.begleit-zeile .begleit-haken {
  flex: 0 0 24px; width: 24px; height: 24px; align-self: center;
  border: 1px solid var(--line); border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--gold);
}
.begleit-zeile.on .begleit-haken { border-color: var(--gold); background: var(--gold-wash); }

/* ---------- Weitergegeben ----------
   Die Zeile darüber ist eine Beifügung, keine zweite Überschrift: klein,
   grau, mit einem Zeichen davor. Die Karte darunter ist unverändert die
   gewohnte Beitragskarte - dass sie hier steht, ändert nichts an ihr. */
.reshare { margin-bottom: 4px; }
.rs-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 22px 0;
}
.rs-wer {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; text-align: left;
  font-family: inherit; font-size: 12px; color: var(--muted); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rs-wer .rs-ico { flex: 0 0 auto; font-size: 11px; opacity: .8; }
.rs-weg {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: none; border: none; color: var(--muted);
  font-size: 13px; line-height: 1; cursor: pointer;
}
/* Der eigene Satz zur Weitergabe. Er steht über dem Foodle und gehört
   sichtbar dem Teilenden - deshalb hier und nicht in der Karte. */
.rs-wort {
  padding: 6px 22px 8px; font-size: 14px; line-height: 1.45; color: var(--ink);
}
.rs-weg-karte {
  margin: 8px 16px 14px; padding: 26px 20px; border-radius: 14px;
  border: 1px dashed var(--line); text-align: center;
  font-size: 13px; color: var(--muted);
}

/* Die kleine Vorschau in den beiden Teilen-Blättern */
.rs-vorschau {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border: 1px solid var(--line); border-radius: 12px;
}
.rs-vorschau-bild {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 9px;
  overflow: hidden; background: var(--gold-wash);
}
.rs-vorschau-bild img, .rs-vorschau-bild video { width: 100%; height: 100%; object-fit: cover; }
.rs-vorschau-text { min-width: 0; }
.rs-vorschau-text b { display: block; font-size: 14px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-vorschau-text span { display: block; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ein ausgegrauter Eintrag im Teilen-Blatt: da, aber nicht antippbar */
.list-row.aus { opacity: .4; pointer-events: none; }

/* ---------- Eine Story, die etwas anderes zeigt ---------- */
.snap-karte {
  display: flex; flex-direction: column; gap: 0;
  width: min(78%, 300px); margin: auto; padding: 0;
  background: var(--card, #14110d); border: 1px solid var(--gold);
  border-radius: 16px; overflow: hidden; cursor: pointer;
  font-family: inherit; text-align: left;
}
.snap-karte.weg {
  padding: 30px 22px; text-align: center; border-style: dashed; border-color: var(--line);
  color: var(--muted); font-size: 14px; cursor: default;
}
.snap-karte-bild { display: block; width: 100%; aspect-ratio: 4/3; background: var(--gold-wash); }
.snap-karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snap-karte-bild.leer { display: flex; align-items: center; justify-content: center; font-size: 40px; }
.snap-karte-text { display: block; padding: 12px 14px 10px; }
.snap-karte-text b { display: block; font-size: 16px; color: var(--gold-lt); line-height: 1.25; }
.snap-karte-ort { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.snap-karte-note { display: block; font-size: 12px; color: var(--gold); margin-top: 5px; }
.snap-karte-wer { display: block; font-size: 11px; color: var(--muted); margin-top: 6px; }
/* Die Marke leise - eine geteilte Karte soll erkennbar aus Tastivo sein,
   ohne sich vor das zu stellen, worum es geht. */
.snap-karte-marke {
  display: block; padding: 0 14px 11px;
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); opacity: .6;
}

/* Eine weitergegebene Story: das Bild, und darüber wem es gehört. */
.snap-weiter { position: relative; width: 100%; height: 100%; }
.snap-weiter img { width: 100%; height: 100%; object-fit: contain; display: block; }
.snap-urheber {
  position: absolute; left: 50%; transform: translateX(-50%); top: 14px;
  max-width: 80%; padding: 6px 13px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); border: 1px solid var(--gold);
  color: var(--gold-lt); font-family: inherit; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.snap-weiter-text {
  position: absolute; left: 0; right: 0; bottom: 74px; padding: 0 26px;
  text-align: center; font-size: 15px; color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}
.snap-teilen {
  position: absolute; right: 16px; bottom: 22px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0, 0, 0, .45); border: 1px solid var(--line);
  color: var(--gold-lt); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* ---------- Die Karte als eigener Modus ----------

   Fast das ganze Bild gehoert der Karte. Die Tab-Leiste bleibt sichtbar,
   die Karte endet sauber darueber - wie das erreicht wird, steht in der
   Regel darunter. */
/* Im Kartenmodus faellt der uebliche Fussabstand von #app weg - er waere
   ein leerer Streifen unter der Karte. Die Tab-Leiste steht ohnehin
   darueber, und die Karte endet genau an ihrer Oberkante. */
body.auf-karte #app { padding-bottom: 0; min-height: 0; }

/* ---------- Die Karte rechnet nicht mehr ----------

   Vorher: height = 100dvh − Leiste − sichere Zone. Die Leiste dagegen
   klebt mit position:fixed am unteren Rand des SICHTFENSTERS. Zwei
   Bezugsgroessen fuer denselben Rand - und die muessen nicht
   uebereinstimmen.

   In Safari stimmen sie meistens: dvh folgt der Adressleiste, und was
   uebrigbleibt, ist auch das, woran fixed klebt. In der installierten
   App gibt es keine Adressleiste, und dann kann dvh etwas anderes
   melden, als der untere Rand tatsaechlich ist. Genau so sah es aus: die
   Leiste stand, wo sie MIT Adressleiste staende, und die Karte rechnete
   ohne sie.

   Jetzt rechnet niemand mehr. Die Karte klebt an denselben vier
   Raendern wie die Leiste - oben am Sichtfenster, unten genau um die
   Leistenhoehe darueber. Beide haengen am selben Bezug, also koennen sie
   sich nicht widersprechen. Kein dvh, kein vh, keine Hoehe.

   Das ist kein geratener Wert, sondern ein weggenommener. */
.karte-modus {
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
  /* Damit sie auf breiten Fenstern dieselbe Spalte bleibt wie #app und
     die Leiste - alle drei mit derselben Begrenzung. */
  max-width: 520px; margin: 0 auto;
  height: auto;
  overflow: hidden;
  touch-action: none;              /* die Gesten macht die Karte selbst */
  overscroll-behavior: contain;
}

.karte-buehne {
  position: absolute; inset: 0;
  background: #0d0b08;
  cursor: grab;
  /* Ohne das faengt iOS beim Ziehen an, Bilder auszuwaehlen */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.karte-buehne:active { cursor: grabbing; }

/* Die Welt: Kacheln und Nadeln gemeinsam. Waehrend einer Geste bekommt
   NUR diese Schicht eine Verschiebung - das erledigt der Grafikchip, und
   genau daran haengt, ob sich die Karte fluessig anfuehlt. */
.karte-welt {
  position: absolute; inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.karte-kacheln, .karte-nadeln { position: absolute; inset: 0; }
.karte-nadeln { pointer-events: none; }        /* nur die Nadeln selbst fangen Tipps */

.k-kachel {
  position: absolute; display: block;
  /* Die Karte ist hell, die App dunkel. Statt eines zweiten Kachelsatzes
     wird sie gedaempft und leicht entsaettigt - so traegt sie das goldene
     Gold, ohne dass Strassennamen unlesbar werden. */
  filter: brightness(.72) saturate(.72) contrast(1.05);
  pointer-events: none;
}

/* Dein Standort: ein Punkt mit Hof, wie man ihn kennt - und bewusst
   anders als eine Restaurantnadel, damit man beide nie verwechselt. */
.k-ich {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: #4c8dff; border: 2.5px solid #fff;
  box-shadow: 0 0 0 6px rgba(76, 141, 255, .25), 0 1px 4px rgba(0, 0, 0, .5);
}

/* Restaurantnadeln. Klein genug, dass zwanzig davon die Karte nicht
   zumauern, gross genug fuer einen Daumen (die Trefferflaeche ist
   groesser als der sichtbare Kreis). */
.k-nadel {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  padding: 0; border-radius: 50%;
  background: var(--gold); border: 2px solid #17130c;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .55);
  cursor: pointer; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, background .12s ease;
}
.k-nadel::after {                 /* unsichtbare Daumenflaeche */
  content: ''; position: absolute; inset: -9px;
}
/* Ein Vorschlag, den Tastivo noch nicht kennt: hohl statt gefuellt. */
.k-nadel.neu { background: #17130c; border-color: var(--gold); }
/* Waren Freunde dort, traegt die Nadel deren Zahl. Kein neues Farbsystem -
   dieselbe Sprache wie ueberall, nur deutlicher. */
.k-nadel.freunde { background: var(--gold-lt); width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.k-nadel-zahl { font-size: 11px; font-weight: 700; color: #17130c; line-height: 1; }
.k-nadel.gewaehlt {
  transform: scale(1.35); background: #fff; border-color: var(--gold);
  z-index: 3; box-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}

.karte-quelle {
  position: absolute; left: 8px; bottom: 6px; z-index: 2;
  font-size: 9px; color: rgba(246, 241, 231, .5);
  background: rgba(0, 0, 0, .4); padding: 2px 6px; border-radius: 5px;
  pointer-events: none;
}

/* ---------- Die Schicht darueber ---------- */
.karte-oben {
  position: absolute; left: 0; right: 0; z-index: 5;
  top: calc(env(safe-area-inset-top) + 8px);
  padding: 0 12px;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;                       /* nur die Elemente selbst */
}
.karte-oben > * { pointer-events: auto; }

.karte-suchfeld {
  display: flex; align-items: center; gap: 8px;
  background: rgba(20, 17, 13, .93); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 14px; height: 42px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.karte-lupe { font-size: 13px; opacity: .7; flex: 0 0 auto; }
.karte-suchfeld input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--ink); font-family: inherit; font-size: 14px;
}

.karte-modi { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.karte-modi::-webkit-scrollbar { display: none; }
.karte-chip {
  flex: 0 0 auto; padding: 6px 13px; border-radius: 999px;
  background: rgba(20, 17, 13, .9); border: 1px solid var(--line);
  color: var(--muted); font-family: inherit; font-size: 12px; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.karte-chip.on { background: var(--gold); border-color: var(--gold); color: #17130c; }

/* Die schwebenden Knoepfe. Rechts der Zoom und der Standort, in der Mitte
   oben "In diesem Bereich suchen" - dort, wo der Daumen nicht liegt und wo
   er die Karte nicht verdeckt. */
.karte-knoepfe { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.karte-knoepfe > * { pointer-events: auto; }

/* ---------- Rechts oben, auf einer Linie mit dem Pfeil ----------
   Der Zurueck-Pfeil sitzt links auf derselben Hoehe. Zwei Knoepfe, die
   sich gegenueberstehen, lesen sich als Paar - einer oben und einer in
   der Bildmitte als zwei Zufaelle. */
.karte-rechts {
  position: absolute; right: 12px;
  top: calc(env(safe-area-inset-top) + 8px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.karte-knopf {
  background: rgba(20, 17, 13, .93); border: 1px solid var(--line);
  color: var(--gold-lt); font-family: inherit; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* 42 Punkte, genau wie der Zurueck-Pfeil - sonst stuenden sie auf einer
   Linie und waeren doch verschieden gross. */
.karte-knopf.rund {
  width: 42px; height: 42px; border-radius: 50%;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
/* Blau, wie es fuer den eigenen Standort ueblich ist. Das ist die eine
   Stelle, an der eine fremde Farbe richtiger ist als die eigene: sie
   sagt in jeder Karte der Welt dasselbe. */
.karte-knopf.standort { color: #7aa9ff; }
.karte-knopf.standort svg { transform: rotate(0deg); }

/* Die Zielscheibe: derselbe Kreis wie der Standort, nur golden - sie
   ist ein Angebot und keine Dauereinrichtung, und sie soll auffallen,
   solange sie da ist. */
.karte-knopf.ziel { border-color: var(--gold); color: var(--gold); }
.karte-knopf.ziel:active { background: var(--gold); color: #17130c; }
.karte-knopf.rund svg { width: 19px; height: 19px; display: block; }
.karte-laedt {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top) + 106px);
  padding: 8px 15px; border-radius: 999px;
  background: rgba(20, 17, 13, .93); border: 1px solid var(--line);
  font-size: 12px; color: var(--muted); white-space: nowrap;
}

/* ---------- Das Blatt unten ----------
   Drei Stufen ueber eine Klasse. Die Bewegung laeuft ueber transform und
   nicht ueber height: nur so ist sie fluessig. */
.karte-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  height: 78%;
  background: var(--card, #14110d);
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column;
  transition: transform .22s cubic-bezier(.32, .72, 0, 1);
  touch-action: none;
}
/* ---------- Drei Stufen ----------

   ZU     nur Griff und Suchzeile - die Karte hat das Bild
   HALB   Suche, Filter und die ersten Treffer
   VOLL   die Liste, die Karte darueber noch als Streifen

   "Zu" laesst jetzt 108 statt 62 Punkte stehen: seit die Suche im Blatt
   sitzt, muss sie in dieser Stufe sichtbar bleiben - sonst waere das
   Suchfeld genau dort, wo man es am haeufigsten braucht, unerreichbar.

   --tastatur ist die gemessene Hoehe der Bildschirmtastatur (siehe
   bindTastatur). Ohne sie schoebe sich die Tastatur auf dem iPhone vor
   das Blatt, und man schriebe blind in ein Feld, das man nicht sieht. */
.karte-sheet.zu   { transform: translateY(calc(100% - 104px - var(--tastatur, 0px))); }
.karte-sheet.halb { transform: translateY(calc(58% - var(--tastatur, 0px))); }
.karte-sheet.voll { transform: translateY(calc(0px - var(--tastatur, 0px))); }

/* ---------- Der Kopf des Blattes: zwei Zeilen, eine sichtbar ----------

   Im Ruhezustand die Ziele und eine Lupe. Nach einem Tipp auf die Lupe
   das Suchfeld. Beide liegen im Baum; getauscht wird ueber die Klasse
   "sucht" - so ueberlebt das Eingabefeld jedes Neuzeichnen und mit ihm
   die Tastatur.

   display:none statt Wegnehmen: ein weggenommenes Feld verliert seinen
   Wert, ein verstecktes behaelt ihn. */
.ks-kopfzeile { flex: 0 0 auto; }
.ks-kopfzeile .ks-suchzeile { display: none; }
.ks-kopfzeile.sucht .ks-ziele { display: none; }
.ks-kopfzeile.sucht .ks-suchzeile { display: flex; }

/* Die Ziele nehmen den Platz, die Lupe nur ihren Kreis. Die Reihe
   scrollt waagrecht, falls je ein fuenftes Ziel dazukommt - sie soll
   nicht umbrechen und dem Blatt eine zweite Zeile abverlangen. */
.ks-ziele {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 14px 10px;
}
.ks-ziel-reihe {
  flex: 1; min-width: 0; display: flex; gap: 7px;
  overflow-x: auto; scrollbar-width: none;
}
.ks-ziel-reihe::-webkit-scrollbar { display: none; }
.ks-ziel-reihe .ks-filter { flex: 0 0 auto; }
.ks-lupe-knopf {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  font-size: 15px; cursor: pointer;
}
.ks-lupe-knopf:active { background: var(--gold); }

.ks-suchzeile {
  flex: 0 0 auto; align-items: center; gap: 8px;
  padding: 2px 14px 10px;
}
.ks-suchzeile .karte-suchfeld {
  flex: 1; min-width: 0; box-shadow: none;
  background: rgba(255, 255, 255, .05);
}
.ks-suchzu {
  flex: 0 0 auto; background: none; border: none; padding: 0 4px;
  color: var(--gold-lt); font-family: inherit; font-size: 13px; cursor: pointer;
  white-space: nowrap;
}

.ks-leib { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

/* Ueber der Karte bleibt nur der Pfeil - kein Balken, keine zweite Zeile. */
.karte-oben.nur-pfeil { display: block; padding: 0 12px; }

.ks-griff {
  flex: 0 0 auto; width: 38px; height: 5px; border-radius: 3px;
  background: rgba(246, 241, 231, .22); margin: 8px auto 6px; cursor: grab;
}
.ks-kopf {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 4px 18px 10px; cursor: grab;
}
.ks-zahl { font-size: 13px; color: var(--gold-lt); letter-spacing: .3px; }
.ks-filter {
  flex: 0 0 auto; padding: 5px 12px; border-radius: 999px;
  background: none; border: 1px solid var(--line);
  color: var(--muted); font-family: inherit; font-size: 12px; cursor: pointer;
}
.ks-filter.on { background: var(--gold); border-color: var(--gold); color: #17130c; }

/* Das Blatt selbst nimmt keine Beruehrung an (touch-action: none), damit
   das Ziehen sauber bleibt - die Liste darin muss sich davon ausnehmen,
   sonst liesse sie sich mit dem Finger nicht blaettern. */
.ks-liste {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.ks-lokal.gewaehlt { background: var(--gold-wash); }
.ks-freunde { font-size: 11px; color: var(--gold); margin-top: 2px; }

/* Ein Lokal, das Tastivo noch nicht kennt. Der Hinweis ist bewusst leise
   und in unseren Worten - "OSM", "extern" oder "Provider" sind Begriffe
   aus dem Maschinenraum und gehen niemanden etwas an. */
.neu-hier {
  display: block; margin-top: 2px;
  font-size: 10px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--gold); opacity: .8; font-style: normal;
}

/* Herkunftsangabe unter einer Trefferliste. Leise, aber nicht versteckt:
   Google verlangt, dass sie lesbar ist und nicht verdeckt wird - kein
   Grau auf Grau, kein Wegblenden. */
.quelle-hinweis {
  margin: 10px 16px 14px; font-size: 10px; letter-spacing: .3px;
  color: var(--muted); text-align: right;
}
.vorschlag .neu-hier { margin-top: 3px; }

/* Wie viele Aufnahmen die Vorschau vertritt. Klein und in der Ecke - die
   Zahl ist eine Auskunft, kein Titel. */
.snap-preview { position: relative; }
.snap-zahl {
  position: absolute; right: 10px; top: 10px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(0, 0, 0, .6); border: 1px solid var(--line);
  font-size: 11px; color: var(--gold-lt); letter-spacing: .5px;
}
/* Die Nummer auf einem Vorschaubild im Foodie-Streifen. Beim Foodle trägt
   sie nur das erste Bild ("die Vorschau"), hier jedes: dort ist die
   Reihenfolge eine Rangfolge, hier ist sie der Ablauf. */
.bild-mini .mini-marke { pointer-events: none; }

/* ---------- Ausschnitt wählen ----------
   Derselbe Rahmen wie im Feed: vier zu fünf, fest. Er bewegt sich nicht -
   das Bild bewegt sich darunter. Genau deshalb ist die Vorschau eine
   Zusage und keine Ähnlichkeit. */
.crop-buehne {
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  background: #0d0b08; overflow: hidden;
  touch-action: none;                 /* die Gesten macht der Editor */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: grab;
}
.crop-buehne:active { cursor: grabbing; }
.crop-buehne img { position: absolute; max-width: none; display: block; }
.crop-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Drittellinien, sehr leise. Sie helfen beim Ausrichten und sollen sonst
   nicht auffallen. */
.crop-hilfe { position: absolute; inset: 0; pointer-events: none; }
.crop-hilfe span { position: absolute; background: rgba(255, 255, 255, .13); }
.crop-hilfe span:nth-child(1) { left: 33.33%; top: 0; bottom: 0; width: 1px; }
.crop-hilfe span:nth-child(2) { left: 66.66%; top: 0; bottom: 0; width: 1px; }
.crop-hilfe span:nth-child(3) { top: 33.33%; left: 0; right: 0; height: 1px; }
.crop-hilfe span:nth-child(4) { top: 66.66%; left: 0; right: 0; height: 1px; }

/* Die Miniaturen zeigen ihren eigenen Ausschnitt - dieselbe Rechnung. */
.bild-mini { position: relative; overflow: hidden; }
.bild-mini img.crop-bild { position: absolute; max-width: none; }
.photo-slot img.crop-bild, .snap-preview img.crop-bild, .edit-bild img.crop-bild {
  position: absolute; max-width: none; width: auto; height: auto;
}
.photo-slot, .snap-preview, .edit-bild { position: relative; overflow: hidden; }
/* Der Entwurf zeigt denselben Rahmen wie der Feed. */
.photo-slot { aspect-ratio: 4 / 5; }

/* ---------- Zahlen: vier Kennzahlen, zwei mal zwei ----------
   Ruhig und ohne Rahmenwerk. Drei davon führen weiter - erkennbar am
   feinen Winkel rechts, nicht an einem Knopf, der sich vordrängt. */
.zahl-gitter {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 14px 16px 6px;
}
.zahl-kachel {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 16px 14px; border-radius: 14px;
  background: var(--card, #14110d); border: 1px solid var(--line);
  text-align: left; font-family: inherit;
}
.zahl-kachel.weg { cursor: pointer; }
.zahl-kachel.weg:active { background: var(--gold-wash); }
.zk-titel {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); line-height: 1.3; padding-right: 12px;
}
.zk-wert {
  font-family: Georgia, serif; font-size: 30px; font-weight: 400;
  color: var(--gold-lt); line-height: 1.05;
}
.zk-pfeil {
  position: absolute; right: 12px; top: 14px;
  font-size: 15px; color: var(--gold); opacity: .55;
}
@media (max-width: 340px) {
  .zahl-gitter { gap: 8px; padding: 12px 12px 4px; }
  .zk-wert { font-size: 26px; }
}

/* ---------- Foodwelt: das Dashboard ----------
   Acht Kacheln, zwei Spalten. Ruhige dunkle Flächen, Gold nur als Akzent -
   nicht jede Fläche golden umrandet, sonst schreien alle gleich laut. Der
   feine Winkel rechts sagt, welche weiterführt. */
.fw-gitter {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 16px 16px 8px;
}
.fw-kachel {
  position: relative; display: flex; flex-direction: column;
  justify-content: space-between; gap: 10px; min-height: 96px;
  padding: 15px 14px; border-radius: 14px;
  background: var(--card, #14110d); border: 1px solid var(--line);
  text-align: left; font-family: inherit;
}
.fw-kachel.weg { cursor: pointer; }
.fw-kachel.weg:active { background: var(--gold-wash); }
.fwk-titel {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); line-height: 1.35; padding-right: 14px;
}
.fwk-wert {
  font-family: Georgia, serif; font-size: 32px; font-weight: 400;
  color: var(--gold-lt); line-height: 1;
}
.fwk-pfeil {
  position: absolute; right: 12px; top: 13px;
  font-size: 15px; color: var(--gold); opacity: .55;
}

/* Zeitachse und Karte tragen ein Zeichen, wo die anderen ihre Zahl tragen.
   Damit die Kachel darüber nicht kippt, nimmt es dieselbe Zeilenhöhe ein
   wie die Ziffern: gleiche Fläche, gleiche Grundlinie, gleiches Gold. */
.fwk-ikon {
  display: flex; align-items: center;
  height: 32px; color: var(--gold-lt);
}
.fwk-ikon svg { width: 27px; height: 27px; }

@media (max-width: 340px) {
  .fw-gitter { gap: 8px; padding: 12px 12px 6px; }
  .fwk-wert { font-size: 27px; }
  .fwk-ikon { height: 27px; }
  .fwk-ikon svg { width: 23px; height: 23px; }
  .fw-kachel { min-height: 88px; }
}

/* ---------- Die geteilte Beitragskarte in einer Story ----------
   Sie soll aussehen wie der Beitrag selbst, nur kleiner. Der Verfasser
   steht oben und nicht als Fussnote: wer eine Story ansieht, muss auf den
   ersten Blick erkennen, dass hier jemand anderes gegessen hat. */
.sk-kopf {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px 9px;
}
.sk-avatar {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--gold); background: var(--gold-wash);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--gold-lt); letter-spacing: .5px;
}
.sk-wer { min-width: 0; display: block; }
.sk-wer b {
  display: block; font-size: 14px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sk-wer span {
  display: block; font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Das Bild traegt seinen Ausschnitt wie im Feed - derselbe 4:5-Rahmen,
   dieselbe Rechnung, damit die Karte denselben Bildteil zeigt. */
.snap-karte-bild { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.snap-karte-bild img.crop-bild {
  position: absolute; max-width: none; width: auto; height: auto;
}
.sk-mehr {
  position: absolute; right: 8px; top: 8px;
  background: rgba(0, 0, 0, .6); color: #fff;
  border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Lokal und Kronen auf einer Zeile, das Gericht darunter - dieselbe
   Ordnung wie im Feed. */
.sk-zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; min-width: 0;
}
.snap-karte .snap-karte-ort { margin-top: 0; min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snap-karte .snap-karte-note { margin-top: 0; flex: 0 0 auto; white-space: nowrap; }
.snap-karte-text > b { display: block; margin-top: 3px; }

/* Ganz oben, wie im Feed: Gruppe links, Track rechts. Kein Umbruch -
   zwei Marken passen nebeneinander, sonst kuerzen sie sich. */
.sk-marken {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; min-width: 0; margin-bottom: 8px;
}
.sk-marken-links, .sk-marken-rechts { display: flex; min-width: 0; }
.sk-marken-rechts { justify-content: flex-end; }
.sk-marke {
  display: inline-block; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, .25);
  font-size: 10px; color: var(--muted); white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Zusammengefasste Nadeln ----------
   Ein Haufen ist eine Nadel mit einer Zahl darin - dieselbe Sprache, nur
   groesser. Kein zweites Formenvokabular. */
.k-haufen {
  position: absolute; margin: -18px 0 0 -18px;
  min-width: 36px; height: 36px; padding: 0 8px;
  border-radius: 999px;
  background: var(--gold); border: 2px solid #17130c;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
  color: #17130c; font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; pointer-events: auto;
}
.k-haufen::after { content: ''; position: absolute; inset: -8px; }

/* Die Filter im Blatt. Eine eigene Zeile unter der Zahl - im Kopf daneben
   wurde es bei vier Stueck zu eng. */
.ks-filter-zeile {
  flex: 0 0 auto; display: flex; gap: 7px;
  padding: 0 18px 10px; overflow-x: auto; scrollbar-width: none;
}
.ks-filter-zeile::-webkit-scrollbar { display: none; }
.ks-filter-zeile .ks-filter { flex: 0 0 auto; }

/* Merken und Einplanen unter dem ausgewählten Lokal. Sie erscheinen nur
   dort - bei jeder Zeile wären es vierzig Knöpfe. */
.ks-eintrag.gewaehlt { background: var(--gold-wash); }
.ks-werkzeug {
  display: flex; gap: 8px; padding: 0 18px 12px;
}
.ks-werkzeug .btn { flex: 1; padding: 9px 10px; font-size: 12px; }


/* ============================================================
   Meine Foodwelt als Karte
   ============================================================

   Eine Sammlung von Erinnerungen, keine Restaurantdatenbank. Das
   entscheidet jede Regel hier: Bilder gross, Nadeln klein, Gold nur als
   Akzent, moeglichst wenig, das sich vor die Karte legt. */

/* Die Filterzeile schwebt ueber der Karte statt darueber zu stehen -
   sonst waere die Karte wieder ein Fenster mit Rahmen. */
/* Auf der Karte gibt es keinen Kopf - Titel und Zierleiste nehmen ein
   Fuenftel des Bildes weg. Stattdessen diese eine schwebende Zeile:
   Zurueck und die drei Filter. */
/* Der Kopf der Entdecken-Karte: ein Pfeil und ein Suchfeld, mehr
   nicht. Nebeneinander, damit das Feld die ganze uebrige Breite
   bekommt. */
/* flex-direction ausdruecklich: die Grundregel weiter oben stellt die
   Schicht als Spalte auf, weil dort frueher zwei Zeilen standen. Jetzt
   ist es eine. */
.karte-oben { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.karte-oben .karte-suchfeld { flex: 1; min-width: 0; }
.karte-zurueck {
  flex: 0 0 auto;   /* Beruehrungen bekommt er ueber .karte-oben > * */
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(20, 17, 13, .93);
  border: 1px solid var(--line);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--gold); font-size: 24px; line-height: 1;
  padding: 0 3px 3px 0;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
}
.karte-zurueck:active { background: var(--gold); color: #17130c; }

.karte-oben.welt {
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  padding: 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.welt-zurueck {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(14, 12, 9, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--gold-line); color: var(--gold);
  font-size: 22px; line-height: 1; padding: 0 3px 3px 0;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
}
.welt-zurueck:active { background: var(--gold); color: #17130c; }
.karte-oben.welt .ks-filter-zeile {
  background: rgba(14, 12, 9, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--gold-line); border-radius: 999px;
  padding: 4px; display: inline-flex; gap: 2px;
}

/* ---------- Dieselben Marker auf Googles Karte ----------

   Auf der eigenen Karte sitzen sie absolut auf Bildpunkten; Google hängt
   sie selbst an Koordinaten auf und setzt dabei die UNTERKANTE des
   Inhalts auf den Ort. Also hier: keine absolute Lage mehr, und die halbe
   eigene Höhe nach unten, damit die Mitte auf der Koordinate liegt.

   Alles Übrige - Grösse, Rand, Gold, Collage, Auswahl - gilt unverändert
   weiter. Es gibt nur eine Foodwelt, nicht zwei. */
.g-welt.w-foto, .g-welt.w-haufen {
  position: relative;
  transform: translateY(50%);
}

/* Hier standen die Blasen für Land und Stadt. Die Foodwelt-Karte kennt
   diese Ebenen nicht mehr: sie zeigt Lokale und fasst nur zusammen, was
   sich überdeckt. Die Länder- und Städtezahlen selbst leben weiter - auf
   den Kacheln und in den Ortsebenen, wo man sie liest statt sie zu
   überfliegen. */

/* ---------- Ein Foto als Marker ----------
   Das visuelle Herzstueck. Rund, duenner Goldrand, kein Pin. */
.w-foto {
  position: absolute; transform: translate(-50%, -50%);
  width: 46px; height: 46px; padding: 0;
  border-radius: 50%;
  /* Sichtbar, nicht abgeschnitten: die Besuchszahl sitzt bewusst etwas
     über den Rand hinaus. Bei "overflow: hidden" schnitt der runde Rahmen
     sie zur Hälfte weg - man sah einen Rest und wusste nicht, was es war.
     Rund bleibt das Bild trotzdem, es rundet sich jetzt selbst. */
  overflow: visible;
  border: 1.5px solid var(--gold-line);
  background: #241d15;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .55);
  transition: width .16s ease, height .16s ease, border-color .16s ease;
}
.w-foto img {
  width: 100%; height: 100%; display: block; border-radius: 50%;
}
/* Ausgewählt. Etwas grösser, und ein feiner Ring darum - auf Googles
   heller Karte trägt der Goldrand allein zu wenig, um sich von einem
   Dutzend anderer Ringe abzuheben. Kein Pulsieren: die Auswahl soll
   erkennbar sein, nicht auf sich aufmerksam machen. */
/* Ausgewählt: ein Ring, keine Vergrösserung. Ein Foto-Marker verschwindet
   im Auswahlzustand ohnehin - übrig bleibt der Teller-Rahmen eines
   Besuchs ohne Bild, und der soll nur zeigen, dass er gemeint ist. */
.w-foto.gewaehlt {
  border-color: var(--gold); border-width: 2px; z-index: 3;
  box-shadow: 0 0 0 3px rgba(213, 169, 92, .45), 0 4px 16px rgba(0, 0, 0, .6);
}
/* Wie oft man hier war. Klein und in der Ecke - die Zahl ist ein
   Zusatz, nicht die Aussage. */
.w-zahl {
  position: absolute; right: -2px; bottom: -2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--gold); color: #17130c;
  font-size: 10px; font-weight: 700; border: 1.5px solid var(--card);
}

/* ---------- Eine Station eines Foodtracks ----------

   Sie trägt ihre Nummer, denn bei einem Plan ist die Reihenfolge die
   halbe Auskunft. Die Farbe spricht dieselbe Sprache wie die Abzeichen in
   der Liste: was ansteht, leuchtet; was besucht oder ausgelassen ist,
   tritt zurück. */
.w-stop {
  position: absolute; transform: translate(-50%, -50%);
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 16, 11, .94); border: 2px solid #a67c33;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .6);
  font-family: inherit;
  transition: width .16s ease, height .16s ease;
}
.w-stop-zahl {
  font-size: 13px; font-weight: 700; color: #ecc98a; line-height: 1;
}
.w-stop.stand-MUST_TRY { border-color: #ecc98a; }
.w-stop.stand-BOOKED   { border-color: #d5a95c; }
.w-stop.stand-VISITED  { border-color: #f6f1e7; }
.w-stop.stand-VISITED .w-stop-zahl { color: #f6f1e7; }
.w-stop.stand-SKIPPED  { border-color: #5a544a; opacity: .65; }
.w-stop.stand-SKIPPED .w-stop-zahl { color: #8a8177; }
.w-stop.gewaehlt {
  width: 36px; height: 36px; z-index: 3; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(213, 169, 92, .45), 0 3px 12px rgba(0, 0, 0, .6);
}
.w-stop.gewaehlt .w-stop-zahl { font-size: 16px; }
.g-welt.w-stop { position: relative; transform: translateY(50%); }

/* Der Name des Foodtracks über seiner Karte - dort, wo in der Foodwelt
   die Filter stehen. Fünf Stationen filtert man nicht. */
.welt-titel {
  flex: 1 1 auto; min-width: 0;
  font-size: 15px; color: var(--gold-lt); letter-spacing: .3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}

/* ---------- Ein Besuch ohne Foto ----------

   Er verschwindet nicht - und er ist auch kein Punkt mehr. Ein kleiner
   goldener Punkt neben lauter runden Fotos las sich wie ein Fehler, nicht
   wie ein Besuch. Jetzt derselbe runde Rahmen wie ein Foto-Marker, nur
   mit einem Teller darin: erfunden wird kein Bild, aber die Form bleibt
   dieselbe - und die Karte bleibt von oben bis unten eine Karte aus
   runden Bildern. */
.w-foto.leer { background: #241d15; }
.w-foto-leer {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 20px;
}
.w-foto.leer.gewaehlt .w-foto-leer { font-size: 26px; }

/* ---------- Mehrere zu dicht ----------
   Eine Collage aus hoechstens drei Bildern. Acht Fotos uebereinander
   saehen aus wie ein Fehler. */
.w-haufen {
  position: absolute; transform: translate(-50%, -50%);
  width: 56px; height: 56px; padding: 0; border-radius: 50%;
  overflow: visible; border: 0; background: none;
}
/* Der runde Rahmen, in dem die Collage liegt. Er steht eigens da, weil
   dieselbe Collage an zwei Orten gebraucht wird: als Haufen dicht
   beieinanderliegender Lokale UND als Blase für ein Land oder eine
   Stadt. Eine Karte aus Bildern soll auf jeder Zoomstufe eine Karte aus
   Bildern bleiben - auch ganz weit draussen. */
.w-haufen-rahmen {
  position: relative; display: block; width: 56px; height: 56px;
}
.w-haufen-bilder {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  display: grid; border: 1.5px solid var(--gold-line); background: #241d15;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .55);
}
.w-haufen-bilder.n1 { grid-template-columns: 1fr; }
.w-haufen-bilder.n2 { grid-template-columns: 1fr 1fr; }
.w-haufen-bilder.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.w-haufen-bilder.n3 img:first-child { grid-row: span 2; }
.w-haufen-bilder img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w-haufen-leer {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #241d15; border: 1.5px solid var(--gold-line); font-size: 20px;
}
.w-haufen-zahl {
  position: absolute; right: -4px; bottom: -4px;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--gold); color: #17130c;
  font-size: 11px; font-weight: 700; border: 2px solid var(--card);
}

/* ---------- Die Fotoleiste ----------
   Wie unter der Ortskarte in Apple Fotos: was im Bild liegt, liegt auch
   hier. Sie sitzt ueber dem Blatt und geht weg, sobald das Blatt ganz
   aufgeht - zwei Dinge uebereinander sind eines zu viel. */
/* Die Leiste sitzt ueber dem Blatt. Ist eines offen, rutscht sie hoeher -
   zwei Dinge uebereinander sind eines zu viel, und ein Bild, das halb
   hinter dem Blatt liegt, laesst sich nicht antippen. */
.karte-modus.welt:has(.karte-sheet.welt.halb) 
/* ---------- Das Blatt ----------
   Halb: eine Zeile Erinnerung. Ganz: die Besuche dazu. */
/* ---------- Das Blatt der Foodwelt ----------

   Anders als bei der Entdecken-Karte traegt es keine Liste, sondern eine
   Erinnerung. Halb geoeffnet soll es deshalb genau so hoch sein wie sein
   Inhalt - ein Blatt mit vierzig Prozent schwarzer Flaeche darunter nimmt
   der Karte Platz weg und sagt nichts dafuer.

   Ganz geoeffnet darf es wachsen: dann stehen die Besuche darin. */
.karte-sheet.welt {
  height: auto; max-height: 78%;
  transform: none;
  transition: max-height .22s cubic-bezier(.32, .72, 0, 1),
              transform .22s cubic-bezier(.32, .72, 0, 1);
}
/* Unten heisst nicht weg. Liegt etwas im Bild, schaut der Kopf des
   Blattes hervor - "5 Restaurants, wo du warst". Wer mehr will, zieht
   hoch; wer nur die Karte anschauen will, hat sie fast ganz. Vorher war
   dieser Zustand vollständig unsichtbar, und deshalb wusste niemand, dass
   es unter der Karte überhaupt eine Liste gibt.

   Wirklich leer bleibt wirklich weg: kein Griff für nichts. */
.karte-sheet.welt.zu {
  transform: translateY(calc(100% - 62px - env(safe-area-inset-bottom, 0px)));
}
.karte-sheet.welt.leer { transform: translateY(100%); }
.karte-modus.welt:has(.karte-sheet.welt.zu) .karte-modus.welt:has(.karte-sheet.welt.leer) /* Ausdruecklich statt "erbt nichts": die Regeln der Entdecken-Karte
   schieben ihr Blatt je Zustand ein Stueck hinunter (translateY(58%)).
   Dieses hier ist so hoch wie sein Inhalt und darf gar nicht geschoben
   werden - sonst haengt es unter dem Bildrand. Zwei Klassen gegen zwei
   Klassen entscheidet die Reihenfolge im Stylesheet, und darauf will man
   sich bei so etwas nicht verlassen. */
.karte-sheet.welt.halb { max-height: 46%; transform: translateY(0); }
.karte-sheet.welt.voll { max-height: 78%; transform: translateY(0); overflow-y: auto; }
.w-blatt { padding: 4px 16px calc(env(safe-area-inset-bottom, 0px) + 16px); }
.w-blatt-kopf { display: flex; gap: 13px; align-items: flex-start; text-align: left; }
.w-blatt-bild {
  flex: 0 0 auto; width: 68px; height: 68px; border-radius: 14px;
  overflow: hidden; background: #241d15; border: 1px solid var(--gold-line);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  transition: width .18s ease, height .18s ease;
}
.w-blatt.voll .w-blatt-bild { width: 96px; height: 96px; }
.w-blatt-bild img { width: 100%; height: 100%; display: block; }
.w-blatt-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.w-blatt-text b { font-size: 17px; color: var(--ink); }
.w-blatt-ort { font-size: 12px; color: var(--gold); font-style: italic; }
.w-blatt-zeile { font-size: 12px; color: var(--muted); }
.w-blatt-gericht { font-size: 13px; color: var(--ink-soft); }
.w-blatt-zahl {
  align-self: flex-start; margin-top: 2px;
  font-size: 10px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold-line);
  border-radius: 999px; padding: 2px 8px;
}
.w-blatt-liste { margin-top: 14px; border-top: 1px solid var(--line); }
.w-besuch { width: 100%; }
.w-blatt-tat { display: flex; gap: 8px; margin-top: 14px; }
.w-blatt-tat .btn { flex: 1 1 0; min-width: 0; }


/* ============================================================
   Entdecken-Karte: Google Maps
   ============================================================

   Google zeichnet, Tastivo legt seine Nadeln darauf. Sie sehen aus wie
   die auf der eigenen Karte - wer zwischen den beiden wechselt, soll
   nicht zweimal lesen lernen. */
.gmap { position: absolute; inset: 0; background: #0d0b08; }

/* ---------- Googles Namensnennung ----------

   Google setzt Logo und Rechtehinweis an den unteren Rand seiner Karte.
   Beides darf weder entfernt noch verdeckt werden - das ist eine
   Auflage, keine Hoeflichkeit.

   Genau dort liegt aber das Blatt mit den Treffern. Also wandert die
   Namensnennung mit: so weit nach oben, wie das Blatt gerade hoch ist.
   Verschieben ist erlaubt, verdecken nicht.

   Die Zahlen sind dieselben wie die Zustaende des Blattes
   (.karte-sheet.zu/.halb/.voll) - stuenden hier eigene, liefen sie beim
   naechsten Umbau auseinander. */
.gmap .gm-style-cc,
.gmap a[href^="https://maps.google.com"],
.gmap img[alt="Google"] {
  transition: transform .22s cubic-bezier(.32, .72, 0, 1);
}
.karte-modus:has(.karte-sheet.zu) .gmap .gm-style-cc,
.karte-modus:has(.karte-sheet.zu) .gmap a[href^="https://maps.google.com"],
.karte-modus:has(.karte-sheet.zu) .gmap img[alt="Google"] {
  transform: translateY(-62px);
}
.karte-modus:has(.karte-sheet.halb) .gmap .gm-style-cc,
.karte-modus:has(.karte-sheet.halb) .gmap a[href^="https://maps.google.com"],
.karte-modus:has(.karte-sheet.halb) .gmap img[alt="Google"] {
  transform: translateY(-33vh);
}
.karte-modus:has(.karte-sheet.voll) .gmap .gm-style-cc,
.karte-modus:has(.karte-sheet.voll) .gmap a[href^="https://maps.google.com"],
.karte-modus:has(.karte-sheet.voll) .gmap img[alt="Google"] {
  transform: translateY(-78vh);
}

/* ---------- Die Entdecken-Karte zeichnet keine eigenen Nadeln ----------

   Hier standen die Regeln fuer .g-nadel und .g-haufen. Sie sind weg,
   weil die Marker weg sind: Google zeigt seine eigenen Lokalsymbole, und
   ein zweiter Punkt daneben sagte nur "hier ist auch ein Lokal" - das
   wusste man schon.

   Was Tastivo ausmacht, steht im Blatt darunter. Siehe KARTE-GOOGLE.md.

   Geblieben ist ein einziger Marker: der eigene Standort. */

/* Der eigene Standort - wie ueberall: blau, weil das jeder kennt. */
.g-ich {
  width: 14px; height: 14px; border-radius: 50%;
  background: #1a73e8; border: 2.5px solid #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}

/* Die Treffer auf Googles Karte - und zwar nur die, die Google gerade
   nicht selbst zeigt. Ein Lückenbüsser soll nicht lauter sein als das,
   was er vertritt: klein, warm gedämpft, mit weissem Ring, damit er auf
   der hellen Strassenkarte lesbar bleibt. Kein Tastivo-Nadelwald. */
.g-lokal {
  width: 11px; height: 11px; border-radius: 50%;
  background: #a87c47; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  cursor: pointer;
  /* Der erweiterte Marker haengt seinen Inhalt mit der UNTERKANTE an den
     Ort - richtig fuer eine Nadel, falsch fuer einen Punkt. Die halbe
     eigene Hoehe nach unten setzt die Mitte auf die Koordinate. */
  transform: translateY(50%);
  transition: width .12s ease, height .12s ease, background .12s ease;
}
/* Wo Freunde waren, leuchtet es heller - das ist das Einzige, was Tastivo
   auf der Karte selbst behauptet. Alles Weitere steht im Blatt. */
.g-lokal.freunde { width: 13px; height: 13px; background: #cf9a45; }
.g-lokal.gewaehlt {
  width: 18px; height: 18px; background: #d5a95c;
  border-width: 3px; box-shadow: 0 2px 7px rgba(0, 0, 0, .45);
}

@media (prefers-reduced-motion: reduce) { .g-lokal { transition: none; } }


/* ============================================================
   Das X im Suchfeld
   ============================================================

   Es sitzt IMMER rechts innerhalb des Feldes - auch wenn nichts
   drinsteht. Ein Kreuz, das beim ersten Buchstaben aufblitzt, laesst
   die Zeile zucken; eines, das immer da ist, ist einfach da.

   ---------- Warum eine eigene Huelle ----------

   Das X wird nachtraeglich eingehaengt (bindSuchfelder in app-v3.js),
   und die Suchfelder sind verschieden gebaut:

     im Formular   der goldene Rahmen sitzt am <input> selbst, der
                   Elternknoten umfasst auch Beschriftung und Hinweis
     auf der Karte der Elternknoten IST die Pille mit dem Rahmen

   Haengte man das X an den Elternknoten, saesse es im ersten Fall
   ausserhalb des Rahmens - genau das war der Fehler. Eine Huelle direkt
   um das Feld hat dagegen in beiden Faellen genau dessen Kasten. */
.such-huelle { position: relative; display: block; }

/* Auf der Karte liegt das Feld in einer Flex-Pille neben der Lupe - die
   Huelle muss sich dort genauso verhalten wie das Feld vorher. */
.karte-suchfeld .such-huelle { flex: 1; min-width: 0; display: flex; }
.karte-suchfeld .such-huelle > input { flex: 1; min-width: 0; }

/* Rechtes Polster, damit der Text nicht unter das Kreuz laeuft. */
.such-huelle > input { padding-right: 40px; }

.such-x {
  position: absolute; top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(246, 241, 231, .10);
  color: var(--muted); font-size: 11px; line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: pointer;
}
/* Klein zu sehen, gross zu treffen: die Flaeche geht ueber das
   Sichtbare hinaus - 38 Punkte, und damit auf dem Telefon zuverlaessig
   zu erwischen. Sie waechst nach innen, nicht ueber den Rahmen hinaus:
   der Rahmen bleibt, wie er war. */
.such-x::after { content: ''; position: absolute; inset: -8px; }
.such-x:active { background: var(--gold); color: #17130c; }

/* In der Pille auf der Karte reicht das Feld bis an deren Innenpolster -
   dort sitzt das Kreuz buendig, und der Abstand zum Rand ist derselbe
   wie der der Lupe auf der anderen Seite. */
.karte-suchfeld .such-x { right: 0; background: rgba(246, 241, 231, .14); }

/* Eine Station ohne Standort. Sie steht in der Liste, aber nicht auf der
   Karte - und sagt das auch. Leiser als die übrigen: sie ist eine
   Auskunft über eine Lücke, keine Einladung. */
.list-row.ohne-ort { opacity: .62; }
.list-row.ohne-ort .list-main p { font-style: italic; }

/* ---------- Was eine Story dazu sagt ----------
   Gericht, Lokal, Markierte - eine ruhige Zeile unter dem Bild. Das Bild
   bleibt die Hauptsache; diese Angaben erklären es, sie ersetzen es
   nicht. Nur da, wenn es sie gibt. */
.snap-angaben {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 18px 6px; text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}
/* Das Gericht ist die Ueberschrift, das Lokal die Fussnote dazu. Vorher
   standen beide nebeneinander in derselben Groesse und man las erst beim
   zweiten Blick, was wovon war. */
.snap-gericht {
  color: var(--ink); font-weight: 700; font-size: 16px; letter-spacing: .2px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.snap-lokal {
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: 13px; color: var(--gold-lt);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

/* ---------- Wer dabei war, im Bild ----------

   Unten links, klein und rund. Die Bildzahl sitzt oben rechts, also
   stehen sie sich nicht im Weg. Der dunkle Grund und der helle Rand
   halten die Initialen über jedem Foto lesbar - über einem hellen
   Teller genauso wie über einer dunklen Weinflasche.

   Die Tappfläche ist grösser als das, was man sieht: der Knopf trägt
   Innenabstand, damit ein Daumen ihn trifft, ohne dass der Kreis
   deswegen wachsen muss. */
.bild-begleit {
  position: absolute; left: 8px; bottom: 8px;
  display: flex; align-items: center; gap: 4px;
  padding: 4px; margin: -4px;            /* grössere Fläche, gleiche Optik */
  background: none; border: none; cursor: pointer;
}
.bild-begleit-kopf,
.bild-begleit-mehr {
  display: flex; align-items: center; justify-content: center;
  height: 26px; border-radius: 999px;
  background: rgba(20, 16, 11, .82);
  border: 1.5px solid rgba(255, 255, 255, .85);
  color: #f6f1e7; font-size: 10px; font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: .3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.bild-begleit-kopf { width: 26px; }
.bild-begleit-mehr {
  padding: 0 7px; background: rgba(20, 16, 11, .82);
  border-color: rgba(213, 169, 92, .8); color: var(--gold-lt);
}
.bild-begleit:active .bild-begleit-kopf,
.bild-begleit:active .bild-begleit-mehr { border-color: var(--gold); }