/* =========================================================
   A Christmas Carol – Weihnachtstheater auf Schloss Scharfenberg
   Breakpoints: Tablet ≤ 1024px, Handy ≤ 767px
   ========================================================= */

/* ---------- Schriften (lokal, ohne Google-Server) ---------- */
@font-face {
  font-family: "Rosario";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/rosario-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Rosario";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/rosario-italic-400.woff2") format("woff2");
}
@font-face {
  font-family: "Belleza";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/belleza-400.woff2") format("woff2");
}
@font-face {
  font-family: "Aboreto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/aboreto-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2");
}

/* ---------- Farben & Grundwerte ---------- */
:root {
  --maroon: #310000;
  --maroon-deep: #1c0000;
  --sand: #d1ccc0;
  --sand-soft: rgb(209 204 192 / 0.72);
  --line: rgb(209 204 192 / 0.24);
  --gold: #feba00;
  --glass: rgb(36 0 0 / 0.72);
  --radius: 16px;
  --radius-s: 10px;
  --shadow: 0 24px 48px -24px rgb(0 0 0 / 0.7);
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --text-size: 18px;

  /* Abstände: wenige feste Stufen, die mit der Bildschirmbreite mitwachsen */
  --space-m: clamp(20px, 1rem + 0.8vw, 28px);           /* Überschrift → Inhalt */
  --space-l: clamp(28px, 1.25rem + 1.2vw, 40px);        /* Text → Button, Karten-Innenabstand */
  --gap: clamp(24px, 4vw, 64px);                        /* zwischen Spalten */
  --space-section: clamp(56px, 3rem + 4vw, 112px);      /* oben/unten je Abschnitt */
  --gutter: clamp(20px, 4.5vw, 72px);                   /* Seitenrand links/rechts */
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 75px;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: rgb(209 204 192 / 0.35) var(--maroon-deep);
  background: var(--maroon);
}

body {
  margin: 0;
  background: var(--maroon);
  color: var(--sand);
  font-family: "Rosario", sans-serif;
  font-size: var(--text-size);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1; }
p { margin: 0 0 0.9rem; }
a { color: var(--sand); text-decoration: none; }
strong, b { font-weight: 700; }
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }

::selection { background: var(--gold); color: var(--maroon); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
a, button { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 24px;
  border-radius: var(--radius-s);
  background: var(--sand);
  color: var(--maroon);
}
.skip-link:focus { left: 10px; top: 10px; }

/* Sektionen mit Hintergrundfoto, farbiger Abdunklung und weichen Übergängen */
.bg-overlay {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow:
    inset 0 90px 70px -60px var(--maroon),
    inset 0 -90px 70px -60px var(--maroon);
}
.bg-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-color, var(--maroon));
  opacity: var(--overlay-opacity, 0.5);
}
.bg-overlay > * { position: relative; }

.inner {
  display: flex;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

/* ---------- Überschriften, Trenner, Text, Buttons ---------- */
.section-title {
  font-family: "Belleza", sans-serif;
  font-size: clamp(34px, 1.6rem + 2.4vw, 56px);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.05;
  color: var(--sand);
  text-wrap: balance;
}
.section-title--loose { line-height: 1.2; }

/* Trennlinie mit Beschriftung und goldenen Rauten */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: var(--space-m) 0;
  font-size: var(--text-size);
  line-height: 1;
  color: var(--sand);
}
.divider::before,
.divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line) 40%);
}
.divider::after { background: linear-gradient(to left, transparent, var(--line) 40%); }
.divider > * {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 14px;
  margin: 0;
  font: inherit;
  line-height: 1;
}
.divider > *::before,
.divider > *::after {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}
.divider--right::after,
.divider--right > *::after { display: none; }
.divider--aboreto { font-family: "Aboreto", sans-serif; font-size: 22px; letter-spacing: 0.08em; }
.divider--belleza { font-family: "Belleza", sans-serif; font-size: 24px; letter-spacing: 0.06em; }
.divider--belleza-small { font-family: "Belleza", sans-serif; font-size: 18px; letter-spacing: 0.04em; }

/* Spalten nebeneinander bekommen eine Startbreite in % und schrumpfen dann
   gemeinsam (flex: 0 1 auto) – so teilt sich der Platz wie im Original auf. */
.text { display: flow-root; font-size: var(--text-size); color: var(--sand); }
.text p { text-wrap: pretty; }
.text > :last-child { margin-bottom: 0; }

.card {
  background: rgb(49 0 0 / 0.68);
  border-radius: var(--radius);
  padding: var(--space-l);
}
.card--center { text-align: center; }
/* Auf einfarbigem Grund ist die Karte unsichtbar: dann ohne Innenabstand,
   damit der Text bündig am Seitenrand steht */
.programm .card,
.mitwirkende .card {
  padding: 0;
  border-radius: 0;
  background: none;
}

/* Glas-Karten über Fotos */
.geschichte .card,
.hotel .card,
.tickets-box {
  border: 1px solid rgb(209 204 192 / 0.14);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--shadow);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 30px;
  border: 1px solid var(--sand);
  border-radius: 999px;
  background: var(--sand);
  color: var(--maroon);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn::after {
  content: "→";
  font-weight: 400;
  transition: transform 0.3s var(--ease);
}
.btn:focus-visible {
  border-color: var(--gold);
  background: var(--gold);
}
/* Hover nur bei Maus/Trackpad, sonst bleibt der Zustand nach dem Antippen hängen */
@media (hover: hover) {
  .btn:hover {
    border-color: var(--gold);
    background: var(--gold);
  }
  .btn:hover::after { transform: translateX(4px); }
}
.btn:active { transform: scale(0.98); }
.text + .btn { margin-top: var(--space-l); }

/* Sichtbarkeit je Gerät */
.only-tablet, .only-mobile, .not-desktop { display: none; }

/* Sanftes Einblenden beim Scrollen (setzt js/main.js) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Kopfzeile ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  min-height: 80px;
  margin-bottom: -80px;
  padding: 10px;
}
.header-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  padding: 12px 40px;
  border: 1px solid rgb(209 204 192 / 0.12);
  border-radius: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
/* Ganz oben über dem Startbild: Leiste durchsichtig */
.site-header.is-top:not(:has(.menu.is-open)) .header-bar {
  border-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.header-title {
  flex: 1 1 50%;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.35;
  color: var(--sand);
}
.main-nav {
  display: flex;
  flex: 1 1 50%;
  justify-content: flex-end;
  align-items: center;
}
.menu { display: flex; }
.menu a {
  position: relative;
  display: block;
  margin: 0 14px;
  padding: 6px 0;
  color: var(--sand-soft);
  font-size: 16px;
  letter-spacing: 0.03em;
  line-height: 20px;
  transition: color 0.3s var(--ease);
}
.menu li:first-child a { margin-left: 0; }
.menu li:last-child a { margin-right: 0; }
.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.35s var(--ease);
}
.menu a:hover,
.menu a:focus-visible,
.menu a.is-active { color: var(--sand); }
.menu a:hover::after,
.menu a:focus-visible::after,
.menu a.is-active::after { transform: scaleX(1); }

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgb(49 0 0 / 0.62);
  color: var(--sand);
  font-size: 22px;
  cursor: pointer;
}
.menu-toggle svg { width: 1em; height: 1em; fill: currentColor; }
.menu-toggle .icon-close,
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------- Start ---------- */
.hero {
  --overlay-color: #020000;
  --overlay-opacity: 0.6;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 0 5%;
  background-color: #020000;
  background-image: url("../img/hero-hintergrund.jpg");
  background-position: center center;
}
.hero-inner {
  display: flex;
  gap: 20px;
  width: 100%;
  max-width: 1800px;
}
.hero-logo { flex: 1 1 0; align-self: center; }
.hero-logo img { width: 100%; }
.hero-scroll {
  display: flex;
  flex: 0 0 57px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 48px;
}
.hero-scroll a {
  display: flex;
  padding: 12.5px;
  border: 1px solid rgb(209 204 192 / 0.5);
  border-radius: 50%;
  color: var(--sand-soft);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
  animation: fade-up 1.4s var(--ease) 0.6s backwards;
}
.hero-scroll a:hover {
  transform: translateY(3px);
  color: var(--gold);
  border-color: var(--gold);
}
.hero-scroll svg { width: 25px; height: 25px; fill: currentColor; }
.hero-figure {
  flex: 1 1 0;
  margin-top: 80px;
  background: url("../img/scrooge.webp") top center / contain no-repeat;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
}

/* ---------- Programm ---------- */
.programm { padding: var(--space-section) var(--gutter); background: var(--maroon); }
.programm .inner { align-items: center; gap: var(--gap); }
.programm-media { width: 90%; }
.programm-media img { width: 100%; }
.programm .card { width: 100%; }

/* Fotos im Inhalt: leicht gerundet, mit Schatten */
.programm-media img,
.mitwirkende-media img,
.gastro-col img,
.gastro-bilder img {
  border-radius: var(--radius-s);
  box-shadow: var(--shadow);
}

.geschichte {
  --overlay-opacity: 0.5;
  padding: 0 var(--gutter);
  background-color: var(--maroon);
  background-image: url("../img/programm-hintergrund.jpg");
  background-position: center right;
}
.geschichte .inner { column-gap: var(--gap); }
/* Karte mit gleichem Abstand oben und unten; das Darstellerfoto steht auf der Unterkante */
.geschichte .card {
  width: 100%;
  align-self: center;
  margin-block: var(--space-section);
  background: rgb(49 0 0 / 0.78);
}
.geschichte-media { width: 100%; align-self: flex-end; margin-top: var(--space-l); }
.geschichte-media img { width: 100%; }

/* ---------- Mitwirkende ---------- */
.mitwirkende { padding: var(--space-section) var(--gutter); background: var(--maroon); }
.mitwirkende .inner { align-items: center; gap: var(--gap); }
.mitwirkende-media { width: 100%; }
.mitwirkende-media img {
  width: 100%;
  height: 50vh;
  object-fit: cover;
  object-position: bottom center;
}
.mitwirkende .card {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-m);
}
.credit { letter-spacing: 0.04em; }
.credit span {
  margin-right: 0.4em;
  color: var(--gold);
  font-size: 0.8em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- Tickets ---------- */
.tickets {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 75vh;
  padding: var(--space-section) var(--gutter);
  background-color: var(--maroon);
  background-image: url("../img/tickets-hintergrund.jpg");
  background-position: top center;
}
.tickets::before { display: none; }
.tickets-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(60%, 960px);
  padding: var(--space-l);
  border-radius: var(--radius);
  background: rgb(49 0 0 / 0.74);
}
.tickets-box .divider { align-self: stretch; }
.tickets-price {
  margin: 0;
  font-family: "Belleza", sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-align: center;
}
.tickets-price span { color: var(--sand-soft); }

/* Termine als Kacheln: Wochentag, Tag, Monat, Uhrzeit */
.ticket-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  align-self: stretch;
  margin-top: var(--space-m);
}
.ticket-list li { flex: 0 0 calc((100% - 3 * 12px) / 4); }
.ticket {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  padding: 18px 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(209 204 192 / 0.06);
  color: var(--sand);
  text-align: center;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.ticket::after {
  content: "→";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.45;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.ticket-wd {
  color: var(--sand-soft);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ticket-day {
  margin-top: 6px;
  font-family: "Belleza", sans-serif;
  font-size: 44px;
  line-height: 1;
}
.ticket-month { font-size: 15px; }
.ticket-time {
  align-self: stretch;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 0.06em;
}
/* Hervorgehobene Kachel: per Tastatur immer, per Hover nur mit Maus/Trackpad */
a.ticket:focus-visible {
  border-color: var(--sand);
  background: var(--sand);
  color: var(--maroon);
}
a.ticket:focus-visible .ticket-wd,
a.ticket:focus-visible .ticket-time,
a.ticket:focus-visible .ticket-status { color: var(--maroon); }
a.ticket:focus-visible .ticket-time { border-color: rgb(49 0 0 / 0.2); }
@media (hover: hover) {
  a.ticket:hover {
    border-color: var(--sand);
    background: var(--sand);
    color: var(--maroon);
    transform: translateY(-3px);
  }
  a.ticket:hover .ticket-wd,
  a.ticket:hover .ticket-time,
  a.ticket:hover .ticket-status { color: var(--maroon); }
  a.ticket:hover .ticket-time { border-color: rgb(49 0 0 / 0.2); }
  a.ticket:hover::after { opacity: 1; transform: translateX(2px); }
  a.ticket.is-sold-out:hover * { opacity: 1; }
}
a.ticket:active { transform: scale(0.97); }

/* Ausverkaufte Vorstellung: bleibt Link zum Ticketshop, leicht gedämpft, mit Hinweis */
.ticket.is-sold-out .ticket-wd,
.ticket.is-sold-out .ticket-day,
.ticket.is-sold-out .ticket-month,
.ticket.is-sold-out .ticket-time { opacity: 0.6; transition: opacity 0.3s var(--ease); }
.ticket.is-sold-out .ticket-time { color: var(--sand); }
a.ticket.is-sold-out:focus-visible * { opacity: 1; }
.ticket-status {
  margin-top: 8px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tickets-logo { width: 220px; margin-top: var(--space-l); opacity: 0.9; }

/* ---------- Gastronomie ---------- */
.gastro { padding: var(--space-section) var(--gutter); background: var(--maroon); }
.gastro .inner { align-items: center; column-gap: var(--gap); }
.gastro-gallery { display: flex; gap: 20px; width: 61%; }
.gastro-col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.gastro-col img { width: 100%; }
.gastro-text { width: 50%; }
.gastro-text-inner { display: flex; flex-direction: column; }
.text a {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease);
}
.text a:hover,
.text a:focus-visible { color: var(--gold); text-decoration-color: currentColor; }

/* ---------- Hotel ---------- */
.hotel {
  --overlay-opacity: 0.4;
  display: flex;
  align-items: center;
  padding: var(--space-section) var(--gutter);
  background-image: url("../img/hotel-hintergrund.jpg");
  background-position: center center;
}
.hotel .inner { align-items: center; gap: var(--gap); }
.hotel-logo { width: 80%; }
.hotel-logo img { width: 100%; }
.hotel .card { width: 100%; background: rgb(49 0 0 / 0.7); }

/* ---------- Anreise ---------- */
.anreise {
  display: flex;
  padding: var(--space-section) var(--gutter);
  background: var(--maroon);
}
.anreise .inner { gap: var(--gap); }
.anreise-text,
.anreise-karte {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.anreise-text { width: 1600px; text-align: center; }
.anreise-karte { width: 100%; }
.anreise-karte img { width: 100%; }

/* ---------- Abschluss mit Logo ---------- */
.outro {
  --overlay-opacity: 0.6;
  background-image: url("../img/schloss-nacht.jpg");
  background-position: bottom center;
}
.outro .inner { align-items: center; justify-content: space-around; }
.outro-logo { width: 100%; padding: 10px; }
.outro-logo img {
  width: 100%;
  height: 40vh;
  object-fit: scale-down;
}
.outro-figure { width: 100%; }
.outro-figure img { width: 60%; margin: -100px auto 0; }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--maroon); }
.footer-main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--gap);
  max-width: calc(1600px + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--space-section) var(--gutter) var(--space-l);
}
.footer-thanks {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-m);
}
.footer-title {
  font-family: "Belleza", sans-serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--sand);
}
.footer-logo { width: 180px; opacity: 0.9; }
.footer-info { width: 66%; }
.footer-info a {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease);
}
.footer-info a:hover,
.footer-info a:focus-visible { color: var(--gold); text-decoration-color: currentColor; }

.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 0 max(var(--gutter), (100% - 1600px) / 2);
  padding: 18px 0 24px;
  border-top: 1px solid var(--line);
  color: var(--sand-soft);
  font-size: 15px;
}
.footer-bottom p { flex: 1 1 0; margin: 0; }
.footer-bottom a {
  color: var(--sand-soft);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  transition: color 0.3s var(--ease);
}
.footer-bottom a:hover,
.footer-bottom a:focus-visible { color: var(--sand); }
.footer-legal { text-align: right; }

/* =========================================================
   Desktop: feststehende Hintergrundbilder
   (nur mit Maus/Trackpad – auf iPads führt "fixed" zu stark vergrößerten Bildern)
   ========================================================= */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .hero, .geschichte, .tickets, .hotel, .outro { background-attachment: fixed; }
}

/* =========================================================
   Tablet (768–1024px)
   ========================================================= */
@media (max-width: 1024px) {
  .only-desktop { display: none; }
  .not-desktop { display: flex; }

  /* Kopfzeile mit aufklappbarem Menü */
  .site-header { min-height: 0; padding: 0 10px; }
  .header-bar { position: static; padding: 10px 25px; }
  .header-title { flex: 1 1 100%; }
  .main-nav { flex: 0 1 35%; }
  .menu-toggle { display: flex; }
  .menu {
    position: absolute;
    top: 100%;
    left: 10px;
    right: 10px;
    display: none;
    flex-direction: column;
    margin-top: 12px;
    border: 1px solid rgb(209 204 192 / 0.12);
    border-radius: var(--radius);
    /* voll deckend: innerhalb der Glas-Leiste wirkt kein zweiter Weichzeichner */
    background: #240000;
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .menu.is-open { display: flex; }
  .menu a,
  .menu li:first-child a,
  .menu li:last-child a {
    margin: 0;
    padding: 15px;
    color: var(--sand);
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    text-align: center;
  }
  .menu li + li a { border-top: 1px solid rgb(209 204 192 / 0.1); }
  .menu a::after { display: none; }
  .menu a.is-active { color: var(--gold); }

  .hero {
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
  }
  .hero-inner { flex-direction: column; justify-content: flex-end; align-items: center; flex: 1; }
  .hero-logo { flex: none; align-self: center; width: 90%; }
  .hero-scroll { flex: none; width: 100px; margin: 100px 0 50px; padding: 0 0 18px; }
  .hero-figure { display: none; }

  .programm-tablet { width: 60%; }
  .programm-tablet img { width: 100%; }

  .geschichte { padding: var(--space-section) var(--gutter); }
  .geschichte .inner { flex-direction: column; align-items: flex-end; }
  .geschichte .card { align-self: flex-end; margin: 0; text-align: right; }

  .mitwirkende-media { width: 60%; }
  .mitwirkende-media img { height: 45vh; }

  .tickets { min-height: 0; }
  .tickets-box { width: 100%; }

  .gastro .inner { flex-direction: column; }
  .gastro-text { width: 100%; }
  .gastro-bilder { gap: var(--space-m); margin-bottom: var(--space-m); }
  .gastro-bilder img { flex: 1 1 0; min-width: 0; height: 260px; object-fit: cover; }

  .hotel .inner { flex-direction: column; justify-content: center; }
  .hotel-logo { width: 80%; max-width: 520px; }

  .anreise .inner { flex-direction: column; align-items: center; gap: var(--space-l); }
  .anreise-text { width: 100%; }
  .anreise-karte { width: 85%; }

  .outro .inner { width: 80%; justify-content: center; }
  .outro-logo img { padding: 0 15%; }

  .footer-info { width: 100%; }
  .footer-logo { width: 180px; }
  .footer-bottom { flex-direction: column; gap: 6px; }
  .footer-bottom p { flex: none; text-align: center; }
}

/* nur Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .only-tablet { display: block; }
}

/* =========================================================
   Handy (≤ 767px)
   ========================================================= */
@media (max-width: 767px) {
  :root { --text-size: 16px; }

  .only-mobile { display: block; }
  .not-mobile { display: none; }

  .site-header { min-height: 50px; padding: 0; }
  .header-bar { align-self: stretch; padding: 0; border-width: 0 0 1px; border-radius: 0; }
  .header-title { display: none; }
  .main-nav { flex: 1 1 100%; justify-content: flex-start; margin: 4px var(--gutter); }
  .menu { margin-top: 0; }
  .menu a,
  .menu li:first-child a,
  .menu li:last-child a { padding: 14px; }
  .menu-toggle { font-size: 20px; }

  .hero { min-height: 75vh; justify-content: center; }
  .hero-inner { justify-content: center; }
  .hero-logo { width: 100%; }
  .hero-scroll { display: none; }

  /* schmalere Schrift, damit auch lange Wörter wie ÜBERNACHTUNG passen */
  .section-title { font-size: clamp(26px, 8.5vw, 36px); letter-spacing: 0.03em; }
  .text p { -webkit-hyphens: auto; hyphens: auto; }

  .btn {
    width: 100%;
    padding: 15px 20px;
    font-size: 14px;
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-wrap: balance;
  }

  .programm .inner { flex-wrap: wrap; }
  .programm .card { flex: 1 1 100%; }
  .divider--aboreto { font-size: 17px; }

  .darsteller-mobil {
    min-height: 25vh;
    padding: var(--space-l) var(--gutter) 0;
    background: url("../img/schloss-nacht.jpg") bottom center / cover no-repeat;
  }
  .darsteller-mobil img { width: 100%; }

  .geschichte { padding: 0; background-position: center center; box-shadow: none; }
  .geschichte .card {
    order: 99;
    padding: var(--space-section) var(--gutter);
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
  }

  .mitwirkende .inner { flex-direction: column; gap: var(--space-l); }
  .mitwirkende-mobil img { width: 80%; margin: 0 auto; }
  .mitwirkende .card { flex: none; width: 100%; }

  .tickets { background-position: center center; }
  .tickets-box { padding: var(--space-l) 12px; }
  .tickets .section-title { line-height: 1.1; }
  .tickets-price { font-size: 19px; }
  .ticket-list { gap: 8px; margin-top: 20px; }
  .ticket-list li { flex-basis: calc((100% - 2 * 8px) / 3); }
  .ticket { padding: 14px 4px 10px; border-radius: 10px; }
  .ticket::after { display: none; }
  .ticket-wd { font-size: 11px; letter-spacing: 0.06em; }
  .ticket-day { margin-top: 4px; font-size: 34px; }
  .ticket-month { font-size: 13px; }
  .ticket-time { margin-top: 8px; padding-top: 8px; font-size: 13px; letter-spacing: 0.02em; }
  .ticket-status { margin-top: 6px; font-size: 11px; letter-spacing: 0.06em; }

  .gastro .section-title { line-height: 1.1; }
  .gastro-bilder { justify-content: center; }
  .gastro-bilder img { height: auto; }

  .hotel-logo { width: 100%; }
  .hotel .card { padding-inline: 20px; }

  .anreise-karte { width: 100%; }

  .outro-logo img { padding: 0 5%; }

  .footer-main { flex-wrap: wrap; gap: var(--space-l); }
  .footer-info { order: 1; flex: 1 1 100%; text-align: center; }
  .footer-info a { display: inline-block; padding-block: 6px; }
  .footer-thanks { order: 2; flex: 1 1 100%; align-items: center; text-align: center; }
  .footer-logo { width: 180px; }
}

/* Handy hochkant: Hintergrundfotos als Ausschnitt aus der Bildmitte (kleinere Dateien) */
@media (max-width: 767px) and (orientation: portrait) {
  .hero { background-image: url("../img/hero-hintergrund-mobil.webp"); }
  .geschichte { background-image: url("../img/programm-hintergrund-mobil.webp"); }
  .tickets { background-image: url("../img/tickets-hintergrund-mobil.webp"); }
  .hotel { background-image: url("../img/hotel-hintergrund-mobil.webp"); }
  .darsteller-mobil { background-image: url("../img/schloss-nacht-mobil.webp"); }
  .outro { background-image: url("../img/schloss-nacht-mobil.webp"); }
}

/* Sehr schmale Handys (z. B. iPhone SE der 1. Generation) */
@media (max-width: 359px) {
  .ticket-list li { flex-basis: calc((100% - 8px) / 2); }
  .btn { font-size: 13px; letter-spacing: 0.04em; }
}

/* Handy quer: Startlogo passt in die Bildschirmhöhe */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 100vh; justify-content: center; }
  .hero-inner { justify-content: center; }
  .hero-logo { width: auto; }
  .hero-logo img { width: auto; max-height: calc(100vh - 130px); margin: 70px auto 30px; }
  .hero-scroll { display: none; }
}

/* Weniger Bewegung, wenn im System so eingestellt */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-scroll a { animation: none; }
  .reveal { opacity: 1; transform: none; }
  * { transition: none !important; }
}