/* ==========================================================================
   Musikschule Reinach AG — Shell & Design-System-Komponenten
   Portierung der DS-Komponenten (Button, Card, Badge, KlecksMotiv, Linie)
   aus dem Claude-Design-Projekt nach statischem CSS.
   Keine Schatten, keine 3D-Effekte, keine Gradienten.
   ========================================================================== */

/* --- Reset / Grundgerüst ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* Muss sein: eigene Klassen mit display-Angabe (.ang-card, .ang-detail__facts …)
   haben dieselbe Spezifität wie [hidden] aus dem Browser-Stylesheet und
   gewinnen durch die spätere Quelle. Ohne !important bleibt ein per
   hidden-Attribut ausgeblendetes Element sichtbar. */
[hidden]{display:none !important}
html{overflow-x:hidden}
/* «overflow-wrap» greift nur, wenn ein Wort sonst aus seiner Spalte liefe —
   bei stark vergroesserter Schrift trifft das Ueberschriften wie
   «UNTERRICHT» mit weiter Laufweite. Sonst bleibt der Umbruch normal. */
body{margin:0;background:var(--surface-page);overflow-x:hidden;overflow-wrap:break-word}
img{max-width:100%}
h1,h2,h3,p{margin:0}

/* Sprungmarke: liegt ausserhalb des Bildes und kommt erst bei Tastaturfokus
   hervor. Ziel ist der erste Inhaltsabschnitt jeder Seite (#inhalt). */
.msr-skip{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--msr-papier);color:var(--msr-ink);
  border:var(--border-hairline) solid var(--msr-ink);border-radius:var(--radius-pill);
  padding:12px 24px;font-family:var(--font-core);font-weight:500;font-size:0.8125rem;
  letter-spacing:var(--tracking-label);text-transform:uppercase;text-decoration:none}
.msr-skip:focus{left:16px;top:16px}
#inhalt:focus{outline:none}

.msr-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:4px}

.msr-shell{background:var(--msr-papier);min-height:100vh}

/* --- Kopfzeile ----------------------------------------------------------- */
/* «flex-wrap» gehoert in die Grundregel, nicht erst in den 880px-Block:
   bei stark vergroesserter Schrift wird die Navigation auch auf einem
   breiten Schirm zu lang. Ohne Umbruch schoebe sie den Anmeldeknopf ueber
   den Rand — und «overflow-x:hidden» schneidet ihn dann ersatzlos ab,
   ohne Scrollbalken. */
.msr-header{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;row-gap:14px;padding:22px 56px;max-width:1232px;margin:0 auto}
.msr-header__logo{display:block;height:88px;width:auto}
/* «baseline» statt «center»: die Links tragen unten Rahmen und Innenabstand,
   der Anmeldeknopf seine eigene Polsterung. Bei zentrierter Ausrichtung sitzt
   der Linktext darum 5px hoeher als der Knopftext. An der Grundlinie
   ausgerichtet stehen beide auf einer Linie — und zwar unabhaengig davon, wie
   sich Schriftgroessen oder Polsterungen spaeter noch aendern. */
.msr-nav{display:flex;align-items:baseline;flex-wrap:wrap;gap:14px 34px}
/* Unterstrich und Innenabstand tragen ALLE Links, beim aktiven ist die Linie
   nur eingefaerbt. Traegt sie nur der aktive, ist er 5px hoeher als die
   uebrigen — «align-items:center» hebt ihn dann sichtbar an. */
.msr-nav__link{font-weight:800;font-size:0.8125rem;letter-spacing:0.14em;text-transform:uppercase;
  text-decoration:none;color:var(--msr-ink);
  border-bottom:2px solid transparent;padding-bottom:3px;
  transition:color 180ms ease-out,border-color 180ms ease-out}
.msr-nav__link:hover{color:var(--msr-logo-blau)}
.msr-nav__link--current{color:var(--msr-logo-blau);border-bottom-color:var(--msr-logo-blau)}

/* --- Abschnitte ---------------------------------------------------------- */
.msr-section{padding-left:56px;padding-right:56px}
.msr-wrap{max-width:var(--content-max);margin:0 auto}
.msr-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.msr-h2{margin:0;font-weight:800;font-size:1.625rem;letter-spacing:var(--tracking-headline);text-transform:uppercase}
.msr-rule::after{content:'';display:block;width:64px;height:3px;border-radius:2px;background:var(--msr-logo-blau);margin-top:22px}
.msr-h1{margin:0;font-weight:900;font-size:clamp(2.5rem,5vw,4rem);letter-spacing:0.1em;line-height:1.12;text-transform:uppercase;text-wrap:pretty}
.msr-h1.msr-rule::after{width:96px}
/* Einzelnes Wort in einer Überschrift hervorheben — Weinrot der Wortmarke
   aus dem Logo. Satzzeichen bleiben bewusst schwarz. */
.msr-wort-akzent{color:var(--msr-logo-rot)}
.msr-more{font-weight:500;font-size:0.8125rem;letter-spacing:0.14em;text-transform:uppercase;white-space:nowrap}

/* Abschnittsueberschriften stehen in Flex-Koepfen neben einem Kicker. Als
   Flex-Kind gilt «min-width:auto», sie schrumpfen also nie unter ihr laengstes
   Wort — bei groesserer Grundschrift laeuft «ADMINISTRATION» dann aus der
   Spalte. «min-width:0» gibt den Umbruch frei. */
.msr-h2,.ueb-h2,.anm-h2,.agd-h2,.akt-h2,.tar-h2,.ang-result__title{min-width:0}

/* --- Trefferflächen ------------------------------------------------------
   Kleine Textlinks sind nur 13–22px hoch, WCAG 2.5.8 verlangt 24px. Ein
   unsichtbares Feld legt sich mittig über den Link und vergrössert die
   Trefferfläche, ohne dass sich am Layout etwas verschiebt — Schriftgrösse,
   Grundlinie und Abstände bleiben unberührt. */
.msr-more,.msr-nav__link{position:relative}
.msr-more::after,.msr-nav__link::after{content:'';position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);height:24px}

/* --- Button (DS: components/core/Button.jsx) ----------------------------- */
/* Optische Mitte statt rechnerischer: «align-items:center» zentriert die
   Zeilenbox, nicht die Schrift. Der Ausgleich haengt an den Vertikalmetriken
   der Schrift und muss bei jedem Schriftwechsel neu gemessen werden.
   Der Wert stammt aus einer Messreihe am gerenderten Bild, nicht aus
   Schriftmetriken: der Ausgleich wird in Stufen gesetzt, die Seite bei
   vierfachem Zoom aufgenommen und die Tintenkanten in der Pille ausgelesen.
   Schriftmetriken taugen hier nicht — canvas-Messungen und ein
   Grundlinien-Marker ergaben den doppelten Wert.
   Avenir brauchte +0.175em (Text sass zu hoch). Mulish sitzt fast von selbst
   richtig: gemessen am 10.09.2026 ist **-0.025em** ueber alle drei Groessen
   ausgeglichen, 0 waere eine halbe Pixelzeile daneben. Vorzeichen beachten —
   der Ausgleich geht jetzt nach oben, nicht nach unten. */
.msr-btn{font-family:var(--font-core);font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
  border:1.5px solid transparent;border-radius:var(--radius-pill);cursor:pointer;box-shadow:var(--shadow-none);
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;
  padding:calc(12px - 0.025em) 26px calc(12px + 0.025em);font-size:0.8125rem;line-height:normal;
  transition:background 180ms ease-out,color 180ms ease-out,filter 180ms ease-out,transform 100ms ease-out}
.msr-btn--sm{padding:calc(8px - 0.025em) 18px calc(8px + 0.025em);font-size:0.75rem}
.msr-btn--lg{padding:calc(16px - 0.025em) 34px calc(16px + 0.025em);font-size:0.9375rem}
.msr-btn:active{transform:scale(0.98)}
.msr-btn[disabled],.msr-btn[aria-disabled="true"]{opacity:0.4;cursor:default;pointer-events:none}

.msr-btn--primary{background:var(--msr-logo-blau);color:#fffffc}
.msr-btn--primary:hover{background:#3B6789;color:#fffffc}
.msr-btn--secondary{background:#fffffc;color:var(--msr-logo-blau);border-color:var(--msr-logo-blau)}
.msr-btn--secondary:hover{background:var(--msr-blau-tint);color:var(--msr-logo-blau)}
.msr-btn--ghost{background:transparent;color:var(--msr-ink)}
.msr-btn--ghost:hover{background:var(--msr-natur-tint);color:var(--msr-ink)}
.msr-btn--tint{background:var(--msr-blau);color:var(--msr-ink)}
.msr-btn--tint:hover{filter:brightness(0.95)}
.msr-btn--tint.msr-btn--tuerkis{background:var(--msr-tuerkis)}
.msr-btn--tint.msr-btn--koralle{background:var(--msr-koralle)}
.msr-btn--tint.msr-btn--apricot{background:var(--msr-apricot)}
.msr-btn--tint.msr-btn--gelb{background:var(--msr-gelb)}
.msr-btn--tint.msr-btn--natur{background:var(--msr-natur)}

/* --- Card (DS: components/core/Card.jsx) --------------------------------- */
.msr-card{font-family:var(--font-core);background:#fffffc;border:var(--border-hairline) solid var(--msr-ink);
  border-radius:var(--radius-soft);padding:24px 26px;box-shadow:var(--shadow-none)}
.msr-card--blau{background:var(--msr-blau-tint);border:none}
.msr-card--tuerkis{background:var(--msr-tuerkis-tint);border:none}
.msr-card--koralle{background:var(--msr-koralle-tint);border:none}
.msr-card--apricot{background:var(--msr-apricot-tint);border:none}
.msr-card--gelb{background:var(--msr-gelb-tint);border:none}
.msr-card--natur{background:var(--msr-natur-tint);border:none}
/* Gleiche Stärke wie die übrigen Kleinlabels (Fusszeile, Alter, Lehrpersonen …). */
.msr-card__kicker{font-weight:800;font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.msr-card__title{font-weight:800;font-size:1.25rem;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:10px}
.msr-card__body{font-weight:350;font-size:0.9375rem;line-height:1.6}
.msr-card__footer{margin-top:16px}

/* --- Badge (DS: components/core/Badge.jsx) ------------------------------- */
.msr-badge{font-family:var(--font-core);font-weight:500;font-size:0.6875rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--msr-ink);background:var(--msr-blau);border:var(--border-hairline) solid transparent;
  border-radius:var(--radius-pill);padding:calc(5px - 0.025em) 14px calc(5px + 0.025em);
  display:inline-flex;align-items:center;white-space:nowrap}
.msr-badge--tuerkis{background:var(--msr-tuerkis)}
.msr-badge--koralle{background:var(--msr-koralle)}
.msr-badge--apricot{background:var(--msr-apricot)}
.msr-badge--gelb{background:var(--msr-gelb)}
.msr-badge--natur{background:var(--msr-natur)}
.msr-badge--outline{background:transparent;border-color:var(--msr-ink)}

/* --- Farbcode der Anlassarten -------------------------------------------
   Eine Art, eine Farbe — auf allen Seiten dieselbe. Diese sechs Regeln sind
   die einzige Stelle, an der die Zuordnung steht. Badges von Anlässen und
   Beiträgen nie von Hand einfärben (kein msr-badge--koralle o. ä.), sonst
   bedeutet dieselbe Farbe auf zwei Seiten wieder Verschiedenes.
   Beschriftung und Farbe sind getrennt: in der Agenda steht der Ort im
   Badge, die Art bestimmt nur die Farbe.                                   */
.msr-badge--konzert{background:var(--msr-koralle)}
.msr-badge--ausprobieren{background:var(--msr-gelb)}
.msr-badge--anmeldung{background:var(--msr-blau)}
.msr-badge--stufentest{background:var(--msr-apricot)}
.msr-badge--angebot{background:var(--msr-tuerkis)}
.msr-badge--jahresbericht{background:var(--msr-natur)}

/* --- KlecksMotiv (DS: components/brand/KlecksMotiv.jsx) ------------------ */
.msr-motiv{position:relative;width:220px;height:220px;flex:none}
.msr-motiv__klecks{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
.msr-motiv__instrument{position:absolute;left:50%;top:50%;z-index:3;
  --msr-motiv-mitte:translate(calc(-50% + 19.36px),calc(-50% + 8.8px));
  transform:var(--msr-motiv-mitte);max-width:180.4px;max-height:180.4px}

/* Geschwungene Linie unter dem Motiv — Ebene zwischen Farbfleck und
   Instrument, wie im Kopfbereich der Startseite. Sie ragt seitlich über das
   Motiv hinaus, damit sie als Strich weiterläuft und nicht als Kästchen sitzt.
   Die Linien-SVG sind sehr breit (bis 18:1); «contain» legt sie deshalb
   mittig in die Box, statt sie zu verzerren.
   «max-width:none» ist nötig: der globale Reset «img{max-width:100%}» würde
   die Linie sonst auf die Motivbreite kappen — der Überhang fände nicht statt. */
.msr-motiv__linie{position:absolute;left:-12%;bottom:4%;width:124%;height:26%;max-width:none;
  object-fit:contain;object-position:center;z-index:2;pointer-events:none}

/* Die Linie zeichnet sich, kurz nachdem das Motiv steht. Nur mit JavaScript:
   ohne .js bleibt sie unbeschnitten stehen und ist einfach da.
   ACHTUNG Einheiten: Start und Ziel muessen dieselbe Einheit tragen —
   inset(0 100% 0 0) → inset(0 0% 0 0). Mit «0» statt «0%» bleibt der
   Uebergang in Chrome auf dem Startwert stehen, kommentarlos. */
.js .msr-motiv__linie{clip-path:inset(0 100% 0 0);
  animation:msr-linie-zeichnen 950ms cubic-bezier(0.33,0,0.2,1) 780ms forwards}
@keyframes msr-linie-zeichnen{to{clip-path:inset(0 0% 0 0)}}

/* Auftritt im Kopfbereich: erst der Farbfleck, dann das Instrument, zuletzt
   die Linie (oben). Nur die Motive des Kopfbereichs tragen data-motiv-* —
   die Detailtafel im Angebot (data-detail-*) bleibt bewusst aussen vor: sie
   erscheint auf Klick und soll sofort dastehen, nicht erst durchlaufen.
   «both» statt «forwards»: so gilt der Startzustand schon während der
   Verzögerung, sonst blitzt das Bild vor seiner Animation kurz auf.
   Das Instrument führt seine Zentrierung als Variable mit — ohne sie im
   Keyframe zu wiederholen, spränge es in die Ecke des Motivs.              */
.js .msr-motiv__klecks[data-motiv-klecks]{
  animation:msr-motiv-auf 480ms cubic-bezier(0.33,0,0.2,1) 200ms both}
.js .msr-motiv__instrument[data-motiv-instrument]{
  animation:msr-motiv-instr-auf 440ms cubic-bezier(0.33,0,0.2,1) 520ms both}
@keyframes msr-motiv-auf{
  from{opacity:0;transform:scale(0.92)}
  to{opacity:1;transform:scale(1)}}
@keyframes msr-motiv-instr-auf{
  from{opacity:0;transform:var(--msr-motiv-mitte) scale(0.94)}
  to{opacity:1;transform:var(--msr-motiv-mitte) scale(1)}}

@media (prefers-reduced-motion:reduce){
  .js .msr-motiv__linie{animation:none;clip-path:none}
  .js .msr-motiv__klecks[data-motiv-klecks],
  .js .msr-motiv__instrument[data-motiv-instrument]{animation:none}
}

/* --- Linie (DS: components/brand/Linie.jsx) ----------------------------- */
.msr-linie{display:block;width:108%;margin-left:-4%;height:56px;object-fit:contain;pointer-events:none}

/* --- Fusszeile ----------------------------------------------------------- */
.msr-footer{background:var(--msr-natur-tint);overflow:visible}
.msr-footer__linie{display:block;position:relative;z-index:3;width:104%;margin-left:-2%;height:36px;object-fit:contain;transform:translateY(-50%)}
/* Inhaltsspalte 1120px — deckungsgleich mit .msr-wrap. Das seitliche
   Padding kommt oben drauf, darum max-width 1120 + 2x56. */
.msr-footer__cols{display:flex;justify-content:space-between;gap:48px;padding:48px 56px 64px;flex-wrap:wrap;
  max-width:calc(var(--content-max) + 112px);margin:0 auto}
.msr-footer__brand{font-weight:900;font-size:0.9375rem;letter-spacing:0.12em;text-transform:uppercase}
.msr-footer__addr{font-weight:350;font-size:0.875rem;color:var(--text-muted);margin-top:10px;line-height:1.7}
.msr-footer__col{font-weight:350;font-size:0.875rem;line-height:2}
/* Gleiche Stärke wie die übrigen Kleinlabels (Alter, Lehrpersonen …). */
.msr-footer__label{font-weight:800;font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted)}
/* Auf dem beigen Grund der Fusszeile braucht der Link die dunklere
   Blaustufe, sonst bleibt er unter dem AA-Kontrast von 4.5:1. */
.msr-footer a{color:var(--link-on-calm)}
.msr-footer a:hover{color:var(--msr-ink)}
.msr-footer__col a{display:block}
.msr-footer__hours{display:block;color:var(--text-muted)}
/* Bauzeile unter den Spalten — gleiche Inhaltsbreite wie .msr-footer__cols. */
.msr-footer__bottom{max-width:calc(var(--content-max) + 112px);margin:0 auto;padding:0 56px 40px;
  font-weight:350;font-size:0.8125rem;color:var(--text-muted)}

/* --- Scroll-Reveal (js/reveal.js) ---------------------------------------- */
/* Ohne JS bleibt alles sichtbar: erst .is-armed versteckt, .is-in blendet ein. */
[data-reveal="rise"].is-armed,
[data-reveal="fade"].is-armed,
[data-reveal="pop"].is-armed,
[data-reveal="group"].is-armed > *{
  opacity:0;
  transition:opacity 500ms ease-out,transform 500ms ease-out}
[data-reveal="rise"].is-armed,
[data-reveal="group"].is-armed > *{transform:translateY(18px)}
[data-reveal="pop"].is-armed{transform:scale(0.95) translateY(10px)}

[data-reveal="wipe"].is-armed{
  clip-path:inset(0 99.5% 0 0);
  transition:clip-path 1100ms cubic-bezier(0.33,0,0.2,1)}

[data-reveal="rise"].is-armed.is-in,
[data-reveal="fade"].is-armed.is-in,
[data-reveal="pop"].is-armed.is-in,
[data-reveal="group"].is-armed > .is-in{opacity:1;transform:none}
[data-reveal="wipe"].is-armed.is-in{clip-path:inset(0 0% 0 0)}

@media (prefers-reduced-motion:reduce){
  [data-reveal].is-armed,
  [data-reveal="group"].is-armed > *{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .msr-btn,.msr-nav__link{transition:none}
}

/* --- Responsive (Breakpoints aus dem Design-Original) -------------------- */
@media (max-width:1024px){
  .msr-nav{gap:22px}
}
@media (max-width:900px){
  .msr-section{padding-left:28px;padding-right:28px}
  .msr-header{padding:18px 28px}
  .msr-footer__cols{padding-left:28px;padding-right:28px}
  .msr-footer__bottom{padding-left:28px;padding-right:28px}
}
@media (max-width:880px){
  .msr-header{flex-wrap:wrap;row-gap:14px}
  .msr-nav{flex-wrap:wrap;row-gap:14px}
}
@media (max-width:640px){
  .msr-section{padding-left:20px;padding-right:20px}
  .msr-header{flex-direction:column;gap:16px}
  .msr-header__logo{height:56px}
  .msr-nav{flex-wrap:wrap;gap:16px 20px;justify-content:center}
  .msr-section-head{flex-direction:column;align-items:flex-start;gap:12px}
  .msr-footer__cols{padding-top:32px;padding-bottom:44px;gap:28px}
}
@media (max-width:420px){
  .msr-section{padding-left:16px;padding-right:16px}
  /* «Zur Onlineanmeldung» ist auf 320px breiter als die Spalte. Der Knopf
     darf hier umbrechen statt ueber den Rand zu laufen — «nowrap» aus der
     Grundregel gilt sonst bis hinunter zu jeder Breite. */
  .msr-btn{white-space:normal;max-width:100%;text-align:center}
  .msr-nav{gap:12px 16px}
  .msr-nav__link{font-size:0.75rem}
}

/* --- Abschlusskarte -----------------------------------------------------
   Eine Komponente für Angebot und Tarife. Gestapelt statt nebeneinander:
   Titel, Text, Knöpfe — alle linksbündig untereinander. Dadurch steht der
   Titel auf voller Breite und muss nicht mehr umbrechen.
   ------------------------------------------------------------------------ */
.msr-cta{margin-top:72px}
.msr-cta__inner{background:var(--msr-natur-tint);border-radius:var(--radius-soft);
  padding:52px 48px;display:flex;flex-direction:column;align-items:flex-start;gap:48px}
.msr-cta__text{display:flex;flex-direction:column;gap:16px;max-width:640px}
.msr-cta__title{font-weight:900;font-size:var(--text-h2);letter-spacing:var(--tracking-headline);
  text-transform:uppercase;text-wrap:pretty}
.msr-cta__lead{margin:0;font-weight:300;font-size:var(--text-base);line-height:var(--leading-body);text-wrap:pretty}
.msr-cta__actions{display:flex;gap:14px;flex-wrap:wrap}

@media (max-width:640px){
  .msr-cta__inner{padding:36px 24px;gap:32px}
}

/* --- Mobiles Menü -------------------------------------------------------
   Vollflächige Ebene mit Milchglas. Bewusst ohne Schatten und ohne 3D —
   das Brandsheet schliesst beides aus; die Kante trägt darum eine
   Ink-Haarlinie statt einer Schlagschatten-Kante.
   Das Burger-Zeichen ist aus zwei Strichen gebaut, passend zur
   1.5px-Strichstärke der Line-Art (kein Icon-Set im Design-System).
   ------------------------------------------------------------------------ */
.msr-burger{display:none;align-items:center;justify-content:center;gap:6px;flex-direction:column;
  width:46px;height:46px;padding:0;border:1.5px solid var(--msr-ink);border-radius:var(--radius-pill);
  background:transparent;cursor:pointer;flex:none;
  transition:background 180ms ease-out,transform 100ms ease-out}
.msr-burger:hover{background:var(--msr-natur-tint)}
.msr-burger:active{transform:scale(0.96)}
.msr-burger__strich{display:block;width:18px;height:1.5px;background:var(--msr-ink);border-radius:1px}

.msr-menu[hidden]{display:none}
.msr-menu{position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;
  background:color-mix(in srgb, var(--msr-papier) 72%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.15);
  backdrop-filter:blur(20px) saturate(1.15);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 220ms ease-out,visibility 0s linear 220ms}
/* pointer-events ist die harte Absicherung: die Ebene liegt als fixe Fläche
   über der ganzen Seite. Verlässt man sich nur auf visibility, schluckt sie
   jeden Klick, solange der Übergang noch läuft oder nie zu Ende läuft. */
.msr-menu.is-open{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity 220ms ease-out}
/* Ohne backdrop-filter (ältere Browser) deckt die Fläche voll, damit der
   Text auf jeden Fall lesbar bleibt. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .msr-menu{background:var(--msr-papier)}
}

.msr-menu__kopf{display:flex;align-items:center;justify-content:space-between;
  padding:22px 56px;max-width:1232px;width:100%;margin:0 auto;flex:none}
.msr-menu__logo{display:block;height:88px;width:auto}
.msr-menu__schliessen{display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;border:1.5px solid var(--msr-ink);border-radius:var(--radius-pill);
  background:transparent;cursor:pointer;flex:none;
  transition:background 180ms ease-out,transform 100ms ease-out}
.msr-menu__schliessen:hover{background:var(--msr-natur-tint)}
.msr-menu__schliessen:active{transform:scale(0.96)}
.msr-menu__kreuz{position:relative;display:block;width:18px;height:18px}
.msr-menu__kreuz::before,.msr-menu__kreuz::after{content:'';position:absolute;top:50%;left:0;
  width:18px;height:1.5px;background:var(--msr-ink);border-radius:1px}
.msr-menu__kreuz::before{transform:rotate(45deg)}
.msr-menu__kreuz::after{transform:rotate(-45deg)}

.msr-menu__inhalt{flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:6px;padding:0 56px 40px;max-width:1232px;width:100%;margin:0 auto;
  overflow-y:auto;overscroll-behavior:contain}
.msr-menu__link{font-weight:900;font-size:clamp(1.75rem,7vw,2.75rem);letter-spacing:0.08em;
  line-height:1.25;text-transform:uppercase;text-decoration:none;color:var(--msr-ink);
  padding:8px 0;transition:color 180ms ease-out}
.msr-menu__link:hover{color:var(--msr-logo-blau)}
.msr-menu__link--current{color:var(--msr-logo-blau)}
.msr-menu__cta{margin-top:26px;align-self:flex-start}

/* Ruhiger Auftritt: die Punkte laufen gestaffelt ein. */
.msr-menu__link,.msr-menu__cta{opacity:0;transform:translateY(12px)}
.msr-menu.is-open .msr-menu__link,
.msr-menu.is-open .msr-menu__cta{opacity:1;transform:none;
  transition:opacity 260ms ease-out,transform 260ms ease-out;
  transition-delay:calc(80ms + var(--i,0) * 45ms)}

/* Die Zierelemente bleiben punktuell — ein Klecks, eine Linie, sonst nichts. */
.msr-menu__klecks{position:absolute;right:-40px;top:14%;width:min(46vw,300px);height:auto;
  opacity:.5;pointer-events:none}
.msr-menu__linie{position:absolute;left:-6%;bottom:6%;width:112%;height:auto;
  opacity:.75;pointer-events:none}

body.msr-menu-offen{overflow:hidden}

/* Burger und Ebene ersetzen die Kopfnavigation nur, wenn JavaScript läuft
   (die Klasse .js setzt ein Einzeiler im <head>). Ohne JavaScript bleibt die
   normale Navigation stehen und bricht wie bisher um — so steht nie ein
   toter Knopf da und die Seite ist nie ohne Navigation. */
@media (max-width:880px){
  .js .msr-burger{display:flex}
  .js .msr-nav{display:none}
  .js .msr-header{flex-wrap:nowrap;row-gap:0}
}
@media (max-width:900px){
  .msr-menu__kopf,.msr-menu__inhalt{padding-left:28px;padding-right:28px}
}
@media (max-width:640px){
  .js .msr-header{flex-direction:row;gap:16px}
  .msr-menu__logo{height:56px}
  .msr-menu__kopf{padding:18px 20px}
  .msr-menu__inhalt{padding-left:20px;padding-right:20px}
}
@media (max-width:420px){
  .msr-menu__kopf,.msr-menu__inhalt{padding-left:16px;padding-right:16px}
}

@media (prefers-reduced-motion:reduce){
  .msr-menu,.msr-menu__link,.msr-menu__cta,.msr-burger,.msr-menu__schliessen{transition:none}
  .msr-menu__link,.msr-menu__cta{opacity:1;transform:none}
}

/* --- Fotogalerie und Grossansicht ----------------------------------------
   Angelegt am 07.09.2026: Beitraege in «Aktuelles» koennen Fotogalerien
   tragen. Markup und Verhalten stehen in js/galerie.js.
   Bewusst ohne Verlauf ueber dem Bild — das Brandsheet kennt keine
   Gradienten. Getrennt wird ueber Weissraum und die Kachelform. */
.msr-galerie{margin-top:20px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:12px}
.msr-galerie__bild{display:block;overflow:hidden;border-radius:var(--radius-soft);
  background:var(--msr-natur-tint);line-height:0;cursor:zoom-in}
.msr-galerie__bild img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform 320ms cubic-bezier(0.16,1,0.3,1)}
.msr-galerie__bild:hover img{transform:scale(1.04)}
.msr-galerie__bild:active img{transform:scale(1.01)}

.msr-lightbox{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;transition:opacity 220ms ease-out}
.msr-lightbox.is-auf{opacity:1}
/* «rgb()» statt einer Tokenfarbe: der Grund ist eine Abdeckung, kein
   Markenton — er soll die Seite dahinter neutral zuruecknehmen. */
.msr-lightbox__grund{position:absolute;inset:0;background:rgb(17 18 18 / 0.82);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:zoom-out}
.msr-lightbox__rahmen{position:relative;z-index:1;
  width:min(960px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px}
.msr-lightbox__kopf{display:flex;align-items:center;justify-content:space-between;gap:16px}
.msr-lightbox__zaehler{font-family:var(--font-core);font-weight:800;font-size:var(--text-caption);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-inverse);
  font-variant-numeric:tabular-nums}
.msr-lightbox__schliessen{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;
  background:transparent;border:var(--border-hairline) solid var(--text-inverse);
  border-radius:var(--radius-pill);cursor:pointer;padding:0;
  transition:background 180ms ease-out}
.msr-lightbox__schliessen:hover{background:rgb(255 255 252 / 0.14)}
.msr-lightbox__kreuz{position:relative;display:block;width:15px;height:15px}
.msr-lightbox__kreuz::before,.msr-lightbox__kreuz::after{content:'';position:absolute;
  top:50%;left:0;width:100%;height:1.5px;background:var(--text-inverse)}
.msr-lightbox__kreuz::before{transform:rotate(45deg)}
.msr-lightbox__kreuz::after{transform:rotate(-45deg)}
.msr-lightbox__figur{margin:0;min-height:0;display:flex;flex-direction:column;gap:12px;align-items:center}
.msr-lightbox__bild{max-width:100%;min-height:0;max-height:70vh;object-fit:contain;
  border-radius:var(--radius-soft);display:block}
.msr-lightbox__text{font-family:var(--font-core);font-weight:350;font-size:var(--text-small);
  line-height:var(--leading-body);color:var(--text-inverse);text-align:center;max-width:60ch}
.msr-lightbox__steuerung{display:flex;justify-content:center;gap:12px}
/* Der Rand des Papierknopfs verschwindet auf dunklem Grund fast — hier
   traegt er darum die helle Schrift als Kontur. */
.msr-lightbox__steuerung .msr-btn--secondary{background:transparent;color:var(--text-inverse);
  border-color:var(--text-inverse)}
.msr-lightbox__steuerung .msr-btn--secondary:hover{background:rgb(255 255 252 / 0.14);color:var(--text-inverse)}
body.msr-lightbox-offen{overflow:hidden}

@media (max-width:640px){
  .msr-galerie{grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:10px}
  .msr-lightbox{padding:16px}
  .msr-lightbox__bild{max-height:60vh}
}
@media (prefers-reduced-motion:reduce){
  .msr-galerie__bild img,.msr-lightbox{transition:none}
  .msr-galerie__bild:hover img{transform:none}
}

/* --- Störer: grosser Farbfleck als Knopf --------------------------------
   Kundenwunsch 24.09.2026: ein grosser farbiger Knopf «wie die farbigen
   Kleckse auf der Startseite, nur grösser», auf Startseite und Aktuelles,
   mit Link auf anmelden.html. Koralle wie die Anmelden-Kachel.
   Der Text sitzt im Kreis des Kleckses, die Spritzer am Rand bleiben frei.
   Tinte auf Koralle: 4.7:1 an der dunkelsten Stelle, fetter Text — AA.
   Neigung und Grösse laufen über die Einzeleigenschaften «rotate» und
   «scale» statt über «transform»: so kommen sich Hover und Auftritt nicht
   in die Quere. Kein data-reveal — dessen Übergangsregel ist spezifischer
   und würde die Hover-Federung abschalten. */
.msr-stoerer{--dreh:-7deg;--gross:248px;position:relative;display:grid;place-items:center;
  width:var(--gross);height:var(--gross);flex:none;
  color:var(--msr-ink);text-decoration:none;text-align:center;
  rotate:var(--dreh);
  transition:rotate 520ms cubic-bezier(0.34,1.56,0.64,1),scale 520ms cubic-bezier(0.34,1.56,0.64,1)}
.msr-stoerer__klecks{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.msr-stoerer__text{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  width:72%;margin-top:-2%}
.msr-stoerer__kicker{font-weight:800;font-size:0.75rem;letter-spacing:0.18em;text-transform:uppercase}
.msr-stoerer__titel{font-weight:900;font-size:1.125rem;line-height:1.2;letter-spacing:0.06em;
  text-transform:uppercase;text-wrap:balance}
.msr-stoerer__pfeil{width:48px;height:17px;margin-top:4px;object-fit:contain;
  transition:transform 520ms cubic-bezier(0.34,1.56,0.64,1)}
.msr-stoerer:hover{color:var(--msr-ink);rotate:0deg;scale:1.04}
.msr-stoerer:hover .msr-stoerer__pfeil{transform:translateX(8px)}
.msr-stoerer:active{scale:0.97;transition-duration:120ms}
.msr-stoerer:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-6px;border-radius:50%}

/* Auftritt: springt nach dem Seitenkopf herein. Nur mit JavaScript, wie
   die Kopfmotive. «backwards» statt «both»: der Startwert gilt schon
   während der Verzögerung (kein Aufblitzen), aber nach dem Ende hält die
   Animation «rotate» und «scale» nicht fest — sonst greift Hover nie. */
@keyframes msr-stoerer-auf{
  from{opacity:0;scale:0.6;rotate:-24deg}
  to{opacity:1;scale:1;rotate:var(--dreh)}}
.js .msr-stoerer{animation:msr-stoerer-auf 700ms cubic-bezier(0.34,1.56,0.64,1) var(--auftritt,600ms) backwards}

@media (max-width:640px){
  .msr-stoerer{--gross:216px}
  .msr-stoerer__titel{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  .js .msr-stoerer{animation:none}
  .msr-stoerer,.msr-stoerer__pfeil{transition:none}
  .msr-stoerer:hover{rotate:var(--dreh);scale:1}
  .msr-stoerer:hover .msr-stoerer__pfeil{transform:none}
}

/* ==========================================================================
   Neu in WordPress (28.09.2026) — Suche, Mitteilungsband, Suchseite, 404.
   Gebaut aus den vorhandenen Bausteinen: Pillenknöpfe, Haarlinien-Zeilen
   wie im Agenda-Rückblick, Tokens aus css/tokens/. Keine neuen Farben.
   ========================================================================== */

/* --- Lupe im Kopf --------------------------------------------------------
   Rund wie der Burger, gleiche Hover-Fläche. Die Navigation richtet an der
   Grundlinie aus — die Lupe hat keine, darum align-self:center. */
.msr-suche-knopf{align-self:center;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;padding:0;border:0;border-radius:var(--radius-pill);
  background:transparent;color:var(--msr-ink);cursor:pointer;
  transition:background 180ms ease-out,color 180ms ease-out,transform 100ms ease-out}
.msr-suche-knopf[hidden]{display:none}
.msr-suche-knopf:hover{background:var(--msr-natur-tint);color:var(--msr-logo-blau)}
.msr-suche-knopf:active{transform:scale(0.94)}
.msr-suche-knopf[aria-expanded="true"]{background:var(--msr-blau-tint);color:var(--msr-logo-blau)}

/* --- Suchpanel: eigene Zeile unter Logo und Navigation ------------------- */
.msr-suche{flex-basis:100%;padding:6px 0 4px}
.msr-suche[hidden]{display:none}
.js .msr-suche:not([hidden]){animation:msr-suche-auf 220ms cubic-bezier(0.16,1,0.3,1)}
@keyframes msr-suche-auf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- Suchfeld ------------------------------------------------------------ */
.msr-suchfeld{display:flex;gap:10px;align-items:stretch;width:100%;max-width:640px;margin-left:auto}
.msr-suchfeld__eingabe{flex:1;min-width:0;font-family:var(--font-core);font-size:var(--text-base);font-weight:500;
  color:var(--msr-ink);background:var(--msr-papier);padding:10px 20px;
  border:var(--border-hairline) solid var(--msr-ink);border-radius:var(--radius-pill);
  transition:border-color 180ms ease-out,box-shadow 180ms ease-out}
.msr-suchfeld__eingabe::placeholder{color:var(--text-muted);opacity:1}
.msr-suchfeld__eingabe:hover{border-color:var(--msr-logo-blau)}
.msr-suchfeld__eingabe:focus{outline:none;border-color:var(--msr-logo-blau);box-shadow:0 0 0 3px var(--msr-blau-tint)}
.msr-suchfeld__eingabe:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.msr-suchfeld__eingabe::-webkit-search-cancel-button{cursor:pointer}
.msr-suchfeld__knopf{flex:none}
.msr-suchfeld--seite{margin-left:0;margin-top:8px}

/* Im mobilen Menü: nach den Links, vor dem Anmeldeknopf, gleiche Einblendung. */
.msr-menu__suche{margin-top:22px;max-width:420px}
.msr-menu__suche .msr-suchfeld{margin-left:0}
.msr-menu__suche{opacity:0;transform:translateY(12px)}
.msr-menu.is-open .msr-menu__suche{opacity:1;transform:none;
  transition:opacity 320ms ease-out,transform 420ms cubic-bezier(0.16,1,0.3,1);
  transition-delay:calc(80ms + var(--i,0) * 45ms)}

/* --- Mitteilungsband (Decision 10) ---------------------------------------
   Im normalen Fluss, scrollt weg. «wichtig» weinrot mit heller Schrift
   (7.25:1), «hinweis» hellblau mit Tinte (7.53:1) — auf Hellblau trägt
   weisse Schrift nicht. */
.msr-mitteilung{padding-block:12px;padding-inline:24px;text-align:center}
.msr-mitteilung--wichtig{background:var(--msr-logo-rot);color:var(--text-inverse)}
.msr-mitteilung--hinweis{background:var(--msr-blau);color:var(--msr-ink)}
.msr-mitteilung__text{margin:0 auto;max-width:var(--content-max);color:inherit;
  font-weight:700;font-size:var(--text-small);letter-spacing:0.02em;line-height:1.5}
.msr-mitteilung__link{margin-left:10px;color:inherit;font-weight:800;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px;white-space:nowrap}
.msr-mitteilung__link:hover{text-decoration-thickness:2.5px}
.msr-mitteilung--wichtig .msr-mitteilung__link:focus-visible{outline-color:var(--text-inverse)}

/* --- Suchseite ------------------------------------------------------------ */
.msr-such-hero{max-width:calc(var(--content-max) + 80px)}
.msr-such-hero > *{max-width:720px}
.msr-treffer{display:flex;flex-direction:column;gap:48px;margin-top:24px}
.msr-treffer__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)}
.msr-treffer__liste{display:flex;flex-direction:column}
.msr-treffer__eintrag{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 28px;align-items:baseline;
  padding:16px 4px;border-top:1px solid var(--border-soft);text-decoration:none;color:var(--msr-ink);
  transition:background 180ms ease-out}
.msr-treffer__eintrag:first-child{border-top:var(--border-hairline) solid var(--msr-ink)}
.msr-treffer__eintrag:last-child{border-bottom:var(--border-hairline) solid var(--msr-ink)}
.msr-treffer__eintrag:hover{background:var(--msr-natur-tint);color:var(--msr-ink)}
.msr-treffer__eintrag:active{background:var(--msr-blau-tint)}
.msr-treffer__name{font-weight:600;font-size:var(--text-base)}
.msr-treffer__name .msr-badge{margin-left:6px;vertical-align:1px}
.msr-treffer__meta{font-weight:350;font-size:var(--text-caption);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);text-align:right}

@media (max-width:640px){
  .msr-suchfeld:not(.msr-suchfeld--menue){flex-direction:column}
  .msr-suchfeld__knopf{align-self:flex-start}
  .msr-treffer__eintrag{grid-template-columns:1fr}
  .msr-treffer__meta{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .js .msr-suche:not([hidden]){animation:none}
  .msr-menu__suche{transition:none;opacity:1;transform:none}
}

/* Titel aus der Redaktion: im Prototyp trennten lange Wörter über ein
   gesetztes &shy; («Instrumenten&shy;schnuppern»). In WordPress schreibt
   niemand &shy; — darum automatische Silbentrennung (lang="de-CH"), und als
   letzte Sicherung ein Umbruch mitten im Wort statt Überlauf. */
.akt-beitrag__titel,.agd-anlass__titel,.dok-datei__name,.msr-card__title,.agd-rueck__titel,.msr-treffer__name{
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}