/*
 * Sprachstand-Check – Startseite, Dankeseite und QR-Aushang (TEIL 32, aus base.css herausgelöst, Regeln unverändert)
 * Nur index.html, test.html, danke.html und qr.html laden diese Datei, jeweils direkt nach base.css – so bleibt die
 * Reihenfolge der Regeln wie vorher. Verwaltung, Anleitungen, Tablet-Einrichtung und Ausdruck brauchen sie nicht.
 */

/* ------------------------------------------------------------ Start und Dank */

.start-card,
.thanks {
    max-width: 720px;
    margin: 24px auto;
    text-align: center;
}

.start-card .button-row,
.thanks .button-row {
    justify-content: center;
}

.start-card .field-label,
.start-card .field-error {
    text-align: left;
}

.event-name {
    margin: 16px 0 8px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.input-code {
    max-width: 320px;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.thanks-text,
.privacy-text {
    white-space: pre-line;
}

.thanks-result {
    max-width: 480px;
    margin: 16px auto;
    padding: 16px;
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: #f7faff;
    text-align: left;
}

.thanks-result p {
    margin: 4px 0;
    font-weight: 600;
}

/* Kennung der anonymen Teilnahme (danke.html, TEIL 13c): groß und gut abzuschreiben */
.thanks-code {
    max-width: 480px;
    margin: 16px auto;
    padding: 16px;
    border: 2px dashed var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
}

.thanks-code p {
    margin: 4px 0;
}

.participant-code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    user-select: all;
}

/* ------------------------------------------------------------ QR-Seite (qr.html) */

.qr-box svg {
    max-width: 100%;
    height: auto;
}

.qr-link {
    overflow-wrap: anywhere;
}

/* Zweiter QR-Code „Anonym auf dem eigenen Smartphone“ (TEIL 13c): nebeneinander ab 700 px und im Ausdruck. */
.qr-pair {
    display: grid;
    gap: 16px 24px;
    margin-top: 16px;
}

/* Spalte mit Überschrift oben; QR-Code, Link und Schaltfläche unten, damit beide Codes auf gleicher Höhe stehen. */
.qr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qr-item h2 {
    margin: 0 0 4px;
    font-size: 1.15rem;
}

.qr-item .qr-box {
    margin-top: auto;
}

.qr-item p {
    margin: 4px 0;
}

@media (min-width: 700px), print {
    .qr-pair {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}