/* ============================================================
   Bell-Fire · Rechtsseiten (Impressum, Datenschutz)
   Nur dort geladen. Navigation und Footer kommen aus style.css wie ueberall.

   Volle Content-Breite wie jede andere Sektion (Mike 14.09.2026). Vorher
   endete der Text bei 74ch und liess rechts ein knappes Drittel leer. Damit
   die Zeile trotzdem lesbar bleibt, steht jeder Abschnitt ab 900px als
   Rasterzeile: Ueberschrift links, Text rechts. Zusammen fuellen beide
   Spalten die Breite, die Textspalte bleibt bei rund 70 Zeichen.
   ============================================================ */
.rechts-sektion { background: var(--schwarz); padding-top: calc(var(--nav-hoehe) + var(--raum-5)); }
.rechts-kopf h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.12;
  color: var(--hell);
  text-wrap: balance;
}

.rechts-inhalt { color: var(--hell-sekundaer); line-height: 1.75; }
.rechts-abschnitt {
  padding-block: var(--raum-4);
  border-top: 1px solid var(--linie);
}
.rechts-abschnitt:first-child { padding-top: 0; border-top: 0; }
.rechts-abschnitt h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--hell);
  margin-bottom: var(--raum-2);
  hyphens: auto;
  overflow-wrap: break-word;
}
.rechts-abschnitt-text > :first-child { margin-top: 0; }
.rechts-abschnitt-text > :last-child { margin-bottom: 0; }
.rechts-inhalt h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--hell);
  margin-top: var(--raum-3);
  margin-bottom: 6px;
}
.rechts-inhalt p { margin-bottom: var(--raum-2); }
.rechts-inhalt strong { color: var(--hell); font-weight: 600; }
.rechts-inhalt a { color: var(--bernstein); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.rechts-inhalt a:hover { color: var(--bernstein-tief); }
.rechts-inhalt ul, .rechts-inhalt ol { display: grid; gap: 10px; margin: 0 0 var(--raum-2); }
.rechts-inhalt li { position: relative; padding-left: 26px; }
.rechts-inhalt li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.82em;
  width: 14px; height: 1px;
  background: var(--bernstein);
}
.rechts-inhalt address { font-style: normal; line-height: 2.2; margin-bottom: var(--raum-3); }

@media (min-width: 900px) {
  .rechts-abschnitt {
    display: grid;
    /* Die Textspalte ist gedeckelt (40rem, rund 70 Zeichen), die Ueberschriften-
       spalte nimmt den Rest. Weil der Text die RECHTE Spalte ist, endet er
       trotzdem an der Content-Kante, auch seit der Inhalt 1200px breit ist.
       15rem Mindestbreite haelt die Ueberschriften auf schmalen Tablets lesbar. */
    grid-template-columns: minmax(15rem, 1fr) minmax(0, 40rem);
    column-gap: var(--raum-5);
    align-items: start;
  }
  .rechts-abschnitt h2 { margin-bottom: 0; }
}

.rechts-zurueck { margin-top: var(--raum-5); }

/* ---- InGlory-Hinweis ---- */
.inglory-note {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: 1.6rem 1.7rem;
  background: #0A0807;
  color: #F4EFE6;
  border: 1px solid var(--linie);
  border-radius: var(--radius-bild);
  transition: box-shadow var(--t-mittel) var(--ease), border-color var(--t-mittel) var(--ease);
}
.inglory-note:hover {
  border-color: rgba(200, 233, 107, .32);
  box-shadow: 0 10px 34px -10px rgba(200, 233, 107, .22);
}
.inglory-note__mark {
  width: 38px; height: 38px; flex: none;
  color: #F4EFE6; margin-top: .15rem;
  transition: color var(--t-mittel) var(--ease), transform var(--t-mittel) var(--ease);
}
.inglory-note:hover .inglory-note__mark { color: #C8E96B; transform: scale(1.06); }
.inglory-note__label {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, .72);
}
.inglory-note__name {
  font-family: var(--font-body);
  font-size: 1.12rem;
  font-weight: 700;
  margin-top: .3rem;
  color: #F4EFE6;
}
.inglory-note__meta {
  display: grid;
  gap: .4rem;
  font-size: .88rem;
  line-height: 1.6;
  margin-top: .7rem;
  color: #F4EFE6;
}
.inglory-note__meta span { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.inglory-note__ico { width: 16px; height: 16px; flex: none; color: rgba(244, 239, 230, .72); }
/* Spezifitaets-Guard: .rechts-inhalt darf die Note nicht umfaerben */
.rechts-inhalt .inglory-note p { margin-bottom: 0; }
.rechts-inhalt .inglory-note__label { color: rgba(244, 239, 230, .72); }
.rechts-inhalt .inglory-note__name { color: #F4EFE6; }
.rechts-inhalt .inglory-note__meta { color: #F4EFE6; }
.inglory-note__meta a { color: #C8E96B; font-weight: 700; text-decoration: none; }
.inglory-note__meta a:hover { color: #A8C84A; text-decoration: underline; }

@media (max-width: 599px) {
  .inglory-note { flex-direction: column; gap: .9rem; padding: 1.3rem 1.2rem; }
}