/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/


/*
 * ---------------------------------------------------------
 * Footer
 * ---------------------------------------------------------
 */

.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu li {
    display: inline;
}

.footer-menu li:not(:last-child)::after {
    content: " | ";
    margin: 0 8px;
}


/*
 * ---------------------------------------------------------
 * Kontaktformular
 * ---------------------------------------------------------
 */

.kontaktformular {
    max-width: 600px;
}

.kontaktformular input,
.kontaktformular textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin-top: 5px;
}

.kontaktformular button {
    padding: 10px 20px;
    cursor: pointer;
}

.kontakt-erfolg {
    color: green;
}

.kontakt-fehler {
    color: red;
}

.kontakt-honeypot {
    display: none !important;
}


/*
 * ---------------------------------------------------------
 * Event Organiser
 * ---------------------------------------------------------
 */


/*
 * Nächster Termin
 *
 * Grauer Hintergrund ohne Rahmen
 */

.eo-next-event-box {
    border: none;
    background: #f1f1f1;
    padding: 24px;
    margin: 0 0 30px 0;
    box-sizing: border-box;
}


/*
 * Weitere Termine
 *
 * Grauer Hintergrund ohne Rahmen
 */

.eo-more-events-box {
    border: none;
    background: #f1f1f1;
    padding: 24px;
    margin: 0 0 30px 0;
    box-sizing: border-box;
}


/*
 * Überschriften in den Event-Boxen
 */

.eo-next-event-box h2,
.eo-more-events-box h2 {
    margin-top: 0;
    margin-bottom: 20px;
}


/*
 * Termin Details
 */

.eo-next-event-details {
    margin-bottom: 25px;
}

.eo-next-event-details h4 {
    margin-top: 0;
    margin-bottom: 15px;
}

.eo-next-event-details ul {
    margin-top: 0;
    margin-bottom: 0;
}


/*
 * Inhalt des nächsten Termins
 */

.eo-next-event-content {
    margin-top: 25px;
}

.eo-next-event-content > :first-child {
    margin-top: 0;
}

.eo-next-event-content > :last-child {
    margin-bottom: 0;
}


/*
 * Bilder im Termin
 *
 * Verhindert, dass Bilder breiter als
 * der verfügbare Inhaltsbereich werden.
 */

.eo-next-event-content img {
    max-width: 100%;
    height: auto;
}


/*
 * ---------------------------------------------------------
 * Tabelle "Weitere Termine"
 * ---------------------------------------------------------
 *
 * Weißer Hintergrund innerhalb der grauen Box
 */

.eo-event-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    background: #ffffff;
}

.eo-event-table th,
.eo-event-table td {
    padding: 8px;
    text-align: left;
    vertical-align: top;
    border: 1px solid #dddddd;
}

.eo-event-table th {
    background: #f7f7f7;
    font-weight: 600;
}


/*
 * Spaltenbreiten
 */

.eo-event-table th:nth-child(1),
.eo-event-table td:nth-child(1) {
    width: 90px;
}

.eo-event-table th:nth-child(2),
.eo-event-table td:nth-child(2) {
    width: 70px;
}


/*
 * ---------------------------------------------------------
 * Mobile Darstellung
 * ---------------------------------------------------------
 */

@media (max-width: 600px) {

    /*
     * Auf kleinen Displays etwas weniger Innenabstand
     */

    .eo-next-event-box,
    .eo-more-events-box {
        padding: 16px;
    }

    /*
     * Tabelle kompakter darstellen
     */

    .eo-event-table th,
    .eo-event-table td {
        padding: 6px;
    }

    /*
     * Keine festen Spaltenbreiten auf kleinen Displays
     */

    .eo-event-table th:nth-child(1),
    .eo-event-table td:nth-child(1),
    .eo-event-table th:nth-child(2),
    .eo-event-table td:nth-child(2) {
        width: auto;
    }
}
/*
 * =========================================================
 * 5. THE POST GRID – BEITRAGSÜBERSICHT
 * =========================================================
 *
 * Design:
 *
 * - Hellgraue äußere Beitragskacheln
 * - Keine Rahmen und keine Schatten
 * - Weiße Bild- und Textbereiche
 * - Einheitliche Innenabstände
 * - Bilder 300 x 220 Pixel
 * - Keine Bildverzerrung oder Beschneidung
 * - Einheitliche Mindesthöhe der Textbereiche
 * - Lesen-Buttons unten ausgerichtet
 *
 * Verwendet stabile CSS-Klassen statt dynamischer IDs.
 */


/*
 * ---------------------------------------------------------
 * 5.1 Äußere Beitragskacheln
 * ---------------------------------------------------------
 */

.rt-tpg-container .rt-holder {
    background: #f1f1f1 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 20px !important;
    box-sizing: border-box;
}


/*
 * ---------------------------------------------------------
 * 5.2 Weißer Bildbereich
 * ---------------------------------------------------------
 *
 * Gleicher horizontaler Innenabstand wie der Text.
 * Bild und Überschrift sind linksbündig.
 */

.rt-tpg-container .rt-holder .rt-img-holder {
    background: #ffffff !important;
    padding: 15px 15px 0 15px !important;
    box-sizing: border-box;
}


/*
 * ---------------------------------------------------------
 * 5.3 Beitragsbilder
 * ---------------------------------------------------------
 *
 * Darstellungsfläche: 300 x 220 Pixel
 * Hoch- und Querformat bleiben vollständig sichtbar.
 */

.rt-tpg-container .rt-img-holder img.rt-img-responsive {
    display: block;
    width: 300px !important;
    max-width: 100% !important;
    height: 220px !important;
    object-fit: contain !important;
    object-position: left center !important;
    background: #ffffff !important;
}


/*
 * ---------------------------------------------------------
 * 5.4 Weißer Textbereich
 * ---------------------------------------------------------
 *
 * Einheitliche Mindesthöhe.
 * Vertikale Flexbox für die Button-Ausrichtung.
 */

.rt-tpg-container .rt-holder .rt-detail {
    background: #ffffff !important;
    min-height: 370px;
    padding: 15px !important;
    box-sizing: border-box;

    display: flex !important;
    flex-direction: column !important;
}


/*
 * ---------------------------------------------------------
 * 5.5 Lesen-Button unten ausrichten
 * ---------------------------------------------------------
 *
 * Das letzte direkte Element im Textbereich
 * wird an den unteren Rand geschoben.
 *
 * Diese Variante wurde im Firefox getestet.
 */

.rt-tpg-container .rt-holder .rt-detail > :last-child {
    margin-top: auto !important;
}


/*
 * =========================================================
 * 6. MOBILE DARSTELLUNG
 * =========================================================
 */

@media (max-width: 600px) {

    /*
     * Event Organiser – Innenabstände
     */

    .eo-next-event-box,
    .eo-more-events-box {
        padding: 16px;
    }

    /*
     * Event Organiser – Tabellen
     */

    .eo-event-table th,
    .eo-event-table td {
        padding: 6px;
    }

    /*
     * Tabellenbreiten auf Mobilgeräten
     */

    .eo-event-table th:nth-child(1),
    .eo-event-table td:nth-child(1),
    .eo-event-table th:nth-child(2),
    .eo-event-table td:nth-child(2) {
        width: auto;
    }

    /*
     * The Post Grid – äußere Kacheln
     */

    .rt-tpg-container .rt-holder {
        padding: 15px !important;
    }

    /*
     * The Post Grid – Bildbereich
     */

    .rt-tpg-container .rt-holder .rt-img-holder {
        padding: 15px 15px 0 15px !important;
    }

    /*
     * The Post Grid – Bilder
     */

    .rt-tpg-container .rt-img-holder img.rt-img-responsive {
        max-width: 100% !important;
    }

    /*
     * The Post Grid – Textbereich
     *
     * Auf Mobilgeräten keine feste Mindesthöhe.
     */

    .rt-tpg-container .rt-holder .rt-detail {
        min-height: 0;
    }
}