/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/


/* Countdown Weihnachten – kompaktes Layout */
.fusion-countdown.countdown-weihnachten .fusion-countdown-wrapper { margin: 0; }
.fusion-countdown.countdown-weihnachten .fusion-countdown-heading-wrapper { margin: 0; }
.fusion-countdown.countdown-weihnachten .fusion-countdown-subheading:empty { display: none; }

.fusion-countdown.countdown-weihnachten .fusion-countdown-counter-wrapper .fusion-digit-wrapper {
  font-family: "Cactus Classical Serif", Georgia, serif;
}

/* Abstand Überschrift → Zahlen */
.fusion-countdown.countdown-weihnachten.fusion-countdown-stacked.fusion-countdown-has-heading .fusion-countdown-counter-wrapper {
  margin: 14px 0 0;
}

/* Vier Spalten nebeneinander, gleich breit */
.fusion-countdown.countdown-weihnachten .fusion-countdown-counter-wrapper {
  width: 100%;
  flex-wrap: nowrap;
}
.fusion-countdown.countdown-weihnachten .fusion-dash-wrapper {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
}
.fusion-countdown.countdown-weihnachten .fusion-dash {
  width: 100%;
  padding: 2px 6px;
}

/* Trennlinien */
.fusion-countdown.countdown-weihnachten .fusion-dash-wrapper + .fusion-dash-wrapper {
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}

/* Labels */
.fusion-countdown.countdown-weihnachten .fusion-dash-wrapper .fusion-dash-title {
  min-width: 0;
  padding: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Mobil */
@media (max-width: 520px) {
  .fusion-countdown.countdown-weihnachten { --awb-counter-font-size: 40px !important; }
  .fusion-countdown.countdown-weihnachten .fusion-dash { padding: 2px; }
  .fusion-countdown.countdown-weihnachten .fusion-dash-wrapper .fusion-dash-title { font-size: 10px; letter-spacing: 0.8px; }
  .fusion-countdown.countdown-weihnachten .fusion-countdown-heading { font-size: 14px !important; letter-spacing: 1.5px; }
}

/* Pfeil-Icon im Button: größer + näher am Text (Standard & Hover) */
a.fusion-button[data-hover="icon_position"].awb-b-icon-pos-right {
  --ico: 20px;  /* Icon-Größe (vorher 13px) */
  --gap: 3px;   /* Abstand Text → Icon-Box (vorher 9,1px) */
}

a.fusion-button[data-hover="icon_position"].awb-b-icon-pos-right i {
  font-size: var(--ico);
  width: var(--ico);
  height: var(--ico);
  line-height: 1;
  flex-shrink: 0;
}

/* Standardzustand: Abstand Text → sichtbares Icon */
a.fusion-button[data-hover="icon_position"].awb-b-icon-pos-right i:first-of-type {
  margin-left: var(--gap);
}

/* Layout-Ausgleich, damit der Button gleich breit bleibt */
a.fusion-button[data-hover="icon_position"].awb-b-icon-pos-right .fusion-button-text {
  margin-left: calc(var(--ico) * -1);
}

/* Hover: Text rutscht um Icon-Breite + Abstand nach rechts */
a.fusion-button[data-hover="icon_position"].awb-b-icon-pos-right:hover .fusion-button-text {
  transform: translateX(calc(var(--ico) + var(--gap)));
}

/* ===== Header ===== */
.wm-header,
.wm-header .fusion-row,
.wm-header .fusion-layout-column,
.wm-header .fusion-column-wrapper,
.wm-header .fusion-image-element,
.wm-header .fusion-imageframe { overflow: visible !important; }

.wm-header.fusion-fullwidth { position: relative; z-index: 20 !important; }
.wm-header .fusion-row { height: 90px; align-items: center; }

/* ===== Logo ===== */
.wm-logo-col { align-self: flex-start !important; }
.wm-logo-col .fusion-column-wrapper { height: 0 !important; min-height: 0 !important; padding: 0 !important; }

.wm-logo-col .fusion-image-element {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: max-content; z-index: 5;
}
.wm-logo-col .fusion-imageframe { display: block; width: auto; }
.wm-logo-col img { display: block; width: 100%; height: auto; }

/* weiße Hinterlegung hinter dem Logo: abgerundet und weich */
.wm-logo-col .fusion-image-element::before {
  content: ""; position: absolute; z-index: -1;
  left: -32px; right: -32px; top: 0; bottom: -22px;
  background: #fff;
  border-radius: 28px;
  filter: blur(7px);
  clip-path: inset(0 -50px -50px -50px);
  pointer-events: none;
}

/* Kachel-Hover: Bild zoomt, Overlay wird dunkler */
.kachel-hover .fusion-column-inner-bg {
  overflow: hidden;
}
.kachel-hover .fusion-column-inner-bg-image {
  transition: transform 0.6s cubic-bezier(.2, .7, .2, 1), filter 0.4s ease;
  transform-origin: center;
  will-change: transform;
}
.kachel-hover:hover .fusion-column-inner-bg-image {
  transform: scale(1.08);
  filter: brightness(0.85);
}

@media (prefers-reduced-motion: reduce) {
  .kachel-hover .fusion-column-inner-bg-image { transition: none; }
  .kachel-hover:hover .fusion-column-inner-bg-image { transform: none; }
}

/* Seitenzahlen und "Show: 20" unten ausblenden */
.drts-view-entities-footer { display: none !important; }

/* Hero-Effekt: Bokeh + Schnee */
.fx-hero {
  position: relative;
  overflow: hidden;
}
.fx-hero > canvas.fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Countdown: 2 x 2 statt 1 x 4 */
.fusion-countdown.countdown-weihnachten .fusion-countdown-counter-wrapper {
  flex-wrap: wrap;
}
.fusion-countdown.countdown-weihnachten .fusion-dash-wrapper {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 10px 0;
}
.fusion-countdown.countdown-weihnachten .fusion-dash-wrapper + .fusion-dash-wrapper {
  border-left: 0;
}
.fusion-countdown.countdown-weihnachten .fusion-dash-wrapper:nth-child(even) {
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}
.fusion-countdown.countdown-weihnachten .fusion-dash-wrapper:nth-child(n+3) {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* ===== Unterseiten-Hero ===== */
.wm-subhero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 130px 30px 30px !important;
  margin-bottom: 0 !important;
  background:
    radial-gradient(ellipse at 50% 115%, rgba(212, 154, 88, .45) 0, rgba(212, 154, 88, 0) 55%),
    linear-gradient(180deg, #243019 0%, #2e3a23 55%, #3a4a2b 100%) !important;
}
.wm-subhero .fusion-title { text-align: center !important; margin-bottom: 0 !important; }
.wm-subhero .fusion-title-1 { margin-bottom: 14px !important; }

/* Eyebrow */
.wm-subhero .fusion-title-1 .fusion-title-heading {
  color: #c9a24c !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 14px !important;
}
/* Überschrift */
.wm-subhero .fusion-title-2 .fusion-title-heading {
  color: #fff !important;
  text-wrap: balance;
}
/* Sterndivider */
.wm-subhero .fusion-title-2::after {
  content: "";
  display: block;
  width: 260px;
  max-width: 70%;
  height: 18px;
  margin: 22px auto 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c9a24c' d='M12 1.5l2.9 6.6 7.1.7-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 8.8l7.1-.7z'/%3E%3C/svg%3E") center / 16px no-repeat,
    linear-gradient(90deg, rgba(201, 162, 76, 0), #c9a24c) left center / 108px 1px no-repeat,
    linear-gradient(270deg, rgba(201, 162, 76, 0), #c9a24c) right center / 108px 1px no-repeat;
}

/* Unterseiten-Hero: Seite mit nur einem Titel (z. B. Impressum, Datenschutz) */
.wm-subhero .fusion-title-1:only-child .fusion-title-heading {
  color: #fff !important;
  font-size: 40px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-wrap: balance;
}
.wm-subhero .fusion-title-1:only-child::after {
  content: "";
  display: block;
  width: 260px;
  max-width: 70%;
  height: 18px;
  margin: 22px auto 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c9a24c' d='M12 1.5l2.9 6.6 7.1.7-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 8.8l7.1-.7z'/%3E%3C/svg%3E") center / 16px no-repeat,
    linear-gradient(90deg, rgba(201, 162, 76, 0), #c9a24c) left center / 108px 1px no-repeat,
    linear-gradient(270deg, rgba(201, 162, 76, 0), #c9a24c) right center / 108px 1px no-repeat;
}

/* Unterseiten-Hero: Padding für Tablet und Handy */
@media (max-width: 1024px) {
  .wm-subhero {
    padding: 60px 20px 50px !important;
  }
}
@media (max-width: 640px) {
  .wm-subhero {
    padding: 52px 20px 40px !important;
  }
}

/* =====================================================================
   WASSMER WEIHNACHTSBÄUME – Bewerbungsformular
   ===================================================================== */

.wm-bewerbung {
  /* Markenfarben: übernimmt Avada-Werte, Fallback = Hex-Wert */
  --wm-gruen:        var(--primary_color, #2e3a23);
  --wm-gruen-dunkel: #1f2817;
  --wm-gruen-hauch:  rgba(46, 58, 35, 0.05);
  --wm-gruen-weich:  rgba(46, 58, 35, 0.12);
  --wm-linie:        rgba(46, 58, 35, 0.22);
  --wm-gold:         var(--link_color, #c6a22b);
  --wm-gold-ring:    rgba(198, 162, 43, 0.45);
  --wm-text:         #000;
  --wm-hinweis:      rgba(0, 0, 0, 0.62);
  --wm-radius:       6px;

  container-type: inline-size;   /* Spalten richten sich nach der Breite des Formulars, nicht des Fensters */
  width: 100%;
}

/* ---------- wpautop-Ballast neutralisieren (<p> um Labels, <br>) ---------- */
.wm-bewerbung br { display: none; }
.wm-bewerbung p { margin: 0; }
.wm-bewerbung .wm-grid > p { display: contents; }

/* ---------- Pflichtfeld-Hinweis ---------- */
.wm-bewerbung .wm-pflicht {
  margin: 0 0 20px;
  font-size: 15px;
  color: var(--wm-hinweis);
}

/* ---------- Blöcke (Karten) ---------- */
.wm-bewerbung .wm-block {
  margin: 0 0 24px;
  padding: 28px 32px 32px;
  background: var(--wm-gruen-hauch);
  border: 1px solid var(--wm-linie);
  border-radius: var(--wm-radius);
}

.wm-bewerbung .wm-block h3 {
  margin: 0 0 24px;
  padding-bottom: 14px;
  position: relative;
  color: var(--wm-gruen);
}
.wm-bewerbung .wm-block h3::after {   /* goldener Akzent unter der Überschrift */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--wm-gold);
}

/* ---------- 12-Spalten-Raster ---------- */
.wm-bewerbung .wm-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 22px 24px;
}
/* Hinweis: CF7 packt jedes Label in ein <p> (wpautop). Das <p> ist per
   display:contents "durchsichtig", bleibt im DOM aber das direkte Kind –
   darum gelten alle Raster-Selektoren für ">label" UND ">p>label". */
.wm-bewerbung .wm-grid > label,
.wm-bewerbung .wm-grid > p > label,
.wm-bewerbung .wm-grid > .wm-leer { grid-column: span 6; }
.wm-bewerbung .wm-grid > .wm-voll,
.wm-bewerbung .wm-grid > p > .wm-voll   { grid-column: 1 / -1; }
.wm-bewerbung .wm-grid > .wm-breit,
.wm-bewerbung .wm-grid > p > .wm-breit  { grid-column: span 8; }
.wm-bewerbung .wm-grid > .wm-schmal,
.wm-bewerbung .wm-grid > p > .wm-schmal { grid-column: span 4; }

/* Labels über dem Feld */
.wm-bewerbung .wm-grid > label,
.wm-bewerbung .wm-grid > p > label {
  display: block;
  font-size: 0.9em;
  line-height: 1.35;
  color: var(--wm-text);
}
.wm-bewerbung .wm-grid > label > .wpcf7-form-control-wrap,
.wm-bewerbung .wm-grid > p > label > .wpcf7-form-control-wrap {
  display: block;
  margin-top: 8px;
}

/* ---------- Eingabefelder (nur Ergänzungen zu Avada) ---------- */
.wm-bewerbung input[type="text"],
.wm-bewerbung input[type="email"],
.wm-bewerbung input[type="tel"],
.wm-bewerbung input[type="date"],
.wm-bewerbung select,
.wm-bewerbung textarea {
  width: 100%;
  max-width: none;
  border-color: var(--wm-linie);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wm-bewerbung input:hover,
.wm-bewerbung select:hover,
.wm-bewerbung textarea:hover { border-color: var(--wm-gruen); }

.wm-bewerbung input:focus,
.wm-bewerbung select:focus,
.wm-bewerbung textarea:focus {
  outline: none;
  border-color: var(--wm-gruen);
  box-shadow: 0 0 0 3px var(--wm-gold-ring);
}
.wm-bewerbung textarea { min-height: 150px; resize: vertical; }

/* ---------- Datei-Uploads ---------- */
.wm-bewerbung input[type="file"] {
  width: 100%;
  height: auto;
  padding: 10px;
  font-size: 15px;
  background: #fff;
  border: 1px dashed var(--wm-linie);
  border-radius: var(--wm-radius);
  cursor: pointer;
}
.wm-bewerbung input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 9px 18px;
  font: inherit;
  font-size: 14px;
  color: #fff;
  background: var(--wm-gruen);
  border: 0;
  border-radius: var(--wm-radius);
  cursor: pointer;
  transition: background .15s ease;
}
.wm-bewerbung input[type="file"]:hover::file-selector-button { background: var(--wm-gruen-dunkel); }

/* ---------- Hinweistexte ---------- */
.wm-bewerbung small {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--wm-hinweis);
}

/* ---------- Auswahlgruppen (Checkboxen / Radio) ---------- */
.wm-bewerbung .wm-frage {
  display: block;
  margin-bottom: 10px;
  font-size: 0.9em;
  line-height: 1.35;
  color: var(--wm-text);
}

.wm-bewerbung .wpcf7-checkbox,
.wm-bewerbung .wpcf7-radio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px 16px;
}
/* kurze Optionen (Ja/Nein, Mo–So) als schmale Kacheln */
.wm-bewerbung [data-name="springer"] .wpcf7-radio,
.wm-bewerbung [data-name="springer_tage"] .wpcf7-checkbox {
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}

.wm-bewerbung .wpcf7-list-item { margin: 0; display: block; }
.wm-bewerbung .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 14px;
  font-size: 0.9em;
  line-height: 1.3;
  background: #fff;
  border: 1px solid var(--wm-linie);
  border-radius: var(--wm-radius);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.wm-bewerbung .wpcf7-list-item label:hover { border-color: var(--wm-gruen); }
.wm-bewerbung .wpcf7-list-item input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--wm-gruen);
}
.wm-bewerbung .wpcf7-list-item label:has(input:checked) {
  background: var(--wm-gruen-weich);
  border-color: var(--wm-gruen);
}
.wm-bewerbung .wpcf7-list-item label:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--wm-gold-ring);
}

/* ---------- Datenschutz-Zustimmung ---------- */
.wm-bewerbung .wm-datenschutz { margin-top: 28px; }
.wm-bewerbung .wm-datenschutz .wpcf7-list-item label {
  align-items: flex-start;
  padding: 14px 16px;
  line-height: 1.45;
}
.wm-bewerbung .wm-datenschutz .wpcf7-list-item input { margin-top: 3px; }
.wm-bewerbung .wm-datenschutz a {
  color: var(--wm-gruen);
  text-decoration: underline;
  text-decoration-color: var(--wm-gold);   /* Gold nur als Linie – als Textfarbe wäre der Kontrast zu schwach */
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.wm-bewerbung .wm-datenschutz a:hover { color: var(--wm-gruen-dunkel); }

/* ---------- Absenden ---------- */
.wm-bewerbung .wm-absenden { margin-top: 8px; }

/* ---------- Validierung & Rückmeldung von CF7 ---------- */
.wm-bewerbung .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 14px;
}
.wm-bewerbung .wpcf7-not-valid { border-color: #b32d2e; }
.wm-bewerbung .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 18px;
  font-size: 0.9em;
  border-width: 2px;
  border-radius: var(--wm-radius);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--wm-gruen); background: var(--wm-gruen-hauch); }

/* ---------- Schmale Formulare: eine Spalte ---------- */
@container (max-width: 600px) {
  .wm-bewerbung .wm-block { padding: 22px 18px 24px; }
  .wm-bewerbung .wm-grid > label,
  .wm-bewerbung .wm-grid > p > label,
  .wm-bewerbung .wm-grid > .wm-voll,
  .wm-bewerbung .wm-grid > p > .wm-voll,
  .wm-bewerbung .wm-grid > .wm-breit,
  .wm-bewerbung .wm-grid > p > .wm-breit,
  .wm-bewerbung .wm-grid > .wm-schmal,
  .wm-bewerbung .wm-grid > p > .wm-schmal { grid-column: 1 / -1; }
  .wm-bewerbung .wm-grid > .wm-leer { display: none; }
  .wm-bewerbung .wm-absenden .wpcf7-submit { width: 100%; }
}
