/** Shopify CDN: Minification failed

Line 295:0 Expected "}" to go with "{"

**/
/* ============================================================================
   header-redesign.css
   Heller, verkaufsfördernder Header — optisch passend zum dlb-mm Mega-Menü.
   Version: 1.0.0  |  LastModified: 2026-06-01

   Wird site-weit geladen (layout/theme.liquid). Restyle des bestehenden
   Header-Markups (sections/header.liquid) per CSS — keine Markup-Umbauten der
   Theme-Struktur. Suche-Pille wird zusätzlich im Inline-<style> der header.liquid
   gestaltet; Kontakt-Icons sind dort als <i class="fa-…"> ergänzt.

   Richtung: heller (weißer) Header + graue Mega-Menü-Leiste, prominente Suche,
   sichtbarer Kontakt, betonter Warenkorb, sticky.
   Rollback: diesen <link> in theme.liquid entfernen + die zwei header.liquid-Edits.
   ============================================================================ */

:root,
.header {
  --hd-accent: var(--accent-color, #1e6fbf);
  --hd-text: #2b2c30;
  --hd-muted: #6b7079;
}

/* ----------------------------------------------------------------------------
   Sticky wird vom THEME übernommen (Setting „Enable sticky header" = aktiv).
   Das Theme pinnt #shopify-section-header inkl. Mega-Menü und berechnet daraus
   --header-height. Daher hier KEIN eigenes position:sticky (sonst Doppel-Sticky).
   ------------------------------------------------------------------------- */

/* Heller Header-Grundlook */
.header {
  background: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

/* Leeres Theme-Telefon-Icon ausblenden — Kontakt kommt aus .quickkontakt */
.header__phone { display: none !important; }

/* Warenkorb als runde Akzent-Schaltfläche mit Badge */
.header__action-item--cart { position: relative; }

.header__action-item--cart .header__cart-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #2b73a700;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.header__action-item--cart .header__cart-toggle:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.header__action-item--cart .icon--cart {
  width: 22px;
  height: 22px;
  color: #ffffff;
}

.header__action-item--cart .header__cart-count {
  position: absolute;
  top: -7px;
  right: -17px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e8412f;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  box-shadow: 0 0 0 2px #ffffff;
}

.header__logo.dlb-header-logo {
  opacity: .3;
}

/* Kontaktblock (E-Mail + Telefon) */
.quickkontakt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
}

.quickkontakt i {
  width: 16px;
  margin-right: 6px;
  color: var(--hd-accent);
  text-align: center;
}

.quickkontakt .mail01 a {
  color: var(--hd-accent);
  font-weight: 600;
  text-decoration: none;
}

.quickkontakt .mail01 a:hover { text-decoration: underline; }

.quickkontakt .phone01 {
  color: #2b73a7;
  font-weight: 700;
}

/* Klickbare Mobile-Kontakt-Icons (Mail/Telefon) — sitzen im Action-Cluster
   neben dem Warenkorb. Auf dem Desktop versteckt; nur < 1000px sichtbar
   (Layout in der Media-Query weiter unten). */
.dlb-contact-icon { display: none; }

/* ----------------------------------------------------------------------------
   Desktop-Layout (>= 1000px): Logo | prominente Suche | Kontakt + Warenkorb.
   Mobile bleibt beim Theme-Standard (Burger / Such-Toggle).
   ------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .header__inner {
    display: flex !important;
    align-items: center;
    gap: 1.75rem;
    min-height: 88px;
    padding: 0.5rem 0;
  }

  /* Logo nicht schrumpfen lassen — Größe & Linksbündigkeit steuert
     ausschließlich .dlb-header-logo (siehe Block unten). */
  .header__logo {
    flex: 0 0 auto;
  }

  /* Suche prominent in der Mitte, wächst mit */
  .header__search-bar-wrapper {
    flex: 1 1 auto;
    max-width: 640px;
    margin: 0 auto;
  }

  /* Kontakt + Warenkorb rechts gruppieren */
  .quickkontakt { flex: 0 0 auto; }
  .header__action-list {
    flex: 0 0 auto;
    margin-left: 0.25rem;
  }
}

/* Sehr breite Screens: Header-Innenbreite begrenzen wie das Mega-Menü (1600px),
   damit Logo/Suche/Cart nicht zu weit auseinanderlaufen. */
@media (min-width: 1640px) {
  .header > .container { max-width: 1600px; }
}

/* ----------------------------------------------------------------------------
   Logo / Home-Link (.dlb-header-logo, sections/header.liquid → Startseite).
   Soll IMMER ganz links am Bildschirmrand sitzen und etwas kleiner sein.
   - Hebt die Theme-Mobile-Regeln auf, die das Logo zentrieren bzw. per margin
     nach rechts schieben (theme.css: .header__logo position:absolute;left:50%
     und margin:1px 35vw 1px auto auf < 640px).
   - Negativer linker Margin = Breite des Container-Gutters (mobil 20px /
     Desktop 40px) → bündig an den Viewport-Rand (bis 1600px; darüber rahmt
     der Shop ohnehin auf 1600px wie das Mega-Menü).
   - order:-1 = ganz vorne (vor Burger/Suche/Kontakt/Warenkorb).
   - clip-path:none + aspect-ratio:auto, sonst beschneidet/quetscht das Theme.
   ------------------------------------------------------------------------- */
.dlb-header-logo {
  clip-path: none !important;
  position: static !important;
  left: auto !important;
  transform: none !important;
  order: -1;
  margin: 0 0 0 calc(-1 * var(--mobile-container-gutter, 20px)) !important;
}
.dlb-header-logo .header__logo-image {
  width: auto !important;
  height: auto !important;
  max-width: 58px;                 /* etwas kleiner (vorher 70) */
  aspect-ratio: auto !important;   /* Theme erzwingt sonst 1/1 → würde verzerren */
  padding: 0;
}
@media (min-width: 641px) {
  .dlb-header-logo { margin-left: calc(-1 * var(--desktop-container-gutter, 40px)) !important; }
}
@media (min-width: 1000px) {
  .dlb-header-logo .header__logo-image { max-width: 72px; }  /* vorher 90 */
}

@media (max-width: 999px) {
.dlb-header-logo .header__logo-image {
  width: 55px !important;
  height: auto !important;
  max-width: 58px;                 /* etwas kleiner (vorher 70) */
}

/* ----------------------------------------------------------------------------
   Startseite (template-index): Header klebt beim Scrollen oben — als position:sticky
   an der SECTION #shopify-section-header (NICHT an .header!). Hintergrund: ein
   sticky-Element klebt nur innerhalb seines Eltern-Containers; .header steckt in
   #shopify-section-header (~138px) → würde nach 138px wegscrollen. Die Section liegt
   in .bodypic (seitenhoch) → klebt über die ganze Seite. Sticky bleibt im Fluss →
   <main> beginnt sauber darunter, KEIN body-padding-Hack, KEIN Translate, KEIN
   Überlapp/CLS. Spiegelt 1:1 das Critical-CSS (snippets/critical-css.liquid) →
   identische Werte = kein Layoutsprung beim Nachladen. Nur index; product/collection
   behalten ihr fixed-Verhalten. WICHTIG: overflow-x:clip (nicht hidden) am .bodypic,
   sonst bricht sticky.
   ------------------------------------------------------------------------- */
body.template-index #shopify-section-header { position: sticky !important; top: 0; z-index: 1000; }
body.template-index .header { position: static !important; }
body.template-index { padding-top: 0 !important; }
body.template-index,
body.template-index .bodypic { overflow-x: clip !important; overflow-y: visible !important; }
/* Hero braucht keinen Verschiebe-/Spacer-Hack mehr (Header liegt jetzt im Fluss) */
body.template-index .luftbild-hero-wrapper { transform: none !important; }

/* ----------------------------------------------------------------------------
   Mobiler Kopf (< 1000px): Burger LINKS · Logo MITTIG · Kontakt+Telefon RECHTS
   (Warenkorb rechts daneben). Die Suchleiste wird unter 1000px ausgeblendet —
   mobil läuft die Suche über das Menü / die Hero-Suche bzw. die
   .dlb-mobile-search-card unter dem Header (Unterseiten).
   Hebt die „Logo ganz links"-Desktopregeln von .dlb-header-logo auf (mit
   !important, da jene Basisregeln selbst !important sind).
   ------------------------------------------------------------------------- */
@media (max-width: 999px) {
  .header__inner {
    display: flex !important;
    align-items: center;
    position: relative;            /* Anker für das absolut zentrierte Logo */
    gap: 8px;
    min-height: 58px;
    /* WICHTIG: overflow:visible damit das Mobile-Menü-Dropdown nicht blockiert wird */
    overflow: visible !important;
  }

  /* Burger ganz links */
  .header__inner .h-01-navbar-mobile { order: 0; flex: 0 0 auto; }

  /* Logo echt mittig (absolut → unabhängig von den unterschiedlichen
     Breiten von Burger links und Kontakt rechts) */
  .dlb-header-logo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    order: 0 !important;
  }
  .dlb-header-logo .header__logo-image { max-width: 50px; }

  /* Suchleiste unter 1000px nicht anzeigen */
  .header__search-bar-wrapper { display: none !important; }

  /* Kontakt + Telefon rechtsbündig; margin-left:auto schiebt die Gruppe
     (Kontakt + danach Warenkorb) an den rechten Rand */
  /* Kontakt-Textblock mobil komplett aus — die Angaben erscheinen als Icons
     im Action-Cluster (siehe unten). */
  .quickkontakt { display: none !important; }

  /* Action-Cluster rechts: [Mail][Telefon][Warenkorb] als eine Einheit,
     rechtsbündig an den Bildschirmrand (margin-left:auto schiebt alles nach rechts). */
  .header__action-list {
    order: 9;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  /* etwaigen mobilen Such-Toggle im Cluster ausblenden (Suche < 1000px aus) */
  .header__action-list .header__action-item:has(a[data-action="toggle-search"]) { display: none; }

  /* Klickbare Kontakt-Icons (Tap-Flächen ~44px, passend zum Warenkorb-Button) */
  .dlb-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(43, 115, 167, .08);
    color: var(--hd-accent, #2b73a7);
    font-size: 17px;
    text-decoration: none;
    transition: background .15s ease, filter .15s ease;
  }
  .dlb-contact-icon:hover { background: rgba(43, 115, 167, .16); }
}