/* =========================================================
   Grundeinstellungen
========================================================= */

:root {
  --layout-breite: 1320px;
  --layout-seitenabstand: 24px;

  --hero-desktop-hoehe: 700px;
  --hero-desktop-bildposition: center 58%;
}

/* Sanftes Scrollen für Ankerlinks */
html {
  scroll-behavior: smooth;
}

/* Verhindert horizontales Scrollen durch 100vw-Elemente */
html,
body {
  overflow-x: clip;
}

#ProduktSection {
  scroll-margin-top: 130px;
}

/* =========================================================
   Produktseite: WooCommerce Produktblock + Info-Row
========================================================= */

/* Gemeinsame Außenbreite */
.produkt-block-breite,
.produkt-info-row,
.produkt-block-breite.alignwide,
.produkt-block-breite.alignfull,
.produkt-info-row.alignwide,
.produkt-info-row.alignfull {
  width: min(
    calc(100vw - (var(--layout-seitenabstand) * 2)),
    var(--layout-breite)
  ) !important;
  max-width: var(--layout-breite) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Innere Gutenberg-Container nicht zusätzlich begrenzen */
.produkt-block-breite > .wp-block-group__inner-container,
.produkt-info-row > .wp-block-group__inner-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* WooCommerce-Inhalte sauber innerhalb des Produktblocks halten */
.produkt-block-breite .woocommerce,
.produkt-block-breite .product,
.produkt-block-breite div.product,
.produkt-block-breite .wp-block-woocommerce-single-product,
.produkt-block-breite .wc-block-components-product,
.produkt-block-breite .wc-block-grid,
.produkt-block-breite .wp-block-woocommerce-product-template {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Gutenberg Bild/Text-Row innen nicht zusätzlich begrenzen */
.produkt-info-row .wp-block-columns,
.produkt-info-row .wp-block-column,
.produkt-info-row .wp-block-group,
.produkt-info-row figure,
.produkt-info-row img {
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* =========================================================
   Footer Desktop
========================================================= */

@media (min-width: 1024px) {
  footer {
    padding-left: 18px;
  }
}


/* =========================================================
   Hero Lithium – Basis
========================================================= */

.hero-lithium {
  box-sizing: border-box;
}

.hero-lithium .wp-block-cover__inner-container {
  max-width: var(--layout-breite);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}


/* =========================================================
   Hero Lithium – Desktop
========================================================= */

@media (min-width: 1025px) {
  .hero-lithium.alignfull,
  .hero-lithium {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    height: var(--hero-desktop-hoehe) !important;
    min-height: var(--hero-desktop-hoehe) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
  }

  /* Hintergrundbild */
  .hero-lithium .wp-block-cover__image-background,
  .hero-lithium img.wp-block-cover__image-background {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: var(--hero-desktop-bildposition) !important;
  }

  /* Content-Bereich */
  .hero-lithium .wp-block-cover__inner-container {
    max-width: var(--layout-breite) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    transform: translateY(8px);
  }

  /* Titel */
  .hero-lithium .wp-block-heading {
    max-width: 680px !important;
    font-size: clamp(56px, 4.4vw, 78px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.03em !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }

  /* Paragraph */
  .hero-lithium p {
    max-width: 560px !important;
    font-size: clamp(21px, 1.35vw, 27px) !important;
    line-height: 1.35 !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
  }

  /* Button */
  .hero-lithium .wp-block-buttons {
    margin-top: 0 !important;
  }

  .hero-lithium .wp-block-button__link {
    font-size: 18px !important;
    line-height: 1.1 !important;
    padding: 15px 30px !important;
  }
}


/* =========================================================
   Hero Lithium – Mobil / Tablet
========================================================= */

@media (max-width: 768px) {
  :root {
    --layout-seitenabstand: 16px;
  }

  .hero-lithium {
    min-height: unset !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
  }

  .hero-lithium .wp-block-cover__inner-container {
    width: 54% !important;
    max-width: 54% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding: 16px 0 16px 18px !important;
    box-sizing: border-box !important;
  }

  .hero-lithium .wp-block-heading {
    font-size: clamp(18px, 5.4vw, 28px) !important;
    line-height: 1.05 !important;
    margin-bottom: 8px !important;
  }

  .hero-lithium p {
    font-size: clamp(10px, 2.8vw, 13px) !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }

  .hero-lithium .wp-block-buttons {
    margin-top: 4px !important;
  }

  .hero-lithium .wp-block-button__link {
    font-size: 12px !important;
    padding: 7px 13px !important;
    line-height: 1.1 !important;
  }
}


/* =========================================================
   Hero Lithium – sehr kleine Smartphones
========================================================= */

@media (max-width: 420px) {
  .hero-lithium .wp-block-cover__inner-container {
    width: 58% !important;
    max-width: 58% !important;
    padding-left: 14px !important;
  }

  .hero-lithium .wp-block-heading {
    font-size: clamp(17px, 5.2vw, 24px) !important;
  }

  .hero-lithium p {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .hero-lithium .wp-block-button__link {
    font-size: 11px !important;
    padding: 6px 11px !important;
  }
}

/* Hero Lithium – Mobile Texte enger zusammenziehen */

@media (max-width: 768px) {
  .hero-lithium .wp-block-heading {
    margin-bottom: 4px !important;
    line-height: 1 !important;
  }

  .hero-lithium p {
    margin-top: 0 !important;
    margin-bottom: 3px !important;
    line-height: 1.15 !important;
  }

  .hero-lithium .wp-block-buttons {
    margin-top: 4px !important;
  }

  .hero-lithium .wp-block-button__link {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}

/* Sehr kleine Smartphones noch kompakter */
@media (max-width: 420px) {
  .hero-lithium .wp-block-heading {
    margin-bottom: 4px !important;
  }

  .hero-lithium p {
    margin-bottom: 3px !important;
    line-height: 1.1 !important;
  }

  .hero-lithium .wp-block-buttons {
    margin-top: 3px !important;
  }
}

/* Kontaktformular: Linien/Borders anpassen */

.contact-form input,
.contact-form textarea,
.contact-form select {
  border-color: #4A4A49 !important;
}

/* Falls das Formular Rahmen um Felder/Container nutzt */
.contact-form .wp-block-jetpack-contact-form,
.contact-form .contact-form__input,
.contact-form .grunion-field-wrap,
.contact-form .wp-block-contact-form-7-contact-form-selector,
.contact-form .wpcf7-form-control {
  border-color: #4A4A49 !important;
}

/* Fokus-Zustand beim Anklicken */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: #4A4A49 !important;
  outline-color: #4A4A49 !important;
}


/* =========================================================
   WooCommerce Cart Drawer:
   Rechten Zusatzpreis ausblenden,
   Einzelpreis unter Produkttitel unverändert lassen
========================================================= */

/* Nur im geöffneten Drawer, nicht im Header-Warenkorb-Icon */
.wc-block-components-drawer__screen-overlay .wc-block-components-drawer__content,
.wc-block-components-drawer__screen-overlay .wp-block-woocommerce-mini-cart-contents {
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Drawer-Titel kleiner */
.wc-block-components-drawer__screen-overlay .wc-block-mini-cart__title,
.wc-block-components-drawer__screen-overlay .wp-block-woocommerce-mini-cart-title-block,
.wc-block-components-drawer__screen-overlay h2 {
  font-size: clamp(18px, 4.8vw, 24px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

/* Nur den rechten Zusatzpreis / Zeilensummenpreis ausblenden */
.wc-block-components-drawer__screen-overlay .wc-block-cart-item__total,
.wc-block-components-drawer__screen-overlay .wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-components-drawer__screen-overlay .wc-block-cart-item__total .wc-block-components-product-price {
  display: none !important;
}

/* Produktbereich darf die Breite nutzen, damit nichts überlappt */
.wc-block-components-drawer__screen-overlay .wc-block-cart-item__product {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Produktname darf sauber umbrechen */
.wc-block-components-drawer__screen-overlay .wc-block-components-product-name {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
}

/* Preis unter Produkttitel NICHT umstylen – nur minimal Abstand */
.wc-block-components-drawer__screen-overlay .wc-block-cart-item__product .wc-block-cart-item__prices {
  margin-top: 4px !important;
  margin-bottom: 8px !important;
}

/* Footer/Totals unten sauber halten */
.wc-block-components-drawer__screen-overlay .wc-block-mini-cart__footer,
.wc-block-components-drawer__screen-overlay .wc-block-components-totals-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Zwischensumme: Label links, Betrag rechts */
.wc-block-components-drawer__screen-overlay .wc-block-components-totals-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.wc-block-components-drawer__screen-overlay .wc-block-components-totals-item__label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
}

.wc-block-components-drawer__screen-overlay .wc-block-components-totals-item__value {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 55% !important;
  text-align: right !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* MwSt.-Hinweis sauber umbrechen */
.wc-block-components-drawer__screen-overlay .wc-block-components-totals-footer-item,
.wc-block-components-drawer__screen-overlay .wc-block-components-totals-item__description,
.wc-block-components-drawer__screen-overlay small {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Shop-Seite: doppelten WooCommerce-Block-Preis ausblenden */

body.woocommerce-shop .wc-block-components-product-price.wc-block-grid__product-price,
body.post-type-archive-product .wc-block-components-product-price.wc-block-grid__product-price {
  display: none !important;
}