/* archiv-responsive.css */

/* Grundlegende Textfarbe + Zeilenabstand */
body, td, th {
    color: #3A3A3A;
    line-height: 1.4;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: left;
    background-color: #fafafa;
}

/* Container-Optimierung */
.box-container {
    padding: 10px;
}

.box_archiv {
    padding: 10px 15px;                   /* innen ganz schlank */
    width: 90%;
    max-width: 800px;                     /* kompakter */
    text-align: left;
    margin: 18px auto;                    /* außen viel schmaler */
    font-size: 0.95em;   
    /* Gesamttext etwas kleiner */
}

/* Headings optimieren */
.box_archiv h2 {
    font-size: 1.3em;
    margin-bottom: 10px;
    color: #333333;
}

/* Audioliste */
.directory-tree {
    list-style: none;
	text-align: left;
    padding: 0;
    margin: 0;
}

.directory-tree li {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    border-left: 3px solid #61162d;
    background: #d9cfc2;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    margin-bottom: 15px;
    padding: 8px 20px;
    gap: 15px;
    transition: box-shadow 0.3s ease;
}

.directory-tree li:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Textblock links */
.directory-tree li .audio-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    text-align: left;
}

.directory-tree li .audio-text span {
    margin-bottom: 3px;         /* vorher 6px → jetzt enger */
    font-size: 0.95em;
    color: #555555;
    line-height: 0.8;           /* etwas enger als Standard */
}

/* PDF + Audio rechts */
.directory-tree li .media {
    padding-top: 10px;
    display: flex;
    align-items: stretch;      /* gleiche Höhe */
    gap: 8px;
    margin-left: auto;
}

/* PDF-Icon */
.pdf-link img {
    display: block;
    height: 100%;
    width: auto;
}

/* Audio-Player (Desktop) */
.directory-tree li .media audio {
    width: 300px !important;
    max-width: 300px !important;
    height: 100%;                /* füllt die Höhe der .media-Box */
    border-radius: 4px;
    background-color: #f2f3f5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .box_archiv {
        width: 94%;
        max-width: 94%;
        margin: 20px auto;
        line-height: 1.2;
    }

    .directory-tree li {
        flex-direction: column;
		text-align: left;
        align-items: flex-start;
        padding: 15px;
    }

    .directory-tree li .audio-text {
        width: 100%;
		text-align: left !important;
        align-items: flex-start !important;
    }

    .directory-tree li .audio-text span {
        line-height: 1.3;    /* lockert Mobil-Zeilen wieder */
    }

    /* PDF + Audio mobil zentrieren */
    .directory-tree li .media {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-left: 0;
        width: 100%;
    }

    /* Audio-Player mobil kürzer und höher */
    .directory-tree li .media audio {
        width: 90% !important;     /* etwas spielraum seitlich */
        max-width: 300px !important;
        height: 36px !important;   /* etwas höhere Bedienfläche */
        border-radius: 8px;
        background-color: #ededed;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    /* PDF-Icon passt sich automatisch an die neue Audio-Höhe */

    /* Formularelemente mobil */
    form input, form select, form textarea {
        width: 100%;
    }

    /* Mobile Navigation (optional) */
    #nav-menu {
        display: none;
        flex-direction: column;
        background-color: #fff;
        border: 0 solid #ccc;
        padding: 10px;
    }

    #nav-menu.active {
        display: flex;
    }

    .nav ul.sf-menu > li {
        display: block;
        margin-bottom: 5px;
    }

    .hamburger {
        display: flex;
        cursor: pointer;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 30px;
        height: 25px;
    }

    .hamburger span {
        display: block;
        height: 3px;
        background: #333;
        border-radius: 2px;
    }

    .nav ul.sf-menu li a {
        padding: 10px;
        display: block;
        border-bottom: 1px solid #eee;
    }
}