/* ==========================================================================
   PiepPiep Messenger – Oberfläche  v1.7.0
   Designs: "rot" (Rot/Schwarz, Standard) und "hell" (Rot/Weiß)
   ========================================================================== */

:root, [data-design="rot"] {
  --desktop: #09090b;
  --desktop-muster: rgba(200, 16, 46, .08);
  --chrome-a: #34343a;
  --chrome-b: #202024;
  --chrome-linie: #0c0c0e;
  --chrome-text: #d6d6dc;
  --chrome-inaktiv: #7d7d86;
  --ampel-aus: #4a4a52;
  --rahmen: #050506;
  --band-hell: #ff4a62;
  --band-a: #d4142f;
  --band-b: #7c0918;
  --kopf-a: #26262b;
  --kopf-b: #1b1b1f;
  --panel: #131316;
  --panel-2: #18181b;
  --linie: #2c2c32;
  --linie-stark: #3c3c44;
  --zeilen-linie: rgba(255, 255, 255, .045);
  --gruppe-a: #2a2a30;
  --gruppe-b: #202025;
  --gruppe-text: #b9b9c1;
  --tab-a: #303036;
  --tab-b: #222227;
  --text: #ececf0;
  --muted: #8b8b95;
  --akzent: #ef3651;
  --akzent-hell: #ff5a70;
  --hover: rgba(239, 54, 81, .12);
  --auswahl: rgba(239, 54, 81, .24);
  --blase: #232328;
  --blase-rand: #3a3a42;
  --avatar-rand: rgba(255, 255, 255, .12);
  --info-bg: #2a0e14;
  --info-text: #ff8d9e;
  --verlauf-bg: #0f0f12;
  --karte: #1c1c20;
  --karte-rand: #2d2d33;
  --eingabe: #0d0d10;
  --eingabe-rand: #3a3a42;
  --eingabe-leiste: #1a1a1e;
  --band-knopf-bg: rgba(0, 0, 0, .35);
  --band-knopf-text: #fff;
  --schatten: 0 18px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03);
  color-scheme: dark;
}

[data-design="hell"] {
  --desktop: #cfd0d6;
  --desktop-muster: rgba(200, 16, 46, .07);
  --chrome-a: #f2f2f2;
  --chrome-b: #d3d3d3;
  --chrome-linie: #a9a9a9;
  --chrome-text: #3a3a3a;
  --chrome-inaktiv: #9a9a9a;
  --ampel-aus: #c9c9c9;
  --rahmen: #9a9a9a;
  --band-hell: #ff6b7f;
  --band-a: #e0213b;
  --band-b: #a30d22;
  --kopf-a: #fbfbfb;
  --kopf-b: #ececec;
  --panel: #fff;
  --panel-2: #f6f6f6;
  --linie: #d0d0d0;
  --linie-stark: #bdbdbd;
  --zeilen-linie: rgba(0, 0, 0, .045);
  --gruppe-a: #f1f1f1;
  --gruppe-b: #e2e2e2;
  --gruppe-text: #555;
  --tab-a: #fff;
  --tab-b: #e6e6e6;
  --text: #1d1d1f;
  --muted: #7a7a80;
  --akzent: #c8102e;
  --akzent-hell: #e8384f;
  --hover: rgba(200, 16, 46, .07);
  --auswahl: rgba(200, 16, 46, .14);
  --blase: #fff;
  --blase-rand: #cfcfcf;
  --avatar-rand: rgba(0, 0, 0, .15);
  --info-bg: #f7e1e4;
  --info-text: #9e0c20;
  --verlauf-bg: #ececec;
  --karte: #fff;
  --karte-rand: #d5d5d5;
  --eingabe: #fff;
  --eingabe-rand: #c2c2c2;
  --eingabe-leiste: #fafafa;
  --band-knopf-bg: rgba(255, 255, 255, .92);
  --band-knopf-text: #a30d22;
  --schatten: 0 16px 36px rgba(0, 0, 0, .35);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  font: 13px/1.35 "Lucida Grande", "Segoe UI", Tahoma, Verdana, sans-serif;
  color: var(--text);
  background: var(--desktop);
  overflow: hidden;
}
body {
  background-image: radial-gradient(circle at 1px 1px, var(--desktop-muster) 1px, transparent 0);
  background-size: 18px 18px;
}
button, input, select, textarea { font: inherit; color: inherit; }

* { scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent; }
::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--linie-stark); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

.symbol { width: 16px; height: 16px; flex: none; display: inline-block; }

/* ---------- Desktop-Logo ---------- */
#desktop-logo {
  position: fixed; left: 24px; bottom: 20px;
  display: flex; align-items: center; gap: 10px;
  opacity: .3; pointer-events: none; user-select: none;
  font-size: 22px; font-weight: bold; color: var(--akzent); letter-spacing: 1px;
}
#desktop-logo svg { width: 42px; height: 42px; }
body.mit-taskleiste #desktop-logo { bottom: 48px; }

/* ==========================================================================
   Fenster
   ========================================================================== */
.fenster {
  position: absolute;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--rahmen);
  border-radius: 9px 9px 5px 5px;
  box-shadow: var(--schatten);
  min-width: 220px; min-height: 160px;
  overflow: hidden;
  resize: both;
}
.fenster.wackeln { animation: wackeln .5s linear 2; }
@keyframes wackeln {
  0%, 100% { translate: 0 0; }
  10% { translate: -9px 2px; } 20% { translate: 8px -3px; } 30% { translate: -7px -2px; }
  40% { translate: 9px 3px; }  50% { translate: -6px 1px; } 60% { translate: 7px -2px; }
  70% { translate: -5px 2px; } 80% { translate: 4px -1px; } 90% { translate: -2px 1px; }
}

.titelleiste {
  display: grid; grid-template-columns: 62px 1fr 62px; align-items: center;
  height: 25px; flex: none;
  background: linear-gradient(180deg, var(--chrome-a), var(--chrome-b));
  border-bottom: 1px solid var(--chrome-linie);
  color: var(--chrome-text);
  cursor: move; user-select: none; touch-action: none;
}
.fenster:not(.aktiv) .titelleiste { color: var(--chrome-inaktiv); }
.titel-mitte { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.titel-mitte .titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titel-mitte .ico-halter svg { width: 14px; height: 14px; }
.titelleiste.blinkt { animation: titelblinken 1s steps(1) infinite; }
@keyframes titelblinken { 50% { background: linear-gradient(180deg, var(--band-a), var(--band-b)); color: #fff; } }

.ampel { display: flex; gap: 7px; padding-left: 9px; }
.ampel-knopf {
  position: relative; width: 13px; height: 13px; padding: 0;
  border: 1px solid rgba(0, 0, 0, .4); border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #ff7a8b, #d4142f 65%, #8e0c1f);
  cursor: pointer;
}
.ampel-knopf.min { background: radial-gradient(circle at 50% 30%, #a6a6ae, #5c5c64 65%, #3a3a40); }
.ampel-knopf.aus, .ampel-knopf:disabled, .fenster:not(.aktiv) .ampel-knopf { background: var(--ampel-aus); cursor: default; }
.ampel:hover .ampel-knopf:not(:disabled):not(.aus)::after {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: bold 10px/1 sans-serif; color: rgba(0, 0, 0, .65);
}
.ampel:hover .ampel-knopf.zu:not(:disabled)::after { content: "×"; }
.ampel:hover .ampel-knopf.min::after { content: "–"; }

.fenster-inhalt { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ---------- Glänzendes Band ---------- */
.logo-band {
  display: flex; align-items: center; gap: 6px; flex: none;
  height: 27px; padding: 0 10px;
  background: linear-gradient(180deg, var(--band-hell) 0%, var(--band-a) 45%, var(--band-b) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  color: #fff; font-weight: bold; font-size: 15px; letter-spacing: .5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.logo-band svg { width: 20px; height: 20px; }

/* ==========================================================================
   Knöpfe, Felder, Menüs, Dialoge
   ========================================================================== */
.knopf {
  padding: 4px 12px; min-height: 26px;
  border: 1px solid var(--linie-stark); border-radius: 5px;
  background: linear-gradient(180deg, var(--tab-a), var(--tab-b));
  cursor: pointer; white-space: nowrap;
}
.knopf:hover { border-color: var(--akzent); }
.knopf:active { filter: brightness(.92); }
.knopf:disabled { opacity: .5; cursor: default; }
.knopf.primaer {
  background: linear-gradient(180deg, var(--band-hell), var(--band-a) 50%, var(--band-b));
  color: #fff; border-color: var(--band-b); text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}

.feld {
  width: 100%; padding: 6px 8px;
  background: var(--eingabe); border: 1px solid var(--eingabe-rand); border-radius: 4px;
}
.feld:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
label.zeile { display: block; margin: 8px 0 3px; color: var(--muted); font-size: 12px; }

.menue {
  position: fixed; z-index: 99999; min-width: 210px;
  background: var(--panel); border: 1px solid var(--linie-stark); border-radius: 6px;
  box-shadow: var(--schatten); padding: 4px;
}
.menue button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 10px; border: 0; border-radius: 4px; background: none; text-align: left; cursor: pointer;
}
.menue button:hover { background: linear-gradient(180deg, var(--band-a), var(--band-b)); color: #fff; }
.menue button .haken { margin-left: auto; color: var(--akzent); font-weight: bold; }
.menue button:hover .haken { color: #fff; }
.menue hr { border: 0; border-top: 1px solid var(--linie); margin: 4px 2px; }

.emoji-wahl { display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; min-width: 0; padding: 6px; }
.emoji-wahl button { width: 34px; height: 34px; padding: 0; justify-content: center; font-size: 20px; }
.emoji-wahl button:hover { background: var(--auswahl); color: inherit; }

.dialog-inhalt { padding: 14px 16px; background: var(--panel); flex: 1; overflow: auto; }
.dialog-inhalt p { margin: 0 0 10px; }
.dialog-knoepfe {
  display: flex; justify-content: flex-end; gap: 6px; padding: 8px 12px;
  background: linear-gradient(180deg, var(--kopf-a), var(--kopf-b)); border-top: 1px solid var(--linie);
}
.grosse-nummer {
  font-size: 30px; font-weight: bold; letter-spacing: 3px; text-align: center;
  padding: 10px; margin: 8px 0; border: 2px dashed var(--akzent); border-radius: 8px; color: var(--akzent);
  user-select: all;
}
.treffer { max-height: 210px; overflow: auto; border: 1px solid var(--linie); border-radius: 4px; margin-top: 8px; }
.treffer > div { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--zeilen-linie); }
.treffer > div > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Avatare ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 6px; overflow: hidden;
  background: var(--panel-2); color: #fff; font-weight: bold; letter-spacing: .5px;
  box-shadow: 0 0 0 1px var(--avatar-rand), 0 1px 3px rgba(0, 0, 0, .35);
  user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.initialen { text-shadow: 0 1px 1px rgba(0, 0, 0, .35); background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.15)); }

/* ==========================================================================
   Anmelden
   ========================================================================== */
.anmelden-kopf {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: linear-gradient(180deg, var(--kopf-a), var(--kopf-b));
  border-bottom: 1px solid var(--linie);
}
.anmelden-kopf svg { width: 50px; height: 50px; flex: none; }
.anmelden-kopf b { font-size: 18px; display: block; }
.anmelden-kopf span { color: var(--muted); font-size: 12px; }
.reiter { display: flex; gap: 4px; padding: 10px 12px 0; }
.reiter button {
  flex: 1; padding: 6px; cursor: pointer; color: var(--muted);
  background: linear-gradient(180deg, var(--tab-a), var(--tab-b));
  border: 1px solid var(--linie); border-bottom: none; border-radius: 6px 6px 0 0;
}
.reiter button.an { background: var(--panel); color: var(--akzent); font-weight: bold; margin-bottom: -1px; padding-bottom: 7px; }
.reiter-inhalt { padding: 6px 16px 16px; background: var(--panel); margin: 0 12px 12px; border: 1px solid var(--linie); border-radius: 0 0 6px 6px; }
.meldung { min-height: 18px; margin-top: 8px; color: var(--akzent); font-size: 12px; }
.meldung.ok { color: #2fae4e; }

/* ==========================================================================
   Kontaktliste
   ========================================================================== */
.liste-layout { display: flex; flex-direction: column; height: 100%; background: var(--panel); }

.ich-bereich {
  display: flex; gap: 10px; padding: 10px 10px 8px; flex: none;
  background: linear-gradient(180deg, var(--kopf-a), var(--kopf-b));
}
.ich-avatar { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; align-self: flex-start; }
.ich-avatar::after {
  content: "Bild ändern"; position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2px 0; font-size: 10px; text-align: center; color: #fff;
  background: rgba(0, 0, 0, .65); border-radius: 0 0 6px 6px;
  opacity: 0; transition: opacity .15s;
}
.ich-avatar:hover::after, .ich-avatar:focus-visible::after { opacity: 1; }
.ich-rechts { flex: 1; min-width: 0; }
.status-knopf {
  display: flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 2px 5px; border: 0; border-radius: 4px; background: none; cursor: pointer;
  font-size: 16px;
}
.status-knopf:hover { background: var(--hover); }
.status-knopf .nick-gross { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfeil-klein { font-size: 9px; color: var(--muted); }
.ich-nr { font-size: 11px; color: var(--muted); padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sprechblase {
  position: relative; margin: 6px 0 0 8px; padding: 5px 8px; min-height: 26px;
  background: var(--blase); border: 1px solid var(--blase-rand); border-radius: 6px;
  font-size: 12px; cursor: text; overflow-wrap: anywhere;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.sprechblase::before, .sprechblase::after {
  content: ""; position: absolute; top: 7px; border: 6px solid transparent; border-left: 0;
}
.sprechblase::before { left: -7px; border-right-color: var(--blase-rand); }
.sprechblase::after { left: -5.5px; border-right-color: var(--blase); }
.sprechblase.blase-leer { color: var(--muted); font-style: italic; }
.sprechblase:hover { border-color: var(--akzent); }
.sprechblase:hover::before { border-right-color: var(--akzent); }
.blase-feld { width: 100%; padding: 0; border: 0; outline: none; background: transparent; font-size: 12px; }

.listen-reiter {
  display: flex; align-items: flex-end; gap: 4px; padding: 4px 10px 0; flex: none;
  background: var(--kopf-b); border-bottom: 1px solid var(--linie);
}
.l-tab {
  position: relative; flex: 1; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--linie); border-bottom: 0; border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, var(--tab-a), var(--tab-b));
  color: var(--muted); cursor: pointer;
}
.l-tab:hover { color: var(--text); }
.l-tab.an { background: var(--panel); color: var(--akzent); height: 32px; margin-bottom: -1px; }
.l-tab .symbol { width: 19px; height: 19px; }
.badge {
  position: absolute; top: 2px; right: 6px; min-width: 16px; padding: 0 4px;
  background: var(--akzent); color: #fff; border-radius: 8px;
  font-size: 10px; font-weight: bold; line-height: 16px; text-align: center;
}
.menue-knopf {
  width: 30px; height: 24px; margin: 0 0 4px 4px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--linie-stark); border-radius: 4px;
  background: linear-gradient(180deg, var(--tab-a), var(--tab-b)); color: var(--muted); cursor: pointer;
}
.menue-knopf:hover { color: var(--akzent); border-color: var(--akzent); }

.suche-zeile { position: relative; padding: 8px 10px; flex: none; background: var(--panel); border-bottom: 1px solid var(--linie); }
.suche-zeile input {
  width: 100%; padding: 5px 28px 5px 10px;
  background: var(--eingabe); border: 1px solid var(--eingabe-rand); border-radius: 13px;
}
.suche-zeile input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 2px var(--hover); }
.suche-zeile .symbol { position: absolute; right: 19px; top: 50%; translate: 0 -50%; color: var(--muted); pointer-events: none; }

.liste { flex: 1; overflow-y: auto; background: var(--panel); }
.gruppe {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px;
  background: linear-gradient(180deg, var(--gruppe-a), var(--gruppe-b));
  border-bottom: 1px solid var(--linie);
  color: var(--gruppe-text); font-weight: bold; font-size: 12px;
  cursor: pointer; user-select: none; position: sticky; top: 0; z-index: 1;
}
.gruppe .pfeil { display: inline-block; font-size: 9px; transition: transform .15s; }
.gruppe.zu .pfeil { transform: rotate(-90deg); }
.gruppe.zu + .gruppen-inhalt { display: none; }

.kontakt {
  display: flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 5px 10px 5px 14px;
  border-bottom: 1px solid var(--zeilen-linie);
  cursor: pointer; user-select: none;
}
.kontakt:hover { background: var(--hover); }
.kontakt.gewaehlt { background: var(--auswahl); }
.kontakt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kontakt .nick { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kontakt .unter { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kontakt.offline .nick { color: var(--muted); font-weight: normal; }
.kontakt.offline .avatar { opacity: .55; filter: grayscale(.7); }
.kontakt.anfrage .nick { color: var(--akzent); }
.kontakt.ungelesen > .symbol { animation: blinken .8s steps(1) infinite; }
@keyframes blinken { 50% { opacity: 0; } }
.zaehler {
  flex: none; min-width: 18px; padding: 0 5px;
  background: var(--akzent); color: #fff; border-radius: 9px;
  font-size: 11px; font-weight: bold; line-height: 18px; text-align: center;
}
.leer { padding: 22px 16px; color: var(--muted); text-align: center; font-size: 12px; }
.verzeichnis-suche {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 14px; border: 0; background: none; color: var(--akzent); cursor: pointer; text-align: left;
}
.verzeichnis-suche:hover { background: var(--hover); }

.listen-fuss {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; flex: none;
  background: linear-gradient(180deg, var(--kopf-a), var(--kopf-b)); border-top: 1px solid var(--linie);
}
.link-knopf { flex: 1; min-width: 0; padding: 4px; border: 0; background: none; color: var(--akzent); cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-knopf:hover { text-decoration: underline; }
.icon-knopf {
  width: 34px; height: 26px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--linie-stark); border-radius: 5px;
  background: linear-gradient(180deg, var(--tab-a), var(--tab-b)); color: var(--muted); cursor: pointer;
}
.icon-knopf:hover { color: var(--akzent); border-color: var(--akzent); }

/* ==========================================================================
   Chatfenster (mit Tabs)
   ========================================================================== */
.chat-layout { display: flex; flex-direction: column; height: 100%; background: var(--panel-2); }

.tab-leiste {
  display: flex; gap: 6px; padding: 6px 8px; flex: none; overflow-x: auto;
  background: linear-gradient(180deg, var(--kopf-a), var(--kopf-b));
  border-bottom: 1px solid var(--linie);
}
.chat-tab {
  display: flex; align-items: center; gap: 5px; flex: none;
  height: 26px; max-width: 160px; padding: 0 5px 0 8px;
  border: 1px solid var(--linie-stark); border-radius: 6px;
  background: linear-gradient(180deg, var(--tab-a), var(--tab-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 1px rgba(0, 0, 0, .15);
  cursor: pointer; user-select: none;
}
.chat-tab:hover { border-color: var(--akzent); }
.chat-tab.aktiv {
  background: linear-gradient(180deg, var(--band-hell), var(--band-a) 50%, var(--band-b));
  border-color: var(--band-b); color: #fff; font-weight: bold;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
.chat-tab.ungelesen:not(.aktiv) { animation: tabblinken 1s steps(1) infinite; }
@keyframes tabblinken { 50% { background: var(--akzent); color: #fff; border-color: var(--akzent); } }
.tab-nick { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-zu {
  width: 16px; height: 16px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: rgba(128, 128, 128, .45); color: #fff;
  font-size: 12px; line-height: 1; opacity: 0;
}
.chat-tab:hover .tab-zu, .chat-tab.aktiv .tab-zu { opacity: 1; }
.tab-zu:hover { background: #000; }

.chat-band {
  display: flex; align-items: center; gap: 10px; flex: none;
  min-height: 72px; padding: 8px 10px;
  background: linear-gradient(180deg, var(--band-hell) 0%, var(--band-a) 38%, var(--band-b) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  color: #fff;
}
.band-links { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.band-links .symbol { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.band-name {
  min-width: 0; padding: 2px 5px; border: 0; border-radius: 4px; background: none;
  color: #fff; font-size: 19px; text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.band-name:hover { background: rgba(255, 255, 255, .15); }
.band-name .pfeil-klein { color: rgba(255, 255, 255, .8); }
.band-avatar .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 2px 6px rgba(0, 0, 0, .45); }
.band-knoepfe { display: flex; flex-direction: column; gap: 4px; }
.band-knopf {
  width: 25px; height: 25px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 4px;
  background: var(--band-knopf-bg); color: var(--band-knopf-text); cursor: pointer;
}
.band-knopf:hover { background: #fff; color: var(--band-b); }

.info-leiste {
  flex: none; padding: 6px 10px; text-align: center;
  background: var(--info-bg); color: var(--info-text);
  border-bottom: 1px solid var(--linie);
  font-size: 12px; font-weight: bold;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.info-leiste .klein { font-weight: normal; opacity: .85; }

.verlauf-rahmen { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; background: var(--verlauf-bg); }
.verlauf { flex: 1; overflow-y: auto; padding: 10px 12px 20px; user-select: text; }
.verlauf .mehr { display: block; margin: 0 auto 10px; font-size: 11px; }
.verlauf-label { margin: 4px 2px 6px; font-size: 11px; color: var(--muted); }
.karte {
  margin: 0 0 6px; padding: 6px 10px 7px;
  background: var(--karte); border: 1px solid var(--karte-rand); border-radius: 5px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}
.karte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.karte .name { font-weight: 600; }
.karte.ich .name { color: var(--akzent); }
.karte time { font-size: 10px; color: var(--muted); white-space: nowrap; }
.karte.ich time { color: var(--akzent); }
.karte-text { margin-top: 1px; white-space: pre-wrap; overflow-wrap: anywhere; }
.karte-text a { color: var(--akzent); }
.karte.offline-markiert .name::after { content: " · offline empfangen"; font-weight: normal; font-size: 10px; color: var(--muted); }
.systemzeile { display: flex; justify-content: space-between; gap: 8px; margin: 6px 2px 8px; font-size: 11px; color: var(--muted); }
.systemzeile.laut { color: var(--akzent); font-weight: bold; }
.tagtrenner { text-align: center; margin: 10px 0 8px; font-size: 11px; color: var(--muted); }
.tagtrenner span { background: var(--verlauf-bg); padding: 0 8px; position: relative; }
.tagtrenner::before { content: ""; display: block; border-top: 1px solid var(--linie); margin-bottom: -8px; }
.leer-chat { text-align: center; color: var(--muted); margin: 34px 0; font-size: 12px; }
.tippt { position: absolute; left: 12px; bottom: 3px; font-size: 11px; font-style: italic; color: var(--muted); pointer-events: none; }

.eingabe-zeile {
  display: flex; align-items: flex-end; gap: 6px; flex: none;
  padding: 7px 8px; background: var(--eingabe-leiste); border-top: 1px solid var(--linie);
}
.chat-eingabe {
  flex: 1; min-height: 28px; max-height: 110px; padding: 5px 2px;
  border: 0; outline: none; background: transparent; resize: none;
  font-size: 14px; line-height: 1.35;
}
.rund-knopf {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--linie-stark); border-radius: 6px;
  background: linear-gradient(180deg, var(--tab-a), var(--tab-b)); color: var(--muted); cursor: pointer;
}
.rund-knopf:hover:not(:disabled) { border-color: var(--akzent); color: var(--akzent); }
.rund-knopf:disabled { opacity: .4; cursor: default; }
.rund-knopf .symbol { width: 17px; height: 17px; }
.rund-knopf.senden { display: none; color: #fff; border-color: var(--band-b); background: linear-gradient(180deg, var(--band-hell), var(--band-a) 50%, var(--band-b)); }
@media (pointer: coarse), (max-width: 700px) { .rund-knopf.senden { display: grid; } }

/* ---------- Kontaktinfo ---------- */
.info-karte { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.info-karte .info-nick { font-size: 18px; font-weight: bold; margin-top: 6px; }
.info-karte .info-nr { color: var(--muted); font-size: 12px; }
.info-karte .info-status { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.info-karte .sprechblase { margin: 8px 0 0; cursor: default; }
.info-karte .sprechblase::before, .info-karte .sprechblase::after { display: none; }

/* ==========================================================================
   Taskleiste, Verbindung
   ========================================================================== */
#taskleiste {
  position: fixed; left: 0; right: 0; bottom: 0; height: 34px; z-index: 90000;
  display: none; align-items: center; gap: 4px; padding: 3px 6px;
  background: linear-gradient(180deg, #2a2a30, #0c0c0e);
  border-top: 1px solid var(--band-a);
  overflow-x: auto;
}
#taskleiste.an { display: flex; }
#taskleiste button {
  display: flex; align-items: center; gap: 6px; flex: none;
  max-width: 190px; height: 26px; padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 5px;
  background: rgba(255, 255, 255, .06); color: #eee; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#taskleiste button.aktiv { background: linear-gradient(180deg, var(--band-a), var(--band-b)); border-color: var(--band-b); }
#taskleiste button.blinkt { animation: tabblinken 1s steps(1) infinite; }
#taskleiste button .symbol { width: 14px; height: 14px; }

#verbindung {
  position: fixed; top: 0; left: 50%; translate: -50% 0; z-index: 100000;
  padding: 4px 14px; background: #b8860b; color: #fff; font-size: 12px; font-weight: bold;
  border-radius: 0 0 6px 6px; display: none;
}
#verbindung.an { display: block; }

/* ==========================================================================
   App-Modus (Desktop-App): Kontaktliste und Chat fest nebeneinander
   ========================================================================== */
body.app-modus #desktop-logo, body.app-modus #taskleiste { display: none !important; }
.fenster.angedockt {
  position: fixed; top: 0 !important; bottom: 0; height: auto !important;
  border: 0; border-radius: 0; box-shadow: none; resize: none;
  min-width: 0; min-height: 0; z-index: 1 !important;
}
.fenster.angedockt > .titelleiste { display: none; }
.fenster.angedockt[data-id="liste"] { left: 0 !important; width: 300px !important; border-right: 1px solid var(--rahmen); }
.fenster.angedockt[data-id="chats"] { left: 300px !important; right: 0; width: auto !important; }
#leer-pane { position: fixed; left: 300px; right: 0; top: 0; bottom: 0; display: none; place-items: center; text-align: center; color: var(--muted); background: var(--verlauf-bg); }
body.app-modus.angemeldet #leer-pane { display: grid; }
#leer-pane .leer-logo { width: 96px; height: 96px; opacity: .35; }
#leer-pane p { margin-top: 12px; }


/* ==========================================================================
   Bilder, Dateien, gelöschte Nachrichten
   ========================================================================== */
.bild-vorschau {
  display: block; margin-top: 4px; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 6px; overflow: hidden; max-width: 100%;
}
.bild-vorschau img {
  display: block; max-width: min(260px, 100%); max-height: 260px; object-fit: contain;
  border-radius: 6px; background: var(--panel-2); box-shadow: 0 0 0 1px var(--karte-rand);
}
.datei-karte {
  display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--karte-rand); border-radius: 6px; background: var(--panel-2);
  color: inherit; text-decoration: none; max-width: 340px;
}
a.datei-karte:hover { border-color: var(--akzent); }
.datei-karte > .symbol { width: 22px; height: 22px; color: var(--akzent); }
.datei-karte.abgelaufen { opacity: .6; }
.datei-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.datei-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.datei-groesse { font-size: 11px; color: var(--muted); }
.upload-balken { display: block; height: 6px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.upload-balken > span { display: block; height: 100%; background: linear-gradient(90deg, var(--band-a), var(--band-hell)); transition: width .15s; }
.karte.upload .knopf { padding: 2px 8px; min-height: 22px; font-size: 11px; }
.karte.upload.fehler { border-color: var(--akzent); }
.karte.upload.fehler .datei-groesse { color: var(--akzent); }

.karte { position: relative; }
.karte-loeschen {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0;
  display: none; place-items: center; border: 1px solid var(--linie-stark); border-radius: 4px;
  background: var(--karte); color: var(--muted); cursor: pointer;
}
.karte-loeschen .symbol { width: 13px; height: 13px; }
.karte:hover .karte-loeschen, .karte-loeschen:focus-visible { display: grid; }
.karte:hover time { visibility: hidden; }
.karte-loeschen:hover { color: #fff; background: var(--band-a); border-color: var(--band-a); }
.karte.geloescht .karte-text { color: var(--muted); font-style: italic; }

.chat-layout { position: relative; }
.ablage-hinweis {
  position: absolute; inset: 0; z-index: 5; display: none; place-items: center; align-content: center; gap: 8px;
  background: rgba(212, 20, 47, .18); border: 3px dashed var(--akzent); color: var(--akzent);
  font-size: 16px; font-weight: bold; pointer-events: none;
}
.ablage-hinweis .symbol { width: 40px; height: 40px; }
.chat-layout.ablage-aktiv .ablage-hinweis { display: grid; }

.bild-ebene {
  position: fixed; inset: 0; z-index: 200000; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 20px;
  background: rgba(0, 0, 0, .86);
}
.bild-ebene img { max-width: 100%; max-height: calc(100% - 60px); object-fit: contain; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.bild-leiste { display: flex; align-items: center; gap: 8px; color: #eee; font-size: 12px; max-width: 100%; }
.bild-leiste > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bild-leiste a.knopf { text-decoration: none; display: inline-flex; align-items: center; }

/* ==========================================================================
   Desktop-App mit getrennten Fenstern
   ========================================================================== */
body.getrennt .fenster.angedockt[data-id="liste"] { width: auto !important; right: 0; border-right: 0; }
body.getrennt #leer-pane { display: none !important; }
.fenster.extern {
  position: fixed; inset: 0; width: auto !important; height: auto !important;
  border: 0; border-radius: 0; box-shadow: none; resize: none; min-width: 0; min-height: 0;
}
.fenster.extern > .titelleiste { display: none; }

/* ---------- Update-Hinweis (Desktop-App) ---------- */
.update-leiste {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: none;
  width: 100%; padding: 6px 10px; border: 0; border-bottom: 1px solid var(--linie);
  background: var(--info-bg); color: var(--info-text); font-size: 12px; text-align: left; cursor: default;
}
.update-leiste.bereit { cursor: pointer; background: linear-gradient(180deg, #2fbf4f, #1d8a36); color: #fff; }
.update-leiste.bereit:hover { filter: brightness(1.08); }
.update-leiste span { opacity: .9; }

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 700px) {
  body:not(.app-modus) .fenster {
    left: 0 !important; top: 0 !important;
    width: 100vw !important; height: calc(100dvh - 34px) !important;
    border-radius: 0; resize: none;
  }
  .titelleiste { cursor: default; height: 38px; grid-template-columns: 90px 1fr 90px; }
  .ampel { gap: 12px; padding-left: 12px; }
  .ampel-knopf { width: 20px; height: 20px; }
  .ampel .ampel-knopf:not(:disabled):not(.aus)::after {
    position: absolute; inset: 0; display: grid; place-items: center;
    font: bold 13px/1 sans-serif; color: rgba(0, 0, 0, .65);
  }
  .ampel .ampel-knopf.zu:not(:disabled)::after { content: "×"; }
  .ampel .ampel-knopf.min::after { content: "–"; }
  .tab-zu { opacity: 1; }
  #desktop-logo { display: none; }
}

/* ==========================================================================
   Einmal ansehen (ab 1.6.0)
   ========================================================================== */
.rund-knopf.einmal-knopf.an {
  color: #fff; border-color: var(--band-b);
  background: linear-gradient(180deg, var(--band-hell), var(--band-a) 50%, var(--band-b));
}
.rund-knopf.einmal-knopf.an:hover:not(:disabled) { color: #fff; }
.chat-eingabe.einmal::placeholder { color: var(--akzent); opacity: .85; }

.einmal-karte {
  display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 8px 10px; max-width: 340px;
  border: 1px dashed var(--akzent); border-radius: 6px; background: var(--hover);
}
.einmal-karte.angesehen { border-color: var(--linie-stark); background: var(--panel-2); opacity: .75; }
.einmal-symbol { display: flex; flex: none; color: var(--akzent); }
.einmal-symbol .symbol { width: 24px; height: 24px; }
.einmal-karte.angesehen .einmal-symbol { color: var(--muted); }
.einmal-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.einmal-art { font-weight: 600; }
.einmal-hinweis, .einmal-status { font-size: 11px; color: var(--muted); }
.einmal-hinweis:empty { display: none; }
.einmal-status { flex: none; white-space: nowrap; }
.einmal-oeffnen { flex: none; padding: 3px 12px; min-height: 24px; }

.einmal-ebene { user-select: none; -webkit-user-select: none; }
.einmal-koerper {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  max-width: 100%; max-height: calc(100% - 60px); min-height: 0;
}
.einmal-koerper img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.6); pointer-events: none; }
.einmal-text {
  max-width: min(560px, 100%); max-height: 60vh; overflow: auto; padding: 18px 22px;
  border: 1px solid var(--akzent); border-radius: 8px; background: var(--panel); color: var(--text);
  font-size: 16px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}
.einmal-text a { color: var(--akzent); }
.einmal-laden { color: #ddd; font-size: 13px; }
.einmal-koerper .datei-karte { background: var(--panel); }

/* ==========================================================================
   Lama Rama (ab 1.7.0)
   ========================================================================== */
.lama {
  --z: 52px;
  position: relative; flex: 1; height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px; overflow: hidden; container-type: size;
  background: radial-gradient(ellipse at 50% 0%, rgba(200, 16, 46, .18), transparent 60%), var(--panel);
  user-select: none; -webkit-user-select: none;
}
@container (min-height: 1px) {
  .lama-feld { --z: clamp(34px, min(calc((100cqw - 90px) / 5), calc((100cqh - 290px) / 5.4)), 66px); }
}
.lama-titel-symbol { font-size: 14px; line-height: 1; }

.lama-kopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; flex: none; }
.lama-spieler {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 10px;
  border: 1px solid var(--linie); border-radius: 8px; background: var(--panel-2); transition: border-color .2s, box-shadow .2s;
}
.lama-spieler.gegner { text-align: right; }
.lama-spieler.dran { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent), 0 0 14px rgba(239, 54, 81, .35); }
.lama-name { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lama-spieler.dran .lama-name { color: var(--akzent); font-weight: 600; }
.lama-punkte { font-size: 24px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lama-mitte { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 88px; text-align: center; }
.lama-status { font-size: 12px; font-weight: 600; }
.lama-uhr { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lama-uhr.knapp { color: var(--akzent); font-weight: 700; animation: lamaPuls .8s infinite; }
@keyframes lamaPuls { 50% { opacity: .45; } }

.lama-seil { flex: none; }
.lama-bahn {
  position: relative; height: 34px; border-radius: 17px;
  background: linear-gradient(180deg, var(--gruppe-a), var(--gruppe-b)); border: 1px solid var(--linie);
}
.lama-mittellinie { position: absolute; left: 50%; top: 6px; bottom: 6px; border-left: 2px dashed var(--linie-stark); }
.lama-ziel { position: absolute; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: .7; }
.lama-ziel.links { left: 8px; }
.lama-ziel.rechts { right: 8px; }
.lama-tier {
  position: absolute; top: 50%; font-size: 26px; line-height: 1;
  transform: translate(-50%, -52%); transition: left .7s cubic-bezier(.3, 1.4, .5, 1);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}
.lama-tier.rechts { transform: translate(-50%, -52%) scaleX(-1); }
.lama-seil-text { margin-top: 3px; font-size: 11px; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lama-buehne { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.lama-buehne.warten { align-content: center; gap: 8px; text-align: center; color: var(--muted); }
.lama-feld {
  display: grid; gap: 3px;
  grid-template-columns: calc(var(--z) * .45) repeat(5, var(--z)) calc(var(--z) * .45);
  grid-template-rows: calc(var(--z) * .45) repeat(5, var(--z));
}
.lama-ecke { display: block; }
.lama-zelle {
  display: grid; place-items: center; border-radius: 7px;
  background: linear-gradient(180deg, #1d1d22, #121215); border: 1px solid #2c2c33;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
[data-design="hell"] .lama-zelle { background: linear-gradient(180deg, #fff, #eeeef2); border-color: #d6d6de; }
.lama-zelle.weg { animation: lamaWeg .5s ease-in forwards; background: var(--akzent); border-color: var(--akzent-hell); }
@keyframes lamaWeg {
  0% { transform: scale(1); }
  35% { transform: scale(1.14); box-shadow: 0 0 18px var(--akzent); }
  100% { transform: scale(.2); opacity: 0; }
}
.lama-stein { display: grid; place-items: center; width: 100%; height: 100%; font-size: calc(var(--z) * .56); line-height: 1; }
.lama-stein.leer { font-size: 0; }
.lama-stein.s-sieben {
  font-family: Georgia, "Times New Roman", serif; font-weight: 900; font-style: italic; color: #ff2a47;
  text-shadow: 0 0 1px #fff, 0 2px 0 #6d0010, 0 0 10px rgba(255, 42, 71, .55);
}
.lama-pfeil {
  display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--muted); font-size: calc(var(--z) * .26); cursor: pointer; position: relative;
}
.lama-pfeil:disabled { cursor: default; opacity: .35; }
.lama-feld.mein-zug .lama-pfeil:not(:disabled) { color: var(--akzent); background: var(--hover); border-color: rgba(239, 54, 81, .35); }
.lama-feld.mein-zug .lama-pfeil:not(:disabled):hover { color: #fff; background: var(--band-a); border-color: var(--band-a); }
.lama-feld.mein-zug .lama-pfeil:not(:disabled):hover .lama-pfeil-zeichen { opacity: 0; }
.lama-feld.mein-zug .lama-pfeil:not(:disabled):hover::after {
  content: attr(data-stein); position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--z) * .32);
}
.lama-pfeil.benutzt { opacity: 1; color: #fff; background: var(--band-a); }
.lama-plus {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); pointer-events: none;
  padding: 6px 14px; border-radius: 20px; background: var(--band-a); color: #fff; font-size: 20px; font-weight: 800;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5); animation: lamaPlus .5s ease-out both; white-space: nowrap;
}
@keyframes lamaPlus { from { transform: translate(-50%, 0) scale(.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

.lama-leiste { flex: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.lama-naechster { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lama-stein.gross {
  --z: 46px; width: 46px; height: 46px; border-radius: 9px; border: 1px solid var(--linie-stark);
  background: linear-gradient(180deg, #1d1d22, #121215);
}
[data-design="hell"] .lama-stein.gross { background: linear-gradient(180deg, #fff, #eeeef2); }
.lama-naechster.aktiv .lama-stein.gross { border-color: var(--akzent); box-shadow: 0 0 12px rgba(239, 54, 81, .45); animation: lamaHuepf 1.2s ease-in-out infinite; }
@keyframes lamaHuepf { 50% { transform: translateY(-3px); } }
.lama-naechster.gegner { opacity: .75; }
.lama-klein { font-size: 11px; color: var(--muted); max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lama-meldung { font-size: 13px; text-align: center; min-height: 18px; }

.lama-fuss { flex: none; display: flex; align-items: center; gap: 8px; }
.lama-fuss-luecke { flex: 1; }

.lama-start { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 320px; }
.lama-start h2 { margin: 0; color: var(--akzent); letter-spacing: 1px; }
.lama-start p { margin: 0 0 6px; color: var(--muted); }
.lama-start-tier { font-size: 64px; line-height: 1; }
.wackelt { animation: lamaWackel 1.4s ease-in-out infinite; }
@keyframes lamaWackel { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }

.lama-regeln, .lama-ende {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, .72);
}
.lama-regeln-box, .lama-ende-box {
  width: min(400px, 100%); max-height: 100%; overflow: auto; padding: 16px 18px;
  border: 1px solid var(--akzent); border-radius: 12px; background: var(--panel); box-shadow: 0 16px 50px rgba(0, 0, 0, .6);
}
.lama-regeln-box h3 { margin: 0 0 8px; color: var(--akzent); }
.lama-regeln-box ul { margin: 0 0 10px; padding-left: 18px; font-size: 13px; line-height: 1.45; }
.lama-regeln-box > .knopf { width: 100%; margin-top: 12px; }
.lama-regeln-box > .lama-klein { max-width: none; }
.lama-werte { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 6px; }
.lama-wert { --z: 34px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; }
.lama-wert .lama-stein { width: 34px; height: 34px; }
.lama-ende-box { text-align: center; animation: lamaAuf .35s ease-out; }
@keyframes lamaAuf { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.lama-ende-box h2 { margin: 4px 0; font-size: 26px; }
.lama-ende.sieg .lama-ende-box h2 { color: var(--akzent); }
.lama-ende-box p { margin: 4px 0; }
.lama-ende-tier { font-size: 54px; line-height: 1.1; }
.lama-ende-knoepfe { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }

.lama-einladung { display: flex; align-items: center; gap: 12px; }
.lama-einladung-tier { font-size: 40px; line-height: 1; animation: lamaWackel 1.4s ease-in-out infinite; }
.lama-einladung p { margin: 0; }