/* Header */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid #e5e7eb; background:#fff;
  position:sticky; top:0; z-index:50;
}
.site-header .brand .title{
  font-weight:700; font-size:20px; color:#111827; text-decoration:none;
}
.nav{ display:flex; gap:14px; }
.nav-link{
  color:#374151; text-decoration:none; padding:6px 10px; border-radius:8px;
}
.nav-link:hover{ background:#f3f4f6; }
.nav-link.active{
  background:#e5f0ff; color:#0b3b8f; font-weight:600;
  
}
/* --- Einheitlicher Header-Stil wie Karten --- */
header.site-header {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;       /* gleich wie .card */
  padding: 12px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04); /* dezenter Schatten */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header.site-header {
  max-width: var(--page-width, 100%);
  margin: 0 auto 20px auto;
}












.page-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}


/* Harp Layout (Matrix) – Basisgrid */
#matrix {
  display: grid;
  grid-template-columns: auto repeat(10, minmax(64px, 1fr));
  gap: 8px 8px;
  align-items: start;
}

/* Zellen im Harp-Layout: einheitlich & mittig */
#matrix .cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  min-height: 56px;
  box-sizing: border-box;
}

#matrix .holeMid,
#matrix .noteBR {
  line-height: 1.1;
  white-space: nowrap;
}



.card-head {
  font-weight: 600;
  margin-bottom: 8px;
}








/* ===========================
   Position Finder – Layout
   =========================== */

/* Grid für die 12 Positionskarten.
   Bleibt pro Karte gleich groß und bricht bei kleiner Breite in die nächste Zeile um. */
.pfGrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  width: 100%;
}

/* Einzelne Positionskarte – nutzt deinen Card-Look */
.pfCard{
  /* deine .card liefert bereits: background, border, radius, shadow */
  padding: 10px 12px;          /* etwas kompakter als Standardkarten */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Kopfzeile in der Karte ("1st Position", "2nd Position", …) */
.pfTitle{
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
}

/* Der große Positions-Key (z. B. C, G, D …) */
.pfKey{
  font-weight: 800;
  letter-spacing: 0.3px;
  /* bleibt optisch groß, skaliert aber sanft mit der Kartengröße */
  font-size: clamp(18px, 4.2vw, 22px);
  color: var(--ink);
}

/* Kleine Beschriftung "Key" über dem Dropdown */
.pfLabel{
  font-size: 12px;
  color: var(--muted);
  line-height: 1;
}

/* Das Dropdown unten in der Karte.
   Nutzt deinen .pill-Stil; hier nur Breite und Innenabstand festlegen. */
.pfSelect{
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 4px 8px;
  width: 100%;
}
.pfSelect select{
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  font: inherit;
  color: var(--ink);
}

/* Optional: die obere Steuerzeile (Harp-Key / Band-Key) kompakt halten */
.pfControls{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}


/*.pfControls .pill{ min-width: 220px; }*/


.card h4 { 
  margin-top: 16px; 
  margin-bottom: 6px;
  color: var(--ink);
}


/* Layout für Text + Bild nebeneinander */
.pos-row {
  display: grid;
  grid-template-columns: 1fr auto; /* Text links, Bild rechts */
  gap: 20px;
  align-items: center;
  margin: 18px 0 32px;
}

/* Bilder rechts kleiner darstellen */
.pos-figure {
  width: 600px;              /* feste Breite */
  height: auto;
  border-radius: 12px;
  border: var(--card-border, 1px solid #e5e7eb);
  box-shadow: var(--card-shadow, 0 1px 4px rgba(0,0,0,.08));
  background: #fff;
  object-fit: contain;
  justify-self: end;         /* Bild rechtsbündig */
}

/* Textbeschreibung */
.pos-meta {
  margin: 8px 0 0;
  font-size: 0.925rem;
  color: #6b7280;
}
.pos-meta strong {
  color: #111827;
}

/* Mobil-Layout: untereinander */
@media (max-width: 880px) {
  .pos-row {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .pos-figure {
    width: 100%;
    max-width: 260px;
    justify-self: center;
  }
}




/* Zwei Karten nebeneinander gleich hoch darstellen */
.row.equal {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch; /* sorgt für gleiche Höhe */
}

/* Karten im Gleich-Höhe-Layout */
.row.equal > .card {
  flex: 1 1 480px;
  display: flex;
  flex-direction: column;
}

/* Inhalt gleichmäßig verteilen, Footer-Text immer unten */
.row.equal > .card p.muted:last-of-type {
  margin-top: auto;
}

.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:#334155;background:#f8fafc}
  /* ---- Badges ---- */
  .badges{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
  .badge{ font-size:12px; border:1px solid var(--line); border-radius:999px; padding:6px 10px; }
.bl-footnote{ margin:10px 0 0; color:var(--muted); font-size:12px; }
.bl-link{ color:var(--ink); text-decoration:underline; }


/* ---- Ko-fi Button ---- */
.kofi-btn {
  display:inline-block;
  width:245px;                /* ~25 % der Originalgröße */
  height:49px;
  background:url("/img/kofi-red.png") center/contain no-repeat;
  background-size:contain;
  border-radius:10px;
  transition:
    background-image .2s ease-in-out,
    transform .1s ease-in-out,
    box-shadow .2s ease-in-out;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

.kofi-btn:hover {
  background-image:url("/img/kofi-dark.png");
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(0,0,0,0.25);
}

.kofi-btn:active {
  transform:translateY(0);
  box-shadow:0 1px 4px rgba(0,0,0,0.15);
}


/* Breiter, dunkler CTA-Button im Harp+-Look */
.btn-dark{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:#0f172a; color:#fff; text-decoration:none;
  border:1px solid #0f172a; border-radius:9999px;
  font-weight:600;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.btn-dark:hover{ opacity:.92 }
.btn-dark:focus-visible{ outline:2px solid #93c5fd; outline-offset:2px }
.btn-dark svg{ display:block }



/* Layout für Text links und Bild rechts */
.pos-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}

/* Textseite */
.pos-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Bildseite */
.pos-image {
  width: 320px;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  justify-self: end;
}

/* Responsiv: untereinander bei kleinen Bildschirmen */
@media (max-width: 840px) {
  .pos-row {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .pos-image {
    justify-self: center;
    width: 80%;
    max-width: 320px;
  }
}


/* =========================================================
   HARPZILLA HEADER – responsive navigation with hamburger menu
   ========================================================= */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-radius: 12px;
  padding: 8px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  position: relative;
  z-index: 50;
}

/* ---------- Brand ---------- */
.site-header .brand .title {
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  color: #111827;
}

/* ---------- Navigation ---------- */
.site-header .nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-link {
  text-decoration: none;
  color: #111827;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.nav-link:hover {
  background: #f3f4f6;
}

.nav-link.active {
  background: #dbeafe;
  color: #1e3a8a;
  font-weight: 600;
}

/* ---------- Language Switch ---------- */
.lang-switch {
  opacity: 0.7;
  font-size: 0.9rem;
}

/* ---------- Hamburger Button ---------- */
.menu-toggle {
  border: none;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  display: none; /* hidden on desktop */
}

/* =========================================================
   RESPONSIVE – mobile view
   ========================================================= */
@media (max-width: 900px) {
  .menu-toggle {
    display: inline-block;
    margin-left: auto;
  }

  .site-header .nav {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
    padding: 8px;
    min-width: 220px;
  }

  .site-header .nav.open {
    display: flex;
  }

  .nav-link {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
  }

  .nav-link:hover {
    background: #f3f4f6;
  }
}

/* Small visual polish for iOS Safari notch */
@supports (padding: max(0px)) {
  .site-header {
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }
}








/* ====== MOBILE ANTI-OVERLAP FIX (nur Harp-Matrix) ====== */
@media (max-width: 900px) {
  #matrix {
    row-gap: 6px;
  }

  #matrix .cell {
    min-height: 52px;
    padding: 4px 2px;
    overflow: hidden;
    position: relative;
  }

  #matrix .holeMid,
  #matrix .noteBR {
    font-size: 12px;
  }

  #matrix .tabicon,
  #matrix .ic {
    height: 16px;
    width: auto;
    max-width: 100%;
  }

  #matrix .gradDot {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 10px;
    width: 16px;
    height: 16px;
    line-height: 16px;
  }
}




/* ===== Mobile: Row-Labels ausblenden & Grid neu spannen ===== */
@media (max-width: 900px) {
  /* Label-Spalte & Eckfeld ausblenden */
  #matrix .rowlab,
  #matrix .header-corner {
    display: none !important;
  }

  /* Matrix nur noch 10 Spalten */
  #matrix {
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    padding-left: 0 !important;
  }

  /* Spaltenköpfe zentrieren */
  #matrix .colhdr {
    justify-self: center;
  }

  /* Zellen etwas kompakter, aber gleiche Höhe */
  #matrix .cell {
    min-height: 58px;
    padding: 4px 2px;
    box-sizing: border-box;
  }

  /* Mittelsteg jetzt über alle 10 Spalten */
  #matrix .rangeFrame {
    grid-column: 1 / span 10 !important;
    height: 38px;
  }

  #matrix .rangeFrame span {
    font-size: 12px;
  }
}






/* ===== Toggle Buttons Scalen Noten und Kanzellennummern ausblenden ===== */
.toggle-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-toggle {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  transition: 0.15s;
}
.btn-toggle input {
  margin-right: 6px;
}
.btn-toggle input:checked + span {
  color: #111;
  font-weight: 600;
}
.btn-toggle:hover {
  background: #f8f9fb;
}


/* Harp Layout (Matrix) */
#matrix.hide-holes .holeMid { display: none; }   /* Lochzahl im Grid */
#matrix.hide-notes .noteBR  { display: none; }   /* Notenname im Grid */

/* Chips (Notation-Card) – Klassen sind generisch aus deiner App */
#chips.hide-holes .chip .hole { display: none; } /* Lochzahl im Chip */
#chips.hide-notes .chip .note { display: none; } /* Notenname im Chip */

/* Sicherheitsnetz: niemals pointer-events kappen */
#matrix .cell, #chips .chip { pointer-events: auto; }


.chip-toggles { display:flex; gap:.5rem; align-items:center; }
.toggle { display:inline-flex; gap:.4rem; align-items:center; font:inherit; }


/* =========================================
   Kanzellen-Band (Hole-Bar) im Harp Layout
   ========================================= */

/* Desktop / Standard:
   #matrix hat links eine Label-Spalte,
   dann 10 Spalten für Kanzelle 1–10.
   -> Band startet ab Spalte 2 und hat exakt 10 Spalten.
*/

/* Kanzellen-Band (Hole-Bar) – Desktop */
#matrix .rangeFrame {
  grid-column: 2 / span 10;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  align-items: center;
  justify-items: center;
  margin: 2px 0 2px;
  height: 36px;
  background: #6b7280;
  border-radius: 6px;
  padding: 4px 0px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.18);
}

#matrix .rangeFrame span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 46px;
  height: 22px;

  background: #374151;
  color: #f9fafb;
  font-weight: 700;
  font-size: 13px;
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.12);
}

/* Kanzellen-Band – Mobile (Label-Spalte weg, 10 Spalten) */
@media (max-width: 900px) {
  #matrix .rangeFrame {
    grid-column: 1 / -1;
    margin: 2px 0 2px;
    height: 32px;
    padding: 4px 0px;
  }

  #matrix .rangeFrame span {
    max-width: 40px;
    height: 20px;
    font-size: 12px;
  }
}