/* ===== Datenschutz/Impressum ===== */

#maincontainer-datenschutz {
    background-color: #e4f2f9;
    margin: 90px 0 60px;
}

#container-datenschutz {
    padding: 30px 0 60px;
}

.ds-hero .container {
    padding: 40px 20px 10px;
}

.ds-hero h1 {
    margin: 0 0 10px;
    font-size: 2.2rem;
    color: #1888c8;
}

.ds-hero p {
    margin: 0;
    color: #3b3b3b;
}

/* Layout: TOC + Content */
.ds-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.ds-toc {
    display: none; /* mobile hidden */
}

.ds-toc h3 {
    margin: 0 0 8px;
    font-size: 1.4em;
    color: #1888c8;
}

.ds-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ds-toc li {
    margin: 6px 0;
}

.ds-toc a {
    color: #214b7d;
    text-decoration: none;
    font-size: 1em;
}

.ds-toc a:hover {
    color: #1888c8;
    text-decoration: underline;
}

.ds-content {
    min-width: 0;
}

.ds-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    padding: 24px;
    margin-bottom: 24px;
}

.title-datenschutz {
    border-bottom: 1px solid #1888c821;
    padding-bottom: 10px;
    margin: 4px 0 20px;
    color: #222;
}

.title-punk-datenschutz {
    margin-top: 34px;
    color: #1888c8;
}

.ul-verantwortung {
    list-style: none;
    padding: 0;
    margin: 10px 0 16px;
    font-size: 16px;
}

.ul-verantwortung > li { margin: 0 0 4px; }

.ds-card a {
    color: #1888c8;
    text-decoration: none;
}
.ds-card a:hover { text-decoration: underline; }

.ds-backtop { text-align: center; margin-top: 20px; }

.btn-backtop {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 6px;
    background: #1888c8;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(24,136,200,0.25);
}
.btn-backtop:hover { background: #1577af; }

/* Desktop: Sidebar sichtbar + sticky */
@media (min-width: 1000px) {
    .ds-layout {
        grid-template-columns: 280px 1fr;
        align-items: start;
    }
    .ds-toc {
        display: block;
        position: sticky;
        top: 110px;
        align-self: start;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.08);
        padding: 16px 18px;
        height: max-content;
    }
}

@media (max-width: 800px) {
    .title-datenschutz {
        font-size: 2.6rem;
    }
}