/*
 * Stylesheet der Teilnehmenden-Seite.
 * Farben und Schrift stammen von der dgp-Testseite (docs/design-reference.md), das Layout ist
 * bewusst anders: ein schmales, zentriertes Formular, damit die Seite nicht mit der Testplattform
 * verwechselt wird. Kein Bootstrap, keine externen Abhängigkeiten.
 */

:root {
    --dgp-body-bg: #ededed;
    --dgp-card-bg: #fff;
    --dgp-card-border: rgba(0, 0, 0, 0.1);
    --dgp-primary: #007f99;
    --dgp-primary-hover: #005f73;
    --dgp-primary-hover-border: #005566;
    --dgp-focus-ring: #007f99cc;
    --dgp-danger: #dd0000;
    --dgp-danger-bg: #fdeaea;
    --dgp-text: #212529;
    --dgp-text-muted: #464e55;
    --dgp-text-small: #666;
    --dgp-link: #00707f;
    --dgp-link-hover: #004c5c;
    --dgp-input-border: #ced4da;
}

/* ---------- Grundlagen ---------- */

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

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

body {
    margin: 0;
    background: var(--dgp-body-bg);
    color: var(--dgp-text);
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.5;
}

a {
    color: var(--dgp-link);
    text-decoration: underline;
}

a:hover,
a:focus {
    color: var(--dgp-link-hover);
}

p {
    margin: 0 0 1rem;
}

img {
    vertical-align: middle;
    border: 0;
}

.text-muted {
    color: var(--dgp-text-muted);
}

.text-small {
    font-size: 0.85em;
    color: var(--dgp-text-small);
}

.hint {
    margin: 1.25rem 0 0;
    text-align: center;
}

[hidden] {
    display: none !important;
}

/* ---------- Seitenaufbau: alles schmal und zentriert ---------- */

.container {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 16px;
}

.header-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin: 40px 0 24px;
    text-align: center;
}

.header-logo {
    height: 48px;
    width: auto;
}

.header-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: normal;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dgp-text-muted);
}

@media screen and (max-width: 576px) {
    .header-row {
        margin: 24px 0 16px;
    }

    .header-logo {
        height: 40px;
    }
}

/* ---------- Karte ---------- */

.card {
    background: var(--dgp-card-bg);
    border: 1px solid var(--dgp-card-border);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 2rem 1.75rem;
    margin-bottom: 1.5rem;
}

@media screen and (max-width: 576px) {
    .card {
        padding: 1.5rem 1.25rem;
    }
}

h1 {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.25;
    text-align: center;
}

.lead {
    text-align: center;
    color: var(--dgp-text-muted);
    margin-bottom: 1.5rem;
}

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

.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: bold;
    text-align: center;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-family: inherit;
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-align: center;
    color: var(--dgp-text);
    background: #fff;
    border: 1px solid var(--dgp-input-border);
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
    outline: 0;
    border-color: var(--dgp-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 127, 153, 0.25);
}

.form-control.is-invalid {
    border-color: var(--dgp-danger);
}

.error-message {
    display: block;
    margin-top: 0.75rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.9em;
    color: var(--dgp-danger);
    background: var(--dgp-danger-bg);
    border: 1px solid rgba(221, 0, 0, 0.3);
    border-radius: 4px;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-block;
    padding: 0.7rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:hover,
.btn:focus {
    text-decoration: none;
}

.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--dgp-focus-ring);
}

.btn-block {
    display: block;
    width: 100%;
}

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

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background: var(--dgp-primary-hover);
    border-color: var(--dgp-primary-hover-border);
}

.btn-default {
    padding: 0.45rem 0.8rem;
    font-size: 0.9rem;
    font-weight: normal;
    color: #333;
    background: #fff;
    border-color: #ccc;
}

.btn-default:hover,
.btn-default:focus {
    color: #333;
    background: #e6e6e6;
    border-color: #adadad;
}

/* ---------- Erfolgsseite ---------- */

.success-text {
    text-align: center;
}

.tan-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin: 1.5rem 0;
}

.tan-display {
    display: block;
    width: 100%;
    padding: 0.9rem 0.5rem;
    font-size: 1.9rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-align: center;
    color: var(--dgp-primary);
    background: #f2f8f9;
    border: 2px solid var(--dgp-primary);
    border-radius: 4px;
    white-space: nowrap;
}

.copy-feedback {
    font-size: 0.9em;
    color: var(--dgp-text-muted);
    text-align: center;
}

.test-link {
    text-align: center;
    margin-top: 1.25rem;
}

@media screen and (max-width: 400px) {
    .tan-display {
        font-size: 1.5rem;
    }
}

/* ---------- Kontakt: kompakt unter der Karte ---------- */

.contact {
    text-align: center;
    font-size: 0.85em;
    color: var(--dgp-text-muted);
    margin-bottom: 1.5rem;
}

.contact p {
    margin: 0;
}

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

.footer {
    text-align: center;
    margin: 1.5rem 0 2.5rem;
}

.footer small {
    font-size: 0.8em;
}

/* ---------- Fehlerdetails (nur bei debug = true) ---------- */

.debug {
    overflow-x: auto;
    padding: 0.75rem;
    font-size: 0.75rem;
    text-align: left;
    background: #f7f7f7;
    border: 1px solid var(--dgp-card-border);
    white-space: pre-wrap;
}