/* ============================================================
   AUSFLUGS-SZENEN — Tianmen-Tor & auf der Mauer
   ============================================================ */
.excursion { background: #0b1118; }
.exc-art { position: absolute; inset: 0; }
.exc-art svg { width: 100%; height: 100%; display: block; }
.exc-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 78% 66% at 50% 45%, transparent 40%, rgba(6,10,14,.72) 100%);
}
/* Das echte Foto liegt wie ein aufgezogener Abzug vor der Zeichnung:
   Passepartout aus Papier, dünne Goldlinie, leicht schief aufgelegt. */
.exc-photo {
  /* 250px Mindestabstand: auf flachen Fenstern läuft der Rahmen sonst
     in die Überschrift darunter */
  position: absolute; left: 50%; bottom: max(25vh, 250px); z-index: 3;
  width: min(360px, 78vw);
  padding: 11px;
  background: linear-gradient(158deg, #f6eeda 0%, #e7dcc0 55%, #d8caa9 100%);
  border-radius: 3px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.35) inset,
    0 26px 60px rgba(0,0,0,.7),
    0 0 0 1px rgba(24,16,6,.45);
  opacity: 0;
  transform: translate(-50%, 18px) rotate(-1.4deg);
  transition: opacity 1.2s ease .35s, transform 1.2s cubic-bezier(.2,.9,.3,1) .35s;
}
.excursion.lit .exc-photo { opacity: 1; transform: translate(-50%, 0) rotate(-1.4deg); }
.exc-photo::after {   /* Goldlinie zwischen Passepartout und Bild */
  content: ''; position: absolute; inset: 6px;
  border: 1px solid rgba(154,110,26,.55);
  pointer-events: none;
}
.exc-photo img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(40,28,10,.5);
}

.exc-plate {
  position: absolute; left: 50%; bottom: 4.5vh; z-index: 4;
  transform: translateX(-50%);
  width: min(560px, 90vw);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 1.2s ease .5s;
}
.excursion.lit .exc-plate { opacity: 1; pointer-events: auto; }
/* Dunstschleier hinter der Tafel — sonst verliert sich die Schrift
   über hellem Marmor und Pflaster */
.exc-plate::before {
  content: ''; position: absolute; z-index: -1;
  left: -12vw; right: -12vw; top: -7vh; bottom: -9vh;
  background: radial-gradient(ellipse 62% 62% at 50% 58%, rgba(6,10,15,.8), rgba(6,10,15,0) 74%);
  pointer-events: none;
}
.exc-zh {
  font-family: 'Ma Shan Zheng', cursive;
  font-size: clamp(2.1rem, 9vw, 3.1rem); line-height: 1.1;
  color: var(--paper); text-shadow: 0 3px 26px rgba(0,0,0,.8);
}
.exc-de {
  font-size: clamp(.8rem, 3.3vw, .98rem);
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold2);
  text-shadow: 0 2px 16px rgba(0,0,0,.9);
}
.exc-btn {
  margin-top: 10px;
  padding: 13px 30px;
  background: linear-gradient(160deg, var(--vermillion), #a82a1c);
  color: var(--paper);
  border: none; border-radius: 999px;
  font-family: 'Noto Serif SC', serif;
  font-size: .9rem; font-weight: 900; letter-spacing: .12em;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(192,57,43,.4), inset 0 0 0 2px rgba(240,201,108,.4);
}