:root {
  --ink: #1a1714;
  --ink-soft: #4a443d;
  --paper: #f4efe6;
  --paper-2: #ece4d6;
  --gold: #9a7b3f;
  --line: #d8cdb8;
  --accent: #7a1f2b;
  --paypal-blue: #0070ba;
  --paypal-dark: #003087;
}

* { box-sizing: border-box; }

/* hidden muss sicher greifen — sonst überstimmt z.B. #view-paywall{display:flex} es */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, #fbf7ef 0%, var(--paper) 55%, var(--paper-2) 100%);
  min-height: 100vh;
  line-height: 1.6;
}

.view {
  max-width: 920px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

.logo {
  display: block;
  height: auto;
  /* dezenter weinroter Schimmer passend zur Akzentfarbe */
  filter: drop-shadow(0 4px 10px rgba(122, 31, 43, 0.18));
}
.logo-hero {
  width: clamp(104px, 18vw, 156px);
  margin-bottom: 1.5rem;
}
.logo-mark {
  width: 60px;
  margin-bottom: 0.85rem;
}

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 0.75rem;
}

.museum-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: 0 0 1.25rem;
}
.museum-title.small {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 0.5rem;
}

.subtitle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-style: italic;
  color: var(--ink-soft);
  max-width: 38ch;
}

/* ---------------- Paywall ---------------- */

#view-paywall {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}
.paywall { width: 100%; }

.ticket {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  max-width: 540px;
  margin: 2.5rem 0 1.25rem;
  padding: 1.75rem 2rem;
  background: #fffdf8;
  border-radius: 16px;
  border-left: 8px solid var(--accent);
  box-shadow: 0 18px 44px rgba(122, 31, 43, 0.18);
}
/* gestanzte Ticket-Kerben */
.ticket::before,
.ticket::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ticket::before { top: -12px; right: 32%; }
.ticket::after { bottom: -12px; right: 32%; }

.ticket-stub {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  flex: 1 1 auto;
}
.ticket-label {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
}
.ticket-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.ticket-note { font-size: 0.8rem; color: var(--ink-soft); }

.btn-primary {
  align-self: center;
  border: none;
  background: var(--ink);
  color: #fff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 1rem 1.75rem;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.2s ease;
}
.btn-primary:hover { background: #000; }
.btn-primary:active { transform: translateY(1px); }

/* Auffälliger, dezent pulsierender Eintritts-Button */
#btn-pay {
  background: var(--accent);
  font-size: 1.18rem;
  padding: 1.1rem 2rem;
  box-shadow: 0 10px 24px rgba(122, 31, 43, 0.32);
  animation: ticket-pulse 2.2s ease-in-out infinite;
}
#btn-pay:hover { background: #66131d; }
@keyframes ticket-pulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 10px 24px rgba(122, 31, 43, 0.30); }
  50%      { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(122, 31, 43, 0.48); }
}
@media (prefers-reduced-motion: reduce) {
  #btn-pay { animation: none; }
}

/* Landing-Countdown: fest oben angepinnt, damit es auf jedem Screen sichtbar ist */
.auto-entry {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 0.7rem 1rem;
  text-align: center;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  animation: auto-entry-blink 1.3s ease-in-out infinite;
}
/* leichtes Blinken zwischen Weinrot und einem helleren Rot */
@keyframes auto-entry-blink {
  0%, 100% { background: var(--accent); }
  50%      { background: #a83244; }
}
@media (prefers-reduced-motion: reduce) {
  .auto-entry { animation: none; }
}
.auto-entry #auto-count {
  display: inline-block;
  min-width: 1.2em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ---------------- Fake PayPal modal ---------------- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 30, 0.6);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100;
}
.overlay[hidden] { display: none; }

.paypal-modal {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
  color: #2c2e2f;
  animation: pop 0.18s ease;
}
@keyframes pop {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.paypal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #eee;
}
.paypal-logo {
  font-weight: 800;
  font-size: 1.4rem;
  font-style: italic;
  letter-spacing: -0.02em;
}
.pp-pay { color: var(--paypal-blue); }
.pp-pal { color: var(--paypal-dark); }

.paypal-body { padding: 1.5rem 1.5rem 1.75rem; }
.paypal-body.pp-center { text-align: center; }

.pp-line { margin: 0.1rem 0; color: #6b7174; font-size: 0.9rem; }
.pp-amount {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0.2rem 0;
  color: #2c2e2f;
}
.pp-recipient { margin: 0.1rem 0 1.25rem; font-size: 1.05rem; }

.pp-source {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid #e6e8ea;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1.25rem;
}
.pp-source-icon { font-size: 1.4rem; }
.pp-source-title { font-size: 0.75rem; color: #6b7174; }
.pp-source-sub { font-weight: 600; }

/* Gut sichtbarer, alarmierender Auto-Zahlungs-Countdown */
.pp-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: -0.25rem 0 1.1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  background: #fdecec;
  border: 1px solid #f5b5b5;
  color: #b00020;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  animation: pp-alarm 1s steps(1, end) infinite;
}
.pp-countdown #pp-count {
  display: inline-block;
  min-width: 1.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  line-height: 1;
}
@keyframes pp-alarm {
  0%, 100% { background: #fdecec; border-color: #f5b5b5; }
  50%      { background: #ffd9d9; border-color: #ef8a8a; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-countdown { animation: none; }
}

.pp-success-note {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  color: #8a9094;
}

.btn-paypal {
  display: block;
  width: 100%;
  border: none;
  background: var(--paypal-blue);
  color: #fff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-paypal:hover { background: #005ea6; }

.btn-text {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  background: none;
  border: none;
  color: var(--paypal-blue);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.5rem;
  cursor: pointer;
}

.spinner {
  width: 44px;
  height: 44px;
  margin: 0.5rem auto 1.25rem;
  border: 4px solid #e6e8ea;
  border-top-color: var(--paypal-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.checkmark {
  width: 56px;
  height: 56px;
  margin: 0.5rem auto 1rem;
  border-radius: 50%;
  background: #e7f6ec;
  color: #1a7f43;
  font-size: 2rem;
  line-height: 56px;
  font-weight: 700;
}

/* ---------------- Exhibition ---------------- */

.exhibition-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}
.paid-badge {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: #1a7f43;
  background: #e7f6ec;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}

.curator {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  color: var(--ink-soft);
  margin-bottom: 3rem;
  max-width: 60ch;
}
.curator h2 {
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.curator code {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  background: var(--paper-2);
  padding: 0.05em 0.35em;
  border-radius: 4px;
}
.curator-sign { font-style: italic; font-size: 1rem; }

.exhibits {
  display: grid;
  gap: 1.5rem;
}

.exhibit {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf8;
  position: relative;
  overflow: hidden;
}
.exhibit-body {
  padding: 1.5rem 1.75rem;
}

/* Exponate mit Foto: Bild links, Text rechts; gestapelt auf Mobil */
.exhibit.has-img {
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr;
  align-items: start;
}
.exhibit-figure {
  margin: 0;
  background: var(--paper-2);
}
.exhibit-figure img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 640px) {
  .exhibit.has-img { grid-template-columns: 1fr; }
  .exhibit-figure img {
    max-height: 380px;
    object-fit: cover;
    object-position: center;
  }
}

.exhibit-no {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
}
.exhibit-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  font-weight: 600;
  margin: 0.2rem 0 0.75rem;
}
.exhibit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  border-top: 1px dotted var(--line);
  border-bottom: 1px dotted var(--line);
  padding: 0.6rem 0;
  margin-bottom: 0.9rem;
}
.exhibit-meta span strong { color: var(--ink); font-weight: 600; }
.exhibit-desc { margin: 0; }

/* ---------------- Guestbook ---------------- */

.exhibition-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

@media (max-width: 520px) {
  .ticket { flex-direction: column; align-items: stretch; }
  .btn-primary { width: 100%; }
}