/* ==========================================================================
   /starterliste/ — Einwilligung und Foto fuer die Teilnehmerliste.

   Eigene Datei statt style.css: style.css hat 73 KB, und diesen Abschnitt
   sieht nur, wer den Link aus Veras Anschreiben hat. Eingebunden in
   functions.php, nur auf dieser Seite.

   Gestaltung bewusst ruhig. Das hier ist ein Einwilligungsformular; wer es
   ausfuellt, soll lesen koennen, was er zustimmt - nicht bunt beeindruckt
   werden. Grosse Klickflaechen, weil die Haelfte der Empfaenger es am Handy
   ausfuellt, oft mit einem Hund an der anderen Hand.
   ========================================================================== */

.st-hero {
    background: var(--bg-dark);
    color: #fff;
    padding: calc(var(--header-height) + 48px) 0 48px;
    text-align: center;
}
.st-hero h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 8px 0; color: #fff; }
.st-hero-oben  { color: var(--green); font-size: 14px; letter-spacing: .04em; margin: 0; }
.st-hero-unten { color: #c8ccd4; font-size: 15px; margin: 0; }

.st-seite   { padding-top: 40px; }
.st-schmal  { max-width: 720px; }
.st-vorwort { font-size: 17px; line-height: 1.7; margin-bottom: 28px; }

/* --- Kaesten ------------------------------------------------------------ */
.st-kasten {
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 28px;
    border-left: 4px solid var(--green);
    background: var(--bg-subtle);
}
.st-kasten h2 { margin: 0 0 10px; font-size: 1.25rem; }
.st-kasten p  { margin: 0 0 10px; line-height: 1.65; }
.st-kasten p:last-child { margin-bottom: 0; }
.st-kasten--fehler  { border-left-color: #c0392b; background: #fdf3f2; }
.st-kasten--hinweis { border-left-color: #d19a24; background: #fdf8ec; }

/* --- Formular ----------------------------------------------------------- */
.st-block {
    border: 1px solid var(--border-light, #e3e8e5);
    border-radius: var(--radius);
    padding: 20px 22px 8px;
    margin: 0 0 22px;
    background: #fff;
}
.st-block legend {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    padding: 0 8px;
}
.st-optional {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    color: var(--text-secondary);
}

.st-feld { display: block; margin-bottom: 18px; }
.st-feld--schmal { max-width: 260px; }
.st-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.st-label em { color: #c0392b; font-style: normal; }

.st-feld input[type="text"],
.st-feld input[type="email"],
.st-feld input[type="number"],
.st-feld input[type="file"],
.st-feld textarea {
    width: 100%;
    padding: 11px 13px;
    font-family: var(--font-body);
    font-size: 16px;             /* 16px, sonst zoomt iOS beim Antippen hinein */
    border: 1px solid #ccd3cf;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text);
}
.st-feld textarea { resize: vertical; }
.st-feld input:focus, .st-feld textarea:focus {
    outline: 2px solid var(--green);
    outline-offset: 1px;
    border-color: var(--green);
}
.st-feld--fehler input, .st-feld--fehler textarea { border-color: #c0392b; }

.st-hilfe {
    display: block;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin-top: 6px;
}
.st-hilfe--block { margin: 4px 0 16px; }
.st-fehler {
    display: block;
    font-size: 13.5px;
    color: #c0392b;
    margin-top: 6px;
    font-weight: 600;
}

/* Grosse Klickflaeche: das ganze Kaestchen samt Text ist anklickbar. */
.st-haken {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    line-height: 1.6;
    cursor: pointer;
}
.st-haken input { margin-top: 4px; flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--green-dark); }

.st-radios { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 14px; }
.st-radio  { display: flex; gap: 9px; align-items: center; cursor: pointer; font-size: 15px; }
.st-radio input { width: 19px; height: 19px; accent-color: var(--green-dark); }

.st-einwilligung {
    border: 2px solid var(--green);
    border-radius: var(--radius);
    background: #f2fbf6;
    padding: 6px 20px;
    margin-bottom: 18px;
}
.st-einwilligung--fehler { border-color: #c0392b; background: #fdf3f2; }
.st-einwilligung em { color: #c0392b; font-style: normal; }

.st-pflichtnote { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 22px; }
.st-pflichtnote em { color: #c0392b; font-style: normal; }

.st-senden { font-size: 16px; padding: 14px 30px; }

/* Honigtopf. Nicht display:none - manche Bots ueberspringen genau das. */
.st-topf {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* --- Datenschutzteil ---------------------------------------------------- */
.st-datenschutz {
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid var(--border-light, #e3e8e5);
}
.st-datenschutz h2 { font-size: 1.15rem; margin-bottom: 14px; }
.st-datenschutz ul { margin: 0 0 16px; padding-left: 20px; }
.st-datenschutz li { margin-bottom: 10px; line-height: 1.65; font-size: 15px; }
.st-klein { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

@media (max-width: 639px) {
    .st-hero  { padding: calc(var(--header-height) + 32px) 0 34px; }
    .st-block { padding: 16px 15px 4px; }
    .st-radios { flex-direction: column; gap: 12px; }
    .st-senden { width: 100%; }
}