.title_green{
    color: #00b59c !important;
}

.section_background{
    background-color: #212121 !important;
}

.section_white{
    background-color: #FFFFFF !important
}

.has-gradient-primary {
    /* Farbverlauf von oben links nach unten rechts */
    background: linear-gradient(135deg, #FFFFFF 0%, #00d1b2 100%) !important;
    /* background-color: #212121 !important; */
}


.section-with-border {
    border: 2px solid #00d1b2; /* Bulma-Primärfarbe */
    border-radius: 12px; /* Abgerundete Ecken */
    padding: 1rem; /* Innenabstand */
    margin: 1rem; /* Außenabstand */
}

/*  Image Container */
.image-fixed-height {
    /*height: 200px;*/ /* Feste Höhe für alle Bilder wird unten definiert*/
    width: 95%;
    background-color: #519b1100;
    overflow: hidden; /* Überschüssige Bildteile abschneiden */
    margin-top: 5px;  /* Rand oben zwischen Border und dem Element drüber */
    margin-bottom: 5px;
    aspect-ratio: 4 / 3;
    padding: 0%;  /* Innenabstand */
    border: 0px solid #d10000;

}

.is-fullheight {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.is-fullheight .card-content {
    flex-grow: 1;
}
/* Standardhöhe für Mobile */
/*.image-fixed-height {
     height: 120px; Höhe für kleinere Geräte 
}*/
/* Für Tablets und größere Bildschirme */
/*@media (min-width: 768px) {
    .image-fixed-height {
        max-height: calc(100% - 25px);
    }
}*/
/* Für Desktops und größere Bildschirme */
/* @media (min-width: 1024px) {
    .image-fixed-height {
        height: 300px; /* Höhe für Desktops */
/*        margin-top: 10px; 
        margin-bottom: 10px; 
        padding: 10%; 
    }
} */

/* Anpassung des Bildes innerhalb der Kachel */
.image-fixed-height img {
    max-height: calc(100% - 25px); /* Bildhöhe an den Container anpassen */
    border-radius: 12px; /* Abgerundete Ecken */
    width: 100%; /* Proportionen beibehalten */
    object-fit: cover; /* Bild gleichmäßig zuschneiden */
    margin: 0px auto; /* Bild horizontal zentrieren */
    display: block; /* Verhindert unerwünschte Leerzeichen unter dem Bild */
}
.custom-shadow {
    box-shadow: 2px 2px 20px rgba(10, 10, 10, 0.1), 0px 0px 0px 1px rgba(10, 10, 10, 0.1); /* Schatteneffekt wie Bulma-Box */
    border-radius: 12px; /* Abgerundete Ecken für ein einheitliches Design */
}
/* Glider Einstellungen */
.glider {
    background-color: #519b1100; /* #21a58d;*/
    padding: 1rem; /* Optional: Innenabstand für mehr Platz */
    margin-top: 10px;
    border-radius: 8px; /* Optional: Abgerundete Ecken */
}

/* Meine Kapselung für my-slider-caption */
.my-slider-caption {
    text-align: center;      /* entspricht has-text-centered */
    /*color: #b8b3b3;*/    /*#323131;*/       /*entspricht has-text-grey*/
    font-size: 0.75rem;         /* Schriftgröße */
    margin-top: 0.5rem;      /* entspricht mt-2 */
    font-weight: bold;
}
@media (max-width: 768px) {
    .my-slider-caption {
        font-size: 0.6rem;
    }
    .image-fixed-height img {
    max-height: calc(100% - 60px); /* Bildhöhe an den Container anpassen */
    border-radius: 6px; /* Abgerundete Ecken */
}
}

/* FAQs ....*/
/* Standard-Pfeil des Browsers ausblenden */

.custom-faq summary {
    list-style: none;
    cursor: pointer;
}
.custom-faq summary::-webkit-details-marker {
    display: none;
}

/* Der Pfeil rotiert, wenn das details-Tag das Attribut 'open' hat */
.custom-faq[open] .faq-arrow {
    transform: rotate(90deg);
}

/* Sanfter Übergang für die Rotation */
.faq-arrow {
    transition: transform 0.2s ease;
}

/* Eine feine Trennlinie über der Antwort */
.border-top-light {
    border-top: 1px solid #ededed;
}

/* 1. ABSTAND ZWISCHEN PFEIL UND TEXT ERHÖHEN */
.custom-faq summary {
    list-style: none;
    cursor: pointer; /* Ändert den Mauszeiger beim Drüberfahren in eine Hand */
    
    /* Flex-Gap nutzen: Das steuert perfekt den Abstand zwischen Pfeil und Text */
    gap: 20px !important; /* Erhöhe oder verringere die Pixel nach Wunsch */
}

/* Webbkit-Browser-Fix für den Standardpfeil */
.custom-faq summary::-webkit-details-marker {
    display: none;
}

/* 2. FARBE DES PFEILS ÄNDERN (Falls du das mit "Farbe des Cursors" meintest) */
.faq-arrow {
    transition: transform 0.2s ease;
    color: #00d1b2 !important; /* Hier deine Wunschfarbe für den Pfeil (z.B. Bulma-Türkis) */
}

/* Der Pfeil rotiert, wenn das details-Tag geöffnet ist */
.custom-faq[open] .faq-arrow {
    transform: rotate(90deg);
}



/* Erlaubt sanftes Scrollen im gesamten Dokument */
html {
    scroll-behavior: smooth;
}

/* Der schwebende Button */
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999; /* Liegt über allen anderen Elementen */
    width: 45px;
    height: 45px;
    background-color: #00d1b2; /* Bulma-Primärfarbe (Türkis) */
    color: white !important;
    border-radius: 50%; /* Macht den Button kreisrund */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    
    /* Perfektes Zentrieren des Pfeils im Kreis */
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 1.5rem;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}


.button.is-custom-color {
    background-color: #00d1b2 !important; /* Deine Wunschfarbe */
    color: #1b1a1a !important;            /* Textfarbe weiß */
    border-color: transparent !important; /* Verhindert hässliche Rahmen */
}

.textarea:focus, .input:focus {
    border-color: #00d1b2; !important; /* Farbe des schmalen inneren Rahmens */
    /* box-shadow: 0 0 0 0.125em rgba(26, 95, 122, 0.25) !important; Der weiche Schein außen herum */
    box-shadow: 0 0 0 0.025em #00d1DD !important;
}