/* ==========================================================================
   layout.css — Raster, Kopf- und Fußzeile, Abschnitte, Seitenübergänge.
   ========================================================================== */

@layer layout {

  /* --- Seitenübergänge ------------------------------------------------
     Übergänge zwischen echten Seiten, ohne eine Zeile JavaScript. Browser
     ohne Unterstützung navigieren regulär; es gibt keinen Ersatzpfad zu
     pflegen. */

  @view-transition { navigation: auto; }

  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
      animation: vt-out 160ms var(--ease) both;
    }
    ::view-transition-new(root) {
      animation: vt-in 260ms var(--ease) both;
    }
  }

  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }

  /* Kopf- und Fußzeile bleiben über den Seitenwechsel hinweg stehen. */
  .site-header { view-transition-name: site-header; }
  .site-footer { view-transition-name: site-footer; }

  /* --- Grundgerüst ---------------------------------------------------- */

  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-sm);
    inset-block-start: var(--space-sm);
    z-index: 100;
    padding: var(--space-2xs) var(--space-sm);
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    translate: 0 -200%;
    transition: translate var(--dur) var(--ease);
  }

  .skip-link:focus-visible { translate: 0 0; }

  .container {
    inline-size: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
  }

  .container--text { max-inline-size: var(--container-text); }

  main { flex: 1; }

  /* --- Kopfzeile ------------------------------------------------------ */

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
    border-block-end: 1px solid transparent;
  }

  /* Die Trennlinie erscheint beim Scrollen — aus dem Compositor, nicht aus
     einem Scroll-Listener. */
  @supports (animation-timeline: scroll()) {
    .site-header {
      animation: header-settle linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100px;
    }
  }

  @keyframes header-settle {
    to { border-block-end-color: var(--line); }
  }

  /* Leseforschritt der Seite, direkt unter der Kopfzeile. Reines CSS: die
     Balkenbreite ist an den Scrollfortschritt des Dokuments gekoppelt,
     ohne einen einzigen Scroll-Listener in JavaScript. Läuft, wie die
     Trennlinie darüber, im Compositor statt im Hauptthread. */
  .scroll-progress {
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 2px;
    background: var(--accent);
    transform-origin: left;
    scale: 0 1;
  }

  @supports (animation-timeline: scroll()) {
    .scroll-progress {
      animation: scroll-progress linear both;
      animation-timeline: scroll(root block);
    }
  }

  @keyframes scroll-progress {
    from { scale: 0 1; }
    to   { scale: 1 1; }
  }

  /* Kein prefers-reduced-motion-Ausschluss, aus demselben Grund wie bei
     header-settle darüber: Die Bewegung ist 1:1 an die Scrollposition der
     Nutzerin gekoppelt, nicht autonom — das ist nicht die Art von Bewegung,
     die die Einstellung abschalten soll. */

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    block-size: var(--header-h);
  }

  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    color: var(--ink);
  }

  .wordmark__name {
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -.03em;
  }

  .wordmark__rule {
    inline-size: 1px;
    block-size: .8125rem;
    background: var(--line-strong);
  }

  .wordmark__suffix {
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .wordmark:hover { color: var(--accent); }

  .site-nav { margin-inline-start: auto; }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }

  .site-nav__link {
    font-size: var(--text-sm);
    letter-spacing: -.008em;
    color: var(--muted);
    text-decoration: none;
    padding-block: .35rem;
  }

  .site-nav__link:hover,
  .site-nav__link[aria-current="page"] { color: var(--ink); }

  .site-nav__link[aria-current="page"] {
    box-shadow: inset 0 -1px 0 0 var(--accent);
  }

  .header-tools {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
  }

  .header-cta {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-sm);
    border: 1px solid var(--ink);
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: var(--paper);
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }

  .header-cta:hover {
    border-color: var(--accent-solid);
    background: var(--accent-solid);
    color: var(--accent-ink);
  }

  .nav-toggle { display: none; }

  /* --- Abschnitte ------------------------------------------------------ */

  .section { padding-block: var(--space-2xl); }
  .section--tight { padding-block: var(--space-xl); }
  /* Abgesetzte Abschnitte tragen eine sehr feine Rasterung — dieselbe
     Punktmatrix, die auch hinter der Systemskizze auf der Startseite liegt.
     Sie ist bewusst kaum wahrnehmbar: Sie soll die technische Herkunft der
     Seite andeuten, nicht als Muster auffallen. */
  .section--sunk {
    position: relative;
    background: var(--surface-sunk);
  }

  .section--sunk::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--line) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: .5;
    pointer-events: none;
  }

  /* Der Inhalt muss über der Rasterung liegen. */
  .section--sunk > * { position: relative; }

  .section + .section--sunk,
  .section--sunk + .section { border-block-start: var(--border); }

  .section__head {
    display: grid;
    gap: var(--space-sm);
    max-inline-size: 46rem;
    margin-block-end: var(--space-lg);
  }

  /* Hinweis: Hier stand content-visibility: auto. Bei Seitenlängen um die
     5000 px ist der eingesparte Renderaufwand nicht messbar, während die
     geschätzte Ersatzhöhe die Scrollposition springen lassen kann. Der
     Klassenname bleibt als Gliederungshilfe im Markup erhalten. */

  /* --- Raster ---------------------------------------------------------- */

  .grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  }

  .grid--halves {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  }

  /* --- Fußzeile -------------------------------------------------------- */

  .site-footer {
    border-block-start: var(--border);
    background: var(--surface-sunk);
    padding-block: var(--space-xl) var(--space-md);
    margin-block-start: var(--space-2xl);
  }

  .site-footer__grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    padding-block-end: var(--space-lg);
  }

  .site-footer__brand { max-inline-size: 22rem; }

  .site-footer__tagline {
    margin-block-start: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--muted);
  }

  .site-footer__title {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    font-weight: 500;
    letter-spacing: var(--track-mono);
    text-transform: uppercase;
    color: var(--muted);
    margin-block-end: var(--space-xs);
  }

  .site-footer__list { display: grid; gap: .4rem; font-size: var(--text-sm); }
  .site-footer__list a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    text-decoration: none;
    color: var(--ink-soft);
  }
  .site-footer__list a:hover { color: var(--accent); }

  .site-footer__base {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    align-items: center;
    justify-content: space-between;
    padding-block-start: var(--space-md);
    border-block-start: var(--border);
    font-size: var(--text-xs);
    color: var(--muted);
  }

  /* --- Mobil ----------------------------------------------------------- */

  @media (width < 48rem) {

    .header-cta { display: none; }

    .nav-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-inline-size: var(--touch-target);
      min-block-size: var(--touch-target);
      border: var(--border);
      border-radius: var(--radius-sm);
      color: var(--ink);
    }

    .site-nav {
      position: fixed;
      inset: var(--header-h) 0 auto 0;
      background: var(--paper);
      border-block-end: var(--border);
      padding: var(--space-md) var(--gutter) var(--space-lg);
      display: grid;
      transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
    }

    .site-nav[hidden] {
      display: grid;
      opacity: 0;
      translate: 0 -.5rem;
      pointer-events: none;
      visibility: hidden;
    }

    .site-nav__list {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }

    .site-nav__link {
      display: block;
      padding-block: var(--space-xs);
      font-size: var(--text-lead);
      border-block-end: var(--border);
    }

    .site-nav__link[aria-current="page"] { box-shadow: none; color: var(--accent); }
  }

  /* --- Einblenden beim Scrollen ----------------------------------------
     Ersetzt die frühere Animationsbibliothek vollständig. Läuft im
     Compositor und ist bei reduzierter Bewegung komplett abgeschaltet. */

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .reveal {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 6% cover 24%;
      }
    }
  }

  @keyframes reveal {
    from { opacity: 0; translate: 0 1.25rem; }
    to   { opacity: 1; translate: 0 0; }
  }

  /* --- Druck -----------------------------------------------------------
     Im Druckbild gibt es kein Scrollen, also läuft auch keine
     scroll-gesteuerte Animation. Ohne diese Rücknahme käme alles, was
     .reveal trägt, unsichtbar aus dem Drucker — besonders heikel bei den
     Rechtstexten. */

  @media print {
    .reveal {
      animation: none !important;
      opacity: 1 !important;
      translate: none !important;
    }

    .site-header,
    .nav-toggle,
    .theme-toggle,
    .skip-link,
    .filter__bar { display: none !important; }

    .site-footer { margin-block-start: var(--space-md); }

    a { text-decoration: none; }

    /* Zieladressen mitdrucken, damit Verweise im Papierausdruck nachvollziehbar bleiben. */
    .prose a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
  }
}