/* site.css — Gestaltung der Webseiten-Fassung.
 *
 * Alles Farbige und alle Maße kommen aus den Tokens des gebundenen Design-Systems
 * (_ds/…/tokens/). Hier steht kein einziger Hex-Wert: das ist die Regel aus
 * CLAUDE.md, und sie gilt für die Seite genauso wie für ein Kartenblatt. Wo ein
 * Zwischenton gebraucht wird, entsteht er per color-mix aus zwei Tokens — abgeleitet
 * statt neu erfunden.
 *
 * Die Sprache ist die des Systems: eine zentrierte Spalte, Radius 0, Hierarchie aus
 * Linien und Weißraum statt aus Erhebung, Gentium für Gelesenes, Noto Sans Mono für
 * Maßliches. Diese Fassung ist ein erster Aufschlag — der Feinschliff kommt upstream,
 * deshalb steckt die Gestaltung hier und nicht in Inline-Stilen.
 *
 * @layer legt die Kaskade fest, statt sie über Selektorgewicht auszufechten: die
 * Tokens des Design-Systems kommen zuerst, diese Seite baut darauf auf und gewinnt
 * ohne !important.
 */

@layer grundlage, aufbau, ansichten;

@layer grundlage {
  :root {
    --akzent: var(--petrol);
    --spalte: var(--content-width);
    /* Abgeleitet, nicht erfunden: eine Spur Fläche unter dem Zeiger. */
    --hover-flaeche: color-mix(in oklab, var(--surface-card) 70%, var(--paper));
  }

  body {
    margin: 0;
    background: var(--surface-page);
    color: var(--text-body);
    font: var(--base-font-weight) var(--base-font-size) / var(--base-line-height) var(--font-serif);
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
  }

  /* Die dunkle Oberkante mit Haarlinie darunter — das Kopfmotiv des Systems. */
  .oberkante { border-block-start: var(--border-masthead); }
  .haarlinie { block-size: 1px; background: var(--border-hairline); }

  :is(.kopf, .fuss, .inhalt) {
    max-inline-size: var(--spalte);
    margin-inline: auto;
    box-sizing: border-box;
    inline-size: 100%;
    padding-inline: var(--page-gutter);
  }

  :is(h1, h2, h3) {
    font-weight: var(--weight-bold);
    letter-spacing: var(--heading-tracking);
    text-wrap: balance;
  }

  a {
    color: var(--link-color);
    text-underline-offset: 3px;

    &:hover {
      color: var(--link-hover);
      text-decoration-thickness: 2.5px;
    }
  }

  .mono { font: 500 13px/1.5 var(--font-mono); letter-spacing: .03em; }
  .zahl { font: 500 1em var(--font-mono); color: var(--akzent); }
  .laedt { color: var(--text-muted); font-style: italic; margin-block-start: var(--spacing-unit); }
}

@layer aufbau {
  .kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-half);
    padding-block: 14px;
    flex-wrap: wrap;

    .marke {
      display: flex;
      align-items: center;
      gap: 9px;
      text-decoration: none;
      color: var(--text-body);
      font: 500 13px/1 var(--font-mono);
      letter-spacing: .08em;
      text-transform: uppercase;

      & img { display: block; }
    }
  }

  .nav {
    display: flex;
    gap: var(--spacing-half);

    & a {
      font: 500 13px/1 var(--font-mono);
      letter-spacing: .04em;
      color: var(--text-muted);
      text-decoration: none;
      padding-block: 4px;
      border-block-end: 2px solid transparent;

      &:hover { color: var(--text-body); }
      &.aktiv { color: var(--text-body); border-block-end-color: var(--akzent); }
    }
  }

  .inhalt {
    flex: 1;
    padding-block-end: 60px;
    /* Container statt Viewport: die Ansichten unten fragen die Spaltenbreite ab,
       nicht die Fensterbreite — dieselbe Seite bliebe damit auch in einem
       schmaleren Rahmen richtig gesetzt. */
    container: inhalt / inline-size;
  }

  h1 {
    font-size: var(--h1-size);
    line-height: 1.15;
    margin-block: 44px 0;
  }
  .regel { block-size: 2px; background: var(--text-body); margin-block-start: var(--spacing-half); }

  h2 { font-size: 27px; margin-block: 46px 0; }
  h3 { font-size: var(--h3-size); margin-block: var(--spacing-unit) var(--spacing-quarter); }

  .vorspann {
    font-size: 21px;
    line-height: 1.45;
    color: var(--grey-dark);
    margin-block: 26px 0;
    text-wrap: pretty;
  }
  .abschnitt-text {
    color: var(--grey-dark);
    font-size: 16px;
    margin-block: 10px 0;
    text-wrap: pretty;
  }

  .knopf {
    font: 500 13px/1 var(--font-mono);
    letter-spacing: .06em;
    color: var(--text-body);
    background: var(--surface-card);
    border: 1px solid var(--border-emphasis);
    border-radius: var(--radius-none);
    padding: 9px 16px;
    cursor: pointer;

    &:hover { background: var(--surface-muted); }
    &:focus-visible { outline: 2px solid var(--border-emphasis); outline-offset: 2px; }
  }

  .fuss {
    border-block-start: 1px solid var(--border-hairline);
    padding-block: 18px 40px;
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-half);
    flex-wrap: wrap;
    font: 500 12px/1.6 var(--font-mono);
    letter-spacing: .04em;
    color: var(--text-muted);

    /* Das eine Zahlen-Gimmick des Dokuments — mehr erlaubt CLAUDE.md nicht. */
    .sp-137-zimmer-inline {
      border: 1px solid var(--border-hairline);
      padding-inline: 7px;
      padding-block: 1px;
      letter-spacing: .12em;
      color: var(--text-body);
    }
  }
}

@layer ansichten {
  /* ---- Startseite: die drei Stränge ------------------------------------ */

  .straenge {
    margin-block-start: 34px;
    border-block-start: 2px solid var(--text-body);
  }

  .strang {
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-areas: "nr titel" "nr text";
    gap: 2px var(--spacing-half);
    padding-block: var(--spacing-half);
    border-block-end: 1px solid var(--border-hairline);
    text-decoration: none;
    color: inherit;

    &:hover { background: var(--hover-flaeche); }

    .strang-nr {
      grid-area: nr;
      font: 500 13px/1.5 var(--font-mono);
      color: var(--akzent);
      letter-spacing: .1em;
    }
    .strang-titel { grid-area: titel; font-size: 19px; font-weight: var(--weight-bold); }
    .strang-text {
      grid-area: text;
      font-size: 16px;
      color: var(--grey-dark);
      text-wrap: pretty;
    }
  }

  .zufall-block {
    margin-block-start: var(--spacing-unit);
    display: flex;
    align-items: baseline;
    gap: var(--spacing-half);
    flex-wrap: wrap;

    & p { margin: 0; color: var(--text-muted); font-style: italic; }
  }

  .hinweis {
    margin-block-start: var(--spacing-unit);
    border-inline-start: 2px solid var(--border-hairline);
    padding-inline-start: 20px;

    & p { margin: 0; text-wrap: pretty; }
  }

  /* ---- Schaukasten ----------------------------------------------------- */

  .kasten {
    margin-block-start: var(--spacing-unit);
    border-block-start: 2px solid var(--text-body);
  }

  .blatt {
    display: flex;
    gap: var(--spacing-half);
    align-items: flex-start;
    padding-block: var(--spacing-half);
    border-block-end: 1px solid var(--border-hairline);
    text-decoration: none;
    color: inherit;

    &:hover { background: var(--hover-flaeche); }

    .blatt-sig {
      flex: none;
      inline-size: 104px;
      margin-block-start: 5px;

      & svg { display: block; overflow: visible; }
    }
    .blatt-text { flex: 1; min-inline-size: 0; }
    .blatt-kopf {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: baseline;
    }
    .blatt-titel { font-size: 19px; font-weight: var(--weight-bold); }
    .blatt-datei {
      font: 500 12px/1 var(--font-mono);
      color: var(--text-muted);
      letter-spacing: .03em;
      white-space: nowrap;
    }
    .blatt-beschreibung {
      display: block;
      font-size: 16px;
      color: var(--grey-dark);
      margin-block-start: 4px;
      text-wrap: pretty;
    }
  }

  .kasten.schmal .blatt-sig { display: none; }

  /* Ein Fall, der nicht aufgeht, verschwindet nicht — er bekommt eine eigene
     Klasse. Dieselbe Regel wie auf den Kartenblättern für eine Sorte ohne Eintrag. */
  .fehlfall {
    margin-block-start: var(--spacing-unit);
    border: 1px dashed var(--border-emphasis);
    padding: var(--spacing-half);
    font-size: 16px;

    .fehlfall-grund { color: var(--text-muted); font-size: 14px; }
  }

  /* ---- Register -------------------------------------------------------- */

  .filterleiste {
    display: flex;
    gap: var(--spacing-half);
    align-items: center;
    flex-wrap: wrap;
    margin-block: var(--spacing-unit) var(--spacing-half);
    padding-block-end: var(--spacing-half);
    border-block-end: 2px solid var(--text-body);

    & :is(input, select) {
      font: 400 16px/1.4 var(--font-serif);
      color: var(--text-body);
      background: var(--paper-white);
      border: 1px solid var(--border-emphasis);
      border-radius: var(--radius-none);
      padding: 7px 10px;

      &:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
    }
    & input { flex: 1; min-inline-size: 200px; }

    .treffer { font: 500 13px/1 var(--font-mono); color: var(--text-muted); }
  }

  .tabelle-rahmen { overflow-x: auto; margin-block-start: var(--spacing-half); }

  table {
    border-collapse: collapse;
    inline-size: 100%;
    font-size: 16px;

    & :is(th, td) { text-align: start; padding: 7px 12px 7px 0; vertical-align: top; }

    & thead th {
      font: 500 11px/1 var(--font-mono);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text-muted);
      border-block-end: 1px solid var(--border-hairline);
      padding-block-end: 9px;
    }
    & tbody tr { border-block-end: 1px solid var(--border-hairline); }
  }

  .register {
    & tbody tr:hover { background: var(--hover-flaeche); }

    .variante { color: var(--text-muted); font-size: 14px; }
    .offen { color: var(--text-muted); font-style: italic; font-size: 14px; }

    .anmerkung td {
      border: 0;
      padding-block: 0 9px;
      color: var(--text-muted);
      font-size: 14px;
      font-style: italic;
    }
  }

  /* Auf schmalen Spalten wird aus der Tabelle ein Registereintrag nach dem Vorbild
     des gebundenen Bandes: Name, Art und Blatt in einer Zeile, der Wert darunter,
     der Belegstatus rechts. Grund ist nicht die Breite an sich, sondern die
     Verteilung — drei der sechs Spalten sind bei drei Vierteln der Einträge leer
     (feld 86/272, wert 70/272, variante 32/272), das Spaltenraster reserviert also
     durchgehend Platz für Ausnahmen. Es verschwindet nichts, es wird umgesetzt. */
  @container inhalt (inline-size < 40rem) {
    .register {
      & :is(thead) { display: none; }

      & tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: .4em;
        padding-block: 9px;
      }

      & td {
        display: inline;
        padding: 0;
        border: 0;
      }

      /* Leere Zellen nehmen keinen Platz — sonst bliebe die Trennpunktkette hängen. */
      & td:empty { display: none; }

      .z-name { font-size: 17px; }
      .z-art::before { content: '· '; color: var(--text-muted); }
      .z-blatt { color: var(--text-muted); }
      .z-blatt::before { content: '· Blatt '; }
      .z-feld::before { content: '· Feld '; color: var(--text-muted); }
      /* „Feld offen“ trägt das Wort schon selbst — dann nur der Trennpunkt. */
      .z-feld:has(.offen)::before { content: '· '; }

      /* Der Status wird nach rechts geschoben, der Wert bekommt eine eigene Zeile. */
      .z-status { margin-inline-start: auto; }
      .z-wert {
        flex-basis: 100%;
        color: var(--grey-dark);
        margin-block-start: 3px;
        text-wrap: pretty;
      }

      .anmerkung td { padding-block: 0 9px; }
    }
  }

  /* Belegstatus: drei Register, sichtbar unterschieden — ohne neue Farbe. */
  .status {
    font: 500 12px/1 var(--font-mono);
    letter-spacing: .04em;

    &.status-belegt { color: var(--olive); }
    &.status-abgeleitet { color: var(--akzent); }
    &.status-unbelegt { color: var(--error); }
  }

  /* ---- Werkstatt ------------------------------------------------------- */

  .doks {
    margin-block-start: var(--spacing-half);
    border-block-start: 1px solid var(--border-hairline);
    display: grid;
    grid-template-columns: 1fr;
  }

  @container inhalt (inline-size > 34rem) {
    .doks { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  }

  .dok {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px var(--spacing-half) 12px 0;
    border-block-end: 1px solid var(--border-hairline);
    text-decoration: none;
    color: inherit;

    &:hover { background: var(--hover-flaeche); }

    .dok-titel { font-size: 17px; }
  }

  .dok-pfad {
    font: 500 12px/1.4 var(--font-mono);
    color: var(--text-muted);
    letter-spacing: .03em;
  }

  .dokument-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-half);
    margin-block-start: var(--spacing-unit);
    padding-block-end: 9px;
    border-block-end: 1px solid var(--border-hairline);
    flex-wrap: wrap;

    .zurueck {
      font: 500 13px/1 var(--font-mono);
      text-decoration: none;
      color: var(--text-muted);

      &:hover { color: var(--text-body); }
    }
  }

  .gliederung {
    margin-block-start: var(--spacing-unit);
    border-inline-start: 2px solid var(--border-hairline);
    padding: 4px 0 4px 16px;

    .gliederung-titel {
      font: 500 11px/1 var(--font-mono);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-block-end: 8px;
    }

    & a {
      display: block;
      font-size: 15px;
      padding-block: 2px;
      text-decoration: none;
      color: var(--grey-dark);

      &:hover { color: var(--link-hover); text-decoration: underline; }
      &.ebene-3 { padding-inline-start: 16px; font-size: 14px; }
    }
  }

  /* ---- Prosa: gerendertes Markdown ------------------------------------- */

  .prosa {
    margin-block-start: var(--spacing-unit);

    & h1 { font-size: 32px; margin-block-start: var(--spacing-unit); }
    & h2 {
      font-size: 24px;
      margin-block-start: var(--spacing-unit);
      padding-block-start: var(--spacing-half);
      border-block-start: 1px solid var(--border-hairline);
    }
    & h3 { font-size: 19px; }
    & img { max-inline-size: 100%; block-size: auto; border: var(--border-frame); }
    & blockquote {
      margin-block: var(--spacing-half);
      padding-inline-start: 20px;
      border-inline-start: 2px solid var(--border-hairline);
      color: var(--grey-dark);
    }
    & hr { border: 0; border-block-start: var(--border-rule-thin); margin-block: var(--spacing-unit); }
    & li { margin-block-end: 5px; text-wrap: pretty; }
    & :is(td, th) { padding-inline-end: 18px; }
  }

  /* Auf schmalen Spalten fällt die Signatur weg und der Blattkopf bricht um.
     Container Query, nicht Media Query: es geht um den Platz, den die Spalte hat. */
  @container inhalt (inline-size < 34rem) {
    .blatt {
      .blatt-sig { display: none; }
      .blatt-kopf { flex-direction: column; gap: 2px; }
      .blatt-datei { white-space: normal; }
    }
    h1 { margin-block-start: var(--spacing-unit); }
  }
}