/***********************************************************************************************/
/* Chat - eigenes Stylesheet ("Soft & rund", siehe CLAUDE.md/termine.css als Vorbild)            */
/* Norbert Hohmann / 31.08.2026                                                                 */
/*                                                                                             */
/* Keine eigene Farbskala noetig (anders als todoliste.css's Prioritaets-Farben/notizen.css's     */
/* Zettelfarben) - eine Chat-Nachricht traegt keine bedeutungstragende Farbe, nur "von mir" vs.   */
/* "von jemand anderem". Layout ist Sidebar+Fenster wie kichat/index.php, aber in der neueren      */
/* "Soft & rund"-Optik statt kichats aelterer Bootstrap-Karten-Optik.                             */
/***********************************************************************************************/

:root {
	/* dunkler Standardwert (bare :root = dunkel, siehe theme.css-Konvention) */
	--chat-karte-schatten: 0 18px 38px -20px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.3);
	--chat-zeile-schatten: 0 10px 22px -16px rgba(0,0,0,.55);
	/* Fund vom 02.09.2026: eingehende Blasen lagen bisher auf --input-bg, das im Hellmodus mit
	   --card-bg identisch ist (beide #ffffff) und im Dunkelmodus nur eine Nuance daneben liegt -
	   kaum von der eigenen Karte zu unterscheiden. Eigenes, sichtbar abgesetztes Token. */
	--chat-blase-eingehend: #262c40;
}
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--chat-karte-schatten: 0 16px 34px -18px rgba(var(--accent-rgb),.22), 0 2px 8px rgba(30,42,61,.06);
		--chat-zeile-schatten: 0 10px 24px -16px rgba(30,42,61,.16);
		--chat-blase-eingehend: #eef2fa;
	}
}
:root[data-theme="dark"] {
	--chat-karte-schatten: 0 18px 38px -20px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.3);
	--chat-zeile-schatten: 0 10px 22px -16px rgba(0,0,0,.55);
	--chat-blase-eingehend: #262c40;
}
:root[data-theme="light"] {
	--chat-karte-schatten: 0 16px 34px -18px rgba(var(--accent-rgb),.22), 0 2px 8px rgba(30,42,61,.06);
	--chat-zeile-schatten: 0 10px 24px -16px rgba(30,42,61,.16);
	--chat-blase-eingehend: #eef2fa;
}

/* --- Seitengeruest ---------------------------------------------------------------------- */
/* Bis 07.09.2026 setzte KEINE der fuenf Chat-Seiten body/.rahmen - anders als termine/todolist/
   notizen/alben/dokumente, die das je in einem eigenen <style> tun. Folge: <body> blieb voellig
   ungestylt, also weisser Browser-Hintergrund mit schwarzem Text, waehrend Karten und
   Sprechblasen darauf korrekt dunkel waren. Genau das war Norberts Befund am 07.09.2026: "nur
   einzelne Elemente sind dunkel". Die Regeln stehen hier statt fuenfmal inline - chat.css wird
   ohnehin von allen fuenf Seiten geladen, und ein Bereich mit eigenem Stylesheet hat keinen Grund,
   sein Grundgeruest zu duplizieren. */
body { background-color:var(--body-bg); font-family:'Segoe UI',Arial,sans-serif; color:var(--text-main); margin:0; padding:1.5rem 1rem; }
.rahmen { max-width:min(95vw, 70rem); margin:0 auto; }

/* Eingabezeile immer am unteren Fensterrand (07.09.2026, Norberts zweiter Wunsch) - vorher hing
   sie direkt unter dem Verlauf und stand bei einem leeren Chat mitten auf der Seite, weil
   .verlauf nur min-height:14rem hoch war. Statt die Zeile per position:fixed anzunageln (was mit
   der am Handy bereits fixierten Rauminfo-Schublade kollidieren wuerde), traegt die
   Gespraechsspalte jetzt die Fensterhoehe und .verlauf nimmt den uebrigen Platz ein - das
   uebliche Chat-Layout, bei dem der Verlauf in sich scrollt statt die ganze Seite.

   Die Klasse sitzt bewusst am <body> und nur auf den beiden Seiten mit einer Konversation
   (chat/index.php, chat/raum.php) - beitreten.php/oeffentlich.php/raumBeitreten.php sind
   gewoehnliche, mitwachsende Seiten und sollen es bleiben.

   ECHTER FEHLER, gefunden erst am 24.09.2026 an einem echten Handy (Norberts Screenshot: Kopf UND
   Eingabezeile scrollen mit weg, nur einzelne Sprechblasen sind noch zu sehen) - min-height ist
   eine UNTERGRENZE, keine Obergrenze. Sobald der Verlauf mehr Platz braucht, als eine Bildschirm-
   hoehe hergibt, waechst <body> also einfach ueber den sichtbaren Bereich hinaus, und die ganze
   Seite bekommt einen eigenen Scrollbalken - genau das Gegenteil von dem, was die Flex-Kette
   darunter (min-height:0 an jedem Kind bis hinunter zu .verlauf) eigentlich bewirken soll. Erst
   height:100dvh setzt eine echte Obergrenze, an der die Kette greift und NUR NOCH .verlauf
   scrollt. box-sizing:border-box ist dabei kein Kosmetik-Detail: body{padding:1.5rem 1rem} oben
   zaehlt sonst ON TOP dieser Hoehe dazu, und genau dieser Rest waere - kleiner, aber unveraendert
   vorhanden - derselbe Fehler geblieben. overflow:hidden ist das Sicherheitsnetz: <body> selbst
   darf gar nicht mehr scrollen koennen, ganz gleich was darunter passiert. height:100vh VOR
   height:100dvh als Ruecksicherung fuer Browser ohne dvh-Unterstuetzung - kaskadiert von selbst,
   keine Browserweiche noetig. */
body.chat-vollhoehe {
	height:100vh;
	height:100dvh;
	box-sizing:border-box;
	overflow:hidden;
	display:flex; flex-direction:column;
}
body.chat-vollhoehe .rahmen { flex:1; min-height:0; width:100%; display:flex; flex-direction:column; }
/* Vierter Fund, 24.09.2026 (Norberts genaue Rueckmeldung: "gar nichts scrollt mehr, auch nicht im
   Nachrichtenbereich" - die vorherigen drei Korrekturen an body/.chat-haupt/.chat-sidebar allein
   reichten am DESKTOP nicht). .chat-layout ist dort ein CSS-Grid mit genau EINER impliziten
   Zeile ohne eigenes grid-template-rows - die Standard-Grossenermittlung fuer eine solche Zeile
   folgt NICHT einfach "fuelle die verfuegbare Hoehe", sondern kann sich am Inhalt (87 Nachrichten
   in .verlauf, die ganze Chat-Liste) orientieren und die Zeile darueber hinaus aufblaehen - der
   bekannte "Grid-Blowout": min-height:0 an den Grid-KINDERN (.chat-haupt/.chat-sidebar, siehe
   unten) nimmt zwar IHNEN die automatische Mindestgroesse, entscheidet aber nicht zwingend
   dasselbe fuer die ZEILE selbst. grid-template-rows:minmax(0,1fr) raeumt diese Unklarheit ganz
   weg: EIN Zeilen-Track, "1fr" nimmt IMMER die volle verfuegbare Hoehe (kein Rateraten ueber
   auto-Grossenermittlung noetig), "minmax(0, ...)" erlaubt ihm, dafuer unter den Inhalt zu
   schrumpfen - genau das robuste, in der CSS-Welt uebliche Rezept gegen genau dieses Problem. */
body.chat-vollhoehe .chat-layout { flex:1; min-height:0; grid-template-rows:minmax(0,1fr); }
/* flex:1 ist hier das eigentlich fehlende Stueck (24.09.2026, Norberts zweiter Screenshot nach
   dem height:100dvh-Fund oben: Kopf und Eingabezeile stehen jetzt fest, aber darunter bleibt ein
   grosser leerer Streifen). .chat-haupt ist am Handy (siehe @media unten) das einzige Flex-Kind
   von .chat-layout - aber OHNE flex-grow schrumpft ein Flex-Kind auf seinen tatsaechlichen Inhalt
   zusammen, statt die volle verfuegbare Hoehe zu beanspruchen; bei einem kurzen Gespraech blieb
   dadurch unten Platz uebrig, den niemand beansprucht hat, obwohl .chat-layout selbst laengst
   korrekt auf Fensterhoehe begrenzt war. Am Desktop (>= 900px) ist .chat-layout ein CSS-Grid statt
   Flexbox - dort strecken sich Grid-Kinder schon von sich aus ueber die volle Zeilenhoehe
   (align-items:stretch ist dort die Vorgabe, anders als bei Flexbox), das flex:1 hier wird von
   einem Grid-Kind schlicht ignoriert und aendert am Desktop nichts. */
body.chat-vollhoehe .chat-haupt { flex:1; min-height:0; }
body.chat-vollhoehe .chat-haupt__gespraech { flex:1; min-height:0; }
/* min-height:0 ist hier das Entscheidende: ein Flex-Kind schrumpft ohne das nicht unter seinen
   Inhalt, der Verlauf wuerde also statt zu scrollen die Eingabezeile aus dem Bild schieben. */
body.chat-vollhoehe .verlauf { flex:1 1 auto; min-height:0; max-height:none; }

/* Fund vom 24.09.2026, Norberts drittes Feedback zu dieser Baustelle - "im Browser am PC kann ich
   nicht mehr scrollen": overflow:hidden auf <body> (siehe oben) nimmt der ganzen Seite zu Recht
   das eigene Scrollen ab, ABER die Chat-LISTE (.chat-sidebar - "Neuer Chat"-Karte + alle eigenen
   Chats) hatte selbst nie ein eigenes Scrollen bekommen, weil sie bis jetzt einfach auf die
   Seite selbst mitgewachsen ist. Mit genug Chats in der Liste UND einem nicht sehr hohen
   Browserfenster war seither ein Teil der Liste schlicht abgeschnitten und unerreichbar - nicht
   nur am Handy, auch am Desktop (dort ein CSS-Grid-Kind, das sich zwar schon ueber die volle
   Zeilenhoehe streckt, aber ohne eigenes overflow-y genauso abgeschnitten haette). Dieselbe
   Behandlung wie .verlauf: eigener Scrollbereich statt auf die Seite angewiesen zu sein. flex:1
   ist fuers Handy noetig (siehe .chat-haupt oben, derselbe Grund), am Desktop wieder wirkungslos. */
body.chat-vollhoehe .chat-sidebar { flex:1; min-height:0; overflow-y:auto; }

.karte { background:var(--card-bg); border:1px solid var(--border-soft); border-radius:24px; padding:1.6rem 1.4rem; margin:1.1rem 0; box-shadow:var(--chat-karte-schatten); }
.hinweis { color:var(--text-muted-custom); font-size:.9rem; }
/* [hidden] muss display:none behalten, auch wenn ein Element eine Layout-Klasse traegt - die
   seit Langem im Projekt dokumentierte Falle (Live-Spiele, dokumenteAnzeige.inc.php,
   todoliste.css, termine.css). Von Anfang an mitgefuehrt, nicht erst nachtraeglich gefunden. */
[hidden] { display:none !important; }

/* --- Anlegen-Formular (neuer Chat) --- */
.chat-neu-form { display:flex; flex-direction:column; gap:.6rem; }
.chat-neu-form .feld-box {
	display:flex; align-items:center; gap:.6rem;
	background:var(--input-bg); border:1.5px solid var(--border-soft); border-radius:16px;
	padding:.65rem .8rem;
}
.chat-neu-form .feld-box:focus-within { border-color:var(--accent); }
.chat-neu-form .feld-icon { flex:none; color:var(--text-muted-custom); }
.chat-neu-form .feld-eingabe { flex:1; min-width:0; border:none; background:none; padding:0; margin:0; font:inherit; font-weight:600; color:var(--text-main); }
.chat-neu-form .feld-eingabe:focus { outline:none; }
.chat-neu-form button[type=submit] {
	padding:.75rem 1.3rem; border:none; border-radius:999px;
	background:linear-gradient(180deg, var(--accent-hover), var(--accent));
	color:#fff; font-weight:700; cursor:pointer;
	box-shadow:0 10px 22px -10px rgba(var(--accent-rgb),.65);
}
.chat-neu-form button[type=submit]:hover { filter:brightness(1.08); }

/* --- Layout: Sidebar + Fenster, analog kichat/index.php aber "Soft & rund" --- */
.chat-layout { display:grid; grid-template-columns:minmax(190px,240px) 1fr; gap:1rem; margin-top:1rem; }
/* Ein anonymer Gast hat keine Sidebar (keine "Liste seiner Chats" - siehe index.php) - die
   einspaltige Variante fuellt die Breite, statt eine leere erste Spalte freizulassen. */
.chat-layout--ohne-sidebar { grid-template-columns:1fr; }
.chat-sidebar { display:flex; flex-direction:column; gap:.7rem; }
.chat-sidebar__titel { font-weight:700; font-size:.8rem; color:var(--text-muted-custom); text-transform:uppercase; letter-spacing:.03em; padding:0 .2rem; }
.chat-liste { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.chat-liste li a {
	display:flex; flex-direction:column; gap:.2rem; text-decoration:none; color:var(--text-main);
	border-radius:18px; border:1px solid var(--border-soft); background:var(--card-bg);
	padding:.75rem .9rem; box-shadow:var(--chat-zeile-schatten);
}
.chat-liste li.aktiv a { border-color:var(--accent); }
.chat-eintrag-titel { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-eintrag-meta { display:flex; gap:.5rem; font-size:.75rem; color:var(--text-muted-custom); }
.chat-eintrag-meta .badge { background:var(--tag-bg); color:var(--tag-text); border-radius:999px; padding:.1rem .5rem; }

/* "Fokus & Schublade" (02.09.2026): .chat-haupt haelt nur noch zwei Kinder -
   .chat-haupt__gespraech (Kopf+Verlauf+Eingabe, die eigentliche Konversation) und die
   Rauminfo-Schublade (.freigabe, siehe unten) - dadurch kann Letztere per Media Query zur
   Schublade (Handy) oder zur dritten Spalte (Desktop/Tablet) werden, ohne das aeussere
   Sidebar-Grid anzufassen. */
.chat-haupt { min-width:0; display:flex; flex-direction:column; gap:1rem; }
.chat-haupt__gespraech { min-width:0; display:flex; flex-direction:column; gap:.9rem; }
.chat-haupt__kopf { display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.chat-haupt__teilnehmer { font-size:.82rem; color:var(--text-muted-custom); }

/* --- Rauminfo-Schublade, wortgleiches <details>-Grundgeruest zu alben/album.php's
   <details class="freigabe"> - traegt seit 02.09.2026 zusaetzlich die Teilnehmerliste, nicht
   mehr nur den Einladungslink. Auf/Zu bleibt komplett nativ (<summary> als Klickflaeche), auch
   am Handy: zugeklappt zeigt <details> von sich aus nur die <summary>-Zeile, das ist bereits der
   "Peek"-Griff aus dem Mockup, ganz ohne eigenes JS. --- */
.freigabe { border-radius:18px; border:1px solid var(--border-soft); background:var(--card-bg); box-shadow:var(--chat-zeile-schatten); }
.freigabe summary { padding:.8rem 1rem; cursor:pointer; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:.6rem; list-style:none; }
.freigabe summary::-webkit-details-marker { display:none; }
.freigabe__zusammenfassung { display:flex; align-items:center; gap:.6rem; min-width:0; }
.freigabe__marke { font-size:.72rem; font-weight:700; border-radius:999px; padding:.15rem .6rem; background:var(--tag-bg); color:var(--text-muted-custom); }
.freigabe__marke.aktiv { background:var(--accent); color:#fff; }
/* Spiegel-Knopf in der Rauminfo-Zeile (24.09.2026, Norberts Wunsch: der obere Bereich war am
   Handy zu ineffizient genutzt) - nur am Handy sichtbar (siehe Media Query unten), wo
   .chat-haupt__kopf komplett entfaellt. Reiner Weiterleiter per JS (chat.js) an den ECHTEN Knopf
   dort - stopPropagation() dort verhindert, dass ein Klick zugleich die Schublade auf-/zuklappt
   (<summary> ist selbst schon die Klickflaeche fuer <details>). display:none als Vorgabe, weil
   .chat-haupt__kopf am Desktop/Tablet bestehen bleibt und dort niemand doppelt sehen soll. */
.freigabe__aktion-spiegel {
	display:none;
	flex:none; width:2rem; height:2rem; padding:0;
	align-items:center; justify-content:center;
	border:none; border-radius:10px; background:var(--tag-bg); color:var(--text-muted-custom);
	cursor:pointer;
}
.freigabe__aktion-spiegel svg { width:.95rem; height:.95rem; pointer-events:none; }
.freigabe__aktion-spiegel:hover { color:#e05555; }
.freigabe__inhalt { padding:0 1rem 1rem; display:flex; flex-direction:column; gap:.9rem; }
.freigabe-schalter { display:flex; align-items:center; gap:.5rem; }
.freigabe-link-zeile { display:flex; gap:.5rem; flex-wrap:wrap; }
.freigabe-link-zeile input {
	flex:1 1 14rem; min-width:0; border:1.5px solid var(--border-soft); border-radius:12px;
	background:var(--input-bg); color:var(--text-main); padding:.55rem .7rem; font:inherit;
}
.freigabe-link-zeile button {
	border:none; border-radius:999px; padding:.55rem 1rem; font-weight:700; cursor:pointer;
	background:var(--tag-bg); color:var(--text-main);
}
.freigabe-link-zeile button:hover { background:var(--accent); color:#fff; }

/* --- Teilnehmerliste innerhalb der Schublade --- */
.freigabe__label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted-custom); }
.freigabe-teilnehmer { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.freigabe-teilnehmer li { display:flex; align-items:center; gap:.55rem; font-size:.9rem; }
/* Bewusst KEIN personenspezifischer Farb-Hash wie bei den Nachrichten-Avataren (siehe chat.js) -
   der muesste sonst in PHP und JS identisch nachgebaut und synchron gehalten werden, nur fuer
   eine rein kosmetische Uebereinstimmung. Neutrale Initiale in den ohnehin vorhandenen Tag-Farben. */
.freigabe-teilnehmer__initiale {
	flex:none; width:1.8rem; height:1.8rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
	background:var(--tag-bg); color:var(--tag-text); font-weight:700; font-size:.78rem;
}

/* --- Nachrichtenverlauf --- */
.verlauf { display:flex; flex-direction:column; gap:.6rem; border-radius:24px; border:1px solid var(--border-soft); background:var(--card-bg); box-shadow:var(--chat-karte-schatten); padding:1rem; min-height:14rem; max-height:60vh; overflow-y:auto; }
.nachricht { max-width:min(80%, 34rem); display:flex; flex-direction:column; gap:.15rem; }
.nachricht.von-mir { align-self:flex-end; align-items:flex-end; }
/* .nachricht--folge: direkte Fortsetzung derselben Wortmeldung (siehe chat.js) - engerer Abstand
   nach oben, bei eingehenden Nachrichten zusaetzlich ohne sichtbaren Avatar/Namen (siehe unten). */
.nachricht--folge { margin-top:-.35rem; }
.nachricht__reihe { display:flex; align-items:flex-end; gap:.5rem; }
.nachricht__avatar {
	flex:none; width:1.7rem; height:1.7rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
	color:#fff; font-weight:700; font-size:.72rem;
}
.nachricht__avatar--platzhalter { visibility:hidden; }
.nachricht__gruppe { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.nachricht__absender { font-size:.72rem; font-weight:700; color:var(--text-muted-custom); padding:0 .3rem; }
/* Zeitangabe je Nachricht (02.09.2026) - klein, gedaempft, kursiv; unabhaengig von der Gruppierung
   (siehe chat.js), da einzelne Nachrichten innerhalb einer Gruppe zeitlich auseinanderliegen
   koennen, auch wenn Avatar/Name dort unterdrueckt sind. */
.nachricht__zeit { font-size:.68rem; font-style:italic; color:var(--text-muted-custom); padding:0 .3rem; }
.nachricht__blase { padding:.6rem .85rem; border-radius:16px; white-space:pre-wrap; overflow-wrap:anywhere; }
.nachricht.von-mir .nachricht__blase { background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
.nachricht.von-anderen .nachricht__blase { background:var(--chat-blase-eingehend); border:1px solid var(--border-soft); border-bottom-left-radius:4px; }
.nachricht__blase img { display:block; max-width:100%; border-radius:12px; margin-top:.2rem; }

/* Platzhalter einer geloeschten Nachricht (07.09.2026). Gestrichelter Rahmen ohne Fuellung, damit
   auf einen Blick erkennbar ist, dass hier etwas WAR - eine leere Blase in Akzentfarbe saehe wie
   ein Darstellungsfehler aus. Die Regel fuer eigene Nachrichten muss ausgeschrieben werden und
   dahinter stehen: .nachricht.von-mir .nachricht__blase hat drei Klassen und wuerde eine
   einklassige Modifikator-Regel sonst schlicht ueberstimmen (Akzentfarbe + weisse Schrift). */
.nachricht__blase--geloescht,
.nachricht.von-mir .nachricht__blase--geloescht,
.nachricht.von-anderen .nachricht__blase--geloescht {
	background:none; border:1px dashed var(--border-soft);
	color:var(--text-muted-custom); font-style:italic;
}

/* Loeschknopf sitzt in der Zeitzeile der eigenen Nachricht - unauffaellig, bis man hinsieht. */
.nachricht__zeit { display:flex; align-items:center; gap:.3rem; }
.nachricht__loeschen {
	flex:none; border:none; background:none; cursor:pointer; padding:0 .15rem; line-height:1;
	font-size:.95rem; color:var(--text-muted-custom); opacity:.55; font-style:normal;
}
.nachricht__loeschen:hover, .nachricht__loeschen:focus-visible { opacity:1; color:#e05555; }

/* --- Eingabezeile --- */
.chat-eingabe-form { display:flex; gap:.5rem; align-items:flex-end; flex-wrap:wrap; }
.chat-eingabe-form textarea {
	flex:1 1 12rem; min-height:2.9rem; max-height:8rem; resize:vertical;
	border:1.5px solid var(--border-soft); border-radius:16px; background:var(--input-bg);
	color:var(--text-main); padding:.65rem .85rem; font:inherit;
}
.chat-eingabe-form textarea:focus { outline:none; border-color:var(--accent); }
.chat-anhang-knopf {
	flex:none; width:2.9rem; height:2.9rem; display:flex; align-items:center; justify-content:center;
	border-radius:999px; border:1.5px solid var(--border-soft); background:var(--input-bg);
	color:var(--text-muted-custom); cursor:pointer;
}
.chat-anhang-knopf:hover { color:var(--accent); border-color:var(--accent); }
.chat-anhang-knopf.gefahr:hover { color:#e05555; border-color:#e05555; }
.chat-anhang-name { font-size:.78rem; color:var(--text-muted-custom); flex-basis:100%; }

/* --- Sprachnachrichten (06.09.2026, nur private Chats) --- */
/* Aufnahme laeuft: roter Rahmen/Farbe statt eines zweiten Icons - dieselbe Flaeche, ein klar
   anderer Zustand. Kein @keyframes-Pulsieren - respektiert prefers-reduced-motion implizit, weil
   es schlicht keine Bewegung gibt. */
.chat-anhang-knopf--aufnahme { color:#e05555; border-color:#e05555; background:rgba(224,85,85,.08); }
.chat-sprach-timer {
	flex:none; font-variant-numeric:tabular-nums; font-size:.85rem; color:#e05555; font-weight:600;
	align-self:center;
}
.chat-sprach-hinweis { font-size:.78rem; color:var(--text-muted-custom); flex-basis:100%; }
/* "X tippt ..."-Anzeige (01.10.2026). min-height reserviert von Anfang an etwas Platz, damit das
   Erscheinen/Verschwinden der Zeile die Eingabezeile nicht sichtbar nach oben/unten springen laesst. */
.chat-tippt-hinweis { font-size:.8rem; color:var(--text-muted-custom); min-height:1.1rem; padding:0 .1rem; }
.chat-sprach-vorschau {
	display:flex; align-items:center; gap:.6rem; margin-top:.6rem; padding:.5rem .7rem;
	border:1.5px solid var(--border-soft); border-radius:16px; background:var(--input-bg);
}
.chat-sprach-vorschau audio { flex:1 1 auto; min-width:0; height:2.2rem; }
.nachricht__sprach-dauer { display:block; font-size:.72rem; color:var(--text-muted-custom); margin-top:.15rem; }
.nachricht__blase audio { display:block; max-width:100%; margin-top:.2rem; }
.chat-eingabe-form button[type=submit] {
	flex:none; padding:.8rem 1.3rem; border:none; border-radius:999px;
	background:linear-gradient(180deg, var(--accent-hover), var(--accent));
	color:#fff; font-weight:700; cursor:pointer;
	box-shadow:0 10px 22px -10px rgba(var(--accent-rgb),.65);
}
.chat-eingabe-form button[type=submit]:disabled { opacity:.5; cursor:default; }

/* --- Aktionsknoepfe (Verlassen/Loeschen) --- */
.chat-aktionen { display:flex; gap:.4rem; }
.chat-aktion {
	flex:none; width:2.3rem; height:2.3rem; display:flex; align-items:center; justify-content:center;
	background:var(--tag-bg); border:none; cursor:pointer; border-radius:12px; color:var(--text-muted-custom);
}
.chat-aktion svg { width:1rem; height:1rem; pointer-events:none; }
.chat-aktion:hover { color:var(--accent); }
.chat-aktion.gefahr:hover { color:#e05555; }

.chat-fusszeile { margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--border-soft); text-align:center; }

/* "Fokus & Schublade": am Handy ist immer nur EINE Spalte sichtbar, nie beide untereinander wie
   vor 02.09.2026 - chat-layout--leer (siehe chat/index.php, gesetzt wenn kein Chat offen ist)
   entscheidet welche. .chat-layout--ohne-sidebar (Gast-Chat/oeffentlicher Raum) hat gar keine
   Sidebar und ist von dieser Umschaltung unberuehrt - dort ist .chat-haupt immer die einzige
   Spalte. */
@media (max-width: 720px) {
	/* Siebter Fund, 24.09.2026, per Screenshot belegt: zwischen der Kopfzeile (.app-header, das
	   sitewide Bauteil aus theme.css) und der Rauminfo-Zeile blieb trotz aller bisherigen
	   Straffungen noch spuerbar Leerraum - dessen eigene margin-bottom/padding (1.5rem/.75rem,
	   fuer die uebrige, mitwachsende Seite gedacht) plus .chat-layouts eigener margin-top (1rem)
	   summieren sich an dieser schmalen Stelle zu mehr, als noetig ist. Beide werden hier NUR fuer
	   die Chat-Seiten am Handy zurueckgenommen (chat.css laedt ausschliesslich hier, die Regel
	   greift nirgendwo sonst); .chat-layout verliert seinen margin-top ganz, .app-headers
	   uebernimmt genug eigenen Abstand allein. */
	.app-header { margin-bottom:.6rem; padding:.5rem 0; }
	.chat-layout { display:flex; flex-direction:column; margin-top:0; }
	.chat-layout .chat-sidebar { display:none; }
	.chat-layout .chat-haupt { display:flex; }
	.chat-layout.chat-layout--leer .chat-sidebar { display:flex; }
	.chat-layout.chat-layout--leer .chat-haupt { display:none; }

	/* "Fenster im Fenster" (Norberts Formulierung, 05.09.2026): .verlauf trug Rahmen+Schatten+
	   Radius wie eine eigene Karte INNERHALB der ohnehin schon schmalen Handy-Seite - wirkte wie
	   ein zweites, kleineres Fenster im eigentlichen Fenster. Am Handy liegen die Nachrichten
	   deshalb direkt auf dem Seitenhintergrund, nur die Sprechblasen selbst tragen noch Farbe -
	   genau wie in WhatsApp/Telegram/iMessage, die den Verlauf ebenfalls nicht zusaetzlich boxen.
	   overscroll-behavior:contain ist der zweite, unabhaengige Teil des Befundes ("hakelig"):
	   ohne das schlaegt ein Scrollen bis zum Ende des Verlaufs auf die dahinterliegende Seite
	   durch (Scroll-Chaining) - .verlauf bleibt so der einzige Bereich, der tatsaechlich scrollt. */
	.verlauf {
		background:none; border:none; box-shadow:none; border-radius:0;
		padding:.5rem .6rem; margin:0;
		overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
	}

	/* Sechster Fund, 24.09.2026 - Norberts fuenfte Rueckmeldung zu dieser Baustelle: "der obere
	   Teil des Screens ist ineffizient genutzt". .chat-haupt__kopf trug bis hierhin schon nur noch
	   den Loeschen/Verlassen-Knopf (Teilnehmerzahl steht am Handy laengst nur noch einmal, in der
	   Rauminfo-Marke direkt daneben - siehe .freigabe__marke) - eine ganze Zeile samt zwei
	   Flex-Zwischenraeumen NUR fuer einen einzelnen Knopf. Die ganze Zeile entfaellt deshalb am
	   Handy komplett; der Knopf lebt stattdessen als kleiner Spiegel-Knopf direkt in der
	   Rauminfo-Zeile (.freigabe__aktion-spiegel, siehe oben) - der echte Knopf bleibt hier im DOM
	   bestehen (unveraendertes Formular samt Bestaetigungstext), nur unsichtbar; chat.js leitet
	   einen Klick auf den Spiegel-Knopf per .click() an ihn weiter. */
	.chat-haupt__kopf { display:none; }
	.freigabe__aktion-spiegel { display:inline-flex; }

	/* Rauminfo VOR das Gespraech gezogen statt als feste Leiste am unteren Rand (24.09.2026,
	   Norberts Wunsch: hell/dunkel UND Rauminfo nach oben, damit die Eingabezeile wirklich ganz
	   unten sitzen kann - vorher blieb unten immer der Platz fuer diese Leiste plus die
	   Fusszeile mit dem Hell/Dunkel-Umschalter reserviert, auch wenn beides zugeklappt war).
	   order:-1 haengt .freigabe rein optisch vor .chat-haupt__gespraech, OHNE das Markup
	   umzustellen - beide sind direkte, gleichrangige Kinder von .chat-haupt (an dieser Breite
	   display:flex;flex-direction:column). Zugeklappt ist .freigabe nur eine schmale
	   <summary>-Zeile, die .chat-haupt__gespraech (flex:1) kaum etwas von der Hoehe wegnimmt - der
	   Rest gehoert wieder ganz dem Verlauf und der Eingabezeile, die so als tatsaechlich letztes
	   Element am unteren Bildschirmrand landet. Der Hell/Dunkel-Umschalter zog dafuer aus der
	   eigenen .chat-fusszeile (die es fuer diese beiden Seiten nicht mehr gibt) in die Kopfzeile
	   um - appKopfzeile(..., ['theme' => true]) in chat/index.php und chat/raum.php. */
	.freigabe {
		order:-1;
		border-radius:0; box-shadow:none; border:none; border-bottom:1px solid var(--border-soft);
		background:var(--body-bg);
	}
	.freigabe[open] .freigabe__inhalt { max-height:60vh; overflow-y:auto; }
}

/* Ab hier reicht die Breite fuer eine echte dritte Spalte statt einer Schublade - siehe Plan fuer
   die Begruendung, warum das eine eigene, hoehere Schwelle als die 720px-Sidebar-Grenze ist. */
@media (min-width: 900px) {
	.chat-haupt { flex-direction:row; align-items:flex-start; }
	/* Der eigentliche Grund, warum am Desktop GAR NICHTS mehr scrollte (24.09.2026, Norberts vierte
	   Rueckmeldung, praezisiert: auch der Nachrichtenverlauf selbst liess sich nicht mehr
	   scrollen). align-items:flex-start auf .chat-haupt (Zeile daurueber) heisst: Kinder werden NUR
	   an ihrer natuerlichen Hoehe ausgerichtet, sie strecken sich NICHT automatisch mehr ueber die
	   volle Hoehe von .chat-haupt - .freigabe holt sich das ueber ein eigenes
	   align-self:stretch zurueck (siehe unten), .chat-haupt__gespraech aber NICHT, obwohl genau
	   dort .verlauf drinsteckt. Ohne eine definierte Hoehe hat .verlauf trotz flex:1 nichts, worin
	   es waechst - es wird einfach so hoch wie sein Inhalt (87 Nachrichten) es verlangt, weit
	   ueber den Bildschirm hinaus, ohne eigenen Scrollbalken. Frueher fiel das nicht auf, weil dann
	   einfach die GANZE Seite mitgewachsen ist (der allererste Befund dieser Baustelle) - erst das
	   body{overflow:hidden} von vorhin macht diesen ueberschuessigen Bereich komplett unerreichbar
	   statt nur unschoen. */
	.chat-haupt__gespraech { flex:1; align-self:stretch; }
	.freigabe {
		flex:0 0 15.5rem; align-self:stretch;
		/* <details> versteckt nicht-summary-Kinder browserseitig, solange [open] fehlt - hier
		   bewusst uebersteuert, die Schublade ist am Desktop immer eine offene Spalte. */
		height:fit-content;
	}
	.freigabe summary { cursor:default; }
	.freigabe__inhalt { display:flex !important; }
}

/* --------------------------------------------------------------------------------------------
   Oeffentliche Raeume ("Soziales", 02.09.2026) - Raumliste und Beitrittsformular.
   Bewusst im vorhandenen "Soft & rund"-Stil dieser Datei, keine eigenen Farbtokens: die Raeume
   sind Teil desselben Bereichs, nur mit einem anderen Zugangsweg.
   -------------------------------------------------------------------------------------------- */
.raum-liste { list-style:none; margin:1rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:.8rem; }
.raum-eintrag {
	display:flex; flex-direction:column; gap:.45rem;
	background:var(--card-bg); border:1px solid var(--border-soft); border-radius:20px;
	padding:1rem 1.1rem; box-shadow:var(--chat-zeile-schatten);
}
.raum-eintrag--voll { opacity:.6; }
.raum-eintrag__kopf { display:flex; align-items:center; gap:.45rem; }
.raum-eintrag__titel { font-weight:700; font-size:1.02rem; color:var(--text-strong); overflow-wrap:break-word; min-width:0; }
.raum-schloss { flex:none; display:inline-flex; color:var(--text-muted-custom); }
.raum-eintrag__meta { font-size:.8rem; color:var(--text-muted-custom); }
.raum-eintrag__knopf {
	align-self:flex-start; margin-top:.25rem;
	border:none; border-radius:999px; padding:.45rem 1.1rem;
	background:var(--accent); color:#fff; font:inherit; font-weight:700; text-decoration:none;
}
.raum-eintrag__knopf:hover { filter:brightness(1.08); }
.raum-eintrag__knopf--aus { background:var(--tag-bg); color:var(--text-muted-custom); cursor:default; }
.raum-eintrag__knopf--aus:hover { filter:none; }

.raum-beitritt__titel { margin:0 0 .8rem; font-size:1.15rem; color:var(--text-strong); }
.feld-label { font-weight:700; font-size:.85rem; color:var(--text-muted-custom); }
.hinweis--fehler { color:var(--negative, #e05a5a); font-weight:600; }

/* Moderationsansicht (chat/admin/raum.php) - nutzt sonst die Quiz-Admin-Stylesheets, nur diese
   beiden Kleinigkeiten haben dort kein Gegenstueck. */
.moderation-zeile { display:flex; align-items:flex-start; gap:.6rem; padding:.45rem 0; border-bottom:1px solid var(--border-soft); }
.moderation-zeile:last-child { border-bottom:none; }

/* Klickbare Links im Nachrichtentext (chat.js nhTextMitLinks): in der eigenen, farbigen Blase
   erbt der Link die weisse Schrift, sonst waere er dort blau auf blau. */
.nachricht__blase a.text-link { color:inherit; text-decoration:underline; text-underline-offset:2px; }