/* Septole – Kopfbereich */

/* Logo etwas größer */
.container-header .navbar-brand img {
    display: block;
    max-width: 220px;
    width: 100%;
    height: auto;
}

/* Abstand zwischen Logo und Menü verkleinern */
.container-header .container-nav {
    padding-top: 0;
    padding-bottom: 8px;
}

/* Menüeinträge mit angenehmen Abständen */
.container-header .mod-menu > li > a {
    padding: 8px 12px;
}

/* Smartphone */
@media (max-width: 600px) {
    .container-header .navbar-brand img {
        max-width: 180px;
    }

    .container-header .mod-menu > li > a {
        padding: 7px 8px;
    }
}
/* Septole – Menüleiste */
.container-header .container-nav {
    background-color: #ffffff;
    border-bottom: 2px solid #00a9c8;
}

.container-header .mod-menu > li > a {
    color: #173b55;
}

.container-header .mod-menu > li > a:hover {
    color: #008ca8;
}
/* Septole – Abstand unter Seitenüberschriften */

.com-content-category-blog__title,
.page-header h1 {
    margin-bottom: 12px;
}
/* Septole – Titelliste zweispaltig auf Desktop */

.com-content-category-blog ol.com-content-blog__links {
    column-count: 2;
    column-gap: 60px;
    max-width: 1050px;
}

.com-content-category-blog ol.com-content-blog__links li {
    break-inside: avoid;
    margin-bottom: 5px;
}

/* Smartphone: einspaltig */

@media (max-width: 700px) {
    .com-content-category-blog ol.com-content-blog__links {
        column-count: 1;
    }
}
/* Septole – kompakte Auftrittshinweise */

.septole-auftritte {
    background-color: #edf6f8;
    border-left: 3px solid #008fa8;
    border-radius: 3px;
    padding: 6px 12px;
    margin: 4px 0 8px;
    line-height: 1.4;
    text-align: left;
    font-size: 0.9rem;
}

/* Septole – kompakte Hinweise */

.septole-hinweis {
    margin-top: 3px;
    margin-bottom: 3px;
    line-height: 1.35;
    font-size: 0.9rem;
}

/* Kleiner Abstand vor der Titelliste */

.com-content-category-blog ol.com-content-blog__links {
    margin-top: 12px;
}
/* Septole – Titelliste besser lesbar */

.com-content-category-blog ol.com-content-blog__links li {
    margin-bottom: 7px;
    line-height: 1.45;
}

.com-content-category-blog ol.com-content-blog__links a:hover {
    color: #005d73;
    text-decoration: underline;
}
/* Septole – Taktmarken auf kleinen Bildschirmen */

@media (max-width: 700px) {
    .mrk-scroll {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mrk-scroll td {
        white-space: nowrap;
    }

    .mrk-scroll a.tp-playing {
        display: inline-block;
        padding: 6px 4px;
    }
}
/* Septole – Überschriften der Playalong-Seiten */

.com-content-article__body h1,
.com-content-article__body h2,
.com-content-article__body h3 {
    color: #173b55;
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 6px;
    margin-bottom: 12px;
}
/* Septole – Impressum und Datenschutz auf Smartphones */

@media (max-width: 700px) {

    table.septole-rechtliches,
    table.septole-rechtliches tbody,
    table.septole-rechtliches tr,
    table.septole-rechtliches td {
        display: block;
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
    }

    table.septole-rechtliches {
        border-spacing: 0;
    }

    table.septole-rechtliches td {
        padding: 8px 4px 20px;
        overflow-wrap: anywhere;
    }
}
/* Hamburger-Schaltfläche auf weißem Hintergrund sichtbar machen */
@media (max-width: 991.98px) {
    .container-header .navbar-toggler {
        color: #173b55;
        border: 1px solid #173b55;
    }

    .container-header .navbar-toggler-icon {
        color: #173b55;
    }
}