/* ============================================================ */
/* EEMS-Layout: 2 Spalten (links Kontakte, rechts Chat), kein Seiten-Scroll */
/* ============================================================ */

/* ============================================================ */
/* Farb-Variablen (fuer Darkmode). ALLE Farben im Rest der Datei laufen    */
/* ueber diese Variablen (var(--name)), NICHT als feste Hex-Werte. Der      */
/* zweite Block (html[data-theme="dark"]) ueberschreibt dieselben Namen     */
/* mit den dunklen Gegenstuecken. Umschalter: einstellungen_ansicht.php     */
/* + js.js: darkmode_umschalten().                                         */
/* ============================================================ */
:root
{
  --bg: #fff;
  --bg_subtle: #eee;
  --bg_hover: #f5f5f5;
  --bg_strong: #f0f0f0;
  --bg_btn_hover: #ececec;
  --bg_active: #eef4ff;
  --bg_own: #dcf1ff;

  --text: #333;
  --text_secondary: #666;
  --text_muted: #999;
  --text_faint: #888;
  --strong: #000;
  --strong_contrast: #fff;

  --border: #eee;
  --border_input: #ccc;
  --border_column: #ddd;

  --accent: #0078d4;
  --accent_hover: #005fa3;

  --err: #c00;
  --err_border: #f3c2c2;
  --err_bg: #fff0f0;
  --close: #900;

  --like: #2e9e46;
  --dislike: #c0392b;

  --badge: #e53935;

  color-scheme: light;
}

html[data-theme="dark"]
{
  --bg: #1a1a1a;
  --bg_subtle: #262626;
  --bg_hover: #2e2e2e;
  --bg_strong: #333333;
  --bg_btn_hover: #3a3a3a;
  --bg_active: #16324a;
  --bg_own: #123a52;

  --text: #e6e6e6;
  --text_secondary: #b3b3b3;
  --text_muted: #999999;
  --text_faint: #9a9a9a;
  --strong: #fff;
  --strong_contrast: #000;

  --border: #333333;
  --border_input: #555555;
  --border_column: #3d3d3d;

  --accent: #3b9eff;
  --accent_hover: #2f86d6;

  --err: #ff6b6b;
  --err_border: #5c2b2b;
  --err_bg: #3a1f1f;
  --close: #d9534f;

  --like: #4cbf6a;
  --dislike: #ff6b6b;

  --badge: #c62828;

  color-scheme: dark;
}




/* ============================================================ */
/* Grundgeruest                                                 */
/* ============================================================ */
*
{
  box-sizing: border-box;
  font-family: arial;
}

html
{
  height: 100%;
  margin: 0;
  padding: 0;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
}

body
{
  height: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

input, textarea, select
{
  background: var(--bg);
  color: var(--text);
}

button
{
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
}

.hinweis
{
  padding: 20px;
  color: var(--text_muted);
  text-align: center;
}

.blindtext
{
  font-size: 13px;
  color: var(--text_secondary);
}

.gefahr
{
  color: var(--err);
}


/* ============================================================ */
/* Spalten: mobil 2 Screens nebeneinander (wischbar), Desktop      */
/* links feste Breite, rechts der Rest                             */
/* ============================================================ */
#spalten
{
  display: flex;
  flex-direction: row;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}


#spalte_kontakte, #spalte_rechts
{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@media (min-width: 800px)
{
  #spalte_kontakte
  {
    flex: 0 0 340px;
    width: 340px;
    border-right: 1px solid var(--border_column);
  }

  /* -- Desktop: die rechte Spalte ist hoechstens 600 Pixel breit. Rechts daneben bleibt Platz (z.B. fuer Werbung) -- */
  #spalte_rechts
  {
    flex: 1 1 auto;
    width: auto;
    max-width: 600px;
  }
}

/* ============================================================ */
/* Installierte PWA (ohne Browserleiste): Hoehe ueber Prozent statt vh/dvh.     */
/* Prozent bezieht sich auf das sichtbare Fenster. Im normalen Browser gilt      */
/* weiterhin die dvh-Regel oben, denn dort gibt es eine Browserleiste.           */
/* ============================================================ */
@media (display-mode: standalone)
{
  body,
  #spalten
  {
    height: 100%;
  }
}


/* ============================================================ */
/* Linke Spalte: Header + Suche + Kontakt-Kacheln                  */
/* ============================================================ */
#kontakte_kopf
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.logo
{
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
}

.kopf_knoepfe
{
  display: flex;
  align-items: center;
}

.kopf_knoepfe button
{
  margin-left: 6px;
  padding: 4px 8px;
  background: none;
  border: 1px solid var(--border_input);
  border-radius: 8px;
}

/* -- Oben links: Logo und Auswahl des Namens fuellen den Platz bis zum Online-Punkt. Die Knopfleiste rechts bleibt fest -- */
#kontakte_kopf .logo
{
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  /* -- streckt sich auf die volle Hoehe der Kopfzeile, damit die Auswahl so hoch ist wie die Icon-Buttons -- */
  align-self: stretch;
}

#kontakte_kopf .logo_bild
{
  flex: 0 0 auto;
}

#kontakte_kopf .kopf_knoepfe
{
  flex: 0 0 auto;
}

/* -- Aktiver Name oben links (Text im Span .logo, siehe index.php). Er nimmt nur den freien Platz ein,
      ein zu langer Name wird mit ... gekuerzt. Der Stift daneben oeffnet das Namen-Popup -- */
.user_wahl_name
{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: bold;
  color: var(--text);
  margin-right: 4px;
}

/* -- Stift neben dem aktiven Namen: ohne Rahmen, nur ein kleines Symbol (siehe index.php) -- */
.user_wahl_stift
{
  flex: 0 0 auto;
  margin-right: 12px;
  padding: 0 4px;
  border: none;
  background: none;
  font-size: 14px;
}

/* -- Logo links vor dem Namen (Bild im Span .logo, siehe index.php) -- */
.logo_bild
{
  width: 26px;
  height: 26px;
  margin-right: 8px;
  border-radius: 6px;
  vertical-align: middle;
}

/* -- SSE-Punkt: grau = keine Verbindung, gruen = Live-Verbindung steht -- */
#sse_punkt
{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  cursor: pointer; /* -- Klick zeigt den Online-Status (siehe js.js: sse_status_zeigen()) -- */
  background: var(--text_muted);
}

#sse_punkt.an
{
  background: var(--like);
}

#suche_zeile
{
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

#suche_zeile input
{
  width: 100%;
}

#kontakte_bereich
{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 4px;
}

/* -- Kacheln: immer 3 nebeneinander (flex-wrap statt grid, fuer alte Browser) -- */
.kontakt_raster
{
  display: flex;
  flex-wrap: wrap;
}

.kontakt_kachel
{
  position: relative; /* -- Bezugspunkt fuer das rote Badge (.kontakt_badge) -- */
  width: 33.33%;
  padding: 8px 4px;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
}

.kontakt_kachel:hover
{
  background: var(--bg_hover);
}

.kontakt_kachel.aktiv
{
  background: var(--bg_active);
}

/* -- rundes Profilbild wie bei WhatsApp; ohne Bild bleibt es ein leerer Kreis -- */
.kontakt_kreis
{
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg_subtle);
}

.kontakt_kreis img, .kopf_kreis img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kontakt_name
{
  display: block;
  margin-top: 6px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kontakt_trenner
{
  width: 100%;
  padding: 14px 6px 4px;
  font-size: 13px;
  color: var(--text_muted);
}

/* -- Abwesenheitsnotiz ganz oben im Chat (nachrichten_ansicht.php): kleiner Kasten mit Akzentrand -- */
.abwesend_hinweis
{
  margin: 8px 12px;
  padding: 6px 10px;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--bg_hover);
  font-size: 13px;
  color: var(--text_secondary);
  word-wrap: break-word;
}

/* -- Klickbarer Text "Abwesenheits-Notiz aktiv" im Chat-Kopf: oeffnet das Popup mit der Notiz (js.js: abwesenheit_popup_oeffnen()) -- */
.abwesend_text
{
  cursor: pointer;
  text-decoration: underline;
}

/* -- Text der Notiz im Popup: Zeilenumbrueche bleiben erhalten, lange Woerter brechen um -- */
.abwesenheit_popup_text
{
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* -- Zahnrad neben der EIGENEN Abwesenheitsnotiz im Chat-Kopf (nachrichten_ansicht.php). Nur in meinem Notizen-Chat -- */
.abwesend_zahnrad
{
  margin-left: 8px;
  padding: 0 4px;
  border: none;
  background: none;
  font-size: 15px;
}

/* -- Erkannte Termin-Angabe im Chat: unterstrichen, mit Akzentfarbe. Die Uhr daneben oeffnet dasselbe Popup
      (js.js: termin_links_einbauen()) -- */
.termin_link
{
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.termin_uhr
{
  margin-left: 3px;
  font-size: 13px;
  cursor: pointer;
}

/* -- Datum und Uhrzeit im Termin-Popup nebeneinander. Beide Felder teilen sich die Breite.
      min-width 0 verhindert, dass ein Eingabefeld die Zeile breiter macht -- */
.termin_zeile
{
  display: flex;
}

.termin_feld
{
  flex: 1 1 0;
  min-width: 0;
}

.termin_feld + .termin_feld
{
  margin-left: 8px;
}

/* -- Hinweis in der linken Spalte, solange eine Nachricht weitergeleitet wird (Anzeige per js.js) -- */
.weiterleiten_hinweis
{
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg_active);
  font-size: 14px;
}

/* -- rotes Badge mit der Anzahl ungelesener Nachrichten, sitzt oben rechts am Kreis -- */
.kontakt_badge
{
  position: absolute;
  top: 4px;
  left: calc(50% + 12px);
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--badge);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
}


/* ============================================================ */
/* Rechte Spalte: Kopf, Verlauf, Cockpit                          */
/* ============================================================ */
#rechts_kopf
{
  /* -- flex: 0 0 auto = der Kopf darf NICHT schrumpfen. Vorher schrumpfte er auf 56 px, und die
        Abwesenheitsnotiz lief darunter in den Verlauf hinein (der Verlauf kam danach und lag oben drauf) -- */
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  min-height: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

/* -- Abwesenheitsnotiz im festen Kopf: eigene Zeile unter Bild und Name, bleibt beim Scrollen stehen -- */
#rechts_kopf .abwesend_hinweis
{
  width: 100%;
  margin: 6px 0 0 0;
}

/* -- Lupe ganz rechts im Chat-Kopf (siehe nachrichten_ansicht.php) -- */
.kopf_lupe_box
{
  margin-left: auto;
}

/* -- Chat-Suche: im Kopf, wo sonst Bild und Name stehen. Das Suchfeld fuellt den Platz, rechts davon Pfeile und Zaehlung -- */
#chat_suche_zeile
{
  flex: 1;
  min-width: 0;
  align-items: center;
}

#chat_suche_zeile .popup_input
{
  flex: 1;
  min-width: 0;
  width: auto;
  margin-top: 0;
}

#chat_suche_zeile button
{
  margin-left: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border_input);
  border-radius: 8px;
  background: none;
}

#chat_suche_zeile span
{
  margin-left: 6px;
  min-width: 48px;
  text-align: right;
  font-size: 13px;
}

#rechts_inhalt
{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px;
}

.kopf_titel
{
  font-size: 20px;
  font-weight: bold;
}

/* -- Grosser Knopf "Jemanden einladen" ganz rechts oben im Einstellungs-Kopf (margin-left schiebt ihn nach rechts) -- */
.einladen_btn
{
  margin-left: auto;
  padding: 8px 14px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: var(--strong_contrast);
  font-size: 16px;
  font-weight: bold;
}

/* -- Vorschau im Einladen-Popup: Bild, Satz und Profiltext untereinander, mittig -- */
.einladen_vorschau
{
  text-align: center;
}

.einladen_vorschau .kontakt_kreis
{
  width: 96px;
  height: 96px;
  margin-bottom: 10px;
}

.einladen_satz
{
  font-weight: bold;
}

.einladen_profil
{
  margin-bottom: 12px;
  word-wrap: break-word;
}

/* -- QR-Code unter dem Teilen-Knopf im Einladen-Popup: mittig, mit etwas Abstand. Der Code hat einen weissen Rand von der Bibliothek -- */
/* -- Weisser Rahmen rund um den QR-Code (ca. 1 cm = 36 px). Im Darkmode ist sonst der schwarze Hintergrund
      direkt am Code, und dann liest die Kamera ihn schlecht. Die Box passt sich an den Code an (display: table) -- */
.einladen_qr
{
  display: table;
  margin: 14px auto 4px auto;
  padding: 36px;
  background: #ffffff;
  border-radius: 8px;
  text-align: center;
}

.einladen_qr canvas, .einladen_qr img
{
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.kopf_kontakt
{
  display: flex;
  align-items: center;
}

.kopf_kreis
{
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg_subtle);
}

/* -- Kopf des Chats ist anklickbar (oeffnet das Profil-Popup) -- */
.kopf_klickbar
{
  cursor: pointer;
}

/* -- Profilbild im Profil-Popup: gross und rund, Bild fuellt den Kreis (object-fit), ohne Bild nur der leere Kreis -- */
.profil_bild
{
  width: 160px;
  height: 160px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg_subtle);
}

.profil_bild img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -- Profiltext im Profil-Popup: Umbrueche bleiben, lange Woerter brechen um -- */
.profil_text
{
  margin-top: 12px;
  word-wrap: break-word;
}

.kopf_name
{
  font-weight: bold;
}

/* -- Nachrichten: links (empfangen) und rechts (eigene) -- */
/* -- Blase so breit wie ihr Inhalt, hoechstens 80% (max-width). Ohne width waere sie als Blockelement immer 80% breit -- */
.nachricht
{
  max-width: 80%;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg_strong);
  cursor: pointer;
  word-wrap: break-word;
}

/* -- kurzes Blinken einer Nachricht, z.B. wenn sie aus der Prio-Liste angesprungen wird (siehe js.js: nachricht_zeigen()) -- */
@keyframes nachricht_blinken
{
  0%, 100% { background: var(--bg_strong); }
  50% { background: var(--accent); }
}

.nachricht_blinkt
{
  animation: nachricht_blinken 0.5s 3;
}

.nachricht.eigen
{
  margin-left: auto;
  background: var(--bg_own);
}

.nachricht_text
{
  white-space: pre-wrap;
}

/* -- Markdown in Textblasen (js.js: md_zu_html()). Ueberschriften: # gross, ## mittel, ### klein -- */
.md_h1
{
  font-size: 18px;
  font-weight: bold;
  margin: 4px 0;
}

.md_h2
{
  font-size: 16px;
  font-weight: bold;
  margin: 3px 0;
}

.md_h3
{
  font-size: 15px;
  font-weight: bold;
  margin: 2px 0;
}

/* -- Listenpunkt (Punkt oder Nummer): eingerueckt --  */
.md_punkt
{
  padding-left: 14px;
}

/* -- Code in einer Zeile: Schrift mit fester Breite, leicht hinterlegt -- */
.md_code
{
  font-family: monospace;
  padding: 0 3px;
  border-radius: 3px;
  background: var(--bg_subtle);
}

/* -- Links in Textblasen (js.js: md_links()): Akzentfarbe, lange Adressen duerfen umbrechen -- */
.nachricht_text a
{
  color: var(--accent);
  word-break: break-all;
}

/* -- Zitatblock oben in einer Antwort: kleiner Kasten mit farbigem Rand. Ein Tipp springt zum Original -- */
.zitat_block
{
  margin-bottom: 6px;
  padding: 4px 8px;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--bg_hover);
  font-size: 13px;
  cursor: pointer;
  overflow: hidden;
}

.zitat_name
{
  display: block;
  font-weight: bold;
  color: var(--text_secondary);
}

.zitat_text
{
  display: block;
  color: var(--text_secondary);
  word-wrap: break-word;
}

/* -- Antwort-Leiste direkt ueber dem Cockpit: links der Ausschnitt, rechts das Kreuz zum Abbrechen -- */
.antwort_leiste
{
  align-items: center;
  margin-bottom: 6px;
  padding: 6px 8px;
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--bg_active);
  font-size: 13px;
}

.antwort_text
{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nachricht_bild, .nachricht_video
{
  display: block;
  max-width: 100%;
  border-radius: 8px;
}

.nachricht_audio
{
  max-width: 100%;
}

.nachricht_zeit
{
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text_faint);
  text-align: right;
}

/* -- Fuss unter jeder Nachricht in EINER Zeile: Prio-Marke links, rechts Lesezeichen und Zeitangabe.
      Der Abstand nach oben kommt vom Fuss, darum hat die Zeitangabe darin keinen eigenen Abstand -- */
.nachricht_fuss
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

/* -- Prio-Marke im Fuss steht links am Rand, ohne den Abstand von der Zeile darueber -- */
.nachricht_fuss .prio_badge
{
  margin-left: 0;
}

/* -- rechte Gruppe im Fuss: Lesezeichen und Zeit nebeneinander, ganz rechts -- */
.nachricht_fuss_rechts
{
  display: flex;
  align-items: center;
  margin-left: auto;
}

.nachricht_fuss .nachricht_zeit
{
  margin-top: 0;
}

/* -- Lesezeichen: diese Nachricht bleibt bestehen (keine Loeschung nach der Frist). Steht links neben der Zeit -- */
.nachricht_merk
{
  margin-right: 6px;
  font-size: 12px;
}

/* -- Video-Vorschau (YouTube und TikTok): Vorschaubild mit Play-Knopf in der Mitte. Ein Klick oeffnet das Video in einem neuen Fenster -- */
.video_vorschau
{
  position: relative;
  display: block;
  margin-top: 6px;
  border-radius: 8px;
  overflow: hidden;
}

.video_vorschau img
{
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}

/* -- Play-Knopf: runder dunkler Kreis, genau in der Mitte des Vorschaubildes -- */
.video_play
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  line-height: 54px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 22px;
  text-align: center;
}

.sound_knopf,
.md_button
{
  padding: 6px 10px;
  border: 1px solid var(--border_input);
  border-radius: 8px;
  background: var(--bg_subtle);
}

.prio_badge
{
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 11px;
  background: var(--accent);
  color: var(--strong_contrast);
}

/* -- Prio-Liste -- */
.prio_eintrag
{
  padding: 10px 6px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.prio_vorschau
{
  margin-top: 4px;
  color: var(--text_secondary);
  word-wrap: break-word;
}

/* -- Einstellungen -- */
.einstellungen_inhalt
{
  padding: 4px 6px;
}

.einstellung_zeile
{
  display: block;
  padding: 8px 0;
}

/* -- API-Key in den Einstellungen (einstellungen_ansicht.php): kleines Feld, daneben die Icon-Knoepfe in einer Reihe.
      Das Feld nimmt nur den freien Platz ein, die Knoepfe bleiben rechts daneben -- */
.api_key_zeile
{
  display: flex;
  align-items: center;
  padding: 8px 0;
}

/* -- Der Key selbst: klein und schmal. Hoehere Spezifitaet als .popup_input, damit die volle Breite entfaellt -- */
.api_key_zeile .api_key_feld
{
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin-top: 0;
  padding: 4px 6px;
  font-size: 12px;
  font-family: monospace;
}

/* -- eigener Quick-Text in den Einstellungen: Text, direkt daneben ein kleiner Muelleimer (siehe einstellungen_ansicht.php) -- */
.quick_zeile
{
  display: flex;
  align-items: center;
  padding: 8px 0;
}

/* -- kleine Icon-Knoepfe ohne Rahmen und ohne volle Breite: Muelleimer (Quick-Text, Textfeld) und Zahnrad (Quick-Text-Fenster) -- */
.muell_btn, .zahnrad_btn
{
  margin-left: 8px;
  padding: 0 4px;
  border: none;
  background: none;
  cursor: pointer;
}

.details_untertitel
{
  margin-top: 18px;
  font-weight: bold;
}

/* -- Akkordeon: Klick auf die Ueberschrift (summary) klappt den Inhalt auf oder zu -- */
.akkordeon_kopf
{
  cursor: pointer;

  /* -- Wiederholtes Klicken soll den Text NICHT markieren (Safari/Chrome mit Prefix, dann Standard) -- */
  -webkit-user-select: none;
  user-select: none;
}

.akkordeon_inhalt
{
  padding: 4px 0 8px 0;
}

/* -- Codebeispiele der API-Anleitung: Zeilen umbrechen, damit nichts seitlich aus dem Fenster laeuft -- */
.api_code
{
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 12px;
}

/* -- Blockier-Symbol: links oben in der Kachel (Kontaktliste) und neben dem Namen im Chat-Kopf -- */
.kachel_blockiert
{
  position: absolute;
  top: 4px;
  left: calc(50% - 44px);
  font-size: 16px;
}

.blockiert_zeichen
{
  margin-left: 6px;
  font-size: 16px;
}

/* -- Stumm-Symbol: links oben in der Kachel, zwischen Blockier-Symbol und Badge; im Chat-Kopf neben dem Namen -- */
.kachel_stumm
{
  position: absolute;
  top: 4px;
  left: calc(50% - 20px);
  font-size: 16px;
}

.stumm_zeichen
{
  margin-left: 6px;
  font-size: 16px;
}

/* -- Startseite fuer Besucher ohne Anmeldung (startseite.php). Liegt im Spalten-Container und scrollt selbst -- */
.start_seite
{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 24px 16px;
  text-align: center;
  scroll-snap-align: start;
}

.start_kopf
{
  /* -- Name der App: groß, damit er neben dem Logo wirkt (Titel darunter ist 30 px) -- */
  font-size: 40px;
  line-height: 1.1;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--strong);
}

/* -- Kopf der Startseite: Logo und Name untereinander, beides mittig.
      Flex mit Spalte, damit das Logo waagerecht zentriert wird -- */
.start_kopf_zeile
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* -- Grosses Logo auf der Startseite (Bild in .start_kopf_zeile), mit Abstand zum Namen darunter -- */
.start_logo
{
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  margin: 0 0 10px 0;
  border-radius: 20px;
}

.start_hero
{
  padding: 40px 8px 16px;
}

.start_titel
{
  margin: 0 0 12px;
  font-size: 30px;
  line-height: 1.2;
  color: var(--strong);
}

.start_untertitel
{
  margin: 0 0 24px;
  font-size: 16px;
  color: var(--text_secondary);
}

.start_knopf
{
  display: inline-block;
  padding: 14px 36px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.start_knopf:hover
{
  background: var(--accent_hover);
}

/* -- Vier Karten als 2 x 2: zwei nebeneinander, zwei untereinander (Flex statt Inline-Blocks, damit kein Leerraum umbricht) -- */
.start_karten
{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 560px;
  margin: 28px auto 0 auto;
  text-align: left;
}

.start_karte
{
  width: calc(50% - 6px);
  margin-bottom: 12px;
  padding: 16px 12px;
  box-sizing: border-box;
  border-radius: 12px;
  background: var(--bg_subtle);
}

.start_karte_icon
{
  font-size: 28px;
  margin-bottom: 6px;
}

.start_karte p
{
  margin: 6px 0 0 0;
  font-size: 13px;
  color: var(--text_secondary);
}

.start_einladung
{
  max-width: 360px;
  margin: 8px auto 0 auto;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 12px;
  background: var(--bg_active);
}

.start_einladung .kontakt_kreis
{
  margin-bottom: 8px;
}

.start_einladung_text
{
  margin: 0;
  font-size: 16px;
  color: var(--text);
}

.start_fuss
{
  margin-top: 24px;
  padding-bottom: 24px;
}

/* -- Impressum-Link unten rechts auf der Startseite (startseite.php) -- */
.start_impressum
{
  padding-bottom: 8px;
  text-align: right;
}

/* -- Eigene Seite impressum.php: schmale Spalte, Texte linksbuendig, Seite scrollt selbst -- */
.impressum_seite
{
  box-sizing: border-box;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px;
  text-align: left;
}

.impressum_titel
{
  margin: 8px 0 16px 0;
  font-size: 24px;
  color: var(--strong);
}

.koppel_code_anzeige
{
  margin-top: 8px;
  padding: 10px;
  border: 1px dashed var(--border_input);
  border-radius: 8px;
  font-family: monospace;
  word-break: break-all;
}

/* -- Cockpit-Grid unten: daumenfreundliche Zeilen -- */
#rechts_eingabe
{
  padding: 8px;
  border-top: 1px solid var(--border);
}

.cockpit_zeile
{
  display: flex;
  margin-bottom: 6px;
}

.cockpit_zeile button
{
  flex: 1 1 0;
  margin: 0 3px;
  padding: 14px 4px;
  border: 1px solid var(--border_input);
  border-radius: 10px;
  background: var(--bg_subtle);
}

.cockpit_zeile.zwei button
{
  flex: 1 1 0;
}



/* ============================================================ */
/* Popups und Bottom-Sheets                                       */
/* ============================================================ */

/* -- Der Hintergrund hinter ALLEN Popups und Sheets bleibt hell (kein Abdunkeln). Der Overlay-Bereich
      faengt trotzdem die Klicks, damit ein Klick daneben das Fenster schliesst -- */
.popup_overlay
{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.popup_box
{
  width: 92%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
}

.popup_kopf
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: bold;
}

.popup_liste
{
  padding: 14px;
}

.popup_feld_label
{
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
}

.popup_input
{
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid var(--border_input);
  border-radius: 8px;
  font-size: 15px;
}

/* -- Textfeld mit Muelleimer: der Knopf sitzt oben rechts in der Ecke des Feldes (Sprechen/Text-Popup) -- */
.feld_leeren_wrap
{
  position: relative;
}

.feld_leeren_knopf
{
  position: absolute;
  top: 12px;
  right: 6px;
  font-size: 16px;
}

/* -- Platz rechts im Textfeld, damit der Text nicht unter dem Muelleimer steht -- */
.feld_mit_leeren
{
  padding-right: 40px;
}

/* -- Prio-Auswahl im Popup: kleine Knoepfe, der gewaehlte Knopf ist farbig markiert -- */
.prio_wahl
{
  margin-top: 4px;
  margin-bottom: 12px;
}

.prio_wahl_knopf
{
  margin: 0 4px 4px 0;
  padding: 4px 8px;
  border: 1px solid var(--border_input);
  border-radius: 6px;
  background: var(--bg);
  font-size: 13px;
}

.prio_wahl_knopf.aktiv
{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--strong_contrast);
}

.popup_x
{
  border: none;
  background: none;
  font-size: 18px;
}

.popup_fehler
{
  display: block;
  margin-top: 8px;
  color: var(--err);
}

.popup_warnung
{
  color: var(--err);
  font-size: 14px;
}

.block_btn
{
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid var(--border_input);
  border-radius: 8px;
  background: var(--bg_subtle);
}

.link_btn
{
  display: block;
  margin: 8px 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  text-align: left;
}

.avatar_vorschau
{
  display: block;
  width: 80px;
  height: 80px;
  margin-top: 8px;
  border-radius: 50%;
  object-fit: cover;
}

/* -- Bottom-Sheet (Sounds, Quick-Text): ohne Abdunkeln, das Fenster steht direkt ueber der Cockpit-Leiste -- */
.sheet_overlay
{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}

.sheet_box
{
  width: 100%;
  max-width: 520px;
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
}

/* -- Fenster, die NICHT mittig stehen: Position setzt js.js (popup_ueber_leiste() bzw. popup_unter_kopf()).
      Gilt fuer Sheets, das Sprechen/Text-Fenster und das Profil. Die Breite und Hoehe kommen dann aus js.js -- */
.box_frei
{
  position: absolute;
  max-width: none;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* -- Text-Popup bei offener Tastatur (js.js: sprech_fokus_an()): Kopf mit X bleibt, Hinweis fliegt raus,
      Fehlermeldungen bleiben sichtbar. Ohne Scrollen -- */
.nur_eingabe
{
  overflow: hidden;
}

.nur_eingabe #sprech_hinweis
{
  display: none;
}

/* -- Bei offener Tastatur kein Abstand unter dem Senden-Knopf, damit er direkt ueber der Tastatur sitzt -- */
.nur_eingabe .popup_liste
{
  padding-bottom: 6px;
}

.nur_eingabe .block_btn
{
  margin-bottom: 0;
}

.sheet_raster
{
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

.sheet_raster button
{
  width: 50%;
  margin: 0;
  padding: 16px 6px;
  border: 1px solid var(--border_input);
  border-radius: 10px;
  background: var(--bg_subtle);
}

/* -- Fuss unter dem Raster im Quick-Text-Fenster: das Zahnrad steht rechts unten -- */
.sheet_fuss
{
  text-align: right;
  padding: 0 10px 10px 10px;
}

/* -- Quick-Texte und Sounds: jeder Button nur so breit wie sein Text, mit Abstand. Passen so mehr nebeneinander -- */
.quick_raster button, .sounds_raster button
{
  width: auto;
  margin: 4px;
  padding: 12px 14px;
}

/* -- Smiley-Popup: viele Smileys im Raster. Jeder Knopf nur so gross wie das Emoji, das Emoji gross genug zum Antippen -- */
.smiley_raster button
{
  width: auto;
  margin: 2px;
  padding: 6px 8px;
  font-size: 24px;
}

.bild_vollbild_popup
{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}

.bild_vollbild_popup img
{
  max-width: 100%;
  max-height: 100%;
}

.bild_vollbild_x
{
  position: absolute;
  top: 12px;
  right: 12px;
  color: #fff;
}

/* -- Upload-Balken unten: zeigt den Fortschritt beim Hochladen (Bild, Video) -- */
.upload_fortschritt
{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 20px;
  width: 90%;
  max-width: 360px;
  margin: 0 auto;
  padding: 10px 12px;
  border: 1px solid var(--border_input);
  border-radius: 10px;
  background: var(--bg);
  z-index: 1200;
}

.upload_text
{
  display: block;
  font-size: 13px;
  color: var(--text_secondary);
}

.upload_balken
{
  height: 8px;
  margin-top: 6px;
  border-radius: 4px;
  background: var(--bg_strong);
  overflow: hidden;
}

.upload_fuellung
{
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 0.2s;
}