/* GDMM v1.3-clean · live-participant.css
 * Live-Unterricht aus Teilnehmersicht.
 *   focus-    „Live-Fokus“: die Teilnehmeransicht im Live-Raum (blauer Vollbildmodus mit Frage,
 *             Chats, Status, Ablaufsteuerung der Demo). Entspricht der Teilnehmeroberfläche von
 *             GDMM Live v13.8.
 *   live-, lesson-   Terminliste, Filter und Terminkarten auf der Seite „Live“
 *   gdmm-in-focus (auf <body>), gdmm-in-focus-root (auf <html>)   Live-Fokus ist offen
 *
 * Einbindung (Reihenfolge ist Teil der Kaskade, siehe index.html):
 *   tokens → base → layout → modals → forum → tnt → live-participant → trainer → presenter → ux → trainer-workspace → awards
 *
 * Mobile First: Die Regeln ohne Media Query beschreiben die Smartphone-Ansicht,
 * @media (min-width: …) ergänzt größere Bildschirme. Die Werte enden auf .02px (z. B. 750.02px),
 * damit sie lückenlos an die früheren Grenzen (max-width: 750px) anschließen – auch bei gebrochenen
 * Fensterbreiten durch Zoom. Verbliebene @media (max-width: …)-Blöcke enthalten Deklarationen, die es
 * nur auf kleinen Bildschirmen gibt (die Regel setzt dafür auf großen Bildschirmen keinen eigenen Wert).
 */

.lesson-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  margin-top: var(--space-23);
}

.live-page {
  max-width: 1140px;
}

.lesson-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-11);
}

.lesson-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-13);
  box-shadow: 0 6px 18px rgba(2,9,29,.035);
}

.lesson-card h3 {
  font-size: 1.08rem;
  margin: 0;
  line-height: 1.3;
}

.lesson-card.lesson-running {
  border: 2px solid var(--lime);
  padding: var(--space-17);
}

.lesson-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.lesson-head .eyebrow {
  font-size: var(--fs-065);
}

.lesson-date {
  display: flex;
  align-items: flex-start;
  gap: var(--space-9);
  color: #556274;
  font-size: var(--fs-084);
  line-height: 1.55;
}

.lesson-date svg {
  margin-top: var(--space-1);
  color: var(--blue);
}

.lesson-footer {
  margin-top: auto;
  padding-top: var(--space-4);
}

.lesson-footer .btn {
  min-width: 160px;
}

.live-filters {
  display: grid;
  gap: var(--space-8);
  margin: 0 0 var(--space-16);
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.live-filters .form-control {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  cursor: pointer;
  background: var(--white);
}

.live-filters select:focus,
.live-filters select:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: var(--blue);
}

.live-list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-15);
  margin-top: var(--space-15);
  min-height: 35px;
}

.date-export {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  text-decoration: none;
}

.date-export:hover {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.date-export:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}

.live-filter-top {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-8);
}

.live-filter-top select {
  flex: 1;
  min-width: 0;
}

.booked-check {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  white-space: nowrap;
  cursor: pointer;
  font-size: var(--fs-074);
  font-weight: 750;
  color: #36435c;
}

.booked-check input {
  accent-color: var(--blue);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.live-now {
  background: #e8fbb3;
  color: #2c4710;
  border: 1px solid var(--lime);
  white-space: nowrap;
}

body.gdmm-in-focus {
  color: var(--white);
  background: var(--blue);
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

.focus-header {
  margin: 0 0 var(--space-23);
  margin-bottom: var(--space-14);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
}

.focus-header p {
  font-size: var(--fs-092);
  margin-top: var(--space-8);
  color: var(--slate-97c);
  line-height: 1.4;
  max-width: 380px;
}

.focus-brand span {
  color: var(--lime);
}

.focus-brand {
  font: 900 clamp(1.55rem,4.9vw,2.05rem)/1.08 var(--display);
  font-size: 1.58rem;
  letter-spacing: -.055em;
}

.focus-actions {
  justify-content: space-between;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
}

.focus-teams {
  background: var(--lilac);
  color: var(--purple-16);
}

/* Spezifität bewusst erhöht (ersetzt ein früheres !important) */
.focus-teams.focus-teams.focus-teams {
  border-color: var(--lilac);
}

.focus-welcome {
  background: var(--white);
  color: var(--gray-07);
  border-radius: var(--radius-27);
  padding: clamp(22px,5vw,42px);
  box-shadow: 0 14px 32px rgba(0,0,0,.07);
  min-height: 260px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-9);
}

.focus-welcome p {
  font-size: var(--fs-100);
  color: #586174;
  margin: 0;
}

.focus-welcome h1 {
  font: 900 clamp(1.85rem,5vw,2.5rem)/1.15 var(--display);
  letter-spacing: -.045em;
  margin: var(--space-6) 0 var(--space-1);
}

.focus-welcome>p {
  margin: 0;
  color: var(--slate-41);
  font-size: var(--fs-092);
}

.focus-check {
  font-weight: 400;
  display: grid;
  place-items: center;
  width: 69px;
  height: 69px;
  border-radius: var(--radius-round);
  background: var(--lime);
  font-size: 2.2rem;
  line-height: 1;
  color: #131713;
  flex: none;
}

.focus-option {
  font-weight: 750;
  display: flex;
  align-items: center;
  text-align: left;
  gap: var(--space-11);
  width: 100%;
  min-height: 55px;
  border: 1.5px solid #d8e0e9;
  background: var(--white);
  border-radius: var(--radius-14);
  padding: var(--space-10) var(--space-12);
  color: #141a28;
  cursor: pointer;
  font-size: var(--fs-086);
}

.focus-option span {
  background: var(--slate-95);
  padding: var(--space-9);
  border-radius: var(--radius-9);
  flex: 0 0 35px;
  text-align: center;
}

.focus-option:disabled {
  opacity: 1;
  cursor: default;
}

.focus-option .focus-letter {
  display: grid;
  place-items: center;
  min-width: 28px;
  width: 28px;
  height: 30px;
  border-radius: var(--radius-9);
  background: var(--gray-95d);
  font-weight: 900;
  font-size: var(--fs-080);
}

.focus-option strong {
  font-weight: 800;
  line-height: 1.4;
}

.focus-option.chosen {
  background: #eef9d9;
  border: 1.5px solid #80ba36;
  color: #17220e;
}

.focus-option.chosen .focus-letter {
  background: var(--lime);
  color: var(--gray-07);
}

.focus-option:hover:not(.chosen) {
  background: #f6f8fc;
  border-color: #a9b9d1;
}

.focus-option:focus-visible {
  outline: 3px solid var(--orange-70);
  outline-offset: 2px;
}

html.gdmm-in-focus-root {
  background: var(--blue);
  min-height: 100%;
  overscroll-behavior-y: none;
}

html.gdmm-in-focus-root body,
html.gdmm-in-focus-root #app {
  background: var(--blue);
  min-height: 100%;
}

body.gdmm-in-focus #app {
  background: var(--blue);
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

.focus-screen {
  background: var(--blue);
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 0 max(34px,env(safe-area-inset-bottom));
  color: var(--white);
}

.focus-shell {
  width: min(100%,660px);
  margin: 0 auto;
  padding: var(--space-18) var(--space-12) 32px;
}

.focus-header-copy {
  min-width: 0;
  flex: 1;
}

.focus-header-copy p {
  font-size: var(--fs-090);
  line-height: 1.25;
  color: var(--white);
  margin: var(--space-5) 0 0;
}

.focus-header-copy small {
  display: block;
  font-size: var(--fs-069);
  margin-top: var(--space-3);
  color: #e7efff;
  line-height: 1.35;
}

.focus-score {
  display: grid;
  place-items: center;
  min-width: 52px;
  height: 45px;
  border-radius: 40px;
  background: var(--lime);
  color: var(--lime-04);
  font-weight: 900;
  font-size: var(--fs-085);
  padding: 0 var(--space-9);
  white-space: nowrap;
}

.focus-teams-row .focus-teams {
  border: 0;
  border-radius: var(--radius-11);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-weight: 800;
  font-size: var(--fs-073);
  padding: var(--space-9) var(--space-13);
  background: var(--lilac);
  color: var(--purple-16);
  min-height: 40px;
}

.focus-teams-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 var(--space-11);
}

.focus-main-card {
  background: var(--white);
  color: var(--gray-07);
  border-radius: var(--radius-24);
  padding: clamp(17px,4vw,28px);
}

.focus-detail-panel {
  background: var(--white);
  color: var(--gray-07);
  border-radius: var(--radius-24);
  padding: clamp(17px,4vw,28px);
  margin-top: var(--space-10);
  display: grid;
  gap: var(--space-12);
  scroll-margin-bottom: 12px;
}

.focus-detail-panel form>label {
  display: block;
  font-weight: 850;
  font-size: var(--fs-085);
  margin-bottom: var(--space-8);
}

.focus-detail-panel textarea {
  width: 100%;
  min-width: 0;
  border: 2px solid var(--blue-79);
  background: var(--gray-97d);
  border-radius: var(--radius-13);
  padding: var(--space-12) var(--space-13);
  color: var(--slate-15);
  font: inherit;
  font-size: var(--fs-086);
  resize: vertical;
  min-height: 92px;
  outline: 0;
  box-shadow: none;
  outline-offset: 0;
  transition: border-color .12s linear;
}

.focus-detail-panel form {
  margin: 0;
}

.focus-detail-panel h2 {
  margin: 0;
  font-size: var(--fs-110);
}

.focus-detail-panel textarea:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: none;
}

.focus-eyebrow {
  color: var(--blue);
  font-weight: 900;
  font-size: var(--fs-077);
  letter-spacing: .115em;
  text-transform: uppercase;
  margin: 0;
}

.focus-waiting-banner {
  padding: var(--space-13) var(--space-16);
  border-radius: var(--radius-14);
  background: #f0f2f6;
  color: #40495b;
  font-size: var(--fs-086);
  font-weight: 850;
  text-align: center;
  width: 100%;
  margin-top: var(--space-14);
}

.focus-team-card h1 {
  font: 900 clamp(1.7rem,5vw,2.3rem)/1.15 var(--display);
  letter-spacing: -.04em;
  margin: var(--space-7) 0 var(--space-12);
}

.focus-member-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  margin-bottom: var(--space-14);
}

.focus-member {
  padding: var(--space-6) var(--space-10);
  border: 1px solid #d5deec;
  background: var(--gray-96b);
  color: #283346;
  border-radius: var(--radius-pill);
  font-size: var(--fs-080);
}

#focus-team-form {
  margin-top: var(--space-18);
}

#focus-team-form>label {
  display: block;
  font-weight: 850;
  font-size: var(--fs-085);
  margin-bottom: var(--space-8);
}

.focus-send-row {
  display: flex;
  gap: var(--space-9);
  align-items: stretch;
}

.focus-send-row input {
  width: 100%;
  min-width: 0;
  border: 2px solid var(--blue-79);
  background: var(--gray-97d);
  border-radius: var(--radius-13);
  padding: var(--space-12) var(--space-13);
  min-height: 49px;
  color: var(--slate-15);
  font: inherit;
  font-size: var(--fs-086);
  outline: 0;
  box-shadow: none;
  outline-offset: 0;
  transition: border-color .12s linear;
}

.focus-send-row input:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: none;
}

.focus-team-form-row input {
  border: 2px solid var(--blue-79);
  background: var(--gray-97d);
  border-radius: var(--radius-13);
  padding: var(--space-12) var(--space-13);
  min-height: 49px;
  color: var(--slate-15);
  font: inherit;
  font-size: var(--fs-086);
  outline: 0;
  box-shadow: none;
  outline-offset: 0;
  transition: border-color .12s linear;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.focus-team-form-row input:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: none;
}

.focus-team-form-row {
  width: 100%;
  display: flex;
  gap: var(--space-8);
  align-items: stretch;
}

.focus-team-form-row .focus-lime-button {
  flex: 0 0 auto;
  margin-left: auto;
}

.focus-lime-button {
  background: var(--lime);
  color: var(--lime-04);
  border: 0;
  border-radius: var(--radius-13);
  padding: var(--space-11) var(--space-12);
  min-height: 49px;
  font-weight: 900;
  font-size: var(--fs-080);
  white-space: nowrap;
}

.focus-lime-button.full {
  width: 100%;
  margin-top: var(--space-13);
}

.focus-lime-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.focus-question-card>.focus-eyebrow {
  margin-bottom: var(--space-6);
}

.focus-question-card h1 {
  font: 850 clamp(1.06rem,4.1vw,1.5rem)/1.42 var(--display);
  letter-spacing: -.02em;
  margin: var(--space-10) 0 var(--space-17);
}

.focus-question-card .focus-submit:disabled {
  background: #dce0e7;
  color: #656e7f;
  border: 0;
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

.focus-saved-card>.focus-eyebrow {
  margin-bottom: var(--space-6);
}

.focus-time-track {
  height: 6px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: #e3e8ed;
  position: relative;
  margin: var(--space-5) 0 var(--space-18);
}

.focus-time-track>span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--lime);
  transition: width .22s linear,background-color .2s ease;
}

.focus-time-track>span.danger {
  background: #D12C36;
}

.focus-options {
  display: grid;
  gap: var(--space-9);
}

.focus-panel-button:focus-visible {
  outline: 3px solid var(--orange-70);
  outline-offset: 2px;
}

.focus-panel-button {
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
  min-height: 51px;
  padding: var(--space-12) var(--space-7);
  border-radius: var(--radius-16);
  font: 900 clamp(.82rem,2.7vw,1rem) var(--display);
  line-height: 1.25;
  font-size: var(--fs-081);
  color: #13131a;
  white-space: normal;
  position: relative;
  overflow: visible;
}

.focus-panel-button.lilac {
  background: var(--lilac);
}

.focus-panel-button.white {
  background: var(--white);
}

.focus-panel-button.yellow {
  background: var(--yellow);
}

.focus-panel-button.team {
  background: var(--focus-team-color,#40B9D1);
}

.focus-panel-button.full-row {
  grid-column: 1/-1;
}

.focus-submit {
  border: 0;
  background: var(--lime);
  color: var(--lime-04);
  padding: var(--space-14) var(--space-12);
  border-radius: var(--radius-14);
  width: 100%;
  min-height: 53px;
  margin-top: var(--space-21);
  font: 900 .96rem var(--display);
}

.focus-submit:disabled {
  background: var(--slate-95);
  color: #707783;
  cursor: not-allowed;
}

.focus-saved-feedback {
  border: 1px solid #b4d96a;
  background: #f1f8e8;
  border-radius: var(--radius-19);
  padding: var(--space-24) var(--space-14);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-10);
}

.focus-saved-feedback .focus-check {
  width: 62px;
  height: 62px;
}

.focus-saved-feedback h1 {
  font: 900 clamp(1.25rem,4vw,1.65rem) var(--display);
  margin: 0;
}

.focus-saved-feedback p {
  font-size: var(--fs-096);
  margin: 0;
  color: #2c3825;
}

.focus-saved-feedback small {
  font-size: var(--fs-079);
  margin-top: var(--space-3);
  color: #58654e;
}

/* D04/D05: existing task card and action tiles, with small delivery notices. */
.room-question-card .focus-saved-feedback h2{font:900 clamp(1.25rem,4vw,1.65rem) var(--display);margin:0}
.room-question-card .focus-saved-feedback{margin-top:var(--space-17)}
.room-connection-notice{display:block;background:#f1f3f7;color:#333e51;border-radius:var(--radius-13);padding:14px 18px;margin-bottom:18px;font-size:.9rem;line-height:1.5}
.room-connection-notice p,.room-answer-note p{margin:3px 0 0}
.room-answer-note{background:#f1f3f7;color:#566172;border-radius:12px;padding:12px 15px;margin-top:15px;font-size:.85rem;line-height:1.5}
.room-question-card .focus-time-track.room-timer-uncertain>span{background:#a7b0bf}
.room-question-card .focus-submit.room-send-quiet:disabled{background:var(--lime);color:var(--lime-04)}
.room-question-card textarea[readonly]{background:#f5f7fb}
.room-question-card .focus-submit{display:flex;align-items:center;justify-content:center;gap:9px}
.room-send-spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:room-send-turn .8s linear infinite}
@keyframes room-send-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.room-send-spinner{animation:none}}

/* Connected D06–D09 views reuse the existing cards and cockpit controls. */
.room-buzzer-status{text-align:center;padding:18px 0 12px}
.room-buzzer-status h2{font:900 clamp(1.3rem,4vw,1.7rem) var(--display);margin:0 0 12px}
.room-buzzer-status p{color:#596477;line-height:1.5}
.room-buzzer-countdown{font:900 2rem var(--display);font-variant-numeric:tabular-nums}
.room-hint-text{white-space:pre-wrap;overflow-wrap:anywhere}
.room-server-trainer.lf-shell{display:block;min-height:100dvh;background:var(--page-bg,#f5f7fb)}
.room-server-trainer .lf-main{width:100%;min-width:0}
body.gdmm-trainer-focus .room-server-trainer .lf-global-head{position:static;top:auto;min-width:0;transform:none}
.room-server-trainer .lf-content{padding:24px;min-width:0}
.room-server-trainer .trainer-workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;max-width:1680px;margin:auto}
.room-server-trainer .v13-live-preview{background:#fff;border:1px solid #dce3ee;border-radius:20px;padding:24px;min-width:0}
.room-server-trainer .v13-live-head h2{overflow-wrap:anywhere;white-space:pre-wrap;line-height:1.35}
.room-trainer-timer{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:16px 0}
.room-trainer-timer label{display:grid;gap:5px;font-size:.85rem}
.room-trainer-timer input{width:130px;padding:10px;border:1px solid #c8d3e4;border-radius:10px}
.room-server-trainer .v13-presenter-modes{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.room-server-trainer .gdmm-answer-row{display:grid;grid-template-columns:minmax(100px,150px) minmax(120px,1fr) 24px minmax(250px,auto);gap:12px;align-items:center;min-width:0}
.room-server-trainer .gdmm-answer-actions{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.room-server-trainer .gdmm-answer-name small{display:block;font-weight:400;color:#667188;margin-top:5px}
.room-server-trainer .gdmm-grade-wrap input{width:70px;padding:8px;border:1px solid #c8d3e4;border-radius:9px}
.room-server-trainer .v13-buzzer-review{display:block;padding:20px;margin-top:20px;background:#fff;border:1px solid #dce3ee;border-radius:18px}
.room-buzzer-row{border-bottom:1px solid #dce3ee;padding:12px 0}
.room-buzzer-row:last-of-type{margin-bottom:16px}
.room-points-breakdown{font-size:.85rem;color:#667188;margin:6px 0}
.room-penalty-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:12px;background:#f3f5fa;border-radius:12px;margin-top:10px}
.room-penalty-form label{display:grid;gap:5px;min-width:0}
.room-penalty-form input{width:180px;max-width:100%;padding:9px;border:1px solid #c8d3e4;border-radius:9px}
.room-server-presenter.presenter-stage{padding:30px 3.5vw;min-height:100dvh}
.room-presenter-content{max-width:1600px;margin:40px auto;display:grid;gap:28px}
.room-presenter-content .presenter-content{width:100%;max-width:none;min-width:0;margin:0;padding:40px;display:block;border-radius:28px}
.room-server-presenter .room-presenter-content>.presenter-content{background:#fff;color:#06112a}
.room-server-presenter .room-presenter-content>.ux-presenter-task{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px}
.room-presenter-content .presenter-content>h2{font:900 clamp(2rem,4.5vw,4.5rem)/1.2 var(--display);margin:24px 0;overflow-wrap:anywhere;white-space:pre-wrap}
.room-presenter-buzzer{display:grid;grid-template-columns:2fr 1fr;gap:0;background:var(--room-team-color);color:#102238;border-radius:28px;overflow:hidden;max-width:1300px;width:100%;margin:0 auto}
.room-presenter-person{height:280px;padding:26px 32px;display:grid;grid-template-rows:26px 120px 70px;text-align:center;align-items:center;min-width:0}
.room-presenter-person>span,.room-presenter-team>span{font-weight:900;letter-spacing:.1em;font-size:.9rem}
.room-presenter-person>strong{font:900 clamp(2rem,4vw,3.7rem)/1.12 var(--display);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.room-presenter-award{font:900 clamp(2rem,3vw,3.1rem)/1 var(--display);font-variant-numeric:tabular-nums;min-height:70px;display:grid;place-items:center}
.room-presenter-team{height:280px;padding:25px;display:flex;flex-direction:column;justify-content:center;gap:24px;text-align:center;min-width:0}
.room-presenter-team>strong{font:900 clamp(1.5rem,2.8vw,2.5rem)/1.15 var(--display);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.room-presenter-wait{text-align:center;color:#fff;padding:30px;font:900 1.6rem var(--display)}
.room-presenter-options,.room-presenter-standings{display:grid;gap:14px;font-size:clamp(1rem,2vw,1.6rem)}
.room-presenter-options>div,.room-presenter-standings>div{padding:16px;border-radius:14px;background:#f1f4fa;display:flex;justify-content:space-between;gap:18px;overflow-wrap:anywhere}
@media(max-width:1100px){.room-server-trainer .trainer-workspace{grid-template-columns:minmax(0,1fr)}.room-server-trainer .trainer-monitor-column{display:block;position:static}.room-server-trainer .gdmm-answer-row{grid-template-columns:minmax(90px,130px) minmax(100px,1fr) 24px}.room-server-trainer .gdmm-answer-actions{grid-column:1/-1}}
@media(max-width:600px){.room-server-trainer .lf-content{padding:12px}.room-server-trainer .lf-global-head{display:flex;flex-wrap:wrap;padding:16px}.room-server-trainer .v13-live-preview,.room-server-trainer .v13-buzzer-review{padding:16px}.room-server-presenter.presenter-stage{padding:20px 12px}.room-server-presenter .presenter-header{flex-wrap:wrap;gap:12px}.room-presenter-content{margin-top:24px}.room-presenter-content .presenter-content{padding:24px}.room-presenter-buzzer{grid-template-columns:1fr}.room-presenter-person,.room-presenter-team{height:280px}.room-penalty-form input{width:100%}.room-penalty-form label{width:100%}}

.focus-results-card {
  min-height: 255px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-14);
}

.focus-results-card h1 {
  font: 900 clamp(1.33rem,4vw,1.7rem) var(--display);
  line-height: 1.3;
  margin: 0;
}

.focus-results-card>p {
  font-size: .94rem;
  line-height: 1.55;
  color: #566076;
  margin: 0;
}

.focus-result {
  width: 100%;
  border-radius: var(--radius-19);
  padding: var(--space-20) var(--space-15);
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.focus-result.positive {
  background: #D0FF96;
  color: var(--lime-04);
}

.focus-result h2 {
  font: 900 clamp(1.18rem,4vw,1.48rem) var(--display);
  margin: 0;
  color: inherit;
}

.focus-result strong {
  font: 850 .99rem var(--display);
  color: inherit;
}

.focus-result.partial {
  background: #fff3cf;
  color: #5a3b00;
}

.focus-result.pending,
.focus-result.neutral {
  background: var(--gray-96);
  color: #3c4658;
}

.focus-result.positive strong {
  color: var(--gray-07);
}

.focus-result.negative {
  background: #fce8e8;
  color: var(--red-33);
}

.focus-panel-buttons {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--space-10);
}

.focus-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  font-size: var(--fs-092);
}

.focus-on-chip {
  background: var(--lime);
  border-radius: var(--radius-pill);
  color: #141900;
  font-weight: 900;
  font-size: var(--fs-068);
  padding: var(--space-4) var(--space-10);
}

.focus-on-chip.off {
  background: #ebedf0;
  color: #616675;
}

.focus-members-list {
  border-radius: var(--radius-99);
  background: var(--gray-97);
  border: 1px solid #dce4f0;
  color: #394456;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font: inherit;
  display: flex;
  width: 100%;
  min-height: 33px;
  max-height: none;
  padding: var(--space-6) var(--space-12);
  line-height: 1.35;
  align-items: center;
  gap: var(--space-8);
  justify-content: space-between;
  flex-wrap: nowrap;
  text-align: left;
  white-space: nowrap;
  font-size: var(--fs-083);
}

.focus-members-list>span {
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-083);
}

.focus-members-list:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.focus-members-list>svg {
  flex: none;
  transition: transform .12s;
}

.focus-members-list[aria-expanded="true"] {
  white-space: normal;
}

.focus-members-list[aria-expanded="true"]>span {
  white-space: normal;
  overflow-wrap: anywhere;
}

.focus-members-list[aria-expanded="true"]>svg {
  transform: rotate(180deg);
}

.focus-chat-messages {
  color: #303a4b;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-8);
  min-height: 42px;
  max-height: 225px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-6) 0 var(--space-10);
  font-size: var(--fs-084);
}

.focus-status-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--space-8);
}

.focus-status-grid button {
  background: var(--gray-96c);
  border-radius: var(--radius-15);
  min-height: 85px;
  padding: var(--space-10);
  display: grid;
  place-content: center;
  gap: var(--space-4);
  text-align: center;
  font-size: var(--fs-074);
  color: #141a24;
  border: 2px solid transparent;
  box-shadow: none;
}

.focus-status-grid button span {
  font-size: 1.3rem;
}

.focus-status-grid button.selected,
.focus-status-grid button[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--slate-96b);
}

.focus-status-grid button:focus {
  outline: none;
}

.focus-status-grid button:focus-visible {
  border-color: var(--blue);
  outline: none;
}

.focus-director {
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r);
  background: rgba(0,29,129,.28);
  margin-top: var(--space-20);
  overflow: hidden;
}

.focus-director-toggle {
  width: 100%;
  background: none;
  border: 0;
  color: var(--white);
  padding: var(--space-13) var(--space-16);
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-height: 45px;
  text-align: left;
  font-size: var(--fs-079);
  font-weight: 850;
}

.focus-director-toggle svg:last-child {
  margin-left: auto;
  transform: rotate(90deg);
}

.focus-director-toggle[aria-expanded=false] svg:last-child {
  transform: rotate(0);
}

.focus-director-inner {
  padding: 0 var(--space-11) var(--space-13);
  display: grid;
  gap: var(--space-13);
}

.focus-director-inner>p {
  margin: 0;
  color: var(--slate-93);
  font-size: var(--fs-078);
}

.focus-director-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--space-10);
}

.focus-director-field {
  display: grid;
  gap: var(--space-5);
  font-size: var(--fs-075);
  color: var(--white);
  font-weight: 700;
}

.focus-director-field select {
  min-width: 0;
  width: 100%;
  border: 1px solid #bdcbef;
  border-radius: var(--radius-10);
  background: var(--white);
  color: #152040;
  min-height: 38px;
  padding: var(--space-6) var(--space-8);
  font-size: var(--fs-080);
}

.focus-director-stages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.focus-stage-btn {
  background: var(--gray-100-a12);
  border: 1px solid var(--gray-100-a30);
  border-radius: var(--radius-10);
  color: var(--white);
  padding: var(--space-8) var(--space-10);
  font-size: var(--fs-074);
  font-weight: 750;
}

.focus-stage-btn.active {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--lime-04);
}

.focus-director-small {
  background: var(--gray-100-a12);
  border: 1px solid var(--gray-100-a30);
  border-radius: var(--radius-10);
  color: var(--white);
  padding: var(--space-8) var(--space-10);
  font-size: var(--fs-074);
  font-weight: 750;
}

.focus-step-btn {
  border: 0;
  border-radius: var(--radius-13);
  background: var(--white);
  color: #0341df;
  padding: var(--space-12) var(--space-15);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-9);
  font-weight: 850;
  font-size: var(--fs-086);
  width: 100%;
}

.focus-director-timer {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.focus-director-timer label {
  font-size: var(--fs-078);
  color: var(--white);
  flex: 0 0 100%;
}

.focus-director-timer input {
  flex: 1;
  min-width: 80px;
  accent-color: var(--lime);
}

/* Spezifität bewusst erhöht (ersetzt ein früheres !important) */
.focus-freetext.focus-freetext {
  outline: 0;
  outline-offset: 0;
}

.focus-freetext {
  box-shadow: none;
  transition: border-color .12s linear;
  width: 100%;
  border: 2px solid var(--blue-79);
  background: var(--gray-97d);
  border-radius: var(--radius-13);
  padding: var(--space-12);
  min-height: 125px;
  resize: vertical;
  font: inherit;
  font-size: var(--fs-090);
}

.focus-freetext:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: none;
}

.focus-chat-bubble {
  width: fit-content;
  max-width: 87%;
  min-width: 0;
  border-radius: var(--radius-14);
  padding: var(--space-9) var(--space-12);
  overflow-wrap: anywhere;
  line-height: 1.5;
  color: var(--gray-07);
}

.focus-chat-bubble b {
  color: inherit;
  font-weight: 850;
}

.focus-chat-bubble.own {
  align-self: flex-end;
  background: var(--white);
  border: 2px solid var(--focus-bubble-color);
}

.focus-chat-bubble.other {
  align-self: flex-start;
  background: var(--focus-bubble-color);
  border: 2px solid transparent;
}

.focus-chat-announcement {
  background: var(--lime);
  color: var(--gray-07);
  width: 100%;
  border-radius: var(--radius-14);
  padding: var(--space-10) var(--space-13);
  font-weight: 750;
  overflow-wrap: anywhere;
}

.focus-chat-share {
  background: #eef5ff;
  color: #102554;
  border: 1px solid #b9d1ff;
  width: 100%;
  border-radius: var(--radius-13);
  padding: var(--space-10) var(--space-13);
  overflow-wrap: anywhere;
}

.focus-chat-readonly {
  background: var(--gray-96);
  color: #526074;
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-12);
  font-size: var(--fs-078);
}

.focus-transition-card {
  text-align: center;
  display: grid;
  gap: var(--space-15);
  padding-block: 30px;
}

.focus-transition-card>h1 {
  font: 900 clamp(1.35rem,4vw,1.75rem)/1.25 var(--display);
  margin: 0;
}

.focus-transition-card>p {
  font-size: clamp(.9rem,3vw,1.03rem);
  color: var(--slate-41);
  margin: 0;
}

.focus-transition-card>small {
  color: #657083;
  font-size: var(--fs-072);
}

.focus-countdown {
  font: 900 clamp(3rem,8vw,4rem)/1.1 var(--display);
  color: var(--blue);
  margin: var(--space-4) auto;
}

.focus-rankings {
  display: grid;
  gap: var(--space-8);
  text-align: left;
  margin-top: 0;
}

.focus-rankings>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  padding: var(--space-11);
  min-height: 48px;
  background: var(--gray-96d);
  border-radius: var(--radius-15);
  font-size: var(--fs-084);
  color: #131825;
}

.focus-rankings strong {
  font-size: var(--fs-100);
  font-weight: 900;
  white-space: nowrap;
  color: var(--gray-07);
}

.focus-director-check {
  display: flex;
  gap: var(--space-10);
  align-items: flex-start;
  color: var(--white);
  font-size: var(--fs-078);
  line-height: 1.4;
  font-weight: 650;
}

.focus-director-check input {
  accent-color: var(--lime);
  margin-top: var(--space-2);
}

.focus-question-label {
  display: block;
  font-weight: 850;
  margin-bottom: var(--space-9);
}

.focus-buzzer {
  display: block;
  margin: var(--space-24) auto var(--space-8);
  background: var(--lime);
  border: 0;
  border-radius: var(--radius-17);
  padding: var(--space-16) var(--space-22);
  font: 900 1.1rem var(--display);
  color: var(--gray-07);


}

.focus-buzzer:disabled {
  background: #e4f6cf;
}

.focus-info-note {
  background: var(--gray-96d);
  border-radius: var(--radius-13);
  padding: var(--space-17);
  color: #354158;
}

.focus-unread {
  position: absolute;
  right: -6px;
  top: -7px;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--space-5);
  border: 2px solid var(--white);
  border-radius: var(--radius-pill);
  background: var(--blue);
  color: var(--white);
  font-size: var(--fs-11px);
  line-height: 1;
  display: grid;
  place-items: center;
  font-weight: 950;
  box-shadow: none;
  pointer-events: none;
  z-index: 2;
}

.focus-unread-announcement {
  background: var(--lime);
  color: var(--gray-07);
  border-color: var(--lime);
  font-size: var(--fs-12px);
  min-width: 23px;
  height: 23px;
  padding: 0;
}

.focus-compose-wrap {
  width: 100%;
  min-width: 0;
  position: static;
  inset: auto;
  transform: none;
  box-shadow: none;
  z-index: auto;
}

.focus-compose-wrap .focus-send-row {
  margin: 0;
}

.focus-mention-suggestions {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  bottom: calc(100% + 7px);
  background: var(--white);
  border: 1px solid #d6dfef;
  border-radius: var(--radius-15);
  padding: var(--space-8);
  box-shadow: 0 8px 22px rgba(12,27,68,.12);
}

.focus-mention-suggestions[hidden] {
  display: none !important;
}

.focus-mention-suggestions button {
  display: block;
  width: 100%;
  min-height: 40px;
  background: #f1f3f6;
  color: var(--gray-07);
  border: 0;
  border-radius: var(--radius-pill);
  text-align: left;
  padding: var(--space-8) var(--space-15);
  font: 850 .83rem var(--display);
  cursor: pointer;
}

.focus-mention-suggestions button:hover,
.focus-mention-suggestions button:focus-visible {
  background: #e3edff;
  outline: none;
}

.focus-exit-footer {
  display: flex;
  justify-content: center;
  margin: 12px 0 0;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.focus-leave-bottom {
  display: inline-flex;
  gap: var(--space-7);
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #ffffff65;
  color: var(--slate-93);
  padding: var(--space-10) var(--space-17);
  font-size: var(--fs-078);
  border-radius: var(--radius-12);
  min-height: 44px;
}

.focus-leave-bottom:hover,
.focus-leave-bottom:focus-visible {
  color: var(--white);
  border-color: white;
  background: #ffffff14;
}

@media (max-width: 750px) {
  .lesson-card {
    padding: var(--space-18);
  }

  .lesson-card .lesson-footer .btn {
    width: 100%;
  }

}

@media (max-width: 600px) {
  .live-filters .form-control:first-child {
    grid-column: 1/-1;
  }

  .live-filters .form-control {
    font-size: var(--fs-082);
    padding: var(--space-10) var(--space-8);
  }

  .live-filter-top {
    grid-column: 1/-1;
  }

  .live-filter-top select {
    width: 100%;
    min-height: 44px;
  }

  .focus-welcome {
    padding: var(--space-26) var(--space-20);
    min-height: 250px;
  }

  .focus-shell {
    background: var(--blue);
  }

  .focus-header-copy small {
    max-width: 220px;
  }

  .focus-main-card,
  .focus-detail-panel {
    border-radius: 22px;
    padding: var(--space-19) var(--space-15);
  }

}

@media (min-width: 470.02px) {
  .lesson-card h3 {
    font-size: var(--fs-112);
  }

}

@media (min-width: 600.02px) {
  .lesson-card.lesson-running {
    padding: calc(20px - 1px);
  }

  .live-filters {
    gap: var(--space-10);
    grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  }

  .booked-check {
    gap: var(--space-7);
    font-size: var(--fs-078);
  }

  .booked-check input {
    width: 17px;
    height: 17px;
  }

  .focus-header {
    margin-bottom: var(--space-17);
  }

  .focus-brand {
    font: 900 clamp(1.55rem,4.9vw,2.05rem)/1.08 var(--display);
  }

  .focus-actions {
    justify-content: flex-end;
  }

  .focus-shell {
    padding: clamp(18px,4vw,30px) clamp(13px,3vw,20px) 38px;
  }

  .focus-header-copy small {
    font-size: var(--fs-073);
  }

  .focus-score {
    min-width: 62px;
    height: 55px;
    font-size: var(--fs-100);
  }

  .focus-teams-row .focus-teams {
    padding: var(--space-7) var(--space-12);
    min-height: 38px;
  }

  .focus-teams-row {
    margin: 0 0 var(--space-12);
  }

  .focus-lime-button {
    padding: var(--space-12) var(--space-18);
    font-size: var(--fs-086);
  }

  .focus-panel-button {
    min-height: 55px;
    border-radius: var(--r);
    font: 900 clamp(.82rem,2.7vw,1rem) var(--display);
    line-height: 1.25;
  }

  .focus-chat-messages {
    max-height: 270px;
  }

  .focus-status-grid button {
    font-size: var(--fs-082);
  }

  .focus-director-inner {
    padding: 0 var(--space-15) var(--space-16);
  }

  .focus-rankings>div {
    padding: var(--space-13) var(--space-15);
    font-size: var(--fs-091);
  }

}

@media (min-width: 750.02px) {
  .lesson-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: var(--space-14);
  }

}

@media (max-width: 600px) {
  .focus-team-form-row .focus-lime-button {
    padding-inline: 12px;
  }

  /* Reihenfolge ist Teil der Kaskade: muss nach .focus-main-card stehen */
  .focus-transition-card {
    padding: var(--space-24) var(--space-15);
  }

}

.focus-presentation-request{margin-top:24px;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--bg)}
.focus-presentation-request small{display:block;margin-top:10px}
.focus-presentation-request .btn{width:min(100%,240px);height:44px;min-height:44px;margin-top:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;transform:none;transition:background .15s}
.live-personal-review .live-review-details{width:100%;padding:0;text-align:left}
.live-personal-review .live-review-tasks{display:grid;gap:16px}
.live-personal-review .live-review-task{min-width:0;padding:18px;border:1px solid var(--border);border-radius:16px}
.live-personal-summary{display:grid;gap:6px;padding:20px;border-radius:16px;background:var(--lime-light);margin:20px 0}
.live-personal-summary strong{font-size:24px}
.live-personal-review :is(p,h3,h4,h5,summary),.focus-option strong,.focus-question-card h1{overflow-wrap:anywhere;white-space:pre-wrap}
.live-personal-review .live-review-response{white-space:pre-wrap}
.live-buzzer-status{padding:16px;border-radius:14px;background:var(--yellow);color:var(--ink)}
.room-review-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:18px 0 8px}
.room-review-toolbar>div{display:grid;gap:4px}.room-review-toolbar small,.room-review-draft-status,.room-review-points small{color:var(--muted)}
.room-review-question-select{display:grid;gap:6px;margin:12px 0}.room-review-question-select select{max-width:100%;width:100%;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--white)}
.room-review-scroll{overflow-x:auto;max-width:100%}.room-review-table{table-layout:fixed;width:100%;min-width:680px;border-collapse:collapse;text-align:left}
.room-review-table .review-name{width:18%}.room-review-table .review-answer{width:auto}.room-review-table .review-icon{width:54px}.room-review-table .review-points{width:104px}
.room-review-table th,.room-review-table td{padding:12px 6px;border-bottom:1px solid var(--border);vertical-align:middle;overflow-wrap:anywhere}
.room-review-table thead th{font-size:12px;text-transform:uppercase;color:var(--muted);font-weight:800}.room-review-table .room-review-icon{text-align:center}
.room-review-icon>span,.room-review-icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;box-sizing:border-box}
.room-review-icon-button{border:1px solid var(--border);border-radius:12px;background:var(--surface,#f4f6fa);color:var(--ink);cursor:pointer;padding:8px}
.room-review-icon-button.is-selected{background:var(--lime)}.room-review-icon-button.has-feedback svg{fill:var(--yellow)}.room-review-icon-button:disabled{cursor:default;opacity:.5}
.room-review-answer,.room-presented-answer p{white-space:pre-wrap;overflow-wrap:anywhere}
.room-review-points input{width:88px;max-width:100%;min-height:42px;padding:8px;border:1px solid var(--border);border-radius:12px;background:white;color:var(--ink);font:inherit;box-sizing:border-box}
.room-review-points small{display:block;font-size:11px;margin-top:5px}.room-review-feedback-row td{padding:14px 8px}.room-review-feedback{display:grid;gap:10px}
.room-review-feedback label{font-weight:800}.room-review-feedback textarea{width:100%;box-sizing:border-box;min-height:100px;padding:12px;border:1px solid var(--border);border-radius:12px;font:inherit;resize:vertical}.room-review-feedback button{justify-self:start}
.room-review :is(button,input,select,textarea):focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.room-presented-answer p{font-size:clamp(22px,3vw,42px);line-height:1.45}

.focus-display-request{margin-top:24px;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--surface,#f4f6fa);text-align:center}.focus-display-request p{margin:0 0 16px}.room-display-requested{display:block;font-size:10px;color:var(--blue);margin-top:3px}

.room-review-icon-button.is-requested{border:2px solid var(--blue);box-shadow:0 0 0 1px var(--blue)}