/* ROURS FX – EventHaus 11. Nur Zustände der fx-…-Klassen. Aussehen (Farben, Größen, Lage) steht in den Elementor-Klassen.
   Zustände setzt fx.js: fx-fest / fx-offen am Kopf, fx-da am Stempel, fx-offen am Kalender-Platz.
   .fx-js steht nur auf der Website, nie im Editor: dort bleibt alles im Ruhezustand sichtbar. */

/* ===== fx-kopf: Kopfleiste durchsichtig auf dem Hero, ab 40 px schwarz, Logo kleiner ===== */
.fx-js .fx-kopf-grund { opacity: 0; transition: opacity .25s ease-out; }
.fx-js .fx-fest .fx-kopf-grund,
.fx-js .fx-offen .fx-kopf-grund { opacity: 1; }

.fx-kopf-logo { transform-origin: center; transition: transform .25s ease-out; }
.fx-fest .fx-kopf-logo { transform: scale(.7); }

/* Menü-Knopf: zwei Striche werden zum X (Striche setzt fx.js ein) */
.fx-menue-knopf svg { width: 22px; height: 22px; display: block; }
.fx-menue-knopf path { transform-box: fill-box; transform-origin: center; transition: transform .18s ease-out; }
.fx-offen .fx-strich-1 { transform: translateY(3px) rotate(45deg); }
.fx-offen .fx-strich-2 { transform: translateY(-3px) rotate(-45deg); }
.fx-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Klappmenü unter 1280 px: auf demselben Weg auf und zu, Ursprung oben rechts */
@media (max-width: 1279px) {
  .fx-js .fx-menue {
    opacity: 0; visibility: hidden; transform: translateY(-8px); transform-origin: top right;
    transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s .18s;
  }
  .fx-js .fx-offen .fx-menue {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .18s ease-out, transform .18s ease-out;
  }
}
@media (max-width: 767px) {
  .fx-fest .fx-kopf-logo { transform: scale(.8); }
}

/* ===== fx-stempel: Stempel „Nr. 11“ schlägt einmal auf ===== */
.fx-js .fx-stempel { opacity: 0; transform: rotate(-8deg) scale(1.6); }
.fx-js .fx-stempel.fx-da {
  opacity: 1; transform: rotate(-8deg) scale(1);
  transition: opacity .12s linear .35s, transform .32s cubic-bezier(.3, 1.5, .5, 1) .35s;
}

/* ===== fx-kalender-platz: Kalender lädt beim Heranscrollen, ohne Rahmen ===== */
.fx-kalender-platz iframe { display: block; width: 100%; height: 360px; border: 0; }

/* Buchungsseite eingebettet: ohne Kopf und Fuß, Schrift wie die Website */
.fx-eingebettet .fx-kopf,
.fx-eingebettet .fx-fuss { display: none; }
body.fx-eingebettet { margin: 0; background: #fff; }
.fx-buchung { display: flow-root; font-family: "Instrument Sans", sans-serif; color: #0e0e0d; }

/* ===== Buchung (FluentBooking): Farben und Ecken wie die Website, Schrift erbt ===== */
.fcal_calendar_wrapper, .fluent_booking_app, .fx-buchung {
  --fcal_primary_color: #0e0e0d; --fcal_primaryColor: #0e0e0d;
  --fcal_dark: #0e0e0d; --fcal_gray: #3b3935;
  --fcal_slot_border: #ead7b0; --fcal_thBG: #fbf3e3;
  --fcal_enable_day_bg: #fbf3e3; --fcal_date_disabled_color: #6b6760;
  --fcal_body_bg: #fff; --fcal_cal_bg: #fff;
  --fcal_date_radius: 0; --fcal_avatar_radius: 0;
}
.fcal_calendar_wrapper button, .fluent_booking_app button,
.fcal_calendar_wrapper input, .fluent_booking_app input,
.fcal_calendar_wrapper textarea, .fluent_booking_app textarea,
.fcal_slots, .fcal_card { border-radius: 0 !important; }
/* Kurzcode steht in einem Elementor-Absatz (span im Flex-Container): darf schmaler werden, sonst Überlauf bei 390 px */
:has(> .fcal_calendar_wrapper) { display: block; min-width: 0; width: 100%; }
.fcal_calendar_wrapper input, .fcal_calendar_wrapper textarea { font-size: 16px; } /* iPhone zoomt sonst */
.fcal_calendar_wrapper button { touch-action: manipulation; }
.fcal_calendar_wrapper .book_now, .fluent_booking_app .book_now { min-height: 44px; } /* Abnahme: war 36 px */
/* Abnahme 1.0.10: Sprunglink-Ziel ohne Fokusrahmen; Fuß-Links auch am Tablet 44 px; Hover von Menü-/Fuß-Links nur für Maus (Elementor-Klassen setzen sie sonst auch beim Tippen fest) */
#content:focus { outline: 0; }
@media (pointer: coarse) { .elementor .fuss-link { min-height: 44px; } }
@media (hover: none) {
  .elementor .fuss-link:hover:not(:focus-visible) { color: var(--text-leise-dunkel); }
  .elementor .menue-link:hover:not(:focus-visible) { border-bottom-color: transparent; }
}
@media (hover: none) and (max-width: 1279px) {
  .elementor .menue-link:hover:not(:focus-visible) { border-bottom-color: var(--linie-dunkel); }
}
.fcal_calendar_wrapper button:active { transform: scale(.97); transition: transform .1s; }
/* Bündig links wie der Text der Karte (FluentBooking zentriert sonst). 1040 px = natürliche Breite der Ansicht Info | Kalender | Uhrzeiten, Liste gleich breit */
.fcal_calendar_wrapper { max-width: 1040px !important; margin: 0 !important; }
.fcal_slots_wrap { margin-top: 0 !important; }
.fcal_holder { justify-content: flex-start !important; }
.fluent_booking_wrap { padding-left: 0 !important; padding-right: 0 !important; }
/* Gastgeber-Name und -Bild ausblenden (es gibt nur einen Raum) */
.fcal_author_header, .fcal_author { display: none !important; }
/* Umschalter 12h/24h ausblenden (Website nutzt nur 24 Std.) */
.fcal_slot_picker_header_action .format-hour { display: none !important; }
/* Ort steht schon auf der Seite, FluentBooking zeigt sonst nur „Vor Ort (Adresse des Organisators)“ */
.fcal_slot_location, .slot_location { display: none !important; }
/* Nach dem Buchen: kein „admin“ als Gastgeber, keine Absage-/Verschiebe-Links (nur per Anruf oder Mail, Ali 2026-11-12) */
.fcal_confirmation .fcal_host_name, .fcal_confirmation .fcal_normal_booking_footer { display: none !important; }

/* ===== Formular in der Reservierungskarte (Fluent Forms, /anfrage/): wie die Karte ===== */
/* Etiketten wie „Anfrage · EventHaus 11“: Mono, Großbuchstaben, Bernstein-Text */
.reservierung .fluentform .ff-el-input--label label {
  font-family: var(--mono), monospace; font-size: 14px; font-weight: 400; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .04em; color: var(--bernstein-text);
}
.reservierung .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: var(--bernstein-text); }
/* Felder: hell getönt, unten Bernstein-Linie, eckig. Schrift 16 px, sonst zoomt das iPhone */
.reservierung .fluentform .ff-el-form-control {
  font-family: var(--schrift), sans-serif; font-size: 16px; color: var(--schwarz);
  background-color: #fbf3e3; border: 0; border-bottom: 2px solid var(--abriss); border-radius: 0;
  padding: 12px 14px; box-shadow: none;
}
.reservierung .fluentform .ff-el-form-control::placeholder { color: var(--text-leise); opacity: .75; }
.reservierung .fluentform .ff-el-form-control:focus { border-bottom-color: var(--schwarz); outline: 0; }
.reservierung .fluentform .ff-el-form-control:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 2px; }
.reservierung .fluentform .ff-el-is-error .ff-el-form-control { border-bottom-color: #b42318; }
.reservierung .fluentform .error { font-size: 14px; color: #b42318; }
/* Knopf schwarz wie die Kopfleiste (ohne Pfeil), drückt sich beim Tippen ein */
.reservierung .fluentform .ff-btn-submit,
.reservierung .fluentform .ff-btn-submit:hover,
.reservierung .fluentform .ff-btn-submit:focus {
  font-family: var(--schrift), sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5;
  color: var(--weiss); background-color: var(--schwarz); border: 0; border-radius: 8px;
  padding: 10px 24px; min-height: 44px; opacity: 1; transition: transform .1s ease-out;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none;
}
.reservierung .fluentform .ff-btn-submit:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 3px; }
.reservierung .fluentform .ff-btn-submit:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .reservierung .fluentform .ff-btn-submit:hover { background-color: var(--text-leise); }
}
/* Ab Tablet zwei Spalten: Name | E-Mail, Telefon | Anlass, Wunschtermin | Personen; Nachricht und Knopf volle Breite */
@media (min-width: 768px) {
  .reservierung .fluentform fieldset { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; min-width: 0; }
  .reservierung .fluentform fieldset > * { min-width: 0; }
  .reservierung .fluentform fieldset > legend,
  .reservierung .fluentform fieldset > .ff-el-group:has(textarea),
  .reservierung .fluentform fieldset > .ff_submit_btn_wrapper { grid-column: 1 / -1; }
}

/* ===== Weniger Bewegung: nur sanft einblenden ===== */
@media (prefers-reduced-motion: reduce) {
  .fx-js .fx-kopf-grund,
  .fx-kopf-logo,
  .fx-menue-knopf path,
  .fx-js .fx-menue,
  .fx-js .fx-offen .fx-menue { transition: none; }
  .fx-js .fx-menue,
  .fx-js .fx-offen .fx-menue { transform: none; }
  .fx-js .fx-stempel,
  .fx-js .fx-stempel.fx-da { transform: rotate(-8deg); transition: opacity .2s linear; }
}