/* chat.centx.de -- eigenes Aussehen ueber Bootstrap 5.3 (heller Modus).
 *
 * Grundidee: grosse, ruhige weisse Flaechen tragen den Inhalt. Der Farbton
 * (Violett -> Pink -> Cyan) bleibt, wirkt aber nur noch als Akzent: kleine
 * Flaechen (eigene Blase, Sendeknopf, Marke, Zaehler) und ein sehr weicher
 * Farbschimmer im Untergrund, der ausserhalb der Flaechen sichtbar wird.
 * Alles ohne Bilder -- Verlaeufe, Unschaerfe und Schatten reichen und bleiben
 * scharf auf jeder Aufloesung.
 */

@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}

:root {
  --schrift: 'Inter var', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Untergrund und Flaechen: von aussen (leicht getoent) nach innen (weiss).
     Die grossen Flaechen sind deckend -- durchscheinend wuerden die Farbflecken
     des Untergrunds sie fleckig einfaerben, und genau das soll aufhoeren. */
  --grund:      #eceef8;
  --flaeche:    #ffffff;   /* Hauptflaeche, Verlauf */
  --flaeche-2:  #fafbfe;   /* Seitenleiste */
  --flaeche-3:  #f3f4fb;   /* Kopf- und Fusszeilen */
  --flaeche-4:  #eef0f7;   /* fremde Blase, Hover, Chips */

  --kante:      rgba(23, 18, 56, .10);
  --kante-hell: rgba(23, 18, 56, .18);      /* der staerkere Strich */

  --text:       #17143a;
  --text-leise: #6a6785;

  --lila:  #6d4aff;
  --pink:  #db2fae;
  --cyan:  #0fb5d6;
  --verlauf: linear-gradient(135deg, var(--lila) 0%, var(--pink) 55%, var(--cyan) 130%);
  /* Fuer groessere Flaechen (eigene Blase): bleibt im Violett, damit weisse
     Schrift darauf sicher lesbar ist. */
  --verlauf-ruhig: linear-gradient(135deg, #6d4aff 0%, #8b3ff0 100%);

  --lila-tief: #5636d9;   /* Violett, das auf Weiss noch als Schrift taugt */

  --schatten:   0 1rem 2.5rem rgba(23, 18, 56, .10);
  --schatten-s: 0 .35rem 1rem rgba(23, 18, 56, .07);

  --leiste-breite: 21rem;
  --rund:   1.5rem;
  --rund-s: .9rem;

  /* Bootstrap mitziehen, damit Karten, Tabellen und Knoepfe nicht ausscheren */
  --bs-body-bg: var(--grund);
  --bs-body-color: var(--text);
  --bs-body-font-family: var(--schrift);
  --bs-border-color: var(--kante);
  --bs-secondary-color: var(--text-leise);
  --bs-primary: var(--lila);
  --bs-link-color-rgb: 86, 54, 217;
  --bs-link-hover-color-rgb: 62, 36, 176;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--schrift);
  background: var(--grund);
  color: var(--text);
  min-height: 100dvh;
  letter-spacing: -.011em;
}

::selection { background: rgba(109, 74, 255, .18); }

/* ── Hintergrund: drei langsam wandernde Farbflecken ────────────────── */
/* Bewusst blass: sie sollen den Farbton andeuten, nicht die Flaechen
   einfaerben. Sichtbar sind sie vor allem im Rand um die Flaechen herum
   und auf den zentrierten Seiten. */

.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.aurora span {
  position: absolute;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .18;
  will-change: transform;
}
.aurora span:nth-child(1) { background: var(--lila); top: -16rem; left: -12rem;  animation: treiben 26s ease-in-out infinite; }
.aurora span:nth-child(2) { background: var(--pink); bottom: -20rem; right: -14rem; opacity: .15; animation: treiben 32s ease-in-out infinite reverse; }
.aurora span:nth-child(3) { background: var(--cyan); top: 30%; left: 48%; opacity: .11; animation: treiben 38s ease-in-out infinite; }

@keyframes treiben {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(6rem, 4rem, 0) scale(1.12); }
  66%      { transform: translate3d(-4rem, 6rem, 0) scale(.92); }
}

/* ── Bausteine ─────────────────────────────────────────────────────── */

.glas {
  background: rgba(255, 255, 255, .93);
  border: 1px solid var(--kante);
  border-radius: var(--rund);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  box-shadow: var(--schatten);
}

.verlauf-text {
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-knallig {
  background: var(--verlauf);
  background-size: 200% 200%;
  border: 0;
  color: #fff;
  font-weight: 600;
  border-radius: 999px;
  padding: .7rem 1.4rem;
  transition: transform .15s ease, box-shadow .25s ease, background-position .5s ease;
  box-shadow: 0 .5rem 1.2rem rgba(109, 74, 255, .28);
}
.btn-knallig:hover  { color: #fff; transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 .8rem 1.8rem rgba(219, 47, 174, .3); }
.btn-knallig:active { transform: translateY(0) scale(.985); }
.btn-knallig:disabled { opacity: .4; transform: none; box-shadow: none; }

.btn-geist {
  background: #fff;
  border: 1px solid var(--kante-hell);
  color: var(--text);
  border-radius: 999px;
  transition: background .2s ease, border-color .2s ease;
}
.btn-geist:hover { background: var(--flaeche-4); border-color: var(--kante-hell); color: var(--text); }

.form-control {
  background: #fff;
  border: 1px solid var(--kante-hell);
  color: var(--text);
  border-radius: var(--rund-s);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-control::placeholder { color: #9c99ae; }
.form-control:focus {
  background: #fff;
  border-color: rgba(109, 74, 255, .7);
  box-shadow: 0 0 0 .22rem rgba(109, 74, 255, .16);
  color: var(--text);
}

/* Avatar: Anfangsbuchstaben auf einem aus der Kennung errechneten Farbton.
   Damit hat jede Person verlaesslich dieselbe Farbe, ohne dass wir eine
   speichern muessten. Die Helligkeit bleibt gedeckt, damit die weisse
   Schrift auf jedem Farbton lesbar bleibt. */
.avatar {
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
  letter-spacing: .02em;
  background: linear-gradient(140deg,
              hsl(var(--ton, 265) 68% 52%),
              hsl(calc(var(--ton, 265) + 55) 68% 44%));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  user-select: none;
}
.avatar.klein { width: 2rem; height: 2rem; font-size: .7rem; }

.status-punkt {
  position: absolute;
  inset-inline-end: -1px;
  bottom: -1px;
  width: .72rem;
  height: .72rem;
  border-radius: 50%;
  background: #b6b3c6;
  border: 2px solid #fff;
}
.status-punkt.an { background: #12b981; }
.status-punkt.an::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(18, 185, 129, .5);
  animation: pulsieren 2s ease-out infinite;
}
@keyframes pulsieren {
  0%   { transform: scale(.7); opacity: .9; }
  100% { transform: scale(1.5); opacity: 0; }
}

.avatar-huelle { position: relative; flex: 0 0 auto; }

/* ── Herkunftsflaggen ──────────────────────────────────────────────── */
/* Die Flagge ist ein Emoji (zwei regionale Anzeigebuchstaben), kein Bild --
   damit gibt es nichts nachzuladen und nichts zu pflegen. */

.fahne { font-size: 1rem; line-height: 1; }

.fahne-eck {
  position: absolute;
  inset-inline-start: -3px;
  top: -4px;
  font-size: .8rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(23, 18, 56, .35));
  pointer-events: none;
}

/* ── Sprachauswahl ─────────────────────────────────────────────────── */

.sprachliste {
  max-height: min(60vh, 22rem);
  overflow-y: auto;
  min-width: 12.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(23, 18, 56, .2) transparent;
}
.dropdown-item.aktiv { background: rgba(109, 74, 255, .1); color: var(--lila-tief); font-weight: 600; }

/* ── Zentrierte Seiten (Beitreten, Kontakt) ─────────────────────────── */

.seite-mittig {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  min-height: 100dvh;
}
.karte-mittig { width: 100%; max-width: 32rem; }
.karte-mittig.breit { max-width: 40rem; }

.marke {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}
.marke-zeichen {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: .75rem;
  background: var(--verlauf);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  box-shadow: 0 .5rem 1.1rem rgba(109, 74, 255, .3);
}

.merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.merkmale li {
  font-size: .78rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--flaeche-4);
  border: 1px solid var(--kante);
  color: var(--text-leise);
}

/* Hinweiskasten fuer Fehlermeldungen auf den zentrierten Seiten */
.warnung {
  border-color: rgba(219, 47, 174, .35) !important;
  background: rgba(219, 47, 174, .06);
}

/* ── Chatoberflaeche ───────────────────────────────────────────────── */
/* 100dvh statt 100vh: auf Mobilgeraeten schrumpft die sichtbare Hoehe, wenn
   die Adressleiste einblendet -- mit vh rutscht die Eingabezeile unter den
   Bildschirmrand. */

.seite-chat { overflow: hidden; }

.chat-huelle {
  display: flex;
  gap: 1rem;
  height: 100dvh;
  padding: 1rem;
  max-width: 1500px;
  margin: 0 auto;
}

.chat-seitenleiste,
.chat-haupt {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--kante);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  overflow: hidden;
}

/* Die Seitenleiste bleibt eine Spur getoenter als die Hauptflaeche -- so
   trennen sich die beiden Bereiche ohne zusaetzliche Linien. */
.chat-seitenleiste {
  width: var(--leiste-breite);
  flex: 0 0 var(--leiste-breite);
  background: var(--flaeche-2);
}
.chat-haupt {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--flaeche);
}

.seitenleiste-kopf,
.chat-kopf {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--kante);
  background: var(--flaeche-3);
}

.leise { color: var(--text-leise); }
.winzig { font-size: .78rem; }

.suchfeld { padding: .75rem .85rem; }
.suchfeld .form-control { border-radius: 999px; padding-inline-start: 1rem; }

.kontakt-liste {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: .4rem .55rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(23, 18, 56, .2) transparent;
}
.kontakt-liste::-webkit-scrollbar { width: 8px; }
.kontakt-liste::-webkit-scrollbar-thumb {
  background: rgba(23, 18, 56, .16);
  border-radius: 99px;
}

.kontakt {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .55rem .65rem;
  margin-bottom: .2rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  background: transparent;
  text-align: start;
  color: var(--text);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.kontakt:hover  { background: rgba(23, 18, 56, .05); }
.kontakt:active { transform: scale(.985); }
.kontakt.aktiv {
  background: rgba(109, 74, 255, .1);
  border-color: rgba(109, 74, 255, .28);
}
.kontakt.aktiv .kontakt-name { color: var(--lila-tief); }
.kontakt.offline .kontakt-name { color: var(--text-leise); }
.kontakt.offline .avatar { filter: grayscale(.55); opacity: .75; }

/* Der ⋯-Knopf sitzt ueber der Zeile, nicht im Kontaktknopf (ein Knopf im Knopf
   waere ungueltig). Damit er den Zaehler nicht verdeckt, macht die Zeile mit
   Menue rechts entsprechend Platz. */
.kontakt-zeile { position: relative; }
.kontakt-zeile.mit-menue .kontakt { padding-inline-end: 2.4rem; }

.kontakt-menue {
  position: absolute;
  top: 50%;
  inset-inline-end: .5rem;
  transform: translateY(-50%);
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-leise);
  font-size: .95rem;
  line-height: 1;
  display: grid;
  place-items: center;
  opacity: 0;                     /* erst beim Ansteuern, sonst flimmert die Liste */
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease;
}
.kontakt-zeile:hover .kontakt-menue,
.kontakt-zeile:focus-within .kontakt-menue,
.kontakt-menue[aria-expanded="true"] { opacity: 1; }
.kontakt-menue:hover,
.kontakt-menue:focus-visible,
.kontakt-menue[aria-expanded="true"] { background: rgba(23, 18, 56, .08); }
/* Am Telefon gibt es kein Darueberfahren -- dort steht er einfach da, und mit
   dem Finger treffbar. Die Zeile macht dafuer etwas mehr Platz, damit er dem
   Ungelesen-Zaehler nicht auf die Pelle rueckt. */
@media (hover: none) {
  .kontakt-menue { opacity: .6; width: 2.25rem; height: 2.25rem; }
  .kontakt-zeile.mit-menue .kontakt { padding-inline-end: 2.9rem; }
}

/* Gesperrt: bleibt lesbar, tritt aber zurueck -- der Eintrag ist nur noch da,
   damit man an den Verlauf und an das Aufheben der Sperre kommt. */
.kontakt.gesperrt .avatar { filter: grayscale(1); opacity: .5; }
.kontakt.gesperrt .kontakt-name { color: var(--text-leise); }
.kontakt.gesperrt .fahne { display: none; }

/* Fenster mit allen Sperren (Bootstrap-Modal) */
.sperr-liste { display: flex; flex-direction: column; gap: .35rem; }
.sperr-zeile {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .4rem .5rem;
  border-radius: .75rem;
  background: var(--flaeche-4);
}
.sperr-zeile .avatar { filter: grayscale(1); opacity: .6; }

.kontakt-text { flex: 1 1 auto; min-width: 0; }
.kontakt-name {
  font-weight: 600;
  font-size: .93rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zaehler {
  flex: 0 0 auto;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: var(--verlauf);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 .25rem .6rem rgba(219, 47, 174, .35);
  animation: hupf .35s ease;
}
@keyframes hupf {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* Der Verlauf ist die groesste Flaeche der Anwendung: er uebernimmt das
   schlichte Weiss der Hauptflaeche, damit die Blasen darauf ruhig stehen. */
.chat-verlauf {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: 1.25rem 1.1rem .5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(23, 18, 56, .2) transparent;
  display: flex;
  flex-direction: column;
}
/* Wenige Nachrichten sollen unten an der Eingabezeile kleben, nicht oben im
   Leeren haengen. Das automatische obere Aussenmass am ersten Kind schiebt
   alles nach unten -- sobald es mehr wird als hineinpasst, faellt es weg und
   normales Rollen setzt ein. */
.chat-verlauf > :first-child { margin-top: auto; }
.chat-verlauf::-webkit-scrollbar { width: 8px; }
.chat-verlauf::-webkit-scrollbar-thumb {
  background: rgba(23, 18, 56, .16);
  border-radius: 99px;
}

.leer-hinweis {
  margin: auto;           /* mittig, auch im Fluss der Verlaufsspalte */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-leise);
  gap: .35rem;
  padding: 2rem 1rem;
}
.leer-hinweis .gross { font-size: 2.6rem; line-height: 1; margin-bottom: .4rem; }

.blase {
  position: relative;
  max-width: min(78%, 32rem);
  width: fit-content;
  margin-bottom: .3rem;
  padding: .58rem .85rem .5rem;
  border-radius: 1.15rem;
  background: var(--flaeche-4);
  border: 1px solid var(--kante);
  overflow-wrap: anywhere;   /* lange Wortketten sprengen sonst die Blase */
  white-space: pre-wrap;     /* Zeilenumbrueche des Verfassers bleiben stehen */
  line-height: 1.45;
  animation: einblenden .22s ease both;
}
@keyframes einblenden {
  from { opacity: 0; transform: translateY(.45rem) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.blase.eigen {
  margin-inline-start: auto;
  background: var(--verlauf-ruhig);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 .4rem 1.1rem rgba(109, 74, 255, .22);
  /* Platz fuer den Menueknopf. Fest eingeplant, damit die Blase beim
     Darueberfahren nicht die Breite wechselt und der Knopf nie auf der
     Schrift liegt. */
  padding-inline-end: 2.15rem;
}
/* Nur die aeussere Blase einer Folge bekommt die abgeflachte Ecke -- so
   wirken zusammenhaengende Nachrichten als Block. */
.blase.letzte           { border-end-start-radius: .35rem; margin-bottom: .8rem; }
.blase.eigen.letzte     { border-end-start-radius: 1.15rem; border-end-end-radius: .35rem; }

.blase .zeit {
  display: block;
  font-size: .68rem;
  opacity: .6;
  margin-top: .15rem;
  text-align: end;
}
.blase.nur-emoji {
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 2.4rem;
  line-height: 1.2;
  padding: .1rem .2rem;
}
.blase.eigen.nur-emoji { color: var(--text); }   /* ohne Blase kein Weiss */
.blase.eigen.nur-emoji { padding-inline-end: 2rem; }

/* ── Eigene Nachricht aendern oder zuruecknehmen ────────────────────── */

/* Der Knopf sitzt in der oberen Ecke jeder eigenen Blase -- gedeckt, bis man
   ihn ansteuert. Am Telefon gibt es kein Darueberfahren, dort ist er immer
   deutlich zu sehen. */
.blase-menue {
  position: absolute;
  top: .15rem;
  inset-inline-end: .15rem;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: .95rem;
  line-height: 1;
  display: grid;
  place-items: center;
  opacity: .55;
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease;
}
.blase-menue:hover,
.blase-menue:focus-visible { opacity: 1; background: rgba(255, 255, 255, .22); }
/* Ueber einem Bild braucht das Zeichen einen eigenen Grund, sonst verschwindet
   es je nach Motiv. */
.blase.mit-medien .blase-menue {
  opacity: .9;
  background: rgba(14, 12, 32, .45);
  color: #fff;
}
.blase.mit-medien .blase-menue:hover { background: rgba(14, 12, 32, .7); }
@media (hover: none) {
  .blase-menue { opacity: .85; }
}

/* Das Menue haengt am Ende des Koerpers und wird ueber feste Koordinaten
   gesetzt -- innerhalb der rollenden Verlaufsspalte waere es beschnitten. */
.blase-aktionen {
  position: fixed;
  z-index: 1075;
  min-width: 9.5rem;
  padding: .3rem;
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--kante);
  border-radius: var(--rund-s);
  box-shadow: var(--schatten);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: .1rem;
  animation: einblenden .12s ease both;
}
.blase-aktionen button {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .5rem .6rem;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: var(--text);
  font-size: .9rem;
  text-align: start;
  cursor: pointer;
}
.blase-aktionen button:hover,
.blase-aktionen button:focus-visible { background: var(--flaeche-4); }
.blase-aktionen button.fort { color: #c02020; }

/* Vermerk in der Zeitzeile einer geaenderten Nachricht */
.blase .geaendert { opacity: .75; }
.blase .geaendert::after { content: ' · '; }

/* Hinweiszeile ueber der Eingabe, solange umgeschrieben wird */
.bearbeiten-leiste {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  padding: .45rem .6rem;
  border-radius: var(--rund-s);
  background: rgba(109, 74, 255, .1);
  border: 1px solid rgba(109, 74, 255, .25);
}
.bearbeiten-leiste[hidden] { display: none; }
.bearbeiten-leiste #bearbeiten-vorschau { color: var(--text); }

/* Medien (Bild, Video, Ton) fuellen die Blase bis an den schmalen Rand. */
.blase.mit-medien { padding: .35rem .35rem .3rem; }
.blase a.medien   { display: block; line-height: 0; }  /* kein Spalt unterm Bild */
.blase img,
.blase video {
  display: block;
  max-width: 100%;
  max-height: 20rem;
  border-radius: .85rem;
}
.blase img   { cursor: zoom-in; }
/* min(): auf schmalen Telefonen wuerde eine feste Breite die Blase sprengen. */
.blase audio { display: block; width: min(16rem, 100%); }
.blase.mit-medien .zeit { padding-inline-end: .4rem; }

.tag-trenner {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1rem 0 .85rem;
  color: var(--text-leise);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.tag-trenner::before,
.tag-trenner::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kante-hell), transparent);
}

.tipp-punkte { display: inline-flex; gap: .22rem; vertical-align: middle; }
.tipp-punkte i {
  width: .34rem;
  height: .34rem;
  border-radius: 50%;
  background: currentColor;
  animation: tippen 1.2s infinite ease-in-out;
}
.tipp-punkte i:nth-child(2) { animation-delay: .18s; }
.tipp-punkte i:nth-child(3) { animation-delay: .36s; }
@keyframes tippen {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-.2rem); }
}

/* ── Eingabe ───────────────────────────────────────────────────────── */

.chat-eingabe {
  padding: .75rem .9rem 1rem;
  border-top: 1px solid var(--kante);
  background: var(--flaeche-3);
}

.emoji-leiste {
  display: flex;
  gap: .25rem;
  margin-bottom: .5rem;
  flex-wrap: wrap;
}
.emoji-leiste button {
  border: 0;
  background: transparent;
  font-size: 1.15rem;
  line-height: 1;
  padding: .25rem .35rem;
  border-radius: .6rem;
  cursor: pointer;
  transition: transform .12s ease, background .18s ease;
}
.emoji-leiste button:hover  { background: rgba(23, 18, 56, .06); transform: scale(1.22) rotate(-6deg); }
.emoji-leiste button:active { transform: scale(.95); }

.eingabe-zeile {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
}
.eingabe-zeile textarea {
  resize: none;
  max-height: 9rem;
  border-radius: 1.25rem;
  padding: .65rem 1rem;
}
.senden-knopf,
.anhang-knopf,
.rund-knopf {
  width: 2.9rem;
  height: 2.9rem;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 1.1rem;
}
.anhang-knopf:disabled,
.rund-knopf:disabled { opacity: .4; }

/* ── Aufnahme (Sprachnachricht und Kurzvideo) ──────────────────────── */

.aufnahme-zeile {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.aufnahme-zeile[hidden] { display: none; }
.aufnahme-punkt {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: #e5342f;
  flex: 0 0 auto;
  animation: blinken 1.2s ease-in-out infinite;
}
@keyframes blinken {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.aufnahme-zeit {
  font-variant-numeric: tabular-nums;   /* Ziffernwechsel ohne Zappeln */
  font-weight: 600;
}

/* Video und Grossansicht bleiben dunkel: dort geht es allein um das Bild,
   ein heller Rahmen wuerde die Farben verfaelschen. */
.video-schleier {
  position: fixed;
  inset: 0;
  z-index: 1070;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(14, 12, 32, .88);
  backdrop-filter: blur(10px);
  animation: einblenden .18s ease both;
}
.video-schleier[hidden] { display: none; }
.video-schleier video {
  max-width: min(100%, 56rem);
  max-height: 70vh;
  border-radius: .9rem;
  background: #000;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .5);
}
.video-leiste {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.video-schleier .aufnahme-zeit { color: #fff; }

/* ── Hinweise ──────────────────────────────────────────────────────── */

.toast-behaelter {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}
.hinweis {
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--kante-hell);
  color: var(--text);
  backdrop-filter: blur(14px);
  border-radius: 999px;
  padding: .6rem 1.15rem;
  font-size: .88rem;
  box-shadow: 0 .8rem 2rem rgba(23, 18, 56, .18);
  animation: einblenden .25s ease both;
}

/* ── Grossansicht (Modal) fuer Bilder ──────────────────────────────── */

.medien-schleier {
  position: fixed;
  inset: 0;
  z-index: 1070;                 /* unter den Hinweisen (1080), ueber allem sonst */
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(14, 12, 32, .84);
  backdrop-filter: blur(10px);
  animation: einblenden .18s ease both;
  cursor: zoom-out;              /* ueberall daneben schliesst */
}
.medien-schleier[hidden] { display: none; }   /* display: grid schluege sonst hidden */
.medien-schleier img {
  max-width: 100%;
  /* dvh statt vh: mit vh rechnet das Telefon die eingeblendete Adressleiste
     mit, das Bild ragte dann unten aus dem Sichtbaren heraus. */
  max-height: calc(100dvh - 2.5rem);
  border-radius: .9rem;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .5);
  cursor: default;
}
.schleier-zu {
  position: absolute;
  top: calc(1rem + env(safe-area-inset-top));
  inset-inline-end: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .92);
  color: var(--text);
  font-size: 1rem;
  display: grid;
  place-items: center;
}
.schleier-zu:hover { background: #fff; }

/* ── Verwaltung ────────────────────────────────────────────────────── */

.karte {
  background: rgba(255, 255, 255, .93);
  border: 1px solid var(--kante);
  border-radius: var(--rund-s);
  backdrop-filter: blur(18px);
  box-shadow: var(--schatten-s);
}
.kennzahl { padding: 1rem 1.1rem; }
.kennzahl .wert { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }

.marke-status {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: .18rem .6rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.marke-status.neu      { background: rgba(219, 47, 174, .1);  color: #a8137f; border: 1px solid rgba(219, 47, 174, .28); }
.marke-status.gelesen  { background: rgba(15, 181, 214, .12); color: #0a6d80; border: 1px solid rgba(15, 181, 214, .3); }
.marke-status.erledigt { background: rgba(18, 185, 129, .12); color: #0a7a56; border: 1px solid rgba(18, 185, 129, .3); }
.marke-status.zurueck  { background: rgba(23, 18, 56, .07);   color: var(--text-leise); border: 1px solid var(--kante-hell); }

/* Zurueckgenommene Nachricht im Protokoll: bleibt lesbar, tritt aber zurueck. */
.zurueckgenommen > td { opacity: .55; }
.zurueckgenommen .vorformatiert { text-decoration: line-through; }

/* Wortlaut vor der ersten Aenderung, unter der Nachricht */
.ursprung { white-space: normal; margin-top: .35rem; }

.table { --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-hover-bg: rgba(23, 18, 56, .035); }
.table > :not(caption) > * > * { border-color: var(--kante); }

.filter-leiste { display: flex; gap: .4rem; flex-wrap: wrap; }
.filter-leiste a {
  text-decoration: none;
  font-size: .82rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--kante);
  color: var(--text-leise);
  background: #fff;
  transition: background .18s ease, color .18s ease;
}
.filter-leiste a:hover { background: var(--flaeche-4); color: var(--text); }
.filter-leiste a.aktiv { background: var(--verlauf); color: #fff; border-color: transparent; }

.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.vorformatiert { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Medien im Admin-Verlauf: klein halten, der Klick oeffnet das Original. */
.admin-medien {
  display: block;
  max-width: 16rem;
  max-height: 12rem;
  border-radius: .5rem;
}
.min-w-0 { min-width: 0; }

.dropdown-menu {
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--kante);
  border-radius: var(--rund-s);
  backdrop-filter: blur(18px);
  box-shadow: var(--schatten);
}
.dropdown-item { color: var(--text); border-radius: .5rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--flaeche-4); color: var(--text); }

/* ── Schmale Bildschirme: eine Spalte, je nach Zustand ─────────────── */

@media (max-width: 767.98px) {
  /* Randlos, aber nicht in die Aussparungen des Bildschirms hinein: die
     Seite steht auf viewport-fit=cover, links und rechts koennen im
     Querformat Kamera oder abgerundete Ecken liegen. */
  .chat-huelle {
    padding: 0;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    gap: 0;
  }
  /* Die Flaeche deckt den ganzen Schirm: kein Rahmen, keine Ecken, kein
     Schatten -- die wuerden nur als Striche am Bildschirmrand uebrig bleiben. */
  .chat-seitenleiste,
  .chat-haupt {
    width: 100%;
    flex: 0 0 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* Ohne Rand um die Flaechen deckt die Seitenleiste den ganzen Schirm --
     dann soll sie genauso ruhig weiss sein wie der Verlauf. */
  .chat-seitenleiste { background: #fff; }
  .chat-huelle .chat-haupt { display: none; }
  .chat-huelle.chat-offen .chat-seitenleiste { display: none; }
  .chat-huelle.chat-offen .chat-haupt { display: flex; }

  /* Am Telefon ist die Hoehe knapp: Kopfzeilen und Verlauf duenner polstern,
     damit mehr Nachrichten sichtbar bleiben. Oben kommt die Statusleiste dazu,
     wenn die Seite vom Startbildschirm aus randlos laeuft. */
  .seitenleiste-kopf,
  .chat-kopf {
    padding: .7rem .8rem;
    padding-top: calc(.7rem + env(safe-area-inset-top));
  }
  .suchfeld { padding: .6rem .75rem; }
  .kontakt-liste { padding: .3rem .45rem 1rem; }
  .chat-verlauf { padding: 1rem .8rem .4rem; }
  .blase { max-width: 88%; }

  /* Knoepfe in den Kopfzeilen bleiben mit dem Finger treffbar. */
  .seitenleiste-kopf .btn-sm,
  .chat-kopf .btn-sm { min-width: 2.25rem; min-height: 2.25rem; }

  /* Emojileiste: eine Zeile, die man seitlich schiebt. Umgebrochen belegte sie
     zwei Zeilen und nahm dem Verlauf gut 30 Pixel Hoehe weg. */
  .emoji-leiste {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: .35rem;
  }
  .emoji-leiste::-webkit-scrollbar { display: none; }
  .emoji-leiste button { flex: 0 0 auto; padding: .3rem .4rem; font-size: 1.2rem; }

  /* Vier Knoepfe neben dem Eingabefeld: auf schmalen Schirmen etwas kleiner
     und enger, sonst bleibt kaum Platz zum Schreiben. */
  .chat-eingabe {
    padding: .55rem .6rem calc(.7rem + env(safe-area-inset-bottom));
  }
  .eingabe-zeile { gap: .3rem; }
  .senden-knopf, .anhang-knopf, .rund-knopf { width: 2.4rem; height: 2.4rem; font-size: 1rem; }
  /* Ohne min-width: 0 haelt das Feld seine Inhaltsbreite und drueckt die
     Knoepfe aus der Zeile. */
  .eingabe-zeile textarea { min-width: 0; padding: .55rem .85rem; }

  /* Hinweise unter die Kopfzeile: unten lagen sie genau ueber der Eingabezeile,
     ganz oben ueber Name und Zurueck-Knopf. Sie duerfen die Bildschirmbreite
     nicht sprengen, deshalb feste Raender und kein Pillenrund mehr, sobald der
     Text umbricht. */
  .toast-behaelter {
    top: calc(4.5rem + env(safe-area-inset-top));
    bottom: auto;
    left: .75rem;
    right: .75rem;
    transform: none;
    align-items: center;
  }
  .hinweis { border-radius: 1rem; max-width: 100%; text-align: center; }
}

/* Sehr schmale Telefone: vier Knoepfe und ein Textfeld gehen in einer Zeile
   nicht mehr auf -- bei 320 Pixeln blieben dem Feld 128 davon, der Platzhalter
   brach um und wurde abgeschnitten. Also Feld nach oben, Knoepfe darunter. */
@media (max-width: 374.98px) {
  .eingabe-zeile { flex-wrap: wrap; row-gap: .4rem; }
  .eingabe-zeile textarea { flex: 1 1 100%; order: 1; }
  .anhang-knopf,
  .rund-knopf { order: 2; }
  .senden-knopf { order: 3; margin-inline-start: auto; }
}

/* Sehr flache Fenster -- Telefon im Querformat oder aufgeklappte Tastatur:
   dann zaehlt jede Zeile Verlauf, die Emojis kommen ohnehin von der Tastatur. */
@media (max-width: 767.98px) and (max-height: 430px) {
  .emoji-leiste { display: none; }
  .seitenleiste-kopf,
  .chat-kopf {
    padding: .5rem .8rem;
    padding-top: calc(.5rem + env(safe-area-inset-top));
  }
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt sie auch
   hier nicht. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── Schreibrichtung rechts-nach-links ─────────────────────────────── */
/* Das meiste spiegelt durch Flexbox und logische Eigenschaften von selbst.
   Uebrig bleiben Pfeile: die zeigen sonst in die falsche Richtung. */

[dir="rtl"] .pfeil,
[dir="rtl"] #zurueck { display: inline-block; transform: scaleX(-1); }

/* Arabisch ist eine verbundene Schrift: die Buchstaben eines Wortes haengen
   aneinander. Ein negativer Zeichenabstand -- den wir fuer die lateinische
   Schrift setzen -- reisst diese Verbindungen auseinander, das Wort zerfaellt
   in Einzelzeichen. Deshalb hier ueberall der normale Abstand, auch gegen die
   im HTML gesetzten Werte (daher !important). */
[dir="rtl"],
[dir="rtl"] * { letter-spacing: normal !important; }