/* Cascade-Layer flow.produkt (05.11.2026, P3)
   Diese Datei bindet die FLOW-Tokens an die Library. Sie lag bisher ungeschichtet und stand damit
   ueber @layer flow.tokens und @layer flow.bausteine, unabhaengig von jeder Spezifitaet.
   flow.produkt wird als letzte Schicht deklariert und behaelt deshalb genau denselben Vorrang,
   jetzt aber sichtbar und steuerbar. Reihenfolge: flow.tokens, flow.bausteine, flow.produkt. */
@layer flow.produkt {
/* FLOW Library | ORGANIC LAYERED DEPTH | 05.11.2026
   A thin, app-owned semantic layer. Source colors, type, spacing and radii
   remain the generated FLOW Tokens 2.1; D1 and bridge are not duplicated.
   Load AFTER flow-blazor-bridge.css. No continuous blur/compositor surfaces.
   Layer order: background > surface > card > content > interaction. */

/* Die Rollen stehen jetzt einmalig in flow-blazor-bridge.css (--lib-ebene-*). */

/* Opaque, theme-aware layers preserve text contrast without backdrop-filter.
   The inner light edge gives depth with one inexpensive inset shadow. */
.flow-island,
.flow-header__capsule {
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--lib-innenlicht) 18%, transparent),
      transparent 34%),
    var(--lib-ebene-1);
  color: var(--lib-inhalt);
  border-color: var(--lib-ebene-1-kante);
  box-shadow:
    var(--lib-ebene-1-schatten),
    inset 0 1px 0 var(--lib-innenlicht);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The bridge uses higher-specificity selectors for these islands. */
.flow-sidebar-left.lib-panel,
.flow-main.lib-seite,
.flow-sidebar-right.lib-kontext {
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--lib-innenlicht) 12%, transparent),
      transparent 34%),
    var(--lib-ebene-1);
  box-shadow:
    var(--lib-ebene-1-schatten),
    inset 0 1px 0 var(--lib-innenlicht);
}

/* Cards are one level above their parent; selected/hovered states still use
   the canonical FLOW 2.1 interaction and focus tokens. */
.flow-side-card,
.flow-sidebar-right .lib-info,
.flow-main .lib-info {
  background: var(--lib-ebene-3);
  border-color: var(--lib-ebene-3-kante);
  border-radius: var(--lib-ebene-3-radius);
  box-shadow:
    var(--lib-ebene-1-schatten),
    inset 0 1px 0 var(--lib-innenlicht);
}

@media (hover: hover) and (pointer: fine) {
  .lib-regal:hover {
    box-shadow:
      var(--lib-ebene-4-schatten),
      inset 0 1px 0 var(--lib-innenlicht);
  }
}
.lib-bogen--ruhe {
  box-shadow:
    var(--lib-ebene-2-schatten),
    inset 0 0 0 1px var(--lib-ebene-1-kante);
}

/* Focus remains visible even though the search input has outline:0 in the
   layout bridge. Focus is drawn on the enclosing, labelled search capsule. */
.lib-suche.flow-header__search:focus-within {
  outline: 3px solid var(--flow-fokus);
  outline-offset: 3px;
}
.flow-main.lib-seite:focus {
  outline: 3px solid var(--flow-fokus);
  outline-offset: 3px;
}

/* Static radial glows replace the previous fixed 96px filter blur and infinite
   transforms. This keeps the mood without continuous large-area repainting. */
.flow-ambient {
  opacity: .19;
  filter: none;
  animation: none;
  background: radial-gradient(circle,
    var(--lib-ambient-farbe) 0%,
    transparent 68%);
}
.flow-ambient--a { --lib-ambient-farbe: var(--flow-spektrum-violett); }
.flow-ambient--b { --lib-ambient-farbe: var(--flow-spektrum-cyan); }
.flow-ambient--c { --lib-ambient-farbe: var(--flow-spektrum-rot); }

/* No glass repaint on smaller interactive controls either. The mobile
   header inherited blur from historic D1, and secondary buttons from 2.1. */
.lib-kopf.flow-header,
.flow-knopf--zweit,
.lib-schleier {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 900px) {
  .flow-ambient { opacity: .1; }
}

/* System high-contrast mode: the decorative gradients never replace real
   borders, readable text, or the focus indicator. */
@media (forced-colors: active) {
  .flow-island,
  .flow-header__capsule,
  .flow-side-card,
  .flow-sidebar-right .lib-info,
  .flow-main .lib-info {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    box-shadow: none;
  }
  .lib-suche.flow-header__search:focus-within,
  .flow-main.lib-seite:focus {
    outline: 3px solid Highlight;
  }
}
}
/* Ende @layer flow.produkt */