/* Google Font einbinden */
@import url('https://fonts.googleapis.com/css2?family=Gayathri:wght@100;400;700&family=Montserrat:wght@400&display=swap');
body {
    background-color: white !important;

}
.container-fluid {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}
html {
    scroll-behavior: smooth;
}

/* ... existing code ... */

.frame-space-before-small { margin-top: 0.625rem; }         /* 10px */
.frame-space-before-medium { margin-top: 1.25rem; }        /* 20px */
.frame-space-before-large { margin-top: 2.5rem; }         /* 40px */
.frame-space-before-extra-large { margin-top: 7rem; }  /* 80px */

.frame-space-after-small { margin-bottom: 0.625rem; }      /* 10px */
.frame-space-after-medium { margin-bottom: 1.25rem; }     /* 20px */
.frame-space-after-large { margin-bottom: 2.5rem; }      /* 40px */
.frame-space-after-extra-large { margin-bottom: 7rem; }   /* 80px */


/* Verhindert, dass Sektionen beim Springen unter der Navbar verschwinden */
[id^="c"], section[id] {
    scroll-margin-top: 100px; /* Passt zur Höhe deiner Navbar */
}

/* Aktiver Link Style */
.nav-link:hover {
    color: #de002e !important;
}
.body.p {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400;
    line-height: 1.7!important;
}


.full-width-breakout {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: 2rem;
    margin-top: 2rem;
}
h2{
    font-family: 'Gayathri';
    font-size:2.3rem;
    margin-bottom:2rem;
    font-weight: 700;
    color:#FF3447;}

h3{
    font-size:1.5rem;
    margin-bottom:2rem;
}


h6{
    font-family: 'Gayathri';
    font-size:3.5rem;

    font-weight: 700;
    color:white;}


.img-fluid {
border-radius: 50px;
}


@media (max-width: 768px) {
    .img-fluid {
        border-radius: 25px;
        /* Auf Mobile: Abstand nach oben weg, weil das Element darüber
           (der Text aus der vorherigen Spalte) meist schon Margin hat */
        margin-top: 0.5rem !important;
        margin-bottom: 2rem; /* Abstand nach unten beibehalten für den nächsten Block */
    }

    /* Falls das Bild innerhalb einer Bootstrap 'col' liegt,
       können wir auch den Abstand der Spalten zueinander optimieren */
    .row > [class^="col-"] .img-fluid {
        margin-top: 0;
    }
}
/* Responsive Korrektur für die Galerie */
@media (max-width: 768px) {
    .ce-gallery figure {
        /* Auf Mobile deutlich weniger Abstand nach oben,
           da die Spalten davor oft schon Eigengewicht haben */
        margin-top: 0rem !important;
        margin-bottom: 1.5rem !important;
        /* Zentriert das Bild, falls es schmaler als das Handy ist */
        margin-left: auto;
        margin-right: auto;
    }

    /* Falls du die frame-space Klassen auf dem umschließenden Container nutzt */
    .frame-space-before-extra-large,
    .frame-space-before-large {
        margin-top: 2rem !important;
    }
}
    .ce-gallery figcaption {

    margin-top:0.5rem;
    font-size:0.7rem;
}
.breadcrumb-active-custom {
    color: #de002e !important;
}

.card-title {
    white-space: normal;           /* erlaubt Zeilenumbrüche */
    overflow-wrap: anywhere;      /* Browser darf auch mitten im Wort umbrechen, wenn nötig */
    hyphens: auto;                /* evtl. Silbentrennung (falls gewünscht) */
}



.border-primary{
    border-color:#FF3447 !important;
    border-width:0.5rem;

}

/* -----------------*/
.no-border-radius {
    border-radius: 0 !important;
}

.crop-img {
    object-fit: cover;
    width: 150px;
    height: 200px;
}

.icon-link {
    color:#de002e;
    text-decoration: none;
}


.input-group-lg {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-outline {
    width: 80%;
}
/* ------------------------------------------------------------------------------------------------------------------------*/

.accordion {
    --bs-accordion-border-width: 0;
}

.accordion-button {
    background: #FF3447;
    color:#fff;
    margin-bottom:2rem;
    font-size: 1.5rem;
    font-weight:bold;
    border-radius: 33.5px!important;
    --bs-accordion-btn-focus-border-color: #FF3447;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(222, 0, 46, 0.25);

    /* Weißer Kreis mit Pfeil nach unten (Normalzustand) */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23ffffff'%3E%3Cpath d='M504 256c0 137-107 248-248 248S8 393 8 256 115 8 256 8s248 107 248 248zM273 369.9l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L256 285.1 154.4 183.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L239 369.9c9.4 9.4 24.6 9.4 34 0z'/%3E%3C/svg%3E");

    /* Weißer Kreis mit Pfeil (Aktivzustand - Bootstrap rotiert das Icon automatisch um 180 Grad) */
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23ffffff'%3E%3Cpath d='M504 256c0 137-107 248-248 248S8 393 8 256 115 8 256 8s248 107 248 248zM273 369.9l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L256 285.1 154.4 183.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L239 369.9c9.4 9.4 24.6 9.4 34 0z'/%3E%3C/svg%3E");

    background-size: 1.5rem; /* Damit das Icon eine schöne Größe im Button hat */
}


.accordion-button:not(.collapsed) {
    color:#fff !important;
    border-radius: 10px;
}

.accordion-button:after {
    background-image: var(--bs-accordion-btn-icon) !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-active-icon) !important;
}

.accordion-button:not(.collapsed) {
    background-color: #DE002E;
    color:#fff;
    border-radius: 10px;

}
.accordion-item {
    border: none !important;
    background: transparent !important;
}

/* ------------------------------------------------------------------------------------------------------------------------*/



body {
    overflow-x: hidden;
}

.full-width-hr {
    border: 0;
    border-top: 1px solid #dee2e6;
    opacity: 1;

    /* Der Trick für volle Breite innerhalb eines Containers */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);

    margin-top: 0;
    margin-bottom: 3rem; /* Abstand zum Inhalt darunter */
}
/* ...Fusss ... */



#fusszeile a {
    text-decoration: none !important;
    border-bottom: none !important;
    color: rgba(0, 0, 0, 0.65) !important;
}


#fusszeile a:hover {
    color:#FF3447 !important;
    text-decoration: none !important;
}


#fusszeile a.underline-effect::after {
    display: none !important;
}

/*---------Navigation----------------------------*/
.navbar-brand {
    font-size: 4rem!important;
}

.nav-link {
    cursor: pointer;
    transition: color 0.2s;
}

.nav-link:hover {
    color: #FF3447 !important;
}
/* Diese Regel sorgt dafür, dass nur der vom System als 'active' markierte Link rot wird */
.navbar-nav .nav-link.active {
    color: #FF3447 !important;
    font-weight: 700 !important;
}

/* Standard-Farbe für nicht aktive Links, damit der Kontrast stimmt */
.navbar-nav .nav-link:not(.active) {
    color: rgba(0, 0, 0, 0.65) !important;
    font-weight: 400;
}

/* Responsive Anpassungen für kleinere Geräte */
@media (max-width: 768px) {
    .offcanvas-end {
        width: 75% !important;
    }

    .offcanvas-title {
        font-size: 2rem !important;
    }

    .nav-link {
        font-size: 1.2rem !important;
    }
}


/*----------Button------------*/





.btn-danger {
    color: white !important;
    background: #FF3447 !important;
    font-family: 'Gayathri', sans-serif;
    text-decoration: none !important;
    font-size: 1.5rem;
    border-radius: 40px;
    padding: 20px;
    font-weight: bold;
    transition: all 0.3s ease;

    /* Einheitliche Größe & Zentrierung des Inhalts */
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 280px;  /* Verhindert unterschiedlich breite Buttons */
    min-height: 140px; /* Genug Platz für Icon + Text */
    text-align: center;

    /* Damit margin: auto auf Desktop funktioniert, falls sie alleine stehen */
    margin: 10px;
}

/* Der Link im Button muss die volle Fläche klickbar machen */
.btn-danger a {
    color: white !important;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.btn-danger:hover {
    background: #DE002E !important;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(222, 0, 46, 0.3);
}

/* Responsive Anpassung */
@media (max-width: 768px) {
    .btn-danger {
        display: flex !important; /* Block-Verhalten auf Mobile */
        min-width: 90%;          /* Fast volle Breite auf dem Handy */
        max-width: 320px;        /* Aber nicht zu riesig auf großen Handys */
        min-height: 120px;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 1.5rem;
    }

    /* Container Zentrierung erzwingen */
    .ce-bodytext, p, div:has(> .btn-danger) {
        text-align: left !important;
    }
}

a.btn.btn-primary{
    text-decoration: none!important;
    color:white!important;
a.btn.btn-primary{

    color:white!important;
text-decoration: none!important;
    font-weight:bold;
}

btn.btn-primary{
    background: #de002e !important;
}



  @media (max-width: 768px) {
        /* Wenn der Container d-flex hat, müssen wir die Flex-Zentrierung nutzen */
        .row.d-flex,
        .d-flex:has(.btn-danger),
        div.d-flex {
            flex-direction: column !important; /* Elemente untereinander */
            align-items: center !important;    /* Horizontal zentrieren */
            justify-content: center !important;
        }

        .btn-danger {
            display: inline-block !important;
            margin-top: 1rem !important;
            margin-bottom: 1rem !important;

        }


    }
/*----------Navbar----------------------------*/

.badge{
    background-color: #FF3447;
}




/*----------Links----------------------------*/

a {
    text-decoration: none;
    color:black;
    font-weight:600;
}


a:hover {
    color:#de002e !important;
    text-decoration: none!important;
}

/* Link-Styles für Paragraphen */
p a {
    color: #FF3447;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

p a:hover {
    color: #8a001c;
    border-bottom: 1px solid #FF3447;
    text-decoration: none;
}

p a:focus {
    outline: 2px solid #FF3447;
    outline-offset: 2px;
}

/* Alternative mit Unterlinien-Effekt */
p a.underline-effect {
    position: relative;
    color: #FF3447;
    text-decoration: none;
}

p a.underline-effect::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(to right, #de002e, #F4A48B);
    transition: width 0.3s ease;
}

p a.underline-effect:hover::after {
    width: 100%;
}

/* Für spezielle Paragraph-Klassen */
p.special-text a {
    color: #FF3447;
    font-weight: bold;
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

p.special-text a:hover {
    background-color: rgba(222, 0, 46, 0.1);
    color: #8a001c;
}

.link{
    position: center;
    margin-top:20px;
}

.text-white-link {
    color: white !important;
    text-decoration: none;
}

.text-white-link:hover {
    color: white !important;
    text-decoration: none;
}

.link{
    position: center;
    margin-top:20px;
}

.text-white-link {
    color: white !important;
    text-decoration: none; /* Entfernt die Unterstreichung */
}

.text-white-link:hover {
    color: white !important;
    text-decoration: none; /* Entfernt die Unterstreichung */
}

/* Gleiche Kartenhöhe in jeder Reihe */
.card {
    height: 100%;
}






/*----------Search Background Section----------------------------*/

/*----------Subnavigation ---------------------------*/




.visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}