/* =========================================================
   Musikpedia — Fachartikel der Musikschule Cuxhaven
   Ergaenzt basis.min.css / rest.min.css. Nutzt ausschliesslich
   die Design-Tokens der Website, damit Hell- und Dunkelmodus
   ohne Sonderregeln funktionieren.
   ========================================================= */

/* ---------- Grundgeruest: Artikel + Steckbrief-Spalte ----------
   Der Wrapper heisst mp-article: .article ist in basis.min.css schon
   fuer die Rechtstexte vergeben (max-width:72ch plus h2/p/li-Regeln). */
.article-layout{
  padding-block:clamp(2rem,1.4rem + 2.6vw,3.4rem);
}
.mp-article{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.4rem,1rem + 1.6vw,2.4rem);
  align-items:start;
}
@media (min-width:980px){
  .mp-article{grid-template-columns:minmax(0,1fr) 20.5rem;}
  .article-head{grid-column:1 / -1;}
  /* Der Steckbrief laeuft ganz normal mit der Seite mit: kein sticky und
     damit auch kein zweiter Scrollbalken neben dem Text. */
  .infobox{grid-column:2;grid-row:2;}
  .prose{grid-column:1;grid-row:2;}
}

/* ---------- Kopf des Artikels ---------- */
.article-head{max-width:62ch;}
.category{
  display:block;margin-bottom:.6rem;
  font-size:var(--fs-small);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
}
.category a{color:var(--brick);text-decoration:none;}
.category a:hover{text-decoration:underline;text-underline-offset:3px;}
.article-head h1{
  margin:0 0 .5rem;
  font-family:"Fraunces",Georgia,serif;
  font-size:var(--fs-hero);line-height:1.04;color:var(--ink);
}
.lede{
  margin:0;font-size:var(--fs-lead);line-height:1.6;color:var(--ink-soft);
}

/* ---------- Steckbrief ---------- */
.infobox{
  margin:0;padding:1.1rem 1.2rem 1.3rem;
  background:var(--card-bg);
  border:var(--card-bw) solid var(--card-line);
  border-radius:var(--radius);
  font-size:var(--fs-small);
}
.ib-title{
  margin:0;font-family:"Fraunces",Georgia,serif;
  font-size:1.35rem;line-height:1.15;color:var(--ink);
}
.ib-sub{
  margin:.1rem 0 .9rem;font-size:.8rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brick);
}
.ib-media{
  display:flex;align-items:center;justify-content:center;
  min-height:8.5rem;margin-bottom:1rem;padding:.8rem;
  border:1px dashed var(--line);border-radius:10px;
  background:color-mix(in srgb,var(--paper-2) 60%,transparent);
  color:var(--ink-soft);font-size:.82rem;text-align:center;line-height:1.5;
}
.ib-media img{width:100%;height:auto;display:block;border-radius:8px;}
.infobox dl{margin:0;}
.infobox dl > div{
  padding:.55rem 0;border-top:1px solid var(--line);
}
.infobox dl > div:first-child{border-top:0;padding-top:0;}
.infobox dt{
  margin-bottom:.15rem;font-size:.74rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);
}
.infobox dd{margin:0;color:var(--ink);line-height:1.5;}

/* ---------- Fliesstext ---------- */
.prose{max-width:70ch;color:var(--ink);font-size:var(--fs-body);line-height:1.72;}
.prose p{margin:0 0 1.1em;}
.prose a{color:var(--brick);text-underline-offset:3px;}
.prose a:hover{color:var(--brick-deep);}
.prose strong{font-weight:700;}
.prose h2{
  display:flex;align-items:baseline;gap:.6rem;
  margin:2.4em 0 .6em;padding-top:1.1rem;
  border-top:1px solid var(--line);
  font-family:"Fraunces",Georgia,serif;
  font-size:var(--fs-h2);line-height:1.12;color:var(--ink);
}
.prose h2 .num{
  flex:none;min-width:1.6em;
  font-size:.5em;font-weight:700;color:var(--brass);
  font-variant-numeric:tabular-nums;
}
.prose h3{
  margin:1.9em 0 .5em;
  font-family:"Fraunces",Georgia,serif;
  font-size:var(--fs-h3);color:var(--ink);
}
.prose h4{margin:1.4em 0 .4em;font-size:1.02rem;color:var(--ink);}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:1.35em;}
.prose li{margin:.35em 0;}
.prose ul li::marker{color:var(--brass);}
.prose blockquote{
  margin:1.3em 0;padding:.2em 0 .2em 1.1em;
  border-left:3px solid var(--brass);
  color:var(--ink-soft);font-style:italic;
}

/* ---------- Inhaltsverzeichnis ---------- */
.toc{
  margin:1.6em 0 2em;padding:1rem 1.2rem 1.1rem;
  background:var(--card-bg);
  border:var(--card-bw) solid var(--card-line);
  border-radius:var(--radius);
}
.toc-title{
  margin:0 0 .5rem;font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brick);
}
.toc ol{
  margin:0;padding:0;list-style:none;counter-reset:toc;
  columns:2;column-gap:1.6rem;
}
@media (max-width:640px){.toc ol{columns:1;}}
.toc li{
  counter-increment:toc;margin:.2em 0;
  break-inside:avoid;font-size:var(--fs-small);line-height:1.45;
}
.toc li::before{
  content:counter(toc) ".";
  margin-right:.45em;color:var(--brass);
  font-weight:700;font-variant-numeric:tabular-nums;
}
.toc a{color:var(--ink-soft);text-decoration:none;}
.toc a:hover{color:var(--brick);text-decoration:underline;text-underline-offset:3px;}

/* ---------- Kurzsteckbrief-Kacheln ---------- */
.fit{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:.7rem;margin:1.6em 0;
}
.fit div{
  padding:.7rem .85rem;
  background:var(--card-bg);
  border:1px solid var(--card-line);
  border-radius:10px;
  font-size:var(--fs-small);line-height:1.5;
}
.fit b{
  display:block;margin-bottom:.15rem;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* ---------- Glossare und Definitionslisten ---------- */
.prose dl{
  margin:1.4em 0;
  display:grid;
  grid-template-columns:minmax(8rem,14rem) 1fr;
  gap:.15rem 1rem;
}
.prose dl dt{
  font-weight:700;color:var(--ink);
  padding:.35em 0;border-top:1px solid var(--line);
}
.prose dl dd{
  margin:0;color:var(--ink-soft);
  padding:.35em 0;border-top:1px solid var(--line);
}
.prose dl dt:first-of-type,.prose dl dt:first-of-type + dd{border-top:0;}
@media (max-width:600px){
  .prose dl{grid-template-columns:1fr;gap:0;}
  .prose dl dd{padding-top:0;border-top:0;padding-bottom:.6em;}
}

/* ---------- Hinweiskaesten ---------- */
.box{
  margin:1.6em 0;padding:.95rem 1.15rem;
  background:color-mix(in srgb,var(--brick) 7%,var(--paper));
  border-left:4px solid var(--brick);
  border-radius:0 10px 10px 0;
}
.box h4{margin:0 0 .35em;font-size:1rem;color:var(--ink);}
.box > :last-child{margin-bottom:0;}
.box.check{
  background:color-mix(in srgb,var(--brass) 12%,var(--paper));
  border-left-color:var(--brass);
}

/* ---------- Zeitleiste ---------- */
.timeline{
  margin:1.6em 0;padding:0 0 0 1.3em;
  list-style:none;border-left:2px solid var(--brass);
}
.timeline li{position:relative;margin:0 0 .85em;padding-left:0;}
.timeline li::before{
  content:"";position:absolute;left:calc(-1.3em - 6px);top:.6em;
  width:10px;height:10px;border-radius:50%;
  background:var(--brick);
}
.timeline b{
  display:inline-block;min-width:6em;margin-right:.35em;
  color:var(--brick);font-variant-numeric:tabular-nums;
}

/* ---------- Tabellen ---------- */
.prose table{
  width:100%;margin:1.6em 0;border-collapse:collapse;
  font-size:var(--fs-small);
  display:block;overflow-x:auto;
}
.prose caption{
  caption-side:top;margin-bottom:.45em;
  font-weight:700;text-align:left;color:var(--ink-soft);
}
.prose th,.prose td{
  padding:.55em .7em;border:1px solid var(--line);
  text-align:left;vertical-align:top;line-height:1.5;
}
.prose th{background:var(--paper-2);font-weight:700;color:var(--ink);}
.prose tr:nth-child(even) td{
  background:color-mix(in srgb,var(--paper-2) 42%,transparent);
}

/* ---------- Grafiken ---------- */
.fig{margin:1.8em 0;}
.fig svg{display:block;width:100%;max-width:46rem;height:auto;}
.fig figcaption{
  margin-top:.5em;font-size:var(--fs-small);color:var(--ink-soft);line-height:1.55;
}
.range-svg{color:var(--ink);}

/* ---------- Haeufige Fragen ---------- */
details.faq{
  padding:.7em 0;border-bottom:1px solid var(--line);
}
details.faq summary{
  cursor:pointer;font-weight:700;color:var(--ink);
  list-style:none;display:flex;align-items:baseline;gap:.6em;
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::before{
  content:"+";flex:none;width:1em;
  color:var(--brick);font-weight:700;
}
details.faq[open] summary::before{content:"\2013";}
details.faq summary:hover{color:var(--brick);}
details.faq > :not(summary){margin-top:.6em;}
details.faq > :last-child{margin-bottom:0;}

/* ---------- Quellen, Stand, Rueckweg ---------- */
.sources{font-size:var(--fs-small);line-height:1.6;}
.sources li{margin:.3em 0;}
.stand{
  margin-top:2.4em;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--ink-soft);
}
.backlink{
  display:inline-block;margin-top:1.6em;
  font-weight:700;color:var(--brick);text-decoration:none;
}
.backlink::before{content:"\2190";margin-right:.45em;}
.backlink:hover{text-decoration:underline;text-underline-offset:3px;}

/* ---------- Uebersichtsseite ---------- */
.pedia-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));
  gap:clamp(1rem,.7rem + 1vw,1.6rem);margin-top:2rem;
}
.pedia-card{
  display:flex;flex-direction:column;gap:.4rem;
  padding:1.1rem 1.25rem 1.25rem;
  background:var(--card-bg);
  border:var(--card-bw) solid var(--card-line);
  border-radius:var(--radius);
  text-decoration:none;color:var(--ink);
  transition:transform .18s ease,box-shadow .18s ease;
}
.pedia-card:hover,.pedia-card:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 14px 28px color-mix(in srgb,var(--ink) 16%,transparent);
}
.pedia-card .pc-kat{
  font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brick);
}
.pedia-card h3{
  margin:0;font-family:"Fraunces",Georgia,serif;
  font-size:1.3rem;line-height:1.15;color:var(--ink);
}
.pedia-card p{margin:0;font-size:var(--fs-small);line-height:1.55;color:var(--ink-soft);}
.prose.pedia-index{max-width:none;}
.prose h2.pedia-gruppe{
  display:block;margin:2.6rem 0 0;padding-top:1.2rem;
  border-top:1px solid var(--line);
  font-family:"Fraunces",Georgia,serif;font-size:var(--fs-h3);color:var(--ink);
}

@media print{
  .toc,.site-nav,.site-header,.site-footer,.backlink,.theme-fab{display:none;}
  .article{display:block;}
  .infobox{break-inside:avoid;}
}

/* ---------- Instrumentenzeichnungen ---------- */
/* Strichzeichnungen in Schwarz auf transparentem Grund: im hellen Modus
   bekommen sie eine helle Platte, im dunklen werden sie invertiert, sonst
   waeren die Linien auf dunklem Untergrund nicht zu sehen. */
.ib-media.has-bild{
  min-height:0;padding:0;border:0;background:none;
}
.ib-media.has-bild img{
  /* Begrenzt, damit der Steckbrief nicht hoeher wird als das Fenster. */
  width:100%;max-width:15rem;height:auto;display:block;margin:0 auto;
  border:1px solid var(--line);border-radius:10px;
  background:#FFFCF6;
}
.pedia-hero{
  margin:0 0 2rem;
}
.pedia-hero img{
  display:block;width:100%;max-width:26rem;height:auto;margin:0 auto;
  border:1px solid var(--line);border-radius:var(--radius);
  background:#FFFCF6;
}
[data-theme="dark"] .ib-media.has-bild img,
[data-theme="dark"] .pedia-hero img{
  /* Die helle Platte wird mit invertiert und damit dunkel. */
  filter:invert(1) hue-rotate(180deg);
}