/*
    Bueren / Rechtliche Seiten
    ==========================
    Gemeinsames Layout fuer Impressum und Datenschutz.
*/

.rechtliches {
    position: relative;
    overflow: hidden;
    min-height: 70vh;
    padding-block: 144px 96px;
    background: var(--farbe-surface);
}

.rechtliches__muster {
    position: absolute;
    inset: 0;
    opacity: 0.32;
    pointer-events: none;
}

.rechtliches__inhalt {
    position: relative;
    max-width: 920px;
}

.rechtliches__label {
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--farbe-secondary);
}

.rechtliches__titel {
    max-width: 760px;
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 700;
    line-height: 1;
    color: var(--farbe-primary);
}

.rechtliches__einleitung {
    max-width: 720px;
    margin-top: 24px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--farbe-on-surface-variant);
}

.rechtliches__text {
    margin-top: 48px;
    padding: 32px;
    border: 1px solid var(--farbe-outline-variant);
    background: var(--farbe-surface-container-lowest);
    font-size: 16px;
    line-height: 1.75;
    color: var(--farbe-on-surface-variant);
}

.rechtliches__text h2,
.rechtliches__text h3 {
    color: var(--farbe-primary);
}

.rechtliches__text p + p,
.rechtliches__text p + ul,
.rechtliches__text ul + p {
    margin-top: 18px;
}

.rechtliches__text ul {
    margin: 12px 0 0;
    padding-left: 20px;
}

.rechtliches__text a {
    color: var(--farbe-secondary);
}

@media (max-width: 767px) {
    .rechtliches {
        padding-block: 112px 72px;
    }

    .rechtliches__text {
        padding: 24px;
    }
}