/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://example.com/
Description: Ein Child Theme für Twenty Twenty-Five
Author: Andreas Schlack
Author URI: https://wertedatenbank.de/
Template: twentytwentyfive
Version: 1.0
*/


/* 
 * CSS für Spaltenlayout hinzufügen:
 * Füge das CSS aus meinem vorherigen Beispiel hinzu. Es sorgt dafür, dass die Checkboxen in Spalten angeordnet werden:
 */
.wpcf7 {
    max-width: 1000px; /* Beispiel: Erlaubt bis zu 1200px Breite */
    width: 100%; /* Passt sich an den verfügbaren Platz an */
    margin: 0 auto; /* Zentriert das Formular */
}

.checkbox-container .wpcf7-form-control {
    display: grid;
    /* grid-template-columns: repeat(2, 1fr); */ /* Für 2 Spalten */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Dynamische Spaltenbreite */
    gap: 2px; /* Abstand zwischen den Checkboxen */
    align-items: start; /* Sorgt für oben bündige Ausrichtung */
}

.checkbox-container .wpcf7-list-item {
    display: flex;
    align-items: center;
    cursor: pointer; /* Macht das Label klickbar */
}

.checkbox-container input {
    margin-right: 8px;
}

/* im Folgenden ist die Lösung für die Frage:
Eine frage zum Einzug nach zeilenumbruch: Ein label der checkbox, das aus mehreren wörtern besteht,
wie "Anderen Menschen helfen" wird umgebrochen und das wort helfen steht auf der gleichen 
horizontalen position, wie die checkbox. Ich hätte gerne, dass der umgebrochene text weiter
eingerückt ist und das wort "helfen" links mit dem darüber stehenden wort "Anderen" aligned ist?


Erklärung des CSS
display: grid; auf <label>:

Das Grid-Layout ermöglicht es, die Checkbox und den Text in zwei Spalten aufzuteilen:
Spalte 1: Die Checkbox.
Spalte 2: Der Text.
grid-template-columns: auto 1fr;

Die erste Spalte (für die Checkbox) hat eine Breite entsprechend der Checkbox.
Die zweite Spalte (für den Text) nimmt den restlichen Platz ein.
align-items: start;

Sorgt dafür, dass der Text oben beginnt und nicht vertikal zentriert wird.
gap: 8px;

Fügt einen Abstand zwischen Checkbox und Text ein.
*/

.checkbox-container label {
    display: grid; /* Ermöglicht einfache Layout-Anpassung */
    grid-template-columns: auto 1fr; /* Erste Spalte: Checkbox, zweite Spalte: Text */
    align-items: start; /* Text beginnt oben */
    gap: 2px; /* Abstand zwischen Checkbox und Text */
    align-items: start; /* Text und Checkbox oben ausrichten */
}

.checkbox-container input {
    grid-column: 1; /* Checkbox bleibt in der ersten Spalte */
}

.checkbox-container .wpcf7-list-item-label {
    grid-column: 2; /* Text bleibt in der zweiten Spalte */
    text-indent: -0px; /* Optional: zusätzliche Feinjustierung */
}


/* Um den Button am Ende eines Formulars in Contact Form 7 größer zu machen, kannst du CSS verwenden. */
.wpcf7-submit, #weiter-ask-no-email {
    font-size: 20px !important;  /* Schriftgröße */
    padding: 15px 30px;  /* Innenabstand (macht den Button größer) */
    width: auto;  /* Falls du eine feste Breite möchtest, z. B. width: 200px; */
    height: auto; /* Passt die Höhe dynamisch an */
    transition: background-color 0.3s ease-in-out; /* Sanfte Farbänderung */
}

/* Farbe beim Drüberfahren (Hover) */
.wpcf7-submit, #weiter-ask-no-email:hover {
    background-color: lightgreen;
}

/* Farbe beim Draufklicken (Active) */
.wpcf7-submit, #weiter-ask-no-email:active {
    background-color: lightyellow;
}

/* Wenn der Button "Weiter / Absenden" inaktiv ist */
.wpcf7-submit.inactive:hover {
    background-color: orange;  /* Orange, wenn Name oder E-Mail fehlen */
}

/* Wenn der "Weiter ohne E-Mail"-Button inaktiv ist, bleibt er immer grün */
#weiter-ask-no-email.inactive:hover {
    background-color: lightgreen; /* Immer grün, egal ob Name oder E-Mail fehlen */
}

/* Um den "Weiter / Absenden"-Button zu verstecken, wenn er so generiert wird:
 * [submit class:hide-submit "Weiter / Absenden"]
 * anstelle von
 * [submit "Weiter / Absenden"]
 */
.wpcf7 .hide-submit {
  display: none;
}