/* Treffen: Knopf in der Mitte der Leiste, Karte, Karten der Treffen, Unterblatt */
.leiste .mitte{width:66px;margin:0 2px}
.leiste .mitte .rund{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;
 background:linear-gradient(145deg,var(--tuerkis),var(--kobalt));box-shadow:0 8px 18px -8px color-mix(in srgb,var(--kobalt) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.3);transition:transform 1s var(--feder)}
.leiste .mitte .rund::after{content:"";position:absolute;inset:0;margin:auto;width:50px;height:50px;border-radius:50%;border:2px solid var(--tuerkis);animation:tpuls 3.2s ease-out infinite;pointer-events:none}
@keyframes tpuls{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(1.45);opacity:0}}
.leiste .mitte:active .rund{transform:scale(.88)}
.leiste .mitte .i{width:24px;height:24px}
.leiste .badge{position:absolute;top:0;right:4px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--koralle);color:#fff;font:700 11px/19px var(--font);text-align:center;box-shadow:0 0 0 2px var(--karte)}
.blob.weg{opacity:0}

.treffen-seite .s-sub{display:flex;align-items:center;gap:0}
.treffen-seite .s-sub b{color:var(--fg);font-weight:700}
.live{width:8px;height:8px;border-radius:50%;background:var(--minze);margin-right:9px;box-shadow:0 0 0 0 var(--minze);animation:live 2s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--minze) 70%,transparent)}100%{box-shadow:0 0 0 10px transparent}}

.t-karte{position:relative;isolation:isolate;border-radius:22px;overflow:hidden;transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(white,black);box-shadow:var(--schatten);background:var(--karte)}
#tKarte{height:min(300px,38vh);background:var(--fuell)}
.t-karte .leaflet-control-attribution{font-size:9px;background:color-mix(in srgb,var(--karte) 70%,transparent)}
.pin-huelle{background:none;border:0}
.pin{width:100%;height:100%;border-radius:50%;background:var(--fg3);border:2.5px solid var(--karte);box-shadow:0 3px 8px rgba(0,0,0,.25);display:grid;place-items:center;transition:transform .8s var(--feder),background .5s}
.pin.voll{background:linear-gradient(145deg,var(--tuerkis),var(--kobalt));color:#fff;font:700 14px var(--font)}
.pin.voll::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:var(--tuerkis);opacity:.25;z-index:-1;animation:tpuls 2.8s ease-out infinite}
.pin.an{transform:scale(1.25);background:linear-gradient(145deg,var(--koralle),var(--safran))}
.pin.an:not(.voll){transform:scale(1.6)}
.ort-info{position:absolute;left:10px;right:10px;bottom:10px;z-index:500;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-radius:18px;
 background:color-mix(in srgb,var(--karte) 86%,transparent);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:var(--schatten)}
.ort-info>div{flex:1;min-width:0}.ort-info small{display:block;color:var(--fg2);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ort-n{text-align:center}.ort-n b{display:block;font:700 20px/1 var(--font-d)}.ort-n small{font-size:10.5px}
.knopf{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 14px;border-radius:12px;background:var(--tinte);color:var(--auf-tinte);font-size:14px;font-weight:600;white-space:nowrap}

.vorschlag{display:flex;align-items:center;gap:14px;width:100%;margin:14px 0 16px;padding:14px 16px;border-radius:20px;color:#fff;
 background:linear-gradient(120deg,var(--tuerkis),var(--kobalt) 70%,#5B3E9B);box-shadow:0 18px 30px -18px var(--kobalt)}
.vorschlag>.i{width:38px;height:38px;padding:8px;border-radius:12px;background:rgba(255,255,255,.18);stroke-width:2.2}
.vorschlag b{display:block;font:700 17px var(--font-d)}.vorschlag small{opacity:.8;font-size:13px}

.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:2px 18px 4px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:36px;padding:0 14px;border-radius:18px;background:var(--fuell);color:var(--fg);font-size:14.5px;font-weight:500;transition:background .5s,color .5s,transform .8s var(--feder)}
.chip[aria-pressed=true]{background:var(--tinte);color:var(--auf-tinte)}
.chip span{opacity:.7}

.t-liste{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.tk{display:flex;align-items:center;gap:14px;padding:14px;border-radius:20px;background:var(--karte);box-shadow:var(--schatten);cursor:pointer;position:relative;transition:background .6s}
.tk-zeit{flex:none;width:62px;text-align:center;padding:8px 0;border-radius:14px;background:var(--fuell)}
.tk-zeit .mono{font-size:9.5px;color:var(--fg2);display:block}
.tk-zeit b{display:block;font:700 18px/1.15 var(--font-d);letter-spacing:-.02em}
.tk-zeit small{display:block;font-size:10.5px;color:var(--koralle);font-weight:600;margin-top:1px}
.tk-mitte{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tk-titel{font:600 15.5px/1.25 var(--font);letter-spacing:-.01em}
.tk-ort{display:flex;align-items:center;gap:4px;color:var(--fg2);font-size:13px}.tk-ort .i{width:14px;height:14px}
.tk-leute{display:flex;align-items:center;gap:8px;margin-top:2px;font-size:13px;color:var(--fg2)}
.tk-n{white-space:nowrap}.tk-n b{color:var(--fg);font-weight:700}
.ava{display:flex}
.ava i{width:24px;height:24px;border-radius:50%;margin-left:-7px;display:grid;place-items:center;font:700 8.5px var(--font);font-style:normal;color:#fff;background:var(--a);box-shadow:0 0 0 2px var(--karte)}
.ava i:first-child{margin-left:0}
.ava i.du{color:var(--auf-tinte)}
.bsp{font-size:8.5px;padding:2px 6px;border-radius:6px;background:var(--fuell);color:var(--fg3);margin-left:auto}
.mit{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--tinte);color:var(--auf-tinte);transition:background .6s,transform .8s var(--feder)}
.mit .i{width:22px;height:22px;stroke-width:2.4}
.mit path{transition:stroke-dashoffset .5s var(--sanft),opacity .3s,transform .6s var(--feder);transform-origin:12px 12px}
.mit .haken{stroke-dasharray:22;stroke-dashoffset:22}
.dabei .mit{background:var(--minze);color:#fff}
.dabei .mit .plus-h,.dabei .mit .plus-v{opacity:0;transform:rotate(90deg) scale(.4)}
.dabei .mit .haken{stroke-dashoffset:0;transition-delay:.12s}
.dabei{background:color-mix(in srgb,var(--minze) 9%,var(--karte))}
.tk.neu{animation:neu 2.4s var(--sanft)}
@keyframes neu{0%,30%{box-shadow:0 0 0 3px var(--safran),var(--schatten)}}
.treffen-seite .fuss{font-size:12.5px;color:var(--fg2);text-align:center;margin:22px 8px 90px}

/* Unterblatt */
.blatt-hg{position:fixed;inset:0;z-index:80;background:rgba(10,14,22,.35)}
.blatt{position:fixed;left:0;right:0;bottom:0;z-index:81;max-height:86vh;overflow-y:auto;overscroll-behavior:contain;max-width:640px;margin:0 auto;
 padding:8px 18px calc(18px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;background:var(--bg);box-shadow:0 -20px 50px -20px rgba(0,0,0,.4)}
.griff{display:block;width:38px;height:5px;border-radius:3px;background:var(--fg3);opacity:.5;margin:2px auto 10px}
.blatt h2{font:700 24px var(--font-d);letter-spacing:-.03em;margin:0 0 4px}
.blatt h3{font:500 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--fg2);margin:14px 0 8px}
.blatt .chips+.chips{margin-top:6px}
.titel-feld{width:100%;height:46px;margin-top:10px;padding:0 14px;border:0;border-radius:14px;background:var(--karte);box-shadow:var(--schatten);font:inherit;font-size:16px;color:var(--fg);outline:none}
.los{width:100%;height:54px;margin-top:20px;border-radius:18px;text-align:center;font-weight:700;font-size:16.5px;color:#fff;background:linear-gradient(120deg,var(--tuerkis),var(--kobalt));transition:opacity .4s,filter .4s}
.los:disabled{opacity:.45;filter:grayscale(.6)}
.bewegt .pin.voll::before{animation:none;opacity:0}
.bewegt .ort-info{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--karte)}
.bewegt .pin{transition:none}
@media (prefers-reduced-motion:reduce){.leiste .mitte .rund::after,.pin.voll::before,.live{animation:none}}
button.bsp{cursor:pointer;color:var(--fg2)}button.bsp:disabled{opacity:.6}
.tk.lade{height:96px;cursor:default;background:linear-gradient(100deg,var(--karte) 40%,var(--fuell) 50%,var(--karte) 60%) 0 0/300% 100%;animation:lade 1.6s linear infinite}
@keyframes lade{to{background-position:-150% 0}}