/* Videoportal – Handy/Tablet-optimiert (mobile first)
   Farben hier zentral anpassen (dunkel + rot + hell). */
:root {
    --brand: #990100;      /* dunkles Rot */
    --brand-dark: #6b0100;  /* Hover: dunkleres Rot */
    --ink: #262626;        /* Schwarz */
    --ink-soft: #5b5e66;
    --bg: #f2f2f2;         /* heller Ton */
    --card: #ffffff;
    --line: #d9d9d9;
    --ok: #1e7a3c;
    --ok-bg: #e6f4ea;
    --err: #b3261e;
    --err-bg: #fce8e6;
    --info-bg: #e8eef7;
    --radius: 14px;
    --tap: 3rem; /* Mindest-Touchhöhe */
}

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

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

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
}

/* ---------- Kopfzeile ---------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem max(1rem, env(safe-area-inset-right)) .6rem max(1rem, env(safe-area-inset-left));
    background: var(--ink);
    color: #fff;
    border-bottom: 4px solid var(--brand);
}
.topbar form { margin: 0; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .02em;
}
.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--brand);
    font-size: .9rem;
}
.brand-name { font-size: 1.05rem; }

.topbar-right { display: flex; align-items: center; gap: .6rem; }

/* Sprachauswahl (reine Links, kein JavaScript) */
.langs { display: flex; gap: .15rem; }
.langs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0 .4rem;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    opacity: .7;
}
.langs a:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.langs a[aria-current="true"] { opacity: 1; background: rgba(255, 255, 255, .2); }

@media (max-width: 28rem) {
    .brand-name { display: none; }
}

/* ---------- Inhalt ---------- */
.wrap {
    flex: 1;
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    padding: 1rem max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left));
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-top: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.card h1 { margin: 0 0 .75rem; font-size: 1.5rem; line-height: 1.2; }
.card p { margin: 0 0 1rem; }

hr { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; }

.muted { color: var(--ink-soft); }
.small { font-size: .875rem; }
.hint { color: var(--ink-soft); font-weight: 400; font-size: .875rem; }
.links { margin: 1rem 0 0; text-align: center; }

a { color: var(--brand-dark); }
a:hover { color: var(--brand); }

/* ---------- Formulare ---------- */
label { display: block; margin: 1rem 0 .35rem; font-weight: 600; }

input[type="email"],
input[type="password"],
input[type="text"] {
    width: 100%;
    min-height: var(--tap);
    padding: .65rem .8rem;
    font: inherit;
    font-size: 1rem; /* 16px verhindert Zoom auf iOS */
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    appearance: none;
}
input:focus {
    outline: 3px solid rgba(200, 16, 46, .25);
    border-color: var(--brand);
}

.code-input {
    text-transform: uppercase;
    letter-spacing: .3em;
    text-align: center;
    font-size: 1.4rem !important;
    font-weight: 700;
}

label.check {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: var(--tap);
    margin: .5rem 0 0;
    font-weight: 400;
}
label.check input { width: 1.4rem; height: 1.4rem; accent-color: var(--brand); }

/* ---------- Buttons ---------- */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--tap);
    margin-top: 1rem;
    padding: .65rem 1rem;
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover, .btn-primary:active { background: var(--brand-dark); color: #fff; }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover, .btn-secondary:active { background: var(--ink); color: #fff; }
.btn-ghost {
    width: auto;
    min-height: 2.5rem;
    margin: 0;
    padding: .4rem .9rem;
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------- Meldungen ---------- */
.alert {
    margin: 1rem 0 0;
    padding: .8rem 1rem;
    border-radius: 10px;
    border-left: 5px solid;
}
.card .alert { margin: 0 0 1rem; }
.alert-success { background: var(--ok-bg); border-color: var(--ok); color: #14532b; }
.alert-error { background: var(--err-bg); border-color: var(--err); color: #7a1912; }
.alert-info { background: var(--info-bg); border-color: #3b6bb5; color: #1e3a66; }

/* ---------- Videoseite: Player füllt die gesamte verfügbare Fläche ---------- */
/* YouTube passt das Video selbst in die Fläche ein und zentriert es (Balken links/rechts bzw. oben/unten). */
html.fs, body.fs {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
}
.fs-stage {
    position: fixed;
    inset: 0;
    /* Kamera-Aussparung / abgerundete Ecken freihalten */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: #000;
}
.fs-stage iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}