/* ═══════════════════════════════════════════════════════
   Yaska Germany — custom.css
   Alle visuellen Overrides für das Yaska-Branding.
   Wird zusätzlich zur kompilierten yaska.css geladen.

   Struktur:
   1. CSS-Variablen (Design-Tokens)
   2. Google Fonts Import
   3. Top Bar
   4. Header
   5. Navbar / Navigation
   6. Klarna-Badge
   7. Footer
   8. Buttons (CTA Orange)
   9. Produktkarten
   10. Allgemeine Utilities
   ═══════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   1. CSS Design-Tokens
   ────────────────────────────────────────────────────── */
:root {
  --ys-ocean:        #004F9E;
  --ys-ocean-mid:    #0070CC;
  --ys-ocean-dark:   #002D5C;
  --ys-ocean-deep:   #001A40;
  --ys-aqua:         #63C6FF;   /* Akzentfarbe — hellblau */
  --ys-aqua-light:   #E8F6FF;
  --ys-cta:          #FF6B00;
  --ys-cta-dark:     #D95A00;
  --ys-green:        #16A34A;
  --ys-gold:         #C9A84C;
  --ys-text:         #0F1B2D;
  --ys-text-soft:    #3D4F6B;
  --ys-muted:        #6B7280;
  --ys-border:       #E2E8F0;
  --ys-bg-soft:      #F0F6FF;
  --ys-white:        #FFFFFF;
  --ys-footer-bg:    #060F1C;
  --ys-footer-dark:  #03080F;
  --ys-shadow:       0 2px 16px rgba(0, 45, 92, 0.08);
  --ys-shadow-md:    0 8px 40px rgba(0, 45, 92, 0.14);
  --ys-r:            8px;

  /* Bootstrap --primary überschreiben (NOVA clear hat #F8BF00 = Gelb) */
  --primary: #004F9E;
  --secondary: #3D4F6B;
  --success: #16A34A;
  --warning: #FF6B00;
  --info: #0070CC;
}
/* Doppelte Absicherung: crit.css setzt :root --primary inline */
:root:root {
  --primary: #004F9E !important;
}

/* ──────────────────────────────────────────────────────
   1b. Bootstrap Primary-Farb-Overrides
   Bootstrap 4 kompiliert $primary=#F8BF00 hart in alle Utility-
   Klassen — CSS-Variablen allein reichen nicht. Alles hier
   überschreiben.
   ────────────────────────────────────────────────────── */

/* Badges (Warenkorb-/Wunschliste-Zähler) — orange wie im Mockup */
.fa-sup,
.badge-primary,
.bg-primary {
  background-color: var(--ys-cta) !important;
  color: #ffffff !important;
}

/* Text */
.text-primary,
a.text-primary:hover,
a.text-primary:focus {
  color: var(--ys-aqua) !important;
}

/* Buttons */
.btn-primary {
  background-color: var(--ys-ocean) !important;
  border-color: var(--ys-ocean) !important;
  color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--ys-ocean-mid) !important;
  border-color: var(--ys-ocean-mid) !important;
}
.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(99, 198, 255, 0.4) !important;
}

/* Outline-Buttons */
.btn-outline-primary {
  color: var(--ys-ocean) !important;
  border-color: var(--ys-ocean) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--ys-ocean) !important;
  color: #ffffff !important;
}

/* Border */
.border-primary {
  border-color: var(--ys-aqua) !important;
}

/* Skip-Nav-Button (Accessibility-Element, normalerweise unsichtbar) */
.btn-skip-to {
  border-color: var(--ys-aqua) !important;
}

/* Focus-Ringe sitewide */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline-color: var(--ys-aqua);
  box-shadow: 0 0 0 0.2rem rgba(99, 198, 255, 0.35);
}

/* ──────────────────────────────────────────────────────
   2. Fonts
   ────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color: var(--ys-text);
  background-color: #ffffff;
}

/* ──────────────────────────────────────────────────────
   3. Top Bar (.yaska-topbar)
   ────────────────────────────────────────────────────── */
/* Topbar-Wrapper: eigene Hintergrundfarbe, damit kein Weiß vom Header durchscheint */
#header-top-bar {
  background-color: var(--ys-ocean-deep);
}

.yaska-topbar {
  background-color: var(--ys-ocean-deep);
  color: #ffffff;
  font-size: 12px;
  padding: 7px 0;
  line-height: 1.4;
  width: 100%;  /* volle Breite im flex-row-reverse Container */
}

.yaska-topbar__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.yaska-topbar__left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Sprachauswahl und Währung innerhalb der Topbar: kompakt halten */
.yaska-topbar .topbar-main {
  flex-direction: row;
  align-items: center;
  gap: 4px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.yaska-topbar__link {
  color: #ffffff;
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.yaska-topbar__link:hover,
.yaska-topbar__link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.yaska-topbar__right {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  white-space: nowrap;
}

.yaska-topbar__delivery-icon {
  font-size: 13px;
}

/* Flagge + Separator */
.yaska-topbar__flag {
  color: #ffffff;
  white-space: nowrap;
}
.yaska-topbar__sep {
  color: rgba(255, 255, 255, 0.2);
  margin: 0 2px;
}

/* Divider zwischen Links */
.yaska-topbar__left .nav-dividers .nav-item + .nav-item::before {
  content: '|';
  color: rgba(255, 255, 255, 0.2);
  margin: 0 4px;
}

/* ──────────────────────────────────────────────────────
   4. Header — jtl-nav-wrapper = weißer Haupt-Header
   Single-Row-Mode: Zeile 1 = Logo + Suche + Icons (weiß)
                   Zeile 2 = Kategorienleiste (Ocean-Blau)
   ────────────────────────────────────────────────────── */
#jtl-nav-wrapper {
  background-color: #ffffff !important;
  border-bottom: none !important;
  box-shadow: 0 2px 16px rgba(0, 45, 92, 0.07) !important;
}

/* Logo: Abstand nach rechts */
.logo-wrapper,
#logo {
  margin-right: 16px;
}

/* Logo-Bild-Höhe */
#jtl-nav-wrapper .navbar-brand img#shop-logo {
  height: 46px;
  width: auto;
  object-fit: contain;
}

/* Suchleiste — für weißen Header (dunkler Text, blauer Submit-Button) */
#jtl-nav-wrapper .search-wrapper .input-group {
  background: var(--ys-bg-soft);
  border: 1.5px solid var(--ys-border);
  border-radius: var(--ys-r);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#jtl-nav-wrapper .search-wrapper .input-group:focus-within {
  border-color: var(--ys-ocean);
  box-shadow: 0 0 0 3px rgba(0, 79, 158, 0.12);
}
#jtl-nav-wrapper .search-wrapper .form-control {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--ys-text);
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
#jtl-nav-wrapper .search-wrapper .input-group-append {
  margin-left: 0;
}
#jtl-nav-wrapper .search-wrapper .form-control::placeholder {
  color: var(--ys-muted);
}
#jtl-nav-wrapper .search-wrapper [type="submit"] {
  background-color: var(--ys-ocean);
  border-color: var(--ys-ocean);
  color: #fff;
  transition: background-color 0.2s;
}
#jtl-nav-wrapper .search-wrapper [type="submit"]:hover {
  background-color: var(--ys-ocean-dark);
}

/* Suchfeld auf Desktop bis zum Logo ausdehnen.
   Navbar + nav-icons-Liste strecken sich auf den ganzen Freiraum,
   das #search-Item bekommt flex-grow und füllt den Gap zum Logo. */
@media (min-width: 992px) {
  #jtl-nav-wrapper nav.navbar {
    flex-grow: 1;
  }
  #jtl-nav-wrapper nav.navbar ul.nav.nav-right,
  #jtl-nav-wrapper nav.navbar .yaska-nav-icons {
    flex-grow: 1;
    width: 100%;
  }
  #jtl-nav-wrapper li.nav-item#search,
  #jtl-nav-wrapper #search.nav-item {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 20px;
  }
  #jtl-nav-wrapper #search .search-wrapper,
  #jtl-nav-wrapper .main-search-wrapper {
    max-width: none !important;
    width: 100%;
  }
  #jtl-nav-wrapper #search form,
  #jtl-nav-wrapper #search .form-icon {
    width: 100%;
    display: block;
  }
  #jtl-nav-wrapper #search .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }
  /* twitter-typeahead-Wrapper (wird von typeahead.js um das Input gelegt)
     muss mitflexen — sonst sitzt der Submit-Button mittig im Input. */
  #jtl-nav-wrapper #search .input-group > .twitter-typeahead,
  #jtl-nav-wrapper #search .input-group > span.twitter-typeahead {
    flex: 1 1 auto !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
  }
  #jtl-nav-wrapper #search .twitter-typeahead > .tt-input,
  #jtl-nav-wrapper #search .twitter-typeahead > .tt-hint,
  #jtl-nav-wrapper #search .input-group > .form-control.ac_input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Submit-Button klebt am rechten Rand, auch wenn Typeahead nicht initialisiert ist */
  #jtl-nav-wrapper #search .input-group > .input-group-append {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
}

/* ──────────────────────────────────────────────────────
   5. Navbar / Kategorienleiste
   Nav-Icons: dunkel auf weißem Header
   Kategorienleiste (.yaska-catbar): eigene Zeile unter Logo+Icons, Ocean-Blau
   ────────────────────────────────────────────────────── */

/* Nav-Icons (Konto, Wunschliste, Warenkorb, Klarna) — dunkle Schrift */
.nav-icons .nav-link,
.yaska-nav-icons .nav-link {
  color: var(--ys-text) !important;
}
.nav-icons .nav-link:hover,
.yaska-nav-icons .nav-link:hover {
  color: var(--ys-ocean) !important;
  background-color: var(--ys-bg-soft) !important;
  border-radius: var(--ys-r);
}

/* Navbar (Logo-Zeile): transparent */
nav.navbar {
  background-color: transparent !important;
}

/* Yaska Catbar — eigene Zeile außerhalb der Bootstrap-Navbar.
   Desktop: Ocean-Blau, volle Bildschirmbreite via box-shadow (keine Layout-Seiteneffekte).
   Mobile: Off-Canvas (wird via .collapse mit dem Burger-Button gesteuert). */
.yaska-catbar {
  position: relative;
  isolation: isolate; /* eigenen Stacking-Kontext erzeugen, damit z-index: -1 lokal bleibt */
}
@media (min-width: 992px) {
  /* Gesamter Header-Inhalt (Logo/Suche/Klarna/Icons-Zeile + Kategorien)
     auf Shop-Breite 1320px begrenzen. NOVAs .container-fluid-xl
     erlaubt 1650px — das waere breiter als der Page-Content darunter. */
  .yaska-header-inner {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Blauer Balken edge-to-edge (full-bleed), Inhalt auf Shop-Breite.
     Der aeussere .yaska-catbar wird per negativen Margins auf die
     volle Viewport-Breite gezogen; der innere .yaska-catbar__inner
     limitiert den Inhalt auf 1320px (identisch zu allen anderen
     Yaska-Sections: .ys-best, .ys-hero, .ys-cats etc.). */
  .yaska-catbar {
    background-color: var(--ys-ocean);
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: 0;
    padding-right: 0;
  }
  .yaska-catbar__inner {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    width: 100%;
  }
  /* Auf Desktop brauchen wir das collapse-Verhalten NICHT — Kategorien immer sichtbar */
  .yaska-catbar #mainNavigation.collapse {
    display: flex !important;
  }
}

/* Kategorie-Links: weiß auf blauem Hintergrund */
.navbar-nav .nav-link,
.nav-scrollbar-inner .nav-link {
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 500;
  font-size: 13px;
  padding: 13px 18px;
  border-bottom: 3px solid transparent;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.navbar-nav .nav-link:hover,
.nav-scrollbar-inner .nav-link:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: transparent;
}

.navbar-nav .nav-item.active > .nav-link,
.nav-scrollbar-inner .nav-item.active > .nav-link {
  color: #ffffff !important;
  border-bottom-color: var(--ys-aqua);
  background-color: transparent;
}

/* Nav-Body: auf Desktop Flex → linke + rechte Nav nebeneinander.
   Overflow von nav-scrollbar wird auf visible gesetzt, damit alle
   Kategorien sichtbar bleiben (kein Scrollen auf Desktop). */
@media (min-width: 992px) {
  .yaska-catbar #mainNavigation.nav-scrollbar {
    overflow: visible !important;
  }
  .yaska-catbar .nav-mobile-body {
    display: flex !important;
    align-items: center;
    width: 100%;
    overflow: visible;
  }
  .yaska-catbar .nav-scrollbar-inner {
    overflow: visible !important;
    width: auto !important;
    flex-wrap: nowrap;
  }
  /* Erste navbarnav (Kategorien) bekommt den auto-margin für Pushing */
  .yaska-catbar .nav-scrollbar-inner.mr-auto {
    margin-right: auto !important;
  }
  /* Navbar-nav UL soll Flex-Row bleiben */
  .yaska-catbar .nav-scrollbar-inner.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
  }
}

/* Scrollbar-Pfeile ausblenden — wir wollen kein scrollbares Menü */
.nav-scrollbar-arrow {
  display: none !important;
}

/* B2B-Links rechts (aqua, fett) */
.yaska-nav-b2b .yaska-nav-b2b__link {
  color: var(--ys-aqua) !important;
  font-weight: 700 !important;
}
.yaska-nav-b2b .yaska-nav-b2b__link:hover {
  background-color: rgba(99, 198, 255, 0.15) !important;
  color: #ffffff !important;
}

/* Dropdown innerhalb der Navbar */
.navbar-nav .dropdown-menu {
  border-radius: 0 0 var(--ys-r) var(--ys-r);
  border: none;
  box-shadow: var(--ys-shadow-md);
  background: #ffffff;
  min-width: 220px;
}
.navbar-nav .dropdown-item {
  color: var(--ys-text);
  font-size: 13px;
  padding: 9px 18px;
}
.navbar-nav .dropdown-item:hover {
  background-color: var(--ys-bg-soft);
  color: var(--ys-ocean);
}

/* ── Mega-Menu: volle Breite der Kategorien-Leiste ──
   Greift sobald Kategorien Unterkategorien bekommen.
   Genau nach NOVA-Konvention: .dropdown-full → position static,
   .dropdown-menu → width 100%, left 0.                          */
@media (min-width: 992px) {
  /* Positioning-Kontext: die ozean-blaue Kategorien-Bar */
  [class*="menu-center-"] {
    position: relative;
  }
  /* Kategorie mit Untermenü: aus dem normalen Stacking raus */
  .nav-scrollbar-item.dropdown-full,
  .nav-scrollbar-item.dropdown.dropdown-full {
    position: static;
  }
  /* Dropdown spannt sich über die volle Breite der Bar */
  .nav-scrollbar-item.dropdown-full > .dropdown-menu {
    width: 100%;
    left: 0;
    right: 0;
    border-radius: 0 0 8px 8px;
    border-top: 2px solid var(--ys-ocean);
    padding: 0;
  }
  /* Inhalts-Wrapper auf Container-Breite zentrieren */
  .nav-scrollbar-item.dropdown-full .dropdown-body {
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 28px 24px;
  }
  /* Subkategorie-Überschriften */
  .nav-scrollbar-item.dropdown-full .submenu-headline,
  .nav-scrollbar-item.dropdown-full .submenu-headline-toplevel {
    color: var(--ys-ocean);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 8px;
  }
  /* Subkategorie-Links */
  .nav-scrollbar-item.dropdown-full .nav-link {
    color: var(--ys-text) !important;
    font-size: 13px;
    padding: 5px 0 !important;
    border-bottom: none !important;
    font-weight: 400;
  }
  .nav-scrollbar-item.dropdown-full .nav-link:hover {
    color: var(--ys-ocean) !important;
  }
}

/* Mobile Burger-Toggler — dunkel auf weißem Header */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23004F9E' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler {
  border-color: rgba(0, 79, 158, 0.3);
}

/* ──────────────────────────────────────────────────────
   6. Klarna-Badge (.yaska-klarna-badge)
   ────────────────────────────────────────────────────── */
.yaska-klarna-badge {
  padding: 0 12px;
}

.yaska-klarna-badge__inner {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: var(--ys-r);
  padding: 7px 13px;
  font-size: 11.5px;
  font-weight: 600;
  color: #15803d;
  white-space: nowrap;
  cursor: default;
}

.yaska-klarna-badge__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────
   7. Footer (.yaska-footer)
   ACHTUNG: yaska_crit.css enthält "#footer { background: #f5f7fa }" mit
   höherer Spezifität (ID-Selektor). Daher hier !important + ID-Selektor.
   ────────────────────────────────────────────────────── */
#footer.yaska-footer,
.yaska-footer {
  background-color: var(--ys-footer-bg) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 14px;
  /* crit.css setzt padding: 4rem 0 0 – zurücksetzen */
  padding: 0 !important;
}

/* ── Footer: Newsletter-Bereich ── */
.yaska-footer__newsletter {
  background-color: rgba(0, 180, 216, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 40px 0;
}
.yaska-footer__newsletter-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.yaska-footer__newsletter-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}
.yaska-footer__newsletter-info {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}
.yaska-footer__newsletter-form {
  display: flex;
  gap: 8px;
  margin-bottom: 0;
}
.yaska-nl-input.form-control {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--ys-r);
  color: #ffffff;
  font-size: 0.88rem;
  transition: border-color 0.2s;
}
.yaska-nl-input.form-control::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.yaska-nl-input.form-control:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--ys-aqua);
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15);
  color: #ffffff;
}

/* ── Footer: Haupt-Grid ── */
.yaska-footer__main {
  padding: 56px 0 40px;
}
.yaska-footer__grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 991px) {
  .yaska-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .yaska-footer__col--brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 575px) {
  .yaska-footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ── Footer: Marken-Spalte ── */
.yaska-footer__logo {
  display: block;
  margin-bottom: 14px;
}
.yaska-footer__logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.yaska-footer__logo-text {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
}
.yaska-footer__about {
  font-size: 0.8rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 16px;
}
.yaska-footer__guarantee-badge {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(22, 163, 74, 0.1);
  border: 1px solid rgba(22, 163, 74, 0.2);
  border-radius: var(--ys-r);
  padding: 11px 13px;
  font-size: 0.78rem;
  color: #86EFAC;
  margin-bottom: 18px;
  line-height: 1.5;
}
.yaska-footer__guarantee-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Footer: Social-Icons ── */
.yaska-footer__social {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.yaska-social-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--ys-r);
  background: rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}
.yaska-social-btn:hover {
  background: var(--ys-ocean-mid);
  color: #ffffff;
  text-decoration: none;
}

/* ── Footer: Link-Spalten ── */
.yaska-footer__col-title {
  color: #ffffff;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.yaska-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.yaska-footer__links li a {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.15s;
  line-height: 1.5;
}
.yaska-footer__links li a:hover {
  color: #ffffff;
  text-decoration: none;
}

/* ── Footer: JTL-Box-Inhalt im dunklen Footer ──
   Boxen (Admin → Boxen → Position "Unten") bringen eigenes JTL-HTML
   mit Bootstrap-Card-Klassen. Diese Regeln passen sie ans Yaska-
   Dark-Footer-Design an, ohne das Box-System zu umgehen.            */
.yaska-footer__col .box {
  background: transparent;
  border: none;
  margin: 0;
}
.yaska-footer__col .card-header,
.yaska-footer__col .box-title,
.yaska-footer__col .box-normal-link,
.yaska-footer__col .productlist-filter-headline {
  color: #ffffff !important;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding: 0;
  background: transparent;
  border: none;
  text-decoration: none;
}
.yaska-footer__col .card-header span,
.yaska-footer__col .box-title span,
.yaska-footer__col .box-normal-link span,
.yaska-footer__col .productlist-filter-headline span {
  color: inherit !important;
}
.yaska-footer__col .card-body,
.yaska-footer__col .box-body {
  padding: 0;
  background: transparent;
}
.yaska-footer__col .nav-link,
.yaska-footer__col .box-body a {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.15s;
  line-height: 1.5;
  padding: 4px 0;
}
.yaska-footer__col .nav-link:hover,
.yaska-footer__col .box-body a:hover {
  color: #ffffff;
  text-decoration: none;
}
.yaska-footer__col .nav-item {
  padding: 0;
}
.yaska-footer__col .nav.flex-column {
  gap: 9px;
}

/* ── Footer: Bottom-Bar ── */
.yaska-footer__bottom {
  background-color: var(--ys-footer-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.yaska-footer__bottom-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.28);
}
.yaska-footer__copyright {
  color: rgba(255, 255, 255, 0.28);
}
.yaska-footer__copyright a {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: underline;
}
.yaska-footer__sep {
  margin: 0 6px;
  opacity: 0.4;
}
.yaska-footer__payment {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}
.yaska-pay-badge {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}
.yaska-footer__jtl-credit {
  color: rgba(255, 255, 255, 0.22);
  font-size: 10px;
}
.yaska-footer__jtl-link {
  color: rgba(255, 255, 255, 0.35) !important;
  text-decoration: none;
}
.yaska-footer__jtl-link:hover {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ──────────────────────────────────────────────────────
   8. Buttons — CTA Orange
   ────────────────────────────────────────────────────── */
.yaska-btn-cta,
.btn-yaska-cta {
  background-color: var(--ys-cta) !important;
  border-color: var(--ys-cta) !important;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: var(--ys-r);
  box-shadow: 0 4px 18px rgba(255, 107, 0, 0.28);
  transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.yaska-btn-cta:hover,
.btn-yaska-cta:hover {
  background-color: var(--ys-cta-dark) !important;
  border-color: var(--ys-cta-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(255, 107, 0, 0.36);
}

/* Primärer Button (Ocean-Blau) */
.btn-primary {
  background-color: var(--ys-ocean) !important;
  border-color: var(--ys-ocean) !important;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: var(--ys-r);
}
.btn-primary:hover {
  background-color: var(--ys-ocean-mid) !important;
  border-color: var(--ys-ocean-mid) !important;
}

/* In-den-Warenkorb-Button */
.btn-basket,
.btn-add-to-cart,
[class*="add-to-cart"] {
  background-color: var(--ys-ocean) !important;
  border-color: var(--ys-ocean) !important;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: var(--ys-r);
  transition: background-color 0.2s;
}
.btn-basket:hover,
.btn-add-to-cart:hover {
  background-color: var(--ys-ocean-mid) !important;
  border-color: var(--ys-ocean-mid) !important;
}

/* ──────────────────────────────────────────────────────
   9. Produktkarten (Galerie-Ansicht)
   ────────────────────────────────────────────────────── */

/* --- 9a. Card Container --- */
.productbox.productbox-column {
  background: #fff;
  border: 1px solid var(--ys-border) !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  cursor: pointer;
  position: relative;
}
.productbox.productbox-column:hover {
  box-shadow: var(--ys-shadow-md) !important;
  transform: translateY(-4px);
}

/* product-wrapper bekommt keinen eigenen Rahmen */
.product-wrapper {
  border: none !important;
  background: transparent !important;
  overflow: visible;
}
.product-wrapper .col-inner {
  padding: 0;
}

/* --- 9b. Ribbon-Badges (Sale, Neu, Bestseller) --- */
.productbox .ribbon,
.productbox [class*="ribbon"] {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}
.ribbon.ribbon-1,
.ribbon.ribbon-sale {
  background: var(--ys-cta) !important;
  color: #fff !important;
}
.ribbon.ribbon-2,
.ribbon.ribbon-new {
  background: var(--ys-ocean) !important;
  color: #fff !important;
}
.ribbon.ribbon-3,
.ribbon.ribbon-bestseller {
  background: var(--ys-green) !important;
  color: #fff !important;
}
.ribbon.ribbon-4,
.ribbon.ribbon-topseller {
  background: var(--ys-green) !important;
  color: #fff !important;
}
.ribbon.ribbon-custom {
  border-radius: 20px;
}

/* --- 9c. Produktbild --- */
.productbox .productbox-image {
  background: var(--ys-bg-soft);
  position: relative;
}
.productbox .productbox-images {
  background: var(--ys-bg-soft);
}
.productbox .square-image .inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- 9d. Quick-Actions (Wunschliste, Vergleich) --- */
.productbox .productbox-quick-actions {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 3;
  flex-direction: column;
  gap: 5px;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.productbox:hover .productbox-quick-actions {
  opacity: 1;
  transform: translateX(0);
}
.productbox .productbox-quick-actions .btn,
.productbox .productbox-quick-actions button,
.productbox .productbox-quick-actions a {
  width: 34px;
  height: 34px;
  background: #fff !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border: none !important;
  padding: 0 !important;
  color: var(--ys-text-soft) !important;
  font-size: 14px;
  transition: color 0.15s, box-shadow 0.15s;
}
.productbox .productbox-quick-actions .btn:hover,
.productbox .productbox-quick-actions button:hover,
.productbox .productbox-quick-actions a:hover {
  color: var(--ys-ocean) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* --- 9e. Produktname --- */
.productbox .productbox-title {
  padding: 0 17px;
  margin-top: 15px;
}
.productbox .productbox-title a {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ys-text) !important;
  line-height: 1.4;
  text-decoration: none !important;
}
.productbox .productbox-title a:hover {
  color: var(--ys-ocean) !important;
}

/* --- 9f. Hersteller (als Brand-Label) --- */
.productbox .productlist-item-detail dt,
.productbox .productbox-manufacturer {
  display: none;
}

/* --- 9g. Bewertung / Rating --- */
.productbox .rating {
  padding: 0 17px;
  margin-bottom: 6px;
}
.productbox .rating .fas.fa-star,
.productbox .rating .fa-star {
  color: #F59E0B !important;
  font-size: 12px;
}
.productbox .rating-count,
.productbox .rating .text-muted {
  font-size: 11px;
  color: var(--ys-muted) !important;
}

/* --- 9h. Preis --- */
.productbox .price_wrapper,
.productbox .productbox-price {
  padding: 0 17px;
  margin-bottom: 10px;
}
.productbox .price,
.productbox .price-now,
.productbox .price_label + .price,
.productbox [itemprop="price"] {
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  color: var(--ys-ocean) !important;
}
.productbox .price_old,
.productbox .old-price {
  font-size: 0.8rem !important;
  color: var(--ys-muted) !important;
  text-decoration: line-through;
}
.productbox .badge-sale,
.productbox .discount-badge {
  font-size: 10px;
  color: var(--ys-cta);
  font-weight: 700;
  background: rgba(255, 107, 0, 0.08);
  padding: 2px 7px;
  border-radius: 20px;
}

/* Steuerhinweis / Versandkosten klein und dezent */
.productbox .tax-label,
.productbox .price-note,
.productbox .shipping-free-label {
  font-size: 0.72rem;
  color: var(--ys-muted);
}

/* --- 9i. Lieferstatus --- */
.productbox .item-delivery-status,
.productbox .delivery-status {
  padding: 0 17px;
  margin-bottom: 10px;
}
.productbox .delivery-status .signal_image,
.productbox .delivery-status .status-1,
.productbox .delivery-status .status-2 {
  font-size: 0.75rem;
  color: var(--ys-green);
  font-weight: 600;
}
.productbox .estimated_delivery {
  font-size: 0.75rem;
  color: var(--ys-green);
  font-weight: 600;
}

/* --- 9j. Warenkorb-Button (Galerie) --- */
.productbox .productbox-buy,
.productbox .form-basket .btn-primary,
.productbox .form-basket .btn-basket {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: calc(100% - 34px);
  margin: 0 17px 15px;
  padding: 10px;
  background: var(--ys-ocean) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700;
  font-size: 0.83rem;
  cursor: pointer;
  transition: background 0.2s;
}
.productbox .productbox-buy:hover,
.productbox .form-basket .btn-primary:hover,
.productbox .form-basket .btn-basket:hover {
  background: var(--ys-ocean-mid) !important;
}

/* --- 9k. Variationen in Galerie --- */
.productbox .productbox-variations {
  padding: 0 17px;
}

/* --- 9l. Produktkarten-Body spacing --- */
.productbox .productbox-inner > .row {
  margin: 0;
}
.productbox .productbox-inner > .row > [class*="col"] {
  padding-left: 0;
  padding-right: 0;
}

/* ──────────────────────────────────────────────────────
   9l2. Yaska Card — Mockup-nahe Produktkarte
   ────────────────────────────────────────────────────── */

/* Card Body */
.yaska-card__body {
  padding: 15px 17px 17px;
}

/* Brand-Label */
.yaska-card__brand {
  font-size: 10px;
  color: var(--ys-aqua);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

/* Produktname (ueberschreibt default productbox-title) */
.yaska-card__body .productbox-title.yaska-card__name {
  padding: 0;
  margin-top: 0;
  margin-bottom: 6px;
}
.yaska-card__body .yaska-card__name a {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ys-text) !important;
  line-height: 1.4;
}
.yaska-card__body .yaska-card__name a:hover {
  color: var(--ys-ocean) !important;
}

/* Set-Inhalt / Kurzbeschreibung */
.yaska-card__set {
  font-size: 0.75rem;
  color: var(--ys-green);
  font-weight: 600;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

/* Rating */
.yaska-card__rating {
  margin-bottom: 8px;
}
.yaska-card__rating .rating {
  padding: 0;
  margin-bottom: 0;
}

/* Preis */
.yaska-card__price {
  margin-bottom: 10px;
}
.yaska-card__price .price_wrapper,
.yaska-card__price .productbox-price {
  padding: 0;
  margin-bottom: 0;
}

/* Lieferstatus */
.yaska-card__delivery {
  margin-bottom: 12px;
}
.yaska-card__delivery .item-delivery-status {
  padding: 0;
  margin-bottom: 0;
}

/* Warenkorb-Button */
.yaska-card__cart {
  margin-bottom: 6px;
}
.yaska-card__cart .yaska-btn-cart,
.yaska-card__cart .btn-primary {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px 16px;
  background: var(--ys-ocean) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700;
  font-size: 0.83rem;
  cursor: pointer;
  transition: background 0.2s;
}
.yaska-card__cart .yaska-btn-cart:hover,
.yaska-card__cart .btn-primary:hover {
  background: var(--ys-ocean-mid) !important;
}
.yaska-card__cart .yaska-btn-details,
.yaska-card__cart .btn-outline-primary {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: center;
  border: 2px solid var(--ys-ocean) !important;
  color: var(--ys-ocean) !important;
  border-radius: 8px !important;
  font-weight: 700;
  font-size: 0.83rem;
  background: transparent !important;
  transition: all 0.2s;
}
.yaska-card__cart .yaska-btn-details:hover,
.yaska-card__cart .btn-outline-primary:hover {
  background: var(--ys-ocean) !important;
  color: #fff !important;
}

/* Klarna Finanzierung */
.yaska-card__finance {
  font-size: 0.7rem;
  color: var(--ys-muted);
  text-align: center;
  margin-top: 6px;
}

/* ──────────────────────────────────────────────────────
   9m. Produktliste — Layout & Grid
   ────────────────────────────────────────────────────── */

/* Galerie-Grid: gleichmaessige Gaps */
.product-list.layout-gallery {
  row-gap: 20px !important;
}
.product-list .product-wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Kategorieheader */
.category-header {
  margin-bottom: 28px;
}
.category-header .category-description h1 {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ys-text);
}

/* result_options (Sortierung, Ansichts-Umschalter) */
.result-options,
.productlist-options {
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-r);
  padding: 10px 16px;
  margin-bottom: 20px;
}

/* Produktliste Preisdarstellung global */
.price,
.productPrice,
.price-now,
.amount {
  color: var(--ys-ocean) !important;
  font-weight: 900;
}

/* ──────────────────────────────────────────────────────
   9n. Sidebar — Kategorien & Filter
   ────────────────────────────────────────────────────── */

/* Aktive Kategorie: Unterstreichung Gelb → Ocean-Blau */
.productlist-filter-headline,
.sidebar .productlist-filter-headline,
#sidepanel .productlist-filter-headline,
.box .productlist-filter-headline {
  border-bottom-color: #004F9E !important;
  border-bottom-style: solid !important;
  border-bottom-width: 3px !important;
}
.productlist-filter-headline span {
  color: var(--ys-text);
  font-weight: 700;
}

/* Sidebar-Links */
.box-categories .nav-link,
.box-categories a {
  color: var(--ys-text-soft);
  transition: color 0.15s;
}
.box-categories .nav-link:hover,
.box-categories a:hover {
  color: var(--ys-ocean);
}
.box-categories .nav-link.active,
.box-categories .active > a {
  color: var(--ys-ocean) !important;
  font-weight: 700;
}

/* ──────────────────────────────────────────────────────
   9o. Preis-Slider (noUi-Slider) — Gelb → Ocean-Blau
   ────────────────────────────────────────────────────── */
.noUi-connect {
  background: var(--ys-ocean) !important;
}
.noUi-handle {
  border-color: var(--ys-ocean) !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 79, 158, 0.25) !important;
}
.noUi-handle::before,
.noUi-handle::after {
  background: var(--ys-ocean) !important;
}
.noUi-horizontal .noUi-handle {
  border-radius: 50%;
}

/* ──────────────────────────────────────────────────────
   9p. Produktkarten — Bild-Leerraum Fix
   ────────────────────────────────────────────────────── */

/* Bildbereich: .square::before erzeugt 1:1 padding — wir aendern auf 3:4 */
.productbox .square.square-image::before {
  padding-bottom: 75% !important;
}

/* Zweites Hover-Bild: absolut positioniert ueber dem ersten */
.productbox .list-gallery {
  position: relative;
  overflow: hidden;
}
.productbox .second-wrapper {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.productbox .second-wrapper::before {
  display: none !important;
}
.productbox:hover .second-wrapper {
  opacity: 1;
}

/* Bild-Zentrierung */
.productbox .square-image .inner img {
  object-fit: contain;
}

/* ──────────────────────────────────────────────────────
   9q. Ausverkauft-Badge
   ────────────────────────────────────────────────────── */
.ribbon.ribbon-5,
.ribbon.ribbon-outofstock {
  background: var(--ys-muted) !important;
  color: #fff !important;
}

/* ──────────────────────────────────────────────────────
   10. Allgemeine Utilities & Overrides
   ────────────────────────────────────────────────────── */

/* Fokus-Ringe: Ocean-Blau */
*:focus-visible {
  outline: 2px solid var(--ys-ocean-mid);
  outline-offset: 2px;
}

/* Links global */
a {
  color: var(--ys-ocean);
}
a:hover {
  color: var(--ys-ocean-mid);
}

/* Breadcrumbs */
.breadcrumb {
  background: transparent;
  padding: 10px 0;
  margin-bottom: 0;
  font-size: 12px;
}
.breadcrumb-item.active {
  color: var(--ys-muted);
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--ys-muted);
}

/* Pagination */
.page-item.active .page-link {
  background-color: var(--ys-ocean) !important;
  border-color: var(--ys-ocean) !important;
}
.page-link {
  color: var(--ys-ocean) !important;
}
.page-link:hover {
  color: var(--ys-ocean-mid) !important;
  background-color: var(--ys-bg-soft) !important;
}

/* Scroll-to-Top */
#scroll-to-top {
  background-color: var(--ys-ocean);
  border-color: var(--ys-ocean);
}
#scroll-to-top:hover {
  background-color: var(--ys-ocean-mid);
}

/* Cookie-Consent (falls NOVA-nativ) */
#cookieconsent,
.cookie-consent-banner {
  border-top: 3px solid var(--ys-ocean);
}
.cookie-consent-banner .btn-primary {
  background-color: var(--ys-ocean) !important;
}

/* ── Responsive: Topbar auf Mobile ausblenden ── */
@media (max-width: 767px) {
  .yaska-topbar {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════
   11. OPC Homepage-Sektionen
   ══════════════════════════════════════════════════════ */

/* ── 11a. Gemeinsame Section-Wrapper ── */
.ys-section {
  padding: 72px 0;
}
.ys-section__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
.ys-section__label {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}
.ys-section__title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 8px;
}
.ys-section__subtitle {
  color: var(--ys-muted);
  font-size: 15px;
  margin-bottom: 40px;
}

/* ── 11a-hero. Hero Banner ── */
.ys-hero {
  background: linear-gradient(125deg, var(--ys-ocean-deep) 0%, #003A80 50%, #004466 100%);
  min-height: 560px;
  display: flex;
  align-items: center;
  position: relative;
  color: #fff;
}
.ys-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 85% at 80% 50%, rgba(0,180,216,.12) 0%, transparent 70%);
  pointer-events: none;
}
.ys-hero__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 60px 28px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 52px;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
}
.ys-hero__eyebrow {
  display: inline-block;
  background: rgba(99,198,255,.12);
  border: 1px solid rgba(99,198,255,.25);
  color: var(--ys-aqua);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 22px;
}
.ys-hero__title {
  font-size: 3.1rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 20px;
}
.ys-hero__title em {
  color: var(--ys-aqua);
  font-style: normal;
}
.ys-hero__desc {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255,255,255,.7);
  margin-bottom: 32px;
  max-width: 500px;
}
.ys-hero__actions {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.ys-hero__btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 36px;
  background: var(--ys-cta);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(255,107,0,.28);
  transition: all .2s;
  border: 2px solid transparent;
}
.ys-hero__btn-cta:hover {
  background: var(--ys-cta-dark);
  color: #fff;
  transform: translateY(-2px);
}
.ys-hero__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 8px;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: all .2s;
}
.ys-hero__btn-outline:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.65);
  color: #fff;
}
.ys-hero__trust-bar {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.ys-hero__trust-item {
  font-size: 12px;
  color: rgba(255,255,255,.55);
}
.ys-hero__trust-item strong {
  color: rgba(255,255,255,.85);
}
.ys-hero__sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ys-hero__card {
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .2s;
}
.ys-hero__card:hover {
  transform: translateY(-3px);
}
.ys-hero__card-img {
  height: 160px;
  background: linear-gradient(160deg, rgba(0,100,160,.5), rgba(0,60,120,.7));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 70px;
  position: relative;
  overflow: hidden;
}
.ys-hero__card-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.ys-hero__card-emoji {
  font-size: 70px;
  line-height: 1;
}
a.ys-hero__card,
a.ys-hero__card:hover,
a.ys-hero__card:focus {
  text-decoration: none;
  color: inherit;
}
.ys-hero__card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--ys-cta);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ys-hero__card-badge--alt {
  background: var(--ys-ocean);
}
.ys-hero__card-body {
  padding: 14px 16px;
}
.ys-hero__card-label {
  font-size: 10px;
  color: var(--ys-aqua);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 4px;
}
.ys-hero__card-name {
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  margin-bottom: 10px;
  line-height: 1.3;
}
.ys-hero__card-price {
  color: var(--ys-aqua);
  font-size: 1.3rem;
  font-weight: 900;
}
.ys-hero__card-price small {
  font-size: .76rem;
  opacity: .55;
  font-weight: 400;
}
.ys-hero__card-includes {
  font-size: .73rem;
  color: rgba(255,255,255,.45);
  margin-top: 3px;
}

@media (max-width: 991px) {
  .ys-hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .ys-hero__title { font-size: 2.4rem; }
}
@media (max-width: 575px) {
  .ys-hero__title { font-size: 2rem; }
  .ys-hero__card-img { height: 120px; font-size: 50px; }
}

/* ── 11b. Trust Strip ── */
.ys-trust {
  background: #fff;
  padding: 40px 0;
  border-bottom: 1px solid #eee;
}
.ys-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
.ys-trust__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-right: 1px solid #eee;
}
.ys-trust__item:last-child {
  border-right: none;
}
.ys-trust__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ys-aqua-light);
  border-radius: 12px;
  font-size: 22px;
  flex-shrink: 0;
}
.ys-trust__text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ys-ocean-dark);
}
.ys-trust__text span {
  font-size: 13px;
  color: var(--ys-muted);
}

/* ── 11c. Guarantee Bar ── */
.ys-guarantee {
  background: linear-gradient(135deg, #16A34A, #15803d);
  padding: 20px 0;
  color: #fff;
}
.ys-guarantee__grid {
  display: flex;
  justify-content: center;
  gap: 48px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
.ys-guarantee__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}
.ys-guarantee__item span:first-child {
  font-size: 20px;
}

/* ── 11d. Brand Story ── */
.ys-brand {
  background: var(--ys-ocean-deep);
  color: #fff;
  padding: 80px 0;
}
.ys-brand__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: center;
}
.ys-brand__badge {
  display: inline-block;
  background: rgba(99,198,255,.12);
  border: 1px solid rgba(99,198,255,.3);
  color: var(--ys-aqua);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 20px;
}
.ys-brand__title {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
}
.ys-brand__title em {
  color: var(--ys-aqua);
  font-style: normal;
}
.ys-brand__text {
  color: rgba(255,255,255,.7);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 24px;
}
.ys-brand__buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.ys-brand__btn-outline {
  display: inline-block;
  padding: 10px 24px;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all .2s;
}
.ys-brand__btn-outline:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.ys-brand__btn-cta {
  display: inline-block;
  padding: 10px 24px;
  background: var(--ys-cta);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all .2s;
}
.ys-brand__btn-cta:hover {
  background: var(--ys-cta-dark);
  color: #fff;
}
.ys-brand__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ys-brand__stat {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 28px 24px;
  transition: background .2s;
}
.ys-brand__stat:hover {
  background: rgba(255,255,255,.1);
}
.ys-brand__stat-num {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: var(--ys-aqua);
  margin-bottom: 4px;
}
.ys-brand__stat-label {
  font-size: 14px;
  color: rgba(255,255,255,.6);
}

/* ── 11e. Kategorien ── */
.ys-cats {
  padding: 72px 0;
  background: #fff;
}
.ys-cats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
.ys-cats__card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 24px;
  text-decoration: none;
  color: #fff;
  transition: transform .3s;
}
.ys-cats__card:hover {
  transform: scale(1.04);
  color: #fff;
}
.ys-cats__card--sup { background: linear-gradient(135deg, #004F9E 0%, #0070CC 100%); }
.ys-cats__card--waterbike { background: linear-gradient(135deg, #002D5C 0%, #004F9E 100%); }
.ys-cats__card--plattform { background: linear-gradient(135deg, #0070CC 0%, #63C6FF 100%); }
.ys-cats__card--zubehoer { background: linear-gradient(135deg, #3D4F6B 0%, #5A7A9B 100%); }
.ys-cats__emoji {
  font-size: 40px;
  margin-bottom: 12px;
}
.ys-cats__tag {
  display: inline-block;
  background: rgba(99,198,255,.25);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ys-cats__name {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 4px;
}
.ys-cats__desc {
  font-size: 13px;
  opacity: .8;
  margin-bottom: 10px;
}
.ys-cats__link {
  font-size: 14px;
  font-weight: 700;
  color: var(--ys-aqua);
  text-decoration: none;
}

/* ── 11f. Bestseller ── */
.ys-best {
  padding: 72px 0;
  background: #f8f9fa;
}
.ys-best__header {
  text-align: center;
  max-width: 1320px;
  margin: 0 auto 40px;
  padding: 0 24px;
}
.ys-best__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
.ys-best__card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.ys-best__card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.ys-best__img {
  background: #f1f5f9;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  position: relative;
}
.ys-best__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ys-best__badge--set { background: #dcfce7; color: #166534; }
.ys-best__badge--neu { background: var(--ys-ocean-dark); color: #fff; }
.ys-best__badge--d2c { background: #dcfce7; color: #166534; }
.ys-best__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ys-best__brand {
  font-size: 12px;
  color: var(--ys-aqua);
  font-weight: 600;
  margin-bottom: 4px;
}
.ys-best__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ys-ocean-dark);
  margin-bottom: 8px;
  line-height: 1.4;
}
.ys-best__placeholder-label {
  font-size: 24px;
  font-weight: 800;
  color: var(--ys-ocean);
  text-align: center;
  padding: 16px 0;
  opacity: .5;
}
.ys-best__set {
  font-size: 12px;
  color: var(--ys-success);
  margin-bottom: 10px;
}
.ys-best__price {
  font-size: 22px;
  font-weight: 800;
  color: var(--ys-ocean-dark);
  margin-bottom: 4px;
}
.ys-best__delivery {
  font-size: 12px;
  color: var(--ys-success);
  margin-bottom: 14px;
}
.ys-best__btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--ys-ocean);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
  margin-top: auto;
}
.ys-best__btn:hover {
  background: var(--ys-ocean-mid);
  color: #fff;
}
/* Dynamisch gerenderte Produktkacheln (yaska_bestseller.tpl) */
a.ys-best__card,
a.ys-best__card:hover,
a.ys-best__card:focus {
  text-decoration: none;
  color: inherit;
}
.ys-best__img img {
  width: 100%;
  height: 100%;
  max-height: 240px;
  object-fit: contain;
  display: block;
}
.ys-best__emoji {
  font-size: 64px;
  line-height: 1;
}

/* ── 11g. Trustpilot ── */
.ys-tp {
  padding: 72px 0;
  background: #f8f9fa;
}
.ys-tp__grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: start;
}
.ys-tp__score {
  background: #fff;
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  border: 1px solid #eee;
}
.ys-tp__logo {
  font-size: 18px;
  font-weight: 700;
  color: #00b67a;
  margin-bottom: 16px;
}
.ys-tp__number {
  font-size: 56px;
  font-weight: 800;
  color: var(--ys-ocean-dark);
  line-height: 1;
  margin-bottom: 8px;
}
.ys-tp__stars {
  font-size: 24px;
  color: #FFB400;
  margin-bottom: 8px;
}
.ys-tp__count {
  font-size: 14px;
  color: var(--ys-muted);
}
.ys-tp__reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ys-tp__review {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #eee;
}
.ys-tp__review-stars {
  color: #FFB400;
  font-size: 16px;
  margin-bottom: 12px;
}
.ys-tp__review-text {
  font-size: 14px;
  color: #334155;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 16px;
}
.ys-tp__review-author {
  font-weight: 700;
  font-size: 14px;
  color: var(--ys-ocean-dark);
}
.ys-tp__review-meta {
  font-size: 12px;
  color: var(--ys-muted);
}

/* ── 11h. B2B Teaser ── */
.ys-b2b {
  background: var(--ys-ocean-deep);
  color: #fff;
  padding: 80px 0;
}
.ys-b2b__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: center;
}
.ys-b2b__label {
  color: #FACC15;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}
.ys-b2b__title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 16px;
}
.ys-b2b__title em {
  color: var(--ys-aqua);
  font-style: normal;
}
.ys-b2b__text {
  color: rgba(255,255,255,.7);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 24px;
}
.ys-b2b__btn {
  display: inline-block;
  padding: 12px 28px;
  background: #FACC15;
  color: #1a1a1a;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background .2s;
}
.ys-b2b__btn:hover {
  background: #EAB308;
  color: #1a1a1a;
}
.ys-b2b__targets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ys-b2b__target {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 24px 20px;
  transition: background .2s;
}
.ys-b2b__target:hover {
  background: rgba(255,255,255,.1);
}
.ys-b2b__target-icon {
  font-size: 28px;
  margin-bottom: 8px;
}
.ys-b2b__target-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.ys-b2b__target-desc {
  font-size: 13px;
  color: rgba(255,255,255,.6);
}

/* ── 11i. Ratgeber ── */
.ys-guide {
  padding: 72px 0;
  background: #fff;
}
.ys-guide__header {
  text-align: center;
  max-width: 1320px;
  margin: 0 auto 40px;
  padding: 0 24px;
}
.ys-guide__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
.ys-guide__card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eee;
  transition: box-shadow .2s, transform .2s;
}
.ys-guide__card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.ys-guide__card-img {
  padding: 32px;
  text-align: center;
  font-size: 48px;
}
.ys-guide__card-img--sup { background: linear-gradient(180deg, var(--ys-aqua-light), #fff); }
.ys-guide__card-img--plattform { background: linear-gradient(180deg, #E0F2FE, #fff); }
.ys-guide__card-img--waterbike { background: linear-gradient(180deg, #DCFCE7, #fff); }
.ys-guide__card-body {
  padding: 24px;
}
.ys-guide__card-cat {
  font-size: 12px;
  color: var(--ys-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.ys-guide__card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ys-ocean-dark);
  line-height: 1.4;
  margin-bottom: 8px;
}
.ys-guide__card-desc {
  font-size: 14px;
  color: var(--ys-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
.ys-guide__card-link {
  color: var(--ys-aqua);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.ys-guide__card-link:hover {
  color: var(--ys-ocean);
}

/* ──────────────────────────────────────────────────────────
   12. CMS-Page: B2B & Verleiher (.ys-bpage)
       Dedizierte Landingpage-Klassen, NICHT mit dem
       Startseiten-Teaser .ys-b2b verwechseln.
   ────────────────────────────────────────────────────────── */

.ys-bpage { color: #1a1a1a; }
.ys-bpage * { box-sizing: border-box; }
.ys-bpage h2,
.ys-bpage h3 { color: var(--ys-ocean-dark); }
.ys-bpage p { line-height: 1.65; }

.ys-bpage__container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Hero */
.ys-bpage__hero {
  background: linear-gradient(135deg, var(--ys-ocean-deep) 0%, var(--ys-ocean) 60%, var(--ys-ocean-mid) 100%);
  color: #fff;
  padding: 80px 24px 72px;
}
.ys-bpage__hero-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
}
.ys-bpage__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--ys-aqua);
  margin-bottom: 16px;
}
.ys-bpage__title {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 20px;
  color: #fff;
}
.ys-bpage__title em {
  color: var(--ys-aqua);
  font-style: normal;
}
.ys-bpage__lead {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,.85);
  max-width: 780px;
  margin: 0 0 28px;
}
.ys-bpage__hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 32px;
}
.ys-bpage__hero-trust-item {
  font-size: 14px;
  color: rgba(255,255,255,.85);
}
.ys-bpage__hero-trust-item strong { color: #fff; }
.ys-bpage__hero-cta {
  display: inline-block;
  padding: 14px 28px;
  background: var(--ys-cta);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.ys-bpage__hero-cta:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255,107,0,.35);
}

/* Sektionen */
.ys-bpage__section {
  padding: 64px 0;
  background: #fff;
}
.ys-bpage__section--alt {
  background: var(--ys-aqua-light, #E8F6FF);
}
.ys-bpage__h2 {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 28px;
  text-align: center;
}
.ys-bpage__intro {
  text-align: center;
  font-size: 16px;
  color: var(--ys-muted, #555);
  max-width: 720px;
  margin: -10px auto 32px;
}

/* USPs (4 cards) */
.ys-bpage__usps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ys-bpage__usp {
  background: #fff;
  border: 1px solid #e6eef5;
  border-radius: 14px;
  padding: 24px 22px;
  transition: box-shadow .2s, transform .2s;
}
.ys-bpage__usp:hover {
  box-shadow: 0 10px 24px rgba(0,79,158,.1);
  transform: translateY(-2px);
}
.ys-bpage__usp-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 14px;
}
.ys-bpage__usp h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}
.ys-bpage__usp p {
  font-size: 14px;
  color: var(--ys-muted, #555);
  margin: 0;
}

/* Targets (6 cards) */
.ys-bpage__targets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ys-bpage__target {
  background: #fff;
  border: 1px solid #d6e6f2;
  border-radius: 14px;
  padding: 24px 22px;
  transition: border-color .2s, transform .2s;
}
.ys-bpage__target:hover {
  border-color: var(--ys-aqua);
  transform: translateY(-2px);
}
.ys-bpage__target-icon {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 12px;
}
.ys-bpage__target h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}
.ys-bpage__target p {
  font-size: 14px;
  color: var(--ys-muted, #555);
  margin: 0;
}

/* Products (4 cards, link) */
.ys-bpage__products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
a.ys-bpage__product {
  display: block;
  background: var(--ys-aqua-light, #E8F6FF);
  border-radius: 14px;
  padding: 24px 22px;
  text-decoration: none;
  color: var(--ys-ocean-dark);
  transition: background .2s, transform .2s;
}
a.ys-bpage__product:hover {
  background: #d8efff;
  text-decoration: none;
  color: var(--ys-ocean-dark);
  transform: translateY(-2px);
}
.ys-bpage__product h3 {
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 8px;
}
.ys-bpage__product p {
  font-size: 14px;
  color: var(--ys-ocean);
  margin: 0 0 14px;
}
.ys-bpage__product-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--ys-cta);
}

/* Steps (4 numbered) */
.ys-bpage__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ys-bpage__step {
  background: #fff;
  border: 1px solid #e6eef5;
  border-radius: 14px;
  padding: 28px 22px 24px;
  position: relative;
}
.ys-bpage__step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ys-ocean);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.ys-bpage__step h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}
.ys-bpage__step p {
  font-size: 14px;
  color: var(--ys-muted, #555);
  margin: 0;
}

/* Final CTA */
.ys-bpage__cta {
  background: linear-gradient(135deg, var(--ys-ocean-deep), var(--ys-ocean));
  color: #fff;
  padding: 64px 24px;
  text-align: center;
}
.ys-bpage__cta h2 {
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 14px;
}
.ys-bpage__cta p {
  color: rgba(255,255,255,.85);
  max-width: 620px;
  margin: 0 auto 24px;
  font-size: 16px;
}
.ys-bpage__cta-btn {
  display: inline-block;
  padding: 14px 32px;
  background: var(--ys-cta);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.ys-bpage__cta-btn:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255,107,0,.4);
}

/* Responsive */
@media (max-width: 1100px) {
  .ys-bpage__usps    { grid-template-columns: repeat(2, 1fr); }
  .ys-bpage__targets { grid-template-columns: repeat(2, 1fr); }
  .ys-bpage__products{ grid-template-columns: repeat(2, 1fr); }
  .ys-bpage__steps   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ys-bpage__title { font-size: 32px; }
  .ys-bpage__h2    { font-size: 22px; }
  .ys-bpage__usps,
  .ys-bpage__targets,
  .ys-bpage__products,
  .ys-bpage__steps  { grid-template-columns: 1fr; }
}

/* ============================================================
   13. Formular-Styling (.withdrawal-form, .contact-form)
   Card-Container mit abgerundeten Ecken, Ocean-Fokus, CTA-Submit.
   NOVA/snippets/withdrawal_form.tpl und NOVA/contact/index.tpl.
   ============================================================ */
.withdrawal-form,
.contact-form {
  background: var(--ys-white);
  border: 1px solid var(--ys-border);
  border-radius: 16px;
  box-shadow: var(--ys-shadow);
  padding: 32px 32px 28px;
  max-width: 760px;
  margin: 24px auto 40px;
}
.withdrawal-form .form-group,
.withdrawal-form .floating-label,
.contact-form .form-group,
.contact-form .floating-label {
  margin-bottom: 20px;
}
.withdrawal-form label,
.withdrawal-form .form-label,
.contact-form label,
.contact-form .form-label {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--ys-text);
  font-size: 14px;
  letter-spacing: 0.1px;
}
.withdrawal-form .form-control,
.withdrawal-form input[type="text"],
.withdrawal-form input[type="email"],
.withdrawal-form textarea,
.contact-form .form-control,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select,
.contact-form .custom-select {
  border: 1.5px solid var(--ys-border);
  border-radius: var(--ys-r);
  background: var(--ys-white);
  padding: 12px 14px;
  font-size: 15px;
  color: var(--ys-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-shadow: none;
  height: auto;
}
.withdrawal-form textarea,
.withdrawal-form .form-control[rows],
.contact-form textarea,
.contact-form .form-control[rows] {
  min-height: 120px;
  resize: vertical;
  line-height: 1.55;
}
.withdrawal-form .form-control:hover,
.withdrawal-form input:hover,
.withdrawal-form textarea:hover,
.contact-form .form-control:hover,
.contact-form input:hover,
.contact-form textarea:hover,
.contact-form select:hover,
.contact-form .custom-select:hover {
  border-color: var(--ys-aqua);
}
.withdrawal-form .form-control:focus,
.withdrawal-form input:focus,
.withdrawal-form textarea:focus,
.contact-form .form-control:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
.contact-form .custom-select:focus {
  border-color: var(--ys-ocean);
  background: var(--ys-bg-soft);
  box-shadow: 0 0 0 3px rgba(0, 79, 158, 0.12);
  outline: none;
}
.withdrawal-form .has-error .form-control,
.withdrawal-form .has-error input,
.withdrawal-form .has-error textarea,
.contact-form .has-error .form-control,
.contact-form .has-error input,
.contact-form .has-error textarea,
.contact-form .has-error select {
  border-color: #DC2626;
}
.withdrawal-form .has-error .form-control:focus,
.contact-form .has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.withdrawal-form .form-error-msg,
.contact-form .form-error-msg {
  color: #DC2626;
  font-size: 13px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.withdrawal-form .form-error-msg i,
.contact-form .form-error-msg i {
  font-size: 14px;
}
.withdrawal-form .form-text,
.withdrawal-form .form-description,
.withdrawal-form small,
.contact-form .form-text,
.contact-form .form-description,
.contact-form small {
  color: var(--ys-muted);
  font-size: 13px;
  margin-top: 6px;
}
.withdrawal-form .form-text a,
.contact-form .form-text a,
.withdrawal-form small a,
.contact-form small a {
  color: var(--ys-ocean);
  font-weight: 500;
}

/* Alerts innerhalb des Formulars */
.withdrawal-form .alert,
.contact-form .alert {
  border-radius: 12px;
  border: none;
  padding: 14px 18px;
  font-size: 14px;
}
.withdrawal-form .alert-danger,
.contact-form .alert-danger {
  background: #FEE2E2;
  color: #991B1B;
}

/* Captcha-Wrapper */
.withdrawal-form .simple-captcha-wrapper,
.contact-form .simple-captcha-wrapper {
  background: var(--ys-bg-soft);
  border: 1px solid var(--ys-border);
  border-radius: 12px;
  padding: 14px 16px;
}

/* Submit-Button */
.withdrawal-form button[type="submit"],
.withdrawal-form .btn-primary,
.contact-form button[type="submit"],
.contact-form .btn-primary {
  background: var(--ys-cta);
  border: none;
  border-radius: var(--ys-r);
  color: var(--ys-white);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2px;
  padding: 14px 16px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  line-height: 1.2;
  transition: background-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.25);
}
.withdrawal-form .btn-block,
.contact-form .btn-block {
  display: flex;
  width: 100%;
}
.withdrawal-form button[type="submit"]:hover,
.withdrawal-form .btn-primary:hover,
.withdrawal-form button[type="submit"]:focus,
.withdrawal-form .btn-primary:focus,
.contact-form button[type="submit"]:hover,
.contact-form .btn-primary:hover,
.contact-form button[type="submit"]:focus,
.contact-form .btn-primary:focus {
  background: var(--ys-cta-dark);
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35);
  transform: translateY(-1px);
  color: var(--ys-white);
}
.withdrawal-form button[type="submit"]:active,
.withdrawal-form .btn-primary:active,
.contact-form button[type="submit"]:active,
.contact-form .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.25);
}

/* Contact-Form-spezifische Elemente */
.contact-form fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
.contact-form .h3,
.contact-form h3 {
  color: var(--ys-ocean-dark);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: 0.1px;
}
.contact-form hr,
.contact-form .contact-form-hr {
  border: none;
  border-top: 1px solid var(--ys-border);
  margin: 24px 0;
}
.contact-form .required-info {
  font-size: 13px;
  color: var(--ys-muted);
  margin-bottom: 8px;
}
.contact-form .optional {
  color: var(--ys-muted);
  font-weight: 400;
  font-size: 12px;
}
.contact-form .custom-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23002D5C' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 40px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.contact-form .contact-form-privacy {
  font-size: 13px;
  color: var(--ys-muted);
  margin: 12px 0 16px;
}
.contact-form .contact-form-privacy a {
  color: var(--ys-ocean);
  text-decoration: underline;
}
.contact-form .contact-form-privacy a:hover {
  color: var(--ys-ocean-mid);
}

/* Responsive */
@media (max-width: 640px) {
  .withdrawal-form,
  .contact-form {
    padding: 24px 20px 20px;
    border-radius: 12px;
  }
  .withdrawal-form button[type="submit"],
  .withdrawal-form .btn-primary,
  .contact-form button[type="submit"],
  .contact-form .btn-primary {
    width: 100%;
  }
  .contact-form hr,
  .contact-form .contact-form-hr {
    margin: 18px 0;
  }
}

/* ── 11j. Responsive OPC-Sektionen ── */
@media (max-width: 991px) {
  .ys-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .ys-trust__item:nth-child(2) { border-right: none; }
  .ys-cats__grid { grid-template-columns: repeat(2, 1fr); }
  .ys-best__grid { grid-template-columns: repeat(2, 1fr); }
  .ys-brand__grid { grid-template-columns: 1fr; }
  .ys-b2b__grid { grid-template-columns: 1fr; }
  .ys-tp__grid { grid-template-columns: 1fr; }
  .ys-tp__reviews { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .ys-trust__grid { grid-template-columns: 1fr; }
  .ys-trust__item { border-right: none; border-bottom: 1px solid #eee; }
  .ys-trust__item:last-child { border-bottom: none; }
  .ys-guarantee__grid { flex-direction: column; gap: 16px; text-align: center; }
  .ys-cats__grid { grid-template-columns: 1fr; }
  .ys-best__grid { grid-template-columns: 1fr; }
  .ys-tp__reviews { grid-template-columns: 1fr; }
  .ys-guide__grid { grid-template-columns: 1fr; }
  .ys-b2b__targets { grid-template-columns: 1fr; }
  .ys-section__title { font-size: 24px; }
  .ys-brand__title { font-size: 28px; }
  .ys-b2b__title { font-size: 24px; }
}

/* ──────────────────────────────────────────────────────
   14. Gold-Akzent-Override (#F8BF00)
   yaska.css enthält aus kompilierter NOVA-Base noch
   89 hartkodierte #F8BF00-Stellen. Diese Sektion neutralisiert
   die sichtbaren Hover-/Akzent-Stellen auf Yaska-Farben.
   ────────────────────────────────────────────────────── */

/* Footer-Links: auf dunklem Grund weiß bei Hover (überschreibt
   #footer a:not(.btn):hover{color:#F8BF00} aus yaska.css) */
#footer a:not(.btn):hover,
.yaska-footer a:not(.btn):hover,
.yaska-footer__col a:not(.btn):hover,
.yaska-footer__links li a:hover {
  color: #ffffff !important;
}
#footer .yaska-footer__bottom a:not(.btn):hover {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Link-Buttons (.btn-link) und Paginierung: Ocean statt Gold */
.btn-link:hover,
.btn-link:focus,
.page-link:hover,
.page-link:focus {
  color: var(--ys-ocean) !important;
}

/* Form-Icon-Trigger (z. B. Clear-X in Sucheingabe) */
.form-icon-trigger-label:hover {
  color: var(--ys-ocean) !important;
}

/* Consent-Manager (Cookie-Banner) Links */
#consent-manager a:hover,
.consent-modal-close:hover,
.consent-modal-close:focus {
  color: var(--ys-ocean) !important;
}

/* Megamenü / Kategorien-Dropdowns: Hover-Akzent auf Aqua,
   aktive Kategorie-Unterstrich und Submenü-Items */
#mainNavigation .dropdown-item:hover,
#mainNavigation .dropdown-item:focus,
.yaska-catbar .dropdown-item:hover,
.yaska-catbar .dropdown-item:focus,
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
  color: var(--ys-ocean) !important;
  background-color: var(--ys-bg-soft) !important;
}

/* Sidebar-Panel (aside .nav-panel / Kategorien-Box im Megamenü):
   aktiver Link-Underline Ocean statt Gold. Shorthand-Override mit voller
   border-Spezifikation, damit die NOVA-Regel "border-bottom: .375rem solid #f8bf00"
   sicher geschlagen wird. */
aside .nav-panel > .nav > .active > .nav-link,
aside .nav-panel .nav-item.active > .nav-link,
.box-categories .nav-link.active,
.box-linkgroup .nav-link.active {
  border-bottom: 0.375rem solid var(--ys-ocean) !important;
}

/* Box-Login und Kategorien-Box: goldene Icons/Akzente */
.box_login .register .fa,
.box_login .register .fas,
.box_login .resetpw .fa,
.box-categories .nav-link:hover,
.box-categories .dropdown-item:hover,
.box-linkgroup .nav-link:hover,
.box-linkgroup .dropdown-item:hover {
  color: var(--ys-ocean) !important;
}

/* jqcloud-Tag-Wolke (nutzt !important): Hover auf Ocean statt Gold */
.jqcloud-word a:hover {
  color: var(--ys-ocean) !important;
}

/* Nav-Tabs: aktive Tab-Border Ocean statt Gold */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  border-color: #dee2e6 #dee2e6 var(--ys-ocean) !important;
  color: var(--ys-ocean) !important;
}

/* Nav-Pills: aktiver Pill-Hintergrund Ocean statt Gold */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--ys-ocean) !important;
  color: #ffffff !important;
}

/* Critical-CSS-Goldstellen neutralisieren (yaska_crit.css):
   Dieses kleine Inline-CSS lädt vor yaska.css und enthält zentrale
   goldene Akzente, u.a. das ::before-Pseudoelement unter aktiven
   Header-Navs — das ist der goldene Unterstrich unter "Plattformen". */

/* Globaler Link-Hover (yaska_crit.css: "a:hover { color:#f8bf00 }") */
a:hover {
  color: var(--ys-ocean) !important;
}

/* Header/Top-Bar-Links (yaska_crit.css: "#header-top-bar a:hover, header a:hover { color:#f8bf00 }") */
#header-top-bar a:not(.dropdown-item):not(.btn):not(.nav-link):hover,
header a:not(.dropdown-item):not(.btn):not(.nav-link):hover {
  color: inherit !important;
}

/* Catbar-Kategorien (Megamenue-Toplevel): Hover auf reines Weiss.
   Ueberschreibt die .88-Opazitaet der Default-Regel und verhindert,
   dass die Schrift beim Mouseover grau wirkt. */
.yaska-catbar .nav-link:hover,
.yaska-catbar .nav-link:focus,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.nav-scrollbar-inner .nav-link:hover,
.nav-scrollbar-inner .nav-link:focus {
  color: #ffffff !important;
}

/* Navbar-Light-Links (yaska_crit.css: ".navbar-light .navbar-nav .nav-link:hover") */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--ys-ocean) !important;
}

/* Header-Nav-Aktiv-Unterstrich via ::before (yaska_crit.css):
   Das ist der goldene Balken unter "Plattformen" im Catbar.
   ::before erzeugt die Bottom-Border — wir färben sie auf Aqua. */
header .navbar-nav > .nav-item > .nav-link::before,
#jtl-nav-wrapper header .navbar-nav > .nav-item > .nav-link::before,
.yaska-catbar .navbar-nav > .nav-item > .nav-link::before,
.yaska-catbar .nav-scrollbar-inner > .nav-item > .nav-link::before {
  border-color: var(--ys-aqua) !important;
}

/* Paginierung: aktiver Seiten-Balken (::after) */
.page-item.active .page-link::after,
.page-item.active .page-text::after {
  border-bottom-color: var(--ys-ocean) !important;
}

/* Skip-to-Content Button */
.btn-skip-to {
  border-color: var(--ys-ocean) !important;
}

/* Slick-Slider Link-Hover */
.slick-slide a:hover,
.slick-slide a:focus {
  color: var(--ys-ocean) !important;
}

/* Bootstrap-Utility-Klassen (text/bg/border-primary) — verhindert Gold
   in Content-Bereichen, die per CMS/OPC diese Klassen nutzen */
.text-primary,
.text-primary:hover,
.text-primary:focus {
  color: var(--ys-ocean) !important;
}
.bg-primary {
  background-color: var(--ys-ocean) !important;
}
.border-primary {
  border-color: var(--ys-ocean) !important;
}

/* Slick-Slider-Pfeile, Gallery-Close, Modal-Close: Ocean-Akzent */
.slick-arrow:hover,
#image_wrapper #gallery .slick-arrow:hover,
#image_wrapper.fullscreen .product-detail-image-topbar #image_fullscreen_close:hover,
.modal-header .close:hover {
  background-color: var(--ys-ocean) !important;
  color: #ffffff !important;
}

/* Badge-Circle (Wunschliste/Warenkorb-Marker) Hover */
.badge-circle:hover,
.badge-circle:focus {
  background-color: var(--ys-ocean) !important;
  border-color: var(--ys-ocean) !important;
}

/* Bootstrap-Select (Custom-Select-Dropdowns): Focus-Border Ocean */
.bootstrap-select.custom-select button.dropdown-toggle:hover,
.bootstrap-select.custom-select button.dropdown-toggle:focus,
.bootstrap-select.custom-select.show button.dropdown-toggle {
  border-color: var(--ys-ocean) !important;
}

/* Generischer Fallback: Links ausserhalb Buttons/Nav auf Ocean
   (greift, wo Bootstrap per default primary-Farbe auf a:hover vererbt) */
a:not(.btn):not(.nav-link):not(.dropdown-toggle):not(.page-link):hover {
  color: var(--ys-ocean);
}

/* ═══════════════════════════════════════════════════════
   15. ARTIKELDETAILANSICHT — Yaska-Design-Refresh
   Dezente Anpassung: Typo, Farben, Buttons, Karten-Look.
   Struktur bleibt NOVA-Standard (.product-detail / .product-info).
   ═══════════════════════════════════════════════════════ */

/* --- Headline & Meta --- */
.product-detail .product-title,
.product-detail .product-title.h2 {
  font-family: "Montserrat", "Open Sans", sans-serif;
  color: var(--ys-ocean);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.25;
  margin-bottom: 14px;
}
@media (min-width: 992px) {
  .product-detail .product-title,
  .product-detail .product-title.h2 {
    font-size: 2rem;
  }
}

.product-detail .info-essential {
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--ys-bg-soft, #ebebeb);
  font-size: 13px;
  color: #707070;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.product-detail .info-essential li {
  margin: 0;
}
.product-detail .info-essential strong {
  font-weight: 600;
  color: #525252;
}
.product-detail .info-essential .product-category a {
  color: var(--ys-ocean);
  font-weight: 600;
}

.product-detail .shortdesc {
  font-size: 15px;
  line-height: 1.55;
  color: #333;
  margin-bottom: 22px;
}

/* --- Preisblock --- */
.product-detail .price_wrapper {
  margin: 4px 0 14px;
}
.product-detail .price.h1,
.product-detail .price_wrapper .price {
  font-family: "Montserrat", "Open Sans", sans-serif;
  color: var(--ys-ocean);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
  margin: 0 0 4px;
}
.product-detail .price-note,
.product-detail .vat_info {
  font-size: 12px;
  color: #707070;
}
.product-detail .vat_info a {
  color: var(--ys-ocean);
  text-decoration: underline;
}

/* --- Lagerstatus / Lieferzeit --- */
.product-detail .stock-information {
  margin: 6px 0 14px;
  font-size: 13px;
}
.product-detail .delivery-status ul {
  margin: 0;
}
.product-detail .status.status-1 {
  color: #a56823; /* warning-warm aus Theme */
  font-weight: 600;
}
.product-detail .status .status-icon {
  margin-right: 6px;
  color: var(--ys-ocean);
}
.product-detail .estimated-delivery {
  color: #525252;
  margin-top: 2px;
}
.product-detail .question-on-item .btn-link {
  color: var(--ys-ocean) !important;
  font-size: 12px;
  padding: 0;
}

/* --- Kaufen-Box (Quantity + Button) --- */
.product-detail #add-to-cart.product-buy {
  margin: 18px 0 8px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--ys-bg-soft, #ebebeb);
  border-radius: var(--ys-r, 10px);
  box-shadow: var(--ys-shadow-sm, 0 2px 8px rgba(0, 79, 158, 0.06));
}

.product-detail .form-counter .btn {
  border: 1px solid var(--ys-ocean) !important;
  color: var(--ys-ocean) !important;
  background: #ffffff !important;
  min-width: 40px;
}
.product-detail .form-counter .btn:hover,
.product-detail .form-counter .btn:focus {
  background: var(--ys-ocean) !important;
  color: #ffffff !important;
}
.product-detail .form-counter .form-control.quantity {
  border-color: var(--ys-ocean);
  text-align: center;
  font-weight: 600;
  color: var(--ys-ocean);
}
.product-detail .form-counter .input-group-text.unit {
  background: #ffffff;
  border-color: var(--ys-ocean);
  color: #707070;
  font-size: 12px;
}

.product-detail .product-buy .btn-primary,
.product-detail .js-cfg-validate.btn-primary {
  background-color: var(--ys-ocean) !important;
  border-color: var(--ys-ocean) !important;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 20px;
  border-radius: var(--ys-r, 10px);
  transition: background-color 0.18s, transform 0.1s;
}
.product-detail .product-buy .btn-primary:hover,
.product-detail .product-buy .btn-primary:focus {
  background-color: var(--ys-aqua, #63c6ff) !important;
  border-color: var(--ys-aqua, #63c6ff) !important;
  color: #ffffff !important;
}
.product-detail .product-buy .btn-primary:active {
  transform: translateY(1px);
}
.product-detail .product-buy .btn-basket-check i {
  margin-left: 8px;
}

/* --- Galerie: Vergleichs-/Wunsch-Buttons dezent --- */
.product-detail .product-actions .btn.compare,
.product-detail .product-actions .btn.wishlist {
  background: #ffffff !important;
  border: 1px solid var(--ys-bg-soft, #ebebeb) !important;
  color: var(--ys-ocean) !important;
  box-shadow: var(--ys-shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.05));
}
.product-detail .product-actions .btn.compare:hover,
.product-detail .product-actions .btn.wishlist:hover {
  background: var(--ys-ocean) !important;
  border-color: var(--ys-ocean) !important;
  color: #ffffff !important;
}

/* --- Galerie: Hauptbild-Rahmen & Thumbnails --- */
.product-detail .product-gallery #gallery_wrapper {
  border-radius: var(--ys-r, 10px);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--ys-bg-soft, #ebebeb);
}
.product-detail .product-thumbnails {
  margin-top: 12px;
}
.product-detail .product-thumbnails .slick-slide img {
  border-radius: 6px;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}
.product-detail .product-thumbnails .slick-slide.slick-current img,
.product-detail .product-thumbnails .slick-slide:hover img {
  border-color: var(--ys-ocean);
}
/* Slick-Arrows Ocean */
.product-detail .slick-prev,
.product-detail .slick-next {
  color: var(--ys-ocean);
}
.product-detail .slick-prev:before,
.product-detail .slick-next:before {
  color: var(--ys-ocean);
}

/* --- Tab-Navigation Beschreibung/Details/Bewertungen --- */
.tab-navigation .nav-tabs {
  border-bottom: 2px solid var(--ys-bg-soft, #ebebeb);
  margin-bottom: 0;
}
.tab-navigation .nav-tabs .nav-link {
  font-family: "Montserrat", "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #707070;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  padding: 12px 18px;
  background: transparent;
  border-radius: 0;
}
.tab-navigation .nav-tabs .nav-link:hover {
  color: var(--ys-ocean);
  border-bottom-color: var(--ys-aqua, #63c6ff) !important;
}
.tab-navigation .nav-tabs .nav-link.active,
.tab-navigation .nav-tabs .nav-item.show .nav-link {
  color: var(--ys-ocean) !important;
  background: transparent !important;
  border-bottom-color: var(--ys-ocean) !important;
}
/* NOVA animiert einen goldenen Balken via ::after Pseudoelement
   auf .tab-navigation .nav-link — den faerben wir auf Ocean. */
.tab-navigation .nav-link::after {
  border-color: var(--ys-ocean) !important;
}
/* Tab-Content als Karte */
.tab-navigation + .tab-content,
#product-tabs ~ .tab-content,
.product-detail-page .tab-content {
  background: #ffffff;
  border: 1px solid var(--ys-bg-soft, #ebebeb);
  border-top: none;
  border-radius: 0 0 var(--ys-r, 10px) var(--ys-r, 10px);
  padding: 24px 24px 20px;
  box-shadow: var(--ys-shadow-sm, 0 2px 8px rgba(0, 79, 158, 0.04));
}
.tab-content h2,
.tab-content h3 {
  font-family: "Montserrat", "Open Sans", sans-serif;
  color: var(--ys-ocean);
  font-weight: 700;
}
.tab-content h2 {
  font-size: 1.35rem;
  margin-bottom: 12px;
}
.tab-content h3 {
  font-size: 1.1rem;
  margin-top: 18px;
  margin-bottom: 8px;
}
.tab-content p {
  line-height: 1.6;
  color: #333;
}
.tab-content ul li {
  line-height: 1.55;
  margin-bottom: 4px;
}

/* =========================================================
   SECTION 16: NEWS / RATGEBER (Blog-Overview & -Details)
   ========================================================= */

/* Übersichtsseite */
.container.blog-overview {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}
.blog-overview h1,
.container.blog-overview > h1 {
  font-family: "Montserrat", "Open Sans", sans-serif;
  color: var(--ys-ocean) !important;
  font-weight: 800;
  font-size: clamp(1.75rem, 2.4vw, 2.5rem);
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
  text-transform: none;
}
.blog-overview .link-content,
.container.blog-overview + .container.blog-overview,
.blog-overview + .link-content {
  max-width: 860px;
  margin: 0 auto 2rem;
}
.blog-overview .link-content p.lead,
.blog-overview p.lead {
  font-size: 1.125rem;
  color: var(--ys-text-soft);
  line-height: 1.6;
}
.blog-overview .link-content p {
  color: var(--ys-text);
  line-height: 1.65;
}
.blog-overview .link-content a {
  color: var(--ys-ocean);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.blog-overview .link-content a:hover {
  color: var(--ys-ocean-mid);
}

/* Filter-Leiste */
.blog-overview .row.blog-overview-main .custom-select {
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-r);
  color: var(--ys-text);
  background-color: #fff;
  min-height: 42px;
}
.blog-overview .row.blog-overview-main .custom-select:focus {
  border-color: var(--ys-ocean);
  box-shadow: 0 0 0 0.15rem rgba(0, 79, 158, 0.12);
}
.blog-overview-hr {
  border-color: var(--ys-border);
  opacity: 1;
  margin: 1.5rem 0 2rem;
}

/* Cards */
.row.blog-overview-preview {
  row-gap: 2rem;
}
.newsbox.blog-preview {
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-r);
  overflow: hidden;
  box-shadow: var(--ys-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.newsbox.blog-preview:hover {
  transform: translateY(-4px);
  box-shadow: var(--ys-shadow-md);
  border-color: var(--ys-aqua);
}

/* Bild-Bereich — auch wenn (noch) kein Bild gesetzt ist */
.newsbox-header {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--ys-ocean) 0%, var(--ys-ocean-mid) 60%, var(--ys-aqua) 100%);
}
.newsbox-header:empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.25), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(99,198,255,0.45), transparent 55%);
}
.newsbox-header img,
.newsbox-header a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.newsbox.blog-preview:hover .newsbox-header img {
  transform: scale(1.04);
}

/* Body */
.newsbox-body {
  padding: 1.25rem 1.25rem 0.5rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.blog-preview-author {
  font-size: 0.8125rem;
  color: var(--ys-muted);
  padding-left: 0;
}
.blog-preview-author .align-middle {
  letter-spacing: 0.02em;
}
.blog-preview-comment {
  font-size: 0.8125rem;
  color: var(--ys-muted);
  padding-right: 0;
}
.newsbox-headline,
.newsbox-headline:hover,
.newsbox-headline:focus {
  display: block;
  font-family: "Montserrat", "Open Sans", sans-serif;
  font-weight: 700;
  color: var(--ys-ocean) !important;
  font-size: 1.125rem;
  line-height: 1.3;
  text-decoration: none !important;
  margin: 0.75rem 0 0.625rem;
}
.newsbox.blog-preview:hover .newsbox-headline {
  color: var(--ys-ocean-mid) !important;
}
.newsbox-body p[itemprop="description"] {
  color: var(--ys-text-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}

/* Footer mit CTA */
.newsbox-footer {
  padding: 0 1.25rem 1.25rem;
  border-top: none;
  background: transparent;
}
.newsbox-footer a,
.newsbox-footer a:hover,
.newsbox-footer a:focus {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Montserrat", "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ys-cta) !important;
  text-decoration: none !important;
  padding: 0;
}
.newsbox-footer a i {
  transition: transform 0.2s ease;
}
.newsbox.blog-preview:hover .newsbox-footer a i {
  transform: translateX(4px);
}

/* Pagination */
.blog-overview-pagination .pagination {
  gap: 0.25rem;
}
.blog-overview-pagination .page-link {
  color: var(--ys-ocean);
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-r);
  padding: 0.4rem 0.75rem;
  font-weight: 600;
}
.blog-overview-pagination .page-item.active .page-link {
  background: var(--ys-ocean);
  border-color: var(--ys-ocean);
  color: #fff;
}

/* =========================================================
   News-Detailseite
   ========================================================= */
.container.blog-details {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
  max-width: 860px;
}
.blog-hero-img {
  margin: 0 0 2rem;
  border-radius: var(--ys-r);
  overflow: hidden;
  box-shadow: var(--ys-shadow);
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--ys-ocean) 0%, var(--ys-ocean-mid) 60%, var(--ys-aqua) 100%);
}
.blog-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-details h1,
.container.blog-details h1 {
  font-family: "Montserrat", "Open Sans", sans-serif;
  color: var(--ys-ocean);
  font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 1rem;
  text-transform: none;
}
.blog-details-content .news-categorylist {
  margin-bottom: 1.5rem;
}
.blog-details-content .news-categorylist a,
.blog-details-content .news-categorylist .badge {
  display: inline-block;
  background: var(--ys-aqua-light);
  color: var(--ys-ocean);
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  margin-right: 0.4rem;
  margin-bottom: 0.4rem;
}
.blog-details-content .news-categorylist a:hover {
  background: var(--ys-aqua);
  color: #fff;
}
.blog-details-content time,
.blog-details-content .blog-details-date {
  color: var(--ys-muted);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
  display: block;
}

/* Artikel-Body Typo */
.blog-details-content p.lead,
.blog-details-content > p:first-of-type {
  font-size: 1.125rem;
  color: var(--ys-text-soft);
  line-height: 1.65;
  margin-bottom: 1.75rem;
}
.blog-details-content h2 {
  font-family: "Montserrat", "Open Sans", sans-serif;
  color: var(--ys-ocean);
  font-weight: 700;
  font-size: 1.5rem;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}
.blog-details-content h3 {
  font-family: "Montserrat", "Open Sans", sans-serif;
  color: var(--ys-ocean-mid);
  font-weight: 700;
  font-size: 1.175rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.blog-details-content p,
.blog-details-content ul,
.blog-details-content ol {
  color: var(--ys-text);
  line-height: 1.7;
  font-size: 1rem;
}
.blog-details-content ul li,
.blog-details-content ol li {
  margin-bottom: 0.35rem;
}
.blog-details-content strong {
  color: var(--ys-ocean-dark);
}
.blog-details-content a {
  color: var(--ys-ocean);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.blog-details-content a:hover {
  color: var(--ys-ocean-mid);
}
.blog-details-content blockquote {
  border-left: 3px solid var(--ys-aqua);
  background: var(--ys-aqua-light);
  padding: 0.9rem 1.2rem;
  margin: 1.5rem 0;
  border-radius: 0 var(--ys-r) var(--ys-r) 0;
  color: var(--ys-text);
}

/* "Weitere Ratgeber"-Sektion unter dem Artikel */
.ys-related {
  max-width: 1200px;
  margin: 3.5rem auto 0;
  padding: 0 15px;
}
.ys-related__heading {
  font-family: "Montserrat", "Open Sans", sans-serif;
  color: var(--ys-ocean);
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--ys-aqua-light);
}
.ys-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.ys-related__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-r);
  overflow: hidden;
  box-shadow: var(--ys-shadow);
  text-decoration: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ys-related__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ys-shadow-md);
  border-color: var(--ys-aqua);
}
.ys-related__img {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--ys-ocean) 0%, var(--ys-ocean-mid) 60%, var(--ys-aqua) 100%);
  overflow: hidden;
}
.ys-related__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ys-related__body {
  padding: 1rem 1.125rem 1.125rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.ys-related__title {
  font-family: "Montserrat", "Open Sans", sans-serif;
  font-weight: 700;
  color: var(--ys-ocean);
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
.ys-related__text {
  color: var(--ys-text-soft);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
  flex: 1 1 auto;
}
.ys-related__cta {
  color: var(--ys-cta);
  font-weight: 600;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.ys-related__cta i {
  transition: transform 0.2s ease;
}
.ys-related__card:hover .ys-related__cta i {
  transform: translateX(3px);
}
.ys-related__card[data-current="true"] {
  display: none;
}

/* Mobile-Feinschliff */
@media (max-width: 576px) {
  .newsbox-headline {
    font-size: 1.0625rem;
  }
  .blog-details h1 {
    font-size: 1.6rem;
  }
  .blog-details-content h2 {
    font-size: 1.25rem;
  }
}

/* =========================================================
   SECTION 17: BASKET / WARENKORB
   Zwei-Spalten-Layout, Summary-Card sticky, Yaska-CTA in Orange.
   ========================================================= */

/* Seiten-Heading */
.basket .basket-heading,
.basket .basket-heading.h2 {
  font-family: "Montserrat", "Open Sans", sans-serif;
  color: var(--ys-ocean);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}

/* Wrapper links: weißer Card-Look um die Items */
.basket .basket_wrapper .basket-items {
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-r);
  box-shadow: var(--ys-shadow);
  padding: 0.75rem 1rem;
}

/* Header-Zeile (nur XL) */
.basket .cart-items-header {
  border-bottom: 1px solid var(--ys-border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

/* Jede Position */
.basket .cart-items-body {
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--ys-border);
  align-items: center;
}
.basket .cart-items-body:last-of-type {
  border-bottom: 0;
}

/* Produktbild */
.basket .cart-items-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.basket .cart-items-image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  background: #f8fafc;
  padding: 4px;
  border: 1px solid var(--ys-border);
}

/* Produktname */
.basket .cart-items-name {
  color: var(--ys-ocean);
  font-weight: 600;
  font-family: "Montserrat", "Open Sans", sans-serif;
  font-size: 1.0625rem;
  text-decoration: none;
  line-height: 1.3;
}
.basket .cart-items-name:hover {
  color: var(--ys-cta);
  text-decoration: none;
}

/* Einzelpreis */
.basket .cart-items-single-price .cart-items-price-text {
  font-weight: 600;
  color: #1e293b;
}

/* Mengen-Stepper */
.basket .qty-wrapper .input-group {
  max-width: 140px;
}
.basket .qty-wrapper .btn-decrement,
.basket .qty-wrapper .btn-increment {
  background: #fff;
  border: 1px solid var(--ys-border);
  color: var(--ys-ocean);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.basket .qty-wrapper .btn-decrement:hover,
.basket .qty-wrapper .btn-increment:hover {
  background: var(--ys-aqua-light);
  border-color: var(--ys-aqua);
  color: var(--ys-ocean);
}
.basket .qty-wrapper input.quantity {
  border: 1px solid var(--ys-border);
  text-align: center;
  font-weight: 600;
  color: #1e293b;
}
.basket .qty-wrapper input.quantity:focus {
  border-color: var(--ys-aqua);
  box-shadow: 0 0 0 3px rgba(99, 198, 255, 0.15);
}

/* Löschen/Entfernen-Icon */
.basket .cart-items-body a[title*="Entfernen"],
.basket .cart-items-body a[title*="Remove"],
.basket .cart-items-body .btn-link.text-danger,
.basket .cart-items-body button.btn-link {
  color: #94a3b8;
  transition: color 0.2s;
}
.basket .cart-items-body a[title*="Entfernen"]:hover,
.basket .cart-items-body a[title*="Remove"]:hover,
.basket .cart-items-body .btn-link.text-danger:hover,
.basket .cart-items-body button.btn-link:hover {
  color: #dc2626;
}

/* Versandrechner */
.basket .shipping-calculator-form {
  margin-top: 1.25rem;
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-r);
  box-shadow: var(--ys-shadow);
  padding: 1.25rem 1.25rem 0.5rem;
}

/* Summary-Sidebar */
.basket .cart-summary {
  top: 1.5rem;
}
.basket .cart-summary .card-gray,
.basket .cart-summary .basket-summary {
  background: #fff !important;
  border: 1px solid var(--ys-border) !important;
  border-radius: var(--ys-r) !important;
  box-shadow: var(--ys-shadow) !important;
  margin-bottom: 1rem;
}

/* Gutschein-Card: Header-Toggle */
.basket .cart-summary .card .card-header {
  background: #fff;
  border-bottom: 1px solid var(--ys-border);
  padding: 0.5rem 1rem;
}
.basket .cart-summary .card .card-header .btn-link {
  color: var(--ys-ocean);
  font-weight: 600;
  text-decoration: none;
  text-align: left;
}
.basket .cart-summary .card .card-header .btn-link:hover {
  color: var(--ys-cta);
}

/* Totals innerhalb Summary */
.basket .basket-summary .card-body,
.basket .basket-summary {
  padding: 1.25rem;
}
.basket .basket-summary .row {
  margin-left: 0;
  margin-right: 0;
}
.basket .basket-summary .total-net,
.basket .basket-summary .tax,
.basket .basket-summary .customer-credit,
.basket .basket-summary .shipping-costs {
  padding: 0.35rem 0;
  font-size: 0.9375rem;
  color: #475569;
}
.basket .basket-summary .total-net > [class*="col-"],
.basket .basket-summary .tax > [class*="col-"],
.basket .basket-summary .customer-credit > [class*="col-"],
.basket .basket-summary .shipping-costs > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* Gesamtsumme */
.basket .basket-summary .basket-summary-total {
  border-top: 2px solid var(--ys-ocean);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.basket .basket-summary .basket-summary-total > [class*="col-"] {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0;
}
.basket .basket-summary .basket-summary-total .price_label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ys-ocean);
  white-space: nowrap;
}
.basket .basket-summary .basket-summary-total .total-sum {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ys-ocean);
  font-family: "Montserrat", "Open Sans", sans-serif;
  white-space: nowrap;
  text-align: right;
}

/* Versandkosten-Hinweis unter der Summary */
.basket .cart-summary .shipping-costs small {
  color: #64748b;
  font-size: 0.8125rem;
}

/* Checkout-CTA — Orange */
.basket #cart-checkout-btn,
.basket a#cart-checkout-btn.btn,
.basket a#cart-checkout-btn.btn-primary {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.85rem 1.25rem;
  background: var(--ys-cta) !important;
  border: 1px solid var(--ys-cta) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  border-radius: var(--ys-r);
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.25);
  text-transform: none;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.basket #cart-checkout-btn:hover,
.basket a#cart-checkout-btn.btn:hover {
  background: var(--ys-cta-dark) !important;
  border-color: var(--ys-cta-dark) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(255, 107, 0, 0.35);
  transform: translateY(-1px);
}
.basket #cart-checkout-btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.25);
}

/* Gutschein-Submit im Aufklappbereich */
.basket .cart-summary #basket-coupon-form .btn-outline-primary {
  border-color: var(--ys-ocean);
  color: var(--ys-ocean);
  font-weight: 600;
}
.basket .cart-summary #basket-coupon-form .btn-outline-primary:hover {
  background: var(--ys-ocean);
  border-color: var(--ys-ocean);
  color: #fff;
}

/* Versandkostenfrei-Hinweis */
.basket .cart-summary .font-weight-bold.mt-3 {
  margin-top: 1rem;
  color: var(--ys-ocean);
  font-size: 0.9375rem;
}
.basket .cart-summary .font-weight-bold.mt-3 + * {
  background: var(--ys-aqua-light);
  border-radius: var(--ys-r);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--ys-ocean);
  margin-top: 0.5rem;
}

/* Gewicht-Hinweis */
.basket .cart-summary .basket-summary-notice-weight-wrapper {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: #64748b;
  align-items: center;
}
.basket .cart-summary .basket-summary-notice-weight-wrapper i.fa-weight-hanging {
  color: var(--ys-ocean);
}

/* Leerer Warenkorb */
.basket .basket-empty {
  justify-content: center;
  text-align: center;
  padding: 3rem 1rem;
}
.basket .basket-empty .alert {
  background: var(--ys-aqua-light);
  border: 1px solid var(--ys-aqua);
  border-radius: var(--ys-r);
  color: var(--ys-ocean);
  padding: 2rem 1rem;
  box-shadow: var(--ys-shadow);
}
.basket .basket-empty .alert .badge {
  background: var(--ys-ocean) !important;
  color: #fff !important;
  font-size: 2rem;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.basket .basket-empty .btn-primary {
  margin-top: 1.5rem;
  background: var(--ys-cta) !important;
  border-color: var(--ys-cta) !important;
  font-weight: 700;
  padding: 0.75rem 2rem;
  border-radius: var(--ys-r);
}
.basket .basket-empty .btn-primary:hover {
  background: var(--ys-cta-dark) !important;
  border-color: var(--ys-cta-dark) !important;
}

/* X-Selling unter dem Warenkorb */
.basket #xselling,
.basket .basket_wrapper .product-slider-wrapper {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ys-border);
}

/* Gratisgeschenk-Bereich */
.basket .basket-freegift #freeGiftsHeading {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ys-border);
  color: var(--ys-ocean);
  font-family: "Montserrat", "Open Sans", sans-serif;
}

/* Responsive */
@media (max-width: 991.98px) {
  .basket .cart-summary {
    position: static !important;
    margin-top: 1.5rem;
  }
  .basket .basket_wrapper .basket-items {
    padding: 0.5rem 0.75rem;
  }
}
@media (max-width: 575.98px) {
  .basket .basket-heading,
  .basket .basket-heading.h2 {
    font-size: 1.375rem;
  }
  .basket .basket-summary .basket-summary-total .total-sum {
    font-size: 1.25rem;
  }
  .basket #cart-checkout-btn {
    font-size: 1rem;
    padding: 0.75rem 1rem;
  }
}

/* =========================================================
   SECTION 18: CHECKOUT (Bestellvorgang – Steps 1 bis 5)
   Stepper, Formulare, Versand/Zahlung, Bestätigung, Success.
   ========================================================= */

/* Container & Headings */
#checkout {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}
#checkout h1 {
  font-family: "Montserrat", "Open Sans", sans-serif;
  color: var(--ys-ocean);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
}
#checkout .h2,
#checkout h2 {
  font-family: "Montserrat", "Open Sans", sans-serif;
  color: var(--ys-ocean);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 1rem;
}

/* -------- Stepper -------- */
.stepper.checkout-steps {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  position: relative;
  padding: 0.75rem 0;
  margin: 0 0 2rem;
  list-style: none;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}
.stepper.checkout-steps .nav-item.step {
  flex: 1 1 0;
  max-width: none;
  position: relative;
  padding: 0 0.5rem;
  background: transparent !important;
}
/* Kill NOVA chevron arrows & accent bars */
.stepper.checkout-steps .nav-item.step::before,
.stepper.checkout-steps .nav-item.step::after,
.stepper.checkout-steps .nav-item.step .step-content::before,
.stepper.checkout-steps .nav-item.step .step-content::after,
.stepper.checkout-steps .nav-item.step.step-active .step-content::after,
.stepper.checkout-steps .nav-item.step.step-current .step-content::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  border: 0 !important;
}
.stepper.checkout-steps .nav-item.step a,
.stepper.checkout-steps .nav-item.step .step-content {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #94a3b8;
  text-decoration: none;
  position: relative;
  z-index: 1;
  min-height: 0 !important;
  gap: 0.6rem;
  width: 100%;
}
.stepper.checkout-steps .nav-item.step .step-text {
  order: 1;
  font-size: 0.9rem;
  font-weight: 600;
  color: #94a3b8;
  line-height: 1.2;
  margin: 0;
}
.stepper.checkout-steps .nav-item.step .badge {
  order: 2;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #fff !important;
  border: 2px solid var(--ys-border);
  color: #94a3b8 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.stepper.checkout-steps .nav-item.step.step-active .badge {
  background: var(--ys-ocean) !important;
  border-color: var(--ys-ocean);
  color: #fff !important;
}
.stepper.checkout-steps .nav-item.step.step-current .badge {
  background: var(--ys-aqua) !important;
  border-color: var(--ys-aqua);
  color: var(--ys-ocean) !important;
  box-shadow: 0 0 0 4px rgba(99, 198, 255, 0.25);
}
.stepper.checkout-steps .nav-item.step.step-active .step-text,
.stepper.checkout-steps .nav-item.step.step-current .step-text {
  color: var(--ys-ocean);
  font-weight: 700;
}
/* Radio checked color -> Yaska Orange (kill gold) */
.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked,
input[type="radio"]:checked ~ .custom-control-label::before {
  background-color: var(--ys-cta) !important;
  border-color: var(--ys-cta) !important;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: radial-gradient(circle, #fff 40%, transparent 42%) !important;
}
.custom-control-input:focus ~ .custom-control-label::before,
.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 0, 0.25) !important;
  border-color: var(--ys-cta) !important;
}

.stepper.checkout-steps .step-check {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 0.95rem;
  height: 0.95rem;
  background: var(--ys-ocean);
  color: #fff;
  border-radius: 50%;
  font-size: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border: 2px solid #fff;
}

/* -------- Step 0: Login / Register -------- */
#register-customer {
  margin-top: 0;
}
#register-customer .card-gray {
  background: #fff !important;
  border: 1px solid var(--ys-border) !important;
  border-radius: var(--ys-r) !important;
  box-shadow: var(--ys-shadow) !important;
}
#register-customer .card-gray .card-title,
#register-customer .card-gray .card-title.h3 {
  color: var(--ys-ocean);
  font-family: "Montserrat", "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.checkout-existing-customer-hr {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.5rem 0;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}
.checkout-existing-customer-hr .hr-sect {
  position: relative;
  width: 100%;
  text-align: center;
}
.checkout-existing-customer-hr .hr-sect::before,
.checkout-existing-customer-hr .hr-sect::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--ys-border);
}
.checkout-existing-customer-hr .hr-sect::before { left: 0; }
.checkout-existing-customer-hr .hr-sect::after  { right: 0; }

/* Register-Form */
.checkout-register-form {
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-r);
  box-shadow: var(--ys-shadow);
  padding: 1.5rem 1.5rem 1rem;
}
.checkout-register-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}
.checkout-register-form legend,
.checkout-register-form .h3 {
  color: var(--ys-ocean);
  font-family: "Montserrat", "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  border-bottom: 1px solid var(--ys-border);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* -------- Address-Forms (Step 1) -------- */
#checkout .jtl-validate .form-control {
  border: 1px solid var(--ys-border);
  border-radius: 6px;
  padding: 0.625rem 0.875rem;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#checkout .jtl-validate .form-control:focus {
  border-color: var(--ys-aqua);
  box-shadow: 0 0 0 3px rgba(99, 198, 255, 0.15);
  outline: none;
}
#checkout label {
  font-weight: 600;
  color: #334155;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

/* Submit-Button-Reihe (intermediate steps: Ocean) */
.checkout-button-row {
  margin-top: 1.5rem;
  align-items: center;
}
.checkout-button-row .btn-primary,
.checkout-button-row .submit_once {
  background: var(--ys-ocean) !important;
  border-color: var(--ys-ocean) !important;
  color: #fff !important;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: var(--ys-r);
  transition: background 0.2s, box-shadow 0.2s;
}
.checkout-button-row .btn-primary:hover,
.checkout-button-row .submit_once:hover {
  background: #003B7A !important;
  border-color: #003B7A !important;
  box-shadow: 0 4px 12px rgba(0, 79, 158, 0.25);
}
.checkout-button-row .btn-outline-primary {
  color: var(--ys-ocean);
  border-color: var(--ys-ocean);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--ys-r);
}
.checkout-button-row .btn-outline-primary:hover {
  background: var(--ys-ocean);
  border-color: var(--ys-ocean);
  color: #fff;
}
.checkout-register-form-buttons-privacy {
  font-size: 0.85rem;
  color: #64748b;
  margin-top: 0.5rem;
}
.checkout-register-form-buttons-privacy a {
  color: var(--ys-ocean);
  text-decoration: underline;
}

/* -------- Step 3: Versand + Zahlung -------- */
#checkout-shipping-payment {
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-r);
  box-shadow: var(--ys-shadow);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.checkout-shipping-form-change {
  background: var(--ys-aqua-light);
  border-radius: var(--ys-r);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  color: var(--ys-ocean);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.checkout-shipping-form-change .btn-link {
  color: var(--ys-ocean);
  font-weight: 600;
  padding: 0;
  text-decoration: none;
}
.checkout-shipping-form-change .btn-link:hover {
  color: var(--ys-cta);
}

/* Versandarten als Karten */
.checkout-shipping-form-options .radio-w-100,
.checkout-shipping-form-options .custom-radio,
.checkout-shipping-form-options .radio {
  width: 100%;
}
.checkout-shipping-form-options-radio,
.checkout-payment-method .custom-radio,
.checkout-payment-method .radio {
  background: #fff;
  border: 1.5px solid var(--ys-border);
  border-radius: var(--ys-r);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.checkout-shipping-form-options-radio:hover,
.checkout-payment-method .custom-radio:hover,
.checkout-payment-method .radio:hover {
  border-color: var(--ys-aqua);
  background: var(--ys-aqua-light);
}
.checkout-shipping-form-options-radio input[type="radio"]:checked ~ label,
.checkout-shipping-form-options-radio.active,
.checkout-payment-method .custom-radio input[type="radio"]:checked ~ .custom-control-label {
  color: var(--ys-ocean);
}
.checkout-shipping-form-options-radio .title {
  font-weight: 600;
  color: var(--ys-ocean);
}
.checkout-shipping-form-options-radio .desc.text-info {
  color: #64748b !important;
}
.checkout-shipping-form-options-radio .price-col,
.checkout-shipping-form-options-radio .font-weight-bold-util {
  color: var(--ys-ocean);
  font-weight: 700;
}

/* Zahlungsarten */
.checkout-payment-method {
  padding: 0 !important;
  margin-bottom: 0.75rem;
}
.checkout-payment-method .custom-radio,
.checkout-payment-method .radio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}
.checkout-payment-method img.img-sm {
  max-height: 32px;
  max-width: 90px;
  object-fit: contain;
}
.checkout-payment-method .title {
  font-weight: 600;
  color: var(--ys-ocean);
}
.checkout-payment-method-badge {
  background: var(--ys-aqua-light);
  color: var(--ys-ocean);
  font-size: 0.85rem;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  margin-left: auto;
  white-space: nowrap;
}
.checkout-payment-method-note {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  color: #64748b;
  font-size: 0.85rem;
}

/* -------- Step 5: Confirmation -------- */
.checkout-confirmation {
  padding-top: 0.5rem;
}
.checkout-confirmation-billing-address,
.checkout-confirmation-shipping,
.checkout-confirmation .card-products,
.checkout-confirmation .card-gray {
  background: #fff !important;
  border: 1px solid var(--ys-border) !important;
  border-radius: var(--ys-r) !important;
  box-shadow: var(--ys-shadow) !important;
  margin-bottom: 1.25rem;
}
.checkout-confirmation .card-header {
  background: #fff;
  border-bottom: 1px solid var(--ys-border);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.checkout-confirmation-heading {
  font-family: "Montserrat", "Open Sans", sans-serif;
  color: var(--ys-ocean);
  font-weight: 700;
  font-size: 1.0625rem;
  margin: 0;
}
.checkout-confirmation-change {
  color: var(--ys-ocean);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: underline;
}
.checkout-confirmation-change + .fa-pencil-alt {
  color: var(--ys-ocean);
  margin-left: 0.25rem;
}
.checkout-confirmation .card-body {
  padding: 1.25rem;
  color: #334155;
}
.checkout-confirmation-comment {
  border-color: var(--ys-border);
  border-radius: 6px;
}
.checkout-confirmation-legal-notice {
  background: var(--ys-aqua-light);
  border-left: 4px solid var(--ys-aqua);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  color: var(--ys-ocean);
  font-size: 0.9rem;
  line-height: 1.5;
}
.checkout-confirmation-pre-form-hr {
  border-color: var(--ys-border);
  margin: 1.5rem 0;
}

/* AGB / Checkbox */
#checkout .checkbox,
#checkout .custom-checkbox {
  padding: 0.5rem 0;
}
#checkout .checkbox label,
#checkout .custom-control-label {
  color: #334155;
  font-size: 0.9375rem;
}

/* Final CTA: "Kostenpflichtig bestellen" — Orange */
#complete-order-button,
.checkout-confirmation #complete-order-button,
.checkout-button-row #complete-order-button {
  background: var(--ys-cta) !important;
  border-color: var(--ys-cta) !important;
  color: #fff !important;
  font-weight: 800;
  font-size: 1.0625rem;
  padding: 0.95rem 1.25rem;
  border-radius: var(--ys-r);
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.25);
  text-transform: none;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
#complete-order-button:hover,
.checkout-confirmation #complete-order-button:hover {
  background: var(--ys-cta-dark) !important;
  border-color: var(--ys-cta-dark) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(255, 107, 0, 0.35);
  transform: translateY(-1px);
}
#complete-order-button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.25);
}

/* -------- Order Completed (Success) -------- */
.order-completed {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 0;
  text-align: center;
}
.order-completed::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome";
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  background: var(--ys-aqua);
  color: var(--ys-ocean);
  border-radius: 50%;
  font-size: 2.5rem;
  margin: 0 auto 1.5rem;
  box-shadow: 0 8px 24px rgba(99, 198, 255, 0.35);
}
#checkout ~ * h1,
body.page-checkout-bestaetigung h1,
.order-completed-page h1 { text-align: center; }
.order-completed .alert {
  background: var(--ys-aqua-light);
  border: 1px solid var(--ys-aqua);
  border-radius: var(--ys-r);
  color: var(--ys-ocean);
  text-align: left;
  box-shadow: var(--ys-shadow);
}
.order-completed .btn-primary {
  background: var(--ys-ocean) !important;
  border-color: var(--ys-ocean) !important;
  font-weight: 700;
  padding: 0.75rem 2rem;
  border-radius: var(--ys-r);
  margin-top: 1.5rem;
}
.order-completed .btn-primary:hover {
  background: #003B7A !important;
  border-color: #003B7A !important;
}

/* Responsive */
@media (max-width: 991.98px) {
  .stepper.checkout-steps .nav-item.step .step-text {
    font-size: 0.75rem;
  }
}
@media (max-width: 767.98px) {
  .stepper.checkout-steps .nav-item.step.col-auto {
    flex: 0 0 auto;
  }
  .stepper.checkout-steps .nav-item.step .step-text.d-none {
    display: none !important;
  }
  .checkout-shipping-form-change {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 575.98px) {
  #checkout h1 {
    font-size: 1.375rem;
  }
  #complete-order-button {
    font-size: 1rem;
    padding: 0.85rem 1rem;
  }
}

/* ============================================================
   19. PRODUCT LISTING / CATEGORY (Plattformen, SUP, etc.)
   ============================================================ */

/* ---- Page header ---- */
.is-item-list h1 {
  font-family: 'Montserrat', 'Open Sans', sans-serif;
  font-weight: 800;
  color: var(--ys-ocean);
  font-size: 2rem;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}
.is-item-list .breadcrumb {
  margin-bottom: 0.5rem;
}

/* ---- Layout: Sidebar left + content ---- */
.is-item-list .sidepanel-left {
  padding-right: 1.25rem;
}
@media (max-width: 991.98px) {
  .is-item-list .sidepanel-left {
    padding-right: 0;
  }
}

/* ---- Sidebar filter boxes ---- */
.sidepanel-left .box,
.sidepanel-left .box-normal {
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-r);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(0, 79, 158, 0.03);
}
.sidepanel-left .productlist-filter-headline {
  font-family: 'Montserrat', 'Open Sans', sans-serif;
  font-weight: 700;
  color: var(--ys-ocean);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ys-aqua-light);
}
.sidepanel-left .productlist-filter-headline span {
  color: var(--ys-ocean);
}
.sidepanel-left .box-filter-hr,
.sidepanel-left .box-normal-hr {
  display: none;
}

/* ---- Category tree ---- */
.sidepanel-left .box-categories .nav-link,
.sidepanel-left .box-categories a {
  color: #334155;
  padding: 0.45rem 0.25rem;
  border-radius: 4px;
  font-size: 0.95rem;
  transition: background 0.15s, color 0.15s;
}
.sidepanel-left .box-categories .nav-link:hover,
.sidepanel-left .box-categories a:hover {
  background: var(--ys-aqua-light);
  color: var(--ys-ocean);
}
.sidepanel-left .box-categories .nav-link.active,
.sidepanel-left .box-categories .active > a {
  background: var(--ys-aqua-light);
  color: var(--ys-ocean);
  font-weight: 700;
}

/* ---- Filter items (availability, special, etc.) ---- */
.sidepanel-left .filter-item {
  display: flex;
  align-items: center;
  padding: 0.35rem 0;
  color: #334155;
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 0.15s;
}
.sidepanel-left .filter-item:hover {
  color: var(--ys-ocean);
}
.sidepanel-left .filter-item .snippets-filter-item-icon-right {
  margin-left: auto;
  color: #94a3b8;
  font-size: 1.1rem;
}

/* ---- Price range filter ---- */
.sidepanel-left .box-filter-price .price-range-slide {
  margin: 0.75rem 0.25rem 1rem;
}
.sidepanel-left .box-filter-price .noUi-connect {
  background: var(--ys-ocean) !important;
}
.sidepanel-left .box-filter-price .noUi-handle {
  background: #fff !important;
  border: 2px solid var(--ys-ocean) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
  top: -6px !important;
  right: -10px !important;
  cursor: pointer;
}
.sidepanel-left .box-filter-price .noUi-handle::before,
.sidepanel-left .box-filter-price .noUi-handle::after {
  display: none !important;
}
.sidepanel-left .box-filter-price .noUi-target {
  background: var(--ys-border) !important;
  border: 0 !important;
  box-shadow: none !important;
  height: 6px !important;
}
.sidepanel-left .box-filter-price .price-range-input {
  border-radius: 6px;
  border: 1px solid var(--ys-border);
  font-size: 0.9rem;
}
.sidepanel-left .box-filter-price .price-range-input:focus {
  border-color: var(--ys-aqua);
  box-shadow: 0 0 0 0.15rem rgba(99, 198, 255, 0.25);
}

/* ---- Productlist toolbar (top + bottom) ---- */
.productlist-page-nav {
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-r);
  padding: 0.5rem 0.75rem;
  margin-bottom: 1.25rem;
  align-items: center;
}
.productlist-page-nav-bottom {
  margin-top: 1.25rem;
  margin-bottom: 0;
}
.productlist-page-nav .displayoptions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.productlist-page-nav .dropdown-toggle {
  background: #fff;
  border: 1px solid var(--ys-border);
  color: #334155;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.productlist-page-nav .dropdown-toggle:hover {
  border-color: var(--ys-ocean);
  color: var(--ys-ocean);
  background: var(--ys-aqua-light);
}
.productlist-page-nav .btn-option {
  border: 1px solid var(--ys-border);
  background: #fff;
  color: #334155;
  padding: 0.4rem 0.65rem;
  border-radius: 6px;
}
.productlist-page-nav .btn-option.active {
  background: var(--ys-ocean);
  color: #fff;
  border-color: var(--ys-ocean);
}
.productlist-page-nav .page-nav-filter-item.active {
  background: var(--ys-aqua-light);
  color: var(--ys-ocean);
  font-weight: 700;
}
.productlist-page-nav .page-nav-filter-item:hover {
  background: var(--ys-aqua-light);
  color: var(--ys-ocean);
}

/* ---- Filter button (mobile / inline) ---- */
.filter-collapsible-control .btn-filter-box {
  border: 1px solid var(--ys-border);
  background: #fff;
  color: var(--ys-ocean);
  font-weight: 600;
  border-radius: 6px;
  padding: 0.45rem 0.85rem;
}
.filter-collapsible-control .btn-filter-box:hover {
  background: var(--ys-aqua-light);
  border-color: var(--ys-ocean);
}

/* ---- Pagination ---- */
.pagination-wrapper .pagination,
.productlist-page-nav .pagination {
  margin: 0;
  gap: 0.25rem;
}
.pagination .page-item .page-link {
  border: 1px solid var(--ys-border);
  color: #334155;
  border-radius: 6px !important;
  margin: 0;
  font-weight: 600;
  min-width: 2.25rem;
  text-align: center;
  padding: 0.4rem 0.6rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pagination .page-item .page-link:hover {
  background: var(--ys-aqua-light);
  border-color: var(--ys-ocean);
  color: var(--ys-ocean);
}
.pagination .page-item.active .page-link,
.pagination .page-item .page-link.active {
  background: var(--ys-ocean);
  border-color: var(--ys-ocean);
  color: #fff;
}
.pagination .page-item.disabled .page-link {
  color: #cbd5e1;
  background: #f8fafc;
}
.pagination-entries {
  font-size: 0.9rem;
  color: #64748b;
}

/* ---- Active filter chips ---- */
.filter-type-FilterItem .filter-item.active,
.active-filters .filter-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--ys-aqua-light);
  color: var(--ys-ocean);
  border: 1px solid var(--ys-aqua);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---- Product grid spacing ---- */
.row.product-list.layout-gallery {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.row.product-list.layout-gallery > .product-wrapper {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-bottom: 1rem;
}

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
  .is-item-list h1 {
    font-size: 1.5rem;
  }
  .productlist-page-nav {
    padding: 0.4rem 0.5rem;
  }
  .productlist-page-nav .dropdown-toggle,
  .productlist-page-nav .btn-option {
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
  }
}

/* ============================================================
   20. CATEGORY LANDINGPAGE (Hero, USP-Bar, Picks, Social, Reassure)
   ============================================================ */

/* Sidebar auf Listings ausblenden & Grid volle Breite (zu wenig Produkte für Filter) */
.is-item-list .sidepanel-left { display: none !important; }
.is-item-list .col-lg-8.col-xl-9,
.is-item-list .ml-auto-util.col-lg-8,
.is-item-list #content-wrapper > .container-fluid > .row > .col-lg-8 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}
.is-item-list .container-fluid.container-fluid-xl.d-lg-flex {
  display: block !important;
}

/* Landingpage-Wrapper in Kategoriebeschreibung - eigener Abstand */
.ys-cat-landing { margin: 0 0 2rem; }
.ys-cat-landing > * { max-width: 100%; }
.ys-cat-landing > section { margin-bottom: 2.5rem; }

/* Intro */
.ys-intro {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 2rem !important;
}
.ys-intro__heading {
  font-family: 'Montserrat', 'Open Sans', sans-serif;
  font-weight: 800;
  color: var(--ys-ocean);
  font-size: 1.75rem;
  margin: 0 0 0.75rem;
}
.ys-intro__text {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #334155;
  margin: 0;
}

/* Benefits */
.ys-benefits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.ys-benefit {
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-r);
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.ys-benefit:hover {
  border-color: var(--ys-aqua);
  box-shadow: var(--ys-shadow);
  transform: translateY(-2px);
}
.ys-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--ys-aqua-light);
  color: var(--ys-ocean);
  font-size: 1.4rem;
  margin-bottom: 0.85rem;
}
.ys-benefit h3 {
  font-family: 'Montserrat', 'Open Sans', sans-serif;
  font-weight: 700;
  color: var(--ys-ocean);
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}
.ys-benefit p {
  color: #64748b;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
}

/* FAQ */
.ys-faq {
  max-width: 820px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.ys-faq__heading {
  font-family: 'Montserrat', 'Open Sans', sans-serif;
  font-weight: 800;
  color: var(--ys-ocean);
  font-size: 1.6rem;
  text-align: center;
  margin: 0 0 1.25rem;
}
.ys-faq__item {
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-r);
  padding: 0.9rem 1.15rem;
  margin-bottom: 0.6rem;
  transition: border-color 0.15s;
}
.ys-faq__item[open] {
  border-color: var(--ys-aqua);
  box-shadow: 0 1px 3px rgba(0,79,158,0.05);
}
.ys-faq__item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ys-ocean);
  list-style: none;
  position: relative;
  padding-right: 1.5rem;
  outline: none;
}
.ys-faq__item summary::-webkit-details-marker { display: none; }
.ys-faq__item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ys-cta);
  font-size: 1.25rem;
  font-weight: 800;
  transition: transform 0.2s;
}
.ys-faq__item[open] summary::after {
  content: '−';
}
.ys-faq__item p {
  margin: 0.75rem 0 0;
  color: #334155;
  line-height: 1.55;
  font-size: 0.95rem;
}


/* Hero */
.ys-cat-hero {
  position: relative;
  border-radius: var(--ys-r);
  overflow: hidden;
  min-height: 360px;
  background-size: cover;
  background-position: center;
  background-color: var(--ys-ocean);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.ys-cat-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,30,70,0.15) 0%, rgba(0,30,70,0.75) 100%);
}
.ys-cat-hero__inner {
  position: relative;
  padding: 2.25rem 2rem;
  max-width: 720px;
  z-index: 1;
}
.ys-cat-hero .ys-cat-hero__title {
  font-family: 'Montserrat', 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 0.5rem;
  letter-spacing: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.ys-cat-hero__claim {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.95);
  margin: 0 0 1.25rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.ys-cat-hero__cta {
  background: var(--ys-cta);
  border-color: var(--ys-cta);
  color: #fff;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(255,107,0,0.35);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.ys-cat-hero__cta:hover,
.ys-cat-hero__cta:focus {
  background: var(--ys-cta-dark);
  border-color: var(--ys-cta-dark);
  color: #fff;
  transform: translateY(-1px);
}
@media (max-width: 767.98px) {
  .ys-cat-hero { min-height: 260px; }
  .ys-cat-hero__inner { padding: 1.25rem; }
  .ys-cat-hero .ys-cat-hero__title { font-size: 1.6rem; }
  .ys-cat-hero__claim { font-size: 0.95rem; }
}

/* USP-Bar */
.ys-usp-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  background: var(--ys-aqua-light);
  border: 1px solid #d4ebff;
  border-radius: var(--ys-r);
  padding: 0.85rem 1rem;
  margin: 0 0 1.5rem;
}
.ys-usp {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ys-ocean);
  font-weight: 600;
  font-size: 0.95rem;
}
.ys-usp__icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: #fff;
  color: var(--ys-ocean);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,79,158,0.1);
}

/* Picks (3-Spalten kuratierte Auswahl) */
.ys-picks { margin: 2.5rem 0 2rem; }
.ys-picks__heading {
  font-family: 'Montserrat', 'Open Sans', sans-serif;
  font-weight: 800;
  color: var(--ys-ocean);
  font-size: 1.6rem;
  text-align: center;
  margin: 0 0 1.5rem;
}
.ys-picks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.ys-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-r);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.ys-pick:hover {
  transform: translateY(-3px);
  box-shadow: var(--ys-shadow-md);
  border-color: var(--ys-aqua);
  color: inherit;
  text-decoration: none;
}
.ys-pick__ribbon {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--ys-cta);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(255,107,0,0.35);
  z-index: 2;
}
.ys-pick__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f8fafc;
}
.ys-pick__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ys-pick:hover .ys-pick__img img { transform: scale(1.04); }
.ys-pick__body {
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}
.ys-pick__name {
  font-weight: 700;
  color: var(--ys-ocean);
  font-size: 1.05rem;
  line-height: 1.3;
}
.ys-pick__price {
  font-weight: 800;
  color: #0f172a;
  font-size: 1.15rem;
}
.ys-pick__cta {
  margin-top: auto;
  align-self: flex-start;
  background: var(--ys-ocean);
  border-color: var(--ys-ocean);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
}
.ys-pick:hover .ys-pick__cta {
  background: var(--ys-ocean-mid);
  border-color: var(--ys-ocean-mid);
  color: #fff;
}

/* Social Proof */
.ys-social {
  margin: 2.5rem 0 2rem;
  padding: 2rem 1.25rem;
  background: linear-gradient(180deg, #fff 0%, var(--ys-aqua-light) 100%);
  border-radius: var(--ys-r);
}
.ys-social__heading {
  font-family: 'Montserrat', 'Open Sans', sans-serif;
  font-weight: 800;
  color: var(--ys-ocean);
  font-size: 1.5rem;
  text-align: center;
  margin: 0 0 1.5rem;
}
.ys-social__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.ys-review {
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-r);
  padding: 1.1rem 1.25rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,79,158,0.05);
}
.ys-review__stars {
  color: var(--ys-cta);
  font-size: 0.95rem;
  letter-spacing: 0.1rem;
}
.ys-review__quote {
  font-style: italic;
  color: #334155;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
}
.ys-review__author {
  margin-top: auto;
  color: var(--ys-ocean);
  font-size: 0.9rem;
}
.ys-review__author strong { display: block; font-weight: 700; }
.ys-review__location { color: #64748b; }

/* Reassurance row */
.ys-reassure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin: 2rem 0 1rem;
  padding: 1.25rem 1rem;
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-r);
}
.ys-reassure__item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #334155;
}
.ys-reassure__item i {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--ys-aqua-light);
  color: var(--ys-ocean);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.ys-reassure__item strong {
  display: block;
  color: var(--ys-ocean);
  font-size: 0.95rem;
}
.ys-reassure__item small {
  color: #64748b;
  font-size: 0.8rem;
}



/* Live catalog image preview overrides. Source images come from the Yaska 2026 product catalog. */
.ys-real-hero {
  background-position: center center;
}

.ys-real-hero .ys-cat-hero__overlay {
  background:
    linear-gradient(90deg, rgba(1, 23, 43, 0.82) 0%, rgba(1, 23, 43, 0.58) 42%, rgba(1, 23, 43, 0.18) 100%),
    linear-gradient(0deg, rgba(1, 23, 43, 0.18), rgba(1, 23, 43, 0.18));
}

.ys-real-hero .ys-cat-hero__title,
.ys-real-hero .ys-cat-hero__subtitle,
.ys-real-hero .ys-cat-hero__eyebrow {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.ys-real-hero--sup {
  background-position: center 46%;
}

.ys-real-hero--waterbike {
  background-position: center 48%;
}

.ys-real-hero--plattformen {
  background-position: center 50%;
}

.ys-real-hero--yacht {
  background-position: center 48%;
}

.ys-review__notice {
  margin: 0.75rem 0 0;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.35;
}

.ys-picks--teams .ys-picks__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ys-pick__team {
  display: block;
  margin-bottom: 0.35rem;
  color: #0f766e;
  font-size: 0.9rem;
  font-weight: 700;
}

.ys-pick__placeholder {
  display: flex;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #f1f5f9;
  color: #64748b;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 767.98px) {
  .ys-picks--teams .ys-picks__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================
   STARTSEITE: OPC-Container full-bleed
   (Header/Footer gehen edge-to-edge → OPC-Bloecke
   sollen nicht durch Bootstrap-container-fluid-Padding
   15/24px Rand zeigen)
   ============================================ */
body[data-page="18"] .opc-Container {
  padding-left: 0;
  padding-right: 0;
}

/* ============================================
   TOPBAR: Sprach-Dropdown (dynamisch)
   ============================================ */
.yaska-topbar__lang {
  position: relative;
  display: inline-block;
}
.yaska-topbar__lang-toggle {
  background: transparent;
  border: 0;
  padding: 2px 8px;
  color: #ffffff;
  font: inherit;
  line-height: 1.4;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.yaska-topbar__lang-toggle:hover,
.yaska-topbar__lang-toggle:focus-visible,
.yaska-topbar__lang-toggle[aria-expanded="true"] {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}
.yaska-topbar__lang-caret {
  font-size: 10px;
  opacity: 0.8;
  margin-left: 2px;
}
.yaska-topbar__lang-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  min-width: 170px;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--ys-ocean-deep, #0a2540);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.yaska-topbar__lang-menu[hidden] {
  display: none;
}
.yaska-topbar__lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}
.yaska-topbar__lang-item:hover,
.yaska-topbar__lang-item:focus {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  text-decoration: none;
  outline: none;
}

/* ============================================
   TOPBAR: SVG-Flaggen (DE/GB) + auffaelligerer Switch-Button
   ============================================ */
.ys-flag {
  width: 22px;
  height: auto;
  max-height: 14px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 2px rgba(255, 255, 255, 0.18);
  overflow: hidden;
  flex-shrink: 0;
}
.yaska-topbar__lang-toggle {
  /* Leichter Border/Background im Ruhezustand, damit der Switcher als Button erkennbar ist */
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}
.yaska-topbar__lang-toggle:hover,
.yaska-topbar__lang-toggle:focus-visible,
.yaska-topbar__lang-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
}

/* =====================================================
   A11y Kontrast-Overrides — PSI WCAG AA Fix (2026-04-23)
   Scores vorher: A11y 89 mobile / 86 desktop
   Alle Ratios gegen WCAG AA (4.5:1 Text / 3:1 Link)
   ===================================================== */

/* Topbar-Links: #525252 -> #cfd6e0 auf #001a40 (12:1) */
.yaska-topbar .yaska-topbar__link,
.yaska-topbar__left .yaska-topbar__link,
.yaska-topbar__right .yaska-topbar__link { color: #cfd6e0 !important; }
.yaska-topbar .yaska-topbar__link:hover,
.yaska-topbar .yaska-topbar__link.active { color: #ffffff !important; }

/* Hero-Brand-Titel: auf Navy-Background lesbar (12:1) */
.ys-brand .ys-brand__title { color: #cfd6e0 !important; }
.ys-brand .ys-brand__text { color: rgba(255,255,255,0.85) !important; }

/* CTA-Button: weiss auf dunklerem Orange (5,8:1) */
.ys-brand .ys-brand__btn-cta { background: #b34c00 !important; color: #fff !important; }
.ys-brand .ys-brand__btn-cta:hover { background: #8a3b00 !important; }

/* Brand-Card-Label: #63c6ff auf weiss -> #0072b8 (5,8:1) */
.ys-best .ys-best__brand { color: #0072b8 !important; }

/* B2B-Nav: weiss statt Aqua (8,6:1 auf #004f9e) */
.yaska-nav-b2b .yaska-nav-b2b__link { color: #ffffff !important; }
.yaska-nav-b2b .yaska-nav-b2b__link:hover { color: #ffffff !important; background: rgba(255,255,255,0.15) !important; }

/* Footer-JTL-Credit: heller lesbarer Text + Link weiss mit Unterstrich */
.yaska-footer .yaska-footer__jtl-credit { color: #c8ccd1 !important; font-size: 12px !important; }
.yaska-footer .yaska-footer__jtl-link {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-weight: 600 !important;
}
.yaska-footer .yaska-footer__jtl-link:hover { color: #ffffff !important; text-decoration-thickness: 2px; }

/* === A11y Runde 2: zusätzliche Contrast-Fails aus PSI 2026-04-23 === */
/* Trustpilot-Logo: dunkleres Grün (5:1) */
.ys-tp .ys-tp__logo { color: #006b48 !important; }

/* B2B-Section-Titel auf Navy lesbar */
.ys-b2b .ys-b2b__title { color: #cfd6e0 !important; }

/* Guide-Card-Link */
.ys-guide .ys-guide__card-link { color: #0072b8 !important; }

/* Nav-Panel Links auf dunklem Background */
.nav-panel ul.nav > li.nav-item > a.nav-link { color: #cfd6e0 !important; }
.nav-panel ul.nav > li.nav-item > a.nav-link:hover { color: #ffffff !important; }

/* Footer-Copyright + Link */
.yaska-footer__copyright { color: #c8ccd1 !important; }
.yaska-footer__copyright a {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-weight: 600 !important;
}

/* Payment-Badge */
.yaska-pay-badge { color: #b3b7bc !important; }

/* ── Footer: Online-Widerrufsformular als Button (Link aus Rechtsliste, als Button gestylt) ── */
.yaska-footer__col .nav-item .nav-link[href*="Online-Widerrufsformular"],
.yaska-footer__col .nav-item .nav-link[href*="Online-Cancellation-Form"] {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 18px !important;
  background-color: var(--ys-ocean);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.3;
  border-radius: var(--ys-r);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.yaska-footer__col .nav-item .nav-link[href*="Online-Widerrufsformular"]:hover,
.yaska-footer__col .nav-item .nav-link[href*="Online-Cancellation-Form"]:hover {
  background-color: var(--ys-ocean-mid);
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 79, 158, 0.35);
}
.yaska-footer__col .nav-item .nav-link[href*="Online-Widerrufsformular"]:focus-visible,
.yaska-footer__col .nav-item .nav-link[href*="Online-Cancellation-Form"]:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   YS-17 — Richtung A "Auf dem Wasser" (2026-07-10)
   Foto-Hero, Foto-Kategoriekacheln, Proof-Sektion (ersetzt
   Stat-Grid), SVG-Icons statt Emojis, Ratgeber-Fotokarten.
   ═══════════════════════════════════════════════════════════ */

/* ── Hero (ys-hero2) ─────────────────────────────────────── */
.ys-hero2 {
  position: relative;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: #fff;
}
.ys-hero2__bg,
.ys-hero2__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ys-hero2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0,26,64,.84) 0%, rgba(0,26,64,.46) 45%, rgba(0,26,64,.06) 78%);
  z-index: 1;
}
.ys-hero2__inner {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 110px 28px 30px;
}
.ys-hero2__content { max-width: 620px; }
.ys-hero2__eyebrow {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ys-aqua);
  font-weight: 600;
  margin-bottom: 14px;
}
.ys-hero2__title {
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.06;
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px;
}
.ys-hero2__title em { font-style: normal; color: var(--ys-aqua); }
.ys-hero2__desc {
  font-size: 17px;
  line-height: 1.55;
  color: #D9E8F5;
  max-width: 48ch;
  margin: 0 0 24px;
}
.ys-hero2__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.ys-hero2__btn-cta {
  display: inline-block;
  padding: 14px 28px;
  background: var(--ys-cta);
  color: #fff;
  border-radius: var(--ys-r);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  transition: background .2s, transform .2s;
}
.ys-hero2__btn-cta:hover { background: var(--ys-cta-dark); color: #fff; transform: translateY(-1px); }
.ys-hero2__btn-outline {
  display: inline-block;
  padding: 14px 28px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: var(--ys-r);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: background .2s;
}
.ys-hero2__btn-outline:hover { background: rgba(255,255,255,.18); color: #fff; }
.ys-hero2__chips { display: flex; gap: 10px; flex-wrap: wrap; }
.ys-hero2__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,20,45,.58);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13.5px;
  color: #E8F3FB;
  backdrop-filter: blur(3px);
}
.ys-hero2__chip svg { color: var(--ys-aqua); flex-shrink: 0; }
.ys-hero2__chip strong { font-weight: 700; }
@media (max-width: 600px) {
  .ys-hero2 { min-height: 480px; }
  .ys-hero2__inner { padding-top: 80px; }
  .ys-hero2__desc { font-size: 15.5px; }
}

/* ── Kategorie-Kacheln mit Foto (ys-cats2) ───────────────── */
.ys-cats2 { background: #fff; padding: 56px 0; }
.ys-cats2__grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.ys-cats2__tile {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 4.6;
  text-decoration: none;
  color: #fff;
  box-shadow: var(--ys-shadow);
  transition: transform .25s, box-shadow .25s;
}
.ys-cats2__tile:hover { transform: translateY(-4px); box-shadow: var(--ys-shadow-md); color: #fff; }
.ys-cats2__tile picture,
.ys-cats2__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.ys-cats2__tile:hover img { transform: scale(1.04); }
.ys-cats2__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,26,64,0) 38%, rgba(0,26,64,.88) 100%);
}
.ys-cats2__body {
  position: relative;
  z-index: 2;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ys-cats2__body b { font-size: 19px; font-weight: 800; }
.ys-cats2__body > span:not(.ys-cats2__link) { font-size: 13.5px; color: #C3DAEC; }
.ys-cats2__link { font-size: 13.5px; font-weight: 700; color: var(--ys-aqua); margin-top: 6px; }
@media (max-width: 991px) { .ys-cats2__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ys-cats2__grid { grid-template-columns: 1fr; } .ys-cats2__tile { aspect-ratio: 16/10; } }

/* ── Proof-Sektion (ys-proof, ersetzt Stat-Grid) ─────────── */
.ys-proof { background: var(--ys-bg-soft); padding: 0; }
.ys-proof__grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
}
.ys-proof__img { display: block; height: 100%; }
.ys-proof__img img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 300px; }
.ys-proof__body { padding: 56px 48px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.ys-proof__badge {
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ys-ocean);
}
.ys-proof__title { font-size: clamp(26px, 3vw, 34px); font-weight: 800; color: var(--ys-text); margin: 0; }
.ys-proof__title em { font-style: normal; color: var(--ys-ocean-mid); }
.ys-proof__fact {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ys-text-soft);
}
.ys-proof__check { color: var(--ys-green); flex-shrink: 0; margin-top: 2px; }
.ys-proof__buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.ys-proof .ys-brand__btn-outline { border-color: var(--ys-ocean); color: var(--ys-ocean); }
.ys-proof .ys-brand__btn-outline:hover { background: var(--ys-ocean); color: #fff; }
@media (max-width: 900px) {
  .ys-proof__grid { grid-template-columns: 1fr; }
  .ys-proof__img img { min-height: 220px; max-height: 320px; }
  .ys-proof__body { padding: 36px 28px; }
}

/* ── SVG-Icons statt Emojis (ys-ic) ──────────────────────── */
.ys-ic svg { display: inline-block; vertical-align: middle; }
.ys-trust__icon.ys-ic { color: var(--ys-ocean); }
.ys-guarantee__item .ys-ic { display: inline-flex; align-items: center; color: #fff; opacity: .92; }
.ys-b2b__target-icon.ys-ic {
  color: var(--ys-aqua);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 0;
}

/* ── Ratgeber-Karten mit Foto ────────────────────────────── */
.ys-guide__photo { display: block; aspect-ratio: 16/9; overflow: hidden; }
.ys-guide__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.ys-guide__card:hover .ys-guide__photo img { transform: scale(1.04); }

/* ═══════════════════════════════════════════════════════════
   YS-18 — B2B/OEM-Seiten: Foto-Heros + SVG-Icons (2026-07-10)
   ═══════════════════════════════════════════════════════════ */

.ys-bpage__hero--b2b {
  background: linear-gradient(100deg, rgba(0,26,64,.88) 0%, rgba(0,26,64,.6) 55%, rgba(0,26,64,.3) 100%),
              url('/media/yaska-home/hero-b2b-1600.jpg') center / cover no-repeat;
}
.ys-bpage__hero--oem {
  background: linear-gradient(100deg, rgba(0,26,64,.88) 0%, rgba(0,26,64,.6) 55%, rgba(0,26,64,.3) 100%),
              url('/media/yaska-home/hero-oem-1600.jpg') center / cover no-repeat;
}

.ys-bpage__usp-icon,
.ys-bpage__target-icon {
  font-size: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ys-aqua-light);
  border-radius: 12px;
  color: var(--ys-ocean);
}
.ys-bpage__target-icon { width: 46px; height: 46px; border-radius: 10px; }