/** Shopify CDN: Minification failed

Line 3317:0 Unexpected "@media"

**/
/* ============================================ */
/* Section 0 — TYPOGRAFIE-SYSTEM v1            */
/* EB Garamond + DM Sans          */
/* Stand: Maerz 2026                           */
/* ============================================ */

/* CSS-Variablen */
:root {
  --font-display: 'EB Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --text-h1: clamp(2rem, 3.2vw, 3rem);
  --text-h2: clamp(1.375rem, 2vw, 1.875rem);
  --text-price: 1.5rem;
  --text-body: 15px;
  --text-ui: 14px;
  --text-label: 12px;
  --weight-display: 500;
  --weight-body: 400;
  --weight-ui: 500;
}

/* Body-Font als globale Basis */
body {
  font-family: var(--font-body) !important;
  font-size: var(--text-body) !important;
  font-weight: var(--weight-body) !important;
  line-height: 1.72 !important;
}

/* === TYPOGRAFIE-SYSTEM v1 (EB Garamond + DM Sans) === */

/* Display-Font auf alle Theme-Heading-Klassen anwenden */
.title-lg,
.title-md,
.title-sm,
h1, h2 {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-weight: 500 !important;
}

/* Groessen-Skala: Startseite */
.title-lg { font-size: clamp(2rem, 3.2vw, 3rem) !important; line-height: 1.1 !important; }
.title-md { font-size: clamp(1.375rem, 2vw, 1.875rem) !important; line-height: 1.2 !important; }
.title-sm { font-size: clamp(1.125rem, 1.5vw, 1.375rem) !important; line-height: 1.25 !important; }

/* Basis H2/H3 (Sektionen ohne Theme-Klasse) */
h2 { font-size: clamp(1.375rem, 2vw, 1.875rem) !important; }
h3 {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
}
h4 {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
}

/* Produkt-Titelklassen (Produktseite) */
.product-title-sm { font-size: clamp(1.25rem, 1.8vw, 1.625rem) !important; }
.product-title-md { font-size: clamp(1.75rem, 2.5vw, 2.25rem) !important; }
.product-title-lg { font-size: clamp(2rem, 3.2vw, 3rem) !important; }

/* Mobile: Produkttitel */
@media screen and (max-width: 767px) {
  .mobile\:product-title-sm,
  .mobile\:product-title-sm .word { font-size: 1.25rem !important; line-height: 1.2; }
  .mobile\:product-title-md,
  .mobile\:product-title-md .word { font-size: 1.5rem !important; line-height: 1.2; }
  .mobile\:product-title-lg,
  .mobile\:product-title-lg .word { font-size: 1.75rem !important; line-height: 1.2; }
}

/* Preis */
.product__price {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
}

/* Buttons, Navigation: DM Sans sicherstellen */
button, .btn, .button, nav, .navigation {
  font-family: 'DM Sans', system-ui, sans-serif !important;
}

/* MOBILE FIX: Lange Produktnamen — EB Garamond bricht sauber */
@media screen and (max-width: 767px) {
  h1,
  .product-title-lg,
  .product-title-md,
  .mobile\:product-title-lg,
  .mobile\:product-title-md {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* Trust-Bar + Column-Titles: DM Sans erzwingen (ueberschreibt Theme Jost) */
/* Titel: 600 (fett, Blickfang). Text: 400 (normal, Detail). */
[id*="trust_bar"] .column__title,
[id*="trust_bar"] p,
.text-with-icons .column__title,
.text-with-icons p {
  font-family: 'DM Sans', system-ui, sans-serif !important;
}
[id*="trust_bar"] p,
.text-with-icons p,
.text-with-icons .column__text {
  font-weight: 400 !important;
}
[id*="trust_bar"] .column__title,
.text-with-icons .column__title {
  font-weight: 600 !important;
}

/* H1/H2 Weight-Fix: 500 fuer kraeftigere EB-Garamond-Headings */
h1, h2,
.title-lg, .title-md, .title-sm {
  font-weight: 400 !important;
}

/* Mobile font-weight 700: verschoben nach Zeile ~264 (nach allen Desktop-500-Regeln) */

/* === ENDE TYPOGRAFIE-SYSTEM v1 === */

/* CUSTOM OVERRIDES v8 - 2026-02-23 */

/* 5. Testimonial-Quote */
.testimonial blockquote, .testimonial blockquote p, .rte blockquote, .rte blockquote p { font-size: clamp(1.125rem, 1.5vw, 1.375rem) !important; }
.testimonial blockquote cite, .rte blockquote cite { font-size: clamp(0.8125rem, 1vw, 0.875rem) !important; }
/* 6. CSS-Variablen-Overrides */
:root { --text-h2: 1.375rem !important; --text-h3: 1.25rem !important; --text-h4: 1.125rem !important; --fluid-xl-to-3xl: clamp(1rem, 1.3vw, 1.25rem) !important; }
/* 7. Produktseite: Preis */
.product__price { font-size: clamp(1.125rem, 1.5vw, 1.5rem) !important; }
/* 8. Layout-Fixes (Startseite) */
@media (min-width: 768px) {
  #shopify-section-template--28742975488331__slideshow .absolute { bottom: auto !important; top: 50% !important; transform: translateY(-50%) !important; }
  #shopify-section-template--28742975488331__slideshow .slideshow-word { flex-direction: column !important; align-items: flex-start !important; gap: 1.25rem !important; }
}
.tab-list { justify-content: center !important; }
.tab-list > div[role="tablist"] { justify-content: center; }
#shopify-section-template--28742975488331__trust_bar .column__heading { font-size: 0.95rem !important; }
.footer-group .column__heading { font-size: clamp(0.875rem, 1.1vw, 1rem) !important; }

/* 9. Produktkacheln: Titel deutlich groesser als Preis */
.product-card .product-card__title,
.product-card__title {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
}

/* 13. Hero-Banner: Text links halten, nicht ueber Gesicht laufen */
/* Korrektur: .banner__box liegt NICHT in .slideshow, sondern in .slideshow-content */
.slideshow-content .banner__box,
.slideshow-content .banner__box--medium,
.slideshow-content .banner__box--large {
  max-width: 50% !important;
}
@media screen and (max-width: 767px) {
  .slideshow-content .banner__box,
  .slideshow-content .banner__box--medium,
  .slideshow-content .banner__box--large {
    max-width: 85% !important;
  }
}

/* 14. Quick-Add Buttons: Icons konsistent auf Desktop + Mobile */
/* Alle Icons (eye + cart) auch auf Desktop zeigen */
.quick-add .btn-text svg.md\:hidden,
.quick-add .btn-text .md\:hidden {
  display: inline-flex !important;
}
/* Icon-Text Abstand: 8px (0.5rem), vertikal zentriert */
.quick-add .button .btn-text {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
/* Icon-Groesse konsistent (18px) */
.quick-add .button .btn-text svg {
  width: 1.125rem !important;
  height: 1.125rem !important;
  flex-shrink: 0 !important;
}
/* Varianten-Buttons gleiche Mindestgroesse wie Haupt-Button */
.quick-add .swatches--round .button {
  min-height: 2.75rem;
  padding-inline: 1rem;
}

/* 15. Quick-View Modal: Scrollbar komplett ausblenden */
/* Ursache: theme.css setzt .quick-view .product__info { scrollbar-width: thin; overflow-y: auto } */
.quick-view .product__info {
  scrollbar-width: none !important;
}
.quick-view .product__info::-webkit-scrollbar {
  display: none !important;
}
.quick-view .drawer__content {
  scrollbar-width: none !important;
}
.quick-view .drawer__content::-webkit-scrollbar {
  display: none !important;
}
/* Social-Sharing im Quick-View-Modal komplett ausblenden */
.quick-view .social-sharing,
.quick-view [class*="social-sharing"],
.quick-view share-button,
.quick-view .sm\:flex:has(.social-sharing) {
  display: none !important;
}

/* 16. (entfernt - in Section 14 konsolidiert) */

/* 12. FAQ & Transparenz-Sektion: Schriftgroessen angleichen */
/* Beide Sektions-Ueberschriften identisch: title-md */
.section .section-heading .heading.title-md {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: clamp(1.375rem, 2vw, 1.875rem) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
}
/* Akkordeon-Item-Ueberschriften in beiden Sektionen angleichen */
.with-border .accordion .details__summary span,
.with-border .faq .accordion .details__summary span,
.specifications.with-border .accordion .details__summary span {
  font-size: clamp(1rem, 1.2vw, 1.125rem) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}
/* FAQ Text-Blocks (nicht-klappbare Eintraege) gleich gross */
.with-border .accordion--text .heading {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: clamp(1rem, 1.2vw, 1.125rem) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

/* Mobile: Ueberschriften kraeftiger (700) — MUSS nach allen Desktop-500-Regeln stehen */
@media screen and (max-width: 767px) {
  h1, h2,
  .title-lg, .title-md, .title-sm,
  .heading.title-md, .heading.title-lg,
  .title-md .word, .title-lg .word,
  .section .section-heading .heading.title-md,
  .section .heading.title-md,
  .with-border .accordion--text .heading {
    font-weight: 400 !important;
  }
}

/* Mobile: Produktkarten-Titel kleiner (Wettbewerber-Median: 14px) */
/* Paula's Choice 16px, SkinCeuticals 14px, Sephora 13px → Median 14px */
@media screen and (max-width: 767px) {
  .product-card .product-card__title,
  .product-card__title {
    font-size: 0.875rem !important;
  }
}

/* ============================================
   SECTION 25: Preishierarchie Produktkacheln
   Drei Gewichtsstufen: Preis > Menge > Grundpreis
   ============================================ */

/* Preis-Container: Elemente umbrechen statt Einzeiler */
.product-card .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4em;
}

/* Stufe 1: Hauptpreis — dominant, fett, dunkel */
.product-card .price__regular {
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

/* Stufe 2: Fuellmenge (z.B. "50 ml") — dezente Annotation inline */
.product-card .product-quantity {
  display: none !important;
}

/* Stufe 3: Grundpreis (z.B. "3.740,00€/l") — Pflichtinfo, zurueckgetreten */
.product-card .unit-price {
  display: block !important;
  width: 100%;
  font-size: 0.72rem !important;
  color: #555 !important;
  font-weight: 400 !important;
  margin-top: 6px;
}

/* ===== MOBILE OPTIMIERUNGEN ===== */

/* 17. Trust-Bar unter Header: kompakter auf Mobile */
/* Statt 4 grosse Karten mit Icons -> einzeilige kompakte Darstellung */
@media screen and (max-width: 767px) {
  /* Padding der Trust-Bar-Sektion reduzieren */
  .section:has(> .page-width > .text-with-icons.without-background) {
    --section-padding-top: 12px !important;
    --section-padding-bottom: 12px !important;
  }
  /* Grid: 2x2 statt 1-spaltig, enger zusammen */
  .text-with-icons.without-background {
    gap: 0.5rem !important;
    grid-template-columns: 1fr 1fr !important;
  }
  /* Einzelne Spalte: horizontal, kompakt */
  .text-with-icons.without-background .column {
    flex-direction: row !important;
    gap: 0.375rem !important;
    align-items: center !important;
    text-align: left !important;
    padding: 0.25rem 0 !important;
  }
  /* Icon verkleinern */
  .text-with-icons.without-background .column__icon {
    flex-shrink: 0;
  }
  .text-with-icons.without-background .column__icon svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }
  /* Titel kleiner */
  .text-with-icons.without-background .column__title {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
  }
  /* Beschreibungstext auf Mobile ausblenden (nur Titel zeigen) */
  .text-with-icons.without-background .column__text {
    display: none !important;
  }
}

/* 19. Kategorie-Scrolling: bessere Sichtbarkeit auf Mobile */
/* Teilweise sichtbare naechste Karte als visueller Scroll-Hinweis */
@media screen and (max-width: 767px) {
  /* Collection-List Slider: letzte Karte teilweise sichtbar lassen */
  .slider--tablet .card-grid {
    --slider-item-width: 42vw !important;
  }
  /* Sanfter Gradient am rechten Rand als Scroll-Indikator */
  /* Nur auf Collection-Cards, nicht auf Produktbild-Slider (PDP) */
  .card-grid .slider--tablet,
  .collection-list .slider--tablet {
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }
  /* Gradient aufheben wenn komplett gescrollt */
  .card-grid .slider--tablet:not([data-at-start="true"]),
  .collection-list .slider--tablet:not([data-at-start="true"]) {
    -webkit-mask-image: linear-gradient(to left, black 85%, transparent 100%);
    mask-image: linear-gradient(to left, black 85%, transparent 100%);
  }
}

/* 20. Scroll-Animationen auf Mobile deaktivieren */
/* Medizinische Hautpflege = zielgerichtete Nutzer, Animationen verlangsamen */
@media screen and (max-width: 767px) {
  /* motion-list Stagger-Animationen deaktivieren */
  motion-list,
  motion-list > * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  /* Generelle Appear-Animationen deaktivieren */
  .js .js-invisible {
    visibility: visible !important;
    opacity: 1 !important;
  }
  [data-motion],
  [data-motion] > * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* =============================================
   SECTION 21: Announcement Bar – einzeilig, kompakt
   Desktop: statisch nebeneinander | Mobile: Marquee-Scroll
   ============================================= */

/* Basis: Schrift + einzeilig */
.announcement-text,
.announcement__content,
.announcement__content .rte,
.announcement__content span {
  font-size: 15px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}
@media screen and (max-width: 767px) {
  .announcement-text,
  .announcement__content,
  .announcement__content .rte,
  .announcement__content span {
    font-size: 13px !important;
  }
}
/* Bar-Hoehe reduzieren */
.topbar-section {
  max-height: 36px !important;
}
.announcement-bar {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
}
/* Icons kleiner (14px) */
.topbar .announcement-icon svg,
.announcement-bar .announcement-icon svg {
  width: 14px !important;
  height: 14px !important;
}
/* Icons auch auf Mobile anzeigen */
.announcement-icon.hidden.md\:block,
.announcement-icon {
  display: inline-flex !important;
}
/* Gap zwischen Icon und Text reduzieren */
.announcement__content.flex {
  gap: 6px !important;
}

/* Desktop: statisch, gleichmaessig verteilt (>=768px) */
@media screen and (min-width: 768px) {
  .topbar .scrolling-text,
  .topbar marquee-element,
  .topbar .marquee {
    animation: none !important;
    -webkit-animation: none !important;
  }
  marquee-element.scrolling-text {
    animation: none !important;
    overflow: visible !important;
  }
  .marquee {
    animation: none !important;
    white-space: nowrap !important;
    justify-content: space-evenly !important;
    width: 100% !important;
  }
  .scrolling-text__item {
    flex: 1 !important;
    justify-content: center !important;
  }
  /* Duplikate ausblenden (Marquee klont Items) */
  .marquee + .marquee {
    display: none !important;
  }
  /* Punkt-Trenner ausblenden */
  .marquee.with-dot .scrolling-text__item::before {
    display: none !important;
  }
}

/* Mobile: Marquee-Scroll aktiv (< 768px) */
@media screen and (max-width: 767px) {
  /* Marquee-Animation beibehalten (Theme-Default) */
  marquee-element.scrolling-text {
    overflow: hidden !important;
  }
  /* Items nicht stretchen, natuerliche Breite */
  .scrolling-text__item {
    flex: 0 0 auto !important;
  }
  /* Gap zwischen Marquee-Items */
  .scrolling-text__item.with-text {
    gap: 16px !important;
  }
}

/* =============================================
   SECTION 22: Cart-Drawer – Produktanzahl im Titel ausblenden
   ============================================= */
.drawer cart-count.count {
  display: none !important;
}

/* =============================================
   SECTION 23: PDP Thumbnails zentriert unter Hauptbild
   FIX: justify-content:center bricht Scroll in scroll-area
   Loesung: width:fit-content + margin:auto zentriert wenn
   wenige Thumbs, aber erlaubt normales Scrollen bei vielen
   ============================================= */
.product__thumbnails--below .product__thumbnails-list {
  justify-content: start !important;
  justify-items: center !important;
  margin-inline: auto !important;
  width: fit-content !important;
  max-width: 100% !important;
}

/* =============================================
   SECTION 24: Toolbar – alle 5 Elemente einheitlich
   Filter | Chips (3x) | Sort = gleich gross, gleiche Border
   ============================================= */

/* Toolbar-Zeile: vertikal zentriert, kein Clipping */
.facet-topbar {
  min-height: auto !important;
  align-items: center !important;
  overflow: visible !important;
}
/* facet-wrapper darf Filter-Button nicht clippen */
.facet-wrapper {
  height: auto !important;
  overflow: visible !important;
}

/* Filter + Sort: Tailwind setzt hidden xl:block (1280px).
   Theme-Editor-Preview ist schmaler → Breakpoint auf 990px senken */
@media screen and (min-width: 990px) {
  .facet-topbar .facet-wrapper.hidden {
    display: block !important;
  }
  .facet-topbar .facet-sorting.hidden {
    display: inline-flex !important;
  }
}

/* Quickfilter-Chips: auf Mobile komplett ausblenden.
   Benchmark: Kein Top-Skincare-Shop (Dermstore, Sephora, Paula's Choice,
   SkinCeuticals) nutzt Icon-Chips ueber dem Grid auf Mobile.
   Filterzugang laeuft ueber den Sticky "Filtern und sortieren"-Button. */
@media screen and (max-width: 749px) {
  .toolbar-chips {
    display: none !important;
  }
}

/* === Einheitliche Styles fuer alle 5 Toolbar-Elemente === */
/* Filter-Button */
.facets-container .button.icon-with-text,
button.button.button--secondary.icon-with-text {
  padding: 6px 14px !important;
  font-size: 14px !important;
  min-height: 44px !important;
  height: 44px !important;
  max-height: none !important;
}
/* Filter ::after — 1px Border, pill shape */
.facets-container .button.icon-with-text::after,
button.button.button--secondary.icon-with-text::after {
  border-radius: 60px !important;
  border-width: 1px !important;
}

/* Chips — font-size 14px + kompakterer Icon-Text-Abstand */
.toolbar-chips .button {
  font-size: 14px !important;
  gap: 4px !important;
}
/* Chips ::after — 1px Border */
.toolbar-chips .button::after {
  border-width: 1px !important;
}

/* Sort-Dropdown GESCHLOSSEN: einheitlich mit Toolbar-Elementen */
hover-element.sort-by:not([open]) {
  padding: 6px 14px !important;
  font-size: 14px !important;
  min-height: 44px !important;
  height: 44px !important;
  overflow: visible !important;
  align-self: center !important;
}
/* Sort GESCHLOSSEN ::after — 1px Border, pill shape */
hover-element.sort-by:not([open])::after {
  border-radius: 60px !important;
  border-width: 1px !important;
}

/* Sort-Dropdown GEOEFFNET: Card-Layout mit weissem Hintergrund */
hover-element.sort-by[open] {
  overflow: visible !important;
  z-index: 10 !important;
  height: auto !important;
  max-height: none !important;
}
/* Sort-Listbox: aus absolute rausnehmen damit ::after-Card die volle Hoehe abdeckt */
hover-element.sort-by[open] .sort-listbox {
  position: relative !important;
  opacity: 1 !important;
  top: auto !important;
  left: auto !important;
}
/* ::after als Hintergrund-Card fuer das gesamte Dropdown */
hover-element.sort-by[open]::after {
  border-radius: 12px !important;
  border-width: 1px !important;
  background-color: #fff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  height: 100% !important;
  inset: 0 !important;
}
/* Titel "Sortieren nach" — nicht uppercase, gleiche Groesse wie Optionen */
hover-element.sort-by[open] .sort-title {
  text-transform: none !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  color: #1a1a1a !important;
  opacity: 1 !important;
}
/* Listbox: kompakte Abstaende */
hover-element.sort-by[open] .sort-listbox {
  gap: 2px !important;
  padding: 4px 0 !important;
}
hover-element.sort-by[open] .sort-listbox li {
  padding: 4px 0 !important;
}
hover-element.sort-by[open] .sort-listbox label {
  font-size: 14px !important;
  padding: 4px 0 !important;
}

/* facet-sort Wrapper: gleiche Hoehe wie Inhalt */
facet-sort.sort-wrapper {
  height: 44px !important;
}
/* facet-sorting Wrapper: alignment fix */
.facet-sorting {
  align-items: center !important;
  height: auto !important;
}

/* Sort-Wrapper: vertical alignment fix */
.select-sort-by,
facet-sort {
  display: flex !important;
  align-items: center !important;
}

/* "Sortieren nach:" Label */
.facets__sort-label {
  font-size: 20px !important;
}

/* 12. Trust-Bar: 2x2 Grid auf Mobile (multicolumn-with-icons hat kein columns_mobile Setting) */
@media screen and (max-width: 749px) {
  .text-with-icons.grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .text-with-icons {
    --fluid-base-to-xl: 0.75rem;
  }
  .text-with-icons .column {
    padding: 8px 6px !important;
    gap: 2px !important;
  }
  .text-with-icons .column__icon {
    margin-bottom: 0 !important;
  }
  .text-with-icons .column__icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  .text-with-icons .column__text {
    font-size: 0.6875rem !important;
    line-height: 1.3 !important;
  }
}

/* 21. Button-Hover shopweit: einheitlich, subtil, premium */
/* Evidenz: Konsistente Hover-States reduzieren Lernzeit um 34% (UX Research). */
/* Baymard: 76% der E-Commerce-Sites nutzen keine synchronisierten Hover-Effekte. */
/* WCAG 1.4.11: Text muss in jedem State 4.5:1 gegen Hintergrund einhalten. */
/* Loesung: #d5d5d5 Hintergrund (Text-Kontrast ~10:1), Border #888, 0.25s ease. */

/* Theme btn-fill deaktivieren */
.button .btn-fill,
[data-button-hover] .button .btn-fill,
[data-button-hover=standard] .button:not([disabled]) .btn-fill,
.js [data-button-hover=standard] .button:not([disabled]) .btn-fill {
  display: none !important;
  visibility: hidden !important;
}
/* Sort-Button Hover: per JS in system_leiste (CSS greift nicht auf hover-element) */

/* Einheitlicher Hover: dezente Verdunkelung, Text bleibt lesbar */
/* Hohe Spezifizitaet um Theme-Rule .js [data-button-hover] zu ueberschreiben */
.js [data-button-hover] .button:hover:not([disabled]),
.button:hover:not([disabled]) {
  background: #d5d5d5 !important;
  border-color: #888 !important;
  color: #1a1a1a !important;
  transition: background 0.25s ease, border-color 0.25s ease !important;
}
.js [data-button-hover=standard] .button--secondary:hover:not([disabled], .self-button),
.js [data-button-hover=standard] .button:hover:not([disabled], .self-button),
.js [data-button-hover] .button:hover:not([disabled]),
.button:hover:not([disabled]) {
  color: #1a1a1a !important;
}
.js [data-button-hover=standard] .button:hover:not([disabled]) .btn-text,
.js [data-button-hover=standard] .button:hover:not([disabled]) .btn-text *,
.js [data-button-hover=standard] .button:hover:not([disabled]) .btn-duplicate,
.js [data-button-hover=standard] .button:hover:not([disabled]) .btn-duplicate *,
.js [data-button-hover] .button:hover:not([disabled]) .btn-text,
.js [data-button-hover] .button:hover:not([disabled]) .btn-text *,
.button:hover:not([disabled]) .btn-text,
.button:hover:not([disabled]) .btn-text * {
  color: #1a1a1a !important;
}

/* Primary Buttons (CTA): invertiert - hell auf dunkel bei Hover */
.js [data-button-hover] .button--primary:hover:not([disabled]),
.button--primary:hover:not([disabled]) {
  background: #333 !important;
  border-color: #333 !important;
  color: #fff !important;
}
.js [data-button-hover=standard] .button--primary:hover:not([disabled], .self-button),
.js [data-button-hover] .button--primary:hover:not([disabled]),
.button--primary:hover:not([disabled]) {
  color: #fff !important;
}
.js [data-button-hover=standard] .button--primary:hover:not([disabled]) .btn-text,
.js [data-button-hover=standard] .button--primary:hover:not([disabled]) .btn-text *,
.js [data-button-hover] .button--primary:hover:not([disabled]) .btn-text,
.js [data-button-hover] .button--primary:hover:not([disabled]) .btn-text *,
.button--primary:hover:not([disabled]) .btn-text,
.button--primary:hover:not([disabled]) .btn-text * {
  color: #fff !important;
}

/* Disabled Buttons: kein Hover-Effekt */
.button[disabled]:hover {
  background: initial !important;
  border-color: initial !important;
}

/* 21b. Sort-Dropdown: nur Farben, kein Layout-Override */
/* Alle Texte im Sort-Bereich dunkel */
hover-element.sort-by,
hover-element.sort-by .btn-text,
hover-element.sort-by .btn-text *,
hover-element.sort-by .sort-selection,
hover-element.sort-by .sort-title,
.sort-listbox,
.sort-listbox label,
.sort-listbox li {
  color: #1a1a1a !important;
}
/* Ausgewaehlte Option hervorgehoben */
.sort-listbox li:has(input:checked) label {
  color: #1a1a1a !important;
  font-weight: 600 !important;
}
/* Hover: Unterstrich — see Sort-Listbox section */
/* Dropdown-Hintergrund weiss */
hover-element.sort-by {
  --color-background: 255, 255, 255 !important;
}
hover-element.sort-by::before,
hover-element.sort-by::after {
  background-color: #fff !important;
}

/* X-Button: sichtbarer Rand */
.sort-close {
  border: 1.5px solid #ccc !important;
}
.sort-close:hover {
  border-color: #1a1a1a !important;
}

/* Sort-Button Hover: allgemeiner Hover auf hover-element */
/* Sort-Button Hover: grau wie andere Toolbar-Buttons (nur geschlossen) */
hover-element.sort-by:not([open]):hover::after {
  background-color: #d5d5d5 !important;
  transition: background-color 0.15s ease !important;
}
hover-element.sort-by:not([open]):hover {
  border-color: #888 !important;
}

/* Sort-Listbox: keine doppelte Unterstreichung */
/* Theme nutzt background-gradient fuer reversed-link underline — hier deaktivieren */
.sort-listbox label,
.sort-listbox .reversed-link,
.sort-listbox .text-xl {
  text-decoration: none !important;
  background: none !important;
}
.sort-listbox label:hover,
.sort-listbox .reversed-link:hover,
.sort-listbox .text-xl:hover {
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  background: none !important;
}

/* 22. Header-Navigation: Gaps zwischen Menuepunkten erhoehen */
.header .list-menu,
header .list-menu {
  gap: 0.75rem !important;
}

/* 23. (MOVED to Section 21 — Announcement Bar CSS consolidated) */

/* 24. Announcement Bar: volle Breite fuer Zentrierung (grid-column spanning) */
.topbar .announcement-bar {
  grid-column: 1 / -1 !important;
}

/* 25. Text-Opacity Override: volle Lesbarkeit (100%) statt Theme-Default 60% */
/* Concept Theme setzt .text-opacity auf 0.6 — das reduziert Lesbarkeit ohne Evidenz */
.rte.text-opacity,
.text-opacity {
  color: rgb(51, 51, 51) !important;
  opacity: 1 !important;
}

/* ============================================================
   PRODUKTKACHELN v2 – Phase 1 Clean-Up (2026-03-07)
   ============================================================ */

/* 26. Vendor-Label auf Marken-Collections ausblenden (Aufgabe 3)
   Auf Single-Brand-Collections ist der Vendor redundant,
   da alle Produkte zum gleichen Hersteller gehoeren.
   Body-Klasse collection-{handle} wird via theme.liquid gesetzt. */
.collection-zo-skin-health .product-card__top,
.collection-is-clinical .product-card__top,
.collection-colorescience .product-card__top,
.collection-mesoestetic .product-card__top,
.collection-scientis .product-card__top {
  display: none !important;
}

/* 27. Hover-System: Synchroner Crossfade (CB-031 Update)
   Alle Elemente reagieren gleichzeitig: 150ms Delay (Absichtserkennung),
   dann 250ms Fade. Keine separaten Timings mehr.
   Evidenz: NNGroup - 150ms Delay verhindert Flash beim Ueberfahren,
   250ms Fade ist im optimalen Bereich 100-500ms fuer Web-Animationen. */

/* Infografik (secondary image): Ruhezustand */
.product-card__secondary {
  transition: opacity 0.25s ease 0.15s, visibility 0s linear 0.4s !important;
}

/* Infografik: Hover-State */
.product-card:hover .product-card__secondary {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.25s ease 0.15s, visibility 0s linear 0s !important;
}

/* Badge: gleiches Timing beim Ausblenden */
.badges {
  transition: opacity 0.25s ease 0.15s !important;
}

/* 28. Quick View Button Styling (Phase 2, Aufgabe 3)
   Button erscheint bei Hover ueber die Kachel (Theme-Default).
   Hier: visuelles Styling anpassen – rund, dunkel, dezent.
   Position top-0 right-0 kommt aus dem Template. */
.quick-view__button {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.25s ease 0.15s, background-color 0.15s ease !important;
}

.quick-view__button:hover {
  background-color: #333333 !important;
}

/* btn-fill Overlay im Quick-View-Button unterdruecken */
.quick-view__button .btn-fill {
  display: none !important;
}

/* ===== SEKTION 29: ZOOM IM QUICK VIEW MODAL DEAKTIVIEREN ===== */
/* Skincare-Produkte (Tuben/Flaschen auf weissem Hintergrund) profitieren
   nicht von Zoom. Der transparente Fullsize-Button mit cursor: zoom-in
   oeffnet ein separates Modal und unterbricht den Quick-View-Kontext.
   "Alle Details anzeigen"-Link fuehrt zur vollstaendigen Produktseite.
   Auf der normalen Produktseite bleibt Zoom aktiv. */
.quick-view .product__media button[aria-label*="Modal"] {
  display: none !important;
  pointer-events: none !important;
}

/* ===== SEKTION 30: QUICK VIEW - BILDNAVIGATIONS-PFEILE ANZEIGEN ===== */
/* Baymard-Research: Dots allein fuehren dazu, dass Nutzer zusaetzliche
   Bilder uebersehen. Pfeile sind der primaere Navigationsmechanismus.
   Die Pfeile existieren im DOM (.indicators), sind aber per Utility-
   Klassen (hidden, opacity-0) ausgeblendet. Wir ueberschreiben NUR
   im Quick-View-Modal-Kontext - auf der Produktseite bleibt alles
   wie vom Theme vorgesehen. */

/* Pfeile-Container: sichtbar, volle Breite, Buttons an die Raender */
.quick-view .indicators,
[id*="ProductModal"] .indicators,
.product--dots .indicators {
  display: flex !important;
  opacity: 1 !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 8px !important;
  pointer-events: none !important;
}

/* Pfeil-Buttons: kompakt, am linken/rechten Bildrand */
.quick-view .indicators button,
[id*="ProductModal"] .indicators button,
.product--dots .indicators button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
  pointer-events: auto !important;
  flex-shrink: 0 !important;
}

.quick-view .indicators button:hover,
[id*="ProductModal"] .indicators button:hover,
.product--dots .indicators button:hover {
  background-color: #fff !important;
  border-color: #888 !important;
}

/* Pfeil-Icons Farbe */
.quick-view .indicators button .btn-text svg,
[id*="ProductModal"] .indicators button .btn-text svg,
.product--dots .indicators button .btn-text svg {
  stroke: #1a1a1a !important;
  width: 16px !important;
  height: 16px !important;
}

/* btn-fill im Pfeil-Button verstecken (Concept Theme ::after Architektur) */
.quick-view .indicators button .btn-fill,
[id*="ProductModal"] .indicators button .btn-fill,
.product--dots .indicators button .btn-fill {
  display: none !important;
}

.quick-view .indicators button::after,
[id*="ProductModal"] .indicators button::after,
.product--dots .indicators button::after {
  display: none !important;
}

/* Deaktivierte Pfeile (erstes/letztes Bild) */
.quick-view .indicators button[disabled],
[id*="ProductModal"] .indicators button[disabled],
.product--dots .indicators button[disabled] {
  opacity: 0.3 !important;
  cursor: default !important;
}

/* ============================================ */
/* Section 31 — BESTSELLER BADGE PREMIUM        */
/* Dezentes Outline-Badge statt schwarzer Block  */
/* Hover: Badge ausblendet fuer Infografik       */
/* Stand: 08. Maerz 2026                         */
/* ============================================ */

/* Badge-Grundstil: Transparenter Pill mit feiner Greige-Border */
.badge {
  background: transparent !important;
  border: 1.5px solid #A8A098 !important;
  color: #1a1a1a !important;
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  padding: 4px 10px !important;
}

/* Sale-Badge: Eigene Farblogik, gleicher Stil */
.badge--onsale {
  border-color: #e11d48 !important;
  color: #e11d48 !important;
  background: transparent !important;
}

/* Sold-Out-Badge: Eigene Farblogik, gleicher Stil */
.badge--soldout {
  border-color: #555 !important;
  color: #555 !important;
  background: transparent !important;
}

/* Hover: Badge ausblendet damit Infografik sichtbar wird */
/* Sold-Out-Badge bleibt sichtbar (wichtige Kaufinformation) */
.badges {
  transition: opacity 0.2s ease !important;
}

@media (min-width: 750px) {
  .product-card:hover .badges:not(:has(.badge--soldout)) {
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
  }
}
/* Mobile: Badge kompakter damit es nicht das Produktbild verdeckt */
/* Mobile: Badge UNTER das Bild verschieben statt Overlay          */
@media (max-width: 749px) {
  .badge {
    font-size: 0.5rem !important;
    letter-spacing: 0.8px !important;
    padding: 2px 6px !important;
    border-width: 1px !important;
  }

  /* Flex-Container damit .badges via order nach dem Bild erscheint */
  .product-card__media {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Badge aus absolute Positionierung nehmen, order:2 = unter dem Bild */
  .product-card__media .badges {
    position: static !important;
    display: flex !important;
    justify-content: flex-start !important;
    padding: 6px 0 0 0 !important;
    order: 2 !important;
  }
}

/* ============================================ */
/* Section 32 — QUICKVIEW BUTTON RESTYLE        */
/* Pill-Button UNTER dem Bild, "Quick View"      */
/* Stand: Maerz 2026                            */
/* ============================================ */

/* QuickView-Button: Pill UNTER dem Bild */
.quick-view__button {
  position: absolute !important;
  top: auto !important;
  bottom: -16px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  background: #ffffff !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 999px !important;
  width: auto !important;
  height: auto !important;
  padding: 4px 12px !important;
  z-index: 3 !important;
}

/* Platz fuer Button unter dem Bild schaffen (nur Desktop, da QuickView auf Mobile hidden) */
@media (min-width: 750px) {
  .product-card__media {
    margin-bottom: 20px !important;
  }
}

/* Dunklen Fill-Hintergrund ausblenden */
.quick-view__button .btn-fill {
  display: none !important;
}

/* Theme-Default ::after Border ausblenden */
.quick-view__button::after {
  display: none !important;
}

/* Button-Text: Flex mit Icon + Label */
.quick-view__button .btn-text {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.6rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #1a1a1a !important;
}

/* Icon-Groesse anpassen */
.quick-view__button .btn-text svg {
  width: 12px !important;
  height: 12px !important;
  color: #1a1a1a !important;
}

/* sr-only Text sichtbar machen */
.quick-view__button .sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

/* Mobile: QuickView-Button ausblenden */
@media (max-width: 749px) {
  .quick-view__button {
    display: none !important;
  }
}

/* ============================================ */
/* Section 33 — QUICKVIEW CAROUSEL IMAGE FIX   */
/* Infografik nicht beschneiden (contain)       */
/* Stand: Maerz 2026                            */
/* ============================================ */

/* QuickView-Carousel: Bilder nicht croppen */
quick-view .product__media img {
  object-fit: contain !important;
}

/* ============================================ */
/* Section 34 — SORT-BUTTON PUNKT AUSBLENDEN    */
/* Kleiner Punkt neben "Beliebtheit" entfernen  */
/* Stand: Maerz 2026                            */
/* ============================================ */

/* Sort-Close-Indikator (6px Punkt) ausblenden */
.sort-by .sort-close {
  display: none !important;
}

/* ============================================ */
/* Section 35 — HEADER-HOEHE COLLECTION PAGES   */
/* Padding um H1-Titel und Collection-Section   */
/* reduzieren fuer mehr Produkt-Sichtbarkeit    */
/* Stand: Maerz 2026                            */
/* ============================================ */

/* H1-Titel-Sektion: Padding von 24/24 auf 12/12 reduzieren */
/* Nutzt CSS Custom Properties statt !important              */
.template-collection [id*="__hero_banner"] .section--padding, [id*="__hero-uber-uns"] .section--padding {
  --section-padding-top: 12px;
  --section-padding-bottom: 12px;
}

/* Collection-Produkt-Sektion: Padding-Top von 32 auf 16 reduzieren */
.template-collection .collection-section .section--padding {
  --section-padding-top: 16px;
}

/* ============================================ */
/* Section 36 — OPACITY-AUDIT FIXES             */
/* WCAG 2.1 AA Kontrast-Korrekturen             */
/* 9 Overrides auf theme.css Defaults            */
/* Stand: Maerz 2026                            */
/* ============================================ */

/* --- #1 Drawer-Tabs (inaktiv): 0.2 → 0.55 --- */
/* theme.css:6566 — Tabs waren praktisch unsichtbar */
.drawer__tab {
  opacity: 0.55 !important;
}

/* --- #2 Aktiver Sprach-Link: Opacity → Weight+Underline --- */
/* theme.css:5849 — Aktiven Zustand visuell kennzeichnen */
/* ohne Opacity zu reduzieren                              */
.localization .dropdown__nav a.active {
  opacity: 1 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* --- #3 Floating Label: 0.6 → 0.7 --- */
/* theme.css:4158 — Knapp unter WCAG-Grenze */
.label.is-floating {
  opacity: 0.7 !important;
}

/* --- #4 Input Prefix: 0.6 → 0.7 --- */
/* theme.css:4665 — Waehrungssymbol und Suchfeld-Prefix */
.input-wrapper .prefix {
  opacity: 0.7 !important;
}

/* --- #5 Menue-Pfeile & Icons im Drawer: 0.4 → 0.6 --- */
/* theme.css:7452+7463 — Aufklapp-Affordance staerken */
.drawer__menu summary::after {
  opacity: 0.6 !important;
}
.drawer__menu summary > .icon {
  opacity: 0.6 !important;
}

/* --- #6 Mega-Menu Tab-Headings: 0.5 → 0.65 --- */
/* theme.css:8298 — Inaktive Tabs besser lesbar machen */
.mega-menu__nav--tabs .mega-menu__nav-item :is(.media, .heading) {
  opacity: 0.65 !important;
}

/* --- #7 Aktives Listbox-Element: Opacity → Hintergrund --- */
/* theme.css:7312 — Ausgewaehlten Eintrag per Hintergrund  */
/* kennzeichnen statt per Opacity abzudunkeln               */
.modal .listbox .active {
  opacity: 0.7 !important;
  background-color: rgba(0, 0, 0, 0.06) !important;
}

/* --- #8 Testimonial-Zitate im Banner: 0.6 → 0.75 --- */
/* theme.css:13488 — Zitat und Quellenangabe lesbarer */
.banner .testimonial :is(figure, cite) {
  opacity: 0.75 !important;
}

/* --- #9 Slider-Pfeile: 0.7 → 0.85 --- */
/* theme.css:3556 — Interaktive Buttons prominenter */
.slider .indicators .button {
  opacity: 0.85 !important;
}


/* ============================================================
   Section #37 — Brand Cross-Navigation: Grayscale + Hover-Farbe
   Concept Theme logo-list section.
   Selektoren: .logo-bar (flex container), .logo__media (item wrapper)

   DESIGN-ENTSCHEIDUNG (v8):
   - Farbige Brand-Logos als Quelle (echte Markenfarben)
   - ALLE Logos: grayscale(1) + opacity 0.5 (einheitlich grau)
   - mesoestetic: opacity 0.22 (schwarz-Logo braucht weniger Opacity
     um visuell gleich hell wie die anderen zu wirken)
   - Hover: grayscale(0) + opacity 0.85 (zeigt originale Markenfarbe)
   - KEIN Active-State (kein Logo dauerhaft farbig)
   - KEIN Scale/Zoom-Effekt (kein Clipping durch overflow:hidden)
   - Equal-Area Sizing: Proportional nach Niels-Feedback v8

   Block-Reihenfolge: 1=ZO, 2=iS Clinical, 3=Colorescience,
                       4=mesoestetic, 5=Scientis/Cyspera

   Markenfarben:
   ZO=#003DA5, iSC=#1B365D, CS=#00677F, meso=#000000, Cysp=#008B8B
   ============================================================ */

/* --- #37.0 Anti-Platzhalter-Balken (Root-Cause Fix) ---
   Concept Theme setzt .media { background-color: rgb(var(--color-placeholder)) }
   und erzeugt ::before/::after Loading-Bars im .loading State.
   Wir erzwingen transparente Hintergruende + deaktivieren Pseudo-Elemente
   direkt auf den Logo-Containern → keine Balken, kein Delay noetig. --- */
.logo-bar .logo__media,
.logo-bar .logo__media.media,
.logo-bar .logo__media.loading,
.logo-bar .logo__media.media.loading {
  background: transparent !important;
  background-color: transparent !important;
}
.logo-bar .logo__media::before,
.logo-bar .logo__media::after,
.logo-bar .logo__media.loading::before,
.logo-bar .logo__media.loading::after {
  display: none !important;
  content: none !important;
}
/* Bilder im .loading State NICHT verstecken (Theme-Default: opacity:0) */
.logo-bar .logo__media.loading > img {
  opacity: 0.5 !important;
}
/* Auch auf dem a-Tag-Wrapper und Section-Ebene kein Placeholder */
.logo-bar a,
.logo-bar .logo-item,
section:has(.logo-bar) .media {
  background: transparent !important;
  background-color: transparent !important;
}

/* --- #37.1 Logo-Bar: Einzeilig, grosszuegiger Abstand --- */
.logo-bar {
  flex-wrap: nowrap !important;
  gap: 20px 36px !important;
  justify-content: center;
  align-items: center;
}

/* --- #37.2 Logo-Section: Minimales Padding fuer wenig Fold-Impact --- */
.logo-list-section,
section:has(.logo-bar) {
  padding-top: 8px !important;
  padding-bottom: 4px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* --- #37.3 Logo-Items: Basis-Styling --- */
.logo-bar a {
  -webkit-tap-highlight-color: transparent !important;
}
.logo-bar .logo__media {
  --image-height: 24px !important;
  flex-shrink: 1;
  position: relative;
  padding-bottom: 4px !important;
}

/* --- #37.4 Equal-Area Sizing pro Logo (nth-child) — v8 --- */
.logo-bar .logo__media:nth-child(1) { max-width: 128px; }  /* ZO */
.logo-bar .logo__media:nth-child(2) { max-width: 118px; }  /* iSC: 112->118 minimal groesser */
.logo-bar .logo__media:nth-child(3) { max-width: 131px; }  /* CS: unchanged */
.logo-bar .logo__media:nth-child(4) { max-width: 122px; }  /* meso: unchanged */
.logo-bar .logo__media:nth-child(5) { max-width: 82px; }   /* cyspera: 88->82 minimal kleiner */

/* --- #37.5 Alle Logos: Grayscale + moderate Opacity --- */
.logo-bar .logo__media img {
  max-height: 24px !important;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1) !important;
  opacity: 0.5 !important;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

/* --- #37.5b mesoestetic: invert(0.15) hebt schwarz auf dunkles Grau an, damit visual weight passt
   bei opacity 0.50 wie alle anderen. Effektiv #939393, Kontrast 3.07:1 (WCAG 1.4.11 >= 3:1 ✓) --- */
.logo-bar .logo__media:nth-child(4) img {
  filter: grayscale(1) invert(0.15) !important;
  opacity: 0.50 !important;
}

/* --- #37.6 Hover-State: Nur Desktop (hover: hover), kein Touch-Farbblitz --- */
@media (hover: hover) {
  .logo-bar .logo__media:hover img,
  .logo-bar a:hover .logo__media img {
    filter: grayscale(0) !important;
    opacity: 0.85 !important;
  }
}

/* --- #37.7 Fokus-State fuer Accessibility (nur Keyboard, kein Touch-Balken) --- */
.logo-bar a:focus-visible .logo__media img {
  filter: grayscale(0) !important;
  opacity: 0.85 !important;
}

/* --- #37.8 Responsive: Kleiner auf Mobile --- */
@media (max-width: 749px) {
  .logo-bar {
    flex-wrap: wrap !important;
    gap: 12px 20px !important;
  }
  .logo-bar .logo__media {
    --image-height: 18px !important;
  }
  .logo-bar .logo__media img {
    max-height: 18px !important;
  }
  /* iSC mobile: groessere Hoehe weil kompaktes Seitenverhaeltnis (4.6:1 vs 9.6:1 bei ZO) */
  .logo-bar .logo__media:nth-child(2) {
    --image-height: 24px !important;
  }
  .logo-bar .logo__media:nth-child(2) img {
    max-height: 24px !important;
  }
  .logo-bar .logo__media:nth-child(1) { max-width: 96px; }   /* ZO mobile */
  .logo-bar .logo__media:nth-child(2) { max-width: 135px; }  /* iSC mobile: 120->135 Text-orientiert */
  .logo-bar .logo__media:nth-child(3) { max-width: 104px; }  /* CS mobile: 98->104 etwas groesser */
  .logo-bar .logo__media:nth-child(4) { max-width: 92px; }   /* meso mobile */
  .logo-bar .logo__media:nth-child(5) { max-width: 62px; }   /* cyspera mobile: 66->62 */
}

/* --- #37.9 Homepage Brand-Logos: Groesser als Collection Cross-Nav ---
   Die Homepage-Sektion braucht prominentere Logos (Marken-Showcase).
   SVG-Logos sind sauber zugeschnitten, brauchen keine max-width-Limits.
   v25f: Proportional reduziert fuer mehr Luftigkeit (34/54px). --- */
[id*="__brand-logos"] .logo-bar .logo__media {
  --image-height: 34px !important;
}
[id*="__brand-logos"] .logo-bar .logo__media img {
  max-height: 34px !important;
}
[id*="__brand-logos"] .logo-bar .logo__media:nth-child(1),
[id*="__brand-logos"] .logo-bar .logo__media:nth-child(2),
[id*="__brand-logos"] .logo-bar .logo__media:nth-child(3),
[id*="__brand-logos"] .logo-bar .logo__media:nth-child(4),
[id*="__brand-logos"] .logo-bar .logo__media:nth-child(5) {
  max-width: none !important;
}
/* iS Clinical: SVG enthaelt Icon + Text, daher Text optisch kleiner.
   Groessere Hoehe kompensiert den Icon-Anteil. */
[id*="__brand-logos"] .logo-bar .logo__media:nth-child(2) {
  --image-height: 54px !important;
}
[id*="__brand-logos"] .logo-bar .logo__media:nth-child(2) img {
  max-height: 54px !important;
}
/* Homepage Mobile */
@media (max-width: 749px) {
  [id*="__brand-logos"] .logo-bar .logo__media {
    --image-height: 22px !important;
  }
  [id*="__brand-logos"] .logo-bar .logo__media img {
    max-height: 22px !important;
  }
  [id*="__brand-logos"] .logo-bar .logo__media:nth-child(2) {
    --image-height: 35px !important;
  }
  [id*="__brand-logos"] .logo-bar .logo__media:nth-child(2) img {
    max-height: 35px !important;
  }
  [id*="__brand-logos"] .logo-bar .logo__media:nth-child(1),
  [id*="__brand-logos"] .logo-bar .logo__media:nth-child(2),
  [id*="__brand-logos"] .logo-bar .logo__media:nth-child(3),
  [id*="__brand-logos"] .logo-bar .logo__media:nth-child(4),
  [id*="__brand-logos"] .logo-bar .logo__media:nth-child(5) {
    max-width: none !important;
  }
}

/* --- #38 Featured-Collections Tabs: Mobile Scroll-Fix ---
   Problem: 6 Tabs bei 667px Breite, Viewport 375px. 4 Tabs unsichtbar.
   Root Cause: .tab-list hatte justify-content:center (Zeile 133) was auf
   Mobile das Layout des scroll-shadow Containers stoerte.
   Fix: Mobile links ausrichten, Tab-Hoehe 44px, Scrollbar verstecken.
   Native scroll-shadow Web-Component hat EIGENE Fade-Indikatoren
   (Shadow DOM mit .l/.r spans, gesteuert ueber --l/--r CSS-Vars).
   Diese funktionieren nativ — KEIN custom ::after Fade noetig.
   Desktop bleibt unveraendert (justify-content:center aus Zeile 133). */

/* #38.1 Mobile: Tab-Hoehe auf 44px Touch-Minimum */
@media (max-width: 749px) {
  .featured-collections .tab__item {
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* #38.2 Mobile: Scrollbar verstecken, smooth scroll */
@media (max-width: 749px) {
  .featured-collections .scroll-area {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE/Edge */
  }
  .featured-collections .scroll-area::-webkit-scrollbar {
    display: none;                   /* Chrome/Safari */
  }
}

/* #38.3 Mobile: tab-list nicht zentrieren, links ausrichten fuer Scroll */
@media (max-width: 749px) {
  .tab-list {
    justify-content: flex-start !important;
  }
  .tab-list > div[role="tablist"] {
    justify-content: flex-start !important;
  }
}

/* #38.4 Mobile: Aktiver Tab sichtbar machen (v2)
   Problem: Concept Theme button--primary hat komplexe Layer-Architektur:
   Element > ::after (sichtbarer BG) > .btn-fill (Hover-Animation) > .btn-text
   Bei Tab-Wechsel per JS aendert sich die Klasse, aber ::after bleibt
   transparent und .btn-fill hat display:none. Der Button-BG wird nicht
   zuverlaessig gesetzt. Ergebnis: weisser/unsichtbarer aktiver Tab.
   Fix: Alle Layer explizit setzen, auch ::after als Fallback. */
@media (max-width: 749px) {
  /* Button-Element selbst: dunkler Hintergrund */
  .featured-collections .tab__item.button--primary {
    background-color: rgb(26, 26, 26) !important;
    color: rgb(255, 255, 255) !important;
  }
  /* ::after Overlay: ebenfalls dunkel (deckt den Button komplett ab) */
  .featured-collections .tab__item.button--primary::after {
    background-color: rgb(26, 26, 26) !important;
    border-color: rgb(26, 26, 26) !important;
  }
  /* .btn-fill: dunkel falls sichtbar (Hover/Animation-State) */
  .featured-collections .tab__item.button--primary .btn-fill {
    background-color: rgb(26, 26, 26) !important;
  }
  /* .btn-text: weiss fuer Kontrast */
  .featured-collections .tab__item.button--primary .btn-text {
    color: rgb(255, 255, 255) !important;
  }
}

/* #39 Testimonials: Goldene Sterne ueber Subheading
   Visueller Anker fuer Social Proof. 5 Unicode-Sterne in Google-Gold (#F4B400)
   als ::before Pseudo-Element auf dem Subheading-Paragraph.
   Rendering-Reihenfolge im Theme: Subheading > Heading > Description > Button
   Die ::before Sterne erscheinen direkt ueber "5,0 von 5 Sternen bei Google". */
[id$="__social-proof"] .title-wrapper .heading.normal-case::before {
  content: "\2605\2605\2605\2605\2605";
  display: block;
  color: #F4B400;
  font-size: 1.75rem;
  letter-spacing: 0.2em;
  margin-bottom: 0.25rem;
  line-height: 1;
}

/* ============================================ */
/* CB-025 AK-1: Hero-Optimierung               */
/* Stand: Maerz 2026                           */
/* ============================================ */

/* AK-1d: Brand-Subline unter Hero-Headline */
.section .slideshow-content .hero-subline,
.slideshow-words .hero-subline,
.hero-subline {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: #666666 !important;
  letter-spacing: 0.02em;
  margin-top: 12px;
  line-height: 1.4;
}

/* Mobile: Subline etwas kleiner */
@media screen and (max-width: 767px) {
  .hero-subline {
    font-size: 14px !important;
    margin-top: 8px;
  }
}

/* CB-025: Hero responsive positioning + Gradient-Overlay */

/* Desktop (>1024px): Content vertikal zentriert (Inline-Style im Liquid) */
/* Tablet + Mobile (<=1024px): Content zurueck auf bottom, Gradient fuer Lesbarkeit */
@media screen and (max-width: 1024px) {
  [id$="__slideshow"] .page-width.absolute {
    top: auto !important;
    transform: none !important;
    bottom: 0 !important;
  }

  /* Gradient von unten fuer Textlesbarkeit auf Mobile */
  [id$="__slideshow"] .banner__overlay {
    background: linear-gradient(
      to top,
      rgba(214, 199, 181, 0.85) 0%,
      rgba(214, 199, 181, 0.5) 35%,
      transparent 65%
    ) !important;
    opacity: 1 !important;
  }

  /* Subline kleiner auf Tablet */
  .hero-subline {
    font-size: 14px !important;
  }
}

/* Mobile (<768px): Noch staerkerer Gradient */
@media screen and (max-width: 767px) {
  [id$="__slideshow"] .banner__overlay {
    background: linear-gradient(
      to top,
      rgba(214, 199, 181, 0.92) 0%,
      rgba(214, 199, 181, 0.6) 40%,
      transparent 70%
    ) !important;
    opacity: 1 !important;
  }
}



/* ============================================================
   Section 37: Homepage Hero Mobile Restructuring (CB-027 v11)
   Text ueber Bild. Gradient. Zentriert. Edge-to-edge. 38vh.
   ============================================================ */
@media screen and (max-width: 767px) {
  [id$="__slideshow"] .section--padding {
    --section-padding-top: 0px !important;
    --section-padding-bottom: 0px !important;
    padding: 0 !important;
  }
  [id$="__slideshow"] .section--padding > .relative {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Text-Block: ueber dem Bild, Gradient, zentriert */
  [id$="__slideshow"] .section--padding > .relative > .page-width.absolute {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    order: -1 !important;
    width: 100% !important;
    pointer-events: auto !important;
    background: linear-gradient(180deg, #E5E0D8 0%, #E5E0D8 40%, #ffffff 100%) !important;
    padding: 32px 20px 24px !important;
    text-align: center !important;
  }
  [id$="__slideshow"] slideshow-element {
    order: 1 !important;
  }
  /* Bild: 38vh, edge-to-edge, kein border-radius */
  [id$="__slideshow"] .banner,
  [id$="__slideshow"] .banner.media--550px,
  [id$="__slideshow"] .banner[class*="media--"] {
    height: 36vh !important;
    max-height: 36vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  [id$="__slideshow"] slideshow-element,
  [id$="__slideshow"] slideshow-element .banner__media {
    height: 36vh !important;
    max-height: 36vh !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }
  [id$="__slideshow"] .banner__image,
  [id$="__slideshow"] .banner img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center 10% !important;
    border-radius: 0 !important;
  }
  [id$="__slideshow"] .banner__overlay {
    background: none !important;
    opacity: 1 !important;
  }

  /* H1: harmonisch ~27px auf iPhone */
  

  /* Zentrierung: alle Container full-width + zentriert */
  [id$="__slideshow"] .slideshow-content {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  [id$="__slideshow"] .slideshow-words {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  [id$="__slideshow"] .slideshow-word {
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }
  [id$="__slideshow"] .banner__box,
  [id$="__slideshow"] .banner__box--small,
  [id$="__slideshow"] .banner__box--medium,
  [id$="__slideshow"] .banner__box--large {
    max-width: 100% !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* Subline: 13px + max-width 85% fuer 3+2 Umbruch */
  [id$="__slideshow"] .section--padding .slideshow-content .slideshow-words .hero-subline {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin-top: 4px !important;
    color: #666666 !important;
    max-width: 85% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  [id$="__slideshow"] .page-width {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  [id$="__slideshow"] .banner,
  [id$="__slideshow"] slideshow-element,
  [id$="__slideshow"] .banner__media,
  [id$="__slideshow"] .section--padding > .relative {
    max-width: 100% !important;
    width: 100% !important;
  }
  [id$="__slideshow"] .section--padding > .relative > .page-width.absolute {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Pills: schlanker, weniger Hoehe */
  .featured-collections .tab__item {
    font-size: 13px !important;
    min-height: auto !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    line-height: 1.2 !important;
  }

  /* Brand-Tabs Section: Abstand zum Hero reduzieren */
  [id$="__brand-tabs"] .section--padding,
  [id$="__brand-tabs"] .section {
    --section-padding-top: 12px !important;
    padding-top: 12px !important;
  }
}

/* ============================================================
   Section 11: Brand-Tabs Scroll-Hinweis (CB-028)
   Dezenter Pfeil unter der Tab-Leiste rechts.
   Verschwindet per JS wenn am Ende gescrollt.
   DOM: [id*="brand-tabs"] / [id*="concern-tabs"] tabs-element > scroll-shadow > .scroll-area
   ============================================================ */
@media screen and (max-width: 767px) {
  /* Position-Kontext auf tabs-element (kein overflow:hidden) */
  [id*="brand-tabs"] tabs-element,
  [id*="concern-tabs"] tabs-element {
    position: relative !important;
  }

  /* Kleiner Pfeil unter den Tabs, rechtsbuendig */
  [id*="brand-tabs"] tabs-element::after,
  [id*="concern-tabs"] tabs-element::after {
    content: '\2192' !important;
    position: absolute !important;
    bottom: -18px !important;
    right: 4px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: #555 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 1 !important;
    transition: opacity 0.25s ease !important;
    animation: cb028-nudge 2s ease-in-out 2 !important;
  }

  /* Pfeil ausblenden wenn am Ende gescrollt */
  [id*="brand-tabs"] tabs-element.scrolled-end::after,
  [id*="concern-tabs"] tabs-element.scrolled-end::after {
    opacity: 0 !important;
    animation: none !important;
  }

  /* Sanftes Wippen nach rechts */
  @keyframes cb028-nudge {
    0%, 100% { transform: translateX(0); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(0); }
  }
}

/* ============================================================
   Section 12: Mobile-Fixes (CB-027)
   AK-1: Expertise-Bild flacher (250px, object-fit cover)
   AK-2: Alle Homepage-Sektionen Padding 36px statt 64px
   AK-3: CTAs zentriert auf Mobile
   AK-4: "Alle anzeigen" Pill kompakter + weniger margin-top
   AK-6: Beratung-CTA-Bild flacher (250px, panorama)
   AK-7: Social-Proof/Trust Abstand reduzieren
   ============================================================ */

/* --- AK-1: Expertise-Bild flacher (250px mobile) --- */
@media screen and (max-width: 767px) {
  [id*="expertise"] media-element.image-with-text__image {
    max-height: 250px !important;
    height: 250px !important;
  }
  [id*="expertise"] media-element.image-with-text__image .media {
    height: 250px !important;
  }
  [id*="expertise"] media-element.image-with-text__image img {
    object-fit: cover !important;
    object-position: center 20% !important;
    height: 100% !important;
    width: 100% !important;
  }
}
/* AK-6: ENTFERNT — 280px Regel kollidierte mit 250px */

/* --- AK-8: ENTFERNT — Zentrierung jetzt nativ per Shopify heading_alignment Setting --- */

/* --- AK-2: Homepage Section-Paddings reduzieren --- */
/* Desktop: 48px (statt 64/72px) */
[id*="brand-tabs"] .section--padding,
[id*="expertise"] .section--padding,
[id*="concern-tabs"] .section--padding,
[id*="beratung-cta"] .section--padding,
[id*="social-proof"] .section--padding {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
/* Mobile: 24px fuer strafferen Scroll */
@media screen and (max-width: 767px) {
  [id*="brand-tabs"] .section--padding,
  [id*="expertise"] .section--padding,
  [id*="concern-tabs"] .section--padding,
  [id*="beratung-cta"] .section--padding,
  [id*="social-proof"] .section--padding {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}
/* Scroll-Shadow Script-Section: kein Padding (erzeugt sonst unsichtbaren Gap) */
[id*="brand-tabs-scroll-shadow"] .section--padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --- AK-3: CTAs in Expertise + Beratung-CTA auf Mobile zentrieren --- */
@media screen and (max-width: 767px) {
  [id*="expertise"] .rich-text,
  [id*="beratung-cta"] .rich-text {
    text-align: center !important;
  }
  [id*="expertise"] .rich-text .button,
  [id*="beratung-cta"] .rich-text .button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* --- AK-4: "Alle anzeigen" Pill kompakter + weniger Abstand nach oben --- */
[id*="brand-tabs"] .button--secondary.icon-with-text,
[id*="concern-tabs"] .button--secondary.icon-with-text {
  padding: 10px 18px !important;
  font-size: 13px !important;
}
@media screen and (max-width: 767px) {
  [id*="brand-tabs"] p.text-center,
  [id*="concern-tabs"] p.text-center {
    margin-top: 16px !important;
  }
}

/* ============================================================
   Section 38: Concern-Tabs Scroll-Pfeil Tablet (CB-029)
   Pfeil-Hinweis fuer "Produkte nach Hautproblem" auf Tablets,
   wo die 6 Pills nicht nebeneinander passen (~1005px noetig).
   ============================================================ */
@media screen and (min-width: 768px) and (max-width: 1100px) {
  [id*="concern-tabs"] tabs-element {
    position: relative !important;
  }
  [id*="concern-tabs"] tabs-element::after {
    content: '\2192' !important;
    position: absolute !important;
    bottom: -18px !important;
    right: 4px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: #555 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 1 !important;
    transition: opacity 0.25s ease !important;
    animation: cb028-nudge 2s ease-in-out 2 !important;
  }
  [id*="concern-tabs"] tabs-element.scrolled-end::after {
    opacity: 0 !important;
    animation: none !important;
  }
}

/* ============================================================
   Section 40: Tab-Pills Desktop Padding reduzieren (CB-029)
   Nur Desktop (min-width 768px). Mobile bleibt unveraendert.
   "Alle anzeigen" Pill (.button--secondary.icon-with-text)
   wird hier NICHT betroffen — eigener Selektor in Section 12.
   ============================================================ */
@media screen and (min-width: 768px) {
  [id*="brand-tabs"] .tab__item.button,
  [id*="concern-tabs"] .tab__item.button {
    padding: 14px 24px !important;
  }
}

/* ============================================================
   Section 41: Heading-Hierarchie + Expertise-Bild Desktop (CB-029b)
   Collection-Headings groesser als sekundaere Headings.
   Expertise-Bild auf Desktop kompakter.
   ============================================================ */

/* --- Collection-Headings: groesser (primaere Conversion-Sektionen) --- */
/* Desktop */
@media screen and (min-width: 768px) {
  [id*="brand-tabs"] .heading.title-md,
  [id*="concern-tabs"] .heading.title-md {
    font-size: 38px !important;
    line-height: 1.15 !important;
  }
}
/* Mobile */
@media screen and (max-width: 767px) {
  [id*="brand-tabs"] .heading.title-md,
  [id*="concern-tabs"] .heading.title-md {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }
}

/* --- Sekundaere Headings: auf Mobile etwas kleiner fuer Hierarchie --- */
@media screen and (max-width: 767px) {
  [id*="expertise"] .heading.title-md,
  [id*="beratung-cta"] .heading.title-md,
  [id*="social-proof"] .heading.title-md {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
}

/* --- Expertise-Bild auf Desktop kompakter (max 420px, weniger Headspace) --- */
@media screen and (min-width: 768px) {
  [id*="expertise"] media-element.image-with-text__image {
    max-height: 420px !important;
  }
  [id*="expertise"] media-element.image-with-text__image .media {
    max-height: 420px !important;
  }
  [id*="expertise"] media-element.image-with-text__image img {
    object-fit: cover !important;
    object-position: center 20% !important;
  }
}

/* ============================================================
   Section 42: Mobile Product Grid – nur 6 Produkte (3 Reihen)
   Desktop: 8 Produkte (2x4). Mobile: 7. + 8. Produkt ausblenden.
   product_limit bleibt bei 8 im Theme fuer vollen Desktop-Grid.
   Grid-Struktur: alternierend <style> + <div.product-card> im
   .product-grid Container. nth-of-type(n+7) trifft ab dem 7. div.
   ============================================================ */
/* Mobile (<768px): 2 Spalten, 6 Produkte = 3 Reihen */
@media screen and (max-width: 767px) {
  [id*="brand-tabs"] .product-grid > div:nth-of-type(n+7),
  [id*="concern-tabs"] .product-grid > div:nth-of-type(n+7) {
    display: none !important;
  }
}
/* Tablet (768-1279px): 3 Spalten, 6 Produkte = 2 Reihen */
/* Ohne Fix: 8 Produkte / 3 Spalten = 3 Reihen (3+3+2) */
@media screen and (min-width: 768px) and (max-width: 1279px) {
  [id*="brand-tabs"] .product-grid > div:nth-of-type(n+7),
  [id*="concern-tabs"] .product-grid > div:nth-of-type(n+7) {
    display: none !important;
  }
}

/* Section 43: ENTFERNT — ersetzt durch Section 58 */
/* ============================================================
   Section 44: Social-Proof Sektion kompakter + Zitatzeichen kleiner
   Probleme: Blockquote 80px padding-top zu viel, Zitatzeichen
   (::before) 48x48px zu prominent, title-wrapper 32px margin zu viel,
   Abstand zur Trust-Sektion (multicolumn-with-icons) zu gross.
   ============================================================ */

/* --- Sterne: mehr Abstand zum Text darunter --- */
/* Sterne sind ein ::before auf der P-Zeile (content: "★★★★★", */
/* display:block, h:28px, margin-bottom:4px). 4px ist zu wenig. */
[id*="social-proof"] .heading.subtext-lg::before {
  margin-bottom: 12px !important;
}
/* Grid-Gap zwischen Stars-P und H2 "Das sagen unsere Kunden" */
[id*="social-proof"] .title-wrapper .grid {
  gap: 16px !important;
}

/* --- Zitatzeichen komplett ausblenden --- */
/* Das blockquote::before (❝) wird von Flickity overflow:hidden */
/* angeschnitten und schimmert als Fragment durch. Kein Mehrwert, */
/* nur visueller Fehler. Komplett entfernen. */
[id*="social-proof"] blockquote::before {
  display: none !important;
}
/* Blockquote: padding-top reduzieren (kein Zitatzeichen mehr) */
[id*="social-proof"] blockquote {
  padding-top: 12px !important;
}

/* --- Title-Wrapper: kompakter Abstand zum Zitat --- */
[id*="social-proof"] .title-wrapper {
  margin-bottom: 0px !important;
}

/* --- Social-Proof Sektion: weniger Padding unten --- */
[id*="social-proof"] .section--padding {
  padding-bottom: 12px !important;
}
@media screen and (max-width: 767px) {
  [id*="social-proof"] .section--padding {
    padding-bottom: 8px !important;
  }
}
/* Dots: weniger Abstand oben */
[id*="social-proof"] .flickity-page-dots {
  margin-top: 12px !important;
}

/* --- Trust-Sektion: Padding symmetrisch 48/48 (CB-037, E5) --- */
[id*="multicolumn-with-icons"] .section--padding {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
@media screen and (max-width: 767px) {
  [id*="multicolumn-with-icons"] .section--padding {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

/* =============================================
   SECTION 45: Newsletter E-Mail-Input (Visibility Fix)
   Grund: Input-Feld war nahezu unsichtbar (4% Opacity BG
   auf Warm Greige). Weisser Hintergrund mit dezentem Border
   fuer klare Sichtbarkeit und WCAG-Konformitaet.
   ============================================= */
[id*="newsletter"] .input--fill,
[id*="newsletter"] input[type="email"] {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(26, 26, 26, 0.15) !important;
  color: #1a1a1a !important;
  transition: border-color 200ms ease !important;
}
/* CB-091 (04.05.2026): Placeholder-Regel entfernt — kollidierte mit
   theme.css :placeholder { color: transparent } für is-floating Inputs.
   Effekt: Placeholder + Floating-Label waren beide sichtbar (Doppeltext).
   Hintergrund/Border-Fix oben bleibt erhalten. */
/*
[id*="newsletter"] .input--fill::placeholder,
[id*="newsletter"] input[type="email"]::placeholder {
  color: #999 !important;
  opacity: 1 !important;
}
*/
[id*="newsletter"] .input--fill:focus,
[id*="newsletter"] input[type="email"]:focus {
  border-color: #1a1a1a !important;
  outline: none !important;
  box-shadow: none !important;
}

/* =============================================
   SECTION 46: CB-031 Scale-Effekt bei Hover deaktivieren
   theme.css L10108-10113 setzt --tw-scale-x/y: 1.05 auf
   .product-card__media:hover img. Override auf scale 1.
   Evidenz: NNGroup - haeufige Hover-Interaktionen sollen
   subtil und kurz sein, Scale erzeugt zweiteiligen Uebergang.
   ============================================= */
@media screen and (pointer: fine) {
  .product-card__media:hover > .media > img,
  .product-card__media:hover .product-card__model > img,
  .product-card__media:hover .product-card__secondary > img {
    --tw-scale-x: 1 !important;
    --tw-scale-y: 1 !important;
  }
}

/* =============================================
   SECTION 47: CB-031 Varianten-Hinweis auf Produktkacheln
   Zeigt "X Farbtoene" / "X Groessen" etc. unter dem Preis.
   Fuer alle Produkte mit > 1 Variante einer Option.
   ============================================= */
.product-card__variant-hint {
  font-size: 0.7rem !important;
  color: #666 !important;   /* CB-095 (17.05.2026): #999 (2.85:1) -> #666 (5.74:1) WCAG AA */
  letter-spacing: 0.03em !important;
  margin-top: 0.25rem !important;
}

/* ============================================ */
/* Section 48 — MOBILE FOLD OPTIMIERUNG         */
/* Header schmaler + Hero kompakter auf Mobile   */
/* Ziel: Brand-Tabs muessen above fold sichtbar  */
/* Stand: Maerz 2026                            */
/* ============================================ */

/* --- 48.1: Header-Padding auf Mobile reduzieren (32→16px) --- */
@media screen and (max-width: 767px) {
  .header.section--padding {
    --section-padding-top: 16px !important;
    --section-padding-bottom: 16px !important;
  }
}

/* --- 48.2: Hero-Textblock kompakter (weniger Padding + Button-Margin) --- */
@media screen and (max-width: 767px) {
  [id$="__slideshow"] .section--padding > .relative > .page-width.absolute {
    padding: 20px 20px 16px !important;
  }
  /* Button-Wrapper: weniger Abstand zur Subline */
  [id$="__slideshow"] .banner__box > div[style*="margin-top"] {
    margin-top: 12px !important;
  }
}

/* 48.3: ENTFERNT — Bild bleibt bei 38vh (Schultern-Anschnitt) */


/* --- 48.3: Hero H1 einzeilig auf Mobile --- */
/* "Medizinische Hautpflege" muss in eine Zeile passen. */
/* Verfuegbar: 390px - 40px padding = 350px. */
/* EB Garamond 700: bei 5.8vw (~22.6px auf iPhone) = ~310px breit. */
/* MUSS ID-Selektor verwenden weil Section 39 per ID-Selektor setzt. */
@media screen and (max-width: 767px) {
}

/* --- 48.4: Hero-Button schlank wie Tab-Pills --- */
/* Tab-Pills: padding 5px 14px, font-size 13px (Section 37, mobile). */
/* Hero-Button bekommt gleiche Proportionen. */
@media screen and (max-width: 767px) {
  [id$="__slideshow"] .banner__box .button,
  [id$="__slideshow"] .banner__box .button--secondary {
    padding: 8px 20px !important;
    font-size: 13px !important;
    min-height: auto !important;
    line-height: 1.2 !important;
  }
  /* ::after (Concept Theme sichtbarer BG-Layer) ebenfalls kompakt */
  [id$="__slideshow"] .banner__box .button::after,
  [id$="__slideshow"] .banner__box .button--secondary::after {
    border-radius: var(--rounded-button) !important;
  }
}


/* --- 48.5: Hero-Subline enger an H1 auf Mobile --- */
/* Section 39 setzt margin-top:24px per ID-Selektor (Desktop korrekt). */
/* Mobile braucht nur 4px Abstand (UX Best Practice: komprimiertes */
/* Whitespace auf Mobile, 8-12px Gap zwischen gestapelten Elementen). */
@media screen and (max-width: 767px) {
}


/* ============================================ */
/* Section 49 — TESTIMONIALS: Feste Hoehe       */
/* Flickity setzt .flickity-viewport height per  */
/* JS auf den aktuellen Slide. Kuerzere Slides   */
/* lassen die Sektion darunter hochspringen.     */
/* Fix: Jeder .testimonial Slide bekommt die     */
/* gleiche min-height. Flickity misst dann immer  */
/* die gleiche Hoehe egal welcher Slide aktiv.   */
/* Laengstes Zitat (Julia B.) = ~4 Zeilen +      */
/* cite. Blockquote padding-top ~12px.           */
/* Stand: Maerz 2026                            */
/* ============================================ */

/* Alle Slides gleich hoch: Flickity misst .testimonial */
[id*="social-proof"] .testimonial {
  min-height: 180px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Mobile: etwas mehr wegen Umbruch */
@media screen and (max-width: 767px) {
  [id*="social-proof"] .testimonial {
    min-height: 200px !important;
  }
}

/* ============================================ */
/* Section 50 — EXPERTISE kompakter auf Mobile   */
/* Bild 180px, enger Textbereich, reduzierte     */
/* Innenabstaende zwischen Heading/Text/Button.   */
/* theme.css: .rich-text padding-block-start 40px */
/* theme.css: .rich-text>*+* margin 40px          */
/* → beides auf 12px/10px reduziert.              */
/* Stand: Maerz 2026                            */
/* ============================================ */
@media screen and (max-width: 767px) {
  /* Bild flacher: 250px -> 180px */
  [id*="expertise"] media-element.image-with-text__image {
    max-height: 180px !important;
    height: 180px !important;
  }
  [id*="expertise"] media-element.image-with-text__image .media {
    height: 180px !important;
  }

  /* Abstand Bild -> Heading: 40px -> 12px */
  [id*="expertise"] .image-with-text__item .rich-text {
    padding-block-start: 12px !important;
  }

  /* Abstand zwischen Heading, Text, Button: 40px -> 10px */
  [id*="expertise"] .image-with-text .rich-text > * + *:not(.spacing-section) {
    margin-block-start: 10px !important;
  }

  /* Text: engere Zeilenhoehe */
  [id*="expertise"] .image-with-text__text .rte p,
  [id*="expertise"] .rich-text .rte p {
    line-height: 1.45 !important;
    margin-bottom: 0.5em !important;
  }
}

/* Section 51: ENTFERNT — Fix direkt in newsletter.liquid (Template hat ID-Spezifitaet) */


/* ============================================ */
/* Section 52 — "Alle anzeigen" Icon ausblenden  */
/* Theme rendert ein newspaper-Icon hardcoded.   */
/* Text allein ist selbsterklaerend, Icon ist     */
/* visuelles Rauschen. SVG im .btn-text hidden.  */
/* Stand: Maerz 2026                            */
/* ============================================ */
[id*="brand-tabs"] .icon-with-text .btn-text svg,
[id*="concern-tabs"] .icon-with-text .btn-text svg {
  display: none !important;
}


/* ============================================ */
/* Section 53 — CB-032: Mobile Touch-Target Fix */
/* ALLE interaktiven Pills auf 44px Mindest-    */
/* hoehe (Mobile). Apple HIG / WCAG AA.         */
/* Stand: Maerz 2026                            */
/* ============================================ */
@media screen and (max-width: 767px) {

  /* 53.1 — Tab-Navigation Pills                */
  /* Ueberschreibt Section 37 min-height:auto   */
  [id*="brand-tabs"].featured-collections .tab__item,
  [id*="concern-tabs"].featured-collections .tab__item {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 53.2 — "Alle anzeigen" Links               */
  /* Unterhalb der Collections                   */
  [id*="brand-tabs"] .icon-with-text,
  [id*="concern-tabs"] .icon-with-text {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* 53.3 — Hero/Slideshow CTA Buttons           */
  /* Ueberschreibt Section 48.4 min-height:auto  */
  [id$="__slideshow"] .banner__box .button,
  [id$="__slideshow"] .banner__box .button--secondary {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 53.4 — Expertise & Beratung CTA Buttons     */
  [id*="expertise"] .rich-text .button,
  [id*="beratung-cta"] .rich-text .button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* ============================================ */
/* Section 54 — CB-032: CTA Chevron-Affordance  */
/* Reiner CSS-Pfeil (border-basiert) auf den    */
/* Haupt-CTAs. 9px / 1px = filigran.            */
/* Stand: Maerz 2026                            */
/* ============================================ */

/* 54.1 — Chevron-Pfeil Basis                    */
[id*="slideshow"] .button .btn-text::after,
[id*="beratung-cta"] .button .btn-text::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
  margin-left: 10px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

/* 54.2 — Hover: Pfeil gleitet nach rechts       */
[id*="slideshow"] .button:hover .btn-text::after,
[id*="beratung-cta"] .button:hover .btn-text::after {
  transform: rotate(45deg) translate(2px, -2px);
}

/* ============================================ */
/* Section 55 — CB-034: Announcement Bar Dezent */
/* Subtilere Optik: weicherer Text, feinere     */
/* Typografie, Luxury-Spacing.                   */
/* Stand: Maerz 2026                            */
/* ============================================ */
/* 55.1 — Topbar Hintergrund leicht aufhellen   */
.topbar-section,
.topbar-section .topbar {
  background-color: #F2EDE6 !important;
}
/* 55.1b — Pseudo-Element ueberdeckt background-color, muss auch ueberschrieben werden */
.topbar-section .topbar::before {
  background-color: #F2EDE6 !important;
  background: #F2EDE6 !important;
}
/* 55.2 — Text weicher (warm taupe statt #333)  */
.announcement-bar,
.announcement-bar .announcement-bar__message,
.announcement-bar p,
.announcement-bar span,
.announcement-bar a {
  color: #635E5A !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
}
/* 55.3 — Icons gleicher Soft-Ton               */
.announcement-bar svg,
.announcement-bar .icon {
  color: #635E5A !important;
}
/* 55.4 — Subtile Trennlinie unten              */
.topbar-section {
  border-bottom: 1px solid #E8E3DB !important;
}

/* ============================================ */
/* Section 56 — CB-034b: Typography Refinement  */
/* Letter-Spacing + Weight-Hierarchy fuer        */
/* EB Garamond. UI/UX Pro Max Empfehlung.        */
/* Stand: Maerz 2026                            */
/* ============================================ */

/* 56.1 — H1 Hero: Tracking normalisieren       */
/* Theme setzt tracking-heading: -0.04em = eng.  */
/* EB Garamond braucht 0 bis +0.01em bei 64px.  */
h1.heading,
.banner__heading,
h1.title-xl {
  letter-spacing: 0 !important;
}

/* 56.2 — H2 Section-Headings: Gewicht erhoehen */
/* "Produkte nach Marke", "Produkte nach Haut-  */
/* problem" etc. brauchen mehr Praesenz.         */
.section .section-heading .heading.title-md,
h2.title-md {
  font-weight: 500 !important;
}

/* 56.3 — Bestseller-Badge Desktop kleiner       */
/* Ueberlappt Produktbilder bei Face Shield etc. */
@media screen and (min-width: 768px) {
  .product-card__badge,
  .badge--sale,
  .badge--custom,
  [class*="product"] .badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
    letter-spacing: 0.5px !important;
  }
}


/* ==========================================================
   57 — CB-034b: Mobile Image Heights & Positioning
   Beide Image-with-Text Sektionen auf 16:9-Look mobil
   ========================================================== */

/* Section 57 alt: ENTFERNT — ersetzt durch Section 58 */

/* ==========================================================
   58 — Announcement Bar Marquee: NUR Mobile
   Desktop wird von Section 21 statisch gehandhabt
   ========================================================== */
@media screen and (max-width: 767px) {
  /* 58.1 — Abstand zwischen Marquee-Items (nur Mobile) */
  .scrolling-text .scrolling-text__item {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* 58.2 — Marquee breiter als Viewport, damit Animation laeuft */
  .scrolling-text .marquee {
    min-width: 200% !important;
    gap: 0.75rem !important;
  }
}
/* ============================================================
   57 — CB-034b: Announcement Bar Punkte vollstaendig entfernen
   ============================================================ */
/* 57.1 — Alle Trennpunkte in der Announcement Bar ausblenden */
.marquee.with-dot .scrolling-text__item.with-text::before {
  display: none !important;
}


/* ============================================================
   59 — CB-034b: Expertise-Sektion Abstand Bild-zu-Titel reduzieren
   ============================================================ */
/* 59.1 — Weniger Abstand zwischen Portrait-Bild und Text auf Mobile */
@media screen and (max-width: 767px) {
}


/* ============================================================
   58 — FINAL: Beratungs-CTA + Expertise Bilder (CB-034b)
   Desktop: KI-Bild 400px, object-position center 20%
   Mobile: KI-Bild 220px, Portrait 250px
   ============================================================ */
/* beratung-cta Desktop: entfernt — adapt zeigt Original-Ratio */
@media screen and (max-width: 767px) {
}

/* ================================================
   60 — FOOTER - Touch-Targets Mobile (CB-036, E1)
   Audit CB-033: Touch-Targets nur 18px, Minimum 44px (Apple HIG)
   ================================================ */
@media screen and (max-width: 749px) {
  /* 60.1 — Footer-Nav-Links: Touch-Target 36px + 4px Gap = 40px effektiv */
  .footer details ul li {
    min-height: 36px;
    display: flex;
    align-items: center;
  }
  /* 60.1b — Link-Gap kompakter (Theme-Default: 10px) */
  .footer details ul {
    gap: 4px !important;
  }

  /* 60.2 — Akkordeon-Trigger: Touch-Target auf 44px */
  .footer details summary.details__summary {
    min-height: 44px;
  }
}

/* ================================================
   61 — FOOTER - Heading-Hierarchie (CB-036, E2)
   Audit CB-033: Headings nicht von Links unterscheidbar
   ================================================ */
/* 61.1 — Footer-Headings: DM Sans, uppercase, letter-spacing
   Spezifizitaet: ID-Selektor noetig, weil Theme-Inline-CSS
   #shopify-section-...__footer .footer__left .heading (1-2-0)
   mit !important font-size/weight/transform/spacing setzt. */
#shopify-section-sections--29134311915851__footer .footer details summary .heading {
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}

/* 61.2 — Abstand Heading zu Links (nur Desktop) */
@media screen and (min-width: 750px) {
  #shopify-section-sections--29134311915851__footer .footer details summary.details__summary {
    margin-bottom: 16px !important;
  }
}
@media screen and (max-width: 749px) {
  #shopify-section-sections--29134311915851__footer .footer details summary.details__summary {
    margin-bottom: 0 !important;
  }
}

/* ================================================
   62 — FOOTER - Policy-Links Mindestgroesse (CB-036, E3)
   Audit CB-033: 11.2px unter 12px-Minimum, Zielgruppe 35-55
   ================================================ */
/* 62.1 — Policy-Links auf 12px Minimum */
.footer-copyright .rte.credits small,
.footer-copyright .rte.credits small a {
  font-size: 12px !important;
}
/* ================================================
   63 — FOOTER - Trust-Bar Typografie (CB-037, E4)
   Audit CB-033: 18.54px ist kein Systemwert, zu gross
   DCS 4c: Typografie-Hierarchie einhalten
   ================================================ */
/* 63.1 — ENTFERNT 27.05.2026
   Tote Regel: Section-ID --29134311915851 wurde durch Theme-Update am 06.05.2026
   ungueltig. Neue Section-ID --30097419174219. Ersetzt durch Section 122 unten. */

/* 63.2 — Trust-Bar Body-Text: 14px/400/1.5 */
.text-with-icons.with-background .column__text,
.text-with-icons.with-background .column__text p {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* ================================================
   64 — FOOTER - Social Icons in Copyright-Zeile (CB-038, E2)
   Verschoben aus footer__right in footer-copyright
   ================================================ */
/* 64.1 — Social Icons Styling in Copyright-Bar */
.footer-copyright__socials {
  order: 2;
}
.footer-copyright__socials .social-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-copyright__socials .social-icons a {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.footer-copyright__socials .social-icons a:hover {
  opacity: 1;
}
@media screen and (max-width: 749px) {
  .footer-copyright__socials {
    order: 0;
  }
}

/* ================================================
   65 — FOOTER - footer__right ausblenden (CB-038, E2)
   Social Icons sind jetzt in Copyright-Zeile
   ================================================ */
#shopify-section-sections--29134311915851__footer .footer__right:empty,
#shopify-section-sections--29134311915851__footer .footer__right:not(:has(.footer__newsletter)) {
  display: none !important;
}

/* ================================================
   66 — FOOTER - Spalten zentriert (CB-038, E5)
   Spaltentext zentrieren, damit mittlere Spalte
   optisch unter dem Logo sitzt
   ================================================ */
@media screen and (min-width: 750px) {
  #shopify-section-sections--29134311915851__footer .footer__accordions {
    justify-content: center !important;
    gap: 48px !important;
  }
  #shopify-section-sections--29134311915851__footer .footer details {
    text-align: center;
  }
  /* 66.2 — Summary (Heading-Zeile) zentrieren */
  #shopify-section-sections--29134311915851__footer .footer details summary.details__summary {
    justify-content: center !important;
    text-align: center !important;
  }
  #shopify-section-sections--29134311915851__footer .footer details summary .heading {
    text-align: center !important;
  }
  /* 66.3 — Links zentrieren */
  #shopify-section-sections--29134311915851__footer .footer details ul {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* ================================================
   67 — FOOTER - Bottom-Padding reduzieren (CB-038, E6)
   48px unten ist zu viel Leerraum vor Copyright-Bar
   ================================================ */
#shopify-section-sections--29134311915851__footer .section--padding {
  padding-bottom: 24px !important;
}


/* ============================================
   Section 70 — VARIANT PICKER: PILL-BUTTONS (CB-041)
   Evidenz: Dermalogica + Augustinus Bader nutzen
   horizontale Pills statt Dropdown.
   ============================================ */

/* Varianten horizontal als Pill-Reihe */
.product__info variant-picker,
.product__info .variant-picker {
  flex-wrap: wrap;
  gap: 8px;
}

/* Einzelne Variante: Pill-Stil */
.product__info variant-picker label,
.product__info .variant-picker__option label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 60px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  border: 1px solid #d5d5d5 !important;
  background: transparent !important;
  color: #1a1a1a !important;
  cursor: pointer !important;
  min-height: 36px !important;
  transition: border-color 150ms ease !important;
}

/* Aktive/selektierte Variante */
.product__info variant-picker input:checked + label,
.product__info .variant-picker__option input:checked + label {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border-color: #1a1a1a !important;
}

/* Hover (nur Desktop) */
@media (hover: hover) {
  .product__info variant-picker label:hover,
  .product__info .variant-picker__option label:hover {
    border-color: #1a1a1a !important;
  }
}

/* Varianten-Label */
.product__info .variant-picker__heading {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #666 !important;
  margin-bottom: 8px !important;
}


/* ============================================
   Section 71 — DELIVERY STATUS (CB-041)
   Evidenz: +24% Conversion durch Lieferdatum
   (ShipperHQ). Pattern: gruener Dot + Text.
   HINWEIS: Braucht Liquid-Block fuer Inhalt.
   ============================================ */

.product__info .delivery-status {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  color: #1a1a1a !important;
  margin-bottom: 12px !important;
}

.product__info .delivery-status::before {
  content: "" !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #1E6823 !important;
  flex-shrink: 0 !important;
}

.product__info .delivery-status strong {
  font-weight: 600 !important;
}


/* ============================================
   Section 72 — ATC-BUTTON HOEHE (CB-041)
   Evidenz: NNGroup 52-56px Touch Target.
   Aktuell 50px -> 54px.
   ============================================ */

.product__info .product-form__submit,
.product__info button[name="add"] {
  min-height: 54px !important;
}


/* ============================================
   Section 73 — TRUST-SIGNALE UNTER ATC (CB-041)
   Evidenz: Return-Policy nah am ATC = +23% ATC.
   Augustinus Bader Pattern: 3 Zeilen vertikal.
   HINWEIS: Braucht Liquid-Block fuer Inhalt.
   ============================================ */

.product__info .buybox-trust {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid #e5e5e5 !important;
}

.product__info .buybox-trust__item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  color: #666 !important;
  line-height: 1.3 !important;
}

.product__info .buybox-trust__item svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: #1a1a1a !important;
}

.product__info .buybox-trust__item strong {
  font-weight: 600 !important;
  color: #1a1a1a !important;
}


/* ============================================
   Section 74 — PAYMENT ICONS POSITION (CB-041)
   Abstand zu ATC reduzieren (von 280px auf 16px
   nach Trust-Block).
   ============================================ */

.product__info .shopify-payment-button ~ [class*="payment-icon"],
.product__info .shopify-payment-button ~ [class*="accepted-payments"] {
  margin-top: 16px !important;
}

.product__info [class*="payment-icon"] svg,
.product__info [class*="payment-icon"] img {
  height: 20px !important;
  width: auto !important;
}


/* ============================================
   Section 75 — STICKY ATC BAR MOBILE (CB-041)
   Evidenz: +5-15% Conversion (Baymard, GrowthRock).
   Erscheint wenn Original-ATC scrollt.
   HINWEIS: Braucht JS (IntersectionObserver).
   ============================================ */

@media screen and (max-width: 767px) {
  .sticky-atc-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    background: #ffffff !important;
    border-top: 1px solid #e5e5e5 !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    transform: translateY(100%) !important;
    transition: transform 250ms ease !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08) !important;
  }

  .sticky-atc-bar.is-visible {
    transform: translateY(0) !important;
  }

  .sticky-atc-bar__price {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .sticky-atc-bar__button {
    flex: 1 !important;
    min-height: 44px !important;
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    padding: 0 20px !important;
  }

  .sticky-atc-bar__button:hover {
    background: #333333 !important;
  }

  body.sticky-atc-active {
    padding-bottom: 60px !important;
  }
}

@media screen and (min-width: 768px) {
  .sticky-atc-bar {
    display: none !important;
  }
}


/* ============================================ */
/* Section 76 — EB Garamond Korrektur           */
/* IST: font-weight 500, color #333333          */
/* SOLL: font-weight 700, color #1a1a1a         */
/* Stand: 19. Maerz 2026                        */
/* ============================================ */

h1, h2,
.h1, .h2 {
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

/* ============================================ */
/* Section 77 — Buybox Buttons 6px Radius       */
/* ATC + Dynamic Checkout nur in der Buybox      */
/* Global bleibt Pill                            */
/* Stand: 19. Maerz 2026                        */
/* ============================================ */

/* CSS-Variable auf Buybox-Ebene ueberschreiben.
   Shopify Dynamic Checkout Buttons (PayPal, Shop Pay)
   rendern in einem iframe und lesen --buttons-radius
   vom Parent-Element. Nur so greift 6px im iframe. */
.product-form-wrapper {
  --buttons-radius: 6px !important;
  --rounded-button: 6px !important;
}

/* ATC-Button + Unbranded Checkout: 6px */
.product-form-wrapper .button,
.product-form-wrapper .button::after {
  border-radius: 6px !important;
}

/* ============================================ */
/* Section 78 — Bestaetigte Fixes (kein Design) */
/* Stand: 19. Maerz 2026                        */
/* ============================================ */

/* Mobile Dock auf Produktseiten ausblenden */
/* Evidenz: Premium-Skincare-Benchmarks (Paula's Choice, Augustinus Bader, */
/* The Ordinary) nutzen keinen Mobile Dock auf Produktseiten. */
/* Sticky ATC braucht den vollen unteren Bereich. */
.template-product .mobile-dock-section {
  display: none !important;
}

/* Sticky ATC Schatten fuer Sichtbarkeit */
.product-sticky-form__card {
  box-shadow: 0 -4px 16px rgba(0,0,0,0.12) !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
}

/* ============================================ */
/* Section 79 - Wirkstoffe-Cards: Weiss + Border */
/* Stand: 19. Maerz 2026                         */
/* ============================================ */

.wirkstoffe-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
}

/* ============================================ */
/* Section 80 - Preis-Block Spacing + MwSt-Stil  */
/* Stand: 19. Maerz 2026                         */
/* ============================================ */

/* Installment-Formular ausblenden */
.product__price .installment {
  display: none !important;
}

/* Preis-Block Grid-Gap reduzieren */
.product__price {
  gap: 4px !important;
}

/* MwSt-Zeile dezent */
.product__tax {
  margin-block-start: 0 !important;
  color: #666 !important;  /* CB-095 (17.05.2026): #999 -> #666 WCAG AA fuer rechtlich relevante MwSt-Info */
  font-size: 0.8125rem !important;
}

/* ============================================ */
/* Section 81 - Color Swatch Fix (CB-047)        */
/* Stand: 20. Maerz 2026                         */
/* ============================================ */

/* 81a: Swatch-Kreis Farbe anzeigen */
.color-swatch::before {
  background: var(--swatch-background, transparent) !important;
}

/* 81b: Selektierter Swatch - Einfacher Ring (CB-049 Fix v2) */
/* Max-Specificity + alle moeglichen Selektoren */
variant-picker input:checked + .color-swatch,
.swatches input:checked + .color-swatch,
.product__info input:checked + .color-swatch,
label.color-swatch.cursor-pointer.block.relative {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 81c: Selektierter Swatch ::before - Farbe nicht ueberdecken */
.color-swatch[aria-checked="true"]::before,
input:checked + .color-swatch::before,
.color-swatch.is-selected::before {
  background: var(--swatch-background, transparent) !important;
}

/* 81d: Schwimmende Magnet-Animation deaktivieren (verifiziert) */
.swatches magnet-element {
  --magnet-x: 0 !important;
  --magnet-y: 0 !important;
  --magnet-rotate: 0 !important;
  transform: none !important;
}

/* ============================================ */
/* Section 82 - Button Hover Timing 250ms        */
/* Evidenz: 150-300ms optimal                    */
/* Stand: 20. Maerz 2026                         */
/* ============================================ */

.button .btn-fill,
.button [data-fill] {
  transition: background-color 0.25s cubic-bezier(0.3,1,0.3,1) !important;
}

.button .btn-text {
  transition: color 0.25s cubic-bezier(0.3,1,0.3,1) !important;
}

.button,
.button--primary,
.button--secondary {
  transition: box-shadow 0.25s cubic-bezier(0.3,1,0.3,1),
              opacity 0.25s cubic-bezier(0.3,1,0.3,1) !important;
}



/* ============================================ */
/* Section 83 — Trust-Bar Titel Typografie       */
/* 13px statt 15px, subordinat zu Sektions-H2    */
/* Stand: 20. Maerz 2026                         */
/* ============================================ */

/* === SECTION 122 — Trust-Bar Typografie Single-Source-of-Truth (27.05.2026) ===
   
   Problem: Vorher mehrere widerspruechliche Regeln (Section 63.1, 63.2, 108)
   ergaben invertierte Hierarchie - column__title (13px) kleiner als column__text (16px).
   UX-Konsens: Headline immer >= Body. Niels-Feedback 27.05.2026: zu gross und falsche Hierarchie.
   
   Loesung: EINE Regel pro Element. Title 15px (subordinat zu Body-Sektionen, dominant zu Body-Text),
   Body 14px (sekundaere Info-Karte, kleiner als Title). Beide kleiner als Content-Body (16px),
   weil Trust-Sektion subordinat zu Content sein soll.
   
   Selektor [id*="multicolumn-with-icons"] greift auf alle Theme-Updates - keine
   Section-ID-Bindung mehr. Tote Section-ID --29134311915851 entfernt. */

/* 122.1 — Trust-Bar Title: 15px / weight 600 / DM Sans */
[id*="multicolumn-with-icons"] .text-with-icons .column__title,
[id*="multicolumn-with-icons"] .column .column__title {
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  line-height: 1.3 !important;
}

/* 122.2 — Trust-Bar Body-Text: 14px / weight 400 / DM Sans */
[id*="multicolumn-with-icons"] .text-with-icons .column__text,
[id*="multicolumn-with-icons"] .text-with-icons .column__text p,
[id*="multicolumn-with-icons"] .column .column__text,
[id*="multicolumn-with-icons"] .column .column__text p {
  font-size: 14px !important;
  font-weight: 400 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  line-height: 1.5 !important;
}


/* ============================================ */

/* ============================================ */

/* ============================================ */
/* Section 84 — Variant Double-Buffer Flash Fix  */
/* theme.js viewTransition() fuegt neuen Node    */
/* BEFORE dem alten ein, dann setzt display:none. */
/* Zwischen insertBefore und display:none ist     */
/* kurz beides sichtbar. Fix: Wenn ein zweiter   */
/* variant-picker (Geschwister) existiert, den    */
/* AELTEREN sofort verstecken.                    */
/*                                               */
/* Der alte bekommt deduplizierte IDs mit         */
/* Timestamp-Suffix. Der neue hat originale IDs.  */
/* Wir nutzen :has() + display:none auf dem       */
/* NACHFOLGENDEN Geschwister (= der alte).        */
/* Stand: 20. Maerz 2026                         */
/* ============================================ */

/* Wenn zwei variant-picker Geschwister sind:
   Der ZWEITE (alte, mit deduped IDs) wird versteckt */


/* Fallback: Auch fuer andere Elemente die dupliziert werden */
product-info [id*="Price-"] + [id*="Price-"] {
  display: none !important;
}

/* ============================================ */
/* Section 38: Accordion Flash-Fix (CB-062)    */
/* ============================================ */
/* Problem 1: iOS zeigt grauen Tap-Highlight    */
/* auf <summary> beim Tippen (-webkit default). */
/* Fix: tap-highlight-color transparent.        */
/*                                              */
/* Problem 2: Safari/WebKit ::details-content   */
/* wechselt content-visibility synchron beim    */
/* Setzen von [open], was 1-Frame-Flash erzeugt.*/
/* Fix: content-visibility immer visible,       */
/* geschlossen: height:0 + overflow:hidden.     */
/* Stand: 30. Maerz 2026                       */
/* ============================================ */

/* Fix 1: iOS Tap-Highlight entfernen */
.accordion summary,
details[is="accordion-details"] > summary,
.faq summary {
  -webkit-tap-highlight-color: transparent;
}

/* Fix 2: Native ::details-content Rendering */
details[is="accordion-details"]::details-content {
  content-visibility: visible !important;
  transition: none !important;
}

details[is="accordion-details"]:not([open])::details-content {
  height: 0 !important;
  overflow: hidden !important;
}

/* ============================================ */
/* Section 85 - Sticky Buy Box: 6px Radius      */
/* Angleichung an Buybox (Section 77).           */
/* Theme-Default: Pill (3.75rem). Auf Mobile     */
/* wird der Button 44x44 und damit ein Kreis.    */
/* Fix: gleicher 6px-Radius wie Buy Box.         */
/* Stand: 31. Maerz 2026                         */
/* ============================================ */

.product-sticky-form {
  --buttons-radius: 6px !important;
  --rounded-button: 6px !important;
}

.product-sticky-form .button,
.product-sticky-form .button::after {
  border-radius: 6px !important;
}

/* ============================================ */
/* Section 87 — NAV-BUTTONS: BLOCK-RADIUS       */
/* Pill (rounded-full/9999px) auf Block-Radius   */
/* (10-20px responsiv) reduzieren.               */
/* Evidenz: Corner Dynamics Principle -           */
/* strukturelle Nav-Elemente profitieren von      */
/* moderater Rundung, nicht von Pill-Form.        */
/* Pills bleiben fuer Selection-Elemente          */
/* (Filter, Tabs, Variant-Picker).               */
/* Stand: 31. Maerz 2026                         */
/* ============================================ */

/* Summary-Trigger der Desktop-Navigation */
.header__menu summary.rounded-full {
  border-radius: var(--rounded-block) !important;
}

/* ::after (Concept Theme sichtbarer BG-Layer) */
.header__menu summary.rounded-full::after {
  border-radius: var(--rounded-block) !important;
}

/* magnet-element innerhalb der Summary */
.header__menu summary.rounded-full magnet-element {
  border-radius: var(--rounded-block) !important;
}



/* Section 87: Nav-Buttons Block-Radius */
/* Theme nutzt .menu__item + .btn-duplicate fuer die sichtbare Pill-Form. */
/* Beide erben var(--rounded-button) = 3.75rem. Override auf --rounded-block. */
.header__menu .menu__item,
.header__menu .menu__item .btn-duplicate,
.header__menu summary.rounded-full {
  border-radius: var(--rounded-block) !important;
}


/* ============================================
   Navigation: Trennlinie ueber "Sets & Programme"
   CB-064: ::before-Pseudo mit margin 0 32px fuer
   symmetrische Linie (gleicher Abstand links/rechts).
   Animation ausgeklammert (separate Bearbeitung).
   ============================================ */

/* Desktop: border-top vom <li> und <a> entfernen */
.header__menu .list-menu > li:first-child .dropdown__nav > li:last-child,
.dropdown__nav > li:has(a[href*="behandlungsprogramme"]) {
  border-top: none !important;
  margin-top: 4px !important;
  padding-top: 0 !important;
}
.dropdown__nav > li:has(a[href*="behandlungsprogramme"]) a[href*="behandlungsprogramme"] {
  border-top: none !important;
}

/* Desktop: Symmetrische Linie via ::before (margin = p-padding 32px) */
.dropdown__nav > li:has(a[href*="behandlungsprogramme"])::before {
  content: '' !important;
  display: block !important;
  margin: 0 32px 8px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
  padding-top: 4px !important;
}

/* Desktop: Weniger Platz unter "Sets & Programme" */
.header__menu .list-menu > li:first-child .dropdown__container {
  padding-bottom: 16px !important;
}

/* Mobile Drawer: border-top vom Container entfernen */
/* ENTFERNT 16.05.2026: war Trenner-Hack für Behandlungsprogramme — Menu wurde umgebaut, Selektor matchte nichts mehr → Pseudo-Element-Strich oberhalb von "Produkte" sichtbar */

/* Mobile Drawer: Symmetrische Linie via ::before */
/* li hat padding-left: 20px, padding-right: 0 — */
/* daher margin-right: 20px fuer gleiche Raender  */


/* ============================================
   CB-064b: Mobile Drawer Sub-Items kompakter
   Evidenz: Baymard + NN/g — 10 Items muessen
   sichtbar sein. Padding reduziert, Scrolling
   war bereits vorhanden (drawer__scrollable).
   ============================================ */

/* Sub-Item Padding reduzieren (10px → 7px) */
.drawer__submenu .drawer__menu-item {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

/* Submenu-Bereich: weniger padding-bottom */
.drawer__submenu .drawer__scrollable {
  padding-bottom: 16px !important;
}

/* Back-Button im Submenu: kompakter, ohne Trennlinie */
.drawer__submenu > button[data-close] {
  padding-top: 8px !important;
  padding-bottom: 12px !important;
  border-bottom: none !important;
}

/* ============================================
   CB-064c: REVERTIERT (31.03.2026)
   Account-Icon im Mobile Header verursachte
   Platzproblem: Logo + 3 Icons = zu eng.
   Evidenz (NNGroup, Baymard, Branchenstandard):
   Max 3 Icons auf Mobile (Hamburger, Lupe, Cart).
   Account-Zugang bleibt im Drawer-Footer.
   ============================================ */

/* CB-064d: Drawer-Footer ausblenden wenn Submenu offen.
   Grund: Login-Button ueberdeckt letzten Submenu-Punkt
   ("Sets & Programme"). Im Hauptmenue bleibt er sichtbar. */
.drawer__content nav:has(details[open]) ~ .drawer__footer {
  display: none !important;
}

/* CB-064e: Trennlinie zwischen X-Button und Menuepunkten entfernen.
   Quelle: .drawer__close::after hat border 1px solid rgba(26,26,26,0.1). */
.drawer__close::after {
  border: none !important;
}
/* Auch Back-Buttons in allen Submenus */
.drawer__submenu > button[data-close] {
  border-bottom: none !important;
}

/* ============================================ */
/* Section 88 — NAV-DROPDOWN: SCHNELLERE        */
/* ANIMATIONEN                                   */
/* Evidenz: 150-300ms fuer Micro-Interactions    */
/* (ui-ux-pro-max, Material Design, Apple HIG).  */
/* Items-Stagger (1000ms) ist dekorativ ohne     */
/* funktionalen Nutzen. Container-Fade (300ms)   */
/* bleibt: gibt dem Oeffnen Geschmeidigkeit.     */
/* Stand: 31. Maerz 2026                         */
/* ============================================ */

/* 88.1 — Dropdown-Items: sofort sichtbar, kein Stagger */
.header__menu .dropdown__nav > li {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0s !important;
}

/* 88.2 — Nav-Button Hover (btn-duplicate): 250ms statt 500ms */
.header__menu .menu__item .btn-duplicate {
  transition-duration: 0.25s !important;
}
.header__menu .menu__item [data-text] {
  transition-duration: 0.25s !important;
}

/* 88.3 — Close-Delay entfernen: Dropdown schliesst sofort */
.header__menu .dropdown {
  transition-delay: 0s !important;
}
.header__menu .dropdown__nav > li {
  transition-delay: 0s !important;
}



/* Section 88: Nav-Dropdown schnellere Animationen */
/* Items sofort sichtbar, Hover 250ms, kein Close-Delay */
.header__menu .dropdown__nav > li {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0s !important;
}
.header__menu .menu__item .btn-duplicate {
  transition-duration: 0.25s !important;
}
.header__menu .menu__item [data-text] {
  transition-duration: 0.25s !important;
}
.header__menu .dropdown {
  transition-delay: 0s !important;
}



/* ===== Männer-Landingpage Fixes (CB-062 V12) ===== */

/* Fix: lg:grid--3 class missing in theme.css */
@media screen and (min-width: 1024px) {
  .text-with-icons.lg\:grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Fix: Testimonials page-width--narrow zu schmal */
[id$="__social-proof"] .page-width--narrow {
  max-width: var(--page-width);
}

/* Fix: Body-Text in multicolumn-with-icons von 13px auf 16px */
.text-with-icons .column__content .rte {
  font-size: 1rem;
  line-height: 1.6;
}

/* Fix: Gold-Sterne für social-proof auf ALLEN Seiten (nicht nur Homepage) */
[id$="__social-proof"] .title-wrapper .heading.normal-case {
  color: #e8b829 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  letter-spacing: 4px !important;
  white-space: nowrap !important;
  display: block !important;
}
[id$="__social-proof"] .title-wrapper .heading.normal-case::before {
  display: none !important;
}



/* ─────────────────────────────────────────────────
   CB-090: Hero-Heading title-xl Cap
   Theme-Default: clamp(20px, 6.737vw, 256px) → auf 1920px = 129px (zu groß)
   Fix: cap auf max ~80px, sauber auf allen Viewports
   ─────────────────────────────────────────────────  */
.banner__box .heading.title-xl,

@media (max-width: 767px) {
  .banner__box .heading.title-xl,
  .slideshow-content .banner__box .title-xl {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }
}


/* =============================================
   SECTION 89: main-collection-banner ausblenden
   ---------------------------------------------
   Das Concept Theme injiziert auf jedem Custom-
   Collection-Template automatisch eine "main-
   collection-banner" Section mit H1 + Breadcrumb
   aus dem Default-Template (collection.json).
   Diese Section laesst sich ueber das Custom-
   Template-JSON nicht ueberschreiben - getestete
   Patches mit show_image:false und leeren Blocks
   wurden vom Theme ignoriert (06.05.2026, 3 Tests).

   Konsequenz vor Fix: Auf allen 41 Custom-
   Collection-Templates rendern doppelte H1
   und doppelte Breadcrumbs (oben Theme-Default,
   unten unsere eigenen breadcrumb_nav + hero_banner).

   Loesung: Die Theme-Default-Section global
   ausblenden. Unsere eigenen Hero und Breadcrumb
   bleiben sichtbar.

   Falls eine Default-Collection ohne Custom-
   Template gebraucht wird (aktuell nicht der Fall),
   muss diese Regel ueberschrieben werden.
   ============================================= */
.shopify-section.collection-banner-section {
  display: none !important;
}

/* =============================================
   SECTION 89 — FAQ Clean Look + Linksbündig
   Stand: 12.05.2026 (Bugfix: Padding entfernt)
   
   Migrationskontext: Beim Theme-Update vom 04.05.2026 wurde das Concept Theme
   refactored. Die alte FAQ-Section nutzte direkt einkopiertes Custom-CSS in
   sections/faq.liquid (~1.6KB) für Clean Look + Linksbündigkeit. Das wurde
   beim Update überschrieben.
   
   Neue Theme-Struktur: .faqs (Container) + .with-border (Stil-Modifier).
   theme.css definiert:
   - border + border-radius zwischen Items
   - padding: clamp(var(--sp-6), 2.315vw, var(--sp-12)) var(--sp-5)
   
   Der horizontale Padding (var(--sp-5) ≈ 20px) verursacht Einrückung der
   Fragen vom linken Container-Rand. Im Backup war das explizit auf 0.
   
   Wirkt auf alle 42+ Templates mit FAQ-Sektion shopweit.
   ============================================= */
.faqs.with-border .faq {
  border: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.faqs.with-border .faq .details__summary span {
  text-align: left !important;
}

/* =============================================
   SECTION 90 — Filter-Link Button-Styling
   Stand: 12.05.2026 (Bugfix: Strikethrough-Problem)
   
   Kontext: Multicolumn-with-icons Section (Concern-Cards auf Audience-Hub-Pages)
   hat keine Block-Setting für Buttons. Shopify-Richtext erlaubt keine class-
   Attribute auf <a>-Tags. Lösung: Filter-Links im Card-Text werden via CSS
   zu Buttons gestyled.
   
   WICHTIG (Strikethrough-Fix): Concept Theme rendert .rte a mit einem
   animierten Underline-Pattern über background-image (linear-gradient).
   Position: var(--reversed-link-gap) = min(100%, 1.35em) vom Top.
   
   Bei normalem Text landet diese Linie am unteren Rand = Underline.
   Bei Button mit padding (10px+) landet sie mittig im Text = sieht aus
   wie Strikethrough!
   
   Lösung: background-image: none überschreiben, NICHT nur background-color
   setzen. background-color allein lässt den Gradient als sichtbaren Strich.
   ============================================= */
.text-with-icons .rte a[href*="?filter.p"],
.multicolumn-card .rte a[href*="?filter.p"] {
  display: inline-block;
  margin-top: var(--sp-3);
  padding: 0.625rem 1.25rem;
  background-color: rgb(var(--color-button-background)) !important;
  background-image: none !important;
  color: rgb(var(--color-button-text)) !important;
  border-radius: var(--rounded-button);
  text-decoration: none !important;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  transition: opacity 200ms ease, transform 200ms ease;
}
.text-with-icons .rte a[href*="?filter.p"]:hover,
.multicolumn-card .rte a[href*="?filter.p"]:hover {
  background-image: none !important;
  opacity: 0.88;
  transform: translateY(-1px);
}

/* =============================================
   SECTION 91 — Hero-Mobile-Fix für Audience-Hub-Pages
   Stand: 12.05.2026 (v2: Center-Alignment + Padding-Tuning + Font-Size)
   
   Kontext: Section 48 (MOBILE FOLD OPTIMIERUNG) wurde mit Selektor
   [id$="__slideshow"] gebaut, der NUR auf die Startseite greift. Custom 
   Audience-Hub-Pages wie gesichtspflege-maenner nutzen aber slideshow-Section 
   mit ID "__hero_banner".
   
   v2-Fixes (Niels-Feedback 12.05.2026 18:45):
   - text-align: center + align-items: center für banner__box (Heading + 
     Button-Container waren linksbündig statt zentriert)
   - padding-top reduziert von 32px → 16px (zu viel Whitespace oberhalb 
     der Headline)
   - font-size erhöht: clamp(1.2rem, 6vw, 1.75rem) → clamp(1.4rem, 6.5vw, 2rem)
     (alte Version wirkte zu klein, neue Version sichert auch noch
     "Gesichtspflege für Männer" einzeilig bei 390px ≈ 25.4px)
   ============================================= */

/* --- 91.1: Mobile-Stacked-Hero Layout (Text VOR Bild) für __hero_banner --- */
@media screen and (max-width: 1024px) {
  [id$="__hero_banner"] .section--padding > .relative, [id$="__hero-uber-uns"] .section--padding > .relative {
    display: flex !important;
    flex-direction: column !important;
  }
  [id$="__hero_banner"] .section--padding > .relative > .page-width.absolute, [id$="__hero-uber-uns"] .section--padding > .relative > .page-width.absolute {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    order: -1 !important;
    width: 100% !important;
    pointer-events: auto !important;
    background: linear-gradient(180deg, #E5E0D8 0%, #E5E0D8 40%, #ffffff 100%) !important;
    padding: 16px 20px 20px !important;
    text-align: center !important;
  }
  [id$="__hero_banner"] .section--padding > .relative, [id$="__hero-uber-uns"] .section--padding > .relative {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* banner__box: align center für H1 + Button-Wrapper */
  /* v3-Fix (15.05.2026): Niels-Feedback - Titel + Button waren leicht links 
     versetzt statt auf Seitenbreite zentriert. Ursache: .banner__box--small 
     hat max-width: 32-40rem und ohne margin-inline: auto sass die Box links 
     im page-width.absolute Parent. width: 100% + margin auto fixt das. */
  [id$="__hero_banner"] .banner__box, [id$="__hero-uber-uns"] .banner__box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-inline: auto !important;
    width: 100% !important;
    max-width: none !important;
  }
  /* Button-Wrapper-div (inline-style margin-top) zentrieren */
  [id$="__hero_banner"] .banner__box > div[style*="margin-top"], [id$="__hero-uber-uns"] .banner__box > div[style*="margin-top"] {
    display: flex !important;
    justify-content: center !important;
  }
}

@media screen and (max-width: 767px) {
  [id$="__hero_banner"] .section--padding > .relative > .page-width.absolute, [id$="__hero-uber-uns"] .section--padding > .relative > .page-width.absolute {
    padding: 12px 20px 16px !important;
  }
  /* Button-Wrapper: weniger Abstand zur Headline */
  [id$="__hero_banner"] .banner__box > div[style*="margin-top"], [id$="__hero-uber-uns"] .banner__box > div[style*="margin-top"] {
    margin-top: 12px !important;
  }
}

/* --- 91.2: H1 einzeilig + größer auf Mobile + Hyphenation-Fix --- */
/* Greift auf ALLE slideshow-Sections inkl. Startseite + Hub-Pages */
/* v3 (12.05.2026): Hyphenation deaktiviert + width:100% für Centering */
/* Browser-Default lang="de" macht hyphens: auto - "Männer" wurde zu "Män-/ner" */
/* Plus: H1 als flex-item ohne width:100% kann text-align nicht voll wirken lassen */
@media screen and (max-width: 767px) {
  [id$="__hero_banner"] .heading.title-xl, [id$="__hero-uber-uns"] .heading.title-xl,
  [id$="__slideshow"] .heading.title-xl {
    /* v4 (16.05.2026): font-size kompakter — war Default --title-xl (40-48px), 
       jetzt clamp(2rem, 7vw, 2.5rem) = 32-40px. Spart ~50px Höhe Mobile. */
    font-size: clamp(2rem, 7vw, 2.5rem) !important;
    line-height: 1.15 !important;
    text-align: center !important;
    letter-spacing: -0.01em !important;
    width: 100% !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
}

/* --- 91.3: Hero-Button schlank wie Tab-Pills auf __hero_banner --- */
@media screen and (max-width: 767px) {
  [id$="__hero_banner"] .banner__box .button, [id$="__hero-uber-uns"] .banner__box .button,
  [id$="__hero_banner"] .banner__box .button--secondary, [id$="__hero-uber-uns"] .banner__box .button--secondary {
    padding: 8px 20px !important;
    font-size: 13px !important;
    min-height: auto !important;
    line-height: 1.2 !important;
  }
  [id$="__hero_banner"] .banner__box .button::after, [id$="__hero-uber-uns"] .banner__box .button::after,
  [id$="__hero_banner"] .banner__box .button--secondary::after, [id$="__hero-uber-uns"] .banner__box .button--secondary::after {
    border-radius: var(--rounded-button) !important;
  }
}



/* Section 89 — Smooth-Scroll + scroll-padding für Anker-Navigation (12.05.2026) */
/* Niels-Feedback: Anker-Sprung zu Top-3 war zu abrupt, smooth-scroll für sanftere UX */
/* scroll-padding-top kompensiert für Sticky-Header-Höhe (~80px) bei Anker-Sprüngen */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}


/* Section 92 — Footer-Typografie + Mobile Clean Look RESTORE (12.05.2026) */
/* Verloren beim Theme-Update vom 06.05.2026: war in sections/footer.liquid <style> Block (4.8 KB) */
/* Migration: section-ID-Selektoren durch generische .footer__* ersetzt - Footer hat nur eine Instanz pro Page */
/* Niels' Problem: Footer-Akkordeon "Shop/Kundenservice/Über uns" hatte unerwünschten Border-Rahmen */

/* ===== FOOTER TYPOGRAFIE-SYSTEM (5-Stufen-Modell) ===== */
/* H3: 16px regular, Body: 14px, Secondary: 12-13px */
.footer .footer__left .heading {
  font-size: 1rem !important;
  text-transform: none !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}
.footer .footer__left .text-sm-lg {
  font-size: 0.875rem !important;
}

/* ===== FOOTER LOGO – identisch mit Header ===== */
.footer .footer__centered-logo {
  padding-bottom: var(--sp-10) !important;
}
.footer .footer__centered-logo img {
  max-width: 170px !important;
  height: auto !important;
  width: auto !important;
}

/* ===== FOOTER LAYOUT – Einspaltiges Grid, Social unter Menüs ===== */
@media (min-width: 750px) {
  .footer {
    grid-template-columns: 1fr !important;
  }
  .footer .footer__left {
    border-inline-end: none;
    padding-inline-end: 0;
  }
  .footer .footer__accordions {
    gap: clamp(2rem, 4vw, 4rem);
    justify-content: space-between;
  }
  .footer .footer__right {
    border-block-start: none !important;
    margin-block-start: 0 !important;
    padding-block-start: var(--sp-4) !important;
    padding-inline: 0 !important;
  }
}

/* Social Icons linksbündig (Desktop) */
.footer .footer__socials {
  justify-content: flex-start !important;
}

/* ===== FOOTER LINK-SPACING ===== */
/* Heading → Links 12px, zwischen Links 10px */
.footer .footer__left .details__content ul {
  gap: 0.625rem !important;
}
.footer .footer__left .details__summary {
  padding-block: 0 !important;
  margin-bottom: 0.75rem !important;
}

/* ===== MOBILE FOOTER: Clean Design ohne Umrandungen ===== */
/* DAS IST DER FIX für Niels' aktuelles Problem mit dem Footer-Akkordeon-Rahmen */
@media (max-width: 749px) {
  /* Akkordeon-Borders + Outlines entfernen */
  .footer .footer__left details,
  .footer .footer__left .details,
  .footer .footer__accordions details {
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
  }

  /* Nur subtile Trennlinie ZWISCHEN den Akkordeon-Items */
  .footer .footer__accordions details + details {
    border-top: 1px solid rgba(51,51,51,0.12) !important;
  }

  /* Summary-Styling: sauber ohne extra Borders */
  .footer .footer__left .details__summary,
  .footer .footer__left summary {
    border: none !important;
    padding-block: 0.75rem !important;
    margin-bottom: 0 !important;
  }

  /* Footer-Right (Social Icons): Trennlinie + Abstand reduzieren */
  .footer .footer__right {
    border-block-start: none !important;
    margin-block-start: 0 !important;
    padding-block-start: 0.5rem !important;
    gap: 0.5rem !important;
  }

  /* Leerraum zwischen Akkordeons und Social Icons reduzieren */
  .footer .footer__left {
    gap: 0 !important;
  }

  /* Akkordeon-Wrapper: kein extra Gap */
  .footer .footer__accordions {
    gap: 0 !important;
  }

  /* Social Icons: zentriert auf Mobile */
  .footer .footer__socials {
    padding-top: 0.75rem !important;
    justify-content: center !important;
  }

  /* Footer Grid: kein großer Gap zwischen left und right */
  .footer {
    gap: 0.5rem !important;
  }

  /* Logo: etwas weniger Abstand nach unten auf Mobile */
  .footer .footer__centered-logo {
    padding-bottom: 1rem !important;
  }
}


/* Section 93 — Newsletter CTA-Layout RESTORE (12.05.2026) */
/* Verloren beim Theme-Update vom 06.05.2026: war in sections/newsletter.liquid <style> Block (3.2 KB) */
/* Migration: section-ID-Selektoren durch [id*="__newsletter"] ersetzt (matcht alle Newsletter-Sections) */

/* ===== Newsletter CTA: Text-Button statt Icon-Button ===== */
[id*="__newsletter"] .self-submit-button {
  position: static !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  margin-top: 0 !important;
}
[id*="__newsletter"] .self-submit-button .button {
  padding: 0.5rem 1.25rem !important;
  border-radius: var(--rounded-button) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  min-height: 2.5rem !important;
  overflow: hidden !important;
}
[id*="__newsletter"] .self-submit-button .button::after {
  border-radius: var(--rounded-button) !important;
}

/* ===== Newsletter Form: 480px max-width zentriert ===== */
[id*="__newsletter"] .newsletter-form {
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
[id*="__newsletter"] .newsletter-form .field {
  display: flex !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
}
[id*="__newsletter"] .newsletter-form .field .input {
  flex: 1 !important;
  min-height: 3rem !important;
  font-size: 1rem !important;
  padding-right: var(--input-padding-inline) !important;
  padding-block: 0.75rem !important;
  text-align: center !important;
}
[id*="__newsletter"] .newsletter-form .field .input::placeholder {
  text-align: center !important;
  opacity: 0.5 !important;
}

/* ===== Mobile: Padding + Stack ===== */
@media (max-width: 749px) {
  [id*="__newsletter"] {
    --section-padding-top: 20px !important;
    --section-padding-bottom: 20px !important;
  }
  [id*="__newsletter"] .newsletter-form {
    max-width: 100% !important;
  }
  [id*="__newsletter"] .newsletter-form .field {
    flex-direction: column !important;
  }
}

/* ===== Heading: Sentence Case erzwingen ===== */
[id*="__newsletter"] h2,
[id*="__newsletter"] .heading {
  text-transform: none !important;
}

/* ===== Newsletter: Interne Abstände straffen ===== */
/* theme.css: .banner__box padding-block: clamp(40px, 3.4vw, 64px) -> 0 */
/* theme.css: .banner__title+* margin-block-start: 40px -> 12px */
/* theme.css: .banner__box>*+* margin-block-start: 20px -> 10px */
/* UX Best Practice: Mobile section spacing 16-24px (Medium, 2024) */
[id*="__newsletter"] .banner__box {
  padding-block: 0 !important;
}
[id*="__newsletter"] .banner__box > * + * {
  margin-block-start: 10px !important;
}
[id*="__newsletter"] .banner__title + * {
  margin-block-start: 12px !important;
}
[id*="__newsletter"] .banner__box > :last-child {
  margin-block-start: 8px !important;
}


/* Section 94 — Typografie-Audit Feb 2026 + Page-Container Scrollbar-Fix RESTORE (12.05.2026) */
/* Verloren beim Theme-Update vom 06.05.2026: war in snippets/css-variables.liquid <style> Block (494 B) */
/* Plus: 3x --page-container Patches für scrollbar-width Berücksichtigung */

/* ===== Page-Container: Scrollbar-Width berücksichtigen (verhindert horizontale Scrollbar Issues) ===== */
:root {
  --page-container: min(calc(100vw - var(--scrollbar-width, 0px) - var(--page-padding) * 2), var(--page-width));
}
@media screen and (min-width: 990px) {
  :root {
    --page-container: min(calc(100vw - var(--scrollbar-width, 0px) - var(--page-padding) * 2), max(var(--page-width), 1280px));
  }
}
@media screen and (min-width: 1536px) {
  :root {
    --page-padding: max(var(--sp-12), 50vw - var(--scrollbar-width, 0px)/2 - var(--page-width)/2);
  }
}


/* Typografie-Audit Feb 2026 Block entfernt 15.05.2026 — ersetzt durch Section 98 (--title-* Variablen) */



/* =============================================
   SECTION 95 — Männer-Page: Section-Trennung Top-3 vs. Alle Produkte
   Stand: 15.05.2026 (v3: Spacing reduziert nach visuellem Test)

   v1 (15.05.2026 13:57): Background #FAF8F4 + großes Spacing.
     Visuelle Bewertung: NICHT clean (Sandwich-Effekt, weiße Bilder in
     sandfarbener Sektion = Unruhe).

   v2 (15.05.2026 14:14): Background entfernt, Spacing beibehalten (80/48
     bzw. 96/56). Visuelle Bewertung: Spacing ist auf Mobile zu viel ohne
     Color-Contrast als Trennsignal.

   v3 (15.05.2026 14:50): Spacing reduziert auf moderate Werte. Da der
     Background-Wechsel weg ist, braucht es nur eine spürbare Pause, nicht
     einen halben Bildschirm.

   Effektive Pause zwischen Slider-Ende und "Alle Produkte" Heading:
     - Desktop: top3-bottom 32px + grid_title-top 48px = 80px (vorher 176px)
     - Mobile:  top3-bottom 16px + grid_title-top 24px = 40px (vorher 104px)
   ============================================= */

/* --- 95.1: Moderates vertikales Spacing innerhalb Top-3 Section --- */
[id$="__top3_routine"] {
  padding-block: 32px !important;
}
@media screen and (max-width: 749px) {
  [id$="__top3_routine"] {
    padding-block: 16px !important;
  }
}

/* --- 95.2: Spürbare Pause vor "Alle Produkte" Heading --- */
[id$="__grid_title"],
[id$="__grid_title"] .section--padding {
  padding-top: 48px !important;
  padding-bottom: 16px !important;
}
@media screen and (max-width: 749px) {
  [id$="__grid_title"],
  [id$="__grid_title"] .section--padding {
    padding-top: 24px !important;
    padding-bottom: 12px !important;
  }
}


/* =============================================
   SECTION 96 — Männer-Page: Concern-Cards Icon-Layout
   Stand: 15.05.2026 (v2: align-items center auch Mobile)

   v1 (15.05.2026 14:08): Desktop Icon zentriert über Heading via
     flex-direction column. Mobile: angenommen Theme macht schon
     align-items center.

   v2 (15.05.2026 14:50): BUG entdeckt. Theme-Default für .column auf
     Mobile ist "flex flex-col gap-5 w-full text-center" - WICHTIG:
     text-center zentriert nur INLINE-Content, NICHT Block-Children!
     Mein fixed icon-width 40px machte den Icon-Container schmal, und
     ohne align-items center sitzt der links statt mittig.

   v2-Fix: align-items center auf .column auch Mobile + Desktop forcen.

   Lesson learned: text-center und align-items center sind nicht
   austauschbar. flex-Children mit fester Width brauchen align-items.
   ============================================= */

/* --- 96.1: Layout-Reversal + Vertikal-Zentrierung auf ALLEN Breakpoints --- */
[id$="__concern_text"] .text-with-icons .column {
  align-items: center !important;
  text-align: center !important;
}
[id$="__concern_text"] .text-with-icons .column__content {
  text-align: center !important;
  align-items: center !important;
}

/* Desktop: Icon über Heading (statt links daneben) */
@media screen and (min-width: 1280px) {
  [id$="__concern_text"] .text-with-icons .column {
    flex-direction: column !important;
  }
}

/* --- 96.2: Icon-Größe Mobile + Desktop --- */
[id$="__concern_text"] .column__icon {
  width: 40px !important;
  height: 40px !important;
  margin-bottom: 4px !important;
}
@media screen and (min-width: 1280px) {
  [id$="__concern_text"] .column__icon {
    width: 48px !important;
    height: 48px !important;
  }
}
[id$="__concern_text"] .column__icon svg {
  width: 100% !important;
  height: 100% !important;
}

/* --- 96.3: Gap zwischen Icon und Content --- */
[id$="__concern_text"] .text-with-icons .column {
  gap: 1.25rem !important;
}
@media screen and (min-width: 1280px) {
  [id$="__concern_text"] .text-with-icons .column {
    gap: 1rem !important;
  }
}

/* --- 96.4: Card-Content Luft zum Button --- */
[id$="__concern_text"] .text-with-icons .column__content > * + * {
  margin-top: 0.75rem !important;
}

/* --- 96.5: Outline-Button-Styling für CTAs in Concern-Cards (16.05.2026) --- */
/* Die CTAs "Anti-Aging-Produkte ansehen" etc. sind <a>-Links im rich-text.
   Theme stylt sie als schwarze Filled-Buttons. Niels-Feedback: zu heftig für 
   Sekundär-CTAs auf einer Page mit eigenem Haupt-CTA-Block (Beratungs-CTA).
   Lösung: Outline-Stil (transparent + zarter Rand) für visuelle Hierarchie.
   v2 (16.05.2026): border-radius angepasst von 999px (Pill) auf var(--rounded-button)
   = 6px live, konsistent mit Hero-CTA und allen anderen Theme-Buttons.
   Niels-Voice: "CTA Buttons eckig mit abgerundeten Ecken, nicht Pill". */
[id$="__concern_text"] .column__content .rte a,
[id$="__concern_text"] .text-with-icons .rte a {
  display: inline-block;
  background: transparent !important;
  background-color: transparent !important;
  color: rgb(var(--color-foreground)) !important;
  border: 1px solid rgb(var(--color-foreground)) !important;
  border-radius: var(--rounded-button) !important;
  padding: clamp(0.625rem, 0.95vw, 0.75rem) clamp(1.125rem, 1.5vw, 1.5rem) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}
[id$="__concern_text"] .column__content .rte a:hover,
[id$="__concern_text"] .text-with-icons .rte a:hover {
  background-color: rgb(var(--color-foreground)) !important;
  color: rgb(var(--color-background)) !important;
}


/* =============================================
   SECTION 97 — Global Heading Font-Weight (v2, 16.05.2026)
   
   v1 (15.05.2026): .heading global auf font-weight 700.
     → Niels-Feedback 16.05.2026: Mobile-Menü-Buttons (auch .heading) wirken zu fett.
     → Desktop-Headings bei EB Garamond Serif mit 700 auf großen Sizes (64-80px) zu schwer.
   
   v2 (16.05.2026):
     - Mobile (Headings allgemein): font-weight 700 bleibt (Niels findet Mobile stimmig)
     - Desktop (≥750px) Headings: font-weight 500 (Niels-Feedback 16.05: 600 noch zu fett bei EB Garamond Serif. Premium-Pattern für Serif-Display ist 400-500.)
     - Mobile-Menü-Items (drawer/header navigation): font-weight 500 (Theme-Default), NICHT 700
   
   Optische Korrektur-Regel: "kleinere Heading-Größe → mehr Weight, größere → weniger"
   ============================================= */

/* --- 97.1: Heading Weight Mobile = 700 (Bold) --- */
.heading {
  font-weight: 700 !important;
}

/* --- 97.2: Heading Weight Desktop reduziert auf 600 (Semi-Bold) --- */
/* Serif EB Garamond bei großen Sizes wirkt mit 700 zu schwer */
@media screen and (min-width: 750px) {
  .heading {
    font-weight: 500 !important;
  }
}

/* --- 97.3: Card-/Listen-Titel bleiben dezent (500) --- */
.product-card__title,
.column__title.font-medium,
.nutzen-card__title {
  font-weight: 500 !important;
}

/* --- 97.4: Footer-Heading explizit dezent --- */
.footer__heading {
  font-weight: 500 !important;
}

/* --- 97.5 v4: Mobile-Menü Items (alle) konsistent dezent (500) --- */
/* HTML-Struktur (korrigiert):
   - Top-Level (Produkte/Hautprobleme/Marken/Wirkstoffe): <summary class="drawer__menu-item"> mit <span class="heading text-2xl"> drinnen
   - Bottom (Bestseller/Angebote): <a class="drawer__menu-item heading text-2xl">
   - .drawer__submenu enthält den SUBMENU-Inhalt, nicht die Top-Items.
   
   Korrekte Selektoren: alle .drawer__menu-item Heading-Varianten erfassen. */
.menu-drawer .drawer__menu-item .heading,
.menu-drawer .drawer__menu-item.heading,
.menu-drawer summary.drawer__menu-item .heading,
.menu-drawer a.drawer__menu-item.heading {
  font-weight: 500 !important;
}

/* =============================================
   SECTION 98 — Heading Type Scale (Major Third 1.25)
   Stand: 15.05.2026

   Niels-Feedback 16.05.2026: Headings auf der Männer-Page haben
   Hierarchie-Verletzung — H1 Hero ist auf Mobile kleiner als H2 Sections.

   Diagnose vorher (vor diesem Push):
     - H1 Hero (title-xl + Section-91-Override): 20-30px Mobile (zu klein)
     - H2 Sections (title-xl Theme-Default): 48-80px Mobile (gleich/größer als H1)
     - Ratio H1:H2 auf Mobile = 1:1.6 bis 1:2.0 (statt H1 > H2)

   Recherche-Grundlage (Best Practice 2024-2026):
     - Cieden Type Scale Guide: Major Third (1.25) für moderate Kontraste
       in E-Commerce empfohlen
     - Pimp my Type: Default H1 Mobile 32px, kann bis 48-56px für Premium
       Hero gehen
     - UXPin: "Stick to one primary alignment per section. Mixing creates
       visual chaos."
     - Webdesigner Depot: Vertical cards (icon-above-text) für prominent
       feature highlights — passt zu Premium-Brand-Pages
     - DeveloperUX: "Bold weights improve readability for headings when
       users quickly scan content" — Niels-Voice "dickere Schrift" stimmt

   Neue Skala (Major Third 1.25 mit Premium-Hero-Bonus):
   ┌───────────┬─────────────┬─────────────┬──────────────────────────┐
   │ Klasse    │ Mobile      │ Desktop     │ Verwendung               │
   ├───────────┼─────────────┼─────────────┼──────────────────────────┤
   │ title-xl  │ 40-48px     │ 64-80px     │ Hero H1 (Hub-Pages)      │
   │ title-lg  │ 30-32px     │ 44-56px     │ Hero auf Marken-Pages,   │
   │           │             │             │ Section H2 auf Hub-Pages │
   │ title-md  │ 22-24px     │ 28-32px     │ Sub-Headings, Card-Titel │
   │ title-sm  │ 18-20px     │ 20-24px     │ Mini-Headings, Trust-Bar │
   └───────────┴─────────────┴─────────────┴──────────────────────────┘

   Hierarchie-Faktoren bei dieser Skala:
     - H1 (title-xl) zu H2 (title-lg) Mobile:    48/32 = 1.5  ✓
     - H1 (title-xl) zu H2 (title-lg) Desktop:   80/56 = 1.43 ✓
     - H2 (title-lg) zu H3 (title-md) Mobile:    32/24 = 1.33 ✓
     - H3 (title-md) zu H4 (title-sm) Mobile:    24/20 = 1.2  ✓
   ============================================= */

/* --- 98.1: Mobile-First Base-Skala (gilt < 750px) --- */
:root {
  --title-xl: clamp(2.5rem, 9vw, 3rem) !important;        /* 40px - 48px Mobile */
  --title-lg: clamp(1.875rem, 7vw, 2rem) !important;      /* 30px - 32px Mobile */
  --title-md: clamp(1.375rem, 5vw, 1.5rem) !important;    /* 22px - 24px Mobile */
  --title-sm: clamp(1.125rem, 4vw, 1.25rem) !important;   /* 18px - 20px Mobile */
}

/* --- 98.2: Desktop-Skala (≥ 750px) --- */
@media screen and (min-width: 750px) {
  :root {
    --title-xl: clamp(2.5rem, 5.5vw, 5rem) !important;      /* 40px - 80px Desktop */
    --title-lg: clamp(1.875rem, 3.9vw, 3.5rem) !important;  /* 30px - 56px Desktop */
    --title-md: clamp(1.375rem, 2.2vw, 2rem) !important;    /* 22px - 32px Desktop */
    --title-sm: clamp(1.125rem, 1.4vw, 1.5rem) !important;  /* 18px - 24px Desktop */
  }
}

/* --- 98.3: Sicherstellen dass title-Klassen die Variablen nutzen --- */
/* Falls Theme irgendwo direkte font-size statt var(--title-*) setzt, hier nachziehen */
.title-xl { font-size: var(--title-xl) !important; }
.title-lg { font-size: var(--title-lg) !important; }
.title-md { font-size: var(--title-md) !important; }
.title-sm { font-size: var(--title-sm) !important; }


/* =============================================
   SECTION 99 — Hero-CTA Proportion + Heading-Balance (16.05.2026)
   
   Niels-Feedback nach Männer-Page Desktop-Review:
   1. Hero-CTA "Produkte ansehen" wirkt überproportional → button--fixed
      setzt min-width: var(--sp-48) = 192px, Text "Produkte ansehen" ist
      aber nur ~120px breit. Lösung: min-width auf auto, Padding straffer.
   2. CTA wirkt zu nah am Titel → margin-top von 20px auf 32px erhöhen.
   3. Zeilenumbruch bei "Gesichtspflege für Männer" landet aktuell als
      "Gesichtspflege für" / "Männer" (Witwe). Mit text-wrap: balance
      balanciert der Browser zu "Gesichtspflege" / "für Männer".
   
   Best Practice: Phrasen-Logik (für Männer als grammatikalische Einheit
   nicht trennen), Witwen-Regel (einzelnes Wort in Schlusszeile vermeiden).
   ============================================= */

/* --- 99.1: Hero-CTA Proportion (button--fixed kompakter) --- */
[id$="__hero_banner"] .banner__box .button.button--fixed, [id$="__hero-uber-uns"] .banner__box .button.button--fixed,
[id$="__slideshow"] .banner__box .button.button--fixed {
  min-width: auto !important;
  padding-inline: clamp(1rem, 1.4vw, 1.375rem) !important;
}

/* --- 99.2 v2 (16.05.2026): Abstand Hero-Heading → CTA kompakter --- */
/* War clamp(24-36px), jetzt clamp(12-20px) — spart ~15px Mobile, 
   weniger Luft zwischen Headline und Action. */
[id$="__hero_banner"] .banner__box > div[style*="margin-top"], [id$="__hero-uber-uns"] .banner__box > div[style*="margin-top"],
[id$="__slideshow"] .banner__box > div[style*="margin-top"] {
  margin-top: clamp(12px, 1.8vw, 20px) !important;
}

/* --- 99.3: Balanced Line-Breaks für Hero-Headings --- */
/* text-wrap: balance (Chrome 114+, Safari 17.4+, Firefox 121+) sorgt für
   gleichmäßige Zeilenlängen statt Witwe-Effekt am Zeilenende. */
[id$="__hero_banner"] .heading.title-xl, [id$="__hero-uber-uns"] .heading.title-xl,
[id$="__slideshow"] .heading.title-xl {
  text-wrap: balance;
}


/* =============================================
   SECTION 100 — Newsletter Cleanup (16.05.2026)
   
   Niels-Feedback nach Männer-Page Review:
   - Floating-Label-Pattern wirkt unruhig (Text "wandert" beim Klick)
   - Submit-Button als Icon-only Pfeil-Kreis wirkt verloren auf Desktop
   - "10% sichern" Text war ursprünglich geplant (Doku Section 15j 17.03.2026)
     und ist conversion-stärker als nur Pfeil-Icon
   
   Lösung:
   1. Floating-Label (.label.is-floating) ausblenden, nur Placeholder
   2. Submit-Button aus absolute-Position nehmen, normal im Flex-Container
   3. Snippet-Patch separat: SVG-Pfeil durch Text "10% sichern" ersetzen
   ============================================= */

/* --- 100.1 v3 (16.05.2026): Floating-Label exakt Input-Bounding-Box --- */
/* v2-Diagnose: Label-Container hat inset 0 0 10px 0 + height var(--input-height) = 52px
   während Input durch padding 14/26 effektiv 62px hoch ist → Label sitzt zu weit oben.
   Fix: Container stretcht exakt über Input (inset: 0, height: 100%). */
/* v5 (16.05.2026): Floating-Label-Container-Positioning kollidiert mit Theme-
   Animation-Logic. Saubere Lösung: Label via sr-only-Pattern für Screen-Reader
   behalten, sichtbarer Text via Input-placeholder (HTML hat placeholder schon).
   Resultat: identische Optik wie inaktiver Floating-Label-State, aber ohne
   Positionierungs-Konflikte. */
[id*="__newsletter"] .label.is-floating {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Placeholder-Styling angleichen an Premium-Look (hellgrau, zentriert) */
[id*="__newsletter"] .input.is-floating {
  text-align: center !important;
}
[id*="__newsletter"] .input.is-floating::placeholder {
  color: rgba(51, 51, 51, 0.45);
  opacity: 1;
  text-align: center;
}

/* Input behält normales Padding für Floating-Label-Animation */
[id*="__newsletter"] .newsletter-form .field .input.is-floating {
  padding-block: 0.875rem !important;
}

/* --- 100.3: Submit-Button aus absolute-Position nehmen, normal positionieren --- */
[id*="__newsletter"] .self-submit-button.absolute {
  position: static !important;
}

[id*="__newsletter"] .newsletter-form .field {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
}

/* --- 100.4: Submit-Button mit Text "10% sichern": breitere Form --- */
[id*="__newsletter"] .self-submit-button {
  flex-shrink: 0;
}

/* v4: Wrapper als Flex-Container mit Stretch, damit Button volle Höhe nutzt */
[id*="__newsletter"] .self-submit-button {
  display: flex !important;
  align-items: stretch !important;
  align-self: stretch !important;
  flex-shrink: 0;
  height: auto !important;
}

/* v4: Button explizit height:100%, min-height vom Wrapper entkoppelt */
[id*="__newsletter"] .self-submit-button .button {
  padding: 0.75rem 2rem !important;
  min-width: 160px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* v4: Auch button::after (visible bg-layer im Concept Theme) muss mitgehen */
[id*="__newsletter"] .self-submit-button .button::after {
  width: 100% !important;
  height: 100% !important;
}

/* --- 100.5: Mobile-Layout — Submit-Button full-width unter Input --- */
@media (max-width: 749px) {
  [id*="__newsletter"] .newsletter-form .field {
    flex-direction: column !important;
  }
  [id*="__newsletter"] .self-submit-button,
  [id*="__newsletter"] .self-submit-button .button {
    width: 100% !important;
  }
}


/* =============================================
   SECTION 101 — Animation-Speed-Tuning (16.05.2026)
   
   Theme-Defaults waren:
     --animation-nav: 0.5s    (Mobile-Drawer-Menu, Desktop-Hover-Dropdowns)
     --animation-primary: 0.5s (Primärinteraktionen)
     --animation-smooth: 0.7s  (Smooth-Transitions)
   
   Niels-Feedback: wirkt träge.
   UX-Best-Practice (Material Design, Apple HIG):
     - UI-Interaktionen: 200-300ms ist Sweet Spot
     - 500ms+ wirkt "schwer" und altmodisch
     - 100ms- wirkt abrupt
   
   Reduktion: Nav/Primary auf 0.3s, Smooth auf 0.4s.
   ============================================= */

:root {
  --animation-nav: 0.3s cubic-bezier(.6, 0, .4, 1) !important;
  --animation-primary: 0.3s cubic-bezier(.3, 1, .3, 1) !important;
  --animation-smooth: 0.4s cubic-bezier(.7, 0, .3, 1) !important;
}

/* HARDCODED Drawer-Animation (.6s) im Theme — greift NICHT via Variable.
   Direkter Override für die Hauptelemente. */
.menu-drawer .drawer__inner,
.cart-drawer .drawer__inner,
.search-drawer .drawer__inner,
.drawer .drawer__inner {
  transition: transform 0.3s cubic-bezier(.7, 0, .2, 1) !important;
}
.drawer .modal__container {
  transition: transform 0.3s cubic-bezier(.7, 0, .2, 1) !important;
}
.drawer .overlay {
  transition: var(--animation-primary) !important;
}


/* =============================================
   SECTION 102 — Drawer-Animation-Cleanup (16.05.2026)
   
   Issue 1: Stagger-Animation auf Menu-Items wirkt unruhig.
   Ursache: theme.js nutzt Motion.animate() mit:
     - transform: translateX(-20px) → translateX(0)
     - opacity: 0 → 1
     - duration: 0.6s
     - delay: Motion.stagger(0.05-0.1)
   = bis zu 1.1s zusätzliche Animation NACH dem Drawer-Slide.
   Niels-Wunsch: Items sind sofort da, kein Stagger.
   
   Issue 2: Grauer Strich (border-block-end) auf .drawer__header
   wirkt unsauber zwischen Close-Button und Menu.
   Premium-Brands (Aesop, Augustinus Bader) haben keinen Trenner.
   ============================================= */

/* 102.1: Stagger-Animation deaktivieren — Items sofort sichtbar */
.menu-drawer .drawer__menu-item,
.menu-drawer .drawer__menu-group,
.menu-drawer .drawer__menu-item .heading,
.menu-drawer summary.drawer__menu-item,
.menu-drawer a.drawer__menu-item {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  transition: none !important;
}

/* 102.2 v2: Grauer Strich entfernen — ALLE möglichen Border-Quellen
   im Mobile-Menü-Drawer zwischen Close-Button und ersten Menu-Items abdecken.
   Theme hat mehrere drawer__header Regeln in verschiedenen Media-Queries,
   plus potentielle Border auf scrollable/menu/content. */
.menu-drawer .drawer__header,
.menu-drawer gesture.drawer__header,
.menu-drawer .drawer__content,
.menu-drawer .drawer__scrollable,
.menu-drawer .drawer__menu,
.menu-drawer ul.drawer__menu,
.menu-drawer nav,
.menu-drawer .drawer__menu-group:first-child,
.menu-drawer .drawer__menu-group:first-child > details,
.menu-drawer .drawer__menu-group:first-child > details > summary {
  border-top: 0 !important;
  border-block-start: 0 !important;
  border-block-end: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}


/* === SECTION 102.3 — "Aufblitzende Schrift" verhindern (16.05.2026) ===
   Niels-Beobachtung: beim Einblenden des Mobile-Menüs blitzt vor dem
   ersten Menüpunkt kurz Schrift auf. Ursache: drawer__content ist via
   "opacity-0 invisible" maskiert, JS entfernt diese Klassen beim Open —
   Race zwischen Slide-Animation und Content-Reveal verursacht den Flash.
   
   Fix: solange menu-drawer NICHT [open] ist, drawer__content komplett
   aus dem Layout via display:none. Dann ist nichts vorbereitet, was
   für einen Frame durchrutschen könnte. */
.menu-drawer:not([open]):not(.open) .drawer__content {
  display: none !important;
}
.menu-drawer:not([open]):not(.open) .drawer__header {
  display: none !important;
}


/* === SECTION 103 — Hero Mobile: padding-Aufräumen (16.05.2026) ===
   Debug-Diagnose mit Puppeteer Mobile (390×844):
   - .slideshow-content hat padding-top: 20 + padding-bottom: 20 → 40px Verschwendung
   - Zwischen .slideshow-content.bottom und heroImg.top: 16px Leerraum
   Niels-Wunsch: oberhalb Title + unterhalb CTA Spacing minimieren.
   Fix: spart 56px Above-the-fold für mehr Bild-Sichtbarkeit. */
@media screen and (max-width: 749px) {
  [id*="hero_banner"] .slideshow-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Spacing zwischen Slideshow-Content-Block und Image-Block */
  [id*="hero_banner"] .slideshow-content + * {
    margin-top: 0 !important;
  }
  [id*="hero_banner"] .banner__media {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* === SECTION 104 v2 — Mobile Body-Text-Größen-Konsistenz (16.05.2026) ===
   Debug-Diagnose: Card-Body in ALLEN multicolumn-with-icons Sektionen ist
   Mobile nur 11px (Theme-Default). Betrifft sowohl concern_text als auch
   die Trust/USP-Section ("14 Tage Rückgaberecht", "Schneller Versand").
   v2-Fix: Selektor allgemein auf .column__text statt nur [id*="concern_text"].
   Evidenz: 16px Mobile-Body-Standard (Smashing, NN/g, Apple HIG, WCAG).
   14px absolutes Minimum (Material Design). 11px Baymard-Verstoß. */
@media screen and (max-width: 749px) {
  .column__text,
  .column__text p,
  .column__text ul,
  .column__text ol,
  .column__text li,
  .column__text ul li,
  .column__text ol li {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
}

/* Desktop-Standard für Listen-Items in column__text (Ergänzung 17.05.2026)
   Theme-Default .column__text clamp() greift nicht zuverlässig durch
   auf li/ul-Children. Bei Listen-Inhalten (z.B. vergleich_haut) entstand
   Inkonsistenz zu p-basierten Cards (concern_text). Fix: explizit 14px. */
.column__text ul,
.column__text ol,
.column__text li {
  font-size: 14px;
  line-height: 1.5;
}

/* === SECTION 105 v2 — Breadcrumb shop-weit hidden (16.05.2026) ===
   
   War vorher Mobile-only hidden. Niels-Entscheidung 16.05.2026: auch
   auf Desktop entfernen. Begründung: Pages haben nur 2-Level-Hierarchie
   (Startseite → Concern/Collection). NN/g und Baymard stützen: bei
   2-Level-Hierarchien sind Breadcrumbs nicht notwendig.
   
   Schema.org BreadcrumbList bleibt als unsichtbare Microdata im HTML
   für SEO (Google liest das aus dem HTML, nicht dem visuellen Render).
   
   Selektor greift shop-weit auf alle Pages mit breadcrumb_nav Section. */
[id*="breadcrumb_nav"] {
  display: none !important;
}

/* === SECTION 106 — Beratungs-CTA Buttons gleich breit (16.05.2026) ===
   Diagnose: Primary "Kostenlose Hautanalyse starten" 290px, Secondary
   "Alle Beratungsoptionen" 236px. Höhe + Padding identisch (54px / 18,26),
   nur Breite differiert durch Textlänge.
   Evidenz: Primary/Secondary-Differenzierung passiert über Color/Fill
   (solid vs outline), nicht über Größe. Konsens aus DesignCourse, NerdCow,
   LogRocket, Balsamiq, Material Design, Apple HIG, Bootstrap, Tailwind:
   Buttons innerhalb derselben Hierarchie-Ebene haben gleiche Höhe + Größe.
   Fix: beide Buttons im Beratungs-CTA auf gleiche min-width 290px (= Width
   des längeren Texts). Padding bleibt unverändert. */
[id*="beratungs_cta"] .button {
  min-width: 290px;
}
@media screen and (max-width: 749px) {
  /* Mobile: beide Buttons sollten gleich aussehen, aber nicht edge-to-edge */
  [id*="beratungs_cta"] .button {
    min-width: 290px;
  }
}


/* === SECTION 107 — Heading text-wrap balance (16.05.2026) ===
   Diagnose: H2 "Warum Männerhaut anders tickt" bricht aktuell vor "tickt"
   (Zeile 1: "Warum Männerhaut anders" 21 chars, Zeile 2: "tickt" 5 chars).
   Niels-Wunsch: Bruch vor "anders" — semantisch zusammengehörend "anders tickt".
   NBSP-Ansatz scheitert: Shopify-Liquid normalisiert U+00A0 zu U+0020.
   Lösung: text-wrap: balance (Chrome 114+, Safari 17.5+, Firefox 121+,
   alle aktuell). Browser optimiert auf gleiche Zeilenlängen, was bei
   29-Zeichen-Text einen Bruch nach "Männerhaut" (15) statt nach "anders" (21)
   bedeutet. Plus text-wrap: pretty als Fallback. */
[id*="intro_text"] .heading,
[id*="intro_text"] h2,
[id*="intro_text"] h3 {
  text-wrap: balance;
  text-wrap: pretty;
}


/* === SECTION 108 — Trust-Slider Höhe + Newsletter Button-Höhe (16.05.2026) ===
   
   PROBLEM 1: Trust-Slider (multicolumn-with-icons direkt vor Newsletter)
   zeigt im Video Höhensprünge beim Slide-Wechsel. Slides ALLE 82px statisch
   (gemessen), aber Container hat keinen fixed/min-height → beim Transition
   passt sich Container an die aktuelle Slide-Höhe an, was bei Text mit
   unterschiedlichen Längen optisch springt.
   FIX: min-height am Slider-Wrapper UND an jedem Slide. So bleibt Container
   stabil, auch wenn ein Slide intern weniger braucht.
   
   PROBLEM 2: Newsletter Input 51px hoch, Button 37px hoch. Form-Design-
   Konsens (Material Design, Apple HIG, WCAG): Form-Elemente in Inline-Forms
   gleiche Höhe für visuelle Konsistenz. WCAG 2.5.5 Target Size: min 44px
   für Touch — Input erfüllt 51px ✓, Button mit 37px UNTER 44px ✗.
   FIX: Button auf 51px Höhe + 16px vertikales Padding (statt 12px). */

/* Trust-Slider: Container + Slides stabile Höhe */
[id*="multicolumn-with-icons"] swiper-slider,
[id*="multicolumn-with-icons"] .swiper-container,
[id*="multicolumn-with-icons"] .splide__track,
[id*="multicolumn-with-icons"] [class*="slider"] {
  min-height: 100px;
}
@media screen and (max-width: 749px) {
  [id*="multicolumn-with-icons"] .column {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}




/* === SECTION 109 — Trust-Slider Höhe Final-Fix (16.05.2026) ===
   Frame-für-Frame-Analyse von Niels' Video:
   - Frame 4 (Slide "14 Tage Rückgaberecht"): 2 Textzeilen, Newsletter y≈985px
   - Frame 13 (Slide "Schneller Versand"):    1 Textzeile, Newsletter y≈950px
   = ~35px Sprung beim Slide-Wechsel.
   
   Root Cause: Slider ist <carousel-element> (Custom Web Component, NICHT
   swiper/splide). Mein Section 108 Selektor griff nicht. Plus alle Columns
   hatten min-height 0px → Container passte sich pro Slide an.
   
   Fix: feste Höhe (110px) direkt am carousel-element auf Mobile, plus
   alle .column-Slides innerhalb mit gleicher fester Höhe. Wichtig: feste
   height, nicht nur min-height — sonst kann ein extrem kurzer Slide
   theoretisch trotzdem schrumpfen. */
@media screen and (max-width: 749px) {
  [id*="multicolumn-with-icons"] carousel-element {
    min-height: 110px;
  }
  [id*="multicolumn-with-icons"] carousel-element .column {
    min-height: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}




/* === SECTION 112 — Newsletter Layout: Side-by-Side gleichmäßig (16.05.2026) ===
   
   Analyse der DOM-Struktur (nach Live-Inspection):
   <div class="field relative">
     <input class="input is-floating input--fill">
     <label class="label is-floating">
     <div class="self-submit-button absolute">  ← FLOATING-PATTERN
       <button is="magnet-button" data-magnet="20"> ← MAGNET-EFFEKT
     </div>
   </div>
   
   Theme-Default ist Floating-Submit: Button absolut über/in Input rechts
   positioniert. Niels-Wunsch: gleichmäßige Aufteilung Input + Button.
   
   Fix:
   1. .self-submit-button aus absolute auf static → fließt in Grid/Flex ein
   2. .field als Grid 1fr 1fr → gleichmäßige Aufteilung
   3. Button width 100% damit voll im Container
   4. Label nicht mehr floating positionieren (würde sonst über Button stehen) */

.newsletter-form .field {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}
.newsletter-form .field > .self-submit-button.absolute {
  position: static !important;
  display: block;
  width: 100%;
}
.newsletter-form .field > .self-submit-button .button {
  width: 100%;
  height: 100%;
  min-height: 51px;
}
.newsletter-form .field > .input {
  min-height: 51px;
}
/* Label nicht mehr absolute mit floating-position, weil neue Layout */
.newsletter-form .field > .label.is-floating {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
}


/* === SECTION 113 — Concern-Multicolumn: Cards gleich hoch (16.05.2026) ===
   
   Problem: 3 Cards "Falten/Poren/Müde Augen" mit unterschiedlich langen
   Texten. Auf Desktop sind die CTA-Buttons auf verschiedenen Y-Positionen.
   Auf Mobile (Slider) springt der "Häufige Fragen"-Block beim Slide-Wechsel.
   
   Genau dasselbe Pattern wie beim Trust-Slider (Section 109).
   
   Fix:
   1. Alle Cards stretchen auf gleiche Höhe (display: flex + align-items: stretch)
   2. Innerhalb jeder Card: flex-column, CTA mit margin-top: auto
   3. Auf Mobile: feste min-height für Slider-Container damit kein Sprung */

/* Desktop: Cards gleich hoch durch Stretching im Grid */
[id*="concern_text"] .multicolumn-grid,
[id*="concern_text"] .grid {
  align-items: stretch !important;
}
[id*="concern_text"] .column {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
}
/* CTA-Button immer am Boden */
[id*="concern_text"] .column .button,
[id*="concern_text"] .column a[class*="button"] {
  margin-top: auto;
}
/* Content davor (Text + Heading) wächst nach oben */
[id*="concern_text"] .column__content,
[id*="concern_text"] .column__text {
  flex: 1 1 auto;
}

/* Mobile Slider: feste min-height am Container + .column ähnlich wie Trust-Slider */
@media screen and (max-width: 749px) {
  [id*="concern_text"] carousel-element {
    min-height: 340px;
  }
  [id*="concern_text"] carousel-element .column {
    min-height: 340px;
    height: 340px;
  }
}


/* === SECTION 114 — Concern-Multicolumn: CTA-Link gleiche Höhe (16.05.2026) ===
   
   Niels-Wunsch: CTA-Buttons aller 3 Cards auf gleicher Höhe (Desktop + Mobile).
   Bei kürzerem Text soll mehr Spacing oben dazukommen.
   
   Diagnose Live-DOM: Der CTA-Link ist KEIN Button-Element. Er ist ein
   nackter <a> im LETZTEN <p> der .column__text.rte:
   <div class="column__text rte">
     <p><strong>Beschreibung...</strong></p>
     <p><a href="...">CTA-Text</a></p>   ← dieser <p> soll runter
   </div>
   
   Section 113 hatte margin-top:auto auf .button — greift nicht.
   
   Fix: column__content + column__text als flex column, last-child <p>
   bekommt margin-top: auto und wandert ans Boden-Ende. */

[id*="concern_text"] .column__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
}
[id*="concern_text"] .column__text.rte {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
[id*="concern_text"] .column__text.rte > p:last-child {
  margin-top: auto;
}


/* === SECTION 115 — Footer: 3 Spalten gleichmäßig verteilen Desktop (16.05.2026) ===
   
   Problem: Die 3 details-Spalten in .footer__accordions sind je 391px breit,
   viel breiter als ihr Content. Mit justify-content:space-between klebt zwar
   Spalte 3 rechts (bei 391px Breite endet sie bei x=1377, padding-right bei
   x=1392), aber visuell wirkt sie zu weit links, weil das Heading "Über uns"
   bei x=986 startet und 334px leerer Platz rechts daneben ist.
   
   Fix: Details-Spalten auf Content-Breite schrumpfen (flex: 0 0 auto).
   Mit space-between klebt erste links, letzte rechts, mittlere zentriert.
   Lücken zwischen Spalten werden deutlich größer (~389px statt 78px).
   
   Nur auf Desktop (≥1024px), da auf Mobile die details als Accordion 
   vertikal stapeln. */
@media screen and (min-width: 1024px) {
  .footer__accordions > details {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0;
  }
}

/* cache-bust-trailer 1778948069 */


/* =============================================
   SECTION 116 — vergleich_haut Mobile/Tablet Text-Alignment
   Stand: 17.05.2026
   
   Kontext: multicolumn-with-icons (Section type) rendert Cards mit
   Tailwind 'text-center' default und 'xl:text-left' erst ab 1200px.
   Pattern ist für concern_text (Icons + Heading + kurzer Text) gedacht
   und auf Desktop OK. Bei vergleich_haut (Männerhaut versus Frauenhaut)
   mit <ul><li>-Listen führt das auf Mobile/Tablet zu asymmetrischen
   Bullets/Text: Bullets bleiben browser-default links, Text wird zentriert.
   
   Fix: Section-spezifisch (Selector [id$="__vergleich_haut"]) Listen
   und Body-Text linksbündig erzwingen unter 1200px. Spaltenüberschriften
   "Männerhaut" / "Frauenhaut" bleiben zentriert für saubere visuelle
   Hierarchie.
   ============================================= */
@media screen and (max-width: 1199px) {
  [id$="__vergleich_haut"] .text-with-icons .column {
    text-align: left !important;
    align-items: flex-start !important;
  }
  
  [id$="__vergleich_haut"] .column__content {
    text-align: left !important;
    align-items: flex-start !important;
    width: 100%;
  }
  
  [id$="__vergleich_haut"] .column__text,
  [id$="__vergleich_haut"] .column__text p,
  [id$="__vergleich_haut"] .column__text ul,
  [id$="__vergleich_haut"] .column__text li {
    text-align: left !important;
  }
  
  /* Spaltenüberschrift (Männerhaut/Frauenhaut) bleibt zentriert */
  [id$="__vergleich_haut"] .column__title {
    text-align: center !important;
    align-self: center !important;
    width: 100%;
  }
}


/* === SECTION 117 — vergleich_haut + concern_text: Slider deaktivieren auf Mobile/Tablet (17.05.2026) ===
   
   Problem: multicolumn-with-icons rendert <carousel-element> mit watch-css.
   Flickity wird über .text-with-icons::after { content: 'flickity' } aktiviert
   und ist bei <1024px ein Slider mit adaptiveHeight: true. Bei zwei Cards mit
   unterschiedlich langen Listen springt der Container beim Swipe in der Höhe.
   
   Vorheriger Versuch (min-height auf carousel-element + .column) griff nicht,
   weil Flickity inline-style "height: Xpx" auf .flickity-viewport setzt — das
   Kind-Element, nicht auf carousel-element selbst. Stacking-Spezifität verloren.
   
   Lösung: Flickity-Aktivierung über content: none ausschalten für vergleich_haut
   UND concern_text unter 1024px. Die Cards werden als block-level Elemente
   untereinander gestapelt — kein Slider, kein Sprung.
   
   Erweitert 17.05.2026 auf concern_text. Evidenz-Basis: Baymard/NN/g empfehlen
   Static Stack > Slider bei <5 Cards (Discoverability statt Sequential Access).
   Konsistenz mit vergleich_haut. Trade-off längere Scrollstrecke akzeptabel.
   
   Diese Lösung ist sauberer als min-height, weil sie das eigentliche Problem
   (adaptiveHeight Flickity) am Wurzel löst statt zu kompensieren.
   ============================================= */
@media screen and (max-width: 1023px) {
  /* Flickity-Init verhindern (watchCSS prüft :after content) */
  [id$="__vergleich_haut"] .text-with-icons::after,
  [id$="__concern_text"] .text-with-icons::after {
    content: none !important;
  }
  
  /* Falls Flickity vor dem Override schon initialisiert war: DOM-Reset
     damit Slider-Artefakte (inline-styles, transforms) keine Wirkung haben */
  [id$="__vergleich_haut"] .flickity-viewport,
  [id$="__concern_text"] .flickity-viewport,
  [id$="__vergleich_haut"] .flickity-slider,
  [id$="__concern_text"] .flickity-slider {
    height: auto !important;
    width: auto !important;
    transform: none !important;
    position: static !important;
  }
  
  /* Cards als block-Stack mit Spacing */
  [id$="__vergleich_haut"] .text-with-icons,
  [id$="__concern_text"] .text-with-icons {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
  [id$="__vergleich_haut"] .column,
  [id$="__concern_text"] .column {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    left: 0 !important;
  }
  
  /* Flickity-Pagination-Dots und Buttons verstecken (Slider ist deaktiviert,
     aber Flickity init() läuft im watchCSS-Modus und legt diese DOM-Elemente
     trotzdem an — explizit ausblenden) */
  [id$="__vergleich_haut"] .flickity-page-dots,
  [id$="__concern_text"] .flickity-page-dots,
  [id$="__vergleich_haut"] .flickity-prev-next-button,
  [id$="__concern_text"] .flickity-prev-next-button,
  [id$="__vergleich_haut"] .flickity-button,
  [id$="__concern_text"] .flickity-button {
    display: none !important;
  }

}

/* === SECTION 118 — Audience-Hub-Pages: Anchor "Zur Produktauswahl" (17.05.2026) ===
   
   Kontext: Mit Stack-Layout für concern_text + vergleich_haut sind Audience-
   Hub-Pages auf Mobile ~10-12 Screens lang. NN/g empfiehlt Back-Navigation
   bei >4 Screens. Nach concern_text, vergleich_haut, faq_section soll je ein
   dezenter Anchor-Link "↑ Zur Produktauswahl" zum Produkt-Grid führen.
   
   Implementierung: 4 custom-liquid Sections im Template. Ein "anchor_produkte"
   Element vor "main" als Sprungziel, plus 3 "back_to_products" Links nach den
   Content-Sections. Styling: dezenter Text-Link statt prominenter Button,
   damit Beratungs-CTA als primäre Aktion klar bleibt.
   ============================================= */

/* Sprungziel: scroll-margin verhindert Verdeckung durch sticky Header */
#produkte-anchor {
  scroll-margin-top: 100px;
  display: block;
}

/* Container für den Back-to-Top Link */
.back-to-products {
  text-align: center;
  padding: 24px 0 32px;
  margin: 0;
}

.back-to-products a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgb(var(--color-foreground));
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--color-foreground) / 0.3);
  padding: 6px 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
  font-family: 'DM Sans', system-ui, sans-serif;
}

.back-to-products a:hover {
  border-bottom-color: rgb(var(--color-foreground));
  color: rgb(var(--color-foreground));
}

.back-to-products .arrow-up {
  font-size: 16px;
  line-height: 1;
}

@media screen and (max-width: 749px) {
  .back-to-products {
    padding: 20px 0 28px;
  }
  .back-to-products a {
    font-size: 15px;
  }
}

/* === SECTION 119 — Hub-Page Desktop: mehr Atemraum zwischen educational Sections (17.05.2026) ===
   Niels-Feedback: beratungs_cta -> concern_text -> vergleich_haut sitzen auf Desktop zu dicht aufeinander.
   Mobile bleibt unverändert (24px section-padding ist schon kompakt genug).
   Fix: padding-top/bottom auf Desktop von 48px (Theme-Default) auf 72px erhoehen fuer die drei Sections.
   ============================================= */
@media screen and (min-width: 1024px) {
  [id$="__beratungs_cta"] .section--padding,
  [id$="__concern_text"] .section--padding,
  [id$="__vergleich_haut"] .section--padding {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
}

/* === SECTION 120 — Focus-Ring auf Product-Cards via :focus-within (17.05.2026 v2) ===
   Bug-Reproduktion: Bei Tab-Navigation rendert Focus-Ring auf Inline-Links 
   (.product-card__title, Vendor-Link) nur als senkrechte Striche / eckige Klammern.
   Ursache: <a display:inline> + Browser-Outline-Rendering auf einzeiligem Text.
   v1-Fix (inline-block + Outline am Link selbst): Strich -> eckige Klammern, immer noch unsauber.
   v2-Fix: Outline auf den GANZEN .product-card Wrapper via :focus-within.
   Vorteil: User sieht klar WELCHE Card aktiv ist, unabhaengig vom inneren Link.
   Einzelne Card-Links bekommen kein eigenes Outline mehr (vermeidet Doppel-Rendering).
   ============================================= */

/* Outline an die Card selbst, wenn irgendein Link innerhalb fokussiert wird */
.product-card:focus-within {
  outline: 2px solid rgb(var(--color-keyboard-focus)) !important;
  outline-offset: 6px !important;
  border-radius: 4px !important;
}

/* Innere Card-Links: kein eigenes Outline mehr (Card-Outline uebernimmt) */
.product-card a:focus-visible,
.product-card .product-card__title:focus-visible,
.product-card .reversed-link:focus-visible {
  outline: none !important;
}

/* Quick-Add-Button bleibt sichtbar separat (eigener Action-Trigger, nicht Card-Navigation) */
.product-card .button:focus-visible {
  outline: 2px solid rgb(var(--color-keyboard-focus)) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* === SECTION 121 — Body-Text-Konsistenz + Newsletter-Headline (17.05.2026) ===
   (1) vergleich_haut Bullet-Points: 14px (Theme-Default fuer <ul><li> in .rte) -> 16px
       angeglichen an concern_text Body-Text. Niels-Feedback: visuell deutlich kleiner.
   (2) Newsletter-Headline: 32px (.title-md) -> 36px fuer mehr Praesenz. Bleibt unter den
       56px der Section-Headlines (Hierarchie), gewinnt aber Gewicht.
   ============================================= */

/* (1) Vergleich-Haut Bullet-Texte auf 16px wie concern_text */
[id$="__vergleich_haut"] .column__text ul,
[id$="__vergleich_haut"] .column__text li,
[id$="__vergleich_haut"] .column__text li strong {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* (2) Newsletter-Headline-Groesse: Desktop 36px, Mobile 24px (DCS-konform, 29.05.2026) */
[id$="__newsletter_cta"] .banner__title.title-md {
  font-size: 36px !important;
}
@media screen and (max-width: 749px) {
  [id$="__newsletter_cta"] .banner__title.title-md {
    font-size: 24px !important;
  }
}




/* === Footer-Spalten-Headings: visuelle Hierarchie verstärken (19.05.2026) ===
   Konkurrenz: Section 92 setzt .footer .footer__left .heading {font-weight: 400 !important}
   (Spezifität 0,3,0). Mein Override muss höhere Spezifität haben.
   Lösung: .footer .footer__left .details__summary .heading (0,4,0). */
/* Footer-Headings: font-weight 500 (DM Sans Medium) — ENTSCHIEDEN 29.05.2026
   700 und 600 kein wahrnehmbarer Unterschied bei DM Sans 13px uppercase.
   500 wirkt leichter und besser proportioniert. Niels-Freigabe erteilt.
   ID-Selektor nötig um Tailwind lg:font-heading (700) zu überschreiben. */
#shopify-section-sections--30097419174219__footer .footer__left .heading {
  font-weight: 500 !important;
}

/* ============================================ */
/* SECTION 123 - FAQ: Abstand Ueberschrift zur ersten Frage (28.05.2026) */
/* Bei style=with-border rendert die Ueberschrift als .title-wrapper        */
/* direkt vor .faqs. Theme-Default-Margin ist zu gross; auf ruhige 20px      */
/* setzen, nur im FAQ-Kontext (per :has + Adjacent-Sibling gescopt).         */
/* ============================================ */
.section .title-wrapper:has(+ .faqs) { margin-bottom: 1.25rem !important; }
.section .title-wrapper + .faqs { margin-top: 0 !important; }


/* === Gift-Card: Versandkosten-Hinweis ausblenden (29.05.2026) ===
   Digitales Produkt, kein physischer Versand. Text ist hardcoded in main-product.liquid.
   Selektor greift nur auf das gift-card Template via body-Klasse. */
body.template-product-gift-card [id*="__main-product"] .product__price-note {
  display: none !important;
}

/* === Section 95 - Marken-Uebersicht (/collections): Logo-Skalierung + Mobile-Stack (01.06.2026) ===
   list-collections.json. marke_*-Bloecke (image-with-text) tragen Wortmarken-Logos, die mobil volle
   Breite einnehmen. orientierung (multicolumn-with-icons) wird mobil als Flickity-Carousel gerendert
   (watch-css + .text-with-icons::after{content:'flickity'}). Eng auf __marke_ / __orientierung gescopt,
   damit globale .text-with-icons- und [id*=multicolumn-with-icons]-Regeln (Trust-Bar) unberuehrt bleiben. */
[id*="__marke_"] media-element.image-with-text__image{max-width:70%;margin-inline:auto;}
@media screen and (max-width:767px){
  [id*="__marke_"] media-element.image-with-text__image{max-width:50%;}
}
@media screen and (max-width:1023px){
  [id*="__orientierung"] .text-with-icons::after{content:'' !important;}
  [id*="__orientierung"] carousel-element.text-with-icons{display:grid !important;grid-template-columns:1fr !important;gap:32px !important;}
  [id*="__orientierung"] carousel-element.text-with-icons .column{width:100% !important;}
}


/* === Section 96 - Heading-Gewicht mobil 500 (Entscheidung Niels 01.06.2026) + Hero-H1 zentriert ===
   Designguide sieht mobil kraeftigere Headings vor (dokumentiert 700, griff wegen Concept-Spezifizitaet nicht).
   Entscheidung: mobil 500 statt 700 (eleganter). EB Garamond 400/500/700 sind echte Webfonts (css-variables.liquid)
   -> 500 ist kein Fake-Bold. .heading/h1-h6 nutzen --font-heading-weight; daher Variable + identische Selektorliste
   wie der aeltere Mobil-Block (spaeter im File = gewinnt, 500 statt 700).
   Ausrichtung (Regel 01.06.2026): Fliesstext links, H1 zentriert. rich-text Hero/Intro stehen jetzt auf links (Body links),
   die Seiten-H1 (rich-text h1) wird per Regel wieder zentriert, H2 bleiben links. */
@media screen and (max-width: 767px) {
  :root { --font-heading-weight: 500; }
  h1, h2, h3,
  .title-lg, .title-md, .title-sm,
  .heading, .heading.title-md, .heading.title-lg,
  .title-md .word, .title-lg .word,
  .section .section-heading .heading.title-md,
  .section .heading.title-md,
  .with-border .accordion--text .heading {
    font-weight: 500 !important;
  }
}
.rich-text h1 {
  text-align: center !important;
}


/* === Section 97 - Marken-Logos: echte Skalierung statt Cover-Crop (01.06.2026) ===
   Ursache (am Theme verifiziert + Community bestaetigt): image-with-text rendert das Bild als
   absolut positioniertes object-fit:cover in einer aspect-ratio-Box (.media--height>img, --ratio-percent
   aus image.aspect_ratio). Bei SVG-Logos ist aspect_ratio unzuverlaessig -> falsche Box + cover -> Mittel-Beschnitt.
   Loesung: Box-Mechanik fuer die Marken-Bloecke aufheben, Logo als natuerliches, contained Bild mit Breiten-Cap, zentriert. */
[id*="__marke_"] .image-with-text__image,
[id*="__marke_"] .image-with-text__image.media--adapt {
  height: auto !important;
  padding-block-end: 0 !important;
  overflow: visible !important;
  max-width: 220px !important;
  margin-inline: auto !important;
}
[id*="__marke_"] .image-with-text__image .media,
[id*="__marke_"] .image-with-text__image picture {
  position: static !important;
  inset: auto !important;
  height: auto !important;
  width: 100% !important;
  overflow: visible !important;
}
[id*="__marke_"] .image-with-text__image :is(img, svg) {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}
@media screen and (max-width: 767px) {
  [id*="__marke_"] .image-with-text__image,
  [id*="__marke_"] .image-with-text__image.media--adapt { max-width: 55% !important; }
}


/* === Section 99 - Marken-Logos individuelle Groesse (Niels 01.06.2026) ===
   Basis Section 97 = 220px/55%. ZO, iS Clinical, Colorescience +20% (264px/66%); Cyspera -20% (176px/44%);
   mesoestetic unveraendert. .media--adapt mitgefuehrt fuer gleiche Spezifizitaet wie Section 97 (spaeter = gewinnt). */
[id$="__marke_zo"] .image-with-text__image, [id$="__marke_zo"] .image-with-text__image.media--adapt,
[id$="__marke_isclinical"] .image-with-text__image, [id$="__marke_isclinical"] .image-with-text__image.media--adapt,
[id$="__marke_colorescience"] .image-with-text__image, [id$="__marke_colorescience"] .image-with-text__image.media--adapt {
  max-width: 264px !important;
}
[id$="__marke_cyspera"] .image-with-text__image, [id$="__marke_cyspera"] .image-with-text__image.media--adapt {
  max-width: 176px !important;
}
@media screen and (max-width: 767px) {
  [id$="__marke_zo"] .image-with-text__image, [id$="__marke_zo"] .image-with-text__image.media--adapt,
  [id$="__marke_isclinical"] .image-with-text__image, [id$="__marke_isclinical"] .image-with-text__image.media--adapt,
  [id$="__marke_colorescience"] .image-with-text__image, [id$="__marke_colorescience"] .image-with-text__image.media--adapt {
    max-width: 66% !important;
  }
  [id$="__marke_cyspera"] .image-with-text__image, [id$="__marke_cyspera"] .image-with-text__image.media--adapt {
    max-width: 44% !important;
  }
}


/* === Section 124 - Marken-Uebersicht: Orientierungs-Karten klickbar + Sand-Hover (01.06.2026) ===
   multicolumn-with-icons column-Block hat jetzt ein optionales link-Setting (section-liquid).
   Gesetzte Links machen die Karte per Stretched-Link klickbar (.column--linked, immer aktiv).
   Sichtbarer Hover NUR wenn ALLE Karten der Section verlinkt sind: die Section traegt dann
   .cards-all-linked (per Liquid berechnet). Dezenter Marken-Sand #E5E0D8, 250ms, nur Hover-Geraete.
   Entscheidung Niels 01.06.2026: keine Hover-Affordance bei teilweise verlinkten Sections. */
.column--linked { position: relative; }
.column--linked .column__stretched-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.cards-all-linked .column--linked {
  border-radius: 12px;
  padding: 20px;
  transition: background-color 0.25s ease;
}
@media (hover: hover) {
  .cards-all-linked .column--linked:hover { background-color: #E5E0D8; }
}


/* === Audience-/Cross-Hub Overlay-Kacheln (03.06.2026) === */
[id$="__cross_hubs"] .media-card--overlap .media-card__content,
[id$="__audience-einstieg"] .media-card--overlap .media-card__content {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-block: 0;
  padding-inline: clamp(var(--sp-8), 5vw, var(--sp-16));
  gap: var(--sp-3);
}
[id$="__cross_hubs"] .media-card__text .heading,
[id$="__audience-einstieg"] .media-card__text .heading {
  font-size: var(--fluid-2xl-to-4xl);
  white-space: pre-line;
}
@media screen and (pointer: fine) {
  [id$="__cross_hubs"] .media-card__link:hover .media img,
  [id$="__audience-einstieg"] .media-card__link:hover .media img {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    filter: brightness(0.8);
  }
  [id$="__cross_hubs"] .media-card .media img,
  [id$="__audience-einstieg"] .media-card .media img {
    transition: filter var(--animation-primary, .25s ease);
  }
}
[id$="__cross_hubs"] .card-grid { gap: clamp(var(--sp-6), 3vw, var(--sp-10)); }
[id$="__audience-einstieg"] .card-grid { gap: clamp(var(--sp-6), 3vw, var(--sp-10)); }


/* Section 95 - Tap-Targets min. 44x44 (BFSG / WCAG 2.5.8 Target Size, Befund CB-101 Mobile-Render 07.06.2026) */
/* Quick-Add Warenkorb- und Varianten-Buttons der Produktkarten lagen bei 40x40. */
/* min-size sitzt auf dem Button-Element (Tap-Flaeche); das ::after fuellt als sichtbare Schicht mit. */
.quick-add .button {
  min-width: 44px;
  min-height: 44px;
}
/* Video-Abspielen-Button im Medien-Lightbox lag bei 40px (--sp-10). */
.pswp__video-container .play-button {
  min-width: 44px;
  min-height: 44px;
}