/*
Theme Name: Sporttempel Theme
Author: Dein Name
Author URI: http://deine-webseite.com
Description: Ein einfaches Theme für den Sporttempel Kiel
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sporttempel-theme
*/

:root {
    --primary-color: rgb(74,101,172);
}

body {
    margin: 0 !important;
    padding: 0 !important;
}

main {
    min-height: 100vh !important;
}

html {
    margin: 0 !important;
    padding: 0 !important;
}

h1, h2, h3, h4, h5 {
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: var(--primary-color);
}


.custom-logo {
    width: auto !important;
    height: 100% !important;
}

.custom-product-thumbnail {
    max-height: 100px !important;
    max-width: 100px !important;
    object-fit: cover !important;
}

.custom-blue {
    background-color: var(--primary-color);	
}

.custom-white {
    background-color: white !important;	
}

.custom-blue-font {
    color: var(--primary-color) !important;	
}

.custom-white-font {
    color: white;
}

.custom-font{
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
 
}

.custom-btn:hover {
    background-color: rgb(107, 134, 202);	

}

/* Beispiel für eine einfache Border */
.custom-border {
    border: 1px solid #000; /* 1px schwarze, solide Border */
}

.custom-border-orange {
    border: 1px solid orange; /* 1px orange, solide Border */
}

/* Beispiel für nur linke Border */
.custom-border-left {
    border-left: 1px solid #000;
}

/* Beispiel für nur rechte Border */
.custom-border-right {
    border-right: 1px solid #000;
}

/* Beispiel für nur obere Border */
.custom-border-top {
    border-top: 1px solid #000;
}

/* Beispiel für nur untere Border */
.custom-border-bottom {
    border-bottom: 1px solid #000;
}



/* Custom Margin Klassen */

/* Sehr kleines Margin */
.custom-m-1 {
    margin: 0.25em !important;
}

/* Kleines Margin */
.custom-m-2 {
    margin: 0.5em !important;
}

/* Mittleres Margin */
.custom-m-3 {
    margin: 1em !important;
}

/* Großes Margin */
.custom-m-4 {
    margin: 1.5em !important;
}

/* Sehr großes Margin */
.custom-m-5 {
    margin: 2em !important;
}

/* Spezifische Seiten (oben, unten, links, rechts) für flexiblere Steuerung */

/* Oben */
.custom-mt-1 { margin-top: 0.25em !important; }
.custom-mt-2 { margin-top: 0.5em !important; }
.custom-mt-3 { margin-top: 1em !important; }
.custom-mt-4 { margin-top: 1.5em !important; }
.custom-mt-5 { margin-top: 2em !important; }

/* Unten */
.custom-mb-1 { margin-bottom: 0.25em !important; }
.custom-mb-2 { margin-bottom: 0.5em !important; }
.custom-mb-3 { margin-bottom: 1em !important; }
.custom-mb-4 { margin-bottom: 1.5em !important; }
.custom-mb-5 { margin-bottom: 2em !important; }

/* Links */
.custom-ml-1 { margin-left: 0.25em !important; }
.custom-ml-2 { margin-left: 0.5em !important; }
.custom-ml-3 { margin-left: 1em !important; }
.custom-ml-4 { margin-left: 1.5em !important; }
.custom-ml-5 { margin-left: 2em !important; }

/* Rechts */
.custom-mr-1 { margin-right: 0.25em !important; }
.custom-mr-2 { margin-right: 0.5em !important; }
.custom-mr-3 { margin-right: 1em !important; }
.custom-mr-4 { margin-right: 1.5em !important; }
.custom-mr-5 { margin-right: 2em !important; }


/* Custom Padding Klassen */

.custom-pm-0 {
    padding: 0;
    margin: 0;
}

/* Sehr kleines Padding */
.custom-p-1 {
    padding: 0.25em !important;
}

/* Kleines Padding */
.custom-p-2 {
    padding: 0.5em !important;
}

/* Mittleres Padding */
.custom-p-3 {
    padding: 1em !important;
}

/* Großes Padding */
.custom-p-4 {
    padding: 1.5em !important;
}

/* Sehr großes Padding */
.custom-p-5 {
    padding: 2em !important;
}

/* Spezifische Seiten (oben, unten, links, rechts) für flexiblere Steuerung */

/* Oben */
.custom-pt-1 { padding-top: 0.25em !important; }
.custom-pt-2 { padding-top: 0.5em !important; }
.custom-pt-3 { padding-top: 1em !important; }
.custom-pt-4 { padding-top: 1.5em !important; }
.custom-pt-5 { padding-top: 2em !important; }

/* Unten */
.custom-pb-1 { padding-bottom: 0.25em !important; }
.custom-pb-2 { padding-bottom: 0.5em !important; }
.custom-pb-3 { padding-bottom: 1em !important; }
.custom-pb-4 { padding-bottom: 1.5em !important; }
.custom-pb-5 { padding-bottom: 2em !important; }

/* Links */
.custom-pl-1 { padding-left: 0.25em !important; }
.custom-pl-2 { padding-left: 0.5em !important; }
.custom-pl-3 { padding-left: 1em !important; }
.custom-pl-4 { padding-left: 1.5em !important; }
.custom-pl-5 { padding-left: 2em !important; }

/* Rechts */
.custom-pr-1 { padding-right: 0.25em !important; }
.custom-pr-2 { padding-right: 0.5em !important; }
.custom-pr-3 { padding-right: 1em !important; }
.custom-pr-4 { padding-right: 1.5em !important; }
.custom-pr-5 { padding-right: 2em !important; }



/* Bilder mit fester Größe und objekt-fit */
.custom-image {
    width: 100%;           
    width: 400px;      
    height: 200px;         
    object-fit: cover;     
    display: block;        
}

/* Flex Container */
.custom-flex {
    display: flex;
}

/* Flex Column - Anordnung in Spalten */
.custom-flex-column {
    display: flex;
    flex-direction: column;
}

/* Flex Row - Anordnung in Zeilen */
.custom-flex-row {
    display: flex;
    flex-direction: row;
}

/* Zentrierung horizontal und vertikal */
.custom-flex-center {
    display: flex;
    justify-content: center;  /* Zentrierung horizontal */
    align-items: center;      /* Zentrierung vertikal */
}

/* Flex-Layout: Gleichmäßige Verteilung der Items mit Abstand */
.custom-flex-space-between {
    display: flex;
    justify-content: space-between; /* Verteilung mit Abstand zwischen den Items */
}

/* Flex-Layout: Items gleichmäßig über die Zeile verteilen */
.custom-flex-space-around {
    display: flex;
    justify-content: space-around; /* Gleichmäßige Verteilung mit Puffer */
}

/* Flex Wrap: Elemente umbrechen lassen, wenn Platz nicht ausreicht */
.custom-flex-wrap {
    display: flex;
    flex-wrap: wrap;
}


    /* Anpassungen für Bilder */
    .course-image {
        width: 100%;
        /* Bild passt sich der Breite an */
        height: auto;
        /* Höhe wird automatisch angepasst */
        margin-bottom: 2em;
    }

    .small-images {
        display: flex;
        /* Flexbox für die kleinen Bilder */
        justify-content: space-between;
        /* Platz zwischen den Bildern */
    }

    .small-images img {
        width: 32%;
        /* Jedes Bild nimmt 32% der Breite ein */
        height: auto;
        /* Höhe wird automatisch angepasst */
        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px;
        /* Mittlerer Schatten */
        margin-bottom: 10px;
        /* Abstand nach unten */
        object-fit: cover;
    }

    /* Beschreibungstext */
    .description {
        text-align: justify;
        /* Blocksatz für Beschreibung */
    }

    /* Abstand zwischen Überschrift und Bild */
    .course-title {
        margin-top: 0;
        /* Überschrift ohne Abstand oben */
    }

    .custom-team-img {
        width: 11rem;
        height: 15rem;
        object-fit:cover;
    }

    /* Für inaktive Indikatoren */
    .indicator-item {
        background-color: lightgray !important; /* Ändere die Farbe zu grau */
    }

    /* Für aktive Indikatoren */
    .indicator-item.active {
        background-color: darkgray !important; /* Ändere die Farbe bei aktivem Zustand */
    }
    
    .custom-border-bottom-2 {
        border-bottom: 5px solid var(--primary-color) !important;
    }

    .custom-border-blue {
        border-color:var(--primary-color) !important;
    }
    
    .custom-appointment {
        display: flex;
        align-items: center;
        justify-items: start;
        margin-left: 0.3em !important;
        margin-top: 0.3em !important;
        padding: 0.5em !important;
    }

    .custom-headerblock {
        display: flex;
        align-items: center;
        justify-items: start;
        background-color: lightgrey;
        margin-left: 0.3em !important;
        margin-top: 0.3em !important;
        padding: 0.5em !important;

    }

    .custom-sideblock-filled {
        display: flex;
        align-items: center;
        justify-items: start;
        background-color: lightgrey;
        margin-left: 0.3em !important;
        margin-top: 0.3em !important;
        padding: 0.5em !important;
    }

    .custom-sideblock-filled {
        display: flex;
        align-items: center;
        justify-items: start;
        margin-left: 0.3em !important;
        margin-top: 0.3em !important;
        padding: 0.5em !important;
    }

    .custom-sideblock p {
        margin: 0;
        padding: 0;
    }

    .grid {
        padding: 0em;
    }

    .label-invalid {
        color: red !important; /* Färbt das Label rot */
    }

    /*in diese grid werden karten geladen*/
    .grid-container {
        display: grid;
        gap: 2rem; /* Abstand zwischen den Grid-Elementen */
    }
    
    @media (max-width: 600px) {
        /* Smartphones */
        .grid-container {
            grid-template-columns: 1fr; /* Eine Spalte */
        }
    }
    
    @media (min-width: 601px) and (max-width: 900px) {
        /* Tablets */
        .grid-container {
            grid-template-columns: 1fr 1fr; /* Zwei Spalten */
        }
    }
    
    @media (min-width: 901px) {
        /* Größere Bildschirme */
        .grid-container {
            grid-template-columns: 1fr 1fr 1fr; /* Drei Spalten */
        }
    }