/* ==========================================================================
   Rechtsseiten (impressum.html, datenschutz.html)

   Baut auf css/styles.css auf – von dort kommen Hintergrund, Blasen, Cinzel
   und die Farbwerte.

   WICHTIG zur Schrift: Cinzel ist eine reine Versalschrift und besitzt keine
   Kleinbuchstaben. Für Rechtstexte, in denen Groß- und Kleinschreibung
   bedeutungstragend ist, ist sie unbrauchbar. Deshalb trägt hier nur die
   Seitenüberschrift Cinzel; alles andere läuft in einer Serifenschrift mit
   echten Minuskeln, die zum klassischen Charakter der Seite passt.
   ========================================================================== */

body {
    overflow: auto;
}

.rechtstext-page {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(1.5rem, 5vh, 3rem) 1.25rem clamp(2rem, 6vh, 4rem);
}

/* --------------------------------------------------------------------------
   Kopfbereich
   -------------------------------------------------------------------------- */

.rechtstext-header {
    text-align: center;
    margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.rechtstext-header img {
    display: block;
    height: clamp(80px, 12vh, 120px);
    width: auto;
    margin: 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(217, 166, 85, 0.45));
}

.rechtstext-header h1 {
    margin-top: 1.2rem;
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    font-size: clamp(1.5rem, 4.5vw, 2.3rem);
    font-weight: 700;
    letter-spacing: 2px;
    color: #d9a655;
}

.rechtstext-rule {
    width: 80px;
    height: 3px;
    margin: 1.1rem auto 0;
    background-color: #d9a655;
}

/* --------------------------------------------------------------------------
   Textkörper
   -------------------------------------------------------------------------- */

.rechtstext {
    padding: clamp(1.25rem, 4vw, 2.75rem);
    background-color: rgba(245, 245, 245, 0.03);
    border: 1px solid rgba(217, 166, 85, 0.2);
    border-radius: 8px;
}

/* Überschreibt die Cinzel-Vorgabe aus styles.css für den gesamten Textkörper */
.rechtstext,
.rechtstext * {
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, 'Times New Roman', serif;
    letter-spacing: normal;
}

.rechtstext {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(245, 245, 245, 0.82);
}

.rechtstext h2 {
    margin: 2.4rem 0 0.9rem;
    padding-bottom: 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.35;
    color: #d9a655;
    border-bottom: 1px solid rgba(217, 166, 85, 0.25);
}

.rechtstext h3 {
    margin: 1.7rem 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    color: #e3c489;
}

.rechtstext h4 {
    margin: 1.2rem 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(245, 245, 245, 0.95);
}

.rechtstext > :first-child {
    margin-top: 0;
}

.rechtstext p {
    margin-bottom: 1rem;
}

.rechtstext ul,
.rechtstext ol {
    margin: 0 0 1rem 1.4rem;
}

.rechtstext li {
    margin-bottom: 0.4rem;
}

.rechtstext strong {
    color: rgba(245, 245, 245, 0.95);
}

/* Lange Links (etwa die EU-Schlichtungsplattform) dürfen auf schmalen
   Displays nicht über den Rand hinauslaufen. */
.rechtstext a {
    color: #d9a655;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.rechtstext a:hover {
    color: #f0c584;
}

/* Inhaltsverzeichnis der Datenschutzerklärung */
.rechtstext .table-of-contents {
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    background-color: rgba(217, 166, 85, 0.06);
    border: 1px solid rgba(217, 166, 85, 0.2);
    border-radius: 6px;
}

.rechtstext .table-of-contents h3 {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    color: #d9a655;
}

.rechtstext .table-of-contents ul {
    margin: 0 0 0 1.2rem;
}

.rechtstext .table-of-contents li {
    margin-bottom: 0.2rem;
}

/* --------------------------------------------------------------------------
   Zurück-Schaltfläche
   -------------------------------------------------------------------------- */

.rechtstext-footer {
    margin-top: clamp(1.5rem, 4vh, 2.5rem);
    text-align: center;
}

.rechtstext-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.85rem 1.9rem;
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #121212;
    background-color: #d9a655;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
}

.rechtstext-back:hover {
    background-color: #c69144;
    transform: translateY(-2px);
}

.rechtstext-back:focus-visible {
    outline: 2px solid #f0c584;
    outline-offset: 3px;
}

.rechtstext-back svg {
    width: 17px;
    height: 17px;
}

.rechtstext-meta {
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: rgba(245, 245, 245, 0.45);
}

.rechtstext-meta a {
    color: rgba(245, 245, 245, 0.65);
    text-decoration: none;
}

.rechtstext-meta a:hover {
    color: #d9a655;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
    .rechtstext {
        font-size: 0.95rem;
        line-height: 1.75;
    }

    .rechtstext h2 {
        font-size: 1.2rem;
    }

    .rechtstext-back {
        width: 100%;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Druckausgabe – Rechtstexte werden häufig ausgedruckt oder als PDF gesichert
   -------------------------------------------------------------------------- */

@media print {
    .background,
    .bubbles,
    .rechtstext-footer {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
    }

    .rechtstext-page {
        max-width: none;
        padding: 0;
    }

    .rechtstext {
        padding: 0;
        background: none;
        border: none;
        color: #000;
    }

    .rechtstext h2,
    .rechtstext h3,
    .rechtstext h4,
    .rechtstext-header h1 {
        color: #000;
    }

    .rechtstext a {
        color: #000;
    }
}