/* ==========================================================================
   Rechtliches — Musikschule Reinach AG
   Ein Stylesheet für Impressum, Datenschutzerklärung und Barrierefreiheit:
   drei Seiten desselben Typs, reine Lesetexte ohne eigene Bausteine.
   ========================================================================== */

.rec-section{max-width:calc(var(--content-max) + 80px);margin-inline:auto;padding-left:40px;padding-right:40px}

/* --- Einstieg ------------------------------------------------------------
   Ruhiger als auf den übrigen Seiten: kein Motiv, kein Farbfleck. Diese
   Seiten werden gelesen, nicht durchblättert. */
.rec-hero{padding-top:56px;padding-bottom:32px;max-width:720px;display:flex;flex-direction:column;gap:20px}
.rec-hero__title{margin:0;font-weight:900;font-size:var(--text-h1);line-height:var(--leading-headline);
  letter-spacing:var(--tracking-headline);text-transform:uppercase;text-wrap:pretty}
.rec-hero__lead{margin:0;font-weight:300;font-size:var(--text-lead);line-height:var(--leading-body);text-wrap:pretty}
.rec-stand{font-weight:800;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted)}

/* --- Hinweisband ---------------------------------------------------------
   Für Texte, die noch juristisch geprüft werden müssen. */
.rec-hinweis{background:var(--msr-natur-tint);border-radius:var(--radius-soft);padding:26px 30px;
  display:flex;flex-direction:column;gap:10px;margin-top:8px}
.rec-hinweis__titel{font-weight:800;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted)}
.rec-hinweis p{margin:0;font-weight:350;font-size:var(--text-base);line-height:var(--leading-body);
  max-width:68ch;text-wrap:pretty}

/* --- Abschnitte ----------------------------------------------------------
   Ziffer, Titel, Text — dieselbe redaktionelle Zeile wie das Leitbild auf
   «Über uns» und der Ablauf auf «Anmelden». */
.rec-liste{margin-top:56px}
.rec-abschnitt{display:grid;grid-template-columns:64px minmax(0,7fr) minmax(0,9fr);gap:32px;
  align-items:start;padding:32px 0;border-top:var(--border-hairline) solid var(--msr-ink)}
.rec-abschnitt:last-child{border-bottom:var(--border-hairline) solid var(--msr-ink)}
.rec-abschnitt[id]{scroll-margin-top:32px}
.rec-abschnitt__nr{font-weight:900;font-size:1.625rem;line-height:1.1;color:var(--msr-blau);
  font-variant-numeric:tabular-nums}
.rec-abschnitt__titel{margin:0;font-weight:800;font-size:var(--text-h3);line-height:1.35;
  letter-spacing:0.04em;text-wrap:pretty}

.rec-text{margin:0;font-weight:350;font-size:var(--text-base);line-height:var(--leading-body);text-wrap:pretty}
.rec-text + .rec-text{margin-top:12px}
.rec-liste-punkte{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;
  font-weight:350;font-size:var(--text-base);line-height:var(--leading-body)}

/* Adress- und Datenblock */
.rec-daten{margin:0;display:grid;grid-template-columns:1fr;gap:16px}
.rec-daten dt{font-weight:800;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted)}
.rec-daten dd{margin:5px 0 0;font-weight:350;font-size:var(--text-base);line-height:var(--leading-body)}

/* Befundtabelle der Barrierefreiheitserklärung */
.rec-befunde{margin-top:14px;display:flex;flex-direction:column}
.rec-befund{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:baseline;
  padding:14px 0;border-top:1px solid var(--border-soft)}
.rec-befund:first-child{border-top:0;padding-top:0}
.rec-befund__was{font-weight:350;font-size:var(--text-base);line-height:1.5}
.rec-befund__wert{font-weight:500;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text-muted)}
.rec-befund__wert--gut{color:var(--msr-blau-dunkel)}

/* Abstände zwischen den Bausteinen eines Abschnitts. Absichtlich als
   Nachbar-Regeln statt als Sammelregel: so behält «Absatz auf Absatz»
   seine engeren 12px, ohne dass die Reihenfolge im Stylesheet entscheidet. */
.rec-text + .rec-daten,
.rec-text + .rec-befunde,
.rec-text + .rec-liste-punkte,
.rec-daten + .rec-text,
.rec-befunde + .rec-text,
.rec-liste-punkte + .rec-text{margin-top:18px}

.rec-aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* --- Abschluss ------------------------------------------------------------ */
.rec-footer{margin-top:96px}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:900px){
  .rec-section{padding-left:28px;padding-right:28px}
  .rec-abschnitt{grid-template-columns:48px minmax(0,1fr);gap:12px 20px}
  /* Der Textblock ist das dritte Rasterkind — ohne diese Zuweisung landet er
     in der 48px-Spalte der Ziffer und bricht nach jedem Wort um. */
  .rec-abschnitt > :nth-child(3){grid-column:2}
}
@media (max-width:640px){
  .rec-section{padding-left:20px;padding-right:20px}
  .rec-liste{margin-top:40px}
  .rec-abschnitt{padding:24px 0}
  .rec-hinweis{padding:22px 22px}
  .rec-befund{grid-template-columns:1fr;gap:4px}
  .rec-footer{margin-top:72px}
}
@media (max-width:420px){
  .rec-section{padding-left:16px;padding-right:16px}
}

/* Trefferfläche auf 24px, ohne Layoutverschiebung (siehe site.css). */
.rec-daten dd a{position:relative;display:inline-block}
.rec-daten dd a::after{content:'';position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:24px}