/* partitur.css – Rahmen «Partitur» für szudarek.com (Runde 7, 08.10.2026)
   Kopf (Name + Messing-Horizontlinie, Hauptnavigation, Notenlinien), Werkzeile, Pillen,
   Leiste unten, Fuss. Gilt für Website, Lernwelt und Übungswelt gleich.
   Alle Klassen mit Präfix «pt-», damit lw.css und App-Styles nicht kollidieren.
   Braucht /assets/tokens.css davor (Farben, Schriften). Kontraste (WCAG 2.x):
   Elfenbein/Navy 14,92 · Hell-85/Navy 11,01 · Messing/Navy 6,43 (Grafik und Akzent). */

:root{
  --pt-breit:1200px;          /* Bühne */
  --pt-rand:32px;             /* seitlicher Rand */
  --pt-l:8px;                 /* Abstand der Notenlinien */
  --pt-radius:4px;            /* ein Radius für Tasten, Pillen, Felder */
  --pt-leiste:64px;           /* Höhe Leiste unten (inkl. Linie) */
}

/* ── Notenlinien: fünf Messing-Linien à 1 px ───────────────────────── */
.pt-raster{
  max-width:var(--pt-breit);width:calc(100% - 2 * var(--pt-rand));margin:0 auto;
  height:calc(4 * var(--pt-l) + 1px);
  background:repeating-linear-gradient(to bottom,var(--messing,#C39A5B) 0 1px,transparent 1px var(--pt-l));
}

/* ── Kopf ──────────────────────────────────────────────────────────── */
.pt-kopf{background:var(--navy,#0B1F33);color:var(--elfenbein,#F4F2ED);font-family:var(--sans)}
.pt-kopf-in{max-width:var(--pt-breit);margin:0 auto;padding:0 var(--pt-rand);min-height:68px;
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.pt-marke{display:inline-flex;flex-direction:column;justify-content:center;min-height:48px;
  color:var(--elfenbein,#F4F2ED);text-decoration:none}
.pt-name{font:500 24px/1 var(--serif);letter-spacing:0;white-space:nowrap}
.pt-horizont{display:block;width:78%;height:2px;margin-top:6px;background:var(--messing,#C39A5B)}
.pt-haupt{display:flex;gap:4px;margin:0}
.pt-haupt a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  color:var(--hell-85,#D1D2D1);text-decoration:none;font:600 13px/1 var(--sans);
  letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid transparent}
.pt-haupt a:hover{color:var(--elfenbein,#F4F2ED)}
.pt-haupt a[aria-current]{color:var(--elfenbein,#F4F2ED);border-bottom-color:var(--messing,#C39A5B)}
.pt-kopf a:focus-visible,.pt-werk a:focus-visible,.pt-leiste a:focus-visible,.pt-fuss a:focus-visible,
.pt-pille:focus-visible{outline:3px solid var(--messing,#C39A5B);outline-offset:2px}

/* ── Werkzeile (Kopf eines Teils: Titel, Zeile, Pillen) ────────────── */
.pt-werk{background:var(--navy,#0B1F33);color:var(--elfenbein,#F4F2ED);font-family:var(--sans)}
.pt-werk-in{max-width:var(--pt-breit);margin:0 auto;padding:12px var(--pt-rand) 14px;
  display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.pt-werk-titel{margin:0;font:500 28px/1.15 var(--serif);color:var(--elfenbein,#F4F2ED)}
.pt-werk-titel a{color:inherit;text-decoration:none}
.pt-werk-zeile{margin:2px 0 0;font:400 15px/1.4 var(--sans);color:var(--hell-85,#D1D2D1)}
.pt-pillen{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pt-pille{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border:1px solid var(--hell-85,#D1D2D1);border-radius:var(--pt-radius);background:transparent;
  color:var(--elfenbein,#F4F2ED);text-decoration:none;font:600 13px/1 var(--sans);
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
a.pt-pille:hover{border-color:var(--elfenbein,#F4F2ED)}
.pt-pille-status{color:var(--hell-85,#D1D2D1);text-transform:none;letter-spacing:0;font-weight:500}
.pt-pille-status::before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid currentColor}
.pt-pille-status.an{border-color:var(--messing,#C39A5B);color:var(--elfenbein,#F4F2ED)}
.pt-pille-status.an::before{background:var(--messing,#C39A5B);border-color:var(--messing,#C39A5B)}
.pt-werk-naht{height:3px;background:var(--messing,#C39A5B)}

/* ── Leiste unten (App-Bereiche) ───────────────────────────────────── */
.pt-leiste{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:center;
  background:linear-gradient(var(--messing,#C39A5B),var(--messing,#C39A5B)) 0 4px/100% 1px no-repeat,var(--navy,#0B1F33);
  border-top:1px solid var(--messing,#C39A5B);padding-bottom:env(safe-area-inset-bottom,0)}
.pt-leiste a{flex:0 1 160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:58px;padding:6px 4px 0;color:var(--hell-85,#D1D2D1);text-decoration:none;font:600 13px/1.1 var(--sans)}
.pt-leiste a svg{width:24px;height:24px}
.pt-leiste a[aria-current]{color:var(--elfenbein,#F4F2ED);text-decoration:underline;
  text-decoration-color:var(--messing,#C39A5B);text-decoration-thickness:2px;text-underline-offset:5px}
body.pt-mit-leiste{padding-bottom:calc(var(--pt-leiste) + env(safe-area-inset-bottom,0))}

/* ── Fuss ──────────────────────────────────────────────────────────── */
.pt-fuss{background:var(--navy,#0B1F33);color:var(--hell-85,#D1D2D1);font:400 14px/1.5 var(--sans);padding-top:16px}
.pt-fuss-in{max-width:var(--pt-breit);margin:0 auto;padding:12px var(--pt-rand) 28px;
  display:flex;flex-wrap:wrap;gap:4px 32px;align-items:center;justify-content:space-between}
.pt-fuss-name{margin:0;display:inline-flex;flex-direction:column;color:var(--elfenbein,#F4F2ED);font:500 17px/1.2 var(--serif)}
.pt-fuss-name .pt-horizont{width:60%;margin-top:5px}
.pt-fuss-nav{display:flex;flex-wrap:wrap;gap:0 4px;margin:0}
.pt-fuss a{color:var(--hell-85,#D1D2D1);display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
.pt-fuss a:hover{color:var(--elfenbein,#F4F2ED)}

.pt-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pt-nb{white-space:nowrap}
.pt-skip:focus{position:fixed!important;left:8px;top:8px;width:auto;height:auto;clip:auto;z-index:99;
  padding:12px 16px;background:var(--elfenbein,#F4F2ED);color:var(--navy,#0B1F33);font:600 15px/1 var(--sans)}
.pt-fuss-zusatz{max-width:var(--pt-breit);margin:0 auto;padding:12px var(--pt-rand) 0;color:var(--hell-85,#D1D2D1);font-size:14px}
.pt-fuss-zusatz p{margin:0 0 4px}
.pt-fuss-zusatz a{min-height:44px;padding:0 4px}

/* ── Mittlere Breiten ──────────────────────────────────────────────── */
@media (max-width:900px){
  .pt-kopf-in{flex-direction:column;align-items:flex-start;gap:2px;padding-top:10px;padding-bottom:2px}
  .pt-haupt{margin-left:-14px}
}

/* ── Handy ─────────────────────────────────────────────────────────── */
@media (max-width:640px){
  :root{--pt-rand:16px;--pt-l:4px}
  .pt-kopf-in{padding-top:6px;min-height:0}
  .pt-marke{min-height:44px}
  .pt-name{font-size:21px}
  .pt-horizont{height:2px;margin-top:5px}
  .pt-haupt{width:calc(100% + 16px);margin:0 -8px;justify-content:space-between;gap:0}
  .pt-haupt a{padding:0 8px;font-size:14px;letter-spacing:0;text-transform:none}
  .pt-werk-in{padding:8px var(--pt-rand) 10px;gap:6px 10px}
  .pt-werk-titel{font-size:20px}
  .pt-werk-zeile{font-size:13px}
  .pt-pille{padding:0 12px;font-size:12px;letter-spacing:.04em}
  .pt-leiste a{flex:1 1 0;font-size:12px}
  .pt-fuss-in{flex-direction:column;align-items:flex-start}
}
@media (max-width:360px){
  .pt-haupt a{padding:0 5px;font-size:13px}
}