/* ============================================================ */
/* 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;
}

/* -- Auswahl des aktiven Namens oben links (Select im Span .logo, siehe index.php). Gleiche Schrift wie das Logo.
      Sie nimmt nur den freien Platz ein, ein zu langer Name wird gekuerzt -- */
.user_wahl
{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  /* -- Abstand nach rechts zum Online-Punkt -- */
  margin-right: 12px;
  /* -- volle Hoehe des Span .logo (das wiederum die Hoehe der Kopfzeile hat, siehe #kontakte_kopf .logo) -- */
  align-self: stretch;
  font: inherit;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  padding: 4px 8px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border_input);
  border-radius: 8px;
  text-overflow: ellipsis;
}

/* -- 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;
}

/* -- 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;
}

.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;
}

/* -- 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;
}