/*
 * Stilprofil „flaeche“: das Material von Kopfzeile und Karten (E-053).
 *
 * Zweck: Ob eine Site wie gedrucktes Papier oder wie Milchglas wirkt, ist
 * eine Entscheidung für alle Abschnitte zugleich. Die Site wählt sie in
 * `site.config.json` unter `stil.flaeche`; der Build schreibt sie als
 * `data-flaeche` an `<html>`:
 *
 *   matt    nichts hiervon greift – wie vor E-053
 *   papier  feines Punktraster auf den Abschnitten, Karten ohne Rand mit
 *           weichem Schatten, als lägen sie auf dem Papier
 *   glas    Kopfzeile und Karten aus Milchglas: durchscheinend, unscharf
 *           dahinter, Lichtkante oben
 *
 * Rückfall (Accessibility First): Wer im System „Transparenz reduzieren“
 * eingestellt hat oder einen Browser ohne `backdrop-filter` benutzt, bekommt
 * statt Glas eine volle Fläche. Durchscheinend ohne Unschärfe wäre schlechter
 * lesbar als beides.
 *
 * Zusammenspiel: wird nach `base.css` geladen. Die Stellschrauben sind
 * optionale Tokens aus `tokens.contract.css`. Frei von festen Farben – das
 * prüft `tests/unit/tokens.test.js`.
 */

/* ---- papier ---------------------------------------------------------------
   Das Raster liegt auf allen Abschnitten außer dem Hero: Dort liegen Fotos,
   und ein Punktmuster darüber sähe nach Bildstörung aus. */

[data-flaeche='papier'] main > .section:not(.hero) {
  background-image: radial-gradient(
    color-mix(in srgb, var(--text) var(--papier-punkt), transparent) 0.55px,
    transparent 0.75px
  );
  background-size: var(--papier-raster) var(--papier-raster);
}

/* Gleiche Spezifität wie die Regel in base.css, die Karten auf der zweiten
   Fläche einfärbt – geladen danach, gewinnt also diese. */
[data-flaeche='papier'] main > .section :is(.card, .step) {
  border-color: transparent;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--text) 6%, transparent),
    0 10px 28px color-mix(in srgb, var(--text) 7%, transparent);
}

/* ---- glas ---------------------------------------------------------------- */

[data-flaeche='glas'] .site-header {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--surface-1) 90%, transparent),
    color-mix(in srgb, var(--surface-1) var(--glas-deckkraft), transparent)
  );
  -webkit-backdrop-filter: blur(var(--glas-unschaerfe)) saturate(180%);
  backdrop-filter: blur(var(--glas-unschaerfe)) saturate(180%);
  border-bottom-color: color-mix(in srgb, var(--surface-1) 90%, transparent);
  box-shadow:
    0 10px 32px color-mix(in srgb, var(--text) 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--surface-1) 95%, transparent);
}

[data-flaeche='glas'] main > .section :is(.card, .step) {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--surface-1) 92%, transparent),
    color-mix(in srgb, var(--surface-1) var(--glas-deckkraft), transparent) 42%,
    color-mix(in srgb, var(--surface-2) 88%, transparent)
  );
  -webkit-backdrop-filter: blur(var(--glas-unschaerfe)) saturate(180%);
  backdrop-filter: blur(var(--glas-unschaerfe)) saturate(180%);
  border-color: color-mix(in srgb, var(--surface-1) 90%, transparent);
  box-shadow:
    0 18px 40px color-mix(in srgb, var(--text) 8.5%, transparent),
    0 3px 10px color-mix(in srgb, var(--text) 4%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--surface-1) 98%, transparent);
}

/* ---- Rückfall: volle Fläche statt Glas ---------------------------------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-flaeche='glas'] .site-header,
  [data-flaeche='glas'] main > .section :is(.card, .step) {
    background: var(--surface-1);
  }
}

@media (prefers-reduced-transparency: reduce) {
  [data-flaeche='glas'] .site-header,
  [data-flaeche='glas'] main > .section :is(.card, .step) {
    background: var(--surface-1);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--border);
  }
}