/* ---------- Menü ---------- */
.menu { display: flex; align-items: center; gap: 8px 28px; flex-wrap: wrap; }
.menu a { text-decoration: none; text-transform: uppercase; font-weight: 500; font-size: 17px; letter-spacing: .03em; padding: 10px 0; }
.menu__cart { display: flex; align-items: center; }
.menu .menu__kontakt { background: #C8453A; color: #fff; padding: 14px 28px; border-radius: 12px; font-weight: 600; transition: background .2s; }
.menu .menu__kontakt:hover { background: #A5362D; color: #fff; }

/* ---------- Umkreiste Wörter ---------- */
.kreis { position: relative; display: inline-block; }
.kreis__linie { position: absolute; left: -9%; top: -20%; width: 118%; height: 145%; overflow: visible; pointer-events: none; }
.kreis__linie path {
  fill: none; stroke: var(--kreis, #F6C7E1); stroke-width: 3; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s cubic-bezier(.6,0,.3,1);
}
.kreis.ist-sichtbar .kreis__linie path { stroke-dashoffset: 0; }

/* ---------- Virtueller Galerieraum ---------- */
.galerie { padding-bottom: 96px; }
.raum { position: relative; }
.raum__scroller { overflow-x: auto; overflow-y: hidden; cursor: grab; scrollbar-width: thin; }
.raum__scroller.zieht { cursor: grabbing; user-select: none; }
.raum__scroller:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

.raum__wand {
  --boden-y: 78%;
  position: relative; display: flex; box-sizing: border-box;
  height: clamp(460px, 72vh, 780px); width: max-content; min-width: 100%;
  padding: 0 6vw;
  background:
    linear-gradient(to bottom, transparent calc(var(--boden-y) - 14px), #f6f4f0 calc(var(--boden-y) - 14px), #f6f4f0 var(--boden-y), transparent var(--boden-y)),
    linear-gradient(to bottom, #ece9e3 0, #dedad2 var(--boden-y), transparent var(--boden-y)),
    linear-gradient(to bottom, rgba(70,50,30,.28) var(--boden-y), rgba(70,50,30,0) 100%),
    repeating-linear-gradient(98deg, #dbc9a9 0 74px, #c8b392 74px 76px, #d6c3a2 76px 160px, #c4af8d 160px 162px);
}

.platz {
  position: relative; flex: 0 0 auto; height: 100%; box-sizing: border-box;
  display: flex; align-items: flex-end;
  padding-right: 230px; margin-right: 40px;
}
.platz::before {
  content: ''; position: absolute; top: 0; left: -80px; right: 150px; height: var(--boden-y);
  background: radial-gradient(ellipse 50% 75% at 50% 0%, rgba(255,255,255,.65), rgba(255,255,255,0) 70%);
  pointer-events: none;
}

.werk {
  position: relative; isolation: isolate; display: block; padding: 0; border: 0; background: none;
  line-height: 0; cursor: zoom-in; transition: transform .35s ease;
}
.werk:hover { transform: translateY(-4px); }
.werk:focus-visible { outline: 3px solid #151515; outline-offset: 6px; }
.werk img { display: block; width: auto; max-width: none; }
.platz--wand .werk img { box-shadow: 0 2px 3px rgba(0,0,0,.18), 0 24px 40px -12px rgba(0,0,0,.4); }
.platz--boden .werk img { filter: drop-shadow(10px 8px 10px rgba(0,0,0,.22)); }
.platz--boden .werk::after {
  content: ''; position: absolute; left: 5%; right: 5%; bottom: -12px; height: 24px; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.38), rgba(0,0,0,0) 70%);
}
.werk__fehlt {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  padding: 12px; text-align: center; white-space: pre-line; line-height: 1.4;
  font-size: 13px; color: #555; border: 2px dashed #a49e94;
  background: repeating-linear-gradient(45deg, #d9d5cd 0 10px, #d1ccc3 10px 20px);
}

.schild { position: absolute; right: 30px; width: 180px; color: #3B3F5C; }
.schild p { margin: 0; font-size: 15px; line-height: 1.5; }
.schild .schild__name { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }

.raum__pfeil {
  position: absolute; top: 42%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.88); color: #151515; box-shadow: 0 4px 14px rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: center; transition: opacity .3s;
}
.raum__pfeil--links { left: 16px; }
.raum__pfeil--rechts { right: 16px; }
.raum__pfeil:disabled { opacity: 0; pointer-events: none; }
.raum__hinweis { text-align: center; margin: 24px 0 0; padding: 0 var(--pad); font-size: 16px; }

/* ---------- Großansicht ---------- */
.lightbox { border: 0; padding: 0; width: min(1100px, 92vw); max-height: 90vh; background: #f6f4f0; color: #3B3F5C; }
.lightbox::backdrop { background: rgba(20,20,20,.78); }
.lightbox__inhalt { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; padding: 56px 48px 48px; align-items: center; }
.lightbox__bild { width: 100%; max-height: 70vh; object-fit: contain; }
.lightbox p { margin: 0; font-size: 18px; line-height: 1.5; }
.lightbox .schild__name { font-weight: 700; text-transform: uppercase; font-size: 22px; letter-spacing: .02em; }
.lightbox .lightbox__info { margin-top: 20px; font-size: 16px; line-height: 1.6; }
.lightbox__zu {
  position: absolute; top: 10px; right: 10px; width: 48px; height: 48px; border: 0; background: none;
  color: #151515; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

@media (max-width: 700px) {
  .platz { padding-right: 170px; margin-right: 24px; }
  .schild { width: 140px; right: 16px; }
  .schild p { font-size: 13px; }
  .raum__pfeil { width: 44px; height: 44px; }
  .lightbox__inhalt { padding: 56px 24px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .kreis__linie path { transition: none; }
  .werk { transition: none; }
}

/* ---------- Raumfoto statt gezeichneter Wand ---------- */
.raum__wand { --boden-y: 77%; padding: 0 6vw 0 40vw; background: #e4ded6; }
.raum__foto { position: absolute; inset: 0; display: flex; z-index: 0; pointer-events: none; }
.raum__kachel { flex: 0 0 auto; height: 100%; background-size: auto 100%; background-repeat: no-repeat; }
.raum__kachel--gespiegelt { transform: scaleX(-1); }
.platz { z-index: 1; }
.platz::before { background: radial-gradient(ellipse 50% 75% at 50% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%); }

/* ---------- Kreis-Linie: gleichmäßig zeichnen ---------- */
.kreis__linie path { vector-effect: none; stroke-width: 3; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.kreis.ist-sichtbar .kreis__linie path { stroke-dashoffset: 0; }

/* Hintergrund bis ganz rechts, ohne den Raum zu verlängern */
.raum__foto { overflow: hidden; }

/* Leihgabe-Vermerk unter jedem Werk */
.schild .schild__vermerk { margin-top: 8px; font-size: 12px; line-height: 1.4; opacity: .75; }