/* ----------------- Basis-Stile ----------------- */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    background-color: #616161;
    color: #FFFFFF;
    padding: 1em;
    text-align: center;
    justify-content: space-between; /* sorgt dafür, dass H1 und Menü nicht kollidieren */
}

main {
    flex-grow: 1;
    padding: 0.5em;
    display: flex;
    flex-direction: column; /* Behalte die vertikale Anordnung bei */
    align-items: flex-start; /* Inhalte am Anfang ausrichten */
    justify-content: flex-start; /* Positioniere Inhalte am oberen Rand */
}

/* ----------------- Bild-Stile ----------------- */

/* Eyecatcher Bild-Stil */
.eyecatcher-image, .eyecatcher-image-klein {
    display: block;
    margin: 15px auto; /* Zentriere das Bild horizontal und Abstand nach oben/unten */
    max-width: 100%; /* Bild passt sich der Breite des Containers an */
    height: auto; /* Höhe proportional zur Breite */
    border-radius: 10px; /* Abgerundete Ecken für das Bild */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Leichter Schatten für 3D-Effekt */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation für Hover-Effekt */
}

/* Hover-Effekt für das Bild */
.eyecatcher-image:hover, .eyecatcher-image-klein:hover {
    transform: scale(1.05); /* Vergrößert das Bild leicht bei Hover */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); /* Verstärkt den Schatten bei Hover */
}

/* Artikel Bild-Stil */
.image-left {
    display: block;
    margin: 15px auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto; /* Bild links ausrichten */
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-left:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* Bildgrößen für verschiedene Geräte */
.bild-links, .bild-klein-links, .bild-social-media-left, .bild-social-media-left-klein {
    float: left;
    margin-right: 15px;
    margin-top: 10px;
}

.bild-links {
    width: 90px;
    height: 90px;
    border-radius: 10px;
}

.bild-klein-links {
    width: 70px !important;
    height: 70px !important;
}

.bild-social-media, .bild-social-media-left, .bild-social-media-left-klein {
    border-radius: 50%;
    border: 1px solid #333;
}

.bild-social-media {
    width: 90px !important;
    height: 90px !important;
}

.bild-social-media-left {
    width: 90px !important;
    height: 90px !important;
}

.bild-social-media-left-klein {
    width: 70px !important;
    height: 70px !important;
}
.bild-social-media-footer {
    width: 40px;
    height: 40px;
    border-radius: 5px;

}

/* ----------------- Media Queries ----------------- */

/* Responsive Anpassung für kleinere Bildschirme */
@media (max-width: 600px) {
    .eyecatcher-image, .eyecatcher-image-klein, .image-left {
        max-width: 100%;
        margin: 10px auto;
    }

    .bild-links, .bild-klein-links, .bild-social-media, .bild-social-media-left {
        width: 60px !important;
        height: 60px !important;
        margin: 10 15px 0 0;
    }

    .bild-social-media-left-klein {
        width: 60px !important;
        height: 60px !important;
    }
}

/* Autor-Bild und Text */
.autor-container {
    display: flex;
    align-items: center; /* Vertikal zentrieren */
}

.autor-bild-links {
    border-radius: 50%; /* Rundes Bild */
    width: 70px;
    height: 70px;
    border: 3px solid #616161;
    margin-right: 15px;
    object-fit: cover; /* Bildausschnitt anpassen */
}

@media only screen and (max-width: 600px) {
    .autor-container {
        flex-direction: column; /* Bild und Text untereinander */
        align-items: center; /* Zentriert */
    }

    .autor-bild-links {
        max-width: 100px;
        max-height: 100px;
        margin-bottom: 10px;
    }

    .autor-text {
        font-size: 14px; /* Kleinere Schriftgröße */
    }
}

/* ----------------- Titel und Texte ----------------- */

h1 {
    font-size: 30px;
    margin: 10px 0;
}

@media (max-width: 768px) {
    h1 {
        font-size: 28px;
        margin: 15px 0;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 20px;
        margin: 10px 0;
    }
}

/* Wrapper für Sections */
.section-wrapper {
    max-width: 1024px;
    width: 100%;
    padding: 2px;
    box-sizing: border-box;
    margin: 0 auto;
}

/* Container für nebeneinander liegende Sections */
.sections-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 3px;
    box-sizing: border-box;
}

.content {
      text-align: left;
    background: white;
    padding: 0.3em 1em;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin: 4px;
    flex: 1 1 calc(33.33% - 12px); /* Drei nebeneinander */
}

.content-flex {
    display: flex;
    flex-direction: column; /* Inhalte von oben nach unten anordnen */
    justify-content: space-between; /* Abstand zwischen dem Inhalt und dem Footer (link-container) */
    height: 100%; /* Sicherstellen, dass das Element die volle Höhe einnimmt */
    text-align: left;
    background: white;
    padding: 0.3em 1em;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin: 4px;
    flex: 1 1 calc(33.33% - 12px); /* Drei nebeneinander */
}



/* --------- Media Queries für kleinere Bildschirme --------- */
@media (max-width: 900px) {
    .content {
        flex: 1 1 calc(50% - 12px); /* Zwei nebeneinander */
    }
}

@media (max-width: 700px) {
    .sections-container {
        flex-direction: column;
    }

    .content {
        flex: 1 1 100%; /* Eine unter der anderen */
        margin: 3px 0;
    }
}


/* ----------------- Links und Trennlinien ----------------- */

/* Link-Sektion */
.link-section p.description, .link-section p.description-strong {
    margin: 1em 0;
    line-height: 1.6;
    color: #333;
}

.link-section p.description-strong {
    font-weight: bold;
}

.link-section p.description-pfad {
    font-size: 14px;
    color: #4CAF50;
    font-weight: none;
}

.link-section p.description-pfad a {
    color: #4CAF50;
    text-decoration: none;
    font-weight: bold;
}

/* Flexbox container for aligning links */
.link-container {
    display: flex;
    justify-content: space-between;
    margin-top: auto; /* Positioniert das Element am unteren Rand */
}

.left-link {
    text-align: left;
}

.right-link {
    text-align: right;
}

/* Trennlinie */
.trennline {
    border-top: 1px dashed black;
    width: 100%;
    margin: 10px 0;
}

/* Reduzierter Abstand */
.reduced-spacing-pfad {
    margin-bottom: 10px;
    margin-top: 5px;
}


/* ------------Inhaltsverzeichnis <div class="toc">------------ */
.toc {
    margin: 5px auto; /* Zentrale Ausrichtung und Abstand oben/unten */

}
.toc ul {
    padding-left: 30px; /* Abstand vom linken Rand */
    width: 80%; /* Optional: Breite der TOC-Seite */
    list-style-type: disc; /* Standard Aufzählungszeichen */
}
.toc ul li {
    margin: 0px 0;
}
.toc a {
    text-decoration: underline;
    color: #333;
}
.toc a:hover {
    text-decoration: underline;
    color: #333;
    font-weight: bold; /* Fett darstellen */
}

/* Überschrift-Stile innerhalb der TOC */
.toc h4 {
    margin: 0; /* Entferne Margin oben und unten */
    padding-bottom: 2px; /* Optional: Padding für besseren Abstand zur Liste */
}

/* ---------------- Hamburger Menü-Stile ---------------- */
header {
    position: relative; /* Erlaubt das Positionieren des Hamburger-Buttons über dem Header */
}

.menu {
    list-style: none; /* Entfernt die Standard-Aufzählungszeichen */
    padding: 0;
    margin: 0;
    display: flex; /* Zeigt die Links nebeneinander */
    justify-content: center; /* Zentriert das Menü horizontal */
}

.menu li {
    margin: 0 10px; /* Abstand zwischen den Menüelementen */
}

.menu a {
    color: #FFFFFF; /* Linkfarbe im Menü */
    text-decoration: none; /* Entfernt die Unterstreichung */
    font-weight: bold; /* Macht den Text fett */
    font-size: 1em; /* Textgröße im Menü */
}

.menu a:hover {
    text-decoration: underline; /* Unterstreichung beim Hover-Effekt */
    color: #E0E0E0; /* Helleres Grün beim Hover */
}

/* Hamburger-Menü */
.menu-toggle {
    display: none; /* Versteckt den Hamburger-Button auf großen Bildschirmen */
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    top: 2px; /* Positioniert den Button innerhalb des Headers */
    left: 2px; /* Positioniert den Button innerhalb des Headers */
}

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

/* Standard-Stile für die Navigation auf kleinen Bildschirmen */
.main-nav {
    display: block; /* Zeigt das Menü standardmäßig auf großen Bildschirmen */
}

/* Versteckt das Menü im Hamburger-Modus und zeigt den Button an */
.main-nav.show {
    display: block;
}

@media (max-width: 900px) {
    .menu {
        display: none; /* Versteckt das normale Menü auf kleinen Bildschirmen */
    }
    .menu-toggle {
        display: block; /* Zeigt den Hamburger-Button auf kleinen Bildschirmen */
    }
    .main-nav.show .menu {
        display: flex; /* Zeigt das Menü im Hamburger-Modus */
        flex-direction: column; /* Menü-Links untereinander auf kleinen Bildschirmen */
        background-color: #616161; /* Hintergrundfarbe des Menüs auf kleinen Bildschirmen */
        width: 100%; /* Breite des Menüs auf kleinen Bildschirmen */
        position: absolute; /* Positioniert das Menü relativ zum Header */
        top: 60px; /* Positioniert das Menü direkt unter dem Header */
        right: 0;
        text-align: center;
        z-index: 1;
    }
    .main-nav .menu li {
        margin: 10px 0; /* Abstand zwischen den Links auf kleinen Bildschirmen */
    }
}
/* ---------------- Links und Buttons ---------------- */
.external-link {
    color: blue;
    text-decoration: underline;
    font-weight: none;
}

.external-link:hover {
    color: #333;
    text-decoration: underline;
    font-weight: bold;
}

.interner-text-link-ohne-underline {
    color: #333;
    text-decoration: none;
    
}

.interner-text-link {
    color: #4CAF50;
    text-decoration: underline;
    
}

.interner-text-link:hover {
    color: #333;
    text-decoration: underline;
    
}

.home-link {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.ueberschrift {
    display: block;
    margin: 10px 0;
    padding: 5px;
    background-color: #f4f4f4;
    color: #333;
    text-decoration: none;
    border: 1px dashed;
    border-radius: 5px;
}

.ueberschrift-link {
    display: block;
    margin: 10px 0;
    padding: 5px;
    background-color: #616161;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: none;
    border: 1px dashed;
    border-radius: 5px;
    border-color: #696969;
    transition: background-color 0.3s ease;
}

.anbieter-link, .blog-link {
    display: inline-block;
    margin: 4px 4px; /* Horizontaler Abstand */
    padding: 1px 5px;
    background-color: #616161;
    color: white;
    text-decoration: none;
    font-size: 0.75em;
    border: 1px dashed;
    border-radius: 5px;
    border-color: #696969;
    transition: background-color 0.3s ease;
}

/* ---------Button "Aktion"---------- */
.aktion-link {
    display: block; /* Anpassung Button an Textbreite */
    border: 1px dashed;
    border-radius: 5px;
    border-color: #696969;
    border-radius: 5px; /* Abgerundete Ecken */
    background-color: #FF6347;
    margin: 5px;
    padding: 5px 5px; /* Innerer Abstand zum Rand */
    color: white; /* Textfarbe */
    font-weight: bold; /* Fett dargestellter Text */
    text-decoration: none;
    text-align: center; /* Zentriert den Text im Button */
    font-size: 1.5em;
}

.aktion-link:hover {
    background-color: ##45a049;
    text-decoration: underline;
    color: #333;
}

/* Schriftgröße anpassen für kleinere Bildschirme */
@media (max-width: 768px) {
    .aktion-link {
        font-size: 1.2em; /* Etwas kleinere Schriftgröße für Tablets */
    }
}

@media (max-width: 480px) {
    .aktion-link {
        font-size: 1em; /* Noch kleinere Schriftgröße für Smartphones */
    }
}

.footer-link {
    display: inline-block;
    margin: 10px 5px;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.footer-link:hover, .anbieter-link:hover, .blog-link:hover, .interner-link:hover, .ueberschrift-link:hover {
    background-color: #757575;
    text-decoration: none;
}

.interner-link {
    display: inline-block;
    margin: 5px 0px; /* Horizontaler Abstand */
    margin-bottom: 0; /* Entferne den unteren Abstand */
    padding: 1px 5px; /* Abstand innerhalb des Buttons - vertikal/horizontal */
    background-color: #616161;
    color: white;
    text-decoration: none;
    font-size: 0.75em; /* Kleinere Schriftgröße */
    border: 1px dashed; /* Transparenter Rahmen im Normalzustand */
    border-radius: 5px;
    border-color: #696969; /* Rahmenfarbe */
    transition: background-color 0.3s ease;
}

/* ---------Button "Anzeige/Werbung/Tipp"---------- */
.werbung {
    border: 1px solid #696969; /* Grauer Rahmen */
    padding: 2px 2px; /* Weniger Padding für kleinere Darstellung */
    color: white; /* Schwarze Textfarbe */
    display: inline-block; /* Anpassung an Textbreite */
    font-weight: bold; /* Fett dargestellter Text */
    font-size: 0.75em; /* Kleinere Schriftgröße */
    background-color: #FF6347; /* Optional: ein leichter Hintergrund */
    border-radius: 5px; /* Abgerundete Ecken */
    margin: 0 10px; /* Außenabstand links und rechts */
    
}

/* ---------Button "Kategorie"---------- */
.kategorie {
    border: 1px solid #696969; /* Grauer Rahmen */
    padding: 2px 2px; /* Weniger Padding für kleinere Darstellung */
    color: #000000; /* Schwarze Textfarbe */
    display: inline-block; /* Anpassung an Textbreite */
    font-weight: bold; /* Fett dargestellter Text */
    font-size: 0.75em; /* Kleinere Schriftgröße */
    background-color: #f4f4f4; /* Optional: ein leichter Hintergrund */
    border-radius: 5px; /* Abgerundete Ecken */
    margin: 0 4px; /* Außenabstand links und rechts */
    margin-top: 0 !important; /* oberen Abstand */
    margin-bottom: 5px !important; /* unteren Abstand */
}   
/* Footer-Stile */
footer {
    background-color: #616161;
    color: white;
    text-align: center;
    padding: 1em;
}

.footer a {
    color: #4CAF50;
    text-decoration: none;
    font-weight: bold;
}

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

/* Container für Bild und Text */
.autor-container {
    display: flex;
    align-items: center; /* Vertikal zentrieren */
}

/* Stil für das Bild */
.autor-bild-links {
    border-radius: 50%; /* Macht das Bild rund */
    width: 70px; /* Breite des Bildes auf PC */
    height: 70px; /* Höhe des Bildes auf PC */
    border: 3px solid #616161; /* Farbiges Border (z.B. blau) */
    margin-right: 15px; /* Abstand zum Text */
    object-fit: cover; /* Bildausschnitt anpassen, um Rundung zu unterstützen */
}

/* Container für Name und Datum */
.autor-info {
    display: flex;
    flex-direction: column; /* Stellt Name und Datum übereinander */
}

/* Stil für den Namen */
.autor-name {
    font-size: 14px; /* Schriftgröße für den Namen */
    color: #333; /* Farbe für das Datum */
    font-weight: bold; /* Fettdruck für den Namen */
}

.autor-beruf {
    font-size: 14px; /* Schriftgröße für den Namen */
    color: #333; /* Farbe für das Datum */
 }

/* Stil für das Datum */
.autor-date {
    font-size: 14px; /* Schriftgröße für das Datum */
    color: #333; /* Farbe für das Datum */
}

/* Stil für ähnliche Artikel*/
.autor-artikel {
    font-size: 14px; /* Schriftgröße für das Datum */
    color: #333; /* Farbe für das Datum */
}

/* Media Query für Smartphones */
@media only screen and (max-width: 600px) {
    .autor-container {
        flex-direction: column; /* Bild und Text untereinander */
        align-items: center; /* Zentriert den Inhalt */
    }

    .autor-bild-links {
        width: auto; /* Breite des Bildes automatisch */
        height: auto; /* Höhe des Bildes automatisch */
        max-width: 100px; /* Maximale Breite auf kleinen Bildschirmen */
        max-height: 100px; /* Maximale Höhe auf kleinen Bildschirmen */
        margin-bottom: 10px; /* Abstand zwischen Bild und Text */
    }

    .autor-info {
        text-align: center; /* Zentriert Name und Datum auf kleinen Bildschirmen */
    }

    .autor-name {
        font-size: 12px; /* Kleinere Schriftgröße für den Namen auf kleinen Bildschirmen */
    }

    .autor-beruf {
        font-size: 12px; /* Kleinere Schriftgröße für den Namen auf kleinen Bildschirmen */
    }

    .autor-date {
        font-size: 12px; /* Kleinere Schriftgröße für das Datum auf kleinen Bildschirmen */
    }

    .autor-artikel {
        font-size: 12px; /* Kleinere Schriftgröße für das Datum auf kleinen Bildschirmen */
    }
}
/* ---------Lebenslauf Markus--------- */

.lebenslauf {
    display: flex;
    align-items: center; /* Bild und Text oben ausrichten */
    gap: 15px; /* Abstand zwischen Bild und Text */
    margin-top: 5px;
}

.bild-markus-left-rund {
    float: left;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 10px;
        width: 150px !important; /* Sicherstellen, dass die Breite Xpx beträgt */
        height: 150px !important; /* Sicherstellen, dass die Höhe Xpx beträgt */
        border-radius: 50%; /* Macht das Bild rund */
        border: 1px solid #333; /* Farbiges Border */
 }

.bild-markus-left-rechteck {
   
    margin-right: 15px;
    margin-left: 15px;
    margin-top: 5px;
    width: 350px !important; /* Sicherstellen, dass die Breite 300px beträgt */
    height: 419px !important; /* Sicherstellen, dass die Höhe 350px beträgt */
    border-radius: 5%; /* Macht das Bild leicht abgerundet */
    border: 1px solid #333; /* Farbiges Border */
}

.bild-markus-right-rechteck {
    margin-right: 15px;
    margin-left: 15px;
    margin-top: 5px;
    width: 350px !important; /* Sicherstellen, dass die Breite 300px beträgt */
    height: 419px !important; /* Sicherstellen, dass die Höhe 350px beträgt */
    border-radius: 5%; /* Macht das Bild leicht abgerundet */
    border: 1px solid #333; /* Farbiges Border */
}

.bild-markus-left-viereck {
    margin-right: 15px;
    margin-left: 15px;
    margin-top: 5px;
    width: 250px !important; /* Sicherstellen, dass die Breite 300px beträgt */
    height: 250px !important; /* Sicherstellen, dass die Höhe 350px beträgt */
    border-radius: 5%; /* Macht das Bild leicht abgerundet */
    border: 1px solid #333; /* Farbiges Border */
}

.bild-markus-right-viereck {
        margin-right: 15px;
        width: 250px !important;
        height: 250px !important;
        border-radius: 5%;
        border: 1px solid #333;
        order: 1; /* Bild links halten */
    }

/* Media Query für Smartphones */
@media only screen and (max-width: 600px) {
    .lebenslauf {
        flex-direction: column; /* Bild und Text untereinander anordnen */
        align-items: center; /* Zentriert das Bild */
    }

    .bild-markus-left-rund {
        width: 150px !important; /* Sicherstellen, dass die Breite 50px beträgt */
        height: 150px !important; /* Sicherstellen, dass die Höhe 50px beträgt */
        margin-bottom: 5px; /* Abstand unter dem Bild */
    }

    .bild-markus-left-rechteck {
        width: 280px !important;
        height: 335px !important;
        margin-bottom: 5px; /* Abstand unter dem Bild */
    }

    .bild-markus-right-rechteck {
        width: 280px !important;
        height: 335px !important;
        margin-bottom: 5px; /* Abstand unter dem Bild */
    }

    .bild-markus-left-viereck,
    .bild-markus-right-viereck {
        width: 280px !important;
        height: 280px !important;
        margin-bottom: 5px; /* Abstand unter dem Bild */
    }
}
/* ---------------- Auflistung/Liste "NICHT" Inhaltsverzeichnis ------------------------ */
ul {
    list-style-type: disc; /* Standard-Bullet-Points */
    padding-left: 30px; /* Abstand links für die Bullet-Points */
    line-height: 1.5; /* Zeilenabstand für bessere Lesbarkeit */
}

ul li {
    margin-bottom: 1px; /* Abstand zwischen den Listenelementen */
    font-size: 1em; /* Gleiche Schriftgröße wie der restliche Text */
}

ul li em {
    color: #4CAF50; /* Farbe für betonten Text, passend zur Hauptfarbe */
}


/* ---------------- PC: Breite auf 50% für große Bildschirme ----------------  */
@media screen and (min-width: 600px) {
    .accordion.toc {
        width: 100%; /* Akkordeon nimmt 50% der Breite auf Desktop ein */
    }
}

/* Smartphone: Akkordeon nimmt 100% der Breite ein */
@media screen and (max-width: 600px) {
    .accordion.toc {
        width: 100%; /* 100% der Breite auf mobilen Geräten */
    }
}


/* -------------------Akkordeon-Stile------------------- */
.accordion {
  width: 100%;
  max-width: 1024px;
  margin: 1em 0;
}

.accordion-item {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 5px;
  line-height: 1.6;
  overflow: hidden;
}

.accordion-header {
  background-color: #f4f4f4;
  color: #333;
  cursor: pointer;
  display: flex;
  justify-content: space-between; /* Platzierung des Toggle-Buttons rechts */
  align-items: center; /* Zentriert den Inhalt vertikal */
  padding: 10px;
  text-align: left;
  border: 1px dashed;
  border-radius: 5px;
  border-color: #696969;
  width: 100%;
  font-size: 1em;
  transition: background-color 0.3s ease;
}

.accordion-toggle {
  background-color: #4CAF50; /* Hintergrundfarbe des Buttons */
  color: white; /* Textfarbe des Buttons */
  border: none; /* Entfernt den Standard-Rahmen */
  border-radius: 3px; /* Abgerundete Ecken für den Button */
  padding: 2px 8px; /* Innenabstand des Buttons */
  cursor: pointer; /* Zeigt den Zeiger-Cursor beim Hover */
  font-size: 0.9em; /* Etwas kleinere Schriftgröße */
  transition: background-color 0.3s ease; /* Sanfte Hintergrundfarbe Übergänge */
}

.accordion-toggle:hover {
  background-color: #45a049; /* Dunkleres Grün beim Hover */
}


.accordion-header:hover {
  background-color: #f4f4f4;
}

/* Basis-Stil für das Akkordeon-Inhaltsbereich */
.accordion-content {
  padding: 0 5px; /* Innenabstand für die Akkordeon-Inhalte */
  max-height: 0; /* Versteckt den Inhalt standardmäßig */
  overflow: hidden; /* Verhindert das Überlaufen des Inhalts */
  background-color: rgba(76, 175, 80, 0.1); /* Transparente Hintergrundfarbe */
  border-top: 1px solid #ddd;
    transition: max-height 0.4s ease-out; /* Sanfter Übergang für max-height */
}

/* Stil, wenn das Akkordeon geöffnet ist */
.accordion-item.active .accordion-content {
  max-height: 500px; /* Sufficient height to fit the content, adjust as needed */
  padding: 2px 5px; /* Innenabstand für den sichtbaren Inhalt */
 }

 /* Abstand zwischen Links im Akkordeon vergrößern */
.accordion-content a {
  display: block; /* Sicherstellen, dass die Links vertikal angezeigt werden */
  margin-bottom: 6px; /* Abstand unter jedem Link */
  padding: 0px 0; /* Optionaler Innenabstand */
}

.accordion-content p {
  margin: 0; /* Entfernt den Abstand unter den <p>-Elementen */
}

