/* Historische Schmuck Galerie · Die Galerie
   Damastwand in Samt-Tönen, Petersburger Hängung im Raster (Desktop 48 × 29, Handy 24 × 101),
   gezeichnete Barockfassung, Messing-Bilderleuchten, Abhängen ins Blatt. Animiert wird nur transform und opacity. */

/* ---------- Wand ---------- */
.galerie {
  --damast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='200' viewBox='0 0 132 200'%3E%3Cg transform='translate(66.0 100.0)'%3E%3Cpath d='M0 -64C4 -56 6 -50 5 -44C10 -48 16 -50 19 -46C22 -42 20 -36 15 -34C22 -34 30 -30 31 -22C32 -14 26 -10 20 -11C28 -6 34 2 32 12C30 22 20 26 13 22C18 30 18 38 12 44C8 48 4 48 2 52C1 56 1 60 0 64C-1 60 -1 56 -2 52C-4 48 -8 48 -12 44C-18 38 -18 30 -13 22C-20 26 -30 22 -32 12C-34 2 -28 -6 -20 -11C-26 -10 -32 -14 -31 -22C-30 -30 -22 -34 -15 -34C-20 -36 -22 -42 -19 -46C-16 -50 -10 -48 -5 -44C-6 -50 -4 -56 0 -64Z' fill='%2335573F' fill-opacity='.34'/%3E%3Cpath d='M0-36C5-28 7-16 4-6C2 0 1 6 0 12C-1 6-2 0-4-6C-7-16-5-28 0-36Z' fill='%231D3328' fill-opacity='.7'/%3E%3Cpath d='M5-2C13-2 22 2 27 9M-5-2C-13-2-22 2-27 9M4-22C10-24 16-26 21-24M-4-22C-10-24-16-26-21-24M4 22C8 26 10 32 9 38M-4 22C-8 26-10 32-9 38M0 18V46' fill='none' stroke='%231D3328' stroke-opacity='.75' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M0 -64C4 -56 6 -50 5 -44C10 -48 16 -50 19 -46C22 -42 20 -36 15 -34C22 -34 30 -30 31 -22C32 -14 26 -10 20 -11C28 -6 34 2 32 12C30 22 20 26 13 22C18 30 18 38 12 44C8 48 4 48 2 52C1 56 1 60 0 64C-1 60 -1 56 -2 52C-4 48 -8 48 -12 44C-18 38 -18 30 -13 22C-20 26 -30 22 -32 12C-34 2 -28 -6 -20 -11C-26 -10 -32 -14 -31 -22C-30 -30 -22 -34 -15 -34C-20 -36 -22 -42 -19 -46C-16 -50 -10 -48 -5 -44C-6 -50 -4 -56 0 -64Z' fill='%2335573F' fill-opacity='.34'/%3E%3Cpath d='M0-36C5-28 7-16 4-6C2 0 1 6 0 12C-1 6-2 0-4-6C-7-16-5-28 0-36Z' fill='%231D3328' fill-opacity='.7'/%3E%3Cpath d='M5-2C13-2 22 2 27 9M-5-2C-13-2-22 2-27 9M4-22C10-24 16-26 21-24M-4-22C-10-24-16-26-21-24M4 22C8 26 10 32 9 38M-4 22C-8 26-10 32-9 38M0 18V46' fill='none' stroke='%231D3328' stroke-opacity='.75' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(132 0)'%3E%3Cpath d='M0 -64C4 -56 6 -50 5 -44C10 -48 16 -50 19 -46C22 -42 20 -36 15 -34C22 -34 30 -30 31 -22C32 -14 26 -10 20 -11C28 -6 34 2 32 12C30 22 20 26 13 22C18 30 18 38 12 44C8 48 4 48 2 52C1 56 1 60 0 64C-1 60 -1 56 -2 52C-4 48 -8 48 -12 44C-18 38 -18 30 -13 22C-20 26 -30 22 -32 12C-34 2 -28 -6 -20 -11C-26 -10 -32 -14 -31 -22C-30 -30 -22 -34 -15 -34C-20 -36 -22 -42 -19 -46C-16 -50 -10 -48 -5 -44C-6 -50 -4 -56 0 -64Z' fill='%2335573F' fill-opacity='.34'/%3E%3Cpath d='M0-36C5-28 7-16 4-6C2 0 1 6 0 12C-1 6-2 0-4-6C-7-16-5-28 0-36Z' fill='%231D3328' fill-opacity='.7'/%3E%3Cpath d='M5-2C13-2 22 2 27 9M-5-2C-13-2-22 2-27 9M4-22C10-24 16-26 21-24M-4-22C-10-24-16-26-21-24M4 22C8 26 10 32 9 38M-4 22C-8 26-10 32-9 38M0 18V46' fill='none' stroke='%231D3328' stroke-opacity='.75' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(0 200)'%3E%3Cpath d='M0 -64C4 -56 6 -50 5 -44C10 -48 16 -50 19 -46C22 -42 20 -36 15 -34C22 -34 30 -30 31 -22C32 -14 26 -10 20 -11C28 -6 34 2 32 12C30 22 20 26 13 22C18 30 18 38 12 44C8 48 4 48 2 52C1 56 1 60 0 64C-1 60 -1 56 -2 52C-4 48 -8 48 -12 44C-18 38 -18 30 -13 22C-20 26 -30 22 -32 12C-34 2 -28 -6 -20 -11C-26 -10 -32 -14 -31 -22C-30 -30 -22 -34 -15 -34C-20 -36 -22 -42 -19 -46C-16 -50 -10 -48 -5 -44C-6 -50 -4 -56 0 -64Z' fill='%2335573F' fill-opacity='.34'/%3E%3Cpath d='M0-36C5-28 7-16 4-6C2 0 1 6 0 12C-1 6-2 0-4-6C-7-16-5-28 0-36Z' fill='%231D3328' fill-opacity='.7'/%3E%3Cpath d='M5-2C13-2 22 2 27 9M-5-2C-13-2-22 2-27 9M4-22C10-24 16-26 21-24M-4-22C-10-24-16-26-21-24M4 22C8 26 10 32 9 38M-4 22C-8 26-10 32-9 38M0 18V46' fill='none' stroke='%231D3328' stroke-opacity='.75' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(132 200)'%3E%3Cpath d='M0 -64C4 -56 6 -50 5 -44C10 -48 16 -50 19 -46C22 -42 20 -36 15 -34C22 -34 30 -30 31 -22C32 -14 26 -10 20 -11C28 -6 34 2 32 12C30 22 20 26 13 22C18 30 18 38 12 44C8 48 4 48 2 52C1 56 1 60 0 64C-1 60 -1 56 -2 52C-4 48 -8 48 -12 44C-18 38 -18 30 -13 22C-20 26 -30 22 -32 12C-34 2 -28 -6 -20 -11C-26 -10 -32 -14 -31 -22C-30 -30 -22 -34 -15 -34C-20 -36 -22 -42 -19 -46C-16 -50 -10 -48 -5 -44C-6 -50 -4 -56 0 -64Z' fill='%2335573F' fill-opacity='.34'/%3E%3Cpath d='M0-36C5-28 7-16 4-6C2 0 1 6 0 12C-1 6-2 0-4-6C-7-16-5-28 0-36Z' fill='%231D3328' fill-opacity='.7'/%3E%3Cpath d='M5-2C13-2 22 2 27 9M-5-2C-13-2-22 2-27 9M4-22C10-24 16-26 21-24M-4-22C-10-24-16-26-21-24M4 22C8 26 10 32 9 38M-4 22C-8 26-10 32-9 38M0 18V46' fill='none' stroke='%231D3328' stroke-opacity='.75' stroke-width='1.2'/%3E%3C/g%3E%3Cg transform='translate(0 100.0)' fill='%2335573F' fill-opacity='.34'%3E%3Cpath d='M0-13C3-9 3-5 0-3C-3-5-3-9 0-13Z' transform='rotate(0)'/%3E%3Cpath d='M0-13C3-9 3-5 0-3C-3-5-3-9 0-13Z' transform='rotate(90)'/%3E%3Cpath d='M0-13C3-9 3-5 0-3C-3-5-3-9 0-13Z' transform='rotate(180)'/%3E%3Cpath d='M0-13C3-9 3-5 0-3C-3-5-3-9 0-13Z' transform='rotate(270)'/%3E%3Ccircle r='2.4'/%3E%3C/g%3E%3Cg transform='translate(132 100.0)' fill='%2335573F' fill-opacity='.34'%3E%3Cpath d='M0-13C3-9 3-5 0-3C-3-5-3-9 0-13Z' transform='rotate(0)'/%3E%3Cpath d='M0-13C3-9 3-5 0-3C-3-5-3-9 0-13Z' transform='rotate(90)'/%3E%3Cpath d='M0-13C3-9 3-5 0-3C-3-5-3-9 0-13Z' transform='rotate(180)'/%3E%3Cpath d='M0-13C3-9 3-5 0-3C-3-5-3-9 0-13Z' transform='rotate(270)'/%3E%3Ccircle r='2.4'/%3E%3C/g%3E%3Cg transform='translate(66.0 0)' fill='%2335573F' fill-opacity='.34'%3E%3Cpath d='M0-13C3-9 3-5 0-3C-3-5-3-9 0-13Z' transform='rotate(0)'/%3E%3Cpath d='M0-13C3-9 3-5 0-3C-3-5-3-9 0-13Z' transform='rotate(90)'/%3E%3Cpath d='M0-13C3-9 3-5 0-3C-3-5-3-9 0-13Z' transform='rotate(180)'/%3E%3Cpath d='M0-13C3-9 3-5 0-3C-3-5-3-9 0-13Z' transform='rotate(270)'/%3E%3Ccircle r='2.4'/%3E%3C/g%3E%3Cg transform='translate(66.0 200)' fill='%2335573F' fill-opacity='.34'%3E%3Cpath d='M0-13C3-9 3-5 0-3C-3-5-3-9 0-13Z' transform='rotate(0)'/%3E%3Cpath d='M0-13C3-9 3-5 0-3C-3-5-3-9 0-13Z' transform='rotate(90)'/%3E%3Cpath d='M0-13C3-9 3-5 0-3C-3-5-3-9 0-13Z' transform='rotate(180)'/%3E%3Cpath d='M0-13C3-9 3-5 0-3C-3-5-3-9 0-13Z' transform='rotate(270)'/%3E%3Ccircle r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  --rauschen: url("../bilder/textur/rauschen-schwarz.png");
  overflow-x: clip;
  background-color: var(--samt);
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 46%, rgba(10, 18, 13, 0) 40%, rgba(8, 14, 10, .62) 100%),
    linear-gradient(180deg, rgba(8, 14, 10, .45), rgba(8, 14, 10, 0) 16%, rgba(8, 14, 10, 0) 86%, rgba(8, 14, 10, .5)),
    var(--damast);
  background-size: 100% 100%, 100% 100%, 132px 200px;
}
.galerie.mit-wandbild { background-image:
    radial-gradient(ellipse 90% 70% at 50% 46%, rgba(10, 18, 13, 0) 40%, rgba(8, 14, 10, .62) 100%),
    linear-gradient(180deg, rgba(8, 14, 10, .45), rgba(8, 14, 10, 0) 16%, rgba(8, 14, 10, 0) 86%, rgba(8, 14, 10, .5)),
    var(--wand-bild); background-size: 100% 100%, 100% 100%, 640px auto; }
.galerie .kopfzeile { margin-inline: auto; text-align: center; justify-items: center; }
.galerie .kopfzeile .lead { margin-inline: auto; }

.galerie-wand { --u: calc(min(100vw - 36px, 600px) / 24); width: calc(24 * var(--u)); margin: 0 auto; position: relative; }
.wand-raster { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(24, var(--u)); grid-template-rows: repeat(101, var(--u)); }
@media (min-width: 1000px) {
  .galerie-wand { --u: calc(min(100vw - 72px, 1560px) / 48); width: calc(48 * var(--u)); }
  .wand-raster { grid-template-columns: repeat(48, var(--u)); grid-template-rows: repeat(29, var(--u)); }
}

/* Ein Platz an der Wand: Rasterfläche, darin der Rahmen in seinem Seitenverhältnis, mittig. */
.platz { grid-area: var(--m); container-type: size; display: grid; place-items: center; min-width: 0; min-height: 0; }
@media (min-width: 1000px) { .platz { grid-area: var(--d); } }
.halter { --form-r: 2px; position: relative; z-index: 0; width: min(100cqw, calc(100cqh * var(--v))); aspect-ratio: var(--v); }
.halter.form-oval, .halter.form-rund, .gb-rahmen.form-oval, .gb-rahmen.form-rund { --form-r: 50%; }

.rahmen { position: absolute; inset: 0; display: block; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; border-radius: var(--form-r);
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 calc(var(--u) * .45) calc(var(--u) * .9) calc(var(--u) * -.15) rgba(0, 0, 0, .66), 0 2px 5px rgba(0, 0, 0, .4); }
.rahmen:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 5px; }
.fassung, .fassung-bild { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fassung { overflow: visible; }

/* Bildfenster: Foto aus dem Laden oder freigestelltes Stück auf dunklem Samt */
.bild { position: absolute; overflow: hidden; border-radius: 1px; background: #0E1410; }
.form-oval .bild, .form-rund .bild { border-radius: 50%; }
.bild picture { display: contents; }
.bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bild.auf-samt { background-color: #1A2C22; background-image: var(--rauschen),
    radial-gradient(ellipse 80% 70% at 46% 36%, #3B5A49 0%, #26402F 42%, #15241B 78%, #0F1A13 100%);
  background-size: 160px 160px, 100% 100%; }
.bild.auf-samt img { inset: 9% 11% 8%; width: 78%; height: 83%; object-fit: contain; }
.bild.auf-samt::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 7%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
/* Tiefe: das Bild liegt hinter der Profilkante */
.bild::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 calc(var(--u, 20px) * .28) calc(var(--u, 20px) * .55) rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .55);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .16)); }

/* Messingschild am unteren Rahmenrand */
.schild { position: absolute; left: 50%; top: 100%; z-index: 6; transform: translate(-50%, -42%);
  width: max-content; max-width: max(100%, 9.6em); padding: .36em 1.25em .4em; border-radius: 2px;
  font-family: var(--antiqua); font-size: clamp(12px, calc(var(--u) * .82), 13.5px); line-height: 1.16; text-align: center; color: var(--tinte);
  text-shadow: 0 1px 0 rgba(255, 246, 220, .55); text-wrap: balance;
  background:
    radial-gradient(circle at .6em 50%, #6A4F22 0 .13em, rgba(106, 79, 34, 0) .19em),
    radial-gradient(circle at calc(100% - .6em) 50%, #6A4F22 0 .13em, rgba(106, 79, 34, 0) .19em),
    linear-gradient(180deg, #F3E5BE 0%, #DCC184 45%, #CDAA66 62%, #DDC28A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 248, 226, .7), inset 0 -1px 0 rgba(96, 68, 26, .55), 0 2px 5px rgba(0, 0, 0, .5); }
.schild small { display: block; font-size: .86em; font-style: italic; color: #4A3A22; margin-top: .08em; }
@media (min-width: 1000px) { .schild { font-size: clamp(11.5px, calc(var(--u) * .47), 14px); } }

/* ---------- Leuchte, Licht, dunkel vor dem Einschalten ---------- */
.leuchte { position: absolute; z-index: 5; left: 50%; top: 0; width: calc(var(--lw) * 100%); aspect-ratio: var(--leuchte-v, 4.545);
  transform: translate(-50%, var(--leuchte-kante, -68.2%)); pointer-events: none; }
.leuchte svg, .leuchte img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
.glut { position: absolute; left: 8%; right: 8%; top: 76.5%; height: 5.5%; border-radius: 9px; background: #FFF3D2;
  box-shadow: 0 0 5px 1px rgba(255, 224, 160, .8), 0 2px 10px 2px rgba(255, 214, 140, .45); opacity: 0; transition: opacity .22s ease-out; }

/* Lichtkegel auf Rahmen und Bild, warmer Schein auf der Wand */
.lampe .halter::after { content: ""; position: absolute; z-index: 4; left: -20%; right: -20%; top: 0; height: 100%; pointer-events: none;
  background: radial-gradient(ellipse 44% 78% at 50% 2%, rgba(255, 228, 174, .34) 0%, rgba(255, 216, 152, .13) 44%, rgba(255, 210, 140, 0) 74%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 7%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 7%);
  opacity: 0; transition: opacity 1.1s var(--aus-quart) .07s; }
.lampe .halter::before { content: ""; position: absolute; z-index: -1; left: -40%; right: -40%; top: -30%; height: 110%; pointer-events: none;
  background: radial-gradient(ellipse 50% 38% at 50% 40%, rgba(255, 214, 150, .15), rgba(255, 214, 150, 0) 70%);
  opacity: 0; transition: opacity 1.4s var(--aus-quart) .1s; }
.dunkel, .rahmen-dunkel { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; transition: opacity 1.2s var(--aus-quart) .06s; }
.dunkel { background: rgba(5, 9, 7, .74); }
.rahmen-dunkel { border-radius: var(--form-r); background: rgba(5, 9, 7, .52); }
.mit-rahmenbild .rahmen-dunkel { border-radius: 0; -webkit-mask: var(--maske) center / 100% 100% no-repeat; mask: var(--maske) center / 100% 100% no-repeat; }
.mit-rahmenbild .form-oval { --maske: var(--maske-oval); } .mit-rahmenbild .form-hoch { --maske: var(--maske-hoch); }
.mit-rahmenbild .form-quer { --maske: var(--maske-quer); } .mit-rahmenbild .form-klein { --maske: var(--maske-klein); }
.mit-rahmenbild .form-rund { --maske: var(--maske-rund); } .mit-rahmenbild .form-schmal { --maske: var(--maske-schmal); }
.mit-rahmenbild .rahmen { box-shadow: none; }
.mit-rahmenbild .fassung-bild, .gb-rahmen.mit-rahmenbild .fassung-bild { z-index: 2; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.mit-rahmenbild .bild { transform: scale(1.025); }

.platz.an .glut { opacity: 1; }
.platz.an .halter::after, .platz.an .halter::before { opacity: 1; }
.platz.an .dunkel, .platz.an .rahmen-dunkel { opacity: 0; }
.galerie-wand.sofort * , .galerie-wand.sofort *::before, .galerie-wand.sofort *::after { transition: none !important; }

/* Abgehängt: heller Fleck und Nagel bleiben an der Wand, die Leuchte brennt weiter */
.fleck { position: absolute; inset: 0; border-radius: var(--form-r); opacity: 0; pointer-events: none;
  background: rgba(214, 228, 216, .06); box-shadow: inset 0 0 calc(var(--u) * .6) rgba(0, 0, 0, .28); }
.fleck::after { content: ""; position: absolute; left: 50%; top: 11%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F1DDA8, #8C6A2F 60%, #3D2A0E); box-shadow: 0 2px 3px rgba(0, 0, 0, .6); }
.platz.ab .rahmen { opacity: 0; }
.platz.ab .fleck { opacity: 1; }

@media (hover: hover) {
  .rahmen { transition: transform .45s var(--aus-quart); }
  .rahmen:hover { transform: translateY(-4px); }
}

.wand-hinweis { margin: var(--r3) auto 0; text-align: center; font-size: .92rem; color: var(--hell-2); max-width: 40em; padding-inline: var(--rand); }
.galerie-fuss { margin-top: var(--r4); display: grid; justify-items: center; gap: 12px; text-align: center; }
.galerie-satz { font-family: var(--antiqua); font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.25; color: var(--hell); }
.galerie-satz .textlink { font-family: var(--antiqua); font-weight: 400; }

/* ---------- Blatt: abgehängtes Bild groß ---------- */
html.galerie-auf { overflow: hidden; }
.gb { position: fixed; inset: 0; z-index: 70; color: var(--hell); }
.gb-grund { position: absolute; inset: 0; opacity: 0; transition: opacity .42s var(--aus-quart);
  background: radial-gradient(ellipse 62% 70% at 36% 46%, #233A2D 0%, #142019 52%, #0B110D 100%); }
.gb.offen .gb-grund { opacity: 1; }
.gb-inhalt { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 410px); align-items: center; gap: clamp(28px, 4.5vw, 80px);
  padding: clamp(28px, 6vh, 72px) clamp(28px, 6vw, 104px); }
.gb-griff { display: none; }
.gb-bühne { height: min(80vh, 780px); container-type: size; display: grid; place-items: center; min-width: 0; }
.gb-rahmen { --u: 30px; position: relative; width: min(100cqw, calc(100cqh * var(--v))); aspect-ratio: var(--v); transform-origin: 0 0;
  border-radius: var(--form-r, 2px); box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .85), 0 12px 24px -8px rgba(0, 0, 0, .6); }
.gb-rahmen.mit-rahmenbild { box-shadow: none; }
.gb-text { opacity: 0; transform: translateY(16px); transition: opacity .45s var(--aus-quart), transform .6s var(--aus-expo); }
.gb.offen .gb-text { opacity: 1; transform: none; transition-delay: .2s; }
.gb-herkunft { margin-bottom: var(--r2); }
.gb:not(.ist-foto) .gb-herkunft { color: var(--hell-2); }
.gb-titel { font-size: clamp(2rem, 3.2vw, 2.8rem); margin-bottom: var(--r3); }
.gb-daten { margin: 0 0 var(--r4); display: grid; gap: var(--r3); }
.gb-daten div { border-top: 1px solid rgba(216, 184, 120, .22); padding-top: 12px; }
.gb-daten dt { font-weight: 700; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hell); margin-bottom: 4px; }
.gb-daten dd { margin: 0; color: var(--hell); line-height: 1.55; }
.gb-wege { display: grid; gap: 12px; justify-items: stretch; }
.gb-wege .knopf { text-align: center; line-height: 1.25; padding-block: 10px; text-wrap: balance; }
.gb-status { font-size: .92rem; color: var(--hell-2); text-align: center; }
.gb-zu { position: absolute; z-index: 3; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--hell); background: rgba(18, 19, 17, .72); border: 1px solid rgba(216, 184, 120, .4);
  opacity: 0; transition: opacity .3s; }
.gb.offen .gb-zu { opacity: 1; }
.gb-zu .ic { width: 24px; height: 24px; }
.gb-zu:hover { border-color: var(--gold-hell); }

@media (max-width: 899px) {
  .gb-inhalt { display: block; padding: calc(78px + env(safe-area-inset-top, 0px)) 22px calc(36px + env(safe-area-inset-bottom, 0px)); }
  .gb-griff { display: block; position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; width: 44px; height: 5px; margin-left: -22px;
    border-radius: 3px; background: rgba(237, 230, 216, .3); }
  .gb-bühne { height: min(40svh, 420px, calc((100vw - 44px) / var(--v, 1))); margin-bottom: var(--r3); }
  .gb-rahmen { --u: 22px; }
  .gb-titel { font-size: 1.9rem; margin-bottom: var(--r2); }
  .gb-daten { margin-bottom: var(--r3); gap: var(--r2); }
}
@media (prefers-reduced-motion: reduce) {
  .gb-text { transform: none; }
}