/* Erlebnis-App im Web (Masterprint 16d, 10.10.2026): «online kennenlernen, offline erleben».
   Nur Variablen aus meeyo.css (--nacht, --pflaume, --pflaume-hell, --linie, --milch, --nebel, --korall, --violett, --verlauf, --gelb,
   --korall-schrift, --minze-schrift, --radius, --radius-klein) — dann stimmen Hell und Dunkel von selbst. Schrift und Logo bleiben,
   wie sie sind. Die Story-Ansicht ist absichtlich immer dunkel (Fotos und Videos wirken auf Schwarz, wie bei allen Story-Apps). */

/* ---------- Kopf: ＋, Glocke, MEE-Gesicht oben rechts ---------- */
.ew-kopf { display: flex; align-items: center; gap: 8px; margin-left: 8px }
.ew-kopf-plus { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--verlauf); color: #fff; font-size: 1.25rem; line-height: 1; display: grid; place-items: center }
.ew-glocke { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linie); display: grid; place-items: center; text-decoration: none; font-size: 1rem }
.ew-glocke-zahl { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--korall); color: #fff; font: 800 .7rem/18px "Jakarta", system-ui, sans-serif; font-style: normal; text-align: center }
.ew-mee-gesicht { text-decoration: none; display: block } .ew-mee-gesicht .mee-avatar { width: 36px; height: 36px; flex-basis: 36px; font-size: .95rem; box-shadow: 0 6px 18px rgba(255,79,122,.3) }
@media (max-width: 760px) { .ew-kopf-plus { display: none } .kopf { padding: 10px 14px } }

/* ---------- Leiste unten: Entdecken · Räume · ＋ · Chats · Ich ---------- */
@media (max-width: 760px) {
  .ew-leiste { grid-template-columns: repeat(5, 1fr) !important; align-items: end }
  .ew-leiste.mit-promoter { grid-template-columns: repeat(6, 1fr) !important }
  .ew-leiste-plus { justify-self: center; align-self: center; width: 52px; height: 40px; padding: 0; border-radius: 16px; background: var(--verlauf); color: #fff; font-size: 1.5rem; line-height: 1;
    display: grid; place-items: center; box-shadow: 0 8px 22px rgba(255,79,122,.35) }
  html.ew-an .mee-knopf-schwebend { display: none }   /* MEE sitzt oben rechts als Gesicht — unten ist die Leiste */
}
.ew-leiste-plus { display: none } @media (max-width: 760px) { .ew-leiste .ew-leiste-plus { display: grid } }
html.ew-story-offen .tab-leiste, html.ew-story-offen .mee-knopf-schwebend, html.ew-story-offen .nach-oben { display: none !important }

/* ---------- ＋-Blatt ---------- */
.ew-blatt-schatten { position: fixed; inset: 0; z-index: 70; background: rgba(22,10,28,.6); display: flex; align-items: flex-end; justify-content: center }
.ew-blatt { width: 100%; max-width: 520px; background: var(--pflaume); border-radius: 24px 24px 0 0; padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 50px rgba(0,0,0,.35); animation: ew-hoch .22s ease-out }
@media (min-width: 761px) { .ew-blatt-schatten { align-items: center } .ew-blatt { border-radius: 24px } }
@keyframes ew-hoch { from { transform: translateY(30px); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .ew-blatt { animation: none } }
.ew-blatt-griff { width: 44px; height: 5px; border-radius: 3px; background: var(--linie); margin: 0 auto 10px }
.ew-blatt h2 { margin: 6px 0 12px; font-size: 1.2rem }
.ew-plus-wahl { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: var(--radius); background: var(--pflaume-hell); text-decoration: none; margin: 8px 0; border: 1px solid transparent }
.ew-plus-wahl:hover, .ew-plus-wahl:focus-visible { border-color: var(--violett) }
.ew-plus-wahl b { display: block; font-size: 1.05rem } .ew-plus-wahl small { color: var(--nebel); font-size: .88rem }
.ew-plus-sym { flex: 0 0 46px; height: 46px; border-radius: 14px; background: var(--verlauf); color: #fff; display: grid; place-items: center; font-size: 1.35rem }

/* ---------- kleiner Dialog ---------- */
.ew-dialog { z-index: 90 } .ew-dialog-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }

/* ---------- Seiten ---------- */
.ew-seite .inhalt { padding-top: 12px }
.ew-seitenkopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap } .ew-seitenkopf h1, .ew-seitenkopf h2 { margin: .3em 0 }
.ew-zurueck-link { display: inline-block; margin-bottom: 8px; text-decoration: none }
.ew-leitsatz { margin: 0 0 4px; font-weight: 800; letter-spacing: .02em; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent }
.ew-pille { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--pflaume-hell); color: var(--milch); font-size: .78rem; font-weight: 700; white-space: nowrap }
.ew-warnung { border-left: 3px solid var(--gelb); padding: 6px 10px; background: var(--pflaume-hell); border-radius: var(--radius-klein) }
.ew-status { font-weight: 700; color: var(--korall-schrift) } .ew-status.rot { color: var(--rot) }
.leer-hinweis { padding: 10px 0 }

/* ---------- Story-Ring ---------- */
.ew-entdecken-kopf { margin: 0 0 10px }
.ew-ring { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none } .ew-ring::-webkit-scrollbar { display: none }
.ew-ring-person { flex: 0 0 auto; background: transparent; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 72px; color: var(--milch) }
.ew-ring-kreis { position: relative; width: 66px; height: 66px; border-radius: 50%; padding: 3px; background: var(--linie); display: grid; place-items: center }
.ew-ring-person.neu .ew-ring-kreis, .ew-ring-person.ich.hat .ew-ring-kreis { background: var(--verlauf) }
.ew-ring-initiale { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--pflaume-hell); border: 3px solid var(--nacht); font-weight: 800; font-size: 1.15rem }
.ew-ring-plus { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--korall); color: #fff; font-style: normal; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--nacht); font-size: .9rem }
.ew-ring-name { font-size: .74rem; font-weight: 600; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nebel) }
.ew-ring-person.neu .ew-ring-name { color: var(--milch) }

/* ---------- «Was möchtest du?» oben in Entdecken ---------- */
.ew-absicht-zeile { display: flex; gap: 10px; align-items: center; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none }
.ew-absicht-knopf { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--violett); text-decoration: none; font-weight: 700; font-size: .9rem; color: var(--milch) }
.ew-absicht-filter { display: flex; gap: 6px; flex-wrap: nowrap } .ew-absicht-filter .chip { white-space: nowrap }

/* ---------- Event-Karte im Stapel ---------- */
.ew-event-flaeche { position: relative; border-radius: var(--radius); padding: 22px 20px; color: #fff; overflow: hidden;
  background: linear-gradient(160deg, var(--violett), var(--korall)); }
.ew-event-flaeche.ew-art-tour { background: linear-gradient(160deg, #2a6f97, var(--violett)) }
.ew-event-flaeche.ew-art-dating_treffen { background: linear-gradient(160deg, var(--korall), #b02a6a) }
.ew-event-flaeche.ew-art-meeyo_treffen { background: linear-gradient(160deg, #160a1c, var(--violett)) }
.ew-event-karte .ew-event-flaeche { position: absolute; inset: 0; border-radius: inherit; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 22px }
.ew-event-sym { font-size: 3.4rem; line-height: 1; margin-bottom: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.25)) }
.ew-event-pille { align-self: flex-start; display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.2); font-weight: 700; font-size: .8rem; margin: 10px 0 8px }
.ew-event-titel, .ew-erlebnis-kopf h1 { font-size: 1.7rem; margin: 0 0 8px; color: #fff }
.ew-event-zeile { margin: 3px 0; font-weight: 600 } .ew-event-gast { color: rgba(255,255,255,.85) !important }
.ew-event-tipp { margin-top: 14px; font-weight: 800; font-size: .9rem; opacity: .9 }
.ew-erlebnis-kopf { margin: 4px 0 14px } .ew-erlebnis-kopf .ew-event-sym { display: block; margin-bottom: 4px }
.ew-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 80; display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-radius: 999px;
  background: var(--pflaume); border: 1px solid var(--violett); box-shadow: 0 14px 40px rgba(0,0,0,.35); font-weight: 700; max-width: calc(100% - 32px) }
.ew-toast a { color: var(--korall-schrift) }

/* ---------- Raum-Kontakte bei den Chats ---------- */
.ew-raum-kontakte { margin-top: 10px }
.ew-kontakt-initiale { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--verlauf); color: #fff; display: grid; place-items: center; font-weight: 800 }

/* ---------- «Was möchtest du?» ---------- */
.ew-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 }
@media (min-width: 600px) { .ew-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
.ew-kachel { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 16px; min-height: 132px; border-radius: 18px;
  background: var(--pflaume); color: var(--milch); border: 2px solid var(--linie); font-weight: 400 }
.ew-kachel b { font-size: 1.05rem; font-weight: 800 } .ew-kachel small { color: var(--nebel); font-size: .82rem; line-height: 1.35 }
.ew-kachel-sym { font-size: 1.9rem; line-height: 1; margin-bottom: 6px }
.ew-kachel-haken { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; display: none; place-items: center; background: var(--verlauf); color: #fff; font-style: normal; font-weight: 800 }
.ew-kachel.an { border-color: var(--korall); background: var(--pflaume-hell); box-shadow: 0 10px 28px rgba(255,79,122,.18) } .ew-kachel.an .ew-kachel-haken { display: grid }
.ew-k-mehr { border-style: dashed }
.ew-nachfrage { margin: 14px 0 20px } .ew-nachfrage .mee-blase { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px }
.ew-nachfrage .chips { display: flex; flex-wrap: wrap; gap: 8px } .chip.ew-geschuetzt { border-style: dashed }
.ew-nicht-beigetreten ul { margin: 4px 0 0; padding-left: 18px }

/* ---------- Benachrichtigungen ---------- */
.ew-ben-liste { list-style: none; padding: 0; margin: 10px 0 }
.ew-ben-zeile { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius); background: var(--pflaume); text-decoration: none; margin: 8px 0 }
.ew-ben.neu .ew-ben-zeile { border-left: 4px solid var(--korall) }
.ew-ben-zeile b { display: block; font-weight: 600 } .ew-ben-zeile small { color: var(--nebel); font-size: .82rem }
.ew-ben-sym { flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--pflaume-hell); display: grid; place-items: center }

/* ---------- Formulare: Art-Wahl ---------- */
.ew-art-wahl { border: 0; padding: 0; margin: 0; display: grid; gap: 10px } .ew-art-wahl legend { font-weight: 600; margin-bottom: 8px; padding: 0 }
.ew-radio { display: flex !important; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--pflaume); cursor: pointer; font-weight: 400 }
.ew-radio input { width: auto; margin: 4px 0 0 } .ew-radio b { display: block } .ew-radio small { color: var(--nebel) }
.ew-radio:has(input:checked) { border-color: var(--korall); background: var(--pflaume-hell) }
.ew-art-kacheln { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) }
.ew-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }

/* ---------- Räume: meine Räume ---------- */
.ew-meine-raeume { margin: 8px 0 22px }
.ew-raum-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 10px 0 }
.ew-raum-kachel { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius); background: var(--pflaume); border: 1px solid var(--linie); text-decoration: none }
.ew-raum-kachel:hover, .ew-raum-kachel:focus-visible { border-color: var(--violett) }
.ew-raum-kachel b { display: block; font-size: .98rem } .ew-raum-kachel small { color: var(--nebel); font-size: .8rem; line-height: 1.3; display: block }
.ew-raum-kachel-sym { flex: 0 0 42px; height: 42px; border-radius: 12px; background: var(--pflaume-hell); display: grid; place-items: center; font-size: 1.2rem }
.ew-raum-kachel.eigen .ew-raum-kachel-sym { background: var(--verlauf); color: #fff } .ew-raum-kachel.einladung { border-color: var(--korall) }

/* ---------- Raumseite ---------- */
.ew-raum-kopf { display: flex; gap: 14px; align-items: center; margin: 4px 0 8px }
.ew-raum-sym { flex: 0 0 58px; height: 58px; border-radius: 18px; background: var(--verlauf); color: #fff; display: grid; place-items: center; font-size: 1.6rem }
.ew-raum-titel h1 { font-size: 1.6rem; margin: 0 } .ew-raum-titel p { margin: 2px 0 0 }
.ew-raum-text { color: var(--nebel); white-space: pre-line }
.ew-raum-knoepfe, .ew-erlebnis-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 14px }
.ew-reiter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 5px; border-radius: 999px; background: var(--pflaume); margin: 10px 0 14px; position: sticky; top: 0; z-index: 5 }
.ew-reiter-knopf { background: transparent; color: var(--nebel); padding: 9px 4px; font-size: .9rem } .ew-reiter-knopf.an { background: var(--verlauf); color: #fff }
.ew-chat-verlauf { max-height: 52vh; min-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 2px }
.ew-chat-nachricht { position: relative; align-self: flex-start; max-width: 82%; padding: 9px 34px 9px 13px; border-radius: 16px 16px 16px 4px; background: var(--pflaume-hell) }
.ew-chat-nachricht.ich { align-self: flex-end; background: var(--verlauf); color: #fff; border-radius: 16px 16px 4px 16px; padding-right: 13px }
.ew-chat-nachricht b { font-size: .78rem; display: block } .ew-chat-nachricht p { margin: 2px 0; white-space: pre-wrap; word-break: break-word } .ew-chat-nachricht .klein { font-size: .7rem }
.ew-chat-nachricht.ich .klein { color: rgba(255,255,255,.8) }
.ew-chat-melden { position: absolute; top: 4px; right: 4px; padding: 2px 8px; background: transparent; color: var(--nebel); font-size: .9rem }
.ew-chat-leer { text-align: center; margin: auto }
.ew-event-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px }
.ew-event-zeile-karte { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius); background: var(--pflaume); border: 1px solid var(--linie); text-decoration: none }
.ew-event-zeile-karte.vorbei { opacity: .65 }
.ew-event-zeile-sym { flex: 0 0 44px; height: 44px; border-radius: 12px; background: var(--verlauf); display: grid; place-items: center; font-size: 1.3rem }
.ew-event-zeile-text { flex: 1; min-width: 0 } .ew-event-zeile-text b { display: block } .ew-event-zeile-text small { display: block; color: var(--nebel); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ew-leute, .ew-einladbar, .ew-partner-liste { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px }
.ew-person, .ew-partner { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius); background: var(--pflaume) }
.ew-person-bild { flex: 0 0 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--verlauf); color: #fff; display: grid; place-items: center; font-weight: 800 }
.ew-person-bild img { width: 100%; height: 100%; object-fit: cover }
.ew-person-text, .ew-partner > span:first-child { flex: 1; min-width: 0 } .ew-person-text b, .ew-partner b { display: block } .ew-person-text small, .ew-partner small { color: var(--nebel); font-size: .8rem }
.ew-person-knoepfe, .ew-partner-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end }
.ew-einladen-karte { max-height: 90vh; overflow-y: auto; text-align: center } .ew-einladen-karte .ew-person { text-align: left }
.ew-einladen-karte img { display: block; margin: 8px auto; background: #fff; border-radius: 12px; padding: 6px }
.ew-link { word-break: break-all; font-size: .85rem; background: var(--nacht); padding: 8px 10px; border-radius: var(--radius-klein) }

/* ---------- Erlebnis-Seite ---------- */
.ew-halte { margin: 6px 0; padding-left: 22px } .ew-halte li { margin: 4px 0 }
.ew-sicherheit summary { cursor: pointer; font-weight: 700 }
.ew-sterne { display: flex; gap: 4px; margin: 6px 0 10px }
.ew-stern { background: transparent; color: var(--linie); font-size: 1.9rem; padding: 0 4px; line-height: 1 } .ew-stern.an { color: var(--gelb) }
.klein-sterne .ew-stern { font-size: 1.3rem }
.ew-partner-stern { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap }
.ew-zeigen { display: flex !important; gap: 8px; align-items: center; font-weight: 400 } .ew-zeigen input { width: auto; margin: 0 }

/* ---------- Planer ---------- */
.ew-schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; padding: 0; margin: 10px 0 18px; counter-reset: s }
.ew-schritte li { counter-increment: s; text-align: center; padding: 8px 4px; border-radius: 999px; background: var(--pflaume); color: var(--nebel); font-weight: 700; font-size: .9rem; cursor: pointer }
.ew-schritte li::before { content: counter(s) " · " }
.ew-schritte li.an { background: var(--verlauf); color: #fff } .ew-schritte li.fertig { color: var(--minze-schrift) }
.ew-ortsuche { display: flex; gap: 8px } .ew-ortsuche input { flex: 1; min-width: 0 }
.ew-planer-knoepfe { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap }
.ew-zusammenfassung p { margin: 3px 0 }
.chips { display: flex; flex-wrap: wrap; gap: 8px }

/* ---------- Story-Ansicht ---------- */
.ew-story { position: fixed; inset: 0; z-index: 100; background: #000; display: grid; place-items: center }
.ew-story-buehne { position: relative; width: min(100vw, calc(100vh * 9 / 16)); height: min(100vh, calc(100vw * 16 / 9)); max-height: 100vh; background: #111; overflow: hidden; color: #fff }
@media (min-width: 761px) { .ew-story-buehne { border-radius: 18px; height: min(94vh, calc(100vw * 16 / 9)); width: min(100vw, calc(94vh * 9 / 16)) } }
.ew-story-medien, .ew-story-medien img, .ew-story-medien video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.ew-story-leer { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; text-align: center }
.ew-story-balken { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 4; display: flex; gap: 4px }
.ew-story-balken i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; position: relative }
.ew-story-balken i.voll { background: #fff }
.ew-story-balken i.jetzt::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: ew-balken 6s linear forwards }
@keyframes ew-balken { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@media (prefers-reduced-motion: reduce) { .ew-story-balken i.jetzt::after { animation: none; transform: none } }
.ew-story-kopf { position: absolute; top: 20px; left: 12px; right: 8px; z-index: 5; display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 6px rgba(0,0,0,.6) }
.ew-story-kopf .klein { color: rgba(255,255,255,.8) }
.ew-story-werkzeug { margin-left: auto; display: flex; gap: 4px }
.ew-story-werkzeug button { background: rgba(0,0,0,.25); color: #fff; padding: 6px 12px; font-size: 1.05rem }
.ew-story-tipp { position: absolute; top: 70px; bottom: 120px; width: 35%; z-index: 2; background: transparent; padding: 0; border-radius: 0 }
.ew-story-tipp.links { left: 0 } .ew-story-tipp.rechts { right: 0; width: 65% }
.ew-story-ebene { position: absolute; inset: 0; z-index: 3; pointer-events: none }
.ew-story-ebene > * { pointer-events: auto }
.ew-ov-text { position: absolute; transform: translate(-50%, -50%); font-weight: 800; text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,.55); max-width: 90%; line-height: 1.15; white-space: pre-wrap; pointer-events: none }
.ew-ov-sticker { position: absolute; transform: translate(-50%, -50%); background: rgba(255,255,255,.94); color: #1b1024; border-radius: 16px; padding: 10px 14px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.3); max-width: 80%; text-align: center }
.ew-ov-sticker b { display: block; margin-bottom: 6px }
.ew-ov-sticker a { color: #1b1024; text-decoration: none }
.ew-st-komm_mit { background: linear-gradient(100deg, #ff4f7a, #8b3dff); color: #fff } .ew-st-komm_mit a { color: #fff }
.ew-umfrage-option { display: block; width: 100%; margin: 5px 0 0; padding: 8px 12px; border-radius: 999px; background: #f1ebf6; color: #1b1024; font-weight: 700; font-style: normal; border: 0 }
.ew-umfrage-option.an { background: linear-gradient(100deg, #ff4f7a, #8b3dff); color: #fff } .ew-umfrage-option:disabled { opacity: 1 }
.ew-umfrage-stand { font-size: .8rem; margin: 6px 0 0; color: #5a4a66 }
.ew-frage-form { display: flex; gap: 6px } .ew-frage-form input { padding: 8px 10px; background: #f1ebf6; color: #1b1024; border: 0 } .ew-frage-form button { padding: 8px 12px }
.ew-ov-markiert { position: absolute; left: 14px; background: rgba(0,0,0,.45); padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700 }
.ew-story-mehr-menue { position: absolute; top: 58px; right: 10px; z-index: 6; background: #221230; border-radius: 14px; padding: 6px; display: grid; gap: 4px; min-width: 170px }
.ew-story-mehr-menue button { background: transparent; color: #fff; text-align: left; padding: 10px 12px; border-radius: 10px } .ew-story-mehr-menue button:hover { background: rgba(255,255,255,.08) }
.ew-story-fuss { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); display: grid; gap: 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.6)) }
.ew-story-reaktionen { display: flex; gap: 6px; justify-content: center } .ew-story-reaktionen button { background: rgba(255,255,255,.14); padding: 8px 12px; font-size: 1.2rem; color: #fff } .ew-story-reaktionen button.an { background: rgba(255,79,122,.7) }
.ew-story-antwort { display: flex; gap: 8px } .ew-story-antwort input { flex: 1; min-width: 0; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 999px }
.ew-story-antwort input::placeholder { color: rgba(255,255,255,.8) } .ew-story-antwort button { padding: 10px 16px }
.ew-story-knopf { background: rgba(255,255,255,.16); color: #fff; justify-self: start } .ew-story-knopf.an { background: rgba(255,200,87,.85); color: #1b1024 }
.ew-story-fuss:has(.ew-story-knopf) { grid-template-columns: auto auto; justify-content: space-between }
.ew-story-status { grid-column: 1 / -1; margin: 0; font-size: .85rem; background: rgba(0,0,0,.45); padding: 6px 10px; border-radius: 10px }

/* ---------- Story-Editor ---------- */
.ew-quelle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 }
.ew-quelle-knopf { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 150px; border-radius: 20px; background: var(--pflaume); border: 2px dashed var(--linie); cursor: pointer; text-align: center }
.ew-quelle-knopf span { font-size: 2.2rem } .ew-quelle-knopf:hover { border-color: var(--violett) }
.ew-editor-buehne { position: relative; height: min(60vh, 640px); max-width: 100%; aspect-ratio: 9 / 16; user-select: none; -webkit-user-select: none; margin: 0 auto 12px; border-radius: 18px; overflow: hidden; background: #000; touch-action: none }
.ew-editor-buehne canvas, .ew-editor-buehne video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
#ew-zeichnung { z-index: 2 } body.ew-malen #ew-zeichnung { z-index: 4; cursor: crosshair }
.ew-editor-ebene { z-index: 3 } body.ew-malen .ew-editor-ebene > * { pointer-events: none }
.ew-editor-ebene .ziehbar { cursor: grab; pointer-events: auto; touch-action: none }
.ew-editor-ebene .ew-ov-text { pointer-events: auto }
.ew-ov-weg { position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; padding: 0; border-radius: 50%; background: #160a1c; color: #fff; font-size: .7rem; display: grid; place-items: center }
.ew-werkzeuge { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px }
.ew-werkzeug { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 62px; padding: 8px 10px; border-radius: 14px; background: var(--pflaume); color: var(--milch); font-size: 1.15rem }
.ew-werkzeug small { font-size: .7rem; font-weight: 700; color: var(--nebel) } .ew-werkzeug.an { background: var(--verlauf); color: #fff } .ew-werkzeug.an small { color: #fff }
.ew-werkzeug-blatt { background: var(--pflaume); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 12px }
.ew-farben { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap }
.ew-farbe { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid var(--linie) } .ew-farbe.an { outline: 3px solid var(--korall); outline-offset: 2px }
.ew-sticker-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px }
.ew-sticker-zeile { display: grid; gap: 8px; margin: 8px 0 }
.ew-filter-wahl { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px }
.ew-filter { display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent; color: var(--milch); padding: 4px; font-size: .78rem }
.ew-filter i { width: 54px; height: 54px; border-radius: 12px; background: var(--verlauf); display: block; border: 2px solid transparent } .ew-filter.an i { border-color: var(--milch) }
.ew-editor-knoepfe { display: flex; justify-content: space-between; gap: 10px }

/* ---------- Konto: Push ---------- */
.ew-push-liste { display: grid; gap: 6px; margin: 10px 0 } .ew-push-zeile { font-weight: 400 }

@media (max-width: 420px) { .ew-kachel { min-height: 118px; padding: 14px } .ew-reiter-knopf { font-size: .82rem } .ew-quelle-knopf { min-height: 120px } }

/* button[type=button] in meeyo.css (0,1,1) faerbt jeden Knopf «pflaume-hell» — eigene Knoepfe brauchen die gleiche Staerke */
.ew-kopf-plus[type=button], .ew-leiste-plus[type=button] { background: var(--verlauf); color: #fff }
.ew-ring-person[type=button], .ew-reiter-knopf[type=button], .ew-filter[type=button], .ew-story-tipp[type=button] { background: transparent }
.ew-ring-person[type=button] { color: var(--milch) } .ew-reiter-knopf[type=button] { color: var(--nebel) } .ew-reiter-knopf.an[type=button] { background: var(--verlauf); color: #fff }
.ew-chat-melden[type=button] { background: transparent; color: var(--nebel) } .ew-chat-nachricht.ich .ew-chat-melden[type=button] { color: #fff }
.ew-stern[type=button] { background: transparent; color: var(--linie) } .ew-stern.an[type=button] { color: var(--gelb) }
.ew-kachel[type=button] { background: var(--pflaume); color: var(--milch) } .ew-kachel.an[type=button] { background: var(--pflaume-hell) }
.ew-werkzeug[type=button] { background: var(--pflaume); color: var(--milch) } .ew-werkzeug.an[type=button] { background: var(--verlauf); color: #fff }
.ew-umfrage-option[type=button] { background: #f1ebf6; color: #1b1024 } .ew-umfrage-option.an[type=button] { background: linear-gradient(100deg, #ff4f7a, #8b3dff); color: #fff }
.ew-ov-weg[type=button] { background: #160a1c; color: #fff }
.ew-story-knopf[type=button] { background: rgba(255,255,255,.16); color: #fff } .ew-story-knopf.an[type=button] { background: rgba(255,200,87,.85); color: #1b1024 }
.ew-story-werkzeug button[type=button] { background: rgba(0,0,0,.3); color: #fff }
.ew-filter[type=button] { color: var(--milch) }
@media (max-width: 760px) { html.ew-an #nav-logout { display: none !important } }   /* Abmelden steht unter Ich → Konto; oben bleiben Marke, Glocke, MEE */
.ew-story, .ew-editor-ebene { user-select: none; -webkit-user-select: none }
.ew-partner { flex-wrap: wrap } .ew-partner-knoepfe { width: 100%; justify-content: flex-start }
@media (min-width: 600px) { .ew-partner { flex-wrap: nowrap } .ew-partner-knoepfe { width: auto; justify-content: flex-end } }
.ew-halte-planer { margin-top: 10px } .ew-halte-planer h3 { margin: 6px 0 }
@media (max-width: 760px) { .ew-story-buehne { width: 100vw; height: 100vh; height: 100dvh; max-height: none } }   /* am Handy randlos, wie jede Story-App */
.ew-seite .karte > h2:first-child, .ew-seite .karte > h3:first-child { margin-top: 0 }
.ew-person { flex-wrap: wrap } .ew-person-text { flex: 1 1 120px }
.ew-stern[type=button] { color: var(--nebel); opacity: .45 } .ew-stern.an[type=button] { color: var(--gelb); opacity: 1 }
.ew-push > h2:first-child, .ew-meine-raeume h2 { margin-top: 0 }
.ew-seite .chat-form { grid-template-columns: 1fr 46px; padding: 10px 0 }
.ew-haupt[type=button], .klein-knopf.ew-haupt[type=button] { background: var(--verlauf); color: #fff }
.ew-themen-chips .chip { text-decoration: none; display: inline-block }
.ew-radio[hidden], .ew-zeigen[hidden], .ew-quelle-knopf[hidden] { display: none !important }   /* «display: … !important» oben darf [hidden] nicht schlagen */
.ew-themen-chips .chip { border-radius: 999px }

/* 10.10.: «Heute noch Lust» im Raum Neigungen — ruhig, dunkel getoent, kein Blickfang fuer Schulterblicke */
.ew-heute { display: grid; gap: 10px; margin-block: 12px }
.ew-heute h2 { margin: 0; font-size: 1.15rem }
.ew-heute-wahl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.ew-heute-sicher { color: var(--nebel) }

/* 10.10.: Leute im Raum — Liste | In der Nähe (Umkreis nur dieses Raums, gezeichnet mit static/radar.js) */
.ew-leute-wahl { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--pflaume); margin: 0 0 10px }
.ew-wahl-knopf[type=button] { background: transparent; color: var(--nebel); padding: 7px 16px; font-size: .86rem; border-radius: 999px }
.ew-wahl-knopf.an[type=button] { background: var(--verlauf); color: #fff }
.ew-umkreis { text-align: center } .ew-umkreis > p { text-align: left; margin-top: 0 }
.ew-umkreis-hinweis { text-align: left; margin: 6px 0 } .ew-umkreis-hinweis .knopf { margin-top: 6px }
.ew-umkreis .radar { max-width: 100% }
/* 10.10. Raum-Regeln («Tritt lieber diesem bei») + Freunde im Konto */
.ew-aehnlich-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px }
.ew-person-knoepfe a.klein-knopf { display: inline-flex; align-items: center; border-radius: 999px; text-decoration: none }
.fs-karte h3 { margin: 18px 0 6px } .fs-karte h3 .klein { color: var(--nebel); font-weight: 600 }

/* 11.10. Tour-Karte (erlebnis_tour.js): Karte, Linie, Pins, Halte mit Tag/Übernachtung, Live-Standort */
.tk-karte { height: 320px; border-radius: var(--radius); overflow: hidden; margin: 8px 0; background: var(--pflaume) }
@media (min-width: 700px) { .tk-karte { height: 420px } }
.tk-linie { stroke: var(--korall); stroke-linecap: round; stroke-linejoin: round }
.tk-luftlinie { stroke-dasharray: 8 8; stroke: var(--gelb) }
.tk-grob { stroke-opacity: .55 }
.tk-pin-huelle { background: none; border: 0 }
.tk-pin { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 4px; border-radius: 999px; font-weight: 800; font-size: .8rem; line-height: 1;
  color: #fff; background: var(--violett); border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.35) }
.tk-pin.tk-start, .tk-pin.tk-ziel { background: var(--korall) } .tk-pin.tk-nacht { background: var(--nacht) } .tk-pin.tk-partner { background: var(--gelb); color: #222 }
.tk-pin.tk-live { background: #1e9e6a } .tk-pin.tk-ich { outline: 3px solid var(--korall) }
.tk-tippen { align-items: center }
.tk-halte { padding-left: 0; list-style: none }
.tk-halt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; border-radius: var(--radius-klein); background: var(--pflaume); margin: 4px 0 }
.tk-halt.tk-nacht { border-left: 3px solid var(--nacht) }
.tk-tag { font-size: .78rem; color: var(--nebel); min-width: 4.5em }
.tk-halt-name { flex: 1; min-width: 8em }
.tk-halt-knoepfe { display: flex; gap: 6px; align-items: center }
.tk-ziel-zeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.tk-angebot { display: block; font-style: normal; font-size: .8rem; color: var(--korall-schrift) }
.tk-etappen { margin: 6px 0; padding-left: 20px }
.tk-gpx input { display: block; margin-top: 4px }
.tk-live { margin-top: 12px; border-top: 1px solid var(--linie); padding-top: 8px }
/* 15.10.2026 Status wie WhatsApp (erlebnis.js EW.storyAnsicht): Text-Status, Bildunterschrift, halten = Pause, Reaktion fliegt, «Gesehen von» */
.ew-story-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 70px 26px 150px; text-align: center; color: #fff; font-weight: 700; line-height: 1.25; white-space: pre-wrap; overflow-wrap: anywhere }
.ew-story-unter { margin: 0; text-align: center; font-size: .95rem; line-height: 1.35; padding: 6px 10px; background: rgba(0,0,0,.45); border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; grid-column: 1 / -1 }
.ew-story-buehne.pause .ew-story-balken i.jetzt::after { animation-play-state: paused }
.ew-story-buehne.pause .ew-story-fuss, .ew-story-buehne.pause .ew-story-kopf { opacity: .25; transition: opacity .2s }
.ew-story-tipp { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: pan-y }
.ew-story-reaktionen { gap: 4px } .ew-story-reaktionen button { flex: 1 1 0; max-width: 52px; padding: 7px 0; font-size: 1.25rem; min-width: 0 }   /* 8 Reaktionen in EINER Zeile (390 px) */
.ew-story-flug { position: absolute; left: 50%; bottom: 140px; z-index: 7; font-size: 4rem; transform: translateX(-50%); animation: ew-flug 1.1s ease-out forwards; pointer-events: none }
@keyframes ew-flug { from { opacity: 0; transform: translate(-50%, 30px) scale(.6) } 30% { opacity: 1; transform: translate(-50%, 0) scale(1.15) } to { opacity: 0; transform: translate(-50%, -140px) scale(1) } }
@media (prefers-reduced-motion: reduce) { .ew-story-flug { animation: none; opacity: 0 } }
.ew-gesehen { z-index: 110 } .ew-gesehen .ew-blatt { max-height: 80vh; overflow-y: auto }
.ew-gesehen-reaktion { font-size: 1.35rem; margin-left: auto }