/* Arsenal · Gallery · Stage
   All styles of the gallery. Classes gb-, tokens --gb-*. Always dark, independent of the theme of the app.
   Dark stage style (own design).
   Applies under the content policy of the app frame: no url(), no font file, no inline style.
   Specification: GALERIE-VORGABEN.md (same folder). */

/* ---------- 1. Tokens ---------- */
.gb-galerie {
  /* Ground and surfaces: cool black-blue, three levels */
  --gb-grund: oklch(.16 .012 255);
  --gb-flaeche: oklch(.21 .014 255);
  --gb-flaeche-2: oklch(.25 .016 255);
  --gb-tief: oklch(.12 .01 255);
  --gb-linie: oklch(.30 .014 255);
  --gb-linie-stark: oklch(.42 .018 255);
  /* Text */
  --gb-text: oklch(.95 .006 255);
  --gb-leise: oklch(.72 .012 255);
  --gb-still: oklch(.64 .012 255);
  /* Light: warm amber, the only accent; plus copper and green only for states in tiles */
  --gb-licht: oklch(.82 .13 78);
  --gb-licht-text: oklch(.2 .02 80);
  --gb-kupfer: oklch(.68 .14 50);
  --gb-ok: oklch(.78 .15 150);
  --gb-kalt: oklch(.74 .08 235);
  /* Stage of a tile: spot from above on a deep ground */
  --gb-buehne: radial-gradient(120% 85% at 50% -12%, oklch(.82 .13 78 / .11), oklch(.82 .13 78 / .03) 48%, transparent 72%), var(--gb-tief);
  /* Typeface: system fonts only (no font file allowed) */
  --gb-schrift: "Inter Tight", "Inter", "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --gb-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  /* Dimensions */
  --gb-rand: 24px;
  --gb-luecke: 12px;
  --gb-fuge: 8px; /* gap of the mosaic (14.6) */
  --gb-r-kachel: 8px;
  --gb-r-dialog: 14px;
  --gb-r-feld: 6px;
  /* Motion */
  --gb-ease: cubic-bezier(.2, .7, .2, 1);
  --gb-aus: cubic-bezier(.16, 1, .3, 1);
  --gb-feder: cubic-bezier(.34, 1.56, .64, 1);
  --gb-kurz: 180ms;
  --gb-mittel: 450ms;

  container: gb / inline-size;
  position: relative;
  min-height: 100%;
  isolation: isolate;
  background: var(--gb-grund);
  color: var(--gb-text);
  font: 400 13.5px/1.5 var(--gb-schrift);
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
  overflow-x: clip;
}
.gb-galerie *, .gb-galerie *::before, .gb-galerie *::after { box-sizing: border-box; }
.gb-galerie :where(h1, h2, h3, p, ul, ol, figure, pre) { margin: 0; }
.gb-galerie :where(ul, ol) { padding: 0; list-style: none; }
.gb-galerie :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.gb-galerie :where(a) { color: inherit; text-decoration: none; }
.gb-galerie :where(svg) { display: block; }
/* Focus: the ring follows the radius of the element (pills and round buttons round); no radius of its own that changes the shape */
.gb-galerie :focus-visible { outline: 2px solid var(--gb-licht); outline-offset: 3px; }

/* Light of the stage: a warm spot behind the header, like above the title of the demo */
.gb-galerie::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -260px; width: min(1300px, 170%); aspect-ratio: 1.7; translate: -50% 0;
  background: radial-gradient(closest-side, oklch(.78 .09 80 / .17), oklch(.78 .09 80 / .05) 55%, transparent);
}

/* ---------- 2. Header ---------- */
.gb-kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 24px;
  padding: 20px var(--gb-rand) 20px;
}
.gb-zurueck {
  grid-column: 1 / -1; justify-self: start;
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px 0 6px; margin-left: -6px;
  border-radius: 99px; color: var(--gb-leise); font-size: 12.5px;
  transition: color var(--gb-kurz), background-color var(--gb-kurz);
}
.gb-zurueck:hover { color: var(--gb-text); background: oklch(1 0 0 / .06); }
.gb-zurueck svg { width: 14px; height: 14px; }
.gb-zeile { font: 500 10.5px/1.4 var(--gb-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gb-leise); }
.gb-titel h1 { margin-top: 6px; font-size: 44px; line-height: .95; font-weight: 600; letter-spacing: -.045em; }
.gb-satz { margin-top: 10px; max-width: 56ch; color: var(--gb-leise); font-size: 13.5px; text-wrap: pretty; }
.gb-kopf-rechts { display: flex; align-items: center; gap: 8px; }

/* Industry: native select in pill shape (14.3); arrow made of two borders, no image */
.gb-branche { position: relative; display: inline-flex; flex: none; height: 36px; color: var(--gb-leise); }
.gb-branche select {
  appearance: none; -webkit-appearance: none; height: 36px; padding: 0 32px 0 14px; cursor: pointer;
  border: 1px solid var(--gb-linie); border-radius: 99px; background: oklch(.21 .014 255 / .6); color: var(--gb-text);
  font: inherit; font-size: 12.5px; transition: border-color var(--gb-kurz);
}
.gb-branche select:hover { border-color: var(--gb-linie-stark); }
.gb-branche select option { background: var(--gb-flaeche); color: var(--gb-text); }
.gb-branche::after {
  content: ""; position: absolute; right: 15px; top: 50%; width: 6px; height: 6px; pointer-events: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; translate: 0 -70%; rotate: 45deg;
}

/* Search */
.gb-suche {
  display: flex; align-items: center; gap: 8px; width: 240px; height: 36px; padding: 0 12px;
  border: 1px solid var(--gb-linie); border-radius: 99px; background: oklch(.21 .014 255 / .6); color: var(--gb-leise);
  transition: border-color var(--gb-kurz);
}
.gb-suche:hover, .gb-suche:focus-within { border-color: var(--gb-linie-stark); }
/* Focus of the search on the whole field (round), the inner input without a ring of its own */
.gb-galerie .gb-suche:focus-within { outline: 2px solid var(--gb-licht); outline-offset: 3px; }
.gb-galerie .gb-suche input:focus, .gb-galerie .gb-suche input:focus-visible { outline: 0; }
.gb-suche svg { flex: none; width: 15px; height: 15px; }
.gb-suche input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--gb-text); font: inherit; font-size: 13px; }
.gb-suche input::placeholder { color: var(--gb-still); }
.gb-galerie .gb-suche-knopf { display: none; }

/* Round buttons (motion, narrow search, close, paging) */
.gb-rund {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 99px;
  border: 1px solid var(--gb-linie); color: var(--gb-leise); background: oklch(.21 .014 255 / .6);
  transition: color var(--gb-kurz), border-color var(--gb-kurz), background-color var(--gb-kurz), scale .12s;
}
.gb-rund:hover { color: var(--gb-text); border-color: var(--gb-linie-stark); }
.gb-rund:active { scale: .94; }
.gb-rund svg { width: 16px; height: 16px; }
.gb-rund[disabled] { opacity: .4; cursor: default; }

/* Motion switch: word and shape, never color alone */
.gb-schalter {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; flex: none;
  border: 1px solid var(--gb-linie); border-radius: 99px; color: var(--gb-leise); font-size: 12.5px; white-space: nowrap;
  transition: color var(--gb-kurz), border-color var(--gb-kurz);
}
.gb-schalter:hover { color: var(--gb-text); border-color: var(--gb-linie-stark); }
.gb-schalter .gb-punkt { width: 8px; height: 8px; border-radius: 99px; border: 1.5px solid currentColor; }
.gb-schalter[aria-pressed="true"] .gb-punkt { border-color: var(--gb-licht); background: var(--gb-licht); box-shadow: 0 0 10px oklch(.82 .13 78 / .7); }
.gb-schalter .gb-wert { font: 500 11px/1 var(--gb-mono); color: var(--gb-text); }

/* ---------- 3. Category bar ---------- */
.gb-leiste {
  position: sticky; top: 0; z-index: 5;
  padding: 0 var(--gb-rand);
  background: linear-gradient(var(--gb-grund) 78%, oklch(.16 .012 255 / 0));
}
.gb-leiste-spur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0 14px; }
.gb-pille {
  display: inline-flex; align-items: center; gap: 7px; flex: none; height: 34px; padding: 0 13px; scroll-snap-align: start;
  border: 1px solid var(--gb-linie); border-radius: 99px; color: var(--gb-leise); font-size: 12.5px; white-space: nowrap;
  transition: color .2s, border-color .2s, background-color .2s, scale .12s;
}
.gb-pille:hover { color: var(--gb-text); border-color: var(--gb-linie-stark); }
.gb-pille:active { scale: .96; }
.gb-pille .gb-zahl { font: 500 10.5px/1 var(--gb-mono); color: var(--gb-still); font-variant-numeric: tabular-nums; }
.gb-pille[aria-pressed="true"] { background: var(--gb-text); border-color: var(--gb-text); color: var(--gb-grund); font-weight: 600; }
.gb-pille[aria-pressed="true"] .gb-zahl { color: oklch(.16 .012 255 / .7); }
.gb-pille[aria-disabled="true"] { opacity: .45; cursor: default; }
.gb-trenner { flex: none; width: 1px; height: 20px; margin: 0 4px; background: var(--gb-linie); }

/* Level 2: subkinds of the chosen kind, smaller pills, chosen only with a light outline (level 1 stays the full pill) */
.gb-leiste-unter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -6px; padding: 0 var(--gb-rand) 14px; }
.gb-leiste-unter[hidden] { display: none; }
.gb-pille-klein { height: 30px; padding: 0 11px; gap: 6px; font-size: 12px; }
.gb-pille-klein[aria-pressed="true"] { background: oklch(1 0 0 / .1); border-color: var(--gb-text); color: var(--gb-text); font-weight: 600; }
.gb-pille-klein[aria-pressed="true"] .gb-zahl { color: var(--gb-leise); }

/* Counter line below the bar */
.gb-stand {
  display: flex; justify-content: space-between; gap: 16px; padding: 0 var(--gb-rand) 12px;
  font: 400 11px/1.4 var(--gb-mono); color: var(--gb-still); font-variant-numeric: tabular-nums;
}
.gb-stand b { color: var(--gb-leise); font-weight: 500; }

/* ---------- 4. Mosaic (14.6) ---------- */
/* One grid per group with square cells; dense fills gaps next to large tiles. Columns by width of the gallery. */
.gb-gruppen { display: grid; gap: 30px; padding: 0 var(--gb-rand) 48px; }
.gb-gruppe { display: grid; gap: 10px; min-width: 0; }
.gb-raster {
  --gb-spalten: 4;
  display: grid; grid-template-columns: repeat(var(--gb-spalten), minmax(0, 1fr)); gap: var(--gb-fuge);
  grid-auto-rows: calc((100cqw - 2 * var(--gb-rand) - (var(--gb-spalten) - 1) * var(--gb-fuge)) / var(--gb-spalten));
  grid-auto-flow: row dense;
}
/* Fallback: grid directly in the gallery (old markup) */
.gb-galerie > .gb-raster { padding: 0 var(--gb-rand) 48px; }
.gb-raster:has(> .gb-leer) { grid-auto-rows: auto; }
@container gb (min-width: 1240px) { .gb-raster { --gb-spalten: 5; } }
@container gb (max-width: 899px) { .gb-raster { --gb-spalten: 3; } }
/* Narrow (2 columns): cells portrait 4:5, so enough stage remains above the caption */
@container gb (max-width: 599px) {
  .gb-raster { --gb-spalten: 2; grid-auto-rows: calc((100cqw - 2 * var(--gb-rand) - var(--gb-fuge)) / 2 * 1.25); }
}

/* Group title above the grid: mono, line to the edge */
.gb-abschnitt {
  display: flex; align-items: baseline; gap: 12px;
  font: 500 10.5px/1.4 var(--gb-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gb-leise);
}
.gb-abschnitt::after { content: ""; flex: 1; height: 1px; background: var(--gb-linie); translate: 0 -3px; }
.gb-abschnitt .gb-zahl { color: var(--gb-still); }
/* Fallback old markup: title as a row in the grid */
.gb-raster > .gb-abschnitt { grid-column: 1 / -1; align-self: end; padding: 20px 0 2px; }
.gb-raster > .gb-abschnitt:first-child { padding-top: 0; }

/* ---------- 5. Tile frame (mosaic, 14.6) ---------- */
/* Area by format; deep ground without a border; preview on top (flex 1), caption below on the same ground */
.gb-kachel {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate;
  background: var(--gb-tief); border-radius: var(--gb-r-kachel);
}
.gb-kachel[data-format="2x1"], .gb-kachel[data-format="2x2"] { grid-column: span 2; }
.gb-kachel[data-format="1x2"], .gb-kachel[data-format="2x2"] { grid-row: span 2; }

/* Stage light: when the pointer is over a tile, the others in the same group recede (like the model) */
.gb-kachel::after {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  background: var(--gb-grund); opacity: 0; transition: opacity var(--gb-mittel) var(--gb-ease);
}
@media (hover: hover) {
  .gb-raster:has(.gb-kachel:hover) .gb-kachel:not(:hover)::after { opacity: .42; }
}
/* Selected (large view open or last open): ring over the whole tile */
.gb-kachel::before { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; }
.gb-kachel.gb-gewaehlt::before { box-shadow: inset 0 0 0 2px var(--gb-licht); }

/* Live preview: stage with spot, size container for the tile (cqw, cqh, cqmin); 4:3 in dialogs */
.gb-vorschau {
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 3;
  container-type: size; border-radius: var(--gb-r-kachel) var(--gb-r-kachel) 0 0;
  background: var(--gb-buehne); color: var(--gb-text);
}
.gb-kachel > .gb-vorschau { flex: 1 1 0; min-height: 0; aspect-ratio: auto; border-radius: 0; }
.gb-vorschau-wirt, .gb-vorschau > [class^="k-"] { position: absolute; inset: 0; }
/* Paused: motion off (switch in the header); the runtime pauses JS tiles via hilfe.schleife */
.gb-galerie.gb-angehalten .gb-vorschau *, .gb-galerie.gb-angehalten .gb-vorschau *::before, .gb-galerie.gb-angehalten .gb-vorschau *::after { animation-play-state: paused !important; }

/* Buttons top right: code and large; visible on hover or focus, on touch only large and always */
.gb-tasten { position: absolute; z-index: 3; top: 8px; right: 8px; display: flex; gap: 6px; }
.gb-code-knopf, .gb-gross-knopf {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px;
  background: oklch(.16 .012 255 / .62); border: 1px solid oklch(1 0 0 / .14); color: var(--gb-text);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity var(--gb-kurz) var(--gb-ease), background-color var(--gb-kurz), color var(--gb-kurz), scale .12s;
}
.gb-code-knopf svg, .gb-gross-knopf svg { width: 14px; height: 14px; }
.gb-kachel:hover :is(.gb-code-knopf, .gb-gross-knopf), .gb-kachel:focus-within :is(.gb-code-knopf, .gb-gross-knopf) { opacity: 1; }
.gb-code-knopf:hover, .gb-gross-knopf:hover { background: var(--gb-licht); border-color: var(--gb-licht); color: var(--gb-licht-text); }
.gb-code-knopf:active, .gb-gross-knopf:active { scale: .94; }
/* old markup: large button directly in the li */
.gb-kachel > .gb-gross-knopf { position: absolute; z-index: 3; top: 8px; right: 8px; }
/* Touch: only large, always visible (like the plus in the model), a bit smaller */
@media (hover: none) {
  .gb-gross-knopf { opacity: 1; width: 28px; height: 28px; }
  .gb-code-knopf { display: none; }
  .gb-tasten { top: 6px; right: 6px; }
}

/* Caption below the preview: name up to 2 lines, kind below it; short text only at 2x2 */
.gb-info { position: relative; z-index: 2; flex: none; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 2px 12px 11px; }
.gb-name-zeile { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gb-name {
  min-width: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; line-height: 17px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word; text-wrap: pretty;
}
/* Kind line: display name (“Buttons · JS”), never the key; no all caps, line height keeps diacritics inside the box (GALERIE-VORGABEN 14.9) */
.gb-art { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 11px/15px var(--gb-mono); letter-spacing: .01em; color: var(--gb-still); }
.gb-art.gb-art-js::after { content: " · JS"; }
.gb-art.gb-art-js:empty::after { content: "JS"; }
.gb-art:empty:not(.gb-art-js) { display: none; }
.gb-kurz {
  display: none; max-width: 52ch; color: var(--gb-leise); font-size: 12.5px; line-height: 1.45; text-wrap: pretty;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.gb-kachel[data-format="2x2"] .gb-kurz { display: -webkit-box; }
.gb-fuss { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; min-width: 0; }
.gb-kachel .gb-fuss { display: none; } /* old markup: path and text button no longer belong in the tile */

/* Full bleed (photo, film, building block image): preview fills the tile, caption over a gradient */
.gb-kachel:is([data-unterart="bild"], [data-unterart="video"], [data-typ="baustein"]) > .gb-vorschau { position: absolute; inset: 0; }
.gb-kachel:is([data-unterart="bild"], [data-unterart="video"], [data-typ="baustein"]) > .gb-info {
  position: absolute; inset: auto 0 0; pointer-events: none; padding-top: 40px;
  background: linear-gradient(oklch(.1 .01 255 / 0), oklch(.1 .01 255 / .82) 62%);
}
.gb-kachel:is([data-unterart="bild"], [data-unterart="video"], [data-typ="baustein"]) .gb-art { color: var(--gb-leise); }

/* Path: mono, one line, shortened at the front (rtl plus bdi ltr), full path in the title */
.gb-pfad {
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  direction: rtl; text-align: left; font: 400 10.5px/1.6 var(--gb-mono); color: var(--gb-still);
}
.gb-pfad bdi { direction: ltr; unicode-bidi: isolate; }

/* Button “Show code” and other text buttons */
.gb-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; height: 28px; padding: 0 12px;
  border: 1px solid var(--gb-linie); border-radius: 99px; color: var(--gb-text); font-size: 12px; font-weight: 500; white-space: nowrap;
  transition: border-color .2s, background-color .2s, color .2s, scale .12s;
}
.gb-knopf:hover { border-color: var(--gb-text); }
.gb-knopf:active { scale: .96; }
.gb-knopf svg { width: 13px; height: 13px; }
.gb-knopf-voll { background: var(--gb-text); border-color: var(--gb-text); color: var(--gb-grund); }
.gb-knopf-voll:hover { background: var(--gb-licht); border-color: var(--gb-licht); color: var(--gb-licht-text); }
.gb-knopf-gross { height: 36px; padding: 0 16px; font-size: 13px; }

/* Preview kinds for building blocks (image on canvas) and library (code excerpt) */
.gb-vorschau canvas.gb-bild { position: absolute; inset: 0; width: 100%; height: 100%; }
.gb-marke {
  position: absolute; z-index: 2; top: 10px; left: 10px; height: 22px; padding: 0 8px; display: inline-flex; align-items: center;
  border-radius: 99px; background: oklch(.16 .012 255 / .7); border: 1px solid oklch(1 0 0 / .12);
  font: 500 10px/1 var(--gb-mono); letter-spacing: .06em; color: var(--gb-text);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* In the mosaic the caption is at the bottom: the ID of the building block is at top left (app.css puts it at the bottom in dialogs) */
.gb-kachel > .gb-vorschau .gb-marke.gb-marke-unten { top: 10px; bottom: auto; }
.gb-auszug {
  position: absolute; inset: 0; padding: 44px 16px 16px; overflow: hidden;
  font: 400 10.5px/1.6 var(--gb-mono); color: var(--gb-leise); white-space: pre-wrap; word-break: break-word;
  mask-image: linear-gradient(#000 62%, transparent); -webkit-mask-image: linear-gradient(#000 62%, transparent);
}

/* States of the preview */
.gb-vorschau[data-zustand="laedt"]::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, oklch(1 0 0 / .05) 50%, transparent 70%) 0 0 / 220% 100%;
  animation: gb-schimmer 1.4s linear infinite;
}
@keyframes gb-schimmer { from { background-position: 120% 0; } to { background-position: -100% 0; } }
.gb-vorschau[data-zustand="fehler"] {
  display: grid; place-content: center; gap: 6px; padding: 16px; text-align: center;
  background: var(--gb-tief); outline: 1px dashed var(--gb-linie-stark); outline-offset: -8px;
}
.gb-vorschau-meldung { font-size: 12.5px; font-weight: 600; }
.gb-vorschau-meldung::before { content: "! "; color: var(--gb-licht); }
.gb-vorschau-grund { font: 400 10.5px/1.5 var(--gb-mono); color: var(--gb-still); max-width: 30ch; }

/* ---------- 6. Empty state ---------- */
.gb-leer {
  grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; padding: 56px 16px 64px; text-align: center;
  border: 1px dashed var(--gb-linie); border-radius: var(--gb-r-kachel);
  background: radial-gradient(60% 80% at 50% 0, oklch(.82 .13 78 / .07), transparent 70%);
}
.gb-leer > svg { width: 56px; height: 56px; color: var(--gb-leise); margin-bottom: 4px; }
.gb-leer > h2 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.gb-leer > p { max-width: 44ch; color: var(--gb-leise); font-size: 13px; text-wrap: pretty; }
.gb-leer .gb-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }

/* ---------- 7. Large view and code view (inside the app area) ---------- */
.gb-schleier {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px;
  background: oklch(.1 .01 255 / .86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: gb-ein .2s var(--gb-ease) both;
}
@keyframes gb-ein { from { opacity: 0; } }
/* Closing (can, 14.6): class gb-zu, afterwards the build clears it */
.gb-schleier.gb-zu { animation: gb-weg .16s cubic-bezier(.4, 0, 1, 1) both; }
.gb-schleier.gb-zu .gb-dialog { animation: gb-weg-dialog .16s cubic-bezier(.4, 0, 1, 1) both; }
@keyframes gb-weg { to { opacity: 0; } }
@keyframes gb-weg-dialog { to { opacity: 0; scale: .96; } }
/* Paging, tabs: redrawn without animation */
.gb-schleier.gb-still, .gb-schleier.gb-still .gb-dialog { animation: none; }
.gb-dialog {
  position: relative; width: min(1040px, 100%); max-height: 100%; overflow: hidden;
  display: grid; background: var(--gb-flaeche); border-radius: var(--gb-r-dialog);
  box-shadow: 0 0 0 1px oklch(1 0 0 / .08), 0 30px 80px -20px #000;
  /* opens from the trigger: the build sets --gb-ursprung-x/-y (px, relative to the dialog) */
  transform-origin: var(--gb-ursprung-x, 50%) var(--gb-ursprung-y, 50%);
  animation: gb-heran .25s var(--gb-aus) both;
}
@keyframes gb-heran { from { opacity: 0; scale: .92; } }
.gb-schliessen { position: absolute; z-index: 6; top: 12px; right: 12px; }

/* Large view: stage 4:3 on the left as large as the height allows, 280 px of details on the right */
.gb-gross { grid-template-columns: minmax(0, 1fr) 280px; }
.gb-gross .gb-buehne-gross { position: relative; display: grid; place-items: center; padding: 16px; background: var(--gb-tief); min-width: 0; }
.gb-gross .gb-vorschau { width: min(100%, calc((100dvh - 96px) * 4 / 3)); border-radius: 10px; }
.gb-gross .gb-blaettern { position: absolute; bottom: 24px; left: 50%; translate: -50% 0; z-index: 3; display: flex; gap: 8px; }
.gb-gross .gb-blaettern .gb-rund { background: oklch(.16 .012 255 / .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.gb-angaben { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px 20px; border-left: 1px solid var(--gb-linie); overflow: auto; min-width: 0; }
.gb-angaben .gb-zeile { padding-right: 44px; }
.gb-angaben > h2 { font-size: 22px; line-height: 1.1; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
.gb-angaben > p { color: var(--gb-leise); font-size: 13px; text-wrap: pretty; }
.gb-liste { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--gb-linie); }
.gb-liste dt { font: 500 10px/1.4 var(--gb-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gb-still); }
.gb-liste dd { margin: 2px 0 0; font-size: 12.5px; color: var(--gb-text); overflow-wrap: anywhere; }
.gb-liste dd.gb-mono { font: 400 11px/1.55 var(--gb-mono); color: var(--gb-leise); }
.gb-angaben .gb-knoepfe { display: grid; gap: 8px; margin-top: auto; padding-top: 6px; }

/* Code view: small stage on the left, tabs HTML, CSS, JS with source text on the right */
.gb-code { grid-template-columns: 400px minmax(0, 1fr); height: min(640px, 100%); }
.gb-code .gb-buehne-klein { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--gb-tief); border-right: 1px solid var(--gb-linie); min-width: 0; }
.gb-code .gb-buehne-klein .gb-vorschau { border-radius: 10px; }
.gb-code .gb-buehne-klein > h2 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.gb-code .gb-buehne-klein > p { color: var(--gb-leise); font-size: 12.5px; text-wrap: pretty; }
.gb-code-teil { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.gb-reiter { display: flex; align-items: flex-end; gap: 4px; height: 56px; padding: 0 64px 0 16px; border-bottom: 1px solid var(--gb-linie); }
.gb-reiter [role="tab"] {
  position: relative; height: 40px; padding: 0 14px; color: var(--gb-leise);
  font: 500 11.5px/1 var(--gb-mono); letter-spacing: .06em; transition: color .2s;
}
.gb-reiter [role="tab"]:hover { color: var(--gb-text); }
.gb-reiter [role="tab"][aria-selected="true"] { color: var(--gb-text); }
.gb-reiter [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--gb-licht); }
.gb-reiter [role="tab"] .gb-zahl { margin-left: 6px; color: var(--gb-still); font-size: 10px; }
.gb-reiter [role="tab"][aria-disabled="true"] { opacity: .4; cursor: default; }
.gb-quelltext {
  overflow: auto; padding: 16px 20px 24px; background: var(--gb-tief);
  font: 400 12px/1.65 var(--gb-mono); color: var(--gb-leise); white-space: pre-wrap; tab-size: 2;
  counter-reset: gb-z;
}
.gb-quelltext code { font: inherit; }
/* Lines wrap, the number sits in its own column in front */
.gb-quelltext .gb-z { position: relative; display: block; padding-left: calc(3ch + 16px); white-space: pre-wrap; overflow-wrap: anywhere; }
.gb-quelltext .gb-z::before { counter-increment: gb-z; content: counter(gb-z); position: absolute; left: 0; width: 3ch; text-align: right; color: oklch(.42 .012 255); }
/* Simple coloring, three tones */
.gb-t-tag, .gb-t-sel { color: var(--gb-text); }
.gb-t-attr, .gb-t-eig { color: var(--gb-kalt); }
.gb-t-wert { color: var(--gb-licht); }
.gb-t-kom { color: var(--gb-still); font-style: italic; }
.gb-code-fuss { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--gb-linie); min-width: 0; }
.gb-code-fuss .gb-groesse { flex: none; font: 400 11px/1 var(--gb-mono); color: var(--gb-still); }

/* ---------- 8. Narrow (app area under 560 px, about 390) ---------- */
@container gb (max-width: 559px) {
  .gb-galerie { --gb-rand: 16px; --gb-luecke: 10px; --gb-fuge: 6px; --gb-r-kachel: 6px; }
  .gb-kopf { grid-template-columns: minmax(0, 1fr) auto; padding-top: 14px; padding-bottom: 16px; }
  .gb-titel h1 { font-size: 34px; }
  .gb-satz { font-size: 13px; }
  .gb-suche { display: none; }
  .gb-galerie .gb-suche-knopf { display: inline-grid; }
  .gb-schalter { width: 36px; padding: 0; justify-content: center; }
  .gb-schalter .gb-wort, .gb-schalter .gb-wert { display: none; }
  /* Industry, search and motion as their own row below the title; the select takes the width */
  .gb-kopf-rechts { grid-column: 1 / -1; }
  .gb-branche { flex: 1; min-width: 0; }
  .gb-branche select { width: 100%; }
  /* Bar swipeable, mask on the right, inside the margin */
  .gb-leiste-spur {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  }
  .gb-leiste-spur::-webkit-scrollbar { display: none; }
  .gb-leiste-spur::after, .gb-leiste-unter::after { content: ""; flex: none; width: 32px; }
  .gb-leiste-unter {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  }
  .gb-leiste-unter::-webkit-scrollbar { display: none; }
  .gb-pille-klein { scroll-snap-align: start; }
  .gb-gruppen { gap: 24px; padding-bottom: 32px; }
  .gb-info { padding: 2px 10px 9px; }
  .gb-name { font-size: 13px; line-height: 16px; -webkit-line-clamp: 3; }
  /* Kind line narrow: never truncated (a 152 px cell fits 19 characters mono 11); mono 10 without letter-spacing fits 21, longer names wrap at word boundaries */
  .gb-art { font-size: 10px; line-height: 13px; letter-spacing: 0; white-space: normal; text-overflow: clip; }
  .gb-stand .gb-stand-rechts { display: none; }
  /* Dialogs fill the area */
  .gb-schleier { padding: 0; place-items: stretch; }
  .gb-dialog { width: 100%; height: 100%; max-height: none; border-radius: 0; overflow: auto; }
  .gb-gross, .gb-code { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; height: auto; align-content: start; }
  .gb-gross .gb-buehne-gross { padding: 56px 0 0; }
  .gb-gross .gb-vorschau { width: 100%; border-radius: 0; }
  .gb-gross .gb-blaettern { position: static; translate: none; justify-content: center; padding: 10px 0; }
  .gb-angaben { border-left: 0; border-top: 1px solid var(--gb-linie); padding: 18px 16px 24px; overflow: visible; }
  .gb-angaben .gb-knoepfe { grid-template-columns: 1fr 1fr; }
  .gb-code .gb-buehne-klein { border-right: 0; border-bottom: 1px solid var(--gb-linie); padding: 56px 16px 16px; }
  .gb-code-teil { display: block; }
  .gb-code-fuss { position: sticky; bottom: 0; z-index: 2; background: var(--gb-flaeche); }
  .gb-reiter { padding: 0 8px; }
  .gb-quelltext { overflow: visible; font-size: 11.5px; padding: 14px 12px 20px; }
  .gb-quelltext .gb-z { padding-left: calc(2ch + 10px); }
  .gb-quelltext .gb-z::before { width: 2ch; }
}
/* Medium width (app sidebar open, 560 to 839) */
@container gb (min-width: 560px) and (max-width: 839px) {
  .gb-suche { width: 200px; }
  .gb-gross { grid-template-columns: minmax(0, 1fr) 240px; }
  .gb-code { grid-template-columns: 300px minmax(0, 1fr); }
}

/* Motion “off” (switch in the header): dialogs without animation */
.gb-galerie.gb-angehalten :is(.gb-schleier, .gb-dialog) { animation: none; }

/* ---------- 9. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .gb-galerie *, .gb-galerie *::before, .gb-galerie *::after { scroll-behavior: auto !important; }
  .gb-schleier, .gb-dialog, .gb-schleier.gb-zu, .gb-schleier.gb-zu .gb-dialog { animation: none; }
  .gb-kachel::after, .gb-code-knopf, .gb-gross-knopf, .gb-pille, .gb-knopf, .gb-rund, .gb-branche select { transition: none; }
  .gb-vorschau[data-zustand="laedt"]::before { animation: none; }
}

/* ---------- 10. Aesthetics dossier (large view of the "aesthetics" tiles) ---------- */
/* Under the poster the stage scrolls: definition, traits, live element demos, palettes, type, sites, fit, mistakes. Built by gallery-aesthetics.js (A.dossier). */
.gb-gross.gb-mit-dossier { height: 100%; grid-template-rows: minmax(0, 1fr); }
.gb-gross .gb-buehne-dossier { display: flex; flex-direction: column; align-items: stretch; gap: 18px; overflow: auto; padding: 16px 16px 24px; scrollbar-width: thin; }
.gb-dossier-kopf { position: relative; flex: none; align-self: center; width: min(100%, 470px); }
.gb-gross .gb-dossier-kopf .gb-vorschau { width: 100%; }
.gb-gross .gb-dossier-kopf .gb-blaettern { position: absolute; bottom: 12px; left: 50%; translate: -50% 0; }
.gb-ae { display: grid; gap: 14px; }
.gb-ae-sek { display: grid; gap: 10px; padding: 14px 16px 16px; border: 1px solid var(--gb-linie); border-radius: var(--gb-r-kachel); background: var(--gb-flaeche); min-width: 0; }
.gb-ae-sek > h3 { font: 600 10.5px/1 var(--gb-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gb-still); }
.gb-ae-sek p, .gb-ae-sek li { font-size: 13px; line-height: 1.5; color: var(--gb-leise); text-wrap: pretty; }
.gb-ae-sek p.gb-ae-gross { font-size: 14.5px; color: var(--gb-text); }
.gb-ae-sek ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.gb-ae-sek li { position: relative; padding-left: 16px; }
.gb-ae-sek li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--gb-licht); }
.gb-ae-sek.gb-ae-fehler li::before { background: var(--gb-kupfer); }
.gb-ae-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gb-ae-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 12px; }
.gb-ae-demo-wrap { display: grid; gap: 6px; min-width: 0; }
.gb-ae-demo { position: relative; height: 150px; container-type: size; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px oklch(1 0 0 / .1); }
.gb-ae-demo-wrap > span { display: flex; justify-content: space-between; gap: 8px; font: 500 11.5px/1.3 var(--gb-schrift); color: var(--gb-leise); }
.gb-ae-demo-wrap > span em { font: 500 10px/1.3 var(--gb-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--gb-still); white-space: nowrap; }
.gb-ae-pal { display: grid; gap: 6px; }
.gb-ae-pal > b { font: 600 12px/1.2 var(--gb-schrift); color: var(--gb-text); }
.gb-ae-farben { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.gb-ae-farbe { display: grid; align-content: end; justify-items: start; height: 52px; padding: 4px 5px; border-radius: 6px; box-shadow: inset 0 0 0 1px oklch(1 0 0 / .14); font: 500 9.5px/1 var(--gb-mono); text-transform: uppercase; cursor: copy; border: 0; transition: scale .18s var(--gb-ease); }
.gb-ae-farbe:hover { scale: 1.06; }
.gb-ae-farbe:active { scale: .97; }
.gb-ae-farbe.gb-hell { color: #111; }
.gb-ae-farbe.gb-dunkel { color: #fff; }
.gb-ae-seiten { display: grid; gap: 8px; }
.gb-ae-seiten li { padding-left: 0; }
.gb-ae-seiten li::before { display: none; }
.gb-ae-seiten a { color: var(--gb-licht); font: 500 12px/1.4 var(--gb-mono); text-decoration: none; overflow-wrap: anywhere; }
.gb-ae-seiten a:hover { text-decoration: underline; }
.gb-ae-seiten span { display: block; color: var(--gb-leise); }
.gb-ae-hinweis { font: 400 11px/1.4 var(--gb-mono); color: var(--gb-still); }
@container gb (max-width: 719px) { .gb-ae-zwei { grid-template-columns: minmax(0, 1fr); } }
/* Narrow: the dialog scrolls as a whole, the stage does not scroll on its own */
@container gb (max-width: 559px) {
  .gb-gross.gb-mit-dossier { height: auto; grid-template-rows: auto; }
  .gb-gross .gb-buehne-dossier { overflow: visible; padding: 56px 12px 16px; }
  .gb-dossier-kopf { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .gb-ae-farbe { transition: none; } }