/*
 * Kaufformular und Danke-Seite.
 *
 * Bis 04.08.2026 brachte das Plugin gar kein CSS mit. Damit standen Beschriftung
 * und Feld nebeneinander statt uebereinander (label ist von Haus aus inline),
 * die Felder waren 204 px breit in einem 315 px breiten Formular und die
 * Ankreuzflaeche mass 13x13 px. Auf dem Handy sah der Bezahlweg dadurch kaputt
 * aus.
 *
 * Bewusst KEINE eigene Optik: Das Theme gibt eckige Kanten, die Schrift Brose,
 * Economica fuer Ueberschriften und den gedeckten Akzent rgb(107,121,126) vor.
 * Hier steht nur, was zum Aufbau noetig ist - Farben, Rahmen und Schriften
 * bleiben dem Theme ueberlassen.
 */

/* --- Aufbau ------------------------------------------------------------ */

.strukturpflug-kauf {
    margin-top: 2.5em;
}

.strukturpflug-kauf form p {
    margin-bottom: 1.4em;
}

/* Der Kern des Problems: label und Hinweis waren inline. */
.strukturpflug-kauf label {
    display: block;
    margin-bottom: 0.4em;
}

.strukturpflug-kauf input[type="text"],
.strukturpflug-kauf input[type="email"],
.strukturpflug-kauf textarea {
    width: 100%;
    box-sizing: border-box;
}

.strukturpflug-hinweis {
    display: block;
    margin-top: 0.5em;
    font-size: 0.9em;
    opacity: 0.85;
}

/* --- Ankreuzfeld ------------------------------------------------------- */

/*
 * Beschriftung neben das Kaestchen, nicht darunter - und das Kaestchen gross
 * genug zum Treffen. 13x13 px lagen deutlich unter der Zielgroesse, die
 * WCAG 2.5.8 verlangt.
 *
 * KEIN display:flex auf dem label. Das hatte ich zuerst, und es macht aus
 * "Ich akzeptiere die", dem Link und dem Sternchen drei eigene Flex-Elemente -
 * der Satz zerfaellt, "die" rutschte in die naechste Zeile. Stattdessen bleibt
 * der Text ganz normaler Fliesstext, und das Kaestchen sitzt absolut in einem
 * freigehaltenen Streifen links davon.
 */
/*
 * Zusammengesetzter Selektor, damit die Regel nicht nur deshalb gewinnt, weil
 * sie weiter unten steht: ".strukturpflug-kauf label" hat dieselbe Spezifitaet
 * und trifft dasselbe Element. Wer die Datei einmal umsortiert, wuerde das
 * sonst lautlos umkippen.
 */
.strukturpflug-kauf .strukturpflug-datenschutz label {
    display: block;
    position: relative;
    padding-left: 2.2em;
    margin-bottom: 0;
}

.strukturpflug-datenschutz input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 1.4em;
    height: 1.4em;
    margin: 0;
}

/* --- Knopf ------------------------------------------------------------- */

/*
 * Groesser statt bunter: Die Farbe bleibt die des Themes, nur die Trefferflaeche
 * waechst auf die empfohlenen 48 px. Auf schmalen Schirmen ueber die volle
 * Breite, weil daneben ohnehin nichts steht.
 */
.strukturpflug-kauf button[type="submit"] {
    min-height: 48px;
    padding-left: 1.6em;
    padding-right: 1.6em;
}

@media (max-width: 768px) {
    .strukturpflug-kauf button[type="submit"] {
        width: 100%;
    }
}

/* --- Meldung ----------------------------------------------------------- */

.strukturpflug-meldung {
    margin-bottom: 1.5em;
    padding: 0.9em 1.1em;
    border-left: 4px solid currentColor;
    background: #fafafa;
}

/* --- Danke-Seite ------------------------------------------------------- */

.strukturpflug-danke-nummer {
    font-size: 1.15em;
}

.strukturpflug-danke-nummer strong {
    letter-spacing: 0.06em;
}