/** Shopify CDN: Minification failed

Line 935:19 Unexpected "*"

**/
/* ============================================================
   INHAG ELEKTRO-SHOP — Custom CSS für Shopify Dawn Theme
   ============================================================
   Einfügen unter: Online Store > Themes > Anpassen >
   Theme Settings > Custom CSS
   
   Farbpalette:
   - Navy (Primär):    #1B2A4A
   - Rot (Akzent):     #C62D1B
   - Rot dunkel:       #A52417
   - Hellgrau (BG):    #F7F8FA
   - Textgrau:         #4A5568
   - Weiß:             #FFFFFF
   ============================================================ */


/* ──────────────────────────────────────────────────────────────
   1. GLOBALE VARIABLEN & ROOT-OVERRIDES
   ────────────────────────────────────────────────────────────── */

:root {
  --inhag-navy: #1B2A4A;
  --inhag-red: #C62D1B;
  --inhag-red-dark: #A52417;
  --inhag-red-light: #FFF3F0;
  --inhag-bg: #F7F8FA;
  --inhag-text: #1B2A4A;
  --inhag-text-muted: #4A5568;
  --inhag-border: #E2E8F0;
  --inhag-white: #FFFFFF;
  --inhag-radius: 4px;
  --inhag-shadow-sm: 0 1px 3px rgba(27, 42, 74, 0.08);
  --inhag-shadow-md: 0 4px 12px rgba(27, 42, 74, 0.1);
  --inhag-shadow-lg: 0 8px 30px rgba(27, 42, 74, 0.12);
  --inhag-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ──────────────────────────────────────────────────────────────
   2. TYPOGRAFIE
   ────────────────────────────────────────────────────────────── */

/* Überschriften: straff, technisch, markant */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4,
.title,
.section-header__title {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-weight: 700;
  color: var(--inhag-navy);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Fließtext */
body,
.rte,
.product__description {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--inhag-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Kleinere Hilfs-Texte */
.caption,
.badge,
.price__sale .price-item--regular {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* ──────────────────────────────────────────────────────────────
   3. ANNOUNCEMENT BAR
   ────────────────────────────────────────────────────────────── */

.announcement-bar {
  background-color: var(--inhag-red) !important;
  color: var(--inhag-white) !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
  padding: 8px 0;
}

.announcement-bar__link,
.announcement-bar__message {
  color: var(--inhag-white) !important;
}

.announcement-bar a:hover {
  opacity: 0.9;
}


/* ──────────────────────────────────────────────────────────────
   4. HEADER & NAVIGATION
   ────────────────────────────────────────────────────────────── */

/* Sticky Header mit Navy-Hintergrund */
.header-wrapper {
  background-color: var(--inhag-navy) !important;
  box-shadow: var(--inhag-shadow-md);
  border-bottom: 2px solid var(--inhag-red);
}

.section-header {
  background-color: var(--inhag-navy) !important;
}

/* Navigation Links weiß */
.header__menu-item,
.header__menu-item span,
.header__menu-item .header__active-menu-item {
  color: var(--inhag-white) !important;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color var(--inhag-transition);
}

.header__menu-item:hover,
.header__menu-item:hover span {
  color: var(--inhag-red) !important;
}

/* Header Icons (Warenkorb, Suche, Account) */
.header__icon,
.header__icon .icon {
  color: var(--inhag-white) !important;
}

.header__icon:hover {
  color: var(--inhag-red) !important;
}

/* Warenkorb-Badge */
.cart-count-bubble {
  background-color: var(--inhag-red) !important;
  color: var(--inhag-white) !important;
  font-weight: 700;
}

/* Dropdown-Menü */
.header__submenu {
  background-color: var(--inhag-white);
  border: 1px solid var(--inhag-border);
  border-top: 3px solid var(--inhag-red);
  box-shadow: var(--inhag-shadow-lg);
  border-radius: 0 0 var(--inhag-radius) var(--inhag-radius);
}

.header__submenu .header__menu-item,
.header__submenu .header__menu-item span {
  color: var(--inhag-navy) !important;
  text-transform: none;
  font-size: 0.88rem;
}

.header__submenu .header__menu-item:hover,
.header__submenu .header__menu-item:hover span {
  color: var(--inhag-red) !important;
  background-color: var(--inhag-red-light);
}


/* ──────────────────────────────────────────────────────────────
   5. BUTTONS
   ────────────────────────────────────────────────────────────── */

/* Primäre Buttons */
.button--primary,
.shopify-payment-button__button,
button[name="add"],
.cart__submit-button {
  background-color: var(--inhag-red) !important;
  color: var(--inhag-white) !important;
  border: none !important;
  border-radius: var(--inhag-radius) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 14px 32px !important;
  transition: all var(--inhag-transition);
  box-shadow: var(--inhag-shadow-sm);
}

.button--primary:hover,
.shopify-payment-button__button:hover,
button[name="add"]:hover,
.cart__submit-button:hover {
  background-color: var(--inhag-red-dark) !important;
  box-shadow: var(--inhag-shadow-md);
  transform: translateY(-1px);
}

/* Sekundäre Buttons */
.button--secondary {
  background-color: transparent !important;
  color: var(--inhag-navy) !important;
  border: 2px solid var(--inhag-navy) !important;
  border-radius: var(--inhag-radius) !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: all var(--inhag-transition);
}

.button--secondary:hover {
  background-color: var(--inhag-navy) !important;
  color: var(--inhag-white) !important;
}


/* ──────────────────────────────────────────────────────────────
   6. HERO / IMAGE BANNER
   ────────────────────────────────────────────────────────────── */

.banner__content {
  background: linear-gradient(
    135deg,
    rgba(27, 42, 74, 0.92) 0%,
    rgba(27, 42, 74, 0.7) 100%
  ) !important;
  border-radius: var(--inhag-radius);
  padding: 40px 48px !important;
  backdrop-filter: blur(2px);
}

.banner__heading {
  color: var(--inhag-white) !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.banner__text,
.banner__text * {
  color: rgba(255, 255, 255, 0.9) !important;
}

.banner .button--primary {
  background-color: var(--inhag-red) !important;
  font-size: 0.95rem;
  padding: 16px 40px !important;
}


/* ──────────────────────────────────────────────────────────────
   7. PRODUKTKARTEN (Collection & Startseite)
   ────────────────────────────────────────────────────────────── */

.card-wrapper {
  border-radius: var(--inhag-radius);
  overflow: hidden;
  transition: all var(--inhag-transition);
}

.card-wrapper:hover {
  box-shadow: var(--inhag-shadow-lg);
  transform: translateY(-4px);
}

.card {
  border: 1px solid var(--inhag-border);
  border-radius: var(--inhag-radius);
  overflow: hidden;
  background: var(--inhag-white);
}

/* Produktbild-Container */
.card__media,
.media--square {
  background-color: var(--inhag-bg);
}

.card__media img {
  transition: transform 0.4s ease;
}

.card-wrapper:hover .card__media img {
  transform: scale(1.03);
}

/* Produkt-Infos */
.card__content {
  padding: 16px !important;
}

.card__heading,
.card__heading a {
  color: var(--inhag-navy) !important;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}

.card__heading a:hover {
  color: var(--inhag-red) !important;
}

/* Sale-Badge */
.badge--sale,
.badge[aria-hidden] {
  background-color: var(--inhag-red) !important;
  color: var(--inhag-white) !important;
  font-weight: 700;
  border-radius: var(--inhag-radius);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Sold-Out Badge */
.badge--soldout {
  background-color: var(--inhag-text-muted) !important;
  color: var(--inhag-white) !important;
}


/* ──────────────────────────────────────────────────────────────
   8. PREISE
   ────────────────────────────────────────────────────────────── */

.price-item--regular {
  color: var(--inhag-navy);
  font-weight: 700;
  font-size: 1.05rem;
}

.price-item--sale {
  color: var(--inhag-red) !important;
  font-weight: 700;
}

.price__sale .price-item--regular {
  text-decoration: line-through;
  color: var(--inhag-text-muted) !important;
  font-weight: 400;
}

/* Netto-Hinweis (Custom Liquid-Block) */
.price-net-hint {
  font-size: 0.75rem;
  color: var(--inhag-text-muted);
  margin-top: 2px;
}


/* ──────────────────────────────────────────────────────────────
   9. PRODUKTSEITE
   ────────────────────────────────────────────────────────────── */

/* SKU-Anzeige */
.product__sku {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8rem;
  color: var(--inhag-text-muted);
  background: var(--inhag-bg);
  padding: 3px 10px;
  border-radius: var(--inhag-radius);
  border: 1px solid var(--inhag-border);
  display: inline-block;
}

/* Produktbeschreibung */
.product__description .rte {
  line-height: 1.7;
  font-size: 0.95rem;
}

.product__description .rte h3,
.product__description .rte h4 {
  color: var(--inhag-navy);
  margin-top: 1.5em;
  padding-bottom: 0.3em;
  border-bottom: 2px solid var(--inhag-red);
  display: inline-block;
}

/* Collapsible Rows / Tabs für technische Details */
.product__accordion .accordion__title,
.collapsible-row .summary__title {
  font-weight: 600;
  color: var(--inhag-navy);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.product__accordion .accordion__content,
.collapsible-row .accordion__content {
  color: var(--inhag-text);
  font-size: 0.9rem;
  line-height: 1.7;
}

.product__accordion details[open] .accordion__title,
.collapsible-row details[open] .summary__title {
  color: var(--inhag-red);
}

details summary {
  border-bottom: 1px solid var(--inhag-border);
  padding: 16px 0;
  transition: color var(--inhag-transition);
}

details summary:hover {
  color: var(--inhag-red);
}

/* Mengen-Selector */
.quantity__input {
  border: 2px solid var(--inhag-border) !important;
  border-radius: var(--inhag-radius) !important;
  font-weight: 600;
  color: var(--inhag-navy);
}

.quantity__button:hover {
  color: var(--inhag-red);
}


/* ──────────────────────────────────────────────────────────────
   10. KOLLEKTION-SEITE & FILTER
   ────────────────────────────────────────────────────────────── */

/* Kollektion-Header */
.collection-hero__title {
  color: var(--inhag-navy);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.collection-hero__description {
  color: var(--inhag-text-muted);
  max-width: 680px;
}

/* Filter-Sidebar */
.facets__label,
.facets__heading {
  font-weight: 600;
  color: var(--inhag-navy);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.facets__summary .facets__selected {
  color: var(--inhag-red);
  font-weight: 600;
}

/* Aktiver Filter-Chip */
.active-facets__button {
  background-color: var(--inhag-red-light) !important;
  color: var(--inhag-red) !important;
  border: 1px solid var(--inhag-red) !important;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.8rem;
}

/* Sortierung */
.facet-filters__sort select {
  border: 2px solid var(--inhag-border);
  border-radius: var(--inhag-radius);
  font-weight: 500;
  color: var(--inhag-navy);
}


/* ──────────────────────────────────────────────────────────────
   11. KOLLEKTIONS-KACHELN (Collection List)
   ────────────────────────────────────────────────────────────── */

.collection-list__item .card {
  border: none;
  overflow: hidden;
  position: relative;
}

.collection-list__item .card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--inhag-red);
  transform: scaleX(0);
  transition: transform var(--inhag-transition);
}

.collection-list__item .card:hover::after {
  transform: scaleX(1);
}

.collection-list__item .card__heading {
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* ──────────────────────────────────────────────────────────────
   12. TRUST-SEKTION / IMAGE WITH TEXT
   ────────────────────────────────────────────────────────────── */

.image-with-text {
  background-color: var(--inhag-bg);
}

.image-with-text__heading {
  color: var(--inhag-navy);
  position: relative;
  padding-bottom: 12px;
}

.image-with-text__heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--inhag-red);
}


/* ──────────────────────────────────────────────────────────────
   13. RICH TEXT-SEKTIONEN
   ────────────────────────────────────────────────────────────── */

.rich-text__heading {
  color: var(--inhag-navy);
}

.rich-text__text {
  color: var(--inhag-text-muted);
  max-width: 720px;
  margin: 0 auto;
}


/* ──────────────────────────────────────────────────────────────
   14. FOOTER
   ────────────────────────────────────────────────────────────── */

.footer {
  background-color: var(--inhag-navy) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-top: 4px solid var(--inhag-red);
}

.footer__title,
.footer h2,
.footer h3 {
  color: var(--inhag-white) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

.footer a,
.footer__list-item a {
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color var(--inhag-transition);
}

.footer a:hover,
.footer__list-item a:hover {
  color: var(--inhag-white) !important;
}

/* Footer Newsletter */
.footer .newsletter-form__field-wrapper {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--inhag-radius);
  overflow: hidden;
}

.footer .newsletter-form__field-wrapper input {
  background: rgba(255, 255, 255, 0.08);
  color: var(--inhag-white);
}

.footer .newsletter-form__button {
  background-color: var(--inhag-red) !important;
  color: var(--inhag-white) !important;
}

/* Copyright-Zeile */
.footer__content-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.footer__copyright,
.footer__copyright a {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 0.75rem;
}

/* Payment Icons im Footer */
.footer__payment .payment-icon {
  opacity: 0.7;
  transition: opacity var(--inhag-transition);
}

.footer__payment .payment-icon:hover {
  opacity: 1;
}


/* ──────────────────────────────────────────────────────────────
   15. WARENKORB (Cart Drawer / Cart Page)
   ────────────────────────────────────────────────────────────── */

.cart-drawer__overlay {
  background: rgba(27, 42, 74, 0.5);
}

.cart-item__name {
  color: var(--inhag-navy);
  font-weight: 600;
}

.cart__ctas .button--primary {
  width: 100%;
}

/* Leerer Warenkorb */
.cart__empty-text {
  color: var(--inhag-text-muted);
}


/* ──────────────────────────────────────────────────────────────
   16. SUCHE
   ────────────────────────────────────────────────────────────── */

.search__input {
  border: 2px solid var(--inhag-border) !important;
  border-radius: var(--inhag-radius) !important;
  font-size: 1rem;
  color: var(--inhag-navy);
  transition: border-color var(--inhag-transition);
}

.search__input:focus {
  border-color: var(--inhag-red) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(198, 45, 27, 0.1);
}

.search__button {
  color: var(--inhag-navy) !important;
}

.predictive-search__result-group .predictive-search__heading {
  color: var(--inhag-red);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}


/* ──────────────────────────────────────────────────────────────
   17. NEWSLETTER-SEKTION
   ────────────────────────────────────────────────────────────── */

.newsletter {
  background-color: var(--inhag-bg);
}

.newsletter__heading {
  color: var(--inhag-navy);
}

.newsletter .field__input {
  border: 2px solid var(--inhag-border);
  border-radius: var(--inhag-radius);
}

.newsletter .field__input:focus {
  border-color: var(--inhag-red);
}

.newsletter .newsletter__button {
  background-color: var(--inhag-red) !important;
  color: var(--inhag-white) !important;
  border-radius: var(--inhag-radius) !important;
}


/* ──────────────────────────────────────────────────────────────
   18. BREADCRUMBS & PAGINATION
   ────────────────────────────────────────────────────────────── */

.breadcrumbs a {
  color: var(--inhag-text-muted);
  transition: color var(--inhag-transition);
}

.breadcrumbs a:hover {
  color: var(--inhag-red);
}

.pagination__item--current {
  background-color: var(--inhag-red) !important;
  color: var(--inhag-white) !important;
  border-radius: var(--inhag-radius);
}

.pagination__item a:hover {
  background-color: var(--inhag-red-light);
  color: var(--inhag-red);
}


/* ──────────────────────────────────────────────────────────────
   19. LINKS & GENERELLE AKZENTE
   ────────────────────────────────────────────────────────────── */

a {
  color: var(--inhag-red);
  transition: color var(--inhag-transition);
}

a:hover {
  color: var(--inhag-red-dark);
}

/* Selection-Farbe */
::selection {
  background-color: rgba(198, 45, 27, 0.15);
  color: var(--inhag-navy);
}


/* ──────────────────────────────────────────────────────────────
   20. CUSTOM B2B-ELEMENTE
   ────────────────────────────────────────────────────────────── */

/* Netto-Preis-Badge (als Custom Liquid Block nutzbar) */
.inhag-netto-badge {
  display: inline-block;
  background: var(--inhag-navy);
  color: var(--inhag-white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: 6px;
}

/* Technische Daten-Tabelle (in Produktbeschreibung) */
.rte table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.9rem;
}

.rte table th {
  background-color: var(--inhag-navy);
  color: var(--inhag-white);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rte table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--inhag-border);
  color: var(--inhag-text);
}

.rte table tr:nth-child(even) td {
  background-color: var(--inhag-bg);
}

.rte table tr:hover td {
  background-color: var(--inhag-red-light);
}

/* Schutzart-Badge (nutzbar in Metafields/Custom Liquid) */
.inhag-ip-badge {
  display: inline-block;
  background: var(--inhag-bg);
  border: 1px solid var(--inhag-border);
  color: var(--inhag-navy);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 4px 12px;
  border-radius: 20px;
  font-family: 'JetBrains Mono', monospace;
}

/* Ampere-Indikator */
.inhag-ampere {
  display: inline-block;
  background: var(--inhag-red);
  color: var(--inhag-white);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
}

/* Anfrage-Button (für Produkte ohne Preis) */
.inhag-anfrage-btn {
  background: var(--inhag-navy) !important;
  color: var(--inhag-white) !important;
  padding: 14px 32px;
  border: none;
  border-radius: var(--inhag-radius);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--inhag-transition);
}

.inhag-anfrage-btn:hover {
  background: var(--inhag-red) !important;
  transform: translateY(-1px);
  box-shadow: var(--inhag-shadow-md);
}


/* ──────────────────────────────────────────────────────────────
   21. RESPONSIVE ANPASSUNGEN
   ────────────────────────────────────────────────────────────── */

/* Tablets */
@media screen and (max-width: 989px) {
  /* Mobile Menu */
  .menu-drawer {
    background-color: var(--inhag-navy) !important;
  }

  .menu-drawer__menu-item,
  .menu-drawer__menu-item span {
    color: var(--inhag-white) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 500;
  }

  .menu-drawer__close-button {
    color: var(--inhag-white) !important;
  }

  /* Submenu im Mobile Drawer */
  .menu-drawer__submenu {
    background-color: rgba(255, 255, 255, 0.05) !important;
  }

  .banner__heading {
    font-size: 1.8rem !important;
  }

  .banner__content {
    padding: 24px 28px !important;
  }
}

/* Smartphones */
@media screen and (max-width: 749px) {
  .banner__heading {
    font-size: 1.5rem !important;
  }

  .button--primary,
  button[name="add"] {
    padding: 12px 24px !important;
    font-size: 0.82rem;
    width: 100%;
  }

  /* Produktkarten etwas enger */
  .card__content {
    padding: 12px !important;
  }

  .card__heading,
  .card__heading a {
    font-size: 0.88rem;
  }

  /* Sticky Add-to-Cart auf Mobile */
  .product-form__buttons {
    position: sticky;
    bottom: 0;
    background: var(--inhag-white);
    padding: 12px 0;
    z-index: 10;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  }
}


/* ──────────────────────────────────────────────────────────────
   22. ANIMATIONEN & MICRO-INTERACTIONS
   ────────────────────────────────────────────────────────────── */

/* Sanftes Einblenden für Sektionen */
@keyframes inhagFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-template--*:not(.shopify-section--header) {
  animation: inhagFadeUp 0.5s ease-out;
}

/* Button-Ripple-Effekt */
.button--primary:active,
button[name="add"]:active {
  transform: scale(0.97);
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}


/* ──────────────────────────────────────────────────────────────
   23. PRINT-STYLES (für Bestellübersichten)
   ────────────────────────────────────────────────────────────── */

@media print {
  .header-wrapper,
  .announcement-bar,
  .footer,
  .newsletter {
    display: none !important;
  }

  body {
    color: #000 !important;
    font-size: 11pt;
  }

  a {
    color: #000 !important;
    text-decoration: underline;
  }
}