/* =========================================================
   al2.css – Version #CSSv11.9.4 – Stand 2025-11-02
   Änderungen ggü. 11.9.3:
   - Hover-States siteweit robust wiederhergestellt:
     * Spezifität erhöht (kombinierte Selektoren, :not([disabled]))
     * Getrennte Abschluss-Sektion "HOVER – FINAL OVERRIDES" mit !important
   - Vorgaben beibehalten: 1px Button-Rand, Padding 16x24 (Desktop), 12x16 (Mobile)
   ========================================================= */

/* Tokens / Vars */
.al2{
  --al2-text:#ccc;
  --al2-accent:#c4101f;
  --al2-border:#333;
  --al2-radius:10px;

  /* Buttons (bestehend) */
  --al2-btn-padding:16px 24px;
  --al2-btn-radius:10px;
  --al2-btn-transition:background-color .25s ease, border-color .25s ease, color .25s ease;

  /* Focus/Outline */
  --al2-focus:#ffd166;
  --al2-outline:#ccc;

  /* Header/Mobile Bookmark */
  --al2-header-mobile-h:64px;
  --al2-bookmark-gap-mobile:40px;
  --al2-adminbar:0px;
}

/* Anchor Offset (global) */
html{scroll-padding-top:250px;}

/* Fokus sichtbar */
.al2 :focus-visible{outline:2px solid var(--al2-focus);outline-offset:3px;}

/* Links (nicht Button-Links) */
.al2 a:not(.btn):not(.elementor-button-link):not(.woocommerce-button){color:var(--al2-accent);text-decoration:none;transition:color .2s;}
.al2 a:not(.btn):not(.elementor-button-link):not(.woocommerce-button):hover,
.al2 a:not(.btn):not(.elementor-button-link):not(.woocommerce-button):focus-visible,
.al2 a:not(.btn):not(.elementor-button-link):not(.woocommerce-button):visited{color:var(--al2-accent);text-decoration:none;}

/* Nav-Menü Farben */
.al2 .elementor-nav-menu .elementor-item,
.al2 .elementor-nav-menu--main .elementor-item,
.al2 nav.elementor-nav-menu .elementor-item{color:var(--al2-text)!important;text-decoration:none!important;transition:color .25s;}
.al2 .elementor-nav-menu .elementor-item:hover,
.al2 .elementor-nav-menu .elementor-item:focus-visible,
.al2 .elementor-nav-menu--main .elementor-item:hover,
.al2 .elementor-nav-menu--main .elementor-item:focus-visible,
.al2 nav.elementor-nav-menu .elementor-item:hover,
.al2 nav.elementor-nav-menu .elementor-item:focus-visible{color:var(--al2-accent)!important;text-decoration:none!important;}
.al2 .elementor-nav-menu .elementor-item.elementor-item-active,
.al2 .elementor-nav-menu .current-menu-item>.elementor-item{color:var(--al2-accent)!important;}

/* Formularkomponenten */
.al2 input[type="text"],.al2 input[type="email"],.al2 input[type="tel"],.al2 input[type="url"],
.al2 input[type="number"],.al2 input[type="search"],.al2 input[type="password"],.al2 textarea,.al2 select{
  background:#0f0f0f;color:var(--al2-text);border:1px solid var(--al2-border);border-radius:var(--al2-radius);padding:.65rem .8rem;
}
.al2 input::placeholder,.al2 textarea::placeholder{color:#aaa;}

/* =========================================================
   BUTTONS – GLOBAL (Styling zentral in al2.css)
   ========================================================= */
.al2 .btn,
.al2 .elementor-button,
.al2 a.elementor-button,
.al2 .woocommerce a.button,
.al2 .woocommerce button.button,
.al2 .woocommerce input.button,
.al2 .woocommerce #respond input#submit,
.al2 .woocommerce .single_add_to_cart_button,
.al2 .woocommerce a.wc-forward,
.al2 .woocommerce a.added_to_cart,
.al2 .elementor-widget-form .elementor-button,
.al2.single-product div.product form.cart .single_add_to_cart_button,
.al2 .elementor-widget-woocommerce-product-add-to-cart form.cart .single_add_to_cart_button{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:.5rem!important;
  line-height:1.2!important;cursor:pointer!important;border-radius:var(--al2-btn-radius)!important;
  padding:var(--al2-btn-padding)!important;min-height:48px!important;
  border:1px solid var(--al2-outline)!important;background:transparent!important;color:var(--al2-outline)!important;
  text-decoration:none!important;box-sizing:border-box!important;
  font-family:var(--e-global-typography-accent-font-family,"Roboto Flex"),system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-weight:700!important;letter-spacing:.02em;text-transform:none!important;font-variation-settings:"wght" 700;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:var(--al2-btn-transition)!important;
}

/* Elementor Button-Wrapper neutralisieren */
.al2 .elementor-button-wrapper,
.al2 .elementor-button-wrapper .elementor-button-container,
.al2 .elementor-button .elementor-button-content-wrapper{border:none!important;background:transparent!important;box-shadow:none!important;outline:none!important;padding:0!important;margin:0!important;}
.al2 .elementor-button::before,.al2 .elementor-button::after,
.al2 .elementor-button-content-wrapper::before,.al2 .elementor-button-content-wrapper::after,
.al2 .elementor-button-wrapper::before,.al2 .elementor-button-wrapper::after{content:none!important;display:none!important;border:0!important;box-shadow:none!important;}

/* Button-Inhalte erben Farben/Typo, Icons nicht anklickbar */
.al2 .btn *, .al2 .elementor-button *, .al2 .woocommerce a.button *, .al2 .woocommerce button.button *,
.al2 .woocommerce input.button *, .al2 .woocommerce #respond input#submit *, .al2 .woocommerce .single_add_to_cart_button *,
.al2 .woocommerce a.wc-forward *, .al2 .woocommerce a.added_to_cart *, .al2 .elementor-widget-form .elementor-button *{
  color:inherit!important;fill:inherit!important;stroke:inherit!important;font:inherit!important;text-transform:inherit!important;pointer-events:none;
}

/* Button Typografie (global) */
.al2 button,.al2 .button,.al2 [type="submit"],.al2 .ast-button{ text-transform:none!important;letter-spacing:.02em!important; }
.al2 .woocommerce a.button,.al2 .woocommerce button.button,.al2 .woocommerce input.button,
.al2 .woocommerce #respond input#submit,.al2 .woocommerce .button,.al2 .woocommerce .single_add_to_cart_button,
.al2 .woocommerce .checkout-button,.al2 .woocommerce a.wc-forward,.al2 .woocommerce a.added_to_cart{ text-transform:none!important;letter-spacing:.02em!important; }

/* Woo: „Weiter/Zum Warenkorb“-Links wie Buttons */
.al2 .woocommerce a.added_to_cart,.al2 .woocommerce a.wc-forward{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:.5rem!important;line-height:1.2!important;
  padding:var(--al2-btn-padding)!important;border-radius:var(--al2-btn-radius)!important;border:1px solid var(--al2-outline)!important;
  background:transparent!important;color:var(--al2-outline)!important;text-decoration:none!important;transition:var(--al2-btn-transition)!important;text-transform:none!important;
}

/* Woo: Menge-Eingabe */
.al2 .woocommerce .quantity .qty{background:#0f0f0f;color:var(--al2-text);border:1px solid var(--al2-border);border-radius:var(--al2-radius);height:48px;padding:0 .8rem;min-width:80px;}

/* Einzelprodukt – Basiszustand Add-to-Cart (bleibt transparent) */
.al2.single-product div.product form.cart .single_add_to_cart_button,
.al2.woocommerce.single-product div.product form.cart .single_add_to_cart_button,
.al2.woocommerce-page.single-product div.product form.cart .single_add_to_cart_button,
.al2 .elementor-widget-woocommerce-product-add-to-cart form.cart .single_add_to_cart_button{
  border:1px solid var(--al2-outline)!important;background:transparent!important;color:var(--al2-outline)!important;
  filter:none!important;transform:none!important;box-shadow:none!important;text-shadow:none!important;text-transform:none!important;
  font-family:var(--e-global-typography-accent-font-family,"Roboto Flex"),system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-weight:700!important;letter-spacing:.02em;font-variation-settings:"wght" 700;
}
.al2.single-product div.product form.cart .single_add_to_cart_button::before,
.al2.single-product div.product form.cart .single_add_to_cart_button::after,
.al2 .elementor-widget-woocommerce-product-add-to-cart form.cart .single_add_to_cart_button::before,
.al2 .elementor-widget-woocommerce-product-add-to-cart form.cart .single_add_to_cart_button::after{content:none!important;display:none!important;border:0!important;box-shadow:none!important;}

/* =========================================================
   HOVER – FINAL OVERRIDES (siteweit konsistent)
   ========================================================= */
/* Basissatz für alle AL2-Buttons (auch Woo/Elementor), mit robusterer
   Spezifität und Disabled-Gates, als spätester Block im Stylesheet. */
.al2 :where(.btn,.elementor-button,a.elementor-button,
            .woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
            #respond input#submit,.woocommerce .single_add_to_cart_button,
            .woocommerce a.wc-forward,.woocommerce a.added_to_cart,
            .elementor-widget-form .elementor-button):not([disabled]):not(.disabled):hover,
.al2 :where(.btn,.elementor-button,a.elementor-button,
            .woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
            #respond input#submit,.woocommerce .single_add_to_cart_button,
            .woocommerce a.wc-forward,.woocommerce a.added_to_cart,
            .elementor-widget-form .elementor-button):not([disabled]):not(.disabled):focus-visible{
  background:var(--al2-accent)!important;
  border-color:var(--al2-accent)!important;
  color:#ccc!important;
  transform:none!important;
}

/* Extra-Spezifität für Einzelprodukt-Button */
.al2.single-product div.product form.cart .single_add_to_cart_button:not([disabled]):not(.disabled):hover,
.al2.single-product div.product form.cart .single_add_to_cart_button:not([disabled]):not(.disabled):focus-visible{
  background:var(--al2-accent)!important;border-color:var(--al2-accent)!important;color:#ccc!important;transform:none!important;
}

/* =========================================================
   Woo Mini-Cart Toggle (Header)
   ========================================================= */
.al2 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle,
.al2 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button-wrapper{border:none!important;background:transparent!important;box-shadow:none!important;outline:none!important;padding:0!important;margin:0!important;}
.al2 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button::before,
.al2 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button::after{content:none!important;display:none!important;border:0!important;box-shadow:none!important;}
.al2 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle{line-height:1!important;}
.al2 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button{
  display:inline-flex!important;align-items:center!important;gap:.5rem!important;
  padding:12.5px!important;min-height:40px!important;line-height:1!important;box-sizing:border-box!important;
  border:1px solid var(--al2-outline)!important;background:transparent!important;color:var(--al2-outline)!important;border-radius:var(--al2-btn-radius)!important;
  box-shadow:none!important;outline:none!important;transform:none!important;text-transform:none!important;
}
.al2 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button .elementor-button-content-wrapper,
.al2 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button .elementor-button-text{padding:0!important;margin:0!important;line-height:1.2!important;text-transform:none!important;}
.al2 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button .elementor-button-icon,
.al2 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button i,
.al2 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button svg{margin:0!important;line-height:1!important;height:1em!important;width:1em!important;}

/* AL2 – Ausrichtung Desktop-Cart-Icon (2026-08-22): Icon saß optisch zu tief
   relativ zum Betrag/Eurozeichen. */
.al2 .al2-cart .elementor-menu-cart__toggle .elementor-button svg{position:relative!important;top:-3px!important;}

/* AL2 – Farbe Desktop-Cart-Icon (2026-08-22): Elementors eigene "Icon Color"-
   Einstellung im Widget wird von externem Code überschrieben (Icon blieb
   weiß) – hier hart erzwungen statt weiter über die Widget-Einstellung zu
   versuchen. */
.al2 .al2-cart .elementor-menu-cart__toggle .elementor-button svg,
.al2 .al2-cart .elementor-menu-cart__toggle .elementor-button path{
  color:#ccc!important;fill:#ccc!important;stroke:#ccc!important;
}

/* >>> HOVER für Header Cart-Widget (DESKTOP) – Spezifität beibehalten */
.al2 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button:hover,
.al2 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button:focus-visible{
  background:var(--al2-accent)!important;
  color:#ccc!important;
  border-color:var(--al2-accent)!important;
}

/* =========================================================
   Desktop-Cart-Icon: immer sichtbar (2026-08-22 auf Wunsch geändert,
   vorher nur bei gefülltem Warenkorb via .al2-has-cart-Klasse). Die
   Mobile-Bookmark-Variante weiter unten (@media max-width:767px) bleibt
   unverändert nur-bei-Inhalt.
   ========================================================= */
.al2 .al2-cart,.al2 .e-sticky-clone .al2-cart{display:flex!important;}

@media (max-width: 767px){
  .al2 { --al2-btn-padding: 12px 16px; }
  .al2 .btn, .al2 .elementor-button, .al2 a.elementor-button, .al2 .woocommerce a.button,
  .al2 .woocommerce button.button, .al2 .woocommerce input.button, .al2 .woocommerce #respond input#submit,
  .al2 .woocommerce .single_add_to_cart_button, .al2 .woocommerce a.wc-forward, .al2 .woocommerce a.added_to_cart,
  .al2 .elementor-widget-form .elementor-button{min-height:40px!important;font-size:clamp(14px,3.8vw,16px);gap:.4rem!important;}
  .al2 .elementor-button .elementor-button-icon, .al2 .elementor-button i, .al2 .elementor-button svg{width:.95em!important;height:.95em!important;}

  /* 🔧 Hamburger immer „über“ dem Bookmark */
  .al2 .elementor-menu-toggle{position:relative;z-index:10050;}

  /* ===== MOBILE CART BOOKMARK – nur wenn gefüllt ===== */
  .al2 .al2-cart{ display:none!important; }
  .al2.al2-has-cart .al2-cart{
    display:block!important; position:fixed; right:0; z-index:10010;
    /* WICHTIG: Container fängt keine Klicks mehr ab */
    pointer-events:none; width:auto; height:auto;
  }
  .al2.al2-has-cart .al2-cart .elementor-widget-container{pointer-events:none;}
  .al2.al2-has-cart .al2-cart .elementor-menu-cart__toggle{pointer-events:auto;}
  .al2.al2-has-cart .al2-cart .elementor-menu-cart__toggle .elementor-button{
    border:none!important;background:#c4101f!important;color:#ccc!important;border-radius:10px 0 0 10px!important;
    padding:12px 14px!important;box-shadow:0 6px 18px rgba(0,0,0,.25)!important;text-transform:none!important;
    pointer-events:auto;
  }
  .al2.al2-has-cart .al2-cart .elementor-menu-cart__toggle .elementor-button *,
  .al2.al2-has-cart .al2-cart .elementor-menu-cart__toggle .elementor-button svg,
  .al2.al2-has-cart .al2-cart .elementor-menu-cart__toggle .elementor-button path{color:#ccc!important;fill:#ccc!important;stroke:#ccc!important;}
  .al2.al2-has-cart .al2-cart .elementor-menu-cart__toggle .elementor-button:hover,
  .al2.al2-has-cart .al2-cart .elementor-menu-cart__toggle .elementor-button:focus-visible{
    background:#d61a2b!important;color:#ccc!important;box-shadow:0 8px 20px rgba(0,0,0,.3)!important;
  }
}

/* ===============================================
   AL2 – Sticky Footer für Astra + konstante Footerhöhe
   Datum: 2025-11-06
   =============================================== */

/* 1) Grundhöhe strecken */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 2) Astra-Page-Wrapper als Flex-Container */
#page.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 3) Hauptbereich füllt den Rest */
#content.site-content {
  flex: 1 0 auto;
}

/* 4) Footer bleibt unten und hat eine definierte Mindesthöhe */
#colophon.site-footer {
  flex-shrink: 0;
  /* min. Footerhöhe definieren – passe den Wert bei Bedarf an */
  min-height: var(--al2-footer-min, 240px);
  /* Optional: Inhalt im Footer vertikal mittig ausrichten */
  display: flex;
  align-items: center;
}

/* ===============================================
   AL2 – Thank You (Order Received) – Styling
   Datum: 2025-11-06 (Block Replace)
   Gilt nur auf /checkout/order-received/…
   =============================================== */

/* Hinweis/Headline ("Danke …") */
body.woocommerce-order-received .woocommerce .woocommerce-thankyou-order-received,
body.woocommerce-order-received .woocommerce .woocommerce-notice {
  color: #ccc !important;
  margin-block: 12px 20px !important;
  font-size: clamp(18px, 2vw, 22px) !important;
  font-weight: 500 !important;
}

/* Order-Overview (Bestellnr., Datum, Mail, Zahlung) */
body.woocommerce-order-received .woocommerce .woocommerce-order-overview {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 8px 24px !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
  list-style: none !important;
  color: #ccc !important;
}
@media (max-width: 767px) {
  body.woocommerce-order-received .woocommerce .woocommerce-order-overview {
    grid-template-columns: 1fr !important;
  }
}
body.woocommerce-order-received .woocommerce .woocommerce-order-overview li {
  margin: 0 !important;
  color: #ccc !important;
}

/* Order-Details-Tabelle */
body.woocommerce-order-received .woocommerce .woocommerce-table--order-details {
  border-collapse: collapse !important;
  width: 100% !important;
}
body.woocommerce-order-received .woocommerce .woocommerce-table--order-details th,
body.woocommerce-order-received .woocommerce .woocommerce-table--order-details td {
  padding: 8px 0 !important;
  color: #ccc !important;
  vertical-align: top !important;
  border-top: 1px solid #45484B !important;
}
body.woocommerce-order-received .woocommerce .woocommerce-table--order-details tr:first-child th,
body.woocommerce-order-received .woocommerce .woocommerce-table--order-details tr:first-child td {
  border-top: 0 !important;
}

/* Summenblock (tfoot) */
body.woocommerce-order-received .woocommerce .woocommerce-table--order-details tfoot th,
body.woocommerce-order-received .woocommerce .woocommerce-table--order-details tfoot td {
  padding-top: 10px !important;
  border-top: 1px solid #45484B !important;
  text-align: right !important;
}
body.woocommerce-order-received .woocommerce .woocommerce-table--order-details tfoot th {
  text-align: left !important;
  padding-right: 10px !important;
  white-space: nowrap !important;
}

/* Adressen / Kundendaten */
body.woocommerce-order-received .woocommerce .woocommerce-customer-details,
body.woocommerce-order-received .woocommerce .woocommerce-customer-details address {
  color: #ccc !important;
}
body.woocommerce-order-received .woocommerce .woocommerce-customer-details h2 {
  margin: 24px 0 8px !important;
  font-weight: 500 !important;
  color: #ccc !important;
}

/* Buttons auf der Thank-you (z. B. "Weiter stöbern") */
body.woocommerce-order-received .woocommerce a.button,
body.woocommerce-order-received .woocommerce .button {
  background: var(--al2-button-bg, #45484b) !important;
  color: var(--al2-button-text, #ccc) !important;
  border: 1px solid var(--al2-button-border, #666) !important;
  border-radius: var(--al2-radius, 8px) !important;
  padding: 12px 20px !important;
  text-decoration: none !important;
  display: inline-block !important;
}

/* Optionaler CTA-Block (falls via Hook eingefügt) */
.al2-thankyou-cta {
  margin: 24px 0 0 !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid #45484B !important;
  color: #ccc !important;
}
.al2-thankyou-cta .al2-cta-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 14px !important;
  margin-top: 12px !important;
}
.al2-thankyou-cta .al2-btn {
  background: var(--al2-button-bg, #45484b) !important;
  color: var(--al2-button-text, #ccc) !important;
  border: 1px solid var(--al2-button-border, #666) !important;
  border-radius: var(--al2-radius, 8px) !important;
  padding: 10px 16px !important;
  text-decoration: none !important;
}

/* ===============================================
   AL2 – Thank You (Order Received): Container-Styling
   Datum: 2025-11-06
   =============================================== */

body.woocommerce-order-received .e-con-inner {
  background-color: #262626 !important;
  border-radius: 20px !important;
  padding: 0px 50px 50px 50px!important;
  margin-top: 75px;
}

body.woocommerce-order-received .e-con-inner a {
  color: #ccc !important;
}
body.woocommerce-order-received .e-con-inner a:hover {
  color: var(--al2-accent, #c4101f) !important;
}

/* ===============================================
   AL2 – Thank You (Order Received): Titel "Anfragedetails"
   Datum: 2025-11-06
   =============================================== */

body.woocommerce-order-received h2.woocommerce-order-details__title {
  padding-left: 0 !important;
  background-color: #262626 !important;
  border-top: 1px solid #45484B !important;
  margin-top: 40px !important; /* optional etwas Abstand zur oberen Sektion */
  padding-top: 16px !important; /* optischer Atemraum nach der Linie */
  color: #ccc !important;
}

/* ===============================================
   AL2 – Thank You Page: Standard-Checkout-Widget ausblenden
   Datum: 2025-11-06
   =============================================== */
body.woocommerce-order-received .elementor-widget-woocommerce-checkout-page {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* =========================================================
   AL2 – Thank You (Minimalversion)
   Datum: 2025-11-06
   Enthält:
   - Layoutzentrierung
   - Text- & Button-Styling im AL2-Look
   ========================================================= */

body.woocommerce-order-received .al2-thankyou-minimal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  min-height: 70vh;
  background: #262626;
  border-radius: 20px;
  padding: 60px 40px;
  text-align: center;
  color: #ccc;

  box-sizing: border-box;
}

/* Innencontainer (Fallback, falls später weitere Elemente folgen) */
body.woocommerce-order-received .al2-thankyou-inner {
  max-width: 700px;
}

/* Überschrift */
body.woocommerce-order-received .al2-thankyou-minimal h2 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 500;
  color: #ccc;
  margin-bottom: 16px;
}

/* Textabsatz */
body.woocommerce-order-received .al2-thankyou-minimal p {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.5;
  color: #ccc;
  margin-bottom: 32px;
}

/* Button */
body.woocommerce-order-received .al2-thankyou-minimal .al2-btn {
  display: inline-block;
  background: var(--al2-button-bg, #45484b);
  color: var(--al2-button-text, #ccc);
  border: 1px solid var(--al2-button-border, #666);
  border-radius: var(--al2-radius, 8px);
  padding: 14px 28px;
  font-size: 16px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Button Hover */
body.woocommerce-order-received .al2-thankyou-minimal .al2-btn:hover,
body.woocommerce-order-received .al2-thankyou-minimal .al2-btn:focus-visible {
  background: var(--al2-accent, #c4101f);
  color: #ccc;
}

/* =========================================================
   AL2 – Thank You Visibility Fix
   Datum: 2025-11-06
   ========================================================= */

body.woocommerce-order-received .elementor-widget-woocommerce-checkout-page {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}

/* Sicherheit: unseren Minimalblock sichtbar/vorne halten */
body.woocommerce-order-received .al2-thankyou-minimal {
  display: block !important;
  position: relative;
  z-index: 1;
}

/* ===============================================
   AL2 – Thank You (Minimal)
   =============================================== */
body.woocommerce-order-received .al2-thankyou-minimal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
  background: #262626;
  border-radius: 20px;
  padding: 60px 40px;
  text-align: center;
  color: #ccc;
  box-sizing: border-box;
}
body.woocommerce-order-received .al2-thankyou-inner { max-width: 700px; }
body.woocommerce-order-received .al2-thankyou-minimal h2 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 500;
  color: #ccc;
  margin-bottom: 16px;
}
body.woocommerce-order-received .al2-thankyou-minimal p {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.5;
  margin-bottom: 32px;
  color: #ccc;
}
body.woocommerce-order-received .al2-thankyou-minimal .al2-btn {
  display: inline-block;
  background: var(--al2-button-bg, #45484b);
  color: var(--al2-button-text, #ccc);
  border: 1px solid var(--al2-button-border, #666);
  border-radius: var(--al2-radius, 8px);
  padding: 14px 28px;
  font-size: 16px;
  text-decoration: none;
  transition: background .3s ease,color .3s ease;
}
body.woocommerce-order-received .al2-thankyou-minimal .al2-btn:hover,
body.woocommerce-order-received .al2-thankyou-minimal .al2-btn:focus-visible {
  background: var(--al2-accent, #c4101f);
  color: #ccc;
}

/* ======================================================
   AL2 – WooCommerce Anfrage / Thank You Layout
   Version: 1.0 / 2025-11-06
   ====================================================== */

.al2-thankyou {
  --_bg: #1f1f1f;
  --_text: var(--al2-text, #ccc);
  --_label: #999;
  --_radius: 1.6rem;
  --_gap: clamp(1.5rem, 3vw, 3rem);
  --_pad: clamp(2rem, 5vw, 4rem);

  background: var(--_bg);
  color: var(--_text);
  border-radius: var(--_radius);
  padding: var(--_pad);
  max-width: 1100px;
  margin: clamp(3rem, 6vw, 6rem) auto;
}

.al2-thankyou__headline {
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  font-weight: 500;
  margin-bottom: var(--_gap);
  color: var(--_text);
}

.al2-thankyou__grid {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 0.7fr);
  gap: var(--_gap);
  align-items: start;
}

.al2-thankyou__meta {
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

.al2-thankyou__label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--_label);
}

.al2-thankyou__value {
  font-weight: 600;
  font-size: 1rem;
  color: var(--_text);
}

.al2-thankyou__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
}

/* Mobile Anpassung */
@media (max-width: 768px) {
  .al2-thankyou__grid {
    grid-template-columns: 1fr;
  }
  .al2-thankyou {
    padding: clamp(1.5rem, 6vw, 2.5rem);
    margin: clamp(2rem, 5vw, 4rem) auto;
  }
}

/* ===== AL2 Thankyou – Ergänzungen (Spacing/Linien/Block-Button) ===== */

.al2-thankyou__headline {
  /* große, ruhige Headline (du hast aktuell bereits das Look&Feel) */
  margin-bottom: clamp(1rem, 2.5vw, 2rem);
}

.al2-thankyou__text p {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.7;
  margin: 0 0 1.25rem 0;
  color: var(--al2-text, #ccc);
}

.al2-thankyou__line {
  border: 0;
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: clamp(1rem, 2vw, 1.75rem) 0;
}

.al2-thankyou__grid {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 0.55fr); /* engerer rechter Block */
  gap: clamp(1rem, 2vw, 2rem);                       /* kleinerer Abstand */
  align-items: start;
  justify-items: start;                               /* linke Ausrichtung */
  margin-top: clamp(0.5rem, 1vw, 1rem);
}

.al2-thankyou__col { text-align: left; }
.al2-thankyou__col--right { justify-self: start; }

.al2-thankyou__meta { margin-bottom: 1rem; }
.al2-thankyou__label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999;
}
.al2-thankyou__value {
  font-weight: 600;
  font-size: 1rem;
}

/* Vollbreiter Button – nutzt exakt dein globales .al2-btn-Styling */
.al2-btn--block {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;

  /* Übernimmt globale Variablen und Basisstil */
  background: var(--al2-button-bg, #45484b);
  color: var(--al2-button-text, #ccc);
  border-radius: var(--al2-button-radius, 0.6rem);
  padding: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  text-decoration: none;
  text-align: center;
  transition: background 0.25s ease, color 0.25s ease;
}

.al2-btn--block:hover,
.al2-btn--block:focus {
  background: var(--al2-button-hover, #c4101f);
  color: var(--al2-button-hover-text, #ccc);
}


/* Mobile: einspaltig, natürliche Abstände */
@media (max-width: 768px) {
  .al2-thankyou__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* AL2 Thankyou – Button-Fix nur in der Thankyou-Sektion */
.al2.al2-thankyou .al2-btn {
  background: var(--al2-button-bg, #45484b) !important;
  color: var(--al2-button-text, #ccc) !important;
  border-radius: var(--al2-button-radius, 0.6rem) !important;
  padding: clamp(1rem, 2.5vw, 1.25rem) !important;
  text-decoration: none !important;
}

.al2.al2-thankyou .al2-btn:hover,
.al2.al2-thankyou .al2-btn:focus {
  background: var(--al2-button-hover, #262626) !important;
  color: var(--al2-button-hover-text, #ccc) !important;
}

/* Vollbreite beibehalten (falls nötig) */
.al2.al2-thankyou .al2-btn--block {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  box-sizing: border-box;
}

/* AL2 Thankyou – Button Normalzustand fixen (nur in der Thankyou-Sektion) */
.al2.al2-thankyou .al2-btn,
.al2.al2-thankyou .al2-btn:link,
.al2.al2-thankyou .al2-btn:visited {
  background: var(--al2-button-bg, #45484b) !important;
  color: var(--al2-button-text, #ccc) !important;
  border-radius: var(--al2-button-radius, 0.6rem) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Vollbreite beibehalten */
.al2.al2-thankyou .al2-btn--block {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  box-sizing: border-box;
}

/* ======================================================
   AL2 Thankyou – Button Style (Seitenweit Style Override)
   ====================================================== */

.al2.al2-thankyou .al2-btn,
.al2.al2-thankyou .al2-btn:link,
.al2.al2-thankyou .al2-btn:visited {
  background: none !important;
  border: 1px solid #ccc !important;
  color: #ccc !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: clamp(1rem, 2.5vw, 1.25rem) !important;
  transition: all 0.25s ease !important;
}

/* Hover bleibt wie dein globaler Accent-Look */
.al2.al2-thankyou .al2-btn:hover,
.al2.al2-thankyou .al2-btn:focus {
  background: var(--al2-accent, #c4101f) !important;
  border-color: var(--al2-accent, #c4101f) !important;
  color: #ccc !important;
}

.al2.al2-thankyou {
  margin-top: clamp(50px, 7vw, 75px);
}

/* ======================================================
   AL2 – THANKYOU: HEADER-OFFSET & SECTIONS-ABSTAND
   ====================================================== */

/* Globale Header-Höhe definieren (zentral änderbar) */
:root {
  --al2-header-offset: 190px; /* Desktop-Headerhöhe */
}

/* Mobile kleinere Headerhöhe */
@media (max-width: 768px) {
  :root {
    --al2-header-offset: 70px;
  }
}

/* Abstand der Thankyou-Sektion unterhalb des fixierten Headers */
.al2.al2-thankyou {
  position: relative;
  padding-top: var(--al2-header-offset);
  scroll-margin-top: var(--al2-header-offset);
}

/* Optional: sanfter Übergang bei Anker-Sprung oder Scroll */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--al2-header-offset);
}

/* Sichtbarer Abstand vor der Thankyou-Sektion (außerhalb der grauen Box) */
:root {
  --al2-header-offset: 90px; /* Desktop-Höhe deines fixen Headers */
}

@media (max-width: 768px) {
  :root { --al2-header-offset: 70px; }
}

/* Der Spacer erzeugt echten Außenabstand */
.al2-header-spacer {
  height: var(--al2-header-offset);
}

/* Bonus für Ankersprünge/Autoscroll (falls genutzt) */
html {
  scroll-padding-top: var(--al2-header-offset);
}

/* === AL2 – Woo Notices (neutral, sicher) === */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background-color: #262626 !important;
  border: none !important;
  color: var(--al2-text, #ccc);
  border-radius: 6px;
  box-shadow: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  background: var(--al2-accent, #c4101f);
  border-radius: 2px;
}
.woocommerce-message p,
.woocommerce-info p,
.woocommerce-error p { margin: 0; }

/* AL2 – Mobile Header: Individuelles Styling für Menu-Cart-Button (ohne Variablen)
   Nutzung: Cart-Widget hat CSS-Klasse .al2-cart-mobile
   Ziel: eigenständiges, helles Icon auf dunklem Button
-------------------------------------------------------------- */

@media (max-width: 768px) {

  /* --- Reset & Basis --- */
  .al2 .elementor-widget-woocommerce-menu-cart.al2-cart-mobile .elementor-menu-cart__toggle {
    display: inline-flex;
  }

  /* AL2 – Mobile Header: Cart-Button minimal, transparent, immer sichtbar */
.al2 .elementor .elementor-widget-woocommerce-menu-cart.al2-cart-mobile
.elementor-menu-cart__toggle :is(a,button) {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent !important; /* Hintergrund transparent */
  color: #ccc !important;             /* Text + Icon neutral grau */
  padding: 5px;                       /* Kompakter Innenabstand */
  border: none !important;            /* Kein Rahmen */
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 1;                         /* Immer sichtbar */
  visibility: visible;                /* Sicherheitshalber */
}

/* Icon separat einfärben */
.al2 .elementor .elementor-widget-woocommerce-menu-cart.al2-cart-mobile
.elementor-menu-cart__toggle .elementor-button-icon svg {
  fill: #ccc !important;
  transition: fill 0.2s ease, color 0.2s ease;
  position: relative;
  top: -2px;
}

/* Hover: Text + Icon in Akzentfarbe (#c4101f laut AL2-Farbpalette) */
.al2 .elementor .elementor-widget-woocommerce-menu-cart.al2-cart-mobile
.elementor-menu-cart__toggle :is(a,button):hover {
  color: #c4101f !important;
}

.al2 .elementor .elementor-widget-woocommerce-menu-cart.al2-cart-mobile
.elementor-menu-cart__toggle :is(a,button):hover .elementor-button-icon svg {
  fill: #c4101f !important;
}



  .al2 .elementor-widget-woocommerce-menu-cart.al2-cart-mobile
  .elementor-menu-cart__toggle :where(a,button):hover {
    background: #00000000;       /* Hover-Dunkel */
    color: #ccc;
  }

  .al2 .elementor-widget-woocommerce-menu-cart.al2-cart-mobile
  .elementor-menu-cart__toggle :where(a,button):focus-visible {
    outline: 2px solid #ffd166;
    outline-offset: 2px;
    border-radius: 1000px;
  }

  /* --- Icon --- */
  .al2 .elementor-widget-woocommerce-menu-cart.al2-cart-mobile
  .elementor-menu-cart__toggle .elementor-button-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    position: relative;
  }

  .al2 .elementor-widget-woocommerce-menu-cart.al2-cart-mobile
  .elementor-menu-cart__toggle .elementor-button-icon svg {
    width: 100%;
    height: 100%;
    /* Farbe kommt aus der "Icon separat einfärben"-Regel weiter oben (#ccc) –
       hier stand vorher ein widersprüchliches fill:#ffffff ohne !important,
       das (je nach Spezifität/Reihenfolge) das gewünschte Grau überschreiben
       konnte. Entfernt 2026-08-22. */
  }

  /* --- Text --- */
  .al2 .elementor-widget-woocommerce-menu-cart.al2-cart-mobile
  .elementor-menu-cart__toggle .elementor-button-text {
    white-space: nowrap;
  }

  /* --- Artikelzähler (Badge) --- */
  .al2 .elementor-widget-woocommerce-menu-cart.al2-cart-mobile
  .elementor-menu-cart__count {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background: #c4101f;       /* Rot */
    color: #ffffff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  }

  .al2 .elementor-widget-woocommerce-menu-cart.al2-cart-mobile
  .elementor-menu-cart__toggle .elementor-button-icon + .elementor-menu-cart__count {
    margin-left: -4px;         /* Badge dichter ans Icon */
  }

  /* --- Icon-only Variante (optional: Widget-Klasse "icon-only") --- */
  .al2 .elementor-widget-woocommerce-menu-cart.al2-cart-mobile.icon-only
  .elementor-menu-cart__toggle .elementor-button-text {
    display: none;
  }

  /* --- Offen (Mini-Cart aktiv) --- */
  .al2 .elementor-widget-woocommerce-menu-cart.al2-cart-mobile.elementor-menu-cart--shown
  .elementor-menu-cart__toggle :where(a,button) {
    background: #2f3133;
  }
}

/* AL2 – Checkout-Hinweis: Aktionsleiste */
.al2 .woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout ul.woocommerce-error .al2-notice-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Buttons neutral/transparent – greifen NICHT in dein globales Button-System ein */
.al2 .al2-notice-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.al2 .al2-notice-btn--secondary {
  background: transparent;
  color: #ccc;
  border: 1px solid #444;
}

.al2 .al2-notice-btn--secondary:hover {
  color: #c4101f;
  border-color: #c4101f;
}

.al2 .al2-notice-btn--primary {
  background: #c4101f;
  color: #fff;
}

.al2 .al2-notice-btn--primary:hover {
  filter: brightness(0.92);
}

/* AL2 – Checkout-Hinweis: einheitliches Button-Design */
.al2 .woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout ul.woocommerce-error .al2-notice-actions .al2-notice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  background: transparent;
  color: #ccc !important;
  border: 1px solid #ccc;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* Hover / Active – beide Buttons gleich */
.al2 .woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout ul.woocommerce-error .al2-notice-actions .al2-notice-btn:hover,
.al2 .woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout ul.woocommerce-error .al2-notice-actions .al2-notice-btn:active {
  background: #c4101f;
  border-color: #c4101f;
  color: #ccc !important;
}

/* AL2 – Sticky Header (nur mobil): DUNKLES Glas via ::before, Inhalt bleibt scharf */
@media (max-width: 768px) {

  /* 1) Ziel-Selektor für Header-Wrapper (Section oder Container) */
  .al2 .elementor-location-header .elementor-sticky--effects,
  .al2 header.elementor-sticky--effects {
    position: relative;
    z-index: 999;
    filter: none !important;            /* Inhalt nicht blurren */
    -webkit-filter: none !important;
    transition: background-color .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease;
    background-color: #111;             /* Ausgang: deckend dunkel */
  }

  /* 2) Overlay für Glas-Effekt (unter dem Inhalt) */
  .al2 .elementor-location-header .elementor-sticky--effects::before,
  .al2 header.elementor-sticky--effects::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-color: #111;             /* Ausgang: deckend dunkel */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background-color .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease;
  }

  /* 3) Inhalt über dem Overlay halten */
  .al2 .elementor-location-header .elementor-sticky--effects > .e-con-inner,
  .al2 .elementor-location-header .elementor-sticky--effects > .elementor-container {
    position: relative;
    z-index: 1;
    background: transparent !important;
  }

  /* 4) Sticky aktiv → dunkles Glas (Fallback ohne backdrop-filter) */
  .al2 .elementor-location-header .elementor-sticky--effects.elementor-sticky--active::before,
  .al2 header.elementor-sticky--effects.elementor-sticky--active::before {
    background-color: rgba(17, 17, 17, .65); /* dunkles, leicht transparentes Schwarz */
    box-shadow: 0 2px 10px rgba(0,0,0,.20);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  /* 5) Mit Support → echter Frosted-Glass-Blur */
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .al2 .elementor-location-header .elementor-sticky--effects.elementor-sticky--active::before,
    .al2 header.elementor-sticky--effects.elementor-sticky--active::before {
      background-color: rgba(17, 17, 17, .45);          /* etwas transparenter, damit Blur wirkt */
      -webkit-backdrop-filter: saturate(120%) blur(12px) brightness(0.95);
      backdrop-filter: saturate(120%) blur(6px) brightness(0.95);
    }
  }
}

/* AL2 Google Reviews Carousel */
.al2-reviews-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.al2-reviews-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 20px 0;
    scrollbar-width: none; /* Firefox Hide Scrollbar */
}
.al2-reviews-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari Hide Scrollbar */
}

.al2-review-card {
    flex: 0 0 calc(33.333% - 14px); /* Desktop: 3 in einer Reihe */
    scroll-snap-align: center;
    background: #1a1a1a; /* Dunkles Event-Design */
    color: #f4f4f4;
    padding: 30px;
    border-radius: 8px;
    border-bottom: 3px solid #d4af37; /* Goldener Akzent */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.al2-review-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.al2-review-header img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.al2-stars {
    color: #d4af37; /* Goldene Sterne */
    letter-spacing: 2px;
}

.al2-review-text {
    font-size: 0.95rem;
    line-height: 1.6;
    font-style: italic;
    opacity: 0.9;
}

.al2-carousel-btn {
    background: none;
    border: none;
    color: #d4af37;
    font-size: 2rem;
    cursor: pointer;
    padding: 10px;
    z-index: 2;
    transition: transform 0.2s;
}
.al2-carousel-btn:hover { transform: scale(1.2); }

/* Responsive: Smartphone - 1 Karte pro Ansicht */
@media (max-width: 768px) {
    .al2-review-card {
        flex: 0 0 100%;
    }
    .al2-carousel-btn {
        display: none; /* Auf Mobile reicht das Wischen (Swipe) */
    }
}

/* =========================================================
   AL2 – Mobile-Hero-Slider: kleinere Bildvarianten (2026-08-26)
   Startseite hat zwei getrennte Hero-Slider (Desktop-first-Muster:
   Widget f34b64e = Mobile-Version, Widget 1106ac3 = Desktop-Version,
   je per elementor-hidden-* umgeschaltet). Der Mobile-Slider nutzte
   trotzdem die vollen 2048–2560px-Originalbilder (bis zu 199 KB/Bild) –
   Hauptursache für einen LCP von 12,5s im PageSpeed-Test. Elementor
   bietet für Hintergrundbilder keine Größenauswahl in der Mediathek
   (nur für <img>, nicht für background-image), daher hier direkt auf
   die von WordPress ohnehin bereits automatisch erzeugte 1024px-Variante
   verwiesen (ca. 80% kleiner, für Mobildisplays ausreichend scharf).
   Nur der Mobile-Slider (f34b64e) ist betroffen – der Desktop-Slider
   (1106ac3) bleibt unverändert, da auf Mobile ohnehin nicht geladen.
   ========================================================= */
@media (max-width: 767px) {
  .elementor-327 .elementor-element.elementor-element-f34b64e .elementor-repeater-item-49ad6fa .swiper-slide-bg {
    background-image: url(https://al2-eventlocation.de/wp-content/uploads/2024/05/eventlocation-berlin-5-1024x768.jpg) !important;
  }
  .elementor-327 .elementor-element.elementor-element-f34b64e .elementor-repeater-item-dd4dc6c .swiper-slide-bg {
    background-image: url(https://al2-eventlocation.de/wp-content/uploads/2024/05/al2_Geburtstagsparty-2023_Mike-Bielski_068-1024x683.jpg) !important;
  }
  .elementor-327 .elementor-element.elementor-element-f34b64e .elementor-repeater-item-4d1553b .swiper-slide-bg {
    background-image: url(https://al2-eventlocation.de/wp-content/uploads/2024/05/Party_al2-event-location_Mike-Bielski_087-web-1-1024x683.jpg) !important;
  }
}

/* =========================================================
   Geburtstagsfeier-Seite (Post 6957): H1-Absatz nur auf Mobile
   Auf Mobile läuft "al2 Eventlocation Berlin" ohne Abstand in
   den Slogan "deine Party. einfach. jetzt." über (der <br>
   erzeugt nur einen Zeilenumbruch, keinen Absatz-Abstand).
   Auf Desktop passt es bereits, daher nur mobil ergänzt.
   ========================================================= */
@media (max-width: 767px) {
  .elementor-6957 .elementor-element-cbcde58 .al2-h1-slogan {
    display: block;
    margin-top: 24px;
  }
}

/* =========================================================
   Geburtstagsfeier-Seite (Post 6957): CTA-Button liegt auf
   rotem Abschnitts-Hintergrund - das normale sitehweite rote
   Hover würde ihn dort unsichtbar machen. Rahmen/Farbe bleiben
   daher unverändert, Feedback nur über einen hellen Schatten.
   ========================================================= */
.elementor-6957 .elementor-element-bd50a03 .elementor-button:hover,
.elementor-6957 .elementor-element-bd50a03 .elementor-button:focus-visible {
  background: transparent !important;
  border-color: #ccc !important;
  color: #ccc !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6) !important;
}

/* =========================================================
   FAQ-Seite (Post 717): Geburtstagsfeier-Hinweis-Button liegt
   ebenfalls auf rotem Abschnitts-Hintergrund - gleicher Fall wie
   bd50a03 oben. Elementors eigene, über das Bedienfeld gesetzte
   Hover-Rahmenfarbe hat KEIN !important, verliert daher gegen die
   sitehweite Hover-Regel (die border-color mit !important setzt)
   und der Rahmen wurde dadurch beim Hover unsichtbar auf Rot.
   ========================================================= */
.elementor-717 .elementor-element-bdaycal5 .elementor-button:hover,
.elementor-717 .elementor-element-bdaycal5 .elementor-button:focus-visible {
  background: transparent !important;
  border-color: #ccc !important;
  color: #ccc !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6) !important;
}

/* =========================================================
   Trenner-Überschriften ("Linie + Text"): Trennlinien auf
   Mobile ausblenden. Die Linien werden über ::before/::after
   auf .elementor-divider-separator gezeichnet (kein separates
   Element) - auf schmalen Bildschirmen bleibt ihnen kaum bis
   gar kein Platz, das Ergebnis wirkt abgeschnitten/gequetscht.
   Betrifft automatisch jede Überschrift, die diese Elementor-
   Trenner-Technik nutzt, ohne separate Mobile-Bausteine.
   ========================================================= */
@media (max-width: 767px) {
  .al2 .elementor-widget-divider--view-line_text .elementor-divider-separator::before,
  .al2 .elementor-widget-divider--view-line_text .elementor-divider-separator::after {
    display: none !important;
  }
  /* Ohne die beiden Linien-Elemente bleibt der Text als einziges
     Flex-Kind übrig - ohne explizites justify-content rutscht er
     dann an den Flex-Start (links) statt zentriert zu bleiben. */
  .al2 .elementor-widget-divider--view-line_text .elementor-divider-separator {
    justify-content: center !important;
  }
}

/* =========================================================
   Icon-Box-Karten ("Warum al2", Mottoparty-Ideen, u.a.): auf
   Mobile nicht zentriert, obwohl auf "zentriert" eingestellt.
   Ursache: Die Karten sind flex-direction:row-Container mit
   einem einzelnen Icon-Box-Kind ohne flex-grow - das Kind wird
   nur so breit wie sein Inhalt (flex-basis:auto), nicht auf die
   volle Kartenbreite gestreckt. text-align:center zentriert den
   Text zwar korrekt *innerhalb* dieser zu schmalen Box, aber die
   Box selbst sitzt sichtbar links in der Karte. Auf Desktop fällt
   das kaum auf, weil der Karteninhalt dort zufällig fast die
   gesamte Kartenbreite braucht; auf Mobile (kürzerer Zeilenumbruch)
   bleibt sichtbar Platz rechts übrig. Vorbestehender Fehler, nicht
   durch die Trennlinien-Änderung verursacht - betrifft vermutlich
   jede Karte, die diesem Aufbau folgt.
   ========================================================= */
@media (max-width: 767px) {
  .al2 .elementor-widget-icon-box {
    width: 100% !important;
  }
}