/* GDMM v1.3-clean · presenter.css
 * Presenter-Ansicht (große Anzeige im Unterrichtsraum).
 *   presenter-       Bühne, Kopfzeile, Inhalt
 *   v13-presenter-   Antwortoptionen, Musterlösung und Ankündigung nach dem Vorbild von Live v13.8
 *
 * Einbindung (Reihenfolge ist Teil der Kaskade, siehe index.html):
 *   tokens → base → layout → modals → forum → tnt → live-participant → trainer → presenter → ux → trainer-workspace → awards
 *
 * Desktop First: Die Regeln ohne Media Query beschreiben die Ansicht am großen Bildschirm,
 * @media (max-width: …) passt kleinere Geräte an.
 */

.presenter-ranking>div {
  padding: var(--space-10) var(--space-15);
  border-radius: var(--radius-12);
  background: var(--gray-96);
  display: flex;
  justify-content: space-between;
  gap: var(--space-9);
  font-weight: 750;
}

.presenter-ranking {
  max-width: 660px;
  width: 100%;
  display: grid;
  gap: var(--space-7);
}

.presenter-stage {
  min-height: 100dvh;
  background: var(--blue);
  color: var(--white);
  padding: 30px clamp(15px,5vw,65px);
}

.presenter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-14);
  flex-wrap: wrap;
}

.presenter-header strong {
  font-size: 1.6rem;
}

.presenter-header strong span {
  color: var(--lime);
}

.presenter-content {
  background: var(--white);
  color: #131924;
  border-radius: 26px;
  padding: clamp(25px,5vw,70px);
  max-width: 1100px;
  margin: 50px auto;
  min-height: 320px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-17);
}

.presenter-layout {min-width:0}

/* A dedicated invitation stage; the underlying slide is not rendered alongside it. */
.presenter-invitation {display:flex;flex-direction:column}
.presenter-invitation-layout {flex:1;display:grid;place-items:center;min-width:0;padding:clamp(24px,5vh,80px) 0}
.presenter-room-code {width:min(100%,52.5vw,1080px);min-width:0;padding:clamp(24px,2vw,40px);background:var(--white);color:#19345f;border-radius:32px;text-align:center}
.presenter-room-code h2 {font-size:clamp(1rem,1.2vw,1.5rem);font-weight:800;margin:0;line-height:1.4}
#presenter-room-qr {width:min(100%,clamp(220px,26vw,540px));margin:clamp(24px,3.5vh,48px) auto}
#presenter-room-qr svg {display:block;width:100%;height:auto}
.presenter-invitation-code {margin:0;font-size:clamp(1.6rem,3vw,3.7rem);font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.presenter-invitation-code strong {color:var(--blue);letter-spacing:.06em}
.presenter-invitation-tagline {margin:clamp(18px,2vh,30px) 0 0;font-size:clamp(1rem,1.9vw,2.2rem);font-weight:800;line-height:1.35}
@media(max-width:680px){.presenter-room-code{width:100%;border-radius:24px}}

.presenter-content h2 {
  font-size: clamp(2rem,5vw,4rem);
}

.presenter-content p {
  font-size: clamp(1rem,2.2vw,1.7rem);
  line-height: 1.5;
}

.v13-presenter-options p {
  padding: var(--space-12) var(--space-15);
  border: 2px solid var(--slate-88);
  border-radius: var(--radius-12);
  text-align: left;
}

.v13-presenter-options b {
  margin-right: var(--space-12);
}

.v13-presenter-solution {
  background: var(--lime-light);
  color: #131921;
  padding: var(--space-18);
  border-radius: var(--radius-16);
}

.v13-presenter-announcement {
  background: var(--lime);
  padding: var(--space-14);
  border-radius: var(--radius-15);
  color: var(--gray-07);
  font-weight: 850;
}

/* Resolution follows the reviewed UX-22 reference, independently of question typography. */
.presenter-content.presenter-resolution{display:block;text-align:left;padding:clamp(22px,4.9vw,70px);margin-top:50px}
.presenter-resolution-label{display:block;text-align:center;font-size:16px;font-weight:400;margin-bottom:28px}
.presenter-content .presenter-resolution-question{font-size:clamp(24px,2.8vw,40px);line-height:1.25;text-align:center;margin:0 0 42px;font-weight:800}
.presenter-resolution .v13-presenter-options{display:grid;gap:8px;width:100%;margin:0}
.presenter-resolution .v13-presenter-options p{display:flex;align-items:baseline;gap:16px;margin:0;background:#f0f3f9;border:2px solid transparent;border-radius:12px;padding:12px 16px;text-align:left;font-size:clamp(16px,1.5vw,22px);line-height:1.35;overflow-wrap:anywhere}
.presenter-resolution .v13-presenter-options p.ux-correct{background:#e7fbbf;border-color:#83be00}
.presenter-resolution .v13-presenter-options p>b{flex:none}
.presenter-content .v13-presenter-solution{margin-top:40px;background:var(--blue-soft);border-left:5px solid var(--blue);padding:20px;border-radius:12px;text-align:left}
.presenter-content .v13-presenter-solution h3{font-size:22px;margin:0 0 12px}
.presenter-content .v13-presenter-solution p{font-size:clamp(18px,1.9vw,28px);margin:0;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.presenter-content .presenter-response-count{font-size:16px}
@media(max-width:600px){.presenter-content.presenter-resolution{margin-top:24px}.presenter-resolution-label{margin-bottom:18px}.presenter-content .presenter-resolution-question{margin-bottom:24px}.presenter-content .v13-presenter-solution{margin-top:24px;padding:16px}.presenter-content .v13-presenter-solution h3{font-size:19px}}

.presenter-anonymous-answer{width:100%;padding:24px;border-radius:18px;background:var(--blue-soft);text-align:left}
.presenter-anonymous-answer p{white-space:pre-wrap;overflow-wrap:anywhere}
.presenter-buzzer-winner{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:16px;max-width:100%;color:white;text-align:center;font-size:clamp(18px,3vw,40px);font-weight:900}
.presenter-buzzer-team{padding:10px 16px;border-radius:12px;background:var(--team-color);color:var(--ink)}
.presenter-buzzer-winner strong{font:inherit}
.presenter-content :is(h2,h3,p,span){overflow-wrap:anywhere}
.presenter-content .task-media{width:100%}
.presenter-content.presenter-with-image .ux-presenter-question{padding:clamp(20px,2.5vw,36px)}
.presenter-with-image .ux-presenter-question h2{font-size:clamp(24px,3vw,44px)}
.ux-presenter-task .task-media{color:var(--white)}
/* Presenter media follows the question centrally at every screen width. */
.presenter-with-image .task-image-open{width:min(100%,1000px)}
.presenter-with-image .task-image-open img{width:100%;max-height:min(55dvh,650px);object-fit:contain}
.presenter-answer-points{display:block;margin-top:18px;font-size:clamp(22px,3vw,40px);text-align:right}