/* ================================================================
   THEME.CSS — WordPress- & WooCommerce-Anpassungen auf Basis des
   VX4-Design-Systems (base.css + forest-camp.css).
   ================================================================ */

/* ----------------------------------------------------------------
   GRUNDLAGEN
   ---------------------------------------------------------------- */
.skip-link:focus {
  position: fixed;
  top: 12px; left: 12px;
  width: auto; height: auto;
  clip: auto;
  z-index: 2000;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-bg);
  font-size: var(--fs-base);
  font-weight: 600;
}

/* Fixe Nav unter der Admin-Bar */
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
}

/* Eingescrollte Nav (Frosted-Bar): etwas mehr Luft nach oben/unten —
   die 16px aus dem Design-System wirkten zu gedrungen. */
.nav.is-scrolled {
  padding-top: 22px;
  padding-bottom: 22px;
}

/* WooCommerce setzt auf Shop-Seiten `.woocommerce-page img { height: auto }`
   und hebelt damit die Logo-Begrenzung der Nav aus — Logo wurde riesig. */
.woocommerce-page .nav__brand-img,
.nav__brand-img {
  height: 100%;
  width: auto;
}
.woocommerce-page .fc-footer__logo img { width: 230px; height: auto; }

/* WP-Menü: Listenpunkte/Zustände ans Pill-Design angleichen */
.nav__links li { list-style: none; }
/* Hier stand eine Regel, die .current-menu-item einfärbte — bewusst
   entfernt, nicht vergessen:

   Bei einem Anker-Menü auf der Startseite markiert WordPress praktisch
   JEDEN Eintrag als „current", weil alle auf dieselbe Seite zeigen. Die
   Markierung sagt hier also nichts aus. Welcher Punkt aktiv ist,
   entscheidet das Skript über .is-active samt weißer Pille — und jede
   zusätzliche Farbregel auf .current-menu-item hätte eine höhere
   Spezifität als .nav__links a.is-active und würde genau die
   überschreiben. */

/* Footer: Rechtliches-Menü */
.fc-footer__legal-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.fc-footer__legal-menu a { color: var(--c-ink-3); transition: color .25s ease; }
.fc-footer__legal-menu a:hover { color: var(--c-accent); }

/* ----------------------------------------------------------------
   SEKTIONSKÖPFE — bündig mit der Inhaltsbreite
   Das Design-System zentriert .slate__head auf 1640px Lesebreite,
   der Inhalt läuft aber full-bleed im Sektions-Padding. Auf breiten
   Screens stand die Überschrift dadurch eingerückt — hier angeglichen:
   Kopf startet an derselben Kante wie der Inhalt. Die max-Breiten der
   Textzeilen (Titel/Lead) bleiben erhalten.
   ---------------------------------------------------------------- */
.slate__head {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* Bewusst zentrierte Köpfe (Variante --center) bleiben zentriert */
.slate__head--center {
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------------------------------
   INHALTSSEITEN OHNE ELEMENTOR (Impressum, Datenschutz, AGB …)
   ---------------------------------------------------------------- */
/* Diese Seiten beginnen ohne Hero, also steht die Sektion direkt unter
   der fixen Nav. Das normale Sektionspolster ist dafür nicht gedacht:
   mobil waren es 80 px bei 104 px Navhöhe — der Titel lag zu einem
   Viertel darunter, am Rechner blieben ganze 6 px Luft. */
.fc-page {
  min-height: 60vh;
  padding-top: calc(clamp(136px, 11vw, 190px) + env(safe-area-inset-top, 0px));
}
.fc-page__content {
  max-width: 820px;
  font-size: var(--fs-xl);
  line-height: 1.75;
  color: var(--c-ink-2);
}
.fc-page__content > * + * { margin-top: 1.1em; }
.fc-page__content h2,
.fc-page__content h3,
.fc-page__content h4 {
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin-top: 1.8em;
}
.fc-page__content h2 { font-size: var(--fs-4xl); }
.fc-page__content h3 { font-size: var(--fs-2xl); }
.fc-page__content h4 { font-size: var(--fs-xl); }
.fc-page__content a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.fc-page__content ul { list-style: disc; padding-left: 1.3em; }
.fc-page__content ol { list-style: decimal; padding-left: 1.3em; }
.fc-page__content strong { color: var(--c-ink); }
.fc-404 { text-align: left; }
.fc-404 .btn { width: fit-content; }

/* Textsektion auf heller Fläche: Farben ans Papier-Design anpassen */
.slate--light .fc-page__content { color: var(--c-ink-dark-2); }
.slate--light .fc-page__content h2,
.slate--light .fc-page__content h3,
.slate--light .fc-page__content h4,
.slate--light .fc-page__content strong { color: var(--c-ink-dark); }
.slate--light .fc-page__content a { color: var(--c-cool); }

/* ----------------------------------------------------------------
   INFO-KARTEN — Impressum/Kontaktangaben (Widget fc_infocards)
   ---------------------------------------------------------------- */
.fc-infocards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px;
}
@media (max-width: 1000px) { .fc-infocards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .fc-infocards { grid-template-columns: 1fr; } }
.fc-infocard {
  padding: 26px 26px 24px;
  border-radius: 20px;
  background: rgba(244, 241, 236, 0.05);
  border: 1px solid rgba(244, 241, 236, 0.10);
}
.slate--light .fc-infocard {
  background: #ffffff;
  border: 1px solid rgba(21, 20, 15, 0.06);
  box-shadow: 0 2px 12px rgba(21, 20, 15, 0.06);
}
.fc-infocard__lbl {
  display: block;
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 10px;
}
.slate--light .fc-infocard__lbl { color: var(--c-cool-soft); }
.fc-infocard__title {
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: var(--fs-2xl);
  color: var(--c-ink);
  margin: 0 0 10px;
}
.slate--light .fc-infocard__title { color: var(--c-ink-dark); }
.fc-infocard__lines {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--c-ink-2);
  margin: 0;
}
.slate--light .fc-infocard__lines { color: var(--c-ink-dark-2); }
.fc-infocard__lines a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.slate--light .fc-infocard__lines a { color: var(--c-cool); }

/* ----------------------------------------------------------------
   WOOCOMMERCE — dunkler Shop-Look für Kasse, Warenkorb, Konto
   ---------------------------------------------------------------- */
.woocommerce-page .fc-page,
.fc-woocommerce { color: var(--c-ink-2); }

/* Überschriften */
.woocommerce-page .fc-page h2,
.woocommerce-page .fc-page h3,
.fc-woocommerce h1, .fc-woocommerce h2 {
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin: 0 0 18px;
}

/* Der Slate-Rahmen der WC-Seiten braucht Lesebreite */
.woocommerce-page .fc-page__content { max-width: 1100px; }

/* Formulare */
.woocommerce form .form-row label {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: 7px;
}
.woocommerce form .form-row label .required { color: var(--c-accent); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-selection,
.woocommerce-page .fc-page input[type="text"],
.woocommerce-page .fc-page input[type="email"],
.woocommerce-page .fc-page input[type="tel"],
.woocommerce-page .fc-page input[type="password"] {
  font-family: var(--t-body);
  font-size: var(--fs-lg);
  color: var(--c-ink);
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(10, 10, 10, 0.45);
  border: 1px solid rgba(244, 241, 236, 0.16);
  transition: border-color .25s ease, background .25s ease;
  width: 100%;
  height: auto;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--c-accent);
  background: rgba(10, 10, 10, 0.65);
}
.woocommerce form .form-row ::placeholder { color: var(--c-ink-4); }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: #b3564a; }
.woocommerce form .form-row select option { background: #161617; color: var(--c-ink); }

/* Select2 (Länderauswahl) */
.select2-container--default .select2-selection--single {
  height: auto;
  padding: 13px 16px;
  background: rgba(10, 10, 10, 0.45);
  border: 1px solid rgba(244, 241, 236, 0.16);
  border-radius: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--c-ink);
  line-height: 1.4;
  padding: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 12px; }
.select2-dropdown {
  background: #161617;
  border: 1px solid rgba(244, 241, 236, 0.16);
  color: var(--c-ink);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: rgba(10, 10, 10, 0.45);
  border: 1px solid rgba(244, 241, 236, 0.16);
  color: var(--c-ink);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--c-accent);
  color: var(--c-bg);
}

/* Buttons */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order,
.woocommerce-page .fc-page .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 26px;
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-bg);
  font-family: var(--t-body);
  font-weight: 500;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  border: none;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.7,0,.3,1), background .25s ease, box-shadow .25s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover {
  background: var(--c-accent);
  color: var(--c-bg);
  transform: translateY(-2px);
}
.woocommerce #place_order { width: 100%; padding: 18px 28px; }
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  background: var(--c-ink);
  color: var(--c-bg);
  opacity: 0.35;
  padding: 16px 26px;
}

/* Tabellen (Warenkorb, Bestellübersicht) */
.woocommerce table.shop_table {
  border: 1px solid rgba(244, 241, 236, 0.10);
  border-radius: 18px;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(244, 241, 236, 0.03);
  color: var(--c-ink-2);
}
.woocommerce table.shop_table th {
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  border-bottom: 1px solid rgba(244, 241, 236, 0.10);
  padding: 14px 16px;
}
.woocommerce table.shop_table td {
  border-top: 1px solid rgba(244, 241, 236, 0.08);
  padding: 14px 16px;
  background: transparent;
}
.woocommerce table.shop_table td.product-name { color: var(--c-ink); }
.woocommerce table.shop_table .woocommerce-Price-amount {
  font-family: var(--t-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
.woocommerce table.shop_table tfoot th { border-top: 1px solid rgba(244, 241, 236, 0.10); }
.woocommerce .order-total .woocommerce-Price-amount {
  font-family: var(--t-display);
  font-weight: 900;
  font-size: var(--fs-3xl);
}
.woocommerce a.remove {
  color: var(--c-ink-3) !important;
  transition: color .2s ease;
}
.woocommerce a.remove:hover { color: var(--c-ink) !important; background: transparent; }

/* Mengen-Stepper */
.woocommerce .quantity .qty {
  padding: 10px 8px;
  border-radius: 10px;
  background: rgba(10, 10, 10, 0.45);
  border: 1px solid rgba(244, 241, 236, 0.16);
  color: var(--c-ink);
}

/* Hinweise/Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: rgba(244, 241, 236, 0.05);
  border: 1px solid rgba(203, 189, 147, 0.30);
  border-top: none;
  border-left: 4px solid var(--c-accent);
  border-radius: 14px;
  color: var(--c-ink-2);
  padding: 16px 20px 16px 52px;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--c-accent); top: 16px; left: 20px; }
.woocommerce-error { border-left-color: #b3564a; }
.woocommerce-error::before { color: #d98a7f; top: 16px; left: 20px; }
.woocommerce-error li { color: #d98a7f; }

/* Gutschein-Zeile */
.woocommerce form.checkout_coupon,
.woocommerce form.login {
  background: rgba(244, 241, 236, 0.03);
  border: 1px solid rgba(244, 241, 236, 0.10);
  border-radius: 18px;
  padding: 22px;
}

/* Zahlarten in der Kasse */
.woocommerce-checkout #payment {
  background: rgba(244, 241, 236, 0.03);
  border: 1px solid rgba(244, 241, 236, 0.16);
  border-radius: 14px;
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid rgba(244, 241, 236, 0.10);
  padding: 0;
}
.woocommerce-checkout #payment ul.payment_methods li {
  padding: 15px 18px;
  background: rgba(10, 10, 10, 0.35);
  border-top: 1px solid rgba(244, 241, 236, 0.10);
  color: var(--c-ink);
}
.woocommerce-checkout #payment ul.payment_methods li:first-child { border-top: none; border-radius: 14px 14px 0 0; }
.woocommerce-checkout #payment div.payment_box {
  background: rgba(244, 241, 236, 0.06);
  color: var(--c-ink-2);
  border-radius: 10px;
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: rgba(244, 241, 236, 0.06); }
.woocommerce-checkout #payment div.place-order { padding: 18px; }

/* Datenschutz-Text unter der Kasse */
.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-ink-3);
}
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-wrapper a { color: var(--c-accent); text-decoration: underline; }

/* Konto-Navigation */
.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 18px;
  border-radius: 12px;
  color: var(--c-ink-2);
  transition: background .2s ease, color .2s ease;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
  background: rgba(203, 189, 147, 0.10);
  color: var(--c-ink);
}

/* Danke-Seite */
.woocommerce-order .woocommerce-thankyou-order-received {
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(24px, 3vw, 34px);
  color: var(--c-ink);
  margin-bottom: 24px;
}
.woocommerce ul.order_details {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0;
  margin: 0 0 28px;
}
.woocommerce ul.order_details li {
  border: 1px solid rgba(244, 241, 236, 0.12);
  border-radius: 14px;
  padding: 14px 18px;
  font-family: var(--t-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  float: none;
  margin: 0;
}
.woocommerce ul.order_details li strong {
  display: block;
  margin-top: 6px;
  font-family: var(--t-body);
  font-size: var(--fs-lg);
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-ink);
}

/* ----------------------------------------------------------------
   TICKETSHOP-WIDGET — Ergänzungen zur Vorlage
   ---------------------------------------------------------------- */
/* Warenkorb-Zeilen: Preise sauber rechtsbündig in einer Spalte.
   justify-content: space-between verteilte die drei Elemente
   (Label / Preis / X) gleichmäßig — dadurch stand jeder Preis je nach
   Label-Länge woanders. Label nimmt jetzt den freien Raum ein. */
.cart__lines li > span:first-child { flex: 1 1 auto; min-width: 0; }
.cart__lines li .cart__line-val {
  margin-left: auto;
  text-align: right;
}
/* Fehlermeldung aus dem AJAX-Sync */
.fc-shop-msg {
  margin: 14px 0 0;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(179, 86, 74, 0.12);
  border: 1px solid rgba(179, 86, 74, 0.5);
  color: #d98a7f;
  font-size: var(--fs-md);
}
.fc-shop-msg[hidden] { display: none; }

/* Ladezustand des Kasse-Buttons */
.btn.is-busy { opacity: 0.6; pointer-events: none; }

/* Scroll-Sperre, solange Kasse oder Warenkorb offen sind.
   Das Design-System setzt html/body auf overflow-x: clip — dadurch
   propagiert `body { overflow: hidden }` nicht mehr zum Viewport und
   die Seite blieb dahinter scrollbar. Die Sperre muss deshalb auf
   dem html-Element selbst liegen. */
html:has(body.checkout-open),
html:has(body.cart-open) {
  overflow: hidden;
}

/* Rechnungsadresse im Kassen-Overlay: PLZ/Ort nebeneinander, Länder-Select im Feld-Look */
.fc-addr-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 2fr;
  gap: 12px;
}
@media (max-width: 480px) { .fc-addr-row { grid-template-columns: 1fr; } }
.cart__field select {
  font-family: var(--t-body);
  font-size: var(--fs-lg);
  color: var(--c-ink);
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(10, 10, 10, 0.45);
  border: 1px solid rgba(244, 241, 236, 0.16);
  transition: border-color .25s ease, background .25s ease;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23b4b0a8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}
.cart__field select:focus {
  outline: none;
  border-color: var(--c-accent);
  background-color: rgba(10, 10, 10, 0.65);
}
.cart__field select option { background: #161617; color: var(--c-ink); }
.cart__field select.is-invalid { border-color: #b3564a; }

/* Ausverkauft */
.avail-pill.is-soldout { border-color: rgba(179, 86, 74, 0.5); }
.avail-pill.is-soldout .avail-pill__dot { background: #b3564a; animation: none; }

/* ----------------------------------------------------------------
   SEKTIONSABSTÄNDE IN ELEMENTOR
   Das Design-System kollabiert das obere Padding aufeinanderfolgender
   gleichfarbiger Sektionen (.slate--light + .slate--light). In Elementor
   steckt jede Sektion in einem eigenen Widget-Wrapper, wodurch der
   Nachbar-Selektor nie greift — hier über :has() nachgebaut.
   ---------------------------------------------------------------- */
.elementor-element:has(> .elementor-widget-container .slate--light:last-child) + .elementor-element .slate--light,
.elementor-element:has(> .slate--light:last-child) + .elementor-element .slate--light {
  padding-top: 0;
  /* Kein Polster, also auch nichts abzuziehen — der Sprung landet direkt
     auf der Kante, und die ist hier zugleich die Überschrift. */
  scroll-margin-top: 0;
}
.elementor-element:has(> .elementor-widget-container .slate--dark:last-child) + .elementor-element .slate--dark,
.elementor-element:has(> .slate--dark:last-child) + .elementor-element .slate--dark {
  padding-top: 0;
  scroll-margin-top: 0;
}

/* Anker-Sprünge.

   Beim Sprung landet nicht die Sektionskante, sondern das, was man lesen
   will: die Überschrift. Dazwischen liegt das Kopfpolster der Sektion,
   und das ist je nach Sektionsart und Fensterbreite verschieden.

   Deshalb zwei Größen: scroll-padding hält die Nav frei, und jede
   Sektion zieht ihr eigenes Polster per negativem scroll-margin wieder
   ab. Beides addiert sich — genau das war vorher das Problem: Sektionen
   ohne Polster hatten zusätzlich 150 px scroll-margin, zusammen mit den
   106 px Polster landete „Der Platz" damit 158 px unter der Nav. */
html {
  scroll-padding-top: calc(var(--nav-h) + 28px);
}
.slate { scroll-margin-top: calc(-1 * clamp(80px, 9vw, 140px)); }
/* Sektionen ohne Kopf haben ein kleineres Polster. */
.slate--nohead { scroll-margin-top: calc(-1 * clamp(40px, 4.5vw, 70px)); }

/* ----------------------------------------------------------------
   ANFAHRT — Adresskarte und Schritte gleich hoch
   Die Adresskarte streckt sich auf die Höhe der Schritte-Liste,
   die Maps-Buttons rutschen dabei an die Unterkante.
   ---------------------------------------------------------------- */
/* Mit einem Weg dürfen Adresskarte und Liste auf gleiche Höhe ziehen.
   Mit zweien wird die rechte Spalte doppelt so hoch — die Adresskarte
   würde mitwachsen und der Maps-Button stünde einsam ganz unten. */
.route { align-items: stretch; }
.route:has(.route-way + .route-way) { align-items: start; }
.route-card {
  display: flex;
  flex-direction: column;
}
.route-card__actions { margin-top: auto; }
.route-card__addr { margin-bottom: 22px; }

/* ----------------------------------------------------------------
   VX4 TOUR-UNTERSEITE (single-fc-tour.php)
   ---------------------------------------------------------------- */
.fc-tour-head { padding-top: clamp(140px, 16vw, 200px); } /* Platz für die fixe Nav */
.fc-tour-head__media {
  position: relative;
  height: clamp(260px, 38vw, 480px);
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: clamp(32px, 4vw, 56px);
  border: 1px solid rgba(244, 241, 236, 0.10);
}
.fc-tour-head__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.04) brightness(0.85);
}
.fc-tour-head .spec-row { margin-top: 8px; }

/* „So funktioniert's"-Leiste über der Anmeldung */
.fc-tour-how {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: clamp(32px, 4vw, 48px);
}
@media (max-width: 900px) { .fc-tour-how { grid-template-columns: 1fr; } }
.fc-tour-how li {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 20px;
  background: rgba(203, 189, 147, 0.06);
  border: 1px solid rgba(203, 189, 147, 0.25);
}
.fc-tour-how__num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent);
  color: var(--c-bg);
  font-family: var(--t-display);
  font-weight: 900;
  font-size: var(--fs-base);
}
.fc-tour-how strong {
  display: block;
  font-family: var(--t-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: var(--fs-lg);
  color: var(--c-ink);
  margin-bottom: 4px;
}
.fc-tour-how p {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--c-ink-2);
  margin: 0;
}

.fc-tour-dates { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 34px; }
.fc-tour-date[disabled] { opacity: 0.4; cursor: not-allowed; transform: none !important; }

.fc-tour-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  margin-bottom: 34px;
}
.fc-tour-fields .pay-group { margin-top: 4px; }
#fcTourForm .tickets__subhead { margin: 10px 0 16px; }
#fcTourSubmit { width: fit-content; gap: 10px; }
#fcTourForm .cart__success p { max-width: 420px; }

/* ----------------------------------------------------------------
   ELEMENTOR — randlose Container im Editor & Frontend
   ---------------------------------------------------------------- */
/* Elementor setzt global `.elementor img { height: auto }` und lädt nach
   dem Theme — die Highlight-Karten brauchen aber ein füllendes Cover-Bild.
   Höhere Spezifität stellt das Original-Verhalten wieder her. */
.elementor .highlight-card img,
.highlight-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.elementor .guide-block__portrait img,
.guide-block__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Guide-Widget: Text direkt neben dem Porträt.
   Die Bildspalte (0.65fr) wurde auf breiten Screens deutlich breiter als
   das Porträt selbst (das bei max-height 620px und 4:5 nur ~496px braucht)
   — die Restbreite wirkte wie ein riesiger Abstand. Spalte deshalb auf
   die echte Porträtbreite begrenzen. */
@media (min-width: 901px) {
  .guide-block {
    grid-template-columns: minmax(280px, 496px) 1fr;
    gap: clamp(16px, 2vw, 32px);
  }
}
.elementor .tour-show__media img,
.tour-show__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Highlight-Karten mobil: volle Inhaltsbreite und flacher.
   Das Design-System kombiniert feste Höhe (clamp) mit aspect-ratio 4/5 —
   dadurch leitet der Browser die Breite aus der Höhe ab und die Karte
   wird schmaler als der Inhalt. */
@media (max-width: 700px) {
  .highlight-card,
  .highlight-card--wide {
    width: 100%;
    height: auto;
    /* Kein festes Format mehr. 16/10 ergab bei 390 px gerade 214 px
       Höhe — Zeile, zweizeilige Überschrift und drei Zeilen Text füllten
       die Karte damit komplett aus, vom Foto blieb nichts übrig. Jetzt
       gibt der Text die Höhe vor, die Untergrenze hält dem Bild Platz
       frei, und eine längere Überschrift drückt das Foto nicht weg. */
    aspect-ratio: auto;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  /* Relativ statt absolut: So wächst die Karte mit dem Text mit. Nicht
     static — die Karte braucht die Ebene über dem Verlauf. Das Polster
     oben ist der garantierte Blick aufs Foto. */
  .highlight-card figcaption {
    position: relative;
    padding: 120px 22px 26px;
  }
}
.elementor-section.elementor-section-boxed > .elementor-container { max-width: none; }
.fc-main > .elementor { overflow-x: clip; }

/* Editor-Vorschau: Sektionen brauchen im Editor keine fixe Nav darüber */
.elementor-editor-active .preloader { display: none; }

/* Reveal-Animation im Editor abschalten.
   .reveal startet mit opacity:0 und wird erst sichtbar, wenn der
   IntersectionObserver in main.js die Klasse .is-in setzt. Im Editor
   greift das nicht: Elementor rendert bearbeitete Widgets per AJAX
   nach, und der Beobachter kennt diese neuen Elemente nicht mehr.
   Ohne diese Ausnahme bleiben die Sektionen im Editor unsichtbar —
   man baut dann blind. */
.elementor-editor-active .reveal,
.elementor-editor-active .reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}