/**
 * Orphit – Newsletter-Popup-Polish (Bricks-Popup 1106 + Mautic-Form id=3).
 *
 * Stylt das Newsletter-Popup und die dort per orphit-popup-button.js
 * nachgeladene Mautic-Form (newsletteremail) auf die Premium-Standards der
 * Orphit26-Palette:
 * - einheitliche Typografie (Headline / 15px-Lauftext / 12px-Sekundär)
 * - enge Abstände zwischen „Absenden" und „Kein Spam" (das 5rem-margin-bottom
 *   von #brxe-jrmysa auf ≤478px plus Mautics 20px-Row-Margin erzeugten dort
 *   einen Riesen-Gap)
 * - hochwertiger Primär-Pill-Button statt Mautics grauem .btn-ghost
 * - Input als Pendant zum Buchungsformular (Focus-Ring, Fokus auf 44px-Tap)
 *
 * Mautic spült sein eigenes `<style scoped>` erst beim Laden der Form in den
 * DOM (nach diesem Stylesheet), deshalb tragen alle Regeln ID-Scopes (höhere
 * Spezifität) – sie gewinnen unabhängig von der Einfüge-Reihenfolge.
 * Farbe/Kontrast adaptieren per var(--...) automatisch für Light-/Dark-Mode.
 *
 * Reine Frontend-Ausgabe (CSS), 0 REST-/WPVibe-Calls.
 */

/* ═══ Typografie vereinheitlichen: eine 15px-Lauftext-Ebene ═══════════ */
.brx-popup[data-popup-id="1106"] #brxe-kqwiro {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}

.brx-popup[data-popup-id="1106"] #brxe-kqwiro p {
  margin: 0 0 8px;
}

.brx-popup[data-popup-id="1106"] #brxe-kqwiro p:last-child {
  margin-bottom: 0;
}

/* Falls der (per Bricks-CSS ausgeblendete) Countdown-Block doch sichtbar ist:
   kompakt + dezent als Sekundär-Ebene statt zweiter Überschrift. */
.brx-popup[data-popup-id="1106"] #brxe-ebbvqu {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--textmuted);
}

.brx-popup[data-popup-id="1106"] #brxe-kuuzvw {
  font-size: 13px;
  color: var(--text);
}

/* ═══ Mautic-Form: Wrapper + Zeilenkeller straffen ═══════════════════ */
.brx-popup[data-popup-id="1106"] #mauticform_wrapper_newsletteremail {
  max-width: 100%;
  margin: 0;
}

.brx-popup[data-popup-id="1106"] #brxe-jrmysa .mauticform-row {
  margin-bottom: 12px;
}

.brx-popup[data-popup-id="1106"] #brxe-jrmysa .mauticform-button-wrapper {
  margin-bottom: 0;
}

/* Das 5rem-margin-bottom von #brxe-jrmysa (≤478px) war der Haupt-Gap
   zwischen „Absenden" und „Kein Spam". */
@media (max-width: 478px) {
  .brx-popup[data-popup-id="1106"] #brxe-jrmysa {
    margin-bottom: 0 !important;
  }
}

/* ── E-Mail-Label: kleine, gedeckte Helpline statt fetter 1.1em-Headline ── */
.brx-popup[data-popup-id="1106"] #brxe-jrmysa .mauticform-helpmessage {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--textmuted);
}

/* ── Input: Pendant zum Buchungsformular ────────────────────────────── */
.brx-popup[data-popup-id="1106"] #brxe-jrmysa .mauticform-input,
.brx-popup[data-popup-id="1106"] #brxe-jrmysa .mauticform-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  font: inherit;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--surface2);
  border-radius: 12px;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.brx-popup[data-popup-id="1106"] #brxe-jrmysa .mauticform-input::placeholder {
  color: var(--textmuted);
  opacity: 0.8;
}

.brx-popup[data-popup-id="1106"] #brxe-jrmysa .mauticform-input:focus,
.brx-popup[data-popup-id="1106"] #brxe-jrmysa .mauticform-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* ── Submit: Premium-Primär-Pill (Teal-Gradient, Vollbreite, sanfter Glow) ── */
.brx-popup[data-popup-id="1106"] #mauticform_input_newsletteremail_submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 24px;
  margin: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--bg);
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--primary) 0%, var(--cta) 100%);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 28%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.brx-popup[data-popup-id="1106"] #mauticform_input_newsletteremail_submit:hover,
.brx-popup[data-popup-id="1106"] #mauticform_input_newsletteremail_submit:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent),
    0 10px 24px color-mix(in srgb, var(--primary) 34%, transparent);
}

/* ── Status: Fehler + Erfolgsmeldung in Token-Palette ──────────────── */
.brx-popup[data-popup-id="1106"] #brxe-jrmysa .mauticform-error {
  margin: 10px 0 0;
  font-size: 13px;
  color: #c0392b;
}

.brx-popup[data-popup-id="1106"] #brxe-jrmysa .mauticform-message {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--primary);
}

/* ═══ „Kein Spam"-Notiz: klein, gedeckt, direkt unter dem Button ═════ */
.brx-popup[data-popup-id="1106"] #brxe-zwdsgh {
  margin-top: 12px;
}

.brx-popup[data-popup-id="1106"] #brxe-zwdsgh p {
  margin: 0;
  font-size: 12px;
  font-style: normal;
  color: var(--textmuted);
}

/* ═══ Tap-Targets (mobil): Close-Kopfbereich ≥44px ═══════════════════ */
.brx-popup[data-popup-id="1106"] #brxe-cibshb {
  min-height: 44px;
}

/* ═══ Popup-Karte: Radius, Palette-BG, weicher Schatten ══════════════
   Die Bricks-Vorlage gibt der Karte weder Radien noch Palette-Fläche
   (harter Schatten `0 5px 10px 5px`, neutrale Grey-Fläche). Für den
   Premium-Look: 20px-Radius (deckt auch das Presse-Bild oben ab), warmes
   --surface, gefälliger Schatten. */
.brx-popup[data-popup-id="1106"] .brx-popup-content {
  border-radius: 20px !important;
  overflow: hidden;
  background-color: var(--surface) !important;
  box-shadow: 0 18px 60px rgba(37, 33, 31, 0.18) !important;
}

/* ═══ Mobile: Luft + Atmung (Haupt-Beschwerde „fehlende Spaces") ═══════
   - Karte nicht mehr fix 350px (nur ~20px Rand), sondern 100% − 32px,
     damit rundum gleichmäßig Luft bleibt.
   - `#brxe-sdfkjo` setzt die Bricks-Vorlage auf ≤478px auf
     `padding-top:0 / padding-bottom:0` (krampfiger Karteninhalt);
     hier wieder einheitliche, großzügige Abstände setzen.
   - h3-Marge wieder herstellen, damit Heading/Text nicht kollidieren. */
@media (max-width: 767px) {
  .brx-popup[data-popup-id="1106"] .brx-popup-content {
    width: calc(100% - 32px) !important;
    max-width: 420px;
  }

  .brx-popup[data-popup-id="1106"] #brxe-sdfkjo {
    padding: 24px !important;
  }

  .brx-popup[data-popup-id="1106"] #brxe-cfctlp {
    margin-bottom: 12px !important;
  }
}

/* Sehr flache Bildschirme: Karte begrenzen + intern scrollen, statt
   über den Viewport hinauszuragen. */
@media (max-height: 700px) {
  .brx-popup[data-popup-id="1106"] .brx-popup-content {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}