:root {
    --schwarz: #030505;
    --rot: #ed1c26;
    --rot-dunkel: #c8141d;
    --dunkel: #2f2f28;
    --text: #212529;
    --linie: #dee2e6;
    --hell: #f4f5f6;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    background: #fff;
    line-height: 1.5;
}

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

a { color: var(--rot-dunkel); }

/* Kopfbereich */
.topbar { background: var(--schwarz); color: #fff; font-size: .85rem; }
.topbar-inner { display: flex; gap: 20px; justify-content: flex-end; padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: var(--rot); }

.site-header { background: #fff; border-bottom: 3px solid var(--rot); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.brand img { display: block; height: 40px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.main-nav a, .link-button { color: var(--schwarz); text-decoration: none; font-weight: 600; }
.main-nav a:hover, .link-button:hover { color: var(--rot); }
.nav-cta { background: var(--rot); color: #fff !important; padding: 8px 16px; border-radius: 2px; }
.nav-cta:hover { background: var(--rot-dunkel); }
.inline-form { margin: 0; }
.link-button { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }

/* Inhalt */
.content { padding-top: 28px; padding-bottom: 48px; }
h1 { font-size: 1.9rem; margin: 0 0 .5rem; color: var(--schwarz); }
h1::after { content: ""; display: block; width: 64px; height: 4px; background: var(--rot); margin-top: 8px; }
h2 { font-size: 1.2rem; margin: 1.6rem 0 .4rem; color: var(--schwarz); text-decoration: underline; text-decoration-color: var(--rot); text-underline-offset: 4px; }
.lead { color: #555; margin-bottom: 1.2rem; }

.card { background: var(--hell); border: 1px solid var(--linie); padding: 20px; margin: 18px 0; }
.card.narrow { max-width: 520px; }
.haftungstext { background: #fff; border: 1px solid var(--linie); padding: 16px 20px; margin: 16px 0; }
.haftungstext p { margin: .4rem 0 .8rem; text-align: justify; }
.haftungstext h2 { font-size: 1rem; margin-top: 1.2rem; }

/* Formulare */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.grid .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }

label { display: block; font-weight: 600; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel], select {
    width: 100%; padding: 10px 12px; border: 1px solid #adb5bd; border-radius: 2px; font: inherit; background: #fff;
}
input:focus, select:focus, button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 3px solid rgba(237,28,38,.35); outline-offset: 1px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; margin-top: 8px; }
.check input { margin-top: 4px; width: 20px; height: 20px; flex: none; }
.hint { font-size: .85rem; color: #6c757d; margin-top: 4px; }
.field-error, .validation-summary-errors { color: #b4121a; font-size: .9rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.btn { display: inline-block; border: 0; border-radius: 2px; padding: 12px 24px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; background: var(--schwarz); color: #fff; }
.btn:hover { background: var(--dunkel); }
.btn-primary { background: var(--rot); }
.btn-primary:hover { background: var(--rot-dunkel); }
.btn-small { padding: 6px 14px; font-size: .9rem; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; align-items: center; }

/* Unterschrift */
.signature-wrap { border: 2px dashed #adb5bd; background: #fff; }
#signature-canvas { display: block; width: 100%; height: 180px; touch-action: none; cursor: crosshair; }

/* Meldungen */
.alert { padding: 12px 16px; margin: 14px 0; border-left: 5px solid; }
.alert-ok { background: #e7f6ec; border-color: #28a745; color: #145c27; }
.alert-warn { background: #fff4e0; border-color: #e69500; color: #6b4300; }
.alert-fail { background: #fde8e9; border-color: var(--rot); color: #7a0b11; }

/* Tabelle / Status */
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
th { background: var(--schwarz); color: #fff; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: .85rem; font-weight: 700; }
.badge-ok { background: #d9f4df; color: #0b5d1e; }
.badge-off { background: #e9ecef; color: #495057; }

.qr { text-align: center; }
.qr img { width: 280px; max-width: 100%; height: auto; border: 8px solid #fff; box-shadow: 0 0 0 1px var(--linie); }

/* Fussbereich */
.site-footer { background: var(--schwarz); color: #ddd; margin-top: 24px; padding-top: 24px; font-size: .9rem; border-top: 4px solid var(--rot); }
.site-footer a { color: #fff; }
.footer-inner { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.copyright { padding-top: 16px; padding-bottom: 16px; color: #999; }

/* Externe Logins */
.extern { margin-top: 8px; }
.extern form { margin: 8px 0; }
.extern-trenner { text-align: center; position: relative; margin: 18px 0 10px; color: #6c757d; }
.extern-trenner::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--linie); }
.extern-trenner span { position: relative; background: #fff; padding: 0 12px; }
.card .extern-trenner span { background: var(--hell); }
.btn-extern { width: 100%; background: #fff; color: var(--schwarz); border: 1px solid #adb5bd; }
.btn-extern:hover { background: #f1f3f5; }
.btn-microsoft, .btn-entraid { border-left: 4px solid #0078d4; }
.btn-google { border-left: 4px solid #4285f4; }
.btn-apple { background: #000; color: #fff; border-color: #000; }
.btn-apple:hover { background: #222; }

/* Sprachumschalter */
.lang { margin-left: auto; display: flex; gap: .35rem; }
.lang a { padding: .1rem .4rem; border: 1px solid transparent; border-radius: 3px; font-weight: 600; text-decoration: none; }
.lang a.active { border-color: currentColor; }

.radio-group { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.radio { display: flex; align-items: center; gap: 8px; font-weight: 600; padding: 10px 18px; border: 1px solid #ced4da; border-radius: 6px; background: #fff; cursor: pointer; margin: 0; }
.radio input { width: 20px; height: 20px; margin: 0; flex: none; }