/* Müllheim – verspielt, warm, fürs Handy gedacht. */
:root {
  --creme: #fff6e9;
  --creme-2: #fdebd3;
  --tinte: #2b2118;
  --tinte-weich: #6b5b4e;
  --plum: #8f2d5c;
  --sonne: #ffb703;
  --koralle: #e4573d;
  --gruen: #2ea44f;
  --gelb: #f2b705;
  --rot: #e0353a;
  --weiss: #ffffff;
  --schatten: 0 10px 30px rgba(43, 33, 24, .16);
  --schatten-klein: 0 4px 14px rgba(43, 33, 24, .12);
  --radius: 22px;
  --oben: env(safe-area-inset-top, 0px);
  --unten: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--creme); color: var(--tinte);
  font-family: 'Nunito', system-ui, -apple-system, sans-serif; font-size: 16px; overscroll-behavior: none; }
body { position: fixed; inset: 0; overflow: hidden; -webkit-font-smoothing: antialiased; }
/* iOS malt den Streifen unter der Karte in der Body-Farbe: dort Kartengrau statt Creme. */
body.kartenansicht { background: #f2f1ec; }
h1, h2, h3, .kopf-titel strong, .blatt h2, .fredoka { font-family: 'Fredoka', 'Nunito', sans-serif; letter-spacing: .01em; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* --- Anmeldung -------------------------------------------------------- */
.anmeldung { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(circle at 20% 10%, #ffd7a1 0, transparent 45%), radial-gradient(circle at 90% 90%, #f7bcd0 0, transparent 40%), var(--creme); }
.anmelde-karte { width: min(360px, 100%); background: var(--weiss); border-radius: 32px; padding: 36px 28px 28px;
  box-shadow: var(--schatten); text-align: center; animation: hopser .6s cubic-bezier(.2, 1.4, .4, 1); }
.anmelde-logo { font-size: 64px; line-height: 1; margin-bottom: 8px; }
.anmelde-karte h1 { margin: 0; font-size: 40px; color: var(--plum); }
.anmelde-sub { margin: 4px 0 24px; color: var(--tinte-weich); font-weight: 600; }
.anmelde-karte input { width: 100%; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--creme-2);
  background: var(--creme); font-size: 18px; text-align: center; margin-bottom: 12px; outline: none; }
.anmelde-karte input:focus { border-color: var(--sonne); }
.knopf { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px;
  border-radius: 999px; font-weight: 800; transition: transform .15s; }
.knopf:active { transform: scale(.96); }
.knopf.primaer { width: 100%; background: var(--plum); color: var(--weiss); font-size: 18px; padding: 14px; }
.knopf.hell { background: var(--creme-2); color: var(--tinte); }
.fehler { color: var(--rot); font-weight: 700; min-height: 1.2em; margin: 10px 0 0; }
@keyframes hopser { from { transform: translateY(24px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* --- Karte und Kopf --------------------------------------------------- */
#app { position: fixed; inset: 0; }
.karte { position: absolute; inset: 0; background: #e9e2d5; }
.kopf { position: absolute; top: 0; left: 0; right: 0; padding: calc(var(--oben) + 10px) 12px 6px; pointer-events: none; z-index: 5; }
.kopf > * { pointer-events: auto; }
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kopf-titel { display: flex; align-items: center; gap: 10px; background: var(--weiss); border-radius: 999px;
  padding: 6px 16px 6px 8px; box-shadow: var(--schatten-klein); text-align: left; }
.kopf-emoji { font-size: 26px; }
.kopf-titel strong { display: block; font-size: 19px; color: var(--plum); line-height: 1.05; }
.kopf-titel small { display: block; font-size: 12px; color: var(--tinte-weich); font-weight: 700; }
.kopf-knoepfe { display: flex; gap: 8px; }
.rund { width: 44px; height: 44px; border-radius: 50%; background: var(--weiss); box-shadow: var(--schatten-klein);
  display: grid; place-items: center; font-size: 20px; line-height: 1; padding: 0; transition: transform .15s, background .15s; }
.rund:active { transform: scale(.92); }
.rund.aktiv { background: var(--sonne); }
.rund.klein { width: 36px; height: 36px; font-size: 15px; box-shadow: none; background: var(--creme-2); }
.suche { display: flex; gap: 8px; align-items: center; margin-top: 8px; background: var(--weiss); border-radius: 999px;
  padding: 6px 6px 6px 16px; box-shadow: var(--schatten-klein); }
.suche input { flex: 1; border: 0; outline: none; background: none; font-size: 16px; min-width: 0; }
/* Bis an den Bildschirmrand wischen: die Zeile ragt über die Kopf-Ränder hinaus. */
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -12px; padding: 12px 12px 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  background: var(--weiss); font-weight: 800; font-size: 14px; box-shadow: var(--schatten-klein); white-space: nowrap;
  transition: transform .15s, background .15s, color .15s; border: 2px solid transparent; }
.chip:active { transform: scale(.95); }
.chip.gewaehlt { background: var(--farbe, var(--tinte)); color: var(--weiss); }

.chip.gewaehlt .punkt { background: var(--weiss); }
.chip.filter { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; background: var(--weiss); color: var(--tinte); position: relative; }
.chip.filter .zahl { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--tinte); color: var(--weiss); font-size: 11px; line-height: 18px; text-align: center; }
.chip.filter.gesetzt { background: var(--sonne); }
.chip .punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--farbe, #999); }
.hinweis { margin-top: 6px; background: var(--sonne); color: var(--tinte); border-radius: 16px; padding: 10px 14px;
  font-weight: 700; font-size: 14px; box-shadow: var(--schatten-klein); }

.standort { position: absolute; right: 16px; bottom: max(16px, calc(var(--unten) - 8px)); width: 50px; height: 50px; border-radius: 50%; padding: 0;
  background: var(--weiss); color: var(--tinte); box-shadow: var(--schatten); display: grid; place-items: center; z-index: 4; }


/* --- Liste ------------------------------------------------------------ */
.liste { position: absolute; inset: 0; background: var(--creme); z-index: 3; display: flex; flex-direction: column;
  padding-top: calc(var(--oben) + 142px); }
.liste.mit-suche { padding-top: calc(var(--oben) + 196px); }
.liste-kopf { display: flex; justify-content: space-between; align-items: center; padding: 6px 16px; font-weight: 800;
  color: var(--tinte-weich); font-size: 14px; }
.sortierung { display: flex; background: var(--creme-2); border-radius: 999px; padding: 3px; }
.sortierung button { padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--tinte-weich); }
.sortierung button.aktiv { background: var(--weiss); color: var(--tinte); box-shadow: var(--schatten-klein); }
.liste-inhalt { flex: 1; overflow-y: auto; padding: 4px 12px calc(var(--unten) + 90px); -webkit-overflow-scrolling: touch; }
.karte-ort { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: var(--weiss);
  border-radius: 20px; padding: 12px; margin-bottom: 10px; box-shadow: var(--schatten-klein); transition: transform .15s; }
.karte-ort:active { transform: scale(.98); }
.karte-ort .bubble { flex: 0 0 auto; }
.karte-ort .text { flex: 1; min-width: 0; }
.karte-ort .name { font-weight: 800; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karte-ort .meta { color: var(--tinte-weich); font-size: 13px; font-weight: 700; display: flex; flex-wrap: wrap; height: 1.4em; overflow: hidden; line-height: 1.4; }
.karte-ort .info { white-space: nowrap; }
.karte-ort .info + .info::before { content: '·'; margin: 0 6px; opacity: .6; }
.karte-ort .rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13px; font-weight: 800; color: var(--tinte-weich); }
.liste-fuss { text-align: center; color: var(--tinte-weich); font-size: 13px; font-weight: 700; padding: 18px 12px 8px; }
.leer { text-align: center; padding: 60px 20px; color: var(--tinte-weich); font-weight: 700; }
.leer .gross { font-size: 48px; }

/* Bubble = runder Kategorie-Kreis mit Emoji, Ampel als Ring */
.bubble { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
  background: var(--farbe, #999); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85), 0 2px 8px rgba(0, 0, 0, .15); position: relative; }
.bubble .abzeichen { position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid #fff;
  display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.bubble .abzeichen svg { width: 15px; height: 15px; }
.bubble .herz { position: absolute; right: -6px; top: -6px; font-size: 16px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }

/* --- Blätter (Detail, Filter, Menü) ---------------------------------- */
.schleier { position: absolute; inset: 0; background: rgba(43, 33, 24, .25); z-index: 8; }
.blatt { position: absolute; left: 0; right: 0; bottom: 0; background: var(--weiss); border-radius: 28px 28px 0 0;
  box-shadow: 0 -10px 40px rgba(43, 33, 24, .25); z-index: 9; max-height: 72%; display: flex; flex-direction: column;
  animation: hoch .3s cubic-bezier(.2, 1, .3, 1); }
@keyframes hoch { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.griff { width: 44px; height: 5px; padding: 0; box-sizing: content-box; border-top: 12px solid transparent; border-bottom: 10px solid transparent; border-radius: 3px; background: var(--creme-2) padding-box; margin: 0 auto; flex: 0 0 auto; }
.blatt-inhalt { padding: 12px 20px calc(var(--unten) + 20px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.blatt h2 { margin: 0; font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; }
.blatt { overflow: hidden; }
.blatt h3 { margin: 22px 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinte-weich); font-family: 'Nunito'; }
.detail-kopf { display: flex; gap: 14px; align-items: flex-start; }
.detail-kopf .bubble { width: 56px; height: 56px; font-size: 26px; flex: 0 0 auto; }
.detail-meta { margin-top: 4px; color: var(--tinte-weich); font-weight: 700; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.detail-meta .kat { color: var(--farbe); font-weight: 800; padding: 0; }
.kat-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding: 10px; background: var(--creme); border-radius: 16px; }
.kat-wahl button { padding: 7px 11px; border-radius: 999px; background: var(--weiss); font-weight: 800; font-size: 13px; border: 2px solid transparent; }
.kat-wahl button.aktiv { background: var(--farbe); color: var(--weiss); }
.sterne { color: #e0930a; }
.adresse { margin: 12px 0 0; color: var(--tinte-weich); font-size: 14px; font-weight: 600; }
.geschlossen-hinweis { margin-top: 12px; background: var(--creme-2); border-radius: 12px; padding: 8px 12px; font-weight: 700; font-size: 14px; }
.zeile { display: flex; gap: 10px; margin-top: 16px; }
.zeile .knopf { flex: 1; }
.ampel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ampel button { border-radius: 18px; padding: 14px 6px 12px; background: var(--creme); border: 3px solid transparent;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; font-size: 13px; color: var(--tinte-weich);
  transition: transform .15s, background .15s, border-color .15s; }
.ampel button:active { transform: scale(.94); }
.ampel button .licht { width: 36px; height: 36px; border-radius: 50%; background: #d9d0c3; transition: transform .2s; display: grid; place-items: center; }
.ampel button .licht svg { width: 24px; height: 24px; }
.ampel button[data-ampel="gruen"] .licht { background: var(--gruen); }
.ampel button[data-ampel="gelb"] .licht { background: var(--gelb); }
.ampel button[data-ampel="rot"] .licht { background: var(--rot); }
.ampel button.aktiv { background: var(--weiss); color: var(--tinte); border-color: currentColor; transform: scale(1.04); }
.ampel button.aktiv .licht { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(0, 0, 0, .06); }
.ampel button[data-ampel="gruen"].aktiv { border-color: var(--gruen); }
.ampel button[data-ampel="gelb"].aktiv { border-color: var(--gelb); }
.ampel button[data-ampel="rot"].aktiv { border-color: var(--rot); }
.merken { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 16px; background: var(--creme);
  font-weight: 800; font-size: 15px; margin-top: 10px; border: 3px solid transparent; transition: background .15s; }
.merken.aktiv { background: #ffe3ec; border-color: #ff5c8a; }
.merken.aus.aktiv { background: #ececec; border-color: #9a9a9a; }
.zeile.knapp { margin-top: 0; }
.zeile.knapp .merken { flex: 1; min-width: 0; padding: 12px 10px; font-size: 14px; white-space: nowrap; justify-content: center; }
.klein-hinweis { margin: 8px 2px 0; font-size: 13px; font-weight: 700; color: var(--tinte-weich); }
.merken .herz { font-size: 22px; }
.feld { margin-top: 10px; }
.feld label { display: block; font-weight: 800; font-size: 13px; color: var(--tinte-weich); margin-bottom: 4px; }
.feld input, .feld textarea { width: 100%; border: 2px solid var(--creme-2); background: var(--creme); border-radius: 14px; padding: 10px 12px; outline: none; font-size: 16px; }
.feld textarea { min-height: 72px; resize: vertical; }
.feld input:focus, .feld textarea:focus { border-color: var(--sonne); }
.gespeichert { text-align: right; font-size: 12px; font-weight: 800; color: var(--tinte-weich); min-height: 1.2em; margin-top: 6px; }
.gespeichert.ok { color: var(--gruen); }

.filter-gruppe { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-gruppe button { padding: 9px 14px; border-radius: 999px; background: var(--creme); font-weight: 800; font-size: 14px; border: 2px solid transparent; }
.filter-gruppe button.aktiv { background: var(--sonne); }
.filter-gruppe button .licht { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.filter-aktionen { display: flex; gap: 10px; margin-top: 24px; }
.filter-aktionen .knopf { flex: 1; }

.menue-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.menue-liste .knopf, .menue-liste a.knopf { justify-content: flex-start; background: var(--creme); text-decoration: none; padding: 14px 16px; }
.menue-info { color: var(--tinte-weich); font-size: 13px; font-weight: 700; margin-top: 16px; line-height: 1.5; }

.toast { position: absolute; left: 50%; bottom: calc(var(--unten) + 90px); transform: translateX(-50%); background: var(--tinte); color: var(--weiss);
  padding: 10px 18px; border-radius: 999px; font-weight: 800; font-size: 14px; z-index: 20; box-shadow: var(--schatten); animation: hoch .25s; }

@media (min-width: 760px) {
  .kopf { padding-left: 20px; padding-right: 20px; }
  .chips { margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
  .liste { left: auto; width: 420px; right: 0; box-shadow: var(--schatten); }
  .liste.mit-suche { padding-top: calc(var(--oben) + 196px); }
  .blatt { left: 50%; transform: translateX(-50%); width: 520px; border-radius: 28px; bottom: 20px; }
  @keyframes hoch { from { transform: translateX(-50%) translateY(40px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
}