/* ==========================================================================
   Homepage — Musikschule Reinach AG
   Portierung von Homepage.dc.html
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.home-hero{position:relative;padding:100px 56px 80px;background:var(--msr-natur-tint)}
.home-hero__inner{display:flex;align-items:center;gap:48px;max-width:var(--content-max);margin:0 auto}
/* «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. */
.home-hero__text{flex:1.2;min-width:0}
.home-hero__lead{max-width:460px;font-weight:350;font-size:1.125rem;line-height:1.65;margin:26px 0 0;text-wrap:pretty}
.home-hero__motiv-wrap{flex-shrink:0}
.home-hero__motiv{position:relative;width:min(540px,46vw);aspect-ratio:27/16;height:auto;flex:none}
.home-hero__motiv img{position:absolute;object-fit:contain}

.home-hero__klecks-1{left:-2%;top:2%;width:37%;height:72%;z-index:1}
.home-hero__klecks-2{left:28%;top:-6%;width:51%;height:74%;z-index:1}
.home-hero__klecks-3{right:-3%;top:16%;width:29%;height:60%;z-index:1}
/* «max-width:none» wie bei .msr-motiv__linie: der globale Reset
   «img{max-width:100%}» kappte den seitlichen Ueberhang sonst auf die
   Motivbreite — die Linie war 513 statt 575px breit und endete buendig,
   statt als Strich weiterzulaufen. */
.home-hero__linie{left:-6%;bottom:4%;width:112%;height:30%;max-width:none;z-index:2}
/* Die Drehung steht als Variable da, damit die Keyframes sie mitfuehren
   koennen. Ein «transform» im Keyframe ohne sie stellt das Instrument
   waehrend der Einblendung gerade und kippt es am Ende zurueck. */
.home-hero__instr-1{left:3%;bottom:14%;width:19%;z-index:3;--dreh:-6deg;transform:rotate(var(--dreh))}
.home-hero__instr-2{left:26%;bottom:10%;width:50%;z-index:3;--dreh:0deg;transform:rotate(var(--dreh))}
.home-hero__instr-3{right:2%;bottom:16%;width:11%;z-index:3;--dreh:16deg;transform:rotate(var(--dreh))}

/* --- Auftritt des Kopfmotivs ---------------------------------------------
   Erst die drei Farbflecken von links nach rechts, dann die drei Instrumente
   in derselben Richtung, zuletzt zeichnet sich die Linie. Die Reihenfolge im
   Markup ist zugleich die Reihenfolge auf dem Schirm: Klecks 1 sitzt links
   (-2%), 2 in der Mitte (28%), 3 rechts (-3% von rechts) — ebenso die
   Instrumente. Der Zufall tauscht nur die Bilder, nie die Plaetze, darum
   genuegen feste Verzoegerungen ohne JavaScript.
   Der Kopfbereich ist immer sichtbar; es braucht keinen Observer.          */
.js .home-hero__klecks-1{animation:home-motiv-auf 480ms cubic-bezier(0.33,0,0.2,1) 360ms both}
.js .home-hero__klecks-2{animation:home-motiv-auf 480ms cubic-bezier(0.33,0,0.2,1) 470ms both}
.js .home-hero__klecks-3{animation:home-motiv-auf 480ms cubic-bezier(0.33,0,0.2,1) 580ms both}
.js .home-hero__instr-1{animation:home-instr-auf 440ms cubic-bezier(0.33,0,0.2,1) 760ms both}
.js .home-hero__instr-2{animation:home-instr-auf 440ms cubic-bezier(0.33,0,0.2,1) 860ms both}
.js .home-hero__instr-3{animation:home-instr-auf 440ms cubic-bezier(0.33,0,0.2,1) 960ms both}
/* ACHTUNG Einheiten: Start und Ziel muessen dieselbe tragen —
   inset(0 100% 0 0) → inset(0 0% 0 0). Mit «0» statt «0%» bleibt der
   Uebergang in Chrome kommentarlos auf dem Startwert stehen. */
.js .home-hero__linie{clip-path:inset(0 100% 0 0);
  animation:home-linie-zeichnen 950ms cubic-bezier(0.33,0,0.2,1) 1150ms forwards}

@keyframes home-motiv-auf{
  from{opacity:0;transform:scale(0.92)}
  to{opacity:1;transform:scale(1)}}
@keyframes home-instr-auf{
  from{opacity:0;transform:rotate(var(--dreh)) scale(0.94)}
  to{opacity:1;transform:rotate(var(--dreh)) scale(1)}}
@keyframes home-linie-zeichnen{to{clip-path:inset(0 0% 0 0)}}

@media (prefers-reduced-motion:reduce){
  .js .home-hero__klecks-1,.js .home-hero__klecks-2,.js .home-hero__klecks-3,
  .js .home-hero__instr-1,.js .home-hero__instr-2,.js .home-hero__instr-3{animation:none}
  .js .home-hero__linie{animation:none;clip-path:none}
}

/* --- Kachel-Navigation --------------------------------------------------- */
.home-tiles-section{padding-top:132px}
.home-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.home-tile{display:flex;flex-direction:column;gap:10px;padding:22px;
  border:var(--border-hairline) solid var(--msr-ink);border-radius:var(--radius-soft);
  text-decoration:none;color:var(--msr-ink);background:var(--msr-papier);
  transition:background 200ms ease-out,transform 100ms ease-out}
.home-tile:hover{color:var(--msr-ink)}
.home-tile:active{transform:scale(0.98)}
.home-tile--blau:hover{background:var(--msr-blau-tint)}
.home-tile--tuerkis:hover{background:var(--msr-tuerkis-tint)}
.home-tile--apricot:hover{background:var(--msr-apricot-tint)}
.home-tile--koralle:hover{background:var(--msr-koralle-tint)}
.home-tile__icon{width:58px;height:48px;object-fit:contain}
.home-tile__title{font-weight:800;font-size:1rem;letter-spacing:0.12em;text-transform:uppercase}
.home-tile__desc{font-weight:350;font-size:0.875rem;color:var(--text-muted);line-height:1.5}
.home-tile__arrow{width:48px;height:17px;object-fit:contain;object-position:left;margin-top:auto;
  transition:transform 200ms ease-out}
.home-tile:hover .home-tile__arrow{transform:translateX(8px)}

/* --- Aktuelles & Agenda -------------------------------------------------- */
.home-block{padding-top:152px}
.home-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:24px;margin-top:40px}

.home-agenda{margin-top:24px;display:flex;flex-direction:column}
.home-agenda__row{display:flex;align-items:center;gap:28px;padding:20px 4px;border-top:var(--border-hairline) solid var(--msr-ink)}
.home-agenda__date{width:230px;font-weight:500;font-size:0.875rem}
.home-agenda__title{flex:1;font-weight:800;font-size:1.125rem;letter-spacing:0.06em;text-transform:uppercase}

/* --- Trennlinie ---------------------------------------------------------- */
.home-divider{overflow:hidden;padding:124px 0 0}
.home-divider img{display:block;width:106%;margin-left:-3%;height:64px;object-fit:contain}

/* --- Angebot-Teaser ------------------------------------------------------ */
.home-angebot{padding-top:124px}
.home-angebot__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.home-angebot__lead{max-width:640px;font-weight:350;font-size:1rem;line-height:1.65;margin:16px 0 0;text-wrap:pretty}
.home-angebot__motiv{position:relative;width:320px;height:180px;flex:none}
.home-angebot__motiv img{position:absolute;object-fit:contain}
.home-angebot__klecks-1{left:-3%;top:0;width:41%;height:66%;z-index:1}
.home-angebot__klecks-2{left:31%;top:-6%;width:41%;height:70%;z-index:1}
.home-angebot__klecks-3{right:-3%;top:4%;width:39%;height:64%;z-index:1}
.home-angebot__linie{left:-8%;bottom:2%;width:116%;height:36%;z-index:2}
.home-angebot__instr-1{left:0;bottom:12%;width:30%;z-index:3}
.home-angebot__instr-2{left:36%;bottom:8%;width:26%;z-index:3}
.home-angebot__instr-3{right:2%;bottom:12%;width:20%;z-index:3;transform:rotate(8deg)}
.home-angebot__actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}

.home-footer{margin-top:190px}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1024px){
  .home-tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .home-hero{padding-left:28px;padding-right:28px}
}
@media (max-width:820px){
  .home-hero__inner{flex-direction:column;gap:40px;align-items:flex-start}
  .home-hero__motiv-wrap{width:100%;align-self:stretch;display:flex;justify-content:center}
  .home-hero__motiv{width:min(460px,100%);align-self:center}
  .home-angebot__motiv{display:none}
  .home-angebot__head{flex-direction:column;align-items:flex-start;gap:0}
}
@media (max-width:640px){
  .home-hero{padding-left:20px;padding-right:20px;padding-top:72px}
  .home-hero__lead{font-size:1rem}
  .home-tiles-section,.home-block,.home-angebot{padding-top:72px}
  .home-divider{padding-top:72px}
  .home-agenda__row{flex-wrap:wrap;gap:8px 16px}
  .home-agenda__date{width:100%}
  .home-footer{margin-top:96px}
}
@media (max-width:560px){
  .home-tiles{grid-template-columns:1fr}
}
@media (max-width:420px){
  .home-hero{padding-left:16px;padding-right:16px}
}

/* --- Störer im Kopf (Kundenwunsch 24.09.2026) -----------------------------
   Hängt über die Unterkante des beigen Kopfes hinaus wie ein Aufkleber:
   der negative Rand unten nimmt ihn zum grössten Teil aus der Höhe der
   Textspalte, er ragt rund 70px in den Weissraum über den Kacheln (132px).
   Unter 820px stapelt der Kopf — dann steht er normal im Fluss, sonst läge
   er über dem Motiv. */
.home-hero__stoerer{margin:28px 24px -150px auto;--auftritt:900ms}
@media (max-width:820px){
  .home-hero__stoerer{margin:32px 0 0 8px}
}