/* ==========================================================================
   Aktuelles — Musikschule Reinach AG
   Beitragsarchiv, nach Jahr gruppiert. Kein JavaScript: die Jahre sind
   Sprungmarken, keine Filter.
   ========================================================================== */

/* «margin-inline» statt «margin:0 auto» — sonst fällt margin-top jeder
   mitkombinierten Klasse weg (z. B. .msr-cta). */
.akt-section{max-width:calc(var(--content-max) + 80px);margin-inline:auto;padding-left:40px;padding-right:40px}

/* --- Einstieg ------------------------------------------------------------ */
.akt-hero{padding-top:56px;padding-bottom:40px;display:flex;gap:64px;align-items:center;justify-content:space-between}
/* «min-width:0» hebt den Flexbox-Standard «min-width:auto» auf. Ohne ihn
   schrumpft die Textspalte nie unter ihr laengstes Wort — bei stark
   vergroesserter Schrift laeuft die Ueberschrift dann aus der Spalte. */
.akt-hero__text{max-width:640px;min-width:0;display:flex;flex-direction:column;gap:24px}
.akt-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}
.akt-hero__lead{margin:0;font-weight:300;font-size:var(--text-lead);line-height:var(--leading-body);max-width:540px;text-wrap:pretty}

/* --- Jahresleiste --------------------------------------------------------
   Sprungmarken statt Filter: das Archiv bleibt vollständig lesbar, auch
   ohne JavaScript und für Suchmaschinen.
   Seit dem 10.09.2026 steht die Leiste unterhalb der Beiträge; «--unten»
   setzt den Abstand, den sonst das .akt-jahr darüber mitgebracht hat. */
.akt-jahre{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:24px 0;border-top:var(--border-hairline) solid var(--msr-ink);
  border-bottom:1px solid var(--border-soft)}
.akt-jahre--unten{margin-top:72px}
.akt-jahre__label{font-weight:800;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);margin-right:8px}

/* --- Jahresabschnitt ------------------------------------------------------ */
.akt-jahr{padding-top:72px}
.akt-jahr[id]{scroll-margin-top:32px}
.akt-jahr__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.akt-h2{margin:0;font-weight:900;font-size:var(--text-h2);letter-spacing:var(--tracking-headline);
  text-transform:uppercase;font-variant-numeric:tabular-nums}
.akt-kicker{font-weight:800;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted)}

/* --- Beitrag --------------------------------------------------------------
   Datum und Rubrik links, Beitrag rechts — dieselbe redaktionelle Zeile wie
   das Leitbild auf «Über uns» und der Ablauf auf «Anmelden». */
.akt-liste{margin-top:8px}
.akt-beitrag{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;
  align-items:start;padding:34px 0;border-top:var(--border-hairline) solid var(--msr-ink)}
.akt-beitrag:last-child{border-bottom:var(--border-hairline) solid var(--msr-ink)}
.akt-beitrag[id]{scroll-margin-top:32px}
.akt-beitrag__meta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.akt-beitrag__datum{font-weight:500;font-size:var(--text-small);color:var(--text-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.akt-beitrag__titel{margin:0;font-weight:800;font-size:var(--text-h3);line-height:1.35;
  letter-spacing:0.06em;text-transform:uppercase;text-wrap:pretty}
.akt-beitrag__text{margin:14px 0 0;font-weight:350;font-size:var(--text-base);
  line-height:var(--leading-body);max-width:68ch;text-wrap:pretty}
.akt-beitrag__text + .akt-beitrag__text{margin-top:12px}
.akt-beitrag__weiter{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

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

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:900px){
  .akt-section{padding-left:28px;padding-right:28px}
  .akt-hero{gap:40px}
  .akt-beitrag{grid-template-columns:1fr;gap:14px}
  .akt-beitrag__meta{flex-direction:row;align-items:center;gap:14px}
}
@media (max-width:820px){
  .akt-hero{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .akt-section{padding-left:20px;padding-right:20px}
  .akt-jahr{padding-top:56px}
  .akt-beitrag{padding:28px 0}
  .akt-cta,.akt-footer{margin-top:72px}
}
@media (max-width:420px){
  .akt-section{padding-left:16px;padding-right:16px}
  .akt-beitrag__meta{flex-direction:column;align-items:flex-start;gap:10px}
}

/* --- Störer im Kopf (Kundenwunsch 24.09.2026) -----------------------------
   Breit: rechts neben Titel und Einleitung, zwischen Text und Motiv — so
   wächst der Kopf kaum. Rechnung bei 1120px Inhalt: 540 Einleitung + 40 +
   248 Störer = 828, plus 64 Abstand und 220 Motiv = 1112.
   Schmaler: unter die Einleitung. Das Raster gilt nur mit dem Modifikator
   «--stoerer» — ohne Störer bleibt der Kopf wie vorher. */
.akt-hero__stoerer{margin:8px 0 0 12px;--auftritt:500ms}
@media (min-width:1025px){
  .akt-hero__text--stoerer{display:grid;grid-template-columns:minmax(0,540px) auto;grid-template-rows:auto 1fr;gap:24px 40px;max-width:none}
  .akt-hero__text--stoerer .akt-hero__title{grid-column:1;grid-row:1}
  .akt-hero__text--stoerer .akt-hero__lead{grid-column:1;grid-row:2}
  .akt-hero__stoerer{grid-column:2;grid-row:1 / span 2;align-self:end;margin:0}
}