/* Stand: 26.08.2026 – enthaelt .skt-warnung und die korrigierte .skt-wahl
   ============================================================
   Skippertraining-Anmeldung – Gestaltung
   Nur Systemschriften, keine externen Ressourcen (DSGVO).
   Präfix: skt-
   ============================================================ */

:root {
    --skt-navy:      #0b2545;
    --skt-navy-hell: #16365f;
    --skt-gold:      #c9a227;
    --skt-gold-hell: #f3e4b0;
    --skt-text:      #1c2430;
    --skt-grau:      #5b6879;
    --skt-linie:     #dde3ec;
    --skt-flaeche:   #f4f6f9;
    --skt-weiss:     #ffffff;
    --skt-fehler:    #b3261e;
    --skt-erfolg:    #1d6f42;
    --skt-radius:    6px;
}

* { box-sizing: border-box; }

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

body.skt-body {
    margin: 0;
    padding: 24px 14px 48px;
    background: var(--skt-flaeche);
    color: var(--skt-text);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

.skt-wrap {
    max-width: 780px;
    margin: 0 auto;
    background: var(--skt-weiss);
    border: 1px solid var(--skt-linie);
    border-radius: var(--skt-radius);
    overflow: hidden;
}

/* ---------- Kopf ---------- */
.skt-kopf {
    background: var(--skt-navy);
    color: var(--skt-weiss);
    padding: 20px 24px;
    border-bottom: 4px solid var(--skt-gold);
}
.skt-kopf h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .01em;
}
.skt-kopf p { margin: 6px 0 0; font-size: 14px; color: #c6d3e4; }

/* ---------- Schrittanzeige ---------- */
.skt-schritte {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #eef2f7;
    border-bottom: 1px solid var(--skt-linie);
}
.skt-schritte li {
    flex: 1 1 0;
    padding: 10px 8px;
    text-align: center;
    font-size: 13px;
    color: var(--skt-grau);
    border-right: 1px solid var(--skt-linie);
}
.skt-schritte li:last-child { border-right: 0; }
.skt-schritte li span.skt-nr {
    display: inline-block;
    width: 21px;
    height: 21px;
    line-height: 21px;
    margin-right: 6px;
    border-radius: 50%;
    background: #c9d2df;
    color: var(--skt-weiss);
    font-weight: 700;
    font-size: 12px;
}
.skt-schritte li.skt-aktiv {
    background: var(--skt-weiss);
    color: var(--skt-navy);
    font-weight: 600;
}
.skt-schritte li.skt-aktiv span.skt-nr { background: var(--skt-gold); color: var(--skt-navy); }
.skt-schritte li.skt-fertig span.skt-nr { background: var(--skt-navy); }

/* ---------- Inhalt ---------- */
.skt-inhalt { padding: 22px 24px 26px; }

.skt-intro {
    margin: 0 0 20px;
    padding: 12px 14px;
    background: #f7f9fc;
    border-left: 4px solid var(--skt-gold);
    font-size: 15px;
}

.skt-block-titel {
    margin: 26px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--skt-linie);
    color: var(--skt-navy);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.skt-block-titel:first-child { margin-top: 0; }

/* ---------- Felder ---------- */
.skt-feld { margin: 0 0 16px; }
.skt-feld > label,
.skt-gruppe > legend {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 600;
    color: var(--skt-navy);
}
.skt-gruppe { border: 0; padding: 0; margin: 0 0 16px; }
.skt-gruppe > legend { padding: 0; }

.skt-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: var(--skt-gold);
}

.skt-pflicht { color: var(--skt-fehler); font-weight: 700; }

.skt-feld input[type="text"],
.skt-feld input[type="email"],
.skt-feld input[type="tel"],
.skt-feld select,
.skt-feld textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #b9c3d1;
    border-radius: var(--skt-radius);
    background: var(--skt-weiss);
    color: var(--skt-text);
    font-family: inherit;
    font-size: 15px;
}
.skt-feld textarea { resize: vertical; min-height: 96px; }

.skt-feld input:focus,
.skt-feld select:focus,
.skt-feld textarea:focus,
.skt-btn:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: 3px solid var(--skt-gold);
    outline-offset: 1px;
}

.skt-feld select option:disabled { color: #9aa5b4; }

.skt-hinweis { margin: 5px 0 0; font-size: 13px; color: var(--skt-grau); }

.skt-zeile { display: flex; gap: 14px; flex-wrap: wrap; }
.skt-zeile > * { flex: 1 1 200px; }
.skt-schmal { flex: 0 1 140px; }

/* ---------- Auswahl (Kästchen / Knöpfe) ---------- */
.skt-wahl {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 400;
    color: var(--skt-text);
    cursor: pointer;
}
.skt-wahl input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--skt-navy); }
.skt-wahl span { display: inline; }
.skt-wahl span .skt-icon { vertical-align: -3px; margin-right: 5px; }

.skt-bestaetigung {
    margin: 22px 0 4px;
    padding: 13px 15px;
    background: #f7f9fc;
    border: 1px solid var(--skt-linie);
    border-radius: var(--skt-radius);
}
.skt-bestaetigung a { color: var(--skt-navy); }

/* ---------- Extras ---------- */
.skt-extra {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--skt-linie);
    border-radius: var(--skt-radius);
    background: #fcfdff;
}
.skt-extra:hover { border-color: var(--skt-gold); }
.skt-extra input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--skt-navy); }
.skt-extra-text { flex: 1 1 auto; }
.skt-extra-titel {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
    color: var(--skt-navy);
}
.skt-extra-preis { color: var(--skt-gold); white-space: nowrap; }
.skt-extra-beschreibung { margin: 4px 0 0; font-size: 14px; color: var(--skt-grau); }

/* ---------- Summe ---------- */
.skt-summe {
    margin: 18px 0 4px;
    padding: 12px 15px;
    background: var(--skt-navy);
    color: var(--skt-weiss);
    border-radius: var(--skt-radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 16px;
}
.skt-summe strong { color: var(--skt-gold-hell); font-size: 19px; }

/* ---------- Schaltflächen ---------- */
.skt-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--skt-linie);
}
.skt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid var(--skt-navy);
    border-radius: var(--skt-radius);
    background: var(--skt-navy);
    color: var(--skt-weiss);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.skt-btn:hover { background: var(--skt-navy-hell); }
.skt-btn-gold { background: var(--skt-gold); border-color: var(--skt-gold); color: var(--skt-navy); }
.skt-btn-gold:hover { background: #b8931f; border-color: #b8931f; }
.skt-btn-still { background: transparent; color: var(--skt-navy); }
.skt-btn-still:hover { background: #eef2f7; }

/* ---------- Meldungen ---------- */
.skt-fehlerbox {
    margin: 0 0 20px;
    padding: 13px 15px;
    border: 1px solid var(--skt-fehler);
    border-left-width: 4px;
    border-radius: var(--skt-radius);
    background: #fdf3f2;
    color: #7d1a15;
}
.skt-fehlerbox p { margin: 0 0 6px; font-weight: 600; }
.skt-fehlerbox ul { margin: 0; padding-left: 20px; font-size: 15px; }

.skt-feldfehler { margin: 5px 0 0; font-size: 13px; color: var(--skt-fehler); font-weight: 600; }
.skt-feld.skt-hat-fehler input,
.skt-feld.skt-hat-fehler select,
.skt-feld.skt-hat-fehler textarea { border-color: var(--skt-fehler); }

/* ---------- Übersicht ---------- */
.skt-pruef {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 6px;
}
.skt-pruef th,
.skt-pruef td {
    padding: 9px 10px 9px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #eef1f6;
    font-size: 15px;
}
.skt-pruef th { width: 38%; font-weight: 400; color: var(--skt-grau); }
.skt-pruef td { font-weight: 600; }

.skt-extras-kasten {
    margin: 18px 0;
    padding: 13px 15px;
    border: 2px solid var(--skt-gold);
    background: #fdf8e8;
    border-radius: var(--skt-radius);
}
.skt-extras-kasten h3 { margin: 0 0 8px; font-size: 15px; color: var(--skt-navy); }
.skt-extras-kasten ul { margin: 0; padding-left: 20px; }

/* ---------- Danke-Seite ---------- */
.skt-danke-anrede { font-weight: 600; font-size: 17px; margin: 0 0 12px; }
.skt-danke-text { margin: 0 0 18px; }
.skt-tipp {
    margin: 20px 0;
    padding: 14px 16px;
    border: 2px solid var(--skt-gold);
    border-left-width: 6px;
    background: #fdf8e8;
    border-radius: var(--skt-radius);
}
.skt-tipp strong { color: var(--skt-navy); }
.skt-tipp a { color: var(--skt-navy); font-weight: 700; }

/* ---------- Fuß ---------- */
.skt-fuss {
    padding: 14px 24px 18px;
    border-top: 1px solid var(--skt-linie);
    background: #f7f9fc;
    font-size: 13px;
    color: var(--skt-grau);
}

/* Trennlinie mit Kompassstern in der Mitte (reines CSS, kein externes Bild) */
.skt-trenner {
    border: 0;
    height: 26px;
    margin: 26px 0;
    background-image:
        linear-gradient(to right, rgba(221, 227, 236, 0), var(--skt-linie) 14%, var(--skt-linie) 86%, rgba(221, 227, 236, 0)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11.5' fill='%23ffffff'/%3E%3Cpath d='M12 2.6 13.45 10.55 21.4 12 13.45 13.45 12 21.4 10.55 13.45 2.6 12 10.55 10.55Z' fill='none' stroke='%23c9a227' stroke-width='1.1' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='1.7' fill='none' stroke='%23c9a227' stroke-width='1.1'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: 100% 1px, 26px 26px;
}

.skt-beschreibung {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 16px;
    padding: 11px 13px;
    background: #f7f9fc;
    border-radius: var(--skt-radius);
    font-size: 14px;
    color: var(--skt-grau);
}

/* Honigtopf – für Menschen unsichtbar, für Bots sichtbar */
.skt-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skt-zaehler { float: right; font-weight: 400; color: var(--skt-grau); font-size: 13px; }

@media (max-width: 560px) {
    body.skt-body { padding: 0 0 32px; }
    .skt-wrap { border-radius: 0; border-left: 0; border-right: 0; }
    .skt-inhalt { padding: 18px 15px 22px; }
    .skt-kopf { padding: 16px 15px; }
    .skt-kopf h1 { font-size: 19px; }
    .skt-schritte li { font-size: 11px; padding: 8px 4px; }
    .skt-schritte li span.skt-nr { margin-right: 0; display: block; margin: 0 auto 3px; }
    .skt-btn { width: 100%; }
    .skt-pruef th, .skt-pruef td { display: block; width: 100%; border: 0; padding: 2px 0; }
    .skt-pruef td { padding-bottom: 10px; border-bottom: 1px solid #eef1f6; }
}

@media print {
    body.skt-body { background: #fff; }
    .skt-aktionen, .skt-schritte { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* Hilfsklassen (statt Inline-Styles – die CSP verbietet sie) */
.skt-abstand-oben { margin-top: 18px; }
.skt-form-inline { display: contents; }
.skt-tipp p { margin: 0; }

/* Warnhinweis „noch nicht abgeschickt“ auf der Übersichtsseite */
.skt-warnung {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 22px;
    padding: 14px 16px;
    background: #fdf8e8;
    border: 2px solid var(--skt-gold);
    border-left-width: 6px;
    border-radius: var(--skt-radius);
}
.skt-warnung-symbol {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--skt-navy);
}
.skt-warnung-symbol .skt-icon { width: 19px; height: 19px; color: var(--skt-gold-hell); }
.skt-warnung-text strong {
    display: block;
    margin-bottom: 4px;
    color: var(--skt-navy);
    font-size: 17px;
}
.skt-warnung-text p { margin: 0; font-size: 15px; }
.skt-warnung-text em { font-style: normal; font-weight: 600; }

/* Erinnerung direkt über der Absende-Schaltfläche */
.skt-absende-hinweis {
    padding: 11px 14px;
    background: #f7f9fc;
    border-left: 4px solid var(--skt-navy);
    border-radius: var(--skt-radius);
    font-size: 15px;
}
.skt-absende-hinweis strong { color: var(--skt-navy); }