@layer blocks {
/*
 * Content blocks: one class per CMS block type, prefix block-.
 * Every block is a direct child of [data-layout="page"] (a 12-column grid
 * with outer gutters). The base rule places blocks into the inner columns
 * (2 … -2). Full-bleed blocks span 1 … -1 and re-enter the content columns
 * via subgrid, so their children align with every other block on the page.
 */
:where([class^="block-"]) {
    grid-column-start: 2;
    grid-column-end: -2;

    h2 {
      margin-block-end: var(--sem-space-vertical);
    }

    /* Gleicher Rhythmus in allen Breiten; weiter Abstand über der Klaviatur
     * würde sie unter den Falz schieben (Spec 13.2). */
    margin-block-end: var(--sem-space-vertical-section-compact);
  }

  /* Intro block: single measure of prose under the top of the page. */
  .block-intro {
    max-width: var(--raw-content-width-prose);
  }

  /* Akkordseite (Spec 11.2): Fließtext mit lesbarer Zeilenlänge. */
  .block-chord-intro {
    max-width: var(--raw-content-width-prose);
  }

  .block-chord-theory {
    max-width: var(--raw-content-width-prose);
  }

  .block-practice {
    max-width: var(--raw-content-width-prose);
  }

  .block-related-chords {
    max-width: var(--raw-content-width-prose);
  }

  /* Die Klaviatur darf breiter als der Fließtext laufen (Spec 11.3):
   * volle Inhaltsbreite, kein pros-Maß. Begleitender Text bleibt im Maß. */
  .block-keyboard {
    p {
      max-width: var(--raw-content-width-prose);
    }
  }

  /* Übersichtsseite: Abschnitte mit Akkordlisten (Einstieg, Dur, Moll). */
  .block-chord-section {
  }

  /* Startseite: FAQ als native <details>-Elemente (v1.3 Abschnitt 13). */
  .block-faq {
    details + details {
      margin-block-start: var(--raw-space-3xs);
    }

    summary {
      font-weight: var(--raw-font-weight-semibold);
      cursor: pointer;
    }
  }

  /*
   * Cheat-Sheet (Spec 05 v1.4): privates, nicht verlinktes und druckbares
   * Übersichtsblatt aller 24 Akkorde. Karten sind reine Inhalte ohne Links
   * oder Buttons. Die Klaviaturgrafik bleibt mit festen Farben hell/dunkel,
   * damit Light- und Dark-Theme sowie Schwarzweißdruck die Tasten nie
   * semantisch invertieren. Aktive Tasten tragen drei unabhängige Signale:
   * Akzentfüllung, starke Innenkontur und Punkt mit Notennamen.
   */
  .block-cheat-page {
  }

  /* Die allgemeine block-Regel oben verteilt margin-block-end an alle
   * block-*-Klassen; die kompakten Cheat-Sheet-Boxen setzen ihre Abstände
   * selbst und erben sie deshalb bewusst nicht. Flex-Items werden
   * blockified und würden die Kopfzeilen sonst aufblähen. */
  .block-cheat-page-head,
  .block-cheat-brand,
  .block-cheat-hint,
  .block-cheat-grid,
  .block-cheat-card,
  .block-cheat-card-head,
  .block-cheat-symbol,
  .block-cheat-notes {
    margin-block-end: 0;
  }

  .block-cheat-page-head h2 {
    margin-block-start: 0;
    margin-block-end: 0;
  }

  .block-cheat-section {
  }

  .block-cheat-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--raw-space-4xs) var(--raw-space-sm);
  }

  /* Wortmarke ausschließlich für die kompakte Druck-Kopfzeile. */
  .block-cheat-brand {
    display: none;
    margin: 0;
    font-weight: var(--raw-font-weight-bold);
  }

  .block-cheat-hint {
    margin: 0;
    font-size: var(--raw-font-size-sm);
    color: var(--skin-foreground-secondary);
  }

  .block-cheat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raw-space-3xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @container layout (width >= 36rem) {
    .block-cheat-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @container layout (width >= 52rem) {
    .block-cheat-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @container layout (width >= 64rem) {
    .block-cheat-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .block-cheat-card {
    border: var(--sem-ui-border-thin) solid var(--skin-border-secondary);
    border-radius: var(--sem-ui-radius-compact);
    background: var(--skin-background-primary);
    padding: var(--raw-space-3xs);
  }

  .block-cheat-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--raw-space-4xs);
    margin-block-end: var(--raw-space-4xs);
  }

  .block-cheat-card h3 {
    margin: 0;
    font-size: var(--raw-font-size-lg);
  }

  .block-cheat-symbol {
    font-size: var(--raw-font-size-lg);
    font-weight: var(--raw-font-weight-bold);
  }

  .block-cheat-notes {
    margin: 0 0 var(--raw-space-4xs);
  }

  .block-cheat-card .cheat-kbd {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Tastenkörper folgen denselben Skin-Rollen wie die interaktive
   * Klaviatur; hell bleibt hell, dunkel bleibt dunkel. */
  .cheat-kbd .kbd-white {
    fill: var(--skin-key-light, #f4efe6);
    stroke: var(--skin-key-border, #4c4348);
    stroke-width: 0.8;
  }

  .cheat-kbd .kbd-black {
    fill: var(--skin-key-dark, #1c1c1c);
    stroke: var(--skin-key-dark, #1c1c1c);
  }

  .cheat-kbd .kbd-white.is-active {
    fill: var(--skin-key-selected-background, #ffdbea);
  }

  /* Markierungen in fester Druckfarbe: die tiefe Akzenttinte bleibt auf
   * beiden Themes und im Schwarzweißdruck dunkel genug, das helle Signal
   * hebt sich vom schwarzen Tastenkörper ab. */
  .cheat-kbd .kbd-contour-white {
    fill: none;
    stroke: #74234b;
    stroke-width: 1.3;
  }

  .cheat-kbd .kbd-contour-black {
    fill: none;
    stroke: #ffffff;
    stroke-width: 1;
  }

  .cheat-kbd .kbd-dot-white {
    fill: #74234b;
  }

  .cheat-kbd .kbd-dot-black {
    fill: #74234b;
    stroke: #ffffff;
    stroke-width: 0.7;
  }

  .cheat-kbd .kbd-name {
    font-size: 4px;
  }

  .cheat-kbd .kbd-name-white {
    fill: #1c1c1c;
  }

  .cheat-kbd .kbd-name-black {
    fill: #1c1c1c;
    stroke: #ffffff;
    stroke-width: 0.9;
    paint-order: stroke;
  }

  /*
   * Drucklayout (Spec 05 v1.4 Abschnitt 11): genau zwei A4-Seiten quer
   * bei 100 Prozent. Benannte @page-Regel, damit der Rest der Website sein
   * Druckverhalten behält. Vier Spalten, drei Zeilen, kartengenauer
   * Umbruchschutz, kompakte Kopfzeile je Druckseite.
   */
  @media print {
    @page cheat-sheet {
      size: A4 landscape;
      margin: 8mm;
    }

    body:has(.block-cheat-page) [data-layout="topbar"],
    body:has(.block-cheat-page) [data-layout="footer"],
    body:has(.block-cheat-page) .comp-skiplink {
      display: none;
    }

    .block-cheat-page {
      page: cheat-sheet;
      display: block;
    }

    .block-cheat-page .block-intro {
      display: none;
    }

    .block-cheat-brand {
      display: block;
      font-size: 11pt;
    }

    .block-cheat-page-head h2 {
      font-size: 15pt;
    }

    .block-cheat-hint {
      font-size: 9pt;
    }

    .block-cheat-section[data-quality="major"] {
      break-after: page;
    }

    .block-cheat-section[data-quality="minor"] {
      margin-block-end: 0;
    }

    .block-cheat-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 2.5mm;
    }

    .block-cheat-grid li,
    .block-cheat-card {
      break-inside: avoid;
    }

    .block-cheat-card {
      padding: 2.5mm;
      border-width: 0.4mm;
      border-radius: 0;
    }

    .block-cheat-card h3 {
      font-size: 13pt;
    }

    .block-cheat-symbol {
      font-size: 13pt;
    }

    .block-cheat-notes {
      font-size: 10.5pt;
    }

    .block-cheat-card .cheat-kbd {
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
    }
  }

}