/* ════════════════════════════════════════════════════════════════════
   RECHTSTEXTE — Nutzungsbedingungen, Rücktrittsbelehrung
   Designsprache „Hauptbuch & Beleg".

   Ein Rechtstext wird gelesen, nicht bedient. Deshalb: eine Spalte, eine
   Zeilenlänge, die das Auge hält (66ch), Serif im Fliesstext und eine
   Gliederung, die man beim Überfliegen findet. Keine Karten, keine
   Kästchen um jeden Absatz — genau der Fehler, den die Designsprache als
   zweite Kernregel verbietet.

   Eigene Tokens mit Rückfall wie in expert.css: Diese Seiten laden keine
   der grossen Hüllen.
   ════════════════════════════════════════════════════════════════════ */

.recht-body {
    --re-papier:     var(--hb-paper, #F4F1E8);
    --re-flaeche:    var(--hb-card, #FCFAF4);
    --re-tinte:      var(--hb-ink, #23201B);
    --re-tinte-mitte: var(--hb-ink-mid, #6E6757);
    --re-grau:       #736B5B;   /* nicht --hb-ink-muted: siehe unten */
    --re-linie:      var(--hb-border, #DAD3C2);
    --re-rot:        var(--hb-terra, #B0492C);
    --re-ocker:      var(--hb-ocker, #A8744D);
    --re-serif:      var(--hb-serif, 'Lora', Georgia, serif);
    --re-mono:       var(--hb-mono, 'JetBrains Mono', monospace);

    min-height: 100vh;
    margin: 0;
    background-color: var(--re-papier);
    background-image:
        linear-gradient(to right, rgba(120,110,85,0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(120,110,85,0.035) 1px, transparent 1px);
    background-size: 32px 32px;
    color: var(--re-tinte);
    font-family: var(--re-serif);
}

/* ZWEI TÖNE, DIE AUF DIESEM PAPIER NICHT REICHEN.
   ─────────────────────────────────────────────────────────────────────
   Die Hauspalette führt --hb-ink-muted (#8A8273) für Labels und
   --hb-ocker (#A8744D) als Aktiv-Farbe. Auf dem warmen Papier #F4F1E8
   kommen sie auf 3.37 und 3.53 — beides unter den 4.5, die WCAG AA für
   Text unter 18px verlangt, und die Mono-Labels hier sind 10 bis 11px.

   Die Tokens werden deshalb nicht benutzt, sondern für diese Seiten
   nachgedunkelt. Geändert wird nur der TEXT-Gebrauch: Wo Ocker als Kante
   steht (.ex-lage, .re-merke), bleibt der Hauston, denn eine Linie trägt
   keinen Text und fällt nicht unter die Regel.

   #736B5B kommt auf 4.67 auf Papier und 5.05 auf der Karte.
   #8F5F3C kommt auf 4.80 und bleibt erkennbar Ocker. */


.re-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    align-items: center;
    justify-content: space-between;
    max-width: 860px;
    margin: 0 auto;
    padding: 20px 24px;
    border-bottom: 1px solid var(--re-linie);
}
.re-marke img { height: 30px; width: auto; }
.re-kopf-wege { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.re-kopf-weg {
    font-family: var(--re-mono);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--re-tinte-mitte);
    border-bottom: 1px solid transparent;
}
.re-kopf-weg:hover { color: var(--re-rot); border-bottom-color: var(--re-rot); }

.re-seite { max-width: 860px; margin: 0 auto; padding: 34px 24px 80px; }

.re-marke-zeile {
    margin: 0 0 8px;
    font-family: var(--re-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--re-rot);
}
.re-seite h1 {
    margin: 0;
    font-size: clamp(27px, 4vw, 38px);
    font-weight: 600;
    line-height: 1.18;
}
.re-linie { margin: 18px 0 20px; border: 0; border-top: 2px solid var(--re-tinte); }

.re-stand {
    margin: 0 0 30px;
    font-family: var(--re-mono);
    font-size: 11px;
    letter-spacing: 1.2px;
    color: var(--re-grau);
}

/* Abschnitte trennt eine dünne Linie, nicht ein Rahmen. Dritte Kernregel:
   drei Linienstärken tragen die Hierarchie. */
.re-abschnitt {
    padding: 26px 0 0;
    border-top: 1px solid var(--re-linie);
    margin-top: 26px;
}
.re-abschnitt:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }

.re-abschnitt h2 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}
.re-abschnitt h3 {
    margin: 22px 0 8px;
    font-size: 16px;
    font-weight: 600;
}
.re-abschnitt p,
.re-abschnitt li {
    max-width: 66ch;
    font-size: 15.5px;
    line-height: 1.72;
    color: var(--re-tinte-mitte);
}
.re-abschnitt p { margin: 0 0 12px; }
.re-abschnitt p:last-child { margin-bottom: 0; }
.re-abschnitt strong { color: var(--re-tinte); font-weight: 600; }
.re-abschnitt a { color: var(--re-rot); border-bottom: 1px solid currentColor; }

.re-abschnitt ul, .re-abschnitt ol {
    margin: 0 0 12px;
    padding-left: 22px;
    list-style: disc;
}
.re-abschnitt ol { list-style: decimal; }
.re-abschnitt li { margin-bottom: 6px; }

/* Angaben in Zeilen — Kontoauszugslogik: Begriff links, Wert rechts. */
.re-daten { display: grid; gap: 0; margin: 12px 0 0; }
.re-zeile {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    gap: 8px 18px;
    padding: 11px 0;
    border-bottom: 1px solid var(--re-linie);
}
.re-zeile:first-child { border-top: 1px solid var(--re-linie); }
.re-begriff {
    font-family: var(--re-mono);
    font-size: 10.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--re-grau);
    padding-top: 2px;
}
.re-wert { font-size: 15px; line-height: 1.6; }

/* Der hervorgehobene Kasten: für das, was man gelesen haben muss. Eine
   Fläche mit einer starken linken Kante, keine zweite Rahmenebene. */
.re-merke {
    margin: 18px 0;
    padding: 16px 18px;
    border-left: 2px solid var(--re-ocker);
    background: var(--re-flaeche);
}
.re-merke p { margin: 0; }
.re-merke p + p { margin-top: 10px; }

/* Das Muster-Rücktrittsformular. Es ist ein Formular zum Abschreiben,
   also steht es in Mono auf abgesetzter Fläche mit hartem Rahmen. */
.re-formular {
    margin: 16px 0 0;
    padding: 20px 22px;
    border: 1px solid var(--re-tinte);
    background: var(--re-flaeche);
    font-family: var(--re-mono);
    font-size: 13px;
    line-height: 1.85;
    color: var(--re-tinte);
    white-space: pre-wrap;
}

.re-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--re-linie);
    font-family: var(--re-mono);
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.re-fuss a { color: var(--re-tinte-mitte); }
.re-fuss a:hover { color: var(--re-rot); }

@media (max-width: 620px) {
    .re-zeile { grid-template-columns: 1fr; gap: 4px; }
    .re-formular { padding: 16px; font-size: 12px; }
}