/* ===========================================================================
   Live-Events (WUKA-Sonderseite)

   Eine eigene Designsprache, weil die drei Seiten im Saal und auf der Buehne
   etwas anderes leisten muessen als die Verwaltung: ein Handy, das aus zehn
   Metern Entfernung lesbar bleibt, und eine Presenter-Ansicht, die der
   Moderator waehrend des Sprechens mit einem Blick erfasst. Die Werte kommen
   aus docs/live-event-mock/{admin,presenter,public}.html.

   Alle Klassen tragen das Praefix "le-", alle Variablen "--le-" - damit kommen
   sie weder MudBlazor noch public-courses.css in die Quere.
   =========================================================================== */

:root {
    --le-primary: #0D4F4F;
    --le-primary-dark: #093A3A;
    --le-primary-tint: #E3F0EF;
    --le-secondary: #4FA8A3;
    --le-coral: #F0644D;
    --le-night: #0A2726;
    --le-surface: #FFFFFF;
    --le-bg: #F4F6F8;
    --le-text: #1F2933;
    --le-text-2: #5F6B76;
    --le-border: #E2E7EB;

    --le-blue: #2B6CB0;
    --le-blue-bg: #E8F0FA;
    --le-orange: #F0644D;
    --le-orange-bg: #FDEBE7;

    --le-ok: #2E7D32;
    --le-ok-bg: #E8F3E9;
    --le-no: #C62828;
    --le-no-bg: #FBEAEA;
    --le-warn: #ED6C02;
    --le-warn-bg: #FDF0E2;

    --le-draft: #1976D2;
    --le-draft-bg: #E7F1FB;
    --le-published: #2E7D32;
    --le-published-bg: #E8F3E9;
    --le-archived: #ED6C02;
    --le-archived-bg: #FDF0E2;
    --le-danger: #C62828;
    --le-danger-bg: #FBEAEA;

    --le-radius: 10px;
    --le-shadow: 0 1px 3px rgba(10, 39, 38, .08), 0 1px 2px rgba(10, 39, 38, .06);
    --le-font: Lato, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

[class*="le-"] {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------- Grundlage */

.le-page {
    font-family: var(--le-font);
    color: var(--le-text);
    font-size: 14px;
    line-height: 1.45;
    background: var(--le-bg);
    padding: 20px 24px 60px;
    margin: 0 auto;
    max-width: 1480px;
}

.le-page-wide {
    max-width: 1560px;
}

.le-page h1,
.le-page h2,
.le-page h3,
.le-page h4,
.le-page p,
.le-page ul {
    margin: 0;
}

.le-page code {
    background: var(--le-primary-tint);
    color: var(--le-primary-dark);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12px;
}

.le-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.le-page-head h1 {
    font-size: 22px;
    color: var(--le-primary);
}

.le-page-head .le-sub {
    color: var(--le-text-2);
    font-size: 13px;
    margin-top: 3px;
}

.le-head-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.le-intro {
    background: #fff;
    border: 1px solid var(--le-border);
    border-left: 4px solid var(--le-secondary);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--le-text-2);
    margin-bottom: 14px;
}

.le-intro b {
    color: var(--le-text);
}

/* -------------------------------------------------------------------- Knoepfe */

.le-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-family: var(--le-font);
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
}

.le-btn-primary {
    background: var(--le-primary);
    color: #fff;
}

.le-btn-coral {
    background: var(--le-coral);
    color: #fff;
}

.le-btn-ghost {
    background: #fff;
    color: var(--le-primary);
    border: 1.5px solid var(--le-primary);
}

.le-btn-quiet {
    background: #fff;
    color: var(--le-text-2);
    border: 1px solid var(--le-border);
}

.le-btn-danger {
    background: #fff;
    color: var(--le-no);
    border: 1.5px solid var(--le-no);
}

.le-btn-sm {
    padding: 5px 10px;
    font-size: 12.5px;
}

.le-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------- Karten */

.le-card {
    background: var(--le-surface);
    border: 1px solid var(--le-border);
    border-radius: var(--le-radius);
    box-shadow: var(--le-shadow);
    margin-bottom: 16px;
}

.le-card-h {
    padding: 11px 14px;
    border-bottom: 1px solid var(--le-border);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.le-card-h h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--le-text-2);
    font-weight: 700;
}

.le-card-b {
    padding: 16px;
}

.le-spacer {
    flex: 1;
}

.le-quiet {
    font-size: 12.5px;
    color: var(--le-text-2);
}

.le-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--le-border);
    margin-bottom: 18px;
    overflow-x: auto;
}

.le-tabs button {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 9px 16px;
    font-family: var(--le-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--le-text-2);
    cursor: pointer;
    white-space: nowrap;
}

.le-tabs button.le-on {
    color: var(--le-primary);
    border-bottom-color: var(--le-primary);
}

.le-cols {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1180px) {
    .le-cols {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------ Formular */

.le-form {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
}

.le-f {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.le-f-3 { grid-column: span 3; }
.le-f-4 { grid-column: span 4; }
.le-f-6 { grid-column: span 6; }
.le-f-8 { grid-column: span 8; }
.le-f-12 { grid-column: span 12; }

@media (max-width: 760px) {
    .le-f-3, .le-f-4, .le-f-6, .le-f-8 { grid-column: span 12; }
}

.le-f label {
    font-size: 12px;
    color: var(--le-text-2);
    font-weight: 600;
}

.le-ctl {
    border: none;
    border-bottom: 1.5px solid var(--le-border);
    padding: 7px 2px;
    font-family: var(--le-font);
    font-size: 14px;
    color: var(--le-text);
    background: transparent;
    width: 100%;
}

.le-ctl:focus {
    outline: none;
    border-bottom-color: var(--le-primary);
}

.le-ctl.le-area {
    border: 1px solid var(--le-border);
    border-radius: 8px;
    padding: 9px;
    min-height: 76px;
    resize: vertical;
}

.le-f .le-hint {
    font-size: 11.5px;
    color: var(--le-text-2);
}

.le-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
}

.le-switch {
    width: 36px;
    height: 20px;
    border: none;
    border-radius: 999px;
    background: var(--le-primary);
    position: relative;
    flex: 0 0 auto;
    cursor: pointer;
    padding: 0;
}

.le-switch i {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
}

.le-switch.le-off {
    background: var(--le-border);
}

.le-switch.le-off i {
    left: 2px;
    right: auto;
}

.le-slugline {
    font-size: 12px;
    color: var(--le-text-2);
}

/* --------------------------------------------------------------------- Pills */

.le-pill {
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.le-p-draft { background: var(--le-draft-bg); color: var(--le-draft); }
.le-p-pub { background: var(--le-published-bg); color: var(--le-published); }
.le-p-arch { background: var(--le-archived-bg); color: var(--le-archived); }
.le-p-type { background: var(--le-primary-tint); color: var(--le-primary-dark); }
.le-p-vis {
    background: var(--le-bg);
    color: var(--le-text-2);
    border: 1px solid var(--le-border);
}

/* ----------------------------------------------- Verwaltung: Sektionsliste */

.le-sec {
    border: 1px solid var(--le-border);
    border-radius: 9px;
    margin-bottom: 10px;
    background: #fff;
}

.le-sec-open {
    border-color: var(--le-primary);
}

.le-sec-h {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    flex-wrap: wrap;
}

.le-sec-open > .le-sec-h {
    background: var(--le-primary-tint);
    border-radius: 8px 8px 0 0;
}

.le-sec-h .le-drag {
    color: var(--le-text-2);
    cursor: grab;
    font-size: 15px;
    background: none;
    border: none;
    padding: 0;
}

.le-no {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--le-primary-tint);
    color: var(--le-primary-dark);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.le-sec-h .le-ti {
    font-weight: 700;
    font-size: 14px;
}

.le-sec-h .le-dur {
    font-size: 12.5px;
    color: var(--le-text-2);
    font-variant-numeric: tabular-nums;
}

.le-sec-b {
    border-top: 1px solid var(--le-border);
    padding: 13px;
    background: #FCFDFD;
    border-radius: 0 0 8px 8px;
}

.le-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--le-border);
    border-radius: 8px;
    padding: 9px 11px;
    margin-bottom: 8px;
    background: #fff;
    font-size: 13px;
}

.le-item .le-ic {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--le-primary-tint);
    color: var(--le-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex: 0 0 auto;
}

.le-item .le-tx {
    flex: 1;
    min-width: 0;
}

.le-item .le-tx small {
    display: block;
    color: var(--le-text-2);
    font-size: 11.5px;
}

.le-item-final {
    border-color: var(--le-coral);
}

.le-item-final .le-ic {
    background: var(--le-coral);
    color: #fff;
}

.le-add-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.le-notes-area {
    border: 1px solid var(--le-border);
    border-left: 3px solid var(--le-archived);
    border-radius: 8px;
    padding: 10px 12px;
    background: #FFFCF7;
    font-family: var(--le-font);
    font-size: 13px;
    color: #6B4A1E;
    min-height: 72px;
    width: 100%;
    resize: vertical;
}

.le-notes-area:focus {
    outline: none;
    border-left-color: var(--le-primary);
}

/* ------------------------------------------- Verwaltung: rechte Spalte */

.le-budget {
    font-size: 13px;
}

.le-budget .le-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--le-border);
}

.le-budget .le-row:last-child {
    border-bottom: none;
}

.le-budget b {
    font-variant-numeric: tabular-nums;
}

.le-bar {
    height: 9px;
    border-radius: 5px;
    background: var(--le-bg);
    overflow: hidden;
    margin: 10px 0 4px;
}

.le-bar i {
    display: block;
    height: 100%;
    background: var(--le-secondary);
}

.le-bar i.le-over {
    background: var(--le-coral);
}

.le-check {
    display: flex;
    gap: 9px;
    font-size: 13px;
    padding: 7px 0;
    align-items: flex-start;
}

.le-check .le-s {
    flex: 0 0 auto;
    font-weight: 700;
}

.le-check.le-ok .le-s { color: var(--le-published); }
.le-check.le-warn .le-s { color: var(--le-archived); }
.le-check.le-bad .le-s { color: var(--le-danger); }

.le-check small {
    display: block;
    color: var(--le-text-2);
    font-size: 11.5px;
}

.le-qr {
    width: 132px;
    height: 132px;
    margin: 4px auto 10px;
    border: 6px solid #fff;
    box-shadow: var(--le-shadow);
    display: block;
}

.le-urlbox {
    background: var(--le-bg);
    border: 1px solid var(--le-border);
    border-radius: 7px;
    padding: 8px 10px;
    font-size: 12px;
    word-break: break-all;
    text-align: center;
}

.le-runs {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.le-runs th,
.le-runs td {
    text-align: left;
    padding: 9px 11px;
    border-bottom: 1px solid var(--le-border);
}

.le-runs th {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--le-text-2);
    font-weight: 700;
}

.le-runs tr:last-child td {
    border-bottom: none;
}

.le-runs td b {
    font-variant-numeric: tabular-nums;
}

.le-foot-note {
    font-size: 12.5px;
    color: var(--le-text-2);
    margin-top: 6px;
}

/* ============================================================== Presenter */

.le-runbar {
    background: var(--le-night);
    color: #fff;
    border-radius: var(--le-radius);
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 18px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.le-runbar .le-crumb {
    color: rgba(255, 255, 255, .65);
    font-size: 13px;
}

.le-runbar .le-crumb b {
    color: #fff;
    font-weight: 600;
}

.le-live-pill {
    background: rgba(240, 100, 77, .18);
    border: 1px solid rgba(240, 100, 77, .5);
    color: #FFBFB4;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.le-clock {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
}

.le-clock b {
    font-size: 16px;
    color: #fff;
}

.le-clock .le-over {
    color: #FFBFB4;
}

.le-clock .le-under {
    color: #BFE6C6;
}

.le-grid {
    display: grid;
    grid-template-columns: 300px 1fr 340px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1280px) {
    .le-grid {
        grid-template-columns: 260px 1fr;
    }

    .le-col-notes {
        grid-column: 1 / -1;
    }
}

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

/* Ablauf links */

.le-flow {
    display: flex;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--le-border);
    align-items: flex-start;
    font-size: 13px;
    width: 100%;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    text-align: left;
    font-family: var(--le-font);
    color: var(--le-text);
    cursor: pointer;
}

.le-flow:last-of-type {
    border-bottom: none;
}

.le-flow .le-no {
    background: var(--le-bg);
    color: var(--le-text-2);
}

.le-flow .le-t {
    flex: 1;
    min-width: 0;
}

.le-flow .le-t b {
    font-weight: 700;
}

.le-flow .le-t small {
    display: block;
    color: var(--le-text-2);
    font-size: 11.5px;
}

.le-flow .le-time {
    font-size: 11.5px;
    color: var(--le-text-2);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
    text-align: right;
}

.le-flow.le-done {
    color: var(--le-text-2);
}

.le-flow.le-done .le-no {
    background: var(--le-ok-bg);
    color: var(--le-ok);
}

.le-flow.le-active {
    background: var(--le-primary-tint);
}

.le-flow.le-active .le-no {
    background: var(--le-primary);
    color: #fff;
}

.le-flow.le-active .le-t b {
    color: var(--le-primary-dark);
}

.le-flow.le-skipped .le-no {
    background: var(--le-warn-bg);
    color: var(--le-warn);
}

.le-flow.le-skipped .le-t b {
    text-decoration: line-through;
}

.le-flow .le-time.le-over {
    color: var(--le-no);
    font-weight: 700;
}

.le-flow .le-time.le-under {
    color: var(--le-ok);
    font-weight: 700;
}

.le-sec-foot {
    padding: 11px 14px;
    border-top: 1px solid var(--le-border);
    font-size: 12px;
    color: var(--le-text-2);
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* Steuerung Mitte */

.le-stage {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.le-badge {
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.le-b-open { background: var(--le-no-bg); color: var(--le-no); }
.le-b-locked { background: var(--le-warn-bg); color: var(--le-warn); }
.le-b-rev { background: var(--le-ok-bg); color: var(--le-ok); }
.le-b-idle { background: var(--le-bg); color: var(--le-text-2); }

.le-stage .le-count {
    font-size: 13px;
    color: var(--le-text-2);
}

.le-stage .le-count b {
    color: var(--le-text);
    font-size: 16px;
}

.le-qbox {
    border: 1px solid var(--le-border);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 14px;
}

.le-qbox .le-src {
    font-size: 11.5px;
    color: var(--le-text-2);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.le-qbox h2 {
    font-size: 18px;
    line-height: 1.3;
    margin: 6px 0 4px;
}

.le-qbox .le-snap {
    font-size: 11.5px;
    color: var(--le-text-2);
}

.le-ansrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--le-border);
}

.le-ansrow:last-of-type {
    border-bottom: none;
}

.le-ltr {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--le-bg);
    color: var(--le-text-2);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.le-ansrow.le-correct .le-ltr {
    background: var(--le-ok);
    color: #fff;
}

.le-ansrow .le-txt {
    flex: 1;
    font-size: 13.5px;
    min-width: 0;
}

.le-ansrow .le-meter {
    width: 200px;
    height: 10px;
    border-radius: 5px;
    background: var(--le-bg);
    overflow: hidden;
    flex: 0 0 auto;
}

.le-ansrow .le-meter i {
    display: block;
    height: 100%;
    background: var(--le-secondary);
}

.le-ansrow.le-correct .le-meter i {
    background: var(--le-ok);
}

.le-ansrow .le-pct {
    width: 76px;
    text-align: right;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.le-ansrow .le-pct small {
    color: var(--le-text-2);
}

@media (max-width: 700px) {
    .le-ansrow .le-meter {
        width: 90px;
    }
}

.le-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.le-controls .le-btn {
    border-radius: 9px;
    padding: 11px 18px;
    font-weight: 700;
    font-size: 14px;
}

.le-hint {
    font-size: 12px;
    color: var(--le-text-2);
    margin-top: 10px;
}

.le-itemstrip {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.le-itemstrip button {
    border: 1px solid var(--le-border);
    border-radius: 999px;
    padding: 4px 12px;
    font-family: var(--le-font);
    font-size: 12px;
    color: var(--le-text-2);
    background: #fff;
    cursor: pointer;
}

.le-itemstrip button.le-done {
    background: var(--le-ok-bg);
    color: var(--le-ok);
    border-color: #CBE4CD;
}

.le-itemstrip button.le-now {
    background: var(--le-primary);
    color: #fff;
    border-color: var(--le-primary);
}

/* Notizen rechts */

.le-notes {
    font-size: 13.5px;
}

.le-notes .le-dir {
    background: var(--le-warn-bg);
    border-left: 3px solid var(--le-warn);
    border-radius: 6px;
    padding: 9px 11px;
    font-style: italic;
    color: #8A4B00;
    margin-bottom: 11px;
    font-size: 13px;
}

.le-notes .le-say {
    border-left: 3px solid var(--le-secondary);
    padding: 2px 0 2px 11px;
    margin-bottom: 11px;
    white-space: pre-wrap;
}

.le-notes .le-opt-lines {
    background: var(--le-bg);
    border-radius: 6px;
    padding: 9px 11px;
    font-size: 12.5px;
    color: var(--le-text-2);
}

.le-notes .le-opt-lines b {
    color: var(--le-text);
    display: block;
    margin-bottom: 6px;
}

.le-notes .le-opt-lines div {
    margin-bottom: 5px;
}

.le-teams {
    display: flex;
    gap: 10px;
}

.le-teams > div {
    flex: 1;
    border-radius: 9px;
    padding: 11px;
    text-align: center;
}

.le-teams .le-v {
    font-size: 22px;
    font-weight: 800;
}

.le-teams .le-l {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.le-teams .le-n {
    font-size: 11px;
    color: var(--le-text-2);
    margin-top: 2px;
}

.le-t-blue { background: var(--le-blue-bg); color: var(--le-blue); }
.le-t-orange { background: var(--le-orange-bg); color: var(--le-orange); }

.le-kpi {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--le-border);
    gap: 10px;
}

.le-kpi:last-of-type {
    border-bottom: none;
}

.le-kpi b {
    font-variant-numeric: tabular-nums;
}

.le-warnbox {
    background: var(--le-warn-bg);
    border: 1px solid #F3D7AE;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: #8A4B00;
    margin-top: 12px;
}

.le-footbar {
    margin-top: 16px;
    background: #fff;
    border: 1px solid var(--le-border);
    border-radius: var(--le-radius);
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    box-shadow: var(--le-shadow);
    flex-wrap: wrap;
}

.le-footbar .le-conn {
    font-size: 12.5px;
    color: var(--le-text-2);
    display: flex;
    align-items: center;
    gap: 7px;
}

.le-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--le-ok);
    flex: 0 0 auto;
}

.le-dot-off {
    background: var(--le-text-2);
}

/* =============================================== Teilnehmerseite (Handy) */

.le-phone {
    font-family: var(--le-font);
    color: var(--le-text);
    font-size: 14px;
    line-height: 1.45;
    background: var(--le-surface);
    min-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    max-width: 520px;
    margin: 0 auto;
}

.le-phone h3,
.le-phone h4,
.le-phone p,
.le-phone ul {
    margin: 0;
}

.le-ph-head {
    background: var(--le-primary);
    color: #fff;
    padding: 12px 14px;
    flex: 0 0 auto;
}

.le-ph-head.le-blue {
    background: var(--le-blue);
}

.le-ph-head .le-ev {
    font-size: 11px;
    opacity: .75;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.le-ph-head .le-ti {
    font-size: 15px;
    font-weight: 700;
    margin-top: 2px;
}

.le-ph-head .le-meta {
    font-size: 11px;
    opacity: .9;
    margin-top: 4px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.le-ph-main {
    padding: 14px;
    flex: 1;
}

.le-ph-foot {
    border-top: 1px solid var(--le-border);
    padding: 10px 14px;
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--le-text-2);
    display: flex;
    align-items: center;
    gap: 8px;
}

.le-ph-foot .le-dot {
    width: 7px;
    height: 7px;
}

.le-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
}

.le-chip-live { background: var(--le-no-bg); color: var(--le-no); }
.le-chip-wait { background: var(--le-primary-tint); color: var(--le-primary); }
.le-chip-blue { background: var(--le-blue-bg); color: var(--le-blue); }
.le-chip-orange { background: var(--le-orange-bg); color: var(--le-orange); }

.le-hero {
    height: 112px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--le-primary) 0%, var(--le-secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    padding: 0 16px;
    background-size: cover;
    background-position: center;
}

.le-lead {
    font-size: 13px;
    color: var(--le-text-2);
    margin: 12px 0;
}

.le-kv {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: var(--le-text-2);
    margin-bottom: 4px;
}

.le-kv b {
    color: var(--le-text);
    font-weight: 600;
}

.le-btn-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border-radius: 10px;
    padding: 12px 14px;
    font-weight: 700;
    font-size: 14px;
}

.le-btn-block + .le-btn-block {
    margin-top: 10px;
}

.le-q-text {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 14px;
}

.le-opt {
    border: 1.5px solid var(--le-border);
    border-radius: 10px;
    padding: 12px;
    font-size: 13px;
    margin-bottom: 9px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
    background: #fff;
    font-family: var(--le-font);
    color: var(--le-text);
    text-align: left;
    cursor: pointer;
}

.le-opt[disabled] {
    cursor: default;
}

.le-opt .le-ltr {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--le-primary-tint);
    color: var(--le-primary);
    font-size: 11px;
}

.le-opt.le-sel {
    border-color: var(--le-primary);
    background: var(--le-primary-tint);
}

.le-opt.le-sel .le-ltr {
    background: var(--le-primary);
    color: #fff;
}

.le-opt.le-ok {
    border-color: var(--le-ok);
    background: var(--le-ok-bg);
}

.le-opt.le-ok .le-ltr {
    background: var(--le-ok);
    color: #fff;
}

.le-opt.le-no {
    border-color: var(--le-no);
    background: var(--le-no-bg);
}

.le-opt.le-no .le-ltr {
    background: var(--le-no);
    color: #fff;
}

.le-opt .le-share {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--le-text-2);
}

.le-timer {
    height: 5px;
    border-radius: 3px;
    background: var(--le-border);
    overflow: hidden;
    margin-bottom: 14px;
}

.le-timer i {
    display: block;
    height: 100%;
    background: var(--le-coral);
    transition: width 1s linear;
}

.le-barslim {
    height: 7px;
    border-radius: 4px;
    background: var(--le-border);
    overflow: hidden;
    margin-top: 5px;
}

.le-barslim i {
    display: block;
    height: 100%;
    background: var(--le-primary);
}

.le-barslim.le-blue i { background: var(--le-blue); }
.le-barslim.le-orange i { background: var(--le-orange); }

.le-box {
    border: 1px solid var(--le-border);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.le-box h4 {
    font-size: 13px;
    margin-bottom: 6px;
}

.le-box p {
    font-size: 12.5px;
    color: var(--le-text-2);
}

.le-state-big {
    text-align: center;
    padding: 26px 8px;
}

.le-state-big .le-ico {
    font-size: 40px;
    line-height: 1;
}

.le-state-big h3 {
    font-size: 16px;
    margin: 10px 0 6px;
}

.le-state-big p {
    font-size: 13px;
    color: var(--le-text-2);
}

.le-mem-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

.le-mem-card {
    height: 78px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px;
    border: none;
    font-family: var(--le-font);
    cursor: pointer;
}

.le-mem-card.le-back {
    background: var(--le-primary);
    color: #fff;
    font-size: 20px;
}

.le-mem-card.le-open {
    background: #fff;
    border: 1.5px solid var(--le-primary);
    color: var(--le-primary);
}

.le-mem-card.le-done {
    background: var(--le-ok-bg);
    border: 1.5px solid var(--le-ok);
    color: var(--le-ok);
    cursor: default;
}

.le-card-md {
    border: 1px solid var(--le-border);
    border-left: 4px solid var(--le-secondary);
    border-radius: 10px;
    padding: 13px;
}

.le-card-md h3 {
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--le-primary);
}

.le-card-md p {
    font-size: 12.5px;
    color: var(--le-text-2);
    margin-bottom: 8px;
    white-space: pre-wrap;
}

.le-card-md ul {
    font-size: 12.5px;
    color: var(--le-text-2);
    padding-left: 18px;
}

.le-card-md li {
    margin-bottom: 4px;
}

.le-score {
    display: flex;
    gap: 9px;
    margin-bottom: 14px;
}

.le-score > div {
    flex: 1;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.le-score .le-v {
    font-size: 20px;
    font-weight: 800;
}

.le-score .le-l {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.le-team-blue { background: var(--le-blue-bg); color: var(--le-blue); }
.le-team-orange { background: var(--le-orange-bg); color: var(--le-orange); }

.le-gauge {
    text-align: center;
    margin: 6px 0 14px;
}

.le-gauge .le-v {
    font-size: 38px;
    font-weight: 800;
    color: var(--le-primary);
    line-height: 1;
}

.le-gauge .le-l {
    font-size: 12px;
    color: var(--le-text-2);
}

.le-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    margin-bottom: 9px;
    gap: 10px;
}

.le-stat-row b {
    font-weight: 700;
}

.le-cmp {
    display: flex;
    gap: 10px;
}

.le-cmp > div {
    flex: 1;
    border: 1px solid var(--le-border);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.le-cmp .le-v {
    font-size: 22px;
    font-weight: 800;
}

.le-cmp .le-l {
    font-size: 10.5px;
    color: var(--le-text-2);
    text-transform: uppercase;
}

.le-note {
    font-size: 11.5px;
    color: var(--le-text-2);
    margin-top: 10px;
}

.le-qr-sm {
    width: 110px;
    height: 110px;
    margin: 0 auto 12px;
    border: 5px solid #fff;
    box-shadow: var(--le-shadow);
    display: block;
}

/* =============================================== Einbettung in die Layouts

   Die Mocks zeigen ganze Fenster, die echten Seiten haengen in MudBlazor-Layouts
   mit eigenem Aussenabstand. Zwei Korrekturen, damit das Ergebnis aussieht wie
   gezeichnet: in der Verwaltung kein doppelter Rand, auf dem Handy ein Kopf, der
   bis an den Bildschirmrand reicht. */

.mud-container .le-page {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}

body:has(.le-phone) .mud-main-content .mud-container {
    padding-left: 0;
    padding-right: 0;
}

/* ===================================================================== Leinwand

   Zweites Fenster auf dem Beamer. Alle Groessen in vmin, damit das Bild bei jeder
   Projektorauflösung gleich wirkt: die hinterste Reihe sitzt zehn Meter weg. */

.le-stage-page {
    font-family: var(--le-font);
    background: var(--le-night);
    color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 2.4vmin 3.2vmin;
    gap: 2vmin;
}

.le-stage-head {
    display: flex;
    align-items: center;
    gap: 2vmin;
    font-size: 2.2vmin;
    color: rgba(255, 255, 255, .65);
    flex: 0 0 auto;
}

.le-stage-count {
    font-variant-numeric: tabular-nums;
    color: #fff;
    font-weight: 700;
}

.le-stage-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.le-stage-join {
    display: flex;
    align-items: center;
    gap: 5vmin;
    flex-wrap: wrap;
    justify-content: center;
}

.le-stage-qr {
    width: 42vmin;
    height: 42vmin;
    background: #fff;
    border: 2vmin solid #fff;
    border-radius: 2vmin;
    display: block;
}

.le-stage-qr-sm {
    width: 24vmin;
    height: 24vmin;
    margin: 3vmin auto 0;
}

.le-stage-kicker {
    font-size: 2.6vmin;
    text-transform: uppercase;
    letter-spacing: .4vmin;
    color: var(--le-secondary);
    margin-bottom: 1.2vmin;
}

.le-stage-url {
    font-size: 4.4vmin;
    font-weight: 800;
    word-break: break-all;
}

.le-stage-code {
    font-size: 3vmin;
    margin-top: 1.4vmin;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.le-stage-sub {
    font-size: 2.4vmin;
    color: rgba(255, 255, 255, .7);
    margin-top: 1.6vmin;
    white-space: pre-wrap;
}

.le-stage-center,
.le-stage-card,
.le-stage-question {
    width: 100%;
    max-width: 150vmin;
}

.le-stage-center {
    text-align: center;
}

.le-stage-ico {
    font-size: 12vmin;
    line-height: 1;
}

.le-stage-q {
    font-size: 5.2vmin;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 2.4vmin;
}

.le-stage-text {
    font-size: 3vmin;
    line-height: 1.5;
    color: rgba(255, 255, 255, .85);
    white-space: pre-wrap;
}

.le-stage-big {
    font-size: 4vmin;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.le-stage-row {
    display: flex;
    align-items: center;
    gap: 2vmin;
    padding: 1.4vmin 0;
    font-size: 3vmin;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.le-stage-row:last-of-type {
    border-bottom: none;
}

.le-stage-row .le-ltr {
    width: 5vmin;
    height: 5vmin;
    border-radius: 1.2vmin;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 2.4vmin;
    font-weight: 700;
    flex: 0 0 auto;
}

.le-stage-row.le-correct .le-ltr {
    background: var(--le-ok);
}

.le-stage-row.le-correct .le-txt {
    font-weight: 800;
}

.le-stage-row .le-txt {
    flex: 1;
}

.le-stage-row .le-meter {
    width: 30vmin;
    height: 2vmin;
    border-radius: 1vmin;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
    flex: 0 0 auto;
}

.le-stage-row .le-meter i {
    display: block;
    height: 100%;
    background: var(--le-secondary);
}

.le-stage-row.le-correct .le-meter i {
    background: var(--le-ok);
}

.le-stage-row .le-pct {
    width: 12vmin;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.le-stage-progress {
    margin-top: 3vmin;
    text-align: center;
}

.le-stage-bar {
    height: 2.4vmin;
    border-radius: 1.2vmin;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
    margin-top: 1.6vmin;
}

.le-stage-bar i {
    display: block;
    height: 100%;
    background: var(--le-secondary);
    transition: width .4s ease-out;
}

.le-stage-timer {
    font-size: 3.4vmin;
    font-weight: 800;
    color: var(--le-coral);
    margin-top: 1.4vmin;
    font-variant-numeric: tabular-nums;
}

.le-stage-teams {
    display: flex;
    gap: 2.4vmin;
    flex: 0 0 auto;
}

.le-stage-teams > div {
    flex: 1;
    border-radius: 1.6vmin;
    padding: 2vmin;
    text-align: center;
}

.le-stage-teams .le-v {
    font-size: 5vmin;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.le-stage-teams .le-l {
    font-size: 2vmin;
    text-transform: uppercase;
    letter-spacing: .3vmin;
}

/* Datum und Uhrzeit nebeneinander in einem Feld der Maske. Die MudBlazor-Picker
   bringen ihren eigenen Innenabstand mit, der hier stoert: das Label steht schon
   darueber. */

.le-datetime {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.le-datetime > * {
    min-width: 0;
}

.le-datetime .mud-input-control {
    margin-top: 0;
}

.le-datetime .mud-input-root {
    font-family: var(--le-font);
    font-size: 14px;
}

.le-datetime .le-time {
    max-width: 104px;
    flex: 0 0 auto;
}

/* ================================================= Dunkelmodus (Verwaltung)

   Die Mocks sind hell gezeichnet, und das bleibt die Vorlage: Markenfarben,
   Zustandsfarben und die Leinwand aendern sich nicht. Verwaltung und Presenter
   haengen aber im normalen App-Layout, und dort schaltet der Benutzer um -
   deshalb kommen genau die neutralen Werte (Flaeche, Grund, Text, Linien) aus
   der MudBlazor-Palette und folgen dem Schalter von selbst.

   Die Teilnehmerseite (.le-phone) und die Leinwand (.le-stage-page) stehen
   bewusst ausserhalb: im Saal entscheidet nicht das Geraet, wie die Seite
   aussieht, sondern der Entwurf. */

.le-page {
    --le-surface: var(--mud-palette-surface, #FFFFFF);
    --le-bg: var(--mud-palette-background-gray, #F4F6F8);
    --le-text: var(--mud-palette-text-primary, #1F2933);
    --le-text-2: var(--mud-palette-text-secondary, #5F6B76);
    --le-border: var(--mud-palette-lines-default, #E2E7EB);
}

/* Flaechen, die im hellen Entwurf fest auf Weiss stehen, muessen mitgehen. */

.le-page .le-sec,
.le-page .le-item,
.le-page .le-intro,
.le-page .le-btn-ghost,
.le-page .le-btn-quiet,
.le-page .le-btn-danger,
.le-page .le-footbar,
.le-page .le-itemstrip button {
    background: var(--le-surface);
}

.le-page .le-sec-b {
    background: var(--le-bg);
}

.le-page .le-notes-area {
    background: var(--le-surface);
    color: var(--le-text);
}

.le-stage-winner {
    text-align: center;
    font-size: 3.6vmin;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.6vmin;
}

.le-pair-link {
    color: var(--le-secondary);
    font-size: 3vmin;
    flex: 0 0 auto;
}

.le-hero-img {
    width: 100%;
    height: 112px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.le-box-img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 8px;
    display: block;
}

.le-stage-img {
    max-width: 100%;
    max-height: 46vmin;
    object-fit: contain;
    border-radius: 1.6vmin;
    margin: 2vmin auto 0;
    display: block;
}

.le-thumb {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--le-border);
    background: var(--le-bg);
    flex: 0 0 auto;
    display: block;
}