@layer components {
/*
 * Virtuelle Klaviatur (Spec 12). Die bestehende Klassen- und DOM-Architektur
 * bleibt unverändert (JS-Vertrag); nur das Styling wird auf Fuchur-Tokens
 * migriert. Helle Tasten bleiben hell, schwarze dunkel — in beiden Themes.
 * Zustände: Referenzton (key--target/Dot), Auswahl (key--marked), MIDI
 * (key--midi-marked), Grundtonmarker, Fokus. Kein Zustand nur über Farbe:
 * Dot/Marker, Rahmen und ARIA bleiben erhalten.
 */

[data-chord-interaction] {
  --_key-white-w: clamp(2.5rem, 8vw, 3.25rem);
  --_key-white-h: clamp(8rem, 30vw, 12rem);
  --_key-black-w: calc(var(--_key-white-w) * 0.62);
  --_key-black-h: calc(var(--_key-white-h) * 0.62);
}

.chord-keyboard {
  display: grid;
  gap: var(--raw-space-sm);
}

.chord-keyboard-viewport {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.chord-keyboard-static,
.chord-keyboard-keys {
  position: relative;
  width: calc(14 * var(--_key-white-w, 2.5rem));
  height: var(--_key-white-h, 10rem);
  flex: none;
}

.key {
  --key-left: 0;

  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: calc(var(--key-left, 0) * var(--_key-white-w, 2.5rem));
  border: var(--sem-ui-border-thin) solid var(--skin-key-border);
}

.key--white {
  z-index: 1;
  width: var(--_key-white-w, 2.5rem);
  height: var(--_key-white-h, 10rem);
  border-radius: 0 0 var(--sem-ui-radius-compact) var(--sem-ui-radius-compact);
  background: var(--skin-key-light);
}

.key--black {
  z-index: 2;
  width: var(--_key-black-w, 1.55rem);
  height: var(--_key-black-h, 6.2rem);
  transform: translateX(-50%);
  border-radius: 0 0 var(--sem-ui-radius-compact) var(--sem-ui-radius-compact);
  background: var(--skin-key-dark);
}

button.key {
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.key-label {
  position: absolute;
  left: 50%;
  bottom: var(--raw-space-4xs);
  transform: translateX(-50%);
  font-size: 0.6875rem;
  line-height: 1.1;
  color: var(--skin-key-label);
  white-space: nowrap;
}

.key--black .key-label {
  bottom: auto;
  top: var(--raw-space-4xs);
  color: var(--skin-key-label-dark);
}

.key--marked .key-label,
.key--midi-marked .key-label {
  color: var(--skin-key-label-marked);
}

.key-dot {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  line-height: 1;
  color: var(--skin-key-root-marker);
}

.key--black .key-dot {
  color: var(--skin-key-label-dark);
}

.key--marked .key-dot,
.key--midi-marked .key-dot {
  color: var(--skin-key-root-marker);
}

.key--marked {
  background: var(--skin-key-selected-background);
  border-color: var(--skin-key-selected-border);
}

.key--midi-marked {
  background: var(--skin-key-midi-background);
  border-color: var(--skin-key-midi-border);
}

.chord-keyboard-actions {
  grid-column: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--raw-space-4xs);
}

.chord-keyboard-button {
  display: inline-flex;
  align-items: center;
  padding-block: var(--sem-ui-padding-block);
  padding-inline: var(--sem-ui-padding-inline);
  border: var(--sem-ui-border-thin) solid var(--skin-border-secondary);
  border-radius: var(--sem-ui-radius-compact);
  background: var(--skin-background-secondary);
  color: var(--skin-interactive-primary);
  font: inherit;
  font-weight: var(--raw-font-weight-semibold);
  line-height: var(--raw-line-height-snug);
  cursor: pointer;
  transition:
    background-color var(--raw-motion-duration-normal) var(--raw-motion-easing-ease-in),
    border-color var(--raw-motion-duration-normal) var(--raw-motion-easing-ease-in),
    color var(--raw-motion-duration-normal) var(--raw-motion-easing-ease-in);
}

.chord-keyboard-button svg {
  inline-size: 1em;
  block-size: 1em;
  flex: none;
}

.chord-keyboard-button:hover:not(:disabled),
.chord-keyboard-button:focus-visible {
  background: var(--skin-background-primary);
  border-color: var(--skin-interactive-primary);
}

.chord-keyboard-button:not(:disabled):active {
  color: var(--skin-interactive-primary-hover);
}

.chord-keyboard-button:disabled {
  color: var(--skin-foreground-secondary);
  border-color: var(--skin-border-secondary);
  background: var(--skin-background-secondary);
  cursor: not-allowed;
}

.chord-keyboard-status {
  min-height: 1.75rem;
}

.chord-keyboard-status-text {
  margin: 0;
  font-weight: var(--raw-font-weight-semibold);
}

/*
 * Stummschalter-Hinweis (role="status"): erscheint unter der Statuszeile,
 * wenn wiederholte Abspielversuche ohne hörbares Ergebnis auf den
 * iOS-Stummschalter hindeuten. Kein Animation, keine Fokusübernahme.
 */
.chord-keyboard-audio-toast {
  margin: var(--raw-space-4xs) 0 0;
  padding: var(--raw-space-4xs) var(--raw-space-3xs);
  border: var(--sem-ui-border-thin) solid var(--skin-border-secondary);
  border-radius: var(--sem-ui-radius-compact);
  background: var(--skin-background-secondary);
  font-size: var(--raw-font-size-sm);
  font-weight: var(--raw-font-weight-semibold);
}

/*
 * Bediensektion wie bei einem echten Instrument: Panel ÜBER den Tasten
 * (Fallboard) mit Mini-Logo, Display und allen Knöpfen (Aktionen + MIDI),
 * Naht an der Unterkante. Explizites Grid (statt Flex-Zeilenumbruch), damit
 * Logo links und Knöpfe rechts garantiert bleiben, egal ob das Display
 * sichtbar ist. Das Panel ist immer dunkel: color-scheme: dark löst alle
 * light-dark()-Tokens in den Dunkelwerten auf.
 *
 * Beim Horizontal-Scroll der Tasten pinnt sich das Panel per sticky an den
 * linken Scrollrand: Breite = Scrollport (stretch), höchstens Klaviaturbreite.
 * So bleiben Aktionen und MIDI-Knopf erreichbar, während die Tasten laufen.
 */
.chord-keyboard-midi {
  --_midi-accent: var(--raw-color-action-dark-500);
  --_midi-chrome: var(--raw-color-key-border-dark-500);

  flex: none;
  box-sizing: border-box;
  position: sticky;
  left: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sem-ui-gap-icon) var(--sem-ui-gap-icon-relaxed);
  width: auto;
  max-width: calc(14 * var(--_key-white-w, 2.5rem));
  padding: var(--raw-space-3xs) var(--raw-space-sm);
  border: var(--sem-ui-border-thin) solid var(--skin-key-border);
  border-bottom: var(--raw-border-width-thick) solid var(--_midi-chrome);
  border-radius: var(--sem-ui-radius-compact) var(--sem-ui-radius-compact) 0 0;
  background: var(--skin-key-dark);
  color-scheme: dark;
}

.chord-keyboard-midi-logo {
  grid-column: 1;
  display: inline-flex;
  color: var(--skin-key-label-dark);
}

.chord-keyboard-midi-logo svg {
  block-size: 1.125rem;
  inline-size: auto;
}

.chord-keyboard-midi .chord-keyboard-button {
  gap: var(--raw-space-4xs);
  padding-block: var(--raw-space-4xs);
  padding-inline: var(--raw-space-3xs);
  border: var(--sem-ui-border-thin) solid var(--_midi-chrome);
  background: transparent;
  color: var(--skin-key-label-dark);
  font-size: var(--raw-font-size-sm);
}

.chord-keyboard-midi .chord-keyboard-button:hover:not(:disabled),
.chord-keyboard-midi .chord-keyboard-button:focus-visible {
  background: var(--_midi-chrome);
  border-color: var(--_midi-chrome);
}

.chord-keyboard-midi .chord-keyboard-button:not(:disabled):active {
  color: var(--skin-key-label-dark);
}

.chord-keyboard-midi .chord-keyboard-button:disabled {
  color: var(--skin-key-label-dark);
  border-color: var(--_midi-chrome);
  background: transparent;
  opacity: 0.5;
}

.chord-keyboard-midi [data-role="midi-connect"]::before {
  content: "";
  inline-size: 0.5em;
  block-size: 0.5em;
  flex: none;
  border-radius: 50%;
  background: var(--_midi-accent);
  opacity: 0.25;
}

.chord-keyboard-midi[data-state="connected"] [data-role="midi-connect"]::before,
.chord-keyboard-midi[data-state="ready-no-input"] [data-role="midi-connect"]::before {
  opacity: 1;
}

.chord-keyboard-midi[data-state="requesting"] [data-role="midi-connect"]::before {
  opacity: 1;
  animation: chord-keyboard-midi-led 1.2s ease-in-out infinite;
}

@keyframes chord-keyboard-midi-led {
  50% {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chord-keyboard-midi[data-state="requesting"] .chord-keyboard-button::before {
    animation: none;
  }
}

.chord-keyboard-midi-status {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--raw-space-4xs);
  margin: 0;
  padding: var(--raw-space-4xs) var(--raw-space-3xs);
  border-radius: var(--sem-ui-radius-compact);
  background: var(--_midi-chrome);
  font-size: var(--raw-font-size-sm);
  font-weight: var(--raw-font-weight-semibold);
  color: var(--skin-key-label-dark);
}

.chord-keyboard-midi-status:empty {
  display: none;
}

.chord-keyboard-midi-hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--raw-font-size-sm);
  color: var(--skin-key-label-dark);
  opacity: 0.75;
}

/*
 * Schmale Screens: Logo ausblenden und Knöpfe kompakter, damit Aktionen,
 * Display und MIDI-Knopf in die sichtbare Chrome-Breite passen (der Chrome
 * ist sticky und damit so breit wie der Scrollport). Anhören und
 * Zurücksetzen werden Icon-only: Das Label bleibt im A11y-Baum, wird aber
 * visuell versteckt; 44px Touch-Breite über Puffer-Padding, weil die
 * a11y-Schicht mit späterer Layer-Priorität nur 24px Mindestbreite setzt.
 */
@media (max-width: 40rem) {
  .chord-keyboard-midi {
    grid-template-columns: 1fr auto;
  }

  .chord-keyboard-midi-logo {
    display: none;
  }

  .chord-keyboard-midi-status {
    grid-column: 1;
  }

  .chord-keyboard-actions {
    grid-column: 2;
  }

  .chord-keyboard-midi .chord-keyboard-button {
    padding-inline: var(--raw-space-4xs);
    font-size: 0.8125rem;
  }

  .chord-keyboard-midi [data-role="play"],
  .chord-keyboard-midi [data-role="reset"] {
    position: relative;
    justify-content: center;
  }

  .chord-keyboard-midi [data-role="play"] .chord-keyboard-button-label,
  .chord-keyboard-midi [data-role="reset"] .chord-keyboard-button-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.chord-keyboard .key:focus-visible {
  outline-offset: -3px;
}

.key--white:focus-visible {
  outline-color: var(--skin-key-label);
}

.key--black:focus-visible {
  outline-color: var(--skin-key-label-dark);
}

.key--marked:focus-visible,
.key--midi-marked:focus-visible {
  outline-color: var(--skin-key-label-marked);
}

/*
 * Components: class per reusable UI element, prefix comp-.
 * Private custom properties (--_*) let modifier classes (is-*) retheme
 * the component without touching its rule block. Icons are inline SVG.
 */
.comp-button {
    --_background: var(--skin-accent-primary);
    --_background-hover: var(--skin-accent-primary-hover);
    --_foreground: var(--skin-accent-on-primary);
    --_foreground-hover: var(--skin-accent-on-primary-hover);
      --_weight: var(--raw-font-weight-semibold);
    --_border-width: var(--sem-ui-border-thin);
    --_border: var(--skin-border-secondary);
    --_radius: var(--sem-ui-radius-compact);
    --_padding-inline: var(--sem-ui-padding-inline);
    --_padding-block: var(--sem-ui-padding-block);
    --_icon-gap: var(--sem-ui-gap-icon);
    --_icon-width: var(--sem-icon-large);
    --_icon-height: var(--sem-icon-large);
    --_font-size: var(--sem-text-role-body-size);

    display: inline-flex;
    align-items: center;
    gap: var(--_icon-gap);
    text-decoration: none;
    line-height: var(--raw-line-height-snug);
    font-size: var(--_font-size);
    transition:
      background-color var(--raw-motion-duration-slow)
        var(--raw-motion-easing-ease-in),
      color var(--raw-motion-duration-normal) var(--raw-motion-easing-ease-in);
    background-color: var(--_background);
    color: var(--_foreground);
    font-weight: var(--_weight);
    padding-inline: var(--_padding-inline);
    padding-block: var(--_padding-block);
    border-radius: var(--_radius);
    border: var(--_border-width) solid var(--_border);
    cursor: pointer;

    &.is-primary {
      --_border-width: 0;
    }

    &.is-link {
      --_background: var(--skin-background-secondary);
      --_foreground: var(--skin-interactive-primary);
      --_background-hover: var(--skin-background-primary);
      --_foreground-hover: var(--skin-interactive-primary-hover);
    }

    &.is-text-link {
    --_weight: var(--raw-font-weight-semibold);
      --_background: var(--skin-background-primary);
      --_foreground: var(--skin-interactive-primary);
      --_background-hover: var(--skin-background-primary);
      --_foreground-hover: var(--skin-interactive-primary-hover);
      --_padding-inline: 0;
      --_padding-block: 0;
      --_border-width: 0;
      --_icon-gap: var(--sem-ui-gap-icon-compact);
    }

    &:hover,
    &:focus-visible {
      background-color: var(--_background-hover);
      color: var(--_foreground-hover);
    }

    svg {
      width: var(--_icon-width);
      height: var(--_icon-height);
    }
  }

  .comp-skiplink {
    &:not(:focus):not(:focus-visible) {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
      text-decoration: none;
    }

    &:focus-visible,
    &:focus {
      border-radius: var(--sem-ui-radius-compact);
      position: absolute;
      z-index: var(--raw-z-index-skiplink);
      top: var(--sem-space-shell-inset);
      left: var(--sem-space-shell-inset-relaxed);
      padding-block: var(--sem-ui-padding-block);
      padding-inline: var(--sem-ui-padding-inline);
      color: var(--skin-interactive-primary);
    }

    &:hover {
      color: var(--skin-interactive-primary-hover);
    }
  }

/*
 * KEYLEY-Komponenten (Spec 11.2). Farben ausschließlich über Skin-Rollen,
 * Typografie über ct-* im Markup. Verwaiste Baseline-Komponenten wurden
 * entfernt; comp-button bleibt erlaubnistverzeichnet (dynamisch in JS erzeugt).
 */

/* Wort-/Bildmarke: Inline-SVG-Logo (Spec 10). currentColor + Skin-Rollen
 * müssen vererben, deshalb kein <img>. */
.comp-site-brand {
  margin: 0;
  display: inline-flex;
  color: var(--skin-logo-foreground);
}

.comp-site-brand svg {
  /* Niedrige Obergrenze: ein hohes Logo drückt die Klaviatur unter den
   * Falz (Spec 13.2). */
  width: clamp(8rem, 20vw, 10.5rem);
  height: auto;
  /* Die Wortmarke nutzt fill="currentColor"; der umgebende Link darf sie
   * nicht auf die Interaktionsfarbe ziehen. */
  color: var(--skin-logo-foreground);
}

/* Token-Fallback für SVG-Präsentationsattribute (Spec 8.3): sollte var()
 * im fill-Attribut nicht aufgelöst werden, setzt CSS dieselben Rollen. */
.comp-site-brand svg path:nth-of-type(1),
.comp-site-brand svg path:nth-of-type(2) {
  fill: var(--skin-logo-pink-1);
}

.comp-site-brand svg path:nth-of-type(3) {
  fill: var(--skin-logo-pink-2);
}

.comp-site-brand svg path:nth-of-type(4) {
  fill: var(--skin-logo-pink-3);
}

.comp-primary-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sem-ui-gap-icon-relaxed);
  list-style: none;
  margin: 0;
  padding: 0;
}

.comp-language-switch ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sem-ui-gap-icon-relaxed);
  list-style: none;
  margin: 0;
  padding: 0;
}

.comp-language-switch [aria-current="page"] {
  font-weight: var(--raw-font-weight-bold);
  text-decoration: underline;
  text-underline-offset: var(--raw-space-4xs);
}

.comp-breadcrumb {
  grid-column-start: 2;
  grid-column-end: -2;
  margin-block-end: var(--sem-space-vertical);
  font-size: var(--sem-text-role-small-size);
}

.comp-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raw-space-4xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.comp-breadcrumb li + li::before {
  content: "›";
  margin-inline-end: var(--raw-space-4xs);
  color: var(--skin-foreground-secondary);
}

.comp-breadcrumb [aria-current="page"] {
  font-weight: var(--raw-font-weight-semibold);
  color: var(--skin-foreground-primary);
}

.comp-chord-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--sem-grid-gap);
  list-style: none;
  margin: var(--sem-space-vertical) 0 0;
  padding: 0;
}

.comp-chord-list a {
  display: grid;
  gap: var(--raw-space-4xs);
  padding: var(--raw-space-sm);
  border: var(--sem-ui-border-thin) solid var(--skin-border-primary);
  border-radius: var(--sem-ui-radius-compact);
  background-color: var(--skin-background-secondary);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--raw-motion-duration-normal) var(--raw-motion-easing-ease-in),
    background-color var(--raw-motion-duration-normal) var(--raw-motion-easing-ease-in);
}

.comp-chord-list a:hover,
.comp-chord-list a:focus-visible {
  border-color: var(--skin-interactive-primary);
  background-color: var(--skin-background-primary);
}

.comp-chord-list .chord-name {
  font-weight: var(--raw-font-weight-bold);
  font-size: var(--sem-text-role-body-size);
  color: var(--skin-interactive-primary);
  text-decoration: underline;
  text-underline-offset: var(--raw-space-4xs);
}

.comp-chord-list .chord-symbol {
  font-weight: var(--raw-font-weight-semibold);
}

.comp-chord-list .chord-notes {
  color: var(--skin-foreground-secondary);
  font-size: var(--sem-text-role-small-size);
}

.related-chords {
  list-style: none;
  margin: var(--sem-space-vertical) 0 0;
  padding: 0;
  display: grid;
  gap: var(--raw-space-3xs);
}

.comp-site-footer {
  color: var(--skin-foreground-secondary);
}

.comp-site-footer p {
  margin: 0;
}

}