:root {
  --grund: #ece3d6; --karte: #ffffff; --text: #1c1915; --leise: #5f574e; --linie: #cbbfae;
  --akzent: #b9501f; --akzent-text: #ffffff; --gruen: #2b7a49; --gelb: #a8700c; --rot: #b8392a;
  --blase: #e6dccd; --schatten: 0 1px 2px rgb(60 40 20 / 12%), 0 8px 24px rgb(60 40 20 / 10%);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --grund: #121418; --karte: #252931; --text: #f4f2ee; --leise: #b4afa7; --linie: #454b57;
    --akzent: #e8763f; --akzent-text: #16120e; --gruen: #5cc287; --gelb: #e8b04a; --rot: #f07a68;
    --blase: #323743; --schatten: 0 1px 3px rgb(0 0 0 / 45%); }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--grund); color: var(--text); }
body { font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; padding: 0; }
button:disabled { opacity: .45; cursor: default; }
[hidden] { display: none !important; }

#haupt { max-width: 32rem; margin: 0 auto; padding: 0 1rem 6.5rem; }
button.leise { color: var(--leise); }

.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 1.4rem; box-shadow: var(--schatten); padding: .75rem; }
button.haupt { background: var(--akzent); color: var(--akzent-text); border-radius: 999px; padding: .95rem 1.6rem;
  font-weight: 650; font-size: 1.05rem; transition: transform .1s, opacity .2s; }
button.haupt:active { transform: scale(.97); }
button.haupt.klein { padding: .6rem 1.15rem; font-size: .98rem; }
button.verweis { color: var(--akzent); font-weight: 600; font-size: .92rem; padding: .3rem 0; }
button.verweis.leise { color: var(--leise); }

/* Leiste oben: bleibt stehen, der Chat scrollt darunter */
.kopf { position: sticky; top: 0; z-index: 5; padding: max(.6rem, env(safe-area-inset-top)) 0 .6rem;
  background: linear-gradient(var(--grund) 85%, transparent); }
.leiste { display: flex; flex-direction: column; gap: .6rem; }
.zeile { display: flex; align-items: center; gap: .65rem; min-height: 2.6rem; }
.zeile + .zeile { border-top: 1px solid var(--linie); padding-top: .6rem; }
.zeile-text { flex: 1; min-width: 0; font-size: 1rem; }
.tuer-icon { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--farbe, var(--leise)) 20%, transparent); color: var(--farbe, var(--leise)); }
.tuer-icon svg { width: 1.3rem; height: 1.3rem; }
.cover { width: 2.6rem; height: 2.6rem; border-radius: .6rem; background: var(--blase) center / cover; flex: none;
  display: grid; place-items: center; color: var(--leise); }
.cover.bild span { display: none; }
.spieler-text { display: flex; flex-direction: column; }
.spieler-text strong, .spieler-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spieler-text strong { font-size: .95rem; }
.spieler-text span { color: var(--leise); font-size: .85rem; }
button.rund { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--text); color: var(--karte);
  display: grid; place-items: center; flex: none; }
button.rund.leise { background: var(--blase); color: var(--text); width: 2.3rem; height: 2.3rem; }
button.rund svg { width: 1.15rem; height: 1.15rem; transition: transform .2s; }
#aufklappen[aria-expanded="true"] svg { transform: rotate(180deg); }
.aussen { margin: 0; color: var(--leise); }
.mehr { border-top: 1px solid var(--linie); padding-top: .7rem; display: flex; flex-direction: column; gap: .6rem; }
.mehr p { margin: 0; color: var(--leise); font-size: .9rem; }
.unten { display: flex; justify-content: space-between; }
.wahl { display: flex; background: var(--blase); border-radius: 999px; padding: .2rem; }
.wahl button { flex: 1; padding: .5rem; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--leise); }
.wahl button[aria-selected="true"] { background: var(--karte); color: var(--text); box-shadow: var(--schatten); }
.wahl button.weg small { font-weight: 500; }
.laut { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.laut input { flex: 1; accent-color: var(--akzent); height: 1.6rem; }

/* Chat */
.chat { display: flex; flex-direction: column; gap: .7rem; margin-top: .4rem; }
.chat > * { scroll-margin-bottom: 6.5rem; } /* nicht hinter der Eingabezeile enden */
.blase { max-width: 88%; padding: .7rem .95rem; border-radius: 1.2rem; line-height: 1.4; }
.blase.du { align-self: flex-end; background: var(--akzent); color: var(--akzent-text); border-bottom-right-radius: .4rem; }
.blase.ich { align-self: flex-start; background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten); border-bottom-left-radius: .4rem; }
.blase.fehler { color: var(--rot); }
.pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .1rem; }
.pill { display: inline-flex; align-items: center; gap: .55rem; max-width: 100%; background: var(--karte);
  border: 1px solid var(--linie); border-radius: 999px; padding: .3rem .9rem .3rem .3rem; text-align: left;
  box-shadow: var(--schatten); transition: transform .1s, border-color .2s; }
.pill:active { transform: scale(.97); }
.pill.ohne-bild { padding-left: .9rem; }
.pill img, .pill .punkt { width: 2.3rem; height: 2.3rem; border-radius: 50%; object-fit: cover; flex: none; background: var(--blase); }
.pill .punkt { display: grid; place-items: center; font-size: 1rem; }
.pill span { display: flex; flex-direction: column; min-width: 0; }
.pill b, .pill small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill b { font-weight: 600; font-size: .92rem; }
.pill small { color: var(--leise); font-size: .78rem; }
.pill.frage { background: var(--blase); box-shadow: none; border-color: var(--linie); font-weight: 600; padding: .55rem .95rem; }
.pill.laeuft { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent); }
.tippt { display: inline-flex; gap: .3rem; }
.tippt i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--leise); animation: tippen 1s infinite; }
.tippt i:nth-child(2) { animation-delay: .15s; } .tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes tippen { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* Eingabe unten */
#eingabe { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: .5rem; align-items: center;
  max-width: 32rem; margin: 0 auto; padding: .7rem 1rem max(.7rem, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--grund) 35%); }
#frage { flex: 1; min-width: 0; border: 1px solid var(--linie); background: var(--karte); border-radius: 999px;
  padding: .85rem 1.1rem; font-size: 16px; outline: none; box-shadow: var(--schatten); }
#frage:focus { border-color: var(--akzent); }
#senden { width: 3rem; height: 3rem; border-radius: 50%; background: var(--akzent); color: var(--akzent-text);
  display: grid; place-items: center; flex: none; }
#senden svg { width: 1.3rem; height: 1.3rem; }

/* Anmelden */
.tor { min-height: 100dvh; max-width: 24rem; margin: 0 auto; padding: 2rem 1.5rem; display: flex; flex-direction: column;
  justify-content: center; text-align: center; gap: .8rem; }
.tor-icon { font-size: 3.5rem; }
.tor p { color: var(--leise); margin: 0 0 1rem; }

#meldung { position: fixed; left: 1rem; right: 1rem; top: max(1rem, env(safe-area-inset-top)); max-width: 30rem; margin: 0 auto;
  background: var(--rot); color: #fff; padding: .8rem 1rem; border-radius: 1rem; box-shadow: var(--schatten); z-index: 9; }
#meldung.gut { background: #2b7a49; }