.legal-guarantee-row { display: none}
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset.selectOptions .conOptions .flex-container .panel {align-content: flex-start;}

/*header.main #brand-logo img {
    min-width: 80px;
    max-width: 400px;
    height: auto;
    position: relative;
    z-index: 3;
}


#navbar .wrp>ul>li { z-index: 4; }
.remark {display: none;}
*/
.slide {
   top: 0px;
}
.slide.slide-0 {
    background: #ffffff;
}
.infotextbox h3 { width:100%!important; padding-right: 0!important; margin: 0 0 0 0!important; text-align: left!important; }
.infotextbox h3:after { display: none; }
.infotextbox p { font-size: 12px; line-height: 18px; margin-bottom: 0; }
.infotextbox strong { display: block; margin-top: 14px; }

.crefopayImages { margin-bottom: 24px; }
.crefopayImages img { display: inline-block; margin-bottom: 0; vertical-align: middle; }
.crefopayImages img:not(:last-child) {margin-right: 24px; }

#product-detail #delivery strong, #product-detail #weight strong { font-size: 14px;}

/*PSH-7514*/
.cardActions .duplicate {display: none;}

@media screen and (max-width: 680px) {
.crefopayImages img { margin-bottom: 24px; height: auto!important; width: 47.5%!important; }
.crefopayImages img:not(:last-child) {margin-right: 0; }
.crefopayImages img:nth-child(odd) {margin-right: 5%;}
}
footer.main>.wrp>nav li.druckmuster_jn { display: none;}

#visual_calculation .contentwrapper.right #comments {
     display: block; 
}
#visual_calculation .contentwrapper.left .head #opc_image_prev:before { content: none}

/* =========================================== */
/* UMBENNENNUNG EINZELNE WORTE ÜBER ARTIKEL ID */
/* =========================================== */

/* FREI KALK Wort Menge => Stück */
/* Nur auf Produkt 1112108913 */
html:has(input[name="c"][value="1112108913"])
.optionWrapper:has(input[name="menge"]) 
.optionName {
    visibility: hidden;
    position: relative;
}

html:has(input[name="c"][value="1112108913"])
.optionWrapper:has(input[name="menge"]) 
.optionName::after {
    content: "Stück (Etiketten)";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}

/* Liefertermin bei Service Leistungen */
/* Versandinformation nur für Gestaltungsservice-Artikel umbenennen */

html:has(input[name="c"][value="1112102300"]) #delivery h2,
html:has(input[name="c"][value="1112073956"]) #delivery h2,
html:has(input[name="c"][value="1112093246"]) #delivery h2,
html:has(input[name="c"][value="1112093247"]) #delivery h2 {
    font-size: 0;
}

html:has(input[name="c"][value="1112102300"]) #delivery h2::after,
html:has(input[name="c"][value="1112073956"]) #delivery h2::after,
html:has(input[name="c"][value="1112093246"]) #delivery h2::after,
html:has(input[name="c"][value="1112093247"]) #delivery h2::after {
    content: "Termininformation";
    font-size: 18px;
}


/* H3 Originaltext komplett ausblenden */
html:has(input[name="c"][value="1112102300"]) #delivery h3,
html:has(input[name="c"][value="1112073956"]) #delivery h3,
html:has(input[name="c"][value="1112093246"]) #delivery h3,
html:has(input[name="c"][value="1112093247"]) #delivery h3 {
    color: transparent;
    font-size: 0;
}

/* Neuen Text anzeigen */
html:has(input[name="c"][value="1112102300"]) #delivery h3::after,
html:has(input[name="c"][value="1112073956"]) #delivery h3::after,
html:has(input[name="c"][value="1112093246"]) #delivery h3::after,
html:has(input[name="c"][value="1112093247"]) #delivery h3::after {
    content: "mit Entwurf zu rechnen ab:";
    color: #666;
    font-size: 14px;
    line-height: 1.3;
    display: inline-block;
}

/* =========================================================== */
/* ARTIKELBEZEICHNUNG UND BILD - Kacheln Warengruppe und Artikel */
/* =========================================================== */

/* =====================================================
   DRUCKMUSTER-FORMULAR
   Nur für das Formular mit ID articleSample
===================================================== */

/* Formularbox */
#articleSample {
    display: block !important;
    max-width: 980px !important;
    margin: 0 auto !important;
    padding: 24px 28px 30px !important;
    background: #f2f2f2 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.08) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Überschrift vor dem Formular */
#contentLoad > h1 {
    max-width: 980px !important;
    margin: 24px auto 0 !important;
    padding: 24px 28px 10px !important;
    background: #f2f2f2 !important;
    border-radius: 10px 10px 0 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 34px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: #628967 !important;
    box-sizing: border-box !important;
}

/* oberer grüner Balken */
#contentLoad > h1::before {
    content: "" !important;
    display: block !important;
    height: 8px !important;
    margin: -24px -28px 22px -28px !important;
    background: #628967 !important;
    border-radius: 10px 10px 0 0 !important;
}

/* Hinweistext */
#articleSample::before {
    content: "Fordern Sie bequem Ihr Druckmuster an. Bitte füllen Sie die Pflichtfelder vollständig aus." !important;
    display: block !important;
    margin: 0 0 24px 0 !important;
    padding: 16px 18px !important;
    background: #ffffff !important;
    border-left: 4px solid #628967 !important;
    border-radius: 8px !important;
    color: #444444 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}

/* Formulargrid */
#articleSample .form_billing-address {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 20px !important;
    align-items: start !important;
}

/* Fieldsets neutralisieren */
#articleSample fieldset {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    min-width: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Volle Breite */
#articleSample fieldset.col-2,
#articleSample fieldset:nth-of-type(5),
#articleSample fieldset:nth-of-type(9) {
    grid-column: 1 / -1 !important;
}

/* Labels */
#articleSample label {
    display: block !important;
    margin: 0 0 8px 0 !important;
    color: #628967 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    text-align: left !important;
}

/* Inputs */
#articleSample input[type="text"],
#articleSample input[type="email"],
#articleSample input[type="number"],
#articleSample input[type="tel"],
#articleSample input[type="url"],
#articleSample input[type="search"],
#articleSample select,
#articleSample textarea {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    border: 1px solid #cfd6cf !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #222222 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Fokus */
#articleSample input:focus,
#articleSample select:focus,
#articleSample textarea:focus {
    outline: none !important;
    border-color: #628967 !important;
    box-shadow: 0 0 0 4px rgba(98, 137, 103, 0.15) !important;
    background: #ffffff !important;
}

/* Pflichtstern */
#articleSample .requirement {
    position: absolute !important;
    top: 38px !important;
    right: 12px !important;
    display: inline-block !important;
    color: #c84b4b !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* PLZ / Ort */
#articleSample fieldset.col-2 {
    display: grid !important;
    grid-template-columns: 170px 1fr !important;
    gap: 12px !important;
    align-items: end !important;
}

#articleSample fieldset.col-2 label {
    grid-column: 1 / -1 !important;
}

#articleSample fieldset.col-2 input[name="plz"],
#articleSample fieldset.col-2 input[name="ort"] {
    width: 100% !important;
}

#articleSample fieldset.col-2 .requirement {
    right: 12px !important;
    top: 38px !important;
}

/* Button */
#articleSample button.btn.success,
#articleSample button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 52px !important;
    margin-top: 28px !important;
    padding: 14px 28px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #628967 !important;
    color: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 8px 20px rgba(98, 137, 103, 0.22) !important;
}

#articleSample button.btn.success:hover,
#articleSample button[type="submit"]:hover,
#articleSample button.btn.success:focus,
#articleSample button[type="submit"]:focus {
    background: #547658 !important;
    color: #ffffff !important;
    outline: none !important;
}

/* technische Elemente */
#articleSample input[type="hidden"] {
    display: none !important;
}

#articleSample .clr {
    display: none !important;
}

/* Abschlusshinweis */
#articleSample::after {
    content: "Vielen Dank für Ihr Interesse an unseren Druckmustern." !important;
    display: block !important;
    margin-top: 24px !important;
    padding-top: 18px !important;
    border-top: 1px solid #d7d7d7 !important;
    color: #666666 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Mobil */
@media (max-width: 767px) {
    #contentLoad > h1 {
        margin-top: 12px !important;
        padding: 22px 18px 8px !important;
        font-size: 28px !important;
    }

    #contentLoad > h1::before {
        margin: -22px -18px 18px -18px !important;
    }

    #articleSample {
        padding: 18px !important;
    }

    #articleSample .form_billing-address {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    #articleSample fieldset.col-2,
    #articleSample fieldset:nth-of-type(5),
    #articleSample fieldset:nth-of-type(9) {
        grid-column: auto !important;
    }

    #articleSample fieldset.col-2 {
        grid-template-columns: 1fr !important;
    }

    #articleSample button.btn.success,
    #articleSample button[type="submit"] {
        width: 100% !important;
    }
}

/* =========================================================== */
/* FRAGEZEICHEN */
/* =========================================================== */

/* =========================================================== */
/* FRAGEZEICHEN */
/* =========================================================== */

span.info {
    display: inline-block !important;

    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;

    background: #5f7f63 !important;
    border-radius: 50% !important;

    text-align: center !important;
    vertical-align: middle !important;

    border: none !important;
    box-shadow: none !important;

    position: relative !important;
    top: -1px !important;

    font-size: 0 !important;
}

/* Fragezeichen */
span.info::before {
    content: "?" !important;

    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;

    color: #ffffff !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    display: block !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;

    text-align: center !important;

    margin: 0 !important;
    padding: 0 !important;
}

span.info::after {
    content: none !important;
    display: none !important;
}

/* Tooltip-Inhalt wieder normal anzeigen */
span.info .tooltip {
    font-size: 16px !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

span.info .tooltip strong {
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

span.info .tooltip p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Gewährleistungs-Seite aus dem Service-Center-Dropdown ausblenden */
.service-menu li:has(a[href="/gewaehrleistung/"]) {
    display: none !important;
}

/* =========================================
   Creator Modal – Druckfreigabe
   ========================================= */

/* Bestehende Überschrift optisch ersetzen */
#creatorConfirmModal .modal-title {
    font-size: 0 !important;
}

#creatorConfirmModal .modal-title::after {
    content: "Druckfreigabe";
    font-size: 24px;
    line-height: 1.2;
}


/* Hinweis oberhalb von Checkbox und Vorschau */
#creatorConfirmModal .well-sm.well::before {
    content: "Bitte pr\00FC fen Sie Ihren Entwurf sorgf\00E4 ltig auf Schreibweise, Namen, Anschrift, Honigsorte, Mengenangaben, Pflichtangaben und Gestaltung. Mit Ihrer Druckfreigabe best\00E4 tigen Sie, dass der Entwurf hinsichtlich der von Ihnen gelieferten bzw. freigegebenen Inhalte Ihren Vorgaben entspricht.";

    display: block;
    margin: 0 0 18px 0;

    font-size: 14px;
    line-height: 1.5;
    font-weight: normal;
}

/* =========================================================
   HAUPTNAVIGATION: Abstände zwischen Menüpunkten verkleinern
   Schafft Platz für „Messen“ und hält das Service-Center
   auf Desktop-Bildschirmen innerhalb der grünen Menüleiste.
   ========================================================= */
@media (min-width: 1100px) {
  #navbar > .wrp > ul > li + li {
    margin-left: 12px !important;
  }
}

/* =========================================================
   TABLET-NAVIGATION: vorhandenes Mobilmenü früher anzeigen
   Bei 768–1099 px ersetzt der Menüknopf die zu volle
   Desktop-Leiste. Ab 1100 px bleibt die Desktop-Navigation.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1099px) {
  body {
    padding-top: 80px;
  }

  header.main {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 20;
    background: #fff;
  }

  #service-bar,
  #header_usp,
  #navbar,
  header.main #customer-menu {
    display: none !important;
  }

  #offcanvas_open {
    display: block !important;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: #f7f7f7;
    z-index: 21;
  }

  #offcanvas_open::before {
    content: "q";
    font-family: icon;
    font-size: 30px;
    line-height: 40px;
  }

  main {
    padding-top: 0;
  }
}

/* STARTSEITEN-SLIDER: kompakte Tablet-Ansicht */
@media (min-width: 601px) and (max-width: 1099px) {
  .slider-container {
    height: clamp(430px, 47vw, 500px) !important;
    cursor: default !important;
  }

  .slider-container .slide {
    top: 0 !important;
  }

  .slider-container .slide__bg {
    left: auto !important;
    right: 0 !important;
    margin-left: 0 !important;
    width: 54% !important;
    background-size: contain !important;
    background-position: right bottom !important;
  }

  .slider-container .slide__text {
    left: 4% !important;
    top: 9% !important;
    margin-left: 0 !important;
    width: 46% !important;
    padding: 15px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.88) !important;
  }

  .slider-container .slide__text-desc h1,
  .slider-container .slide__text-desc h1 span {
    font-size: clamp(27px, 3.5vw, 39px) !important;
    line-height: 1.05 !important;
  }

  .slider-container .slide__text-desc p {
    font-size: 15px;
    line-height: 1.35;
  }
}

