/* ==========================================================================================
   Rechtsseiten -- Gestaltung der drei Vorlagen template-recht_impressum,
   template-recht_agb und template-recht_datenschutz
   Grundlage: documentation/Entwurf-Impressum.html
   Plan und Entscheidungen G-1 bis G-7: documentation/Rechtsseiten-Gestaltung-Plan.md

   REGEL FUER DIESE DATEI: Jeder Selektor beginnt mit .rt
   ------------------------------------------------------------------------------------------
   Das Element <main class="rt"> umschliesst die ganze Seite. Ohne diese Disziplin traefen
   Elementregeln (h1, h2, p, ul, dl ...) auch Kopfzeile, Fusszeile und jede andere Seite --
   bootstrap.min.css, global.css, header.css und footer.css liegen im selben Dokument.
   Dieselbe Regel gilt in store-seite.css und verteilerseite.css.

   WARUM EINE EIGENE DATEI UND NICHT store-seite.css
   An store-seite.css haengen vier Vorlagen und 48 Store-Seiten; eine Aenderung dort gilt fuer
   alle. Die Rechtsseiten sind schmaler (720px statt 1180px), ruhiger und brauchen drei
   Bausteine, die es dort nicht gibt: Wertepaare, Schalenabschnitt, hervorgehobene Aussage.
   Sie borgen sich nichts und geben nichts. Dieselbe Haltung wie verteilerseite.css.

   DER ENTWURF IST AUF JOST GESETZT, DER AUFTRITT LAEUFT AUF OVERPASS
   Overpass laeuft breiter -- gemessen an den Beschriftungen dieser Seite zwischen +0.8 %
   (COMPANY) und +15.1 % (SIRKET), im Mittel rund +7 %. Alle Werte unten sind mit
   documentation/tools/ttfmess.py in Overpass nachgemessen, nicht aus dem Entwurf uebernommen.
   Kein Browser war daran beteiligt.

   SCHNITTE WERDEN BENANNT, NICHT GESCHALTET
   Overpass liegt als sieben eigenstaendige Familien vor. `font-weight: 200` des Entwurfs
   waehlt keinen Schnitt aus -- es laesst den Browser einen falschen synthetisieren. Uebersetzt
   nach der Hausregel aus store-seite.css: Entwurf 200 -> "Overpass-Thin" (h1), Entwurf 200
   bei h2 -> "Overpass-Light", Entwurf 300 -> "Overpass-Light", Entwurf 400 -> "Overpass-
   Regular". `font-weight: normal` steht ueberall daneben, damit nichts synthetisiert wird.

   KEIN scroll-behavior, KEIN globales transition-Verbot -- beides waere eine Regel an html
   und damit projektweit. Der Entwurf setzt sie; hier bleiben sie weg (wie in store-seite.css).
   ========================================================================================== */

.rt {
    --rt-ink: #14100E;
    --rt-paper: #FFFFFF;
    --rt-shell: #F4F2F0;
    --rt-line: #DDD9D5;
    --rt-muted: #6E6A66;
    --rt-pad: clamp(1.25rem, 5vw, 4rem);
    --rt-max: 720px;

    display: block;
    background: var(--rt-paper);
    color: var(--rt-ink);
    font-family: "Overpass-Light", sans-serif;
    font-weight: normal;
    font-size: 1.0625rem;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;

    /* Ausgleich fuer die feste Kopfzeile. .header ist projektweit position:fixed und steht
       ausserhalb des Textflusses; die bestehenden Seiten halten den Platz ueber page.css frei
       (.section: 7vw, unter 1400px 100px). Diese Vorlagen laden page.css bewusst nicht --
       ohne diesen Ausgleich liegt die Brotkrume hinter Logo und Menueschalter. Gleicher Wert
       wie store-seite.css, damit der Abstand oben auf allen neuen Vorlagen derselbe ist. */
    padding-top: 100px;
}

/* ---------- Ruecksetzungen: nur innerhalb von .rt ----------
   In :where(), aus demselben Grund wie in store-seite.css: `.rt h1` haette die Spezifitaet
   (0,1,1) und schluege jede einklassige Regel auf denselben Elementen, unabhaengig von der
   Reihenfolge. `:where(.rt) h1` liegt bei (0,0,1) -- jede Klassenregel gewinnt von selbst,
   und das Praefixieren jeder einzelnen Regel entfaellt als Dauerpflicht.
   RESTRISIKO wie dort: In einem Browser ohne :where() entfaellt der Reset. Unterstuetzt seit
   Firefox 78, Safari 14 und Chrome/Edge 88. */
:where(.rt) h1,
:where(.rt) h2,
:where(.rt) h3,
:where(.rt) p,
:where(.rt) ul,
:where(.rt) ol,
:where(.rt) dl,
:where(.rt) dd,
:where(.rt) dt {
    margin: 0;
    padding: 0;
}

:where(.rt) a {
    color: inherit;
    text-decoration: none;
}

.rt :focus-visible {
    outline: 2px solid var(--rt-ink);
    outline-offset: 3px;
}

/* ---------- Rahmen ---------- */
.rt-wrap {
    max-width: var(--rt-max);
    margin: 0 auto;
    padding-left: var(--rt-pad);
    padding-right: var(--rt-pad);
}

.rt-abschnitt {
    padding-top: clamp(2.4rem, 4.5vw, 3.8rem);
    padding-bottom: clamp(2.4rem, 4.5vw, 3.8rem);
}

/* Der Titelbereich schliesst nach unten nicht ab -- der erste Sachabschnitt folgt dicht. */
.rt-titel {
    padding-bottom: 0;
}

/* ---------- Brotkrume ----------
   Bauform und Beschriftung wie bei den fuenf neuen Vorlagen (P-81): <nav> mit aria-label,
   Endstufe als <span aria-current="page"> ohne Verweis. */
.rt-crumb {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rt-muted);
    padding-top: 1.6rem;
}

.rt-crumb ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rt-crumb li + li::before {
    content: "\203A";
    margin-right: 0.5rem;
}

.rt-crumb a:hover {
    color: var(--rt-ink);
}

/* ---------- Typografie ---------- */
.rt-eyebrow {
    display: block;
    font-family: "Overpass-Regular", sans-serif;
    font-weight: normal;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--rt-muted);
    margin-bottom: 1.3rem;
}

.rt h1 {
    font-family: "Overpass-Thin", sans-serif;
    font-weight: normal;
    font-size: clamp(2.1rem, 5vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
}

/* GEMESSEN in Overpass-Thin bei 51.2px (Obergrenze der clamp) gegen 640px Inhaltsbreite:
   Elf der zwoelf Seitentitel stehen einzeilig. Zwei Werte zum Nachhalten --
     "Conditions générales de vente (CGV)"  792px -> zweizeilig. Das ist kein Fehler.
     "Déclaration de confidentialité"       631px -> einzeilig, aber nur 9px Luft.
   ttfmess rechnet ohne Kerning und liegt damit eher zu breit; der echte Wert ist knapper.
   Wer die clamp-Obergrenze anhebt, bricht zuerst den franzoesischen Datenschutztitel um. */

.rt h2 {
    font-family: "Overpass-Light", sans-serif;
    font-weight: normal;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.rt-intro {
    margin-top: 1.4rem;
}

/* ---------- Wertepaare statt Tabelle (Impressum) ---------- */
.rt-angaben {
    border-top: 1px solid var(--rt-line);
    margin-top: 1.8rem;
}

.rt-zeile {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rt-line);
}

/* DIE 13rem SIND GEMESSEN, NICHT UEBERNOMMEN.
   Der Entwurf setzt 11rem = 176px. In Overpass reicht das nicht: die Beschriftungen stehen in
   Versalien mit 0.16em Sperrung bei 11.52px, und die tuerkische laeuft auf 197px.
     KDV KİMLİK NO. (UST-IDNR.)  197px   <- sprengt 11rem um 21px
     VAT ID NO. (UST-IDNR.)      163px
     N° DE TVA (UST-IDNR.)       159px
     UNTERNEHMEN                 104px   <- laengste deutsche
   13rem = 208px lassen der tuerkischen 11px Luft. Die Wertespalte behaelt dabei 408px; der
   breiteste Wert ("Sima Group Tekstil San. Tic. Ltd. Şti.", 259px) bleibt einzeilig.

   ⚠ DIE TUERKISCHE MESSUNG BRAUCHT DIE TUERKISCHE GROSSSCHREIBUNG. `text-transform: uppercase`
   macht bei lang="tr" aus "kimlik" nicht KIMLIK, sondern KİMLİK -- und das Dokument traegt
   lang="tr" (nachgemessen an /tr/yasal-bilgilendirme). Wer mit der Grossschreibung anderer
   Sprachen misst, misst 4px zu wenig und uebersieht, dass Overpass İ, ı, Ş, Ğ ueberhaupt
   fuehrt (tut es, alle geprueft).

   Was den Wert treibt, ist allein der Zusatz "(USt-IdNr.)" in der Beschriftung. Faellt er weg,
   genuegen 11rem wie im Entwurf. Das ist eine Frage an den Auftraggeber und wird beim Anlegen
   der Uebersetzungsschluessel gestellt -- nicht hier entschieden. */
@media (min-width: 640px) {
    .rt-zeile {
        grid-template-columns: 13rem 1fr;
        gap: 1.5rem;
        align-items: baseline;
    }
}

.rt-zeile dt {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rt-muted);
}

.rt-zeile dd {
    font-size: 1.02rem;
}

.rt-zeile a {
    border-bottom: 1px solid var(--rt-line);
}

.rt-zeile a:hover {
    border-bottom-color: var(--rt-ink);
}

.rt-satz {
    margin-top: 1.8rem;
    font-size: 0.98rem;
    color: var(--rt-muted);
}

/* ---------- Schalenabschnitt (Istanbul) ----------
   Die Schalenfarbe ist die Abgrenzung: sie zeigt, dass der Block nicht zur
   Anbieterkennzeichnung gehoert. Sie laeuft ueber die volle Breite, der Inhalt bleibt im
   Rahmen -- deshalb sitzt .rt-wrap innerhalb von .rt-schale, nicht umgekehrt. */
.rt-schale {
    background: var(--rt-shell);
}

/* ---------- Hinweiskasten (der Abgrenzungssatz) ---------- */
.rt-hinweis {
    background: var(--rt-paper);
    border: 1px solid var(--rt-line);
    padding: 1.2rem 1.4rem;
    margin-top: 1.4rem;
    font-size: 0.95rem;
    color: var(--rt-muted);
}

/* ---------- Hervorgehobene Aussage (Verbraucherstreitbeilegung) ---------- */
.rt-aussage {
    border-left: 2px solid var(--rt-ink);
    padding: 0.2rem 0 0.2rem 1.5rem;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.5;
}

/* ---------- Verweisreihe ---------- */
.rt-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin-top: 2.2rem;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.rt-reihe a {
    border-bottom: 1px solid var(--rt-ink);
    padding-bottom: 0.2rem;
}

.rt-reihe a:hover {
    color: var(--rt-muted);
    border-bottom-color: var(--rt-muted);
}

/* ---------- Inhaltsverzeichnis (AGB) ----------
   Der Entwurf setzt es zweispaltig ab 640px in die Schalenfarbe, ueber die Paragrafen.

   GEMESSEN in Overpass-Light bei 15.2px (0.95rem) gegen die Titelspalte einer der beiden
   Spalten: 640px Inhalt - 2 x 28.8px Kastenpolster = 582.4px, davon je Spalte 275.2px
   (32px Rinne), abzueglich Nummernspalte 41.6px und Abstand 9.6px -> 224.0px fuer den Titel.
   Sieben der 49 Eintraege laufen damit auf zwei Zeilen:
     de  § 5 Lieferzeit & moegliche Verzoegerungen   250.9px
     de  § 6 Aenderungen & zusaetzliche Wuensche     240.9px
     en  § 6 Alterations & Additional Requests       227.7px   (tr fuehrt denselben Text)
     tr  § 6 Alterations & Additional Requests       227.7px
     fr  § 5 Delais de livraison & retards eventuels 256.9px
     fr  § 6 Retouches & demandes supplementaires    274.4px   <- der breiteste
     fr  § 12 Reglement des litiges de consommation  268.5px
   Das ist kein Fehler: die zweite Zeile setzt unter dem Titel auf, nicht unter der Nummer,
   und liest sich als Verzeichnis. EINSPALTIG waeren alle 49 einzeilig (531.2px verfuegbar
   gegen 274.4px breitesten Titel), der Kasten aber 13 Zeilen hoch und der erste Paragraf
   entsprechend weit unten. Zweispaltig ist die Entscheidung des Entwurfs, und sie traegt.

   DIE NUMMERNSPALTE IST NACHGEMESSEN, NICHT UEBERNOMMEN: "§ 13" misst bei 11.52px mit
   0.16em Sperrung 27.1px. Die 2.2rem (35.2px) des Entwurfs genuegen; 2.6rem hier geben der
   Ausrichtung mit der Paragrafenueberschrift dieselbe Kante. */
.rt-inhalt {
    background: var(--rt-shell);
    padding: 1.6rem 1.8rem;
    margin-top: 2rem;
}

.rt-inhalt ol {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
}

@media (min-width: 640px) {
    .rt-inhalt ol {
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
    }
}

.rt-inhalt a {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    font-size: 0.95rem;
    line-height: 1.45;
}

/* Der Unterstrich sitzt am Titel, nicht am ganzen Verweis -- sonst zoege er unter der
   Nummer durch und die Reihe wirkte durchgestrichen. `transparent` statt keiner Regel,
   damit beim Ueberfahren nichts springt. */
.rt-inhalt a > span:last-child {
    border-bottom: 1px solid transparent;
}

.rt-inhalt a:hover > span:last-child,
.rt-inhalt a:focus-visible > span:last-child {
    border-bottom-color: var(--rt-ink);
}

.rt-inhalt-nr {
    flex: none;
    min-width: 2.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--rt-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- Ein Paragraf (AGB) ----------
   Trennlinien zwischen den Paragrafen, oben und unten geschlossen. `border-top` an jedem und
   `border-bottom` nur am letzten -- so entsteht zwischen zwei Paragrafen genau EINE Linie,
   auch wenn spaeter einer dazukommt oder wegfaellt. */
.rt-para {
    display: block;
    border-top: 1px solid var(--rt-line);
    padding: 1.8rem 0;
}

.rt-para:last-child {
    border-bottom: 1px solid var(--rt-line);
}

/* Die Ueberschrift traegt Nummer UND Titel (siehe die Begruendung in der Vorlage). Die
   Nummer steht links daneben, nicht darueber: flex mit baseline, damit die Grundlinien der
   beiden Schriftgroessen aufeinander sitzen.
   GEMESSEN bei 21.6px (Obergrenze der clamp) gegen 584px: der breiteste der 49 Titel
   ("Retouches & demandes supplementaires", fr) misst 389.9px. Alle 49 einzeilig. */
.rt-para-kopf {
    display: flex;
    gap: 0.9rem;
    align-items: baseline;
    margin-bottom: 0.9rem;
    font-size: clamp(1.15rem, 1.9vw, 1.35rem);
    line-height: 1.3;
    letter-spacing: 0;
}

.rt-para-nr {
    flex: none;
    min-width: 2.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--rt-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---------- Fliesstext (AGB und Datenschutz) ----------
   G-2: Der Datenschutz behaelt posts.content und wird nur neu gerahmt. Was hier steht, ist
   rohes Editor-HTML -- p, ul, li, strong, a, gelegentlich h2. Diese Regeln geben ihm die
   Typografie der Seite, ohne dass am Inhalt etwas geaendert wird.
   Die AGB liefern ihre Paragrafen ab Schritt 6 aus einem Repeater und bringen dieselben
   Elemente mit; deshalb ein Baustein fuer beide. */
.rt-text > * + * {
    margin-top: 1.05rem;
}

.rt-text h2 {
    margin-top: 2.6rem;
}

.rt-text h2:first-child {
    margin-top: 0;
}

.rt-text ul {
    list-style: none;
    padding-left: 1.4rem;
}

.rt-text li {
    position: relative;
}

.rt-text li + li {
    margin-top: 0.5rem;
}

.rt-text li::before {
    content: "";
    position: absolute;
    left: -1.4rem;
    top: 0.78em;
    width: 0.4rem;
    height: 1px;
    background: var(--rt-muted);
}

.rt-text strong {
    font-family: "Overpass-Regular", sans-serif;
    font-weight: normal;
}

.rt-text a {
    border-bottom: 1px solid var(--rt-line);
    overflow-wrap: anywhere;
}

.rt-text a:hover {
    border-bottom-color: var(--rt-ink);
}

/* Der Editor hinterlaesst leere Absaetze mit &nbsp; -- im Impressum sind sie am 18.08.2026
   entfernt worden, in den Datenschutzseiten stehen sie noch. Sie sollen keinen Abstand
   erzeugen, aber auch nicht verschwinden: der Redaktion soll nicht die Ablage umgebaut
   werden, nur weil die Gestaltung wechselt. */
.rt-text p:empty {
    display: none;
}

/* ---------- Der Fliesstext der Datenschutzseiten ----------
   `rt-fliess` steht ZUSAETZLICH zu `rt-text` und traegt allein die Gliederung, die der
   Entwurf verlangt: eine Trennlinie ueber jeder Hauptueberschrift. Sie darf nicht in
   `.rt-text` selbst stehen -- in der AGB-Vorlage sitzt `rt-text` innerhalb jedes Paragrafen,
   dort liefe die Linie quer durch den Absatzkoerper. */
.rt-fliess {
    border-top: 1px solid var(--rt-line);
    padding-top: clamp(1.6rem, 2.5vw, 2rem);
}

.rt-fliess h2 {
    margin-top: clamp(2rem, 3.5vw, 2.6rem);
    padding-top: clamp(1.2rem, 2vw, 1.6rem);
    border-top: 1px solid var(--rt-line);
}

/* Die erste Ueberschrift steht direkt unter der Linie des Blocks -- eine zweite Linie waere
   ein Doppelstrich. Sie trifft heute nicht zu (vor ihr steht die Kennzeichnungszeile), aber
   sobald eine Seite ohne diese Zeile beginnt, greift sie. */
.rt-fliess h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Die dritte Stufe hat im heutigen Bestand keinen Fall. Sie steht hier, damit eine
   Zwischenueberschrift sofort richtig aussieht, wenn die Redaktion eine anlegt -- ohne
   Trennlinie, denn sie gliedert innerhalb eines Abschnitts, nicht zwischen zweien. */
.rt-fliess h3 {
    margin-top: 1.6rem;
    font-family: "Overpass-Regular", sans-serif;
    font-weight: normal;
    font-size: 1.02rem;
    line-height: 1.35;
}

/* Vorsorge: der Bestand fuehrt heute keine Tabelle. Ohne diese Regeln stuende eine spaeter
   eingefuegte im Browser-Grundstil und liefe aus dem Rahmen. */
.rt-fliess table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.96rem;
}

.rt-fliess th,
.rt-fliess td {
    text-align: left;
    padding: 0.6rem 0.9rem 0.6rem 0;
    border-bottom: 1px solid var(--rt-line);
    vertical-align: top;
}

.rt-fliess th {
    font-family: "Overpass-Regular", sans-serif;
    font-weight: normal;
    color: var(--rt-muted);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ---------- Hinweiskasten der Datenschutzseite ----------
   ⚠ NICHT zu verwechseln mit `.rt-hinweis`: das ist der leise Abgrenzungssatz des Impressums
   (heller Grund, Rahmen, gedaempfte Schrift). Dieser Kasten sagt etwas AN die Leserin -- wohin
   sie schreiben kann -- und traegt deshalb die Schalenfarbe und die volle Textfarbe. */
.rt-kasten {
    background: var(--rt-shell);
    padding: clamp(1.1rem, 2vw, 1.3rem) clamp(1.2rem, 2.4vw, 1.6rem);
    margin-top: clamp(1.8rem, 3vw, 2.2rem);
    font-size: 0.98rem;
}

/* Kein Verweis-Zweig: der Kasten nennt die Mailadresse in der entschaerften Schreibweise des
   Bestandstextes und verlinkt sie bewusst nicht (Entscheidung vom 18.08.2026). */

/* ---------- Abschluss ---------- */
.rt-fuss {
    border-top: 1px solid var(--rt-line);
    margin-top: clamp(2.4rem, 4.5vw, 3.8rem);
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rt-muted);
}