/* ==========================================================================
   0.19.0a · Konto-Menü unten links, Profilbild, Kassentablett, Admin-Abzeichen
   ========================================================================== */
.kb.admin { background: #d7262f; color: #fff; }
.kb.leit { background: #f2c46d; color: #3b2a06; }

/* ---------- Konto-Knopf unten links (klein) ---------- */
html.mit-konto .logout { display: none; }
.side-konto { position: relative; display: block; margin: 8px 10px 4px; padding: 0; background: none; border-radius: 14px; }
.sk-btn { width: 100%; display: flex; align-items: center; gap: 9px; padding: 6px 8px 6px 6px; border: 0; border-radius: 12px; background: var(--fill); color: var(--text); font: inherit; cursor: pointer; text-align: left; transition: background .18s; }
.sk-btn:hover, .sk-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 12%, var(--fill)); }
.sk-btn .sk-t { flex: 1; min-width: 0; }
.sk-btn b { display: block; font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-ava { position: relative; display: inline-flex; }
.sk-ava .ava { box-shadow: none; }
.sk-dot { position: absolute; right: -4px; top: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #d7262f; color: #fff; font: 700 10.5px/17px var(--font); text-align: center; font-style: normal; box-shadow: 0 0 0 2px var(--bg); }
.sk-gear { display: inline-flex; color: var(--text-2); transition: transform .3s; }
.sk-btn[aria-expanded="true"] .sk-gear { transform: rotate(60deg); color: var(--accent); }

/* ---------- Menü (wie Discord: Profilkarte mit Banner, darunter Einträge) ---------- */
.km { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 60; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12); transform-origin: 50% 100%; min-width: 248px; }
.km[hidden] { display: none; }
.km.in { animation: kmIn .22s cubic-bezier(.2,.9,.25,1.15); }
@keyframes kmIn { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.km-head { position: relative; padding: 0 14px 12px; }
.km-banner { height: 54px; margin: 0 -14px; background: linear-gradient(135deg, hsl(var(--h) 55% 42%), hsl(calc(var(--h) + 40) 60% 32%)); }
.km-ava { position: relative; margin-top: -36px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; display: inline-flex; }
.km-ava .ava { box-shadow: 0 0 0 5px var(--card); }
.km-cam { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.5); color: #fff; opacity: 0; transition: opacity .18s; }
.km-ava:hover .km-cam, .km-ava:focus-visible .km-cam { opacity: 1; }
.km-name { margin-top: 6px; display: grid; gap: 3px; }
.km-name b { font-size: 16.5px; font-weight: 750; }
.km-name small { font-size: 12.5px; color: var(--text-2); }
.km-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.km-badges .kb.sonder, .km-badges .kb.neu { background: var(--accent-soft); color: var(--accent); }
.km-list { padding: 6px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--fill) 45%, var(--card)); }
.km-i { width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: 550 14px var(--font); text-decoration: none; cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.km-i > span { flex: 1; min-width: 0; display: grid; }
.km-i small { font-size: 11.5px; color: var(--text-2); font-weight: 450; }
.km-i svg { flex: none; color: var(--text-2); }
.km-i:hover { background: var(--accent); color: #fff; }
.km-i:hover svg, .km-i:hover small { color: #fff; }
.km-ls svg { color: #d7262f; }
.km-ls:hover { background: #d7262f; }
.km-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #d7262f; color: #fff; font: 700 11px/20px var(--font); font-style: normal; text-align: center; }
.km-out { color: #d7262f; }
.km-out svg { color: #d7262f; }
.km-out:hover { background: #d7262f; }
.km-sep { height: 1px; margin: 5px 8px; background: var(--line); }
.km-sw { flex: none; position: relative; width: 36px; height: 21px; border-radius: 99px; background: color-mix(in srgb, var(--text-2) 35%, transparent); transition: background .2s; }
.km-sw i { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .22s cubic-bezier(.3,1.4,.5,1); }
.km-sw.on { background: #2f9e62; }
.km-sw.on i { transform: translateX(15px); }

/* ---------- Seite „Mein Konto“ ---------- */
.konto-hero { position: relative; overflow: hidden; padding-top: 0; }
.kh-banner { height: 92px; margin: 0 -22px; background: linear-gradient(135deg, hsl(var(--h) 55% 42%), hsl(calc(var(--h) + 40) 60% 30%)); }
.kh-row { display: flex; align-items: flex-end; gap: 16px; margin-top: -48px; flex-wrap: wrap; }
.kh-ava { margin-top: 0; }
.kh-t h2 { margin: 0 0 4px; font-size: 24px; }
.kh-t p { margin: 4px 0 0; color: var(--text-2); }
.konto-hero .btn-row { margin-top: 16px; }
.kasse-tgl { width: 100%; display: flex; align-items: center; gap: 14px; border: 0; background: none; padding: 4px 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.kasse-tgl span { display: grid; gap: 3px; }
.kasse-tgl small { color: var(--text-2); font-size: 13px; line-height: 1.45; }
.kc-form.first { margin-top: 4px; padding-top: 0; border-top: 0; }
.set-konto-link .hicon { background: none; padding: 0; }

/* ---------- Kassentablett: Hinweis vor dem Abmelden ---------- */
.kasse-warn { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 9998; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 99px;
  background: #1b1b1d; color: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.35); animation: kwIn .25s cubic-bezier(.2,.9,.25,1.2); }
@keyframes kwIn { from { opacity: 0; transform: translate(-50%, 12px) scale(.95); } }
.kasse-warn svg { width: 36px; height: 36px; transform: rotate(-90deg); }
.kasse-warn circle { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 3.5; }
.kasse-warn .kw-r { stroke: #ff4a52; stroke-dasharray: 94.2; stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.kasse-warn b { position: absolute; left: 10px; width: 36px; text-align: center; font: 700 14px var(--font); }
.kasse-warn span { font-size: 14px; font-weight: 600; }
/* Konto-Knopf bleibt unten links sichtbar, auch bei langer Navigation */
.sidebar > .side-konto { position: sticky; bottom: -20px; z-index: 5; margin: 8px -6px 0; padding: 8px 6px 20px; background: linear-gradient(to top, var(--bg) 70%, transparent); border-radius: 0; }
.sidebar > .side-konto .km { bottom: calc(100% - 4px); left: 6px; right: 6px; }
.kh-t { padding-top: 56px; }
.kh-t .km-badges { margin-bottom: 2px; }
@media (max-width: 560px) { .kh-t { padding-top: 0; flex-basis: 100%; } }

/* ---------- 0.19.1a: Ortsseiten der Suchleiste (#/ort/<id>) ---------- */
.ob-go { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; color: inherit; text-decoration: none; border-radius: 14px; transition: background .18s; }
.ob-go:hover { background: var(--fill); }
.ob-go .ob-chev { transform: none !important; color: var(--accent); }
.ob-tag.seite { background: var(--accent); color: #fff; }
.ort-aufgaben { position: relative; padding: 18px 18px 14px; border-radius: 22px; background: color-mix(in srgb, var(--accent) 8%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.ort-aufgaben h2 { display: flex; align-items: center; gap: 10px; }
.ort-aufgaben h2 em { font: 700 12px var(--font); font-style: normal; padding: 2px 9px; border-radius: 99px; background: var(--accent); color: #fff; }
.ort-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.ort-auf-l { display: grid; gap: 8px; }
.ort-auf { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 15px; background: var(--card); border: 1px solid var(--line); color: inherit; text-decoration: none; animation: ortIn .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 45ms); transition: transform .18s, border-color .18s, box-shadow .18s; }
.ort-auf:hover { transform: translateX(4px); border-color: var(--accent); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 18%, transparent); }
.ort-auf > svg { color: var(--accent); flex: none; }
.ort-auf-nr { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--font); background: var(--accent-soft); color: var(--accent); }
.ort-auf-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ort-auf-t b { font-size: 15px; }
.ort-auf-t small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.ort-auf.offen .ort-auf-t small { color: var(--warn, #b7791f); }
@keyframes ortIn { from { opacity: 0; transform: translateY(8px); } }
.ort-v-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ort-v { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: border-color .18s, transform .18s; }
.ort-v:hover { border-color: var(--accent); transform: translateY(-2px); }
.ort-v > svg { color: var(--accent); flex: none; margin-top: 2px; }
.ort-v span { display: grid; gap: 2px; min-width: 0; }
.ort-v b { font-size: 14px; }
.ort-v small { font-size: 12px; color: var(--text-2); line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .ort-auf { animation: none; } }