/* =========================================================
   kontakt.css
   WFB Sittensen
========================================================= */

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

:root{
    --blau:#0b5184;
    --blau-hell:#147aa3;
    --gold:#ffd21a;
    --text:#18364e;
    --grau:#6a7885;
    --rand:#c8d3dc;
}

html{
    font-size:16px;
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--text);
    background:linear-gradient(180deg,#4f78ad 0%,#eca936 55%,#d99227 100%);
}

.kontaktseite{
    width:min(100%,980px);
    margin:40px auto;
    padding:20px;
}

.kontakt-header{
    margin-bottom:30px;
    padding:30px;
    text-align:center;
    color:#fff;
    border-radius:18px;
    background:linear-gradient(135deg,var(--blau),var(--blau-hell));
    box-shadow:0 12px 28px rgb(0 0 0 / 20%);
}

.kontakt-header h1{
    margin:0;
    font-size:clamp(2rem,4vw,3rem);
}

.hinweis{
    margin-top:18px;
    line-height:1.7;
}

.verein{
    margin-top:18px;
    color:var(--gold);
    font-weight:bold;
}

.formularbereich{
    background:#fff;
    padding:35px;
    border-radius:18px;
    box-shadow:0 10px 30px rgb(0 0 0 / 15%);
}

.pflichtinfo{
    color:var(--grau);
}

.stern{color:#c11f1f;}
.optional{color:var(--grau);font-size:.9rem;}
.versteckt{display:none;}

.formular-grid{
    display:flex;
    flex-direction:column;
}

.formularfeld{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    column-gap:24px;
    align-items:center;
    margin-bottom:16px;
}

.formularfeld.feld-ganz{
    align-items:start;
}

.formularfeld.feld-ganz label{
    padding-top:12px;
}

.formularfeld label{
    display:block;
    margin:0;
    font-weight:700;
    text-align:left;
    white-space:nowrap;
}

.formularfeld input:not([type="checkbox"]),
.formularfeld textarea{
    width:100%;
    padding:13px 14px;
    font-size:1rem;
    border:2px solid var(--rand);
    border-radius:8px;
    background:#fff;
    transition:border-color .2s,box-shadow .2s;
}

.formularfeld input{
    height:48px;
}

.formularfeld textarea{
    min-height:190px;
    resize:vertical;
}

.formularfeld input:focus,
.formularfeld textarea:focus{
    outline:none;
    border-color:var(--blau);
    box-shadow:0 0 0 4px rgb(11 81 132 / 15%);
}

.datenschutz{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    column-gap:24px;
    align-items:start;
    margin-top:12px;
}

.datenschutz-titel{
    font-weight:700;
    padding-top:4px;
}

.checkbox{
    display:flex;
    align-items:flex-start;
    gap:12px;
    line-height:1.6;
}

.checkbox input{
    width:20px;
    height:20px;
    margin-top:2px;
}

.checkbox a{
    color:var(--blau);
    font-weight:bold;
    text-decoration:none;
}

.checkbox a:hover{
    text-decoration:underline;
}

.statusmeldung{
    margin-left:244px;
    margin-top:15px;
    min-height:24px;
}

.buttonbereich{
    margin-left:244px;
    display:flex;
    gap:18px;
    margin-top:30px;
    flex-wrap:wrap;
}

.button-senden,
.button-reset{
    min-width:220px;
    padding:14px 24px;
    border-radius:10px;
    font-size:1rem;
    font-weight:bold;
    cursor:pointer;
}

.button-senden{
    border:none;
    color:#08315d;
    background:var(--gold);
}

.button-reset{
    background:#fff;
    border:2px solid var(--rand);
    color:var(--blau);
}

.kontakt-footer{
    margin-top:30px;
    padding:20px;
    text-align:center;
    color:#fff;
    background:rgb(6 61 112 / 88%);
    border-radius:16px;
}

.kontakt-footer a{
    color:var(--gold);
}

@media (max-width:700px){

    .kontaktseite{
        margin:0;
        padding:12px;
    }

    .formularbereich{
        padding:20px 16px;
    }

    .formularfeld,
    .datenschutz{
        display:flex;
        flex-direction:column;
        gap:8px;
    }

    .formularfeld label{
        white-space:normal;
    }

    .buttonbereich,
    .statusmeldung{
        margin-left:0;
    }

    .buttonbereich{
        flex-direction:column;
    }

    .button-senden,
    .button-reset{
        width:100%;
        min-width:0;
    }
}