/* =====================================================================
   community-chat.css
   Gestaltung fuer den Chatraum (pages/community_room.php), Stil
   "Label-Katalog" wie Musik, Buecher, Videos und Podcast.

   Angelegt am 22.09.2026. Die alte Gestaltung steht in
   community_room.php weiter drin, ist dort aber mit if (false)
   abgeschaltet und dient nur noch als Nachschlagewerk.

   Weiter in der Datei aktiv geblieben sind die Cola- und
   Newsletter-Fenster samt Animation. Die werden hier absichtlich
   nicht angefasst.

   Leser sind zwischen 45 und 85. Darum:
     - Grundschrift im Verlauf ueber --ct-schrift einstellbar,
       fuenf Stufen von 16 bis 26 px, der Browser merkt es sich
     - Abstand ueber --ct-luft, luftig oder kompakt
     - Bedienknoepfe an der Nachricht sind immer sichtbar,
       nicht erst beim Ueberfahren mit der Maus
   ===================================================================== */

/* Die Farbwerte stehen absichtlich auch hier oben und nicht nur am
   Chat selbst. Das Schiebemenue, die Hilfe, das Sperrfenster, die
   Lupe und die Meldung unten haengen im Dokument ausserhalb des
   Chats. Standen die Werte nur dort, waren diese Fenster durchsichtig,
   weil var(--flaeche) ins Leere lief. Gefunden am 22.09.2026. */
:root{
  --grund:#0B111A;
  --flaeche:rgba(255,255,255,.05);
  --tiefer:rgba(0,0,0,.22);
  --text:#FFFFFF;
  --leise:#B6C4D4;
  --stumm:#8195A9;
  --linie:rgba(255,255,255,.12);
  --kasse:#00FFFF;
  --stern:#FFD700;
  --warn:#FFCC33;
  --rot:#FF6B6B;
  --schrift:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.ct-chat-page{
  --grund:#0B111A;
  --flaeche:rgba(255,255,255,.05);
  --tiefer:rgba(0,0,0,.22);
  --text:#FFFFFF;
  --leise:#B6C4D4;
  --stumm:#8195A9;
  --linie:rgba(255,255,255,.12);
  --kasse:#00FFFF;
  --stern:#FFD700;
  --warn:#FFCC33;
  --rot:#FF6B6B;
  --ct-schrift:17px;
  --ct-luft:1rem;

  font-family:var(--schrift);
  color:var(--text);
  letter-spacing:normal;
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  /* minmax(0,1fr) bei den Zeilen ist wichtig: sonst waechst die Zeile
     mit dem Inhalt mit und der Verlauf laeuft unten aus der Seite. */
  grid-template-rows:minmax(0,1fr);
  /* Die Hoehe des Seitenkopfs misst das Skript und schreibt sie in
     --ct-seitenkopf. Vorher standen hier feste 80 px, und wenn der
     Kopf hoeher war, schob der Chat die Seite auseinander. */
  /* 23.09.2026: Der Chat ist jetzt eine Tafel wie die uebrigen Seiten,
     siehe assets/css/tafel.css. Der blaue Seitenverlauf bleibt also
     ringsum sichtbar, statt wie vorher vom Chat ueberdeckt zu werden.
     Die Hoehe zieht den Seitenkopf und den Rand ab, damit die Tafel
     genau ins Fenster passt und die Seite nicht scrollt. */
  height:calc(100dvh - var(--ct-seitenkopf, 80px) - 2.4rem);
  width:100%;
  max-width:1280px;
  margin:1.2rem auto;
  padding:0 .4rem;
  position:relative;
  overflow:hidden;

  background:linear-gradient(180deg, rgba(10,16,28,.72) 0%, rgba(6,10,18,.82) 100%);
  border:1px solid rgba(0,255,255,.16);
  border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
/* main bringt aus style.css 2rem Polster mit. Auf der Chatseite ist das
   zu viel, die Tafel soll das Fenster fuellen. Etwas Luft bleibt aber,
   damit man sieht, dass es eine Tafel ist. */
main.ct-main{padding:0 .8rem !important;width:100%;max-width:100%}
main:has(> .ct-chat-page){padding:0 .8rem;width:100%}

/* Der Seitenkopf bleibt beim Scrollen oben stehen. Gesetzt wird das
   schon in templates/header.php, hier steht es nur noch einmal
   ausdruecklich, damit nichts auf dieser Seite es aushebelt.
   Der z-index bleibt bei 1000 wie im Kopf selbst, sonst legen sich
   die Aufklappmenues der Navigation hinter den Seiteninhalt.
   Die Klasse am body setzt das Skript in community_room.php. */
body.ct-chatseite > header{
  position:sticky !important;top:0 !important;z-index:1000 !important;
}

/* Hier liegt der eigentliche Grund, warum der Kopf nicht mehr klebte.
   In style.css und in templates/header.php steht

       html, body { overflow-x: hidden; }

   Sobald das auf html oder body steht, macht der Browser daraus einen
   eigenen Scrollbereich. position:sticky klebt aber immer nur
   innerhalb seines Scrollbereichs, nicht am Fenster. Der Kopf hoert
   damit auf zu kleben, ganz gleich wie oft man sticky hinschreibt.

   clip verhindert genauso, dass etwas seitlich hinauslaeuft, erzeugt
   aber keinen Scrollbereich. Damit klebt der Kopf wieder.
   Kennt ein alter Browser clip nicht, faellt die Zeile weg und es
   bleibt beim bisherigen Verhalten, kaputt geht also nichts.
   Die Klassen setzt das Skript in community_room.php. */
html.ct-clip{overflow-x:clip !important}
body.ct-chatseite{overflow-x:clip !important}
.ct-chat-page *{box-sizing:border-box;letter-spacing:normal}
.ct-chat-page h1,.ct-chat-page h2,.ct-chat-page h3{
  font-family:inherit !important;text-transform:none !important;
  text-shadow:none !important;animation:none !important;
  -webkit-text-fill-color:currentColor !important;
}
/* Raumliste aus, wenn der Nutzer sie weggeschaltet hat */
.ct-chat-page.ct-ohne-liste{grid-template-columns:minmax(0,1fr);max-width:1000px}
.ct-chat-page.ct-ohne-liste .ct-raumspalte{display:none}

.ct-haupt{
  display:flex;flex-direction:column;
  min-width:0;min-height:0;height:100%;
}

/* =====================================================================
   Raumliste, bleibt auf dem Schreibtisch stehen
   ===================================================================== */
.ct-raumspalte{
  border-right:1px solid var(--linie);
  padding:1rem .8rem 1rem 0;
  overflow-y:auto;min-height:0;
  display:flex;flex-direction:column;gap:.1rem;
}
.ct-raumspalte-titel{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stumm);padding:.4rem .6rem .6rem;
}
.ct-raumzeile{
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem .6rem;border-left:2px solid transparent;
  font-size:.95rem;color:#B6C4D4;text-decoration:none;
  transition:background .18s,color .18s,border-color .18s;
}
.ct-raumzeile:hover{background:rgba(255,255,255,.04);color:var(--text)}
.ct-raumzeile.ct-active{
  border-left-color:var(--kasse);color:var(--text);background:rgba(0,255,255,.07);
}
.ct-raumzeile-zahl{
  margin-left:auto;font-size:.76rem;background:var(--kasse);color:#07131A;
  padding:0 .4rem;font-variant-numeric:tabular-nums;
}
.ct-raumzeile.ct-active .ct-raumzeile-zahl{
  background:transparent;color:var(--kasse);border:1px solid var(--kasse);
}
.ct-raumzeile-schloss{margin-left:auto;font-size:.7rem;color:var(--stumm)}
.ct-raumspalte-fuss{
  margin-top:auto;padding:.9rem .6rem .2rem;border-top:1px solid var(--linie);
}
/* Im Schiebemenue auf dem Handy steht derselbe Knopf */
.ct-slide-menu .ct-raumspalte-fuss{margin-top:1rem;padding:.9rem 1rem .2rem}

/* =====================================================================
   Kopfleiste des Raums
   ===================================================================== */
/* Der Raumname steht gross und mittig, darunter der Untertitel,
   darunter in einer Zeile Suche, Fragezeichen und Schriftgroesse.
   Der Weg zurueck zur Uebersicht sitzt unter der Raumliste. */
.ct-room-header{
  display:block;text-align:center;position:relative;
  padding:1.1rem 1.1rem 1rem;border-bottom:1px solid var(--linie);flex-shrink:0;
}
.ct-kopf-titel{max-width:60ch;margin:0 auto}
.ct-room-icon{font-size:.85em;line-height:1;opacity:.85}
.ct-room-info{min-width:0}
.ct-room-name{
  font-size:clamp(1.5rem,3vw,2.1rem);font-weight:500;color:var(--text);
  line-height:1.15;letter-spacing:-.01em;
}
.ct-room-desc{
  font-size:1rem;color:var(--leise);margin-top:.25rem;
}
.ct-back-btn{
  display:inline-block;width:100%;text-align:center;
  color:var(--text);text-decoration:none;font-size:.92rem;
  padding:.5rem .9rem;border:1px solid var(--linie);border-radius:0;
  transition:border-color .2s,color .2s,background .2s;
}
.ct-back-btn:hover{border-color:var(--kasse);color:var(--kasse);background:rgba(0,255,255,.06)}

/* Werkzeugzeile unter dem Titel */
.ct-werkzeuge{
  display:flex;align-items:center;justify-content:center;
  gap:.5rem 1rem;flex-wrap:wrap;margin-top:1rem;
}
.ct-suchgruppe{display:flex;align-items:center;gap:.45rem}
.ct-schriftgruppe{display:flex;align-items:center;gap:.4rem}
.ct-suchfeld{
  background:transparent;border:1px solid var(--linie);color:var(--text);
  padding:.5rem .8rem;font:inherit;font-size:1rem;
  width:min(360px,52vw);border-radius:0;
}
.ct-suchfeld::placeholder{color:var(--stumm)}
.ct-suchfeld:focus{outline:none;border-color:rgba(0,255,255,.55)}
.ct-treffer{font-size:.78rem;color:var(--kasse);font-variant-numeric:tabular-nums;min-width:0}
.ct-wz{
  background:transparent;border:1px solid var(--linie);color:var(--leise);
  padding:.42rem .85rem;font:inherit;font-size:1rem;line-height:1.3;cursor:pointer;
  transition:border-color .2s,color .2s;
}

/* Das Fragezeichen neben der Suche */
.ct-hilfe-knopf{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:transparent;border:1px solid var(--linie);color:var(--leise);
  font:inherit;font-size:1.05rem;line-height:1;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.ct-hilfe-knopf:hover,.ct-hilfe-knopf:focus-visible{
  border-color:var(--kasse);color:var(--kasse);background:rgba(0,255,255,.08);
}
.ct-wz:hover{border-color:var(--text);color:var(--text)}
.ct-wz:disabled{opacity:.35;cursor:not-allowed}
.ct-wz.ct-gross{font-size:.98rem}
.ct-wz.ct-an{border-color:var(--kasse);color:var(--kasse)}

.ct-hamburger{
  display:none;background:transparent;border:1px solid var(--linie);color:var(--text);
  font-size:1.1rem;cursor:pointer;padding:.25rem .55rem;line-height:1.2;
  position:absolute;right:0;top:.9rem;
}

/* =====================================================================
   Hilfe hinter dem Fragezeichen
   ===================================================================== */
.ct-hilfe-overlay{
  display:none;position:fixed;inset:0;z-index:3400;
  background:rgba(5,5,8,.84);align-items:center;justify-content:center;padding:16px;
}
.ct-hilfe-overlay.ct-active{display:flex}
.ct-hilfe-modal{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;
  padding:1.5rem;width:100%;max-width:640px;max-height:84vh;overflow-y:auto;
  font-family:var(--schrift);color:var(--text);
  text-align:left;
}
.ct-hilfe-kopf{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding-bottom:.8rem;border-bottom:1px solid var(--linie);
}
.ct-hilfe-kopf h3{
  margin:0;font-size:1.35rem;font-weight:500;line-height:1.2;color:var(--text);
}
.ct-hilfe-zu{
  background:transparent;border:0;color:var(--leise);font-size:1.6rem;
  line-height:1;cursor:pointer;padding:0 .2rem;
}
.ct-hilfe-zu:hover{color:var(--text)}
.ct-hilfe-vorwort{margin:.9rem 0 0;font-size:1rem;color:#B6C4D4}

.ct-hilfe-liste{margin:1.2rem 0 0}
.ct-hilfe-liste dt{
  font-size:1rem;font-weight:500;color:var(--kasse);
  margin-top:1.1rem;
}
.ct-hilfe-liste dt:first-of-type{margin-top:0}
.ct-hilfe-liste dd{
  margin:.25rem 0 0;font-size:.97rem;line-height:1.65;color:#B6C4D4;max-width:64ch;
}
.ct-hilfe-fuss{
  display:flex;justify-content:flex-end;
  margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--linie);
}
.ct-hilfe-fertig{
  background:var(--kasse);color:#07131A;border:1px solid var(--kasse);
  padding:.55rem 1.4rem;font:inherit;font-size:.95rem;font-weight:500;cursor:pointer;
}

/* =====================================================================
   Freigabeschlange fuer Moderatoren
   ===================================================================== */
.ct-pending-panel{
  background:rgba(255,204,51,.07);border-left:3px solid var(--warn);
  padding:.8rem 1rem;margin:.8rem 0 0;flex-shrink:0;
}
.ct-pending-title{
  font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--warn);margin-bottom:.5rem;
}
.ct-pending-msg{
  display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
  font-size:.92rem;padding:.3rem 0;
}
.ct-pm-user{font-weight:500;color:var(--text)}
.ct-pm-text{color:var(--leise);flex:1 1 220px;min-width:0}
.ct-pending-btn{
  background:transparent;border:1px solid var(--linie);color:var(--leise);
  padding:.2rem .7rem;font:inherit;font-size:.78rem;cursor:pointer;
  transition:border-color .2s,color .2s;
}
.ct-pending-btn.ct-approve:hover{border-color:var(--kasse);color:var(--kasse)}
.ct-pending-btn.ct-reject:hover{border-color:var(--rot);color:#FF9C9C}

/* =====================================================================
   Nachrichtenstrom
   ===================================================================== */
.ct-messages{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  /* 23.09.2026: links und rechts war kein Polster, dadurch klebten die
     Bilder der Nutzer an der Trennlinie zur Raumliste. */
  padding:1rem 1.1rem;display:flex;flex-direction:column;gap:var(--ct-luft);
  font-size:var(--ct-schrift);
  scrollbar-width:thin;scrollbar-color:#242430 transparent;
}
.ct-messages::-webkit-scrollbar{width:9px}
.ct-messages::-webkit-scrollbar-track{background:transparent}
.ct-messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}

/* Datumstrenner und der Strich fuer Neues */
.ct-tagtrenner,.ct-neutrenner{
  display:flex;align-items:center;gap:.9rem;
  font-size:.78em;letter-spacing:.12em;text-transform:uppercase;
}
.ct-tagtrenner{color:var(--leise)}
.ct-tagtrenner::before,.ct-tagtrenner::after{content:"";height:1px;background:var(--linie);flex:1}
.ct-neutrenner{color:var(--kasse)}
.ct-neutrenner::before,.ct-neutrenner::after{content:"";height:1px;background:rgba(0,255,255,.45);flex:1}
.ct-chat-page.ct-ohne-tage .ct-tagtrenner{display:none}

.ct-empty{
  padding:3rem 0;text-align:center;color:var(--leise);font-size:1rem;
}
.ct-loading,.ct-no-more{
  text-align:center;color:var(--stumm);font-size:.85rem;padding:.6rem 0;
}
.ct-spinner,.ct-load-older-spinner{
  width:20px;height:20px;margin:.6rem auto;border-radius:50%;
  border:2px solid var(--linie);border-top-color:var(--kasse);
  animation:ctDreh .8s linear infinite;
}
@keyframes ctDreh{to{transform:rotate(360deg)}}

/* ---------------- eine Nachricht ---------------- */
/* Wichtig: eigene display-Regeln sind staerker als die eingebaute
   Regel des Browsers fuer hidden. Ohne die Zeile hier bleibt beim
   Suchen alles stehen, obwohl das Skript die Nachrichten versteckt.
   Genau dieser Fehler war am 22.09.2026 drin. */
.ct-chat-page [hidden]{display:none !important}

.ct-msg{display:flex;gap:.6rem;align-items:flex-start;animation:ctRein .18s ease-out}
@keyframes ctRein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ct-msg.ct-own{flex-direction:row-reverse}

.ct-avatar{
  width:36px;height:36px;flex:0 0 36px;border-radius:50%;
  background:rgba(255,255,255,.08);color:var(--leise);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:.85em;font-weight:600;
}
.ct-avatar img{width:100%;height:100%;object-fit:cover;display:block}

.ct-bubble{
  /* Nicht breiter als eine bequeme Lesezeile. Auf einem breiten
     Bildschirm waeren 74 Prozent sonst weit ueber 700 px, und das
     liest sich schlecht. */
  min-width:0;max-width:min(74%,60ch);
  background:rgba(255,255,255,.055);border:1px solid var(--linie);border-radius:14px;
  padding:.55rem .8rem;
}
.ct-msg.ct-own .ct-bubble{background:rgba(0,255,255,.09);border-color:rgba(0,255,255,.34)}
.ct-msg.ct-personal .ct-bubble{background:rgba(138,168,255,.14);border-color:rgba(138,168,255,.45)}
.ct-msg.ct-pending .ct-bubble{border-style:dashed;opacity:.75}
.ct-msg.ct-deleted .ct-bubble{opacity:.45}

.ct-bubble-header{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.2rem}
.ct-username{font-size:.88em;font-weight:600;color:var(--kasse)}
.ct-msg.ct-own .ct-username{color:var(--text)}
.ct-time{font-size:.75em;color:var(--stumm);font-variant-numeric:tabular-nums}

.ct-badge{
  font-size:.66em;letter-spacing:.06em;border:1px solid var(--linie);
  padding:0 .3rem;border-radius:2px;color:var(--leise);
}
.ct-badge-guest{border-color:rgba(255,255,255,.2);color:var(--stumm)}
.ct-badge-mod{border-color:var(--kasse);color:var(--kasse)}
.ct-badge-fan,.ct-badge-familie,.ct-badge-vip{border-color:rgba(255,215,0,.5);color:var(--stern)}

/* Die beiden Pillen sind immer sichtbar, auch ohne Maus */
.ct-bubble-actions{margin-left:auto;display:flex;gap:.25rem;opacity:.75;transition:opacity .15s}
.ct-msg:hover .ct-bubble-actions{opacity:1}
.ct-action-pill{
  background:rgba(255,255,255,.05);border:1px solid var(--linie);color:var(--leise);
  padding:.05rem .45rem;font-size:.85em;line-height:1.5;cursor:pointer;border-radius:4px;
  transition:border-color .2s,color .2s;
}
.ct-action-pill:hover{border-color:var(--text);color:var(--text)}
.ct-translate-pill.ct-loading{animation:ctDreh .8s linear infinite}

.ct-reply-quote{
  border-left:2px solid var(--kasse);padding:.2rem 0 .2rem .55rem;
  margin:.1rem 0 .4rem;cursor:pointer;
}
.ct-reply-quote:hover{background:rgba(255,255,255,.03)}
.ct-rq-name{font-size:.78em;color:var(--kasse);font-weight:500}
.ct-rq-text{
  font-size:.82em;color:var(--stumm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;
}

.ct-text{font-size:.97em;line-height:1.62;color:#DCE6F2;overflow-wrap:anywhere}
.ct-text b,.ct-text strong{color:var(--text);font-weight:600}
.ct-text ul,.ct-text ol{margin:.35rem 0;padding-left:1.2rem}
.ct-text li{margin-bottom:.2rem}
.ct-chat-link{color:var(--kasse);text-decoration:none;border-bottom:1px solid rgba(0,255,255,.4)}
.ct-chat-link:hover{color:var(--text);border-bottom-color:currentColor}
.ct-text video{max-width:400px;width:100%;border-radius:8px;margin-top:.4rem;display:block}

.ct-chat-image{
  display:block;width:100%;max-width:330px;border-radius:8px;margin-top:.4rem;
  cursor:zoom-in;border:1px solid var(--linie);
}
.ct-image-caption{font-size:.9em;color:var(--leise);margin-top:.35rem}
.ct-edited-hint{font-size:.72em;color:var(--stumm);margin-top:.2rem}
.ct-translation{
  margin-top:.45rem;padding-top:.45rem;border-top:1px dashed var(--linie);
  font-size:.92em;color:var(--leise);font-style:italic;
}

/* ---------------- Reaktionen ---------------- */
.ct-msg-reactions{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.45rem}
.ct-reaction-pill{
  position:relative;background:transparent;border:1px solid var(--linie);border-radius:20px;
  color:var(--leise);padding:.05rem .5rem;font-size:.8em;line-height:1.6;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:border-color .2s,color .2s;
}
.ct-reaction-pill:hover{border-color:var(--text);color:var(--text)}
.ct-reaction-pill.ct-own{border-color:var(--kasse);color:var(--kasse);background:rgba(0,255,255,.1)}
.ct-reaction-tooltip{
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,#151C28,#0C1219);border:1px solid var(--linie);border-radius:8px;
  padding:.4rem .6rem;font-size:.78rem;color:var(--leise);
  white-space:nowrap;max-width:220px;z-index:40;box-shadow:0 8px 28px rgba(0,0,0,.55);
}
.ct-rt-name{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.ct-rt-loading{color:var(--stumm)}

/* ---------------- Moderation an der Nachricht ---------------- */
.ct-mod-actions{
  display:flex;gap:.4rem;flex-wrap:wrap;
  margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--linie);
}
.ct-mod-btn{
  background:transparent;border:1px solid var(--linie);color:var(--leise);
  padding:.2rem .7rem;font:inherit;font-size:.78em;cursor:pointer;
  transition:border-color .2s,color .2s;
}
.ct-mod-btn:hover{border-color:var(--rot);color:#FF9C9C}

/* ---------------- Bearbeiten ---------------- */
.ct-edit-textarea{
  width:100%;background:transparent;border:1px solid rgba(0,255,255,.45);
  color:var(--text);padding:.5rem .6rem;font:inherit;font-size:.95em;
  line-height:1.55;resize:vertical;min-height:60px;
}
.ct-edit-actions{display:flex;gap:.5rem;margin-top:.5rem}
.ct-edit-save{
  background:var(--kasse);color:#07131A;border:1px solid var(--kasse);
  padding:.28rem .9rem;font:inherit;font-size:.85em;font-weight:500;cursor:pointer;
}
.ct-edit-cancel{
  background:transparent;color:var(--leise);border:1px solid var(--linie);
  padding:.28rem .9rem;font:inherit;font-size:.85em;cursor:pointer;
}
.ct-edit-cancel:hover{border-color:var(--text);color:var(--text)}

/* =====================================================================
   Eingabebereich
   ===================================================================== */
.ct-input-area{
  border-top:1px solid var(--linie);flex-shrink:0;padding-top:.2rem;
}
.ct-notice{
  padding:.9rem 1rem;font-size:.95rem;display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;
}
.ct-notice a,.ct-guest-login-link{color:var(--kasse);text-decoration:none;border-bottom:1px solid currentColor}
.ct-guest-hint{color:var(--leise);border-left:2px solid var(--linie)}
.ct-banned{color:#FFB3B3;background:rgba(255,107,107,.08);border-left:2px solid var(--rot)}
.ct-login{color:var(--kasse)}

.ct-reply-preview{
  display:none;align-items:center;gap:.7rem;
  padding:.55rem 1.1rem;border-left:2px solid var(--kasse);
  background:rgba(0,255,255,.05);margin-top:.5rem;
}
.ct-reply-preview.ct-show{display:flex}
.ct-reply-info{min-width:0}
.ct-reply-name{font-size:.82rem;color:var(--kasse);font-weight:500}
.ct-reply-text{
  font-size:.85rem;color:var(--stumm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60ch;
}
.ct-reply-cancel{
  margin-left:auto;background:transparent;border:0;color:var(--leise);
  font-size:1.2rem;cursor:pointer;line-height:1;
}
.ct-reply-cancel:hover{color:var(--text)}

/* Schreibleiste. Ob sie sichtbar ist, regelt weiter die alte Regel
   am Ende von community_room.php, hier geht es nur um das Aussehen. */
.ct-toolbar{
  align-items:center;gap:.2rem;flex-wrap:wrap;
  /* 23.09.2026: gleiches Polster links wie im Verlauf, damit alles
     auf einer Linie beginnt. */
  padding:.45rem 1.1rem;border-bottom:1px solid var(--linie);
}
.ct-toolbar button{
  background:transparent;border:1px solid transparent;color:var(--leise);
  min-width:30px;padding:.2rem .45rem;font:inherit;font-size:.9rem;
  line-height:1.4;cursor:pointer;border-radius:3px;position:relative;
}
.ct-toolbar button:hover{border-color:var(--linie);color:var(--text);background:rgba(255,255,255,.04)}
.ct-toolbar .ct-bold{font-weight:700}
.ct-toolbar .ct-italic{font-style:italic}
.ct-toolbar .ct-strike{text-decoration:line-through}
.ct-toolbar-divider{width:1px;height:18px;background:var(--linie);margin:0 .35rem}
.ct-toolbar button[data-tip]:hover::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);background:linear-gradient(180deg,#151C28,#0C1219);border:1px solid var(--linie);
  color:var(--leise);font-size:.72rem;padding:.25rem .5rem;border-radius:6px;
  white-space:nowrap;z-index:40;
}

.ct-input-wrap{display:flex;align-items:flex-end;gap:.5rem;padding:.7rem 1.1rem .2rem}
.ct-textarea{
  flex:1;min-height:44px;max-height:140px;
  background:transparent;border:1px solid var(--linie);color:var(--text);
  padding:.6rem .7rem;font:inherit;font-size:.95rem;line-height:1.5;
  resize:none;border-radius:0;
}
.ct-textarea::placeholder{color:var(--stumm)}
.ct-textarea:focus{outline:none;border-color:rgba(0,255,255,.5)}
.ct-send-btn{
  background:var(--kasse);color:#07131A;border:1px solid var(--kasse);
  padding:.62rem 1.1rem;font:inherit;font-size:.95rem;font-weight:500;
  cursor:pointer;border-radius:0;
}
.ct-send-btn:disabled{background:transparent;color:var(--stumm);border-color:var(--linie);cursor:not-allowed}
.ct-plus-btn,.ct-img-btn{
  background:transparent;border:1px solid var(--linie);color:var(--leise);
  width:40px;height:40px;font-size:1rem;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,color .2s;
}
.ct-plus-btn:hover,.ct-img-btn:hover{border-color:var(--kasse);color:var(--kasse)}
.ct-char-count{font-size:.76rem;color:var(--stumm);text-align:right;padding:0 1.1rem .5rem;font-variant-numeric:tabular-nums}

.ct-plus-menu{
  display:none;position:absolute;bottom:100%;left:0;margin-bottom:.4rem;
  background:linear-gradient(180deg,#151C28,#0C1219);border:1px solid var(--linie);border-radius:10px;
  padding:.3rem;min-width:190px;z-index:50;box-shadow:0 10px 36px rgba(0,0,0,.55);
}
/* Das Skript in community_room.php schaltet mit ct-open, nicht mit
   ct-show. Beides steht hier, damit es in jedem Fall aufgeht.
   Gefunden am 23.09.2026, vorher blieb das Menue unsichtbar. */
.ct-plus-menu.ct-open,.ct-plus-menu.ct-show{display:block}
.ct-plus-menu-item{
  display:block;width:100%;text-align:left;background:transparent;border:0;
  color:var(--text);padding:.42rem .6rem;font:inherit;font-size:.88rem;
  cursor:pointer;border-radius:6px;
}
.ct-plus-menu-item:hover{background:rgba(255,255,255,.06)}

/* Emojiwahl an der Schreibleiste.
   Zwei Dinge sind hier wichtig, beide am 23.09.2026 als Fehler
   gefunden, weil die Wahl sich nicht oeffnen liess:
   1. Das Skript schaltet mit ct-open, nicht mit ct-show.
   2. Das Skript setzt left und bottom aus getBoundingClientRect und
      window.innerHeight, also in Fensterkoordinaten. Damit muss das
      Feld position:fixed sein, nicht absolute, sonst landet es an
      einer beliebigen Stelle. */
.ct-emoji-picker{
  display:none;position:fixed;
  background:linear-gradient(180deg,#151C28,#0C1219);border:1px solid var(--linie);border-radius:10px;
  /* 23.09.2026: Das Feld war mit acht Spalten auf 240 px zu eng, die
     Knoepfe passten nicht nebeneinander und unten erschien ein
     Bildlaufbalken. Jetzt sechs Spalten auf 288 px. Die 30 Zeichen
     ergeben fuenf Zeilen und passen ohne Balken hinein.
     Die Breite bleibt unter dem Wert, mit dem das Skript die Stelle
     am rechten Rand begrenzt, damit nichts hinauslaeuft. */
  padding:.45rem;grid-template-columns:repeat(6,1fr);gap:.15rem;
  width:288px;max-width:calc(100vw - 16px);
  max-height:260px;overflow-y:auto;overflow-x:hidden;z-index:2600;
  box-shadow:0 12px 40px rgba(0,0,0,.65);
}
.ct-emoji-picker.ct-open,.ct-emoji-picker.ct-show{display:grid}
.ct-emoji-pick{
  /* width und min-width sind noetig, sonst machen sich die Knoepfe so
     breit wie ihr Inhalt und sprengen das Raster. */
  width:100%;min-width:0;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;font-size:1.25rem;line-height:1;padding:0;
  cursor:pointer;border-radius:8px;transition:background .15s;
}
.ct-emoji-pick:hover{background:rgba(255,255,255,.08)}

/* =====================================================================
   Menue an der Nachricht
   ===================================================================== */
.ct-ctx-menu{
  position:fixed;z-index:3000;background:linear-gradient(180deg,#151C28,#0C1219);border:1px solid var(--linie);
  border-radius:10px;padding:.35rem;min-width:190px;
  box-shadow:0 12px 44px rgba(0,0,0,.65);animation:ctRein .12s ease-out;
}
.ct-emoji-picker-row{
  display:flex;gap:.15rem;padding:.2rem;
  border-bottom:1px solid var(--linie);margin-bottom:.25rem;
}
.ct-emoji-pick-btn{
  background:transparent;border:1px solid transparent;border-radius:6px;
  font-size:1.1rem;padding:.2rem .3rem;cursor:pointer;line-height:1;
}
.ct-emoji-pick-btn:hover{background:rgba(255,255,255,.07)}
.ct-emoji-pick-btn.ct-active-emoji{border-color:var(--kasse);background:rgba(0,255,255,.12)}
.ct-ctx-item{
  display:block;width:100%;text-align:left;background:transparent;border:0;
  color:var(--text);padding:.42rem .6rem;font:inherit;font-size:.9rem;
  cursor:pointer;border-radius:6px;
}
.ct-ctx-item:hover{background:rgba(255,255,255,.06)}
.ct-ctx-item.ct-danger{color:#FF9C9C}

/* =====================================================================
   Fenster: Sperren, Umfrage, Ergebnisse, Bild, Hilfe
   ===================================================================== */
.ct-ban-overlay,.ct-poll-overlay,.ct-poll-results-overlay,
.ct-fmthelp-overlay,.ct-crop-overlay,.ct-lightbox-overlay{
  display:none;position:fixed;inset:0;z-index:3200;
  background:rgba(5,5,8,.82);
  align-items:center;justify-content:center;padding:16px;
}
.ct-ban-overlay.ct-active,.ct-poll-overlay.ct-active,
.ct-poll-results-overlay.ct-active,.ct-fmthelp-overlay.ct-active,
.ct-crop-overlay.ct-active,.ct-lightbox-overlay.ct-active,
.ct-ban-overlay.ct-show,.ct-poll-overlay.ct-show,
.ct-poll-results-overlay.ct-show,.ct-fmthelp-overlay.ct-show,
.ct-crop-overlay.ct-show,.ct-lightbox-overlay.ct-show{display:flex}

.ct-ban-modal,.ct-poll-modal,.ct-poll-results-modal,
.ct-fmthelp-modal,.ct-crop-modal{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;
  padding:1.4rem;width:100%;max-width:470px;max-height:84vh;overflow-y:auto;
  font-family:var(--schrift);color:var(--text);
}
.ct-crop-modal{max-width:560px}
.ct-ban-modal h3,.ct-poll-modal h3,.ct-poll-results-modal h3,.ct-fmthelp-modal h3{
  margin:0 0 .9rem;font-size:1.15rem;font-weight:500;color:var(--text);
}
.ct-ban-modal label,.ct-poll-modal label{
  display:block;font-size:.8rem;color:var(--leise);margin:.8rem 0 .3rem;
}
.ct-ban-modal input,.ct-ban-modal select,.ct-ban-modal textarea,
.ct-poll-modal input,.ct-poll-modal select,.ct-poll-modal textarea,
.ct-crop-modal input{
  width:100%;background:transparent;border:1px solid var(--linie);color:var(--text);
  padding:.5rem .6rem;font:inherit;font-size:.92rem;border-radius:0;
}
.ct-ban-modal textarea,.ct-poll-modal textarea{resize:vertical}
.ct-ban-actions,.ct-poll-actions,.ct-crop-actions{
  display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.2rem;flex-wrap:wrap;
}
.ct-ban-submit,.ct-poll-submit-btn,.ct-btn-crop-send{
  background:var(--kasse);color:#07131A;border:1px solid var(--kasse);
  padding:.5rem 1.1rem;font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;border-radius:0;
}
.ct-ban-submit{background:transparent;color:#FF9C9C;border-color:var(--rot)}
.ct-ban-submit:hover{background:rgba(255,107,107,.12)}
.ct-ban-cancel,.ct-poll-cancel-btn,.ct-btn-crop-cancel,
.ct-poll-close,.ct-poll-results-close,.ct-fh-close,.ct-crop-close,.ct-lightbox-close{
  background:transparent;color:var(--leise);border:1px solid var(--linie);
  padding:.5rem 1.1rem;font:inherit;font-size:.9rem;cursor:pointer;border-radius:0;
}
.ct-ban-cancel:hover,.ct-poll-cancel-btn:hover,.ct-btn-crop-cancel:hover,
.ct-poll-close:hover,.ct-poll-results-close:hover,.ct-fh-close:hover,
.ct-crop-close:hover,.ct-lightbox-close:hover{border-color:var(--text);color:var(--text)}
.ct-poll-error,.ct-error{color:#FF9C9C;font-size:.85rem;margin-top:.6rem}
.ct-success{color:var(--kasse)}
.ct-warn{color:var(--warn)}
.ct-info{color:var(--leise)}
.ct-disabled{opacity:.45;pointer-events:none}

.ct-crop-header{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:.9rem;font-size:1.05rem;
}
.ct-crop-canvas-wrap{
  position:relative;width:100%;background:#000;border:1px solid var(--linie);
  border-radius:8px;overflow:hidden;touch-action:none;
}

.ct-lightbox-overlay{background:rgba(3,3,5,.92);cursor:zoom-out}
.ct-lightbox-overlay img{
  max-width:min(1100px,94vw);max-height:86vh;border-radius:8px;display:block;
}
.ct-lightbox-close{
  position:fixed;top:18px;right:18px;background:rgba(0,0,0,.55);
}

.ct-fh-row{
  display:flex;align-items:center;gap:.7rem;
  /* 23.09.2026: gleiches Polster links wie im Verlauf, damit alles
     auf einer Linie beginnt. */
  padding:.45rem 1.1rem;border-bottom:1px solid var(--linie);font-size:.92rem;
}
.ct-fh-row code,.ct-fmthelp-modal kbd{
  font-family:ui-monospace,Menlo,monospace;font-size:.85rem;color:var(--kasse);
  background:rgba(0,255,255,.08);padding:.05rem .4rem;border-radius:3px;
}
.ct-fh-arrow{color:var(--stumm);flex-shrink:0}
.ct-fh-result{color:var(--leise)}

/* =====================================================================
   Umfragen im Verlauf und im Fenster
   ===================================================================== */
.ct-poll-card{
  border:1px solid rgba(0,255,255,.3);border-radius:10px;
  background:rgba(0,255,255,.04);padding:.8rem;margin-top:.3rem;
}
.ct-poll-question{font-weight:500;margin-bottom:.6rem;font-size:.98em;color:var(--text)}
.ct-poll-option{
  display:block;width:100%;text-align:left;position:relative;overflow:hidden;
  background:transparent;border:1px solid var(--linie);color:var(--text);
  padding:.45rem .7rem;font:inherit;font-size:.9em;cursor:pointer;margin-bottom:.35rem;
  transition:border-color .2s;
}
.ct-poll-option:hover{border-color:var(--kasse)}
.ct-poll-option.ct-voted,.ct-poll-option.ct-user-voted{border-color:var(--kasse)}
.ct-poll-option.ct-winner{border-color:var(--stern)}
.ct-poll-bar-wrap{position:absolute;inset:0;pointer-events:none}
.ct-poll-bar{position:absolute;inset:0 auto 0 0;background:rgba(0,255,255,.16);width:0;transition:width .5s}
.ct-poll-check{color:var(--kasse);margin-right:.35rem}
.ct-poll-meta,.ct-poll-votes,.ct-poll-votes-count{
  font-size:.78em;color:var(--stumm);margin-top:.4rem;font-variant-numeric:tabular-nums;
}
.ct-poll-results-btn{
  background:transparent;border:1px solid var(--linie);color:var(--leise);
  padding:.2rem .7rem;font:inherit;font-size:.78em;cursor:pointer;margin-top:.5rem;
}
.ct-poll-results-btn:hover{border-color:var(--kasse);color:var(--kasse)}

.ct-poll-result-row{margin-bottom:.9rem}
.ct-poll-result-label,.ct-poll-result-text{
  display:flex;align-items:baseline;gap:.5rem;font-size:.92rem;margin-bottom:.25rem;
}
.ct-poll-result-pct,.ct-poll-result-cnt{
  margin-left:auto;color:var(--kasse);font-size:.85rem;font-variant-numeric:tabular-nums;
}
.ct-poll-result-check{color:var(--kasse)}
.ct-poll-result-bar-bg{height:6px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}
.ct-poll-result-bar-fill{height:100%;background:var(--kasse);width:0;transition:width .5s}
.ct-poll-result-total{
  margin-top:1rem;padding-top:.7rem;border-top:1px solid var(--linie);
  font-size:.85rem;color:var(--leise);font-variant-numeric:tabular-nums;
}

/* =====================================================================
   Schiebemenue auf dem Handy
   ===================================================================== */
.ct-slide-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:2800;
}
.ct-slide-overlay.ct-active,.ct-slide-overlay.ct-open{display:block}
.ct-slide-menu{
  position:fixed;top:0;right:0;bottom:0;width:260px;z-index:2900;
  background:var(--flaeche);border-left:1px solid var(--linie);
  transform:translateX(100%);transition:transform .25s ease;
  padding:1rem 0;overflow-y:auto;
  font-family:var(--schrift);
}
.ct-slide-menu.ct-active,.ct-slide-menu.ct-open{transform:none}
.ct-slide-title{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stumm);padding:.5rem 1rem .8rem;
}
.ct-slide-room{
  display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;
  color:#B6C4D4;text-decoration:none;font-size:.95rem;
  border-left:2px solid transparent;
}
.ct-slide-room:hover{background:rgba(255,255,255,.04);color:var(--text)}
.ct-slide-room.ct-active{border-left-color:var(--kasse);color:var(--text);background:rgba(0,255,255,.07)}
.ct-slide-room-icon{font-size:1rem;line-height:1}

/* =====================================================================
   Meldung unten (Toast)
   ===================================================================== */
.ct-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(18px);
  background:linear-gradient(180deg,#151C28,#0C1219);border:1px solid var(--kasse);color:var(--text);
  padding:.6rem 1.1rem;font-size:.9rem;border-radius:8px;
  font-family:var(--schrift);
  opacity:0;pointer-events:none;z-index:4000;
  transition:opacity .2s,transform .2s;
}
.ct-toast.ct-show{opacity:1;transform:translateX(-50%)}
.ct-toast.ct-error{border-color:var(--rot)}
.ct-toast.ct-success{border-color:var(--kasse)}

/* =====================================================================
   Aktionsleiste unter dem Eingabefeld (Cola, Newsletter)
   Die Fenster dahinter bleiben unveraendert, hier nur die Knoepfe.
   ===================================================================== */
.ct-action-bar{
  display:flex;gap:.5rem;padding:.6rem 0;flex-shrink:0;flex-wrap:wrap;
  border-top:1px solid var(--linie);
}
.ct-action-bar .ct-cab-btn{
  flex:1 1 180px;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:transparent;border:1px solid var(--linie);color:var(--leise);
  padding:.45rem .9rem;font:inherit;font-size:.88rem;cursor:pointer;
  transition:border-color .2s,color .2s;
}
.ct-action-bar .ct-cab-btn:hover{border-color:var(--kasse);color:var(--kasse)}
.ct-cab-test{font-size:.7rem;color:var(--warn);margin-left:.3rem}
.ct-cola-test-panel{
  display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;
  padding:.5rem 0;border-top:1px solid var(--linie);
}

/* =====================================================================
   Handy und kleine Fenster
   ===================================================================== */
@media (max-width:991px){
  .ct-chat-page{grid-template-columns:minmax(0,1fr)}
  .ct-raumspalte{display:none}
}

@media (max-width:767px){
  /* Auf dem Handy bleibt der Chat wie bisher ein ganzer Bildschirm und
     keine Tafel. Ein Rahmen mit Rundung kostet dort nur Platz, und die
     festen Leisten oben und unten muessen bis an den Rand gehen. */
  .ct-chat-page{
    height:calc(100dvh - var(--ct-seitenkopf,54px));
    max-width:100%;margin:0;padding:0;overflow:hidden;display:block;
    background:var(--grund);
    border:0;border-radius:0;box-shadow:none;clip-path:none;
  }
  main.ct-main{padding:0 !important}
  .ct-haupt{display:block;height:auto}

  /* Der Seitenkopf klebt oben und hat z-index 1000. Die festen
     Leisten des Chats fangen deshalb darunter an, sonst liegen sie
     dahinter und man sieht ihre obere Kante nicht. Die Hoehe misst
     das Skript in --ct-seitenkopf. */
  .ct-room-header{
    position:fixed;top:var(--ct-seitenkopf,54px);left:0;right:0;z-index:100;
    background:rgba(11,11,15,.96);backdrop-filter:blur(8px);
    padding:.55rem .8rem;border-bottom:1px solid var(--linie);gap:.5rem;
  }
  .ct-room-name{font-size:1.15rem}
  .ct-room-desc{display:none}
  .ct-hamburger{display:block;top:.5rem;right:.7rem}
  .ct-werkzeuge{margin-top:.55rem;gap:.4rem .6rem}
  .ct-suchfeld{width:min(190px,42vw);font-size:.92rem;padding:.4rem .6rem}
  .ct-hilfe-knopf{width:34px;height:34px;font-size:1rem}
  .ct-wz{padding:.36rem .7rem;font-size:.92rem}
  /* Der Zurueck-Knopf steht auf dem Handy im Schiebemenue, dort muss
     er sichtbar bleiben. Im Kopf gibt es ihn nicht mehr. */
  .ct-hilfe-modal{padding:1.1rem}
  .ct-hilfe-kopf h3{font-size:1.15rem}

  /* Oben und unten sitzen feste Leisten. Ihre Hoehe wird in
     community_room.php gemessen und in --ct-kopf und --ct-fuss
     geschrieben, weil sie sich aendert: die Suche rutscht in eine
     zweite Zeile, die Antwortvorschau klappt auf, die Schreibleiste
     erscheint. Feste Zahlen haben hier frueher zu Ueberdeckungen
     gefuehrt. Die Werte in klammern sind nur der Notnagel. */
  .ct-messages{
    position:fixed;left:0;right:0;
    top:calc(var(--ct-seitenkopf,54px) + var(--ct-kopf,54px));
    bottom:var(--ct-fuss,112px);
    padding:.6rem .7rem 10px;background:var(--grund);z-index:1;
  }
  .ct-bubble{max-width:86%}
  .ct-rq-text{max-width:160px}

  .ct-input-area{
    position:fixed;bottom:0;left:0;right:0;z-index:100;
    background:rgba(11,11,15,.96);backdrop-filter:blur(8px);
    padding:.4rem .7rem;border-top:1px solid var(--linie);
  }
  .ct-input-wrap{padding:.4rem 0}
  .ct-textarea{min-height:40px;font-size:.92rem}
  .ct-char-count{display:none}
  .ct-chat-image{max-height:260px}
  .ct-text video{max-width:100%}

  .ct-pending-panel{
    position:fixed;left:0;right:0;z-index:99;margin:0;
    top:calc(var(--ct-seitenkopf,54px) + var(--ct-kopfleiste,54px));
  }
  .ct-ctx-menu{min-width:160px}

  /* Das Skript begrenzt die linke Kante der Emojiwahl mit
     innerWidth minus 250. Alles, was breiter als 250 ist, laeuft auf
     schmalen Fenstern rechts hinaus. Darum hier 240. */
  .ct-emoji-picker{width:240px}
  .ct-action-bar{display:none}
  .ct-cola-test-panel{display:none}
}

@media (prefers-reduced-motion:reduce){
  .ct-chat-page *,.ct-toast,.ct-slide-menu{
    transition:none !important;animation:none !important;
  }
}