/* FLOW Library · Finish 01 · 05.11.2026
   Application-owned styling. Never edit generated tokens or components.
   Precedence: fonts > tokens > bausteine > D1 > bridge > organic-depth > THIS.
   Single decorative gradient per surface; release effect only on pointerup. */
@layer flow.produkt {

:root {
  --lib-finish-edge: linear-gradient(135deg,
    var(--flow-kontur-2-licht) 0%,
    color-mix(in srgb, var(--flow-kontur-2-licht) 60%, var(--flow-kontur-2-mitte)) 22%,
    var(--flow-kontur-2-mitte) 57%,
    var(--flow-kontur-2-schatten) 86%,
    color-mix(in srgb, var(--flow-kontur-2-schatten) 74%, var(--flow-text) 26%) 100%);
  --lib-finish-card-edge: linear-gradient(145deg,
    var(--flow-kontur-3-licht),
    var(--flow-kontur-2-mitte) 45%,
    var(--flow-kontur-2-schatten) 100%);
  --lib-finish-lift: 0 17px 38px color-mix(in srgb, var(--flow-nacht-schwarz) 18%, transparent);
  --lib-finish-search-lift: 0 16px 32px color-mix(in srgb, var(--flow-nacht-schwarz) 23%, transparent),
    0 2px 10px color-mix(in srgb, var(--flow-akzent) 12%, transparent);
  --lib-release-duration: 240ms;
  /* Bewegung (Regelwerk Motion MO1–MO3, 11.11.2026): keine Zahl und keine Kurve mehr in einer Regel. */
  --lib-dauer-heben: 240ms;      /* Suchkapsel und Karte heben sich (vorher 220–260 ms) */
  --lib-druck-licht: .94;        /* Touch: Fläche dunkelt beim Berühren leicht ab – ohne zu schrumpfen */
}

/* 01. SURFACES END AT THE TOP EDGE, NOT BELOW THE HEADER.
   The header capsules sit ABOVE all three surfaces. Main content still begins below the header.
   These are independently rounded panels, with no D1 'book overlap'. */
.flow-shell.lib-buch {
  isolation: isolate;
  grid-template-rows: var(--lib-shell-header) minmax(0, auto);
  align-items: start;
}
.flow-shell.lib-buch > .flow-sidebar-left.lib-panel,
.flow-shell.lib-buch > .flow-main.lib-seite,
.flow-shell.lib-buch > .flow-sidebar-right.lib-kontext {
  grid-row: 1 / span 2;
  margin: 0;
  border: 1.5px solid transparent;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--lib-innenlicht) 21%, transparent), transparent 38%) padding-box,
    linear-gradient(var(--lib-ebene-1), var(--lib-ebene-1)) padding-box,
    var(--lib-finish-edge) border-box;
  box-shadow: var(--lib-ebene-1-schatten), inset 0 1px 0 var(--lib-innenlicht);
}
.flow-shell.lib-buch > .flow-sidebar-left.lib-panel {
  position: sticky;
  top: var(--lib-shell-pad);
  grid-column: 1;
  z-index: 2;
  height: calc(100dvh - 2 * var(--lib-shell-pad));
  max-height: calc(100dvh - 2 * var(--lib-shell-pad));
  padding-top: calc(var(--lib-shell-header) + var(--lib-shell-gap) + var(--flow-abstand-4));
}
.flow-shell.lib-buch > .flow-main.lib-seite {
  position: relative;
  grid-column: 2;
  z-index: 1;
  min-height: calc(100dvh - 2 * var(--lib-shell-pad));
  padding-top: calc(var(--lib-shell-header) + var(--lib-shell-gap) + clamp(var(--flow-abstand-5), 3vw, var(--flow-abstand-7)));
}
.flow-shell.lib-buch > .flow-sidebar-right.lib-kontext {
  position: sticky;
  top: var(--lib-shell-pad);
  grid-column: 3;
  z-index: 2;
  height: calc(100dvh - 2 * var(--lib-shell-pad));
  max-height: calc(100dvh - 2 * var(--lib-shell-pad));
  padding-top: calc(var(--lib-shell-header) + var(--lib-shell-gap) + var(--flow-abstand-4));
}
.flow-shell.lib-buch > .lib-kopf.flow-header {
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: 30;
  align-self: start;
  pointer-events: none; /* transparent gaps never intercept content behind */
}
.flow-shell.lib-buch > .lib-kopf.flow-header > * { pointer-events: auto; }

/* Header is one level higher than the canvas, with progressive edge weight. */
.flow-shell.lib-buch .flow-header__capsule {
  border: 1.5px solid transparent;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--lib-innenlicht) 36%, transparent), transparent 48%) padding-box,
    linear-gradient(var(--lib-ebene-1), var(--lib-ebene-1)) padding-box,
    var(--lib-finish-edge) border-box;
  box-shadow: var(--lib-finish-lift), inset 0 1px 0 var(--lib-innenlicht);
  will-change: auto;
}

/* Search capsule rises toward the viewer only while working with it.
   A gentle entrance / exit, not permanent animation or movement on every mouse hover. */
.flow-shell.lib-buch .lib-suche.flow-header__search {
  transition: transform var(--lib-dauer-heben) var(--flow-bewegung-gleiten),
              box-shadow var(--lib-dauer-heben) var(--flow-bewegung-gleiten),
              border-color var(--lib-dauer-heben) ease;
}
.flow-shell.lib-buch .lib-suche.flow-header__search:focus-within {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--lib-finish-search-lift),
    inset 0 1px 0 var(--lib-innenlicht);
  outline: 2px solid var(--flow-fokus);
  outline-offset: 2px;
}

/* Brand cover stays intentional even before a curated cover asset is provided.
   Once a real image is added by the product, its <img> covers this fallback. */
.flow-shell.lib-buch .flow-sidebar-left .lib-cover {
  border: 1px solid color-mix(in srgb, var(--flow-kontur-3-licht) 65%, transparent);
  background:
    radial-gradient(ellipse 94% 48% at 16% 7%, color-mix(in srgb, var(--flow-orange-nacht) 35%, transparent), transparent 70%),
    radial-gradient(ellipse 75% 85% at 95% 80%, color-mix(in srgb, var(--flow-spektrum-tuerkis) 32%, transparent), transparent 70%),
    linear-gradient(153deg, var(--flow-nacht-navy), var(--flow-nacht-flaeche-2));
}

/* Inner context modules and conventional shelf cards receive the same contour grammar.
   Different weights indicate spatial hierarchy rather than an arbitrary border on hover. */
.flow-shell.lib-buch :is(.flow-side-card, .flow-main .lib-info, .lib-regal:not(.lib-published-card)) {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--lib-ebene-3), var(--lib-ebene-3)) padding-box,
    var(--lib-finish-edge) border-box;
  box-shadow: inset 0 1px 0 var(--lib-innenlicht), var(--lib-ebene-2-schatten);
}
.flow-shell.lib-buch .flow-side-card > a + a {
  border-top: 1px solid color-mix(in srgb, var(--flow-kontur-2-mitte) 65%, transparent);
}

/* 02. CARDS HAVE AN ACTUAL GRADIENT CONTOUR, EVEN WHEN RESTING. */
.flow-shell.lib-buch .lib-published-card {
  overflow: hidden;
  min-width: 0;
  border: 1.5px solid transparent;
  border-radius: var(--flow-radius-l);
  background:
    linear-gradient(var(--lib-ebene-3), var(--lib-ebene-3)) padding-box,
    var(--lib-finish-card-edge) border-box;
  box-shadow: var(--lib-ebene-2-schatten), inset 0 1px 0 var(--lib-innenlicht);
  transition: box-shadow var(--lib-dauer-heben) ease, transform var(--lib-dauer-heben) var(--flow-bewegung-gleiten);
}
.lib-published-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}
.lib-published-card__media {
  position: relative;
  display: block;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--typ) 25%, var(--flow-flaeche-2)),
    var(--flow-flaeche-2));
}
.lib-published-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--flow-dauer-entfalten) var(--flow-bewegung-gleiten);
}
.lib-published-card__media--quiet {
  background:
    radial-gradient(circle at 28% 26%, color-mix(in srgb, var(--typ) 30%, transparent), transparent 50%),
    linear-gradient(145deg, var(--flow-flaeche-2), var(--lib-ebene-3));
}
.lib-published-card__ornament {
  position: absolute;
  width: 52%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--typ) 55%, transparent);
  border-radius: 50%;
  left: 24%;
  top: 4%;
  box-shadow: 0 0 0 28px color-mix(in srgb, var(--typ) 5%, transparent);
}
.lib-published-card__media-label {
  position: absolute;
  left: var(--flow-abstand-3);
  bottom: var(--flow-abstand-3);
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--flow-tinte-held) 44%, transparent);
  border-radius: var(--flow-radius-rund);
  background: color-mix(in srgb, var(--flow-nacht-schwarz) 72%, transparent);
  color: var(--flow-tinte-held);
  font: 750 .7rem/1.3 var(--flow-schrift-text);
  letter-spacing: .075em;
  text-transform: uppercase;
}
.lib-published-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--flow-abstand-3);
  padding: clamp(var(--flow-abstand-4), 2.4vw, var(--flow-abstand-5));
}
.lib-published-card__eyebrow {
  color: var(--typ);
  font: 800 .69rem/1.5 var(--flow-schrift-text);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.lib-published-card__body h3 {
  margin: 0;
  color: var(--flow-text);
  font: 570 clamp(1.35rem, 2.7cqi, 1.82rem)/1.17 var(--flow-schrift-anzeige);
  text-wrap: balance;
}
.lib-published-card__body p {
  color: var(--flow-text-leise);
  margin: 0;
  line-height: 1.6;
  text-wrap: pretty;
}
.lib-published-card__action {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  min-height: var(--flow-groesse-tippflaeche);
  margin-top: auto;
  padding: 8px 17px;
  border: 1px solid var(--flow-kontur-2-mitte);
  border-radius: var(--flow-radius-rund);
  color: var(--flow-akzent);
  background: color-mix(in srgb, var(--flow-flaeche) 80%, transparent);
  font: 740 .85rem/1 var(--flow-schrift-text);
}
@media (hover: hover) and (pointer: fine) {
  .flow-shell.lib-buch .lib-published-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lib-ebene-4-schatten), 0 0 22px color-mix(in srgb, var(--typ) 9%, transparent);
  }
  .lib-published-card:hover img { transform: scale(1.025); }
}
.lib-published-card__link:focus-visible { outline: 3px solid var(--flow-fokus); outline-offset: -3px; }

/* Feature uses the same data-fed card, simply laid out like an editorial spread. */
.lib-featured-slot { margin-top: var(--flow-abstand-4); }
.lib-featured-slot .lib-published-card--featured .lib-published-card__link {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  min-height: 300px;
}
.lib-featured-slot .lib-published-card__media { height: 100%; aspect-ratio: auto; }
.lib-featured-slot .lib-published-card__body { justify-content: center; }
.lib-featured-slot .lib-published-card__body h3 { font-size: clamp(1.8rem, 4cqi, 2.7rem); }

/* 03. VIDEO AND IMAGE STAGE: One source-backed design across Hub, Cinema & entries. */
.lib-media-presentation {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(var(--flow-abstand-4), 3vw, var(--flow-abstand-6));
  align-items: center;
  padding: clamp(var(--flow-abstand-3), 2.6vw, var(--flow-abstand-5));
  margin-block: var(--flow-abstand-4);
  border: 1.5px solid transparent;
  border-radius: var(--flow-radius-xl);
  background:
    linear-gradient(var(--lib-ebene-3), var(--lib-ebene-3)) padding-box,
    linear-gradient(125deg, var(--flow-kontur-3-licht) 0%,
       var(--flow-kontur-2-mitte) 50%, var(--flow-kontur-2-schatten) 100%) border-box;
  box-shadow: var(--lib-ebene-2-schatten),
    0 0 27px color-mix(in srgb, var(--flow-spektrum-tuerkis) 9%, transparent),
    inset 0 1px 0 var(--lib-innenlicht);
}
.lib-media-presentation__visual {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--flow-radius-l);
  background: var(--flow-nacht-schwarz);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--flow-tinte-held) 21%, transparent),
    0 0 26px color-mix(in srgb, var(--flow-spektrum-cyan) 14%, transparent);
}
.lib-media-presentation__visual img,
.lib-media-presentation__video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: var(--flow-nacht-schwarz);
  border-radius: inherit;
}
.lib-media-presentation__visual img { object-fit: cover; }
.lib-media-presentation__visual--portrait img { object-fit: contain; }
.lib-media-presentation__visual--portrait {
  aspect-ratio: auto;
  min-height: min(64vh, 610px);
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--flow-spektrum-cyan) 15%, var(--flow-nacht-schwarz)), var(--flow-nacht-schwarz) 78%);
}
.lib-media-presentation__visual--portrait :is(img, video) {
  width: auto;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  max-height: min(70vh, 680px);
  height: auto;
  box-shadow: 0 0 34px color-mix(in srgb, var(--flow-spektrum-cyan) 23%, transparent);
}
.lib-media-presentation__mark {
  position: absolute;
  z-index: 2;
  left: var(--flow-abstand-3);
  top: var(--flow-abstand-3);
  padding: 6px 11px;
  border: 1px solid color-mix(in srgb, var(--flow-tinte-held) 24%, transparent);
  border-radius: var(--flow-radius-rund);
  color: var(--flow-tinte-held);
  background: color-mix(in srgb, var(--flow-nacht-schwarz) 70%, transparent);
  font: 800 .7rem/1 var(--flow-schrift-text);
  letter-spacing: .1em;
  pointer-events: none;
}
.lib-media-presentation__mark b { color: var(--flow-orange-licht); }
.lib-media-presentation__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--flow-abstand-3);
  min-width: 0;
}
.lib-media-presentation__eyebrow {
  color: var(--flow-akzent);
  font: 800 .71rem/1.35 var(--flow-schrift-text);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lib-media-presentation__title {
  font: 560 clamp(1.7rem, 4cqi, 2.9rem)/1.09 var(--flow-schrift-anzeige);
  color: var(--flow-text);
  text-wrap: balance;
  margin: 0;
}
.lib-media-presentation__copy p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--flow-text-leise);
  margin: 0 0 var(--flow-abstand-2);
}
.lib-media-presentation__abstract {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 18%, color-mix(in srgb, var(--flow-spektrum-amber) 50%, transparent), transparent 57%),
    linear-gradient(130deg, var(--flow-nacht-navy), var(--flow-nacht-flaeche-2));
}
.lib-media-presentation__abstract span {
  width: 56%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--flow-orange-hell) 75%, transparent);
  border-radius: 50%; transform: rotate(-18deg);
  box-shadow: 0 0 0 30px color-mix(in srgb, var(--flow-spektrum-tuerkis) 8%, transparent);
}
.lib-media-presentation--compact { display: block; max-width: 100%; }
.lib-media-presentation--compact .lib-media-presentation__visual { aspect-ratio: 16 / 9; }
.lib-media-presentation--compact .lib-media-presentation__visual--portrait { aspect-ratio: auto; }
.lib-media-presentation__caption {
  margin: var(--flow-abstand-3) var(--flow-abstand-2) 0;
  color: var(--flow-text-leise); font-size: .83rem;
}
.lib-media-navigation-card {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--lib-ebene-3), var(--lib-ebene-3)) padding-box,
    var(--lib-finish-edge) border-box;
}

/* 05. AUSBAU 10.11.2026 · Vorgaben aus Uebergabe Sitzung 2 §7.6 (CC, WORKFLOW und Website gleich):
   Stand-Zeile, „Aktualisiert“-Label, Inhaltsverzeichnis, Downloads, Grenzen. Nur vorhandene Tokens. */
.lib-stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--flow-abstand-2) var(--flow-abstand-3);
  max-width: var(--flow-groesse-lesebreite);
  margin: 0 0 var(--flow-abstand-4);
  padding: var(--flow-abstand-2) var(--flow-abstand-4);
  border: 1px solid var(--flow-notiz-kante);
  border-radius: var(--flow-radius-m);
  background: var(--flow-notiz-flaeche);
  color: var(--flow-notiz-text);
  font: 600 .85rem/1.5 var(--flow-schrift-text);
}
.lib-stand__punkt {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--flow-spektrum-amber);
}
.lib-stand a {
  margin-left: auto;
  color: inherit;
  font-weight: 750;
  text-underline-offset: 3px;
}
.lib-leer .flow-knopf + .flow-knopf { margin-left: var(--flow-abstand-2); }

.lib-published-card__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .35em; }
.lib-published-card__updated {
  margin-left: .35em;
  padding: 2px 9px;
  border: 1px solid color-mix(in srgb, var(--typ) 55%, transparent);
  border-radius: var(--flow-radius-rund);
  color: var(--flow-text);
  font-weight: 750;
  letter-spacing: .06em;
}
/* Karte: Titel hoechstens zwei, Teaser hoechstens drei Zeilen; die grosse Fokuskarte darf ausreden. */
.lib-published-card:not(.lib-published-card--featured) .lib-published-card__body :is(h3, p) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lib-published-card:not(.lib-published-card--featured) .lib-published-card__body h3 { -webkit-line-clamp: 2; line-clamp: 2; }
.lib-published-card:not(.lib-published-card--featured) .lib-published-card__body p { -webkit-line-clamp: 3; line-clamp: 3; }

.lib-inhaltsverzeichnis {
  max-width: var(--flow-groesse-lesebreite);
  margin-top: var(--flow-abstand-5);
  padding: var(--flow-abstand-4) var(--flow-abstand-5);
  border: 1px solid transparent;
  border-radius: var(--flow-radius-l);
  background:
    linear-gradient(var(--lib-ebene-3), var(--lib-ebene-3)) padding-box,
    var(--lib-finish-edge) border-box;
}
.lib-inhaltsverzeichnis h2 {
  margin: 0 0 var(--flow-abstand-2);
  color: var(--flow-text-leise);
  font: 700 .7rem/1.4 var(--flow-schrift-text);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lib-inhaltsverzeichnis ol { margin: 0; padding-left: 1.4em; display: grid; gap: 2px; }
.lib-inhaltsverzeichnis a {
  display: inline-flex;
  align-items: center;
  min-height: var(--flow-groesse-tippflaeche);
  font-weight: 600;
  text-underline-offset: 3px;
}
.lib-text[id] { scroll-margin-top: calc(var(--lib-shell-header) + 2 * var(--lib-shell-pad)); }

.lib-downloads { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--flow-abstand-2); }
.lib-downloads a {
  display: flex;
  align-items: center;
  gap: var(--flow-abstand-3);
  min-height: var(--flow-groesse-tippflaeche);
  padding: var(--flow-abstand-3) var(--flow-abstand-4);
  border: 1px solid transparent;
  border-radius: var(--flow-radius-m);
  background:
    linear-gradient(var(--lib-ebene-3), var(--lib-ebene-3)) padding-box,
    var(--lib-finish-edge) border-box;
  color: inherit;
  text-decoration: none;
}
.lib-downloads a > span:last-child { display: grid; gap: 2px; min-width: 0; }
.lib-downloads b { overflow-wrap: anywhere; }
.lib-downloads small {
  color: var(--flow-text-leise);
  font: 600 .72rem/1.4 var(--flow-schrift-text);
  letter-spacing: .08em;
}
.lib-grenzen { max-width: var(--flow-groesse-lesebreite); margin-top: var(--flow-abstand-5); font-size: .95rem; }
.lib-grenzen p { margin: var(--flow-abstand-2) 0 0; }
@media (max-width: 520px) {
  .lib-stand a { margin-left: 0; }
  .lib-blaettern { grid-template-columns: 1fr; }
}

/* 04. RELEASE-ONLY TOUCH LIGHT: 240 ms; NO HELD-DOWN 'BOUNCE'.
   The pulse node is installed by flow-touch-release.js on a valid release, not press.
   Its ring/halo are local to the control; no continuously running filters or timers. */
.flow-shell :where(button, a[href]).is-flow-releasing { position: relative; }
.flow-release-halo {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 8;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
.flow-release-halo::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    var(--flow-kontur-3-licht),
    var(--flow-kontur-3-mitte) 48%,
    var(--flow-kontur-3-schatten));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.flow-release-halo::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--flow-akzent) 40%, transparent),
              0 0 22px 5px color-mix(in srgb, var(--flow-akzent) 34%, transparent);
}
.is-flow-releasing > .flow-release-halo {
  animation: lib-release-arc var(--lib-release-duration) var(--flow-bewegung-gleiten) both;
}
/* A localized, restrained color boost on ordinary buttons, not on full-size images or panels. */
.flow-shell :is(button, .flow-knopf, .flow-vorschau, .flow-chip, .flow-header__login).is-flow-releasing {
  animation: lib-release-color var(--lib-release-duration) var(--flow-bewegung-gleiten) both;
}
@keyframes lib-release-color {
  0%   { filter: saturate(1) brightness(1); }
  40%  { filter: saturate(1.23) brightness(1.065); }
  100% { filter: saturate(1) brightness(1); }
}
@keyframes lib-release-arc {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  100% { opacity: 0; }
}
@media (hover: none) and (pointer: coarse) {
  /* FLOW Tokens 2.1 default :active scale causes an unwanted bounce on every tap.
     Keep the bespoke shelf disclosure animation; ordinary controls do not shrink. */
  .flow-shell :is(button, a[href], summary):active { transform: none !important; }
  .flow-shell .is-federt { animation: none !important; }

  /* Touch 11.11.2026 (Regel I2/I3, Recherche „Rückmeldung ab der Berührung“): Vorher gab es beim Berühren gar
     keine Antwort der Seite – nur die graue Tippmarkierung des Browsers, danach das Licht beim Loslassen und
     190 ms Wartezeit vor jedem Seitenwechsel. Jetzt: die Fläche dunkelt beim Berühren ab (kein Schrumpfen),
     die Browser-Markierung entfällt, der Seitenwechsel startet sofort. Das Licht beim Loslassen bleibt. */
  .flow-shell { -webkit-tap-highlight-color: transparent; }
  .flow-shell :is(button, a[href], summary):not(:disabled, [aria-disabled="true"]):active {
    filter: brightness(var(--lib-druck-licht));
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-flow-releasing > .flow-release-halo { animation: none; }
  .flow-shell :is(button, .flow-knopf, .flow-vorschau, .flow-chip, .flow-header__login).is-flow-releasing { animation: none; }
  .flow-shell.lib-buch .lib-suche.flow-header__search,
  .lib-published-card__media img,
  .flow-shell.lib-buch .lib-published-card { transition: none; }
}

/* Responsive: min-width is the content column, not device width. */
@container lib-seite (max-width: 780px) {
  .lib-media-presentation { grid-template-columns: 1fr; }
  .lib-featured-slot .lib-published-card--featured .lib-published-card__link { grid-template-columns: 1fr; }
  .lib-featured-slot .lib-published-card__media { height: auto; aspect-ratio: 16 / 10; }
}
@media (max-width: 1439px) {
  .flow-shell.lib-buch > .flow-sidebar-right.lib-kontext { display: none; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .flow-zone-schalter__text { display: none; }
}
@media (max-width: 900px) {
  .flow-shell.lib-buch > .flow-sidebar-left.lib-panel {
    position: fixed;
    z-index: 40;
    grid-column: auto;
    padding-top: var(--flow-abstand-4);
    height: auto;
    max-height: none;
    margin: 0;
  }
  .flow-shell.lib-buch > .flow-main.lib-seite {
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-top: calc(var(--lib-shell-header) + var(--lib-shell-gap) + var(--flow-abstand-4));
    min-height: calc(100dvh - 2 * var(--lib-shell-pad));
  }
}
@media (max-width: 520px) {
  .flow-shell.lib-buch > .flow-main.lib-seite { padding-inline: var(--flow-abstand-4); }
  .lib-published-card__body { padding: var(--flow-abstand-4); }
  .lib-media-presentation { padding: var(--flow-abstand-2); }
  .lib-media-presentation__visual--portrait { min-height: auto; }
  .lib-media-presentation__visual--portrait :is(img, video) { max-height: min(67dvh, 580px); }
}
@media print {
  .flow-shell.lib-buch > .flow-main.lib-seite { padding-top: 0; }
  .flow-release-halo { display: none; }
  /* Film wird nicht gedruckt; MediaStageFrame liefert dafuer das Standbild als .lib-nur-druck. */
  .lib-media-presentation__video, .lib-media-presentation__mark { display: none; }
  .lib-media-presentation__visual:has(> .lib-media-presentation__video) { display: none; }
}
@media (forced-colors: active) {
  .flow-shell.lib-buch > .flow-sidebar-left.lib-panel,
  .flow-shell.lib-buch > .flow-main.lib-seite,
  .flow-shell.lib-buch > .flow-sidebar-right.lib-kontext,
  .flow-shell.lib-buch .flow-header__capsule,
  .flow-shell.lib-buch .lib-published-card,
  .lib-media-presentation {
    background: Canvas;
    border: 1px solid CanvasText;
    box-shadow: none;
  }
  .flow-release-halo { display: none; }
}
}