/* =====================================================================
   BitPoint Hosting – rechtliches.css
   ---------------------------------------------------------------------
   ZWECK
   Gemeinsames Stylesheet fuer die rechtlichen Textseiten:
       datenschutz.php  ·  impressum.php  ·  cookies.php

   Wird ZUSAETZLICH zu style.css geladen (dort liegen die Design-Tokens,
   der Header, der dunkle Footer und die Grundtypografie). Hier stehen
   nur die Ergaenzungen fuer lange Textseiten: Lesebreite,
   Ueberschriften-Hierarchie, Tabelle.

   INHALTSVERZEICHNIS
     1.  SEITENRAHMEN        – Abstand unter dem fixen Header, Lesebreite
     2.  TYPOGRAFIE          – h1/h2/h3, Absaetze, Listen, Links
     3.  INFOKASTEN          – hervorgehobener Hinweis (Akzent-Blau)
     4.  TABELLE             – Cookie-Uebersicht
     5.  FUSSZEILE           – Anpassung des dunklen Footers aus style.css
     6.  RESPONSIVE          – Anpassungen fuer schmale Bildschirme
   ===================================================================== */


/* =====================================================================
   1. SEITENRAHMEN
   ---------------------------------------------------------------------
   Der Header aus style.css ist fixiert; der Inhalt braucht deshalb
   oben Luft. Lange Rechtstexte lesen sich am besten in begrenzter
   Breite auf hellem Grund.
   ===================================================================== */
.rechtliches-page {
    background: var(--section-bg);
    color: var(--section-text);
    min-height: 100vh;
    padding: 120px 20px 60px;
}

.rechtliches-wrap {
    max-width: 860px;
    margin: 0 auto;
    background: var(--section-bg-alt);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 48px 56px 56px;
}


/* =====================================================================
   2. TYPOGRAFIE
   ===================================================================== */
.rechtliches-wrap h1 {
    font-size: 2rem;
    margin: 0 0 8px;
    color: var(--section-text);
}

.rechtliches-wrap h1 span {
    color: var(--accent);
}

.rechtliches-stand {
    color: #777777;
    font-size: 0.9rem;
    margin: 0 0 36px;
}

.rechtliches-wrap h2 {
    font-size: 1.25rem;
    margin: 36px 0 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--section-text);
}

.rechtliches-wrap h3 {
    font-size: 1.05rem;
    margin: 24px 0 8px;
    color: var(--section-text);
}

.rechtliches-wrap p,
.rechtliches-wrap li {
    line-height: 1.65;
    margin: 0 0 12px;
}

.rechtliches-wrap ul {
    padding-left: 22px;
    margin: 0 0 16px;
}

.rechtliches-wrap li {
    margin-bottom: 6px;
}

.rechtliches-wrap a {
    color: var(--accent);
    text-decoration: none;
}

.rechtliches-wrap a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Adressblock (Verantwortlicher, Impressum) */
.rechtliches-adresse {
    background: var(--section-bg);
    border-radius: var(--radius-md, 10px);
    padding: 16px 20px;
    margin: 0 0 16px;
    line-height: 1.7;
}


/* =====================================================================
   3. INFOKASTEN
   ---------------------------------------------------------------------
   Fuer wichtige Hinweise (z. B. BitBot: keine Personendaten in den
   Chat eingeben). Bewusst Akzent-Blau, NICHT Bernstein – Bernstein ist
   im Projekt fuer Warnzustaende reserviert; dies hier ist Information.
   ===================================================================== */
.rechtliches-hinweis {
    background: rgba(33, 150, 243, 0.08);
    border-left: 4px solid var(--accent);
    border-radius: 0 var(--radius-md, 10px) var(--radius-md, 10px) 0;
    padding: 14px 18px;
    margin: 0 0 16px;
}

.rechtliches-hinweis p {
    margin: 0;
}


/* =====================================================================
   4. TABELLE (Cookie-Uebersicht)
   ===================================================================== */
.rechtliches-tabelle {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: 0.95rem;
}

.rechtliches-tabelle th,
.rechtliches-tabelle td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    vertical-align: top;
}

.rechtliches-tabelle th {
    background: var(--section-bg);
    font-weight: 600;
}


/* =====================================================================
   5. FUSSZEILE
   ---------------------------------------------------------------------
   Der Rahmen kommt aus style.css: .footer, .footer-container und
   .footer-bottom sind dieselben Klassen wie auf der Startseite.

   Zwei Werte sind anzupassen, weil auf der Startseite ueber dieser
   Leiste noch der vierspaltige Block sitzt, den es hier nicht gibt:
   Ohne ihn haengt die Trennlinie von .footer-bottom im Nichts (wirkt
   wie eine zweite Zeile), und der grosszuegige Innenabstand von
   .footer waere fuer eine einzelne Zeile zu viel.

   Gleiche Werte wie .konto-seite .footer in konto.css (agb.php).
   Selektor ueber den Nachbarn: der Footer steht direkt hinter
   <main class="rechtliches-page">, so braucht es keine Body-Klasse.
   ===================================================================== */
.rechtliches-page + .footer {
    padding: 1.75rem 0;
}

.rechtliches-page + .footer .footer-bottom {
    padding-top: 0;
    border-top: none;                /* es steht nichts darueber */
}


/* =====================================================================
   6. RESPONSIVE
   ===================================================================== */
@media (max-width: 768px) {
    .rechtliches-page {
        padding: 100px 12px 40px;
    }

    .rechtliches-wrap {
        padding: 28px 20px 36px;
    }

    .rechtliches-wrap h1 {
        font-size: 1.6rem;
    }
}