/* Container für die Kacheln selbst (Fügt die Kacheln in zwei Spalten an) */
.download-kacheln-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei gleich breite Spalten */
    gap: 15px; /* Abstand zwischen den Kacheln */
    margin-bottom: 20px;
}

/* Kacheln im Layout anpassen */
.download-kachel {
    /* Behält die Flex-Eigenschaften für Bild und Text bei */
    display: flex;       
    align-items: center; 
    padding: 10px;
    border: 2px solid #ddd;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    border-radius: 4px;
}

/* Aktive (ausgewählte) Kachel (Wird jetzt für Mehrfachauswahl genutzt) */
.download-kachel.selected {
    border-color: #0073aa; 
    background-color: #eaf2fa;
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.5); 
}

/* Responsivität für kleine Bildschirme (Mobile) */
@media (max-width: 600px) {
    .download-kacheln-container {
        grid-template-columns: 1fr; /* Nur eine Spalte auf dem Handy */
    }
}

/* Stelle sicher, dass der Zweispalten-Container im CF7 HTML korrekt definiert ist */
.contact-form-2-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.contact-form-2-columns .col-6 {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
}
.contact-form-2-columns .col-12 {
    width: 100%;
}







/* Container für jede Download-Option formatieren */
.wpcf7-list-item-label .download-option {
    display: flex;       /* Flexbox für nebeneinanderliegende Elemente */
    align-items: center; /* Vertikal zentrieren */
    padding: 10px;
    border: 1px solid #ddd;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 4px;
}

/* Hover- und ausgewählter Effekt */
.wpcf7-list-item-label .download-option:hover {
    background-color: #f5f5f5;
}
.wpcf7-list-item-label input[type="radio"]:checked + .download-option {
    border-color: #0073aa; /* Hervorhebung der Auswahl */
    background-color: #eaf2fa;
}

/* Bild-Thumbnail formatieren und auf max. 100px setzen */
.pdf-thumb {
    width: 100px; /* Die maximale Breite */
    max-width: 100%; 
    height: auto;
    margin-right: 15px; /* Abstand zwischen Bild und Text */
    border-radius: 2px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); 
}

/* Titel des PDFs formatieren */
.pdf-title {
    font-weight: 600;
    color: #333;
    font-size: 1em;
}

/* Radio-Button selbst etwas verstecken, da die gesamte Box klickbar ist */
.wpcf7-list-item-label input[type="radio"] {
    position: absolute; /* Verstecke den Radio-Button */
    opacity: 0;
}

/* Container für die Download-Links */
.download-success {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #d4edda;
    background-color: #f7fff7;
    border-radius: 5px;
}

.download-success h3 {
    color: #155724; /* Dunkelgrün für die Erfolgsmeldung */
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 15px;
}

/* Stil für die Download-Buttons */
a.download-btn {
    display: inline-block;
    padding: 10px 15px;
    margin: 5px 10px 5px 0;
    
    /* Farbschema */
    background-color: #28a745; /* Helles Grün */
    color: white !important; /* Textfarbe auf Weiß setzen */
    border: 1px solid #28a745;
    
    /* Design */
    text-decoration: none; /* Unterstreichung entfernen */
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.1s; /* Animation beim Hover */
}

/* Hover-Effekt */
a.download-btn:hover {
    background-color: #218838; /* Dunkleres Grün beim Überfahren */
    border-color: #1e7e34;
    transform: translateY(-1px); /* Leichter Anhebe-Effekt */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Aktiver (geklickter) Zustand */
a.download-btn:active {
    background-color: #1c7430;
    border-color: #1c7430;
    transform: translateY(0);
}

/*
 * ====================================================
 * 1. BASIS-LAYOUT (Zweispaltig & Responsiv)
 * ====================================================
 */
.contact-form-2-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Abstand zwischen Spalten und Zeilen */
}

.contact-form-2-columns .form-group {
    box-sizing: border-box;
    margin: 0;
}

/* Zweispaltige Felder */
.contact-form-2-columns .col-6 {
    flex-basis: calc(50% - 10px);
    max-width: calc(50% - 10px);
}

/* Einspaltige Felder */
.contact-form-2-columns .col-12 {
    flex-basis: 100%;
    max-width: 100%;
}

/* Styling für Input-Felder */
.contact-form-2-columns input[type="text"],
.contact-form-2-columns input[type="email"],
.contact-form-2-columns textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    display: block;
}

/*
 * ====================================================
 * 2. RADIO-BUTTONS ALS KACHELN (Zentriert, Hover, Aktiv)
 * ====================================================
 */

/* Zentriert den Container der Radio-Buttons (benötigt, da die Kacheln inline-block sind) */
.contact-form-2-columns .col-12:has(.wpcf7-radio) {
    text-align: center;
}

/* Versteckt den Standard-Radio-Kreis */
.contact-form-2-columns input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Stellt die Optionen nebeneinander dar (Kacheln) */
.contact-form-2-columns .wpcf7-list-item {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: left; /* Stellt sicher, dass der Text im Label linksbündig bleibt */
}

/* Styling des Labels (die sichtbare Kachel) */
.contact-form-2-columns .wpcf7-list-item label {
    display: block;
    padding: 10px 15px;
    border: 2px solid #ccc; /* Rahmen */
    border-radius: 4px;
    background-color: #f9f9f9;
    transition: background-color 0.2s, border-color 0.2s;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

/* Mouse-Over-Effekt für die Kacheln (Hover) */
.contact-form-2-columns .wpcf7-list-item label:hover {
    border-color: #0073aa;
    background-color: #e6f7ff;
}

/* 🟢 Aktiv-Zustand: Korrigierter Selektor für den geklickten Zustand */
/* Der Selektor zielt auf das umschließende Label, wenn der darin enthaltene Radio-Button :checked ist */
.contact-form-2-columns .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label {
    border-color: #0073aa; /* Markanter Rahmen um den Text-Container */
    background-color: #d9edf7; /* Heller Hintergrund für den Aktiv-Zustand */
    color: #00568a;
    font-weight: bold;
    /* Da das Label nun direkt das Element nach dem Input ist, stylen wir es direkt: */
    border: 2px solid #0073aa; /* Rahmen wiederholen, falls nötig */
    border-radius: 4px; /* Ecken wiederholen, falls nötig */
}

/* WICHTIG: Manchmal muss das Styling direkt auf den Label-Text innerhalb des List-Items angewendet werden. 
   Hier ein alternativer oder ergänzender Selektor, falls der obere nicht greift: */
.contact-form-2-columns .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label label {
    border-color: #0073aa;
    background-color: #d9edf7; 
    color: #00568a;
    font-weight: bold;
    /* Entfernen Sie alle Border/Padding, da diese jetzt vom .wpcf7-list-item-label kommen könnten. */
    padding: 10px 15px; /* Manchmal nötig, um Padding zu überschreiben */
}


/*
 * ====================================================
 * 3. DOWNLOAD BUTTON (75% Breite & Zentriert)
 * ====================================================
 */

/* Zentriert den Container und somit den Button */
.contact-form-2-columns .form-submit-container {
    text-align: center;
}

/* Setzt den Button auf 75% Breite und zentriert ihn */
.contact-form-2-columns .form-submit-container input[type="submit"] {
    width: 75%; /* 👈 75% Breite */
    max-width: 600px;
    margin: 20px auto 0 auto; /* Zentrierung */
    display: block;
    padding: 15px 20px;
    background-color: #0073aa;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
}

/*
 * ====================================================
 * 4. RESPONSIVITÄT (Mobile-Ansicht)
 * ====================================================
 */
@media (max-width: 768px) {
    .contact-form-2-columns {
        flex-direction: column; /* Stapelt Spalten vertikal */
        gap: 15px;
    }

    .contact-form-2-columns .col-6,
    .contact-form-2-columns .col-12 {
        flex-basis: 100% !important; /* Volle Breite */
        max-width: 100% !important;
    }

    /* Button und Kacheln auf Mobilgeräten volle Breite */
    .contact-form-2-columns .form-submit-container input[type="submit"] {
        width: 100%;
        max-width: 100%;
    }
}