/* ==========================================================================
   Tarife — Musikschule Reinach AG
   Inhalte von musikschule-reinach-ag.ch/tarife/, Stand 21.08.2026
   ========================================================================== */

/* «margin-inline» statt «margin:0 auto»: die Kurzform würde auch
   margin-top zurücksetzen und damit den Abstand jeder Klasse
   überschreiben, die mit .tar-section kombiniert wird (z. B. .msr-cta). */
.tar-section{max-width:calc(var(--content-max) + 80px);margin-inline:auto;padding-left:40px;padding-right:40px}

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

/* --- Hinweiskarten ------------------------------------------------------- */
.tar-hinweise{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.tar-hinweis{background:var(--msr-natur-tint);border-radius:var(--radius-soft);padding:28px 30px;
  display:flex;flex-direction:column;gap:12px}
.tar-hinweis__titel{font-weight:800;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted)}
.tar-hinweis p{margin:0;font-weight:350;font-size:var(--text-base);line-height:var(--leading-body);text-wrap:pretty}
.tar-hinweis ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;
  font-weight:350;font-size:var(--text-base);line-height:var(--leading-body)}

/* --- Abschnitte ---------------------------------------------------------- */
.tar-abschnitt{padding-top:72px}
.tar-abschnitt__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.tar-h2{margin:0;font-weight:900;font-size:var(--text-h2);letter-spacing:var(--tracking-headline);text-transform:uppercase}
.tar-h3{margin:0;font-weight:800;font-size:var(--text-h3);letter-spacing:0.06em;text-transform:uppercase}

.tar-gruppe{padding-top:40px}
.tar-gruppe__kopf{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:var(--border-hairline) solid var(--msr-ink)}
.tar-gruppe__basis{font-weight:350;font-size:var(--text-small);color:var(--text-muted)}
.tar-block{padding-top:26px}
.tar-block__titel{margin:0 0 12px;font-weight:800;font-size:var(--text-caption);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}

/* --- Preistabellen -------------------------------------------------------
   Flach, ohne Schatten: Kopfzeile als Pastellfläche, Zeilen durch Haarlinien
   getrennt. Auf schmalen Schirmen scrollt die Tabelle in sich selbst. */
.tar-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tar-tabelle{width:100%;border-collapse:collapse;min-width:520px;font-family:var(--font-core)}
.tar-tabelle caption{text-align:left;font-weight:350;font-size:var(--text-small);
  color:var(--text-muted);padding-bottom:10px}
.tar-tabelle th{font-weight:800;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);text-align:left;
  padding:12px 18px;background:var(--msr-natur-tint);white-space:nowrap}
.tar-tabelle th:first-child{border-radius:var(--radius-soft) 0 0 var(--radius-soft)}
.tar-tabelle th:last-child{border-radius:0 var(--radius-soft) var(--radius-soft) 0}
.tar-tabelle td{font-weight:350;font-size:var(--text-base);line-height:1.5;
  padding:16px 18px;border-bottom:1px solid var(--border-soft);vertical-align:top}
.tar-tabelle tr:last-child td{border-bottom:0}
.tar-tabelle__dauer{white-space:nowrap;font-weight:500}
.tar-tabelle__preis{white-space:nowrap;font-weight:500;font-variant-numeric:tabular-nums}
.tar-tabelle__bem{font-size:var(--text-small);color:var(--text-muted)}
.tar-fussnote{margin:12px 0 0;font-weight:350;font-size:var(--text-caption);color:var(--text-muted)}

/* --- Gemeinden mit abweichenden Sätzen ----------------------------------- */
.tar-gemeinden{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px;margin-top:40px}
.tar-gemeinde{border:var(--border-hairline) solid var(--msr-ink);border-radius:var(--radius-soft);padding:28px 30px}
.tar-gemeinde__titel{margin:0 0 18px;font-weight:800;font-size:var(--text-h3);letter-spacing:0.06em;text-transform:uppercase}
.tar-liste{margin:0;display:grid;grid-template-columns:1fr;gap:14px}
.tar-liste dt{font-weight:800;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted)}
.tar-liste dd{margin:4px 0 0;font-weight:350;font-size:var(--text-base);line-height:var(--leading-body)}

/* --- Abschluss ----------------------------------------------------------- */

.tar-footer{margin-top:96px}

/* --- Hinweis auf die Dokumente-Seite -------------------------------------
   Gleicher Wegweiser wie auf anmelden.html (.anm-hinweis), hier als eigene
   Klasse, damit er nicht mit der bestehenden .tar-hinweis-Kachel kollidiert.
   Bewusst eine ruhige Flaeche, kein weiterer Tarifblock. */
.tar-doku{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}
.tar-doku__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}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:900px){
  .tar-section{padding-left:28px;padding-right:28px}
  .tar-hero{gap:40px}
}
@media (max-width:820px){
  .tar-hero{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .tar-section{padding-left:20px;padding-right:20px}
  .tar-abschnitt{padding-top:56px}
  .tar-hinweis,.tar-gemeinde{padding:22px 22px}
  .tar-doku{padding:22px 24px}
  .tar-footer{margin-top:72px}
}
@media (max-width:420px){
  .tar-section{padding-left:16px;padding-right:16px}
}