/* ==========================================================================
   Shop-Optik 2026 (23.10.2026)
   Liegt über main.css, kopf.css und kachel.css und wird als letztes geladen.
   Ändert nur das Aussehen: keine Kasse, keine Rechtstexte, keine Preise.
   Die Bewegungen (Einblenden, Kopf beim Scrollen) setzt Scripts.twig über die
   Klassen kfm-js, kfm-scrolled und kfm-reveal; ohne JavaScript bleibt alles
   sichtbar. prefers-reduced-motion schaltet die Bewegungen ab.
   ========================================================================== */
:root {
  --kfm-blau: #054794;
  --kfm-blau-dunkel: #03336b;
  --kfm-petrol: #113946;
  --kfm-lime: #bed630;
  --kfm-grund: #f4f7f8;
  --kfm-linie: #e3e9ec;
  --kfm-text: #1d2a30;
  --kfm-radius: 14px;
  --kfm-radius-klein: 8px;
  --kfm-schatten: 0 1px 2px rgba(17, 57, 70, .06), 0 4px 16px rgba(17, 57, 70, .06);
  --kfm-schatten-hoch: 0 2px 4px rgba(17, 57, 70, .08), 0 18px 40px rgba(17, 57, 70, .16);
  --kfm-tempo: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--kfm-lime); color: var(--kfm-petrol); }
:focus-visible { outline: 3px solid var(--kfm-lime); outline-offset: 2px; }

/* --- Kopf ---------------------------------------------------------------- */
/* header#page-header ist nur die 6 px hohe Linie, der sichtbare Kopf ist die nav darin. */
#page-header nav.header-fw { transition: box-shadow .3s ease; }
body.kfm-scrolled #page-header nav.header-fw { box-shadow: 0 6px 24px rgba(3, 30, 60, .28); }

header.default-header .cmp-search-box input,
header.default-header .search-input {
  border-radius: 999px 0 0 999px !important; border: 0 !important;
  padding-left: 1.1em !important; transition: box-shadow .2s ease;
}
header.default-header .cmp-search-box .search-submit,
header.default-header .cmp-search-box button {
  border-radius: 0 999px 999px 0 !important; border: 0 !important; background: #fff !important;
}
header.default-header .cmp-search-box:focus-within { box-shadow: 0 0 0 3px rgba(190, 214, 48, .65); border-radius: 999px; }

/* Hauptmenü: Lime-Strich wächst beim Darüberfahren von links. Als Hintergrundbild, weil ::after
   schon den Pfeil der Untermenüs trägt. */
header.default-header .mainmenu > li:not(.home) > a {
  background-image: linear-gradient(var(--kfm-lime), var(--kfm-lime)); background-repeat: no-repeat;
  background-position: 14px calc(100% - 6px); background-size: 0 3px; transition: background-size .28s var(--kfm-tempo);
}
header.default-header .mainmenu > li:not(.home):hover > a,
header.default-header .mainmenu > li:not(.home) > a:focus-visible { background-size: calc(100% - 28px) 3px; }

/* --- Schaltflächen ------------------------------------------------------- */
.btn { border-radius: var(--kfm-radius-klein); transition: transform .18s var(--kfm-tempo), box-shadow .18s ease, background-color .18s ease; }
.btn-primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(5, 71, 148, .28); }
.btn-primary:not(:disabled):active { transform: translateY(0); box-shadow: none; }
.single .btn-primary.btn-block.btn-lg,
.single .add-to-basket-container .btn-primary {
  border-radius: var(--kfm-radius-klein); letter-spacing: .06em;
  background: linear-gradient(135deg, var(--kfm-blau) 0%, #0a5cb8 100%) !important; border: 0 !important;
}

/* --- Produktkacheln (Kategorie, Suche, Top Seller, Zubehör) -------------- */
.cmp-product-thumb {
  background: #fff; border: 1px solid var(--kfm-linie); border-radius: var(--kfm-radius);
  overflow: hidden; height: calc(100% - 24px); margin-bottom: 24px;
  transition: transform .3s var(--kfm-tempo), box-shadow .3s ease, border-color .3s ease;
}
.cmp-product-thumb:hover { transform: translateY(-4px); box-shadow: var(--kfm-schatten-hoch); border-color: transparent; }
.cmp-product-thumb .thumb-image { background: radial-gradient(circle at 50% 45%, #fff 0%, #fff 45%, var(--kfm-grund) 100%); }
.cmp-product-thumb .thumb-image .prop-1-1 { position: relative; }
.cmp-product-thumb .thumb-image .prop-1-1 > img {
  position: absolute; inset: 0; margin: auto; width: auto; height: auto;
  max-width: min(78%, 260px); max-height: 78%; object-fit: contain;
  mix-blend-mode: multiply; transition: transform .45s var(--kfm-tempo);
}
.cmp-product-thumb:hover .thumb-image .prop-1-1 > img { transform: scale(1.06); }
.cmp-product-thumb .thumb-content { display: block; width: 100%; padding: 14px 16px 18px !important; }
/* Nicht kürzen: Am Ende des Namens steht die Modellnummer, nach der Kunden suchen. */
.cmp-product-thumb .thumb-title {
  display: block; min-height: 4.2em; line-height: 1.4; color: var(--kfm-text) !important; font-weight: 600; transition: color .2s ease;
}
.cmp-product-thumb .price-gross-net-cat { flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: .6em; }
.cmp-product-thumb .price-view-port { width: auto; }
.cmp-product-thumb .crossprice { white-space: nowrap; }
.cmp-product-thumb:hover .thumb-title { color: var(--kfm-blau) !important; }
.cmp-product-thumb .cmp-price { color: var(--kfm-blau); letter-spacing: -.01em; }
.cmp-product-thumb .crossprice { font-size: .78em; opacity: .85; }
.cmp-product-thumb .text-muted { font-size: .82em; }

/* --- Top Seller auf der Startseite --------------------------------------- */
.widget-item-list.topSellerStartseite {
  position: relative; padding: 40px 0 16px; margin: 24px 0 40px;
}
.widget-item-list.topSellerStartseite::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background:
    radial-gradient(900px 300px at 85% 0%, rgba(190, 214, 48, .16), transparent 70%),
    linear-gradient(180deg, var(--kfm-grund) 0%, #fff 100%);
}
.widget-item-list.topSellerStartseite .widget-caption {
  background: none !important; border: 0 !important; padding: 0 !important; margin-bottom: 24px !important;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.widget-item-list.topSellerStartseite .widget-caption h2 {
  margin: 0; color: var(--kfm-petrol) !important; font-size: clamp(26px, 2.6vw, 38px) !important; font-weight: 800; letter-spacing: -.01em;
}
.widget-item-list.topSellerStartseite .widget-caption h2::before {
  content: "Am häufigsten bestellt"; display: block; margin-bottom: .45em;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--kfm-blau); font-weight: 700;
}
.widget-item-list.topSellerStartseite .widget-caption h2::after {
  content: ""; display: block; width: 56px; height: 4px; margin-top: .35em; background: var(--kfm-lime); border-radius: 4px;
}
.widget-item-list.topSellerStartseite .widget-caption > a {
  border: 1.5px solid var(--kfm-petrol); border-radius: 999px; padding: .5em 1.2em; color: var(--kfm-petrol) !important;
  font-weight: 600; transition: background-color .2s ease, color .2s ease;
}
.widget-item-list.topSellerStartseite .widget-caption > a:hover { background: var(--kfm-petrol); color: #fff !important; text-decoration: none; }
.widget-item-list.topSellerStartseite .owl-nav button,
.widget-item-list.topSellerStartseite .owl-nav [class*=owl-] {
  width: 44px; height: 44px; border-radius: 50% !important; background: #fff !important; box-shadow: var(--kfm-schatten); color: var(--kfm-petrol) !important;
}

/* --- Filialen auf der Startseite (Code-Widget, Inhalt 6313) -------------- */
.kfm-filialen {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); overflow: hidden;
  border-radius: calc(var(--kfm-radius) + 4px); background: var(--kfm-petrol); color: #fff; box-shadow: var(--kfm-schatten-hoch);
}
.kfm-filialen__text { position: relative; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.kfm-filialen__zeile { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--kfm-lime); margin: 0 0 .6em; }
.kfm-filialen h2 { color: #fff !important; font-size: clamp(28px, 3vw, 44px) !important; font-weight: 800; line-height: 1.08; margin: 0 0 .4em; letter-spacing: -.01em; }
.kfm-filialen h2 span { color: var(--kfm-lime); }
.kfm-filialen__satz { color: rgba(255, 255, 255, .88); font-size: clamp(14px, 1.15vw, 17px); line-height: 1.55; max-width: 30em; margin: 0 0 1.4em; }
.kfm-filialen__knopf {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .5em; padding: .8em 1.4em; border-radius: 999px;
  background: var(--kfm-lime); color: var(--kfm-petrol) !important; font-weight: 700; text-decoration: none !important;
  transition: transform .2s var(--kfm-tempo), box-shadow .2s ease;
}
.kfm-filialen__knopf:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(190, 214, 48, .35); }
.kfm-filialen__bild { position: relative; min-height: 360px; background: url("../images/filialen/nienburg.jpg") center 60% / cover no-repeat; }
.kfm-filialen__bild::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--kfm-petrol) 0%, rgba(17, 57, 70, .55) 22%, rgba(17, 57, 70, .15) 60%, rgba(17, 57, 70, .35) 100%);
}
.kfm-filialen__orte {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 18px; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px;
}
.kfm-filialen__orte a {
  display: block; height: 100%; padding: 12px 14px; border-radius: var(--kfm-radius-klein); text-decoration: none !important;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); color: #fff !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  transition: background-color .2s ease, transform .2s var(--kfm-tempo);
}
.kfm-filialen__orte a:hover { background: rgba(255, 255, 255, .26); transform: translateY(-2px); }
.kfm-filialen__orte strong { display: block; font-size: 15px; margin-bottom: 2px; }
.kfm-filialen__orte strong::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--kfm-lime); vertical-align: 1px; }
.kfm-filialen__orte span { display: block; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, .86); }
.kfm-filialen__orte .kfm-neu strong::after {
  content: "neu"; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--kfm-lime); color: var(--kfm-petrol);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px;
}
@media (max-width: 991.98px) {
  .kfm-filialen { grid-template-columns: 1fr; }
  .kfm-filialen__bild { min-height: 0; }
  .kfm-filialen__bild::before { background: linear-gradient(180deg, var(--kfm-petrol) 0%, rgba(17, 57, 70, .7) 30%, rgba(17, 57, 70, .55) 100%); }
  .kfm-filialen__orte { position: relative; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 16px; }
}

/* --- Kategorieseite: Seitenleiste, Filter, Sortierung, Seitenzahlen ------- */
.widget-navigation-tree .badge,
.page-category .badge { border-radius: 999px; }
.widget-filter-base { border-radius: var(--kfm-radius-klein); overflow: hidden; }
.page-category .custom-select { border-radius: var(--kfm-radius-klein); border-color: var(--kfm-linie); }
.pagination .page-item .page-link { border-radius: 999px !important; margin: 0 3px; border-color: var(--kfm-linie); min-width: 2.3em; text-align: center; transition: background-color .2s ease, color .2s ease; }
.pagination .page-item.active .page-link { background: var(--kfm-petrol) !important; border-color: var(--kfm-petrol) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(17, 57, 70, .25); }
.pagination .page-item:not(.active) .page-link:hover { background: var(--kfm-grund); }

/* --- Artikelseite -------------------------------------------------------- */
.page-singleitem .single .owl-carousel .owl-stage-outer,
.page-singleitem .single .single-carousel { border-radius: var(--kfm-radius); }
.page-singleitem .single .nav-tabs { border-radius: var(--kfm-radius) var(--kfm-radius) 0 0; overflow: hidden; border: 0; }
.page-singleitem .single .nav-tabs .nav-link { border: 0 !important; position: relative; transition: color .2s ease; }
.page-singleitem .single .nav-tabs .nav-link::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; background: var(--kfm-lime);
  transform: scaleX(0); transition: transform .25s var(--kfm-tempo);
}
.page-singleitem .single .nav-tabs .nav-link.active::after,
.page-singleitem .single .nav-tabs .nav-link:hover::after { transform: scaleX(1); }
.page-singleitem .single .qty-box { border-radius: var(--kfm-radius-klein); overflow: hidden; }
/* Bestellmerkmale (Altgeräte-Mitnahme usw.): Der Gruppenname sitzt als Legende auf dem Rahmen. Bei großer
   Systemschrift (S25 Ultra, 23.10.2026) brach er um und lag über dem gewählten Wert. Am Handy deshalb eine
   Spalte statt zwei, und der Name bleibt einzeilig. */
.option-container > div .label { white-space: nowrap; max-width: calc(100% - .75em); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) {
  .order-property-slider .order-property-slider-inner > div { width: 100%; float: none; }
}
/* Kaufbereich (Spalte mit dem Preis) als Karte */
.page-singleitem .single .widget-two-col > .widget-inner:has(.widget-item-price) > * {
  background: #fff; border: 1px solid var(--kfm-linie); border-radius: var(--kfm-radius);
  padding: clamp(16px, 2vw, 28px); box-shadow: var(--kfm-schatten);
}
.page-singleitem .single .widget-two-col > .widget-inner:has(.widget-item-price) .widget-item-price .price { color: var(--kfm-blau); }

/* --- Herstellerlogos: ruhig grau, beim Darüberfahren farbig --------------- */
.logoSlider img, #logo-slider img { filter: grayscale(1); opacity: .7; transition: filter .3s ease, opacity .3s ease, transform .3s var(--kfm-tempo); }
.logoSlider img:hover, #logo-slider img:hover { filter: none; opacity: 1; transform: scale(1.04); }

/* --- Fuß ----------------------------------------------------------------- */
.footer { position: relative; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--kfm-lime), #8fb31f 40%, var(--kfm-blau)); }
.footer a { transition: color .2s ease; }
.footer .footerList a:hover, .footer a:hover { color: var(--kfm-lime) !important; text-decoration: none; }
.back-to-top { border-radius: 50% !important; width: 48px; height: 48px; box-shadow: var(--kfm-schatten-hoch); transition: transform .2s var(--kfm-tempo); }
.back-to-top:hover { transform: translateY(-3px); }

/* --- Einblenden beim Scrollen (Klassen setzt Scripts.twig) ---------------- */
.kfm-js .kfm-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--kfm-tempo), transform .7s var(--kfm-tempo); }
.kfm-js .kfm-reveal.kfm-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .kfm-js .kfm-reveal { opacity: 1; transform: none; }
  .cmp-product-thumb:hover, .cmp-product-thumb:hover .thumb-image .prop-1-1 > img { transform: none; }
}

/* ==========================================================================
   Barrierefreiheit (BFSG, Maßstab WCAG 2.1 AA), 23.10.2026
   Befunde aus axe-core 4.10 und Handprüfung, Liste im Vault „Barrierefreiheit Shop“.
   ========================================================================== */
/* 2.4.1 Sprunglink: unsichtbar, bis er den Fokus bekommt */
.kfm-sprunglink {
  position: fixed; z-index: 3000; left: 16px; top: -80px; padding: .7em 1.2em; border-radius: var(--kfm-radius-klein);
  background: var(--kfm-lime); color: var(--kfm-petrol) !important; font-weight: 700; text-decoration: none !important;
  transition: top .15s ease;
}
.kfm-sprunglink:focus { top: 12px; }
#page-body:focus { outline: none; }

/* 2.4.7 / 1.4.11 Fokus: Lime-Ring mit dunklem Innenring, sichtbar auf hellem und dunklem Grund */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--kfm-lime) !important; outline-offset: 2px; box-shadow: 0 0 0 2px var(--kfm-petrol) !important;
}

/* 2.1.1 Tastatur: Untermenüs öffnen auch, wenn ein Eintrag darin den Fokus hat */
header .mainmenu > li.ddown:focus-within > ul { visibility: visible !important; opacity: 1 !important; }

/* 1.4.3 Kontrast: Unterzeilen im Kopf (#0099d0 auf Blau = 2,77:1) → 7,0:1 */
#page-header .subtitle, #page-header .badge.p-0 { color: #cfe6f5 !important; }
/* Streichpreis auf der Artikelseite (rot = 4,0:1) → #cc0000 = 5,9:1; in den Kacheln steht er in CategoryItem.twig */
.single .crossprice, .single del { color: #cc0000 !important; }

/* 2.2.2 Pause-Knopf für den Startseiten-Slider (setzt Scripts.twig) */
.kfm-pause {
  position: absolute; z-index: 5; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(17, 57, 70, .85); color: #fff; font-size: 16px; line-height: 44px; text-align: center; cursor: pointer;
}
.kfm-pause:hover { background: var(--kfm-petrol); }

/* 2.1.1 / 4.1.2 Kasse: plentyShop versteckt die Optionsfelder für Versand- und Zahlungsart mit display:none,
   damit waren sie per Tastatur und Bildschirmleser nicht wählbar. Unsichtbar, aber fokussierbar; der
   Fokusrahmen sitzt am Label. */
.method-list .method-list-item { position: relative; }
.method-list .method-list-item > input[type=radio] {
  display: block !important; position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.method-list .method-list-item > input[type=radio]:focus-visible + label {
  outline: 3px solid var(--kfm-lime) !important; outline-offset: 2px; box-shadow: 0 0 0 2px var(--kfm-petrol) !important;
}