/* ==========================================================================
   Anmelden — Musikschule Reinach AG
   Inhalte aus Informationsblatt 2026/27 und Anmeldeformular 2026/27
   (assets/downloads/), Stand 22.08.2026
   ========================================================================== */

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

/* --- Einstieg ------------------------------------------------------------ */
.anm-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. */
.anm-hero__text{max-width:640px;min-width:0;display:flex;flex-direction:column;gap:24px}
.anm-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}
.anm-hero__lead{margin:0;font-weight:300;font-size:var(--text-lead);line-height:var(--leading-body);max-width:540px;text-wrap:pretty}

/* --- Abschnitte ---------------------------------------------------------- */
.anm-abschnitt{padding-top:96px}
.anm-abschnitt[id]{scroll-margin-top:32px}
.anm-abschnitt__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.anm-h2{margin:0;font-weight:900;font-size:var(--text-h2);letter-spacing:var(--tracking-headline);text-transform:uppercase}
.anm-kicker{font-weight:800;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted)}

/* --- Statusband ----------------------------------------------------------
   Dasselbe Beige wie die ruhigen Flächen der übrigen Unterseiten
   (Hinweiskarten Tarife, Merkmale Über uns, Filterleiste Angebot). */
.anm-status{background:var(--msr-natur-tint);border-radius:var(--radius-soft);
  padding:32px 36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 40px;align-items:start}
.anm-status__label{grid-column:1 / -1;font-weight:800;font-size:var(--text-caption);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.anm-status__satz{margin:0;font-weight:800;font-size:var(--text-h3);line-height:1.35;letter-spacing:0.04em;text-wrap:pretty}
.anm-status__text{margin:0;font-weight:350;font-size:var(--text-base);line-height:var(--leading-body);text-wrap:pretty}
.anm-status__text + .anm-status__text{margin-top:12px}
.anm-status__aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* --- Ablauf in Schritten -------------------------------------------------- */
.anm-schritte{margin-top:8px}
.anm-schritt{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)}
.anm-schritt:last-child{border-bottom:var(--border-hairline) solid var(--msr-ink)}
.anm-schritt__nr{font-weight:900;font-size:1.625rem;line-height:1.1;color:var(--msr-blau);font-variant-numeric:tabular-nums}
.anm-schritt__titel{margin:0;font-weight:800;font-size:var(--text-h3);line-height:1.35;letter-spacing:0.04em;text-wrap:pretty}
.anm-schritt__text{margin:0;font-weight:350;font-size:var(--text-base);line-height:var(--leading-body);text-wrap:pretty}
.anm-schritt__text + .anm-schritt__text{margin-top:12px}
.anm-schritt__aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

/* --- Gut zu wissen -------------------------------------------------------- */
.anm-wissen{margin:32px 0 0;display:grid;grid-template-columns:1fr}
.anm-wissen > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px;
  padding:20px 4px;border-top:1px solid var(--border-soft)}
.anm-wissen > div:first-child{border-top:var(--border-hairline) solid var(--msr-ink)}
.anm-wissen > div:last-child{border-bottom:var(--border-hairline) solid var(--msr-ink)}
.anm-wissen dt{font-weight:800;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);padding-top:2px}
.anm-wissen dd{margin:0;font-weight:350;font-size:var(--text-base);line-height:var(--leading-body);text-wrap:pretty}

/* --- Downloads ------------------------------------------------------------
   Zeilen statt Kacheln: der Dateiname trägt, rechts steht die Handlung.
   Die Zeile selbst ist kein Link — geklickt wird der Knopf, damit es genau
   eine Schaltfläche pro Eintrag gibt. */
.anm-dateien{margin-top:32px;display:flex;flex-direction:column}
.anm-datei{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 32px;align-items:start;
  padding:22px 8px;border-top:1px solid var(--border-soft);color:var(--msr-ink)}
.anm-datei:first-child{border-top:var(--border-hairline) solid var(--msr-ink)}
.anm-datei:last-child{border-bottom:var(--border-hairline) solid var(--msr-ink)}
.anm-datei__name{grid-column:1;font-weight:500;font-size:var(--text-base)}
.anm-datei__note{grid-column:1;font-weight:350;font-size:var(--text-small);color:var(--text-muted);line-height:1.5}
/* Knöpfe oben, Format und Grösse ruhig darunter. Seit dem 07.09.2026 sind es
   zwei Knöpfe je Datei: «Ansehen» öffnet das PDF im Browser, «Herunterladen»
   speichert es. «min-width:0» ist dabei Pflicht — sonst zieht der Inhalt die
   Rasterspalte auf und die ganze Zeile läuft auf schmalen Schirmen über. */
.anm-datei__aktion{grid-column:2;grid-row:1 / span 2;min-width:0;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.anm-datei__knopf{white-space:nowrap}
.anm-datei__icon{flex:none;display:block}
.anm-datei__meta{font-weight:350;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}

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

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:900px){
  .anm-section{padding-left:28px;padding-right:28px}
  .anm-hero{gap:40px}
  .anm-schritt{grid-template-columns:48px minmax(0,1fr);gap:12px 20px}
  /* Drittes Rasterkind ist der Textblock — ein <div> um Absätze und Knöpfe,
     nicht .anm-schritt__text selbst. Ohne diese Zuweisung landet er in der
     48px-Spalte der Ziffer und bricht nach jedem Wort um. */
  .anm-schritt > :nth-child(3){grid-column:2}
}
@media (max-width:820px){
  .anm-hero{flex-direction:column;align-items:flex-start}
  .anm-status{grid-template-columns:1fr;gap:16px}
}
@media (max-width:640px){
  .anm-section{padding-left:20px;padding-right:20px}
  .anm-abschnitt{padding-top:64px}
  .anm-status{padding:26px 24px}
  .anm-schritt{padding:24px 0}
  .anm-wissen > div{grid-template-columns:1fr;gap:6px;padding:16px 4px}
  /* Einspaltig rutscht der Knopf unter den Text und richtet sich links aus. */
  .anm-datei{grid-template-columns:1fr;gap:6px;padding:20px 8px}
  /* «flex-wrap» ist Pflicht, seit hier zwei Knöpfe plus Dateiangabe stehen —
     in einer Zeile laufen sie bei 320px sonst über den Rand. */
  .anm-datei__aktion{grid-column:1;grid-row:auto;flex-direction:row;align-items:center;
    flex-wrap:wrap;justify-content:flex-start;gap:10px 14px;margin-top:8px}
  .anm-cta,.anm-footer{margin-top:72px}
}
@media (max-width:420px){
  .anm-section{padding-left:16px;padding-right:16px}
}

/* --- Hinweis auf die Dokumente-Seite -------------------------------------
   Angelegt am 07.09.2026: die vollstaendige Dateiliste ist nach
   dokumente.html gezogen, hier steht nur noch der Verweis darauf.
   Bewusst als ruhige Flaeche, nicht als weitere Dateizeile — es ist ein
   Wegweiser, kein Dokument. */
.anm-hinweis{margin-top:28px;background:var(--msr-blau-tint);border-radius:var(--radius-soft);
  padding:26px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap}
.anm-hinweis__text{margin:0;max-width:620px;min-width:0;
  font-weight:350;font-size:var(--text-base);line-height:var(--leading-body);text-wrap:pretty}
@media (max-width:640px){
  .anm-hinweis{padding:22px 24px}
}

/* --- Hinweis «Onlineanmeldung geschlossen» --------------------------------
   Angelegt am 28.09.2026, steht in Schritt 02 anstelle des Knopfs, solange
   die Anmeldung aus ist (Decision 8). Gleiche Flaeche wie .anm-hinweis —
   geschlossen ist ein normaler Zustand, kein Fehler, darum kein Weinrot. */
.anm-geschlossen{margin-top:20px;background:var(--msr-blau-tint);border-radius:var(--radius-soft);
  padding:22px 26px;display:flex;align-items:flex-start;gap:14px;color:var(--msr-ink)}
.anm-geschlossen__icon{flex:none;width:20px;height:20px;margin-top:2px;color:var(--msr-blau-dunkel)}
.anm-geschlossen__titel{margin:0;font-weight:800;font-size:var(--text-base);line-height:var(--leading-body);text-wrap:pretty}
.anm-geschlossen__text{margin:4px 0 0;font-weight:350;font-size:var(--text-base);line-height:var(--leading-body);text-wrap:pretty}
@media (max-width:640px){
  .anm-geschlossen{padding:18px 20px}
}