*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#11151b;color:#eef2f7}a{color:#f3b35b;text-decoration:none}button,input,select{font:inherit}.center{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top,#283240,#0d1117)}.card{background:#171d25;border:1px solid #2a3543;border-radius:18px;box-shadow:0 20px 60px #0008}.login-card{width:min(430px,92vw);padding:30px}.login-card label{display:block;margin:16px 0}.login-card input,.grid-form input,.sendbar input,.sendbar select,.inline select{width:100%;padding:12px;border-radius:10px;border:1px solid #39485a;background:#0e141b;color:white;margin-top:6px}button{background:#d88b2e;color:#111;border:0;border-radius:10px;padding:11px 16px;font-weight:700;cursor:pointer}.error{background:#602b31;padding:10px;border-radius:8px}.topbar{height:58px;background:#171d25;border-bottom:1px solid #2a3543;display:flex;align-items:center;gap:20px;padding:0 18px}.topbar strong{font-size:20px;margin-right:auto}.chat-body{height:100vh;overflow:hidden}.chat-layout{display:grid;grid-template-columns:190px minmax(0,1fr) 230px;height:calc(100vh - 58px)}.rooms,.online{background:#151b22;padding:16px;overflow:auto}.rooms{border-right:1px solid #28313d}.online{border-left:1px solid #28313d}.rooms a{display:block;padding:10px 12px;border-radius:9px;margin:4px 0;color:#dfe6ee}.rooms a.active{background:#344254;color:white}.chat-main{display:grid;grid-template-rows:1fr auto;min-width:0}.messages{overflow:auto;padding:18px;background:#0e1319}.msg{background:#171f28;border:1px solid #263442;border-radius:12px;padding:10px 13px;margin:0 0 10px}.msg.whisper{border-color:#8d5a22;background:#241b12}.msg small{float:right;color:#7e8b99}.msg p{margin:6px 0 0;white-space:pre-wrap;word-break:break-word}.whisper-tag{font-size:12px;color:#f3b35b}.sendbar{display:grid;grid-template-columns:180px 1fr auto;gap:8px;padding:12px;background:#171d25;border-top:1px solid #28313d}.sendbar input,.sendbar select{margin:0}.online-user{padding:7px 2px;border-bottom:1px solid #222d38}.online-user small{color:#8190a0}.admin-body{background:#0e1319;min-height:100vh}.admin-shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}.admin-nav{background:#151b22;border-right:1px solid #2b3542;padding:24px 16px}.admin-nav h2{margin:0 0 25px}.admin-nav a{display:block;padding:13px 14px;margin:5px 0;border-radius:9px;color:#e8edf2}.admin-nav a:hover{background:#24303c}.admin-main{padding:28px;max-width:1500px;width:100%}.admin-main h1{font-size:30px}.stats{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:15px;margin-bottom:22px}.stats div,.panel{background:#171d25;border:1px solid #293543;border-radius:14px;padding:20px}.stats b{display:block;font-size:32px;color:#f1a94d}.stats span{color:#9aa8b7}.panel{margin-bottom:20px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid #2a3542}th{color:#f1a94d}.grid-form{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:14px;align-items:end}.grid-form label{color:#b8c3cf}.inline{display:inline-block}@media(max-width:850px){.chat-layout{grid-template-columns:1fr}.rooms,.online{display:none}.sendbar{grid-template-columns:1fr}.admin-shell{grid-template-columns:1fr}.admin-nav{display:flex;gap:5px;overflow:auto}.admin-nav h2{display:none}.admin-nav a{white-space:nowrap}.stats{grid-template-columns:repeat(2,1fr)}.grid-form{grid-template-columns:1fr}}
/* Admin: Design- und Schrift-Einstellungen */
.settings-grid{display:grid;gap:16px;align-items:end}.settings-grid.two-cols{grid-template-columns:repeat(2,minmax(240px,1fr))}.settings-grid.font-grid{grid-template-columns:repeat(4,minmax(160px,1fr))}.settings-grid label{display:block;color:#b8c3cf;font-weight:600}.settings-grid input{width:100%;padding:12px;border-radius:10px;border:1px solid #39485a;background:#0e141b;color:white;margin-top:7px}.check-row{display:flex!important;align-items:center;gap:10px;min-height:48px}.check-row input{width:auto!important;margin:0!important;transform:scale(1.25)}.hint{color:#9eabb9;line-height:1.5}.save-ok{background:#173b2a;border:1px solid #2c7450;color:#d9ffea;padding:12px 16px;border-radius:10px;margin:0 0 18px}.settings-actions{position:sticky;bottom:0;padding:14px 0;background:linear-gradient(transparent,#0e1319 35%);text-align:right}.settings-actions button{font-size:17px;padding:13px 22px}.textfill-preview-wrap{margin-top:22px;padding:18px;border:1px dashed #3b4856;border-radius:12px;background:#10161d}.textfill-preview-wrap>span{display:block;color:#9eabb9;margin-bottom:8px}.textfill-preview{display:inline-block;font-size:38px;font-weight:900;line-height:1.2;background-size:cover;background-position:center;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}

/* Im Chat über Admin einstellbare Schriftgrößen */
.chat-title{font-size:var(--chat-topbar-size,22px)}.chat-title.text-fill{display:inline-block;background-size:cover;background-position:center;background-repeat:repeat;background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}.msg p{font-size:var(--chat-message-size,18px);line-height:1.42}.msg-username{font-size:var(--chat-username-size,18px)}.msg-time{font-size:var(--chat-time-size,12px)}.online-user{font-size:var(--chat-online-size,16px)}.rooms a{font-size:var(--chat-rooms-size,16px)}.rooms h3,.online h3{font-size:var(--chat-heading-size,22px)}.sendbar input,.sendbar select{font-size:var(--chat-input-size,17px)}

@media(max-width:1050px){.settings-grid.font-grid{grid-template-columns:repeat(2,minmax(160px,1fr))}}@media(max-width:700px){.settings-grid.two-cols,.settings-grid.font-grid{grid-template-columns:1fr}.textfill-preview{font-size:30px}}

/* Benutzer-Schriftfarbe und bis zu 8 animierte Text-Fills */
.chat-main{grid-template-rows:1fr auto auto}.user-stylebar{display:flex;align-items:center;gap:8px;min-height:64px;padding:7px 12px;background:#121922;border-top:1px solid #28313d;overflow-x:auto}.style-caption{font-weight:700;color:#aeb9c5;white-space:nowrap;margin-right:3px}.normal-style-choice{height:48px;display:flex;align-items:center;gap:7px;padding:5px 8px;border:1px solid #344354;border-radius:10px;cursor:pointer;background:#171f28;white-space:nowrap}.normal-style-choice.selected,.fill-choice.selected{outline:2px solid #f1a94d;border-color:#f1a94d}.normal-style-choice input[type=color]{width:32px;height:32px;padding:1px;border:0;background:transparent;cursor:pointer}.fill-choices{display:flex;align-items:center;gap:7px}.fill-choice{height:48px;min-width:68px;padding:3px 7px;border:1px solid #344354;background:#171f28;color:#dfe6ee;border-radius:10px;display:grid;grid-template-columns:30px auto;grid-template-rows:1fr;align-items:center;gap:5px}.fill-choice>span{font-size:26px;font-weight:900;line-height:1;background-size:cover;background-position:center;background-repeat:repeat;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}.fill-choice small{font-size:11px;max-width:85px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-text-fill{display:inline-block;max-width:100%;font-weight:700;background-size:cover;background-position:center;background-repeat:repeat;background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}.user-fill-admin-grid{display:grid;grid-template-columns:repeat(4,minmax(210px,1fr));gap:14px}.user-fill-admin-card{border:1px solid #334050;border-radius:12px;padding:13px;background:#111820}.user-fill-admin-card label{display:block;margin-top:8px}.fill-admin-preview{font-size:36px;font-weight:900;line-height:1.2;min-height:44px;background-size:cover;background-position:center;background-repeat:repeat;background-clip:text;-webkit-background-clip:text;color:#f1a94d;-webkit-text-fill-color:transparent}.user-fill-admin-card input{width:100%;padding:10px;border-radius:9px;border:1px solid #39485a;background:#0e141b;color:white;margin-top:5px}
@media(max-width:1100px){.user-fill-admin-grid{grid-template-columns:repeat(2,minmax(210px,1fr))}}@media(max-width:700px){.user-fill-admin-grid{grid-template-columns:1fr}.style-caption{display:none}.user-stylebar{min-height:58px}.fill-choice{min-width:58px}}

/* Update 091: User-Fill-Auswahl unter Einstellungen */
.chat-main{grid-template-rows:1fr auto}.topbar-button{padding:7px 11px;border-radius:8px;background:#263240;color:#f4f7fa;border:1px solid #3b4a5b}.topbar-button:hover{background:#334252}.settings-modal{position:fixed;inset:0;background:#000a;display:none;align-items:center;justify-content:center;padding:20px;z-index:9999}.settings-modal.open{display:flex}.settings-dialog{position:relative;width:min(900px,96vw);max-height:90vh;overflow:auto;background:#151b22;border:1px solid #364555;border-radius:18px;box-shadow:0 28px 80px #000c;padding:24px}.settings-dialog h2{margin:0 45px 6px 0;font-size:28px}.settings-intro{color:#aab6c2;margin:0 0 20px}.settings-close{position:absolute;right:14px;top:12px;width:40px;height:40px;padding:0;border-radius:50%;font-size:28px;line-height:1;background:#2a3542;color:#fff}.user-setting-section{border-top:1px solid #2c3744;padding-top:18px;margin-top:18px}.user-setting-section h3{margin:0 0 12px}.normal-style-card{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#10161d;border:2px solid #314052;color:#fff;padding:16px;border-radius:14px;text-align:left}.normal-style-card.selected,.user-fill-option.selected{border-color:#f1a94d;box-shadow:0 0 0 2px #f1a94d44}.normal-color-preview{font-size:24px;font-weight:700}.normal-color-controls{display:flex;align-items:center;gap:10px;color:#b9c4cf}.normal-color-controls input[type=color]{width:50px;height:40px;padding:2px;border:0;background:transparent;cursor:pointer}.user-fill-picker{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px}.user-fill-option{min-height:180px;display:flex;flex-direction:column;align-items:stretch;gap:8px;background:#10161d;color:#eef2f7;border:2px solid #314052;border-radius:14px;padding:10px}.user-fill-thumb{height:82px;border-radius:10px;overflow:hidden;background:#0a0f14;display:grid;place-items:center}.user-fill-thumb img{width:100%;height:100%;object-fit:cover;display:block}.user-fill-text{font-size:22px;font-weight:900;line-height:1.15;background-size:cover;background-position:center;background-repeat:repeat;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}.user-fill-option strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-fills{color:#9eabb9}.settings-current{margin-top:20px;padding:12px 14px;background:#10161d;border-radius:10px}.settings-done{margin-top:14px;float:right}.fill-image-preview{height:110px;border:1px solid #334050;border-radius:10px;background:#0b1117;display:grid;place-items:center;overflow:hidden;color:#798899}.fill-image-preview img{width:100%;height:100%;object-fit:cover;display:block}.fill-card-number{font-weight:800;color:#f1a94d;margin-bottom:8px}.user-fill-admin-card input[type=file]{padding:8px}.remove-fill{font-size:13px;color:#e8a0a0!important;margin-top:10px!important}
@media(max-width:900px){.user-fill-picker{grid-template-columns:repeat(2,minmax(140px,1fr))}}@media(max-width:600px){.user-fill-picker{grid-template-columns:1fr 1fr}.settings-dialog{padding:18px}.normal-style-card{align-items:flex-start;flex-direction:column}.user-fill-option{min-height:155px}.user-fill-thumb{height:65px}}

/* Update 092: User-Einstellungen unten mit Zahnrad + Schriftgröße */
.chat-main{grid-template-rows:1fr auto auto}
.user-settings-launcher{display:flex;align-items:center;gap:12px;padding:10px 12px;border-top:1px solid #28313d;background:#111820}
.settings-gear-button{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:12px;background:#263240;color:#f4f7fa;border:1px solid #3b4a5b;font-weight:700}
.settings-gear-button:hover{background:#334252}
.gear-icon{font-size:20px;line-height:1}
.settings-gear-info{color:#95a3b1;font-size:14px}
.font-size-card{background:#10161d;border:2px solid #314052;border-radius:14px;padding:16px}
.font-size-label{display:block;font-weight:700;color:#dce4ec;margin-bottom:10px}
.font-size-controls{display:flex;align-items:center;gap:14px}
.font-size-controls input[type=range]{flex:1;margin:0}
#textSizeValue{min-width:64px;text-align:right;color:#f1a94d}
.font-size-preview{margin-top:14px;padding:12px 14px;background:#0b1117;border-radius:10px;color:#e6eef7;font-weight:700;line-height:1.35}

@media(max-width:700px){
  .user-settings-launcher{flex-direction:column;align-items:flex-start}
  .settings-gear-info{font-size:13px}
}

/* Update 094: Webcam-Teststufe */
.user-bottom-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.webcam-button{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:12px;background:#263240;color:#f4f7fa;border:1px solid #3b4a5b;font-weight:700}
.webcam-button:hover{background:#334252}
.webcam-icon{font-size:20px;line-height:1}
.webcam-modal{position:fixed;inset:0;background:#000b;display:none;align-items:center;justify-content:center;padding:20px;z-index:10000}
.webcam-modal.open{display:flex}
.webcam-dialog{position:relative;width:min(760px,96vw);background:#151b22;border:1px solid #364555;border-radius:18px;box-shadow:0 28px 80px #000d;padding:24px}
.webcam-dialog h2{margin:0 45px 6px 0;font-size:28px}
.webcam-stage{position:relative;aspect-ratio:16/9;width:100%;background:#070b0f;border:1px solid #344250;border-radius:14px;overflow:hidden;display:grid;place-items:center;margin-top:16px}
#localWebcam{display:none;width:100%;height:100%;object-fit:cover;background:#000;transform:scaleX(-1)}
#localWebcam.active{display:block}
.webcam-placeholder{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:56px;color:#768696;background:radial-gradient(circle at center,#18222c,#080d12)}
.webcam-placeholder span{font-size:16px;margin-top:8px;color:#aab6c2}
.webcam-placeholder.hidden{display:none}
.webcam-status{margin-top:12px;padding:10px 12px;border-radius:9px;background:#10171f;color:#c6d1dc}
.webcam-status.error{background:#35191d;color:#ffccd2;border:1px solid #6b2f36}
.webcam-controls{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.webcam-control{padding:10px 13px;border-radius:10px;background:#263240;color:#fff;border:1px solid #3b4a5b}
.webcam-control.primary{background:#315d3f;border-color:#4b8a5e}
.webcam-control.danger{background:#58262d;border-color:#83404a}
.webcam-control:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:620px){.webcam-dialog{padding:17px}.webcam-controls{display:grid;grid-template-columns:1fr 1fr}.webcam-control{width:100%}}

/* Update 095: Webcam-Reihe oben im Chat statt Popup */
.chat-main{grid-template-rows:auto 1fr auto auto}
.webcam-strip{display:none;gap:10px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;padding:10px 12px;background:#0d141b;border-bottom:1px solid #2b3744;scrollbar-width:thin}
.webcam-strip.active{display:flex}
.webcam-tile{flex:0 0 auto;width:320px;min-width:220px;max-width:720px;min-height:190px;max-height:520px;background:#121a22;border:1px solid #354453;border-radius:14px;overflow:hidden;resize:both;box-shadow:0 8px 24px #0006;display:flex;flex-direction:column}
.webcam-tile.cam-small{width:240px;height:230px}
.webcam-tile.cam-medium{width:340px;height:310px}
.webcam-tile.cam-large{width:520px;height:430px}
.webcam-tile-head{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 10px;background:#18222c;border-bottom:1px solid #2d3946}
.webcam-tile-head strong{color:#f1a94d}
.webcam-tile-head span{font-size:12px;color:#91a0af}
.webcam-tile-video{position:relative;flex:1;min-height:120px;background:#05080b;overflow:hidden}
.webcam-tile-video video{display:none;width:100%;height:100%;object-fit:cover;background:#000;transform:scaleX(-1)}
.webcam-tile-video video.active{display:block}
.webcam-tile-placeholder{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:42px;color:#718191;background:radial-gradient(circle at center,#18222c,#080d12)}
.webcam-tile-placeholder span{font-size:13px;margin-top:4px;color:#aab6c2}
.webcam-tile-placeholder.hidden{display:none}
.webcam-tile-controls{display:flex;gap:5px;flex-wrap:wrap;padding:7px;background:#111820;border-top:1px solid #263340}
.webcam-mini{padding:6px 8px;border-radius:8px;background:#263240;color:#fff;border:1px solid #3b4a5b;font-size:12px}
.webcam-mini.primary{background:#315d3f;border-color:#4b8a5e}
.webcam-mini.danger{background:#58262d;border-color:#83404a}
.webcam-mini:disabled{opacity:.45;cursor:not-allowed}
.webcam-tile-status{padding:6px 9px;background:#0d141b;color:#9dabb8;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.webcam-tile-status.error{color:#ffb4bd;background:#30161a}
.webcam-tile.running{border-color:#4b8a5e}

@media(max-width:700px){
  .webcam-tile{resize:none;width:280px;min-width:240px}
  .webcam-tile.cam-large{width:88vw;height:380px}
  .webcam-tile.cam-medium{width:78vw;height:300px}
  .webcam-tile.cam-small{width:240px;height:225px}
}

/* Update 096: oben ausschließlich Webcam-Bilder, Bedienung unten */
.webcam-strip{display:none;align-items:flex-start;gap:10px;overflow-x:auto;padding:10px 12px;background:#0b1117;border-bottom:1px solid #2b3744}
.webcam-strip.active{display:flex}
.webcam-tile{background:#090d12;border:1px solid #354453;border-radius:12px;overflow:hidden;resize:both;box-shadow:0 8px 24px #0006;display:flex;flex-direction:column}
.webcam-tile-head{padding:6px 8px;min-height:34px}
.webcam-tile-size{display:flex;gap:4px}
.cam-size-icon{width:28px;height:24px;padding:0;border-radius:6px;background:#273441;border:1px solid #405163;color:#fff;font-size:15px;line-height:1}
.cam-size-icon:hover{background:#354657}
.webcam-tile-video{flex:1;min-height:120px;background:#000}
.webcam-tile-video video{display:block;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.webcam-tile-controls,.webcam-tile-status,.webcam-tile-placeholder{display:none!important}
.webcam-subcontrol{padding:10px 12px}
.webcam-subcontrol.danger{background:#58262d;border-color:#83404a}
.webcam-subcontrol:disabled{opacity:.45;cursor:not-allowed}
#webcamStatus.error{color:#ffb4bd}

/* Update 097: Webcam-Bühne wie im Beispielbild - oben quer, Kameras nebeneinander */
.chat-main{grid-template-rows:auto minmax(0,1fr) auto auto}
.webcam-strip{
  display:none;
  width:100%;
  min-width:0;
  min-height:0;
  gap:10px;
  align-items:flex-start;
  overflow-x:auto;
  overflow-y:hidden;
  padding:10px 12px;
  background:linear-gradient(180deg,#1c120b,#0b0908);
  border-bottom:2px solid #7b3a12;
  box-shadow:inset 0 -8px 18px #0008;
}
.webcam-strip.active{
  display:flex;
  min-height:182px;
}
.webcam-tile{
  position:relative;
  flex:0 0 auto;
  width:240px;
  height:160px;
  min-width:160px;
  min-height:108px;
  max-width:620px;
  max-height:420px;
  background:#000;
  border:1px solid #5d351e;
  border-radius:4px;
  overflow:hidden;
  resize:both;
  box-shadow:0 3px 12px #000a;
  display:block;
}
.webcam-tile.cam-small{width:180px;height:120px}
.webcam-tile.cam-medium{width:240px;height:160px}
.webcam-tile.cam-large{width:360px;height:240px}
.webcam-tile-head{
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:3;
  min-height:30px;
  padding:5px 7px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  background:linear-gradient(180deg,#000c,#0003);
  border:0;
}
.webcam-tile-head strong{
  color:#fff;
  font-size:13px;
  text-shadow:0 1px 3px #000;
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.webcam-tile-size{display:flex;gap:3px}
.cam-size-icon{
  width:24px;
  height:22px;
  padding:0;
  border-radius:4px;
  background:#111b;
  border:1px solid #ffffff55;
  color:#fff;
  font-size:13px;
  line-height:1;
}
.webcam-tile-video{
  position:absolute;
  inset:0;
  min-height:0;
  background:#000;
}
.webcam-tile-video video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
  transform:scaleX(-1);
}
.webcam-tile.running{border-color:#a85b24}

@media(max-width:700px){
  .webcam-strip.active{min-height:145px}
  .webcam-tile{resize:none}
  .webcam-tile.cam-small{width:150px;height:100px}
  .webcam-tile.cam-medium{width:210px;height:140px}
  .webcam-tile.cam-large{width:300px;height:200px}
}

/* Update 098: Schreibzeile immer kompakt halten */
.sendbar{
  min-height:64px;
  height:64px;
  max-height:64px;
  align-items:center;
  align-self:end;
  padding:9px 12px;
}
.sendbar input,
.sendbar select,
.sendbar button{
  height:44px;
  min-height:44px;
  max-height:44px;
  margin:0;
}
.sendbar input{
  line-height:20px;
}

@media(max-width:850px){
  .sendbar{
    height:auto;
    max-height:none;
    min-height:0;
  }
  .sendbar input,
  .sendbar select,
  .sendbar button{
    height:44px;
    min-height:44px;
    max-height:44px;
  }
}

/* Update 099: ein einziger Webcam-Button mit aufklappbarem Steuerfeld */
.webcam-control-wrap{position:relative;display:inline-block}
.webcam-control-panel[hidden]{display:none!important}
.webcam-control-panel{
  position:absolute;
  left:0;
  bottom:calc(100% + 10px);
  z-index:5000;
  width:min(430px,88vw);
  padding:14px;
  background:#141b23;
  border:1px solid #3a4858;
  border-radius:14px;
  box-shadow:0 18px 45px #000b;
}
.webcam-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.webcam-panel-head strong{font-size:17px;color:#f1a94d}
.webcam-panel-close{width:30px;height:30px;padding:0;border-radius:50%;background:#293544;border:1px solid #425267;color:#fff;font-size:20px;line-height:1}
.webcam-control-panel label{display:block;margin:10px 0;color:#b9c5d0;font-weight:700}
.webcam-control-panel select{width:100%;height:42px;margin-top:5px;padding:0 10px;border:1px solid #3a495a;border-radius:9px;background:#0d141b;color:#fff}
.webcam-panel-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.webcam-panel-actions .webcam-control{width:100%;margin:0}
.webcam-panel-status{margin-top:10px;padding:9px 10px;border-radius:9px;background:#0c131a;color:#aebbc7;font-size:13px}
.webcam-panel-status.error{background:#34191d;color:#ffc0c7;border:1px solid #6f3139}
#openWebcamPanel[aria-expanded="true"]{background:#354657;border-color:#52677d}

@media(max-width:600px){
  .webcam-control-panel{position:fixed;left:10px;right:10px;bottom:10px;width:auto;max-height:75vh;overflow:auto}
  .webcam-panel-actions{grid-template-columns:1fr}
}

/* Update 100: Bei nur einem Raum keine unnötige Raumspalte anzeigen */
.chat-layout.single-room{grid-template-columns:minmax(0,1fr) 230px}
.danger-button{background:#8e3038;color:#fff}
.danger-button:hover{background:#aa3943}
@media(max-width:850px){.chat-layout.single-room{grid-template-columns:1fr}}

/* Update 101: Empfänger-Auswahl / „An alle“ entfernt */
.sendbar{grid-template-columns:minmax(0,1fr) auto}
@media(max-width:850px){.sendbar{grid-template-columns:minmax(0,1fr) auto}}

/* Update 102: Mehrbenutzer-Webcams */
.local-webcam-tile:not(.running){display:none}
.remote-webcam-tile .webcam-tile-video video{transform:none}
.webcam-strip.active:empty{display:none}

/* Update 103: Webcam-Symbol an Online-Namen + kurze Startmeldung */
.online-user{display:flex;align-items:center;justify-content:space-between;gap:8px}
.online-user-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.online-cam-button{flex:0 0 auto;width:34px;height:30px;padding:0;border-radius:8px;border:1px solid #405267;background:#18222d;color:#fff;cursor:pointer;font-size:17px;line-height:1}
.online-cam-button:hover{background:#2b3a49}
.online-cam-button.viewing{border-color:#f1a94d;box-shadow:0 0 0 2px #f1a94d33;background:#31291f}
.online-cam-button.own{opacity:.72;cursor:default}
.cam-start-notice{margin:8px 10px;padding:10px 14px;border:1px solid #3b5268;border-radius:10px;background:#17232e;color:#dce9f5;font-weight:700;animation:camNoticeIn .22s ease-out}
.cam-start-notice.leaving{opacity:0;transform:translateY(-4px);transition:opacity .35s ease,transform .35s ease}
@keyframes camNoticeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Update 106: feste untere Bedienung – Buttons über Eingabefeld, immer sichtbar */
.chat-main{
  height:100%;
  min-height:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) 56px 64px;
}
.messages{
  min-height:0;
  overflow:auto;
}
.user-settings-launcher{
  min-height:56px;
  height:56px;
  max-height:56px;
  display:flex;
  align-items:center;
  padding:7px 12px;
  border-top:1px solid #28313d;
  background:#111820;
  overflow:visible;
  z-index:20;
}
.user-bottom-actions{
  width:100%;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:9px;
}
.settings-gear-button,
.webcam-button{
  height:40px;
  min-height:40px;
  white-space:nowrap;
}
.settings-gear-info{display:none!important}
.sendbar{
  min-height:64px!important;
  height:64px!important;
  max-height:64px!important;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px;
  align-items:center;
  padding:9px 12px;
  background:#171d25;
  border-top:1px solid #28313d;
  overflow:hidden;
}
.sendbar input,
.sendbar button{
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  margin:0!important;
}
.webcam-strip.active{
  min-height:130px;
  max-height:36vh;
  overflow-x:auto;
  overflow-y:auto;
}
.webcam-tile{
  max-height:calc(36vh - 20px);
}
.webcam-tile.cam-large{
  width:360px;
  height:min(240px,calc(36vh - 20px));
}

@media(max-width:850px){
  .chat-main{grid-template-rows:auto minmax(0,1fr) 56px 64px}
  .user-settings-launcher{height:56px;min-height:56px;max-height:56px;flex-direction:row;align-items:center}
  .user-bottom-actions{flex-wrap:nowrap}
  .sendbar{height:64px!important;min-height:64px!important;max-height:64px!important;grid-template-columns:minmax(0,1fr) auto!important}
}

/* Update 108: Smilie-Fenster mit Rubriken */
.smilie-control-wrap{position:relative;display:inline-block}
.smilie-button{height:40px;min-height:40px;display:inline-flex;align-items:center;gap:7px;padding:0 13px;border-radius:12px;background:#263240;color:#f4f7fa;border:1px solid #3b4a5b;font-weight:700;white-space:nowrap}
.smilie-button:hover,.smilie-button[aria-expanded="true"]{background:#354657;border-color:#52677d}
.smilie-panel[hidden]{display:none!important}
.smilie-panel{position:absolute;left:0;bottom:calc(100% + 10px);z-index:5100;width:min(520px,90vw);max-height:390px;overflow:hidden;padding:12px;background:#141b23;border:1px solid #3a4858;border-radius:14px;box-shadow:0 18px 45px #000b}
.smilie-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.smilie-panel-head strong{font-size:17px;color:#f1a94d}
.smilie-panel-close{width:36px;height:36px;padding:0;border-radius:50%;background:#c40000;border:2px solid #ff6b6b;color:#fff;font-size:28px;font-weight:900;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 0 0 2px #0006,0 0 12px #ff000066}.smilie-panel-close:hover{background:#ff0000;border-color:#fff;transform:scale(1.06)}
.smilie-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid #2d3946}
.smilie-tab{flex:0 0 auto;padding:7px 10px;border-radius:9px;background:#202b36;color:#dce5ee;border:1px solid #374758;font-size:13px}
.smilie-tab.active{background:#4b3b22;border-color:#f1a94d;color:#fff}
.smilie-grid{display:grid;grid-template-columns:repeat(7,minmax(48px,1fr));gap:7px;max-height:270px;overflow:auto;padding:2px}
.smilie-choice{height:58px;padding:4px;border-radius:10px;border:1px solid #314052;background:#0e151c;display:grid;place-items:center}
.smilie-choice:hover{border-color:#f1a94d;background:#17212a}
.smilie-choice img{max-width:48px;max-height:48px;object-fit:contain;display:block}
.smilie-empty{color:#9eabb9;margin:8px 2px}
.chat-smilie{display:inline-block;max-width:64px;max-height:64px;width:auto;height:auto;vertical-align:middle;margin:0 2px;object-fit:contain}

/* Admin Smilies */
.smilie-admin-grid{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:12px}
.smilie-admin-card{background:#111820;border:1px solid #334050;border-radius:12px;padding:12px}
.smilie-admin-preview{height:95px;border-radius:9px;background:#0b1117;display:grid;place-items:center;overflow:hidden;margin-bottom:9px}
.smilie-admin-preview img{max-width:82px;max-height:82px;object-fit:contain}
.smilie-admin-card strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smilie-admin-meta{font-size:12px;color:#96a4b2;margin:4px 0 10px}
.category-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.category-chip{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #334050;border-radius:999px;background:#111820}
.category-chip.inactive{opacity:.55}
.admin-upload-row{display:grid;grid-template-columns:1fr 1fr 1.2fr auto;gap:10px;align-items:end}
.admin-upload-row label{display:block;color:#b8c3cf}
.admin-upload-row input,.admin-upload-row select{width:100%;margin-top:5px}

@media(max-width:850px){
  .user-bottom-actions{gap:6px}
  .settings-gear-button,.smilie-button,.webcam-button{padding-left:10px;padding-right:10px}
  .smilie-panel{position:fixed;left:10px;right:10px;bottom:76px;width:auto;max-height:55vh}
  .smilie-grid{grid-template-columns:repeat(5,minmax(44px,1fr))}
  .smilie-admin-grid{grid-template-columns:repeat(3,minmax(130px,1fr))}
  .admin-upload-row{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .settings-gear-button span:last-child,.smilie-button span:last-child,.webcam-button span:last-child{display:none}
  .smilie-grid{grid-template-columns:repeat(4,minmax(44px,1fr))}
  .smilie-admin-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}
  .admin-upload-row{grid-template-columns:1fr}
}

/* Update 109: Untere Bedienung und Schreibfeld dürfen nie aus dem sichtbaren Chat rutschen */
.chat-layout{
  min-height:0;
  overflow:hidden;
}
.chat-main{
  min-width:0;
  min-height:0;
  height:100%;
  max-height:100%;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) 56px 64px!important;
}
.webcam-strip{
  min-width:0;
  max-height:36vh;
}
.messages{
  min-height:0!important;
  height:auto!important;
  overflow-y:auto!important;
  overflow-x:hidden;
}
.user-settings-launcher{
  position:relative;
  z-index:40;
  flex:0 0 56px;
  min-height:56px!important;
  height:56px!important;
  max-height:56px!important;
  overflow:visible!important;
}
.user-bottom-actions{
  min-width:0;
  height:40px;
  flex-wrap:nowrap!important;
}
.sendbar{
  position:relative;
  z-index:35;
  flex:0 0 64px;
  min-height:64px!important;
  height:64px!important;
  max-height:64px!important;
  overflow:visible!important;
  align-self:stretch!important;
}
.sendbar input{
  display:block!important;
  min-width:0;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
}
.sendbar button{
  display:block!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
}

@media(max-width:850px){
  .chat-layout{height:calc(100dvh - 58px);min-height:0;overflow:hidden}
  .chat-main{height:100%;min-height:0;grid-template-rows:auto minmax(0,1fr) 56px 64px!important}
  .user-bottom-actions{overflow-x:auto;overflow-y:visible;scrollbar-width:thin}
}

/* Update 110: robuster Aufbau – Eingabefeld und Buttons immer sichtbar */
.chat-layout{
  height:calc(100vh - 58px)!important;
  min-height:0!important;
  overflow:hidden!important;
}
.chat-main{
  position:relative;
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
}
.webcam-strip{
  flex:0 0 auto!important;
  width:100%;
  min-height:0;
  max-height:36vh!important;
}
.messages{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
.user-settings-launcher{
  flex:0 0 56px!important;
  width:100%;
  min-height:56px!important;
  height:56px!important;
  max-height:56px!important;
  position:relative!important;
  z-index:40;
  overflow:visible!important;
}
.sendbar{
  flex:0 0 64px!important;
  width:100%!important;
  min-height:64px!important;
  height:64px!important;
  max-height:64px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;
  padding:9px 12px!important;
  margin:0!important;
  position:relative!important;
  z-index:50;
  visibility:visible!important;
  opacity:1!important;
}
.sendbar #message{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  margin:0!important;
  padding:10px 12px!important;
}
.sendbar button{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  margin:0!important;
}

@media(max-width:850px){
  .chat-layout{height:calc(100dvh - 58px)!important;min-height:0!important}
  .chat-main{display:flex!important;height:100%!important;min-height:0!important}
  .user-settings-launcher{flex:0 0 56px!important}
  .sendbar{flex:0 0 64px!important;grid-template-columns:minmax(0,1fr) auto!important}
}

/* Update 111: Smilie-Groessen wie im alten shared-emoji Panel */
/* Smilies in Chatnachrichten deutlich besser lesbar */
.chat-smilie{
  display:inline-block!important;
  width:auto!important;
  height:auto!important;
  max-width:120px!important;
  max-height:90px!important;
  vertical-align:middle!important;
  margin:2px 4px!important;
  object-fit:contain!important;
}

/* Auswahlfenster groesser und luftiger */
.smilie-panel{
  width:min(650px,94vw)!important;
  max-height:500px!important;
  overflow:visible!important;
}
.smilie-grid{
  grid-template-columns:repeat(6,minmax(80px,1fr))!important;
  gap:9px!important;
  max-height:355px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:12px 8px 18px!important;
}
.smilie-choice{
  position:relative!important;
  height:86px!important;
  min-width:80px!important;
  padding:7px!important;
  border-radius:10px!important;
  overflow:visible!important;
  z-index:1;
}
.smilie-choice:hover{
  z-index:30!important;
}
.smilie-choice img{
  width:52px!important;
  height:52px!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  display:block!important;
  transition:width .16s ease,height .16s ease,transform .16s ease!important;
  transform-origin:center center!important;
}
.smilie-choice:hover img{
  width:100px!important;
  height:100px!important;
  transform:translateY(-14px)!important;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.7));
}

@media(max-width:700px){
  .smilie-panel{width:auto!important;left:8px!important;right:8px!important;max-height:62vh!important}
  .smilie-grid{grid-template-columns:repeat(4,minmax(68px,1fr))!important;max-height:42vh!important}
  .smilie-choice{height:78px!important;min-width:68px!important}
  .smilie-choice img{width:48px!important;height:48px!important}
  .smilie-choice:hover img{width:82px!important;height:82px!important;transform:translateY(-8px)!important}
  .chat-smilie{max-height:78px!important;max-width:105px!important}
}

/* Update 112: komplette Shared-Emoji-Auswahl */
.smilie-panel{width:min(720px,94vw)!important;max-height:78vh!important;background:#050505!important;border:2px solid #a92828!important}
.smilie-tabs{display:grid!important;grid-template-columns:repeat(6,minmax(82px,1fr));gap:7px!important;max-height:145px;overflow:auto;padding:2px 2px 8px}
.smilie-tab{min-height:38px!important;padding:7px 8px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smilie-grid{grid-template-columns:repeat(7,minmax(78px,1fr))!important;gap:8px!important;max-height:430px!important;padding:12px 6px 28px!important;overflow:auto!important}
.smilie-choice.shared-smilie-choice{height:88px!important;min-width:78px!important;position:relative!important;overflow:visible!important;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-items:center!important;padding:5px!important;background:#151515!important;border:1px solid #8b2424!important}
.smilie-choice.shared-smilie-choice img{position:absolute!important;top:5px!important;left:50%!important;transform:translateX(-50%)!important;width:50px!important;height:50px!important;max-width:50px!important;max-height:50px!important;object-fit:contain!important;transition:width .18s ease,height .18s ease,top .18s ease,transform .18s ease!important;z-index:5!important}
.smilie-choice.shared-smilie-choice:hover{background:#242424!important;border-color:#ff3b3b!important;z-index:30!important}
.smilie-choice.shared-smilie-choice:hover img{width:100px!important;height:100px!important;max-width:100px!important;max-height:100px!important;top:-28px!important;transform:translateX(-50%)!important;filter:drop-shadow(0 5px 8px #000)!important}
.shared-smilie-name{display:block;width:100%;font-size:10px;color:#c8c8c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;line-height:14px;z-index:2}
.chat-smilie.shared-chat-smilie{height:64px!important;width:auto!important;max-width:180px!important;vertical-align:middle!important;object-fit:contain!important}
@media(max-width:850px){
 .smilie-tabs{grid-template-columns:repeat(3,minmax(78px,1fr))!important;max-height:155px}
 .smilie-grid{grid-template-columns:repeat(4,minmax(68px,1fr))!important;max-height:42vh!important}
 .smilie-choice.shared-smilie-choice{height:82px!important;min-width:68px!important}
 .smilie-choice.shared-smilie-choice img{width:48px!important;height:48px!important;max-width:48px!important;max-height:48px!important}
 .smilie-choice.shared-smilie-choice:hover img{width:82px!important;height:82px!important;max-width:82px!important;max-height:82px!important;top:-16px!important}
 .chat-smilie.shared-chat-smilie{height:54px!important;max-width:150px!important}
}

/* Update 113: Rubriken-Filter muss hidden auch gegen display:...!important durchsetzen */
.smilie-grid .smilie-choice[hidden]{display:none!important}

/* Update 115: native Würfel- und Zeichenfunktionen */
.tool-button{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:#263240;color:#f4f7fa;border:1px solid #3b4a5b;font-weight:700;cursor:pointer}
.tool-button:hover{background:#334252}.dice-control-wrap,.draw-control-wrap{position:relative}
.mini-tool-panel{position:absolute;left:0;bottom:calc(100% + 8px);z-index:1300;min-width:255px;background:#151b22;border:1px solid #3a4858;border-radius:14px;box-shadow:0 18px 45px #000a;padding:12px}
.mini-tool-panel[hidden]{display:none!important}.mini-tool-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.mini-tool-close{width:32px;height:32px;padding:0;border-radius:50%;font-size:20px;background:#2a3542;color:white}.mini-tool-panel p{margin:6px 0 10px;color:#aeb9c5}
.dice-count-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.dice-count{height:38px;padding:0;border-radius:8px;background:#f2f2f2;color:#111;border:1px solid #bbb;font-weight:900;font-size:17px}.dice-count:hover{transform:translateY(-1px)}
.draw-modal{position:fixed;inset:0;z-index:14000;background:#000b;display:flex;align-items:center;justify-content:center;padding:18px}.draw-modal[hidden]{display:none!important}.draw-dialog{width:min(760px,96vw);max-height:94vh;overflow:auto;background:#151b22;border:1px solid #475768;border-radius:18px;box-shadow:0 30px 90px #000d;padding:14px}.draw-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.draw-head h2{margin:0;font-size:24px}.draw-close{width:40px;height:40px;padding:0;border-radius:50%;font-size:28px;line-height:1;background:#2a3542;color:#fff}.draw-canvas-wrap{margin-top:12px;background:#08120f;border:1px solid #35483f;border-radius:12px;overflow:hidden}.draw-canvas-wrap canvas{display:block;width:100%;height:auto;max-height:58vh;touch-action:none;cursor:crosshair;background:#08251f}.draw-tools{padding-top:12px}.draw-colors{display:flex;flex-wrap:wrap;gap:8px}.draw-color{width:34px;height:34px;padding:0;border-radius:50%;background:var(--draw-color);border:2px solid #66727f}.draw-color.selected{outline:3px solid #f1a94d;outline-offset:2px}.brush-size{display:flex;align-items:center;gap:10px;margin:12px 0;color:#c7d1db}.brush-size input{flex:1}.draw-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.draw-actions button{padding:10px 14px}.draw-actions .primary{background:#2f7d4f}.draw-status{min-height:22px;margin-top:8px;color:#aeb9c5;text-align:right}.chat-drawing{display:block;max-width:min(520px,92%);max-height:300px;width:auto;height:auto;margin-top:8px;border-radius:10px;border:1px solid #394958;background:#08251f;cursor:zoom-in}.chat-drawing.expanded{max-width:100%;max-height:none;cursor:zoom-out}
@media(max-width:700px){.dice-count-buttons{grid-template-columns:repeat(3,1fr)}.mini-tool-panel{left:50%;transform:translateX(-50%)}.draw-dialog{padding:10px}.draw-actions{justify-content:stretch}.draw-actions button{flex:1}.chat-drawing{max-width:100%}}

/* Update 116: kompakte Fill-Auswahl + feste Schriftgrößen 100/150/200 % */
.font-percent-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 12px}
.font-percent-btn{min-width:92px;padding:11px 16px;border:2px solid #314052;border-radius:11px;background:#171f28;color:#eef2f7;font-weight:800;font-size:16px}
.font-percent-btn:hover{background:#23303d}
.font-percent-btn.selected{border-color:#f1a94d;box-shadow:0 0 0 2px #f1a94d44;color:#ffd08b}
.user-fill-picker{grid-template-columns:repeat(4,minmax(115px,1fr));gap:10px}
.user-fill-option{min-height:108px;padding:7px;gap:5px}
.user-fill-thumb{height:42px;border-radius:7px}
.user-fill-text{font-size:17px!important;line-height:1.05;min-height:20px}
.user-fill-option strong{font-size:12px}
@media(max-width:900px){.user-fill-picker{grid-template-columns:repeat(4,minmax(95px,1fr))}}
@media(max-width:650px){.user-fill-picker{grid-template-columns:repeat(2,minmax(105px,1fr))}.font-percent-btn{flex:1;min-width:78px}}
\n\n/* Update 117: harter Fix fuer kompakte Fill-Vorschauen und Prozentbuttons */\n#userSettingsModal .user-fill-picker{\n  display:grid!important;\n  grid-template-columns:repeat(4,96px)!important;\n  gap:9px!important;\n  justify-content:start!important;\n}\n#userSettingsModal .user-fill-option{\n  width:96px!important;\n  min-width:96px!important;\n  max-width:96px!important;\n  min-height:88px!important;\n  height:88px!important;\n  padding:5px!important;\n  gap:3px!important;\n  overflow:hidden!important;\n}\n#userSettingsModal .user-fill-thumb{\n  display:block!important;\n  width:84px!important;\n  min-width:84px!important;\n  max-width:84px!important;\n  height:34px!important;\n  min-height:34px!important;\n  max-height:34px!important;\n  overflow:hidden!important;\n  border-radius:6px!important;\n}\n#userSettingsModal .user-fill-thumb img{\n  display:block!important;\n  width:84px!important;\n  min-width:84px!important;\n  max-width:84px!important;\n  height:34px!important;\n  min-height:34px!important;\n  max-height:34px!important;\n  object-fit:cover!important;\n  transform:none!important;\n}\n#userSettingsModal .user-fill-text{\n  display:block!important;\n  width:84px!important;\n  min-height:18px!important;\n  max-height:20px!important;\n  font-size:15px!important;\n  line-height:18px!important;\n  overflow:hidden!important;\n  white-space:nowrap!important;\n}\n#userSettingsModal .user-fill-option strong{\n  display:block!important;\n  width:84px!important;\n  font-size:10px!important;\n  line-height:12px!important;\n  overflow:hidden!important;\n  text-overflow:ellipsis!important;\n  white-space:nowrap!important;\n}\n#userSettingsModal .font-percent-buttons{display:flex!important;gap:8px!important;flex-wrap:wrap!important}\n#userSettingsModal .font-percent-btn{cursor:pointer!important;pointer-events:auto!important;position:relative!important;z-index:2!important}\n@media(max-width:600px){\n  #userSettingsModal .user-fill-picker{grid-template-columns:repeat(3,86px)!important}\n  #userSettingsModal .user-fill-option{width:86px!important;min-width:86px!important;max-width:86px!important}\n  #userSettingsModal .user-fill-thumb,#userSettingsModal .user-fill-thumb img,#userSettingsModal .user-fill-text,#userSettingsModal .user-fill-option strong{width:74px!important;min-width:74px!important;max-width:74px!important}\n}\n
/* Update 118: extrem kompakte Fill-Auswahl */
#userSettingsModal .user-fill-picker{
  display:grid!important;
  grid-template-columns:repeat(auto-fill, minmax(72px, 82px))!important;
  gap:7px!important;
  justify-content:start!important;
}
#userSettingsModal .user-fill-option{
  width:82px!important;
  min-width:82px!important;
  max-width:82px!important;
  height:54px!important;
  min-height:54px!important;
  max-height:54px!important;
  padding:4px!important;
  gap:2px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
}
#userSettingsModal .user-fill-mini-label{
  display:block!important;
  width:100%!important;
  height:12px!important;
  line-height:12px!important;
  font-size:9px!important;
  font-weight:600!important;
  color:#aeb8c3!important;
  text-align:center!important;
  margin:0!important;
  padding:0!important;
}
#userSettingsModal .user-fill-thumb{
  display:block!important;
  width:50%!important;
  min-width:0!important;
  max-width:50%!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  margin:2px auto 0!important;
  border-radius:4px!important;
  overflow:hidden!important;
}
#userSettingsModal .user-fill-thumb img{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  object-fit:cover!important;
  transform:none!important;
}
#userSettingsModal .user-fill-text{display:none!important}
#userSettingsModal .user-fill-hidden-name{display:none!important}
@media(max-width:600px){
  #userSettingsModal .user-fill-picker{grid-template-columns:repeat(auto-fill,72px)!important}
  #userSettingsModal .user-fill-option{width:72px!important;min-width:72px!important;max-width:72px!important}
}

/* Update 119: alle 8 Fill-Slots in einer Reihe */
#userSettingsModal .user-fill-picker{
  display:grid!important;
  grid-template-columns:repeat(8,72px)!important;
  gap:6px!important;
  justify-content:start!important;
  align-items:start!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding-bottom:4px!important;
}
#userSettingsModal .user-fill-option{
  width:72px!important;
  min-width:72px!important;
  max-width:72px!important;
  height:66px!important;
  min-height:66px!important;
  padding:4px!important;
}
#userSettingsModal .user-fill-mini-label{
  display:block!important;
  font-size:9px!important;
  line-height:10px!important;
  margin-bottom:2px!important;
  text-align:center!important;
}
#userSettingsModal .user-fill-thumb{
  width:50%!important;
  min-width:50%!important;
  max-width:50%!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  margin:0 auto!important;
}
#userSettingsModal .user-fill-thumb img{
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  object-fit:cover!important;
}
@media(max-width:700px){
  #userSettingsModal .user-fill-picker{grid-template-columns:repeat(8,68px)!important}
  #userSettingsModal .user-fill-option{width:68px!important;min-width:68px!important;max-width:68px!important}
}

/* Update 120: persoenliche Chat-Anzeige 100 / 150 / 200 % */
:root{--user-chat-scale:1}
.chat-display-card{background:#10161d;border:2px solid #314052;border-radius:14px;padding:14px}
.chat-display-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chat-display-btn{min-width:82px;padding:10px 14px;border:2px solid #314052;border-radius:10px;background:#171f28;color:#eef2f7;font-weight:800;font-size:15px;cursor:pointer}
.chat-display-btn:hover{background:#23303d}
.chat-display-btn.selected{border-color:#f1a94d;box-shadow:0 0 0 2px #f1a94d44;color:#ffd08b}
.chat-display-hint{margin-top:9px;color:#8f9dab;font-size:12px}
#messages .msg-username{font-size:calc(var(--chat-username-size,18px) * var(--user-chat-scale))}
/* Uhrzeit bleibt immer in der Admin-Grundgröße und wird nicht mit der User-Anzeige skaliert */
#messages .msg-time{font-size:var(--chat-time-size,12px)!important}
#messages .whisper-tag{font-size:calc(12px * var(--user-chat-scale))}
#messages .chat-smilie.shared-chat-smilie{height:calc(54px * var(--user-chat-scale))!important;max-width:calc(150px * var(--user-chat-scale))!important}
@media(max-width:650px){.chat-display-btn{flex:1;min-width:72px}}

/* Update 123: Fill-Vorschauen im Admin so kompakt wie im User-Dialog */
.admin-main .user-fill-admin-grid{
  display:grid!important;
  grid-template-columns:repeat(8,88px)!important;
  gap:8px!important;
  justify-content:start!important;
  align-items:start!important;
  overflow-x:auto!important;
  padding-bottom:6px!important;
}
.admin-main .user-fill-admin-card{
  width:88px!important;
  min-width:88px!important;
  max-width:88px!important;
  padding:6px!important;
  border-radius:9px!important;
}
.admin-main .fill-card-number{
  font-size:10px!important;
  line-height:12px!important;
  margin:0 0 4px!important;
  text-align:center!important;
}
.admin-main .fill-image-preview{
  width:50%!important;
  min-width:50%!important;
  max-width:50%!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  margin:0 auto 5px!important;
  border-radius:4px!important;
}
.admin-main .fill-image-preview img{
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  object-fit:cover!important;
}
.admin-main .user-fill-admin-card label{
  font-size:10px!important;
  margin-top:4px!important;
}
.admin-main .user-fill-admin-card input[type=text],
.admin-main .user-fill-admin-card input:not([type]){
  padding:5px!important;
  font-size:10px!important;
}
.admin-main .user-fill-admin-card input[type=file]{
  width:100%!important;
  padding:3px!important;
  font-size:9px!important;
}
.admin-main .remove-fill{
  font-size:9px!important;
  line-height:1.1!important;
}
@media(max-width:900px){
  .admin-main .user-fill-admin-grid{grid-template-columns:repeat(8,82px)!important}
  .admin-main .user-fill-admin-card{width:82px!important;min-width:82px!important;max-width:82px!important}
}

/* Update 124: optionaler Chat-Banner oben links */
.chat-banner-wrap{display:flex;align-items:center;min-width:0;max-width:min(520px,45vw);height:56px;overflow:hidden}
.chat-banner{display:block;max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain;object-position:left center}
.banner-admin-row{display:grid;grid-template-columns:minmax(220px,420px) minmax(260px,1fr);gap:18px;align-items:start}
.banner-admin-preview{height:100px;border:1px solid #334050;border-radius:10px;background:#0b1117;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;padding:8px;color:#798899}
.banner-admin-preview img{display:block;max-width:100%;max-height:84px;width:auto;height:auto;object-fit:contain}
.banner-admin-controls label{display:block;margin-bottom:12px;color:#b8c3cf;font-weight:600}
.banner-admin-controls input[type=file]{display:block;width:100%;margin-top:7px;padding:9px;border-radius:9px;border:1px solid #39485a;background:#0e141b;color:#fff}
@media(max-width:800px){.banner-admin-row{grid-template-columns:1fr}.chat-banner-wrap{max-width:42vw;height:46px}.chat-banner{max-height:46px}}

/* Update 125: Avatare im Chat + Upload im Userpanel/Admin */
.msg-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.msg-avatar{width:50px;height:50px;border-radius:999px;object-fit:cover;flex:0 0 50px;border:2px solid rgba(255,255,255,.16);background:#0c1219;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.msg-time{margin-left:auto!important;position:static!important;float:none!important;flex:0 0 auto!important}

.avatar-settings-card{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:#10161d;border:2px solid #314052;border-radius:14px;padding:14px}
.avatar-preview-wrap{width:84px;height:84px;display:flex;align-items:center;justify-content:center}
.settings-avatar-preview,.settings-avatar-placeholder{width:78px;height:78px;border-radius:999px;border:2px solid #3b4a5b;background:#0b1117;object-fit:cover;display:flex;align-items:center;justify-content:center;text-align:center;color:#d5dde5;font-size:12px;padding:6px}
.avatar-settings-actions{display:flex;flex-direction:column;gap:10px;min-width:220px;flex:1}
.avatar-upload-label{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:10px;background:#263240;color:#f4f7fa;border:1px solid #3b4a5b;font-weight:700;cursor:pointer;width:max-content}
.avatar-upload-label input[type=file]{display:none}
.avatar-remove-button{padding:10px 14px;border-radius:10px;border:1px solid #6d3d49;background:#3a1820;color:#ffe4ea;font-weight:700;width:max-content}
.avatar-upload-status{min-height:20px;color:#9fb0c0;font-size:14px}

.avatar-admin-preview img{max-width:120px;max-height:120px;width:120px;height:120px;object-fit:cover;border-radius:999px;border:2px solid #3b4a5b;background:#0b1117}

@media(max-width:700px){
  .msg-avatar{width:50px;height:50px;flex-basis:50px}
  .avatar-settings-card{align-items:flex-start}
}

/* Update 127: Rollenfarben / OnAir */
.role-color-grid input[type=color]{height:46px;padding:4px;cursor:pointer}
.login-page{min-height:100vh;margin:0;background:radial-gradient(circle at top,#202b37 0,#10161d 46%,#0a0f14 100%);color:#eef3f8;display:grid;place-items:center;padding:28px;font-family:Arial,Helvetica,sans-serif}
.login-shell{width:min(980px,96vw);display:grid;grid-template-columns:minmax(280px,.9fr) minmax(360px,1.1fr);background:#111820;border:1px solid #334252;border-radius:24px;overflow:hidden;box-shadow:0 30px 90px #000b}
.login-hero{padding:46px 38px;background:linear-gradient(145deg,#202c39,#141b23);display:flex;flex-direction:column;justify-content:center;min-height:520px}
.login-logo-mark{width:86px;height:86px;border-radius:24px;display:grid;place-items:center;background:#f1a94d;color:#17110a;font-weight:900;font-size:28px;box-shadow:0 12px 30px #0007;margin-bottom:24px}
.login-hero h1{font-size:38px;line-height:1.05;margin:0 0 14px;color:#fff}
.login-hero p{font-size:18px;line-height:1.55;color:#b9c5d0;margin:0 0 24px}
.login-feature-line{display:flex;gap:9px;flex-wrap:wrap}.login-feature-line span{background:#0e141b;border:1px solid #344253;border-radius:999px;padding:8px 11px;color:#d9e1e9;font-size:13px}
.login-panel{padding:28px 32px 24px;background:#151c24}
.login-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:7px;background:#0f151c;padding:6px;border-radius:13px;margin-bottom:24px}.login-tabs a{padding:11px 10px;text-align:center;border-radius:9px;color:#aeb9c5;font-weight:700;text-decoration:none}.login-tabs a.active{background:#293746;color:#fff;box-shadow:inset 0 0 0 1px #40536a}.login-tabs a:hover{color:#fff}
.login-form h2{font-size:28px;margin:8px 0 18px}.login-form label{display:block;color:#c7d0d9;font-weight:700;margin:14px 0}.login-form input{display:block;width:100%;box-sizing:border-box;margin-top:7px;padding:13px 14px;background:#0d1319;border:1px solid #3a495b;border-radius:11px;color:#fff;font-size:16px;outline:none}.login-form input:focus{border-color:#f1a94d;box-shadow:0 0 0 3px #f1a94d22}.login-main-button{width:100%;margin-top:8px;padding:13px 16px;border-radius:11px;background:#d9953f;color:#17110a;border:0;font-size:17px;font-weight:900;cursor:pointer}.login-main-button:hover{filter:brightness(1.08)}
.login-hint,.login-footer-note{color:#9eabb8;line-height:1.5}.login-footer-note{font-size:12px;margin:20px 0 0;text-align:center}.login-message{padding:11px 13px;border-radius:10px;margin:0 0 16px}.login-message.error{background:#421d24;border:1px solid #85404d;color:#ffdce1}
@media(max-width:760px){.login-page{padding:14px}.login-shell{grid-template-columns:1fr}.login-hero{min-height:auto;padding:28px}.login-logo-mark{width:66px;height:66px;border-radius:18px;font-size:22px;margin-bottom:16px}.login-hero h1{font-size:30px}.login-panel{padding:22px 18px}.login-tabs{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr}.login-tabs a{padding:9px}.login-form h2{font-size:24px}}

/* Update 131: Admin-Einstellungen in übersichtlichen Reitern */
.admin-settings-tabs{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin:0 0 18px;
  padding:8px;
  border:1px solid #2d3947;
  border-radius:14px;
  background:#111820;
  position:sticky;
  top:0;
  z-index:20;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.admin-settings-tab{
  appearance:none;
  border:1px solid #354557;
  background:#18212b;
  color:#c7d1dc;
  padding:10px 13px;
  border-radius:10px;
  font-weight:800;
  font-size:14px;
  line-height:1.15;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}
.admin-settings-tab:hover{background:#22303d;color:#fff}
.admin-settings-tab.active{
  background:#d9953f;
  color:#17110a;
  border-color:#f1b867;
  box-shadow:0 0 0 2px rgba(241,169,77,.15);
}
.admin-setting-panel[hidden]{display:none!important}
.admin-setting-panel{animation:adminTabIn .16s ease-out}
@keyframes adminTabIn{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none}}

/* Der Speichern-Button bleibt bei allen Reitern erreichbar. */
#chatSettingsForm .settings-actions{
  position:sticky;
  bottom:0;
  z-index:18;
  margin-top:10px;
  padding:14px 0 4px;
  background:linear-gradient(transparent,#0e1319 34%);
}

@media(max-width:760px){
  .admin-settings-tabs{flex-wrap:nowrap;overflow-x:auto;top:0;padding:7px}
  .admin-settings-tab{flex:0 0 auto;font-size:13px;padding:9px 11px}
}

/* Update 134: Rollenfarben im Admin deutlich sichtbar */
.role-colors-panel{border:1px solid #3c4c5f;background:#151d26}
.role-color-cards{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px;margin-top:16px}
.role-color-card{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 12px;border:1px solid #3b495a;border-radius:14px;background:#0f161e;color:#eef3f7;font-weight:800;text-align:center}
.role-color-card span{font-size:18px}
.role-color-card input[type=color]{display:block!important;width:86px!important;height:54px!important;min-height:54px!important;padding:3px!important;margin:0!important;border:2px solid #65768a!important;border-radius:10px!important;background:#0a1016!important;cursor:pointer}
.role-color-card small{font-weight:400;color:#9facba;line-height:1.35}
.role-color-card.onair{border-color:#9b7b28;box-shadow:0 0 0 1px rgba(255,205,62,.12) inset}
.role-color-save-note{margin:14px 0 0;padding:10px 12px;border-radius:9px;background:#0d141b;color:#cbd6df}
@media(max-width:900px){.role-color-cards{grid-template-columns:repeat(2,minmax(140px,1fr))}}
@media(max-width:520px){.role-color-cards{grid-template-columns:1fr 1fr}}

/* Update 135: Name im Chat übernimmt Text-Fill; Online-Liste zeigt Rollenfarbe */
.msg-username-fill{
  display:inline-block;
  background-size:cover;
  background-position:center;
  background-repeat:repeat;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent!important;
  -webkit-text-fill-color:transparent;
}
.online-name-colored{font-weight:700}
.online-role-colored{font-weight:700;margin-left:6px}

/* Update 136: User kann Farbe, Gradient oder Filltext wählen */
.text-style-mode-row{display:flex;gap:8px;flex-wrap:wrap}
.text-style-mode-btn{padding:10px 16px;border-radius:10px;border:1px solid #3a4a5d;background:#18212b;color:#dce5ee;font-weight:800;cursor:pointer}
.text-style-mode-btn.selected{background:#d9953f;color:#17110a;border-color:#f1b867;box-shadow:0 0 0 2px rgba(241,169,77,.16)}
.gradient-style-card{border:2px solid #314052;border-radius:14px;background:#10161d;padding:14px}
.gradient-style-card.selected{border-color:#f1a94d;box-shadow:0 0 0 2px #f1a94d44}
.gradient-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#c8d3de}
.gradient-controls label{display:flex;align-items:center;gap:8px;font-weight:700}
.gradient-controls input[type=color]{width:54px;height:38px;padding:2px;border:0;background:transparent;cursor:pointer}
.gradient-preview{margin-top:10px;font-weight:900;line-height:1.2;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}
.message-text-gradient,.msg-username-gradient{display:inline-block;background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;background-size:100% 100%;background-repeat:no-repeat}
.msg-username-gradient{font-weight:800}

/* Update 137: Namensstil getrennt vom Nachrichtentext */
.name-style-mode-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.name-style-mode-btn{padding:9px 14px;border-radius:10px;border:1px solid #3a495a;background:#151d26;color:#eef3f8;font-weight:700}
.name-style-mode-btn.selected{border-color:#f1a94d;box-shadow:0 0 0 2px #f1a94d44;background:#25303b}
.name-style-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:12px}
.name-color-card,.name-gradient-card{background:#10161d;border:2px solid #314052;border-radius:14px;padding:14px}
.name-color-card.selected,.name-gradient-card.selected{border-color:#f1a94d;box-shadow:0 0 0 2px #f1a94d44}
.name-color-card label{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#c7d0da}
.name-color-card input[type=color],.name-gradient-card input[type=color]{width:48px;height:36px;padding:1px;border:0;background:transparent;cursor:pointer}
.name-style-preview,.name-gradient-card .gradient-preview{margin-top:12px;font-size:24px;font-weight:900;line-height:1.2}
.msg-username-gradient{display:inline-block;background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;background-size:100% 100%;background-repeat:no-repeat}
@media(max-width:700px){.name-style-choice-grid{grid-template-columns:1fr}}

/* Update 178: Smilies nur im Chatverlauf wie im alten Chat gross anzeigen */
#messages .chat-smilie,
#messages .chat-smilie.shared-chat-smilie {
  height: 100px !important;
  width: auto !important;
  max-height: 100px !important;
  max-width: none !important;
  vertical-align: middle !important;
  margin: 0 5px !important;
  border-radius: 5px !important;
  border: 0 solid #444 !important;
  object-fit: contain !important;
}


/* Update 185: persönlicher Online-/Abwesenheitsstatus */
.presence-status-picker{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.presence-status-btn{border:1px solid #435267;background:#151d26;color:#e8eef6;border-radius:10px;padding:9px 12px;cursor:pointer;font-weight:700}
.presence-status-btn:hover{filter:brightness(1.12)}
.presence-status-btn.selected{outline:2px solid #f0b429;outline-offset:1px;background:#253244}
.presence-status-current{margin-top:10px;color:#aeb9c8;font-size:14px}
.online-user.presence-away{opacity:.48}
.online-user.presence-away:hover{opacity:.72}
.online-user-name{display:flex;align-items:center;gap:3px;min-width:0;flex-wrap:wrap}
.online-presence-status{flex-basis:100%;padding-left:18px;font-size:11px;line-height:1.2;color:#c0c7d1;font-style:italic;white-space:normal}

/* Update 187: Avatare in der Online-Liste */
.online-user-avatar{width:34px;height:34px;flex:0 0 34px;border-radius:50%;object-fit:cover;vertical-align:middle;border:1px solid rgba(255,255,255,.18);background:#0c1219;box-shadow:0 1px 4px rgba(0,0,0,.28)}
.online-user-name{gap:6px}
.online-presence-status{padding-left:43px}

/* Update 077: kleine Admin-Namensicons nur bei Chatnachrichten */
.msg-head{display:flex;align-items:center;gap:5px;min-width:0}.msg-head .msg-time{margin-left:auto!important;position:static!important;float:none!important;flex:0 0 auto!important}.msg-name-icon{display:inline-block;width:22px;height:22px;object-fit:contain;vertical-align:middle;flex:0 0 auto}.msg-name-icon-before,.msg-name-icon-after{pointer-events:none}

/* Update 080: kompaktes Schwarz-/Grau-Adminpanel */
.admin-body{
  background:#080808!important;
  color:#e7e7e7!important;
  font-size:14px;
}
.admin-body .admin-shell{
  grid-template-columns:205px minmax(0,1fr)!important;
  background:#080808!important;
}
.admin-body .admin-nav{
  background:#0e0e0f!important;
  border-right:1px solid #2b2b2d!important;
  padding:14px 10px!important;
}
.admin-body .admin-nav h2{
  margin:2px 8px 14px!important;
  font-size:18px!important;
  color:#f1f1f1!important;
}
.admin-body .admin-nav a{
  padding:8px 10px!important;
  margin:2px 0!important;
  border-radius:7px!important;
  color:#cfcfd2!important;
  font-size:13px!important;
  background:transparent!important;
}
.admin-body .admin-nav a:hover{
  background:#242426!important;
  color:#fff!important;
}
.admin-body .admin-main{
  max-width:1380px!important;
  padding:16px 18px 24px!important;
}
.admin-body .admin-main h1{
  margin:0 0 14px!important;
  font-size:24px!important;
  line-height:1.15!important;
  color:#f5f5f5!important;
}
.admin-body .admin-main h2{
  margin:0 0 10px!important;
  font-size:17px!important;
  line-height:1.2!important;
  color:#e8e8e8!important;
}
.admin-body .admin-main h3{
  margin:12px 0 8px!important;
  font-size:15px!important;
  color:#dedede!important;
}
.admin-body .panel,
.admin-body .stats div,
.admin-body .role-colors-panel,
.admin-body .user-fill-admin-card,
.admin-body .smilie-admin-card{
  background:#121214!important;
  border:1px solid #303033!important;
  border-radius:9px!important;
  box-shadow:none!important;
}
.admin-body .panel{
  padding:12px 14px!important;
  margin-bottom:12px!important;
}
.admin-body .stats{
  gap:8px!important;
  margin-bottom:12px!important;
}
.admin-body .stats div{padding:11px 12px!important}
.admin-body .stats b{font-size:24px!important;color:#f0f0f0!important}
.admin-body .stats span{font-size:11px!important;color:#9f9fa3!important}
.admin-body p,
.admin-body .hint,
.admin-body small{
  color:#a8a8ad!important;
}
.admin-body .hint{line-height:1.35!important}
.admin-body table{font-size:13px!important}
.admin-body th,
.admin-body td{
  padding:7px 8px!important;
  border-bottom:1px solid #2b2b2e!important;
}
.admin-body th{
  color:#d7d7da!important;
  background:#18181a!important;
}
.admin-body .settings-grid{gap:10px!important}
.admin-body .settings-grid label,
.admin-body .grid-form label{
  color:#c7c7cb!important;
  font-size:13px!important;
}
.admin-body input:not([type=checkbox]):not([type=radio]):not([type=color]),
.admin-body select,
.admin-body textarea{
  background:#09090a!important;
  color:#ededed!important;
  border:1px solid #3a3a3e!important;
  border-radius:7px!important;
  padding:8px 9px!important;
  min-height:34px!important;
  margin-top:4px!important;
  box-shadow:none!important;
}
.admin-body textarea{min-height:70px!important;resize:vertical}
.admin-body input:focus,
.admin-body select:focus,
.admin-body textarea:focus{
  outline:none!important;
  border-color:#707076!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.07)!important;
}
.admin-body button,
.admin-body .design-new-link,
.admin-body .admin-settings-tab{
  background:#252528!important;
  color:#f0f0f0!important;
  border:1px solid #444448!important;
  border-radius:7px!important;
  padding:8px 11px!important;
  font-size:13px!important;
  box-shadow:none!important;
}
.admin-body button:hover,
.admin-body .design-new-link:hover,
.admin-body .admin-settings-tab:hover{
  background:#343438!important;
  color:#fff!important;
}
.admin-body .admin-settings-tabs{
  background:#0f0f10!important;
  border:1px solid #2f2f32!important;
  border-radius:9px!important;
  padding:6px!important;
  gap:5px!important;
}
.admin-body .admin-settings-tab.active{
  background:#3a3a3e!important;
  color:#fff!important;
  border-color:#66666d!important;
}
.admin-body .settings-actions{
  padding:8px 0!important;
  background:linear-gradient(transparent,#080808 42%)!important;
}
.admin-body .settings-actions button{
  font-size:13px!important;
  padding:8px 12px!important;
}
.admin-body .check-row{
  min-height:34px!important;
  gap:7px!important;
}
.admin-body .check-row input{
  transform:scale(1.05)!important;
}
.admin-body .role-color-cards{
  gap:8px!important;
  margin-top:10px!important;
  grid-template-columns:repeat(5,minmax(120px,1fr))!important;
}
.admin-body .role-color-card{
  background:#0b0b0c!important;
  border:1px solid #343438!important;
  border-radius:8px!important;
  padding:10px 8px!important;
  gap:6px!important;
}
.admin-body .role-color-card span{font-size:14px!important}
.admin-body .role-color-card input[type=color]{
  width:64px!important;
  height:38px!important;
  min-height:38px!important;
  border-radius:7px!important;
  border:1px solid #55555a!important;
  background:#09090a!important;
}
.admin-body .role-color-card.onair{
  border-color:#55555a!important;
  box-shadow:none!important;
}
.admin-body .save-ok{
  padding:8px 10px!important;
  margin:0 0 10px!important;
  border-radius:7px!important;
  background:#17231b!important;
  border-color:#34483a!important;
  color:#d9e6dd!important;
}
.admin-body .error{
  padding:8px 10px!important;
  border-radius:7px!important;
  background:#31191b!important;
  border:1px solid #5a3034!important;
  color:#f2cfd3!important;
}
.admin-body .danger-button,
.admin-body button.danger-button{
  background:#321719!important;
  color:#f2d6d9!important;
  border-color:#63353a!important;
}
.admin-body .table-wrap{border-radius:8px!important}
@media(max-width:1100px){
  .admin-body .role-color-cards{grid-template-columns:repeat(3,minmax(120px,1fr))!important}
}
@media(max-width:850px){
  .admin-body .admin-shell{grid-template-columns:1fr!important}
  .admin-body .admin-nav{padding:7px!important;border-right:0!important;border-bottom:1px solid #2b2b2d!important}
  .admin-body .admin-nav a{padding:7px 9px!important}
  .admin-body .admin-main{padding:12px!important}
}
@media(max-width:600px){
  .admin-body .role-color-cards{grid-template-columns:repeat(2,minmax(110px,1fr))!important}
}

/* Update 081: Dashboard / Benutzer / Laufbilder konsequent kompakt schwarz-grau */
.admin-body .admin-main{max-width:1240px!important;padding:12px 14px 18px!important}
.admin-body .admin-main h1{font-size:21px!important;margin:0 0 10px!important}
.admin-body .admin-main h2{font-size:15px!important;margin:0 0 7px!important}
.admin-body .admin-main h3{font-size:14px!important;margin:9px 0 6px!important}
.admin-body .admin-main h4{font-size:13px!important;margin:6px 0!important;color:#d7d7da!important}
.admin-body .panel{padding:9px 10px!important;margin-bottom:9px!important;background:#111113!important;border-color:#29292c!important}
.admin-body .panel .panel{padding:7px 8px!important;margin:0!important;background:#0b0b0c!important;border-color:#28282b!important}
.admin-body .stats{gap:6px!important;margin-bottom:9px!important}
.admin-body .stats div{padding:8px 9px!important;border-radius:7px!important;background:#111113!important;border-color:#29292c!important}
.admin-body .stats b{font-size:20px!important;line-height:1.05!important}
.admin-body .stats span{font-size:11px!important}
.admin-body .grid-form{gap:8px!important;grid-template-columns:repeat(3,minmax(150px,1fr))!important}
.admin-body .grid-form input,
.admin-body .grid-form select{min-height:31px!important;padding:6px 8px!important}
.admin-body .grid-form button{min-height:31px!important;padding:6px 9px!important}
.admin-body table{font-size:11px!important;background:#0d0d0f!important}
.admin-body th,.admin-body td{padding:5px 6px!important}
.admin-body th{background:#151517!important;color:#d4d4d7!important;font-size:11px!important}
.admin-body .inline select{min-width:92px!important;padding:5px 6px!important;min-height:29px!important}
.admin-body .inline button{padding:5px 7px!important;font-size:11px!important;min-height:29px!important}
.admin-body .settings-grid{gap:7px!important}
.admin-body .settings-grid.two-cols{grid-template-columns:repeat(2,minmax(190px,1fr))!important}
.admin-body .settings-grid label{font-size:12px!important}
.admin-body .settings-grid input:not([type=checkbox]):not([type=color]),
.admin-body .settings-grid select{min-height:31px!important;padding:6px 8px!important}
.admin-body .check-row{min-height:30px!important;font-size:12px!important}
.admin-body .settings-actions{margin-top:6px!important;padding:6px 0!important}
.admin-body .settings-actions button{padding:6px 9px!important;font-size:12px!important}
.admin-body .current-design-image{background:#0b0b0c!important;border-color:#2d2d30!important}
.admin-body input[type=file]{font-size:11px!important}
.admin-body input[type=file]::file-selector-button{background:#232326;color:#e6e6e8;border:1px solid #3b3b3f;border-radius:5px;padding:5px 7px;margin-right:7px}
.admin-body .hint,.admin-body small{font-size:11px!important}
.admin-body .table-wrap{background:#0d0d0f!important;border:1px solid #29292c!important}

/* Laufbilder: Gruppen und Bildkarten deutlich kleiner */
.admin-body .settings-grid.two-cols > .panel{padding:8px!important}
.admin-body .settings-grid.two-cols > .panel .settings-grid.two-cols{grid-template-columns:repeat(3,minmax(130px,1fr))!important;gap:6px!important}
.admin-body .settings-grid.two-cols > .panel .panel img{max-width:120px!important;max-height:60px!important;padding:3px!important}
.admin-body .settings-grid.two-cols > .panel .panel label{font-size:11px!important}

@media(max-width:900px){
  .admin-body .grid-form{grid-template-columns:1fr 1fr!important}
  .admin-body .settings-grid.two-cols > .panel .settings-grid.two-cols{grid-template-columns:repeat(2,minmax(120px,1fr))!important}
}
@media(max-width:600px){
  .admin-body .grid-form,.admin-body .settings-grid.two-cols{grid-template-columns:1fr!important}
  .admin-body .settings-grid.two-cols > .panel .settings-grid.two-cols{grid-template-columns:1fr 1fr!important}
}

/* Update 086: Chat-Bildupload – transparent, ohne das kompakte Admin-Design zu verändern */
.upload-control-wrap{position:relative;display:inline-block}
.chat-upload-image{display:block;max-width:min(260px,100%);max-height:220px;width:auto;height:auto;object-fit:contain;margin-top:8px;border-radius:12px;border:0;background:transparent;padding:0;cursor:pointer;box-shadow:none}
.chat-upload-image.expanded{max-width:min(520px,96%);max-height:none}
.chat-upload-image.chat-upload-gif{max-width:min(140px,100%);max-height:140px}
.chat-upload-image.chat-upload-gif.expanded{max-width:min(220px,96%);max-height:220px}
@media(max-width:700px){.chat-upload-image{max-width:100%;max-height:180px}.chat-upload-image.expanded{max-width:100%}}


/* Update 226: Wilde Spielereien – kompaktes Extras-Fenster */
.wild-control-wrap{position:relative;display:inline-block}
.wild-panel[hidden]{display:none!important}
.wild-panel{position:absolute;left:0;bottom:calc(100% + 8px);z-index:5200;width:min(460px,90vw);background:#080808;border:1px solid #404040;border-radius:12px;box-shadow:0 16px 38px #000b;padding:10px;color:#eee}
.wild-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.wild-panel-head strong{font-size:15px;color:#f1f1f1}
.wild-tabs{display:grid;grid-template-columns:repeat(4,minmax(72px,1fr));gap:5px;margin-bottom:8px}
.wild-tab{min-height:34px;padding:6px 8px;border-radius:8px;border:1px solid #454545;background:#1b1b1b;color:#ddd;font-size:12px;font-weight:700;cursor:pointer}
.wild-tab:hover{background:#292929}
.wild-tab.active{background:#3a3a3a;border-color:#777;color:#fff}
.wild-content{min-height:95px;padding:8px;border:1px solid #2d2d2d;border-radius:9px;background:#111}
.wild-group[hidden]{display:none!important}
.wild-group p{margin:0;color:#aaa;font-size:13px}
@media(max-width:700px){
 .wild-panel{position:fixed;left:8px;right:8px;bottom:76px;width:auto}
 .wild-tabs{grid-template-columns:repeat(2,1fr)}
}

/* Update 101: verwaltbare Chat-Buttons */
.chat-custom-tool-button{text-decoration:none!important;box-sizing:border-box}
.chat-custom-tool-button:visited{color:inherit}


/* Update 110: Admin-Nachrichten */
.admin-message-control-wrap{position:relative}
.admin-message-panel{
  position:absolute;left:0;bottom:calc(100% + 8px);z-index:10040;
  width:min(390px,calc(100vw - 26px));box-sizing:border-box;
  background:#171717;border:1px solid #444;border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);padding:10px;color:#eee
}
.admin-message-panel[hidden]{display:none!important}
.admin-message-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.admin-message-panel label{display:block;font-size:13px;margin:7px 0}
.admin-message-panel select,.admin-message-panel textarea{
  display:block;width:100%;box-sizing:border-box;margin-top:5px;
  background:#0e0e0e;color:#f5f5f5;border:1px solid #4a4a4a;border-radius:7px;padding:8px
}
.admin-message-panel textarea{resize:vertical;min-height:96px}
.admin-message-panel-actions{display:flex;justify-content:flex-end;margin-top:8px}
.admin-message-send{font-weight:700}
.admin-message-status{min-height:18px;margin-top:5px;font-size:12px;color:#bbb}

.msg.admin-special-message{
  position:relative;margin:8px 6px!important;padding:10px 12px!important;
  border:1px solid rgba(255,255,255,.30)!important;border-left-width:5px!important;
  border-radius:10px!important;background:rgba(20,20,20,.92)!important;
  box-shadow:0 3px 14px rgba(0,0,0,.28)!important
}
.msg.admin-special-message .msg-head{display:flex!important;align-items:center!important;gap:7px!important}
.msg.admin-special-message .admin-special-badge{
  display:inline-flex;align-items:center;border-radius:999px;padding:2px 7px;
  font-size:11px;font-weight:800;letter-spacing:.2px;background:rgba(255,255,255,.12)
}
.msg.admin-special-message>p{margin:7px 0 1px!important;font-size:1.08em!important;line-height:1.45!important;font-weight:650}
.msg.admin-special-announcement{border-left-color:#8d6cff!important;background:linear-gradient(90deg,rgba(91,58,160,.32),rgba(20,20,20,.93) 45%)!important}
.msg.admin-special-info{border-left-color:#45a8ff!important;background:linear-gradient(90deg,rgba(25,102,170,.30),rgba(20,20,20,.93) 45%)!important}
.msg.admin-special-warning{border-left-color:#ffb020!important;background:linear-gradient(90deg,rgba(151,91,12,.34),rgba(20,20,20,.94) 45%)!important}
.msg.admin-special-onair{border-left-color:#ffd23f!important;background:linear-gradient(90deg,rgba(129,99,0,.34),rgba(20,20,20,.94) 45%)!important}
.msg.admin-special-special{border-left-color:#ff4fb8!important;background:linear-gradient(90deg,rgba(145,33,101,.31),rgba(20,20,20,.93) 45%)!important}
@media(max-width:700px){.admin-message-panel{left:auto;right:0}.msg.admin-special-message{margin-left:2px!important;margin-right:2px!important}}

/* Update 135: Flüstern */
.msg.whisper{
  background:rgba(110,110,110,.28)!important;
  border:1px solid rgba(210,210,210,.28)!important;
  border-left:4px solid rgba(210,210,210,.55)!important;
  border-radius:8px!important;
  box-shadow:inset 0 0 10px rgba(255,255,255,.03)!important;
}
.msg.whisper .whisper-tag{
  color:#e2e2e2!important;
  font-weight:800!important;
}
.msg.whisper.admin-whisper-observer{
  border-style:dashed!important;
  border-color:#d85757!important;
  background:rgba(110,110,110,.32)!important;
}
/* Update 246: Responsive Chatbedienung fuer kleinere Laptop-Displays */
/* Untere Buttonleiste darf nie unter Kindertisch/Onlinebereich laufen. */
.chat-body .user-settings-launcher{
  min-width:0!important;
  overflow:hidden!important;
}
.chat-body .user-bottom-actions{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  flex-wrap:nowrap!important;
  scrollbar-width:thin;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  padding:1px 2px 4px 0;
}
.chat-body .user-bottom-actions > *,
.chat-body .settings-control-wrap,
.chat-body .smilie-control-wrap,
.chat-body .wild-control-wrap,
.chat-body .admin-message-control-wrap,
.chat-body .upload-control-wrap,
.chat-body .dice-control-wrap,
.chat-body .draw-control-wrap,
.chat-body .webcam-control-wrap{
  flex:0 0 auto!important;
}

/* Webcam-Steuerung immer ueber dem kompletten Chat, nie hinter dem Kindertisch. */
.chat-body .webcam-control-panel:not([hidden]){
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:min(430px,calc(100vw - 28px))!important;
  max-width:calc(100vw - 28px)!important;
  max-height:calc(100dvh - 28px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  margin:0!important;
  z-index:2000005!important;
}

/* Auch Benutzereinstellungen liegen sicher ueber Kindertisch/iframes. */
.chat-body .settings-modal.open{
  z-index:2000004!important;
  padding:14px!important;
}
.chat-body .settings-dialog{
  max-height:calc(100dvh - 28px)!important;
}

/* Bei niedrigen Laptop-Bildschirmen die feste Bedienung etwas kompakter halten. */
@media (max-height:820px){
  .chat-body .user-settings-launcher{
    flex-basis:50px!important;
    min-height:50px!important;
    height:50px!important;
    max-height:50px!important;
    padding:5px 8px!important;
  }
  .chat-body .user-bottom-actions{height:38px!important;gap:6px!important;}
  .chat-body .settings-gear-button,
  .chat-body .smilie-button,
  .chat-body .webcam-button,
  .chat-body .tool-button{
    height:36px!important;
    min-height:36px!important;
    padding-top:6px!important;
    padding-bottom:6px!important;
  }
  .chat-body .sendbar{
    flex-basis:56px!important;
    min-height:56px!important;
    height:56px!important;
    max-height:56px!important;
    padding:6px 9px!important;
  }
  .chat-body .sendbar #message,
  .chat-body .sendbar button{
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
  }
  .chat-body .webcam-strip.active{max-height:30vh!important;}
}

@media (max-height:700px){
  .chat-body .settings-dialog{
    width:min(780px,calc(100vw - 20px))!important;
    max-height:calc(100dvh - 20px)!important;
    padding:16px!important;
  }
  .chat-body .webcam-control-panel:not([hidden]){
    max-height:calc(100dvh - 18px)!important;
  }
}

/* Update 247: Toolbar passt sich an die TATSAECHLICH freie Chatbreite an.
   Wichtig bei Kindertisch + Online-Liste auf Laptop/kleinerem Monitor. */
.chat-body .user-settings-launcher{
  container-type:inline-size;
}
.chat-body .user-bottom-actions{
  overflow-x:hidden!important;
  overflow-y:visible!important;
  gap:7px!important;
}
.chat-body .user-bottom-actions > *{
  min-width:0!important;
}
.chat-body .user-bottom-actions button,
.chat-body .user-bottom-actions .tool-button,
.chat-body .user-bottom-actions .chat-custom-tool-button{
  font-size:14px!important;
  padding-left:10px!important;
  padding-right:10px!important;
  white-space:nowrap!important;
}

/* Wenn Kindertisch/Online-Liste Platz wegnehmen: noch kompakter. */
@container (max-width: 1320px){
  .chat-body .user-bottom-actions{gap:5px!important;}
  .chat-body .user-bottom-actions button,
  .chat-body .user-bottom-actions .tool-button,
  .chat-body .user-bottom-actions .chat-custom-tool-button{
    font-size:13px!important;
    padding-left:7px!important;
    padding-right:7px!important;
  }
}

@container (max-width: 1120px){
  .chat-body .user-bottom-actions{gap:4px!important;}
  .chat-body .user-bottom-actions button,
  .chat-body .user-bottom-actions .tool-button,
  .chat-body .user-bottom-actions .chat-custom-tool-button{
    font-size:11px!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }
}

/* Auf sehr schmaler Restbreite bleiben ALLE Funktionen sichtbar:
   Text verschwindet, Symbol bleibt. Titel/aria-label bleiben fuer Erklaerung erhalten. */
@container (max-width: 900px){
  .chat-body .user-bottom-actions{gap:5px!important;}
  .chat-body .user-bottom-actions button,
  .chat-body .user-bottom-actions .tool-button,
  .chat-body .user-bottom-actions .chat-custom-tool-button{
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    padding:0!important;
    justify-content:center!important;
    overflow:hidden!important;
  }
  .chat-body .user-bottom-actions button > span:last-child,
  .chat-body .user-bottom-actions .tool-button > span:last-child,
  .chat-body .user-bottom-actions .chat-custom-tool-button > span:last-child{
    display:none!important;
  }
}

/* Update 249: Admin-Nachrichtenfenster darf durch responsive Toolbar nicht abgeschnitten werden. */
.chat-body .admin-message-panel:not([hidden]){
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:min(430px,calc(100vw - 28px))!important;
  max-width:calc(100vw - 28px)!important;
  max-height:calc(100dvh - 28px)!important;
  overflow:auto!important;
  margin:0!important;
  z-index:2000010!important;
}
@media (max-height:700px){
  .chat-body .admin-message-panel:not([hidden]){
    max-height:calc(100dvh - 18px)!important;
  }
}

/* Update 250: Toolbar-Popups auf Laptop immer frei ueber dem Chat anzeigen.
   Die kompakte Toolbar darf Smilies/Wuerfeln/Wilde Spielereien nicht abschneiden. */
.chat-body .smilie-panel:not([hidden]),
.chat-body .mini-tool-panel:not([hidden]),
.chat-body .wild-panel:not([hidden]){
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
  box-sizing:border-box!important;
  z-index:2000012!important;
}

.chat-body .smilie-panel:not([hidden]){
  width:min(720px,calc(100vw - 28px))!important;
  max-width:calc(100vw - 28px)!important;
  max-height:calc(100dvh - 28px)!important;
  overflow:auto!important;
}
.chat-body .mini-tool-panel:not([hidden]){
  width:min(360px,calc(100vw - 28px))!important;
  min-width:0!important;
  max-width:calc(100vw - 28px)!important;
  max-height:calc(100dvh - 28px)!important;
  overflow:auto!important;
}
.chat-body .wild-panel:not([hidden]){
  width:min(520px,calc(100vw - 28px))!important;
  max-width:calc(100vw - 28px)!important;
  max-height:calc(100dvh - 28px)!important;
  overflow:auto!important;
}

@media (max-height:700px){
  .chat-body .smilie-panel:not([hidden]),
  .chat-body .mini-tool-panel:not([hidden]),
  .chat-body .wild-panel:not([hidden]){
    max-height:calc(100dvh - 18px)!important;
  }
}

/* Update 288: Schriftarten + dauerhaft sichtbarer Fertig-Button */
.chat-font-picker{display:flex;gap:8px;flex-wrap:wrap}.chat-font-btn{padding:10px 14px;border:2px solid #314052;border-radius:10px;background:#10161d;color:#fff;font-size:18px}.chat-font-btn.selected{border-color:#f1a94d;box-shadow:0 0 0 2px #f1a94d44}.settings-done{position:sticky!important;bottom:0!important;z-index:20!important;float:none!important;width:100%!important;margin:18px 0 0!important;padding:13px 18px!important;font-weight:800!important;box-shadow:0 -8px 18px rgba(0,0,0,.28)!important}


/* Update 417: Admin-Aktions-/Speicherbuttons deutlich hervorheben */
@keyframes rtcAdminSavePulse {
  0%,100% {
    box-shadow:0 0 0 1px rgba(255,90,90,.24),0 0 8px rgba(220,30,30,.42),inset 0 1px 0 rgba(255,255,255,.16);
    filter:brightness(1);
  }
  50% {
    box-shadow:0 0 0 2px rgba(255,115,115,.48),0 0 18px rgba(255,35,35,.72),inset 0 1px 0 rgba(255,255,255,.22);
    filter:brightness(1.13);
  }
}

.admin-body form button[type="submit"]:not(.danger-button):not([class*="delete"]):not([class*="remove"]):not([class*="cancel"]),
.admin-body form button:not([type]):not(.danger-button):not([class*="delete"]):not([class*="remove"]):not([class*="cancel"]),
.admin-body form input[type="submit"]:not(.danger-button):not([class*="delete"]):not([class*="remove"]):not([class*="cancel"]) {
  background:linear-gradient(180deg,#e93636 0%,#b61111 100%)!important;
  border:1px solid #ff7777!important;
  color:#fff!important;
  font-weight:800!important;
  text-shadow:0 1px 1px rgba(0,0,0,.55)!important;
  animation:rtcAdminSavePulse 2.1s ease-in-out infinite!important;
}

.admin-body form button[type="submit"]:not(.danger-button):not([class*="delete"]):not([class*="remove"]):not([class*="cancel"]):hover,
.admin-body form button:not([type]):not(.danger-button):not([class*="delete"]):not([class*="remove"]):not([class*="cancel"]):hover,
.admin-body form input[type="submit"]:not(.danger-button):not([class*="delete"]):not([class*="remove"]):not([class*="cancel"]):hover {
  background:linear-gradient(180deg,#ff4b4b 0%,#d31515 100%)!important;
  border-color:#ffb0b0!important;
  box-shadow:0 0 0 2px rgba(255,125,125,.5),0 0 22px rgba(255,35,35,.85)!important;
  transform:translateY(-1px);
}

/* Untere Sticky-Speicherleisten sollen ruhig bleiben. */
.admin-body .cb-savebar button,
.admin-body .hb-savebar button {
  animation:none!important;
}

@media (prefers-reduced-motion:reduce) {
  .admin-body form button[type="submit"],
  .admin-body form button:not([type]),
  .admin-body form input[type="submit"] {
    animation:none!important;
  }
}

/* Update 445: Scrollbalken im Chat-Nachrichtenfenster unsichtbar, Scrollen bleibt aktiv */
#messages,
.messages{
  scrollbar-width:none!important;      /* Firefox */
  -ms-overflow-style:none!important;   /* alter Edge/IE */
}
#messages::-webkit-scrollbar,
.messages::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;              /* Chrome, Edge, Safari */
}

/* Update 446: Untere Buttonflaeche ohne eigenen Scrollbereich */
.chat-body .user-bottom-actions{
  overflow:visible!important;
  scrollbar-width:none!important;
  padding-bottom:0!important;
  align-items:center!important;
}
.chat-body .user-bottom-actions::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}


/* GIPHY Suche – kompaktes Chatfenster direkt ueber der Buttonleiste */
.giphy-control-wrap{position:relative;display:inline-flex}
.giphy-panel{position:fixed;z-index:10080;width:330px;max-width:calc(100vw - 16px);max-height:min(410px,calc(100vh - 90px));overflow:hidden;background:#080808;color:#f3f3f3;border:1px solid #6b3b24;border-radius:0;box-shadow:0 16px 38px rgba(0,0,0,.72);padding:0;transform:none}
.giphy-panel[hidden]{display:none!important}
.giphy-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;background:#160a06;border-bottom:1px solid #7b3a12;color:#f5d28a;text-transform:uppercase;font-size:13px}
.giphy-panel-head .mini-tool-close{background:transparent;border:0;color:#f5d28a;width:24px;height:24px;font-size:21px;line-height:20px;padding:0}
.giphy-search-row{display:grid;grid-template-columns:1fr auto;gap:0;padding:0;border-bottom:1px solid #6b3b24}
.giphy-search-row input{min-width:0;padding:8px 10px;border:0;border-radius:0;background:#050505;color:#fff;font:inherit;outline:none}
.giphy-search-row input:focus{box-shadow:inset 0 0 0 1px #d05b24}
.giphy-search-row button{padding:7px 10px;border:0;border-left:1px solid #6b3b24;border-radius:0;background:#2d1208;color:#f7d29b;cursor:pointer}
.giphy-status{padding:6px 9px;font-size:11px;opacity:.82;background:#0b0b0b}
.giphy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:7px;max-height:285px;overflow:auto;background:#050505}
.giphy-choice{display:flex;align-items:center;justify-content:center;min-height:78px;height:78px;padding:2px;border:1px solid #242424;border-radius:0;background:#0b0b0b;cursor:pointer;overflow:hidden}
.giphy-choice:hover{filter:brightness(1.15);border-color:#a44b20}
.giphy-choice img{display:block;width:100%;height:100%;object-fit:contain}
.giphy-powered{padding:5px 8px 6px;text-align:right;font-size:10px;font-weight:800;letter-spacing:.04em;border-top:1px solid #3b1e10;background:#0b0806;color:#d9b48a}
.chat-giphy-image{display:block;max-width:220px;max-height:120px;width:auto;height:auto;object-fit:contain;border-radius:8px;cursor:pointer;margin-top:5px}
.chat-giphy-image.expanded{max-width:min(520px,86vw);max-height:460px}
@media(max-width:480px){.giphy-panel{max-width:calc(100vw - 12px)}.giphy-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:250px}.giphy-choice{height:72px;min-height:72px}.giphy-search-row button{padding:7px 8px}}


/* Update 484: gemeinsame Ziehleiste unter allen Webcams */
.chat-main{grid-template-rows:auto 0 minmax(0,1fr) 56px 64px!important}
.webcam-group-resize{display:none;height:0;position:relative;cursor:ns-resize;touch-action:none;background:transparent;z-index:18}
.webcam-group-resize.active{display:block;height:10px;margin-top:-2px;background:linear-gradient(to bottom,transparent 0,transparent 3px,#435467 3px,#435467 6px,transparent 6px)}
.webcam-group-resize span{position:absolute;left:50%;top:2px;transform:translateX(-50%);width:90px;height:5px;border-radius:99px;background:#8191a2;box-shadow:0 0 0 1px #111a23}
.webcam-group-resize:hover span,.webcam-group-resize.dragging span{background:#f1a94d}
body.webcam-group-resizing{cursor:ns-resize!important;user-select:none!important}
body.webcam-group-resizing *{cursor:ns-resize!important}
@media(max-width:850px){.webcam-group-resize{flex:0 0 0}.webcam-group-resize.active{flex-basis:10px}}


/* RTC Chatbefehle in der normalen unteren Buttonleiste */
.chat-command-dropup{min-width:210px;max-height:300px;overflow:auto}
.chat-command-choice{white-space:nowrap}

/* Update 506: Smilie-Fenster nur vertikal scrollbar */
.chat-body .smilie-panel:not([hidden]){
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
.chat-body .smilie-panel:not([hidden]) .smilie-tabs{
  max-width:100%!important;
  min-width:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
.chat-body .smilie-panel:not([hidden]) .smilie-grid{
  max-width:100%!important;
  min-width:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
.chat-body .smilie-panel:not([hidden]) .smilie-choice{
  min-width:0!important;
}

/* Update 507: Smilie-Scrollbar schmal und transparent */
.chat-body .smilie-panel:not([hidden]),
.chat-body .smilie-panel:not([hidden]) .smilie-tabs,
.chat-body .smilie-panel:not([hidden]) .smilie-grid{
  scrollbar-width:thin!important;
  scrollbar-color:rgba(255,255,255,.22) transparent!important;
}
.chat-body .smilie-panel:not([hidden])::-webkit-scrollbar,
.chat-body .smilie-panel:not([hidden]) .smilie-tabs::-webkit-scrollbar,
.chat-body .smilie-panel:not([hidden]) .smilie-grid::-webkit-scrollbar{
  width:6px!important;
  height:0!important;
}
.chat-body .smilie-panel:not([hidden])::-webkit-scrollbar-track,
.chat-body .smilie-panel:not([hidden]) .smilie-tabs::-webkit-scrollbar-track,
.chat-body .smilie-panel:not([hidden]) .smilie-grid::-webkit-scrollbar-track{
  background:transparent!important;
}
.chat-body .smilie-panel:not([hidden])::-webkit-scrollbar-thumb,
.chat-body .smilie-panel:not([hidden]) .smilie-tabs::-webkit-scrollbar-thumb,
.chat-body .smilie-panel:not([hidden]) .smilie-grid::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22)!important;
  border-radius:999px!important;
  border:0!important;
}
.chat-body .smilie-panel:not([hidden])::-webkit-scrollbar-thumb:hover,
.chat-body .smilie-panel:not([hidden]) .smilie-tabs::-webkit-scrollbar-thumb:hover,
.chat-body .smilie-panel:not([hidden]) .smilie-grid::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.38)!important;
}

/* Update 516: Smilie-Popup auf Laptop-Hoehen besser aufteilen */
@media (max-height: 820px) and (min-width: 700px){
  .chat-body .smilie-panel:not([hidden]){
    max-height:78vh!important;
  }
  .chat-body .smilie-panel:not([hidden]) .smilie-tabs{
    max-height:190px!important;
    overflow-y:auto!important;
    align-content:start!important;
  }
  .chat-body .smilie-panel:not([hidden]) .smilie-tab{
    min-height:42px!important;
    padding:8px 9px!important;
  }
  .chat-body .smilie-panel:not([hidden]) .smilie-grid{
    max-height:300px!important;
  }
  .chat-body .smilie-panel:not([hidden]) .smilie-choice.shared-smilie-choice{
    height:76px!important;
  }
}


/* Fix: normale Datenbank-Smilies im Chat wieder gross anzeigen.
   Auswahlfenster, Uploads, Giphy und Zeichnungen bleiben unveraendert. */
.chat-smilie{
  display:inline-block!important;
  width:auto!important;
  height:100px!important;
  max-width:140px!important;
  max-height:100px!important;
  object-fit:contain!important;
  vertical-align:middle!important;
  margin:2px 4px!important;
}
@media(max-width:700px){
  .chat-smilie{
    height:78px!important;
    max-height:78px!important;
    max-width:110px!important;
  }
}

/* Fester RTC-Cam-Rahmen: reine CSS-Deko ueber dem Video, keine Aenderung an Video/WebRTC */
.webcam-tile-video::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  box-sizing:border-box;
  border:6px solid #8f969d;
  border-radius:3px;
  box-shadow:
    inset 0 0 0 1px #eef1f3,
    inset 0 0 0 3px #555b61,
    inset 0 0 7px rgba(0,0,0,.58),
    0 0 0 1px #d9dde1;
}
.webcam-tile-video::after{
  content:"RTC";
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%,-1px);
  z-index:5;
  pointer-events:none;
  padding:2px 11px 3px;
  border:1px solid #4f555b;
  border-top:0;
  border-radius:0 0 7px 7px;
  background:linear-gradient(180deg,#f1f3f5 0%,#aeb4ba 42%,#6d7379 100%);
  color:#1d2023;
  font:800 12px/1 Arial,sans-serif;
  letter-spacing:1.5px;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  box-shadow:0 2px 3px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.72);
}

/* Cam-Overlays: reine Darstellungsebene, keine Videoberechnung */
.cam-overlay-layer{position:absolute;inset:0;z-index:3;pointer-events:none;background-position:center;background-repeat:no-repeat;background-size:100% 100%;box-sizing:border-box}
.webcam-tile-video video{position:relative;z-index:1}


/* Remote-Cam: Video ist immer die feste untere Ebene, Overlay nur darueber. */


/* Fix Mittanzen: Tanz-Pueppchen direkt unter der Buehnenvorschau sichtbar */
.chat-body .smilie-stage-dancers{
  flex:1 0 100%;
  width:100%;
  min-width:0;
  display:block;
  margin-top:6px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.12);
}
.chat-body .smilie-stage-dancers[hidden]{display:none!important}
.chat-body .smilie-stage-dancers-title{display:block!important;margin:0 0 7px!important;font-size:13px!important}
.chat-body .smilie-stage-dancer-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(72px,1fr));
  gap:7px;
  width:100%;
  max-height:180px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:2px 2px 6px;
  box-sizing:border-box;
}
.chat-body .smilie-stage-dancer-grid .smilie-choice{
  min-width:0!important;
  min-height:74px;
}
.chat-body .smilie-stage-dancer-grid .smilie-choice img{max-width:58px;max-height:52px;object-fit:contain}
.chat-body .smilie-panel.dance-mode .smilie-grid{display:none!important}
.chat-body .smilie-panel.dance-mode .smilie-stage-preview{min-height:130px!important;max-height:185px!important}
.chat-body .smilie-panel.dance-mode .smilie-stage-preview img{max-height:165px!important}
@media(max-width:700px){
  .chat-body .smilie-stage-dancer-grid{grid-template-columns:repeat(4,minmax(64px,1fr));max-height:160px}
}

/* Fix Mittanzen: auf kleinen Laptop-Hoehen muessen die Taenzer erreichbar bleiben */
.chat-body .smilie-panel.dance-mode{
  max-height:calc(100dvh - 16px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.chat-body .smilie-panel.dance-mode .smilie-tabs{
  max-height:150px!important;
  overflow-y:auto!important;
}
.chat-body .smilie-panel.dance-mode .smilie-stage-preview{
  min-height:115px!important;
  max-height:145px!important;
  flex:0 0 145px!important;
}
.chat-body .smilie-panel.dance-mode .smilie-stage-preview img{
  max-height:132px!important;
}
.chat-body .smilie-panel.dance-mode .smilie-stage-dancers{
  padding-bottom:10px!important;
}
.chat-body .smilie-panel.dance-mode .smilie-stage-dancer-grid{
  max-height:190px!important;
  overflow-y:auto!important;
  padding-bottom:8px!important;
}
@media(max-height:700px){
  .chat-body .smilie-panel.dance-mode .smilie-tabs{max-height:126px!important}
  .chat-body .smilie-panel.dance-mode .smilie-stage-preview{min-height:100px!important;max-height:125px!important;flex-basis:125px!important}
  .chat-body .smilie-panel.dance-mode .smilie-stage-preview img{max-height:112px!important}
}

/* Mittanzen Feinschliff: komplette Tänzerreihen auf kleinen Laptop-Höhen erreichbar */
.chat-body .smilie-panel.dance-mode .smilie-stage-dancers{
  flex:0 0 auto!important;
  min-height:0!important;
  max-height:210px!important;
  overflow:hidden!important;
}
.chat-body .smilie-panel.dance-mode .smilie-stage-dancer-grid{
  grid-template-columns:repeat(6,minmax(70px,1fr))!important;
  max-height:168px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:2px 4px 12px!important;
  scroll-padding-bottom:12px;
}
.chat-body .smilie-panel.dance-mode .smilie-stage-dancer-grid .smilie-choice{
  min-height:66px!important;
  padding:5px 4px!important;
}
.chat-body .smilie-panel.dance-mode .smilie-stage-dancer-grid .smilie-choice img{
  max-width:50px!important;
  max-height:44px!important;
}
.chat-body .smilie-panel.dance-mode .smilie-stage-dancer-grid .smilie-choice span,
.chat-body .smilie-panel.dance-mode .smilie-stage-dancer-grid .smilie-choice small{
  font-size:11px!important;
  line-height:1.1!important;
}
@media(max-height:700px){
  .chat-body .smilie-panel.dance-mode .smilie-stage-dancer-grid{max-height:150px!important}
}

/* Mittanzen: komplette Tänzerkarten inkl. Name sichtbar lassen */
.chat-body .smilie-panel.dance-mode .smilie-stage-dancers{
  max-height:232px!important;
  overflow:hidden!important;
  padding-bottom:12px!important;
}
.chat-body .smilie-panel.dance-mode .smilie-stage-dancer-grid{
  grid-template-columns:repeat(6,minmax(70px,1fr))!important;
  grid-auto-rows:92px!important;
  max-height:190px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:3px 5px 18px!important;
  align-content:start!important;
  scroll-padding-bottom:18px!important;
}
.chat-body .smilie-panel.dance-mode .smilie-stage-dancer-grid .smilie-choice{
  height:88px!important;
  min-height:88px!important;
  max-height:88px!important;
  padding:5px 4px 6px!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:visible!important;
}
.chat-body .smilie-panel.dance-mode .smilie-stage-dancer-grid .smilie-choice img{
  flex:0 0 auto!important;
  width:auto!important;
  height:54px!important;
  max-width:58px!important;
  max-height:54px!important;
  object-fit:contain!important;
  margin:0 auto 4px!important;
}
.chat-body .smilie-panel.dance-mode .smilie-stage-dancer-grid .smilie-choice span,
.chat-body .smilie-panel.dance-mode .smilie-stage-dancer-grid .smilie-choice small{
  display:block!important;
  flex:0 0 auto!important;
  width:100%!important;
  min-height:14px!important;
  margin:0!important;
  padding:0 2px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  white-space:nowrap!important;
  text-overflow:clip!important;
  text-align:center!important;
  font-size:11px!important;
  line-height:14px!important;
}
@media(max-height:700px){
  .chat-body .smilie-panel.dance-mode .smilie-stage-dancers{max-height:208px!important}
  .chat-body .smilie-panel.dance-mode .smilie-stage-dancer-grid{max-height:166px!important}
}

/* RTC Cam-Rahmen Korrektur: alte orange Aktiv-Kante abschalten, Silber sichtbar erzwingen */
.webcam-tile,
.webcam-tile.running{
  border:1px solid #c7ccd1!important;
  box-shadow:0 0 0 1px #5d6369,0 3px 12px rgba(0,0,0,.62)!important;
}
.webcam-tile-video::before{
  border:6px solid #c5cbd0!important;
  box-shadow:
    inset 0 0 0 1px #ffffff,
    inset 0 0 0 3px #777e84,
    inset 0 0 0 4px #dfe3e6,
    inset 0 0 8px rgba(0,0,0,.52)!important;
}
.webcam-tile-video::after{
  border-color:#666d73!important;
  background:linear-gradient(180deg,#f7f8f9 0%,#c9ced2 38%,#8c9399 70%,#d9dde0 100%)!important;
}


/* RTC Cam Auto-Groesse 2: kleiner starten, kompletter Silberrahmen sichtbar */
.webcam-tile.cam-compact{width:160px!important;height:108px!important}
/* Der Rahmen bleibt komplett innerhalb der sichtbaren Cam-Flaeche. */
.webcam-tile-video{overflow:hidden!important}
.webcam-tile-video::before{inset:0!important;border-width:5px!important}
@media(max-width:700px){
  .webcam-tile.cam-compact{width:145px!important;height:98px!important}
}

/* RTC Webcam: feste Klein/Mittel/Gross-Schalter ausblenden.
   Die automatische Groessenanpassung nach Anzahl aktiver Cams und das manuelle Resize bleiben erhalten. */
.webcam-tile-size{display:none!important;}

/* RTC Webcam: Benutzername unten als dezentes Namensschild auf dem Rahmen. */
.webcam-tile-head{
  top:auto!important;
  bottom:0!important;
  min-height:17px!important;
  height:17px!important;
  padding:0 7px!important;
  justify-content:center!important;
  background:linear-gradient(180deg,rgba(78,82,86,.94),rgba(39,42,45,.96))!important;
  border-top:1px solid rgba(235,238,240,.38)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
  pointer-events:none;
}
.webcam-tile-head strong{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  color:#d6d8da!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:15px!important;
  text-align:center!important;
  text-shadow:0 1px 2px rgba(0,0,0,.9)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.webcam-tile.cam-compact .webcam-tile-head strong{font-size:9px!important;}
.webcam-tile.cam-small .webcam-tile-head strong{font-size:10px!important;}
/* Unten Platz fuer das Namensschild lassen, ohne die Cam-Groessenlogik zu aendern. */
.webcam-tile-video{bottom:17px!important;}


/* RTC Webcam-Rahmenauswahl: nur Farben, keinerlei Eingriff in Video/WebRTC. */
.webcam-strip.webcam-frame-none .webcam-tile,
.webcam-strip.webcam-frame-none .webcam-tile.running{
  border-color:transparent!important;
  box-shadow:none!important;
}
.webcam-strip.webcam-frame-none .webcam-tile-video::before,
.webcam-strip.webcam-frame-none .webcam-tile-video::after{display:none!important;}

.webcam-strip.webcam-frame-silver .webcam-tile,
.webcam-strip.webcam-frame-silver .webcam-tile.running{border-color:#aeb4b8!important;box-shadow:0 0 0 2px #4e5458!important;}
.webcam-strip.webcam-frame-silver .webcam-tile-video::before{border-color:#c6ccd1!important;box-shadow:inset 0 0 0 1px #ffffff,inset 0 0 0 3px #767d84,inset 0 0 0 4px #dfe3e6,inset 0 0 8px rgba(0,0,0,.52),0 0 0 1px #d9dde1!important;}
.webcam-strip.webcam-frame-silver .webcam-tile-video::after{border-color:#666d73!important;background:linear-gradient(180deg,#f7f8f9 0%,#c9ced2 38%,#8c9399 70%,#d9dde0 100%)!important;color:#1d2023!important;}
.webcam-strip.webcam-frame-silver .webcam-tile-head{background:linear-gradient(180deg,#666b70,#34383c)!important;border-top-color:#aeb4b8!important;}
.webcam-strip.webcam-frame-silver .webcam-tile-head strong{color:#e5e7e8!important;}

.webcam-strip.webcam-frame-black .webcam-tile,
.webcam-strip.webcam-frame-black .webcam-tile.running{border-color:#222!important;box-shadow:0 0 0 2px #050505!important;}
.webcam-strip.webcam-frame-black .webcam-tile-video::before{border-color:#3e3e3e!important;box-shadow:inset 0 0 0 1px #8a8a8a,inset 0 0 0 3px #101010,inset 0 0 0 4px #4c4c4c,inset 0 0 8px rgba(0,0,0,.72),0 0 0 1px #202020!important;}
.webcam-strip.webcam-frame-black .webcam-tile-video::after{border-color:#1b1b1b!important;background:linear-gradient(180deg,#616161 0%,#2b2b2b 45%,#080808 100%)!important;color:#f1f1f1!important;text-shadow:0 1px 0 rgba(0,0,0,.75)!important;}
.webcam-strip.webcam-frame-black .webcam-tile-head{background:linear-gradient(180deg,#252525,#090909)!important;border-top-color:#444!important;}
.webcam-strip.webcam-frame-black .webcam-tile-head strong{color:#d7d7d7!important;}

.webcam-strip.webcam-frame-red .webcam-tile,
.webcam-strip.webcam-frame-red .webcam-tile.running{border-color:#a6222b!important;box-shadow:0 0 0 2px #4a0d12!important;}
.webcam-strip.webcam-frame-red .webcam-tile-video::before{border-color:#c04551!important;box-shadow:inset 0 0 0 1px #f4cbd0,inset 0 0 0 3px #621218,inset 0 0 0 4px #de6c76,inset 0 0 8px rgba(0,0,0,.58),0 0 0 1px #4a0d12!important;}
.webcam-strip.webcam-frame-red .webcam-tile-video::after{border-color:#6b151d!important;background:linear-gradient(180deg,#f5c3c8 0%,#c84f5b 35%,#7a1a24 75%,#521016 100%)!important;color:#fff5f5!important;text-shadow:0 1px 0 rgba(64,0,0,.45)!important;}
.webcam-strip.webcam-frame-red .webcam-tile-head{background:linear-gradient(180deg,#70151c,#3d0d11)!important;border-top-color:#b93c45!important;}
.webcam-strip.webcam-frame-red .webcam-tile-head strong{color:#f1d7d9!important;}

.webcam-strip.webcam-frame-blue .webcam-tile,
.webcam-strip.webcam-frame-blue .webcam-tile.running{border-color:#2f6fc2!important;box-shadow:0 0 0 2px #173760!important;}
.webcam-strip.webcam-frame-blue .webcam-tile-video::before{border-color:#4f8fe1!important;box-shadow:inset 0 0 0 1px #d7e7ff,inset 0 0 0 3px #173760,inset 0 0 0 4px #77a9eb,inset 0 0 8px rgba(0,0,0,.58),0 0 0 1px #16304f!important;}
.webcam-strip.webcam-frame-blue .webcam-tile-video::after{border-color:#234d83!important;background:linear-gradient(180deg,#e4efff 0%,#6ba0e6 35%,#295d9e 72%,#143357 100%)!important;color:#f5fbff!important;text-shadow:0 1px 0 rgba(0,18,50,.35)!important;}
.webcam-strip.webcam-frame-blue .webcam-tile-head{background:linear-gradient(180deg,#285c9f,#142f54)!important;border-top-color:#4b84cc!important;}
.webcam-strip.webcam-frame-blue .webcam-tile-head strong{color:#d9e8fa!important;}

.webcam-strip.webcam-frame-green .webcam-tile,
.webcam-strip.webcam-frame-green .webcam-tile.running{border-color:#3b8b4b!important;box-shadow:0 0 0 2px #1a4322!important;}
.webcam-strip.webcam-frame-green .webcam-tile-video::before{border-color:#5fb56f!important;box-shadow:inset 0 0 0 1px #dff7e4,inset 0 0 0 3px #214f2a,inset 0 0 0 4px #84cc91,inset 0 0 8px rgba(0,0,0,.58),0 0 0 1px #18401f!important;}
.webcam-strip.webcam-frame-green .webcam-tile-video::after{border-color:#2b6636!important;background:linear-gradient(180deg,#eefdf1 0%,#7dc68b 35%,#347942 72%,#1a4221 100%)!important;color:#f7fff8!important;text-shadow:0 1px 0 rgba(0,28,0,.35)!important;}
.webcam-strip.webcam-frame-green .webcam-tile-head{background:linear-gradient(180deg,#357942,#1c4024)!important;border-top-color:#57a866!important;}
.webcam-strip.webcam-frame-green .webcam-tile-head strong{color:#dff1e2!important;}

.webcam-strip.webcam-frame-yellow .webcam-tile,
.webcam-strip.webcam-frame-yellow .webcam-tile.running{border-color:#d0a928!important;box-shadow:0 0 0 2px #705a10!important;}
.webcam-strip.webcam-frame-yellow .webcam-tile-video::before{border-color:#efc94c!important;box-shadow:inset 0 0 0 1px #fff9dc,inset 0 0 0 3px #826817,inset 0 0 0 4px #f8d972,inset 0 0 8px rgba(0,0,0,.58),0 0 0 1px #6f5a11!important;}
.webcam-strip.webcam-frame-yellow .webcam-tile-video::after{border-color:#8b6d14!important;background:linear-gradient(180deg,#fff8d9 0%,#f0cc58 35%,#b08a1f 72%,#66500f 100%)!important;color:#3a2c00!important;text-shadow:0 1px 0 rgba(255,255,255,.35)!important;}
.webcam-strip.webcam-frame-yellow .webcam-tile-head{background:linear-gradient(180deg,#b89620,#65510f)!important;border-top-color:#e2c553!important;}
.webcam-strip.webcam-frame-yellow .webcam-tile-head strong{color:#fff2b9!important;}

.webcam-strip.webcam-frame-orange .webcam-tile,
.webcam-strip.webcam-frame-orange .webcam-tile.running{border-color:#d26418!important;box-shadow:0 0 0 2px #6d2f08!important;}
.webcam-strip.webcam-frame-orange .webcam-tile-video::before{border-color:#ee8f42!important;box-shadow:inset 0 0 0 1px #ffe7d4,inset 0 0 0 3px #7d3608,inset 0 0 0 4px #f6a560,inset 0 0 8px rgba(0,0,0,.58),0 0 0 1px #6d2f08!important;}
.webcam-strip.webcam-frame-orange .webcam-tile-video::after{border-color:#8e4211!important;background:linear-gradient(180deg,#fff0e1 0%,#f2a35d 35%,#c9631d 72%,#6d2f08 100%)!important;color:#fff7ef!important;text-shadow:0 1px 0 rgba(72,25,0,.35)!important;}
.webcam-strip.webcam-frame-orange .webcam-tile-head{background:linear-gradient(180deg,#a94c13,#572606)!important;border-top-color:#e07a2d!important;}
.webcam-strip.webcam-frame-orange .webcam-tile-head strong{color:#ffe0c2!important;}

#webcamFrameStyle{font-weight:700;}


/* RTC Webcam: sichtbarer Platzhalter direkt im schwarzen Cam-Feld. */
.local-webcam-tile.camera-paused .cam-overlay-layer{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
  background:#090b0d!important;
  z-index:3!important;
}
.local-webcam-tile.camera-paused .cam-overlay-layer::before{
  content:"Muss mich kurz hübsch machen 😄";
  display:block;
  width:100%;
  max-width:92%;
  color:#e7e7e7!important;
  font:700 15px/1.35 Arial,sans-serif!important;
  text-align:center!important;
  text-shadow:0 1px 2px #000!important;
}
.webcam-tile.cam-compact.camera-paused .cam-overlay-layer::before{font-size:11px!important;}
.webcam-tile.cam-small.camera-paused .cam-overlay-layer::before{font-size:12px!important;}

/* RTC ManyCam: lokale Vorschau nicht spiegeln, damit Texte/Logos korrekt lesbar bleiben.
   Nur Darstellung; WebRTC/Stream bleiben unveraendert. */
#localWebcam,
.local-webcam-tile .webcam-tile-video video{
  transform:none!important;
}