/* ==========================================================================
   Angebot — Musikschule Reinach AG
   Portierung von «Angebot Hifi.dc.html»
   ========================================================================== */

/* Die Vorlage rechnet mit content-box: 1120px Inhalt + 2x40px Padding.
   Unter border-box entspricht das max-width:1200px. */
/* «margin-inline» statt «margin:0 auto»: die Kurzform würde auch
   margin-top zurücksetzen und damit den Abstand jeder Klasse
   überschreiben, die mit .ang-section kombiniert wird (z. B. .msr-cta). */
.ang-section{max-width:calc(var(--content-max) + 80px);margin-inline:auto;padding-left:40px;padding-right:40px}

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

/* --- Filterleiste -------------------------------------------------------- */
.ang-filter{background:var(--msr-natur-tint);border-radius:var(--radius-soft);padding:30px 34px;
  display:flex;gap:56px;flex-wrap:wrap}
.ang-filter__group{display:flex;flex-direction:column;gap:14px}
.ang-filter__label{font-weight:800;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted)}
.ang-filter__chips{display:flex;gap:10px;flex-wrap:wrap}
/* Ghost-Buttons erhalten auf dieser Seite eine Logo-Blau-Kontur. */
.ang-filter .msr-btn--ghost{border-color:var(--msr-logo-blau);color:var(--msr-logo-blau)}
.ang-filter .msr-btn--ghost:hover{background:var(--msr-blau-tint);color:var(--msr-logo-blau)}
/* Kombination ohne Treffer: Chip bleibt sichtbar, ist aber nicht wählbar. */
.ang-filter .msr-btn[disabled]{opacity:.32;cursor:default;pointer-events:none;
  border-color:var(--border-soft);color:var(--text-muted);background:transparent}

/* --- Ergebnisüberschrift ------------------------------------------------- */
.ang-result{padding-top:44px;display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.ang-result__title{margin:0;font-weight:900;font-size:var(--text-h2);letter-spacing:var(--tracking-headline);text-transform:uppercase}
.ang-result__reset{font-weight:500;font-size:var(--text-small);letter-spacing:var(--tracking-body);
  background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-core);color:var(--msr-logo-blau);
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.ang-result__reset:hover{color:var(--msr-ink)}

/* --- Angebotsraster ------------------------------------------------------ */
/* Alle Kacheln sind gleich hoch. Die Bildzone ist fix, damit die Namen in
   jeder Kachel auf derselben Höhe beginnen — auch bei den Kurskacheln,
   die statt eines Instruments einen Klecks tragen. */
/* «stretch» statt «start»: die Kacheln einer Zeile werden so hoch wie die
   hoechste. Zusammen mit min-height bleibt das Raster bei normaler Schrift
   gleichmaessig und laeuft bei vergroessertem Text nicht ueber. */
.ang-grid{--kachel-hoehe:236px;--kachel-textstart:103.5px;
  padding-top:26px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;align-items:stretch}

.ang-card{background:var(--msr-papier);border:1.5px solid transparent;border-radius:var(--radius-soft);
  padding:22px 18px 18px;display:flex;flex-direction:column;gap:14px;align-items:center;
  cursor:pointer;font-family:var(--font-core);color:var(--msr-ink);text-align:center;width:100%;
  /* min-height statt height: bei stark vergroesserter Schrift waechst die
     Kachel mit, statt den Namen abzuschneiden. */
  min-height:var(--kachel-hoehe);
  transition:background 180ms ease-out,transform 100ms ease-out}
.ang-card:active{transform:scale(0.98)}
.ang-card__img{height:88px;width:100%;max-width:132px;object-fit:contain}
.ang-card__meta{display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center}
/* Lange Namen müssen umbrechen dürfen, sonst schneidet die Kachel sie an
   den Rändern ab. Bewusst «break-word», nicht «anywhere»: anywhere füllt
   gierig und trennt «Gitarre elektrisch» mitten im Wort, statt am Leerzeichen.
   «hyphens:manual» heisst: getrennt wird ausschliesslich an den weichen
   Trennzeichen (­) im Markup, nie nach Chromes eigener Vermutung. */
.ang-card__name{font-weight:800;font-size:0.875rem;letter-spacing:0.1em;text-transform:uppercase;
  overflow-wrap:break-word;hyphens:manual;max-width:100%}
.ang-card__note{font-weight:300;font-size:var(--text-caption);color:var(--text-muted)}

.ang-card--blau{background:var(--msr-blau-tint)}
.ang-card--blau:hover{background:var(--msr-blau)}
.ang-card--tuerkis{background:var(--msr-tuerkis-tint)}
.ang-card--tuerkis:hover{background:var(--msr-tuerkis)}
.ang-card--koralle{background:var(--msr-koralle-tint)}
.ang-card--koralle:hover{background:var(--msr-koralle)}
.ang-card--apricot{background:var(--msr-apricot-tint)}
.ang-card--apricot:hover{background:var(--msr-apricot)}
.ang-card--gelb{background:var(--msr-gelb-tint)}
.ang-card--gelb:hover{background:var(--msr-gelb)}
.ang-card--natur{background:var(--msr-natur-tint)}
.ang-card--natur:hover{background:var(--msr-natur)}

/* Geöffnete Karte: Papier mit Ink-Haarlinie. Das Padding gleicht die
   1.5px-Kontur aus, damit die Kachelhöhe im Raster gleich bleibt. */
.ang-card[aria-expanded="true"]{background:var(--msr-papier);border-color:var(--msr-ink);padding:20.5px 16.5px 16.5px}
.ang-card[aria-expanded="true"]:hover{background:var(--msr-papier)}
.ang-card[aria-expanded="true"] .ang-card__note{font-weight:500;color:var(--msr-ink)}

/* Kurse und Ensembles: Kontur statt Fläche, Klecks als Marke. */
.ang-card--kurs{background:transparent;border-color:var(--border-soft);padding:20.5px 16.5px 16.5px;
  position:relative;overflow:hidden}
.ang-card--kurs:hover{background:var(--msr-natur-tint)}
.ang-card--kurs .ang-card__meta{position:relative;padding-top:var(--kachel-textstart)}
.ang-card__klecks{position:absolute;top:-16px;right:-24px;width:106px;height:auto;pointer-events:none}
.ang-card__klecks--gedimmt{opacity:.5;top:-18px;right:-26px;width:110px}
.ang-card__kicker{position:absolute;top:20.5px;left:16.5px;font-weight:800;font-size:var(--text-caption);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}

.ang-grid__leer{grid-column:1/-1;padding:56px 0;text-align:center;font-weight:300;font-size:var(--text-lead);color:var(--text-muted)}

/* --- Detailtafel --------------------------------------------------------- */
.ang-detail{grid-column:1/-1;border:1.5px solid var(--msr-ink);border-radius:var(--radius-soft);
  padding:38px 40px;display:flex;gap:56px;align-items:flex-start;position:relative;overflow:hidden;margin:0}
.ang-detail[hidden]{display:none}
.ang-detail__main{flex:1;display:flex;flex-direction:column;gap:22px;min-width:0;max-width:640px}
.ang-detail__head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding-right:52px}
.ang-detail__ident{display:flex;flex-direction:column;gap:10px}
.ang-detail__title{margin:0;font-weight:900;font-size:2rem;letter-spacing:var(--tracking-headline);text-transform:uppercase}
.ang-detail__sub{font-weight:500;font-size:var(--text-small);letter-spacing:var(--tracking-body);color:var(--text-muted)}
/* Kreuz in der Ecke statt Wortmarke — gleiche Machart wie im mobilen Menü. */
.ang-detail__close{position:absolute;top:20px;right:20px;z-index:2;
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;
  border:1.5px solid var(--msr-ink);border-radius:var(--radius-pill);background:transparent;
  cursor:pointer;transition:background 180ms ease-out,transform 100ms ease-out}
.ang-detail__close:hover{background:var(--msr-natur-tint)}
.ang-detail__close:active{transform:scale(0.96)}
.ang-detail__kreuz{position:relative;display:block;width:14px;height:14px}
.ang-detail__kreuz::before,.ang-detail__kreuz::after{content:'';position:absolute;top:50%;left:0;
  width:14px;height:1.5px;background:var(--msr-ink);border-radius:1px}
.ang-detail__kreuz::before{transform:rotate(45deg)}
.ang-detail__kreuz::after{transform:rotate(-45deg)}
.ang-detail__texte{display:flex;flex-direction:column;gap:22px}
.ang-detail__text{margin:0;font-weight:350;font-size:var(--text-base);line-height:var(--leading-body);max-width:600px;text-wrap:pretty}
/* Zeilenabstand deutlich kleiner als der Spaltenabstand — sonst klafft
   vor einer umgebrochenen Gruppe wie «Instrument» eine grosse Lücke. */
.ang-detail__facts{display:flex;gap:22px 52px;flex-wrap:wrap}
.ang-detail__fact{display:flex;flex-direction:column;gap:9px}
.ang-detail__fact-label{font-weight:800;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted)}
.ang-detail__fact-value{font-weight:350;font-size:var(--text-base)}
.ang-detail__fact-value--leicht{font-weight:350}
.ang-detail__actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px}
.ang-detail__aside{width:320px;flex:none;display:flex;flex-direction:column;gap:26px;align-items:center}
.ang-detail__punkte{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:8px;
  font-weight:350;font-size:var(--text-base);line-height:var(--leading-body)}
.ang-detail__punkte[hidden]{display:none}
.ang-detail__facts:empty{display:none}

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

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

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1024px){
  .ang-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ang-detail{gap:36px}
  .ang-detail__aside{width:260px}
}
@media (max-width:900px){
  .ang-section{padding-left:28px;padding-right:28px}
  .ang-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ang-hero{gap:40px}
}
@media (max-width:820px){
  .ang-hero{flex-direction:column;align-items:flex-start}
  .ang-detail{flex-direction:column}
  .ang-detail__main{max-width:none}
  .ang-detail__aside{width:100%;align-items:flex-start}
}
@media (max-width:640px){
  .ang-section{padding-left:20px;padding-right:20px}
  .ang-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ang-filter{gap:28px;padding:24px 22px}
  .ang-result{flex-direction:column;align-items:flex-start;gap:12px}
  .ang-detail{padding:26px 22px}
  .ang-detail__facts{gap:28px}
  .ang-footer{margin-top:72px}
}
@media (max-width:420px){
  .ang-section{padding-left:16px;padding-right:16px}
  .ang-grid{grid-template-columns:1fr}
  .ang-card{height:auto}
  .ang-card--kurs .ang-card__meta{padding-top:0}
  .ang-card__kicker{position:static}
}

/* --- Kartendrehung beim Öffnen und Schliessen ---------------------------
   Bewusst ohne perspective: die Kachel klappt flach um die Hochachse statt
   räumlich zu kippen. Das Brandsheet schliesst 3D-Effekte aus, eine kurze
   flache Drehung bleibt dem ruhigen Charakter am nächsten.
   ------------------------------------------------------------------------ */
@keyframes ang-karte-dreht{
  from{transform:rotateY(0deg)}
  to{transform:rotateY(360deg)}
}
.ang-card.is-dreht{animation:ang-karte-dreht 420ms cubic-bezier(0.33,0,0.2,1)}

/* Die Tafel meldet sich beim Öffnen kurz an, damit der Sprung nachvollziehbar ist. */
@keyframes ang-tafel-auf{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}
.ang-detail.is-neu{animation:ang-tafel-auf 260ms ease-out}

@media (prefers-reduced-motion:reduce){
  .ang-card.is-dreht,.ang-detail.is-neu{animation:none}
}

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