/* =====================================================================
   BERGETAPPE · SHOP-CSS  (bereinigt · Stand Familienalbum)
   1  Navigation / Mega-Menü (Flatsome-Basis)
   2  Typografie / Global
   3  Listen · Tabellen · Breadcrumbs
   4  Produkt / Preise / Varianten (Basis)
   5  Checkout / Danke-Seite
   6  Formulare / Layout-Helfer
   7  Slider / Galerie
   8  Modell-Buttons
   9  Design-Fundament „Trailhead" + Marken-Akzente + Ticket-Token
   10 Produktbeschreibung · Boarding-Pass (.fa-ticket)
   11 Produktseite · Summary & Varianten (inkl. EAN-Zeile)
   12 Bausteine (Kurzbeschreibung · Boxen · Aktion)
   13 Tab 2 · Modellberatung (.kb-*)
   14 Modellvergleich (.mv · .mvchar)
   16 Marken-Hero mit Tabs
   17 Mega-Menü · Modell-Navigation (.tm-*)
   18 Badge-Leiste (.kw-bb)
   19 Profil-Filter (.kw-pf)
   20 Shop-Archiv (Zähler aus · Produkte pro Seite)
   21 Zubehör-Filter (.kw-af)
   22 Kaufberatung (.vb-* · .kb-*)
   23 Varianten-Auswahl (Farbe + übrige Attribute)
   24 Mega-Menü · Varianten B und E (.mm-*)
   25 Ticketkopf für Kaufberatung (.ck-*)
   26 Hauptnavigation · Variante F „Abrisskante"
   27 Mobiles Menü · M3 „Markentickets"
   28 Produktgalerie · Feste Bühne
   29 Produktgalerie · G1 „Filmstreifen"
   31 Footer
   35 Startseite · Familienalbum (.fam-*)
   36 Warenkorb · Buttons vereinheitlichen
   37 Warenkorb · Cross-Sells „Packliste" (.kw-pl)

   Entfernt (alte Startseite): 15 Marken-Flipdeck · 30 Hero B2 ·
   32 Wegweiser · 33 Wäscheleine · 34 Preisschild XXL.
   Schriften (Outfit · Space Mono · Caveat) lädt functions.php
   Abschnitt 02.
   ===================================================================== */


/* =====================================================================
   1) NAVIGATION / MEGA MENU
   ===================================================================== */

.nav-dropdown ul,
.nav-dropdown li,
.sub-menu,
.sub-menu li {
  list-style: none !important;
  line-height: 1.35 !important;
  margin: 0;
  padding: 0;
}

.nav-vertical > li > ul li a {
  color: #525252;
  transition: color .2s ease;
  text-align: left;
  font-size: 1em;
}

/* Mega-Menü kompakter und sauberer */
.header-nav .nav-dropdown {
  padding: 18px 20px !important;
  min-width: 420px !important;
}

.header-nav .nav-dropdown .col,
.header-nav .nav-dropdown .col-inner {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Links im Mega-Menü (Flatsome-Standardlisten, NICHT .tm-nav) */
.header-nav .nav-dropdown li a {
  display: block;
  padding: 12px 0 !important;
  line-height: 1.45 !important;
  font-size: 15px !important;
  border-bottom: 1px solid #e9e9e9;
}

.header-nav .nav-dropdown li:last-child a {
  margin-bottom: 0;
}

.header-nav .nav-dropdown img {
  display: block;
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 849px) {
  .header-nav .nav-dropdown {
    min-width: 100% !important;
    padding: 16px 18px !important;
  }
  .header-nav .nav-dropdown li a {
    padding: 10px 0 !important;
    font-size: 14px !important;
  }
  .header-nav .nav-dropdown img {
    height: 200px;
    object-fit: cover;
  }
}


/* =====================================================================
   2) TYPOGRAPHY / GLOBAL
   ===================================================================== */

body {
  font-family: Open Sans, Arial, sans-serif;
  font-size: 1.05em;
  color: #666;
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6,
.heading-font,
.off-canvas-center .nav-sidebar.nav-vertical > li > a {
  font-family: 'Noto Sans Lycian', Helvetica, Arial, Lucida, sans-serif;
  font-variant: small-caps;
  color: #5b6980;
  font-weight: inherit;
  padding-top: 0;
  padding-bottom: 15px;
}

.is-xxlarge {
  font-size: 1.75em;
  margin-bottom: -1em;
}

.is-divider {
  display: block;
  width: 100%;
  max-width: 500px;
  height: 3px;
  margin: .5em 0;
  background-color: rgba(0, 0, 0, .1);
}

.box-text p {
  margin-top: .1em;
  margin-bottom: .1em;
  color: #000;
  text-wrap: auto;
}


/* =====================================================================
   3) CONTENT LISTS / TABLES / BREADCRUMBS
   ===================================================================== */

.entry-content ul,
.et-l--body ul,
.et-l--footer ul {
  list-style-type: disclosure-closed;
  line-height: 33px;
}

.breadcrumbs a {
  color: #121212;
  font-weight: 400;
  font-size: .875rem;
  letter-spacing: -.00625rem;
  line-height: 1.125rem;
}

table {
  width: 75%;
  margin-bottom: 1em;
  border-color: #ececec;
  border-spacing: 5px;
  font-size: 1.05em;
}

.cart_totals tbody th {
  min-width: 200px;
}

td.product-name {
  text-overflow: ellipsis;
  word-break: inherit;
}


/* =====================================================================
   4) PRODUCT / PRICES / VARIATIONS (Basis)
   ===================================================================== */

span.amount {
  color: #5b6980;
}

del span.amount {
  font-weight: 400;
  margin-right: .3em;
  opacity: .6;
}

/* ivpa: einheitliche Kachelgröße der Varianten-Auswahl */
#ivpa-content .ivpa_attribute.ivpa_text.ivpa_border .ivpa_term.ivpa_active {
  min-width: 150px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9em;
}

#ivpa-content .ivpa_attribute[data-attribute="pa_thule-bexey"].ivpa_text.ivpa_border .ivpa_term.ivpa_active {
  font-size: .85em;
}

.product p.wc-gzd-additional-info {
  margin-left: 1rem;
}


/* =====================================================================
   5) CHECKOUT / THANK YOU PAGE
   ===================================================================== */

#cfw-cart .cart-item-row .cfw-cart-item-subtotal,
.cfw_cart_item_after_data .cfw-edit-item-quantity-control-wrap,
.woocommerce-ordering {
  display: none !important;
}

.cfw_cart_item_after_data .cfw-edit-item-quantity-control-wrap {
  margin-right: 7px;
}

#cfw-breadcrumb li.active > a {
  color: var(--cfw-breadcrumb-current-text-color);
  font-size: large;
}

body.checkout-wc *,
body.checkout-wc ::after,
body.checkout-wc ::before,
main.checkoutwc *,
main.checkoutwc ::after,
main.checkoutwc ::before {
  box-sizing: inherit;
  font-size: medium;
}

body.checkout-wc h3,
main.checkoutwc h3 {
  color: #5b6980;
  font-size: 1.25em;
}

#cfw-cart-summary a { color: #fff; }
#order_review { line-height: 30px; }

#cfw-logo-container .cfw-logo .logo {
  display: block;
  height: 4em;
  margin: .75em auto 2em;
  background-position: 50%;
}

#cfw.context-thank-you .title {
  margin-top: 2em;
  margin-bottom: 2em;
}

#cfw.context-thank-you .title .cfw-checkmark {
  float: left;
  width: 48px;
  height: 48px;
  margin-right: .5em;
  stroke: #4a6f38;
}

#cfw.context-thank-you ul.status-steps li.status-step-selected,
#cfw.context-thank-you ul.status-steps li.status-step-selected i {
  color: #4a6f38;
}

#cfw.context-thank-you ul.status-steps li.status-step-selected::before {
  background: #4a6f38;
  z-index: 1;
}

#cfw.context-thank-you section h6 {
  color: #5b6980;
  font-size: 16px;
  font-weight: 400;
  margin-top: .5em;
  margin-bottom: .5em;
}

.cfw-grid .row {
  margin-top: 10px;
  margin-bottom: 20px;
}

body.futurist h3 {
  font-weight: 500;
  margin-bottom: 1em;
  text-transform: uppercase;
}




/* =====================================================================
   6) FORMS / LAYOUT HELPERS
   ===================================================================== */

.form-flat input:not([type="submit"]),
.form-flat select,
.form-flat textarea {
  background-color: transparent;
  border-color: rgba(0, 0, 0, .09);
  border-radius: 0;
  box-shadow: none;
  color: currentColor !important;
}

.container .row:not(.row-collapse),
.lightbox-content .row:not(.row-collapse),
.row .gallery,
.row .row:not(.row-collapse) {
  margin-bottom: 15px;
}

.textq1 { min-height: 210px; }
.textq2 { min-height: 160px; }


/* =====================================================================
   7) SLIDER / GALLERY CONTROLS
   ===================================================================== */

.slider-nav-circle .flickity-prev-next-button .arrow,
.slider-nav-circle .flickity-prev-next-button svg {
  min-width: 50px;
}

.veb-variation-gallery-thumbnail-position-bottom-bottom .veb-variation-gallery-container .iwp-thumbnail-next-arrow,
.veb-variation-gallery-thumbnail-position-bottom-bottom .veb-variation-gallery-container .iwp-thumbnail-prev-arrow {
  width: 50px;
  height: 100%;
}

.veb-variation-gallery-slider-wrapper .iwp-slider-next-arrow,
.veb-variation-gallery-slider-wrapper .iwp-slider-prev-arrow {
  width: 50px;
  height: 50px;
  line-height: 50px;
}


/* =====================================================================
   8) BUTTONS (Modell-Buttons)
   ===================================================================== */

.buttonYuuna,
.buttonLykke,
.buttonEllma,
.buttonDog,
.buttonCargo,
.litebutton,
.crossbutton,
.cabbutton,
.sportbutton {
  color: #fff;
  padding: 12px 22px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  transition: background .2s ease, transform .2s ease;
}

.buttonYuuna,
.buttonCargo { background: #c8a97e; }
.buttonYuuna:hover,
.buttonCargo:hover { background: #b89568; }

.buttonLykke { background: #2f3e4d; }
.buttonLykke:hover { background: #1f2b36; }

.buttonEllma,
.buttonDog { background: #2f5d50; }
.buttonEllma:hover,
.buttonDog:hover { background: #24473d; }

.litebutton { background: #515645; }
.litebutton:hover { background: #3f4435; }

.crossbutton { background: #615542; }
.crossbutton:hover { background: #4e4434; }

.cabbutton { background: #515f69; }
.cabbutton:hover { background: #3f4b53; }

.sportbutton { background: #aa6e28; }
.sportbutton:hover { background: #8e5a20; }

.buttonYuuna:hover,
.buttonLykke:hover,
.buttonEllma:hover,
.buttonDog:hover,
.buttonCargo:hover,
.litebutton:hover,
.crossbutton:hover,
.cabbutton:hover,
.sportbutton:hover { transform: translateY(-2px); }


/* =====================================================================
   9) DESIGN-FUNDAMENT „TRAILHEAD" + Marken-Akzente
   Einzige Quelle der Wahrheit für Farbe. body.brand-* wechselt nur
   --c-primary (das functions.php-Snippet setzt die Klasse automatisch).
   ===================================================================== */

:root {
  --c-ink:         #26211C;
  --c-muted:       #6A6459;
  --c-line:        #D8D2C8;
  --c-sand:        #E9E3D8;
  --c-sand-050:    #F5F3ED;
  --c-ok:          #2E7D57;
  --c-accent:      #C87D2D;
  --c-accent-600:  #B06C22;
  --c-gold:        #E4B15F;

  --c-primary:     #35584B;
  --c-primary-600: #2A4539;

  /* Markenfarben – auch außerhalb von body.brand-* nutzbar */
  --thule:         #35584B;
  --croozer:       #1E3A5F;
  --qeridoo:       #2B2B2B;

  --c-orange:      var(--c-accent);
  --c-text:        var(--c-ink);
  --c-border:      var(--c-line);
  --c-light:       var(--c-sand-050);

  --r: 12px;
  --r-sm: 8px;
  --sh: 0 6px 24px rgba(31, 74, 61, .10);

  /* Ticket-Grün + Gold – zentral für .fa-ticket / .fa-mini / .fa-promo */
  --tik: #20463C;
  --tik2: #1A3A31;
  --gold: var(--c-gold);
}

body.brand-thule   { --c-primary: #35584B; --c-primary-600: #2A4539; }
body.brand-croozer { --c-primary: #1E3A5F; --c-primary-600: #162C48; }
body.brand-qeridoo { --c-primary: #2B2B2B; --c-primary-600: #1C1C1C; }
body.brand-hamax   { --c-primary: #7A2B2B; --c-primary-600: #5E2020; }
body.brand-reacha  { --c-primary: #3E4C4A; --c-primary-600: #2F3A38; }


/* =====================================================================
   10) PRODUKTBESCHREIBUNG · Boarding-Pass (.fa-ticket)
   Schriften über das functions-Snippet (Outfit + Space Mono).
   ===================================================================== */

.fa-ticket {
  --a: #C87D2D; --a6: #B06C22;
  --g: #35584B; --ink: #26211C; --mut: #5C6B62;
  --line: #DBD6C7; --paper: #FBFAF6; --ok: #3E7A5E;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(18px, 3.4vw, 38px);
  color: var(--ink);
  line-height: 1.6;
  font-family: 'Outfit', system-ui, sans-serif;
}
.fa-ticket * { box-sizing: border-box; }
.fa-ticket h1,
.fa-ticket h2,
.fa-ticket h3,
.fa-ticket h4 { font-variant: normal; padding-bottom: 0; margin-top: 0; color: var(--ink); }
.fa-ticket ul { list-style: none !important; margin: 0; padding: 0; }
.fa-ticket table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.fa-ticket summary::-webkit-details-marker { display: none; }
.fa-ticket .mono { font-family: 'Space Mono', ui-monospace, monospace; }

/* Boarding-Pass-Kopf */
.fa-ticket .ticket { display: flex; flex-wrap: wrap; background: var(--tik); border-radius: 14px; overflow: hidden; color: #EDE6D6; box-shadow: 0 14px 34px rgba(20, 50, 40, .28); margin: 0 0 2.6rem; }
.fa-ticket .ticket .main { flex: 1 1 300px; padding: clamp(20px, 3vw, 30px); }
.fa-ticket .ticket .eb { font-family: 'Space Mono', ui-monospace, monospace; font-size: .72rem; letter-spacing: .2em; color: var(--gold); }
.fa-ticket .ticket h1 { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin: .35rem 0 .2rem; color: #fff; }
.fa-ticket .ticket .dek { margin: 0 0 1.1rem; color: #c7d6cd; font-size: .98rem; line-height: 1.55; max-width: 44ch; }
.fa-ticket .ticket .rows { font-family: 'Space Mono', ui-monospace, monospace; font-size: .82rem; }
.fa-ticket .ticket .rows div { display: flex; justify-content: space-between; gap: 14px; padding: .5rem 0; border-bottom: 1px dashed rgba(237, 230, 214, .22); }
.fa-ticket .ticket .rows span:first-child { color: #9db8ac; letter-spacing: .05em; }
.fa-ticket .barcode { display: flex; gap: 2px; align-items: flex-end; height: 32px; margin-top: 16px; }
.fa-ticket .barcode i { width: 2px; background: #EDE6D6; display: block; }
.fa-ticket .ticket .stub { flex: 0 0 172px; position: relative; padding: clamp(20px, 3vw, 26px) 18px; background: var(--tik2); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3px; }
.fa-ticket .ticket .stub::before { content: ""; position: absolute; left: -1px; top: 16px; bottom: 16px; border-left: 2px dashed rgba(237, 230, 214, .4); }
.fa-ticket .ticket .stub .k { font-family: 'Space Mono', ui-monospace, monospace; font-size: .64rem; letter-spacing: .16em; color: #9db8ac; }
.fa-ticket .ticket .stub .big { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: 2rem; line-height: 1; color: var(--gold); margin: .15rem 0; }
.fa-ticket .notch { position: absolute; left: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); }
.fa-ticket .notch.t { top: -8px; }
.fa-ticket .notch.b { bottom: -8px; }

/* Abschnitte */
.fa-ticket .sec { margin: 0 0 2.6rem; }
.fa-ticket .seclabel { display: flex; align-items: center !important; gap: 12px; margin: 0 0 .9rem; }
.fa-ticket .seclabel .no { font-family: 'Space Mono', ui-monospace, monospace; font-size: .72rem; letter-spacing: .14em; color: var(--a6); border: 1px solid var(--line); border-radius: 4px; padding: .2rem .5rem; display: inline-flex; align-items: center; line-height: 1; }
.fa-ticket .seclabel h3 { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: clamp(1.1rem, 2.2vw, 1.35rem); margin: 0 !important; padding: 0 !important; line-height: 1 !important; color: var(--g); }
.fa-ticket .seclabel .rule { flex: 1; height: 1px; background: var(--line); }

.fa-ticket .card { border: 1px solid var(--line); border-radius: 10px; padding: clamp(15px, 2.4vw, 20px); background: #fff; }
.fa-ticket .feat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 820px) { .fa-ticket .feat { grid-template-columns: repeat(4, 1fr); } }
.fa-ticket .feat .f { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: .7rem .8rem; font-weight: 600; font-size: .9rem; }
.fa-ticket .info { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.4rem; padding: .7rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: 'Space Mono', ui-monospace, monospace; font-size: .8rem; color: var(--mut); margin: 0 0 2.6rem; }
.fa-ticket .info span { display: inline-flex; align-items: center; gap: 7px; }
.fa-ticket ul.checks li { padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .98rem; }
.fa-ticket ul.checks li:last-child { border-bottom: 0; }
.fa-ticket .cols { display: flex; flex-wrap: wrap; gap: 14px; }
.fa-ticket .col { flex: 1 1 250px; border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.2rem; background: #fff; }
.fa-ticket .col.in { border-left: 4px solid var(--ok); }
.fa-ticket .col.opt { border-left: 4px solid var(--mut); background: #F7F6F0; }
.fa-ticket .col h4 { font-family: 'Space Mono', ui-monospace, monospace; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .6rem; color: var(--mut); }
.fa-ticket .col ul { font-size: .95rem; }
.fa-ticket .col li { display: flex; gap: 8px; padding: .25rem 0; align-items: flex-start; }
.fa-ticket .col.opt li { color: var(--mut); }
.fa-ticket .tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.fa-ticket .tags span { font-family: 'Space Mono', ui-monospace, monospace; font-size: .82rem; color: var(--g); border: 1px solid var(--line); border-radius: 6px; padding: .3rem .7rem; background: #fff; }
.fa-ticket table.data td { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.fa-ticket table.data td:first-child { font-family: 'Space Mono', ui-monospace, monospace; font-size: .82rem; color: var(--mut); width: 52%; letter-spacing: .03em; }
.fa-ticket .cmp { font-size: .94rem; margin-top: 1.2rem; }
.fa-ticket .cmp th { text-align: left; padding: .45rem .5rem; border-bottom: 2px solid var(--g); }
.fa-ticket .cmp th.k { font-family: 'Outfit', system-ui, sans-serif; color: var(--g); }
.fa-ticket .cmp td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
.fa-ticket .cmp td:first-child { font-family: 'Space Mono', ui-monospace, monospace; font-size: .82rem; color: var(--mut); }
.fa-ticket .note { display: flex; align-items: center; gap: 12px; background: var(--tik); color: #EDE6D6; border-radius: 10px; padding: 14px 16px; margin: 0 0 2.6rem; font-weight: 600; }
.fa-ticket .note strong { color: var(--gold); }
.fa-ticket .pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.fa-ticket .pills span { background: #F7F6F0; border: 1px solid var(--line); border-radius: 8px; padding: .3rem .7rem; font-size: .86rem; }
.fa-ticket details.faq { border: 1px solid var(--line); border-left: 3px solid var(--g); border-radius: 8px; padding: 12px 16px; margin-bottom: 10px; background: #fff; }
.fa-ticket details.faq summary { font-weight: 700; cursor: pointer; list-style: none; font-family: 'Outfit', system-ui, sans-serif; }
.fa-ticket details.faq p { margin: 9px 0 0; color: var(--mut); }
.fa-ticket .gpsr { font-family: 'Space Mono', ui-monospace, monospace; font-size: .78rem; color: var(--mut); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.fa-ticket .gpsr summary { cursor: pointer; list-style: none; }

/* --- Icons ohne Inline-SVG (WP-sicher, per CSS injiziert) --------- */
.fa-ticket .info span::before,
.fa-ticket .feat .f::before,
.fa-ticket .col.in li::before,
.fa-ticket .col.opt li::before,
.fa-ticket .note::before { content: ""; flex: 0 0 auto; background-repeat: no-repeat; background-position: center; background-size: contain; }
.fa-ticket .info span::before { width: 15px; height: 15px; }
.fa-ticket .info span:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2335584B%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpolyline%20points%3D%2712%207%2012%2012%2015%2014%27%2F%3E%3C%2Fsvg%3E"); }
.fa-ticket .info span:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2335584B%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%271%204%201%2010%207%2010%27%2F%3E%3Cpath%20d%3D%27M3.51%2015a9%209%200%201%200%202.13-9.36L1%2010%27%2F%3E%3C%2Fsvg%3E"); }
.fa-ticket .info span:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2335584B%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%27%2F%3E%3C%2Fsvg%3E"); }
.fa-ticket .feat .f::before { width: 19px; height: 19px; }
.fa-ticket .feat .f:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2335584B%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%27%2F%3E%3Cpolyline%20points%3D%279%2012%2011%2014%2015%2010%27%2F%3E%3C%2Fsvg%3E"); }
.fa-ticket .feat .f:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2335584B%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12.89%201.45l8%204A2%202%200%200%201%2022%207.24v9.53a2%202%200%200%201-1.11%201.79l-8%204a2%202%200%200%201-1.79%200l-8-4a2%202%200%200%201-1.1-1.8V7.24a2%202%200%200%201%201.11-1.79l8-4a2%202%200%200%201%201.78%200z%27%2F%3E%3Cpolyline%20points%3D%272.32%206.16%2012%2011%2021.68%206.16%27%2F%3E%3Cline%20x1%3D%2712%27%20y1%3D%2722.76%27%20x2%3D%2712%27%20y2%3D%2711%27%2F%3E%3C%2Fsvg%3E"); }
.fa-ticket .feat .f:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2335584B%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%271%27%20y%3D%273%27%20width%3D%2715%27%20height%3D%2713%27%2F%3E%3Cpolygon%20points%3D%2716%208%2020%208%2023%2011%2023%2016%2016%2016%2016%208%27%2F%3E%3Ccircle%20cx%3D%275.5%27%20cy%3D%2718.5%27%20r%3D%272.5%27%2F%3E%3Ccircle%20cx%3D%2718.5%27%20cy%3D%2718.5%27%20r%3D%272.5%27%2F%3E%3C%2Fsvg%3E"); }
.fa-ticket .feat .f:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2335584B%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2018v-6a9%209%200%200%201%2018%200v6%27%2F%3E%3Cpath%20d%3D%27M21%2019a2%202%200%200%201-2%202h-1a2%202%200%200%201-2-2v-3a2%202%200%200%201%202-2h3zM3%2019a2%202%200%200%200%202%202h1a2%202%200%200%200%202-2v-3a2%202%200%200%200-2-2H3z%27%2F%3E%3C%2Fsvg%3E"); }
.fa-ticket .col.in li::before { width: 17px; height: 17px; margin-top: 8px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%233E7A5E%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2720%206%209%2017%204%2012%27%2F%3E%3C%2Fsvg%3E"); }
.fa-ticket .col.opt li::before { width: 17px; height: 17px; margin-top: 8px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%235C6B62%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cline%20x1%3D%2712%27%20y1%3D%275%27%20x2%3D%2712%27%20y2%3D%2719%27%2F%3E%3Cline%20x1%3D%275%27%20y1%3D%2712%27%20x2%3D%2719%27%20y2%3D%2712%27%2F%3E%3C%2Fsvg%3E"); }
.fa-ticket .note::before { width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23E4B15F%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2013l2-5a2%202%200%200%201%202-1h10a2%202%200%200%201%202%201l2%205v5a1%201%200%200%201-1%201h-1a1%201%200%200%201-1-1v-1H6v1a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1z%27%2F%3E%3Ccircle%20cx%3D%277.5%27%20cy%3D%2715.5%27%20r%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%2715.5%27%20r%3D%271.5%27%2F%3E%3C%2Fsvg%3E"); }


/* =====================================================================
   11) PRODUKTSEITE · Summary & Varianten
   Wirkt nur auf Einzelproduktseiten. Nutzt die --c-* Tokens →
   Akzente folgen automatisch der Marke.
   ===================================================================== */

/* --- Titel: Outfit statt Small-Caps ------------------------------- */
.single-product .product-title,
.single-product .product_title {
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-variant: normal !important;
  color: var(--c-ink) !important;
  letter-spacing: -.01em;
  padding-bottom: .35rem;
}
.single-product .product-title-container .is-divider,
.single-product .product-title + .is-divider {
  height: 3px !important;
  width: 56px;
  max-width: 56px;
  margin: .15rem 0 .2rem;
  border-radius: 2px;
  background: var(--c-accent);
}

/* --- Aktives Galerie-Thumbnail: dünne Gold-Linie unten ------------ */
.single-product .is-nav-selected,
.single-product .product-thumbnails .is-nav-selected,
.single-product .iwp-thumbnail.active,
.single-product .iwp-thumbnail.iwp-active,
.single-product .veb-variation-gallery-thumbnail.active {
  box-shadow: inset 0 -3px 0 var(--c-gold) !important;
}

/* --- Preis mit Mono-Label ----------------------------------------- */
.single-product p.price {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--c-ink) !important;
  line-height: 1.15;
}
.single-product p.price .amount { color: var(--c-ink) !important; }
.single-product p.price::before {
  content: "PREIS";
  display: block;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .62rem;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--c-muted);
  margin-bottom: 3px;
}
.single-product p.price del .amount { opacity: .5; font-weight: 400; }
.single-product p.price ins { text-decoration: none; }

/* --- Mengenfeld ---------------------------------------------------- */
.single-product .quantity .qty {
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: #fff;
}

/* --- Datenblatt-Trenner + Warenkorb-CTA --------------------------- */
.single-product form.cart {
  border-top: 1px dashed var(--c-line);
  padding-top: 1rem;
  margin-top: 1rem;
}
.single-product .single_add_to_cart_button,
.single-product .single_add_to_cart_button.button {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  color: #fff !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  letter-spacing: .01em;
  box-shadow: 0 6px 16px rgba(200, 125, 45, .25);
  transition: background .18s ease, transform .18s ease;
}
.single-product .single_add_to_cart_button:hover {
  background: var(--c-accent-600) !important;
  border-color: var(--c-accent-600) !important;
  transform: translateY(-1px);
}

/* --- SKU / Meta dezent im Mono-Stil ------------------------------- */
.single-product .product_meta {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .75rem;
  color: var(--c-muted);
  border-top: 1px dashed var(--c-line);
  padding-top: .8rem;
  margin-top: 1rem;
}

/* --- EAN-Zeile im Produkt-Meta (functions.php Abschnitt 13) ------- */
.single-product .product_meta .kw-ean-wrap {
  display: block;
  margin-top: .2rem;
}
.single-product .product_meta .kw-ean-wrap.is-leer {
  display: none;
}

/* --- Varianten-Auswahl (ivpa): neutral, gewählter Term hervorgehoben
   Einheitlich für ALLE Attribute inkl. Farbe. --------------------- */
.single-product #ivpa-content .ivpa_title {
  font-family: 'Space Mono', ui-monospace, monospace !important;
  font-size: .7rem !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted) !important;
  margin-top: 1rem !important;
}
.single-product #ivpa-content .ivpa_term {
  position: relative;
  border: 1px solid var(--c-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--c-ink) !important;
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.single-product #ivpa-content .ivpa_term:hover {
  border-color: var(--c-primary) !important;
}
.single-product #ivpa-content .ivpa_term.ivpa_clicked {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .20) !important;
}
.single-product #ivpa-content .ivpa_term.ivpa_clicked::after {
  content: "";
  position: absolute;
  top: -9px;
  right: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--c-accent);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}


/* =====================================================================
   12) BAUSTEINE (Kurzbeschreibung · Boxen · Aktion)
   ===================================================================== */

/* --- Mini-Ticket (fürs Kurzbeschreibungs-Feld) -------------------- */
.fa-mini { display: flex; align-items: stretch; background: var(--tik); border-radius: 10px; overflow: hidden; color: #EDE6D6; box-shadow: 0 8px 20px rgba(20, 50, 40, .18); margin: 0 0 6px; }
.fa-mini .m-main { flex: 1; padding: 12px 14px; }
.fa-mini .m-main .k { font-family: 'Space Mono', ui-monospace, monospace; font-size: .62rem; letter-spacing: .16em; color: var(--gold); }
.fa-mini .m-main .d { font-size: .9rem; line-height: 1.45; margin-top: 3px; color: #dcece2; }
.fa-mini .m-stub { flex: 0 0 82px; position: relative; background: var(--tik2); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.fa-mini .m-stub::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; border-left: 2px dashed rgba(237, 230, 214, .4); }
.fa-mini .m-stub b { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: 1.2rem; line-height: 1; color: var(--gold); }
.fa-mini .m-stub small { font-family: 'Space Mono', ui-monospace, monospace; font-size: .55rem; letter-spacing: .1em; color: #9db8ac; margin-top: 3px; }

/* --- Hinweis-Streifen --------------------------------------------- */
.fa-hint { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--c-line); border-left: 4px solid var(--c-accent); border-radius: 10px; background: var(--c-sand-050); padding: 12px 14px; margin: 0 0 6px; }
.fa-hint svg { flex: 0 0 auto; color: var(--c-accent-600); margin-top: 2px; }
.fa-hint .k { font-family: 'Space Mono', ui-monospace, monospace; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--c-accent-600); }
.fa-hint .d { font-size: .9rem; line-height: 1.45; color: var(--c-ink); margin-top: 2px; }

/* --- Service-Boxen ------------------------------------------------- */
.fa-trust { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.fa-trust .t { flex: 1 1 240px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--c-line); border-radius: 12px; padding: 18px 20px; background: #fff; }
.fa-trust .t .ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 11px; background: var(--c-sand-050); border: 1px solid var(--c-line); display: flex; align-items: center; justify-content: center; color: var(--c-primary); }
.fa-trust .t .k { font-family: 'Space Mono', ui-monospace, monospace; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.fa-trust .t .d { font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 1rem; color: var(--c-ink); margin-top: 2px; font-variant: normal; }
.fa-trust .t .sub { font-size: .82rem; color: var(--c-muted); margin-top: 3px; line-height: 1.45; }

/* --- Aktions-Banner ------------------------------------------------ */
.fa-promo { display: flex; flex-wrap: wrap; background: var(--tik); border-radius: 14px; overflow: hidden; color: #EDE6D6; box-shadow: 0 14px 34px rgba(20, 50, 40, .20); font-family: 'Outfit', system-ui, sans-serif; }
.fa-promo .p-stub { flex: 0 0 160px; position: relative; background: var(--tik2); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 14px; gap: 2px; }
.fa-promo .p-stub::before { content: ""; position: absolute; right: -1px; top: 16px; bottom: 16px; border-right: 2px dashed rgba(237, 230, 214, .4); }
.fa-promo .p-stub .big { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--gold); }
.fa-promo .p-stub .lab { font-family: 'Space Mono', ui-monospace, monospace; font-size: .62rem; letter-spacing: .16em; color: #9db8ac; }
.fa-promo .p-main { flex: 1 1 320px; padding: 22px 26px; }
.fa-promo .p-main .eb { font-family: 'Space Mono', ui-monospace, monospace; font-size: .7rem; letter-spacing: .18em; color: var(--gold); }
.fa-promo .p-main h3 { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: #fff; margin: .3rem 0 .6rem; font-variant: normal; padding: 0; }
.fa-promo .p-main p { margin: 0 0 .7rem; color: #cfe0d7; line-height: 1.6; font-size: .95rem; }
.fa-promo .p-main p.fine { font-size: .82rem; color: #9db8ac; margin-bottom: 0; }


/* =====================================================================
   13) TAB 2 · MODELLBERATUNG (.kb-*)
   ===================================================================== */

.fa-ticket .kb-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; background: var(--tik); color: #EDE6D6; border-radius: 12px; padding: 22px 24px; margin: 0 0 1.4rem; }
.fa-ticket .kb-hero .kb-eb { font-family: 'Space Mono', ui-monospace, monospace; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.fa-ticket .kb-hero h3 { color: #fff; margin: .3rem 0 .4rem; font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: clamp(1.15rem, 2.4vw, 1.5rem); }
.fa-ticket .kb-hero p { color: #cfe0d7; margin: 0; max-width: 54ch; font-size: .95rem; line-height: 1.55; }
.fa-ticket .kb-btn { flex: 0 0 auto; background: var(--a); color: #fff; font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; border-radius: 10px; padding: .75rem 1.3rem; text-decoration: none; white-space: nowrap; box-shadow: 0 6px 16px rgba(200, 125, 45, .28); transition: background .18s ease, transform .18s ease; }
.fa-ticket .kb-btn:hover { background: var(--a6); transform: translateY(-1px); }
.fa-ticket .kb-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fa-ticket .kb-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; color: var(--ink); font-weight: 600; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.fa-ticket .kb-links a:hover { border-color: var(--g); color: var(--g); }
.fa-ticket .kb-links a::after { content: "→"; color: var(--a); font-weight: 700; }
@media (max-width: 560px) { .fa-ticket .kb-links { grid-template-columns: 1fr; } }


/* =====================================================================
   14) MODELLVERGLEICH (.mv Tabelle · .mvchar Charakterbogen)
   ===================================================================== */

.mv { overflow-x: auto; border: 1px solid var(--c-line); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px rgba(20, 50, 60, .08); }
.mv table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 660px; }
.mv th, .mv td { padding: .75rem .8rem; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: middle; }
.mv thead th { background: var(--c-primary); color: #fff; font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-variant: normal; border-bottom: 0; }
.mv thead th:first-child { background: var(--c-primary-600); }
.mv tbody td:first-child { font-family: 'Space Mono', ui-monospace, monospace; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); white-space: nowrap; }
.mv tr.best td { background: var(--c-sand-050); }
.mv tr.best td:not(:first-child) { font-weight: 700; color: var(--c-primary); }
.mv tr.price td:not(:first-child) { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; }
.mv .yes { color: var(--c-ok); font-weight: 700; }
.mv .no { color: #b4ada0; }
.mv tr.cta td { padding-top: .9rem; padding-bottom: .9rem; }
.mv tr.cta a { display: inline-block; background: var(--c-accent); color: #fff; font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; border-radius: 8px; padding: .45rem .8rem; font-size: .82rem; text-decoration: none; }
.mv tr.cta a:hover { background: var(--c-accent-600); }
.mv-intro h3 { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-variant: normal; padding-bottom: 0; color: var(--c-ink); margin: 0 0 .2rem; font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.mv-intro p { color: var(--c-muted); margin: 0 0 1rem; }

.mvchar { background: #1d2430; border: 1px solid #3a4658; border-radius: 14px; padding: 18px 20px; color: #cdd6e2; max-width: 440px; font-family: 'Outfit', system-ui, sans-serif; }
.mvchar .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.mvchar .nm { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; color: #fff; font-size: 1.15rem; }
.mvchar .cls { font-family: 'Space Mono', ui-monospace, monospace; font-size: .62rem; letter-spacing: .08em; color: #0f1620; background: var(--c-accent); border-radius: 4px; padding: .22rem .55rem; font-weight: 700; }
.mvchar .st { display: flex; align-items: center; gap: 10px; margin: .4rem 0; font-size: .84rem; }
.mvchar .st .l { width: 104px; color: #9fb0c4; }
.mvchar .bar { flex: 1; height: 12px; background: #3a4a5f; border-radius: 6px; overflow: hidden; }
.mvchar .bar > span { display: block; height: 100%; background: #5fd08a; }
.mvchar .foot { margin-top: 14px; padding-top: 11px; border-top: 1px solid #2b3646; display: flex; justify-content: space-between; font-size: .82rem; color: #9fb0c4; }
.mvchar .foot b { color: var(--c-accent); font-family: 'Outfit', system-ui, sans-serif; }
.mvchar .mvbtn { display: block; text-align: center; margin-top: 12px; background: var(--c-accent); color: #fff; border-radius: 8px; padding: .55rem; font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; text-decoration: none; font-size: .85rem; }
.mvchar .mvbtn:hover { background: var(--c-accent-600); }

.mvgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 600px) { .mvgrid { grid-template-columns: 1fr; } }


/* =====================================================================
   16) MARKEN-HERO mit Tabs (CSS-only Umschalter)
   ===================================================================== */

.herotabs { background: linear-gradient(135deg, #20463C 0%, #163026 55%, #12241C 100%); border-radius: 16px; padding: clamp(22px, 3.5vw, 40px); overflow: hidden; }
.herotabs > input { position: absolute; opacity: 0; pointer-events: none; }
.herotabs .tabbar { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1120px; margin: 0 auto 24px; }
.herotabs .tabbar label { font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: .9rem; color: #c7d6cd; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: .5rem 1.15rem; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.herotabs .tabbar label:hover { color: #fff; }
.herotabs .panel { display: none; }
.herotabs #ht-thule:checked ~ .panels .p-thule,
.herotabs #ht-croozer:checked ~ .panels .p-croozer,
.herotabs #ht-qeridoo:checked ~ .panels .p-qeridoo { display: block; }
.herotabs #ht-thule:checked ~ .tabbar label[for="ht-thule"],
.herotabs #ht-croozer:checked ~ .tabbar label[for="ht-croozer"],
.herotabs #ht-qeridoo:checked ~ .tabbar label[for="ht-qeridoo"] { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }


/* =====================================================================
   17) MEGA-MENÜ · MODELL-NAVIGATION (.tm-*)
   Markenfarbe je Block über style="--tm:#…" am .tm-nav setzen.
   ===================================================================== */

.tm-head { margin: 0 0 9px; font-family: 'Space Mono', ui-monospace, monospace; font-size: 14px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: #20463C; line-height: 1.5; }
.tm-rule { width: 38px; height: 4px; background: var(--c-gold); margin: 0 0 22px; }

.tm-nav { --tm: #20463C; display: flex; flex-direction: column; }
.tm-nav a { position: relative; display: block; padding: 15px 30px 15px 4px; border-bottom: 1px solid #EDEAE0; text-decoration: none; transition: transform .22s, border-color .22s; }
.tm-nav a::after { content: "→"; position: absolute; right: 8px; top: 50%; transform: translate(-6px, -50%); font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--tm); opacity: 0; transition: opacity .22s, transform .22s; }
.tm-nav a strong { display: block; font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: 1rem; color: var(--tm); line-height: 1.3; }
.tm-nav a span { display: block; font-family: 'Space Mono', ui-monospace, monospace; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: #5C6B62; margin-top: 5px; }
.tm-nav a:hover { transform: translateX(4px); border-bottom-color: var(--tm); text-decoration: none; }
.tm-nav a:hover::after { opacity: 1; transform: translate(0, -50%); }
.tm-nav a.is-active { border-bottom-color: var(--tm); }
.tm-nav a.is-active::after { opacity: 1; transform: translate(0, -50%); }

.tm-nav .tm-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; padding: 0; border: 0; border-bottom: 2px solid transparent; font-family: 'Space Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tm); transition: border-color .22s, gap .22s; }
.tm-nav .tm-all::after { content: none; }
.tm-nav .tm-all:hover { transform: none; border-bottom-color: var(--c-gold); gap: 10px; }
.tm-nav .tm-all i { font-style: normal; }

.tm-foot { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; padding-top: 22px; border-top: 1px solid #EDEAE0; }
.tm-foot a { position: relative; font-family: 'Space Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #20463C; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .2s; }
.tm-foot a:hover { border-color: var(--c-gold); text-decoration: none; }
.tm-foot a:not(:last-child)::after { content: "•"; position: absolute; right: -13px; color: #C3BFB2; font-weight: 700; pointer-events: none; }


/* =====================================================================
   18) BADGE-LEISTE (.kw-bb)
   ===================================================================== */

.kw-bb { display: grid; grid-template-columns: repeat(4, 1fr); background: #20463C; margin: 0 0 22px; }
.kw-bb .b { display: flex; align-items: center; gap: 14px; padding: 19px 22px; border-right: 1px solid rgba(237, 230, 214, .15); }
.kw-bb .b:last-child { border-right: 0; }
.kw-bb .b::before { content: ""; flex: 0 0 auto; width: 28px; height: 28px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.kw-bb .b span { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 40px; }
.kw-bb .b strong { display: block; font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: #fff; line-height: 1.3; }
.kw-bb .b em { display: block; font-style: normal; font-family: 'Space Mono', ui-monospace, monospace; font-size: .6rem; letter-spacing: .07em; color: #9db8ac; margin-top: 3px; line-height: 1.35; }
@media (max-width: 900px) {
  .kw-bb { grid-template-columns: repeat(2, 1fr); }
  .kw-bb .b:nth-child(2n) { border-right: 0; }
  .kw-bb .b:nth-child(-n+2) { border-bottom: 1px solid rgba(237, 230, 214, .15); }
}
@media (max-width: 520px) {
  .kw-bb { grid-template-columns: 1fr; }
  .kw-bb .b { border-right: 0; border-bottom: 1px solid rgba(237, 230, 214, .15); }
  .kw-bb .b:last-child { border-bottom: 0; }
}

/* Icons: 1 Schild+Haken · 2 Paket · 3 LKW · 4 Headset */
.kw-bb .b:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23E4B15F%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%27%2F%3E%3Cpolyline%20points%3D%279%2012%2011%2014%2015%2010%27%2F%3E%3C%2Fsvg%3E"); }
.kw-bb .b:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23E4B15F%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12.89%201.45l8%204A2%202%200%200%201%2022%207.24v9.53a2%202%200%200%201-1.11%201.79l-8%204a2%202%200%200%201-1.79%200l-8-4a2%202%200%200%201-1.1-1.8V7.24a2%202%200%200%201%201.11-1.79l8-4a2%202%200%200%201%201.78%200z%27%2F%3E%3Cpolyline%20points%3D%272.32%206.16%2012%2011%2021.68%206.16%27%2F%3E%3Cline%20x1%3D%2712%27%20y1%3D%2722.76%27%20x2%3D%2712%27%20y2%3D%2711%27%2F%3E%3C%2Fsvg%3E"); }
.kw-bb .b:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23E4B15F%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%271%27%20y%3D%273%27%20width%3D%2715%27%20height%3D%2713%27%2F%3E%3Cpolygon%20points%3D%2716%208%2020%208%2023%2011%2023%2016%2016%2016%2016%208%27%2F%3E%3Ccircle%20cx%3D%275.5%27%20cy%3D%2718.5%27%20r%3D%272.5%27%2F%3E%3Ccircle%20cx%3D%2718.5%27%20cy%3D%2718.5%27%20r%3D%272.5%27%2F%3E%3C%2Fsvg%3E"); }
.kw-bb .b:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23E4B15F%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2018v-6a9%209%200%200%201%2018%200v6%27%2F%3E%3Cpath%20d%3D%27M21%2019a2%202%200%200%201-2%202h-1a2%202%200%200%201-2-2v-3a2%202%200%200%201%202-2h3zM3%2019a2%202%200%200%200%202%202h1a2%202%200%200%200%202-2v-3a2%202%200%200%200-2-2H3z%27%2F%3E%3C%2Fsvg%3E"); }


/* =====================================================================
   19) PROFIL-FILTER (.kw-pf)
   Leichtigkeit · Komfort · Gelände/Sport · Ausstattung
   ===================================================================== */

.kw-pf { border: 1px solid var(--c-line); background: #fff; margin: 0 0 36px; }
.kw-pf-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.kw-pf-axis { padding: 22px 24px 24px; border-right: 1px solid var(--c-line); }
.kw-pf-axis:last-child { border-right: 0; }
@media (max-width: 900px) {
  .kw-pf-grid { grid-template-columns: repeat(2, 1fr); }
  .kw-pf-axis:nth-child(2n) { border-right: 0; }
  .kw-pf-axis:nth-child(-n+2) { border-bottom: 1px solid var(--c-line); }
}
@media (max-width: 540px) {
  .kw-pf-grid { grid-template-columns: 1fr; }
  .kw-pf-axis { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .kw-pf-axis:last-child { border-bottom: 0; }
}

.kw-pf-label { display: flex; align-items: center; gap: 10px; font-family: 'Space Mono', ui-monospace, monospace; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink); margin: 0 0 14px; }
.kw-pf-label::before { content: ""; flex: 0 0 auto; width: 3px; height: 15px; background: var(--c-accent); }
.kw-pf-val { font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 1rem; color: var(--c-ink); margin: 0 0 14px; min-height: 24px; }
.kw-pf-val em { font-style: normal; font-weight: 400; color: var(--c-muted); }

.kw-pf-range { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; display: block; margin: 0; cursor: pointer; }
.kw-pf-range:focus { outline: none; }
.kw-pf-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(var(--c-primary), var(--c-primary)) no-repeat left center/var(--fill, 0%) 4px, linear-gradient(var(--c-line), var(--c-line)) no-repeat center/100% 4px; }
.kw-pf-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--c-line); }
.kw-pf-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--c-primary); }
.kw-pf-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--c-primary); border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transition: background .18s, transform .18s; }
.kw-pf-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--c-primary); border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.kw-pf-axis.on .kw-pf-range::-webkit-slider-thumb { background: var(--c-accent); transform: scale(1.08); }
.kw-pf-axis.on .kw-pf-range::-moz-range-thumb { background: var(--c-accent); }

.kw-pf-ticks { display: flex; justify-content: space-between; margin: 4px 0 0; }
.kw-pf-ticks span { font-family: 'Space Mono', ui-monospace, monospace; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: #A9A296; transition: color .18s; flex: 1; text-align: center; }
.kw-pf-ticks span:first-child { text-align: left; }
.kw-pf-ticks span:last-child { text-align: right; }
.kw-pf-ticks span.on { color: var(--c-primary); font-weight: 700; }

.kw-pf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 24px; border-top: 1px solid var(--c-line); background: var(--c-sand-050); }
.kw-pf-go { font-family: 'Space Mono', ui-monospace, monospace; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink); background: #fff; border: 1px solid var(--c-line); border-radius: 2px; padding: .72rem 1.6rem; cursor: pointer; transition: background .18s, border-color .18s, color .18s; }
.kw-pf-go:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.kw-pf-reset { font-family: 'Space Mono', ui-monospace, monospace; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.kw-pf-reset:hover { color: var(--c-ink); border-color: var(--c-accent); }

/* Container für Badges + Filter unter den Breadcrumbs */
.kw-toprow { margin: 18px 0 26px; }
.kw-toprow .kw-bb { margin-bottom: 18px; }
.kw-toprow .kw-pf { margin-bottom: 0; }


/* =====================================================================
   20) SHOP-ARCHIV (Ergebniszähler aus · Produkte pro Seite)
   ===================================================================== */

.woocommerce-result-count { display: none !important; }

.kw-ppp {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  clear: both;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.kw-ppp label {
  flex: 0 0 auto;
  margin: 0;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1;
}
.kw-ppp select {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 82px;
  max-width: 120px;
  height: auto !important;
  margin: 0 !important;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: .9rem;
  line-height: 1.2;
  color: var(--c-ink);
  background-color: #fff;
  border: 1px solid var(--c-line);
  border-radius: 2px;
  box-shadow: none;
  padding: .5rem 2rem .5rem .8rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6459' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 14px;
}
.kw-ppp select:hover,
.kw-ppp select:focus { border-color: var(--c-accent); outline: none; }


/* =====================================================================
   21) ZUBEHÖR-FILTER (.kw-af)  ·  Bereich · Zubehörart
   Ausgerichtete Optionsliste, Zähler rechtsbündig.
   Spalte 2 läuft zweispaltig (.kw-af-opts--2).
   ===================================================================== */

.kw-af{border:1px solid var(--c-line);background:#fff;margin:0 0 30px}
.kw-af-grid{display:grid;grid-template-columns:minmax(200px,1fr) 2fr}
.kw-af-col{padding:24px 28px;border-right:1px solid var(--c-line)}
.kw-af-col:last-child{border-right:0}
@media(max-width:700px){
  .kw-af-grid{grid-template-columns:1fr}
  .kw-af-col{border-right:0;border-bottom:1px solid var(--c-line)}
  .kw-af-col:last-child{border-bottom:0}
}

.kw-af-label{display:flex;align-items:center;gap:10px;font-family:'Space Mono',ui-monospace,monospace;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink);margin:0 0 14px}
.kw-af-label::before{content:"";flex:0 0 auto;width:3px;height:14px;background:var(--c-accent)}

.kw-af-opts{display:grid;gap:2px}
.kw-af-opts--2{grid-template-columns:1fr 1fr;gap:2px 26px}
@media(max-width:700px){.kw-af-opts--2{grid-template-columns:1fr}}

.kw-af-opt{display:flex;align-items:center;gap:10px;margin:0;padding:7px 0;cursor:pointer;font-size:.9rem;line-height:1.3;color:var(--c-ink);border-bottom:1px solid #F0EDE6;transition:color .15s}
.kw-af-opt:hover{color:var(--c-primary)}
.kw-af-opt input{position:absolute;opacity:0;width:0;height:0}
.kw-af-opt .bx{flex:0 0 auto;width:16px;height:16px;border:1px solid var(--c-line);background:#fff;border-radius:2px;position:relative;transition:background .15s,border-color .15s}
.kw-af-opt:hover .bx{border-color:var(--c-accent)}
.kw-af-opt input:checked + .bx{background:var(--c-primary);border-color:var(--c-primary)}
.kw-af-opt input:checked + .bx::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.kw-af-opt .tx{flex:1;min-width:0}
.kw-af-opt input:checked ~ .tx{font-weight:600;color:var(--c-primary)}
.kw-af-opt .nm{flex:0 0 auto;font-family:'Space Mono',ui-monospace,monospace;font-size:.66rem;color:var(--c-muted)}
.kw-af-opt.off{opacity:.38;cursor:default}

.kw-af-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:15px 28px;border-top:1px solid var(--c-line);background:var(--c-sand-050)}
.kw-af-go{font-family:'Space Mono',ui-monospace,monospace;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink);background:#fff;border:1px solid var(--c-line);border-radius:2px;padding:.66rem 1.5rem;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.kw-af-go:hover{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.kw-af-reset{font-family:'Space Mono',ui-monospace,monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.kw-af-reset:hover{color:var(--c-ink);border-color:var(--c-accent)}


/* =====================================================================
   22) KAUFBERATUNG (.vb-* / .kb-*)
   Anhänger-Finder: Markenband + Regler, darunter die Kaufkriterien.
   Ausgabe über den Shortcode [kw_kaufberatung].
   Ohne JavaScript bleiben alle Modelle der ersten Marke sichtbar.
   ===================================================================== */

.kb-root p:empty{display:none;margin:0}

.vb{--bc:var(--thule);margin:0 0 52px}
.vb[data-brand="croozer"]{--bc:var(--croozer)}
.vb[data-brand="qeridoo"]{--bc:var(--qeridoo)}

.vb-eb{display:block;font-family:'Space Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-accent-600);margin:0 0 6px}
.vb-h{font-family:'Outfit',system-ui,sans-serif;font-weight:800;font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0 0 .4rem;color:var(--c-ink);font-variant:normal;padding:0}
.vb-lead{color:var(--c-muted);max-width:66ch;margin:0 0 22px}

/* Markenband */
.vb-tabs{display:flex;border-radius:10px 10px 0 0;overflow:hidden}
.vb-tab{flex:1;border:0;cursor:pointer;margin:0;padding:15px 12px;font-family:'Outfit',system-ui,sans-serif;font-weight:700;font-size:.95rem;color:rgba(255,255,255,.66);transition:background .2s,color .2s}
.vb-tab i{font-style:normal;font-family:'Space Mono',ui-monospace,monospace;font-size:.62rem;opacity:.8;margin-left:5px}
.vb-tab[data-brand="thule"]{background:#5b7268}
.vb-tab[data-brand="croozer"]{background:#4a5d75}
.vb-tab[data-brand="qeridoo"]{background:#585858}
.vb-tab[data-brand="thule"].is-active{background:var(--thule);color:#fff}
.vb-tab[data-brand="croozer"].is-active{background:var(--croozer);color:#fff}
.vb-tab[data-brand="qeridoo"].is-active{background:var(--qeridoo);color:#fff}

.vb-box{border:1px solid var(--c-line);border-top:0;border-radius:0 0 10px 10px;overflow:hidden}

/* Regler */
.vb-ctrl{display:flex;flex-wrap:wrap;gap:20px 30px;padding:22px 24px 24px;background:var(--c-sand-050);border-bottom:1px solid var(--c-line)}
.vb-ax{flex:1 1 200px;min-width:170px}
.vb-axh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.vb-axh .n{font-family:'Outfit',system-ui,sans-serif;font-weight:700;font-size:.88rem;color:var(--c-ink)}
.vb-axh .v{font-family:'Space Mono',ui-monospace,monospace;font-size:.64rem;color:var(--c-accent-600)}
.vb-s{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;display:block;margin:0;cursor:pointer}
.vb-s:focus{outline:none}
.vb-s::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(var(--bc),var(--bc)) no-repeat left center/var(--fill,0%) 4px,linear-gradient(var(--c-line),var(--c-line)) no-repeat center/100% 4px}
.vb-s::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;margin-top:-6.5px;border-radius:50%;background:var(--bc);border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.3);transition:transform .15s}
.vb-s:active::-webkit-slider-thumb{transform:scale(1.15)}
.vb-s::-moz-range-track{height:4px;border-radius:2px;background:var(--c-line)}
.vb-s::-moz-range-progress{height:4px;border-radius:2px;background:var(--bc)}
.vb-s::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--bc);border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.3)}
.vb-ticks{display:flex;justify-content:space-between;font-family:'Space Mono',ui-monospace,monospace;font-size:.56rem;letter-spacing:.04em;text-transform:uppercase;color:#A9A296;margin-top:1px}

/* Modellzeilen */
.vb-panel{display:none}
/* ohne JavaScript: erste Marke sichtbar. Mit JavaScript: nur die aktive.
   Die :not(.vb-js)-Bedingung verhindert, dass sich beide Regeln in die Quere kommen. */
.vb:not(.vb-js) .vb-panels > .vb-panel:first-child{display:block}
.vb-js .vb-panel.is-active{display:block}

.vb-row{display:grid;grid-template-columns:1fr 230px 100px;gap:18px;align-items:center;padding:14px 22px;border-bottom:1px solid #F0EDE6;text-decoration:none;color:inherit;transition:opacity .25s,filter .25s,background .18s}
.vb-row:last-child{border-bottom:0}
.vb-row:hover{background:var(--c-sand-050)}
.vb-row.is-off{opacity:.26;filter:grayscale(1);pointer-events:none}
.vb-nm b{display:block;font-family:'Outfit',system-ui,sans-serif;font-weight:800;font-size:1rem;color:var(--bc);line-height:1.25}
.vb-nm span{display:block;font-family:'Space Mono',ui-monospace,monospace;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);margin-top:2px}
.vb-bars{display:block}
.vb-bl{display:flex;align-items:center;gap:8px;margin:3px 0}
.vb-bl .l{flex:0 0 auto;width:76px;font-family:'Space Mono',ui-monospace,monospace;font-size:.54rem;letter-spacing:.04em;text-transform:uppercase;color:var(--c-muted)}
.vb-bl .t{flex:1;height:6px;background:var(--c-sand);border-radius:3px;overflow:hidden;display:block}
.vb-bl .t i{display:block;height:100%;background:var(--bc)}
.vb-pr{text-align:right;font-family:'Outfit',system-ui,sans-serif;font-weight:800;font-size:.92rem;color:var(--c-ink)}
@media(max-width:720px){.vb-row{grid-template-columns:1fr;gap:10px}.vb-pr{text-align:left}}

.vb-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 18px;padding:14px 22px;background:#fff;border-top:1px solid var(--c-line)}
.vb-hint{font-family:'Space Mono',ui-monospace,monospace;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}
.vb-hint b{color:var(--bc);font-size:.8rem}
.vb-more{font-family:'Space Mono',ui-monospace,monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink);text-decoration:none;border-bottom:2px solid var(--c-gold);padding-bottom:1px}

/* --- Kaufkriterien --- */
.kb-eb{font-family:'Space Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-accent-600);margin:0 0 6px}
.kb-h{font-family:'Outfit',system-ui,sans-serif;font-weight:800;font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0 0 .5rem;color:var(--c-ink);font-variant:normal;padding:0}
.kb-rule{width:44px;height:4px;background:var(--c-gold);margin:0 0 20px}
.kb-lead{color:var(--c-muted);max-width:66ch;margin:0 0 26px}
.kb-grp{font-family:'Space Mono',ui-monospace,monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted);margin:30px 0 12px;display:flex;align-items:center;gap:12px}
.kb-grp::after{content:"";flex:1;height:1px;background:var(--c-line)}
.kb-grp:first-of-type{margin-top:0}
.kb-crit details{border:1px solid var(--c-line);margin-bottom:8px;background:#fff}
.kb-crit summary{cursor:pointer;list-style:none;padding:15px 18px;font-family:'Outfit',system-ui,sans-serif;font-weight:700;font-size:.98rem;color:var(--c-ink);display:flex;align-items:center;gap:12px}
.kb-crit summary::-webkit-details-marker{display:none}
.kb-crit summary::before{content:"";width:3px;height:16px;background:var(--c-accent);flex:0 0 auto}
.kb-crit summary::after{content:"+";margin-left:auto;font-family:'Outfit',system-ui,sans-serif;color:var(--c-accent);font-weight:800;font-size:1.1rem;line-height:1}
.kb-crit details[open] summary::after{content:"–"}
.kb-crit details[open] summary{border-bottom:1px solid #F0EDE6}
.kb-crit .c{padding:14px 18px 18px 33px;font-size:.91rem;color:var(--c-muted)}
.kb-crit .c p{margin:0 0 10px}
.kb-crit .c p:last-child{margin-bottom:0}
.kb-crit .c ul{margin:0 0 10px;padding:0;list-style:none}
.kb-crit .c li{padding:4px 0 4px 18px;position:relative}
.kb-crit .c li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;background:var(--c-gold)}
.kb-tip{border-left:3px solid var(--c-primary);background:var(--c-sand-050);padding:11px 14px;margin:12px 0 0;font-size:.87rem}
.kb-tip b{font-family:'Space Mono',ui-monospace,monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:3px;color:var(--c-primary)}


/* =====================================================================
   23) VARIANTEN-AUSWAHL (ivpa)
   23a Farbe · Farbfeld seitlich, Name auf Weiß
   23b Übrige Attribute · gleiches Raster, Häkchen im linken Feld
   Ersetzt die alte Fassung mit Text auf der Farbfläche.
   Steht bewusst am Ende, weil es Abschnitt 11 überschreibt, weil es dessen Einfärbung der
   gewählten Kachel für pa_farbe gezielt aufhebt.
   Kommentar "pruefen" = zwei-/mehrfarbig oder genähert, bitte gegen
   die Produktfotos abgleichen.
   ===================================================================== */

/* --- Grundform: weiße Kachel, Farbfeld links, Name daneben -------- */
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term {
  position: relative;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: .5rem 1rem .5rem calc(40px + .9rem) !important;
  background: #fff !important;
  color: var(--c-ink) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 4px !important;
  overflow: hidden;
  font-size: .9rem !important;
  font-weight: 500 !important;
  line-height: 1.3;
  text-shadow: none !important;
  transform: none !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}

/* Farbfeld – die eigentliche Produktfarbe */
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 40px;
  background: var(--sw, #ccc);
  border-right: 1px solid rgba(0, 0, 0, .10);
}

.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term:hover {
  border-color: var(--c-muted) !important;
}

/* Gewählt: kräftiger Rahmen statt Voll-Einfärbung */
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term.ivpa_clicked {
  background: #fff !important;
  color: var(--c-ink) !important;
  border-color: var(--c-ink) !important;
  box-shadow: 0 0 0 1px var(--c-ink) !important;
  font-weight: 700 !important;
  transform: none !important;
}

/* Häkchen sitzt im Farbfeld, nicht als Badge außen
   (überschreibt das Badge aus Abschnitt 11) */
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term.ivpa_clicked::after {
  content: "" !important;
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  width: 7px !important;
  height: 13px !important;
  margin: -9px 0 0 -4px !important;
  border: solid var(--tx, #fff) !important;
  border-width: 0 2.5px 2.5px 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: rotate(45deg) !important;
}

/* --- Farbwerte je Term -------------------------------------------
   --sw = Farbfeld, --tx = Häkchenfarbe darauf
   ------------------------------------------------------------------ */
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="alu-black"] { --sw: #3a3d40; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="aluminium"] { --sw: #a8abae; --tx: #26211C; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="aluminium-schwarz"] { --sw: linear-gradient(135deg,#a8abae 0 50%,#242424 50% 100%); --tx: #fff; }  /* pruefen */
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="barista-brown"] { --sw: #6f4e37; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="black"] { --sw: #1c1c1c; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="blasses-khaki"] { --sw: #b7b08a; --tx: #26211C; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="blossom-red"] { --sw: #c0392b; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="blueberry-blue"] { --sw: #3b4a6b; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="dark-slate"] { --sw: #2f4f4f; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="dunkler-schiefer"] { --sw: #37474f; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="faded-khaki"] { --sw: #b7b08a; --tx: #26211C; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="fidlock-edition-grau-orange"] { --sw: linear-gradient(135deg,#8a8f94 0 50%,#d2691e 50% 100%); --tx: #fff; }  /* pruefen */
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="forest-green"] { --sw: #2e4d3a; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="graphite-blue"] { --sw: #35424f; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="grau"] { --sw: #6d7278; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="green"] { --sw: #3a7d44; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="grey"] { --sw: #6d7278; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="hazy-green"] { --sw: #7d8a6f; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="hellgrau"] { --sw: #b9bcbf; --tx: #26211C; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="ivy-green"] { --sw: #2f4f2f; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="jungle-green"] { --sw: #29524a; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="lightning-yellow"] { --sw: #f2b807; --tx: #26211C; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="moonlight-black"] { --sw: #232629; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="moss-green"] { --sw: #5a6b3f; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="natural-gold"] { --sw: #c8a24b; --tx: #26211C; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="navy-blue"] { --sw: #1f2f52; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="pacific-blue"] { --sw: #2f6f9f; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="petrol"] { --sw: #17565f; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="phantom-grey"] { --sw: #4a4f54; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="red-patterned"] { --sw: #b23b3b; --tx: #fff; }  /* pruefen */
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="rot"] { --sw: #b23b3b; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="schwarz"] { --sw: #1c1c1c; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="schwarz-transparent"] { --sw: linear-gradient(135deg,#1c1c1c 0 50%,#cfcfcf 50% 100%); --tx: #fff; }  /* pruefen */
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="soft-beige"] { --sw: #d8c9a8; --tx: #26211C; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="steel-grey"] { --sw: #6b7178; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="tinted-taupe"] { --sw: #8a7f70; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="titanium-grey"] { --sw: #7a7f83; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="vintage-gruen"] { --sw: #5a6b4f; --tx: #fff; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"] .ivpa_term[data-term="wildberry-violet"] { --sw: #6b3b6b; --tx: #fff; }

/* ---------------------------------------------------------------------
   23b) ÜBRIGE ATTRIBUTE (Variante, Größe …)
   Gleiche Bauform wie die Farbkacheln: 46 px hoch, links ein Feld,
   in dem bei Auswahl das Häkchen erscheint. Gilt für alle Attribute
   außer pa_farbe.
   ------------------------------------------------------------------- */

.single-product #ivpa-content .ivpa_attribute:not([data-attribute="pa_farbe"]) .ivpa_term {
  position: relative;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: .5rem 1rem .5rem calc(40px + .9rem) !important;
  background: #fff !important;
  color: var(--c-ink) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 4px !important;
  overflow: hidden;
  font-size: .9rem !important;
  font-weight: 500 !important;
  line-height: 1.3;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}

/* Feld links – neutral, bis ausgewählt wird */
.single-product #ivpa-content .ivpa_attribute:not([data-attribute="pa_farbe"]) .ivpa_term::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 40px;
  background: var(--c-sand-050);
  border-right: 1px solid var(--c-line);
  transition: background .16s ease, border-color .16s ease;
}

.single-product #ivpa-content .ivpa_attribute:not([data-attribute="pa_farbe"]) .ivpa_term:hover {
  border-color: var(--c-muted) !important;
}

.single-product #ivpa-content .ivpa_attribute:not([data-attribute="pa_farbe"]) .ivpa_term.ivpa_clicked {
  background: #fff !important;
  color: var(--c-ink) !important;
  border-color: var(--c-ink) !important;
  box-shadow: 0 0 0 1px var(--c-ink) !important;
  font-weight: 700 !important;
  transform: none !important;
}

.single-product #ivpa-content .ivpa_attribute:not([data-attribute="pa_farbe"]) .ivpa_term.ivpa_clicked::before {
  background: var(--c-primary);
  border-right-color: var(--c-primary);
}

/* Häkchen im linken Feld statt Badge außen */
.single-product #ivpa-content .ivpa_attribute:not([data-attribute="pa_farbe"]) .ivpa_term.ivpa_clicked::after {
  content: "" !important;
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  width: 7px !important;
  height: 13px !important;
  margin: -9px 0 0 -4px !important;
  border: solid #fff !important;
  border-width: 0 2.5px 2.5px 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: rotate(45deg) !important;
}

/* ---------------------------------------------------------------------
   23c) MINDESTBREITEN je Attribut
   Überschreibt das min-width:0 aus 23a/23b. Neue Attribute hier
   ergänzen; ohne Eintrag richtet sich die Breite nach dem Text.
   ------------------------------------------------------------------- */

.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_variante"] .ivpa_term { min-width: 210px !important; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_groesse"]  .ivpa_term { min-width: 110px !important; }
.single-product #ivpa-content .ivpa_attribute[data-attribute="pa_farbe"]    .ivpa_term { min-width: 210px !important; }


/* =====================================================================
   24) MEGA-MENÜ · Varianten B und E
   Bewusst nur <span> und <a> im Markup – Block-Elemente würde wpautop
   in Absätze zerlegen und damit Raster und Flex-Zeilen sprengen.
   Markenfarbe je Block über style="--bc:…;--bc2:…" setzen.
   ===================================================================== */

.mm{--bc:#35584B;--bc2:#20463C;display:block;font-family:'Outfit', system-ui, sans-serif;color:var(--c-ink);line-height:1.6}
.mm *{box-sizing:border-box}
.mm a{text-decoration:none}

.mm-kopf{display:flex;align-items:center;gap:10px;font-family:'Space Mono',ui-monospace,monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-muted);margin:0 0 14px}
.mm-kopf::before{content:"";width:20px;height:3px;background:var(--c-gold);flex:0 0 auto}

.mm-mod{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #F1EEE7;transition:padding-left .2s ease,border-color .2s ease}
.mm-mod:last-of-type{border-bottom:0}
.mm-mod:hover{padding-left:6px;border-bottom-color:var(--bc);text-decoration:none}
.mm-mod b{display:block;font-family:'Outfit',system-ui,sans-serif;font-weight:800;font-size:.98rem;color:var(--bc);line-height:1.25}
.mm-mod em{display:block;font-style:normal;font-family:'Space Mono',ui-monospace,monospace;font-size:.56rem;letter-spacing:.09em;text-transform:uppercase;color:var(--c-muted);margin-top:2px}
.mm-mod i{font-style:normal;color:var(--bc);opacity:0;transition:opacity .2s ease;flex:0 0 auto}
.mm-mod:hover i{opacity:1}
.mm-mod > span{display:block;flex:1 1 auto;min-width:0}

.mm-chips{display:flex;flex-wrap:wrap;gap:8px}
.mm-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--c-line);border-radius:999px;padding:.44rem .95rem;font-size:.85rem;color:var(--c-ink);background:#fff;transition:border-color .18s ease,background .18s ease}
.mm-chip:hover{border-color:var(--bc);background:var(--c-sand-050);text-decoration:none}
.mm-chip u{text-decoration:none;font-family:'Space Mono',ui-monospace,monospace;font-size:.6rem;color:var(--c-muted)}

.mm-cta{display:block;border-radius:10px;padding:16px 18px;background:#fff;border:1px solid var(--c-line);margin-bottom:10px;transition:border-color .2s ease,transform .2s ease}
.mm-cta:hover{border-color:var(--bc);transform:translateY(-2px);text-decoration:none}
.mm-cta b{display:block;font-family:'Outfit',system-ui,sans-serif;font-weight:800;font-size:.98rem;color:var(--bc)}
.mm-cta em{display:block;font-style:normal;font-size:.84rem;color:var(--c-muted);margin-top:3px}

/* --- Variante B: drei Spalten, rechts die Beratungsseite --------- */
.mm-b{display:grid;grid-template-columns:1fr 1fr 300px}
@media(max-width:980px){.mm-b{grid-template-columns:1fr}}
.mm-b > .mm-col{display:block;padding:36px 34px}
.mm-b > .mm-col + .mm-col{border-left:1px solid #EFECE4}
@media(max-width:980px){.mm-b > .mm-col + .mm-col{border-left:0;border-top:1px solid #EFECE4}}
.mm-b > .mm-seite{background:var(--c-sand-050)}
.mm-luft{display:block;height:22px}

/* --- Variante E: Boarding-Pass mit Abriss ------------------------ */
.mm-e{display:grid;grid-template-columns:1fr 218px;background:#FBFAF6}
@media(max-width:860px){.mm-e{grid-template-columns:1fr}}
.mm-e > .mm-haupt{display:block;padding:34px 38px}
.mm-eb{display:block;font-family:'Space Mono',ui-monospace,monospace;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-accent-600)}
.mm-titel{display:block;font-family:'Outfit',system-ui,sans-serif;font-weight:800;font-size:1.7rem;color:var(--c-ink);margin:2px 0 14px;line-height:1.15}
.mm-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:.55rem 0;border-bottom:1px dashed #DBD6C7;font-family:'Space Mono',ui-monospace,monospace;font-size:.72rem}
.mm-zeile > u{text-decoration:none;color:var(--c-muted);letter-spacing:.08em;flex:0 0 auto}
.mm-zeile > b{color:var(--bc);font-weight:700;text-align:right}
.mm-zeile:hover > b{border-bottom:1px solid var(--bc)}

.mm-abriss{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;background:var(--bc2);color:#EDE6D6;padding:30px 22px}
.mm-abriss::before{content:"";position:absolute;left:-1px;top:14px;bottom:14px;border-left:2px dashed rgba(237,230,214,.45)}
@media(max-width:860px){.mm-abriss::before{display:none}}
.mm-kerbe{position:absolute;left:-11px;width:22px;height:22px;border-radius:50%;background:#fff}
.mm-kerbe.o{top:-11px}
.mm-kerbe.u{bottom:-11px}
.mm-abriss u{text-decoration:none;font-family:'Space Mono',ui-monospace,monospace;font-size:.58rem;letter-spacing:.16em;color:#9db8ac}
.mm-abriss b{font-family:'Outfit',system-ui,sans-serif;font-weight:800;font-size:2.4rem;line-height:1;color:var(--c-gold)}
.mm-bc{display:flex;gap:2px;align-items:flex-end;height:26px;margin:14px 0}
.mm-bc i{display:block;width:2px;background:#EDE6D6}
.mm-abriss a{font-family:'Space Mono',ui-monospace,monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;border-bottom:2px solid var(--c-gold);padding-bottom:2px;margin-top:6px}
.mm-abriss a:hover{color:var(--c-gold);text-decoration:none}


/* =====================================================================
   25) TICKETKOPF für Kaufberatungs-Blöcke (.ck-*)
   Bewusst als Klassen statt Inline-Styles: display-Angaben in
   style-Attributen kamen in der Installation nicht zuverlässig an,
   wodurch Textzeilen zusammenliefen und die Barcode-Striche
   unsichtbar blieben.
   ===================================================================== */

.ck,.ck *{box-sizing:border-box}
.ck{display:flex !important;flex-wrap:wrap;background:#20463C;border-radius:12px;overflow:hidden;color:#EDE6D6;margin:0 0 2.4rem}
.ck-main{display:block !important;flex:1 1 320px;padding:26px 28px 22px}
.ck-eb{display:block !important;font-family:'Space Mono',ui-monospace,monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-gold);margin:0}
.ck-h{display:block !important;font-family:'Outfit',system-ui,sans-serif;font-weight:800;font-size:clamp(22px,3.2vw,30px);margin:.3rem 0 .5rem;padding:0;color:#fff;line-height:1.15;font-variant:normal}
.ck-dek{display:block !important;margin:0;color:#c7d6cd;font-size:.95rem;line-height:1.55;max-width:54ch}
.ck-bc{display:flex !important;gap:2px;align-items:flex-end;height:30px;margin-top:16px}
.ck-bc i{display:block !important;width:2px;height:30px;background:#EDE6D6;font-style:normal}
/* unregelmäßige Strichhöhen, damit es nach Barcode aussieht */
.ck-bc i:nth-child(2),.ck-bc i:nth-child(14){height:10px}
.ck-bc i:nth-child(4),.ck-bc i:nth-child(8){height:12px}
.ck-bc i:nth-child(6),.ck-bc i:nth-child(11){height:16px}
.ck-bc i:nth-child(3),.ck-bc i:nth-child(9){height:22px}
.ck-bc i:nth-child(10),.ck-bc i:nth-child(15){height:25px}
.ck-bc i:nth-child(13){height:18px}
.ck-stub{display:flex !important;flex:0 0 150px;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#1A3A31;border-left:2px dashed rgba(237,230,214,.4);padding:22px 14px}
.ck-stub u{display:block !important;text-decoration:none;font-family:'Space Mono',ui-monospace,monospace;font-size:.6rem;letter-spacing:.16em;color:#9db8ac}
.ck-stub b{display:block !important;font-family:'Outfit',system-ui,sans-serif;font-weight:800;font-size:2rem;line-height:1;color:var(--c-gold);margin:.15rem 0}

/* USP-Leiste unter dem Ticketkopf */
.ck-usp{display:block !important;text-align:center;padding:12px 20px;background:var(--c-sand-050);border:1px solid var(--c-line);border-top:0;margin:-2.4rem 0 0}
.ck-usp span{display:inline-block !important;margin:2px 12px;font-family:'Space Mono',ui-monospace,monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#5C6B62;white-space:nowrap}
.ck-usp span::before{content:"\2022";color:var(--c-gold);margin-right:6px}


/* =====================================================================
   26) HAUPTNAVIGATION · Variante F „Abrisskante"
   Helle Nav-Zeile, Navigation als grüner Ticketstreifen mit Kerben.
   Home bis Qeridoo mittig, Kaufberatung als Barcode-Punkt
   rechtsbündig am Streifenende.

   Voraussetzungen:
   – Logo/Suche in der Hauptzeile, Navigation in der Unterzeile.
   – Barcode-Menüpunkt trägt die CSS-Klasse „menu-item-kb" und steht
     als letzter Punkt im Menü (Label wird per font-size:0 versteckt).
   ===================================================================== */

/* --- Nav-Zeile: heller Grund, der Streifen bekommt Luft ------------- */
#wide-nav.header-bottom {
  background-color: #F5F3ED !important;
  border-top: 0 !important;
  padding-top: 28px;
  padding-bottom: 22px;
}

/* --- Der Ticketstreifen (die ul selbst) ------------------------------ */
#wide-nav ul.header-nav {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: #20463C;
  border-radius: 10px;
  box-shadow: 0 4px 26px rgba(20, 50, 40, .22);
}

/* Kerben links und rechts */
#wide-nav ul.header-nav::before,
#wide-nav ul.header-nav::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: #F5F3ED;
  z-index: 2;
}
#wide-nav ul.header-nav::before { left: -9px; }
#wide-nav ul.header-nav::after  { right: -9px; }

/* --- Menüpunkte (gilt für ALLE inkl. Kaufberatung) ------------------- */
#wide-nav ul.header-nav > li > .nav-top-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 100%;
  padding: 16px 22px;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(237, 230, 214, .82) !important;
  background: transparent !important;
  transition: color .18s ease;
}

/* Flatsome-Standardlinien/-flächen neutralisieren */
#wide-nav ul.header-nav > li > .nav-top-link::before {
  display: none !important;
}

/* Goldener Unterstrich */
#wide-nav ul.header-nav > li > .nav-top-link::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 9px;
  height: 2px;
  background: var(--c-gold, #E4B15F);
  transform: scaleX(0);
  transition: transform .2s ease;
}

/* Hover, geöffnetes Dropdown, aktiver Punkt */
#wide-nav ul.header-nav > li > .nav-top-link:hover,
#wide-nav ul.header-nav > li.current-dropdown > .nav-top-link,
#wide-nav ul.header-nav > li.current-menu-item > .nav-top-link,
#wide-nav ul.header-nav > li.current-menu-ancestor > .nav-top-link {
  color: #fff !important;
}
#wide-nav ul.header-nav > li > .nav-top-link:hover::after,
#wide-nav ul.header-nav > li.current-menu-item > .nav-top-link::after,
#wide-nav ul.header-nav > li.current-menu-ancestor > .nav-top-link::after {
  transform: scaleX(1);
}

/* Dropdown-Pfeil dezenter */
#wide-nav ul.header-nav > li > .nav-top-link .icon-angle-down {
  font-size: 1.25em;
  opacity: .7;
  margin: 0;
}

/* --- KB-Punkt: Label unsichtbar, nur der Barcode bleibt --------------
   Der Menüpunkt braucht in WordPress irgendeinen Namen (z. B.
   „Finder") – font-size:0 blendet ihn aus. ------------------------- */
#wide-nav ul.header-nav > li.menu-item-kb > .nav-top-link {
  font-size: 0 !important;
}

/* --- KB-Punkt rechtsbündig am Streifenende --------------------------- */
#wide-nav ul.header-nav > li.menu-item-kb {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0;
}

/* --- Streifen über die volle Containerbreite ------------------------- */
#wide-nav .flex-row { width: 100%; }
#wide-nav .flex-col:has(ul.header-nav) {
  flex: 1 1 auto;
  max-width: 100%;
}

/* --- Kaufberatung: Barcode statt Unterstrich -------------------------
   Der ::after wird beim KB-Punkt vom Unterstrich zum Barcode
   umgewidmet; der Unterstrich läuft dort über ::before. ------------ */

/* Barcode (ersetzt beim KB-Punkt den Unterstrich-::after) */
#wide-nav ul.header-nav > li.menu-item-kb > .nav-top-link::after {
  content: "";
  position: static;
  display: block;
  width: 44px;
  height: 14px;
  margin-left: 0;
  transform: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2044%2012%27%3E%3Cg%20fill%3D%27%23EDE6D6%27%3E%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%272%27%20height%3D%2712%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%277%27%20width%3D%272%27%20height%3D%275%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%270%27%20width%3D%272%27%20height%3D%2712%27%2F%3E%3Crect%20x%3D%2712%27%20y%3D%275%27%20width%3D%272%27%20height%3D%277%27%2F%3E%3Crect%20x%3D%2716%27%20y%3D%270%27%20width%3D%272%27%20height%3D%2712%27%2F%3E%3Crect%20x%3D%2720%27%20y%3D%273%27%20width%3D%272%27%20height%3D%279%27%2F%3E%3Crect%20x%3D%2724%27%20y%3D%270%27%20width%3D%272%27%20height%3D%2712%27%2F%3E%3Crect%20x%3D%2728%27%20y%3D%270%27%20width%3D%272%27%20height%3D%2712%27%2F%3E%3Crect%20x%3D%2732%27%20y%3D%277%27%20width%3D%272%27%20height%3D%275%27%2F%3E%3Crect%20x%3D%2736%27%20y%3D%270%27%20width%3D%272%27%20height%3D%2712%27%2F%3E%3Crect%20x%3D%2740%27%20y%3D%275%27%20width%3D%272%27%20height%3D%277%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .85;
  transition: opacity .18s ease;
}
#wide-nav ul.header-nav > li.menu-item-kb > .nav-top-link:hover::after,
#wide-nav ul.header-nav > li.menu-item-kb.current-menu-item > .nav-top-link::after {
  transform: none;
  opacity: 1;
}

/* Goldener Unterstrich beim KB-Punkt über ::before */
#wide-nav ul.header-nav > li.menu-item-kb > .nav-top-link::before {
  content: "";
  display: block !important;
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 9px;
  height: 2px;
  background: var(--c-gold, #E4B15F);
  transform: scaleX(0);
  transition: transform .2s ease;
}
#wide-nav ul.header-nav > li.menu-item-kb > .nav-top-link:hover::before,
#wide-nav ul.header-nav > li.menu-item-kb.current-menu-item > .nav-top-link::before {
  transform: scaleX(1);
}


/* =====================================================================
   27) MOBILES MENÜ · M3 „Markentickets" (separates Mobilmenü)
   Jede Marke als Mini-Ticket (farbiger Kopf, Abriss-Stub mit
   Modellzahl), Modelle als ECHTE Untermenüpunkte → Flatsome-Akkordeon
   funktioniert nativ. Kaufberatung/Kontakt als Buttons am Ende.

   Menü „Mobil" auf Position „Main Menu – Mobile", Klassen:
   kw-marke-thule / kw-marke-croozer / kw-marke-qeridoo an den Marken,
   kw-grp an Zwischenüberschriften (Link #), kw-mkb / kw-mko an
   Kaufberatung / Kontakt.
   ===================================================================== */

/* --- Grundfläche des Drawers ---------------------------------------- */
.mobile-sidebar,
.mobile-sidebar .sidebar-menu {
  background: #F5F3ED;
}
.mobile-sidebar .nav-sidebar.nav-vertical {
  padding: 6px 14px 16px;
}
.mobile-sidebar .nav-sidebar.nav-vertical > li {
  border: 0 !important;
  margin: 0 0 12px;
}
.mobile-sidebar .nav-sidebar li ul {
  border: 0 !important;
}

/* --- Einfache Punkte (Home, Zubehör …) ------------------------------- */
.mobile-sidebar .nav-sidebar.nav-vertical > li > a {
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-variant: normal !important;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-ink, #26211C);
  padding: 13px 16px;
}

/* --- Marken als Mini-Ticket ------------------------------------------ */
.mobile-sidebar li.kw-marke-thule,
.mobile-sidebar li.kw-marke-croozer,
.mobile-sidebar li.kw-marke-qeridoo {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 20px rgba(20, 50, 40, .12);
}
.mobile-sidebar li.kw-marke-thule   { --bm: #35584B; }
.mobile-sidebar li.kw-marke-croozer { --bm: #1E3A5F; }
.mobile-sidebar li.kw-marke-qeridoo { --bm: #2B2B2B; }

/* Ticketkopf = der Menü-Link */
.mobile-sidebar li.kw-marke-thule > a,
.mobile-sidebar li.kw-marke-croozer > a,
.mobile-sidebar li.kw-marke-qeridoo > a {
  position: relative;
  display: flex !important;
  align-items: center;
  background: var(--bm) !important;
  color: #fff !important;
  padding: 15px 80px 15px 16px;
  min-height: 56px;
}

/* Abriss-Stub rechts mit Modellzahl (Zahlen hier pflegen) */
.mobile-sidebar li.kw-marke-thule > a::after,
.mobile-sidebar li.kw-marke-croozer > a::after,
.mobile-sidebar li.kw-marke-qeridoo > a::after {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 2px dashed rgba(255, 255, 255, .4);
  background: rgba(0, 0, 0, .18);
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--c-gold, #E4B15F);
}
.mobile-sidebar li.kw-marke-thule   > a::after { content: "7"; }
.mobile-sidebar li.kw-marke-croozer > a::after { content: "7"; }
.mobile-sidebar li.kw-marke-qeridoo > a::after { content: "11"; }

/* Flatsome-Aufklapp-Pfeil im Kopf */
.mobile-sidebar li.kw-marke-thule > a i,
.mobile-sidebar li.kw-marke-croozer > a i,
.mobile-sidebar li.kw-marke-qeridoo > a i {
  color: #fff;
  opacity: .8;
  margin-left: 8px;
}

/* --- Aufgeklappte Modell-Liste (echtes Untermenü) -------------------- */
.mobile-sidebar li.kw-marke-thule > ul,
.mobile-sidebar li.kw-marke-croozer > ul,
.mobile-sidebar li.kw-marke-qeridoo > ul {
  background: #fff;
  padding: 4px 16px 12px !important;
  margin: 0 !important;
}
.mobile-sidebar li.kw-marke-thule > ul li,
.mobile-sidebar li.kw-marke-croozer > ul li,
.mobile-sidebar li.kw-marke-qeridoo > ul li {
  border: 0 !important;
}
.mobile-sidebar li.kw-marke-thule > ul li a,
.mobile-sidebar li.kw-marke-croozer > ul li a,
.mobile-sidebar li.kw-marke-qeridoo > ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0 !important;
  border-bottom: 1px solid #F0EDE6;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  font-size: .92rem;
  color: var(--c-ink, #26211C);
  text-align: left;
}
.mobile-sidebar li.kw-marke-thule > ul li:last-child a,
.mobile-sidebar li.kw-marke-croozer > ul li:last-child a,
.mobile-sidebar li.kw-marke-qeridoo > ul li:last-child a {
  border-bottom: 0;
}
/* Pfeil in Markenfarbe */
.mobile-sidebar li.kw-marke-thule > ul li:not(.kw-grp) a::after,
.mobile-sidebar li.kw-marke-croozer > ul li:not(.kw-grp) a::after,
.mobile-sidebar li.kw-marke-qeridoo > ul li:not(.kw-grp) a::after {
  content: "\2192";
  color: var(--bm);
  font-weight: 700;
}

/* Zwischenüberschriften (kw-grp, Link #) */
.mobile-sidebar li.kw-grp a {
  pointer-events: none;
  font-family: 'Space Mono', ui-monospace, monospace !important;
  font-weight: 400 !important;
  font-size: .56rem !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted, #6A6459) !important;
  padding: 12px 0 2px !important;
  border-bottom: 0 !important;
}

/* --- Kaufberatung- und Kontakt-Button am Ende ------------------------ */
.mobile-sidebar li.kw-mkb,
.mobile-sidebar li.kw-mko {
  display: block !important;
  width: 100%;
  margin: 12px 0 0 !important;
  background: transparent;
  box-shadow: none;
}
.mobile-sidebar li.kw-mkb { margin-top: 25px !important; }
.mobile-sidebar li.kw-mkb > a,
.mobile-sidebar li.kw-mko > a {
  display: block;
  text-align: center;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 12px 8px;
}
.mobile-sidebar li.kw-mkb > a {
  background: var(--c-gold, #E4B15F);
  color: #20463C !important;
}
.mobile-sidebar li.kw-mko > a {
  border: 2px solid #20463C;
  color: #20463C !important;
}


/* =====================================================================
   28) PRODUKTGALERIE · FESTE BÜHNE (kein Springen)
   Greift breit auf alle Bilder innerhalb der Galerie-Wrapper
   (veb/iwp, slick, Flatsome, Woo-Standard) und setzt !important
   gegen Inline-Höhen des Sliders.
   --gal-ratio bei Bedarf anpassen (z. B. 4 / 5 für Hochformat).
   ===================================================================== */

.single-product {
  --gal-ratio: 1 / 1;
}

/* --- Hauptbild ------------------------------------------------------- */
.single-product .veb-variation-gallery-slider-wrapper img,
.single-product .veb-variation-gallery-container .iwp-slider img,
.single-product .iwp-slider .slick-slide img,
.single-product .product-gallery-slider .slide img,
.single-product .woocommerce-product-gallery__image img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: var(--gal-ratio) !important;
  object-fit: contain !important;
  background: #fff;
}

/* Slick-Höhenanimation stilllegen – bei gleicher Bildhöhe unnötig,
   und sie ist es, die das „Nachfedern" beim Wechsel erzeugt */
.single-product .veb-variation-gallery-slider-wrapper .slick-list,
.single-product .iwp-slider .slick-list {
  transition: none !important;
}

/* --- Thumbnails ------------------------------------------------------- */
.single-product .veb-variation-gallery-container .iwp-thumbnail img,
.single-product .veb-variation-gallery-thumbnail img,
.single-product .iwp-thumbnail-slider img,
.single-product .product-thumbnails img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  background: #fff;
}


/* =====================================================================
   29) PRODUKTGALERIE · G1 „Filmstreifen"
   Papierkarte um die Galerie, Bühne mit Rahmen, Thumbs als Streifen
   mit gestrichelter Trennlinie, rechts der Bildzähler-Stub (1/7).
   Der Stub wird per Script aus functions.php Abschnitt 15 eingesetzt.
   Baut auf der festen Bühne aus Abschnitt 28 auf.
   ===================================================================== */

/* --- Papierkarte um die ganze Galerie -------------------------------- */
.single-product .veb-variation-gallery-container {
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background: #FBFAF6;
  box-shadow: 0 12px 28px rgba(32, 70, 60, .10);
  overflow: hidden;
}

/* --- Bühne ------------------------------------------------------------ */
.single-product .veb-variation-gallery-slider-wrapper {
  margin: 14px;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* --- Thumb-Streifen (Wrapper kommt aus dem Script) ------------------- */
.single-product .kw-gal-strip {
  display: flex;
  align-items: stretch;
  border-top: 1px dashed var(--c-line);
  background: #fff;
}
.single-product .kw-gal-strip > *:first-child {
  flex: 1;
  min-width: 0;
}

/* Thumb-Zellen */
.single-product .veb-variation-gallery-container .iwp-thumbnail {
  padding: 10px 8px;
  border-right: 1px solid #F0EDE6;
}

/* --- Bildzähler-Stub -------------------------------------------------- */
.single-product .kw-gal-z {
  flex: 0 0 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-left: 2px dashed var(--c-line);
  background: var(--c-sand-050);
}
.single-product .kw-gal-z b {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--c-primary);
  line-height: 1;
}
.single-product .kw-gal-z u {
  text-decoration: none;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .52rem;
  letter-spacing: .14em;
  color: var(--c-muted);
}


/* =====================================================================
   31) FOOTER
   ===================================================================== */

.footer-1 {
  background-image: url('/media/image/footer.jpg');
}

/* Nur Desktop ab 850 px */
@media (min-width: 850px) {
  .footer-1 {
    --footer-pos: center 80%;      /* hier verstellen */
    background-position: var(--footer-pos);
    background-size: cover;
    background-repeat: no-repeat;
  }
}


/* =====================================================================
   35) STARTSEITE · FAMILIENALBUM (.fam-*)
   Die neue Startseite. Alte Startseiten-Abschnitte (15 · 30 · 32 ·
   33 · 34) sind aus dieser Datei entfernt.
   Markup nur <span>/<a>/<img> (wpautop-sicher), display über Klassen.
   Schrift „Caveat" lädt functions.php Abschnitt 02.
   ===================================================================== */


/* =====================================================================
   DIE 4 FOTOS · Bild-URLs bei Bedarf nur hier tauschen
   (relative Pfade laufen lokal UND live · Querformat ca. 4:3)
   ===================================================================== */


/* FOTO 1 · Polaroid oben links (Hero) · Bildunterschrift: „Emmas erste Tour" */

.fam-foto1 { background-image: url('/media/image/Pola_1.jpg'); }


/* FOTO 2 · Polaroid rechts (Hero) · Bildunterschrift: „Mit Opa am See" */

.fam-foto2 { background-image: url('/media/image/Pola_2.jpg'); }


/* FOTO 3 · Polaroid unten (Hero) · Bildunterschrift: „Zwei drin – alle glücklich" */

.fam-foto3 { background-image: url('/media/image/Pola_3.jpg'); }


/* FOTO 4 · Großes Bild im Oma-&-Opa-Abschnitt */

.fam-foto4 { background-image: url('/media/image/Pola_4.jpg'); }


/* =====================================================================
   Ab hier nichts mehr eintragen – reines Layout-CSS
   ===================================================================== */

/* --- Grundlagen ------------------------------------------------------ */
.fam-hero, .fam-hero *, .fam-akt, .fam-akt *, .fam-alb, .fam-alb *,
.fam-stim, .fam-stim *, .fam-oma, .fam-oma *, .fam-find, .fam-find * { box-sizing: border-box; }
.fam-hero a, .fam-akt a, .fam-alb a, .fam-oma a, .fam-find a { text-decoration: none; }

.fam-eb {
  display: block !important;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-accent-600);
}
.fam-eb--gold { color: var(--c-gold); }
.fam-hand {
  display: inline-block !important;
  font-family: 'Caveat', cursive;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--c-accent-600);
}

/* --- Buttons --------------------------------------------------------- */
.fam-btn {
  display: inline-block !important;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  font-size: .95rem;
  border-radius: 12px;
  padding: 13px 26px;
  transition: .18s;
}
.fam-btn--voll { background: var(--c-primary); color: #fff !important; }
.fam-btn--voll:hover { background: var(--c-primary-600); transform: translateY(-1px); }
.fam-btn--rand { background: transparent; color: var(--c-ink) !important; border: 1.5px solid var(--c-line); }
.fam-btn--rand:hover { border-color: var(--c-primary); color: var(--c-primary) !important; }
.fam-btn--gold { background: var(--c-gold); color: var(--tik) !important; }
.fam-btn--gold:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* --- Klebeband (mehrfach genutzt) ------------------------------------ */
.fam-tape {
  display: block !important;
  position: absolute;
  top: -11px;
  left: 50%;
  width: 84px;
  height: 26px;
  background: rgba(228, 177, 95, .5);
  transform: translateX(-50%) rotate(-3deg);
  border-radius: 2px;
  z-index: 2;
}

/* =====================================================================
   HERO · Text links, Polaroid-Cluster rechts, USP-Zeile unten
   ===================================================================== */
.fam-hero {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  background: #FBF7EF;
  border: 1px solid #EADFC9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(70, 52, 25, .10);
}

/* Textspalte */
.fam-txt {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 440px;
  padding: clamp(28px, 4vw, 54px);
}
.fam-h {
  display: block !important;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.1;
  color: var(--c-ink);
  margin: .5rem 0 .8rem;
}
.fam-h em {
  font-style: normal;
  background: linear-gradient(transparent 60%, #F3D9A8 60%);
  padding: 0 .1em;
}
.fam-lead {
  display: block !important;
  color: var(--c-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 46ch;
  margin: 0 0 1.5rem;
}
.fam-cta { display: flex !important; gap: 12px; flex-wrap: wrap; align-items: center; }
.fam-note {
  display: inline-block !important;
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  color: var(--c-accent-600);
  transform: rotate(-2deg);
  margin-top: 16px;
}
.fam-marken { display: flex !important; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.fam-mk {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #EADFC9;
  border-radius: 99px;
  padding: 7px 15px;
  font-weight: 700;
  font-size: .84rem;
  color: var(--c-ink) !important;
  transition: .18s;
}
.fam-mk::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mk); }
.fam-mk u {
  text-decoration: none;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .68rem;
  color: var(--c-muted);
}
.fam-mk:hover { border-color: var(--mk); transform: translateY(-1px); }

/* Polaroid-Cluster */
.fam-cluster {
  display: block !important;
  position: relative;
  flex: 1 1 420px;
  min-height: 500px;
  align-self: stretch;
}
.fam-pol {
  display: block !important;
  position: absolute;
  background: #fff;
  padding: 12px 12px 8px;
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(70, 52, 25, .16);
  transform: rotate(var(--rot, 0deg));
  transition: .25s;
}
.fam-pol:hover { transform: rotate(0deg) scale(1.03); z-index: 5; }
.fam-pol1 { top: 26px; left: 4%; --rot: -5deg; }
.fam-pol2 { top: 72px; right: 4%; --rot: 3.5deg; z-index: 2; }
.fam-pol3 { bottom: 24px; left: 20%; --rot: -1.5deg; z-index: 3; }
.fam-pph {
  display: block !important;
  width: 230px;
  height: 172px;
  border-radius: 2px;
  background-color: #EFE9DC;
  background-size: cover;
  background-position: center;
}
.fam-cap {
  display: block !important;
  font-family: 'Caveat', cursive;
  font-size: 1.35rem;
  color: #4B443A;
  text-align: center;
  padding: 8px 4px 4px;
}

/* USP-Zeile */
.fam-usp {
  display: flex !important;
  flex-basis: 100%;
  justify-content: center;
  gap: 34px;
  flex-wrap: wrap;
  border-top: 1px solid #EADFC9;
  background: #FDFAF3;
  padding: 15px 20px;
}
.fam-usp span {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7A7160;
}
.fam-usp span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c-gold); }

/* =====================================================================
   AKTIONSZETTEL · getapte Notiz mit Rabatt-Marke
   ===================================================================== */
.fam-akt {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  position: relative;
  background: #fff;
  border: 1px dashed #D8C9A6;
  border-radius: 14px;
  padding: 30px 34px;
  box-shadow: 0 10px 26px rgba(70, 52, 25, .08);
}
.fam-akt-tape { display: block !important; position: absolute; top: -12px; left: 46px; width: 92px; height: 28px; background: rgba(228, 177, 95, .5); transform: rotate(-3deg); border-radius: 2px; }
.fam-akt-txt { display: block !important; flex: 7 1 380px; min-width: 0; }
.fam-akt-h {
  display: block !important;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--c-ink);
  margin: .35rem 0 .45rem;
}
.fam-akt-lead { display: block !important; color: var(--c-muted); line-height: 1.65; font-size: .95rem; max-width: 66ch; margin: 0 0 1.1rem; }
.fam-akt-btns { display: flex !important; gap: 10px; flex-wrap: wrap; }
.fam-akt-btn {
  display: inline-block !important;
  background: var(--mb);
  color: #fff !important;
  font-weight: 700;
  font-size: .86rem;
  border-radius: 10px;
  padding: 10px 18px;
  transition: .18s;
}
.fam-akt-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.fam-akt-tag {
  display: block !important;
  flex: 3 1 160px;
  text-align: center;
  transform: rotate(3deg);
}
.fam-akt-tag b {
  display: block !important;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 2.8rem;
  color: var(--c-accent-600);
  line-height: 1;
}
.fam-akt-tag u {
  display: block !important;
  text-decoration: none;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .6rem;
  letter-spacing: .2em;
  color: var(--c-muted);
  margin-top: 6px;
}

/* =====================================================================
   ABSCHNITTSKÖPFE (Album · Stimmen)
   ===================================================================== */
.fam-kopf { display: block !important; text-align: center; margin: 0 0 8px; }
.fam-kh {
  display: block !important;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  color: var(--c-ink);
  margin: .3rem 0 .2rem;
}
.fam-kopf .fam-hand { font-size: 1.4rem; }

/* =====================================================================
   BESTSELLER-ALBUM · sechs getapte Fotokarten
   ===================================================================== */
.fam-alb { display: block !important; }
.fam-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 26px;
  padding: 26px 0 8px;
}
.fam-card {
  display: block !important;
  position: relative;
  background: #fff;
  border-radius: 6px;
  padding: 14px 14px 16px;
  box-shadow: 0 12px 30px rgba(70, 52, 25, .12);
  transition: .22s;
}
.fam-card:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: 0 20px 40px rgba(70, 52, 25, .18); }
.fam-card .fam-tape { width: 76px; height: 24px; transform: translateX(-50%) rotate(2deg); }
.fam-ph {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 190px;
  border-radius: 3px;
  background: #F6F3EC;
  padding: 14px;
  overflow: hidden;
}
.fam-aimg { display: block !important; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fam-nm {
  display: block !important;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--c-ink);
  margin-top: 12px;
}
.fam-cl {
  display: flex !important;
  align-items: center;
  gap: 7px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 4px;
}
.fam-cl::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--b); }
.fam-foot {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 12px;
}
.fam-preis { display: inline-block !important; font-family: 'Space Mono', ui-monospace, monospace; font-weight: 700; font-size: 1rem; color: var(--c-ink); }
.fam-foot .fam-hand { font-size: 1.2rem; white-space: nowrap; }

/* =====================================================================
   STIMMEN · drei Sprechblasen
   ===================================================================== */
.fam-stim { display: block !important; }
.fam-qgrid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 26px 0 14px;
}
.fam-qb {
  display: block !important;
  position: relative;
  background: #fff;
  border: 1px solid #EFE6D2;
  border-radius: 14px;
  padding: 22px 22px 18px;
}
.fam-qb::after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 34px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-right: 1px solid #EFE6D2;
  border-bottom: 1px solid #EFE6D2;
  transform: rotate(45deg);
}
.fam-stars { display: block !important; color: var(--c-gold); letter-spacing: 2px; font-size: .9rem; }
.fam-qt { display: block !important; color: #4B443A; line-height: 1.65; font-size: .95rem; margin: 8px 0 14px; }
.fam-who { display: block !important; font-family: 'Space Mono', ui-monospace, monospace; font-size: .64rem; letter-spacing: .1em; color: var(--c-muted); }

/* =====================================================================
   OMA & OPA · Text + großes Foto
   ===================================================================== */
.fam-oma {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 44px;
  background: var(--c-sand-050);
  border: 1px solid #EADFC9;
  border-radius: 16px;
  padding: clamp(28px, 4vw, 50px);
}
.fam-otxt { display: block !important; flex: 1 1 420px; min-width: 0; }
.fam-oh {
  display: block !important;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--c-ink);
  margin: .4rem 0 .7rem;
}
.fam-olead { display: block !important; color: var(--c-muted); line-height: 1.7; margin: 0 0 1.2rem; }
.fam-fakt { display: flex !important; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--c-ink); margin: 0 0 10px; }
.fam-fakt b { color: var(--c-ok); font-weight: 700; }
.fam-fakt span { display: inline-block !important; line-height: 1.55; }
.fam-octa { display: block !important; margin-top: 18px; }
.fam-obild {
  display: block !important;
  flex: 1 1 340px;
  background: #fff;
  border-radius: 14px;
  padding: 16px 16px 8px;
  box-shadow: 0 12px 30px rgba(70, 52, 25, .10);
  transform: rotate(1deg);
}
.fam-obild .fam-pph { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.fam-ocap { display: block !important; font-size: 1.5rem; text-align: center; padding: 10px 0 6px; }

/* =====================================================================
   FINDER-BAND · dunkelgrün mit Gold-CTA
   ===================================================================== */
.fam-find {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  background: var(--tik);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 14px 34px rgba(20, 50, 40, .28);
}
.fam-ftxt { display: block !important; flex: 1 1 380px; min-width: 0; }
.fam-fh {
  display: block !important;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  color: #fff;
  margin: .3rem 0 .3rem;
}
.fam-flead { display: block !important; color: #B9CCC2; line-height: 1.6; max-width: 54ch; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 920px) {
  .fam-grid, .fam-qgrid { grid-template-columns: 1fr 1fr; }
  .fam-cluster { min-height: 460px; flex-basis: 100%; max-width: 540px; margin: 0 auto; }
}
@media (max-width: 620px) {
  .fam-grid, .fam-qgrid { grid-template-columns: 1fr; }
  .fam-cluster { min-height: 470px; }
  .fam-pph { width: 190px; height: 142px; }
  .fam-pol1 { top: 10px; left: 0; }
  .fam-pol2 { top: 160px; right: 0; }
  .fam-pol3 { bottom: 10px; left: 10%; }
  .fam-cap { font-size: 1.2rem; }
  .fam-akt-tag { transform: rotate(0deg); }
  .fam-obild { transform: rotate(0deg); }
}


/* =====================================================================
   36) WARENKORB · Buttons vereinheitlichen
   ===================================================================== */
.primary.is-link, .primary.is-outline, .primary.is-underline {
  color: var(--fs-color-primary);
  min-width: 300px;
}
.pull-left {
  float: left;
  min-width: 300px;
}


/* =====================================================================
   37) WARENKORB · Cross-Sells „Packliste" (.kw-pl)
   Checkliste unter Warenkorb-Tabelle und Summen. Ausgabe über
   functions.php Abschnitt 16. Einfache Produkte: Klick hakt ab
   (add-to-cart), variable führen zur Produktseite, enthaltene
   sind abgehakt.
   ===================================================================== */

.kw-pl, .kw-pl * { box-sizing: border-box; }
.kw-pl {
  clear: both;
  display: block;
  background: #FBFAF6;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 18px 22px 10px;
  margin: 30px 0 10px;
}
.kw-pl a { text-decoration: none; }

/* --- Kopf ------------------------------------------------------------- */
.kw-pl-kopf { display: block; margin: 0 0 8px; }
.kw-pl-kopf u {
  display: block;
  text-decoration: none;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-accent-600);
}
.kw-pl-kopf b {
  display: block;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--c-ink);
  margin-top: 2px;
}

/* --- Zeile ------------------------------------------------------------ */
.kw-pl-row {
  display: grid;
  grid-template-columns: 20px 54px 1fr auto 34px;
  gap: 14px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px dashed var(--c-line);
  color: var(--c-ink);
  transition: background .15s ease;
}
.kw-pl-row:last-child { border-bottom: 0; }
.kw-pl-row:hover { background: var(--c-sand-050); }

/* Kästchen */
.kw-pl-box {
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--c-line);
  border-radius: 4px;
  background: #fff;
  position: relative;
  transition: border-color .15s ease, background .15s ease;
}
.kw-pl-row:hover .kw-pl-box { border-color: var(--c-accent); }

/* Bild */
.kw-pl-img {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #F0EDE6;
  border-radius: 6px;
}
.kw-pl-noimg { background: var(--c-sand); }

/* Name + Marke */
.kw-pl-tx { display: block; min-width: 0; }
.kw-pl-tx b {
  display: block;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.3;
}
.kw-pl-tx u {
  display: block;
  text-decoration: none;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .52rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 1px;
}

/* Preis */
.kw-pl-pr {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  font-size: .88rem;
  color: var(--c-ink);
  white-space: nowrap;
}
.kw-pl-pr .amount { color: var(--c-ink); }
.kw-pl-pr del { opacity: .5; font-weight: 400; margin-right: 4px; }
.kw-pl-pr ins { text-decoration: none; }

/* Plus / Pfeil / DABEI */
.kw-pl-go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  transition: background .15s ease, transform .15s ease;
}
.kw-pl-row:hover .kw-pl-go { background: var(--c-accent); transform: scale(1.08); }

/* --- Bereits im Warenkorb --------------------------------------------- */
.kw-pl-row.is-drin { opacity: .72; }
.kw-pl-row.is-drin .kw-pl-box {
  background: var(--c-ok);
  border-color: var(--c-ok);
}
.kw-pl-row.is-drin .kw-pl-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.kw-pl-row.is-drin .kw-pl-go {
  width: auto;
  height: auto;
  border-radius: 4px;
  background: transparent;
  color: var(--c-ok);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .52rem;
  letter-spacing: .1em;
  padding: 3px 0;
}
.kw-pl-row.is-drin:hover .kw-pl-go { background: transparent; transform: none; }

/* --- Mobil ------------------------------------------------------------ */
@media (max-width: 549px) {
  .kw-pl { padding: 16px 14px 8px; }
  .kw-pl-row { grid-template-columns: 18px 46px 1fr auto; gap: 10px; }
  .kw-pl-go { display: none; }
  .kw-pl-img { width: 46px; height: 46px; }
}

/* --- Up-Sell-Variante (Shortcode [kw_upsells], functions Abschn. 17) --
   In Tabs/UX-Builder ohne Außenabstand, etwas kompakterer Kopf. ---- */
.kw-pl--up { margin: 6px 0; }
.kw-pl--up .kw-pl-kopf b { font-size: 1.05rem; }

/* --- Sicherheitsnetz: Standard-Cross-Sell-Ausgabe immer verstecken ----
   Falls Flatsome das Woo-Template an unbekannter Stelle doch rendert,
   verschwindet es hierüber; die Packliste (.kw-pl) ist eigenständig. */
.woocommerce-cart .cross-sells { display: none !important; }


/* =====================================================================
   38) COOKIE-BANNER (CookieYes) · Buttons im Shop-Look
   ===================================================================== */
.cky-btn.cky-btn-accept {
  background-color: #C87D2D !important;
  border-color: #C87D2D !important;
  color: #fff !important;
}
.cky-btn.cky-btn-accept:hover { background-color: #B06C22 !important; border-color: #B06C22 !important; }
.cky-btn.cky-btn-reject:hover { background-color: #F5F3ED !important; }


:root { --kw-container: 1080px; }

.container,
.row,
.flatsome-container,
body.checkout-wc .cfw-container,
main.checkoutwc .cfw-container {
  max-width: var(--kw-container) !important;
}