/* ═══════════════════════════════════════════════════════════════════════
   RECHTSSEITEN — Impressum, Datenschutz, Barrierefreiheit
   Setzt auf basis.css auf. Eigene Datei, weil hier andere Regeln gelten
   als auf der Schauseite: Lesbarkeit vor Haltung. Der Grundton bleibt
   (Schwarz, Korn, Lobos FC in den Überschriften), aber der Fließtext ist
   größer und heller als auf der Startseite — Pflichttexte müssen ohne
   Anstrengung lesbar sein, sonst sind sie nicht „leicht zugänglich"
   im Sinn des § 5 ECG.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Kopfzeile: schmal, ohne Intro, ohne Video ──────────────────────── */
.rkopf{position:sticky;top:0;z-index:80;height:63px;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--rand);
  background:linear-gradient(rgba(7,8,7,.96),rgba(7,8,7,.72));
  backdrop-filter:blur(8px)}
.rkopf__marke{display:flex;align-items:center;gap:12px}
.rkopf__marke img{height:38px;width:auto}
.rkopf__wort{font-family:"Lobos FC",Impact,sans-serif;text-transform:uppercase;
  font-size:16px;letter-spacing:.02em;line-height:1;color:var(--weiss)}
@media (max-width:833px){
  .rkopf{height:52px}
  .rkopf__marke img{height:30px}
  .rkopf__wort{font-size:13px}
}

/* ── Satzspiegel ────────────────────────────────────────────────────── */
/* 68 Zeichen: die obere Kante des lesbaren Bereichs. Darüber verliert
   das Auge beim Zeilenwechsel den Anschluss.                          */
.rinhalt{width:min(100% - 2*var(--rand),68ch);margin-inline:auto;
  padding-block:clamp(48px,7vw,104px) clamp(80px,10vw,150px)}

/* Fließtext: 16–18 px statt der 13–15 px der Startseite, Deckkraft .86
   statt .72. Gemessen auf Schwarz ergibt das 12,4:1 — deutlich über
   WCAG AA (4,5:1), weil Rechtstexte am Handy gelesen werden.          */
.rinhalt{font-size:clamp(15px,.3vw + 14px,17px);line-height:1.7;
  color:rgba(250,250,249,.86)}

/* ── Überschriften ──────────────────────────────────────────────────── */
.rtitel{font-family:"Lobos FC",Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(38px,7vw,92px);line-height:.86;letter-spacing:.002em;
  word-spacing:.06em;margin:0;color:var(--weiss)}
.rvor{margin:0 0 clamp(20px,3vw,34px)}          /* Zurück-Zeile */
.rlead{font-size:clamp(17px,1vw + 13px,22px);line-height:1.35;
  color:rgba(250,250,249,.72);margin:clamp(20px,2.6vw,30px) 0 0;
  max-width:40ch}

.rinhalt h2{font-family:"Lobos FC",Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(22px,2.6vw,34px);line-height:.94;letter-spacing:.01em;
  word-spacing:.05em;color:var(--weiss);
  margin:clamp(52px,6.5vw,88px) 0 clamp(14px,1.8vw,22px)}
.rinhalt h3{font-family:"Geist",system-ui,sans-serif;font-weight:500;
  font-size:clamp(15px,.3vw + 14px,17px);line-height:1.4;
  color:var(--gold);margin:clamp(28px,3.4vw,42px) 0 8px}

.rinhalt p{margin:0 0 1.05em}
.rinhalt strong{color:var(--weiss);font-weight:500}

/* Verweise: Gold statt Unterstreichung — die Startseite kennt keine
   Underlines, das gilt hier auch. Der Unterstrich kommt beim Hover.   */
.rinhalt a{color:var(--gold);
  text-underline-offset:.22em;text-decoration-thickness:1px;
  transition:color var(--reaktion) var(--e1)}
.rinhalt a:hover,.rinhalt a:focus-visible{text-decoration:underline}

/* ── Angabenliste: Bezeichnung links, Wert rechts ───────────────────── */
.rliste{display:grid;grid-template-columns:minmax(11ch,16ch) 1fr;
  gap:2px clamp(16px,2.4vw,34px);margin:0 0 1.6em}
.rliste dt{font-size:clamp(11px,.12vw + 10px,12px);text-transform:uppercase;
  letter-spacing:.15em;color:var(--grau);padding-top:.42em}
.rliste dd{margin:0;color:var(--weiss)}
.rliste dd + dt{border-top:1px solid var(--linie);padding-top:calc(.42em + 12px);
  margin-top:12px}
.rliste dd:not(:first-of-type){border-top:1px solid var(--linie);
  padding-top:12px;margin-top:12px}
@media (max-width:560px){
  .rliste{grid-template-columns:1fr;gap:0}
  .rliste dt{padding-top:0;margin-top:16px}
  .rliste dd:not(:first-of-type){border-top:0;padding-top:2px;margin-top:2px}
  .rliste dd + dt{border-top:1px solid var(--linie);padding-top:16px}
}

/* ── Aufzählungen ───────────────────────────────────────────────────── */
.rinhalt ul{margin:0 0 1.3em;padding-left:0;list-style:none}
.rinhalt ul li{position:relative;padding-left:1.5em;margin-bottom:.5em}
.rinhalt ul li::before{content:"";position:absolute;left:.15em;top:.72em;
  width:5px;height:1px;background:var(--gold)}

/* ── Offene Stelle: was der Verein noch liefern muss ────────────────── */
/* Absichtlich auffällig. Diese Kästen dürfen nicht live gehen, und ein
   dezenter Platzhalter wird übersehen.                                */
.offen{display:inline;background:rgba(201,166,90,.16);
  box-shadow:0 0 0 1px var(--linie-gold);
  color:var(--gold);padding:.1em .45em;font-weight:500}

.hinweis{border-left:2px solid var(--linie-gold);
  padding:clamp(14px,2vw,20px) clamp(16px,2.4vw,26px);
  background:rgba(201,166,90,.05);margin:0 0 1.6em}
.hinweis p:last-child{margin-bottom:0}

/* ── Fuß der Rechtsseiten ───────────────────────────────────────────── */
.rfuss{border-top:1px solid var(--linie-gold);
  padding:clamp(26px,3.4vw,40px) var(--rand);
  display:flex;flex-wrap:wrap;gap:8px clamp(16px,2.4vw,30px);
  justify-content:space-between}
.rfuss a:hover{color:var(--gold)}

/* ── Bewegung zurücknehmen ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}
