/* =========================================================
   Newsletter-Banner „Post vom Huttenberg" — v12
   Ort: CSS des Themes (Design → Customizer → Zusätzliches CSS
   oder Avada → Options → Custom CSS).
   Im Feld „Individuelles CSS" des MailPoet-Formulars bleibt nur
   die Standard-Vorlage des Plugins — nichts von hier.

   Alle Selektoren sind auf #mailpoet_form_2 begrenzt
   (MailPoet umhüllt jedes Formular mit <div id="mailpoet_form_ID">).
   Dadurch bleibt das Footer-Formular (#mailpoet_form_3) und jedes
   künftige Formular unberührt. Die „2" ist die Formular-ID aus
   MailPoet → Formulare; wird das Banner-Formular einmal neu
   angelegt, hier die neue ID eintragen (Suchen & Ersetzen).

   NEU in v12: rundes Gold-Badge (.welcome-discount-badge) —
   der Custom-HTML-Block im Formular wird als Kreis auf der
   Grenze zwischen Text und Foto positioniert.
   NEU in v13: Blatt-Icon statt ✦ (per CSS-Maske, HTML bleibt
   unverändert) + Badge erscheint mobil oben rechts.
   NEU in v14: feineres Blatt — schräg, mit Mittelrippe und
   drei Seitenadern (live auf stage geprüft).
   ========================================================= */

/* ---------- Basis ---------- */
#mailpoet_form_2 form.mailpoet_form {
  --pvh-gold: #d9b345;
  --pvh-rust-dark: #a84e30;
  --pvh-cream: #f5f0e1;
  --pvh-badge-ink: #4b451c; /* dunkles Oliv für Text im Badge */

  max-width: 1200px; /* Formular wird nie breiter als 1200px */
  margin-left: auto;
  margin-right: auto; /* zentriert, falls der Container breiter ist */
  margin-bottom: 0;
  position: relative; /* Anker für das absolut positionierte Badge */
  overflow: hidden; /* Foto bündig mit den abgerundeten Ecken */
}

#mailpoet_form_2 form.mailpoet_form *,
#mailpoet_form_2 form.mailpoet_form *::before,
#mailpoet_form_2 form.mailpoet_form *::after {
  box-sizing: border-box;
}

/* ---------- Grundgerüst ---------- */
/* Container schrumpfen nicht bei Ausrichtung „links/zentriert" */
#mailpoet_form_2 .mailpoet_form_columns_container {
  width: 100%;
}

/* Spalte mit Hintergrund aus dem Editor — ohne MailPoet-Standard-Padding */
#mailpoet_form_2 .mailpoet_column_with_background {
  padding: 0;
}

/* Kinder der Spalten füllen immer die volle Spaltenbreite */
#mailpoet_form_2 .mailpoet_form_column {
  align-items: stretch;
}

/* Spaltenreihen tragen die Klasse .mailpoet_paragraph.
   !important sichert den Vorrang vor #mailpoet_form_2
   .mailpoet_paragraph {margin-bottom:20px} aus der Standard-Vorlage
   im Formularfeld — das war der olivgrüne Streifen unter dem Foto */
#mailpoet_form_2 .mailpoet_form_columns.mailpoet_paragraph {
  margin-bottom: 0 !important;
}

/* ÄUSSERE Spalten 66/33 (ihr Container liegt direkt im form) */
#mailpoet_form_2
  form.mailpoet_form
  > .mailpoet_form_columns_container
  > .mailpoet_form_columns {
  align-items: stretch; /* Foto streckt sich auf die Texthöhe */
  flex-wrap: nowrap; /* Spalten brechen nie in eine neue Zeile um */
}

/* MailPoets Basis-CSS gibt den Spalten margin-left: 20px — dadurch
   passten 66,66% + 33,33% + 20px nicht in eine Reihe und das Foto
   rutschte nach unten */
#mailpoet_form_2 .mailpoet_form_column:not(:first-child) {
  margin-left: 0;
}

#mailpoet_form_2
  form.mailpoet_form
  > .mailpoet_form_columns_container
  > .mailpoet_form_columns
  > .mailpoet_form_column:first-child {
  padding: 48px 44px;
}

#mailpoet_form_2
  form.mailpoet_form
  > .mailpoet_form_columns_container
  > .mailpoet_form_columns
  > .mailpoet_form_column:last-child {
  position: relative;
  min-height: 260px;
  padding: 0;
}

/* verschachtelte Spalten — ohne eigene Innenabstände */
#mailpoet_form_2 .mailpoet_form_column .mailpoet_form_column {
  padding: 0;
}

/* ---------- Foto füllt die rechte Spalte komplett ---------- */
#mailpoet_form_2
  form.mailpoet_form
  > .mailpoet_form_columns_container
  > .mailpoet_form_columns
  > .mailpoet_form_column:last-child
  .mailpoet_form_image {
  position: absolute;
  inset: 0;
  margin: 0;
}

#mailpoet_form_2 .mailpoet_form_image figure {
  margin: 0;
  height: 100%;
}

#mailpoet_form_2 .mailpoet_form_image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

/* ---------- Typografie ---------- */
/* <code> aus dem Editor erzeugt Monospace-Schrift — neutralisieren */
#mailpoet_form_2 .mailpoet-heading code,
#mailpoet_form_2 .mailpoet_form_paragraph code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  padding: 0;
}

#mailpoet_form_2 h3.mailpoet-heading {
  margin: 0 0 14px 0;
  /* Avada bläht h3 auf Theme-Größe auf — Überzeile klein halten */
  font-size: 13px !important;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

#mailpoet_form_2 h1.mailpoet-heading,
#mailpoet_form_2 h2.mailpoet-heading {
  margin: 0 0 20px 0;
  /* Avada gibt h1 seine große Theme-Größe — wir fixieren eine
     responsive. Größer/kleiner gewünscht: Obergrenze (38px) anpassen */
  font-size: clamp(24px, 3vw, 38px) !important;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  /* keine Trennung innerhalb des Wortes */
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

#mailpoet_form_2 p,
#mailpoet_form_2 .mailpoet_form_paragraph {
  line-height: 1.55;
}

/* der Haupttext-Absatz ist im Markup per Inline-Stil zentriert */
#mailpoet_form_2 p.mailpoet_form_paragraph {
  text-align: left !important;
}

#mailpoet_form_2 a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#mailpoet_form_2 a:hover {
  color: #ffffff;
}

/* Schloss-Symbol vor dem Disclaimer (Absatz mit Link) */
#mailpoet_form_2 .mailpoet_form_paragraph:has(a)::before {
  content: " ";
  font-size: 13px;
}

/* ---------- Eingabefeld und Button ---------- */
#mailpoet_form_2 .mailpoet_paragraph {
  line-height: 1.4;
}

/* Labels (normalerweise ausgeblendet — „Bezeichnung" wird im Feld angezeigt) */
#mailpoet_form_2 .mailpoet_segment_label,
#mailpoet_form_2 .mailpoet_text_label,
#mailpoet_form_2 .mailpoet_textarea_label,
#mailpoet_form_2 .mailpoet_select_label,
#mailpoet_form_2 .mailpoet_radio_label,
#mailpoet_form_2 .mailpoet_checkbox_label,
#mailpoet_form_2 .mailpoet_list_label,
#mailpoet_form_2 .mailpoet_date_label {
  display: block;
  font-weight: normal;
}

/* Eingabefelder */
#mailpoet_form_2 .mailpoet_text,
#mailpoet_form_2 .mailpoet_textarea,
#mailpoet_form_2 .mailpoet_select,
#mailpoet_form_2 .mailpoet_date_month,
#mailpoet_form_2 .mailpoet_date_day,
#mailpoet_form_2 .mailpoet_date_year,
#mailpoet_form_2 .mailpoet_date {
  display: block;
}

#mailpoet_form_2 .mailpoet_text,
#mailpoet_form_2 .mailpoet_textarea {
  font-family: inherit;
}

/* grauer Platzhalter (überschreibt MailPoets Inline-Farbe #33322c) */
#mailpoet_form_2 input.mailpoet_text::placeholder {
  color: #8d8874;
  opacity: 1;
}

#mailpoet_form_2 input.mailpoet_text:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(217, 179, 69, 0.4); /* goldener Fokusring */
}

#mailpoet_form_2 .mailpoet_submit {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* !important — die Button-Hintergrundfarbe kommt als Inline-Stil aus dem Editor */
#mailpoet_form_2 .mailpoet_submit:hover,
#mailpoet_form_2 .mailpoet_submit:focus-visible {
  background-color: var(--pvh-rust-dark) !important;
}

#mailpoet_form_2 .mailpoet_submit:active {
  transform: translateY(1px);
}

/* Abstände der Wrapper: nur direkte Kinder, Spaltenreihen bleiben unberührt */
#mailpoet_form_2 .mailpoet_paragraph:has(> .mailpoet_text) {
  margin-bottom: 12px;
}

#mailpoet_form_2 .mailpoet_paragraph:has(> .mailpoet_submit) {
  margin-bottom: 18px;
}

/* Reihenfolge der Formularfelder:
   E-Mail -> Button -> reCAPTCHA -> Einwilligung */
#mailpoet_form_2
  .mailpoet_form_column:has(> .mailpoet_recaptcha)
  > .mailpoet_paragraph:has(> .mailpoet_text) {
  order: 10;
}

#mailpoet_form_2
  .mailpoet_form_column:has(> .mailpoet_recaptcha)
  > .mailpoet_paragraph:has(> .mailpoet_submit) {
  order: 20;
}

#mailpoet_form_2
  .mailpoet_form_column:has(> .mailpoet_recaptcha)
  > .mailpoet_recaptcha {
  order: 30;
  margin: 0 0 18px !important;
}

#mailpoet_form_2
  .mailpoet_form_column:has(> .mailpoet_recaptcha)
  > .mailpoet_error_recaptcha {
  order: 31;
}

#mailpoet_form_2
  .mailpoet_form_column:has(> .mailpoet_recaptcha)
  > .mailpoet_form_columns_container {
  order: 40;
  width: 100%;
}

/* E-Mail-Feld und Button in einer Zeile (Desktop) */
@media (min-width: 782px) {
  /* Spalte mit dem Feld als Flex-Reihe mit Umbruch: das Feld darf
     schrumpfen, damit der Button nicht in die nächste Zeile gedrängt wird */
  #mailpoet_form_2
    .mailpoet_form_column:has(> .mailpoet_paragraph > .mailpoet_text) {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    column-gap: 10px;
  }

  /* alles andere in der Spalte — volle Breite */
  #mailpoet_form_2
    .mailpoet_form_column:has(> .mailpoet_paragraph > .mailpoet_text)
    > * {
    flex: 0 0 100%;
  }

  #mailpoet_form_2
    .mailpoet_form_column:has(> .mailpoet_paragraph > .mailpoet_text)
    > .mailpoet_paragraph:has(> .mailpoet_text) {
    flex: 1 1 300px;
    max-width: 460px;
    margin: 0 0 18px 0;
  }

  #mailpoet_form_2
    .mailpoet_form_column:has(> .mailpoet_paragraph > .mailpoet_text)
    > .mailpoet_paragraph:has(> .mailpoet_submit) {
    flex: 0 0 auto;
    width: auto;
    margin: 0 0 18px 0;
  }
}

/* ---------- Rabatt-Badge (Custom-HTML-Block im Formular) ---------- */
/* Der Wrapper des HTML-Blocks liegt am Formularende — er darf keine
   Höhe und keine Abstände beitragen (!important gegen die
   ID-gescopten Standard-Abstände aus dem Formularfeld) */
#mailpoet_form_2 .mailpoet_paragraph:has(> .welcome-discount-badge) {
  margin: 0 !important;
  height: 0;
  line-height: 0;
}

/* der Kreis: sitzt auf der Grenze Text/Foto (66,66%) auf Höhe
   der Headline. Größe/Position hier feinjustieren */
#mailpoet_form_2 .welcome-discount-badge {
  position: absolute;
  left: 66.66%;
  top: 52px;
  transform: translateX(-50%);
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--pvh-gold);
  color: var(--pvh-badge-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  z-index: 2;
  pointer-events: none; /* rein dekorativ — blockiert keine Klicks */
  user-select: none;
}

/* MailPoet fügt im HTML-Block <br> ein — ausblenden */
#mailpoet_form_2 .welcome-discount-badge br {
  display: none;
}

/* Blatt-Icon: der ✦ aus dem HTML bleibt als Fallback in der Markup,
   wird aber versteckt (font-size: 0) und durch ein SVG-Blatt als
   CSS-Maske ersetzt — so bestimmt background-color die Blattfarbe
   und MailPoets HTML-Filter kann nichts entfernen */
#mailpoet_form_2 .welcome-discount-badge .badge-icon {
  display: block;
  font-size: 0;
  line-height: 0;
  width: 24px;
  height: 24px;
  background-color: var(--pvh-badge-ink);
  opacity: 0.8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20stroke-width%3D'1.6'%20d%3D'M4.5%2020.5C5%2013.5%2011%205.8%2019.5%203.5C18.6%2011.4%2013.6%2018.6%204.5%2020.5Z'%2F%3E%3Cpath%20stroke-width%3D'1.4'%20d%3D'M5.2%2019.8C9.2%2015.6%2013.6%209.6%2018.6%204.6'%2F%3E%3Cpath%20stroke-width%3D'1.1'%20d%3D'M8.2%2016.3C9.2%2015.1%2010%2013.9%2010.6%2012.9'%2F%3E%3Cpath%20stroke-width%3D'1.1'%20d%3D'M10.9%2013.4C11.7%2013.9%2012.4%2014.6%2013%2015.3'%2F%3E%3Cpath%20stroke-width%3D'1.1'%20d%3D'M13.6%2010.1C14.3%209%2015%208%2015.6%207.2'%2F%3E%3C%2Fsvg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20stroke-width%3D'1.6'%20d%3D'M4.5%2020.5C5%2013.5%2011%205.8%2019.5%203.5C18.6%2011.4%2013.6%2018.6%204.5%2020.5Z'%2F%3E%3Cpath%20stroke-width%3D'1.4'%20d%3D'M5.2%2019.8C9.2%2015.6%2013.6%209.6%2018.6%204.6'%2F%3E%3Cpath%20stroke-width%3D'1.1'%20d%3D'M8.2%2016.3C9.2%2015.1%2010%2013.9%2010.6%2012.9'%2F%3E%3Cpath%20stroke-width%3D'1.1'%20d%3D'M10.9%2013.4C11.7%2013.9%2012.4%2014.6%2013%2015.3'%2F%3E%3Cpath%20stroke-width%3D'1.1'%20d%3D'M13.6%2010.1C14.3%209%2015%208%2015.6%207.2'%2F%3E%3C%2Fsvg%3E")
    center / contain no-repeat;
}

#mailpoet_form_2 .welcome-discount-badge strong {
  font-size: 27px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- Meldungen / Validierung / Ladeanimation ---------- */
#mailpoet_form_2 .mailpoet_message {
  margin: 0;
}

#mailpoet_form_2 .mailpoet_validate_success,
#mailpoet_form_2 .mailpoet_validate_error {
  margin: 0 44px 24px;
  font-weight: 600;
}

#mailpoet_form_2 .parsley-errors-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: #ffd6c2;
}

#mailpoet_form_2 .mailpoet_form_loading {
  width: 30px;
  text-align: center;
  line-height: normal;
}

#mailpoet_form_2 .mailpoet_form_loading > span {
  width: 5px;
  height: 5px;
  background-color: var(--pvh-cream);
}

/* ---------- Mobile Version ---------- */
@media (max-width: 781px) {
  /* Spalten untereinander: Text oben, Foto unten */
  #mailpoet_form_2
    form.mailpoet_form
    > .mailpoet_form_columns_container
    > .mailpoet_form_columns {
    flex-direction: column;
  }

  #mailpoet_form_2
    form.mailpoet_form
    > .mailpoet_form_columns_container
    > .mailpoet_form_columns
    > .mailpoet_form_column {
    flex-basis: auto !important; /* überschreibt die Inline-Werte 66,66% / 33,33% */
    width: 100%;
  }

  #mailpoet_form_2
    form.mailpoet_form
    > .mailpoet_form_columns_container
    > .mailpoet_form_columns
    > .mailpoet_form_column:first-child {
    padding: 32px 22px;
  }

  /* MailPoet blendet Bilder in Formularen auf Mobilgeräten aus — wieder einblenden */
  #mailpoet_form_2 .mailpoet_form_image {
    display: block !important;
  }

  /* Fotohöhe nach Bildproportion statt fixer Pixel:
     10/7 = natives Seitenverhältnis des aktuellen Fotos (1024×720),
     daher wird es am Handy komplett und unbeschnitten gezeigt; in
     breiten „mobilen" Fenstern begrenzt max-height: 420px die Höhe.
     Bei einem neuen Foto dessen Proportion hier eintragen */
  #mailpoet_form_2
    form.mailpoet_form
    > .mailpoet_form_columns_container
    > .mailpoet_form_columns
    > .mailpoet_form_column:last-child {
    min-height: 0;
    aspect-ratio: 10 / 7;
    max-height: 420px;
  }

  #mailpoet_form_2 .mailpoet_validate_success,
  #mailpoet_form_2 .mailpoet_validate_error {
    margin: 0 22px 20px;
  }

  /* Badge mobil: kleiner und oben rechts in der Ecke */
  #mailpoet_form_2 .welcome-discount-badge {
    left: auto;
    right: 14px;
    top: 14px;
    transform: none;
    width: 84px;
    height: 84px;
  }

  #mailpoet_form_2 .welcome-discount-badge strong {
    font-size: 21px;
  }

  #mailpoet_form_2 .welcome-discount-badge .badge-icon {
    width: 18px;
    height: 18px;
  }
}

/*                    --------------------------------                  */

#mailpoet_form_3 > form.mailpoet_form {
  container-type: inline-size;
}

/* Первая строка: e-mail и кнопка */
#mailpoet_form_3 .mailpoet_form_columns:has(.mailpoet_recaptcha) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  align-items: center;
}

/* Объединяем вложенные колонки */
#mailpoet_form_3
  .mailpoet_form_columns:has(.mailpoet_recaptcha)
  > .mailpoet_form_column {
  display: contents !important;
}

/* E-mail */
#mailpoet_form_3
  .mailpoet_form_columns:has(.mailpoet_recaptcha)
  > .mailpoet_form_column:first-child
  > .mailpoet_paragraph {
  grid-column: 1;
  grid-row: 1;
  margin: 0 !important;
}

/* Кнопка справа от e-mail */
#mailpoet_form_3
  .mailpoet_form_columns:has(.mailpoet_recaptcha)
  > .mailpoet_form_column:last-child
  > .mailpoet_paragraph {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
}

/* CAPTCHA на следующей строке */
#mailpoet_form_3
  .mailpoet_form_columns:has(.mailpoet_recaptcha)
  .mailpoet_recaptcha {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: start;
  margin: 4px 0 0 !important;
}

/* Ошибка CAPTCHA */
#mailpoet_form_3
  .mailpoet_form_columns:has(.mailpoet_recaptcha)
  .mailpoet_error_recaptcha {
  grid-column: 1 / -1;
  grid-row: 3;
  text-align: left;
  margin: 0 !important;
}

/* Button-Interaktion im Footer-Formular */
#mailpoet_form_3 .mailpoet_submit {
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease;
}

#mailpoet_form_3 .mailpoet_submit:hover,
#mailpoet_form_3 .mailpoet_submit:focus-visible {
  background-color: #c48f38 !important;
}

#mailpoet_form_3 .mailpoet_submit:active {
  transform: translateY(1px);
}

/* Мобильная версия */
@container (max-width: 560px) {
  #mailpoet_form_3 .mailpoet_form_columns:has(.mailpoet_recaptcha) {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  #mailpoet_form_3
    .mailpoet_form_columns:has(.mailpoet_recaptcha)
    > .mailpoet_form_column:first-child
    > .mailpoet_paragraph {
    grid-column: 1;
    grid-row: 1;
  }

  #mailpoet_form_3
    .mailpoet_form_columns:has(.mailpoet_recaptcha)
    > .mailpoet_form_column:last-child
    > .mailpoet_paragraph {
    grid-column: 1;
    grid-row: 2;
  }

  #mailpoet_form_3
    .mailpoet_form_columns:has(.mailpoet_recaptcha)
    .mailpoet_recaptcha {
    grid-column: 1;
    grid-row: 3;
  }

  #mailpoet_form_3
    .mailpoet_form_columns:has(.mailpoet_recaptcha)
    .mailpoet_error_recaptcha {
    grid-column: 1;
    grid-row: 4;
  }
}

/* ---------- Hinweis zur verpflichtenden reCAPTCHA ---------- */
#mailpoet_form_2 .mailpoet_recaptcha::after,
#mailpoet_form_3 .mailpoet_recaptcha::after {
  content: "Bitte bestätige das CAPTCHA, um die Anmeldung abzusenden.";
  display: block;
  width: 304px;
  max-width: 100%;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: #f5f0e1;
}