/*
 * GLANOL – Custom CSS (CLEAN)
 * Stand: USP-Bar + Header-Suche FINAL + Footer FINAL + Header-Linie CI
 */

/* =====================================================
   GLANOL – USP-Bar (unter dem Header)
   ===================================================== */

.gl-uspbar {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.gl-uspbar .container,
.gl-uspbar .container-fluid,
.gl-uspbar .container-fluid-xl {
  display: flex;
  justify-content: center;
}

.gl-uspbar__list {
  list-style: none !important;
  margin: 0 !important;
  padding: .55rem 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}

.gl-uspbar__list li {
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  opacity: .92;
}


/* =====================================================
   GLANOL – Header-Suche (FINAL, durchgehender Rahmen)
   ===================================================== */

#jtl-nav-wrapper .search-wrapper .input-group {
  border: 1px solid rgba(0,0,0,.18);
  border-radius: .125rem;
  background: #f4f5f6;
  overflow: hidden;
}

#jtl-nav-wrapper .search-wrapper .form-control,
#jtl-nav-wrapper .search-wrapper .input-group-append .btn,
#jtl-nav-wrapper .search-wrapper .input-group-append button {
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: .95rem;
}

#jtl-nav-wrapper .search-wrapper .input-group:focus-within {
  border-color: rgba(0,48,84,.35);
  box-shadow: 0 0 0 2px rgba(0,48,84,.08);
  background: #fff;
}



/* -----------------------------------------------------
   1) Grundfläche, Typo, Grundabstände
   ----------------------------------------------------- */

#footer,
.footer-wrapper,
#footer-wrapper{
  background: #0b2236;
  color: rgba(255,255,255,.88);

  /* kompakt */
  padding-top: 0.75rem !important;
  padding-bottom: 0.5rem !important;
}


/* -----------------------------------------------------
   2) Container, Rows, Columns (Layout)
   ----------------------------------------------------- */

#footer .container,
#footer .container-fluid,
.footer-wrapper .container,
.footer-wrapper .container-fluid{
  padding-top: 0.75rem !important;
  padding-bottom: 0.5rem !important;
}

#footer .row,
.footer-wrapper .row{
  margin-bottom: 0.5rem !important;
}

#footer [class*="col-"],
.footer-wrapper [class*="col-"]{
  margin-bottom: 0.5rem !important;
}


/* -----------------------------------------------------
   3) Überschriften / Spalten-Titel (NOVA-robust)
   ----------------------------------------------------- */

#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
.footer-wrapper h1,
.footer-wrapper h2,
.footer-wrapper h3,
.footer-wrapper h4,
.footer-wrapper h5{
  color: #ffffff;
  letter-spacing: .02em;
  margin-top: 0 !important;
  margin-bottom: 0.35rem !important;
  line-height: 1.2;
}

#footer .h5,
#footer .footer-title,
#footer .footer-headline,
#footer .title,
#footer .headline,
.footer-wrapper .h5,
.footer-wrapper .footer-title,
.footer-wrapper .footer-headline,
.footer-wrapper .title,
.footer-wrapper .headline{
  color: rgba(255,255,255,.92) !important;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Robuster Fallback für unbekannte Titel-Wrapper */
#footer :is(
  h1,h2,h3,h4,h5,h6,
  .h1,.h2,.h3,.h4,.h5,.h6,
  .footer-title,.footer-headline,.footer-heading,.footer-header,
  .nav-title,.box-title,.panel-title,
  .title,.headline
){
  color: rgba(255,255,255,.92) !important;
  font-weight: 600;
  letter-spacing: .02em;
}

#footer [class*="title"],
#footer [class*="headline"],
#footer [class*="heading"]{
  color: rgba(255,255,255,.92) !important;
  font-weight: 600;
}


/* -----------------------------------------------------
   4) Listen
   ----------------------------------------------------- */

#footer ul,
.footer-wrapper ul{
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

#footer li,
.footer-wrapper li{
  margin: 0.15rem 0 !important;
}


/* -----------------------------------------------------
   5) Links (NOVA-sicher, kein Unterstreichen)
   ----------------------------------------------------- */

#footer a,
#footer a:link,
#footer a:visited,
.footer-wrapper a,
.footer-wrapper a:link,
.footer-wrapper a:visited{
  color: rgba(255,255,255,.90) !important;
  text-decoration: none !important;
}

/* =====================================================
   GLANOL – Footer Links (FINAL)
   ===================================================== */

/* Nur Footer-Listenlinks */
#footer ul li > a,
.footer-wrapper ul li > a{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: rgba(255,255,255,.90) !important;
  text-decoration: none !important;
  transition: color .15s ease;
}

/* Text-Hover */
#footer ul li > a:hover,
.footer-wrapper ul li > a:hover{
  color: #ffffff !important;
  text-shadow: 0 0 0.01px rgba(1,38,82,.9);
}

/* Icon-Platz immer reservieren -> KEIN Layout-Shift */
#footer ul li > a::before,
.footer-wrapper ul li > a::before{
  content: "✓";              /* Platzhalter immer da */
  display: inline-block;
  width: 1em;                /* feste Breite -> stabil */
  text-align: center;
  font-size: .75em;
  line-height: 1;
  transform: translateY(-1px);
  opacity: 0;                /* unsichtbar */
  transition: opacity .2s ease;
}

/* Icon nur sichtbar bei Hover */
#footer ul li > a:hover::before,
.footer-wrapper ul li > a:hover::before{
  opacity: .85;
}



/* -----------------------------------------------------
   6) Footer-Bottom-Bar (Copyright etc.)
   ----------------------------------------------------- */

#footer .footer-bottom,
.footer-wrapper .footer-bottom,
#footer .copyright,
.footer-wrapper .copyright{
  background: rgba(0,0,0,.10);
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 0.5rem !important;
  padding-top: 0.5rem !important;
  color: rgba(255,255,255,.75);
  font-size: 0.85rem;
}

#footer .footer-bottom *,
.footer-wrapper .footer-bottom *{
  color: inherit;
}


/* -----------------------------------------------------
   7) Logos (einheitlich, ruhig)
   ----------------------------------------------------- */

#footer img,
.footer-wrapper img{
  border-radius: 10px;
  filter: grayscale(100%);
  opacity: .9;
  overflow: hidden;
  transition: filter .2s ease, opacity .2s ease;
}

#footer img:hover,
.footer-wrapper img:hover{
  filter: grayscale(0%);
  opacity: 1;
}

/* =====================================================
   GLANOL – Header & Footer zusammenziehen + CI harmonisieren
   (CLEAN / keine Doppelbefehle)
   CI: #012652
   ===================================================== */

:root{
  --gl-ci: #012652;
  --gl-ci-line: rgba(1,38,82,.14);
  --gl-ci-line-strong: rgba(1,38,82,.22);
}

/* -----------------------------------------------------
   1) USP-Bar als CI-Fläche (Top-Cap)
   Header bleibt unberührt
   ----------------------------------------------------- */

.gl-uspbar{
  background: var(--gl-ci);
  border-bottom: none; /* entfernt die alte graue Linie sauber */
}

.gl-uspbar,
.gl-uspbar *{
  color: rgba(255,255,255,.95);
}

.gl-uspbar__list{
  font-size: .9rem; /* leicht ruhiger */
  /* padding bleibt aus deinem Basisblock bestehen:
     padding: .55rem 0 !important; */
}

.gl-uspbar__list li{
  opacity: .95;
}

.gl-uspbar svg,
.gl-uspbar i{
  opacity: .9;
}

/* -----------------------------------------------------
   2) Footer bekommt passende Top-Linie (bindet an USP an)
   ----------------------------------------------------- */

#footer,
.footer-wrapper,
#footer-wrapper{
  border-top: 1px solid var(--gl-ci-line);
}

/* Footer Bottom-Bar: vorhandene Linie CI-tinten */
#footer .footer-bottom,
.footer-wrapper .footer-bottom,
#footer .copyright,
.footer-wrapper .copyright{
  border-top-color: var(--gl-ci-line-strong);
}

/* -----------------------------------------------------
   3) Header minimal kompakter (nur Wrapper-Padding)
   Keine Eingriffe in eure Search-Wrapper Logik
   ----------------------------------------------------- */

#jtl-nav-wrapper{
  padding-top: 6px;
  padding-bottom: 6px;
}

#jtl-nav-wrapper .navbar,
#jtl-nav-wrapper .navbar-nav{
  margin-top: 0;
  margin-bottom: 0;
}

/* -----------------------------------------------------
   4) OPTION: CI-Unterstreichung für Header-Links (aus)
   ----------------------------------------------------- */
/*
#jtl-nav-wrapper a{
  background-image: linear-gradient(var(--gl-ci), var(--gl-ci));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: color .18s ease, background-size .18s ease;
}
#jtl-nav-wrapper a:hover{
  background-size: 100% 2px;
}
*/

/* =====================================================
   GLANOL – Tonwert-Abgleich USP-Bar ↔ Footer
   Text/Links dezenter, Hover bleibt weiß
   ===================================================== */

:root{
  --gl-on-dark: rgba(255,255,255,.82);   /* dezentes Hellgrau */
  --gl-on-dark-muted: rgba(255,255,255,.74);
}

/* USP-Bar: bewusst etwas grauer als reines Weiß */
.gl-uspbar,
.gl-uspbar *{
  color: var(--gl-on-dark) !important;
}

/* Footer: Fließtext / Standard */
#footer,
.footer-wrapper,
#footer-wrapper{
  color: var(--gl-on-dark) !important;
}

/* Footer Links: normal wie USP-Bar */
#footer a,
#footer a:link,
#footer a:visited,
.footer-wrapper a,
.footer-wrapper a:link,
.footer-wrapper a:visited{
  color: var(--gl-on-dark) !important;
}

/* Footer Listenlinks (deine spezifische Regel überschreiben) */
#footer ul li > a,
.footer-wrapper ul li > a{
  color: var(--gl-on-dark) !important;
}

/* Hover bleibt weiß (wie gewünscht) */
#footer a:hover,
.footer-wrapper a:hover,
#footer ul li > a:hover,
.footer-wrapper ul li > a:hover{
  color: #ffffff !important;
}

/* Footer Bottom-Bar Text etwas zurücknehmen */
#footer .footer-bottom,
.footer-wrapper .footer-bottom,
#footer .copyright,
.footer-wrapper .copyright{
  color: var(--gl-on-dark-muted) !important;
}

/* =====================================================
   GLANOL – VAT-Footnote CI
   ===================================================== */

#footer .footer-vat-row{ margin-top: .35rem; }
#footer .footnote-vat .small{
  font-size: .75rem;
  line-height: 1.15;
  color: rgba(255,255,255,.74);
}

/* -----------------------------------------
   Copyright / System-Credits – ruhig & fein
------------------------------------------ */

#copyright {
  background-color: #e6e6e6 !important; /* hellgrau */
  color: #4a4a4a !important;           /* dunkles Grau */

  display: flex;
  align-items: center;
  font-size: 0.9rem;
}

/* Link „Powered by JTL-Shop“ */
#system-credits,
#system-credits a {
  color: #5a5a5a !important;
  text-decoration: none !important;
}

/* dezenter Hover */
#system-credits a:hover {
  color: #2f2f2f !important;
  text-decoration: underline;
}
/* =========================================
   GLANOL – Versand-Box (Footer kompakt)
   Desktop: Logo links, Text rechts (Footer bleibt flach)
   Mobile: umbrechen erlaubt (kein Horizontal-Scroll)
   ========================================= */

#footer .gl-shipbox{
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 440px;     /* DE/EN safe */
  font-size: 14px;
  line-height: 1.35;
}

#footer .gl-shipbox__logo{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* verhindert "Originalgröße": wir erzwingen 150px */
#footer .gl-shipbox__logo img{
  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;
  border-radius: 0 !important;     /* optional: DHL Logo bleibt clean */
  filter: none !important;         /* optional: DHL bleibt gelb (falls gewünscht) */
  opacity: 1 !important;           /* optional */
}

#footer .gl-shipbox__text{
  min-width: 0; /* entscheidend, damit Text im Flex-Layout sauber umbrechen kann */
}

/* Mobile: nur dann untereinander, um Overflow zu vermeiden */
@media (max-width: 575.98px){
  #footer .gl-shipbox{
    flex-wrap: wrap;
    max-width: 100%;
  }
  #footer .gl-shipbox__text{
    width: 100%;
  }
}
/* =========================================
   GLANOL – Versand (DHL) im Footer – FINAL
   Desktop: Logo links, Text rechts (kein Umbruch)
   Mobile: untereinander, Umbruch erlaubt
   Optik: grau wie Zahlungslogos, Hover in Farbe
   ========================================= */

#footer .gl-shipbox{
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 440px;
  font-size: 14px;
  line-height: 1.35;
}

/* Logo-Wrapper */
#footer .gl-shipbox__logo{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* DHL-Logo: graustufig, abgerundet, Hover Farbe */
#footer .gl-shipbox__logo img{
  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;
  display: block;

  border-radius: 10px !important;     /* wie Zahlungslogos */
  overflow: hidden;

  filter: grayscale(100%) !important;
  opacity: .9 !important;
  transition: filter .2s ease, opacity .2s ease;
}

/* Hover: Farbe zurück */
#footer .gl-shipbox__logo img:hover{
  filter: grayscale(0%) !important;
  opacity: 1 !important;
}

/* Text: Desktop/Tablet NICHT umbrechen */
#footer .gl-shipbox__text{
  min-width: 0;
}

#footer .gl-shipbox__text > div{
  white-space: nowrap !important;
}

/* Mobile: untereinander + Umbruch erlauben */
@media (max-width: 575.98px){
  #footer .gl-shipbox{
    flex-wrap: wrap;
    max-width: 100%;
  }

  #footer .gl-shipbox__text{
    width: 100%;
  }

  #footer .gl-shipbox__text > div{
    white-space: normal !important;
  }
}
/* VAT-Hinweis im Copyright-Bereich */
#copyright .gl-vatnote{
  margin-top: 4px;
  font-size: 0.75rem;
  line-height: 1.2;
  color: rgba(74,74,74,.85);
}

#copyright .gl-vatnote a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Abstand zwischen Footer-Inhalt und Copyright verkleinern */
#footer{
  padding-bottom: 0 !important;
}

#copyright{
  margin-top: 0 !important;
  padding-top: 1px !important;   /* ggf. 4px oder 5px nach Geschmack */
}
/* =========================================
   Copyright-Footnote: Mobile sauber umbrechen
   ========================================= */

@media (max-width: 575.98px){
  #copyright .ml-2{
    display: block !important;     /* Fußnote neue Zeile */
    margin-left: 0 !important;     /* Bootstrap ml-2 neutralisieren */
    margin-top: 4px !important;
    white-space: normal !important;
  }
}
@media (max-width: 575.98px){

  /* Abstand oberhalb der Copyright-Zeile reduzieren */
  #copyright{
    padding-top: 4px !important;   /* vorher war es mehr */
  }

  /* Row & Columns auf Mobile beruhigen */
  #copyright .row{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #copyright .col,
  #copyright [class*="col-"]{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Fußnote: nah an Copyright */
  #copyright .ml-2{
    margin-top: 2px !important;
  }
}
/* Copyright wirklich links (Browser + Mobile) */
#copyright{
  text-align: left !important;
  justify-content: flex-start !important; /* falls #copyright flex ist */
}

#copyright .container-fluid,
#copyright .container-fluid-xl{
  justify-content: flex-start !important; /* falls Container flex ist */
}

#copyright .row{
  justify-content: flex-start !important;
}

#copyright .col,
#copyright [class*="col-"]{
  text-align: left !important;
}
/* Copyright – Desktop: etwas nach rechts einrücken */
@media (min-width: 768px){
  #copyright .container-fluid,
  #copyright .container-fluid-xl{
    padding-left: 70px;
  }
}

/* Kategorieansicht: Flex-Zeilen oben sammeln, nicht strecken */
#product-list{
  align-content: flex-start;
}

/* =========================================================
   1) Startseite – OPC Product-Stream (Topartikel)
   Hinweis: Im Stream gibt es i.d.R. keinen Direkt-Kauf.
   Block bleibt trotzdem "safe": falls irgendwo Add-to-cart auftaucht,
   wird es nur auf der Startseite im Stream ausgeblendet.
   ========================================================= */

.page-home .gl-home-top .productbox form,
.page-home .gl-home-top .productbox .buy_form,
.page-home .gl-home-top .productbox .productbox-actions,
.page-home .gl-home-top .productbox .productbox-action,
.page-home .gl-home-top .productbox .productbox-add-to-cart,
.page-home .gl-home-top .productbox .btn-basket,
.page-home .gl-home-top .productbox [data-product-action="add-to-cart"],
.page-home .gl-home-top .productbox .quantity,
.page-home .gl-home-top .productbox .quantity-wrapper{
  display: none !important;
}

.page-home .gl-home-top .productbox-title a{
  text-decoration: none !important;
}


/* =========================================================
   2) Kategorieansicht (Grid) – Bilder 1:1 (quadratisch), OHNE Rahmen
   Basis: gl-pbox Wrapper (dein NOVA-Child)
   ========================================================= */

.gl-pbox .productbox-image{
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Bild sauber in die 1:1 Fläche einpassen (nichts abschneiden) */
.gl-pbox .productbox-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: center;
}
/* =========================================================
   Startseite – Schnell zum Ziel (Kachel-Navigation)
   ========================================================= */

.gl-quicknav{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 3px;
  background: #fff;
  padding: 1.8rem;
}

/* Kachel */
.gl-quicknav .gl-tile{
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  background: #f2f2f2;
  min-height: 240px;
}

/* Bild in der Kachel */
.gl-quicknav .gl-tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text-Overlay unten */
.gl-quicknav .gl-tile__text{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  background: rgba(255,255,255,.80);
  border-radius: 3px;
  padding: 14px;
}

/* Typo im Overlay */
.gl-quicknav .gl-tile__text h3{
  margin: 0 0 .35rem 0;
  line-height: 1.15;
}

.gl-quicknav .gl-tile__text p{
  margin: 0;
  line-height: 1.5;
}

/* =========================================================
   Startseite – Schnell zum Ziel (4 Kacheln)
   ========================================================= */

/* Rahmen um den ganzen Block */
.gl-quicknav{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 3px;
  background: #fff;
  padding: 1.6rem;
}

/* Kachel */
.gl-quicknav .gl-tile{
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  background: #f2f2f2;
  min-height: 210px;
}

/* Bild soll die Kachel füllen */
.gl-quicknav .gl-tile img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* Overlay unten */
.gl-quicknav .gl-tile__text{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  background: rgba(255,255,255,.82);
  border-radius: 3px;
  padding: 14px;
}

/* Typo im Overlay */
.gl-quicknav .gl-tile__text h3{
  margin: 0 0 .35rem 0;
  line-height: 1.15;
}

.gl-quicknav .gl-tile__text p{
  margin: 0;
  line-height: 1.5;
}

/* Container Fließtexte */
.gl-content-box{
  background: #ffffff;
  border: 1px solid #e2e2e2;
  border-radius: 3px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
}
/* Überschrift H2 Titel */
.gl-section-title{
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 20px 0;
}

/* OPC Bildgröße  */
.gl-proof-img img{
  max-width: 150px;
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.9;
}
/* H3 Klasse */

.gl-row-title{
  font-size: 1.1rem;
  font-weight: 600;
}

.gl-quote{
  border-left: 6px solid #ff00ff;
  padding-left: 16px;
  margin: 14px 0;
  font-style: italic;
  color: #555;
}