:root {
  --hchat-navy: #071a2d;
  --hchat-blue: #102c4d;
  --hchat-blue2: #1b548a;
  --hchat-orange: #f39a30;
  --hchat-gold: #ffd368;
  --hchat-text: #f5f7fb;
  --hchat-muted: #aebdce;
}

/* Lounge-Hintergrund */
body:has(.lounge-shell) {
  background:
    radial-gradient(
      circle at 30% 0%,
      rgba(34, 101, 164, .24),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #153b62 0%,
      #0d2846 38%,
      #071a2d 100%
    ) !important;
}

/* Weißes Main-Panel in der Lounge entfernen */
body:has(.lounge-shell) main {
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 8px auto 0 !important;
  padding: 0 10px 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Hauptlayout */
.lounge-shell {
  width: 100% !important;
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(210px, 13vw) !important;
  gap: 10px !important;
  min-height: calc(100vh - 105px) !important;
}

.lounge-main {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - 105px) !important;
  overflow: hidden !important;

  background:
    linear-gradient(
      180deg,
      #0d2c4d 0%,
      #071a2d 100%
    ) !important;

  border-radius: 17px !important;
  border: 1px solid rgba(255,255,255,.10) !important;

  box-shadow:
    0 18px 45px rgba(0,0,0,.26) !important;
}

.lounge-sidebar {
  overflow: hidden !important;

  border-radius: 17px !important;

  background:
    linear-gradient(
      180deg,
      #173d69,
      #0b233e
    ) !important;

  border: 1px solid rgba(255,255,255,.10) !important;
}

/* Lounge-Kopf */
.lounge-header {
  flex: 0 0 auto !important;

  background:
    linear-gradient(
      105deg,
      #102d50 0%,
      #246ba8 55%,
      #f2922e 100%
    ) !important;
}

.lounge-title {
  color: var(--hchat-gold) !important;
}

.lounge-description {
  color: #ffd18a !important;
}

/* Nachrichtenbereich nimmt den Rest ein */
.chat-messages {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;

  overflow-y: auto !important;

  padding: 18px !important;

  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(37, 103, 166, .27),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      #11345b 0%,
      #071b30 100%
    ) !important;
}

/* Eingabebereich */
.chat-bottom {
  flex: 0 0 auto !important;

  background:
    linear-gradient(
      180deg,
      #102b4b,
      #0a2038
    ) !important;
}

.chat-form {
  width: 100% !important;

  display: grid !important;

  grid-template-columns:
    minmax(0,1fr)
    130px !important;

  gap: 12px !important;

  box-sizing: border-box !important;

  padding: 12px 14px 15px !important;
}

.chat-input {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  height: 58px !important;

  box-sizing: border-box !important;

  padding: 0 18px !important;

  border: 0 !important;
  border-radius: 15px !important;

  color: #362400 !important;

  font-size: 1.04rem !important;

  background:
    linear-gradient(
      135deg,
      #ffe77c 0%,
      #ffc955 55%,
      #f39a30 100%
    ) !important;
}

.chat-send {
  width: 130px !important;
  height: 58px !important;

  border: 0 !important;
  border-radius: 15px !important;

  color: #302000 !important;

  font-weight: 900 !important;

  background:
    linear-gradient(
      135deg,
      #ffe57a,
      #ef902b
    ) !important;
}

/* keine permanente Emoji-Leiste */
.smiley-bar,
.smiley-hint {
  display: none !important;
}

/* Staff */
.staff-name,
.online-user.staff a,
.online-user.staff .user-link {
  font-style: italic !important;
}

.online-user.staff a {
  color: #ffc45c !important;
}

/* User Links */
.user-link {
  color: inherit;
  text-decoration: none;
}

.user-link:hover {
  color: #ffd36d;
  text-decoration: underline;
}

/* Smiley Picker */
.smiley-picker {
  display: none;

  max-height: 460px !important;
  overflow-y: auto !important;

  margin: 7px 14px 0 !important;
  padding: 14px !important;

  border-radius: 14px !important;

  background:
    linear-gradient(
      180deg,
      #173b64,
      #0d2948
    ) !important;

  border:
    1px solid rgba(255,196,91,.20) !important;

  box-shadow:
    0 15px 35px rgba(0,0,0,.25) !important;
}

.smiley-picker.open {
  display: block !important;
}

.smiley-picker-toolbar {
  position: sticky;
  top: -14px;
  z-index: 40;

  margin: -14px -14px 13px;
  padding: 12px;

  background:
    linear-gradient(
      180deg,
      #173b64,
      #102b4a
    );

  border-bottom:
    1px solid rgba(255,196,91,.20);
}

.smiley-search {
  width: 100%;
  box-sizing: border-box;

  padding: 10px 13px;

  border-radius: 10px;
  border:
    1px solid rgba(255,196,91,.32);

  color: white;
  background: #081d34;

  outline: none;
}

.smiley-search:focus {
  border-color: var(--hchat-orange);
}

.smiley-tabs {
  display: flex;
  gap: 6px;

  overflow-x: auto;

  padding-top: 9px;
}

.smiley-tab {
  flex: 0 0 auto;

  border-radius: 999px;
  border:
    1px solid rgba(255,196,91,.22);

  padding: 6px 10px;

  cursor: pointer;

  color: #ffd16d;

  background: #102947;
}

.smiley-tab.active {
  color: #2b1c00;

  border-color: #ffc75c;

  background:
    linear-gradient(
      135deg,
      #ffe477,
      #f19831
    );
}

.smiley-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.smiley-choice {
  width: 52px !important;
  height: 50px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 9px !important;

  border:
    1px solid rgba(255,255,255,.09) !important;

  cursor: pointer !important;

  font-size: 1.35rem !important;

  background: #102b4b !important;
}

.smiley-choice:hover {
  transform: scale(1.08);

  border-color:
    var(--hchat-orange) !important;

  background: #1b4e80 !important;
}

.smiley-category-title {
  margin: 10px 0 7px;

  color: var(--hchat-orange);

  font-weight: 800;
}

/* animierter Dusche-Smiley */
.custom-smiley {
  display: inline-flex;
  position: relative;

  width: 47px;
  height: 36px;

  vertical-align: middle;
}

.smiley-shower .shower-person {
  position: absolute;
  left: 10px;
  bottom: 0;

  font-size: 1.3rem;

  animation:
    hchat-shower-person
    .8s ease-in-out infinite alternate;
}

.smiley-shower .shower-water {
  position: absolute;
  top: -6px;
  left: 8px;

  animation:
    hchat-shower-water
    .5s linear infinite;
}

@keyframes hchat-shower-person {
  from {
    transform:
      translateY(0)
      rotate(-2deg);
  }

  to {
    transform:
      translateY(2px)
      rotate(2deg);
  }
}

@keyframes hchat-shower-water {
  from {
    transform: translateY(-2px);
    opacity: 1;
  }

  to {
    transform: translateY(8px);
    opacity: .15;
  }
}

/* vom Stuhl fallen */
.smiley-chairfall .chair-person {
  position: absolute;
  left: 3px;
  top: 2px;

  font-size: 1.35rem;

  transform-origin:
    bottom right;

  animation:
    hchat-chair-person
    2.1s ease-in-out infinite;
}

.smiley-chairfall .chair {
  position: absolute;
  right: 0;
  bottom: 0;

  font-size: 1.3rem;

  transform-origin:
    bottom center;

  animation:
    hchat-chair
    2.1s ease-in-out infinite;
}

@keyframes hchat-chair-person {
  0%,20%,100% {
    transform:
      translate(0,0)
      rotate(0deg);
  }

  55% {
    transform:
      translate(8px,6px)
      rotate(45deg);
  }

  72%,82% {
    transform:
      translate(15px,12px)
      rotate(90deg);
  }
}

@keyframes hchat-chair {
  0%,25%,100% {
    transform: rotate(0deg);
  }

  60%,82% {
    transform: rotate(25deg);
  }
}

/* Logo */
.hchat-brand-logo {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  text-decoration: none !important;
}

.hchat-brand-logo img {
  width: auto;
  height: 64px;

  max-width: 230px;

  object-fit: contain;

  border-radius: 10px;
}

.hchat-logo-fallback {
  color: var(--hchat-orange);

  font-size: 1.8rem;

  font-weight: 900;
}

/* Responsive */
@media(max-width:850px) {
  .lounge-shell {
    grid-template-columns:
      1fr !important;
  }

  .lounge-sidebar {
    order: -1;
  }

  .lounge-main {
    min-height: 72vh !important;
  }
}

@media(max-width:650px) {
  .chat-form {
    grid-template-columns:
      1fr !important;
  }

  .chat-send {
    width: 100% !important;
  }
}

/* ======================================================
   HCHAT FINAL BRANDING
   ====================================================== */

.hchat-top-brand {
  position: relative;
  min-height: 170px;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      #071a2d 0%,
      #0b2643 100%
    );
  border-bottom: 2px solid #f39a30;
}

.hchat-top-skyline {
  position: absolute;
  inset: 0;
  background-image:
    url('/assets/paderborn-skyline.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  opacity: .98;
  pointer-events: none;
}

.hchat-top-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(5,20,37,.88) 0%,
      rgba(5,20,37,.28) 35%,
      rgba(5,20,37,.08) 65%,
      rgba(5,20,37,.42) 100%
    );
  pointer-events: none;
}

.hchat-top-content {
  position: relative;
  z-index: 2;
  min-height: 170px;
  display: flex;
  align-items: center;
  padding: 15px 28px;
  box-sizing: border-box;
}

.hchat-top-logo {
  display: block;
  width: auto;
  height: 112px;
  max-width: 390px;
  object-fit: contain;
  filter:
    drop-shadow(
      0 7px 16px
      rgba(0,0,0,.38)
    );
}

.hchat-top-logo-fallback {
  color: #f5a43a;
  font-size: 3rem;
  font-weight: 900;
}

/* Lounge-Kopf vereinfachen */
body:has(.lounge-shell) .lounge-header {
  min-height: 48px;
  padding: 10px 18px !important;
}

body:has(.lounge-shell) .lounge-title {
  display: none !important;
}

/* eventuell vorhandene Raumaktionen ausblenden */
body:has(.lounge-shell)
.room-actions,

body:has(.lounge-shell)
.header-actions,

body:has(.lounge-shell)
.room-pin,

body:has(.lounge-shell)
.pin-button,

body:has(.lounge-shell)
.more-button,

body:has(.lounge-shell)
.options-button,

body:has(.lounge-shell)
.room-menu {
  display: none !important;
}

/* keine zweite Online-Anzeige im Chatkopf */
body:has(.lounge-shell)
.lounge-header
#onlineCount {
  display: none !important;
}

@media(max-width:800px) {
  .hchat-top-brand {
    min-height: 125px;
  }

  .hchat-top-content {
    min-height: 125px;
    padding: 10px 14px;
  }

  .hchat-top-logo {
    height: 82px;
    max-width: 280px;
  }

  .hchat-top-skyline {
    background-size: auto 125px;
  }
}

/* ======================================================
   HCHAT HEADER / SKYLINE / LOGO
   ====================================================== */

.hchat-top-brand {
  position: relative;
  min-height: 185px;
  overflow: hidden;
  background: linear-gradient(180deg, #071a2d 0%, #0c2948 100%);
  border-bottom: 2px solid #f39a30;
}

.hchat-top-skyline {
  position: absolute;
  inset: 0;
  background-image: url('/assets/paderborn-skyline.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  opacity: 0.96;
  pointer-events: none;
}

.hchat-top-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(5, 19, 34, 0.90) 0%,
      rgba(5, 19, 34, 0.38) 35%,
      rgba(5, 19, 34, 0.12) 65%,
      rgba(5, 19, 34, 0.42) 100%
    );
  pointer-events: none;
}

.hchat-top-content {
  position: relative;
  z-index: 2;
  min-height: 185px;
  display: flex;
  align-items: center;
  padding: 14px 26px;
  box-sizing: border-box;
}

.hchat-top-logo-link {
  display: inline-flex;
  align-items: center;
}

.hchat-top-logo {
  display: block;
  height: 118px;
  width: auto;
  max-width: 430px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.38));
}

.hchat-top-logo-fallback {
  color: #f39a30;
  font-size: 3rem;
  font-weight: 900;
}

/* Lounge noch breiter / cleaner */
body:has(.lounge-shell) main {
  max-width: none !important;
  width: 100% !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.lounge-shell) .lounge-shell {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 10px !important;
}

body:has(.lounge-shell) .lounge-main {
  min-height: calc(100vh - 110px) !important;
  width: 100% !important;
}

body:has(.lounge-shell) .chat-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

body:has(.lounge-shell) .chat-form {
  grid-template-columns: minmax(0,1fr) 130px !important;
  width: 100% !important;
}

body:has(.lounge-shell) .chat-input {
  width: 100% !important;
  max-width: none !important;
}

body:has(.lounge-shell) .chat-send {
  width: 130px !important;
}

/* Staff kursiv */
.staff-name,
.online-user.staff a,
.online-user.staff .user-link,
.role-owner,
.role-admin,
.role-head-mod,
.role-senior-mod,
.role-moderator {
  font-style: italic !important;
}

/* Klickbare User schöner */
.user-link,
a.user-link {
  text-decoration: none;
}

.user-link:hover,
a.user-link:hover {
  text-decoration: underline;
  color: #ffd36d !important;
}

/* Unerwünschte Elemente ausblenden */
.room-actions,
.header-actions,
.pin-button,
.room-pin,
.attach-button,
.attachment-button,
.paperclip-button,
.clip-button,
.menu-button,
.more-button,
.options-button,
.three-dots,
.three-dots-button,
#onlineCount {
  display: none !important;
}

@media (max-width: 850px) {
  .hchat-top-brand {
    min-height: 132px;
  }

  .hchat-top-content {
    min-height: 132px;
    padding: 10px 14px;
  }

  .hchat-top-logo {
    height: 84px;
    max-width: 290px;
  }

  body:has(.lounge-shell) .lounge-shell {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================
   HCHAT MODERATIONS- UND ADMINMENÜ
   ===================================================== */

.hchat-staff-menus {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 30;
}

.hchat-staff-menu {
  position: relative;
}

.hchat-staff-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;

  padding: 8px 12px;

  border:
    1px solid
    rgba(246,196,69,.34);

  border-radius: 8px;

  background:
    rgba(9,35,63,.92);

  color: #ffd568;

  font-size: 13px;
  font-weight: 800;
}

.hchat-staff-menu > summary::-webkit-details-marker {
  display: none;
}

.hchat-staff-menu > summary::after {
  content: " ▾";
}

.hchat-staff-menu[open] > summary::after {
  content: " ▴";
}

.hchat-staff-menu-content {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);

  min-width: 235px;

  padding: 7px;

  border:
    1px solid
    rgba(244,154,47,.35);

  border-radius: 10px;

  background: #0b223d;

  box-shadow:
    0 12px 28px
    rgba(0,0,0,.35);
}

.hchat-staff-menu-content a {
  display: block;

  padding: 9px 10px;

  border-radius: 7px;

  color: #eef5ff;
  text-decoration: none;

  font-size: 13px;
}

.hchat-staff-menu-content a:hover {
  background:
    rgba(244,154,47,.13);

  color: #ffd568;
}

.hchat-staff-menu-content
.staff-menu-disabled {
  opacity: .48;
  cursor: default;
}

@media(max-width:800px) {
  .hchat-staff-menus {
    flex-wrap: wrap;
  }

  .hchat-staff-menu-content {
    right: auto;
    left: 0;
  }
}

/* =====================================================
   HCHAT STAFF-MENÜ – FINALE POSITION
   ===================================================== */

body:has(.lounge-shell) .lounge-header {
  position: relative !important;
  padding-right: 345px !important;
}

body:has(.lounge-shell) .hchat-staff-menus {
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;

  margin: 0 !important;

  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 8px !important;

  z-index: 100 !important;
}

body:has(.lounge-shell) .hchat-staff-menu {
  position: relative !important;
}

body:has(.lounge-shell) .hchat-staff-menu > summary {
  min-width: 128px;

  box-sizing: border-box;

  text-align: center;

  padding: 9px 13px !important;

  border-radius: 9px !important;

  background: #0c2948 !important;

  border:
    1px solid
    rgba(246,196,69,.45) !important;

  color: #ffd568 !important;

  box-shadow:
    0 4px 12px
    rgba(0,0,0,.18);
}

body:has(.lounge-shell)
.hchat-staff-menu-content {
  top: calc(100% + 7px) !important;
  right: 0 !important;
  left: auto !important;

  min-width: 245px !important;

  padding: 7px !important;

  background: #091f37 !important;

  border:
    1px solid
    rgba(244,154,47,.42) !important;

  border-radius: 10px !important;

  box-shadow:
    0 14px 32px
    rgba(0,0,0,.42) !important;
}

body:has(.lounge-shell)
.hchat-staff-menu-content a {
  padding: 10px 11px !important;
  border-radius: 7px !important;
}

body:has(.lounge-shell)
.hchat-staff-menu-content a:hover {
  background:
    rgba(244,154,47,.14) !important;

  color: #ffd568 !important;
}

/* Noch nicht aktive Funktionen */
body:has(.lounge-shell)
.staff-menu-disabled {
  opacity: .42 !important;
}

/* Smartphone / kleines Tablet */
@media (max-width: 850px) {

  body:has(.lounge-shell) .lounge-header {
    padding-right: 16px !important;
  }

  body:has(.lounge-shell) .hchat-staff-menus {
    position: static !important;

    width: 100%;

    margin-top: 10px !important;

    justify-content: flex-start !important;

    flex-wrap: wrap;
  }

  body:has(.lounge-shell)
  .hchat-staff-menu-content {
    right: auto !important;
    left: 0 !important;
  }
}


/* =====================================================
   HCHAT EINHEITLICHES DESIGN
   ===================================================== */

:root {
  --hchat-bg: #07182b;
  --hchat-bg-2: #0a223c;
  --hchat-card: #0d2948;
  --hchat-card-2: #102f52;

  --hchat-border:
    rgba(244,154,47,.28);

  --hchat-orange: #f49a2f;
  --hchat-gold: #ffd262;

  --hchat-text: #eef5ff;
  --hchat-muted: #9fb4ca;
}

/* Grundfläche überall dunkel */
html,
body {
  background: var(--hchat-bg) !important;
  color: var(--hchat-text) !important;
}

/* keine alten weißen Container */
main,
.page,
.container,
.content,
.card,
.panel,
.box {
  background-color: transparent;
}

/* gemeinsame Kartenoptik */
.hchat-card,
.forumCategory,
.ranking-card,
.profile-card,
.control-card {
  background:
    linear-gradient(
      180deg,
      var(--hchat-card-2),
      var(--hchat-card)
    ) !important;

  border:
    1px solid
    var(--hchat-border) !important;

  border-radius: 12px !important;

  box-shadow:
    0 8px 22px
    rgba(0,0,0,.18);
}

/* Überschriften */
h1,
h2,
h3 {
  color: var(--hchat-gold);
}

/* Links */
a {
  color: var(--hchat-gold);
}

a:hover {
  color: #ffe294;
}

/* Eingabefelder */
input,
textarea,
select {
  background: #071b30 !important;
  color: var(--hchat-text) !important;

  border:
    1px solid
    rgba(255,255,255,.14) !important;

  border-radius: 8px;
}

input::placeholder,
textarea::placeholder {
  color: #7189a1;
}

/* Tabellen */
table {
  background: transparent !important;
}

th {
  background: #102f52 !important;
  color: var(--hchat-gold) !important;
}

td {
  background: transparent !important;
  color: var(--hchat-text) !important;
}

tr:hover td {
  background:
    rgba(244,154,47,.05) !important;
}

/* Buttons */
button,
.button,
.btn {
  border:
    1px solid
    rgba(244,154,47,.65);

  border-radius: 8px;

  background:
    linear-gradient(
      180deg,
      #ffc34f,
      #ef9228
    );

  color: #10243c;

  font-weight: 800;
}

button:hover,
.button:hover,
.btn:hover {
  filter: brightness(1.06);
}

/* Sekundärbutton */
.btn-secondary,
.button-secondary {
  background: #0c2948 !important;
  color: var(--hchat-gold) !important;

  border:
    1px solid
    rgba(255,210,98,.42) !important;
}

/* Footer */
footer {
  background: transparent !important;
  color: var(--hchat-muted);
}

/* =====================================================
   FORUM
   ===================================================== */

.forumWrap {
  color: var(--hchat-text);
}

.forumTop {
  padding: 18px;

  border:
    1px solid
    var(--hchat-border);

  border-radius: 12px;

  background:
    linear-gradient(
      180deg,
      #102f52,
      #0b2541
    );
}

.forumTop h1 {
  color: var(--hchat-orange);
}

.forumTop p {
  color: var(--hchat-muted);
}

.forumCategory {
  transition:
    transform .13s ease,
    border-color .13s ease;
}

.forumCategory:hover {
  transform: translateY(-1px);

  border-color:
    rgba(255,210,98,.5) !important;
}

.forumCategory h2 {
  color: var(--hchat-gold) !important;
}

.forumCategory p {
  color: var(--hchat-muted) !important;
}

.forumCount {
  color: var(--hchat-orange) !important;
}

/* =====================================================
   RANKING
   ===================================================== */

.rankingWrap,
.rankingPage,
.ranking-container {
  background: transparent !important;
  color: var(--hchat-text);
}

.rankingWrap table,
.rankingPage table,
.ranking-container table {
  width: 100%;
  border-collapse: collapse;

  border:
    1px solid
    var(--hchat-border);

  border-radius: 12px;

  overflow: hidden;

  background: var(--hchat-card) !important;
}

/* =====================================================
   MOBILE
   ===================================================== */

@media(max-width:800px) {

  .forumTop,
  .forumCategory {
    border-radius: 9px;
  }

  .forumCategory {
    align-items: flex-start;
    flex-direction: column;
  }

}

/* Startseite: Wer ist online */

.onlineHomeList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.onlineHomeUser {
  display: inline-flex;
  align-items: center;

  padding: 8px 11px;

  border:
    1px solid
    rgba(255,210,98,.24);

  border-radius: 999px;

  background:
    rgba(5,20,36,.5);

  color: #ffd262 !important;

  text-decoration: none;
}

.onlineHomeUser:hover {
  background:
    rgba(244,154,47,.12);
}

.onlineHomeStaff {
  font-style: italic;
}

/* HChat: Inkognito-Kennzeichnung für berechtigte Staff-Nutzer */

.onlineIncognitoBadge {
  display: inline-flex;
  align-items: center;

  margin-left: 7px;

  padding: 2px 7px;

  border:
    1px solid
    rgba(244,154,47,.42);

  border-radius: 999px;

  background:
    rgba(244,154,47,.12);

  color: #f4a136;

  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* =====================================================
   HCHAT GLOBALER SKYLINE HEADER
   ===================================================== */

body > header {
  position: relative;
  overflow: hidden;

  min-height: 145px;

  padding: 22px 28px !important;

  border-bottom:
    2px solid #f49a2f;

  background:
    linear-gradient(
      90deg,
      rgba(4,17,31,.96),
      rgba(6,28,50,.72),
      rgba(4,17,31,.76)
    ),
    url('/assets/paderborn-skyline.png')
      center 65% / cover no-repeat !important;

  color: #eef5ff !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,.25);
}

body > header h1 {
  margin: 0 0 4px !important;

  color: #ffd262 !important;

  font-size:
    clamp(34px,5vw,58px);

  text-shadow:
    0 3px 9px rgba(0,0,0,.5);
}

body > header > div {
  color: #eef5ff;
  font-weight: 650;
}

body > header nav {
  margin-top: 18px !important;
}

body > header nav a {
  display: inline-flex;

  padding: 7px 10px;

  margin:
    0 5px 5px 0 !important;

  border-radius: 7px;

  background:
    rgba(4,18,32,.68);

  color: #ffd262 !important;

  text-decoration: none;

  border:
    1px solid
    rgba(255,210,98,.15);
}

body > header nav a:hover {
  background:
    rgba(244,154,47,.17);
}


/* Forum ebenfalls mit Skyline */
.forumTop {
  background:
    linear-gradient(
      90deg,
      rgba(6,26,47,.96),
      rgba(9,42,73,.78)
    ),
    url('/assets/paderborn-skyline.png')
      center 64% / cover no-repeat !important;
}


/* Registrierungs-Checkboxen */
.legalCheckbox {
  display: flex;
  gap: 9px;

  max-width: 650px;

  margin:
    12px 0;

  color: #c9d7e6;
}

.legalCheckbox input {
  width: auto !important;
  margin: 4px 0 0 !important;
}

/* HChat Rechtsseiten */

.hchatLegalPage {
  width:
    min(980px, calc(100% - 32px));

  margin:
    28px auto 60px;

  padding: 28px;

  border:
    1px solid
    rgba(244,154,47,.24);

  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      #102f52,
      #0b2541
    ) !important;

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.2);
}

.hchatLegalPage h2 {
  color: #f4a136;
}

.hchatLegalPage h3 {
  margin-top: 27px;
  color: #ffd262;
}

.hchatLegalPage p {
  color: #c9d7e6;
  line-height: 1.7;
}

.hchatLegalPage a {
  color: #ffd262;
}

@media(max-width:650px) {
  .hchatLegalPage {
    padding: 18px;
  }
}

/* =====================================================
   HCHAT BENUTZERFREIGABE
   ===================================================== */

.approvalPage {
  width:
    min(1050px, calc(100% - 30px));

  margin:
    28px auto 70px;
}

.approvalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;

  padding: 20px;

  margin-bottom: 16px;

  border:
    1px solid rgba(244,154,47,.28);

  border-radius: 12px;

  background:
    linear-gradient(
      180deg,
      #102f52,
      #0b2541
    );
}

.approvalHeader h2 {
  margin: 0 0 5px;
  color: #ffd262;
}

.approvalHeader p {
  margin: 0;
  color: #a9bdd2;
}

.approvalBack {
  white-space: nowrap;
  text-decoration: none;

  padding: 9px 12px;

  border:
    1px solid rgba(255,210,98,.3);

  border-radius: 8px;

  background: #071b30;

  color: #ffd262 !important;
}

.approvalInfo {
  padding: 14px 16px;

  margin-bottom: 15px;

  border-left:
    4px solid #f49a2f;

  border-radius: 8px;

  background: #0b2541;

  color: #c9d7e6;
}

.approvalList {
  display: grid;
  gap: 10px;
}

.approvalUserCard {
  padding: 17px;

  border:
    1px solid rgba(244,154,47,.22);

  border-radius: 11px;

  background:
    linear-gradient(
      180deg,
      #102f52,
      #0d2948
    );
}

.approvalUserTop {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;
}

.approvalUserName {
  color: #ffd262;
  font-size: 18px;
}

.approvalUserMail {
  margin-top: 3px;
  color: #9fb4ca;
}

.approvalMeta {
  margin-top: 10px;
  color: #b9c9d9;
  font-size: 13px;
}

.approvalStatus {
  display: inline-flex;

  padding: 5px 9px;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 800;
}

.approvalOk {
  background: rgba(77,187,119,.13);
  color: #8ee3ae;

  border:
    1px solid rgba(77,187,119,.28);
}

.approvalOpen {
  background: rgba(244,154,47,.12);
  color: #ffd262;

  border:
    1px solid rgba(244,154,47,.32);
}

.approvalForm {
  margin-top: 14px;
}

@media(max-width:650px) {

  .approvalHeader,
  .approvalUserTop {
    align-items: flex-start;
    flex-direction: column;
  }

}





/* === HCHAT ONLINE ACTIONS 2026 === */

.hchat-online-user {
  display: flex;
  align-items: center;
  gap: 7px;

  width: 100%;
  padding: 5px 7px;

  border-radius: 7px;
}

.hchat-online-user:hover {
  background: rgba(34, 94, 148, .16);
}

.hchat-online-name {
  flex: 1;

  border: 0;
  padding: 2px 4px;

  background: transparent;

  color: #eef6ff;
  font: inherit;
  font-weight: 700;

  text-align: left;
  cursor: pointer;
}

.hchat-online-name:hover {
  color: #ffd262;
  text-decoration: underline;
}

.hchat-online-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  border: 1px solid rgba(107, 166, 220, .28);
  border-radius: 7px;

  background: rgba(7, 35, 64, .72);

  color: #dcefff;
  text-decoration: none;

  cursor: pointer;
}

.hchat-online-action:hover {
  background: rgba(17, 71, 118, .90);

  border-color: rgba(111, 186, 245, .62);

  box-shadow:
    0 0 9px rgba(48, 138, 220, .25);
}

.hchat-online-whisper {
  color: #7ec8ff;
}

.hchat-online-profile {
  color: #ffd262;
}

/* öffentliche Direktansprache */
.hchat-message-direct {
  padding: 4px 7px;
  margin: 2px 0;

  border-radius: 5px;

  background:
    rgba(22, 72, 116, .34);
}

/* Flüstern - wird im nächsten Patch technisch aktiviert */
.hchat-message-whisper {
  padding: 5px 8px;
  margin: 3px 0;

  border:
    1px solid rgba(80, 176, 255, .68);

  border-radius: 6px;

  background:
    linear-gradient(
      90deg,
      rgba(17, 76, 128, .70),
      rgba(10, 48, 89, .78)
    );

  box-shadow:
    0 0 10px rgba(46, 145, 226, .32),
    inset 0 0 12px rgba(92, 182, 255, .08);
}

.hchat-message-whisper .hchat-message-target {
  font-weight: 900;
  color: #bfe7ff;
}

/* === /HCHAT ONLINE ACTIONS 2026 === */

/* === HCHAT SKYLINE CLEAN 2026 === */

body > header {
  position: relative;
  overflow: hidden;

  padding-top: 88px !important;

  background:
    linear-gradient(
      180deg,
      #031427 0%,
      #041a31 100%
    ) !important;

  border-bottom:
    2px solid #f49a2f !important;
}

body > header::before {
  content: '';

  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: 88px;

  background-image:
    url('/assets/paderborn-skyline.png');

  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;

  opacity: .88;

  pointer-events: none;
  z-index: 0;
}

body > header::after {
  content: '';

  position: absolute;
  top: 45px;
  left: 0;
  right: 0;

  height: 45px;

  background:
    linear-gradient(
      180deg,
      rgba(3,20,39,0) 0%,
      rgba(3,20,39,.85) 100%
    );

  pointer-events: none;
  z-index: 1;
}

body > header > * {
  position: relative;
  z-index: 2;
}

@media (max-width: 700px) {
  body > header {
    padding-top: 70px !important;
  }

  body > header::before {
    height: 70px;
  }

  body > header::after {
    top: 36px;
    height: 36px;
  }
}

/* === /HCHAT SKYLINE CLEAN 2026 === */


/* === HCHAT BACKEND 2026 === */

.hchatBackend {
  width:
    min(1450px, calc(100% - 32px));

  margin:
    22px auto 70px;
}

.hchatBackendHero {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;

  padding: 20px 22px;

  border:
    1px solid rgba(244,154,47,.30);

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #123b68,
      #0a2542
    );
}

.hchatBackendHero h2 {
  margin: 0 0 5px;

  color: #ffd262;
}

.hchatBackendHero p {
  margin: 0;

  color: #c5d8eb;
}

.hchatBackendBack {
  padding: 9px 13px;

  border:
    1px solid rgba(244,154,47,.40);

  border-radius: 8px;

  color: #ffd262;

  text-decoration: none;
}

.hchatBackendGrid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(210px,1fr)
    );

  gap: 12px;

  margin-bottom: 18px;
}

.hchatBackendCard {
  display: flex;
  flex-direction: column;

  gap: 5px;

  padding: 17px;

  border:
    1px solid rgba(244,154,47,.24);

  border-radius: 12px;

  background: #0c2948;

  color: #eef6ff;

  text-decoration: none;

  transition:
    transform .12s ease,
    border-color .12s ease,
    box-shadow .12s ease;
}

.hchatBackendCard:hover {
  transform: translateY(-2px);

  border-color:
    rgba(244,154,47,.65);

  box-shadow:
    0 8px 20px rgba(0,0,0,.22);
}

.hchatBackendCard strong {
  color: #ffd262;
}

.hchatBackendCard span {
  color: #a9c1d9;

  font-size: 13px;
}

.hchatBackendPanel {
  margin-top: 16px;

  padding: 20px;

  border:
    1px solid rgba(244,154,47,.22);

  border-radius: 14px;

  background:
    linear-gradient(
      180deg,
      #0e3155,
      #09233e
    );
}

.hchatBackendPanel h3 {
  margin-top: 0;

  color: #f4a136;
}

.hchatTableScroll {
  width: 100%;

  overflow-x: auto;
}

.hchatBackend table {
  width: 100%;

  border-collapse: collapse;
}

.hchatBackend th,
.hchatBackend td {
  padding: 10px;

  border-bottom:
    1px solid rgba(255,255,255,.08);

  text-align: left;
}

.hchatBackend th {
  color: #ffd262;
}

.hchatBackend td {
  color: #d7e5f3;
}

.hchatBackendForm {
  display: grid;

  grid-template-columns:
    1.2fr .7fr 1.5fr auto;

  gap: 10px;

  align-items: end;

  margin-bottom: 18px;
}

.hchatBackendForm label,
.hchatBackendContentForm label {
  display: flex;

  flex-direction: column;

  gap: 6px;

  color: #ffd262;

  font-weight: 700;
}

.hchatBackendForm input,
.hchatBackendForm select,
.hchatBackendContentForm input,
.hchatBackendContentForm textarea {
  width: 100%;

  box-sizing: border-box;

  border:
    1px solid rgba(110,170,220,.30);

  border-radius: 8px;

  background: #071d34;

  color: #eef6ff;

  padding: 10px;
}

.hchatBackendContentForm {
  display: grid;

  gap: 15px;
}

.hchatInlineForm {
  display: inline;
}

.hchatDangerButton {
  border: 1px solid #ff5e72;

  background: #6d1c2a;

  color: #fff;

  border-radius: 7px;

  padding: 7px 10px;
}

.hchatDangerButton:hover {
  background: #92283a;
}

.hchatSmallButton {
  padding: 6px 9px;

  border-radius: 7px;
}

@media (max-width: 900px) {
  .hchatBackendForm {
    grid-template-columns: 1fr;
  }
}

/* === /HCHAT BACKEND 2026 === */

/* === HCHAT BACKEND 2FA 2026 === */

.hchat2faCard {
  width: min(460px, calc(100% - 32px));

  margin: 50px auto;

  padding: 26px;

  border:
    1px solid rgba(244,154,47,.38);

  border-radius: 16px;

  background:
    linear-gradient(
      180deg,
      #10365e,
      #082440
    );

  box-shadow:
    0 18px 45px rgba(0,0,0,.28);

  text-align: center;
}

.hchat2faCard h2 {
  color: #ffd262;
}

.hchat2faQr {
  display: inline-flex;

  margin: 16px auto;

  padding: 14px;

  border-radius: 12px;

  background: white;
}

.hchat2faQr img {
  display: block;
}

.hchat2faForm {
  display: grid;

  gap: 12px;

  margin-top: 18px;
}

.hchat2faForm input {
  width: 100%;

  box-sizing: border-box;

  padding: 14px;

  border:
    1px solid rgba(126,200,255,.45);

  border-radius: 9px;

  background: #061b31;

  color: #fff;

  font-size: 26px;

  font-weight: 800;

  letter-spacing: 8px;

  text-align: center;
}

.hchat2faForm button {
  padding: 12px;
}

/* === /HCHAT BACKEND 2FA 2026 === */

/* === HCHAT LOUNGE V4 2026 === */


/* Bildschirm besser nutzen */

body:has(.lounge-shell) main {
  width: 100% !important;
  max-width: none !important;

  box-sizing: border-box;

  margin: 0 !important;

  padding: 6px !important;
}

body:has(.lounge-shell)
.lounge-shell {
  height:
    calc(
      100dvh -
      var(
        --hchat-header-height,
        170px
      ) -
      12px
    ) !important;

  min-height: 480px !important;

  max-height:
    calc(
      100dvh -
      var(
        --hchat-header-height,
        170px
      ) -
      12px
    ) !important;
}


/* Chatfenster scrollt */

body:has(.lounge-shell)
.chat-messages,
#chatMessages {
  min-height: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  scrollbar-gutter: stable;

  scroll-behavior: smooth;
}


/* Eingabe bleibt unten */

body:has(.lounge-shell)
.chat-form,
#chatForm {
  position: sticky !important;

  bottom: 0 !important;

  z-index: 30 !important;

  display: flex !important;

  align-items: center !important;

  gap: 7px !important;

  padding-top: 7px !important;

  background:
    #092846 !important;
}

#chatInput {
  flex: 1 1 auto !important;

  min-width: 120px !important;
}


/* Online-Liste */

.hchat-online-user {
  display: flex;

  align-items: center;

  gap: 6px;

  width: 100%;

  padding: 4px 2px;

  box-sizing: border-box;
}

.hchat-online-dot {
  color: #61ff7b;

  font-size: 10px;

  text-shadow:
    0 0 6px
    rgba(97,255,123,.75);
}

.hchat-online-action {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 28px;

  width: 28px;
  height: 28px;

  padding: 0;

  border:
    1px solid
    rgba(113,181,238,.35);

  border-radius: 7px;

  background:
    #0a3157;

  color: #eaf6ff;

  text-decoration: none;

  cursor: pointer;
}

.hchat-online-action:hover {
  background: #14598e;

  border-color: #73c9ff;

  box-shadow:
    0 0 10px
    rgba(64,174,255,.38);
}

.hchat-online-name {
  flex: 1 1 auto;

  min-width: 0;

  border: 0;

  padding: 3px 4px;

  background: transparent;

  color: #ffd262;

  font: inherit;

  font-weight: 800;

  text-align: left;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  cursor: pointer;
}

.hchat-online-name:hover {
  color: #fff176;

  text-decoration: underline;
}


/* Direkt-/Flüstermodus über Eingabe */

.hchat-compose-mode {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin: 5px 0;

  padding: 6px 10px;

  border:
    1px solid
    rgba(93,184,255,.48);

  border-radius: 8px;

  background:
    rgba(17,75,124,.70);

  color: #d8efff;

  font-weight: 800;
}

.hchat-compose-mode[hidden] {
  display: none !important;
}

.hchat-compose-close {
  width: 28px;
  height: 28px;

  border: 0;

  border-radius: 6px;

  background:
    rgba(255,255,255,.12);

  color: white;

  font-size: 20px;

  line-height: 1;

  cursor: pointer;
}

#chatInput.hchat-input-direct {
  border-color:
    #4bb6ff !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(75,182,255,.55);
}

#chatInput.hchat-input-whisper {
  border-color:
    #64c6ff !important;

  box-shadow:
    0 0 12px
      rgba(52,166,255,.40),
    inset 0 0 0 1px
      rgba(100,198,255,.65);
}


/* Nachrichten */

.hchat-message {
  padding: 4px 7px;

  margin: 2px 0;

  border-radius: 6px;
}

.hchat-message-direct {
  border-left:
    3px solid #42a5f5;

  background:
    rgba(20,82,136,.40);
}

.hchat-message-whisper {
  border:
    1px solid
    rgba(85,190,255,.74);

  background:
    linear-gradient(
      90deg,
      rgba(18,86,147,.78),
      rgba(8,49,92,.88)
    );

  box-shadow:
    0 0 11px
      rgba(38,154,239,.36),
    inset 0 0 12px
      rgba(111,206,255,.08);
}

.hchat-whisper-prefix {
  margin-right: 4px;

  filter:
    drop-shadow(
      0 0 4px
      rgba(84,194,255,.65)
    );
}

.hchat-message-divider {
  color: #dceeff;

  font-weight: 900;
}

.hchat-message-target {
  color: #9ddaff;

  font-weight: 900;
}

.hchat-message-whisper
.hchat-message-target {
  color: #d0efff;

  font-weight: 950;
}


/* Schriftfarben */

.hchat-color-picker {
  flex: 0 0 auto;

  height: 38px;

  max-width: 118px;

  padding: 0 7px;

  border:
    1px solid
    rgba(244,154,47,.42);

  border-radius: 7px;

  background: #071f38;

  color: #ffd262;

  font-weight: 700;

  cursor: pointer;
}


/* Lounge-Header kompakter */

body:has(.lounge-shell) > header {
  min-height: 0 !important;

  padding-top: 64px !important;

  padding-bottom: 8px !important;
}

body:has(.lounge-shell)
> header::before {
  height: 64px !important;

  background-size:
    100% 64px !important;

  background-position:
    center bottom !important;
}


/* kleinere Displays */

@media (max-width: 850px) {
  body:has(.lounge-shell)
  .lounge-shell {
    height: auto !important;
    max-height: none !important;
    min-height: 70dvh !important;
  }

  #chatForm {
    flex-wrap: wrap !important;
  }

  .hchat-color-picker {
    max-width: 100px;
  }

  .hchat-online-action {
    flex-basis: 32px;

    width: 32px;
    height: 32px;
  }
}

/* === /HCHAT LOUNGE V4 2026 === */

/* === HCHAT LOUNGE V4 CLIENT FIX 2026 === */

.hchat-online-user {
  display: grid !important;

  grid-template-columns:
    12px 32px minmax(0,1fr) 32px;

  align-items: center;

  gap: 6px;

  width: 100%;

  padding: 5px 3px;

  box-sizing: border-box;
}

.hchat-online-dot {
  color: #6cff8c;

  font-size: 10px;

  text-shadow:
    0 0 7px rgba(108,255,140,.8);
}

.hchat-online-action {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  padding: 0;

  border:
    1px solid rgba(99,181,245,.32);

  border-radius: 7px;

  background:
    rgba(8,43,76,.92);

  color: #dff2ff;

  cursor: pointer;

  text-decoration: none;
}

.hchat-online-action:hover {
  border-color: #7ec8ff;

  background: #164f81;

  box-shadow:
    0 0 9px rgba(56,170,255,.36);
}

.hchat-online-whisper {
  color: #77d5ff;
}

.hchat-online-profile {
  color: #ffd262;
}

.hchat-online-name {
  min-width: 0;

  padding: 4px 2px;

  border: 0;

  background: transparent;

  color: #ffd262;

  font: inherit;
  font-weight: 700;
  font-style: italic;

  text-align: left;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  cursor: pointer;
}

.hchat-online-name:hover {
  color: #fff09b;

  text-decoration: underline;
}


/* Adressierungsleiste */

.hchat-compose-bar {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin:
    4px 14px 0;

  padding:
    7px 10px;

  border:
    1px solid rgba(88,180,250,.48);

  border-radius: 7px;

  background:
    rgba(15,66,109,.88);

  color: #caeaff;

  font-weight: 700;
}

.hchat-compose-bar[hidden] {
  display: none !important;
}

.hchat-compose-close {
  min-width: 30px;
  height: 28px;

  border:
    1px solid rgba(255,255,255,.15);

  border-radius: 6px;

  background:
    rgba(255,255,255,.08);

  color: white;

  font-size: 20px;

  cursor: pointer;
}


/* Direkt / Flüstern */

.hchat-message-direct {
  border-left:
    3px solid #3ea6ef;

  background:
    rgba(31,94,148,.34);
}

.hchat-message-whisper {
  margin: 4px 0;

  padding: 6px 9px;

  border:
    1px solid rgba(73,180,255,.76);

  border-radius: 7px;

  background:
    linear-gradient(
      90deg,
      rgba(14,79,134,.88),
      rgba(7,48,88,.90)
    );

  box-shadow:
    0 0 11px rgba(54,163,246,.35),
    inset 0 0 12px rgba(110,204,255,.07);
}

.hchat-whisper-symbol {
  margin-right: 5px;
}

.hchat-message-target {
  color: #a8dcff;

  font-weight: 900;
}

.hchat-message-divider {
  font-weight: 800;
}


/* Eingabemodus */

#chatInput.hchat-input-direct {
  outline:
    2px solid rgba(61,158,231,.42);
}

#chatInput.hchat-input-whisper {
  outline:
    2px solid rgba(64,181,255,.70);

  box-shadow:
    0 0 13px rgba(55,164,245,.38);
}


/* Farbauswahl */

.hchat-color-wrap {
  display: flex;

  flex-direction: column;

  gap: 2px;

  flex:
    0 0 118px;

  color: #ffd262;

  font-size: 11px;

  font-weight: 700;
}

.hchat-color-picker {
  width: 118px;

  height: 34px;

  padding: 0 7px;

  border:
    1px solid rgba(244,154,47,.38);

  border-radius: 7px;

  background: #071f37;

  font-weight: 800;

  cursor: pointer;
}


/* Chatbereich wirklich scrollbar,
   Eingabe bleibt unten */

body:has(.lounge-shell)
.lounge-main {
  min-height: 0 !important;

  display: flex !important;

  flex-direction: column !important;
}

body:has(.lounge-shell)
.chat-messages {
  flex: 1 1 auto !important;

  min-height: 180px !important;

  overflow-y: auto !important;

  overflow-x: hidden !important;

  scrollbar-gutter: stable;
}

body:has(.lounge-shell)
.chat-form {
  flex: 0 0 auto !important;

  position: sticky !important;

  bottom: 0 !important;

  z-index: 25 !important;
}


/* Lounge stärker an Bildschirmhöhe anpassen */

body:has(.lounge-shell)
.lounge-shell {
  min-height:
    calc(100dvh - 300px) !important;

  height:
    calc(100dvh - 300px) !important;

  max-height:
    calc(100dvh - 300px) !important;
}


/* Header in der Lounge kompakter */

body:has(.lounge-shell) > header {
  min-height: 0 !important;

  padding-bottom:
    10px !important;
}


@media (max-width: 900px) {

  body:has(.lounge-shell)
  .lounge-shell {
    height: auto !important;

    max-height: none !important;

    min-height:
      calc(100dvh - 220px) !important;
  }

  .hchat-online-user {
    grid-template-columns:
      12px 32px minmax(90px,1fr) 32px;
  }

  .hchat-color-wrap {
    flex-basis: 100px;
  }

  .hchat-color-picker {
    width: 100px;
  }
}

/* === /HCHAT LOUNGE V4 CLIENT FIX 2026 === */

/* === HCHAT LOUNGE VIEWPORT V5 2026 === */

/*
 * Die Lounge bekommt exakt den noch
 * verfügbaren Bereich des Browserfensters.
 */
body:has(.lounge-shell) {
  overflow: hidden !important;
}

body:has(.lounge-shell) main {
  overflow: hidden !important;

  min-height: 0 !important;
}

body:has(.lounge-shell)
.lounge-shell {
  height:
    var(
      --hchat-lounge-height,
      calc(100dvh - 330px)
    ) !important;

  min-height: 460px !important;

  max-height:
    var(
      --hchat-lounge-height,
      calc(100dvh - 330px)
    ) !important;

  overflow: hidden !important;
}


/*
 * Linker Chatbereich:
 * nur Nachrichten wachsen/schrumpfen.
 */
body:has(.lounge-shell)
.lounge-main {
  display: flex !important;

  flex-direction: column !important;

  min-width: 0 !important;
  min-height: 0 !important;

  height: 100% !important;

  overflow: hidden !important;
}


/*
 * Nachrichtenfenster ist der einzige
 * vertikal scrollende Hauptbereich.
 */
body:has(.lounge-shell)
.chat-messages,
body:has(.lounge-shell)
#chatMessages {
  flex: 1 1 auto !important;

  min-height: 0 !important;
  height: auto !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  scrollbar-gutter: stable;

  overscroll-behavior: contain;

  padding-bottom: 12px;
}


/*
 * Smiley-Leiste, Direkt-/Flüsterstatus
 * und Formular dürfen nicht
 * zusammengestaucht werden.
 */
body:has(.lounge-shell)
#smileyToggle,
body:has(.lounge-shell)
.smiley-toolbar,
body:has(.lounge-shell)
.hchat-compose-bar {
  flex: 0 0 auto !important;
}


/*
 * Nachrichtenfeld bleibt am unteren Rand
 * des Chatbereichs stehen.
 */
body:has(.lounge-shell)
.chat-form,
body:has(.lounge-shell)
#chatForm {
  position: sticky !important;

  left: 0;
  right: 0;
  bottom: 0 !important;

  z-index: 40 !important;

  flex: 0 0 auto !important;

  margin-top: 0 !important;

  background:
    linear-gradient(
      180deg,
      #12385f 0%,
      #092743 100%
    ) !important;

  box-shadow:
    0 -8px 18px
    rgba(0,0,0,.16);
}


/*
 * Eingabe darf auf großen Monitoren
 * schön breit werden.
 */
body:has(.lounge-shell)
#chatInput {
  min-width: 0 !important;

  flex: 1 1 auto !important;
}


/*
 * Rechte Online-Spalte genauso hoch
 * wie das Chatfenster.
 */
body:has(.lounge-shell)
.lounge-online,
body:has(.lounge-shell)
.online-panel,
body:has(.lounge-shell)
aside {
  min-height: 0;

  overflow-y: auto;
}


/*
 * Auf kleinen Displays darf die Seite
 * wieder normal scrollen.
 */
@media (max-width: 850px) {

  body:has(.lounge-shell) {
    overflow: auto !important;
  }

  body:has(.lounge-shell) main {
    overflow: visible !important;
  }

  body:has(.lounge-shell)
  .lounge-shell {
    height: auto !important;

    max-height: none !important;

    min-height:
      calc(100dvh - 210px) !important;

    overflow: visible !important;
  }

  body:has(.lounge-shell)
  .lounge-main {
    min-height: 62dvh !important;
  }

  body:has(.lounge-shell)
  .chat-messages,
  body:has(.lounge-shell)
  #chatMessages {
    min-height: 45dvh !important;
  }
}

/* === /HCHAT LOUNGE VIEWPORT V5 2026 === */


/* === HCHAT PRESENCE V1 2026 === */


/* Ampel */

.hchat-online-dot.hchat-status-online {
  color: #55ff7a !important;

  text-shadow:
    0 0 7px #55ff7a;
}

.hchat-online-dot.hchat-status-away {
  color: #ffd740 !important;

  text-shadow:
    0 0 7px #ffd740;
}

.hchat-online-dot.hchat-status-dnd {
  color: #ff4155 !important;

  text-shadow:
    0 0 7px #ff4155;
}


/* Eigener Presence-Schalter */

.hchat-presence-control {
  display: grid;

  gap: 4px;

  margin:
    8px 7px 10px;

  padding:
    8px;

  border:
    1px solid
    rgba(244,154,47,.25);

  border-radius: 8px;

  background:
    rgba(5,36,66,.66);
}

.hchat-presence-control span {
  color: #ffd262;

  font-size: 11px;

  font-weight: 800;
}

.hchat-presence-control select {
  width: 100%;

  padding: 6px;

  border:
    1px solid
    rgba(111,182,237,.35);

  border-radius: 6px;

  background: #071f38;

  color: #edf7ff;
}


/* Geschlechtsfilter */

.hchat-gender-filters {
  display: flex;

  flex-wrap: wrap;

  gap: 4px;

  margin:
    0 7px 10px;
}

.hchat-gender-filter {
  padding:
    4px 6px;

  border:
    1px solid
    rgba(99,169,226,.25);

  border-radius: 6px;

  background:
    #092947;

  color:
    #bcd4e8;

  font-size:
    10px;

  cursor:
    pointer;
}

.hchat-gender-filter:hover {
  border-color:
    #5ab6f0;
}

.hchat-gender-filter.active {
  border-color:
    #f4a136;

  background:
    #173d61;

  color:
    #ffd262;
}


/* Gruppen */

.hchat-online-group {
  margin-bottom:
    8px;
}

.hchat-online-group-title {
  margin:
    5px 7px 3px;

  padding:
    4px 5px;

  border-bottom:
    1px solid
    rgba(255,255,255,.09);

  color:
    #c7dff3;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    .2px;
}

.hchat-group-friends
.hchat-online-group-title {
  color:
    #ffd262;
}


/* Farben im Nachrichtenkörper erzwingen */

.hchat-chat-message
.hchat-message-body,
.hchat-chat-message
.hchat-message-body *,
.hchat-message
.hchat-message-body,
.hchat-message
.hchat-message-body * {
  color:
    var(
      --hchat-message-color,
      inherit
    ) !important;
}


/* Farbige Texte werden auf dunkelblau
   etwas klarer lesbar */

.hchat-message-body {
  text-shadow:
    0 0 4px
    color-mix(
      in srgb,
      var(
        --hchat-message-color,
        #ffffff
      ) 35%,
      transparent
    );
}


/* Online-Spalte darf unabhängig scrollen */

#onlineList {
  overflow-y: auto;

  min-height: 0;
}


/* === /HCHAT PRESENCE V1 2026 === */

/* === HCHAT CHAT SCROLL V6 2026 === */


/* -------------------------------------------------------
   LOUNGE ALS FESTE FLEX-FLÄCHE
   ------------------------------------------------------- */

body:has(.lounge-shell)
.lounge-shell {
  overflow:
    hidden !important;
}

body:has(.lounge-shell)
.lounge-main {
  display:
    flex !important;

  flex-direction:
    column !important;

  min-height:
    0 !important;

  height:
    100% !important;

  overflow:
    hidden !important;
}


/* -------------------------------------------------------
   NUR DAS NACHRICHTENFENSTER SCROLLT
   ------------------------------------------------------- */

body:has(.lounge-shell)
#chatMessages,
body:has(.lounge-shell)
.chat-messages {
  position:
    relative;

  flex:
    1 1 0 !important;

  height:
    0 !important;

  min-height:
    160px !important;

  max-height:
    none !important;

  overflow-y:
    scroll !important;

  overflow-x:
    hidden !important;

  overscroll-behavior:
    contain;

  scrollbar-gutter:
    stable;

  scrollbar-width:
    thin;
}


/* WebKit / Chrome / Edge Scrollbar */

body:has(.lounge-shell)
#chatMessages::-webkit-scrollbar,
body:has(.lounge-shell)
.chat-messages::-webkit-scrollbar {
  width:
    10px;
}

body:has(.lounge-shell)
#chatMessages::-webkit-scrollbar-track,
body:has(.lounge-shell)
.chat-messages::-webkit-scrollbar-track {
  background:
    rgba(3,20,39,.45);
}

body:has(.lounge-shell)
#chatMessages::-webkit-scrollbar-thumb,
body:has(.lounge-shell)
.chat-messages::-webkit-scrollbar-thumb {
  border:
    2px solid #0a2948;

  border-radius:
    10px;

  background:
    #285d88;
}

body:has(.lounge-shell)
#chatMessages::-webkit-scrollbar-thumb:hover,
body:has(.lounge-shell)
.chat-messages::-webkit-scrollbar-thumb:hover {
  background:
    #3c7eb1;
}


/* -------------------------------------------------------
   UNTERER BEDIENBEREICH BLEIBT FIX
   ------------------------------------------------------- */

body:has(.lounge-shell)
.smiley-toolbar,
body:has(.lounge-shell)
#smileyToggle,
body:has(.lounge-shell)
.hchat-compose-bar,
body:has(.lounge-shell)
.hchat-color-wrap,
body:has(.lounge-shell)
#chatForm,
body:has(.lounge-shell)
.chat-form {
  flex-shrink:
    0 !important;
}

body:has(.lounge-shell)
#chatForm,
body:has(.lounge-shell)
.chat-form {
  position:
    relative !important;

  bottom:
    auto !important;

  z-index:
    50 !important;

  background:
    linear-gradient(
      180deg,
      #12385f 0%,
      #082540 100%
    ) !important;

  box-shadow:
    0 -8px 18px
    rgba(0,0,0,.18);
}


/* -------------------------------------------------------
   STAFF-TEST: SELBSTFLÜSTERN
   ------------------------------------------------------- */

.hchat-online-action-disabled {
  opacity:
    .28 !important;

  cursor:
    not-allowed !important;

  filter:
    grayscale(1);
}


/* -------------------------------------------------------
   NACHRICHTENFARBEN DEUTLICHER
   ------------------------------------------------------- */

.hchat-message-body {
  font-weight:
    600 !important;

  color:
    var(
      --hchat-message-color,
      #eef6ff
    ) !important;

  text-shadow:
    0 0 3px
    color-mix(
      in srgb,
      var(
        --hchat-message-color,
        #eef6ff
      ) 50%,
      transparent
    ) !important;
}

.hchat-message-body * {
  color:
    inherit !important;
}


/* Flüstern bleibt blau markiert,
   aber Textfarbe des Chatters bleibt erhalten */

.hchat-message-whisper
.hchat-message-body {
  color:
    var(
      --hchat-message-color,
      #eef6ff
    ) !important;
}


/* -------------------------------------------------------
   MOBILE
   ------------------------------------------------------- */

@media (max-width: 850px) {

  body:has(.lounge-shell)
  #chatMessages,
  body:has(.lounge-shell)
  .chat-messages {
    height:
      auto !important;

    min-height:
      42dvh !important;

    max-height:
      58dvh !important;
  }
}

/* === /HCHAT CHAT SCROLL V6 2026 === */


/* === HCHAT CHAT SCROLL V7 2026 === */

/*
 * Wichtig:
 * Der große Nachrichtenbereich nimmt
 * den restlichen Platz ein und scrollt.
 */
body:has(.lounge-shell)
.lounge-main {
  display: flex !important;

  flex-direction: column !important;

  min-height: 0 !important;

  height: 100% !important;

  overflow: hidden !important;
}


body:has(.lounge-shell)
#chatMessages,
body:has(.lounge-shell)
.chat-messages {
  flex:
    1 1 auto !important;

  min-height:
    0 !important;

  height:
    auto !important;

  max-height:
    none !important;

  overflow-y:
    auto !important;

  overflow-x:
    hidden !important;

  overscroll-behavior:
    contain;

  scrollbar-gutter:
    stable both-edges;
}


/*
 * Unterer Bedienbereich bleibt außerhalb
 * des Scrollfensters stehen.
 */
body:has(.lounge-shell)
#smileyToggle,
body:has(.lounge-shell)
.smiley-toolbar,
body:has(.lounge-shell)
.hchat-compose-bar,
body:has(.lounge-shell)
.hchat-color-wrap,
body:has(.lounge-shell)
#chatForm,
body:has(.lounge-shell)
.chat-form {
  flex:
    0 0 auto !important;
}


/*
 * Eingabebereich bleibt sichtbar.
 */
body:has(.lounge-shell)
#chatForm,
body:has(.lounge-shell)
.chat-form {
  position:
    relative !important;

  bottom:
    auto !important;

  z-index:
    50 !important;

  background:
    linear-gradient(
      180deg,
      #12395f,
      #08243f
    ) !important;

  box-shadow:
    0 -7px 18px
    rgba(0,0,0,.18);
}


/*
 * Deaktivierter eigener Flüsterbutton
 * bei normalen Nutzern.
 */
.hchat-online-action-disabled {
  opacity:
    .28 !important;

  cursor:
    not-allowed !important;

  filter:
    grayscale(1);
}


/*
 * Scrollbar sichtbar machen.
 */
body:has(.lounge-shell)
#chatMessages::-webkit-scrollbar,
body:has(.lounge-shell)
.chat-messages::-webkit-scrollbar {
  width:
    11px;
}


body:has(.lounge-shell)
#chatMessages::-webkit-scrollbar-track,
body:has(.lounge-shell)
.chat-messages::-webkit-scrollbar-track {
  background:
    #061a2d;
}


body:has(.lounge-shell)
#chatMessages::-webkit-scrollbar-thumb,
body:has(.lounge-shell)
.chat-messages::-webkit-scrollbar-thumb {
  border:
    2px solid #061a2d;

  border-radius:
    9px;

  background:
    #2d6c9e;
}


body:has(.lounge-shell)
#chatMessages::-webkit-scrollbar-thumb:hover,
body:has(.lounge-shell)
.chat-messages::-webkit-scrollbar-thumb:hover {
  background:
    #4592c9;
}


/*
 * Firefox
 */
body:has(.lounge-shell)
#chatMessages,
body:has(.lounge-shell)
.chat-messages {
  scrollbar-width:
    thin;

  scrollbar-color:
    #2d6c9e #061a2d;
}


/*
 * Mobile darf weiterhin normaler fließen.
 */
@media (max-width:850px) {

  body:has(.lounge-shell)
  #chatMessages,
  body:has(.lounge-shell)
  .chat-messages {
    min-height:
      45dvh !important;

    max-height:
      58dvh !important;
  }
}

/* === /HCHAT CHAT SCROLL V7 2026 === */


/* === HCHAT LOUNGE DESIGN V8 2026 === */


/* -------------------------------------------------------
   GESAMTSEITE / HEADER KOMPAKTER
   ------------------------------------------------------- */

body:has(.lounge-shell) > header {
  min-height: 0 !important;

  padding:
    62px 24px 12px !important;

  box-sizing: border-box;

  margin-bottom: 0 !important;
}


/* Logo kleiner und kompakter */

body:has(.lounge-shell)
> header img[src*="hchat-logo"] {
  width: 108px !important;

  height: auto !important;

  max-width: 108px !important;

  margin-bottom: 8px !important;
}


/* Untertitel kompakter */

body:has(.lounge-shell)
> header > div {
  margin-top: 4px !important;

  font-size:
    clamp(14px,1vw,18px) !important;
}


/* Navigation näher an den Header */

body:has(.lounge-shell)
> header nav {
  margin-top: 10px !important;
}


/* -------------------------------------------------------
   LOUNGE-GRID
   ------------------------------------------------------- */

body:has(.lounge-shell)
.lounge-shell {
  display: grid !important;

  grid-template-columns:
    minmax(0,1fr)
    clamp(255px,18vw,315px) !important;

  gap: 10px !important;

  width: 100% !important;

  max-width: none !important;

  box-sizing: border-box;
}


/* -------------------------------------------------------
   LINKER CHATBEREICH
   ------------------------------------------------------- */

body:has(.lounge-shell)
.lounge-main {
  min-width: 0 !important;

  border-radius: 12px !important;

  overflow: hidden !important;
}


/* Kopfbereich der Lounge etwas niedriger */

body:has(.lounge-shell)
.lounge-header {
  min-height: 58px !important;

  padding:
    10px 18px !important;

  box-sizing: border-box;
}


/* Welcome kleiner */

body:has(.lounge-shell)
.lounge-main
> .welcome,
body:has(.lounge-shell)
.lounge-main
> .lounge-welcome {
  margin:
    8px 14px !important;

  padding:
    9px 14px !important;
}


/* -------------------------------------------------------
   NACHRICHTENFENSTER
   ------------------------------------------------------- */

body:has(.lounge-shell)
#chatMessages,
body:has(.lounge-shell)
.chat-messages {
  flex:
    1 1 auto !important;

  min-height:
    180px !important;

  height:
    auto !important;

  overflow-y:
    auto !important;

  overflow-x:
    hidden !important;

  padding:
    10px 14px 12px !important;

  box-sizing:
    border-box !important;

  scrollbar-gutter:
    stable both-edges;
}


/* Nachrichten kompakter */

body:has(.lounge-shell)
.chat-message,
body:has(.lounge-shell)
.hchat-chat-message {
  margin:
    3px 0 !important;

  padding:
    5px 9px !important;

  line-height:
    1.35 !important;

  font-size:
    clamp(14px,.9vw,17px);
}


/* -------------------------------------------------------
   UNTERER COMPOSER
   ------------------------------------------------------- */

body:has(.lounge-shell)
#smileyToggle {
  margin:
    8px 14px 4px !important;
}


/* Flüster-/Direktzeile kompakter */

body:has(.lounge-shell)
.hchat-compose-bar {
  margin:
    4px 14px !important;

  padding:
    6px 10px !important;
}


/* Form */

body:has(.lounge-shell)
#chatForm {
  display: grid !important;

  grid-template-columns:
    104px
    minmax(0,1fr)
    150px !important;

  align-items: end !important;

  gap: 8px !important;

  padding:
    8px 14px 10px !important;

  box-sizing:
    border-box;
}


/* Farbauswahl */

body:has(.lounge-shell)
.hchat-color-wrap {
  width: 104px !important;

  min-width: 104px !important;

  flex-basis: 104px !important;
}

body:has(.lounge-shell)
.hchat-color-picker {
  width: 104px !important;

  max-width: 104px !important;

  height: 40px !important;
}


/* Eingabe */

body:has(.lounge-shell)
#chatInput {
  width: 100% !important;

  min-width: 0 !important;

  height: 52px !important;

  padding:
    0 18px !important;

  font-size:
    clamp(15px,1vw,18px) !important;

  box-sizing:
    border-box;
}


/* Senden */

body:has(.lounge-shell)
.chat-send,
body:has(.lounge-shell)
#chatForm button[type="submit"] {
  width: 150px !important;

  min-width: 150px !important;

  height: 52px !important;

  padding:
    0 16px !important;
}


/* -------------------------------------------------------
   RECHTE ONLINE-SPALTE
   ------------------------------------------------------- */

body:has(.lounge-shell)
.lounge-online,
body:has(.lounge-shell)
.online-panel,
body:has(.lounge-shell)
aside {
  min-width: 0 !important;

  height: 100% !important;

  overflow-y: auto !important;

  border-radius: 12px !important;
}


/* Statusbox kompakter */

.hchat-presence-control {
  margin:
    8px 8px 7px !important;

  padding:
    7px !important;
}


/* Filter platzsparender */

.hchat-gender-filters {
  margin:
    0 8px 7px !important;

  gap:
    3px !important;
}

.hchat-gender-filter {
  padding:
    3px 6px !important;

  font-size:
    10px !important;
}


/* -------------------------------------------------------
   RATE-LIMIT-MELDUNGEN DEZENTER
   ------------------------------------------------------- */

body:has(.lounge-shell)
.system-message {
  opacity:
    .88;

  font-size:
    .92em;
}


/* -------------------------------------------------------
   FULL-HD UND GROESSE MONITORE
   ------------------------------------------------------- */

@media (min-width: 1600px) {

  body:has(.lounge-shell)
  .lounge-shell {
    grid-template-columns:
      minmax(0,1fr)
      285px !important;
  }

  body:has(.lounge-shell)
  #chatMessages,
  body:has(.lounge-shell)
  .chat-messages {
    padding-left:
      18px !important;

    padding-right:
      18px !important;
  }
}


/* -------------------------------------------------------
   NOTEBOOK
   ------------------------------------------------------- */

@media (max-width: 1300px) {

  body:has(.lounge-shell)
  .lounge-shell {
    grid-template-columns:
      minmax(0,1fr)
      250px !important;
  }

  body:has(.lounge-shell)
  #chatForm {
    grid-template-columns:
      92px
      minmax(0,1fr)
      120px !important;
  }

  body:has(.lounge-shell)
  .chat-send,
  body:has(.lounge-shell)
  #chatForm button[type="submit"] {
    width:
      120px !important;

    min-width:
      120px !important;
  }
}


/* -------------------------------------------------------
   MOBILE / TABLET
   ------------------------------------------------------- */

@media (max-width: 850px) {

  body:has(.lounge-shell) {
    overflow:
      auto !important;
  }

  body:has(.lounge-shell)
  .lounge-shell {
    display:
      flex !important;

    flex-direction:
      column !important;

    height:
      auto !important;

    max-height:
      none !important;
  }

  body:has(.lounge-shell)
  #chatForm {
    grid-template-columns:
      1fr !important;
  }

  body:has(.lounge-shell)
  .hchat-color-wrap,
  body:has(.lounge-shell)
  .hchat-color-picker,
  body:has(.lounge-shell)
  .chat-send,
  body:has(.lounge-shell)
  #chatForm button[type="submit"] {
    width:
      100% !important;

    max-width:
      none !important;
  }

  body:has(.lounge-shell)
  > header {
    padding:
      56px 12px 10px !important;
  }
}

/* === /HCHAT LOUNGE DESIGN V8 2026 === */


/* === HCHAT COLOR MARKER V1 2026 === */

/*
 * Dunkler Marker hinter Neonfarben
 * und kontrastschwächeren Farben.
 *
 * Bewusst nur hinter dem Nachrichtentext,
 * nicht hinter Zeit/Usernamen.
 */

.hchat-dark-text-marker {
  display:
    inline !important;

  padding:
    2px 5px !important;

  border-radius:
    4px;

  background:
    rgba(
      0,
      7,
      16,
      .68
    ) !important;

  box-shadow:
    0 0 0 1px
      rgba(
        255,
        255,
        255,
        .035
      ),
    0 2px 7px
      rgba(
        0,
        0,
        0,
        .24
      );

  -webkit-box-decoration-break:
    clone;

  box-decoration-break:
    clone;

  text-shadow:
    0 0 3px
      currentColor !important;
}


/*
 * Beim Flüstern darf die blaue
 * Hervorhebung erhalten bleiben.
 */
.hchat-message-whisper
.hchat-dark-text-marker {
  background:
    rgba(
      0,
      8,
      19,
      .74
    ) !important;
}


/*
 * Bei längeren Nachrichten darf der
 * Marker sauber über mehrere Zeilen laufen.
 */
.hchat-dark-text-marker::selection {
  background:
    rgba(
      244,
      154,
      47,
      .45
    );
}

/* === /HCHAT COLOR MARKER V1 2026 === */


/* === HCHAT MESSAGE BACKGROUND RESTORE 2026 === */


/* -------------------------------------------------------
   Den zuletzt eingebauten automatischen Farbmarker
   optisch wieder deaktivieren.
   Die Schriftfarbe selbst bleibt erhalten.
   ------------------------------------------------------- */

.hchat-dark-text-marker {
  background:
    transparent !important;

  box-shadow:
    none !important;

  border:
    0 !important;

  padding:
    0 !important;

  border-radius:
    0 !important;
}


/* -------------------------------------------------------
   NORMALE NACHRICHT
   schlicht wie gestern Abend
   ------------------------------------------------------- */

.hchat-message-public
.hchat-message-body,
.hchat-chat-message:not(.hchat-message-direct):not(.hchat-message-whisper)
.hchat-message-body {
  background:
    transparent !important;

  border:
    0 !important;

  box-shadow:
    none !important;

  padding:
    0 !important;

  border-radius:
    0 !important;
}


/* -------------------------------------------------------
   ÖFFENTLICHE DIREKTANSPRACHE

   [testa] > [Junior_Jack] Nachricht

   dunkelblauer Marker hinter dem Text
   ------------------------------------------------------- */

.hchat-message-direct
.hchat-message-body {
  display:
    inline !important;

  padding:
    2px 6px !important;

  border-radius:
    4px !important;

  background:
    rgba(
      8,
      58,
      100,
      .78
    ) !important;

  border:
    0 !important;

  box-shadow:
    none !important;

  -webkit-box-decoration-break:
    clone;

  box-decoration-break:
    clone;
}


/* -------------------------------------------------------
   FLÜSTERN

   💬 [testa] » [Junior_Jack] Nachricht

   stärker als öffentliche Direktansprache
   ------------------------------------------------------- */

.hchat-message-whisper
.hchat-message-body {
  display:
    inline !important;

  padding:
    2px 7px !important;

  border-radius:
    4px !important;

  background:
    rgba(
      4,
      38,
      71,
      .94
    ) !important;

  border:
    1px solid
    rgba(
      59,
      166,
      235,
      .46
    ) !important;

  box-shadow:
    0 0 7px
      rgba(
        35,
        157,
        238,
        .22
      ) !important;

  -webkit-box-decoration-break:
    clone;

  box-decoration-break:
    clone;
}


/* Flüster-Empfänger etwas deutlicher */

.hchat-message-whisper
.hchat-recipient,
.hchat-message-whisper
.recipient-name {
  font-weight:
    800 !important;
}


/* Schriftfarbe des Chatters niemals durch
   den Marker ersetzen */

.hchat-message-direct
.hchat-message-body,
.hchat-message-whisper
.hchat-message-body {
  color:
    var(
      --hchat-message-color,
      inherit
    ) !important;
}


/* === /HCHAT MESSAGE BACKGROUND RESTORE 2026 === */


/* === HCHAT UI TUNING V8 2026 === */


/* --------------------------------------------------
   1) ALLGEMEINE FARBWIEDERGABE IM CHAT VERBESSERN
   -------------------------------------------------- */

/* WICHTIG:
   gewählte Nachrichtenfarbe soll sich auch
   auf innere Elemente, Smileys, Spans usw. durchziehen
*/
.hchat-message-body,
.hchat-message-body span,
.hchat-message-body strong,
.hchat-message-body em,
.hchat-message-body small,
.hchat-message-body a,
.hchat-message-body b,
.hchat-message-body i {
  color: inherit !important;
}

/* Lesbarkeit allgemein etwas verbessern */
.hchat-message-body {
  font-weight: 650 !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.28),
    0 0 5px rgba(0,0,0,.18) !important;
}

/* Schwächere / helle Farben im Chat besser lesbar */
.hchat-message-body[style*="#39ff14"],
.hchat-message-body[style*="#7fff00"],
.hchat-message-body[style*="#adff2f"],
.hchat-message-body[style*="#00ffcc"],
.hchat-message-body[style*="#00ffff"],
.hchat-message-body[style*="#ff00ff"],
.hchat-message-body[style*="#ff66ff"],
.hchat-message-body[style*="#ffff00"],
.hchat-message-body[style*="#fff176"],
.hchat-message-body[style*="#ffffff"] {
  background:
    rgba(6, 25, 45, .58) !important;
  padding: 1px 6px !important;
  border-radius: 5px !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


/* --------------------------------------------------
   2) CHAT-MODI OPTISCH KONSISTENT HALTEN
   -------------------------------------------------- */

/* Öffentliche Direktansprache */
.hchat-message-direct .hchat-message-body {
  background:
    rgba(10, 56, 98, .78) !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
}

/* Flüstern */
.hchat-message-whisper .hchat-message-body {
  background:
    rgba(4, 38, 71, .92) !important;
  border: 1px solid rgba(78, 175, 245, .45) !important;
  box-shadow:
    0 0 8px rgba(37, 164, 244, .18) !important;
  border-radius: 5px !important;
  padding: 2px 8px !important;
}


/* --------------------------------------------------
   3) EINGABEFELD: HINTERGRUND DUNKLER,
      DAMIT NEONFARBEN LESBAR SIND
   -------------------------------------------------- */

#chatInput {
  background:
    linear-gradient(
      180deg,
      rgba(7, 24, 44, .97),
      rgba(10, 37, 62, .97)
    ) !important;

  color: #eef6ff !important;

  border: 1px solid rgba(73, 166, 235, .45) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 10px rgba(0,0,0,.16) !important;

  text-shadow:
    0 1px 0 rgba(0,0,0,.22),
    0 0 5px rgba(0,0,0,.14) !important;
}

#chatInput::placeholder {
  color: rgba(204, 221, 240, .62) !important;
  opacity: 1 !important;
}

/* Farbauswahl etwas klarer */
#chatForm select,
#chatForm option {
  background: #081c31 !important;
  color: #eef6ff !important;
}

/* Label besser lesbar */
#chatForm label,
#chatForm .hchat-input-label,
#chatForm .hchat-color-label {
  color: #ffd35d !important;
  font-weight: 700 !important;
}


/* --------------------------------------------------
   4) CHATFENSTER UND EINGABE SAUBER POSITIONIEREN
   -------------------------------------------------- */

/* Gesamtbereich */
.lounge-shell,
.hchat-lounge-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 18px !important;
  align-items: stretch !important;
}

/* Linke Hauptspalte */
.lounge-main,
.hchat-lounge-main {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Rechte Online-Spalte */
.lounge-sidebar,
.hchat-lounge-sidebar,
.hchat-online-panel {
  min-width: 0 !important;
  width: 320px !important;
}

/* Chat-Nachrichtenbereich */
#chatMessages {
  flex: 1 1 auto !important;
  min-height: 300px !important;
  max-height: calc(100vh - 420px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth !important;
  padding-right: 6px !important;
}

/* Eingabebereich unten fix in der Chatspalte */
#chatForm {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 25 !important;
  margin-top: auto !important;

  background:
    linear-gradient(
      180deg,
      rgba(17, 49, 87, .96),
      rgba(12, 39, 70, .98)
    ) !important;

  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(76, 155, 219, .22) !important;
}

/* Online-Liste rechts scrollbar */
#onlineList {
  max-height: calc(100vh - 360px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
}


/* --------------------------------------------------
   5) BREITEN / BUTTONS / ABSTÄNDE
   -------------------------------------------------- */

#chatForm {
  display: grid !important;
  grid-template-columns: 140px minmax(0, 1fr) 170px !important;
  gap: 12px !important;
  align-items: end !important;
}

#chatInput {
  width: 100% !important;
  min-width: 0 !important;
}

#chatForm button[type="submit"],
#chatForm .send-button {
  min-height: 58px !important;
}

/* Ziel-Leiste (öffentlich / flüstern an ...) */
.hchat-target-bar,
.hchat-compose-target,
.hchat-recipient-bar {
  background: rgba(24, 74, 122, .92) !important;
  border: 1px solid rgba(81, 165, 233, .28) !important;
  color: #dcecff !important;
}


/* --------------------------------------------------
   6) KLEINERE BILDSCHIRME / AUFLÖSUNG
   -------------------------------------------------- */

@media (max-width: 1450px) {
  .lounge-shell,
  .hchat-lounge-shell {
    grid-template-columns: minmax(0, 1fr) 290px !important;
  }

  .lounge-sidebar,
  .hchat-lounge-sidebar,
  .hchat-online-panel {
    width: 290px !important;
  }
}

@media (max-width: 1180px) {
  .lounge-shell,
  .hchat-lounge-shell {
    grid-template-columns: 1fr !important;
  }

  .lounge-sidebar,
  .hchat-lounge-sidebar,
  .hchat-online-panel {
    width: auto !important;
  }

  #chatMessages {
    max-height: calc(100vh - 470px) !important;
  }
}

@media (max-width: 860px) {
  #chatForm {
    grid-template-columns: 1fr !important;
  }

  #chatMessages {
    max-height: calc(100vh - 520px) !important;
  }
}


/* --------------------------------------------------
   7) SCROLLBARS DEZENT
   -------------------------------------------------- */

#chatMessages::-webkit-scrollbar,
#onlineList::-webkit-scrollbar {
  width: 10px;
}

#chatMessages::-webkit-scrollbar-thumb,
#onlineList::-webkit-scrollbar-thumb {
  background: rgba(89, 165, 232, .34);
  border-radius: 999px;
}

#chatMessages::-webkit-scrollbar-track,
#onlineList::-webkit-scrollbar-track {
  background: rgba(6, 21, 40, .28);
}


/* === /HCHAT UI TUNING V8 2026 === */


/* === HCHAT COLOR + SKYLINE FINAL V9 2026 === */


/* ==========================================================
   EINGABEFELD

   Dunkler Hintergrund:
   Neonfarben bleiben als Schreibvorschau erhalten,
   sind aber jetzt auch lesbar.
   ========================================================== */

body:has(.lounge-shell)
#chatInput,
body:has(.lounge-shell)
.chat-input {
  background:
    linear-gradient(
      180deg,
      #081c31 0%,
      #0b2947 100%
    ) !important;

  border:
    1px solid
    rgba(72,174,245,.58) !important;

  box-shadow:
    inset 0 0 0 1px
      rgba(255,255,255,.035),
    0 0 8px
      rgba(22,137,222,.20)
      !important;

  font-weight:
    700 !important;

  text-shadow:
    0 1px 1px
      rgba(0,0,0,.8),
    0 0 4px
      currentColor !important;
}


body:has(.lounge-shell)
#chatInput::placeholder,
body:has(.lounge-shell)
.chat-input::placeholder {
  color:
    #91a9bf !important;

  text-shadow:
    none !important;

  opacity:
    1 !important;
}


/* ==========================================================
   FARBAUSWAHL

   Auswahl selbst neutral/dunkel.
   ========================================================== */

body:has(.lounge-shell)
.hchat-color-picker,
body:has(.lounge-shell)
#chatForm select {
  background:
    #071b30 !important;

  border:
    1px solid
    #28567d !important;

  font-weight:
    800 !important;

  text-shadow:
    0 1px 1px
    rgba(0,0,0,.9);
}


body:has(.lounge-shell)
#chatForm option {
  background:
    #071b30 !important;
}


/* ==========================================================
   NACHRICHTENTEXT

   Farbe kommt aus JS.
   Unterelemente dürfen sie nicht mehr überschreiben.
   ========================================================== */

.hchat-message-body,
.hchat-message-body span:not(.custom-smiley),
.hchat-message-body strong,
.hchat-message-body b,
.hchat-message-body em,
.hchat-message-body i {
  color:
    inherit !important;
}


/*
 * Ein wenig Kontrast für alle Farben,
 * ohne wieder den großen dunklen Marker
 * über jede Nachricht zu legen.
 */
.hchat-message-body {
  font-weight:
    700 !important;

  text-shadow:
    0 1px 1px
      rgba(0,0,0,.85),
    0 0 3px
      currentColor !important;
}


/* ==========================================================
   SKYLINE

   Nur der obere Skyline-Streifen soll die Skyline zeigen.
   Der eigentliche Header darunter bekommt KEINE zweite Skyline.
   ========================================================== */



/*
 * Zweite / alte Skyline im eigentlichen Header abschalten.
 */
body:has(.lounge-shell)
> header {
  background-image:
    none !important;

  min-height:
    0 !important;

  padding:
    18px 24px 14px !important;

  margin:
    0 !important;

  overflow:
    hidden !important;
}


/*
 * Alte ::before / ::after Skyline-Layer abschalten.
 */
body:has(.lounge-shell)
> header::before,
body:has(.lounge-shell)
> header::after {
  content:
    none !important;

  display:
    none !important;
}


/* Logo deutlich kompakter */

body:has(.lounge-shell)
> header img {
  width:
    92px !important;

  max-width:
    92px !important;

  height:
    auto !important;

  margin:
    0 0 8px !important;
}


/* Titel */

body:has(.lounge-shell)
> header > div {
  margin:
    2px 0 0 !important;

  font-size:
    16px !important;

  line-height:
    1.25 !important;
}


/* Navigation */

body:has(.lounge-shell)
> header nav {
  margin-top:
    10px !important;

  margin-bottom:
    0 !important;
}


/* ==========================================================
   LOUNGE GRÖSSE

   Mehr Platz für den eigentlichen Chat.
   ========================================================== */

body:has(.lounge-shell)
.lounge-shell {
  grid-template-columns:
    minmax(0,1fr)
    clamp(260px,18vw,310px)
    !important;

  gap:
    10px !important;
}


/* Chatbereich */

body:has(.lounge-shell)
.lounge-main {
  min-height:
    0 !important;

  overflow:
    hidden !important;
}


/* Nachrichten sind der Scrollbereich */

body:has(.lounge-shell)
#chatMessages,
body:has(.lounge-shell)
.chat-messages {
  flex:
    1 1 auto !important;

  min-height:
    220px !important;

  overflow-y:
    auto !important;

  overflow-x:
    hidden !important;

  scrollbar-gutter:
    stable;
}


/* Bedienbereich bleibt unten */

body:has(.lounge-shell)
#chatForm,
body:has(.lounge-shell)
.chat-form,
body:has(.lounge-shell)
.hchat-compose-bar,
body:has(.lounge-shell)
#smileyToggle {
  flex-shrink:
    0 !important;
}


/* Rechte Spalte */

body:has(.lounge-shell)
#onlineList {
  overflow-y:
    auto !important;

  overflow-x:
    hidden !important;
}


/* ==========================================================
   GROSSE BILDSCHIRME
   ========================================================== */

@media (min-width:1700px) {

  body:has(.lounge-shell)
  .lounge-shell {
    grid-template-columns:
      minmax(0,1fr)
      300px !important;
  }
}


/* ==========================================================
   NOTEBOOK
   ========================================================== */

@media (max-width:1300px) {

  body:has(.lounge-shell)
  .lounge-shell {
    grid-template-columns:
      minmax(0,1fr)
      250px !important;
  }

  .hchat-top-skyline {
    background-size:
      cover !important;
  }
}


/* ==========================================================
   MOBILE
   ========================================================== */


  body:has(.lounge-shell)
  > header {
    padding:
      12px !important;
  }

  body:has(.lounge-shell)
  .lounge-shell {
    display:
      flex !important;

    flex-direction:
      column !important;
  }
}


/* === /HCHAT COLOR + SKYLINE FINAL V9 2026 === */


/* ==========================================================
   HCHAT LOUNGE DESIGN V10 2026
   ========================================================== */


/* ==========================================================
   1. GESAMTER LOUNGE-BEREICH
   ========================================================== */

body:has(.lounge-shell) {
  background:
    #071b31 !important;
}


/* ==========================================================
   2. HEADER + BREITE GOLDENE SKYLINE
   ========================================================== */

/*
 * Alten separaten Skyline-Streifen ausblenden.
 * Sonst hätten wir wieder doppelte Skylines.
 */


/*
 * Hauptheader.
 */
body:has(.lounge-shell)
> header {
  position:
    relative !important;

  min-height:
    178px !important;

  padding:
    18px 22px 14px !important;

  margin:
    0 !important;

  box-sizing:
    border-box !important;

  overflow:
    hidden !important;

  background:
    linear-gradient(
      180deg,
      #04172b 0%,
      #071d34 52%,
      #0a223c 100%
    ) !important;

  border-bottom:
    2px solid
    #f4a136 !important;

  box-shadow:
    inset 0 -18px 45px
    rgba(0,0,0,.14);
}


/*
 * Skyline sehr breit über den Header.
 * Links bleibt Platz für das Logo.
 */
body:has(.lounge-shell)
> header::before {
  content:
    '' !important;

  display:
    block !important;

  position:
    absolute !important;

  left:
    155px !important;

  right:
    22px !important;

  top:
    8px !important;

  height:
    112px !important;

  background-image:
    url('/assets/paderborn-skyline.png') !important;

  background-repeat:
    no-repeat !important;

  background-position:
    center bottom !important;

  background-size:
    100% auto !important;

  opacity:
    1 !important;

  pointer-events:
    none;

  filter:
    drop-shadow(
      0 0 9px
      rgba(255,157,32,.28)
    );
}


/*
 * leichter goldener Horizont unter Skyline
 */
body:has(.lounge-shell)
> header::after {
  content:
    '' !important;

  display:
    block !important;

  position:
    absolute !important;

  left:
    155px !important;

  right:
    22px !important;

  top:
    118px !important;

  height:
    1px !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(244,161,54,.65),
      rgba(255,190,72,.92),
      rgba(244,161,54,.65),
      transparent
    ) !important;

  pointer-events:
    none;
}


/*
 * Inhalte vor Skyline.
 */
body:has(.lounge-shell)
> header > * {
  position:
    relative !important;

  z-index:
    2 !important;
}


/* Logo links */

body:has(.lounge-shell)
> header img {
  width:
    96px !important;

  max-width:
    96px !important;

  height:
    auto !important;

  margin:
    0 0 7px !important;

  border-radius:
    2px;
}


/* Überschrift */

body:has(.lounge-shell)
> header > div {
  margin:
    2px 0 0 !important;

  font-size:
    16px !important;

  line-height:
    1.2 !important;
}


/* Navigation */

body:has(.lounge-shell)
> header nav {
  margin-top:
    9px !important;

  margin-bottom:
    0 !important;
}


/* ==========================================================
   3. HAUPTGRID
   ========================================================== */

body:has(.lounge-shell)
.lounge-shell {
  display:
    grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    285px !important;

  gap:
    8px !important;

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  height:
    var(
      --hchat-lounge-height,
      calc(100dvh - 245px)
    ) !important;

  max-height:
    var(
      --hchat-lounge-height,
      calc(100dvh - 245px)
    ) !important;

  box-sizing:
    border-box !important;
}


/* ==========================================================
   4. CHAT-Hauptfenster
   ========================================================== */

body:has(.lounge-shell)
.lounge-main {
  display:
    flex !important;

  flex-direction:
    column !important;

  min-width:
    0 !important;

  min-height:
    0 !important;

  height:
    100% !important;

  overflow:
    hidden !important;

  border:
    1px solid
    #24577f !important;

  border-radius:
    10px !important;

  background:
    linear-gradient(
      180deg,
      #153e67 0%,
      #0b2948 100%
    ) !important;

  box-shadow:
    0 7px 26px
    rgba(0,0,0,.22);
}


/* ==========================================================
   5. LOUNGE KOPFLEISTE
   ========================================================== */

body:has(.lounge-shell)
.lounge-header {
  min-height:
    50px !important;

  padding:
    8px 16px !important;

  box-sizing:
    border-box !important;

  background:
    linear-gradient(
      100deg,
      #164f84 0%,
      #2f77ad 48%,
      #f29b31 100%
    ) !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.07) !important;
}


/* Menüs kompakt */

body:has(.lounge-shell)
.hchat-staff-menu > summary {
  min-height:
    34px !important;

  padding:
    7px 14px !important;

  border-radius:
    8px !important;

  background:
    #092b4c !important;

  box-shadow:
    0 3px 10px
    rgba(0,0,0,.25);
}


/* ==========================================================
   6. NACHRICHTENBEREICH
   ========================================================== */

body:has(.lounge-shell)
#chatMessages,
body:has(.lounge-shell)
.chat-messages {
  flex:
    1 1 auto !important;

  min-height:
    0 !important;

  height:
    auto !important;

  overflow-y:
    auto !important;

  overflow-x:
    hidden !important;

  padding:
    10px 16px 14px !important;

  box-sizing:
    border-box !important;

  background:
    linear-gradient(
      180deg,
      rgba(17,55,91,.97),
      rgba(5,28,50,.98)
    ) !important;

  scrollbar-gutter:
    stable;
}


/* Nachrichten etwas kompakter */

body:has(.lounge-shell)
.chat-message,
body:has(.lounge-shell)
.hchat-chat-message {
  margin:
    2px 0 !important;

  line-height:
    1.42 !important;
}


/* ==========================================================
   7. FLÜSTERN

   KEIN SCHWARZER/DUNKLER BALKEN MEHR.
   Nur der blaue Glow bleibt.
   ========================================================== */

body:has(.lounge-shell)
.hchat-message-whisper {
  background:
    rgba(21,84,132,.10) !important;

  border:
    1px solid
    rgba(59,176,255,.85) !important;

  border-radius:
    6px !important;

  box-shadow:
    0 0 8px
      rgba(37,166,255,.30),
    inset 0 0 8px
      rgba(37,166,255,.07)
      !important;

  padding:
    3px 7px !important;

  margin:
    4px 0 !important;
}


/*
 * Text selbst transparent.
 * Genau hier verschwindet der schwarze Balken.
 */
body:has(.lounge-shell)
.hchat-message-whisper
.hchat-message-body,

body:has(.lounge-shell)
.hchat-message-whisper
.hchat-dark-text-marker {
  background:
    transparent !important;

  border:
    0 !important;

  box-shadow:
    none !important;

  padding:
    0 !important;

  border-radius:
    0 !important;
}


/* ==========================================================
   8. DIREKTE ÖFFENTLICHE ANSPRACHE
   ========================================================== */

body:has(.lounge-shell)
.hchat-message-direct {
  border-left:
    2px solid
    rgba(70,177,246,.78);

  padding-left:
    7px;
}


/* ==========================================================
   9. UNTERER BEDIENBEREICH
   ========================================================== */

body:has(.lounge-shell)
#smileyToggle {
  margin:
    8px 14px 4px !important;
}


/* Empfängerleiste */

body:has(.lounge-shell)
.hchat-compose-bar {
  flex:
    0 0 auto !important;

  margin:
    3px 12px 4px !important;

  padding:
    7px 10px !important;

  min-height:
    36px !important;

  box-sizing:
    border-box !important;

  border:
    1px solid
    rgba(71,167,232,.55) !important;

  border-radius:
    6px !important;

  background:
    linear-gradient(
      180deg,
      #174a78,
      #10385e
    ) !important;
}


/* Formular */

body:has(.lounge-shell)
#chatForm {
  flex:
    0 0 auto !important;

  display:
    grid !important;

  grid-template-columns:
    94px
    minmax(0,1fr)
    130px !important;

  gap:
    8px !important;

  align-items:
    end !important;

  padding:
    7px 12px 10px !important;

  box-sizing:
    border-box !important;

  background:
    linear-gradient(
      180deg,
      #10365b,
      #082844
    ) !important;

  border-top:
    1px solid
    rgba(72,150,210,.22) !important;
}


/* Farbauswahl */

body:has(.lounge-shell)
.hchat-color-wrap {
  min-width:
    0 !important;

  width:
    94px !important;
}


/* Eingabefeld */

body:has(.lounge-shell)
#chatInput {
  width:
    100% !important;

  min-width:
    0 !important;

  height:
    46px !important;

  padding:
    0 14px !important;

  box-sizing:
    border-box !important;

  border-radius:
    10px !important;
}


/* Senden */

body:has(.lounge-shell)
#chatForm button[type="submit"],
body:has(.lounge-shell)
.chat-send {
  width:
    130px !important;

  min-width:
    130px !important;

  height:
    46px !important;

  border-radius:
    10px !important;

  background:
    linear-gradient(
      135deg,
      #ffd966,
      #f5a331
    ) !important;

  color:
    #081829 !important;

  font-weight:
    900 !important;

  border:
    0 !important;
}


/* ==========================================================
   10. ONLINE-SEITENLEISTE
   ========================================================== */

body:has(.lounge-shell)
.lounge-online,
body:has(.lounge-shell)
.online-panel,
body:has(.lounge-shell)
aside {
  width:
    285px !important;

  min-width:
    0 !important;

  max-width:
    285px !important;

  height:
    100% !important;

  min-height:
    0 !important;

  box-sizing:
    border-box !important;

  overflow:
    hidden !important;

  border:
    1px solid
    #24577f !important;

  border-radius:
    10px !important;

  background:
    linear-gradient(
      180deg,
      #163f69,
      #0c2c4d
    ) !important;
}


/* Online-Liste scrollt intern */

body:has(.lounge-shell)
#onlineList {
  min-height:
    0 !important;

  overflow-y:
    auto !important;

  overflow-x:
    hidden !important;

  padding:
    0 8px 12px !important;

  box-sizing:
    border-box !important;
}


/* ==========================================================
   11. ONLINE USER ZEILEN

   Profilbutton bekommt garantiert Platz.
   ========================================================== */

body:has(.lounge-shell)
.hchat-online-user {
  display:
    grid !important;

  grid-template-columns:
    12px
    34px
    minmax(0,1fr)
    34px !important;

  align-items:
    center !important;

  gap:
    6px !important;

  width:
    100% !important;

  min-width:
    0 !important;

  padding:
    5px 1px !important;

  box-sizing:
    border-box !important;

  overflow:
    visible !important;
}


/* Benutzername */

body:has(.lounge-shell)
.hchat-online-name {
  min-width:
    0 !important;

  max-width:
    100% !important;

  overflow:
    hidden !important;

  white-space:
    nowrap !important;

  text-overflow:
    ellipsis !important;

  text-align:
    left !important;
}


/* Flüster- und Profilbutton */

body:has(.lounge-shell)
.hchat-online-action {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    32px !important;

  min-width:
    32px !important;

  height:
    32px !important;

  padding:
    0 !important;

  box-sizing:
    border-box !important;

  border:
    1px solid
    rgba(65,148,211,.45) !important;

  border-radius:
    6px !important;

  background:
    #0a3153 !important;

  overflow:
    visible !important;
}


/* Profilbutton ganz sichtbar */

body:has(.lounge-shell)
.hchat-online-profile {
  justify-self:
    end !important;

  margin:
    0 !important;

  position:
    relative !important;

  right:
    0 !important;
}


/* ==========================================================
   12. STATUS + FILTER KOMPAKTER
   ========================================================== */

body:has(.lounge-shell)
.hchat-presence-control {
  margin:
    8px 2px 7px !important;

  padding:
    7px !important;
}


body:has(.lounge-shell)
.hchat-gender-filters {
  margin:
    0 2px 8px !important;

  gap:
    3px !important;
}


body:has(.lounge-shell)
.hchat-gender-filter {
  padding:
    3px 5px !important;

  font-size:
    10px !important;
}


/* ==========================================================
   13. SCROLLBAR
   ========================================================== */

body:has(.lounge-shell)
#chatMessages::-webkit-scrollbar,
body:has(.lounge-shell)
#onlineList::-webkit-scrollbar {
  width:
    8px;
}


body:has(.lounge-shell)
#chatMessages::-webkit-scrollbar-thumb,
body:has(.lounge-shell)
#onlineList::-webkit-scrollbar-thumb {
  background:
    rgba(75,158,220,.38);

  border-radius:
    99px;
}


body:has(.lounge-shell)
#chatMessages::-webkit-scrollbar-track,
body:has(.lounge-shell)
#onlineList::-webkit-scrollbar-track {
  background:
    rgba(2,17,31,.25);
}


/* ==========================================================
   14. FULL-HD / WIDE
   ========================================================== */

@media (min-width:1600px) {

  body:has(.lounge-shell)
  > header::before {
    left:
      145px !important;

    right:
      25px !important;

    height:
      118px !important;
  }

  body:has(.lounge-shell)
  .lounge-shell {
    grid-template-columns:
      minmax(0,1fr)
      285px !important;
  }
}


/* ==========================================================
   15. NOTEBOOK
   ========================================================== */

@media (max-width:1300px) {

  body:has(.lounge-shell)
  .lounge-shell {
    grid-template-columns:
      minmax(0,1fr)
      245px !important;
  }

  body:has(.lounge-shell)
  .lounge-online,
  body:has(.lounge-shell)
  .online-panel,
  body:has(.lounge-shell)
  aside {
    width:
      245px !important;

    max-width:
      245px !important;
  }

  body:has(.lounge-shell)
  > header::before {
    left:
      125px !important;
  }
}


/* ==========================================================
   16. MOBIL
   ========================================================== */

@media (max-width:850px) {

  body:has(.lounge-shell)
  > header {
    min-height:
      150px !important;
  }

  body:has(.lounge-shell)
  > header::before {
    left:
      100px !important;

    right:
      8px !important;

    height:
      90px !important;
  }

  body:has(.lounge-shell)
  .lounge-shell {
    display:
      flex !important;

    flex-direction:
      column !important;

    height:
      auto !important;

    max-height:
      none !important;
  }

  body:has(.lounge-shell)
  .lounge-online,
  body:has(.lounge-shell)
  .online-panel,
  body:has(.lounge-shell)
  aside {
    width:
      100% !important;

    max-width:
      none !important;
  }

  body:has(.lounge-shell)
  #chatForm {
    grid-template-columns:
      1fr !important;
  }

  body:has(.lounge-shell)
  .hchat-color-wrap,
  body:has(.lounge-shell)
  #chatForm button[type="submit"] {
    width:
      100% !important;
  }
}


/* ==========================================================
   /HCHAT LOUNGE DESIGN V10 2026
   ========================================================== */









































/* ==========================================================
   HCHAT LOUNGE HEADER CLEAN V17 2026
   Skyline-Logik wie Startseite
   ========================================================== */

body.hchat-lounge-page > header {
  position: relative !important;
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 0 10px !important;

  background: #071b30 !important;

  border: 0 !important;
  border-bottom: 1px solid #eb9228 !important;

  overflow: hidden !important;
  box-shadow: none !important;
}


/* Skyline-Bereich */

body.hchat-lounge-page
> header
.hchat-top-brand {
  position: relative !important;

  display: block !important;

  width: 100% !important;

  height: 250px !important;
  min-height: 250px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  background: #071b30 !important;

  border: 0 !important;
}


/*
 * Exakt dieselbe Darstellungslogik
 * wie .homeSkyline auf der Startseite.
 */

body.hchat-lounge-page
> header
.hchat-top-skyline {
  position: absolute !important;
  inset: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;

  background-image:
    url('/assets/paderborn-skyline.png') !important;

  background-repeat:
    no-repeat !important;

  background-position:
    center bottom !important;

  background-size:
    100% auto !important;

  background-color:
    #071b30 !important;

  visibility:
    visible !important;

  opacity:
    .92 !important;

  z-index:
    0 !important;

  pointer-events:
    none !important;
}


/*
 * Overlay von der Startseite übernommen.
 */

body.hchat-lounge-page
> header
.hchat-top-overlay {
  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  background:
    linear-gradient(
      90deg,
      rgba(3,15,28,.94) 0%,
      rgba(5,22,39,.67) 42%,
      rgba(5,22,39,.34) 72%,
      rgba(3,15,28,.62) 100%
    ) !important;

  z-index: 1 !important;

  pointer-events: none !important;
}


/* Logo */

body.hchat-lounge-page
> header
.hchat-top-content {
  position: relative !important;

  z-index: 2 !important;

  display: flex !important;
  align-items: center !important;

  width: 100% !important;

  height: 250px !important;
  min-height: 250px !important;

  padding: 18px 26px !important;

  box-sizing: border-box !important;
}


body.hchat-lounge-page
> header
.hchat-top-logo {
  display: block !important;

  width: auto !important;
  height: 120px !important;

  max-width: min(420px,85vw) !important;

  object-fit: contain !important;

  filter:
    drop-shadow(
      0 9px 20px
      rgba(0,0,0,.42)
    ) !important;
}


/* alter Template-Titel */

body.hchat-lounge-page
> header
> h1 {
  display: none !important;
}


/* Untertitel */

body.hchat-lounge-page
> header
.hchat-site-subtitle {
  position: relative !important;

  z-index: 3 !important;

  display: block !important;

  visibility: visible !important;
  opacity: 1 !important;

  margin: 0 14px 7px !important;

  color: #fff !important;

  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 700 !important;
}


/* Navigation */

body.hchat-lounge-page
> header
nav {
  position: relative !important;

  z-index: 3 !important;

  display: flex !important;

  visibility: visible !important;
  opacity: 1 !important;

  align-items: center !important;

  gap: 8px !important;

  margin: 0 14px !important;
  padding: 0 !important;
}


/* Alte Pseudo-Skylines bleiben deaktiviert */

body.hchat-lounge-page
> header::before,

body.hchat-lounge-page
> header::after,

body.hchat-lounge-page
> main::before,

body.hchat-lounge-page
> main::after {
  content: none !important;
  display: none !important;
}


body.hchat-lounge-page
> main,

body.hchat-lounge-page
.lounge-shell,

body.hchat-lounge-page
.lounge-main,

body.hchat-lounge-page
.lounge-header {
  border-top: 0 !important;
}


body.hchat-lounge-page
.hchat-lounge-skyline-img,

body.hchat-lounge-page
.hchat-lounge-global-skyline,

body.hchat-lounge-page
.hchat-lounge-skyline-banner {
  display: none !important;
}


/* Mobile */

@media (max-width:850px) {

  body.hchat-lounge-page
  > header
  .hchat-top-brand,

  body.hchat-lounge-page
  > header
  .hchat-top-skyline,

  body.hchat-lounge-page
  > header
  .hchat-top-content {
    height: 170px !important;
    min-height: 170px !important;
  }


  body.hchat-lounge-page
  > header
  .hchat-top-skyline {
    max-height: 170px !important;
    background-size: cover !important;
  }


  body.hchat-lounge-page
  > header
  .hchat-top-logo {
    height: 90px !important;
  }
}


/* ==========================================================
   /HCHAT LOUNGE HEADER CLEAN V17 2026
   ========================================================== */



/* ==========================================================
   HCHAT LOUNGE SKYLINE IMAGE FINAL 2026
   ========================================================== */

body.hchat-lounge-page
> header
.hchat-top-brand {
  height: 210px !important;
  min-height: 210px !important;
  position: relative !important;
  overflow: hidden !important;
  background: #071b30 !important;
}

body.hchat-lounge-page
> header
.hchat-top-skyline {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 210px !important;
  min-height: 210px !important;
  max-height: 210px !important;

  background: none !important;

  overflow: hidden !important;

  z-index: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.hchat-lounge-page
> header
.hchat-top-skyline-img {
  display: block !important;

  position: absolute !important;

  left: 0 !important;

  /*
   * Startseite: 430px Hero.
   * Lounge: 210px sichtbarer Ausschnitt.
   * 430 - 210 = 220px.
   *
   * Dadurch sehen wir exakt den oberen Teil
   * desselben Startseiten-Ausschnitts.
   */
  bottom: -220px !important;

  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;

  transform: none !important;

  object-fit: initial !important;
  object-position: initial !important;

  opacity: .92 !important;

  visibility: visible !important;
}

body.hchat-lounge-page
> header
.hchat-top-overlay {
  position: absolute !important;
  inset: 0 !important;

  z-index: 1 !important;

  background:
    linear-gradient(
      90deg,
      rgba(3,15,28,.88) 0%,
      rgba(5,22,39,.48) 42%,
      rgba(5,22,39,.22) 72%,
      rgba(3,15,28,.46) 100%
    ) !important;
}

body.hchat-lounge-page
> header
.hchat-top-content {
  position: relative !important;

  z-index: 2 !important;

  height: 210px !important;
  min-height: 210px !important;

  display: flex !important;
  align-items: center !important;

  padding: 16px 20px !important;
}

body.hchat-lounge-page
> header
.hchat-top-logo {
  height: 115px !important;
  width: auto !important;
}


@media (max-width:850px) {

  body.hchat-lounge-page
  > header
  .hchat-top-brand,

  body.hchat-lounge-page
  > header
  .hchat-top-skyline,

  body.hchat-lounge-page
  > header
  .hchat-top-content {
    height: 150px !important;
    min-height: 150px !important;
  }

  body.hchat-lounge-page
  > header
  .hchat-top-skyline {
    max-height: 150px !important;
  }

  body.hchat-lounge-page
  > header
  .hchat-top-logo {
    height: 85px !important;
  }
}



/*
 * Untertitel + Navigation in die Skyline ziehen.
 * Dadurch verschwindet der zusätzliche Bereich
 * unterhalb der Skyline.
 */

body.hchat-lounge-page > header {
  padding-bottom: 0 !important;
}


body.hchat-lounge-page
> header
.hchat-site-subtitle {
  position: absolute !important;

  left: 20px !important;
  bottom: 58px !important;

  z-index: 5 !important;

  margin: 0 !important;

  color: #ffffff !important;

  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 700 !important;

  text-shadow:
    0 2px 4px rgba(0,0,0,.85) !important;

  visibility: visible !important;
  opacity: 1 !important;
}


body.hchat-lounge-page
> header
nav {
  position: absolute !important;

  left: 20px !important;
  bottom: 12px !important;

  z-index: 5 !important;

  display: flex !important;
  align-items: center !important;

  gap: 10px !important;

  margin: 0 !important;
  padding: 0 !important;

  visibility: visible !important;
  opacity: 1 !important;
}


body.hchat-lounge-page
> header
nav form {
  margin: 0 !important;
}


/*
 * Header endet jetzt direkt mit der Skyline.
 */

body.hchat-lounge-page
> header
.hchat-top-brand {
  margin-bottom: 0 !important;
}


@media (max-width:850px) {

  body.hchat-lounge-page
  > header
  .hchat-site-subtitle {
    left: 12px !important;
    bottom: 52px !important;

    font-size: 12px !important;
  }


  body.hchat-lounge-page
  > header
  nav {
    left: 12px !important;
    bottom: 8px !important;

    gap: 6px !important;
  }
}


/* ==========================================================
   /HCHAT LOUNGE SKYLINE IMAGE FINAL 2026
   ========================================================== */


/* ==========================================================
   HCHAT SUPPORT SKYLINE 2026
   Vorhandene Paderborn-Skyline wie Lounge
   ========================================================== */

body:has(.support-grid) > header {
  position: relative !important;
  padding-bottom: 0 !important;
}


body:has(.support-grid)
> header
.hchat-top-brand {
  display: block !important;

  height: 210px !important;
  min-height: 210px !important;

  position: relative !important;

  overflow: hidden !important;

  margin-bottom: 0 !important;

  background: #071b30 !important;
}


body:has(.support-grid)
> header
.hchat-top-skyline {
  display: block !important;

  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;

  height: 210px !important;
  min-height: 210px !important;
  max-height: 210px !important;

  overflow: hidden !important;

  background: none !important;

  z-index: 0 !important;

  opacity: 1 !important;
  visibility: visible !important;
}


body:has(.support-grid)
> header
.hchat-top-skyline-img {
  display: block !important;

  position: absolute !important;

  left: 0 !important;
  bottom: -220px !important;

  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;

  transform: none !important;

  object-fit: initial !important;
  object-position: initial !important;

  opacity: .92 !important;

  visibility: visible !important;
}


body:has(.support-grid)
> header
.hchat-top-overlay {
  display: block !important;

  position: absolute !important;
  inset: 0 !important;

  z-index: 1 !important;

  background:
    linear-gradient(
      90deg,
      rgba(3,15,28,.88) 0%,
      rgba(5,22,39,.48) 42%,
      rgba(5,22,39,.22) 72%,
      rgba(3,15,28,.46) 100%
    ) !important;
}


body:has(.support-grid)
> header
.hchat-top-content {
  position: relative !important;

  z-index: 2 !important;

  height: 210px !important;
  min-height: 210px !important;

  display: flex !important;
  align-items: center !important;

  padding: 16px 20px !important;
}


body:has(.support-grid)
> header
.hchat-top-logo {
  display: block !important;

  height: 115px !important;
  width: auto !important;
}


body:has(.support-grid)
> header
.hchat-site-subtitle {
  position: absolute !important;

  left: 20px !important;
  bottom: 58px !important;

  z-index: 5 !important;

  margin: 0 !important;

  color: #ffffff !important;

  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 700 !important;

  text-shadow:
    0 2px 4px rgba(0,0,0,.85) !important;

  visibility: visible !important;
  opacity: 1 !important;
}


body:has(.support-grid)
> header
nav {
  position: absolute !important;

  left: 20px !important;
  bottom: 12px !important;

  z-index: 5 !important;

  display: flex !important;
  align-items: center !important;

  gap: 10px !important;

  margin: 0 !important;
  padding: 0 !important;

  visibility: visible !important;
  opacity: 1 !important;
}


body:has(.support-grid)
> header
nav form {
  margin: 0 !important;
}


@media (max-width:850px) {

  body:has(.support-grid)
  > header
  .hchat-top-brand,

  body:has(.support-grid)
  > header
  .hchat-top-skyline,

  body:has(.support-grid)
  > header
  .hchat-top-content {
    height: 150px !important;
    min-height: 150px !important;
  }


  body:has(.support-grid)
  > header
  .hchat-top-skyline {
    max-height: 150px !important;
  }


  body:has(.support-grid)
  > header
  .hchat-top-logo {
    height: 85px !important;
  }


  body:has(.support-grid)
  > header
  .hchat-site-subtitle {
    left: 12px !important;
    bottom: 52px !important;

    font-size: 12px !important;
  }


  body:has(.support-grid)
  > header
  nav {
    left: 12px !important;
    bottom: 8px !important;

    gap: 6px !important;
  }
}


/* === /HCHAT SUPPORT SKYLINE 2026 === */



/* ==========================================================
   HCHAT STANDARD SKYLINE HEADER FINAL 2026
   Alle normalen layout()-Seiten
   Lounge behaelt ihre eigenen Sonderregeln.
   ========================================================== */

body:not(.hchat-lounge-page) > header {
  position: relative !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}


body:not(.hchat-lounge-page)
> header
.hchat-top-brand {
  display: block !important;

  position: relative !important;

  width: 100% !important;

  height: 210px !important;
  min-height: 210px !important;

  margin: 0 !important;

  overflow: hidden !important;

  background: #071b30 !important;
}


body:not(.hchat-lounge-page)
> header
.hchat-top-skyline {
  display: block !important;

  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;

  height: 210px !important;
  min-height: 210px !important;
  max-height: 210px !important;

  margin: 0 !important;

  overflow: hidden !important;

  background: none !important;

  z-index: 0 !important;

  opacity: 1 !important;
  visibility: visible !important;
}


body:not(.hchat-lounge-page)
> header
.hchat-top-skyline-img {
  display: block !important;

  position: absolute !important;

  left: 0 !important;
  bottom: -220px !important;

  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;

  transform: none !important;

  object-fit: initial !important;
  object-position: initial !important;

  opacity: .92 !important;
  visibility: visible !important;
}


body:not(.hchat-lounge-page)
> header
.hchat-top-overlay {
  display: block !important;

  position: absolute !important;
  inset: 0 !important;

  z-index: 1 !important;

  background:
    linear-gradient(
      90deg,
      rgba(3,15,28,.88) 0%,
      rgba(5,22,39,.48) 42%,
      rgba(5,22,39,.22) 72%,
      rgba(3,15,28,.46) 100%
    ) !important;
}


body:not(.hchat-lounge-page)
> header
.hchat-top-content {
  position: relative !important;

  z-index: 2 !important;

  height: 210px !important;
  min-height: 210px !important;

  display: flex !important;
  align-items: center !important;

  padding: 16px 20px !important;
  box-sizing: border-box !important;
}


body:not(.hchat-lounge-page)
> header
.hchat-top-logo {
  display: block !important;

  height: 115px !important;
  width: auto !important;
}


body:not(.hchat-lounge-page)
> header
.hchat-site-subtitle {
  position: absolute !important;

  left: 20px !important;
  bottom: 58px !important;

  z-index: 5 !important;

  margin: 0 !important;

  color: #fff !important;

  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 700 !important;

  text-shadow:
    0 2px 4px rgba(0,0,0,.85) !important;

  visibility: visible !important;
  opacity: 1 !important;
}


body:not(.hchat-lounge-page)
> header
nav {
  position: absolute !important;

  left: 20px !important;
  bottom: 12px !important;

  z-index: 5 !important;

  display: flex !important;
  align-items: center !important;

  gap: 10px !important;

  margin: 0 !important;
  padding: 0 !important;

  visibility: visible !important;
  opacity: 1 !important;
}


body:not(.hchat-lounge-page)
> header
nav form {
  margin: 0 !important;
}


@media (max-width:850px) {

  body:not(.hchat-lounge-page)
  > header
  .hchat-top-brand,

  body:not(.hchat-lounge-page)
  > header
  .hchat-top-skyline,

  body:not(.hchat-lounge-page)
  > header
  .hchat-top-content {
    height: 150px !important;
    min-height: 150px !important;
  }


  body:not(.hchat-lounge-page)
  > header
  .hchat-top-skyline {
    max-height: 150px !important;
  }


  body:not(.hchat-lounge-page)
  > header
  .hchat-top-logo {
    height: 85px !important;
  }


  body:not(.hchat-lounge-page)
  > header
  .hchat-site-subtitle {
    left: 12px !important;
    bottom: 52px !important;

    font-size: 12px !important;
  }


  body:not(.hchat-lounge-page)
  > header
  nav {
    left: 12px !important;
    bottom: 8px !important;

    gap: 6px !important;
  }
}


/* === /HCHAT STANDARD SKYLINE HEADER FINAL 2026 === */


/* ============================================================
   HCHAT MODERATION MESSAGE DESIGN B 2026
   ============================================================ */

body:has(.lounge-shell)
.chat-system-moderation,
body:has(.lounge-shell)
.chat-system-announcement {
  display:grid !important;
  grid-template-columns:
    auto minmax(0,1fr) !important;

  align-items:start !important;

  gap:12px !important;

  margin:
    7px 6px !important;

  padding:
    11px 14px !important;

  border-radius:
    11px !important;

  background:
    linear-gradient(
      135deg,
      rgba(20,48,80,.96),
      rgba(10,29,51,.98)
    ) !important;

  box-shadow:
    0 5px 18px
    rgba(0,0,0,.18) !important;
}


body:has(.lounge-shell)
.chat-system-moderation
.chat-time,
body:has(.lounge-shell)
.chat-system-announcement
.chat-time {
  padding-top:
    4px !important;

  color:
    #8199b2 !important;

  font-size:
    11px !important;

  white-space:
    nowrap !important;
}


body:has(.lounge-shell)
.chat-system-content {
  display:flex !important;

  flex-wrap:wrap !important;

  align-items:center !important;

  gap:
    7px 9px !important;

  min-width:0 !important;
}


body:has(.lounge-shell)
.chat-system-badge {
  display:inline-flex !important;

  align-items:center !important;

  min-height:
    23px !important;

  padding:
    2px 8px !important;

  border-radius:
    999px !important;

  font-size:
    10px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .08em !important;

  line-height:
    1 !important;
}


body:has(.lounge-shell)
.chat-system-text {
  min-width:0 !important;

  color:
    #eef5ff !important;

  font-weight:
    650 !important;

  line-height:
    1.45 !important;

  overflow-wrap:
    anywhere !important;
}


/* Verwarnung */

body:has(.lounge-shell)
.chat-system-warn {
  border:
    1px solid
    rgba(
      255,
      183,
      77,
      .52
    ) !important;

  border-left:
    5px solid
    #ffb347 !important;

  background:
    linear-gradient(
      135deg,
      rgba(91,62,18,.52),
      rgba(12,31,52,.98)
    ) !important;
}


body:has(.lounge-shell)
.chat-system-warn
.chat-system-badge {
  background:
    rgba(
      255,
      179,
      71,
      .17
    ) !important;

  border:
    1px solid
    rgba(
      255,
      179,
      71,
      .52
    ) !important;

  color:
    #ffd262 !important;
}


/* Ban */

body:has(.lounge-shell)
.chat-system-ban {
  border:
    1px solid
    rgba(
      255,
      90,
      100,
      .50
    ) !important;

  border-left:
    5px solid
    #ff5964 !important;

  background:
    linear-gradient(
      135deg,
      rgba(91,28,36,.68),
      rgba(12,31,52,.98)
    ) !important;
}


body:has(.lounge-shell)
.chat-system-ban
.chat-system-badge {
  background:
    rgba(
      255,
      89,
      100,
      .16
    ) !important;

  border:
    1px solid
    rgba(
      255,
      89,
      100,
      .52
    ) !important;

  color:
    #ff9da5 !important;
}


/* Mute - bereits vorbereitet */

body:has(.lounge-shell)
.chat-system-mute {
  border-left:
    5px solid
    #b388ff !important;
}


body:has(.lounge-shell)
.chat-system-mute
.chat-system-badge {
  color:
    #d7c2ff !important;

  border:
    1px solid
    rgba(
      179,
      136,
      255,
      .50
    ) !important;

  background:
    rgba(
      179,
      136,
      255,
      .14
    ) !important;
}


/* Kick - bereits vorbereitet */

body:has(.lounge-shell)
.chat-system-kick {
  border-left:
    5px solid
    #ff8a4c !important;
}


body:has(.lounge-shell)
.chat-system-kick
.chat-system-badge {
  color:
    #ffbd91 !important;

  border:
    1px solid
    rgba(
      255,
      138,
      76,
      .50
    ) !important;

  background:
    rgba(
      255,
      138,
      76,
      .14
    ) !important;
}


/* Ankündigungen - für später bereits vorbereitet */

body:has(.lounge-shell)
.chat-system-announcement {
  border:
    1px solid
    rgba(
      76,
      170,
      255,
      .46
    ) !important;

  border-left:
    5px solid
    #4da8ff !important;

  background:
    linear-gradient(
      135deg,
      rgba(18,67,111,.78),
      rgba(11,31,53,.98)
    ) !important;
}


body:has(.lounge-shell)
.chat-system-announcement
.chat-system-badge {
  color:
    #9dd3ff !important;

  border:
    1px solid
    rgba(
      77,
      168,
      255,
      .55
    ) !important;

  background:
    rgba(
      77,
      168,
      255,
      .15
    ) !important;
}


/* Smartphone */

@media (max-width:700px) {

  body:has(.lounge-shell)
  .chat-system-moderation,
  body:has(.lounge-shell)
  .chat-system-announcement {
    grid-template-columns:
      1fr !important;

    gap:
      4px !important;
  }

}


/* === /HCHAT MODERATION MESSAGE DESIGN B 2026 === */


/* ============================================================
   HCHAT UI POLISH V3 2026
   ============================================================ */


/* ------------------------------------------------------------
   LOUNGE COMPOSER
   ------------------------------------------------------------ */

body:has(.lounge-shell)
#chatForm {
  grid-template-columns:
    96px
    minmax(0,1fr)
    124px !important;

  align-items:
    end !important;

  gap:
    9px !important;
}


body:has(.lounge-shell)
.hchat-color-wrap {
  display:
    flex !important;

  flex-direction:
    column !important;

  justify-content:
    flex-end !important;

  gap:
    4px !important;

  margin:
    0 !important;
}


body:has(.lounge-shell)
.hchat-color-wrap > span {
  margin:
    0 0 0 2px !important;

  line-height:
    1 !important;
}


body:has(.lounge-shell)
.hchat-color-picker {
  height:
    42px !important;

  min-height:
    42px !important;

  box-sizing:
    border-box !important;

  margin:
    0 !important;

  padding:
    0 9px !important;

  border-radius:
    9px !important;
}


body:has(.lounge-shell)
#chatInput {
  height:
    42px !important;

  min-height:
    42px !important;

  box-sizing:
    border-box !important;

  margin:
    0 !important;

  padding:
    0 14px !important;

  border-radius:
    10px !important;
}


body:has(.lounge-shell)
#chatForm
button[type="submit"] {
  height:
    42px !important;

  min-height:
    42px !important;

  margin:
    0 !important;

  border-radius:
    10px !important;
}


/* ------------------------------------------------------------
   ANWESENHEIT
   ------------------------------------------------------------ */

body:has(.lounge-shell)
#onlineList {
  display:
    flex !important;

  flex-direction:
    column !important;

  min-height:
    0 !important;

  height:
    100% !important;

  overflow:
    hidden !important;
}


body:has(.lounge-shell)
.hchat-presence-control {
  flex:
    0 0 auto !important;
}


/* Filter jetzt sauber untereinander */

body:has(.lounge-shell)
.hchat-gender-filters {
  display:
    grid !important;

  grid-template-columns:
    1fr !important;

  gap:
    3px !important;

  margin:
    0 7px 9px !important;

  flex:
    0 0 auto !important;
}


body:has(.lounge-shell)
.hchat-gender-filter {
  width:
    100% !important;

  min-height:
    26px !important;

  box-sizing:
    border-box !important;

  padding:
    4px 9px !important;

  text-align:
    left !important;

  font-size:
    11px !important;
}


body:has(.lounge-shell)
.hchat-gender-filter[data-filter="friends"],
body:has(.lounge-shell)
.hchat-gender-filter[data-filter="female"] {
  margin-top:
    4px !important;
}


/* Nur Benutzer scrollen */

body:has(.lounge-shell)
.hchat-online-users-scroll {
  flex:
    1 1 auto !important;

  min-height:
    60px !important;

  overflow-y:
    auto !important;

  overflow-x:
    hidden !important;

  padding-right:
    3px !important;

  scrollbar-width:
    thin;

  scrollbar-color:
    #477da7
    #0a2948;
}


body:has(.lounge-shell)
.hchat-online-users-scroll::-webkit-scrollbar {
  width:
    7px;
}


body:has(.lounge-shell)
.hchat-online-users-scroll::-webkit-scrollbar-track {
  background:
    #0a2948;
}


body:has(.lounge-shell)
.hchat-online-users-scroll::-webkit-scrollbar-thumb {
  background:
    #477da7;

  border-radius:
    8px;
}


body:has(.lounge-shell)
.hchat-group-staff
.hchat-online-group-title {
  color:
    #ffb83e !important;
}


/* Profilknopf */

body:has(.lounge-shell)
.hchat-online-profile {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    31px !important;

  height:
    31px !important;

  padding:
    0 !important;

  font-size:
    16px !important;

  line-height:
    1 !important;

  border-radius:
    8px !important;

  text-decoration:
    none !important;
}


body:has(.lounge-shell)
.hchat-online-profile[data-gender="female"] {
  background:
    rgba(255,105,180,.10) !important;
}


body:has(.lounge-shell)
.hchat-online-profile[data-gender="male"] {
  background:
    rgba(76,153,255,.10) !important;
}


body:has(.lounge-shell)
.hchat-online-profile[data-gender="diverse"] {
  background:
    rgba(180,120,255,.12) !important;
}


/* ------------------------------------------------------------
   MAILBOX MESSAGE VIEW
   ------------------------------------------------------------ */

.hchat-mailbox-message-view {
  width:
    min(1040px, calc(100% - 28px));

  margin:
    28px auto;

  padding:
    24px;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(85,156,213,.30);

  border-radius:
    16px;

  background:
    linear-gradient(
      180deg,
      #102844,
      #0b2037
    );

  box-shadow:
    0 14px 40px
    rgba(0,0,0,.18);
}


.hchat-mailbox-message-view
h2,
.hchat-mailbox-message-view
h3 {
  color:
    #ffd25b;
}


.hchat-mailbox-back {
  margin-top:
    0;
}


.hchat-mailbox-message-view
.hchat-mailbox-message-body {
  white-space:
    pre-wrap;

  margin:
    18px 0;

  padding:
    18px;

  min-height:
    28px;

  border:
    1px solid
    rgba(85,156,213,.24);

  border-radius:
    11px;

  background:
    #081d33;

  color:
    #edf6ff;

  line-height:
    1.55;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025);
}


/* Meldebereich */

.hchat-mailbox-message-view
form[action="/mailbox/report"] {
  margin:
    18px 0 !important;

  padding:
    18px !important;

  border:
    1px solid
    rgba(230,122,98,.28) !important;

  border-radius:
    12px !important;

  background:
    rgba(78,25,30,.24) !important;

  color:
    #edf6ff !important;
}


.hchat-mailbox-message-view
form[action="/mailbox/report"]
select,
.hchat-mailbox-message-view
form[action="/mailbox/report"]
textarea {
  width:
    100% !important;

  box-sizing:
    border-box !important;

  margin-top:
    8px !important;

  padding:
    10px !important;

  border:
    1px solid
    rgba(98,170,225,.35) !important;

  border-radius:
    8px !important;

  background:
    #071b30 !important;

  color:
    #edf6ff !important;
}


.hchat-mailbox-message-view
hr {
  margin:
    24px 0;

  border:
    0;

  border-top:
    1px solid
    rgba(255,255,255,.16);
}


/* Anhänge */

.hchat-mailbox-message-view
img {
  border-radius:
    10px;

  box-shadow:
    0 7px 24px
    rgba(0,0,0,.28);
}


/* Kontaktbereich */

.hchat-mailbox-message-view
form[action^="/mailbox/block/"],
.hchat-mailbox-message-view
form[action^="/mailbox/unblock/"] {
  margin:
    12px 0 0;
}


/* Navigation Mailbox */

body > header
nav
a[href="/mailbox"] {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  line-height:
    1 !important;

  vertical-align:
    middle !important;
}


/* Mobile */

@media (max-width:850px) {

  body:has(.lounge-shell)
  #chatForm {
    grid-template-columns:
      88px
      minmax(0,1fr)
      100px !important;
  }

  .hchat-mailbox-message-view {
    width:
      calc(100% - 16px);

    margin:
      12px auto;

    padding:
      16px;
  }
}


/* === /HCHAT UI POLISH V3 2026 === */


/* ============================================================
   HCHAT PRIVACY + LOUNGE POLISH V4 2026
   ============================================================ */


/* Keine alten Filterbuttons mehr */

body:has(.lounge-shell)
.hchat-gender-filters {
  display:
    none !important;
}


/* Gruppenüberschriften nur Gold,
   kein Symbol/Kreis davor */

body:has(.lounge-shell)
.hchat-online-group-title {
  color:
    #ffb52f !important;

  font-weight:
    800 !important;

  padding-left:
    5px !important;
}


/* Chat und Online-Spalte bündig */

body:has(.lounge-shell)
.lounge-shell {
  align-items:
    stretch !important;
}


body:has(.lounge-shell)
.lounge-main,
body:has(.lounge-shell)
.lounge-sidebar,
body:has(.lounge-shell)
.hchat-lounge-sidebar,
body:has(.lounge-shell)
.hchat-online-panel {
  align-self:
    stretch !important;

  margin-top:
    0 !important;

  margin-bottom:
    0 !important;
}


/* Live-Flüstern-Schalter */

.hchat-whisper-monitor-toolbar {
  flex:
    0 0 auto;

  padding:
    5px 10px;

  border-bottom:
    1px solid
    rgba(86,154,207,.25);

  background:
    #0a2948;

  text-align:
    right;
}


.hchat-whisper-monitor-toggle {
  padding:
    6px 10px;

  border:
    1px solid #547698;

  border-radius:
    7px;

  background:
    #102b49;

  color:
    #b9cee1;

  cursor:
    pointer;

  font-weight:
    700;
}


.hchat-whisper-monitor-toggle.active {
  border-color:
    #f0a52e;

  color:
    #ffd15b;

  background:
    #3a2a0f;
}


.hchat-live-whisper-row {
  padding:
    7px 10px !important;

  margin:
    3px 8px !important;

  border-left:
    3px solid
    #b879ff;

  background:
    rgba(105,60,160,.16);
}


.hchat-live-whisper-label {
  color:
    #d4a5ff;

  font-weight:
    900;
}


/* Inspect-Seiten */

.hchat-v4-inspect {
  width:
    min(
      1450px,
      calc(100% - 32px)
    );

  margin:
    30px auto;
}


.hchat-v4-inspect
h2 {
  color:
    #ffd15b;
}


.hchat-v4-filter {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(180px,1fr)
    );

  gap:
    12px;

  margin:
    18px 0;

  padding:
    16px;

  border:
    1px solid
    rgba(83,151,207,.28);

  border-radius:
    12px;

  background:
    #142e4b;
}


.hchat-v4-filter
label {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  color:
    #dceafa;

  font-weight:
    700;
}


.hchat-v4-filter
input,
.hchat-v4-filter
select {
  width:
    100%;

  box-sizing:
    border-box;

  padding:
    9px 10px;

  border:
    1px solid
    #416987;

  border-radius:
    7px;

  background:
    #081f36;

  color:
    #edf7ff;
}


.hchat-v4-filter-actions {
  display:
    flex;

  align-items:
    flex-end;

  gap:
    9px;
}


.hchat-v4-filter-actions
a,
.hchat-v4-head-actions
a {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    35px;

  padding:
    0 12px;

  border:
    1px solid
    #4e7291;

  border-radius:
    7px;

  text-decoration:
    none;
}


.hchat-v4-table-wrap {
  overflow:
    auto;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:
    12px;

  background:
    #102945;
}


.hchat-v4-table-wrap
table {
  width:
    100%;

  border-collapse:
    collapse;
}


.hchat-v4-table-wrap
th,
.hchat-v4-table-wrap
td {
  padding:
    11px 12px;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);

  text-align:
    left;

  vertical-align:
    top;
}


.hchat-v4-table-wrap
th {
  color:
    #ffc34a;

  background:
    #0b223b;
}


.hchat-v4-muted {
  color:
    #91a9bf;
}


.hchat-v4-head {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    12px;

  flex-wrap:
    wrap;
}


.hchat-v4-head-actions {
  display:
    flex;

  gap:
    8px;
}


.hchat-v4-whisper-live {
  max-height:
    650px;

  overflow-y:
    auto;

  padding:
    14px;

  border-radius:
    12px;

  background:
    #142e4c;
}


.hchat-v4-whisper-row {
  margin-bottom:
    8px;

  padding:
    11px 13px;

  border-left:
    3px solid
    #c68aff;

  border-radius:
    8px;

  background:
    #0b233b;
}


.hchat-v4-whisper-meta {
  margin-bottom:
    4px;

  color:
    #8fa9bf;

  font-size:
    12px;
}


/* === /HCHAT PRIVACY + LOUNGE POLISH V4 2026 === */



/* ==========================================================
   HCHAT LOUNGE COMPACT HEADER V1 2026

   Ziel:
   - Skyline kompakter
   - Logo kleiner
   - Navigation dichter
   - mehr sichtbare Chatflaeche
   ========================================================== */


/* ----------------------------------------------------------
   DESKTOP / TABLET
   ---------------------------------------------------------- */

body.hchat-lounge-page
> header
.hchat-top-brand {
  height:
    140px !important;

  min-height:
    140px !important;

  max-height:
    140px !important;
}


body.hchat-lounge-page
> header
.hchat-top-skyline {
  height:
    140px !important;

  min-height:
    140px !important;

  max-height:
    140px !important;
}


/*
 * Gleiches Skyline-Bild wie bisher,
 * nur kompakter ausgeschnitten.
 */

body.hchat-lounge-page
> header
.hchat-top-skyline-img {
  bottom:
    -290px !important;
}


body.hchat-lounge-page
> header
.hchat-top-content {
  height:
    140px !important;

  min-height:
    140px !important;

  max-height:
    140px !important;

  padding:
    8px 14px !important;
}


body.hchat-lounge-page
> header
.hchat-top-logo {
  height:
    78px !important;

  width:
    auto !important;
}


/*
 * Claim oberhalb der Navigation.
 */

body.hchat-lounge-page
> header
.hchat-site-subtitle {
  left:
    14px !important;

  bottom:
    45px !important;

  font-size:
    12px !important;

  line-height:
    15px !important;

  white-space:
    nowrap !important;
}


/*
 * Navigation kompakter,
 * Buttons bleiben gut bedienbar.
 */

body.hchat-lounge-page
> header
nav {
  left:
    14px !important;

  bottom:
    6px !important;

  gap:
    6px !important;
}


body.hchat-lounge-page
> header
nav a,

body.hchat-lounge-page
> header
nav button {
  padding:
    7px 12px !important;

  font-size:
    12px !important;

  line-height:
    15px !important;

  min-height:
    30px !important;

  box-sizing:
    border-box !important;
}


/*
 * Weniger Abstand zwischen Header
 * und Lounge.
 */

body.hchat-lounge-page
main {
  margin-top:
    4px !important;

  padding-top:
    0 !important;
}


/*
 * Das Nachrichtenfenster bleibt Flexbox-gesteuert.
 * Alte konservative max-height-Werte aus V8
 * sollen die neu gewonnene Hoehe nicht begrenzen.
 */

body.hchat-lounge-page
#chatMessages,

body.hchat-lounge-page
.chat-messages {
  max-height:
    none !important;
}


/*
 * Rechte Online-Liste soll die volle
 * Lounge-Hoehe sinnvoll nutzen.
 */

body.hchat-lounge-page
#onlineList {
  max-height:
    none !important;
}


/* ----------------------------------------------------------
   MITTLERE BILDSCHIRME
   ---------------------------------------------------------- */

@media (
  min-width:851px
)
and (
  max-width:1300px
) {

  body.hchat-lounge-page
  > header
  .hchat-top-brand,

  body.hchat-lounge-page
  > header
  .hchat-top-skyline,

  body.hchat-lounge-page
  > header
  .hchat-top-content {
    height:
      132px !important;

    min-height:
      132px !important;

    max-height:
      132px !important;
  }


  body.hchat-lounge-page
  > header
  .hchat-top-skyline-img {
    bottom:
      -298px !important;
  }


  body.hchat-lounge-page
  > header
  .hchat-top-logo {
    height:
      72px !important;
  }


  body.hchat-lounge-page
  > header
  .hchat-site-subtitle {
    bottom:
      43px !important;
  }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:850px) {

  body.hchat-lounge-page
  > header
  .hchat-top-brand,

  body.hchat-lounge-page
  > header
  .hchat-top-skyline,

  body.hchat-lounge-page
  > header
  .hchat-top-content {
    height:
      118px !important;

    min-height:
      118px !important;

    max-height:
      118px !important;
  }


  body.hchat-lounge-page
  > header
  .hchat-top-skyline-img {
    bottom:
      -312px !important;
  }


  body.hchat-lounge-page
  > header
  .hchat-top-content {
    padding:
      6px 10px !important;
  }


  body.hchat-lounge-page
  > header
  .hchat-top-logo {
    height:
      60px !important;
  }


  body.hchat-lounge-page
  > header
  .hchat-site-subtitle {
    left:
      10px !important;

    bottom:
      39px !important;

    font-size:
      10px !important;

    line-height:
      12px !important;

    max-width:
      calc(100% - 20px) !important;

    overflow:
      hidden !important;

    text-overflow:
      ellipsis !important;
  }


  body.hchat-lounge-page
  > header
  nav {
    left:
      10px !important;

    right:
      10px !important;

    bottom:
      5px !important;

    gap:
      4px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    white-space:
      nowrap !important;

    scrollbar-width:
      none !important;
  }


  body.hchat-lounge-page
  > header
  nav::-webkit-scrollbar {
    display:
      none !important;
  }


  body.hchat-lounge-page
  > header
  nav a,

  body.hchat-lounge-page
  > header
  nav button {
    padding:
      6px 9px !important;

    font-size:
      11px !important;

    min-height:
      28px !important;
  }


  /*
   * Alte mobile Mindesthoehe war noch
   * auf den 210px-Header ausgelegt.
   */

  body.hchat-lounge-page
  .lounge-shell {
    min-height:
      calc(100dvh - 145px) !important;
  }


  body.hchat-lounge-page
  .chat-messages,

  body.hchat-lounge-page
  #chatMessages {
    min-height:
      50dvh !important;

    max-height:
      none !important;
  }

}


/* === /HCHAT LOUNGE COMPACT HEADER V1 2026 === */


/* ==========================================================
   HCHAT SMILEY PICKER V4 2026
   kompakt + schwebend
   ========================================================== */

body:has(.lounge-shell)
.chat-bottom {
  position:
    relative !important;
}


/*
 * Kleine Werkzeugzeile.
 */

body:has(.lounge-shell)
.chat-tools {
  flex:
    0 0 auto !important;

  min-height:
    32px !important;

  height:
    32px !important;

  padding:
    2px 12px !important;

  margin:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  box-sizing:
    border-box !important;
}


/*
 * Kompakter Smileybutton.
 */

body:has(.lounge-shell)
#smileyToggle {
  margin:
    0 !important;

  padding:
    4px 10px !important;

  min-height:
    26px !important;

  height:
    26px !important;

  line-height:
    1 !important;

  border-radius:
    8px !important;

  font-size:
    13px !important;
}


/*
 * Picker nimmt keinen Layoutplatz mehr ein.
 */

body:has(.lounge-shell)
#smileyPicker {
  display:
    none !important;

  position:
    absolute !important;

  left:
    12px !important;

  right:
    12px !important;

  bottom:
    100% !important;

  z-index:
    500 !important;

  width:
    auto !important;

  max-height:
    min(52vh, 430px) !important;

  overflow-y:
    auto !important;

  overflow-x:
    hidden !important;

  margin:
    0 0 8px !important;

  padding:
    10px !important;

  box-sizing:
    border-box !important;

  border:
    1px solid
    rgba(75,170,235,.72) !important;

  border-radius:
    12px !important;

  background:
    #183b63 !important;

  box-shadow:
    0 16px 38px
    rgba(0,0,0,.45) !important;
}


body:has(.lounge-shell)
#smileyPicker.open {
  display:
    block !important;
}


/*
 * Picker-Kopf.
 */

body:has(.lounge-shell)
.hchat-smiley-picker-head {
  position:
    sticky !important;

  top:
    -10px !important;

  z-index:
    5 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    12px !important;

  margin:
    -10px -10px 10px !important;

  padding:
    9px 10px !important;

  background:
    #102d4d !important;

  border-bottom:
    1px solid
    rgba(75,170,235,.32) !important;
}


body:has(.lounge-shell)
.hchat-smiley-picker-close {
  width:
    30px !important;

  height:
    30px !important;

  min-width:
    30px !important;

  padding:
    0 !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border-radius:
    8px !important;

  font-size:
    22px !important;

  line-height:
    1 !important;

  cursor:
    pointer !important;
}


/*
 * Auf schmalen Geräten fast volle Breite.
 */

@media (max-width:700px) {

  body:has(.lounge-shell)
  #smileyPicker {
    left:
      6px !important;

    right:
      6px !important;

    max-height:
      55vh !important;
  }

}


/* === /HCHAT SMILEY PICKER V4 2026 === */

/* ==========================================================
   HCHAT SMILEY PICKER V4.1 2026
   kompakter Popover
   ========================================================== */

body:has(.lounge-shell)
#smileyPicker {
  left:
    12px !important;

  right:
    auto !important;

  width:
    min(720px, calc(100% - 24px)) !important;

  max-width:
    720px !important;

  height:
    auto !important;

  max-height:
    360px !important;

  bottom:
    40px !important;

  overflow-y:
    auto !important;

  overflow-x:
    hidden !important;

  border-radius:
    12px !important;
}


/*
 * Suche kompakter.
 */

body:has(.lounge-shell)
#smileyPicker
input[type="search"],
body:has(.lounge-shell)
#smileyPicker
input[type="text"] {
  width:
    min(420px,100%) !important;

  height:
    38px !important;

  min-height:
    38px !important;

  padding:
    6px 12px !important;

  margin:
    0 0 8px !important;
}


/*
 * Kategorien kompakter.
 */

body:has(.lounge-shell)
#smileyPicker
button {
  min-height:
    30px !important;
}


@media (max-width:800px) {

  body:has(.lounge-shell)
  #smileyPicker {
    left:
      6px !important;

    right:
      6px !important;

    width:
      auto !important;

    max-width:
      none !important;

    max-height:
      55vh !important;
  }

}


/* === /HCHAT SMILEY PICKER V4.1 2026 === */

/* ==========================================================
   HCHAT SMILEY CLOSE V4.2 2026
   ========================================================== */

body:has(.lounge-shell)
#smileyPicker {
  position:
    absolute !important;
}

body:has(.lounge-shell)
#smileyPicker
.hchat-smiley-picker-close-v42 {
  position:
    sticky !important;

  top:
    6px !important;

  float:
    right !important;

  z-index:
    100 !important;

  width:
    32px !important;

  height:
    32px !important;

  min-width:
    32px !important;

  min-height:
    32px !important;

  margin:
    4px 4px 0 8px !important;

  padding:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    1px solid
    rgba(255,180,60,.65) !important;

  border-radius:
    8px !important;

  background:
    #102743 !important;

  color:
    #ffffff !important;

  font-size:
    24px !important;

  line-height:
    1 !important;

  cursor:
    pointer !important;

  box-shadow:
    0 3px 10px
    rgba(0,0,0,.25) !important;
}

body:has(.lounge-shell)
#smileyPicker
.hchat-smiley-picker-close-v42:hover {
  background:
    #c13b3b !important;
}

/* === /HCHAT SMILEY CLOSE V4.2 2026 === */

/* ==========================================================
   HCHAT KICK UI FIX V1 2026
   ========================================================== */

body:not(.hchat-lounge-page)
main:has(.hchat-kick-page) {
  display:
    block !important;

  visibility:
    visible !important;

  opacity:
    1 !important;

  width:
    calc(100% - 32px) !important;

  max-width:
    900px !important;

  min-height:
    340px !important;

  margin:
    24px auto !important;

  padding:
    24px !important;

  box-sizing:
    border-box !important;

  overflow:
    visible !important;

  background:
    #0f2742 !important;

  color:
    #eef6ff !important;

  border:
    1px solid
    rgba(245,164,58,.45) !important;

  border-radius:
    14px !important;
}


.hchat-kick-page {
  display:
    block !important;

  visibility:
    visible !important;

  opacity:
    1 !important;

  position:
    relative !important;

  z-index:
    2 !important;

  color:
    #eef6ff !important;
}


.hchat-kick-page h2 {
  color:
    #ffd16d !important;
}


.hchat-kick-page p,
.hchat-kick-page label {
  color:
    #eef6ff !important;
}


.hchat-kick-page input,
.hchat-kick-page textarea {
  background:
    #081b30 !important;

  color:
    #ffffff !important;

  border:
    1px solid
    rgba(75,170,235,.55) !important;

  border-radius:
    8px !important;
}


.hchat-kick-page button {
  background:
    #f6bd42 !important;

  color:
    #13243b !important;

  border:
    0 !important;

  border-radius:
    8px !important;

  font-weight:
    800 !important;
}

/* === /HCHAT KICK UI FIX V1 2026 === */


/* ==========================================================
   HCHAT LOUNGE COMPACT V1 2026
   Mehr vertikaler Platz fuer Chatnachrichten
   ========================================================== */

@media (min-width:901px) {

  body:has(.lounge-shell)
  > header {
    min-height:
      160px !important;

    height:
      160px !important;

    padding-top:
      10px !important;

    padding-bottom:
      8px !important;

    box-sizing:
      border-box !important;
  }


  body:has(.lounge-shell)
  .lounge-header {
    min-height:
      42px !important;

    padding:
      7px 14px !important;

    box-sizing:
      border-box !important;
  }


  body:has(.lounge-shell)
  .lounge-title {
    line-height:
      1.15 !important;
  }


  body:has(.lounge-shell)
  .lounge-description {
    margin-top:
      2px !important;

    line-height:
      1.15 !important;
  }


  body:has(.lounge-shell)
  .chat-bottom {
    padding-top:
      0 !important;

    margin-top:
      0 !important;

    gap:
      0 !important;
  }


  body:has(.lounge-shell)
  .chat-tools {
    min-height:
      32px !important;

    padding:
      2px 12px !important;

    margin:
      0 !important;

    box-sizing:
      border-box !important;
  }


  body:has(.lounge-shell)
  #smileyToggle {
    min-height:
      27px !important;

    padding:
      4px 10px !important;

    margin:
      2px 0 !important;

    line-height:
      1.1 !important;
  }

}

/* === /HCHAT LOUNGE COMPACT V1 2026 === */


/* === HCHAT SMILEYS COMIC CSS V1 2026 === */
/* Kompakte, harmlose Comic-Animationen für den Nachrichtenbereich. */
.custom-smiley.hchat-stichel-smiley,
.custom-smiley.hchat-hammer-smiley {
  display: inline-block;
  width: 4.2em;
  height: 1.7em;
  position: relative;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1;
  font-size: 1.12em;
  margin-inline: 0.12em;
}
.hchat-stichel-smiley > span,
.hchat-hammer-smiley > span {
  position: absolute;
  display: inline-block;
  line-height: 1;
}
.hchat-stichel-actor { left: 0; bottom: 0.08em; }
.hchat-stichel-poke {
  left: 1.35em;
  bottom: 0.08em;
  transform-origin: left center;
  animation: hchat-stichel-poke-v1 1.9s ease-in-out infinite;
}
.hchat-stichel-target {
  left: 2.9em;
  bottom: 0.08em;
  animation: hchat-stichel-react-v1 1.9s ease-in-out infinite;
}
.hchat-hammer-tool {
  z-index: 2;
  left: 0.15em;
  top: 0.03em;
  transform-origin: 90% 85%;
  animation: hchat-hammer-swing-v1 2s ease-in-out infinite;
}
.hchat-hammer-head {
  left: 2.05em;
  bottom: 0.06em;
  animation: hchat-hammer-react-v1 2s ease-in-out infinite;
}
.hchat-hammer-stars {
  left: 2.75em;
  top: -0.22em;
  font-size: 0.8em;
  animation: hchat-hammer-stars-v1 2s ease-in-out infinite;
}
@keyframes hchat-stichel-poke-v1 {
  0%, 20%, 55%, 100% { transform: translateX(0); }
  34%, 44% { transform: translateX(0.36em); }
}
@keyframes hchat-stichel-react-v1 {
  0%, 25%, 55%, 100% { transform: translateX(0) rotate(0); }
  37%, 46% { transform: translateX(0.15em) rotate(12deg); }
}
@keyframes hchat-hammer-swing-v1 {
  0%, 12%, 60%, 100% { transform: rotate(-45deg); }
  28% { transform: rotate(-85deg); }
  39%, 44% { transform: rotate(18deg); }
}
@keyframes hchat-hammer-react-v1 {
  0%, 35%, 60%, 100% { transform: translateY(0) rotate(0); }
  42%, 50% { transform: translateY(0.15em) rotate(12deg); }
}
@keyframes hchat-hammer-stars-v1 {
  0%, 35%, 59%, 100% { opacity: 0; transform: scale(0.5); }
  43%, 51% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hchat-stichel-smiley > span,
  .hchat-hammer-smiley > span {
    animation: none !important;
  }
}
/* === /HCHAT SMILEYS COMIC CSS V1 2026 === */