/* ============================================================================
   uebungen.css — Übungen im Musikschul-Design (Klinker, Fraunces/Mulish)
   Wird NACH BaseLayout.css und lern-style.css geladen und überschreibt deren
   Design-Tokens auf die Klinker-Palette (hell = Standard, dunkel via [data-theme="dark"]).
   Enthält außerdem Musikschul-Kopf/-Fußzeile, den Umschalter und Kontrast-Fixes
   für die Übungs-Oberfläche. Die Übungs-Logik (JS) bleibt unberührt.
   ============================================================================ */

/* ---- Schriften (variabel, selbst gehostet) ---- */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/fraunces-latin-opsz-normal.woff2") format("woff2");}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("/fonts/fraunces-latin-opsz-italic.woff2") format("woff2");}
@font-face{font-family:"Mulish";font-style:normal;font-weight:200 1000;font-display:swap;src:url("/fonts/mulish-latin-wght-normal.woff2") format("woff2");}

/* ---- Tokens: Musikschul-Palette als Quelle, Übungs-Token als Aliasse ---- */
:root{
  --paper:#F6EFE4; --paper-2:#EFE4D2; --ink:#2A211B; --ink-soft:#5A4D42;
  --brick:#A6432B; --brick-deep:#7E3320; --wood:#8A5A3B; --brass:#C8893B; --line:#DDCDB6;

  --bg:var(--paper); --bg2:var(--paper-2); --bg3:#FCF8F0; --bg4:#E7DAC4;
  --acc:var(--brick); --acc2:#4E7D57; --acc3:var(--wood);
  --txt:var(--ink); --mut:var(--ink-soft); --brd:var(--line); --brd2:rgba(126,51,32,.12);
  --r:10px; --rl:14px;
}
[data-theme="dark"]{
  --paper:#181310; --paper-2:#231B15; --ink:#F1E8DA; --ink-soft:#B3A491;
  --brick:#D46B4E; --brick-deep:#E68467; --wood:#B98A63; --brass:#D8AB63; --line:#382E27;

  --bg3:#2C2219; --bg4:#34291F; --acc2:#6FB07E; --brd2:rgba(216,171,99,.14);
}

/* ---- Grundschrift überschreiben (BaseLayout setzt DM Sans / Playfair) ---- */
body{font-family:"Mulish",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-synthesis:none;}
h1,h2,h3,h4,.footer-brand,.brand{font-family:"Fraunces",Georgia,"Times New Roman",serif;}

/* ============================================================================
   Musikschul-Kopfzeile (ersetzt die Maikstrings-Navigation)
   ============================================================================ */
.skip-nav{position:absolute;left:-9999px;top:0;background:var(--brick);color:#fff;padding:.6rem 1rem;z-index:200;text-decoration:none;border-radius:0 0 .4rem 0;}
.skip-nav:focus{left:0;}

.site-header{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--line);}
.site-header .wrap{max-width:1140px;margin-inline:auto;padding:.45rem clamp(1.1rem,.5rem + 2vw,2.5rem);display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.site-header .brand{font-weight:600;font-size:1.25rem;color:var(--ink);text-decoration:none;line-height:1.1;}
.site-header .brand small{display:block;font-family:"Mulish",sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brick);}
.site-header .nav{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center;}
.site-header .nav a{color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:.92rem;}
.site-header .nav a:hover,.site-header .nav a[aria-current="page"]{color:var(--brick);}

.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink-soft);cursor:pointer;transition:color .18s,border-color .18s;}
.theme-toggle:hover{color:var(--brick);border-color:var(--brick);}
.theme-toggle svg{width:17px;height:17px;}
.theme-toggle .i-sun{display:none;}
[data-theme="dark"] .theme-toggle .i-sun{display:block;}
[data-theme="dark"] .theme-toggle .i-moon{display:none;}

/* ============================================================================
   Musikschul-Fußzeile (ersetzt den Maikstrings-Footer). Feste dunkle Flächen,
   damit sie in beiden Themes als dunkler Sockel funktioniert.
   ============================================================================ */
body > footer.site-footer{background:#241C15;color:#D9CDBE;padding-block:clamp(2.2rem,1.5rem + 3vw,3.5rem);border-top:none;text-align:left;}
[data-theme="dark"] body > footer.site-footer{background:#100C09;}
.site-footer .wrap{max-width:1140px;margin-inline:auto;padding-inline:clamp(1.1rem,.5rem + 2vw,2.5rem);}
.site-footer a{color:var(--brass);text-decoration:none;}
.site-footer a:hover{color:#E7B978;text-decoration:underline;}
.site-footer p{color:#C9BBA9;font-size:.95rem;margin:0;}
.footer-grid{display:grid;gap:clamp(1.5rem,1rem + 2vw,3rem);grid-template-columns:1fr;}
@media(min-width:640px){.footer-grid{grid-template-columns:2fr 1fr 1fr;}}
.site-footer h4{font-family:"Mulish",sans-serif;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 .8rem;}
.site-footer .brand-foot{font-family:"Fraunces",serif;font-size:1.3rem;color:#F6EFE4;margin-bottom:.4rem;}
.site-footer ul{list-style:none;margin:0;padding:0;line-height:2;}
.footer-legal{margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);font-size:.9rem;color:#A99B8B;}

/* ============================================================================
   Übungs-Oberfläche: Kontrast-Fixes fürs helle Design
   (Stellen, an denen --acc als Hintergrund mit dunklem Text diente -> helle Schrift;
    Feedback-Farben fürs Helle abgedunkelt, im Dunkeln wieder aufgehellt.)
   ============================================================================ */
#main-content .ex-chip.active{color:#fff;}
#main-content .ex-tap-pad.hit{color:#fff;}
#main-content .ex-ratio-bar{color:#fff;}

#main-content .ex-fb-head.ok{color:#1F8A5F;}
#main-content .ex-fb-head.no{color:#B23A26;}
[data-theme="dark"] #main-content .ex-fb-head.ok{color:#3FCE9F;}
[data-theme="dark"] #main-content .ex-fb-head.no{color:#E8917A;}

#main-content .ex-cents-needle.near{stroke:#B07A1E;}
#main-content .ex-cents-needle.off{stroke:#B23A26;}
[data-theme="dark"] #main-content .ex-cents-needle.near{stroke:#e0b44f;}
[data-theme="dark"] #main-content .ex-cents-needle.off{stroke:#e0795f;}

/* Eyebrow/Buttons im Übungsbereich absichern (Klinker) */
#main-content .eyebrow{color:var(--brick);}
#main-content .btn-ghost{color:var(--brick);border-color:var(--brick);}
#main-content .btn-ghost:hover{background:var(--brick);color:#fff;border-color:var(--brick);}

/* sanfter Theme-Übergang */
body,.site-header,.theme-toggle,#main-content #ex-root{transition:background-color .3s ease,color .3s ease,border-color .3s ease;}
@media(prefers-reduced-motion:reduce){body,.site-header,.theme-toggle,#main-content #ex-root{transition:none;}}

/* ===== Mobiles Menü (Hamburger) – ergänzt Juli 2026 ===== */
.nav-toggle{display:none;}
@media (max-width: 719px){
  .site-header .wrap{position:relative;}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:10px;
    background:transparent;color:var(--ink-soft);cursor:pointer;position:relative;
  }
  .nav-toggle:hover{border-color:var(--brick);color:var(--brick);}
  .nav-toggle__bar{position:absolute;left:12px;right:12px;top:50%;height:2px;background:currentColor;transform:translateY(-50%);}
  .nav-toggle__bar::before,.nav-toggle__bar::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .2s ease,top .2s ease;}
  .nav-toggle__bar::before{top:-7px;}
  .nav-toggle__bar::after{top:7px;}
  .site-header.nav-open .nav-toggle__bar{background:transparent;}
  .site-header.nav-open .nav-toggle__bar::before{top:0;transform:rotate(45deg);}
  .site-header.nav-open .nav-toggle__bar::after{top:0;transform:rotate(-45deg);}
  .site-header .nav{
    position:absolute;top:calc(100% + 1px);left:0;right:0;z-index:90;
    display:none;flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;
    background:var(--paper);border-bottom:1px solid var(--line);
    box-shadow:0 14px 28px rgba(42,33,27,.12);padding:.35rem 0;
  }
  .site-header.nav-open .nav{display:flex;}
  .site-header .nav a{padding:.85rem clamp(1.1rem,5vw,2.5rem);border-radius:0;}
  .site-header .nav a:hover{background:rgba(166,67,43,.08);}
  .site-header .nav .theme-toggle{margin:.55rem clamp(1.1rem,5vw,2.5rem);width:40px;}
}

/* Mobil: Statuszeile + Reset-Button umbrechen statt überlaufen (Fix Juli 2026) */
@media (max-width: 560px){
  #main-content .ex-bar-right{flex-wrap:wrap;}
  #main-content .ex-stats{flex-wrap:wrap;}
}

/* „Nach oben“-Button (auch auf den Übungsseiten) */
.to-top{position:fixed;left:20px;bottom:20px;z-index:80;width:46px;height:46px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);
  border-radius:50%;background:var(--paper);color:var(--brick);cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease,background-color .2s,color .2s;}
.to-top.show{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:var(--brick);color:var(--paper);border-color:var(--brick);}
.to-top svg{width:22px;height:22px;}
@media (max-width:480px){.to-top{left:14px;bottom:14px;width:42px;height:42px;}}

/* ================================================================
   Noten-Zierband (Fuenf-Linien-System) — klebt mit dem .site-header.
   Farben an Design-Tokens (--brass/--paper-2/--line) -> Dark-Mode automatisch.
   Stellschrauben: --nb-speed (Tempo), --nb-line-op (Linien).
   ================================================================ */
:root{ --nb-speed:60s; --nb-line-op:0.32; }
html{ scroll-padding-top:132px; }   /* Header + 54px Band -> #Anker frei */
.nb-band{
  --nb-bg:var(--paper-2); --nb-note:var(--brass); --nb-edge:var(--brass); --nb-sep:var(--line);
  position:relative; height:54px; overflow:hidden;
  background:var(--nb-bg);
  border-top:2px solid var(--nb-edge);
  border-bottom:1px solid var(--nb-sep);
}
.nb-scroll{
  position:absolute; top:0; left:0; height:100%;
  width:calc(100% + 360px); color:var(--nb-note);
  will-change:transform; animation:nb-scroll var(--nb-speed) linear infinite;
}
.nb-staffline{ stroke-opacity:var(--nb-line-op,.32); }
@keyframes nb-scroll{ from{transform:translateX(0);} to{transform:translateX(-340px);} }
@media (prefers-reduced-motion:reduce){ .nb-scroll{ animation:none; } }
/* ===== Ende Noten-Zierband ===== */

/* ---- Logo im Header (wie auf der Startseite) ---- */
.brand-logo{display:block;height:62px;width:auto;aspect-ratio:1578/714;}
@media(max-width:480px){.brand-logo{height:48px;}}
[data-theme="dark"] .brand-logo{filter:invert(.92) sepia(.15) brightness(1.05);}