/* ==========================================================================
   DEMMELER Shop – Gestaltung
   --------------------------------------------------------------------------
   Datei     demmeler_style_custom.css
   Zweck     Farben, Typografie und Abstände des Shops.
   Pflege    DEMMELER und Synoa. Elemente ein- oder ausblenden bitte
             über demmeler_display_custom.css.
   Tipp      Farben und Schriftgrößen werden zentral unter
             „1. Design-Variablen“ gepflegt und wirken überall, wo die
             Variable mit var(--…) verwendet wird.
   Hinweis   Nach Änderungen den Versionsparameter (?v=…) im Seitenkopf
             erhöhen, damit Browser die neue Datei laden.

   Inhalt
   1. Design-Variablen
   2. Typografie
   3. Preise
   4. Downloads & Links
   5. Produktseite
   6. Checkout
   7. Startseite: Slider
   8. Teilefinder
   9. Footer
   ========================================================================== */


/* 1. Design-Variablen
   ========================================================================== */

:root {
  /* Farben */
  --dm-color-brand: #003b73;                 /* DEMMELER-Blau: Überschriften, Links */
  --dm-color-brand-light: #cedce9;           /* Hellblau: Hinterlegungen */
  --dm-color-brand-overlay: rgb(11 83 148 / 80%); /* Textbox im Slider */
  --dm-color-muted: #a9a9a9;                 /* Grau: Grundpreis */

  /* Schriftgrößen Überschriften */
  --dm-font-size-h1: 3rem;
  --dm-font-size-h2: 2.2rem;
  --dm-font-size-h3: 1.8rem;

  /* Schriftgrößen Preise */
  --dm-font-size-price: 2rem;                /* Endpreis */
  --dm-font-size-price-related: 1.4rem;      /* Endpreis bei verwandten Produkten */
  --dm-font-size-price-note: 1.2rem;         /* Grundpreis und Preiszusatz */
}


/* 2. Typografie
   ========================================================================== */

h1,
h2,
h3 {
  color: var(--dm-color-brand) !important;
  font-weight: 700 !important;
}

h1 {
  font-size: var(--dm-font-size-h1) !important;
}

h2 {
  font-size: var(--dm-font-size-h2) !important;
}

h3 {
  font-size: var(--dm-font-size-h3) !important;
}


/* 3. Preise
   ========================================================================== */

/* Grundpreis */
.synoa_prices_baseprice span.prefix,
.synoa_prices_baseprice span.price,
.synoa_prices_baseprice span.suffix {
  color: var(--dm-color-muted);
  font-size: var(--dm-font-size-price-note) !important;
  font-weight: 400 !important;
}

span.synoa_prices_baseprice.price-excluding-tax {
  margin-bottom: 10px !important;
}

/* Endpreis */
.price-container.price-final_price.tax.weee span.prefix,
.price-container.price-final_price.tax.weee span.price {
  font-size: var(--dm-font-size-price) !important;
  font-weight: 700 !important;
}

.price-container.price-final_price.tax.weee span.suffix {
  font-size: var(--dm-font-size-price-note) !important;
  font-weight: 700 !important;
}

/* Endpreis bei verwandten Produkten */
.block.related .price-container.price-final_price.tax.weee span.prefix,
.block.related .price-container.price-final_price.tax.weee span.price {
  font-size: var(--dm-font-size-price-related) !important;
  font-weight: 700 !important;
}

.block.related .price-container.price-final_price.tax.weee span.suffix {
  font-size: var(--dm-font-size-price-note) !important;
  font-weight: 700 !important;
}


/* 4. Downloads & Links
   ========================================================================== */

#synoa_downloadsnk_list .downloads-link,
.cmslinks a,
#synoa_downloadsnk_downloads_tab p a {
  color: var(--dm-color-brand) !important;
  font-weight: 700;
  text-decoration: underline !important;
}

.cmslinks {
  padding: 20px;
  background-color: var(--dm-color-brand-light);
}


/* 5. Produktseite
   ========================================================================== */

.product-info-main .synoa_masterdata_widget span {
  font-weight: 700 !important;
}

.product-items .actions-primary {
  margin-top: 20px !important;
}

#maincontent > div.columns > div > div > div.product-lower-primary-column.grid12-9 {
  margin-top: 70px;
}


/* 6. Checkout
   ========================================================================== */

/* Hinweis: .title gilt shopweit, nicht nur im Checkout */
.opc-wrapper .step-title,
.title {
  font-weight: 700 !important;
}


/* 7. Startseite: Slider
   ========================================================================== */

.pagebuilder-slider .pagebuilder-collage-content {
  padding: 29px;
  border-radius: 12px;
  background-color: var(--dm-color-brand-overlay);
  color: #fff;
}


/* 8. Teilefinder
   ========================================================================== */

@media screen and (min-width: 1440px) {
  .partfinder-index-index .page-wrapper #synoa_components_iframe_top {
    max-width: 1380px;
    margin: 0 auto;
    padding-inline: 100px 80px; /* links rechts */
  }
}

@media screen and (min-width: 1680px) {
  .partfinder-index-index .page-wrapper #synoa_components_iframe_top {
    max-width: 1650px;
    padding-top: 10px;
  }
}


/* 9. Footer
   ========================================================================== */

/* Spalten untereinander, rechte Spalte zuerst */
.page-footer .footer-bottom .inner-container {
  display: flex;
  flex-direction: column;
}

.page-footer .footer-bottom .inner-container .item {
  float: none;
}

.page-footer .footer-bottom .inner-container .item-right {
  order: 1;
}

.page-footer .footer-bottom .inner-container .item-left {
  order: 2;
}