/** Shopify CDN: Minification failed

Line 797:0 All "@import" rules must come first

**/
/* ==========================================================================
   Kolter — Custom CSS Overrides

   Inhalt:
   1. Rich-Text Intro-Blöcke — asymmetrisches Padding
   2. Image-with-Text — 60 / 40 Split (Desktop)
   3. Produktkarten — Hover Fade-In (Desktop)
   4. Header-Navigation — Schriftgröße und Logo-Abstand
   5. Featured Collections — "Alle anzeigen" Button ausblenden
   6. Header — Hintergrundfarbe im Scrolled/Sticky Zustand
   7. Featured Blog — Titel-Link ausblenden
   8. Kooperationsseite — Kontaktformular als schwebender Kasten
   9. Kooperationsseite — Zwei Säulen differenzierte Hintergründe
  10. Kooperationsseite — Warum Kolter Karten mit Border
  11. Kooperationsseite — Section Border-Boxes
  12. Kooperationsseite — Multi-Column Redesign: koop-zwei-saeulen Farbflächen + koop-warum Cards
  13. Kooperationsseite — Inner-Div Overrides (Weg B): #section-id-* statt #shopify-section-*
  14. Kooperationsseite — koop-vorteile Rich-Text Fließtext
  15. Footer — Kolter Brand Redesign
  16. Kooperationsseite — Hero Headline Zeilenumbruch nach "Kolter."
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Rich-Text Intro-Blöcke
   Alle rich-text Sections dieser Homepage sind Kategorie-Einleitungen.
   Viel Padding oben (Kapitelwirkung), wenig Padding unten (direkte Anbindung
   an die folgende Collection-Section).
   Klasse: .fully-spaced-row--small (color_scheme: default + height: small)
   -------------------------------------------------------------------------- */
.section-rich-text .fully-spaced-row--small {
  padding-top: 90px;
  padding-bottom: 20px;
}

@media (max-width: 767px) {
  .section-rich-text .fully-spaced-row--small {
    padding-top: 60px;
    padding-bottom: 16px;
  }
}


/* --------------------------------------------------------------------------
   2. Image-with-Text: 60 / 40 Split (Desktop only)

   Im DOM liegt die Bildspalte immer als :first-child, die Textspalte als
   :last-child — unabhängig von image_position. column--order-push-desktop
   dreht nur die visuelle Reihenfolge per CSS order, nicht die DOM-Position.
   Greift daher korrekt für Bild-links (About Us) und Bild-rechts (MiG).
   -------------------------------------------------------------------------- */
@media (min-width: 990px) {
  .section-image-with-text .flexible-layout > .column--half:first-child {
    flex: 0 0 60%;
    max-width: 60%;
  }

  .section-image-with-text .flexible-layout > .column--half:last-child {
    flex: 0 0 40%;
    max-width: 40%;
  }
}


/* --------------------------------------------------------------------------
   3. Produktkarten — Hover Fade-In (nur Desktop, min-width: 990px)

   Standard: Produktname (.product-block__title) und Preis (.product-price--block)
   sind unsichtbar (opacity: 0). Bei Hover blenden sie mit 0.3s ein.
   Zusätzlich: subtiles Dunkel-Overlay auf dem Bild für Textlesbarkeit.
   Typografie: Cormorant Garamond für Namen, Jost für Preis.
   Mobile: Name und Preis immer sichtbar (keine Änderung).
   -------------------------------------------------------------------------- */
@media (min-width: 990px) {
  .product-block .product-block__title,
  .product-block .product-price--block {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .product-block:hover .product-block__title,
  .product-block:hover .product-price--block {
    opacity: 1;
  }

  /* Overlay: erscheint beim Hover subtil über dem Produktbild */
  .product-block .image-cont {
    position: relative;
  }

  .product-block .image-cont::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(26, 25, 23, 0);
    transition: background 0.3s ease;
    pointer-events: none;
  }

  .product-block:hover .image-cont::after {
    background: rgba(26, 25, 23, 0.12);
  }
}

/* Kolter Typografie für Produktkarten — gilt global (auch Mobile) */
.product-block__title {
  font-family: 'Cormorant Garamond', serif !important;
}

.product-price--block {
  font-family: 'Jost', sans-serif !important;
}


/* --------------------------------------------------------------------------
   4. Header-Navigation — Logo-Abstand (Desktop)

   .logo-area__middle margin erhöht von 20px auf 56px beidseitig,
   damit zwischen Logo und den Nav-Links mehr Atemraum entsteht.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .logo-area__middle {
    margin-left: 56px;
    margin-right: 56px;
  }
}


/* --------------------------------------------------------------------------
   5. Featured Collections — "Alle anzeigen" / "View all" Button ausblenden
   -------------------------------------------------------------------------- */
.view-all { display: none !important; }


/* --------------------------------------------------------------------------
   6. Header — Hintergrundfarbe im Scrolled/Sticky Zustand

   Theme setzt --header-bg-col auf Weiß → weißes Logo unsichtbar beim Scrollen.
   CSS-Variable auf .pageheader überschreiben: Kolter Sand (#E8DFD0).
   Der transparente Modus (Homepage-Top) bleibt unberührt — er setzt
   background: transparent direkt und ignoriert diese Variable.
   -------------------------------------------------------------------------- */
.pageheader {
  --header-bg-col: #FDFCF9;
}


/* --------------------------------------------------------------------------
   7. Featured Blog — Titel-Link ("Alle anzeigen") ausblenden

   .hometitle ist das h2 das direkt auf blog.url verlinkt — in dieser Section
   gibt es keinen separaten .view-all Button.
   -------------------------------------------------------------------------- */
.section-featured-blog .hometitle { display: none !important; }


/* --------------------------------------------------------------------------
   8. Kooperationsseite — Kontaktformular als schwebender Kasten

   contact-form.liquid: .container und .fully-padded-row--medium sind auf
   DEMSELBEN Element (max-width begrenzt). background/padding dort greift nur
   innerhalb der max-width — breite Screens zeigen transparente Ränder.
   FIX: background + padding auf den SECTION-WRAPPER (immer full-width).
   Container bekommt transparentes bg und kein vertikales Padding.
   -------------------------------------------------------------------------- */
#shopify-section-koop-kontakt {
  background: #E8DFD0 !important;
  padding-top: 80px !important;
  padding-bottom: 160px !important;
}

/* Horizontales Padding (.container-Klasse) bleibt; nur v-Padding entfernen */
#shopify-section-koop-kontakt .container {
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Form-Box: weißer Kasten mit Leinen-Border */
#shopify-section-koop-kontakt .reading-width.account-form {
  background: #FDFCF9 !important;
  border: 1px solid #C8B99A !important;
  padding: 48px 52px !important;
  max-width: 580px !important;
}

@media (max-width: 767px) {
  #shopify-section-koop-kontakt {
    padding-top: 48px !important;
    padding-bottom: 100px !important;
  }
  #shopify-section-koop-kontakt .reading-width.account-form {
    padding: 36px 24px !important;
  }
}


/* --------------------------------------------------------------------------
   9. Kooperationsseite — Zwei Säulen differenzierte Hintergründe

   Linke Säule (Kooperation): Kolter Weiß (#FDFCF9)
   Rechte Säule (Corporate Gifting): Kolter Sand (#E8DFD0)
   Trennlinie: 0.5px Leinen als border-right der linken Spalte
   ID #shopify-section-koop-zwei-saeulen greift nur auf diese Section.
   -------------------------------------------------------------------------- */
#shopify-section-koop-zwei-saeulen .fully-padded-row--medium {
  padding: 0 !important;
}
#shopify-section-koop-zwei-saeulen .container {
  max-width: 100% !important;
  padding: 0 !important;
}
#shopify-section-koop-zwei-saeulen .flexible-layout {
  gap: 0 !important;
  align-items: stretch;
  margin: 0 !important;
}
#shopify-section-koop-zwei-saeulen .flexible-layout .column:first-child {
  background: #FDFCF9;
  padding: 64px 80px !important;
  border-right: 1px solid #C8B99A;
}
#shopify-section-koop-zwei-saeulen .flexible-layout .column:last-child {
  background: #E8DFD0;
  padding: 64px 80px !important;
}

@media (max-width: 767px) {
  #shopify-section-koop-zwei-saeulen .flexible-layout .column:first-child,
  #shopify-section-koop-zwei-saeulen .flexible-layout .column:last-child {
    padding: 48px 24px !important;
    border-right: none;
  }
  #shopify-section-koop-zwei-saeulen .flexible-layout .column:first-child {
    border-bottom: 1px solid #C8B99A;
  }
}


/* --------------------------------------------------------------------------
  10. Kooperationsseite — Warum Kolter Karten mit Border

  Jede der 3 Spalten bekommt eine 1px Tinte-Border und großzügiges Innen-
  Padding. Gap zwischen den Karten für klare visuelle Trennung.
  -------------------------------------------------------------------------- */
#shopify-section-koop-warum .flexible-layout {
  gap: 20px !important;
}
#shopify-section-koop-warum .column.text-column {
  border: 1px solid #1A1917;
  padding: 40px !important;
}

@media (max-width: 767px) {
  #shopify-section-koop-warum .flexible-layout {
    gap: 16px !important;
  }
}


/* --------------------------------------------------------------------------
  11. Kooperationsseite — Section Border-Boxes

  koop-warum (multi-column, default scheme): multi-column.liquid rendert
  .fully-spaced-row--medium (margin, kein bg) > .container (max-width Content-Box).
  Border + weißer Hintergrund auf .container — der ist schon max-width zentriert.

  koop-timeline & koop-pakete (custom sections): Section-Wrapper hat kein
  eigenes max-width → dort auf 1200px einschränken. Custom-Section füllt ihn.
  -------------------------------------------------------------------------- */
#shopify-section-koop-warum .container {
  border: 1px solid #C8B99A;
  background: #FDFCF9;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

#shopify-section-koop-timeline,
#shopify-section-koop-pakete {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  border: 1px solid #C8B99A;
  overflow: hidden;
}

@media (max-width: 1248px) {
  #shopify-section-koop-timeline,
  #shopify-section-koop-pakete {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
}

@media (max-width: 767px) {
  #shopify-section-koop-timeline,
  #shopify-section-koop-pakete {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
}


/* --------------------------------------------------------------------------
  12. Kooperationsseite — Multi-Column Redesign

  DOM aus multi-column.liquid (Zeile 57–159):
    Shopify-Wrapper: #shopify-section-{id}
    Section-Div:     div.fully-spaced-row--medium  (color_scheme: default)
                     div.use-color-scheme--N fully-padded-row--medium  (color_scheme: 1/2)
    Flex-Container:  div.flexible-layout.flexible-layout--variable-columns
    Spalte (Block):  div.column.text-column.fade-in-up

  koop-zwei-saeulen color_scheme wurde auf "default" gesetzt (page.kooperation.json),
  da use-color-scheme--1 einen Theme-Hintergrund injiziert der Column-BGs überdeckt.
  Dadurch gilt nun fully-spaced-row--medium statt fully-padded-row--medium.

  koop-zwei-saeulen: zwei Farbflächen ohne Border, bündig, 48px Padding
  koop-warum:        drei Leinen-Border-Cards, 40px Padding, 32px Gap

  Spezifität: .column.text-column:first-child (1,4,0) übertrumpft
  Section-9-Regeln mit .column:first-child (1,3,0).
  -------------------------------------------------------------------------- */

/* --- koop-zwei-saeulen: Section-Hintergrund + Margin-Reset für fully-spaced-row --- */
#shopify-section-koop-zwei-saeulen {
  background: #FDFCF9 !important;
}
#shopify-section-koop-zwei-saeulen .fully-spaced-row--medium {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* --- koop-zwei-saeulen: Linke Spalte — Kolter Sand (#E8DFD0) --- */
#shopify-section-koop-zwei-saeulen .flexible-layout .column.text-column:first-child {
  background: #E8DFD0 !important;
  padding: 48px !important;
  border: none !important;
}

/* --- koop-zwei-saeulen: Rechte Spalte — Kolter Creme (#F5F0E8) --- */
#shopify-section-koop-zwei-saeulen .flexible-layout .column.text-column:last-child {
  background: #F5F0E8 !important;
  padding: 48px !important;
  border: none !important;
}

/* --- koop-warum: Section-Hintergrund --- */
#shopify-section-koop-warum {
  background: #FDFCF9 !important;
}

/* --- koop-warum: Spalten-Cards — Leinen-Border + Weiß-Hintergrund --- */
#shopify-section-koop-warum .column.text-column {
  border: 1px solid #C8B99A !important;
  background: #FDFCF9 !important;
}

/* --- koop-warum: 32px Gap Desktop --- */
#shopify-section-koop-warum .flexible-layout {
  gap: 32px !important;
}

@media (max-width: 767px) {
  /* koop-zwei-saeulen: Mobile — border-bottom aus Section 9 aufheben */
  #shopify-section-koop-zwei-saeulen .flexible-layout .column.text-column:first-child {
    border-bottom: none !important;
    padding: 48px 24px !important;
  }
  #shopify-section-koop-zwei-saeulen .flexible-layout .column.text-column:last-child {
    padding: 48px 24px !important;
  }

  /* koop-warum: 24px Gap Mobile */
  #shopify-section-koop-warum .flexible-layout {
    gap: 24px !important;
  }
}


/* --------------------------------------------------------------------------
  13. Kooperationsseite — Korrekte Wrapper-IDs (Weg B, final)

  Shopify rendert section.id als template--{id}__{key}, nicht als reinen Key.
  Tatsächliche Wrapper-IDs (aus Browser-Inspektion):
    koop-zwei-saeulen → #shopify-section-template--30121903161686__koop-zwei-saeulen
    koop-warum        → #shopify-section-template--30121903161686__koop-warum

  Inner-Div Background (.use-color-scheme--1) wird über den Wrapper adressiert —
  kein Bedarf den vollen #section-id-template--*-Pfad zu kennen.

  Kein :nth-of-type: zählt nach div-Typ, nicht nach Klasse — fragil.
  -------------------------------------------------------------------------- */

/* koop-zwei-saeulen: use-color-scheme--1 Background neutralisieren */
#shopify-section-template--30121903161686__koop-zwei-saeulen .use-color-scheme--1 {
  background: #FDFCF9 !important;
}

/* koop-zwei-saeulen: Linke Spalte — Kolter Sand */
#shopify-section-template--30121903161686__koop-zwei-saeulen .column.text-column:first-child {
  background: #E8DFD0 !important;
  padding: 48px !important;
}

/* koop-zwei-saeulen: Rechte Spalte — Kolter Creme */
#shopify-section-template--30121903161686__koop-zwei-saeulen .column.text-column:last-child {
  background: #F5F0E8 !important;
  padding: 48px !important;
}

/* koop-zwei-saeulen: Spalten bündig, gleiche Höhe */
#shopify-section-template--30121903161686__koop-zwei-saeulen .flexible-layout {
  gap: 0 !important;
  align-items: stretch !important;
}

/* koop-warum: Spalten-Cards — Leinen-Border, Weiß, Padding */
#shopify-section-template--30121903161686__koop-warum .column.text-column {
  border: 1px solid #C8B99A !important;
  background: #FDFCF9 !important;
  padding: 40px !important;
}

/* koop-warum: 48px Gap Desktop */
#shopify-section-template--30121903161686__koop-warum .flexible-layout {
  gap: 48px !important;
}

@media (max-width: 767px) {
  /* koop-zwei-saeulen: Mobile — 24px horizontales Padding */
  #shopify-section-template--30121903161686__koop-zwei-saeulen .column.text-column:first-child,
  #shopify-section-template--30121903161686__koop-zwei-saeulen .column.text-column:last-child {
    padding: 48px 24px !important;
  }
  /* koop-warum: 24px Gap Mobile */
  #shopify-section-template--30121903161686__koop-warum .flexible-layout {
    gap: 24px !important;
  }
}


/* --------------------------------------------------------------------------
  14. Kooperationsseite — koop-vorteile Rich-Text Fließtext
  -------------------------------------------------------------------------- */

/* Fließtext Kolter Stein */
#shopify-section-template--30121903161686__koop-vorteile .rte {
  color: #7A7570;
}

/* Sicherstellung min. 80px Padding (height: large) */
#shopify-section-template--30121903161686__koop-vorteile .fully-spaced-row--large {
  padding-top: 80px;
  padding-bottom: 80px;
}


/* --------------------------------------------------------------------------
  15. Footer — Kolter Brand Redesign
  Hintergrund: Kolter Leinen (#C8B99A)
  4 Spalten: Marke | Shop | Kolter World | Rechtliches
  Unterer Streifen: Copyright links, Zertifizierungs-Logos rechts
  -------------------------------------------------------------------------- */

/* Background */
.section-footer,
.section-footer .section-footer__row-container {
  background: #E8DFD0 !important;
}

/* Hide default theme elements */
.section-footer .section-footer__payment-icons,
.section-footer .section-footer__localization,
.section-footer .section-footer__lower-menu { display: none !important; }

/* ── Upper columns ── */
.section-footer .section-footer__row--blocks {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

/* Equal-width columns */
.section-footer .section-footer__row__col {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Column headings */
.section-footer .section-footer__title,
.section-footer .section-footer__title.h6 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #1A1917 !important;
  margin-bottom: 18px !important;
  line-height: 1.3 !important;
}

/* Menu lists */
.section-footer .section-footer__menu-block__menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* All navigation links */
.section-footer .section-footer__menu-block__menu a {
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: rgba(26, 25, 23, 0.7) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  line-height: 1.5 !important;
}
.section-footer .section-footer__menu-block__menu a:hover {
  color: #1A1917 !important;
}

/* Brand column: logo */
.section-footer .section-footer__text-block__image {
  display: block !important;
  margin-bottom: 14px !important;
}
.section-footer .section-footer__text-block__image img {
  max-height: 40px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

/* Markenclaim text */
.section-footer .section-footer__text.rte,
.section-footer .section-footer__text.rte p {
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: rgba(26, 25, 23, 0.7) !important;
  margin: 0 0 20px !important;
  line-height: 1.6 !important;
}

/* Social icons: Tinte at 70%, 100% on hover */
.section-footer .social a { opacity: 0.7 !important; transition: opacity 0.2s ease !important; }
.section-footer .social a:hover { opacity: 1 !important; }
.section-footer .social svg { fill: #1A1917 !important; }

/* ── Lower strip ── */
.section-footer .section-footer__row-lower {
  border-top: 0.5px solid #1A1917 !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  flex-direction: row-reverse !important; /* cert logos right col → right, copyright left col → left */
}

/* Left col of lower strip: cert logos */
.section-footer .section-footer__row-lower .section-footer__row__col:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}
.section-footer .section-footer__cert-logos {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.section-footer .section-footer__cert-logo {
  height: 32px !important;
  width: auto !important;
  opacity: 0.8 !important;
}

/* Right col of lower strip: copyright */
.section-footer .section-footer__row-lower .section-footer__row__col:last-child {
  display: flex !important;
  align-items: center !important;
}
.section-footer .copyright .copy,
.section-footer .copyright a {
  font-family: 'Jost', sans-serif !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  color: rgba(26, 25, 23, 0.7) !important;
  text-decoration: none !important;
}

/* Mobile */
@media (max-width: 767px) {
  .section-footer .section-footer__row--blocks {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .section-footer .mobile-disclosure__title {
    color: #1A1917 !important;
  }
  .section-footer .section-footer__row-lower {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
}



/* --------------------------------------------------------------------------
  17. Über-uns-Seite — Editorial Bildblöcke (uu-hero, uu-bild-1, uu-bild-2)

  full_width: false im JSON. Section-Wrapper spannt trotzdem volle Seitenbreite.
  max-width: 75% + margin: 60px auto zentriert die Sektion mit weißem Rand.

  HINWEIS: Shopify rendert Section-IDs auf page-Templates mit Prefix:
  #shopify-section-template--{template-id}__{key}
  Die IDs hier funktionieren als einfache Selektoren — falls nötig nach
  erster Browser-Inspektion auf das Template-Prefix-Schema anpassen
  (siehe Abschnitt 13 für Referenz-Muster).
  -------------------------------------------------------------------------- */

#shopify-section-uu-hero,
#shopify-section-uu-bild-1,
#shopify-section-uu-bild-2 {
  max-width: 75% !important;
  margin-top: 60px !important;
  margin-bottom: 60px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 767px) {
  #shopify-section-uu-hero,
  #shopify-section-uu-bild-1,
  #shopify-section-uu-bild-2 {
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}


/* --------------------------------------------------------------------------
  18. Über-uns-Seite — Hero-Text Subtext in Cormorant Garamond

  uu-hero-text rich-text: Heading ist bereits Cormorant Garamond (Theme-Default).
  Subtext (.rte p) auf Cormorant Garamond gesetzt — kursiv, etwas größer.
  -------------------------------------------------------------------------- */

#shopify-section-uu-hero-text .rte p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.04em;
  color: rgba(26, 25, 23, 0.75);
}


/* --------------------------------------------------------------------------
  19. Über-uns-Seite — Image Caption Balken

  .kolter-image-caption erscheint direkt unter jedem image-with-text-overlay
  wenn caption_left oder caption_right gesetzt sind.
  Flex space-between: links Cormorant Garamond 16px, rechts Jost 300 13px Stein.
  0.5px Linie in Kolter Leinen (#C8B99A) als border-top.
  -------------------------------------------------------------------------- */

.kolter-image-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-top: 0.5px solid #C8B99A;
}

.kolter-image-caption__left {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 400;
  color: #1A1917;
  letter-spacing: 0.02em;
}

.kolter-image-caption__right {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: #7A7570;
  letter-spacing: 0.02em;
}


/* --------------------------------------------------------------------------
  20. Über-uns-Seite — Zertifizierungen (uu-zertifikate) Karten-Stil

  3 Spalten mit 1px Tinte-Border, weißem Hintergrund (#FDFCF9), 40px Padding.
  Gap 32px zwischen den Karten.

  Doppelter Selektor: Template-Prefix-Variante (30121903161686 = Koop-Seite,
  muss nach Browser-Inspektion der Über-uns-Seite ggf. angepasst werden)
  + einfacher ID-Selektor als Fallback.
  -------------------------------------------------------------------------- */

#shopify-section-template--30121903161686__uu-zertifikate .column.text-column,
#shopify-section-uu-zertifikate .column.text-column {
  border: 1px solid #1A1917;
  padding: 40px;
  background: #FDFCF9;
}

#shopify-section-template--30121903161686__uu-zertifikate .flexible-layout,
#shopify-section-uu-zertifikate .flexible-layout {
  gap: 32px;
}


/* --------------------------------------------------------------------------
  21. Kontaktseite — Formular-Box (kont-formular)

  .reading-width.account-form ist die form-Box in contact-form.liquid.
  max-width: 580px + Leinen-Border + zentriert.
  Einfacher Selektor — nach Browser-Inspektion ggf. Template-Prefix ergänzen.
  -------------------------------------------------------------------------- */

#shopify-section-kont-formular .reading-width.account-form {
  max-width: 580px !important;
  border: 1px solid #C8B99A !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* --------------------------------------------------------------------------
  22. Kontaktseite — Team Grid (kont-team)

  3 Karten mit 1px Leinen-Border, Weiß-Hintergrund, 32px Innen-Padding.
  Gap 24px zwischen Karten. Fotos im Theme-Editor zuweisbar (enable_media: true).
  Einfacher Selektor — nach Browser-Inspektion ggf. Template-Prefix ergänzen.
  -------------------------------------------------------------------------- */

#shopify-section-template--30156914557270__kont-team .column.text-column {
  padding: 32px !important;
  background: #FDFCF9 !important;
}

#shopify-section-template--30156914557270__kont-team .flexible-layout {
  gap: 24px !important;
}

/* Text linksbündig, bündig mit linkem Bildrand, Breite = Bildbreite */
#shopify-section-template--30156914557270__kont-team .text-column__title,
#shopify-section-template--30156914557270__kont-team .text-column__text {
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

/* Bild und Text identische Breite innerhalb der Karte */
#shopify-section-template--30156914557270__kont-team .text-column__image {
  max-width: 100% !important;
  width: 100% !important;
}

/* ==========================================================================
  23. Startseite — Welcome Strip (home-welcome-strip)

  Vertikale Trennlinie 0.5px Leinen (#C8B99A) zwischen den 3 Spalten.
  Kein Border außen (nur :not(:last-child)).
  Auf Mobile: horizontale Trennlinie zwischen gestapelten Spalten.
  Selektor via [id*=] da Homepage-Template-Prefix nicht bekannt.
  -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  [id*="home-welcome-strip"] .flexible-layout .column:not(:last-child) {
    border-right: 0.5px solid #C8B99A;
  }
}

@media (max-width: 767px) {
  [id*="home-welcome-strip"] .flexible-layout .column:not(:last-child) {
    border-bottom: 0.5px solid #C8B99A;
  }
}

/* ==========================================================================
   KOLTER MEGA NAV
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Jost:wght@200;300;400&display=swap');

.kolter-nav { font-family: 'Jost', sans-serif; font-weight: 300; background: #FDFCF9; border-bottom: 0.5px solid #E8DFD0; position: relative; z-index: 200; -webkit-font-smoothing: antialiased; }
.kolter-nav__bar { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 40px; max-width: 1600px; margin: 0 auto; }
.kolter-nav__logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.kolter-nav__logo img { height: 28px; width: auto; display: block; }
.kolter-nav__logo-text { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 22px; letter-spacing: 0.2em; text-transform: uppercase; color: #1A1917; text-decoration: none; }
.kolter-nav__items { display: flex; align-items: stretch; height: 56px; gap: 0; list-style: none; margin: 0; padding: 0; }
.kolter-nav__item { position: static; display: flex; align-items: stretch; }
.kolter-nav__trigger { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #7A7570; padding: 0 16px; height: 100%; display: flex; align-items: center; cursor: pointer; border: none; background: none; text-decoration: none; white-space: nowrap; transition: color 0.2s ease; position: relative; }
.kolter-nav__trigger::after { content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 0.5px; background: #1A1917; transform: scaleX(0); transition: transform 0.25s ease; transform-origin: left; }
.kolter-nav__item:hover .kolter-nav__trigger, .kolter-nav__item--active .kolter-nav__trigger { color: #1A1917; }
.kolter-nav__item:hover .kolter-nav__trigger::after, .kolter-nav__item--active .kolter-nav__trigger::after { transform: scaleX(1); }
.kolter-nav__trigger--highlight { color: #1A1917; font-weight: 400; }
.kolter-nav__icons { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.kolter-nav__icon-btn { background: none; border: none; cursor: pointer; color: #7A7570; display: flex; align-items: center; padding: 4px; transition: color 0.2s ease; text-decoration: none; }
.kolter-nav__icon-btn:hover { color: #1A1917; }
.kolter-nav__icon-btn svg { width: 18px; height: 18px; }
.kolter-nav__cart-count { font-size: 10px; letter-spacing: 0.05em; color: #7A7570; min-width: 14px; }
.kolter-mega { position: absolute; top: 56px; left: 0; right: 0; background: #FDFCF9; border-top: 0.5px solid #E8DFD0; border-bottom: 0.5px solid #E8DFD0; padding: 48px 40px 44px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s; z-index: 199; }
.kolter-mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s; }
.kolter-mega__inner { display: flex; gap: 0; max-width: 1600px; margin: 0 auto; align-items: flex-start; }
.kolter-mega__col { padding: 0 40px 0 0; flex-shrink: 0; }
.kolter-mega__col:first-child { padding-left: 0; }
.kolter-mega__divider { width: 0.5px; background: #E8DFD0; align-self: stretch; flex-shrink: 0; margin-right: 40px; }
.kolter-mega__col-label { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase; color: #C8B99A; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.kolter-mega__col-label::after { content: ''; display: block; width: 24px; height: 0.5px; background: #C8B99A; flex-shrink: 0; }
.kolter-mega__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kolter-mega__link { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 13px; letter-spacing: 0.04em; color: #7A7570; text-decoration: none; display: block; transition: color 0.15s ease; line-height: 1.4; }
.kolter-mega__link:hover { color: #1A1917; }
.kolter-mega__link--parent { font-size: 13.5px; color: #1A1917; margin-bottom: 6px; }
.kolter-mega__link--muted { color: #D4CFC8; font-size: 11px; letter-spacing: 0.1em; }
.kolter-mega__link--muted:hover { color: #C8B99A; }
.kolter-mega__editorial { min-width: 200px; max-width: 240px; flex-shrink: 0; }
.kolter-mega__editorial-img { width: 100%; aspect-ratio: 4/3; background: #E8DFD0; margin-bottom: 16px; overflow: hidden; display: block; }
.kolter-mega__editorial-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.kolter-mega__editorial:hover .kolter-mega__editorial-img img { transform: scale(1.03); }
.kolter-mega__editorial-caption { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: italic; font-size: 16px; color: #1A1917; line-height: 1.45; margin-bottom: 6px; letter-spacing: 0.01em; }
.kolter-mega__editorial-sub { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #C8B99A; }
.kolter-nav__overlay { position: fixed; inset: 0; top: 56px; background: rgba(26,25,23,0.18); z-index: 198; opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0s linear 0.22s; }
.kolter-nav__overlay.is-open { opacity: 1; visibility: visible; transition: opacity 0.22s ease, visibility 0s linear 0s; }
@media (max-width: 1024px) { .kolter-nav__items, .kolter-mega { display: none; } }
@media (max-width: 767px) { .kolter-nav__bar { padding: 0 20px; height: 52px; } }

/* ==========================================================================
   KOLTER MEGA NAV — main-nav-links Override
   ========================================================================== */
.kolter-mega-panel { background: #FDFCF9 !important; border-top: 0.5px solid #E8DFD0 !important; padding: 0 !important; }
.kolter-mega-container { max-width: 100% !important; padding: 44px 60px !important; }
.kolter-mega-inner { display: flex; align-items: flex-start; gap: 0; width: 100%; }
.kolter-mega-cols { display: flex; gap: 0; flex: 1; align-items: flex-start; }
.kolter-mega-col { padding: 0 48px 0 0; flex-shrink: 0; min-width: 140px; }
.kolter-mega-col + .kolter-mega-col { padding-left: 48px; border-left: 0.5px solid #E8DFD0; }
.kolter-mega-col-label { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase; color: #1A1917; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.kolter-mega-col-label::after { content: ''; display: block; width: 20px; height: 0.5px; background: #1A1917; flex-shrink: 0; }
.kolter-mega-col-label-link { color: #1A1917 !important; text-decoration: none !important; font-family: 'Jost', sans-serif !important; font-weight: 400 !important; font-size: 8px !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; transition: color 0.2s ease !important; }
.kolter-mega-col-label-link:hover { color: #7A7570 !important; }
.kolter-mega-links { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.kolter-mega-link { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; font-size: 13px !important; letter-spacing: 0.04em !important; color: #7A7570 !important; text-decoration: none !important; display: block !important; transition: color 0.15s ease !important; line-height: 1.4 !important; white-space: nowrap !important; }
.kolter-mega-link:hover { color: #1A1917 !important; }
.kolter-mega-promo { flex-shrink: 0; margin-left: auto; padding-left: 48px; border-left: 0.5px solid #E8DFD0; min-width: 200px; max-width: 240px; }
.kolter-mega-promo-link { display: block; text-decoration: none !important; }
.kolter-mega-promo-img { width: 100%; aspect-ratio: 4/3; background: #E8DFD0; overflow: hidden; margin-bottom: 14px; }
.kolter-mega-promo-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.kolter-mega-promo-link:hover .kolter-mega-promo-img img { transform: scale(1.03); }
.kolter-mega-promo-caption { font-family: 'Cormorant Garamond', serif !important; font-weight: 300 !important; font-style: italic !important; font-size: 15px !important; color: #1A1917 !important; line-height: 1.45 !important; }
.kolter-tier-1 .navigation__link { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; font-size: 10px !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--transparent-header-text-color, #7A7570); }
.kolter-tier-1 .navigation__item--active > .navigation__link, .kolter-tier-1 .navigation__link:hover { color: #1A1917 !important; }
#kolter-nav, .kolter-nav__overlay { display: none !important; }

/* ==========================================================================
   KOLTER MEGA PANEL — Full Width Fix
   ========================================================================== */
#main-nav .navigation__item--with-children .kolter-mega-panel {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  top: var(--theme-header-height) !important;
  z-index: 200 !important;
}

/* ==========================================================================
   KOLTER MEGA PANEL — offsetParent Fix
   ========================================================================== */
#main-nav .navigation__tier-1 > .navigation__item {
  position: static !important;
}
#main-nav .navigation__tier-1 {
  position: static !important;
}
#main-nav .navigation--main {
  position: static !important;
}
#main-nav {
  position: relative !important;
}
#main-nav .navigation__item--with-children .kolter-mega-panel {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  top: 100% !important;
  z-index: 200 !important;
}

/* Kein Border zwischen Header und MegaPanel */
.section-header--nav-open {
  border-bottom: none !important;
}
.section-header--nav-open .pageheader {
  border-bottom: none !important;
}

/* Kolter MegaNav mehr-Link */
.kolter-mega-link--more { color: #C8B99A !important; font-size: 11px !important; letter-spacing: 0.1em !important; margin-top: 4px !important; }
.kolter-mega-link--more:hover { color: #1A1917 !important; }

/* Promo-Bild vollständig anzeigen */
.kolter-mega-promo-img { aspect-ratio: unset !important; background: transparent !important; }
.kolter-mega-promo-img img { object-fit: contain !important; height: auto !important; width: 100% !important; }

/* Nav border und shadow entfernen */
#main-nav { border-top: none !important; box-shadow: none !important; }

/* Transparenter Balken entfernen */
.section-header::after { display: none !important; }
.section-header::before { display: none !important; }

/* Announcement Bar Border entfernen */
.section-store-messages { border-bottom: none !important; }
.store-messages { border-bottom: none !important; }

/* Kein weisser Streifen über dem transparenten Header */
body { background-color: #1A1917 !important; }
#content { background-color: #FDFCF9; }

/* Dropdown unterer Abgrenzungsstrich */
.kolter-mega-panel { border-bottom: 0.5px solid #E8DFD0 !important; }

/* Nav Links Tinte wenn Dropdown offen */
.section-header--nav-open .kolter-tier-1 .navigation__link,
.section-header--nav-hover .kolter-tier-1 .navigation__link {
  color: #7A7570 !important;
}#shopify-section-popup { display: none !important; }

/* ═══ Produktkarten Fixes ═══ */
/* Quick buy ausblenden */
.product-block__quick-buy,
.quickbuy-button,
.quickbuy-toggle,
.quick-buy { display: none !important; }

/* Dots ausblenden */
.product-block__image-dots,
.image-dots,
.flickity-page-dots { display: none !important; }

/* Stock Badge ausblenden */
.product-block__stock-badge,
.cc-stock-badge { display: none !important; }

/* Shopify Theme Popup komplett ausblenden */
pop-up { display: none !important; }

/* ═══ Cookie Banner — Kolter Branding ═══ */
#shopify-pc-banner {
  background-color: #F5F0E8 !important;
  border-top: 0.5px solid #C8B99A !important;
  font-family: 'Jost', Arial, sans-serif !important;
}

#shopify-pc-banner p,
#shopify-pc-banner span,
#shopify-pc-banner a {
  color: #1A1917 !important;
  font-family: 'Jost', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
}

#shopify-pc-banner button {
  background-color: #1A1917 !important;
  color: #FDFCF9 !important;
  border-radius: 0 !important;
  font-family: 'Jost', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  border: none !important;
}

#shopify-pc-banner button.pc-btn-secondary {
  background-color: transparent !important;
  color: #1A1917 !important;
  border: 0.5px solid #1A1917 !important;
}