/* =========================================================
   WIR Musikschule – Design System
   Corporate Design "WIR" – Notensignet in Kreisform, Farbpalette aus
   Deep Space Blue / Orange / Pacific Cyan / Lime Moss (siehe Brand Style
   Guide, design/Brand Style Guide.pdf)
   ========================================================= */

/* Selbst gehostete Schriften (kein Google-Fonts-CDN-Request zur Laufzeit) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-var.woff2') format('woff2-variations'), url('../fonts/montserrat-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-var.woff2') format('woff2-variations'), url('../fonts/lora-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-italic-var.woff2') format('woff2-variations'), url('../fonts/lora-italic-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-sans-3-var.woff2') format('woff2-variations'), url('../fonts/source-sans-3-var.woff2') format('woff2');
}

:root {
  --navy: #112d4c;       /* Deep Space Blue - Primaerfarbe */
  --navy-light: #1c4468;
  --navy-lighter: #2d5c8a;
  --navy-mid: #15375c;   /* Verlaufsstuetzpunkte fuer .section--navy, vorher als */
  --navy-deep: #0a1c30;  /* literale Hex-Werte statt Token direkt im Verlauf hinterlegt */
  --orange: #f2a71f;     /* Orange - Akzentfarbe */
  --orange-dark: #d38f13;
  --orange-light: #f7c368;
  --cyan: #1d97b3;       /* Pacific Cyan - 2. Akzentfarbe */
  --cyan-dark: #167a91;
  --cyan-light: #5fb9cf;
  --lime: #acc034;       /* Lime Moss - 3. Akzentfarbe */
  --lime-dark: #8ea02b;
  --cream: #ebe5d9;      /* Soft Linen - Neutralfarbe hell */
  --cream-dark: #ddd2ba;
  --white: #ffffff;
  --slate: #4b5563;      /* Charcoal Blue - Neutralfarbe dunkel */
  --slate-light: #64707d; /* dunkler als urspruenglich (#7c8896) - die alte Version hatte nur 3.6:1 Kontrast auf Weiss, unter dem WCAG-AA-Minimum von 4.5:1; diese Version kommt auf 5:1 */
  --ink: #16233b;
  --danger: #b3261e; /* identisch zu admin.css - vorher hatte die oeffentliche Seite mit
                         #c0392b einen eigenen, unabgestimmten Rotton fuer denselben
                         Fehler-Zustand wie das Admin-Panel */
  --muted-bg: #e4e4e4; /* bewusst ausserhalb der Markenpalette - Signalfarbe fuer
                           "archiviert/inaktiv" (z.B. vergangene Veranstaltungen), vorher
                           als literaler Hex-Wert direkt im Selektor statt als Token */

  /* Strukturelle Linien/Rahmen, von der Primaerfarbe abgeleitet (ersetzt die
     fruehere ebony-basierte Zargeneinlage-Palette) */
  --line-soft: rgba(17, 45, 76, 0.45);
  --hairline: rgba(17, 45, 76, 0.14);

  /* Kategorie-Fallback-Palette fuer News-/Veranstaltungs-Kacheln ohne eigenes Bild
     (siehe category_color() in functions.php) - direkt aus den vier
     Markenfarben abgeleitet statt einer thematisch losgeloesten Extra-Palette */
  --swatch-navy: var(--navy);
  --swatch-cyan: var(--cyan-dark);
  --swatch-lime: var(--lime-dark);
  --swatch-orange: var(--orange-dark);

  --font-display: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-accent: 'Lora', Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-body: 'Source Sans 3', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 2px 10px rgba(17, 45, 76, 0.08);
  --shadow-md: 0 12px 32px rgba(17, 45, 76, 0.12);
  --shadow-lg: 0 24px 60px rgba(17, 45, 76, 0.18);

  --container: 1180px;
  --header-h: 84px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
html { overflow-x: hidden; }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 600;
}

h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
p { margin: 0 0 1em; color: var(--slate); }
a { color: inherit; text-decoration: none; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 1.08rem;
  color: var(--orange-dark);
  margin-bottom: 0.5em;
}
/* Nur hier: "Willkommen" bildet zusammen mit der h2 darunter einen durchgehenden Satz
   ("Willkommen auf der Homepage der WIR-Musikschule") und soll daher genauso gross
   wirken wie die Ueberschrift, statt wie ein kleiner Kicker davor. Bewusst auf diese
   eine Stelle beschraenkt, alle anderen Eyebrows auf der Seite bleiben unveraendert klein. */
.leadership-text .eyebrow { font-size: clamp(1.7rem, 3vw, 2.5rem); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(56px, 8vw, 108px) 0; }
.section--cream { background: var(--cream); }
.section--navy {
  background:
    radial-gradient(130% 160% at 12% -20%, rgba(247,195,104,0.16), transparent 55%),
    linear-gradient(165deg, var(--navy-mid) 0%, var(--navy) 45%, var(--navy-deep) 100%);
  color: var(--white);
}
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy p { color: rgba(255,255,255,0.75); }
.section--navy .card h3 { color: var(--navy); }
.section--navy .card p { color: var(--slate); }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; text-align: center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.7em;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.96rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.25s, color 0.25s, border-color 0.25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
/* Eigener :active-Zustand statt sich auf :hover zu verlassen - auf Touch-Geraeten gibt
   es kein echtes Hover, ohne dieses Feedback fuehlt sich ein Tippen "leblos" an oder
   der Hover-Zustand bleibt nach dem Antippen kurz haengen. */
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--orange); color: var(--navy); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--orange-dark); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; border-color: rgba(255,255,255,0.5); color: var(--white); }
.btn-outline:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }
.btn-outline-navy { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: var(--white); }
.btn-sm { padding: 0.55em 1.2em; font-size: 0.86rem; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  transition: box-shadow 0.35s var(--ease), background-color 0.35s var(--ease), height 0.35s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(17,45,76,0.12); background: rgba(255,255,255,0.97); height: 68px; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; width: 100%; }

.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 38px; aspect-ratio: 244.70112 / 316.50001; height: auto;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease);
}
.brand-mark-svg { width: 100%; height: 100%; display: block; }
.site-header:hover .brand-mark { transform: scale(1.06); }

/* Marken-Lockup (Icon + Wortmarke + Zeilen darueber/darunter), an den
   Proportionen des Primaerlogos orientiert - "WIR" ist der grosse Blickfang,
   Verband/Region stehen klein darueber/darunter. Wiederverwendet in Header,
   Footer und Hero (dort .hero-lockup, siehe weiter unten). */
.brand-lockup { display: flex; flex-direction: column; justify-content: center; line-height: 1; }
.brand-lockup-label { font-family: var(--font-body); font-weight: 600; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--slate); text-transform: uppercase; }
.brand-wordmark { display: block; height: 20px; margin: 3px 0; }
.brand-wordmark svg { height: 100%; width: auto; display: block; }

.main-nav { display: flex; align-items: center; gap: 6px; }
.main-nav a {
  padding: 10px 16px; font-weight: 600; font-size: 0.94rem; color: var(--navy);
  border-radius: var(--radius-sm); position: relative; transition: color 0.25s, background-color 0.25s;
}
.main-nav a:hover, .main-nav a.active { background: var(--cream); color: var(--orange-dark); }

.header-actions { display: flex; align-items: center; gap: 14px; }
.quick-contact { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; color: var(--navy); }
.quick-contact-icon {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  color: var(--navy); background: var(--cream);
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.quick-contact-icon:hover { background: var(--orange); color: var(--white); transform: translateY(-1px); }
.burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; border-radius: 12px; border: none; background: var(--cream); cursor: pointer;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--navy); margin: 0 auto; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; background: var(--white); z-index: 480;
  transform: translateX(100%); transition: transform 0.4s var(--ease);
  overflow-y: auto; padding: 20px 24px 40px;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav a { display: block; padding: 16px 4px; font-size: 1.15rem; font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--cream); }
.mobile-nav .quick-contact { margin-top: 24px; font-size: 1.05rem; }

body.nav-open { overflow: hidden; }

@media (max-width: 1024px) {
  .main-nav { display: none; }
  .burger { display: flex; }
  .quick-contact.desktop-only, .quick-contact-icon.desktop-only { display: none; }
}
@media (max-width: 1024px) {
  .brand-lockup-label { display: none; }
  .brand-wordmark { height: 24px; margin: 0; }
}

/* ---------- Breadcrumbs / Page header ---------- */
.page-header { padding: calc(var(--header-h) + 40px) 0 40px; background: var(--cream); }
/* Sprungziel fuer #archiv-Links (Veranstaltungen-Archiv): ohne das landet der fixierte
   Header genau ueber den Tab-Buttons/Filter-Chips, die dann verdeckt sind. Sitzt auf der
   ganzen Tabs-Sektion (nicht nur dem Panel), damit auch die Tab-Buttons sichtbar bleiben. */
#archiv { scroll-margin-top: calc(var(--header-h) + 20px); }
.breadcrumbs { display: flex; gap: 8px; font-size: 0.84rem; color: var(--slate); margin-bottom: 14px; flex-wrap: wrap; }
.breadcrumbs a { color: var(--slate); }
.breadcrumbs a:hover { color: var(--orange-dark); }
.breadcrumbs .sep { color: var(--slate-light); }
.page-header h1 { margin-bottom: 6px; }
.page-header p { max-width: 620px; margin-bottom: 0; }

/* ---------- Hero (Startseite) ---------- */
/* 100dvh nach 100vh: Browser, die dvh nicht kennen, ignorieren die Zeile und bleiben
   bei 100vh; moderne Mobile-Browser nutzen die "dynamische" Variante, die die ein-/
   ausblendende Adressleiste beruecksichtigt - ohne das springt der Hero beim ersten
   Scrollen sichtbar, weil 100vh auf dem Handy die maximal moegliche Hoehe annimmt. */
.hero { position: relative; height: 100vh; height: 100dvh; min-height: 560px; max-height: 900px; overflow: hidden; color: var(--white); }
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease);
  background-size: cover; background-position: center;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide.is-active .hero-slide-img { animation: kenburns 12s var(--ease) forwards; }
.hero-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
@keyframes kenburns { from { transform: scale(1) translate(0,0); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.hero-scrim {
  position: absolute; inset: 0;
  /* Deckkraft naeher an 0 ausklingen lassen (statt bei ~0.32 zu bleiben), damit die vom
     Logo/Text abgewandte Bildhaelfte fast ungetruebt bleibt - die Verdunkelung konzentriert
     sich auf die untere linke Ecke, wo Logo, Ueberschrift und Buttons Kontrast brauchen. */
  background:
    linear-gradient(180deg, rgba(17,45,76,0.10) 0%, rgba(17,45,76,0.16) 30%, rgba(17,45,76,0.26) 58%, rgba(17,45,76,0.64) 100%),
    linear-gradient(90deg, rgba(17,45,76,0.36) 0%, rgba(17,45,76,0.18) 38%, rgba(17,45,76,0.04) 68%, rgba(17,45,76,0) 100%);
}
.hero-staff {
  position: relative; height: clamp(40px, 12vh, 96px); width: min(70%, 460px);
  flex-shrink: 0; margin-bottom: 28px;
  pointer-events: none;
}
.hero-staff-lines-bg {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to bottom, rgba(235,229,217,0.42) 0, rgba(235,229,217,0.42) 1px, transparent 1px, transparent 20%);
}
.staff-note {
  position: absolute; width: clamp(15px, 3.2vh, 22px); height: auto; aspect-ratio: 30 / 48;
  fill: var(--cream); stroke: var(--cream); stroke-width: 2.2; stroke-linecap: round;
  opacity: 0; transform-origin: center;
  animation: note-pop 0.55s var(--ease) forwards;
}
.staff-note[data-tier="2"], .staff-note[data-tier="3"] { display: none; }
@media (min-width: 641px) { .staff-note[data-tier="2"] { display: block; } }
@media (min-width: 1025px) { .staff-note[data-tier="3"] { display: block; } }
@keyframes note-pop { from { opacity: 0; transform: scale(0.35) translateY(8px); } to { opacity: 0.9; transform: scale(1) translateY(0); } }
/* Leises Nachschwingen nach dem Aufpoppen, auf einer inneren <g> (siehe hero_note()
   in functions.php) - "die Musik hoert nie ganz auf". Bewusst minimal (±2px), damit
   es als Lebendigkeit wirkt statt als Ablenkung. */
.staff-note-glyph { transform-box: fill-box; transform-origin: center; animation: note-sway 2.6s ease-in-out infinite; }
@keyframes note-sway { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-3deg); } }
.hero-content { position: relative; z-index: 5; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--header-h) + 16px); box-sizing: border-box; }

.hero-brand { display: flex; align-items: center; gap: 28px; margin-bottom: 24px; }

/* ---------- Hero-Signet: "Aufbluehen" ----------
   Die Bildmarke ist selbst schon rund (Note + Kreisbogen) - statt sie in ein
   zweites, eigenes Kreis-Medaillon zu fassen, steht sie hier direkt und in
   voller Farbe. Aufbau der Animation, in dieser Reihenfolge: die drei
   Farbsegmente bluehen gestaffelt auf -> der Kreisbogen schwingt einmal
   komplett darum zu -> der kleine Notenfahnen-Schnoerkel blitzt auf. Direkt
   im Anschluss feuern wie zuvor Glow + Ringpuls ("Schallwellen") vom
   fertigen Signet weg, danach folgen die Notenlinien (siehe hero_note()). */
.hero-signet-wrap {
  position: relative; flex-shrink: 0; display: flex; align-items: flex-end; justify-content: center;
  width: clamp(64px, min(12vw, 22vh), 180px); aspect-ratio: 244.70112 / 316.50001;
}
.hero-signet-glow {
  position: absolute; left: 0; right: 0; bottom: 0; height: 77%; border-radius: 50%;
  background: radial-gradient(circle, rgba(235,229,217,0.55), transparent 68%);
  filter: blur(16px); opacity: 0; z-index: 1;
  animation: glow-pulse 2s var(--ease) 1.6s forwards;
}
@keyframes glow-pulse {
  0% { opacity: 0; transform: scale(0.6); }
  45% { opacity: 0.9; transform: scale(1.18); }
  100% { opacity: 0.62; transform: scale(1); }
}
.hero-signet-pulse {
  position: absolute; left: 0; right: 0; bottom: 0; height: 77%; border-radius: 50%; z-index: 2;
  border: 1.5px solid var(--cream);
  opacity: 0; animation: pulse-ring 1.2s var(--ease) 1.75s forwards;
}
@keyframes pulse-ring {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}
.hero-signet {
  position: relative; z-index: 3; display: block;
  width: 100%; height: 100%;
  /* Heller Halo zuerst, damit sich die navyfarbenen Signet-Teile (Kreisbogen,
     Notenfahnen-Schnoerkel) von JEDEM Fotogrund abheben - ein dunkler Schatten
     alleine wuerde gegen einen dunklen Bildbereich keine Kontrastwirkung mehr
     entfalten, weil sie dieselbe Navy-Farbe wie der (jetzt reduzierte) Hero-
     Schleier haben. Der zweite, dunkle Schatten sorgt weiterhin fuer Tiefe. */
  filter: drop-shadow(0 0 10px rgba(235,229,217,0.55)) drop-shadow(0 4px 14px rgba(0,0,0,0.4));
}
.hero-signet svg { width: 100%; height: 100%; display: block; }
.hero-signet .signet-petal, .hero-signet .signet-arc, .hero-signet .signet-flourish {
  transform-box: fill-box; transform-origin: center; opacity: 0;
}
/* Ausnahme nur im Hero: Kreisbogen + Notenfahnen-Schnoerkel sind im Signet navyfarben
   und wuerden mit dem (nun reduzierten, aber weiterhin navygetoenten) Hero-Schleier
   verschmelzen. Hier daher weiss statt Navy - ueberschreibt das SVG-eigene fill="...",
   da CSS Praesentationsattribute grundsaetzlich schlaegt. Ueberall sonst (Header,
   Footer, Wasserzeichen) bleibt das Signet unveraendert komplett farbig. */
.hero-signet .signet-arc path, .hero-signet .signet-flourish path { fill: var(--cream); }
.hero-signet .signet-petal { transform: scale(0.25); animation: signet-bloom 0.4s var(--ease) forwards; }
.hero-signet .signet-petal--orange { animation-delay: 0.4s; }
.hero-signet .signet-petal--lime { animation-delay: 0.52s; }
.hero-signet .signet-petal--cyan { animation-delay: 0.64s; }
@keyframes signet-bloom { to { opacity: 1; transform: scale(1); } }
.hero-signet .signet-arc {
  transform: rotate(-55deg) scale(0.8);
  animation: signet-arc-close 0.55s var(--ease) 0.95s forwards;
}
@keyframes signet-arc-close { to { opacity: 1; transform: rotate(0deg) scale(1); } }
.hero-signet .signet-flourish {
  transform: scale(0.35);
  animation: signet-flourish-pop 0.35s var(--ease) 1.35s forwards;
}
@keyframes signet-flourish-pop {
  0% { opacity: 0; transform: scale(0.35); }
  65% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

.hero-lockup {
  display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1;
  opacity: 0; animation: fadeUp 0.8s var(--ease) 1s forwards;
}
.hero-lockup-label {
  font-family: var(--font-body); font-weight: 600; font-size: clamp(0.68rem, min(1.9vw, 3.6vh), 1.75rem);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.hero-lockup-label:first-child { margin-bottom: clamp(2px, 1vh, 10px); }
.hero-lockup-label:last-child { margin-top: clamp(4px, 2vh, 16px); }
.hero-wordmark {
  display: block; height: clamp(1.6rem, min(9vw, 14vh), 6.4rem);
  /* Derselbe helle Halo wie beim Signet (.hero-signet) statt eines reinen dunklen
     Schattens, damit beide Hero-Markenelemente einheitlich wirken. Der dunkle Schatten
     bleibt dezent erhalten fuer Tiefe/Lesbarkeit auf hellen Fotobereichen. */
  filter: drop-shadow(0 0 10px rgba(235,229,217,0.55)) drop-shadow(0 2px 10px rgba(0,0,0,0.4));
}
.hero-wordmark svg { height: 100%; width: auto; display: block; }
.hero-content h1 { color: var(--white); max-width: 780px; font-size: clamp(1.5rem, min(4.2vw, 8vh), 3.4rem); text-shadow: 0 2px 20px rgba(0,0,0,0.65), 0 1px 4px rgba(0,0,0,0.55); }
.hero-content p { color: rgba(255,255,255,0.9); max-width: 560px; font-size: 1.12rem; text-shadow: 0 1px 14px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5); }
.hero-cta { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }

/* Kompakter Modus fuer kurze Viewports (z.B. nicht maximiertes Laptop-Fenster, Handy quer):
   Medaillon, Notenlinien und die Logo-/Headline-Schriftgroessen reagieren oben bereits
   stufenlos auf die Fensterhoehe (per min(vw, vh) in den jeweiligen clamp()-Werten), damit
   es beim Zoomen oder Verkleinern des Fensters keinen ploetzlichen Sprung gibt. Hier bleiben
   nur noch die restlichen Abstaende/Button-Groessen, die bei wenig Hoehe zusaetzlich enger
   werden sollen, damit der Hero-Inhalt sicher unter dem fixierten Header bleibt. */
@media (max-height: 700px) {
  .hero-brand { gap: 16px; margin-bottom: 16px; }
  .hero-staff { margin-bottom: 14px; }
  .hero-content p { font-size: 0.95rem; margin-bottom: 0.6em; }
  .hero-cta { margin-top: 6px; }
  .hero-cta .btn { padding: 0.55em 1.1em; font-size: 0.9rem; }
}

/* Schmale Handys: das Signet uebernimmt normalerweise immer die Hoehe von Wortmarke +
   Untertitel (Reihe mit .hero-lockup, align-items:center in .hero-brand) - das erzeugt
   bei wenig Breite aber einen Teufelskreis: ein grosses Signet laesst der Wortmarke wenig
   Platz, sie bricht in mehr Zeilen um, wodurch die Reihe (und damit das Signet) noch
   groesser wird. Auf schmalen Handys bekommt das Signet deshalb eine feste, unabhaengige
   Groesse statt sich an den Text anzupassen. */
@media (max-width: 480px) {
  .hero-brand { gap: 16px; }
  .hero-staff { margin-bottom: 18px; }
  .hero-signet-wrap { width: clamp(56px, 18vw, 78px); aspect-ratio: 244.70112 / 316.50001; }
  .hero-wordmark { height: clamp(1.3rem, 8vw, 2.1rem); }
  .hero-lockup-label { font-size: clamp(0.62rem, 3vw, 0.85rem); }
}
.hero-dots { position: absolute; z-index: 6; bottom: 34px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; }
.hero-dots button { width: 34px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.4); border: none; cursor: pointer; transition: background 0.3s; padding: 0; }
.hero-dots button.is-active { background: var(--orange); }
.scroll-cue { position: absolute; right: 28px; bottom: 40px; z-index: 6; display: none; }
@media (min-width: 900px) { .scroll-cue { display: flex; } }
.scroll-cue-line { width: 1px; height: 46px; background: rgba(255,255,255,0.5); position: relative; overflow: hidden; }
.scroll-cue-line::after { content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--orange); animation: cueline 2.2s ease-in-out infinite; }
@keyframes cueline { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }

/* ---------- Section-Divider ---------- */
.section-divider { display: flex; justify-content: center; padding: 34px 0; position: relative; z-index: 10; background: var(--white); }
.section-divider span { width: min(200px, 50%); height: 2px; position: relative; background: linear-gradient(90deg, transparent, var(--orange) 15%, var(--orange) 85%, transparent); }
.section-divider span::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  background: var(--orange); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--white);
}
/* Reveal beim Reinscrollen: die Linie zieht sich von der Mitte auf, der Punkt blitzt
   danach mit demselben Ueberschwung-Timing auf wie der signet-flourish-pop im Hero -
   dieselbe Signatur-Geste wird hier als kleines Wiedererkennungsmotiv weitergefuehrt,
   statt eines generischen Fade-ups. */
.section-divider[data-reveal] { opacity: 1; transform: none; transition: none; }
.section-divider span { transform: scaleX(0); transition: transform 0.7s var(--ease); }
.section-divider.is-visible span { transform: scaleX(1); }
.section-divider span::before { opacity: 0; }
.section-divider.is-visible span::before { animation: divider-dot-pop 0.4s var(--ease) 0.5s forwards; }
@keyframes divider-dot-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  65% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- Reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-group] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0); }
/* Rhythmischer statt gleichmaessiger Stagger - angelehnt an eine Achtel-Achtel-Viertel-
   Figur (kurz-kurz-lang, zweimal). Die Luecken muessen deutlich unterschiedlich lang
   sein, sonst geht der Rhythmus in der ohnehin subtilen Fade-Bewegung unter - die
   "lange" Pause ist hier doppelt so lang wie die "kurze", nicht nur geringfuegig. */
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.1s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.2s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.4s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.5s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.6s; }

/* ---------- Rahmen-Utility ----------
   Schlichter Rahmen fuer Container, die sich von ihrer Umgebung abheben
   sollen - ersetzt den frueheren doppelten "Zargeneinlage"-Rahmen. */
.inlay { position: relative; border: 1px solid var(--line-soft); border-radius: var(--radius-md); }

/* ---------- Cards ---------- */
.card {
  background: var(--white); overflow: hidden; border-radius: var(--radius-md);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), opacity 0.6s var(--ease);
  border: 1px solid var(--hairline);
}
.card:hover { transform: translateY(-4px); border-color: var(--line-soft); }

/* ---------- News carousel ---------- */
.carousel-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 30px; gap: 20px; flex-wrap: wrap; }
.carousel-arrows { display: flex; gap: 10px; }
.carousel-arrows button {
  width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(17,45,76,0.15);
  background: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, transform 0.25s, border-color .25s;
}
.carousel-arrows button:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.carousel-arrows button:active { transform: scale(0.9); }
.az-filter button:active { transform: scale(0.9); }
.carousel-arrows button:disabled { opacity: 0.35; cursor: not-allowed; }
.carousel-arrows--navy button { color: var(--navy); }
.carousel-arrows--navy button:hover { background: var(--orange); border-color: var(--orange); color: var(--white); }
.carousel-track {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 8px; -ms-overflow-style: none; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.news-card {
  scroll-snap-align: start; flex: 0 0 clamp(260px, 32vw, 340px);
}
.news-card-img { position: relative; height: 190px; border-bottom: 1px solid var(--hairline); }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; }
.date-badge {
  position: absolute; top: 14px; left: 14px; background: var(--cream); color: var(--navy);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 0.72rem; font-weight: 700;
  text-align: center; line-height: 1.2;
}
/* Blasses Signet-Wasserzeichen auf Karten ohne Foto - dasselbe Motiv wie .section-watermark
   (siehe dort), nur kleiner skaliert fuer die Kartenhoehe. Ersetzt die reine Farbflaeche
   durch etwas, das nach bewusstem Marken-Detail statt leerer Flaeche aussieht. */
.news-card-img-watermark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0.16; color: var(--white); pointer-events: none;
}
.news-card-img-watermark svg { width: 54%; height: 54%; }
.news-card-body { padding: 20px; }

/* ---------- Anschlagbrett (News-Vorschau Startseite & News-Übersicht) ---------- */
.carousel-track--pinned { padding-top: 20px; }
.grid--pinned { row-gap: 48px; }
.news-pin {
  position: relative; overflow: visible; --pin-rot: 0deg;
  transform: rotate(var(--pin-rot));
  box-shadow: 3px 7px 16px rgba(17,45,76,0.16);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* "Pin-in"-Reveal: die Karte steht zunaechst gerade (0deg) und dreht sich beim
   Einpinnen in ihre finale, nth-child-gesteuerte Schraeglage (--pin-rot) - bewusst
   ohne Skalierung: eine vergroesserte Zwischengroesse liess die Karte kurzzeitig aus
   ihrer Box ragen, was den Karussell-Container (erzwungenes overflow-y:auto durch
   overflow-x:auto) in ein scrollbares Subfenster verwandelte und Klebeband/Schatten
   abschnitt. Reine Rotation aendert die Bounding-Box kaum und bleibt ruhiger. */
.news-pin[data-reveal] {
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), box-shadow 0.35s var(--ease);
}
.news-pin[data-reveal].is-visible {
  opacity: 1;
  transform: rotate(var(--pin-rot));
}
/* Standard-Verlauf ist neutral (Cream) - fuer Karten OHNE Bild, wo der Kachel-Hintergrund
   schon die Kategorie-Farbe traegt (siehe category_color()) und ein gleichfarbiger
   Streifen darauf kaum sichtbar waere. Karten MIT Bild ueberschreiben den Hintergrund
   inline mit category_tape_gradient() derselben Kategorie. */
.news-pin-tape {
  position: absolute; top: -12px; left: 50%; z-index: 4;
  width: 62px; height: 24px; transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(180deg, var(--cream), var(--cream-dark));
  box-shadow: 0 3px 6px rgba(17,45,76,0.28);
  opacity: 0.94;
}
.carousel-track--pinned .news-pin:nth-child(3n+1) { --pin-rot: -1.4deg; }
.carousel-track--pinned .news-pin:nth-child(3n+2) { --pin-rot: 1.6deg; }
.carousel-track--pinned .news-pin:nth-child(3n+3) { --pin-rot: -0.8deg; }
.carousel-track--pinned .news-pin:nth-child(3n+1) .news-pin-tape { transform: translateX(-50%) rotate(2deg); }
.carousel-track--pinned .news-pin:nth-child(3n+3) .news-pin-tape { transform: translateX(-50%) rotate(-5deg); }

/* Ruhigere Variante für die volle Übersichtsseite: kleinere Winkel, 4er-Rhythmus */
.grid--pinned .news-pin--board:nth-child(4n+1) { --pin-rot: -0.9deg; }
.grid--pinned .news-pin--board:nth-child(4n+2) { --pin-rot: 1deg; }
.grid--pinned .news-pin--board:nth-child(4n+3) { --pin-rot: -0.5deg; }
.grid--pinned .news-pin--board:nth-child(4n+4) { --pin-rot: 0.7deg; }
.grid--pinned .news-pin--board:nth-child(4n+1) .news-pin-tape { transform: translateX(-50%) rotate(3deg); }
.grid--pinned .news-pin--board:nth-child(4n+2) .news-pin-tape { transform: translateX(-50%) rotate(-2deg); }
.grid--pinned .news-pin--board:nth-child(4n+3) .news-pin-tape { transform: translateX(-50%) rotate(4deg); }
.grid--pinned .news-pin--board:nth-child(4n+4) .news-pin-tape { transform: translateX(-50%) rotate(-3deg); }
.news-pin:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 6px 16px 28px rgba(17,45,76,0.26);
  z-index: 5;
}
.news-pin:active { transform: rotate(0deg) translateY(-2px) scale(0.98); }
.news-pin .date-badge {
  background: none; border: none; padding: 0; top: 16px; left: 16px;
  font-family: var(--font-accent); font-style: italic; font-weight: 500;
  font-size: 1rem; color: var(--white); text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  transform: rotate(-3deg);
}
.tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-dark); background: rgba(242,167,31,0.12); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.news-card-body h3 { font-size: 1.08rem; margin-bottom: 8px; }
.news-card-body p { font-size: 0.92rem; margin-bottom: 12px; }
.news-card-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.86rem; color: var(--navy); transition: gap 0.25s; }
.news-card:hover .news-card-arrow { gap: 12px; color: var(--orange-dark); }

/* ---------- Leerer Zustand (Listen ohne Eintraege) ---------- */
.empty-state { text-align: center; color: var(--slate); padding: 30px 20px; font-size: 0.98rem; }
.empty-state--on-dark { color: rgba(255,255,255,0.75); }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Gruszwort der Leitung (Startseite, unter den News) ---------- */
.leadership { display: flex; gap: 56px; align-items: flex-start; max-width: 980px; margin: 0 auto; }
.leadership-photo { flex: 0 0 260px; position: relative; }
.leadership-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--hairline); }
.leadership-text { flex: 1; min-width: 0; }
.leadership-text h2 { margin-bottom: 18px; }
.leadership-signature { margin-top: 20px; font-family: var(--font-accent); font-style: italic; font-size: 1.1rem; color: var(--navy); }
.leadership-signature span { display: block; font-style: normal; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-dark); margin-top: 4px; }
.leadership-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; }
.leadership-contact { display: inline-block; font-size: 0.88rem; color: var(--slate); text-decoration: underline; text-underline-offset: 3px; }
.leadership-contact:hover { color: var(--orange-dark); }
@media (max-width: 700px) {
  .leadership { flex-direction: column; gap: 28px; }
  .leadership-photo { flex: 0 0 auto; width: 200px; }
}

/* ---------- Statistik-Streifen (Startseite: Unser Angebot) ----------
   Deep-Space-Blue-Band mit den drei Akzentfarben als Trennpunkte zwischen
   den Feldern - ein kleiner, wiederkehrender Marken-Moment aus allen drei
   WIR-Akzentfarben statt eines neutralen Kartenhintergrunds. */
.stat-strip { display: flex; background: var(--navy); max-width: 900px; margin: 0 auto; border-radius: var(--radius-md); overflow: hidden; border: none; }
.stat-strip-item {
  flex: 1; text-align: center; padding: 38px 20px; position: relative;
  border-right: 1px solid rgba(235,229,217,0.16);
  transition: background-color 0.3s var(--ease), opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.stat-strip-item:last-child { border-right: none; }
.stat-strip-item:nth-child(1):not(:last-child)::after { background: var(--orange); }
.stat-strip-item:nth-child(2):not(:last-child)::after { background: var(--cyan); }
.stat-strip-item:nth-child(3):not(:last-child)::after { background: var(--lime); }
.stat-strip-item:not(:last-child)::after {
  content: ''; position: absolute; right: -4px; top: 50%; z-index: 1;
  width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%);
  box-shadow: 0 0 0 3px var(--navy);
}
.stat-strip-item:hover { background: rgba(255,255,255,0.06); }
.stat-strip-num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 3vw, 2.6rem); color: var(--cream); line-height: 1; margin-bottom: 10px;
  transition: color 0.3s var(--ease);
}
.stat-strip-item:hover .stat-strip-num { color: var(--orange-light); }
.stat-strip-label { display: block; font-size: 0.86rem; color: rgba(235,229,217,0.68); }

@media (max-width: 700px) {
  .stat-strip { flex-wrap: wrap; border-radius: var(--radius-md); }
  .stat-strip-item { flex: 0 0 50%; border-right: none; border-bottom: 1px solid rgba(235,229,217,0.16); }
  .stat-strip-item:nth-child(odd) { border-right: 1px solid rgba(235,229,217,0.16); }
  .stat-strip-item:nth-last-child(-n+2) { border-bottom: none; }
  .stat-strip-item:not(:last-child)::after { display: none; }
  .stat-strip-item:nth-child(1)::before { background: var(--orange); }
  .stat-strip-item:nth-child(3)::before { background: var(--cyan); }
  .stat-strip-item:nth-child(odd)::before {
    content: ''; position: absolute; right: -4px; top: 50%; z-index: 1;
    width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%);
    box-shadow: 0 0 0 3px var(--navy);
  }
}

/* ---------- Masonry gallery ---------- */
.masonry { column-count: 3; column-gap: 18px; }
.masonry img { width: 100%; margin-bottom: 18px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); cursor: zoom-in; transition: transform 0.4s var(--ease), border-color 0.4s var(--ease); }
.masonry img:hover { transform: translateY(-3px); border-color: var(--line-soft); }
@media (max-width: 900px) { .masonry { column-count: 2; } }
@media (max-width: 560px) { .masonry { column-count: 1; } }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; background: rgba(10,15,22,0.94); z-index: 900; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease); }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 88vw; max-height: 82vh; border-radius: var(--radius-sm); transform: scale(0.94); transition: transform 0.35s var(--ease); box-shadow: var(--shadow-lg); }
.lightbox.is-open img { transform: scale(1); }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; background: rgba(255,255,255,0.1); border: none; color: var(--white);
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.25s;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.25); }
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }

/* ---------- Chips (Instrumente) ---------- */
.subject-group { margin-bottom: 64px; max-width: 780px; padding-top: 40px; border-top: 1px solid var(--hairline); }
.subject-group:first-child { padding-top: 0; border-top: none; }
.subject-group-head { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.subject-icon {
  position: relative; flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%;
  background: var(--cream); display: flex; align-items: center; justify-content: center; color: var(--orange-dark);
  box-shadow: inset 0 1px 3px rgba(17,45,76,0.15), 0 1px 2px rgba(17,45,76,0.08);
}
.subject-icon::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--hairline); }
.subject-icon svg { position: relative; z-index: 1; width: 30px; height: 30px; }
/* Kurzer "Anschlag": beim Hover schwingt das Icon kurz aus und daempft wieder ein,
   wie eine angeschlagene Stimmgabel oder gezupfte Saite - statt keiner oder einer
   traegen Standard-Transition. */
.subject-icon:hover { animation: subject-icon-strike 0.4s var(--ease); }
@keyframes subject-icon-strike {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.08) rotate(-4deg); }
  55% { transform: scale(0.97) rotate(3deg); }
  75% { transform: scale(1.03) rotate(-1.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.subject-group h3 { margin-bottom: 4px; font-size: clamp(1.8rem, 3.2vw, 2.3rem); }
.subject-group-meta {
  display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange-dark);
}
.subject-row {
  display: flex; align-items: center; gap: 18px; padding: 16px 4px;
  border-bottom: 1px solid rgba(17,45,76,0.08); text-decoration: none; color: inherit;
  transition: padding-left 0.3s var(--ease), background-color 0.3s var(--ease), opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.subject-row:last-child { border-bottom: none; }
.subject-row:hover { padding-left: 14px; background: rgba(242,167,31,0.06); }
.subject-row:active { background: rgba(242,167,31,0.12); }
.subject-row-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.subject-row-name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--navy); flex-shrink: 0; }
.subject-row-desc { font-size: 0.88rem; color: var(--slate); }
.subject-row-arrow { flex-shrink: 0; color: var(--orange); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.subject-row:hover .subject-row-arrow { opacity: 1; transform: translateX(0); }

@media (max-width: 560px) {
  .subject-row-text { flex-direction: column; gap: 2px; }
}

/* ---------- Teacher gallery ---------- */
/* Tippflaeche auf 40px angehoben (vorher 34px) - bei 27 dicht nebeneinander stehenden
   Buchstaben-Buttons ist das am Handy mit dem Finger spuerbar leichter zu treffen. */
.az-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.az-filter button {
  width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(17,45,76,0.12); background: var(--white);
  font-weight: 700; font-size: 0.82rem; color: var(--navy); cursor: pointer; transition: all 0.25s;
}
.az-filter button:hover { border-color: var(--orange); color: var(--orange-dark); }
.az-filter button.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.az-filter button:disabled { opacity: 0.3; cursor: default; }
.az-filter button:disabled:hover { border-color: rgba(17,45,76,0.12); color: var(--navy); }

.teacher-tile { display: block; text-decoration: none; color: inherit; text-align: center; padding-bottom: 18px; }
.teacher-photo { aspect-ratio: 1; overflow: hidden; margin-bottom: 14px; border-radius: var(--radius-md); border: 1px solid var(--hairline); }
.teacher-photo-inner { width: 100%; height: 100%; overflow: hidden; }
.teacher-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.teacher-tile:hover .teacher-photo img { transform: scale(1.06); }
.teacher-tile h3 { font-size: 1rem; margin-bottom: 2px; color: var(--navy); }
.teacher-tile .subjects { font-size: 0.82rem; color: var(--slate); padding: 0 12px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,0.78); }
.footer-main { padding-top: 70px; padding-bottom: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
.footer-col h4 { color: var(--white); font-family: var(--font-body); font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 20px; }
.footer-col a, .footer-col p { display: block; color: rgba(255,255,255,0.72); font-size: 0.92rem; margin-bottom: 12px; transition: color 0.25s, transform 0.25s; }
.footer-col a:hover { color: var(--orange-light); transform: translateX(3px); }
.footer-brand-mark { width: 42px; aspect-ratio: 244.70112 / 316.50001; height: auto; color: var(--white); margin-bottom: 16px; }
.footer-brand-mark svg { width: 100%; height: 100%; display: block; }
.footer-brand-lockup { display: flex; flex-direction: column; margin-bottom: 12px; line-height: 1; }
.footer-brand-label { font-family: var(--font-body); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); text-transform: uppercase; }
.footer-brand-label:first-child { margin-bottom: 6px; }
.footer-brand-label:last-child { margin-top: 6px; }
.footer-brand-wordmark { display: block; height: 26px; }
.footer-brand-wordmark svg { height: 100%; width: auto; display: block; }
.footer-slogan { font-family: var(--font-accent); font-style: italic; opacity: 0.7; max-width: 260px; }
.social-row { display: flex; gap: 10px; margin-top: 18px; }
.social-row a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; margin-bottom: 0; }
.social-row a:hover { background: var(--orange); color: var(--white); transform: translateY(-3px); }

.footer-sponsors { border-top: 1px solid rgba(255,255,255,0.1); padding: 34px 0; }
.footer-sponsors-label { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 20px; text-align: center; }
.sponsor-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; }
.sponsor-row a { display: block; border-radius: var(--radius-sm); overflow: hidden; filter: grayscale(1) opacity(0.55); transition: filter 0.35s var(--ease), transform 0.35s var(--ease); }
.sponsor-row a:hover { filter: grayscale(0) opacity(1); transform: translateY(-3px); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; padding-bottom: 20px; font-size: 0.82rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.footer-bottom a { color: rgba(255,255,255,0.6); }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 22px; }
.form-group label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; color: var(--navy); }
.form-group .hint { font-size: 0.8rem; color: var(--slate-light); margin-top: 6px; }
.form-control {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--hairline); border-radius: var(--radius-sm);
  font-size: 0.96rem; font-family: inherit; transition: border-color 0.25s, box-shadow 0.25s; background: var(--white);
}
.form-control:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(242,167,31,0.14); }
.form-control.invalid, select.invalid { border-color: var(--danger); }
.checkbox-row input.invalid { outline: 2px solid var(--danger); outline-offset: 3px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; }
.checkbox-row input { margin-top: 4px; }
.checkbox-row label { font-weight: 400; color: var(--slate); font-size: 0.9rem; }

.subject-picker { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; border: 1.5px dashed var(--line-soft); min-height: 60px; }
.subject-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: var(--white); padding: 7px 8px 7px 14px; border-radius: 999px; font-size: 0.86rem; font-weight: 600; }
.subject-badge button { background: rgba(255,255,255,0.2); border: none; color: white; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; display:flex; align-items:center; justify-content:center; font-size: 0.7rem; }
.subject-select-wrap { position: relative; flex: 1; min-width: 180px; }
.subject-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--white); box-shadow: var(--shadow-md); max-height: 220px; overflow-y: auto; z-index: 20; border: 1px solid var(--hairline); display: none; }
.subject-dropdown.is-open { display: block; }
.subject-dropdown div { padding: 10px 16px; cursor: pointer; font-size: 0.9rem; }
.subject-dropdown div:hover { background: var(--cream); }
.subject-search { border: none; outline: none; font-size: 0.94rem; padding: 8px 4px; width: 100%; font-family: inherit; }
/* outline:none oben entfernt den Standard-Rahmen (der durch die umgebende
   .subject-select-wrap-Box optisch nicht gepasst haette), aber ohne Ersatz gab es dann
   gar keinen sichtbaren Fokus-Indikator mehr fuer Tastaturnutzerinnen - klarer
   WCAG-2.4.7-Verstoss. Hier als Ersatz ein eigener, zur Optik passender Fokus-Ring. */
.subject-search:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 2px; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Downloads ---------- */
.download-row { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; background: var(--white); border: 1px solid var(--hairline); border-left: 3px solid var(--hairline); border-radius: var(--radius-sm); margin-bottom: 14px; transition: border-color 0.3s var(--ease), padding-left 0.3s var(--ease); }
.download-row:hover { border-left-color: var(--orange); padding-left: 30px; }
.download-row:active { background: var(--cream); }
.download-info { display: flex; align-items: center; gap: 16px; }
.download-icon { width: 46px; height: 46px; background: var(--cream); color: var(--orange-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.download-meta { font-size: 0.82rem; color: var(--slate-light); }
.download-arrow { width: 42px; height: 42px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; color: var(--navy); transition: background 0.3s, color 0.3s; flex-shrink:0; }
.download-row:hover .download-arrow { background: var(--orange); color: var(--white); }

/* ---------- Tabs ---------- */
.tab-buttons { display: flex; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; }
.tab-buttons button {
  padding: 12px 24px; border-radius: var(--radius-sm); border: 1.5px solid rgba(17,45,76,0.14); background: var(--white);
  font-weight: 700; font-size: 0.92rem; color: var(--navy); cursor: pointer; transition: all 0.3s var(--ease);
}
.tab-buttons button.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
[data-tab-panel] { display: none; }
[data-tab-panel].is-active { display: block; animation: fadeUp 0.5s var(--ease); }

/* ---------- Events ---------- */
.event-row { display: flex; gap: 24px; align-items: center; padding: 22px 4px; border-bottom: 1px solid rgba(17,45,76,0.08); transition: padding-left 0.3s var(--ease), background-color 0.3s var(--ease); }
a.event-row:hover { padding-left: 14px; background: rgba(242,167,31,0.06); }
a.event-row:active { background: rgba(242,167,31,0.12); }
.event-date-block { text-align: center; width: 74px; flex-shrink: 0; background: var(--cream); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 10px 0; }
.event-date-block .d { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--navy); line-height: 1; }
.event-date-block .m { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--orange-dark); font-weight: 700; }
.event-info h3 { margin-bottom: 4px; font-size: 1.05rem; }
.event-info .meta { font-size: 0.85rem; color: var(--slate-light); }
.archive .event-date-block { background: var(--muted-bg); filter: grayscale(1); }
.archive .event-info h3 { color: var(--slate); }

/* ---------- Veranstaltungen-Unterseite: Bild-Kacheln fuer "Kommende Termine" ---------- */
.event-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.event-tile {
  position: relative; display: block; aspect-ratio: 15 / 7; overflow: hidden; border-radius: var(--radius-md);
  border: 1px solid var(--hairline); text-decoration: none; color: var(--white); background: var(--navy);
}
.event-tile-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.event-tile:hover .event-tile-bg { transform: scale(1.045); }
.event-tile-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,14,8,0) 32%, rgba(20,14,8,0.85) 100%); }
.event-tile-date {
  position: absolute; top: 16px; left: 16px; z-index: 2; text-align: center; line-height: 1.1;
  background: rgba(235,229,217,0.94); color: var(--navy); padding: 8px 13px; border-radius: var(--radius-sm);
}
.event-tile-date .d { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
.event-tile-date .m { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-dark); }
.event-tile-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 22px; }
.event-tile-content h3 { color: var(--white); font-size: 1.22rem; margin-bottom: 4px; }
.event-tile-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.86rem; color: rgba(255,255,255,0.82); margin: 0 0 8px; }
.event-tile-meta { display: block; font-size: 0.84rem; color: rgba(255,255,255,0.88); }
.tag--on-dark { background: rgba(255,255,255,0.18); color: var(--white); border-radius: 999px; }
@media (max-width: 700px) {
  .event-tiles { grid-template-columns: 1fr; }
  .event-tile { aspect-ratio: 4 / 3; }
}

/* ---------- Veranstaltungen-Archiv: Jahres-Filter ---------- */
.event-year-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.event-year-filter a {
  padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(17,45,76,0.15); background: var(--white);
  font-size: 0.82rem; font-weight: 600; color: var(--navy); text-decoration: none; transition: all 0.25s var(--ease);
}
.event-year-filter a.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.event-year-filter a:hover:not(.is-active) { border-color: var(--orange); color: var(--orange-dark); }

/* ---------- Pagination (News, Veranstaltungen-Archiv) ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 50px; }
.pagination-num, .pagination-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(17,45,76,0.15); color: var(--navy); font-weight: 600; font-size: 0.88rem;
  text-decoration: none; transition: all 0.25s var(--ease);
}
.pagination-num.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pagination-num:hover:not(.is-active), .pagination-arrow:hover { border-color: var(--orange); color: var(--orange-dark); }

/* ---------- Aufführungstafel (Termine-Vorschau Startseite) ---------- */
.playbill { max-width: 780px; }
.playbill-row {
  display: flex; align-items: center; gap: 30px; padding: 28px 4px;
  border-bottom: 1px solid rgba(247,195,104,0.22);
  transition: padding-left 0.3s var(--ease), background-color 0.3s var(--ease);
}
.playbill-row:hover { padding-left: 16px; background: rgba(247,195,104,0.06); }
.playbill-row:last-child { border-bottom: none; }
.playbill-date {
  flex-shrink: 0; width: 86px; text-align: center;
  border-right: 1px solid rgba(247,195,104,0.3); padding-right: 26px;
}
.playbill-day { display: block; font-family: var(--font-display); font-weight: 600; font-size: 2.7rem; line-height: 1; color: var(--orange-light); }
.playbill-month { display: block; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,195,104,0.75); margin-top: 8px; }
.playbill-info { flex: 1; min-width: 0; }
.playbill-tag { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-light); margin-bottom: 8px; }
.playbill-info h3 { color: var(--white); margin-bottom: 4px; font-size: 1.2rem; }
.playbill-info p { color: rgba(255,255,255,0.68); margin: 0; font-size: 0.92rem; }

@media (max-width: 560px) {
  .playbill-row { gap: 18px; padding: 22px 0; }
  .playbill-date { width: 64px; padding-right: 16px; }
  .playbill-day { font-size: 2rem; }
  .playbill-info h3 { font-size: 1.05rem; }
}

/* ---------- Gemeinde-Siegel-Auswahl ---------- */
.gemeinde-seals { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 18px; margin-bottom: 50px; }
.gemeinde-seal {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100px; padding: 6px; background: none; border: none; cursor: pointer; font-family: inherit;
}
.gemeinde-seal-medallion {
  position: relative; width: 80px; height: 80px; border-radius: 50%;
  background: var(--cream); display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 3px rgba(17,45,76,0.15), 0 1px 2px rgba(17,45,76,0.08);
  transition: transform 0.15s var(--ease), box-shadow 0.25s var(--ease);
}
.gemeinde-seal-medallion::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--hairline);
  transition: border-color 0.25s var(--ease), border-width 0.25s var(--ease);
}
.gemeinde-seal-medallion img { position: relative; z-index: 1; width: 58%; height: 58%; object-fit: contain; }
.gemeinde-seal-name { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--navy); text-align: center; transition: color 0.25s var(--ease); }

.gemeinde-seal:hover .gemeinde-seal-medallion { transform: translateY(-3px); box-shadow: inset 0 1px 3px rgba(17,45,76,0.15), 0 4px 10px rgba(17,45,76,0.14); }
.gemeinde-seal:active .gemeinde-seal-medallion { transform: scale(0.9); transition-duration: 0.1s; }

.gemeinde-seal::after {
  content: ''; position: absolute; left: 50%; bottom: -14px; opacity: 0;
  width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid var(--orange);
  transform: translateX(-50%) scaleY(0); transform-origin: top; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.gemeinde-seal.is-active .gemeinde-seal-medallion { box-shadow: inset 0 1px 4px rgba(17,45,76,0.2), 0 3px 10px rgba(242,167,31,0.3); }
.gemeinde-seal.is-active .gemeinde-seal-medallion::before { border-color: var(--orange); border-width: 2px; }
.gemeinde-seal.is-active .gemeinde-seal-name { color: var(--orange-dark); }
.gemeinde-seal.is-active::after { opacity: 1; transform: translateX(-50%) scaleY(1); }

.gemeinde-panels { max-width: 820px; margin: 0 auto; }
.gemeinde-panel { position: relative; overflow: hidden; }
/* Grosses, dezentes Wappen-Wasserzeichen je Gemeinde - das echte Wappen bleibt sonst in
   der kleinen Siegel-Auswahl fast unsichtbar. Analog zum .section-watermark-Muster
   (Brand-Mark in .section--navy), hier aber als Bild statt currentColor-SVG, da
   crest_path ein Upload/Platzhalter-Bild ist, kein inline-faerbbares SVG. */
.gemeinde-panel-watermark {
  position: absolute; z-index: 0; top: -10%; right: -8%;
  width: clamp(220px, 38vw, 420px); height: auto;
  opacity: 0.2; filter: saturate(0.75); pointer-events: none;
}
.gemeinde-panel > *:not(.gemeinde-panel-watermark) { position: relative; z-index: 1; }
.gemeinde-panel .meta-row { font-size: 0.94rem; color: var(--slate); display: flex; align-items: flex-start; gap: 8px; margin-bottom: 30px; }
.gemeinde-panel .meta-row svg { flex-shrink: 0; margin-top: 2px; }
.gemeinde-map { width: 100%; height: 240px; border: 1px solid var(--hairline); }
.gemeinde-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.15) contrast(1.02); }
.gemeinde-map-link { display: inline-block; margin-top: 10px; font-size: 0.8rem; color: var(--slate); text-decoration: underline; text-underline-offset: 3px; }
.gemeinde-map-link:hover { color: var(--orange-dark); }
.gemeinde-next-event {
  display: flex; align-items: flex-start; gap: 8px; font-size: 0.9rem; color: var(--navy);
  background: var(--cream); border: 1px solid var(--hairline); padding: 14px 18px; margin: 26px 0 16px;
  text-decoration: none; transition: border-color 0.3s var(--ease);
}
.gemeinde-next-event:hover { border-color: var(--orange); }
.gemeinde-next-event svg { flex-shrink: 0; margin-top: 2px; color: var(--orange-dark); }
.gemeinde-website-link { font-size: 0.85rem; color: var(--slate); text-decoration: underline; text-underline-offset: 3px; }
.gemeinde-website-link:hover { color: var(--orange-dark); }

@media (max-width: 560px) {
  .gemeinde-seals { gap: 20px 12px; margin-bottom: 40px; }
  .gemeinde-seal { width: 78px; }
  .gemeinde-seal-medallion { width: 62px; height: 62px; }
  .gemeinde-seal-name { font-size: 0.8rem; }
}

/* ---------- Utility ---------- */
.center-cta { text-align: center; margin-top: 50px; }
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.stat-row { display: flex; gap: 50px; flex-wrap: wrap; }
.stat { }
.stat .num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); color: var(--orange-light); font-weight: 700; }
.stat .label { font-size: 0.86rem; color: rgba(255,255,255,0.65); margin-top: 4px; }

.section-watermark {
  position: absolute; z-index: 0; right: -4%; bottom: -8%;
  width: clamp(220px, 32vw, 420px); height: auto; color: var(--white);
  opacity: 0.05; pointer-events: none;
}
.section-watermark svg { width: 100%; height: 100%; display: block; }
.section--navy > .container { position: relative; z-index: 1; }

.legal-content h2 { margin-top: 1.6em; }
.legal-content ul { color: var(--slate); padding-left: 1.2em; }

/* ---------- Bildnachweis (dezente Urheber-Angabe unten rechts im Bild) ----------
   .media-frame ist ein schlichter position:relative-Wrapper fuer Einzelbilder,
   die selbst kein eigener Positionierungskontext sind (Detailseiten-Titelbild,
   Masonry-Galerie). Elemente, die bereits position:relative/absolute sind
   (.hero-slide, .leadership-photo), bekommen .media-credit direkt als Kind. */
.media-frame { position: relative; }
/* Titelbilder (News-/Veranstaltungs-Detail, Lehrkraft-Profil) haben keine feste Breite -
   ist die Originaldatei schmaler als der Container, sitzt ein reines display:block-Bild
   sonst links statt zentriert. Bei den Masonry-Galeriebildern (width:100% via .masonry img)
   ist das ein No-op, dort bleibt kein Platz zum Zentrieren. */
.media-frame > img { margin: 0 auto; }
.media-credit {
  position: absolute; right: 8px; bottom: 6px; z-index: 2;
  font-size: 0.62rem; letter-spacing: 0.01em; color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 1px 10px rgba(0,0,0,0.5);
  pointer-events: none; user-select: none;
}
.hero-slide .media-credit { right: 16px; bottom: 14px; }

/* ---------- Prose (Rich-Text-Inhalte aus dem CMS) ---------- */
/* max-width in ch statt px: begrenzt die Zeilenlaenge auf ca. 65-70 Zeichen fuer
   angenehmes Lesen, unabhaengig von der Breite des umgebenden Containers (der z.B.
   bei News-Detail bewusst breiter bleibt, damit das Titelbild darueber grosszuegig
   wirkt - nur der Lesetext selbst wird schmaler). */
.prose { font-size: 1.06rem; color: var(--ink); max-width: 68ch; }
/* Nur zentrieren, wenn .prose direkt im .container steht (News-/Veranstaltungs-/
   Lehrkraft-/Fach-Detailseiten) - dort sitzt kein linksbuendiger Titel in derselben
   Spalte, ein volltbreites Bild/Map steht direkt darueber, und ohne Zentrierung
   klaffte rechts eine grosse, unbeabsichtigt wirkende Luecke. Bewusst NICHT bei der
   Musikschulleitung (Grussword) und den Gemeinde-Panels, wo .prose unter einer
   linksbuendigen Ueberschrift in derselben Spalte steht - dort wuerde Zentrieren die
   Ueberschrift und den Text neu gegeneinander verschieben, statt es zu beheben. */
.container > .prose { margin-inline: auto; }
.prose p { margin: 0 0 1.1em; }
.prose h3, .prose h4 { margin-top: 1.4em; }
.prose ul, .prose ol { color: var(--ink); padding-left: 1.3em; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.4em; }
.prose a { color: var(--orange-dark); text-decoration: underline; text-underline-offset: 2px; }
.prose blockquote { border-left: 3px solid var(--orange); margin: 1.4em 0; padding: 0.2em 0 0.2em 1.2em; font-family: var(--font-accent); font-style: italic; font-size: 1.08em; color: var(--slate); }
.prose strong, .prose b { color: var(--navy); }

::selection { background: var(--orange); color: var(--white); }