/* NORDIX — Rechtstexte (Impressum, Datenschutz)

   Zwei Seiten, die niemand zum Vergnügen liest — und die trotzdem gefunden,
   überflogen und wiedergefunden werden müssen. Deshalb keine Gestaltung, die
   sich in den Vordergrund spielt: nummerierte Abschnitte, ein durchlaufender
   Rhythmus, eine Spalte in bequemer Zeilenlänge.

   Die Nummer steht in der Randspalte, nicht im Fließtext. So bleibt sie beim
   Überfliegen sichtbar, ohne den Satz zu unterbrechen. */

.rseite{padding:clamp(40px,7vh,96px) var(--pad) clamp(60px,9vh,120px)}
.rseite .kopfzeile{max-width:74ch}
.rseite .lbl2{
  font-size:var(--fs-micro);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--orange);display:block;margin-bottom:12px;
}
/* 16ch reichten für „Impressum" und „Datenschutz". „Widerrufsbelehrung"
   braucht einzeilig 1030 px, der Deckel lag bei 930 — die Überschrift brach
   mitten im Wort um, mit sichtbarem Trennstrich, während die beiden anderen
   Rechtsseiten einzeilig stehen. 19ch gibt ihr den Platz, ohne die Lesespalte
   der Fließtexte anzufassen (die hängt an .rblock, nicht hier). */
.rseite h1{max-width:19ch}
.rseite .stand{margin-top:20px;font-size:12.5px;color:var(--ink-3)}

.rtext{margin-top:clamp(36px,5vw,64px);max-width:78ch}

/* Abschnitt: Nummer links, Inhalt rechts. Unter 900 px klappt die Randspalte
   weg — dort steht die Nummer über dem Titel, wie überall sonst auf der Seite. */
.rblock{
  display:grid;grid-template-columns:64px minmax(0,1fr);
  gap:0 clamp(16px,2.4vw,34px);
  padding:clamp(24px,3vw,38px) 0;
  border-top:1px solid var(--line);
}
.rblock:last-child{border-bottom:1px solid var(--line)}
.rblock .nr{
  font-size:var(--fs-micro);letter-spacing:.16em;color:var(--orange);
  padding-top:6px;
}
.rblock h2{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(20px,2.2vw,29px);line-height:1.12;letter-spacing:var(--tr-h2);
  margin-bottom:14px;
}
.rblock h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(16px,1.6vw,20px);text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink);
  margin:22px 0 8px;
}
.rblock h3:first-of-type{margin-top:0}
.rblock p{color:var(--ink-2)}
.rblock p + p{margin-top:12px}
/* Lange Überschriften dürfen die Seite nicht sprengen.
   „Widerrufsbelehrung" misst bei 375 px Schirmbreite 398 px in einem 343 px
   schmalen Kasten — 18 Zeichen bei 46 px Schriftgröße, und kein Zeichen, an
   dem der Browser umbrechen dürfte. Das Dokument wurde dadurch 39 px breiter
   als das Fenster: waagerechtes Scrollen auf der ganzen Seite.

   Im HTML steht deshalb ein weiches Trennzeichen an der Fuge des Kompositums
   (`Widerrufs&shy;belehrung`) — es bricht dort, wo auch ein Setzer trennen
   würde, und ist unsichtbar, solange der Platz reicht. `hyphens:auto` und
   `overflow-wrap` sind das Netz darunter, falls einmal eine Überschrift ohne
   gesetzte Fuge dazukommt. */
.rkopf h1{hyphens:auto;overflow-wrap:break-word}

.rblock a{color:var(--orange);text-decoration:none;border-bottom:1px solid var(--line-2)}
.rblock a:hover{border-color:var(--orange)}

/* Anschriften und Kontaktblöcke behalten ihre Zeilenumbrüche — eine Adresse
   ist keine Aufzählung und kein Fließtext. */
.rblock .anschrift{
  color:var(--ink);white-space:pre-line;line-height:1.75;
  margin:0;font-size:14px;
}
@media(max-width:900px){
  .rblock{grid-template-columns:1fr}
  .rblock .nr{padding-top:0;margin-bottom:10px}
}

/* Muster-Widerrufsformular (W-212). Derselbe Kasten wie das
   Qualitätsversprechen der Startseite: feine Linie, orange Kante links.
   Die Striche vor den Zeilen gehören zum amtlichen Muster, die gestrichelten
   Felder darunter sind nur Platz zum Ausfüllen und für Screenreader stumm. */
.rblock .muster{
  margin-top:18px;padding:clamp(18px,2.4vw,28px);
  border:1px solid var(--line-2);border-left:2px solid var(--orange);
  border-radius:0 10px 10px 0;
  background:color-mix(in srgb,var(--orange) 4%,transparent);
}
.muster .mtitel{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink);font-size:clamp(16px,1.6vw,20px);
}
.rblock .muster .mhinweis{margin-top:6px;font-size:13.5px}
.muster ul{list-style:none;margin:18px 0 0;padding:0}
.muster li{position:relative;padding-left:22px;color:var(--ink-2);line-height:1.6}
.muster li + li{margin-top:16px}
.muster li::before{content:"–";position:absolute;left:0;color:var(--orange)}
.muster .feld{display:block;height:24px;border-bottom:1px dashed var(--line-2)}
.rblock .muster .mfuss{margin-top:18px;font-size:13px;color:var(--ink-3)}
