/* Musikschule Hofmann – Stylesheet
   Ersetzt das alte tabellenbasierte format.css / lightbox.css.
   Farben sind an das bestehende Logo/Branding angelehnt (Gelb/Gruen/Creme). */

:root {
  --color-bg: #fdf1d3;
  --color-surface: #ffffff;
  --color-primary: #ffc333;
  --color-primary-dark: #8a6a00;
  --color-accent: #4c9a2a;
  --color-text: #2b2b2b;
  --color-text-muted: #5c5c5c;
  --color-border: #e7dfd0;
  --radius: 14px;
  --shadow: 0 4px 18px rgba(43, 43, 43, 0.08);
  --font-sans: "Segoe UI", Verdana, Arial, sans-serif;
  --max-width: 1080px;

  /* Text auf gelbem Grund (Buttons, aktive Navigation): immer dunkel,
     auch im Dunkelmodus, weil Gelb hell bleibt. */
  --color-on-primary: #2b2b2b;
  /* Notenlinien im Logo */
  --color-staff: #8a8a8a;

  /* Bunte Akzente, angelehnt an den alten Musikgarten-Raum (roter Schrank,
     bunte Bilderrahmen). Sparsam einsetzen: Streifen, Symbole, Kacheln. */
  --c-red: #e4572e;
  --c-orange: #f08a24;
  --c-green: #5aa832;
  --c-blue: #2f86c9;
  --c-violet: #8b5fbf;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #201c16;
    --color-surface: #2b261e;
    --color-primary: #ffd166;
    --color-primary-dark: #ffc333;
    --color-accent: #7bc95a;
    --color-text: #f2ede3;
    --color-text-muted: #c9c1b1;
    --color-border: #3c352a;
    --shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    --color-staff: #7d7466;
    --c-red: #ff7a57;
    --c-orange: #ffa552;
    --c-green: #7bc95a;
    --c-blue: #5aa9e6;
    --c-violet: #b08ae0;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
}

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

a { color: var(--color-primary-dark); }
a:hover { text-decoration: underline; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Logo: "Musikschule" wie eine Vortragsbezeichnung ueber der Notenzeile,
   darunter Violinschluessel + Name auf fuenf Notenlinien. Reiner Text. */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-text);
  text-decoration: none;
}
.logo:hover { text-decoration: none; }

/* "Musikschule" kinderfreundlich: runde Schrift, jeder Buchstabe in einer
   Akzentfarbe und leicht gekippt – angelehnt an den bunten Schriftzug der
   alten Seite, aber als echter Text (scharf, passt zu hell/dunkel).
   Die Einzelbuchstaben sind aria-hidden, Screenreader lesen das
   unsichtbare "Musikschule" davor. */
.logo-kicker {
  font-family: "Fredoka", var(--font-sans);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0 0 4px 42px;
}

.logo-letters span {
  display: inline-block;
  color: var(--c-red);
  transform: rotate(-6deg);
}
.logo-letters span:nth-child(even) { transform: translateY(-2px) rotate(5deg); }
.logo-letters span:nth-child(5n+2) { color: var(--c-orange); }
.logo-letters span:nth-child(5n+3) { color: var(--c-green); }
.logo-letters span:nth-child(5n+4) { color: var(--c-blue); }
.logo-letters span:nth-child(5n+5) { color: var(--c-violet); }

/* Nur für Screenreader sichtbar */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.logo-staff {
  display: inline-flex;
  align-items: center;
  background: repeating-linear-gradient(to bottom,
      var(--color-staff) 0 1px, transparent 1px 7px)
    left center / 100% 29px no-repeat;
}

.logo-clef {
  font-family: "Noto Music", "Segoe UI Symbol", "Apple Symbols", "Symbola", "DejaVu Sans", serif;
  font-size: 32px;
  line-height: 1;
  margin: 0 4px 0 2px;
}

.logo-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  line-height: 1.15;
  background: var(--color-bg);
  padding: 0 8px;
  margin: 0 18px 0 6px;
}

/* Schlussstrich am Ende der Notenzeile */
.logo-staff::after {
  content: "";
  width: 4px;
  height: 29px;
  border-left: 1px solid var(--color-staff);
  border-right: 3px solid var(--color-staff);
}

.site-header nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.site-header nav a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  color: var(--color-text);
}

.site-header nav a:hover,
.site-header nav a[aria-current="page"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* Hero (Startseite): gelbes Band, in hell und dunkel gleich.
   Rechts ein Foto, das mit dem Gelb multipliziert wird (weisse Wand wird
   gelb). Die Maske haengt am Foto selbst, dadurch laeuft es bei jeder
   Fensterbreite ohne harte Kante nach links ins Gelb aus. */
.hero {
  position: relative;
  isolation: isolate;
  padding: 0; /* ist ein <section>, der allgemeine Abschnittsabstand gilt hier nicht */
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(55%, 820px);
  background: url("../Bilder/piano_hero.jpg") right center / cover no-repeat;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 45%);
  mask-image: linear-gradient(to right, transparent, #000 45%);
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 1; }

/* Kompakt gehalten, damit das Band nicht den ganzen ersten Bildschirm
   einnimmt. Unten 60px, weil dort die Welle (36px) aufliegt. */
.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 36px 20px 60px;
}

.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin: 0 0 8px;
}

.hero p {
  font-size: 1.05rem;
  max-width: 46em;
  margin: 0 0 20px;
  opacity: 0.85;
}

/* Page-Hero (Unterseiten): schmales gelbes Band wie auf der Startseite,
   in hell und dunkel gleich. Rechts ein Notenausschnitt, der mit dem Gelb
   multipliziert wird und nach links ausläuft, unten eine Welle. Vor dem
   Titel eine Note in der Farbe der Seite (--page-color). */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.page-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 28px;
  z-index: 2;
  background: var(--color-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C180 2 360 2 540 22S900 42 1080 22 1320 2 1440 22V40Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C180 2 360 2 540 22S900 42 1080 22 1320 2 1440 22V40Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.page-hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(60%, 760px);
  background: url("../Bilder/noten_band.jpg") right 40% / cover no-repeat;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 50%);
  mask-image: linear-gradient(to right, transparent, #000 50%);
  pointer-events: none;
}

.page-hero .wrap { position: relative; z-index: 1; padding: 28px 20px 48px; }

.page-hero h1 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  margin: 0;
}

/* Note in weißem Kreis, damit jede Seitenfarbe auf dem Gelb gut lesbar ist */
.page-hero h1::before {
  content: "♪";
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  color: var(--page-color, var(--c-orange));
  font-size: 0.85em;
  line-height: 1;
}

.button {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  text-decoration: none;
  padding: 12px 26px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  border: none;
  cursor: pointer;
  font-size: 1rem;
}
.button:hover { filter: brightness(0.94); }

.button.accent { background: var(--color-accent); color: #fff; }
.button.accent:hover { opacity: 0.9; color: #fff; }

/* Hinweis-Badge im Hero (Ticker-Ersatz) */
.hero-badge {
  display: inline-block;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(43, 43, 43, 0.12);
  color: var(--color-on-primary);
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 18px;
}
.hero-badge a { color: var(--color-on-primary); text-decoration: underline; }

/* auf dem gelben Band waere ein gelber Button unsichtbar */
.hero .button { background: var(--color-on-primary); color: #fff; }

/* Breit: Text bleibt links, damit er nicht uebers Foto laeuft */
@media (min-width: 901px) {
  .hero-badge, .hero h1, .hero p { max-width: 640px; }
}

/* Schmal: kein Foto, sonst liegt es unter dem Text */
@media (max-width: 900px) {
  .hero::after { display: none; }
}

/* Sections */
main { padding-bottom: 40px; }

section { padding: 48px 0; }
section + section { border-top: 1px solid var(--color-border); }

h2 {
  font-size: 1.6rem;
  margin: 0 0 20px;
  color: var(--color-text);
}

h3 { color: var(--color-primary-dark); }

/* Startseite: jede Abschnittsüberschrift bekommt eine Note in eigener Farbe.
   Rechtstexte und Unterseiten bleiben bewusst schlicht. */
:is(.intro, .ages, .instruments, .offers, .contact-cta) h2::before {
  content: "♪";
  margin-right: 0.35em;
  color: var(--note-color, var(--c-red));
}
.ages h2::before { --note-color: var(--c-violet); }
.instruments h2::before { --note-color: var(--c-blue); }
.offers h2::before { --note-color: var(--c-green); }
.contact-cta h2::before { --note-color: var(--c-orange); }

.intro p, .offers p, .lead { color: var(--color-text-muted); max-width: 68em; }

/* Altersgruppen (Startseite): drei Einstiegskarten, Kinder leicht hervorgehoben */
.age-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.age-card {
  --age-color: var(--c-orange);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 5px solid var(--age-color);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}

.age-kinder {
  background: color-mix(in srgb, var(--age-color) 8%, var(--color-surface));
}
.age-jugend { --age-color: var(--c-violet); }
.age-erwachsene { --age-color: var(--c-blue); }

.age-card .age-label {
  align-self: flex-start;
  margin: 0 0 10px;
  padding: 3px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--age-color) 18%, var(--color-surface));
  color: var(--color-text);
  font-weight: 700;
  font-size: 0.85rem;
}

.age-card h3 {
  margin: 0 0 8px;
  font-size: 1.3rem;
  color: var(--color-text);
}

.age-card p { margin: 0 0 16px; color: var(--color-text-muted); }

.age-link {
  margin-top: auto;
  font-weight: 700;
  text-decoration: none;
}
.age-link:hover { text-decoration: underline; }

/* Instrumente: nach Gruppen, jede Gruppe in einer Akzentfarbe (hell getönt) */
.instrument-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.instrument-group {
  --group-color: var(--c-red);
  background: color-mix(in srgb, var(--group-color) 10%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--group-color) 30%, var(--color-border));
  border-radius: var(--radius);
  padding: 16px 18px 18px;
}

.ig-tasten    { --group-color: var(--c-red); }
.ig-gitarre   { --group-color: var(--c-orange); }
.ig-streicher { --group-color: var(--c-violet); }
.ig-blas      { --group-color: var(--c-blue); }
.ig-schlag    { --group-color: var(--c-green); }
.ig-theorie   { --group-color: var(--color-primary); }

/* Kachel ohne Instrumentenliste (Musiklehre): kurzer Text statt Chips */
.instrument-group p { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; }

.instrument-group h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 1.05rem;
  color: var(--color-text);
}

.ig-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--group-color) 28%, var(--color-surface));
  font-size: 1.25rem;
  line-height: 1;
}

.instrument-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.instrument-group li {
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--group-color) 40%, var(--color-border));
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 600;
  font-size: 0.92rem;
}

/* Angebote / Karten */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}

.card h3 { margin-top: 0; }

/* Angebotskarten: oben ein farbiger Streifen, reihum in den Akzentfarben */
.offer-grid .card { border-top: 5px solid var(--card-color, var(--c-red)); }
.offer-grid .card:nth-child(4n+2) { --card-color: var(--c-blue); }
.offer-grid .card:nth-child(4n+3) { --card-color: var(--c-green); }
.offer-grid .card:nth-child(4n+4) { --card-color: var(--c-orange); }

.card .price {
  font-weight: 700;
  color: var(--color-accent);
}

/* Kontakt-CTA */
.contact-cta { text-align: center; }
.contact-cta p { font-size: 1.15rem; }
.contact-cta a { font-weight: 700; }

/* Lehrer-Team */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.team-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  text-align: center;
}

.team-card img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 12px;
  border: 3px solid var(--color-bg);
  box-shadow: 0 0 0 1px var(--color-border);
}

.team-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* zweite Textzeile (z. B. Auszeichnung) etwas abgesetzt und kleiner */
.team-card p + p { margin-top: 6px; font-size: 0.85rem; font-style: italic; }

/* nur die Website-Links unter dem Text, nicht die Foto-Links */
.team-card p ~ a { display: inline-block; margin-top: 6px; font-size: 0.85rem; }

/* Raeume-Galerie */
.room-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.room-gallery figure { margin: 0; }

.room-gallery img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.room-gallery figcaption {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* Preistabelle */
.price-table-wrap { overflow-x: auto; }

.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.price-table caption {
  text-align: left;
  font-weight: 700;
  padding: 4px 0 12px;
}

.price-table th, .price-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.price-table thead th {
  background: var(--color-bg);
  font-size: 0.95rem;
}

.price-table tbody tr:last-child td { border-bottom: none; }

.price-table td.amount { font-weight: 700; white-space: nowrap; }
.price-table td.note { color: var(--color-text-muted); font-size: 0.9rem; }

.price-hint {
  margin-top: 14px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Handy: Jede Tabellenzeile wird zu einer kleinen Karte (Unterrichtsform
   oben, darunter Kinder | Erwachsene, dann der Hinweis), damit nichts
   seitlich scrollt. Die Beschriftung kommt aus data-label der Preiszellen.
   Der Tabellenkopf bleibt für Screenreader im Code, ist aber unsichtbar. */
@media (max-width: 640px) {
  .price-table,
  .price-table tbody,
  .price-table caption { display: block; }

  .price-table caption { padding: 14px 16px 4px; }

  .price-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .price-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
  }
  .price-table tbody tr:last-child { border-bottom: none; }

  .price-table th,
  .price-table td { padding: 0; border-bottom: none; }

  .price-table tbody th { grid-column: 1 / -1; }

  .price-table td.amount::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-text-muted);
  }

  .price-table td.note { grid-column: 1 / -1; }
  .price-table td.note:empty { display: none; }
}

/* Kontaktformular */
.contact-form {
  display: grid;
  gap: 16px;
  max-width: 32em;
}

.contact-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.contact-form textarea { resize: vertical; min-height: 8em; }

/* Spamschutz-Feld (Honeypot): für Menschen unsichtbar, nicht per Tab erreichbar */
.contact-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Rückmeldung nach dem Absenden (Anmeldung.htm?status=…) */
.form-status {
  max-width: 32em;
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--color-text);
}
.form-status.is-ok {
  background: color-mix(in srgb, var(--c-green) 14%, var(--color-surface));
  border-color: color-mix(in srgb, var(--c-green) 45%, var(--color-border));
}
.form-status.is-fehler {
  background: color-mix(in srgb, var(--c-red) 12%, var(--color-surface));
  border-color: color-mix(in srgb, var(--c-red) 45%, var(--color-border));
}

/* Kontaktdaten */
.contact-details { margin: 0; }
.contact-details dt { font-weight: 700; margin-top: 14px; }
.contact-details dt:first-child { margin-top: 0; }
.contact-details dd { margin: 2px 0 0; color: var(--color-text-muted); }

.contact-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}

/* Karte (Kontakt): Platzhalter in Kartengroesse, damit beim Laden nichts springt */
.map-consent {
  height: 400px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-muted);
}
.map-consent p { max-width: 36em; margin: 0; }
.map-consent.is-loaded { padding: 0; overflow: hidden; }
.map-consent iframe { width: 100%; height: 100%; border: 0; }

/* Rechtstexte (Impressum, Datenschutz) */
.legal { max-width: 68em; }
.legal h2 { font-size: 1.25rem; margin-top: 32px; }
.legal h2:first-of-type { margin-top: 0; }
.legal ul { color: var(--color-text-muted); }
.legal p { color: var(--color-text-muted); }
.legal address { font-style: normal; color: var(--color-text); margin: 0 0 16px 15px; }
.legal h3 { font-size: 1.05rem; margin: 22px 0 6px; }

/* Datenschutz: vor der ersten Überschrift stehen Einleitungsabsätze */
.page-datenschutz .legal h2:first-of-type { margin-top: 32px; }

/* Verspielte Details: runde Schrift, Welle unter dem gelben Band,
   schwebende Noten, farbige Wellenlinien zwischen den Abschnitten. */
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

h1, h2, h3, .button, .site-header nav a, .age-label {
  font-family: "Fredoka", var(--font-sans);
  font-weight: 600;
}

/* Welle: Streifen in Seitenfarbe, per Maske wellenförmig ausgeschnitten.
   Liegt über dem Foto (z-index), damit auch das Foto in der Welle endet. */
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 36px;
  z-index: 2;
  background: var(--color-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C180 2 360 2 540 22S900 42 1080 22 1320 2 1440 22V40Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C180 2 360 2 540 22S900 42 1080 22 1320 2 1440 22V40Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  pointer-events: none;
}

/* Noten schweben zwischen Text und Foto (Text ist max. 640px breit) */
.hero-notes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-notes span {
  position: absolute;
  font-family: "Noto Music", "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", sans-serif;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transform: rotate(var(--r, 0deg));
  animation: note-float 6s ease-in-out infinite;
}

.hero-notes span:nth-child(1) { left: 700px; top: 10%; font-size: 3.2rem; color: var(--c-red);    --r: -12deg; }
.hero-notes span:nth-child(2) { left: 775px; top: 42%; font-size: 2.6rem; color: var(--c-blue);   --r: 8deg;  animation-delay: -1.5s; }
.hero-notes span:nth-child(3) { left: 715px; top: 70%; font-size: 2.8rem; color: var(--c-violet); --r: -6deg; animation-delay: -3s; }
.hero-notes span:nth-child(4) { left: 845px; top: 18%; font-size: 2.2rem; color: #fff;            --r: 10deg; animation-delay: -4.5s; }
.hero-notes span:nth-child(5) { left: 830px; top: 58%; font-size: 2.8rem; color: var(--c-green);  --r: -10deg; animation-delay: -2s; }

@keyframes note-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-notes span { animation: none; }
}

/* Schmal: Der Text läuft über die ganze Breite. Die Noten liegen deshalb
   hinter dem Text (z-index -1), blasser und an den rechten Rand bzw.
   neben den Button gerückt – nur als Hintergrund-Deko. Die Positionen oben
   für den Desktop bleiben unverändert. */
@media (max-width: 900px) {
  .hero-notes { z-index: -1; }
  .hero-notes span { opacity: 0.35; }
  .hero-notes span:nth-child(1) { left: auto; right: 4%;  top: 30%;                 font-size: 3.4rem; }
  .hero-notes span:nth-child(2) { left: auto; right: 30%; top: auto; bottom: 16%;  font-size: 2.2rem; opacity: 0.5; }
  .hero-notes span:nth-child(3) { left: auto; right: 8%;  top: auto; bottom: 12%;  font-size: 2.6rem; opacity: 0.5; }
  .hero-notes span:nth-child(4) { display: none; }
  .hero-notes span:nth-child(5) { left: auto; right: 18%; top: 52%;                 font-size: 2rem; }
}

/* Abschnitte: statt grauer Linie eine kleine farbige Wellenlinie */
section + section {
  position: relative;
  border-top: none;
}

section + section::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 96px;
  height: 14px;
  transform: translateX(-50%);
  background: var(--c-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 14'%3E%3Cpath d='M3 7c6.5-6 12.5-6 19 0s12.5 6 19 0 12.5-6 19 0 12.5 6 19 0 10-5 14-3' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 14'%3E%3Cpath d='M3 7c6.5-6 12.5-6 19 0s12.5 6 19 0 12.5-6 19 0 12.5 6 19 0 10-5 14-3' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Wellenlinie in der Farbe der Note des folgenden Abschnitts */
.ages::before { background: var(--c-violet); }
.instruments::before { background: var(--c-blue); }
.offers::before { background: var(--c-green); }
.contact-cta::before { background: var(--c-orange); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 24px 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.site-footer a { color: var(--color-text-muted); }
.site-footer nav a + a { margin-left: 8px; }

@media (max-width: 640px) {
  .hero-inner { padding: 28px 20px 52px; }
  .map-consent { height: 320px; }
  section { padding: 36px 0; }
  .page-hero .wrap { padding: 22px 20px 40px; }
}

/* ===== Seitenfarben =====
   Jede Seite hat eine eigene Akzentfarbe über die Klasse am <body>.
   Dieselben Farben nutzt die Navigation, dadurch passt alles zusammen. */
body              { --page-color: var(--c-orange); }
.page-start       { --page-color: var(--color-primary); }
.page-lehrer      { --page-color: var(--c-red); }
.page-raeume      { --page-color: var(--c-orange); }
.page-preise      { --page-color: var(--c-green); }
.page-anmeldung   { --page-color: var(--c-blue); }
.page-kontakt     { --page-color: var(--c-violet); }
.page-impressum,
.page-datenschutz { --page-color: var(--c-blue); }

/* Navigation: jeder Punkt mit farbigem Unterstrich, aktive Seite getönt */
.site-header nav a[href="index.htm"]     { --nav-color: var(--color-primary); }
.site-header nav a[href="Lehrer.htm"]    { --nav-color: var(--c-red); }
.site-header nav a[href="Raeume.htm"]    { --nav-color: var(--c-orange); }
.site-header nav a[href="Preise.htm"]    { --nav-color: var(--c-green); }
.site-header nav a[href="Anmeldung.htm"] { --nav-color: var(--c-blue); }
.site-header nav a[href="Kontakt.htm"]   { --nav-color: var(--c-violet); }

.site-header nav a {
  text-decoration: underline;
  text-decoration-color: var(--nav-color, transparent);
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
}

.site-header nav a:hover,
.site-header nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--nav-color, var(--color-primary)) 30%, var(--color-bg));
  color: var(--color-text);
}

/* Unterseiten: Abschnittsüberschriften mit Note in der Seitenfarbe
   (die Startseite hat eigene Farben je Abschnitt, Rechtstexte keine) */
body:not(.page-start) > main > section > .wrap:not(.legal) > h2::before {
  content: "♪";
  margin-right: 0.35em;
  color: var(--page-color);
}

body:not(.page-start) section + section::before { background: var(--page-color); }

/* Karten (z. B. Kontaktdaten): Streifen in der Seitenfarbe.
   Die Angebotskarten der Startseite behalten ihre eigenen Farben. */
.card { border-top: 5px solid var(--card-color, var(--page-color)); }

/* Lehrer: Streifen und Fotorahmen reihum in den Akzentfarben */
.team-card {
  --card-color: var(--c-red);
  border-top: 5px solid var(--card-color);
}
.team-card:nth-child(5n+2) { --card-color: var(--c-blue); }
.team-card:nth-child(5n+3) { --card-color: var(--c-green); }
.team-card:nth-child(5n+4) { --card-color: var(--c-orange); }
.team-card:nth-child(5n+5) { --card-color: var(--c-violet); }

.team-card img {
  border-color: var(--color-surface);
  box-shadow: 0 0 0 3px var(--card-color);
}

/* Räume: Fotos als kleine Karten mit farbigem Streifen */
.room-gallery figure {
  --card-color: var(--c-orange);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 5px solid var(--card-color);
  border-radius: var(--radius);
  padding: 10px 10px 12px;
  box-shadow: var(--shadow);
}
.room-gallery figure:nth-child(4n+2) { --card-color: var(--c-blue); }
.room-gallery figure:nth-child(4n+3) { --card-color: var(--c-green); }
.room-gallery figure:nth-child(4n+4) { --card-color: var(--c-violet); }

.room-gallery img { border-radius: 8px; box-shadow: none; }
.room-gallery figcaption { font-weight: 600; color: var(--color-text); }

/* Preise: Tabellenkopf in der Seitenfarbe getönt */
.price-table thead th {
  background: color-mix(in srgb, var(--page-color) 20%, var(--color-surface));
}
.price-table caption::before { content: "♪ "; color: var(--page-color); }

/* Anmeldung: Formular als Karte */
.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 5px solid var(--page-color);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.contact-form input:focus,
.contact-form textarea:focus { outline-color: var(--page-color); }

/* Footer: kleiner bunter Streifen statt grauer Linie */
.site-footer {
  position: relative;
  border-top: none;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 216px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 2px;
  /* Dieselben sechs Farben in derselben Reihenfolge wie die Navigation oben
     (Startseite, Lehrer, Räume, Preise, Anmeldung, Kontakt) */
  background: linear-gradient(to right,
    var(--color-primary) 0 16.667%, var(--c-red) 16.667% 33.333%,
    var(--c-orange) 33.333% 50%, var(--c-green) 50% 66.667%,
    var(--c-blue) 66.667% 83.333%, var(--c-violet) 83.333% 100%);
}

/* ===== Logo in einer Zeile: "𝄞 Musikschule Peter Hofmann" =====
   Bei jeder Breite nebeneinander statt übereinander. Unter 1100px kompakt
   (Navigation steht dort ohnehin darunter), ab 1100px groß neben der
   Navigation, unter 380px noch eine Stufe kleiner. Ohne HTML-Änderung:
   .logo-staff wird per display: contents aufgelöst, die Teile per order
   sortiert. Größen über Variablen: --logo-schrift, --logo-schluessel,
   Notenlinien --staff-abstand (Abstand zweier Linien) und --staff-hoehe
   (= 4 × Abstand + 1px). */
.logo {
  --logo-schrift: 1.15rem;
  --logo-schluessel: 32px;
  --staff-abstand: 6px;
  --staff-hoehe: 25px;
  flex-direction: row;
  align-items: center;
  background: repeating-linear-gradient(to bottom,
      var(--color-staff) 0 1px, transparent 1px var(--staff-abstand))
    left center / 100% var(--staff-hoehe) no-repeat;
}

.logo-staff { display: contents; }

.logo-clef {
  order: 1;
  font-size: var(--logo-schluessel);
  margin: 0 4px 0 2px;
}

.logo-kicker {
  order: 2;
  margin: 0;
  padding: 0 4px 0 6px;
  font-size: var(--logo-schrift);
  background: var(--color-bg);
}

.logo-name {
  order: 3;
  font-size: var(--logo-schrift);
  letter-spacing: 0.02em;
  padding: 0 6px 0 4px;
  margin: 0 12px 0 0;
}

.logo-staff::after {
  order: 4;
  height: var(--staff-hoehe);
}

/* Violinschlüssel ragt nach oben über die Notenzeile: etwas mehr Luft */
.header-inner { padding-top: 18px; padding-bottom: 18px; }

/* Breit: groß neben der Navigation */
@media (min-width: 1100px) {
  .logo {
    --logo-schrift: 1.7rem;
    --logo-schluessel: 42px;
    --staff-abstand: 9px;
    --staff-hoehe: 37px;
  }
  .logo-kicker { padding: 0 6px 0 8px; }
  .logo-name { letter-spacing: 0.04em; padding: 0 10px 0 6px; margin-right: 22px; }
}

/* Sehr schmale Handys (z. B. 360px) */
@media (max-width: 380px) {
  .logo {
    --logo-schrift: 1rem;
    --logo-schluessel: 28px;
    --staff-abstand: 5px;
    --staff-hoehe: 21px;
  }
  .logo-name { margin-right: 8px; }
}

/* ===== Bildansicht (Lehrer- und Raumfotos, js/bildansicht.js) =====
   Großes Bild in einem <dialog> über der abgedunkelten Seite, mit
   Beschriftung und runden Knöpfen zum Schließen und Blättern. */
html:has(dialog.bildansicht[open]) { overflow: hidden; }

.bildansicht {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 1000px);
  max-height: 92vh;
  overflow: visible;
}

.bildansicht[open] { animation: ba-in 0.18s ease-out; }

.bildansicht::backdrop {
  background: rgba(20, 16, 10, 0.72);
  backdrop-filter: blur(4px);
}

@keyframes ba-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bildansicht[open] { animation: none; }
}

.bildansicht figure {
  margin: 0;
  background: var(--color-surface);
  border-top: 5px solid var(--page-color);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.bildansicht img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 1000px);
  max-height: calc(92vh - 90px);
  margin: 0 auto;
}

.bildansicht figcaption {
  padding: 10px 18px 14px;
  text-align: center;
}

.bildansicht figcaption strong {
  display: block;
  font-family: "Fredoka", var(--font-sans);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-text);
}

.bildansicht figcaption span {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.bildansicht figcaption span:empty { display: none; }

.ba-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.ba-btn:hover { background: var(--color-primary); color: var(--color-on-primary); }
.ba-btn:focus-visible { outline: 3px solid var(--page-color); outline-offset: 2px; }

.ba-close { top: -14px; right: -14px; }
.ba-prev  { top: 50%; left: -22px;  transform: translateY(-50%); }
.ba-next  { top: 50%; right: -22px; transform: translateY(-50%); }
.ba-single .ba-prev,
.ba-single .ba-next { display: none; }

/* Schmal: Knöpfe ins Bild hinein, damit sie nicht über den Rand ragen */
@media (max-width: 640px) {
  .ba-close { top: 8px; right: 8px; }
  .ba-prev  { left: 8px; }
  .ba-next  { right: 8px; }
  .ba-btn   { width: 40px; height: 40px; opacity: 0.92; }
}