/* ==========================================================================
   WKG Zuganmeldung
   Farben/Schriften nach "WKG Design und Elemente" v2.0
   ========================================================================== */

@font-face { font-family: "League Spartan"; font-weight: 700; font-display: swap; src: url("../fonts/league-spartan-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "League Spartan"; font-weight: 800; font-display: swap; src: url("../fonts/league-spartan-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/open-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 600; font-display: swap; src: url("../fonts/open-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 700; font-display: swap; src: url("../fonts/open-sans-latin-700-normal.woff2") format("woff2"); }

:root {
    --red: #E30613;
    --red-dark: #B5202A;
    --red-soft: #fdecee;
    --black: #1D1D1B;
    --ink: #2E2E30;
    --grey: #91959E;
    --grey-light: #A2A1A1;
    --line: #dcdcdf;
    --bg: #e6e6e8;
    --paper: #ffffff;
    --yellow: #FDC300;
    --gold: #BF9617;
    --green: #219A34;

    --display: "League Spartan", "Century Gothic", "Futura", sans-serif;
    --text: "Open Sans", "Century Gothic", system-ui, sans-serif;

    --radius: 8px;
    --focus: 0 0 0 3px rgba(227, 6, 19, .22);
    color-scheme: light;
}

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

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--text);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse at 50% -10%, #f4f4f5 0%, rgba(244, 244, 245, 0) 60%),
        linear-gradient(180deg, #e9e9eb 0%, #dedee1 100%);
    background-attachment: fixed;
    padding: 0 16px;
}

/* Dezentes Konfetti im Hintergrund */
.confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .55;
    background-image:
        radial-gradient(circle, rgba(227, 6, 19, .35) 0 2px, transparent 2.5px),
        radial-gradient(circle, rgba(253, 195, 0, .55) 0 2.5px, transparent 3px),
        radial-gradient(circle, rgba(29, 29, 27, .22) 0 1.5px, transparent 2px),
        radial-gradient(circle, rgba(145, 149, 158, .45) 0 2px, transparent 2.5px);
    background-size: 210px 230px, 260px 190px, 170px 150px, 300px 280px;
    background-position: 20px 40px, 130px 90px, 60px 160px, 200px 10px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 18%, transparent 34%, transparent 66%, #000 82%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 18%, transparent 34%, transparent 66%, #000 82%, #000 100%);
}

a { color: var(--red-dark); text-underline-offset: 2px; }
a:hover { color: var(--red); }
a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }

/* ---------- Blatt ---------- */

.sheet {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 128px auto 56px;
    background: var(--paper);
    border-radius: 4px;
    border-top: 6px solid var(--red);
    box-shadow:
        0 1px 0 rgba(0, 0, 0, .04),
        0 2px 6px rgba(29, 29, 27, .06),
        0 24px 60px -20px rgba(29, 29, 27, .28);
    padding: 0 56px 40px;
    animation: rise .6s cubic-bezier(.2, .8, .2, 1) both;
}

.sheet__head {
    text-align: center;
    padding-top: 104px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
}

.eagle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 168px;
    transform: translate(-50%, -58%);
    filter: drop-shadow(0 10px 14px rgba(29, 29, 27, .22));
    animation: swoop .9s .15s cubic-bezier(.2, 1.3, .4, 1) both;
}
.eagle img { display: block; width: 100%; height: auto; }
.eagle:hover { animation: wobble .6s ease-in-out; }
.eagle:focus-visible { box-shadow: none; outline: 3px solid rgba(227, 6, 19, .4); outline-offset: 4px; border-radius: 50%; }

.kicker {
    margin: 0 0 6px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--grey);
}

.title {
    margin: 0;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(34px, 7vw, 52px);
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--black);
}
.title span { color: var(--red); }

.subtitle {
    display: inline-block;
    margin: 14px 0 0;
    padding: 5px 14px 4px;
    font-weight: 600;
    font-size: 14px;
    color: var(--black);
    background: linear-gradient(transparent 55%, rgba(253, 195, 0, .45) 55%);
}

/* ---------- Hinweise ---------- */

.notice {
    margin: 24px 0 0;
    padding: 14px 16px 14px 44px;
    border-radius: var(--radius);
    font-size: 15px;
    position: relative;
}
.notice--error { background: var(--red-soft); color: var(--red-dark); }
.notice--error::before {
    content: "!";
    position: absolute;
    left: 14px; top: 13px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font: 800 13px/21px var(--display);
    text-align: center;
}
.notice:focus { outline: none; }

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

.form { margin: 0; }

.intro { margin: 24px 0 0; font-size: 14px; color: var(--grey); }
.req-inline, .req { color: var(--red); font-weight: 700; }
.req { margin-left: 2px; display: none; }
.is-required .req { display: inline; }

.section {
    margin: 0;
    padding: 36px 0 8px;
    border: 0;
    border-bottom: 1px solid var(--line);
    min-width: 0;
}
.section:last-of-type { border-bottom: 0; }

.section legend {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0 0 18px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--display);
    font-weight: 800;
    font-size: 21px;
    line-height: 1.2;
    color: var(--black);
}
.section legend + * { clear: both; }

.section__no {
    font-size: 15px;
    font-weight: 800;
    color: var(--red);
    letter-spacing: .04em;
    min-width: 26px;
    font-variant-numeric: tabular-nums;
}

.section__note {
    margin: -8px 0 18px;
    font-size: 14px;
    color: var(--grey);
}

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.row--plz { grid-template-columns: 140px 1fr; }
.row--iban { grid-template-columns: 1.6fr 1fr; }

.field { margin: 0 0 18px; min-width: 0; }

.field label, .field .label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
}

.hint { margin: -3px 0 6px; font-size: 13px; color: var(--grey); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea {
    display: block;
    width: 100%;
    margin: 0;
    padding: 11px 40px 11px 13px;
    font: inherit;
    font-size: 16px; /* verhindert iOS-Zoom */
    color: var(--black);
    background: #fbfbfc;
    border: 1.5px solid #c9cacf;
    border-radius: var(--radius);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
    -webkit-appearance: none;
    appearance: none;
}
textarea { resize: vertical; min-height: 64px; padding-right: 13px; }
input::placeholder, textarea::placeholder { color: #aeb0b6; }

input:hover, textarea:hover { border-color: var(--grey); }
input:focus, textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--black);
    box-shadow: 0 0 0 3px rgba(29, 29, 27, .08);
}

.field--mono input { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* Zustände */
.field.is-valid input:not([type="checkbox"]):not([type="radio"]) {
    border-color: var(--green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23219A34' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
}
.field.is-invalid input:not([type="checkbox"]):not([type="radio"]),
.field.is-invalid textarea {
    border-color: var(--red);
    background-color: #fff;
}
.field.is-invalid input:focus, .field.is-invalid textarea:focus { box-shadow: var(--focus); }

.field-error {
    margin: 0;
    max-height: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    color: var(--red-dark);
    transition: max-height .2s, margin .2s;
}
.field-error:not(:empty) { margin-top: 6px; max-height: 60px; }
.field-error:not(:empty)::before { content: "↑ "; }

/* Zahlen-Felder ohne Spinner */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; padding-right: 13px; text-align: center; font-weight: 700; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field.field--num.is-valid input[type="number"] { background-image: none; }

/* ---------- Ja/Nein ---------- */

.toggle { display: inline-flex; border: 1.5px solid #c9cacf; border-radius: 999px; padding: 3px; background: #fbfbfc; }
.toggle label { margin: 0; position: relative; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle span {
    display: block;
    min-width: 84px;
    padding: 7px 18px;
    border-radius: 999px;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: var(--grey);
    transition: background-color .15s, color .15s;
}
.toggle input:checked + span { background: var(--black); color: #fff; }
.toggle input:focus-visible + span { box-shadow: var(--focus); }
.field.is-invalid .toggle { border-color: var(--red); }

/* ---------- Gebühren ---------- */

.fees {
    margin: 0 0 22px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.fee { padding: 16px 18px 0; border-bottom: 1px solid var(--line); }
.fee__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.fee__title { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--black); }
.fee__price { font-size: 13px; font-weight: 600; color: var(--grey); white-space: nowrap; }
.fee__inputs { display: grid; grid-template-columns: 110px 130px 1fr; gap: 0 16px; align-items: start; }
.fee__inputs .field { margin-bottom: 14px; }
.fee__inputs .field label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--grey); font-weight: 700; }
.fee__inputs .field-error:not(:empty)::before { content: ""; }
.fee__sum {
    align-self: center;
    justify-self: end;
    margin-top: 10px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 18px;
    color: var(--black);
    font-variant-numeric: tabular-nums;
}
.fees.is-invalid { border-color: var(--red); }
.fees__error:not(:empty) { margin: -14px 0 20px; }
.fees__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--black);
    color: #fff;
    font-weight: 600;
}
.fees__total output {
    font-family: var(--display);
    font-weight: 800;
    font-size: 24px;
    color: var(--yellow);
    font-variant-numeric: tabular-nums;
}
.bump { animation: bump .35s ease; }

/* ---------- Rechtstexte & Dokumente ---------- */

.legal {
    font-size: 13.5px;
    line-height: 1.6;
    color: #4a4c52;
    background: #f6f6f7;
    border-left: 3px solid var(--grey-light);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 14px 18px 2px;
    margin: 0 0 18px;
}
.legal p { margin: 0 0 12px; }
.legal__meta { color: var(--black); }

.docs { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.docs a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--black);
    font-weight: 600;
    font-size: 14.5px;
    transition: border-color .15s, transform .15s;
}
.docs a:hover { border-color: var(--red); transform: translateX(3px); }
.docs small { font-weight: 400; color: var(--grey); }
.docs__icon {
    flex: none;
    padding: 4px 6px 3px;
    border-radius: 4px;
    background: var(--red);
    color: #fff;
    font: 800 10px/1 var(--display);
    letter-spacing: .06em;
}

/* ---------- Checkboxen ---------- */

.field--check { margin-bottom: 14px; }
.check { display: flex !important; gap: 12px; align-items: flex-start; cursor: pointer; font-weight: 400 !important; font-size: 15px !important; line-height: 1.5; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
    flex: none;
    width: 24px; height: 24px;
    margin-top: 0;
    border: 1.5px solid #b9bbc1;
    border-radius: 6px;
    background: #fbfbfc;
    transition: background-color .15s, border-color .15s;
    position: relative;
}
.check__box::after {
    content: "";
    position: absolute;
    left: 7px; top: 3px;
    width: 7px; height: 12px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .15s cubic-bezier(.2, 1.4, .4, 1);
}
.check input:checked + .check__box { background: var(--red); border-color: var(--red); }
.check input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check__box { box-shadow: var(--focus); }
.field.is-invalid .check__box { border-color: var(--red); }
.check__label { color: var(--black); }

/* ---------- Absenden ---------- */

.turnstile { margin: 10px 0 16px; min-height: 0; }

.submit__summary { margin: 0 0 12px; font-size: 15px; }
.submit__summary strong { font-family: var(--display); font-size: 18px; color: var(--black); }

.cta {
    position: relative;
    display: block;
    width: 100%;
    padding: 18px 24px 16px;
    border: 0;
    border-radius: var(--radius);
    background: var(--red);
    color: #fff;
    font-family: var(--display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 6px 0 var(--red-dark), 0 14px 24px -10px rgba(227, 6, 19, .6);
    transition: transform .1s, box-shadow .1s, background-color .15s;
}
.cta:hover { background: #ef1220; }
.cta:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--red-dark), 0 6px 12px -8px rgba(227, 6, 19, .6); }
.cta:focus-visible { box-shadow: 0 6px 0 var(--red-dark), 0 0 0 4px rgba(29, 29, 27, .35); }
.cta__busy { display: none; }
.cta[aria-busy="true"] { cursor: progress; background: var(--grey); box-shadow: 0 6px 0 #6d7079; }
.cta[aria-busy="true"] .cta__text { display: none; }
.cta[aria-busy="true"] .cta__busy { display: inline; }

.submit__note { margin: 18px 0 0; font-size: 13px; color: var(--grey); text-align: center; }

/* Honeypot */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Danke / Fehler ---------- */

.done { padding: 36px 0 12px; text-align: center; }
.done__badge svg { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.done__badge circle { stroke: var(--green); stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .6s .2s ease forwards; }
.done__badge path { stroke: var(--green); stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .4s .7s ease forwards; }
.done__title { margin: 14px 0 12px; font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--black); }
.done--error .done__title { color: var(--red-dark); }
.done__lead { font-size: 17px; max-width: 520px; margin: 0 auto 12px; }
.done p { max-width: 540px; margin-left: auto; margin-right: auto; }
.done__facts { display: flex; justify-content: center; gap: 12px; margin: 24px 0; flex-wrap: wrap; }
.done__facts div { padding: 12px 20px; background: #f6f6f7; border-radius: var(--radius); min-width: 170px; }
.done__facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); font-weight: 700; }
.done__facts dd { margin: 2px 0 0; font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--black); }
.done__next { font-size: 14px; color: #55585f; }
.link-back { font-weight: 600; }
.link-back::before { content: "← "; }
.debug { text-align: left; font-size: 12px; white-space: pre-wrap; background: #f6f6f7; padding: 12px; border-radius: 6px; overflow: auto; }

/* ---------- Datenschutz ---------- */

.prose { padding: 28px 0 8px; font-size: 15px; }
.prose h2 { font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--black); margin: 8px 0 12px; line-height: 1.2; }
.prose h3 { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--black); margin: 28px 0 8px; }
.prose ul { padding-left: 20px; }
.prose__meta { color: var(--grey); font-size: 13px; margin-top: 28px; }
.link-back--top { font-size: 14px; }

/* ---------- Footer ---------- */

.sheet__foot {
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    font-size: 13px;
    line-height: 1.6;
    color: #6b6e75;
}
.sheet__foot p { margin: 0; }
.sheet__foot strong { color: var(--black); }
.foot__label { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 11px !important; color: var(--red) !important; margin-bottom: 2px !important; }
.foot__org { text-align: right; align-self: end; }
.foot__legal { grid-column: 1 / -1; display: flex; gap: 18px; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed var(--line); }
.foot__legal span { margin-left: auto; color: var(--grey-light); }

/* ---------- Animation ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes swoop {
    from { opacity: 0; transform: translate(-50%, -90%) rotate(-14deg) scale(.85); }
    to { opacity: 1; transform: translate(-50%, -58%); }
}
@keyframes wobble {
    0%, 100% { transform: translate(-50%, -58%) rotate(0); }
    30% { transform: translate(-50%, -60%) rotate(-5deg); }
    65% { transform: translate(-50%, -58%) rotate(4deg); }
}
@keyframes bump { 40% { transform: scale(1.12); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

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

/* ---------- Responsive ---------- */

@media (max-width: 680px) {
    body { padding: 0 10px; }
    .sheet { margin-top: 96px; padding: 0 20px 28px; }
    .sheet__head { padding-top: 82px; }
    .eagle { width: 132px; }
    .row, .row--iban { grid-template-columns: 1fr; }
    .row--plz { grid-template-columns: 110px 1fr; gap: 0 12px; }
    .section legend { font-size: 19px; }
    .fee { padding: 14px 14px 0; }
    .fee__inputs { grid-template-columns: 1fr 1fr; gap: 0 12px; }
    .fee__sum { grid-column: 1 / -1; margin: -4px 0 12px; }
    .fees__total { padding: 12px 14px; }
    .sheet__foot { grid-template-columns: 1fr; }
    .foot__org { text-align: left; }
    .foot__legal span { margin-left: 0; width: 100%; }
    .cta { font-size: 18px; }
    .confetti { opacity: .3; }
}