/* roboto-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/roboto-v47-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/roboto-v47-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/roboto-v47-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: white;
}

header {
    background-color: #18b7ff;
    padding: 15px;
    text-align: center;
    font-size: 100%;
    color: white;
}

.navbar-nav {
    text-align: right;
}

.nav-item {
    margin-left: 15px;
    color: white;
}

.nav-link {
    color: #f0f0f0 !important;
    /* Leicht dunkleres Weiß für alle Links */
}

.title {
    text-align: center;
}

.inhalt-img .carousel-img {
    /*Inhalt-foto*/
    max-width: 23%;
    /* Maximale Breite auf 100px begrenzen */
    height: auto;
    /* Höhe proportional anpassen */
    display: block;
    /* Sicherstellen, dass es kein Inline-Element ist */
    margin: 0 auto;
    /* Bild zentrieren */
    object-fit: contain;
    /* Verhindert das Abschneiden des Bildes */
    margin-top: 0;
}

.anzeichen-img {
    max-width: 40%;
    /* Maximale Breite auf 100px begrenzen */
    height: auto;
    /* Höhe proportional anpassen */
    display: block;
    /* Sicherstellen, dass es kein Inline-Element ist */
    margin: 0 auto;
    /* Bild zentrieren */
    object-fit: contain;
    /* Verhindert das Abschneiden des Bildes */
    margin-top: 0;
}

/*-----leistung--------*/
/* Flex-Container */
.leistung-container {
    display: flex;
    align-items: center;
    /* Elemente oben ausrichten */
    justify-content: center;
    /* Elemente nebeneinander ausrichten */
    gap: 20px;
    /* Kleiner Abstand zwischen Bild und Text */
    width: 70%;
    /* Container nimmt die gesamte Breite ein */
    margin: 40px auto;
    /* Zentrierung des Containers */
    /*padding-bottom: 50px;*/
}

/*----------------------Legasthenie*/
.legasthenie-container {
    display: flex;
    align-items: center;
    /* Elemente oben ausrichten */
    justify-content: center;
    /* Elemente nebeneinander ausrichten */
    gap: 20px;
    /* Kleiner Abstand zwischen Bild und Text */
    width: 70%;
    /* Container nimmt die gesamte Breite ein */
    margin: 40px auto;
    /* Zentrierung des Containers */
}

.quote {
    font-size: 1.5em;
    /* Vergrößert die Anführungszeichen */
    color: #18b7ff;
    /* Farbe der Anführungszeichen */
}


/* Bild-Container */
.leistung-img {
    flex: 0 0 40%;
    /* Nimmt 40% des Containers ein */
    max-width: 40%;
    /* Breite auf maximal 40% begrenzen */
}
.legasthenie-img {
    flex: 0 0 25%;
    /* Nimmt 40% des Containers ein */
    max-width: 25%;
    /* Breite auf maximal 40% begrenzen */
}
/* Bild */
.carousel-img {
    max-width: 100%;
    /* Passt Bild an den Container an */
    height: auto;
    /* Höhe bleibt proportional */
    object-fit: contain;
    /* Kein Abschneiden des Bildes */
}

/* Text-Container */
.text-leistung {
    margin-top: 10px;
    flex: 1;
    /* Nimmt den verbleibenden Platz ein */
    font-size: 16px;
    /* Schriftgröße */
    line-height: 1.5;
    /* Lesbarkeit */
    text-align: justify;
}

.text-legasthenie {
    text-align: center;
    flex: 1;
    /* Nimmt den verbleibenden Platz ein */
    font-size: 18px;
    line-height: 1;
    /* Lesbarkeit */
}

/*-------------link---------------*/
.link-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Abstand zwischen Bild und Text */
    width: 70%;
    margin: 40px auto;
    flex-wrap: nowrap; /* Keine Zeilenumbrüche */
}

.link-img {
    flex: 0 0 20%; /* Bild nimmt 30% der Breite ein */
    max-width: 20%; /* Maximale Breite */
}

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

.erlässe-img .carousel-img {
    max-width: 15%; /*--200px--*/
    /* Maximale Breite auf 100px begrenzen */
    height: auto;
    /* Höhe proportional anpassen */
    display: block;
    /* Sicherstellen, dass es kein Inline-Element ist */
    margin: 0 auto;
    /* Bild zentrieren */
    object-fit: contain;
    /* Verhindert das Abschneiden des Bildes */
    margin-top: 0;
}


.links-img .carousel-img {
    max-width: 30%; /*200px*/
    /* Maximale Breite auf 100px begrenzen */
    height: auto;
    /* Höhe proportional anpassen */
    display: block;
    /* Sicherstellen, dass es kein Inline-Element ist */
    margin: 0 auto;
    /* Bild zentrieren */
    object-fit: contain;
    /* Verhindert das Abschneiden des Bildes */
    margin-top: 5%;
}

.carousel-item .carousel-img {
    max-width: 50%;
    /* Maximale Breite auf 100px begrenzen */
    height: auto;
    /* Höhe proportional anpassen */
    display: block;
    /* Sicherstellen, dass es kein Inline-Element ist */
    margin: 0 auto;
    /* Bild zentrieren */
    object-fit: contain;
    /* Verhindert das Abschneiden des Bildes */
}

.row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    margin: 20px 0;
}

.column {
    flex: 1;
    padding: 0;
    box-sizing: border-box;
    max-width: 350px;
    text-align: center;
}

.text {
    margin-top: 30px;
    text-align: center;
    width: 80%;
    /* Begrenzung der Breite auf 80% */
    margin-left: auto;
    /* Zentriert die Box horizontal */
    margin-right: auto;
    font-size: 1rem;
}

.text-2 {
    margin-top: 30px;
    text-align: justify;
    width: 90%; /* Begrenzung der Breite auf 90% */
    margin-left: auto; /* Zentriert die Box horizontal */
    margin-right: auto;
    word-break: break-word; /* Bricht lange Wörter oder Links um */
    line-height: 1.6; /* Lesbare Zeilenhöhe */
}

/* Stil für Links innerhalb von .text-2 */
.text-2 a {
    color: #007BFF; /* Blaue Links */
    text-decoration: underline; /* Links unterstreichen */
    font-size: 16px; /* Standard-Schriftgröße */
    word-break: break-all; /* Bricht lange Links, wenn nötig */
    transition: color 0.3s ease; /* Animiert die Farbe bei Hover */
}

.text-2 a:hover {
    color: #0056b3; /* Dunklerer Blauton beim Hover */
}

.column img {
    width: 80%;
    border-radius: 15px;
    object-fit: cover;
}

.leistung_list {
    text-align: left; /* Text links ausrichten */
    list-style-type: none; /* Keine Punkte vor den Listen-Elementen */
    padding-left: 15%; /* Entfernt unnötige Einrückung */
    margin: 0 auto; /* Zentriert die Liste */
}

.leistung_list li {
    position: relative;
    /* Erforderlich, damit ::before relativ zu <li> positioniert ist */
    padding-left: 30px;
    /* Platz für den Punkt reservieren */
}

.leistung_list li::before {
    content: '-';
    /* Der Punkt */
    color: blue;
    font-size: 20px;
    position: absolute;
    left: 0;
    /* Punkt erscheint am linken Rand von <li> */
    top: 50%;
    /* Vertikal zentriert mit dem Text */
    transform: translateY(-50%);
    /* Exakte vertikale Zentrierung */
}



/* Main-Content */
main {
    flex: 1;
    /* Hauptinhalt nimmt den restlichen Platz ein */
}

/*-------------------Footer--------------------*/
footer {
    display: flex;
    justify-content: space-between;
    /* Gleichmäßiger Abstand zwischen den Spalten */
    align-items: flex-start;
    /* Richtet die Spalten oben aus */
    padding: 15px;
    background-color: #18b7ff;
    color: white;
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
}

.footer-column {
    flex: 1;
    /* Gleiche Breite für alle Spalten */
    text-align: center;
    /* Zentriert den Text in jeder Spalte */
}

.footer-column h5 {
    font-size: 0.95rem;
    /* Überschrift etwas kleiner */
    margin-bottom: 8px;
}

.footer-column p,
.footer-column a {
    font-size: 0.85rem;
    /* Kleinere Schriftgröße */
    color: white;
    text-decoration: none;
    line-height: 0;
    /* Reduziert den Abstand zwischen den Zeilen */
}


.footer-logo {
    width: 150px;
    height: auto;
    background-color: #18b7ff;
    padding: 5px;
    border-radius: 5px;
}



.footer a:hover {
    text-decoration: underline;
}

.footer-copyright {
    text-align: center;
    font-size: 0.75rem;
    color: white;
    background-color: #18b7ff;
    /* gleiche Farbe wie der Footer */
    margin-top: 10px;
    /* Etwas Abstand vom Footer */
    padding: 5px;
    position: relative;
}

/* Wenn du Pseudo-Elemente verwendest, stelle sicher, dass du dort keinen Text einfügst */
.footer-copyright::before,
.footer-copyright::after {
    content: none;
    /* Entfernt alle möglichen vorherigen Inhalte, um doppelten Text zu verhindern */
}

/* -------------------- Media Queries für Responsivität -------------------- */

/* Tablet - Für Bildschirme ab 768px Breite */
@media (min-width: 481px) and (max-width: 768px) {
    .row {
        flex-direction: column;
        /* Spalten übereinander statt nebeneinander */
    }

    .column {
        max-width: 100%;
        margin-bottom: 15px;
    }

    .carousel-img {
        height: 100vh;
        /* Größere Bildhöhe auf Tablets */
    }

    header {
        padding: 20px;
        /* Etwas weniger Padding für Tablets */
        font-size: 1.05rem;
        /* Etwas kleinere Schriftgröße für Header */
    }
    .carousel-item .carousel-img {
        max-width: 100%;
        /* Maximale Breite auf 100px begrenzen */
        height: auto;
        /* Höhe proportional anpassen */
        display: block;
        /* Sicherstellen, dass es kein Inline-Element ist */
        margin: 0 auto;
        /* Bild zentrieren */
        object-fit: contain;
        /* Verhindert das Abschneiden des Bildes */
    }
    .column img {
        width: 50%;
    }

    .text {
        font-size: 0.7rem;
        /* Kleinere Schriftgröße für Tablets */
    }
    .text-2 {
        width: 95%; /* Größere Breite auf kleineren Bildschirmen */
        font-size: 14px; /* Kleinere Schriftgröße */
    }

    .text-2 a {
        font-size: 14px; /* Kleinere Schriftgröße für Links */
    }
    .legasthenie-container {
        flex-direction: row;
        /* Die Spalten werden untereinander angezeigt */
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 30vh;
        margin-top: 0;
        gap: 0;
    }
    .inhalt-img .carousel-img {
        /*Inhalt-foto*/
        max-width: 30%;
        /* Maximale Breite auf 100px begrenzen */
        height: auto;
        /* Höhe proportional anpassen */
        display: block;
        /* Sicherstellen, dass es kein Inline-Element ist */
        margin: 0 auto;
        /* Bild zentrieren */
        object-fit: contain;
        /* Verhindert das Abschneiden des Bildes */
        margin-top: 0;
    }

    .text-legasthenie {
        text-align: center;
        width: 100%;
        /* Nimmt die ganze Breite des Containers ein */
    }

    .anzeichen-img {
        max-width: 500px;
        /* Maximale Breite auf 100px begrenzen */
        height: 60vh;
        /* Höhe proportional anpassen */
        display: block;
        /* Sicherstellen, dass es kein Inline-Element ist */
        margin: 0 auto;
        /* Bild zentrieren */
        object-fit: contain;
        /* Verhindert das Abschneiden des Bildes */
        margin-top: -25%;
    }
    .link-container {
        flex-direction: row; /* Elemente untereinander */
        width: 90%; /* Container nimmt volle Breite ein */
        gap: 40px;
        margin-top: -10%;
    }
    .link-img {
        flex: 0 0 25%; /* Bild auf 50% der Containerbreite beschränken */
        max-width: 25%; /* Maximale Breite */
        margin-top: 0;
        margin: 0 auto; /* Bild zentrieren */
    }
    
    .leistung-container {
        flex-wrap: wrap; /* Elemente umbrechen */
        width: 90%; /* Containerbreite auf 90% der Bildschirmbreite anpassen */
        gap: 20px; /* Weniger Abstand zwischen den Elementen */
        margin-top: -20%;
        height: 70vh;
    }
    .leistung-img {
        flex: 0 0 35%;
        /* Nimmt 40% des Containers ein */
        max-width: 35%;
        /* Breite auf maximal 40% begrenzen */
        margin-top: 0;
    }
    
    .leistung_list {
        text-align: left; /* Text links ausrichten */
        list-style-type: none; /* Keine Punkte vor den Listen-Elementen */
        padding-left: 25px; /* Entfernt unnötige Einrückung */
        margin: 0 auto; /* Zentriert die Liste */
    }
    footer {
        flex-direction: column;
        /* Ändert die Richtung des Footers auf vertikal */
        align-items: center;
        /* Zentriert die Elemente */
        text-align: center;
        /* Zentriert den Text */
    }
    .footer-logo img {
        width: 150px; /* Größeres Logo für größere Bildschirme */
      }

    .footer-container {
        flex-direction: column;
        /* Die Spalten werden untereinander angezeigt */
        align-items: center;
        justify-content: center;
    }

    .footer-column {
        width: 100%;
        /* Stellt sicher, dass jede Spalte die volle Breite einnimmt */
        margin-bottom: 10px;
        /* Fügt einen Abstand zwischen den Spalten hinzu */
    }
}

/* Mobile - Für Bildschirme ab 480px Breite */
@media (max-width: 480px) {
    .carousel-img {
        height: 100vh;
        /* Größere Bildhöhe auf Tablets */
    }

    .row {
        flex-direction: column;
        /* Spalten übereinander statt nebeneinander */
    }

    .column {
        max-width: 100%;
        margin-bottom: 15px;
    }

    .carousel-img {
        height: 40vh;
        /* Kleinere Bildhöhe auf mobilen Geräten */
    }

    header {
        font-size: 80%;
        /* Noch kleinere Schriftgröße für mobile Geräte */
        padding: 8px;
    }
    .carousel-item .carousel-img {
        max-width: 100%;
        /* Maximale Breite auf 100px begrenzen */
        height: auto;
        /* Höhe proportional anpassen */
        display: block;
        /* Sicherstellen, dass es kein Inline-Element ist */
        margin: 0 auto;
        /* Bild zentrieren */
        object-fit: contain;
        /* Verhindert das Abschneiden des Bildes */
    }
    .column img {
        width: 50%;
    }

    .text {
        font-size: 18px;/*0.6rem*/ 
        /* Noch kleinere Schriftgröße für mobile Geräte */
    }
    .text-2 {
        width: 90%; /* Maximale Breite auf sehr kleinen Bildschirmen */
        font-size: 18px; /* Noch kleinere Schriftgröße 12px*/
    }

    .text-2 a {
        font-size: 18px; /*12px*/
        display: block; /* Links auf eine eigene Zeile setzen */
        text-overflow: ellipsis; /* Links abschneiden mit "..." */
        overflow: hidden;
        white-space: nowrap; /* Kein Umbruch */
    }
    .legasthenie-container {
        flex-direction: column;
        /* Die Spalten werden untereinander angezeigt */
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 60vh;
        margin-top: 0;
        gap: 0;
    }


    .text-legasthenie {
        text-align: center;
        width: 100%;
        /* Nimmt die ganze Breite des Containers ein */
    }
    .erlässe-img .carousel-img {
        max-width: 50%;
        /* Maximale Breite auf 100px begrenzen */
        height: auto;
        /* Höhe proportional anpassen */
        display: block;
        /* Sicherstellen, dass es kein Inline-Element ist */
        margin: 0 auto;
        /* Bild zentrieren */
        object-fit: contain;
        /* Verhindert das Abschneiden des Bildes */
        margin-top: 5px;
    }

    .anzeichen-img {
        width: 100%;
        /* Bildgröße auf 90% der Breite des Containers setzen */
        max-width: 1200px;
        /* Maximalgröße des Bildes auf 1200px festlegen */
        height: auto;
        /* Höhe des Bildes automatisch anpassen, damit das Seitenverhältnis beibehalten wird */
        margin: 0;
        /* Entfernt alle äußeren Abstände */
        padding: 0;
        /* Entfernt alle inneren Abstände */
        display: block;
        /* Stellt sicher, dass das Bild als Block angezeigt wird */
    }
    .inhalt-img .carousel-img {
        /*Inhalt-foto*/
        max-width: 90%;
        /* Maximale Breite auf 100px begrenzen */
        height: auto;
        /* Höhe proportional anpassen */
        display: block;
        /* Sicherstellen, dass es kein Inline-Element ist */
        margin: 0 auto;
        /* Bild zentrieren */
        object-fit: contain;
        /* Verhindert das Abschneiden des Bildes */
        margin-top: 5%;
    }
    .link-container {
        flex-direction: column; /* Elemente untereinander */
        width: 100%; /* Container nimmt volle Breite ein */
        gap: 10px;
    }

    .link-img {
        max-width: 80%; /* Bild auf 80% der Breite reduzieren */
        margin: 0 auto; /* Zentrieren */
    }

    .leistung-container {
        flex-direction: column; /* Elemente untereinander anordnen */
        width: 90%; /* Container nimmt volle Breite ein */
        gap: 10px; /* Weniger Abstand zwischen den Elementen */
        padding-bottom: 0; /* Weniger Abstand unten */
    }

    .leistung-img {
        max-width: 80%;
        height: auto;
        display: block;
        position: relative; /* Sicherstellen, dass das Bild positionierbar ist */
        top: -80px; /* Schiebt das Bild 20 Pixel über den oberen Rand hinaus */
        left: 0;
        right: 0;
    }
    .text-leistung {
        margin-top: -100px;
        flex: 1;
        /* Nimmt den verbleibenden Platz ein */
        font-size: 16px;
        /* Schriftgröße */
        line-height: 1.5;
        /* Lesbarkeit */
    }
    .leistung_list {
        text-align: left; /* Text links ausrichten */
        list-style-type: none; /* Keine Punkte vor den Listen-Elementen */
        padding-left: 10px; /* Entfernt unnötige Einrückung */
        
    }
    .legasthenie-img {
        flex: 0 0 60%;
        /* Nimmt 40% des Containers ein */
        max-width: 60%;
        /* Breite auf maximal 40% begrenzen */
    }
    footer {
        flex-direction: column;
        /* Ändert die Richtung des Footers auf vertikal */
        align-items: center;
        /* Zentriert die Elemente */
        text-align: center;
        /* Zentriert den Text */
    }

    .footer-container {
        flex-direction: column;
        /* Die Spalten werden untereinander angezeigt */
        align-items: center;
        justify-content: center;
    }

    .footer-column {
        width: 100%;
        /* Stellt sicher, dass jede Spalte die volle Breite einnimmt */
        margin-bottom: 10px;
        /* Fügt einen Abstand zwischen den Spalten hinzu */
    }
    .footer-logo img {
        width: 150px; /* Kleineres Logo für kleine Bildschirme */
      }
}