/* ==========================================================================
   Über uns — Musikschule Reinach AG
   Inhalte von musikschule-reinach-ag.ch (Leitbild, Team, Kontakt),
   Stand 21.08.2026
   ========================================================================== */

/* «margin-inline» statt «margin:0 auto» — die Kurzform würde margin-top
   jeder mitkombinierten Klasse zurücksetzen (z. B. .msr-cta). */
.ueb-section{max-width:calc(var(--content-max) + 80px);margin-inline:auto;padding-left:40px;padding-right:40px}

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

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

/* --- Leitbild: Kernaussagen ----------------------------------------------
   Bewusst keine drei gleichen Kacheln nebeneinander, sondern eine
   redaktionelle Liste: Ziffer, Kernsatz, Erläuterung — durch Haarlinien
   getrennt wie die Preistabellen. */
.ueb-thesen{margin-top:8px}
.ueb-these{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)}
.ueb-these:last-child{border-bottom:var(--border-hairline) solid var(--msr-ink)}
.ueb-these__nr{font-weight:900;font-size:1.625rem;line-height:1.1;color:var(--msr-blau);
  font-variant-numeric:tabular-nums}
.ueb-these__satz{margin:0;font-weight:800;font-size:var(--text-h3);line-height:1.35;
  letter-spacing:0.04em;text-wrap:pretty}
.ueb-these__text{margin:0;font-weight:350;font-size:var(--text-base);line-height:var(--leading-body);text-wrap:pretty}

/* --- Was uns auszeichnet -------------------------------------------------- */
.ueb-merkmale{margin-top:32px;background:var(--msr-natur-tint);border-radius:var(--radius-soft);padding:36px 40px}
.ueb-merkmale__liste{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:14px 40px}
.ueb-merkmale__liste li{position:relative;padding-left:22px;
  font-weight:350;font-size:var(--text-base);line-height:var(--leading-body);text-wrap:pretty}
.ueb-merkmale__liste li::before{content:'';position:absolute;left:0;top:0.62em;
  width:8px;height:8px;border-radius:999px;background:var(--msr-koralle)}

/* --- Jahresbericht --------------------------------------------------------
   Eine breite, ruhige Flaeche statt einer weiteren Kachelreihe: der Bericht
   ist ein einzelner Verweis, keine Auswahl. */
.ueb-bericht{position:relative;overflow:hidden;margin-top:8px;
  background:var(--msr-natur-tint);border-radius:var(--radius-soft);
  padding:40px 44px;display:grid;grid-template-columns:minmax(0,1.7fr) auto;gap:24px 48px;align-items:center}
.ueb-bericht__klecks{position:absolute;top:-52px;right:-44px;width:220px;height:auto;
  opacity:.5;pointer-events:none;z-index:0}
.ueb-bericht__text,.ueb-bericht__aktion{position:relative;z-index:1}
.ueb-bericht__text{min-width:0;display:flex;flex-direction:column;gap:10px}
.ueb-bericht__label{font-weight:800;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);font-variant-numeric:tabular-nums}
.ueb-bericht__titel{text-wrap:pretty}
.ueb-bericht__lead{margin:0;font-weight:350;font-size:var(--text-base);line-height:var(--leading-body);
  max-width:60ch;text-wrap:pretty}
.ueb-bericht__aktion{display:flex;flex-direction:column;gap:10px;align-items:stretch}

/* --- Unser Team -----------------------------------------------------------
   Kachelraster wie im Angebot (07.09.2026): Leitung, Administration und
   Lehrpersonen stehen seither in einem einzigen Abschnitt.
   Die Kachel ist auf ein Portraitfoto im Verhaeltnis 4:5 gebaut. Solange
   die Fotos fehlen, fuellt ein getoentes Feld mit den Initialen den Platz —
   gleiche Groesse, gleiche Kachelhoehe, spaeter also kein Umbau. */
.ueb-mitglieder{margin-top:32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}
.ueb-mitglied{display:flex;flex-direction:column;gap:6px;min-width:0}
.ueb-mitglied__bild{display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/5;width:100%;margin-bottom:10px;overflow:hidden;
  border-radius:var(--radius-soft);background:var(--msr-natur-tint)}
.ueb-mitglied__foto{width:100%;height:100%;object-fit:cover;display:block}
/* Die Initialen sind Ersatz, kein Schmuck: gedaempft, damit die Kachel nicht
   nach fertigem Inhalt aussieht, solange das Foto fehlt. Der Zusatz
   «Foto folgt» steht als ::after darin — er verschwindet mit dem Span,
   sobald das <img> an seine Stelle tritt, ganz ohne weitere Aufraeumarbeit. */
.ueb-mitglied__initialen{display:flex;flex-direction:column;align-items:center;gap:8px;
  font-weight:900;font-size:1.75rem;letter-spacing:0.08em;
  color:var(--msr-ink);opacity:.32}
.ueb-mitglied__initialen::after{content:'Foto folgt';font-weight:800;font-size:0.625rem;
  letter-spacing:var(--tracking-label);text-transform:uppercase}
.ueb-mitglied__bild--blau{background:var(--msr-blau-tint)}
.ueb-mitglied__bild--tuerkis{background:var(--msr-tuerkis-tint)}
.ueb-mitglied__bild--koralle{background:var(--msr-koralle-tint)}
.ueb-mitglied__bild--apricot{background:var(--msr-apricot-tint)}
.ueb-mitglied__bild--gelb{background:var(--msr-gelb-tint)}
.ueb-mitglied__bild--natur{background:var(--msr-natur-tint)}
.ueb-mitglied__rolle{font-weight:800;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--msr-blau-dunkel)}
.ueb-mitglied__name{margin:0;font-weight:800;font-size:0.9375rem;letter-spacing:0.06em;
  text-transform:uppercase;line-height:1.3;text-wrap:pretty}
.ueb-mitglied__fach{margin:0;font-weight:350;font-size:var(--text-small);color:var(--text-muted);
  line-height:1.55;text-wrap:pretty}

/* --- Kontakt -------------------------------------------------------------- */
.ueb-kontakt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:32px}
.ueb-kontakt__karte{border:var(--border-hairline) solid var(--msr-ink);border-radius:var(--radius-soft);padding:30px 32px}
.ueb-kontakt__karte--ruhig{border:0;background:var(--msr-blau-tint)}
.ueb-daten{margin:0;display:grid;grid-template-columns:1fr;gap:18px}
.ueb-daten dt{font-weight:800;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted)}
.ueb-daten dd{margin:5px 0 0;font-weight:350;font-size:var(--text-base);line-height:var(--leading-body)}
.ueb-daten a{color:var(--msr-logo-blau)}
.ueb-kontakt__hinweis{margin:18px 0 0;font-weight:350;font-size:var(--text-caption);color:var(--text-muted);line-height:var(--leading-body)}

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

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:900px){
  .ueb-section{padding-left:28px;padding-right:28px}
  .ueb-hero{gap:40px}
  .ueb-these{grid-template-columns:48px minmax(0,1fr);gap:12px 20px}
  .ueb-these__text{grid-column:2}
}
@media (max-width:1024px){
  .ueb-mitglieder{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .ueb-hero{flex-direction:column;align-items:flex-start}
  .ueb-kontakt{grid-template-columns:1fr}
  .ueb-bericht{grid-template-columns:1fr;padding:32px 32px}
  .ueb-bericht__aktion{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:640px){
  .ueb-section{padding-left:20px;padding-right:20px}
  .ueb-abschnitt{padding-top:64px}
  .ueb-merkmale{padding:26px 24px}
  .ueb-kontakt__karte{padding:24px 24px}
  .ueb-mitglieder{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .ueb-bericht{padding:26px 24px}
  .ueb-these{padding:24px 0}
  .ueb-cta,.ueb-footer{margin-top:72px}
}
@media (max-width:420px){
  .ueb-section{padding-left:16px;padding-right:16px}
  /* Bei 320px waeren zwei Kacheln je rund 130px breit — Namen wie
     «Sylvia Furrer Schaetti» stehen dann vierzeilig. Darum eine Spalte,
     dafuer das Bildfeld schmaler, damit die Liste nicht endlos wird. */
  .ueb-mitglieder{grid-template-columns:1fr;gap:20px}
  .ueb-mitglied{flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap}
  .ueb-mitglied__bild{width:88px;flex:none;margin-bottom:0}
  .ueb-mitglied__initialen{font-size:1.25rem;gap:4px}
  .ueb-mitglied__initialen::after{font-size:0.5625rem}
  .ueb-mitglied__rolle,.ueb-mitglied__name,.ueb-mitglied__fach{flex-basis:calc(100% - 104px)}
}

/* Trefferfläche auf 24px, ohne Layoutverschiebung (siehe site.css). */
.ueb-daten dd a{position:relative;display:inline-block}
.ueb-daten dd a::after{content:'';position:absolute;
  left:0;right:0;top:50%;transform:translateY(-50%);height:24px}
.ueb-mitglied__foto{object-position:center top} /* Porträts: Gesicht im oberen Drittel (WordPress) */