/* Schlicht: Systemschrift (keine externen Schriften), eine Spalte, Videos in 16:9. */

*,
*::before,
*::after { box-sizing: border-box; }

:root {
    --text: #111;
    --grau: #666;
    --linie: #ddd;
    --flaeche: #f4f4f4;
    --rot: #c00;
}

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: #fff;
    color: var(--text);
    font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: inherit; }

.seite {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 32px;
}

/* ---------- Kopf ---------- */

.kopf {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--linie);
}

.logo { width: 90px; height: auto; }

.kopf h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
}

/* ---------- Blöcke ---------- */

.block { margin-top: 32px; }

.block h2 {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
}

.live {
    display: inline-block;
    margin-right: 6px;
    padding: 0 8px;
    border-radius: 3px;
    background: var(--rot);
    color: #fff;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    vertical-align: 2px;
}

.zeit {
    margin: 2px 0 12px;
    color: var(--grau);
}

.leer,
.hinweis {
    margin: 12px 0 0;
    padding: 16px;
    background: var(--flaeche);
}

.hinweis { margin-top: 24px; }

/* ---------- Video / Platzhalter ---------- */

.video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #222;
    color: #eee;
}

.video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.einwilligung {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 16px;
    overflow: auto;
    text-align: center;
    font-size: 15px;
}

.einwilligung p { margin: 0; max-width: 560px; }

.video-titel {
    font-size: 19px;
    font-weight: 600;
}

.laden {
    padding: 10px 20px;
    border: 0;
    border-radius: 4px;
    background: #fff;
    color: #111;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.laden:hover,
.laden:focus-visible { background: #ddd; }

.merken { font-size: 14px; cursor: pointer; }

.youtube-link {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--grau);
}

/* Kleine Bildschirme: Hinweistext kürzer setzen, damit er in den 16:9-Rahmen passt. */
@media (max-width: 600px) {
    .video { aspect-ratio: auto; min-height: 56.25vw; }
    .video:has(iframe) { aspect-ratio: 16 / 9; min-height: 0; }
    .einwilligung { position: static; font-size: 14px; }
    .logo { width: 64px; }
    .kopf h1 { font-size: 24px; }
}

/* ---------- Fußzeile ---------- */

.fuss {
    display: flex;
    gap: 20px;
    margin-top: 48px;
    padding-top: 16px;
    border-top: 1px solid var(--linie);
    font-size: 14px;
    color: var(--grau);
}

/* ---------- Textseiten (Datenschutz) ---------- */

.text { max-width: 720px; }
.text h2 { margin: 32px 0 8px; font-size: 20px; }
.text h3 { margin: 20px 0 4px; font-size: 17px; }
.text p,
.text ul { margin: 0 0 12px; }

.text button {
    padding: 8px 16px;
    border: 1px solid #999;
    border-radius: 4px;
    background: #fff;
    font: inherit;
    cursor: pointer;
}

/* ---------- Anmelden / Einrichten ---------- */

.anmelden { max-width: 420px; margin-top: 32px; }
.anmelden p { margin: 0 0 12px; }
.anmelden label { display: block; margin-bottom: 4px; font-weight: 600; }
.anmelden .zeile { display: flex; gap: 8px; margin-bottom: 12px; }

.anmelden input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #999;
    border-radius: 4px;
    font: inherit;
}

.anmelden button,
.knopf {
    display: inline-block;
    padding: 8px 16px;
    border: 0;
    border-radius: 4px;
    background: var(--text);
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.fehler {
    padding: 12px 16px;
    border-left: 4px solid var(--rot);
    background: #fdecec;
}

.text code { overflow-wrap: anywhere; }