/* =====================================================================
   noten.css — Notenarchiv: Navigations-Dropdown, Notenseite, Ansicht.
   styles.css bleibt unangetastet; alles hier ergaenzt nur.
   Farben ausschliesslich aus den vorhandenen Tokens
   (--paper, --paper-2, --ink, --ink-soft, --brick, --wood, --brass, --line).
   Abstufungen ueber color-mix, damit keine neuen Festfarben entstehen.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Dropdown "Noten" in der Hauptnavigation
   Die Navigation ist eine flache .nav mit blanken <a>; der neue Punkt
   ist ein <div class="nav-noten"> mit Button + Menue.
   --------------------------------------------------------------- */

/* Mit dem zehnten Punkt rutschte "Kontakt" in eine zweite Zeile.
   Gemessen im Seitenkopf: .wrap ist 1140 px breit, abzueglich 2x50 px
   Innenabstand bleiben 1040 px; davon gehen Logo (132 px) und der
   Flex-Abstand (20 px) ab — der Navigation bleiben 888 px. Mit dem
   Abstand von 1.4rem braucht sie 923 px, also 35 px zu viel.
   1rem statt 1.4rem spart ueber neun Zwischenraeume 72 px und bringt
   sie auf 851 px. flex-grow sorgt dafuer, dass sie den Platz auch
   wirklich zugeteilt bekommt statt an der eigenen Inhaltskante
   umzubrechen; flex-end haelt die Links wie bisher rechtsbuendig.
   Nur ab 720 px — darunter ist die Navigation die Hamburger-Spalte.
   (Regel steht hier statt in styles.css, die unangetastet bleibt.) */
@media (min-width: 720px) {
  .site-header .nav { flex: 1 1 auto; justify-content: flex-end; gap: 1rem; }
}

.nav-noten { position: relative; display: inline-flex; align-items: center; }

.nav-noten-toggle {
  display: inline-flex; align-items: center; gap: .4em;
  margin: 0; padding: 0; border: 0; background: none;
  font-family: inherit; font-size: var(--fs-small); font-weight: 600;
  color: var(--ink-soft); cursor: pointer;
  transition: color .18s ease;
}
.nav-noten-toggle:hover,
.nav-noten-toggle[aria-expanded="true"],
.nav-noten.is-current .nav-noten-toggle { color: var(--brick); }

.nav-noten-chevron {
  width: 0; height: 0; flex: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .18s ease;
}
.nav-noten-toggle[aria-expanded="true"] .nav-noten-chevron { transform: rotate(180deg); }

.noten-menu {
  position: absolute; top: calc(100% + .6rem); left: 50%; transform: translateX(-50%);
  z-index: 95; min-width: 15rem; margin: 0; padding: .35rem 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--ink) 18%, transparent);
}
.noten-menu[hidden] { display: none; }

/* .nav a traegt Basisstile — hier gezielt ueberschreiben. */
.site-header .noten-menu a {
  display: block; padding: .62rem 1.1rem;
  color: var(--ink-soft); font-size: var(--fs-small); font-weight: 600;
  text-decoration: none; border-radius: 0; white-space: nowrap;
}
.site-header .noten-menu a:hover,
.site-header .noten-menu a:focus-visible {
  background: color-mix(in srgb, var(--brick) 10%, transparent);
  color: var(--brick);
}

/* Mobil: kein schwebendes Menue, sondern ein aufklappbarer Abschnitt
   innerhalb der bestehenden Hamburger-Navigation. */
@media (max-width: 719px) {
  /* Die Mobilnavigation zentriert ihre Punkte (Inline-Stil im Seitenkopf
     setzt .site-header .nav{align-items:center}). Der neue Punkt richtet
     sich danach: Knopf mittig wie die uebrigen Links, das aufgeklappte
     Menue als Band ueber die volle Breite. */
  .nav-noten { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .nav-noten-toggle {
    width: auto; justify-content: center;
    padding: .85rem clamp(1.1rem, 5vw, 2.5rem);
  }
  .nav-noten-toggle:hover { background: color-mix(in srgb, var(--brick) 8%, transparent); }
  .noten-menu {
    position: static; transform: none; min-width: 0; width: 100%;
    border: 0; border-radius: 0; box-shadow: none; padding: 0;
    background: color-mix(in srgb, var(--ink) 4%, transparent);
  }
  .site-header .noten-menu a {
    padding: .72rem clamp(1.1rem, 5vw, 2.5rem);
    text-align: center;
  }
}

/* ---------------------------------------------------------------
   2. Notenseite
   --------------------------------------------------------------- */
.noten-intro { max-width: 62ch; color: var(--ink-soft); }

.noten-suche { margin-block: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); max-width: 34rem; }
.noten-suche label {
  display: block; margin-bottom: .4rem;
  font-size: var(--fs-small); font-weight: 700; color: var(--ink);
}
.noten-suche input {
  width: 100%; min-height: 46px; padding: .6rem .9rem;
  font-family: inherit; font-size: var(--fs-body);
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px;
}
.noten-suche input:focus-visible { outline: 2px solid var(--brick); outline-offset: 1px; }
.noten-suche input::placeholder { color: color-mix(in srgb, var(--ink-soft) 70%, transparent); }

/* Kategorieauswahl — vier Karten */
.noten-kats {
  display: grid; gap: .9rem; margin: 0 0 clamp(1.6rem, 1rem + 2vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding: 0; list-style: none;
}
.noten-kat {
  display: flex; flex-direction: column; gap: .25rem;
  min-height: 44px; padding: .95rem 1.1rem; width: 100%;
  text-align: left; text-decoration: none; cursor: pointer;
  font-family: inherit;
  background: var(--paper-2);
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 10px;
  transition: border-color .18s ease, background-color .18s ease;
}
.noten-kat:hover { border-color: var(--brass); }
.noten-kat:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
.noten-kat[aria-pressed="true"], .noten-kat.is-active {
  border-color: var(--brick); border-left-color: var(--brick);
  background: color-mix(in srgb, var(--brick) 8%, var(--paper-2));
}
.noten-kat__titel {
  font-family: "Fraunces", Georgia, serif; font-size: var(--fs-h3);
  font-weight: 600; color: var(--ink); line-height: 1.2;
}
.noten-kat__anzahl { font-size: var(--fs-small); color: var(--ink-soft); }

/* Blattliste */
.noten-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.noten-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  padding: .85rem 1rem;
  background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.noten-item:hover { border-color: var(--brass); }
.noten-item:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
.noten-item.is-fehlend { cursor: default; opacity: .72; }
.noten-item__text { flex: 1 1 18rem; min-width: 0; }
.noten-item__titel {
  font-family: "Fraunces", Georgia, serif; font-size: 1.08rem;
  font-weight: 600; color: var(--ink); line-height: 1.3;
  overflow-wrap: anywhere;
}
.noten-item__meta { margin-top: .15rem; font-size: var(--fs-small); color: var(--ink-soft); }
.noten-item__hinweis { color: var(--brick); font-weight: 600; }
.noten-item__aktionen { display: flex; gap: .5rem; flex: none; }

/* Schaltflaechen — Tippziel mindestens 44 px */
.noten-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: .5rem 1rem;
  font-family: inherit; font-size: var(--fs-small); font-weight: 700;
  color: var(--ink-soft); text-decoration: none; cursor: pointer;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.noten-btn:hover { color: var(--brick); border-color: var(--brick); }
.noten-btn:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
.noten-btn[disabled] { pointer-events: none; opacity: .5; }
.noten-btn--stark {
  background: var(--brick); border-color: var(--brick);
  color: var(--paper);
}
.noten-btn--stark:hover { background: var(--brick-deep); border-color: var(--brick-deep); color: var(--paper); }

.noten-leer, .noten-fehler {
  padding: 1.4rem 1.1rem; color: var(--ink-soft);
  background: var(--paper-2); border: 1px dashed var(--line); border-radius: 10px;
}
.noten-status { margin-bottom: 1rem; font-size: var(--fs-small); color: var(--ink-soft); }

/* ---------------------------------------------------------------
   3. Notenansicht (Overlay)
   --------------------------------------------------------------- */
.noten-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(.5rem, 2vw, 1.5rem);
  background: color-mix(in srgb, var(--ink) 62%, transparent);
}
.noten-modal[hidden] { display: none; }
.noten-modal__dialog {
  display: flex; flex-direction: column;
  width: min(1200px, 100%); height: min(92vh, 100%);
  background: var(--paper);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 40%, transparent);
  overflow: hidden;
}

/* Vergroesserte Ansicht: fuellt das ganze Fenster. Noten brauchen Flaeche. */
.noten-modal.is-gross { padding: 0; }
.noten-modal.is-gross .noten-modal__dialog {
  width: 100%; height: 100%;
  max-width: none; border: 0; border-radius: 0; box-shadow: none;
}
.noten-modal__kopf {
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 1rem; border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.noten-modal__titel {
  flex: 1; margin: 0;
  font-family: "Fraunces", Georgia, serif; font-size: var(--fs-h3);
  font-weight: 600; color: var(--ink); line-height: 1.25;
  overflow-wrap: anywhere;
}
.noten-modal__kopfbtn {
  flex: none; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 1.4rem; line-height: 1;
  color: var(--ink-soft); background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px;
  transition: color .18s ease, border-color .18s ease;
}
.noten-modal__kopfbtn:hover { color: var(--brick); border-color: var(--brick); }
.noten-modal__kopfbtn:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
.noten-modal__kopfbtn svg { width: 19px; height: 19px; }

/* Symbol umschalten: ausgefahrene Pfeile zum Vergroessern,
   eingefahrene zum Verkleinern. */
.noten-modal__kopfbtn .i-klein { display: none; }
.noten-modal__kopfbtn[aria-pressed="true"] .i-gross { display: none; }
.noten-modal__kopfbtn[aria-pressed="true"] .i-klein { display: inline; }
.noten-modal__koerper { flex: 1; min-height: 0; background: var(--paper-2); }

/* Buehne: hier wird die Seite gezeichnet. Scrollt bei Bedarf — sowohl
   senkrecht bei hochformatigen Blaettern als auch waagerecht, wenn die
   Seite ueber die Fensterbreite hinaus vergroessert wurde.
   "safe center" zentriert, klemmt aber beim Ueberlaufen an den Anfang,
   damit der linke Rand erreichbar bleibt. */
.noten-buehne {
  position: relative;
  height: 100%; overflow: auto;
  display: flex; align-items: flex-start; justify-content: safe center;
  padding: 8px;
  -webkit-overflow-scrolling: touch;
}
.noten-seite {
  display: block; height: auto; flex: none;
  background: #fff;                       /* Notenpapier, in beiden Themes */
  box-shadow: 0 2px 12px color-mix(in srgb, var(--ink) 25%, transparent);
}
.noten-seite[hidden] { display: none; }
.noten-buehne__meldung {
  margin: auto; padding: 2rem 1.2rem;
  text-align: center; color: var(--ink-soft);
}

/* Bedienleiste: links Blaettern, rechts Zoom. Die Blaettergruppe blendet
   sich bei einseitigen Blaettern aus, die Zoomgruppe bleibt immer da. */
.noten-leiste {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem 1rem;
  padding: .5rem .75rem;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
.noten-blaettern, .noten-zoom {
  display: flex; align-items: center; gap: .5rem;
}
.noten-blaettern[hidden] { display: none; }
/* Ist nur der Zoom da, sitzt er mittig statt rechts. */
.noten-blaettern[hidden] + .noten-zoom { margin-inline: auto; }
.noten-blaettern__btn, .noten-zoom__btn { padding-inline: .9rem; gap: .3em; }
.noten-blaettern__stand, .noten-zoom__stand {
  text-align: center;
  font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.noten-blaettern__stand { min-width: 10ch; }
.noten-zoom__stand { min-width: 5ch; }
.noten-zoom__btn { min-width: 48px; font-size: 1.05rem; }
.noten-zoom__breite { font-size: var(--fs-small); }
/* "Breite" hervorheben, solange die Seite auf die Fensterbreite passt */
.noten-zoom__breite[aria-pressed="true"] {
  color: var(--brick); border-color: var(--brick);
}

/* Ersatzdarstellung, wenn sich das PDF ueberhaupt nicht zeichnen laesst */
.noten-ersatz {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .8rem;
  padding: 2rem 1.2rem; text-align: center; color: var(--ink-soft);
}
.noten-ersatz__zeichen { color: var(--brass); }
.noten-ersatz p { margin: 0; max-width: 34ch; }

/* Auf schmalen Geraeten die Beschriftung der Blaetter-Knoepfe kuerzen,
   damit die drei Elemente nebeneinander passen. */
@media (max-width: 480px) {
  .noten-blaettern__btn span { display: none; }
  .noten-blaettern__btn { min-width: 52px; font-size: 1.3rem; }
  .noten-zoom__breite { display: none; }   /* Platz sparen; Doppeltippen setzt zurueck */
  .noten-leiste { justify-content: center; }
}

.noten-modal__fuss {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .75rem 1rem; border-top: 1px solid var(--line);
  background: var(--paper);
}
.noten-modal__fuss .noten-btn { flex: 1 1 auto; }

/* Hintergrund nicht scrollbar, solange das Overlay offen ist */
body.noten-modal-offen { overflow: hidden; }

/* ---------------------------------------------------------------
   4. Kurzmeldung (Toast)
   --------------------------------------------------------------- */
.noten-toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  z-index: 300; max-width: min(92vw, 26rem);
  padding: .7rem 1.1rem;
  font-size: var(--fs-small); font-weight: 600;
  color: var(--paper); background: var(--ink);
  border-radius: 999px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 35%, transparent);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.noten-toast.is-sichtbar { opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------
   5. Ohne JavaScript
   --------------------------------------------------------------- */
.noten-noscript h2 {
  margin-top: 2rem;
  font-family: "Fraunces", Georgia, serif; color: var(--ink);
}
.noten-noscript ul { padding-left: 1.2rem; color: var(--ink-soft); }
.noten-noscript li { margin-bottom: .25rem; }
.noten-noscript a { color: var(--brick); }

/* ---------------------------------------------------------------
   6. Bewegung reduzieren
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nav-noten-toggle, .nav-noten-chevron, .noten-kat, .noten-item,
  .noten-btn, .noten-toast { transition: none; }
}